:root{
    color-scheme:dark;
    --bg:#0b1014;--panel:#11181e;--panel-soft:#182128;--input:#0d1419;
    --line:#253039;--text:#e9eef1;--muted:#9aa8b2;--accent:#72dcd5;
    --accent-dark:#173332;--success:#9bcbb1;--danger:#f4a0a8;--radius:14px;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{min-height:100vh;margin:0;color:var(--text);background:var(--bg);font:14px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,textarea{font:inherit}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
::selection{color:var(--text);background:#285452}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Shared shell: restrained color and a clear current location. */
.topbar{min-height:76px;padding:14px max(24px,calc((100% - 1160px)/2));display:flex;align-items:center;gap:44px;border-bottom:1px solid var(--line);background:var(--bg)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:15px;font-weight:650;letter-spacing:-.02em;white-space:nowrap}
.brand-mark{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid #34605e;border-radius:10px;color:var(--accent);background:var(--accent-dark);font-size:18px;font-weight:650}
.main-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.main-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;text-decoration:none;color:var(--muted);border-radius:8px}
.main-nav a[aria-current]{color:var(--text);background:var(--panel-soft)}
.main-nav a[aria-current]::after{content:"";position:absolute;bottom:5px;left:14px;width:14px;height:2px;border-radius:2px;background:var(--accent)}
.user-area{margin-left:auto;display:flex;align-items:center;gap:20px;text-align:right;min-width:0}
.user-area div{display:flex;flex-direction:column;min-width:0}
.user-area strong{font-size:13px;font-weight:600}
.user-area span{color:var(--muted);font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-area .button{color:var(--muted);background:transparent}
.page{width:min(1160px,calc(100% - 48px));margin:0 auto;padding:44px 0 72px}
.skip-link{position:fixed;z-index:10;top:-100px;left:16px;padding:12px 18px;border-radius:8px;color:var(--bg);background:var(--accent)}
.skip-link:focus{top:12px}

/* Hierarchy comes from typography and spacing rather than effects. */
h1,h2,p{margin-top:0}
h1{margin-bottom:12px;font-size:clamp(28px,3vw,36px);line-height:1.2;letter-spacing:-.035em;font-weight:600}
h2{margin-bottom:12px;font-size:19px;line-height:1.4;letter-spacing:-.02em;font-weight:600}
.eyebrow{margin-bottom:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:650}
.lead{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:0;max-width:620px}
.lead strong{color:var(--text);font-weight:500}
.hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}
.hero>div{min-width:0}.hero>.button{flex-shrink:0}
.muted,.client-details dt{color:var(--muted)}
.back-link{display:inline-block;margin-bottom:28px;font-size:13px}
.break-word{overflow-wrap:anywhere}
.auth-card,.content-card,.error-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.content-card{padding:28px}
.notice{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.7}
.check-list{display:grid;gap:10px;padding-left:20px;color:var(--muted)}
.check-list li::marker{color:var(--success)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 17px;border:1px solid transparent;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;line-height:1.4;text-decoration:none;white-space:nowrap;transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease}
.button-primary{color:#0b2423;background:var(--accent)}
.button-quiet{color:var(--text);border-color:var(--line);background:transparent}
.button:disabled{opacity:.45;cursor:not-allowed}
.text-link{color:var(--accent);font-weight:500;text-decoration:none;text-underline-offset:4px}
.text-link:hover{text-decoration:underline}

/* Comfortable fields, including touch screens and keyboard focus. */
.form-stack{display:grid;gap:20px;margin-bottom:0}
.form-stack label{display:grid;gap:8px;color:#c3cdd3;font-size:13px;font-weight:500}
.form-stack input:not([type=submit]),.form-stack textarea,.client-search input{width:100%;min-width:0;height:46px;padding:11px 13px;border:1px solid #303d46;border-radius:8px;color:var(--text);background:var(--input);font-size:16px;transition:border-color 140ms ease,box-shadow 140ms ease}
input::placeholder,textarea::placeholder{color:#82939f;opacity:1;font-size:13px}
.form-stack input:focus-visible,.form-stack textarea:focus-visible,.client-search input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #72dcd51a}
.form-stack textarea{height:auto;min-height:120px;resize:vertical}
.form-field{display:grid;gap:8px;align-content:start;min-width:0}
.form-grid,.client-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.full-width{grid-column:1/-1}
.client-form-card{max-width:880px}
.form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.field-error{color:var(--danger);font-size:12px;font-weight:400}
.messages{display:grid;gap:10px;margin-bottom:24px}
.message{padding:12px 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel)}
.message-error{border-color:#65373c;color:#f5bdc2;background:#23181d}
.message-success{border-color:#2d5040;color:#b0dcc2;background:#13211b}
.message-warning{border-color:#635331;color:#e6d39f;background:#231f16}

/* A unified summary strip avoids competing cards. */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:24px;padding:24px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.metric-card{display:grid;gap:10px;padding:0 28px}
.metric-card+.metric-card{border-left:1px solid var(--line)}
.metric-card span{color:var(--muted);font-size:13px}
.metric-card small{color:var(--muted);font-size:12px}
.metric-card strong{color:var(--text);font-size:32px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.03em}
.metric-card .text-link{font-size:12px}
.status-pill{display:inline-flex;align-items:center;gap:8px;color:var(--success);font-size:12px;font-weight:500;white-space:nowrap}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status-archived{color:var(--muted)}

/* Understated lists and empty states. */
.client-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.client-toolbar>.muted{font-size:12px}
.tabs{display:inline-flex;gap:22px;flex-wrap:wrap}
.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;color:var(--muted);border-bottom:2px solid transparent;text-decoration:none;font-size:13px}
.tabs a[aria-current]{color:var(--text);border-color:var(--accent)}
.client-search{display:flex;align-items:center;gap:12px;margin:22px 0 12px}
.client-search .text-link{font-size:13px}
.table-scroll{overflow-x:auto}
.clients-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}
.clients-table th{color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.03em}
.clients-table th,.clients-table td{padding:18px 12px;border-bottom:1px solid var(--line)}
.clients-table td{max-width:320px;overflow-wrap:anywhere}
.clients-table th:first-child,.clients-table td:first-child{padding-left:0}
.clients-table th:last-child,.clients-table td:last-child{padding-right:0;text-align:right}
.clients-table tbody tr:last-child td{border-bottom:0}
.clients-table small{display:block;color:var(--muted);margin-top:4px}
.client-name{font-weight:500;text-decoration:none}
.nowrap{white-space:nowrap}
.empty-state{padding:52px 12px 40px;text-align:center}
.empty-state h2{font-size:18px}
.empty-state p{color:var(--muted);max-width:410px;margin:0 auto 22px;font-size:13px}
.empty-mark{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);color:var(--muted);font-size:23px;font-weight:300}
.pagination{display:flex;justify-content:flex-end;gap:14px;align-items:center;flex-wrap:wrap;margin-top:20px;color:var(--muted);font-size:12px}
.client-details{margin-bottom:0;row-gap:28px}
.client-details dt{font-size:12px}
.client-details dd{margin:6px 0 0;overflow-wrap:anywhere}
.preserve-lines{white-space:pre-wrap}
.archive-panel{margin-top:24px;background:transparent}
.archive-panel summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--muted)}
.archive-panel p{margin-top:18px}
.auth-page{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:36px 0}
.auth-card{width:min(440px,100%);padding:36px;box-shadow:0 12px 36px #00000018}
.auth-card h1{font-size:28px}
.auth-card .lead{margin-bottom:28px}
.auth-card>.text-link{display:inline-block;margin-top:22px;font-size:13px}
.error-card{max-width:600px;margin:10vh auto;padding:40px;text-align:center}
.error-card>span{color:var(--muted);font-size:12px;letter-spacing:.12em}
.error-card p{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(hover:hover){
    .button-primary:hover{background:#95e6e0}
    .button-quiet:hover,.main-nav a:hover{color:var(--text);background:var(--panel-soft);border-color:#3a4953}
    .tabs a:hover,.client-name:hover{color:var(--accent)}
    .clients-table tbody tr:hover{background:#ffffff03}
    .form-stack input:hover,.form-stack textarea:hover,.client-search input:hover{border-color:#485b67}
}
@media(max-width:760px){
    .topbar{padding:12px 20px;flex-wrap:wrap;gap:12px}.user-area div{display:none}
    .main-nav{order:3;flex-basis:100%;gap:6px}
    .page{width:calc(100% - 32px);padding-top:28px}
    .hero{align-items:flex-start;flex-wrap:wrap;gap:20px;margin-bottom:24px}.hero>div{flex-basis:100%}
    .content-card{padding:20px}.form-grid,.client-details{grid-template-columns:1fr;gap:20px}
    .client-search{flex-wrap:wrap}.client-search input{flex-basis:100%}
    .empty-state{padding:36px 0 20px}.form-actions .button{flex:1}
    .metric-card{padding:0 18px}.auth-card{padding:28px 24px}.auth-page{padding:24px 0}
    .clients-table th,.clients-table td{padding:14px 10px}
}
@media(max-width:480px){
    .metrics{grid-template-columns:1fr;padding:0 20px}
    .metric-card{grid-template-columns:1fr auto;align-items:center;gap:4px 16px;padding:18px 0}
    .metric-card+.metric-card{border-left:0;border-top:1px solid var(--line)}
    .metric-card strong{grid-column:2;grid-row:1/3;font-size:28px}
    .metric-card small,.metric-card .text-link{grid-column:1}
    .client-toolbar{gap:12px}.client-toolbar>.muted{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}