:root{
  --paper:#F6F5F1;
  --paper-line:#CFE0D2;
  --ink:#1C2B23;
  --ink-soft:#4B5D53;
  --primary:#1F4B3F;
  --primary-light:#2F6650;
  --primary-dark:#123027;
  --brass:#B08D57;
  --brass-soft:#EFE3CC;
  --danger:#A23B2E;
  --danger-soft:#F3DEDA;
  --surface:#FFFFFF;
  --border:#DCE3DD;
  --shadow: 0 2px 10px rgba(28,43,35,0.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  background:
    repeating-linear-gradient(to bottom, transparent 0px, transparent 27px, var(--paper-line) 27px, var(--paper-line) 28px),
    var(--paper);
  min-height:100vh;
}
.mono{font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;}
.serif{font-family:'Source Serif 4', serif;}
button{font-family:inherit; cursor:pointer;}
input, select, textarea{font-family:inherit; font-size:14px;}
a{color:var(--primary);}

#login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{ background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:6px; width:100%; max-width:380px; padding:36px 32px 32px; position:relative; }
.login-card::before{ content:""; position:absolute; top:0; left:28px; width:34px; height:44px; background:var(--brass); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.wordmark{ font-family:'Source Serif 4', serif; font-weight:700; font-size:26px; letter-spacing:0.5px; color:var(--primary-dark); margin:14px 0 2px; }
.wordmark span{color:var(--brass);}
.brand-logo{ display:block; max-width:260px; max-height:62px; width:auto; height:auto; margin:0 auto 4px; object-fit:contain; }
.tagline{ color:var(--ink-soft); font-size:12.5px; margin-bottom:26px; letter-spacing:0.4px; text-transform:uppercase;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; letter-spacing:0.3px;}
.field input, .field select, .field textarea{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--ink); outline:none; transition:border-color .15s; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--primary); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:4px; border:1px solid transparent; font-weight:600; font-size:13.5px; letter-spacing:0.2px; transition:all .15s; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-light); }
.btn-ghost{ background:transparent; color:var(--primary); border-color:var(--border); }
.btn-ghost:hover{ background:var(--brass-soft); border-color:var(--brass); }
.btn-danger{ background:transparent; color:var(--danger); border-color:var(--danger-soft); }
.btn-danger:hover{ background:var(--danger-soft); }
.btn-block{width:100%;}
.btn-sm{ padding:6px 10px; font-size:12px; }
.error-msg{ background:var(--danger-soft); color:var(--danger); border-radius:4px; padding:8px 12px; font-size:13px; margin-bottom:14px; }
.hint{ color:var(--ink-soft); font-size:12px; margin-top:6px; line-height:1.5;}

#app-shell{ display:none; min-height:100vh; }
.app-grid{ display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.spine{ background:var(--primary-dark); color:#EFEDE4; padding:24px 0; display:flex; flex-direction:column; position:relative; background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 26px); }
.spine::after{ content:""; position:absolute; top:0; right:0; width:6px; height:100%; background:repeating-linear-gradient(to bottom, var(--brass) 0 10px, transparent 10px 22px); opacity:0.6; }
.spine-wordmark{ padding:0 22px 22px; font-family:'Source Serif 4',serif; font-weight:700; font-size:20px; border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:14px;}
.spine-wordmark span{ color:var(--brass); }
.spine-brand{ padding:6px 22px 20px; border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:14px; text-align:center; }
.spine-logo-chip{ background:#fff; border-radius:8px; padding:10px 14px; display:inline-flex; align-items:center; justify-content:center; max-width:100%; }
.spine-logo{ display:block; max-width:138px; max-height:34px; width:auto; height:auto; object-fit:contain; }
.spine-caption{ margin-top:8px; font-size:10.5px; letter-spacing:0.6px; text-transform:uppercase; color:#B9C3BC; }
.spine-user{ padding: 0 22px 14px; font-size:12px; color:#B9C3BC; border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:10px; }
.spine-user strong{ display:block; color:#fff; font-size:13px; font-weight:600; margin-bottom:2px;}
.role-badge{ display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:0.5px; background:var(--brass); color:var(--primary-dark); padding:1px 7px; border-radius:10px; font-weight:700; margin-top:4px;}
.nav-item{ display:flex; align-items:center; gap:10px; padding:11px 22px; font-size:13.5px; font-weight:500; color:#CFD8D0; border-left:3px solid transparent; text-align:left; background:none; border-top:none; border-right:none; border-bottom:none; width:100%; }
.nav-item:hover{ background:rgba(255,255,255,0.05); color:#fff; }
.nav-item.active{ background:rgba(255,255,255,0.08); color:#fff; border-left-color:var(--brass); }
.nav-num{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--brass); }
.spine-footer{ margin-top:auto; padding:14px 22px 0; border-top:1px solid rgba(255,255,255,0.12); }
.spine-footer button{ background:none; border:none; color:#CFD8D0; font-size:12.5px; padding:8px 0; }
.spine-footer button:hover{ color:#fff; }

.main{ padding:32px 40px 60px; overflow-x:auto; }
.page-header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:10px;}
.page-title{ font-family:'Source Serif 4',serif; font-size:26px; font-weight:700; color:var(--primary-dark); }
.page-sub{ color:var(--ink-soft); font-size:13px; margin-top:4px; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:var(--shadow); padding:24px; margin-bottom:22px; }
.card-title{ font-weight:600; font-size:14.5px; margin-bottom:16px; color:var(--primary-dark); display:flex; align-items:center; gap:8px;}
.row{ display:flex; gap:14px; flex-wrap:wrap; }
.row > .field{ flex:1; min-width:160px; }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; padding:9px 10px; font-size:11.5px; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-soft); border-bottom:2px solid var(--primary); }
td{ padding:10px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:hover td{ background:#FBFAF7; }
td.num, th.num{ text-align:right; }
.empty-state{ text-align:center; padding:40px 20px; color:var(--ink-soft); }
.empty-state .icon{ font-size:28px; margin-bottom:10px; }

.pill{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; background:var(--brass-soft); color:var(--primary-dark); }
.client-block{ border:1px solid var(--border); border-radius:6px; margin-bottom:14px; overflow:hidden; }
.client-block-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:#FBFAF7; cursor:pointer; }
.client-block-head:hover{ background:#F5F3EC; }
.client-name{ font-weight:600; font-size:15px; color:var(--primary-dark); }
.client-meta{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.client-block-body{ padding:14px 16px; border-top:1px solid var(--border); }
.matter-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border); }
.matter-row:last-child{ border-bottom:none; }
.actions{ display:flex; gap:6px; }
.icon-btn{ background:none; border:none; color:var(--ink-soft); font-size:14px; padding:4px 6px; border-radius:4px; }
.icon-btn:hover{ background:var(--brass-soft); color:var(--primary-dark); }

.stamp{ position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:92px; height:92px; border-radius:50%; border:3px double var(--brass); color:var(--brass); transform:rotate(-8deg); font-family:'Source Serif 4',serif; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:10.5px; line-height:1.3; text-align:center; }
.stamp .stamp-num{ font-family:'IBM Plex Mono',monospace; font-size:18px; margin-top:2px; letter-spacing:0; }
.report-total-row td{ border-top:2px solid var(--primary); font-weight:700; background:#FBFAF7; }
.report-grand{ display:flex; align-items:center; justify-content:space-between; background:var(--primary-dark); color:#fff; border-radius:6px; padding:22px 26px; margin-top:6px; }
.report-grand .label{ font-family:'Source Serif 4',serif; font-size:16px; }
.report-grand .value{ font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600; color:var(--brass-soft); }

.overlay{ position:fixed; inset:0; background:rgba(28,43,35,0.45); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
.overlay.show{ display:flex; }
.modal{ background:#fff; border-radius:8px; width:100%; max-width:420px; padding:26px; box-shadow:0 10px 40px rgba(0,0,0,0.25); max-height:90vh; overflow-y:auto;}
.modal-title{ font-family:'Source Serif 4',serif; font-weight:700; font-size:18px; margin-bottom:16px; color:var(--primary-dark); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; flex-wrap:wrap;}
.toast{ position:fixed; bottom:24px; right:24px; background:var(--primary-dark); color:#fff; padding:12px 18px; border-radius:5px; font-size:13.5px; box-shadow:var(--shadow); z-index:60; opacity:0; transform:translateY(10px); transition:all .25s; max-width:340px;}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.error{ background:var(--danger); }

.combo{ position:relative; }
.combo-input{ width:100%; padding:10px 30px 10px 12px; border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--ink); outline:none; transition:border-color .15s; }
.combo-input:focus{ border-color:var(--primary); }
.combo-clear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--ink-soft); font-size:17px; line-height:1; padding:4px 7px; border-radius:4px; }
.combo-clear:hover{ background:var(--brass-soft); color:var(--primary-dark); }
.combo-list{ position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:6px; box-shadow:var(--shadow); max-height:220px; overflow-y:auto; }
.combo-item{ padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border); }
.combo-item:last-child{ border-bottom:none; }
.combo-item:hover{ background:var(--brass-soft); }
.combo-item-label{ font-size:13.5px; font-weight:500; }
.combo-item-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.combo-empty{ padding:10px 12px; font-size:12.5px; color:var(--ink-soft); }

@media(max-width:760px){
  .app-grid{ grid-template-columns:1fr; }
  .spine{ flex-direction:row; overflow-x:auto; padding:10px 0; }
  .spine-wordmark, .spine-brand, .spine-user{ display:none; }
  .nav-item{ padding:10px 16px; white-space:nowrap; border-left:none; border-bottom:3px solid transparent; }
  .nav-item.active{ border-left:none; border-bottom-color:var(--brass); }
  .spine-footer{ display:none; }
  .main{ padding:20px; }
}