:root {
    color-scheme: light;
    --ps-bg: #f4f6f8;
    --ps-surface: #ffffff;
    --ps-surface-soft: #f7f9fb;
    --ps-border: #d9e0e7;
    --ps-border-strong: #bcc7d2;
    --ps-text: #18212b;
    --ps-muted: #5f6f7f;
    --ps-primary: #0f766e;
    --ps-primary-hover: #115e59;
    --ps-primary-soft: #e7f4f2;
    --ps-accent: #2563eb;
    --ps-danger: #b4233d;
    --ps-danger-soft: #fff0f2;
    --ps-success: #137a4b;
    --ps-warning: #8a5a00;
    --ps-topbar: #17202a;
    --ps-radius-sm: 6px;
    --ps-radius: 8px;
    --ps-shadow-sm: 0 1px 2px rgba(24, 33, 43, .06);
    --ps-shadow-md: 0 8px 24px rgba(24, 33, 43, .09);
    --ps-focus: 0 0 0 3px rgba(15, 118, 110, .2);
}

*, *::before, *::after {
    box-sizing: border-box;
    letter-spacing: 0;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ps-text);
    background: var(--ps-bg);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--ps-primary); text-underline-offset: 3px; }
a:hover { color: var(--ps-primary-hover); }
img, svg { display: block; max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--ps-primary);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 9999;
    padding: .65rem 1rem;
    color: #fff;
    background: var(--ps-primary);
    border-radius: var(--ps-radius-sm);
    text-decoration: none;
}

.skip-link:focus { top: 1rem; }

.ps-app { min-height: 100vh; }

.ps-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 64px;
    padding: .65rem clamp(1rem, 3vw, 2.25rem);
    color: #dce4ec;
    background: var(--ps-topbar);
    border-bottom: 1px solid #293746;
    box-shadow: 0 3px 12px rgba(24, 33, 43, .14);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex: 0 0 auto;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 750;
    text-decoration: none;
}

.brand:hover { color: #fff; }

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    color: #fff;
    background: var(--ps-primary);
    border: 1px solid #2a9b91;
    border-radius: var(--ps-radius-sm);
    font-size: .75rem;
    font-weight: 800;
}

.ps-nav {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex: 1;
    min-width: 0;
}

.ps-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .5rem .72rem;
    color: #b7c4d1;
    border-radius: var(--ps-radius-sm);
    font-size: .88rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.ps-nav a:hover { color: #fff; background: #263442; }
.ps-nav a.active { color: #fff; background: #0f766e; }

.user-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    flex: 0 0 auto;
}

.user-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 190px;
    margin-right: .25rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: #35c784;
    border-radius: 50%;
}

.user-name {
    overflow: hidden;
    color: #d3dde7;
    font-size: .85rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-area form { margin: 0; }

.user-area a, .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .42rem .62rem;
    color: #b7c4d1;
    background: transparent;
    border: 0;
    border-radius: var(--ps-radius-sm);
    cursor: pointer;
    font-size: .85rem;
    font-weight: 620;
    text-decoration: none;
}

.user-area a:hover, .link-button:hover { color: #fff; background: #263442; }

main { min-height: calc(100vh - 64px); }

.ps-content, .page-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(1.35rem, 4vw, 2.6rem) clamp(1rem, 3vw, 2rem) 4rem;
}

.page-shell-narrow { width: min(720px, 100%); }
.history-content { width: min(1020px, 100%); }

.ps-page-header, .page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

h1, h2, h3, h4, h5 {
    color: var(--ps-text);
    line-height: 1.2;
}

.ps-page-header h1, .page-heading h1, .page-shell > h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 780;
}

.subtitle, .muted { color: var(--ps-muted); }
.subtitle { margin: .35rem 0 0; font-size: .94rem; }

.eyebrow {
    margin: 0 0 .32rem;
    color: var(--ps-primary);
    font-size: .73rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ps-search {
    position: relative;
    margin: 0 0 1.1rem;
}

.ps-search::before {
    content: "";
    position: absolute;
    left: .95rem;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 2px solid #8291a1;
    border-radius: 50%;
    transform: translateY(-58%);
    pointer-events: none;
}

.ps-search::after {
    content: "";
    position: absolute;
    left: 1.73rem;
    top: calc(50% + 5px);
    width: 6px;
    height: 2px;
    background: #8291a1;
    transform: rotate(45deg);
    pointer-events: none;
}

.ps-search input {
    width: 100%;
    min-height: 46px;
    padding: .65rem 1rem .65rem 2.65rem;
    color: var(--ps-text);
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-sm);
}

.ps-search input:focus {
    outline: 0;
    border-color: var(--ps-primary);
    box-shadow: var(--ps-focus);
}

.ps-card {
    position: relative;
    margin-bottom: .8rem;
    padding: 1rem 1.15rem;
    overflow: hidden;
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-sm);
}

.ps-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ps-accent);
}

.ps-card:hover { border-color: var(--ps-border-strong); box-shadow: var(--ps-shadow-md); }
.ps-card-row { display: flex; align-items: center; gap: .72rem; min-width: 0; }
.ps-card-row + .ps-card-row { margin-top: .68rem; padding-top: .68rem; border-top: 1px solid #edf1f4; }

.ps-name {
    min-width: 0;
    overflow: hidden;
    color: var(--ps-text);
    font-size: 1.03rem;
    font-weight: 750;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-name::after { content: " ↗"; color: #7a8998; font-size: .8em; }
.ps-name:hover { color: var(--ps-primary); }
.ps-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .38rem; margin-left: auto; }
.ps-link-row { display: flex; align-items: center; gap: .45rem; min-width: 0; }

.ps-link-row a {
    min-width: 0;
    overflow: hidden;
    color: #465768;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: .83rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-link-row a:hover { color: var(--ps-primary); text-decoration: underline; }
.ps-creds { display: flex; align-items: center; flex: 1; flex-wrap: wrap; gap: .65rem 1rem; min-width: 0; }

.ps-cred {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    min-width: 0;
    padding: .22rem .32rem .22rem .48rem;
    background: var(--ps-surface-soft);
    border: 1px solid #e8edf1;
    border-radius: var(--ps-radius-sm);
    font-size: .85rem;
}

.ps-cred .label { color: var(--ps-muted); font-size: .67rem; font-weight: 800; text-transform: uppercase; }

.ps-cred .value {
    max-width: 280px;
    overflow: hidden;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-cred .masked { color: #647483; }
.ps-updated { flex: 0 0 auto; margin-left: auto; color: var(--ps-muted); font-size: .75rem; white-space: nowrap; }

.ps-btn, .ps-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    color: #304152;
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-sm);
    box-shadow: 0 1px 1px rgba(24, 33, 43, .03);
    cursor: pointer;
    font-size: .81rem;
    font-weight: 680;
    line-height: 1.2;
    text-decoration: none;
}

.ps-btn { padding: .47rem .72rem; }
.ps-icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: .25rem; }
.ps-btn:hover, .ps-icon-btn:hover { color: var(--ps-primary-hover); background: var(--ps-primary-soft); border-color: #a9d6d1; }
.ps-reveal-btn { width: auto; min-width: 52px; padding-inline: .48rem; }
.ps-btn:focus-visible, .ps-icon-btn:focus-visible, .ps-input:focus-visible { outline: 0; box-shadow: var(--ps-focus); }
.ps-btn:disabled, .ps-icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.ps-btn-primary { color: #fff; background: var(--ps-primary); border-color: var(--ps-primary); }
.ps-btn-primary:hover { color: #fff; background: var(--ps-primary-hover); border-color: var(--ps-primary-hover); }
.ps-btn-danger { color: var(--ps-danger); background: #fff; border-color: #efb8c2; }
.ps-btn-danger:hover { color: #8f1730; background: var(--ps-danger-soft); border-color: #dc8ea0; }

.ps-card-form, .surface-card {
    margin-bottom: 1.2rem;
    padding: clamp(1rem, 3vw, 1.4rem);
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-sm);
}

.ps-card-form h5 { margin: 0 0 .95rem; font-size: 1.02rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95rem; }
.form-field { min-width: 0; }
.form-field-wide { grid-column: 1 / -1; }

.form-field label, .ps-form-group label {
    display: block;
    margin-bottom: .35rem;
    color: #304152;
    font-size: .83rem;
    font-weight: 700;
}

.ps-input, .form-control {
    width: 100%;
    min-height: 43px;
    padding: .6rem .75rem;
    color: var(--ps-text);
    background: #fff;
    border: 1px solid var(--ps-border-strong);
    border-radius: var(--ps-radius-sm);
    font-size: .91rem;
}

textarea.ps-input { min-height: 96px; resize: vertical; }
.ps-input:hover { border-color: #96a5b4; }
.ps-input:focus, .form-control:focus { outline: 0; border-color: var(--ps-primary); box-shadow: var(--ps-focus); }
.input-action-row { display: flex; align-items: stretch; gap: .45rem; }
.input-action-row .ps-input { flex: 1; min-width: 0; }

.form-divider {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    margin: 1.15rem 0 .85rem;
    padding-top: .95rem;
    border-top: 1px solid var(--ps-border);
}

.form-divider span { font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.form-divider p { margin: 0; color: var(--ps-muted); font-size: .81rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .48rem; margin-top: 1.05rem; }
.field-hint { display: block; margin-top: .35rem; color: var(--ps-muted); font-size: .78rem; }
.validation-message, .validation-summary, .text-danger { color: var(--ps-danger); font-size: .81rem; }
.validation-message { display: block; margin-top: .28rem; }
.validation-summary ul { margin: .35rem 0; padding-left: 1.1rem; }
.admin-create-grid { grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.4fr) auto auto; align-items: end; }
.key-create-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    color: #304152;
    font-size: .84rem;
    font-weight: 650;
    white-space: nowrap;
}

.checkbox-field input { width: 18px; height: 18px; accent-color: var(--ps-primary); }
.checkbox-field:has(input:disabled) { color: #8c99a6; }
.form-submit-field { display: flex; align-items: end; }
.form-submit-field .ps-btn { min-height: 43px; }
.reset-panel { margin-top: 1.2rem; border-color: #9acac5; }

.scope-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: 1rem 0 0;
    padding: .8rem .9rem;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-sm);
}

.scope-picker legend { padding: 0 .35rem; color: #304152; font-size: .82rem; font-weight: 750; }
.scope-list { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 180px; }
.key-reveal { display: grid; gap: .6rem; }

.key-reveal code {
    display: block;
    padding: .65rem .75rem;
    overflow-wrap: anywhere;
    color: #563800;
    background: #fff;
    border: 1px solid #e7cf98;
    border-radius: var(--ps-radius-sm);
    user-select: all;
}

.key-reveal .ps-btn { justify-self: start; }
.text-end { text-align: right !important; }

.ps-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-sm);
}

.ps-table { width: 100%; min-width: 680px; background: var(--ps-surface); border-collapse: collapse; }

.ps-table th, .ps-table td {
    padding: .75rem .85rem;
    text-align: left;
    border-bottom: 1px solid var(--ps-border);
    font-size: .85rem;
    vertical-align: middle;
}

.ps-table th {
    color: #516273;
    background: #f5f7f9;
    font-size: .69rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.ps-table tbody tr:hover { background: #f9fbfc; }
.ps-table tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; justify-content: flex-end; gap: .38rem; white-space: nowrap; }

.ps-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.ps-badge-success { color: #0d6840; background: #dff5e9; }
.ps-badge-danger { color: #921d35; background: #ffe3e8; }
.ps-badge-neutral { color: #465768; background: #e8edf1; }

.ps-alert {
    margin: .75rem 0;
    padding: .72rem .85rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-sm);
    font-size: .86rem;
}

.ps-alert-info { color: #174a8c; background: #edf5ff; border-color: #b8d3f4; }
.ps-alert-danger { color: #921d35; background: var(--ps-danger-soft); border-color: #efb8c2; }
.ps-alert-success { color: #0d6840; background: #e8f7ef; border-color: #a9ddc1; }
.ps-alert-warning { color: #704900; background: #fff7e6; border-color: #e7cf98; }

.ps-empty {
    padding: 3rem 1rem;
    color: var(--ps-muted);
    background: rgba(255, 255, 255, .65);
    border: 1px dashed var(--ps-border-strong);
    border-radius: var(--ps-radius);
    text-align: center;
}

.ps-empty p { margin: 0; }

.ps-toast-container {
    position: fixed;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: 2000;
    max-width: min(390px, calc(100vw - 2rem));
}

.ps-toast {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    color: #f7f9fb;
    background: #17202a;
    border: 1px solid #354454;
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-md);
    font-size: .86rem;
}

.ps-toast span { flex: 1; }
.ps-toast button { display: grid; place-items: center; width: 32px; height: 32px; color: #c7d2dc; background: transparent; border: 0; border-radius: var(--ps-radius-sm); cursor: pointer; font-size: 1.1rem; }
.ps-toast button:hover { color: #fff; background: #2b3947; }

.auth-page {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 64px);
    padding: 2rem 1rem;
    background: #edf1f4;
}

.auth-card {
    width: min(430px, 100%);
    padding: 2rem;
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-md);
}

.auth-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.45rem; }
.auth-brand .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
.brand-copy { display: flex; flex-direction: column; }
.brand-copy strong { font-size: 1.05rem; line-height: 1.2; }
.brand-copy span { color: var(--ps-muted); font-size: .78rem; }
.auth-card h1 { margin: 0; font-size: 1.45rem; }
.auth-intro { margin: .32rem 0 1.25rem; color: var(--ps-muted); font-size: .9rem; }
.auth-form { display: grid; gap: .85rem; }
.auth-form .ps-btn { width: 100%; min-height: 45px; margin-top: .25rem; }
.table-url { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.ps-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(15, 118, 110, .2);
    border-top-color: var(--ps-primary);
    border-radius: 50%;
    animation: ps-spin .75s linear infinite;
}

@keyframes ps-spin { to { transform: rotate(360deg); } }

#blazor-error-ui {
    position: fixed;
    inset: auto 0 0;
    z-index: 5000;
    display: none;
    padding: .8rem 1rem;
    color: #fff;
    background: #8f1730;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .2);
}

#blazor-error-ui .reload { color: #fff; margin-left: .5rem; }
#blazor-error-ui .dismiss { position: absolute; right: 1rem; color: #fff; background: transparent; border: 0; cursor: pointer; }

@media (max-width: 940px) {
    .ps-topbar { display: grid; grid-template-columns: 1fr auto; gap: .3rem .7rem; padding-block: .52rem; }
    .ps-nav { grid-column: 1 / -1; order: 3; overflow-x: auto; scrollbar-width: thin; }
    .ps-nav a { min-height: 37px; }
    .user-name { display: none; }
    .admin-create-grid { grid-template-columns: 1fr 1fr; }
    .key-create-grid { grid-template-columns: 1fr 1fr; }
    .ps-card-row:last-child { align-items: flex-start; flex-direction: column; }
    .ps-updated { margin-left: 0; }
}

@media (max-width: 680px) {
    body { font-size: 15px; }
    .brand { font-size: 1rem; }
    .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
    .user-area .password-link { font-size: 0; }
    .password-link::after { content: "Hasło"; font-size: .78rem; }
    .ps-content, .page-shell { padding-inline: .8rem; padding-top: 1.2rem; }
    .ps-page-header, .page-heading { align-items: stretch; flex-direction: column; }
    .ps-page-header h1, .page-heading h1, .page-shell > h1 { font-size: 1.65rem; }
    .ps-page-header > .ps-btn { width: 100%; }
    .ps-card { padding: .85rem; }
    .ps-card-row:first-child { align-items: flex-start; flex-direction: column; }
    .ps-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
    .ps-actions .ps-btn { flex: 1; min-width: max-content; }
    .ps-link-row { width: 100%; }
    .ps-creds { align-items: stretch; flex-direction: column; width: 100%; }
    .ps-cred { width: 100%; }
    .ps-cred .value { flex: 1; max-width: 100%; }
    .form-grid, .admin-create-grid, .key-create-grid { grid-template-columns: 1fr; }
    .form-divider { align-items: flex-start; flex-direction: column; gap: .22rem; }
    .input-action-row { align-items: stretch; flex-direction: column; }
    .scope-picker { align-items: flex-start; flex-direction: column; }
    .ps-toast-container { right: .7rem; bottom: .7rem; left: .7rem; max-width: none; }
    .auth-page { min-height: calc(100vh - 102px); padding: 1rem .8rem; }
    .auth-card { padding: 1.35rem; }
}

@media (max-width: 420px) {
    .ps-nav a { padding-inline: .6rem; font-size: .8rem; }
    .link-button { padding-inline: .48rem; }
    .ps-actions .ps-btn { width: 100%; }
    .table-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}