:root{
  --ink:#0E1B2A;--ink-2:#14273b;--paper:#F4F2EC;--brass:#B08D57;--brass-d:#96733F;
  --text:#20303f;--muted:#68727e;--line:#e2ddd2;--line-d:rgba(255,255,255,.12);
  --white:#fff;--danger:#b04a4a;--ok:#4c7a4c;--warn:#b0863f;
  --serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--text);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}
.admin{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{width:264px;flex:none;background:var(--ink);color:rgba(255,255,255,.8);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;gap:12px;align-items:center;padding:22px 22px;border-bottom:1px solid var(--line-d)}
.side-brand .seal{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--ink-2);border:1px solid var(--brass);color:var(--brass);font-family:var(--serif);font-weight:600}
.side-brand strong{display:block;color:#fff;font-family:var(--serif);font-size:1.02rem;line-height:1.2}
.side-brand small{color:var(--brass);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.side-nav{padding:16px 12px;flex:1;overflow-y:auto}
.side-nav a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:6px;color:rgba(255,255,255,.72);font-size:.9rem;margin-bottom:2px;transition:.2s}
.side-nav a .ic{width:20px;text-align:center;color:var(--brass);font-size:1rem}
.side-nav a:hover{background:var(--ink-2);color:#fff}
.side-nav a.active{background:var(--brass);color:var(--ink);font-weight:600}
.side-nav a.active .ic{color:var(--ink)}
.nav-label{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:18px 14px 8px;font-weight:600}
.pill{background:var(--brass);color:var(--ink);font-style:normal;font-size:.7rem;font-weight:700;padding:1px 8px;border-radius:10px;margin-left:auto}
.side-nav a.active .pill{background:var(--ink);color:var(--brass)}
.side-foot{padding:16px 20px;border-top:1px solid var(--line-d);display:flex;flex-direction:column;gap:10px;font-size:.85rem}
.side-foot a{color:rgba(255,255,255,.6)}
.side-foot a:hover{color:var(--brass)}
.side-foot .logout{color:#e29b9b}

/* Main */
.admin-main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:18px;padding:16px 30px;background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar h1{font-size:1.4rem;flex:1}
.topbar .who{font-size:.82rem;color:var(--muted);text-align:right;line-height:1.3}
.topbar .who strong{color:var(--text)}
.bell{position:relative;font-size:1.2rem}
.bell i{position:absolute;top:-6px;right:-8px;background:var(--danger);color:#fff;font-style:normal;font-size:.64rem;font-weight:700;padding:0 5px;border-radius:9px;line-height:1.5}
.menu-btn{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--ink)}
.admin-body{padding:30px;max-width:1180px;width:100%}

/* Alerts */
.a-alert{padding:13px 18px;border-radius:6px;margin-bottom:20px;border-left:3px solid;font-size:.92rem}
.a-success{background:#eef4ee;border-color:var(--ok);color:#2c4a2c}
.a-error{background:#f7eded;border-color:var(--danger);color:#7a2c2c}
.a-info{background:#eef1f6;border-color:var(--ink-2);color:#2a3a4c}

/* Cards / tables */
.card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:24px;margin-bottom:22px}
.card h2{font-size:1.15rem;margin-bottom:16px}
.card h2 .muted{font-family:var(--sans);font-size:.8rem}
.page-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.page-actions h2{font-size:1.25rem}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-grid.g3{grid-template-columns:repeat(3,1fr)}
.stat-box{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:20px;display:block}
.stat-box .n{font-family:var(--serif);font-size:1.9rem;color:var(--ink);line-height:1}
.stat-box .l{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.stat-box.accent{background:var(--ink);border-color:var(--ink)}
.stat-box.accent .n{color:var(--brass)}
.stat-box.accent .l{color:rgba(255,255,255,.7)}
.stat-box.warn{border-color:var(--warn)}
.stat-box.warn .n{color:var(--warn)}

table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.88rem;vertical-align:middle}
th{background:#faf8f3;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#faf8f3}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.empty{padding:30px;text-align:center;color:var(--muted);background:#faf8f3;border-radius:8px;border:1px dashed var(--line)}

/* Badges */
.badge{display:inline-block;font-size:.7rem;font-weight:600;padding:2px 9px;border-radius:20px;letter-spacing:.03em}
.badge.ok{background:#e7f0e7;color:#3c6a3c}
.badge.off{background:#eceef1;color:#5a6572}
.badge.warn{background:#f6eede;color:#8a6626}
.badge.danger{background:#f6e3e3;color:#9a3838}

/* Buttons */
.btn{display:inline-block;background:var(--brass);color:var(--ink);border:1px solid var(--brass);padding:10px 18px;border-radius:6px;font-family:var(--sans);font-weight:600;font-size:.9rem;cursor:pointer;transition:.2s}
.btn:hover{background:var(--brass-d);border-color:var(--brass-d);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.sm{padding:6px 12px;font-size:.8rem}
.btn.danger{background:transparent;border-color:#e3c4c4;color:var(--danger)}
.btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.inline{display:inline}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.fld label{font-size:.78rem;font-weight:600;color:var(--text);letter-spacing:.02em}
.fld input,.fld select,.fld textarea{font-family:var(--sans);font-size:.92rem;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fdfcf9;color:var(--text);width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--brass);background:#fff}
.fld textarea{resize:vertical;min-height:90px}
.fld .hint{font-size:.74rem;color:var(--muted)}
.form-actions{display:flex;gap:12px;margin-top:6px}

/* Filter bar */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:20px}
.filters .fld{margin:0;min-width:170px;flex:1}
.filters .btn{white-space:nowrap}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs a{padding:10px 18px;font-size:.9rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.active{color:var(--ink);border-color:var(--brass)}

/* Detail layout */
.split{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;font-size:.9rem}
.kv dt{color:var(--muted);font-size:.8rem}
.kv dd{margin:0;color:var(--text)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 18px 22px;border-left:2px solid var(--line)}
.timeline li:last-child{border-color:transparent}
.timeline li::before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--brass)}
.timeline .dt{font-size:.78rem;color:var(--brass);font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:#faf3e8;border:1px solid #e8d9bf;color:var(--brass-d);font-size:.74rem;font-weight:600;padding:2px 10px;border-radius:20px}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--ink);padding:24px}
.login-card{background:var(--white);border-radius:12px;padding:40px;width:100%;max-width:400px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.login-card .seal{width:56px;height:56px;margin:0 auto 16px;display:grid;place-items:center;background:var(--ink);border:1px solid var(--brass);color:var(--brass);font-family:var(--serif);font-size:1.3rem;border-radius:8px}
.login-card h1{font-size:1.4rem;margin-bottom:4px}
.login-card .sub{color:var(--muted);font-size:.88rem;margin:0 0 22px}
.login-card .fld{text-align:left}
.login-card .btn{width:100%;margin-top:6px}
.login-note{font-size:.76rem;color:var(--muted);margin-top:18px}
.login-alt{margin-top:16px;font-size:.85rem;color:var(--muted)}
.login-alt a{color:var(--brass-d);font-weight:600}

@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .stat-grid,.stat-grid.g3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .sidebar{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:.25s}
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:block}
  .admin-body{padding:20px}
  .row-actions{flex-wrap:wrap}
}

/* Account-type segmented control (register page) */
.seg{display:flex;gap:6px;background:rgba(14,27,42,.05);border:1px solid rgba(14,27,42,.1);
  border-radius:12px;padding:5px;margin:0 0 18px}
.seg-btn{flex:1;border:0;background:transparent;font-family:var(--sans);font-size:.86rem;
  font-weight:600;color:var(--ink);opacity:.6;padding:9px 8px;border-radius:8px;cursor:pointer;
  transition:.15s}
.seg-btn.on{background:var(--paper,#fff);opacity:1;box-shadow:0 1px 3px rgba(14,27,42,.14);
  color:var(--brass,#B08D57)}
.seg-btn:hover{opacity:1}

/* ============================================================
   Professional polish — SVG icons, refined sidebar & depth
   (shared by the firm portal and the client portal)
   ============================================================ */
.side-nav a{color:rgba(255,255,255,.64);font-weight:500}
.side-nav a .ic{width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.48);font-size:0}
.side-nav a .ic svg{width:18px;height:18px}
.side-nav a:hover{background:rgba(255,255,255,.055);color:#fff}
.side-nav a:hover .ic{color:var(--brass)}
.side-nav a.active{background:linear-gradient(90deg,rgba(176,141,87,.22),rgba(176,141,87,.04));color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--brass)}
.side-nav a.active .ic{color:var(--brass)}
.side-nav a.active .pill{background:var(--brass);color:var(--ink)}
.pill{background:rgba(176,141,87,.92);color:var(--ink)}
.nav-label{color:rgba(176,141,87,.85)}
.nav-label:first-child{margin-top:6px}
.side-nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.side-nav::-webkit-scrollbar{width:6px}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.side-nav::-webkit-scrollbar-track{background:transparent}
.sidebar{box-shadow:inset -1px 0 0 rgba(255,255,255,.05)}
.side-brand .seal{border-radius:9px}
.menu-btn{display:none;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.bell{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.bell svg{width:21px;height:21px}
.card{box-shadow:0 1px 2px rgba(16,27,42,.05)}
a.stat-box{transition:transform .18s,border-color .18s,box-shadow .18s}
a.stat-box:hover{border-color:var(--brass);transform:translateY(-1px);box-shadow:0 6px 18px -10px rgba(16,27,42,.3)}
@media(max-width:760px){.menu-btn{display:inline-flex}}