:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #14212f;
  --muted: #5c6b7a;
  --line: #e2e6eb;
  --brand: #142c46;        /* navy — matches the landing            */
  --brand-2: #1d3d5e;
  --accent: #4c7fb0;       /* steel — replaces the old gold accent  */
  --accent-deep: #2c567e;
  --silver: #b9c3ce;
  --danger: #c0392b;
  --ok: #2e7d46;
  --placeholder: #8a97a6;   /* clearly-lighter grey for input hint text, vs --ink for real values */
  --radius: 8px;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "PingFang HK", "Microsoft JhengHei", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
}

/* ---------- unified dropdown (all <select>) ---------- */
select {
  font-family: inherit !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  padding: 8px 30px 8px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background-color: #fff !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  cursor: pointer !important;
  line-height: 1.35 !important;
  height: auto !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
}
select:focus { outline: 2px solid var(--brand) !important; border-color: var(--brand) !important; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: var(--brand); color: #fff;
}
.brand { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: .2px; }
.spacer { flex: 1; }
.user { display: flex; align-items: center; gap: 8px; }
.lang-toggle {
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff;
}
.lang-toggle:hover { background: rgba(255,255,255,.24); }
.email { font-size: 12px; opacity: .85; }
.badge { font-size: 11px; padding: 3px 8px; border-radius: 20px; background: rgba(255,255,255,.2); }
.badge.ok { background: var(--ok); }
.badge.demo { background: var(--accent); }

/* ---------- nav ---------- */
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav-btn {
  width: 34px; height: 32px; border-radius: 7px; border: 1px solid transparent;
  background: rgba(255,255,255,.1); color: #fff; font-size: 14px;
}
.nav-btn:hover { background: rgba(255,255,255,.22); }
.nav-btn.active { background: #fff; color: var(--brand); }

/* ---------- generic page views ---------- */
.page { padding: 20px; max-width: 1100px; margin: 0 auto; overflow-y: auto; height: calc(100% - 52px); }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.page-head h2 { margin: 0; color: var(--brand); font-size: 23px; font-family: var(--serif); font-weight: 600; }
.page-head button { flex: 0 0 auto; width: auto; }
.muted { color: var(--muted); }
.pad { padding: 24px 12px; text-align: center; }
button.sm { padding: 8px 12px; font-size: 13px; border-radius: 7px; flex: 0 0 auto; }

/* ---------- clients page ---------- */
.clients-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.clients-list { display: flex; flex-direction: column; gap: 6px; }
.client-row {
  text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
}
.client-row:hover { background: #f5f7fa; }
.client-row.sel { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(31,58,95,.15); }
.cr-name { font-weight: 600; color: var(--ink); }
.cr-sub { font-size: 12px; color: var(--muted); }
.client-detail { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.detail-head h3 { margin: 0; color: var(--brand); font-family: var(--serif); font-weight: 600; }
.deals-box { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.scard { background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.scard span { font-size: 11px; color: var(--muted); }
.scard b { font-size: 16px; }
.scard.pos b { color: var(--ok); }
.scard.neg b { color: var(--danger); }
.deals-table { width: 100%; border-collapse: collapse; }
.deals-table th, .deals-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); font-size: 13px; }
.deals-table .num { text-align: right; white-space: nowrap; }

/* ---------- settings page ---------- */
.settings-body { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.staff-head, .staff-row { display: grid; grid-template-columns: 1.3fr 1.3fr 1.4fr 1.7fr 34px; gap: 6px; align-items: center; }
.staff-head { font-size: 11px; color: var(--muted); margin-bottom: 6px; padding: 0 2px; }
.staff-row { margin-bottom: 6px; }
.staff-row .st { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.staff-row .st.num { text-align: right; }
/* Signatories & staff directory (Firm tab) — name / title / email, no grade column */
.staff-head-sig, .staff-row-sig { grid-template-columns: 1.3fr 1.3fr 1.7fr 34px; }

/* ---------- category editor ---------- */
.cat-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; background: #fbfcfd; }
.cat-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cat-head .cs[data-k="label"] { flex: 1; font-weight: 600; }
.cat-head select { width: auto; }
.cat-card .cs { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.cat-card .fl .cs { width: 100%; }
.cat-fields-label { font-size: 11px; color: var(--muted); margin: 8px 0 4px; }
.cat-field { display: grid; grid-template-columns: 1fr 160px 34px; gap: 6px; margin-bottom: 5px; }
.cat-field .cfld { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }

/* ---------- taxation ---------- */
.page.wide { max-width: 1180px; }
.tax-cardrow { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin-bottom: 14px; }
.tax-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.tax-tally { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 8px; }
.tax-tally .tcell { background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; }
.tax-tally .tcell span { display: block; font-size: 11px; color: var(--muted); }
.tax-tally .tcell b { font-size: 18px; }
.tax-table { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 6px; }
.tax-table th, .tax-table td { border: 1px solid var(--line); padding: 5px 7px; font-size: 12.5px; text-align: left; vertical-align: top; }
.tax-table th { background: #eef1f5; color: var(--brand); font-weight: 600; }
.tax-table .num { text-align: right; white-space: nowrap; }
.tax-table .tx-no { width: 34px; text-align: center; }
.tax-table .tx-stage td { background: #e7edf4; color: var(--brand); font-weight: 700; }
.tax-table .tx-sub td { background: #fafbfc; font-weight: 600; }
.tax-table .tx-grand td { background: #eef1f5; font-weight: 700; }
.tx-gt { color: var(--muted); font-size: 11px; white-space: nowrap; }
.tx-in { width: 100%; box-sizing: border-box; padding: 5px 6px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.tx-in.wide { min-width: 200px; }
.tx-in.sm { width: 60px; }
.tax-table.summary td:first-child { width: 44px; font-weight: 700; text-align: center; }
.tx-provisional { display: flex; align-items: center; gap: 7px; margin: 6px 0 12px; padding: 8px 12px; border-radius: 6px; background: #eef1f5; color: var(--brand); font-size: 12.5px; font-weight: 600; }

/* ---------- modal ---------- */
.modal-root { position: fixed; inset: 0; z-index: 100; }
.modal-overlay { position: absolute; inset: 0; background: rgba(20,28,40,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; color: var(--brand); font-size: 17px; }
.modal-x { border: none; background: none; font-size: 16px; color: var(--muted); cursor: pointer; }
.modal-body { padding: 16px 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: #fafbfc; border-radius: 0 0 12px 12px; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(360px, 1fr) 1.1fr; height: calc(100% - 52px); }
.editor { overflow-y: auto; padding: 16px; border-right: 1px solid var(--line); }
.preview { display: flex; flex-direction: column; background: #e9ebef; }

/* ---------- editor form ---------- */
.empty-hint { color: var(--muted); padding: 40px 10px; text-align: center; }
details {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 12px; padding: 6px 12px 12px;
}
summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: var(--brand); }
.sub-head { font-weight: 600; margin: 10px 0 6px; color: var(--muted); font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.fl input, .fl select, .fl textarea {
  font-size: 13px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); background: #fff; font-family: inherit;
}
.fl input:focus, .fl select:focus, .fl textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }

/* placeholder hints must read as clearly lighter than real input values */
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }

/* client / matter selectors inside a section */
.client-block .fl { margin-bottom: 4px; }
.row-inline { display: flex; gap: 6px; align-items: center; }
.row-inline select { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #fff; }

/* parties */
.party-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 6px; margin-bottom: 6px; }
.party-row input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }

/* entries */
.entry { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: #fbfcfd; }
.entry-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.entry-num {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.entry-head select { flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.entry-move { display: flex; gap: 4px; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* free-text field + per-line AI */
.custom-row { display: flex; gap: 6px; align-items: stretch; }
.custom-row input { flex: 1; }
.ai-pen { flex: 0 0 auto; width: 36px; border: 1px solid var(--accent); background: #fff; color: var(--accent); border-radius: 6px; cursor: pointer; }
.ai-pen:hover { background: var(--accent); color: #fff; }
.aied { font-size: 10px; font-weight: 700; color: var(--accent); background: rgba(76,127,176,.14); padding: 1px 6px; border-radius: 10px; margin-left: 6px; }
.variant { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.variant:hover { border-color: var(--accent); background: #eef4fa; }
.v-style { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .3px; }
.v-text { font-size: 13px; color: var(--ink); font-family: "Times New Roman", serif; }
/* inline variant dropdown under the free-text field */
.variants-pop { margin-top: 6px; border: 1px solid var(--accent); border-radius: 8px; background: #f7fafd; padding: 8px; }
.variants-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.variants-pop .variant { margin-bottom: 6px; }
.variants-pop .variant:last-child { margin-bottom: 0; }
/* preview toolbar mode select */
.pv-mode { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; background: #fff; }

/* disbursements */
.disb-row { display: grid; grid-template-columns: 1fr 120px auto; gap: 6px; margin-bottom: 6px; }
.disb-row input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.disb-row .num { text-align: right; }

/* buttons */
button { cursor: pointer; font-family: inherit; }
.mini { font-size: 12px; padding: 5px 9px; border: 1px solid rgba(0,0,0,.15); background: #fff; border-radius: 6px; color: var(--ink); }
.mini:hover { background: #f0f2f5; }
.mini.danger { color: var(--danger); border-color: rgba(192,57,43,.4); }
.add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px dashed var(--line); background: #fff; border-radius: 8px; color: var(--brand); font-weight: 600; margin-top: 8px; cursor: pointer; }
.add-btn:hover { background: #f5f7fa; }
.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.primary, .accent { flex: 1; padding: 12px; border: none; border-radius: 8px; font-weight: 700; font-size: 14px; color: #fff; }
.primary { background: var(--brand); }
.primary.pending { box-shadow: 0 0 0 3px rgba(31,58,95,.25); }
.accent { background: var(--accent); }
.ghost { flex: 0 0 auto; padding: 12px 16px; border: 1px solid var(--brand); border-radius: 8px; font-weight: 700; font-size: 14px; color: var(--brand); background: #fff; }
.ghost:hover { background: #eef2f7; }
.primary:hover { background: #16294a; }
.accent:hover { background: var(--accent-deep); }

/* ---------- preview ---------- */
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #dde0e6; border-bottom: 1px solid var(--line); }
.pv-title { font-weight: 600; color: var(--muted); }
.zoom { display: flex; align-items: center; gap: 6px; }
#zoom-val { font-size: 12px; min-width: 44px; text-align: center; }
.preview-scroll { flex: 1; overflow: auto; padding: 24px; }
.preview-body { transform-origin: top center; }

/* the bill sheet (mimics the .DOC) */
.bill {
  width: 640px; min-height: 900px; margin: 0 auto; background: #fff; padding: 60px 64px;
  box-shadow: 0 4px 24px rgba(0,0,0,.15); font-family: "Times New Roman", Times, serif;
  font-size: 14px; color: #000; line-height: 1.5;
}
.bill.has-lh-foot { display: flex; flex-direction: column; }
.bill.has-lh-foot .bill-flow { flex: 1 0 auto; }
.bill .bill-lh-foot { flex: 0 0 auto; }
.bill-empty { padding: 40px; text-align: center; color: var(--muted); }
.bill-title { text-align: center; font-weight: 700; text-decoration: underline; font-size: 16px; margin-bottom: 22px; }
.re-block td { vertical-align: top; padding: 1px 0; }
.re-block .re-role { width: 150px; }
.re-block .re-colon { width: 16px; }
.bill .client-top { margin-bottom: 20px; }
.bill .client-top .ct-date { text-align: right; }
.bill .client-top .ct-addr { margin-top: 4px; }
.bill .bill-sep { border: none; border-top: 1px solid #000; margin: 16px 0; }
.bill .lead { margin: 16px 0; }
.items { width: 100%; }
.items .item td { vertical-align: top; padding-bottom: 10px; }
.items .item-no { width: 26px; text-align: left; color: #000; white-space: nowrap; padding-right: 6px; }
.items .item-text { padding-right: 16px; }
.items .item-val { width: 90px; text-align: right; white-space: nowrap; }
.items .gcc .item-text { padding-top: 6px; }
.memo { color: #b00; font-size: 12px; }
.prof-total, .this-bill { display: flex; justify-content: space-between; font-weight: 700; border-top: 1px solid #000; padding-top: 4px; margin-top: 8px; }
.section-head { font-weight: 700; text-decoration: underline; margin: 18px 0 8px; }
.disb { width: 100%; }
.disb td { padding: 2px 0; }
.disb .disb-val { text-align: right; width: 120px; }
.disb .disb-sum .disb-val { border-top: 1px solid #000; }
.formula { margin-top: 12px; font-size: 13px; }
.addressee { width: 100%; margin-top: 34px; }
.addressee td { vertical-align: top; padding-top: 2px; }
.addressee .addr-right { text-align: right; white-space: pre; }
.footer-ref { margin-top: 24px; font-size: 11px; color: #333; }

/* flash toast */
.flash {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 24px;
  opacity: 0; pointer-events: none; transition: .25s; font-size: 13px; z-index: 50;
}
.flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.flash-ok { background: var(--ink); }
.flash-err { background: var(--danger); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  .editor { border-right: none; border-bottom: 1px solid var(--line); }
  .preview { min-height: 80vh; }
}

/* phone / small tablet */
@media (max-width: 768px) {
  body { font-size: 15px; }
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .brand { font-size: 15px; }
  .email { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .entry-grid { grid-template-columns: 1fr; }
  .actions { flex-wrap: wrap; }
  .primary, .accent { flex: 1 1 100%; }
  .ghost { flex: 1 1 100%; }
  .party-row { grid-template-columns: 1fr 1fr auto; }
  .preview-scroll { padding: 12px; }
  .bill { width: 100%; padding: 28px 22px; box-shadow: none; min-height: auto; }
  .preview-body { transform-origin: top left; }
  /* inputs at 16px avoid iOS auto-zoom on focus */
  .fl input, .fl select, .fl textarea,
  .party-row input, .disb-row input, .row-inline select { font-size: 16px; }
}

/* ================= Auth gate ================= */
.auth-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(10,24,38,.30), rgba(10,24,38,.50)),
    url("../images/login-bg.webp") center / cover no-repeat,
    #0A1826;
  padding: 20px;
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 30px 28px;
  box-shadow: 0 18px 50px rgba(31, 58, 95, .18);
}
.auth-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 4px;
}
.auth-card h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: 22px; margin: 0; color: var(--brand);
  display: flex; align-items: center; gap: 8px;
}
.auth-lang-toggle { flex: none; cursor: pointer; }
.auth-sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.auth-l { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 5px; }

.auth-field { position: relative; margin-bottom: 14px; }
.auth-field input {
  display: block; width: 100%; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 15px;
  color: var(--ink); background: #fff; box-sizing: border-box; transition: border-color .15s ease;
}
.auth-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20,44,70,.10); }
.auth-field.err input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.auth-field.shake { animation: auth-shake .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes auth-shake {
  10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); }
}
.auth-pw input { padding-right: 42px; }
.auth-pw .eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.auth-pw .eye:hover { color: var(--brand); }

.auth-row { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.auth-link-sm { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* success tick */
.auth-success { text-align: center; }
.auth-success p { color: var(--ink); font-size: 15px; margin: 16px 0 12px; }
.auth-success .tick { width: 62px; height: 62px; }
.auth-success .tick circle { stroke: var(--ok); stroke-width: 2.4; stroke-dasharray: 160; stroke-dashoffset: 160; animation: tick-c .5s ease forwards; }
.auth-success .tick path { stroke: var(--ok); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: tick-p .35s .45s ease forwards; }
.auth-success .auth-spin { color: var(--accent); font-size: 18px; }
@keyframes tick-c { to { stroke-dashoffset: 0; } }
@keyframes tick-p { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .auth-field.shake { animation: none; }
  .auth-success .tick circle, .auth-success .tick path { animation: none; stroke-dashoffset: 0; }
}
.auth-primary {
  width: 100%; padding: 12px; margin-top: 4px; border: 0; border-radius: 8px;
  background: var(--brand); color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.auth-primary:hover { filter: brightness(1.08); }
.auth-alt { text-align: center; font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.auth-alt a { color: var(--brand); font-weight: 600; text-decoration: none; }
.auth-error {
  background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0;
  padding: 9px 11px; border-radius: 7px; font-size: 13px; margin-bottom: 14px;
}
.auth-msg {
  background: #eaf6ee; color: var(--ok); border: 1px solid #bfe3ca;
  padding: 9px 11px; border-radius: 7px; font-size: 13px; margin-bottom: 14px;
}

/* ================= Onboarding wizard (Task 4) ================= */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 24, 38, .55);
  padding: 20px;
}
.onboarding-card {
  width: 100%; max-width: 720px; max-height: 92vh; overflow-y: auto; overflow-x: hidden;
  background: var(--panel); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.32);
  padding: 28px 32px;
}
.ob-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ob-step {
  flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted);
  padding-bottom: 10px; border-bottom: 3px solid var(--line);
}
.ob-step.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.ob-step.done { color: var(--ok); border-bottom-color: var(--ok); }
.ob-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--line); color: var(--muted);
  font-size: 11px; font-weight: 700; flex: none;
}
.ob-step.active .ob-num { background: var(--brand); color: #fff; }
.ob-step.done .ob-num { background: var(--ok); color: #fff; }
.ob-title { margin: 0 0 4px; color: var(--brand); font-size: 19px; }
.ob-sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.ob-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.ob-actions-right { display: flex; gap: 10px; }
.ob-rate-head, .ob-rate-row {
  display: grid; grid-template-columns: 60px 1fr 120px; gap: 10px; align-items: center;
}
.ob-rate-head { font-size: 11px; color: var(--muted); margin-bottom: 6px; padding: 0 2px; }
.ob-rate-row { margin-bottom: 8px; }
.ob-rate-code { font-weight: 700; color: var(--brand); }
.ob-rate-label { font-size: 13px; color: var(--ink); }
.ob-rate-input {
  padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; text-align: right;
}
.ob-invite-row {
  display: grid; grid-template-columns: 1fr 160px 34px; gap: 8px; align-items: center; margin-bottom: 8px;
}
.ob-invite-row input, .ob-invite-row select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px;
}
.ob-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px;
  border-radius: 6px; background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0; font-size: 13px;
}
.ob-error .btn { margin-left: auto; }

/* Reassurance banner (Task T2-A) — a highlighted, friendlier alternative to a
   muted .ob-sub line, used where a non-technical solicitor might otherwise
   worry a pre-filled default is a binding choice (e.g. the rate-card step). */
.ob-reassure {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 12px;
  border-radius: 6px; background: rgba(46,125,70,.08); color: var(--ok); border: 1px solid rgba(46,125,70,.25); font-size: 13px;
}

/* Plan step: tier + seat-band chooser (Task 5, reworked Task 8) */
.ob-subhead { margin: 4px 0 8px; color: var(--ink); font-size: 13px; font-weight: 700; }
.ob-plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 4px; }
.ob-plan-grid.shake { animation: lb-shake .4s ease; }
.ob-plan-card {
  border: 2px solid var(--line); border-radius: 10px; padding: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ob-plan-card:hover { border-color: #b9c4d0; }
.ob-plan-card.selected { border-color: var(--brand); background: rgba(58,110,165,.07); }
.ob-plan-name { font-weight: 700; color: var(--brand); font-size: 15px; }
.ob-plan-blurb { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.ob-plan-price { font-weight: 700; color: var(--brand); font-size: 14px; margin-top: 2px; }
.ob-tier-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 6px; }
.ob-price-note { font-size: 11px; color: var(--muted); margin: 0 0 14px; }
.ob-enterprise-note { font-size: 11.5px; color: var(--muted); margin: 0 0 20px; }
.ob-enterprise-note a { color: var(--brand); }
.ob-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 4px; }
.ob-band-grid.shake { animation: lb-shake .4s ease; }
.ob-band-card {
  border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.ob-band-card:hover { border-color: #b9c4d0; }
.ob-band-card.selected { border-color: var(--brand); background: rgba(58,110,165,.07); }
.ob-band-name { font-weight: 700; color: var(--brand); font-size: 14px; }
.ob-band-limits { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Fee earners step (Task 5) */
.ob-fe-count { font-size: 12.5px; color: var(--muted); margin: -8px 0 12px; }
.ob-fe-form { display: grid; grid-template-columns: minmax(120px,1fr) 150px 130px auto auto; gap: 8px; align-items: center; margin-bottom: 14px; }
.ob-fe-form input, .ob-fe-form select { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.ob-fe-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ob-fe-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.ob-fe-name { font-weight: 600; flex: 1; }
.ob-fe-grade { color: var(--brand); font-size: 12px; }
.ob-fe-cert { color: var(--muted); font-size: 11.5px; }
.ob-fe-empty { font-size: 13px; margin: 6px 0 14px; }

@media (max-width: 768px) {
  .onboarding-card { padding: 20px; max-height: 96vh; }
  .ob-steps { flex-direction: column; gap: 6px; }
  .ob-rate-head, .ob-rate-row { grid-template-columns: 44px 1fr 90px; }
  .ob-invite-row { grid-template-columns: 1fr; }
  .ob-plan-grid, .ob-tier-grid, .ob-band-grid { grid-template-columns: 1fr; }
  .ob-fe-form { grid-template-columns: 1fr; }
}

/* ================= External Counsel/Vendor Portal (Task 6) =================
   Rendered into #external-portal, which reuses .auth-gate's fixed
   full-screen overlay (same dark backdrop as login) — but the card itself
   needs far more room than a login form (a matter list + a submit form +
   submission history per matter), so it gets its own wider/taller card
   rather than reusing .auth-card. */
.ext-portal-card {
  width: 100%; max-width: 760px; max-height: 92vh; overflow: auto;
  background: var(--panel); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.32);
  padding: 28px 32px;
}
.ext-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.ext-header h1 {
  font-family: var(--serif); font-weight: 600; font-size: 21px; margin: 0 0 4px; color: var(--brand);
  display: flex; align-items: center; gap: 8px;
}
.ext-header .ext-sub { margin: 0; color: var(--muted); font-size: 13px; }
.ext-welcome { color: var(--ink); font-size: 13.5px; margin: 14px 0 22px; }
.ext-signout { flex: none; }

.ext-loading, .ext-load-error, .ext-empty { color: var(--muted); font-size: 13.5px; padding: 10px 0; }
.ext-load-error { color: var(--danger); }

.ext-section-title { margin: 0 0 14px; color: var(--brand); font-size: 17px; }

.ext-matter-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px;
}
.ext-matter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ext-matter-ref { font-weight: 700; color: var(--brand); font-size: 15px; }
.ext-matter-firm { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ext-matter-badges { display: flex; gap: 6px; flex: none; }
.ext-matter-note {
  font-size: 13px; color: var(--ink); margin: 12px 0 0; padding: 10px 12px;
  background: #f6f8fb; border-radius: 8px; border: 1px solid var(--line);
}

.ext-badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  color: #fff; background: var(--muted); white-space: nowrap;
}
.ext-badge.party-counsel { background: var(--accent); }
.ext-badge.party-vendor { background: var(--brand-2); }
.ext-badge.st-invited { background: var(--muted); }
.ext-badge.st-accepted, .ext-badge.st-approved { background: var(--ok); }
.ext-badge.st-revoked, .ext-badge.st-rejected { background: var(--danger); }
.ext-badge.st-pending { background: var(--accent); }
.ext-badge.st-withdrawn { background: var(--silver); color: var(--ink); }

.ext-inactive-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

.ext-form-title { font-size: 14px; color: var(--brand); margin: 18px 0 10px; }
.ext-fn-form .fl { margin-bottom: 10px; }
.ext-fn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ext-fn-actions { display: flex; justify-content: flex-end; margin-top: 6px; }

.ext-history { margin-top: 18px; padding-top: 4px; border-top: 1px dashed var(--line); }
.ext-sub-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ext-sub-row:last-child { border-bottom: none; }
.ext-sub-main {
  display: grid; grid-template-columns: 90px 1fr 90px auto auto; gap: 10px; align-items: center; font-size: 13px;
}
.ext-sub-amount { font-weight: 600; color: var(--ink); }
.ext-sub-desc { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-sub-date { color: var(--muted); font-size: 12px; }
.ext-sub-reason { font-size: 12px; color: var(--danger); margin-top: 4px; }

@media (max-width: 768px) {
  .ext-portal-card { padding: 20px; max-height: 96vh; }
  .ext-fn-grid { grid-template-columns: 1fr; }
  .ext-sub-main { grid-template-columns: 1fr; gap: 4px; }
}

/* ================= Header org name ================= */
.org-name { font-weight: 600; color: var(--brand); font-size: 13px; }

/* ================= Team members ================= */
.members-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.member-row {
  display: grid; grid-template-columns: 1fr 26px 150px 34px; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.member-email { font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.member-uic { color: var(--brand); opacity: .8; font-size: 16px; }
.member-roleic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eef2f7; color: var(--brand); font-size: 12px; }
.members-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.member-invite {
  display: grid; grid-template-columns: minmax(180px, 240px) 150px auto; gap: 8px; align-items: center;
}
.member-invite input {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
@media (max-width: 640px) {
  .member-row { grid-template-columns: 1fr 26px 34px; }
  .member-row .member-role { grid-column: 1 / -1; }
  .members-topbar, .member-invite { grid-template-columns: 1fr; width: 100%; }
}

/* ---------- taxation: Order 62A rows ---------- */
.o62a-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.o62a-row:last-child { border-bottom: 0; }
.o62a-row span { font-size: 13px; color: var(--ink); }
.o62a-row select { width: auto; min-width: 110px; }

/* auth boot spinner (shown while the app decides login vs dashboard) */
.auth-boot { text-align: center; color: var(--silver); }
.auth-boot > i { font-size: 30px; color: #fff; opacity: .85; display: block; margin-bottom: 14px; }
.auth-boot .auth-spin { color: var(--accent); font-size: 20px; }

/* ================= account chip + dropdown ================= */
.user-menu { position: relative; }
.user-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 5px 12px 5px 6px; border-radius: 20px; cursor: pointer; font-size: 13px; }
.user-chip:hover { background: rgba(255,255,255,.18); }
.user-chip .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.user-chip .uc-name { font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .uc-tick { color: #7fd39b; font-size: 13px; }
.user-chip .uc-caret { font-size: 10px; opacity: .8; }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(20,44,70,.22); overflow: hidden; z-index: 200; }
.ud-head { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ud-name { font-weight: 700; font-size: 14px; }
.ud-email { font-size: 12.5px; color: var(--muted); margin-top: 1px; word-break: break-all; }
.ud-firm { font-size: 12px; color: var(--muted); margin-top: 6px; }
.ud-role { text-transform: capitalize; color: var(--brand); font-weight: 600; }
.ud-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 16px; background: #fff; border: 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.ud-item:hover { background: #f2f5f8; }
.ud-item i { color: var(--muted); width: 16px; }

/* ================= settings tabbed layout ================= */
.settings-body { background: transparent; border: 0; padding: 0; }
.settings-layout { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 4px; }
.stab { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font-size: 14px; cursor: pointer; }
.stab i { color: var(--muted); width: 18px; }
.stab:hover { background: #eef1f5; }
.stab.active { background: var(--brand); color: #fff; }
.stab.active i { color: #fff; }
.stab-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 4px; margin-top: 4px; }
.stab-group:first-child { margin-top: 0; padding-top: 2px; }
.settings-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.settings-h { font-family: var(--serif); font-weight: 600; color: var(--brand); font-size: 20px; margin: 0 0 16px; }

/* plan / usage strip (read-only, Settings → Firm) */
.plan-strip { margin: 0 0 18px; }
.plan-strip-card { background: #f7f8fa; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.plan-strip-row { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: var(--ink); }
.plan-strip-item b { color: var(--brand); font-weight: 600; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.plan-chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: #e7ecf3; color: var(--brand); }

/* profile + verified badge */
.pf-email { display: flex; align-items: center; gap: 10px; }
.pf-email input { flex: 1; }
.vbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 20px; white-space: nowrap; }
.vbadge.ok { background: #e7f4ec; color: var(--ok); }
.vbadge.no { background: #fbecea; color: var(--danger); }
.link-inline { color: var(--accent); font-weight: 600; }

@media (max-width: 720px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { flex-direction: row; flex-wrap: wrap; }
  .user-chip .uc-name { max-width: 90px; }
}

/* =====================================================================
   APP SHELL v2 — left sidebar + top bar + content (overrides old topbar)
   ===================================================================== */
html, body { height: 100%; }
body { overflow: hidden; }

.app-shell { display: flex; height: 100vh; }

/* ---- sidebar ---- */
.sidebar { width: 234px; flex: none; background: var(--brand); color: #fff; display: flex; flex-direction: column; transition: width .18s ease; z-index: 60; }
.app-shell.collapsed .sidebar { width: 66px; }
.app-shell.collapsed .sb-text { display: none; }
.app-shell.collapsed .side-brand { justify-content: center; padding: 18px 0; }
.side-brand { font-family: var(--serif); font-weight: 600; font-size: 17px; padding: 18px; display: flex; align-items: center; gap: 10px; color: #fff; white-space: nowrap; letter-spacing: .2px; }
.side-brand i { color: var(--silver); }
.side-nav { display: flex; flex-direction: column; gap: 3px; padding: 8px; flex: 1; overflow-y: auto; }
.side-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 9px; border: 0; background: transparent; color: rgba(255,255,255,.82); font-size: 14.5px; cursor: pointer; text-align: left; white-space: nowrap; font-family: inherit; }
.side-item i { width: 20px; text-align: center; font-size: 15px; flex: none; }
.side-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.side-item.active { background: rgba(255,255,255,.17); color: #fff; }
/* Task 5: sidebar module gating — unowned modules dim, with a trailing lock icon; click opens the upsell panel instead of navigating */
.side-item.locked { opacity: .5; }
.side-item.locked .side-lock { margin-left: auto; font-size: 11px; }
.side-sep { height: 1px; background: rgba(255,255,255,.12); margin: 8px 12px; }
.side-foot { padding: 8px; border-top: 1px solid rgba(255,255,255,.1); }
.side-foot .side-item { color: rgba(255,255,255,.6); font-size: 13px; }

/* ---- main column + top bar (light) ---- */
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--line); flex: none; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { background: #f2f5f8; }
.tb-firm { font-weight: 600; color: var(--brand); font-size: 15px; font-family: var(--serif); }

/* topbar user chip + lang on a light bar */
.lang-toggle { color: var(--ink); border: 1px solid var(--line); background: #f4f6f8; }
.lang-toggle:hover { background: #e9edf1; }
.user-chip { background: #f4f6f8; border: 1px solid var(--line); color: var(--ink); }
.user-chip:hover { background: #e9edf1; }
.user-chip .uc-name { color: var(--ink); }
.user-chip .uc-tick { color: var(--ok); }
.user-chip .uc-caret { color: var(--muted); }

/* ---- content + page header ---- */
.content { flex: 1; overflow-y: auto; padding: 26px 30px 60px; background: var(--bg); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ph-title { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 27px; margin: 0; line-height: 1.15; }
.ph-sub { color: var(--muted); font-size: 14.5px; margin: 4px 0 0; }
.ph-actions { display: flex; gap: 10px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.ph-title-row { display: flex; align-items: flex-start; gap: 10px; }
.ph-back { flex: none; margin-top: 2px; }

/* ---- standardized button component ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; line-height: 1.2; white-space: nowrap; transition: background .15s ease, border-color .15s ease, transform .08s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: #0f2138; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-deep); }
.btn-ghost { background: #fff; color: var(--brand); border-color: var(--line); }
.btn-ghost:hover { background: #eef2f7; }
.btn-danger { background: #fff; color: var(--danger); border-color: rgba(192,57,43,.35); }
.btn-danger:hover { background: #fdecea; }
.btn.sm { padding: 7px 12px; font-size: 13px; }

/* ---- bill two-pane fills the viewport under the header ---- */
.view#view-bill .layout { height: calc(100vh - 172px); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.editor { padding: 16px; }
.preview { background: #eceef2; }

/* ---- responsive: sidebar becomes off-canvas ---- */
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .app-shell.collapsed .sidebar { width: 234px; }
  .app-shell.collapsed .sb-text { display: inline; }
  .content { padding: 20px 16px 50px; }
  .view#view-bill .layout { height: auto; display: block; }
  .view#view-bill .preview { height: 70vh; }
}

/* ================= dashboard ================= */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px; }
.kpi-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 18px; background: linear-gradient(150deg, var(--brand), var(--accent)); flex: none; }
.kpi-val { font-size: 24px; font-weight: 700; color: var(--ink); font-family: var(--serif); line-height: 1; }
.kpi-label { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.card-h { font-family: var(--serif); font-weight: 600; color: var(--brand); font-size: 16px; margin-bottom: 16px; }
/* Task 5: locked-module upsell card (shown in #view-upsell) */
.upsell-card { max-width: 480px; margin: 40px auto 0; text-align: center; }
.upsell-card .card-h { justify-content: center; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.upsell-card p { color: var(--muted); font-size: 14px; margin: 6px 0; }
.upsell-card a { color: var(--accent); }
/* Batch 3 (Theme E): inline one-line "locked" hint for a module box that has
   no room for the full upsell card (case panel / external submissions). */
.locked-note { font-size: 13px; color: var(--muted); padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; background: #fafbfc; display: flex; align-items: center; gap: 8px; }
.locked-note i { color: var(--accent); }
.bars { display: flex; align-items: flex-end; gap: 14px; height: 160px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bar { width: 100%; min-height: 3px; background: linear-gradient(180deg, var(--accent), var(--brand)); border-radius: 6px 6px 0 0; }
.bar-n { font-size: 12px; font-weight: 700; color: var(--ink); }
.bar-l { font-size: 11px; color: var(--muted); }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table tr { cursor: pointer; }
.mini-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mini-table tr:hover td { background: #f6f8fb; }
.mini-table .mini-open { text-align: right; color: var(--muted); width: 24px; }
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}

/* settings sub-nav groups + new panels */
.snav-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 4px; }
.snav-group:first-child { padding-top: 2px; }
.disb-row { display: grid; grid-template-columns: 1fr 34px; gap: 8px; margin-bottom: 6px; }
.disb-row .disb-in { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13.5px; }
.access-table td, .access-table th { font-size: 12.5px; }
.access-table .ac-c { text-align: center; color: var(--ok); }
.access-table th { text-align: center; }
.access-table td:first-child, .access-table th:first-child { text-align: left; }

/* activity log */
.audit-table { width: 100%; border-collapse: collapse; }
.audit-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
.audit-table .au-when { color: var(--muted); white-space: nowrap; width: 120px; }
.audit-table .au-who { color: var(--brand); font-weight: 600; white-space: nowrap; }

/* letterhead */
.lh-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.lh-mode { padding: 9px 16px; border: 0; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; border-right: 1px solid var(--line); }
.lh-mode:last-child { border-right: 0; }
.lh-mode.active { background: var(--brand); color: #fff; }
/* compact style picker (small thumbnails) */
.lh-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lh-pick { border: 2px solid var(--line); border-radius: 9px; padding: 7px 7px 5px; cursor: pointer; display: block; background: #fff; transition: border-color .12s, box-shadow .12s; }
.lh-pick:hover { border-color: #c7cfd8; }
.lh-pick.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76,127,176,.12); }
.lh-pick input { display: none; }
.lh-thumb { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 6px; height: 48px; overflow: hidden; font-family: 'Times New Roman', serif; color: #000; display: flex; align-items: center; }
.lh-thumb > * { zoom: .34; width: 100%; }
.lh-name { display: block; font-size: 10.5px; color: var(--muted); margin-top: 5px; font-weight: 600; text-align: center; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-up-prev { margin-top: 12px; display: flex; align-items: center; gap: 14px; }
.lh-up-prev img { max-height: 90px; max-width: 320px; border: 1px solid var(--line); border-radius: 6px; }
@media (max-width: 760px) { .lh-picker { grid-template-columns: repeat(2, 1fr); } }

/* letterhead: accent swatches */
.lh-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lh-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.lh-swatch.sel { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(76,127,176,.25); }
.lh-note { font-size: 12px; margin-top: 12px; background: #f4f6f8; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; line-height: 1.55; }

/* file-upload styled as one of our buttons (hidden native input inside) */
.file-btn { cursor: pointer; }
.file-btn input { display: none; }

/* two-column layout: controls left (roomy), a right-sized A4 preview right */
.lh-layout { display: grid; grid-template-columns: minmax(320px, 1fr) auto; gap: 28px; align-items: start; }
.lh-controls { min-width: 0; max-width: 460px; }
.lh-stage { position: sticky; top: 12px; }
.lh-stage-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.lh-stage-empty { background: #eef1f4; border: 1px dashed var(--line); border-radius: 10px; padding: 60px 34px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 340px; }
.lh-a4 { background: #e9edf1; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.lh-a4-inner { width: 410px; height: 580px; } /* 640*.64, 905*.64 */
.lh-a4-inner .bill { transform: scale(.64); transform-origin: top left; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
@media (max-width: 1080px) { .lh-layout { grid-template-columns: 1fr; } .lh-stage { position: static; } .lh-controls { max-width: none; } }

/* whole-page letterhead decoration (applies to the entire sheet, not just head) */
.bill.lh-fullbar-left { border-left: 7px solid var(--lh-accent, #142C46); }
.bill.lh-fullbar-top { border-top: 3px solid var(--lh-accent, #142C46); }

/* timesheet / WIP */
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ts-chip { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; }
.ts-chip:hover { background: #eef2f7; }
.ts-billable { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 2px 0; }
.ts-fe-empty { font-size: 13px; color: var(--muted); padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: #fafbfc; }
.ts-fe-empty .link-inline { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; }
.ts-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ts-filters { display: flex; gap: 8px; }
.ts-filters select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; }
.ts-table .ts-narr { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-table tr.ts-billed { opacity: .62; }
.ts-tog { display: inline-flex; }
.ts-tog input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

/* timesheet team calendar */
.ts-viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ts-vt { padding: 7px 13px; border: 0; background: #fff; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border-right: 1px solid var(--line); }
.ts-vt:last-child { border-right: 0; }
.ts-vt.sel { background: var(--brand); color: #fff; }
.ts-cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ts-cal-range { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ts-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.ts-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.ts-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ts-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.ts-day { border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; min-height: 120px; padding: 8px; }
.ts-day.ts-today { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(31,58,95,.1); }
.ts-day-h { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ts-day-d { color: var(--brand); }
.ts-day-tot { font-size: 12px; font-weight: 700; color: var(--ink); margin: 2px 0 6px; min-height: 14px; }
.ts-day-items { display: flex; flex-direction: column; gap: 5px; }
.ts-ev { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 6px; padding: 5px 7px; font-size: 11.5px; }
.ts-ev-top { color: var(--ink); }
.ts-ev-sub { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .ts-cal-grid { grid-template-columns: repeat(3, 1fr); } .ts-legend { margin-left: 0; } }
@media (max-width: 560px) { .ts-cal-grid { grid-template-columns: 1fr 1fr; } }

/* accounts / client ledger (M7) */
.acc-warn { display: flex; align-items: flex-start; gap: 8px; background: #fff8e6; border: 1px solid #f0d98a; color: #7a5b00; border-radius: 9px; padding: 10px 13px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }

/* conflict-check nudge on New Client form (T2-C) */
.conflict-nudge { display: flex; align-items: center; gap: 8px; background: #eef3fa; border: 1px solid #cfdcef; color: #35486a; border-radius: 9px; padding: 9px 13px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.conflict-nudge i { color: var(--accent, #3a6ea5); }
.conflict-nudge-link { background: none; border: 0; padding: 0; margin-left: auto; color: var(--accent, #3a6ea5); font-weight: 600; font-size: 12.5px; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.conflict-nudge-link:hover { filter: brightness(1.1); }
.acc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.acc-kpis .cf-fin-v { font-size: 22px; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .acc-grid { grid-template-columns: 1fr; } }
/* Timesheet's own grid: unlike .acc-grid, stretch both cards to equal height */
.ts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.ts-grid .card { display: flex; flex-direction: column; }
@media (max-width: 900px) { .ts-grid { grid-template-columns: 1fr; } }
.acc-balances th { text-align: left; font-size: 11px; color: var(--muted); }
.acc-balances tr.acc-neg td { color: var(--danger); font-weight: 700; }
.acc-recon { font-size: 12.5px; margin-top: 4px; }
.acc-txn-scroll { overflow-x: auto; }
.acc-txns { width: 100%; border-collapse: collapse; font-size: 13px; }
.acc-txns th { text-align: left; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 8px; }
.acc-txns td { padding: 7px 8px; border-bottom: 1px solid #f0f2f5; }
.acc-txns .num { text-align: right; white-space: nowrap; }
.acc-in { color: #1f8b4c; font-weight: 700; } .acc-out { color: var(--danger); font-weight: 700; }
.acc-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; border-radius: 5px; padding: 2px 6px; }
.acc-tag.acc-client { background: #e8f0fb; color: #234e86; } .acc-tag.acc-office { background: #eef1f4; color: #555; }

/* help / FAQ / contact */
.help-grid { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.help-guide summary { cursor: pointer; list-style: none; }
.help-guide summary::-webkit-details-marker { display: none; }
.help-guide summary::before { content: "▸"; display: inline-block; color: var(--accent); margin-right: 8px; font-weight: 700; transition: transform .12s ease; }
.help-guide[open] summary::before { transform: rotate(90deg); }
.help-guide .help-steps { margin-top: 16px; }
.help-faq-filter { width: 100%; margin: -6px 0 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; font-family: inherit; color: var(--ink); }
.help-faq-filter:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.help-steps { display: flex; flex-direction: column; gap: 14px; }
.help-step { display: flex; gap: 12px; }
.help-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.help-step-h { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.help-step-h i { color: var(--accent); margin-right: 6px; }
.help-step-b { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 2px; }
.help-faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
.help-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 13.5px; padding: 8px 0; list-style: none; }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary::before { content: "＋"; color: var(--accent); margin-right: 8px; font-weight: 700; }
.help-faq[open] summary::before { content: "－"; }
.help-faq-a { font-size: 13px; color: var(--muted); line-height: 1.6; padding: 0 0 10px 20px; }
.help-contact p { font-size: 13.5px; color: var(--ink); }
.help-contact-form { max-width: 460px; margin: 14px 0 10px; }
.help-contact-form .fl { margin-bottom: 12px; }
.help-contact-form .fl > span { font-weight: 600; color: var(--ink); font-size: 12.5px; }
.help-contact-form select, .help-contact-form textarea {
  font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); background: #fff; font-family: inherit; resize: vertical;
}
.help-contact-form select:focus, .help-contact-form textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.help-contact-actions { display: flex; align-items: center; gap: 12px; }
.help-contact-result { font-size: 12.5px; color: var(--danger); }
.help-contact-fallback { font-size: 12.5px; }
.help-meta { font-size: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ===== interaction feedback (press / busy / invalid) ===== */
/* immediate press feedback on every button so a click always feels registered */
.btn:active, .mini:active, .add-btn:active, .primary:active, .accent:active, .ghost:active,
.lh-mode:active, .stab:active, .cf-oc:active, .case-tab-btn:active, .aml-r:active, .lang-opt:active, .ts-chip:active, .ts-vt:active, .list-row:active,
.icon-btn:active, .user-chip:active, .ud-item:active, .client-row:active,
.mini-table tr:active, .lh-pick:active, .lh-swatch:active {
  transform: translateY(1px) scale(.985);
}
/* .side-item is a full-width nav rail row · a translateY press looks odd there, so give it its own subtle press treatment */
.side-item:active { background: rgba(255,255,255,.22); }
/* busy state: dim, block clicks, show a spinner in place of the icon */
.is-busy { position: relative; pointer-events: none; opacity: .75; }
.is-busy > i:first-child { visibility: hidden; }
.is-busy::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: lb-spin .6s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }
/* full-section loading state: spinner icon, not a bare word — consistent with .is-busy */
.panel-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 24px 12px; justify-content: center; font-size: 13px; }
.panel-loading i { animation: lb-spin .8s linear infinite; }
/* invalid field: red border + shake */
.is-invalid, input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(192,57,43,.14) !important;
  animation: lb-shake .4s ease;
}
@keyframes lb-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}

/* list landing (bills / letters) */
.list-toolbar { margin-bottom: 12px; }
.list-search { position: relative; max-width: 440px; }
.list-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.list-search input { width: 100%; padding: 10px 12px 10px 34px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.list-rows { display: flex; flex-direction: column; gap: 8px; }
.list-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit; }
.list-row:hover { background: #f5f7fa; border-color: #c7cfd8; }
.lr-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lr-title { font-weight: 600; color: var(--ink); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-meta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.lr-outcome { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.lr-date { font-size: 12px; }
.lr-arrow { color: var(--muted); font-size: 12px; }

/* AML / CDD (client form) */
.aml-risk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.aml-r { padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.aml-r.sel { border-width: 2px; font-weight: 700; }
.aml-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 10px; }
.aml-chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); }
.aml-chk input { width: 15px; height: 15px; accent-color: var(--brand); }
@media (max-width: 640px) { .aml-checks { grid-template-columns: 1fr; } }

/* stamp duty + undertaking rows (case panel) */
.stamp-row { display: flex !important; gap: 6px; align-items: center; flex-wrap: wrap; }
.stamp-row select, .stamp-row input { }
.tx-in.xs { max-width: 62px; }
.und-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; margin-bottom: 7px; background: #fff; }
.und-row .wide { flex: 1; min-width: 200px; }

/* conflict check tool (M6) */
.conflict-tool { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.conflict-tool > summary { font-weight: 600; color: var(--brand); cursor: pointer; list-style: none; }
.conflict-tool > summary::-webkit-details-marker { display: none; }
.conflict-tool textarea { width: 100%; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 14px; }
#conflict-results { margin-top: 12px; }
.conflict-clear { display: flex; align-items: center; gap: 8px; background: #e8f5ee; color: #1f6f4a; border: 1px solid #bfe3cd; border-radius: 9px; padding: 12px 14px; font-size: 13.5px; }
.conflict-hit-head { display: flex; align-items: center; gap: 8px; color: #a1201a; font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.conflict-hit { background: #fdecea; border: 1px solid rgba(192,57,43,.28); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 6px; }

/* vendors table */
.vendor-head, .vendor-row { grid-template-columns: 1.4fr 1.2fr 1.6fr 74px 34px !important; }
.vendor-bill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* dashboard: outcome bars + revenue bar */
.bar.rev { background: linear-gradient(180deg, var(--accent), var(--brand)); }
.oc-bar { display: grid; grid-template-columns: 150px 1fr 28px; gap: 10px; align-items: center; margin-bottom: 7px; }
.oc-lab { font-size: 12.5px; color: var(--ink); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-track { height: 10px; background: #eef1f4; border-radius: 6px; overflow: hidden; }
.oc-fill { height: 100%; border-radius: 6px; min-width: 2px; transition: width .3s; }
.oc-n { font-size: 12.5px; font-weight: 700; text-align: right; color: var(--muted); }
.oc-winrate { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
@media (max-width: 520px) { .oc-bar { grid-template-columns: 110px 1fr 24px; } }

/* ===== case management panel (M2/M3/M4) ===== */
.case-block { margin-top: 10px; }
/* T2-F: in-panel tab strip for the case sub-sections. Pill-button style
   matches .cf-oc/.stab; wraps to a second row on narrow panels instead of
   the .ts-vt segmented-group treatment (which assumes 2 items, not 6). */
.case-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.case-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.case-tab-btn:hover { background: #f5f7fa; }
.case-tab-btn.sel { background: var(--brand); color: #fff; border-color: var(--brand); }
.case-tab-panel { margin-top: 10px; }
.cf-fins { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.cf-fin { background: #f5f7fa; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
.cf-fin-l { font-size: 11px; color: var(--muted); }
.cf-fin-v { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.cf-fin-v.pos { color: #1f8b4c; } .cf-fin-v.neg { color: var(--danger); }
.cf-outcomes { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-oc { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cf-oc:hover { background: #f5f7fa; }
.cf-oc.sel { border-width: 2px; font-weight: 700; }
.doc-row { border: 1px solid var(--line); border-radius: 9px; padding: 10px; margin-bottom: 8px; background: #fff; }
.doc-main { display: flex; gap: 8px; align-items: center; }
.doc-main .wide { flex: 1; }
.doc-sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.doc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--brand); background: #eef2f7; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.doc-tag.serve { color: #1f6f4a; background: #e8f5ee; }
.doc-aos { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cf-limcalc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; background: #f5f7fa; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.cf-limcalc select, .cf-limcalc input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; }
.dl-row { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 7px; background: #fff; border-left-width: 4px; }
.dl-row.dl-over { border-left-color: var(--danger); }
.dl-row.dl-soon { border-left-color: #e0a800; }
.dl-row.dl-ok { border-left-color: #1f8b4c; }
.dl-row .wide { flex: 1; }
.dl-badge { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; min-width: 66px; text-align: right; }
.dl-row.dl-over .dl-badge { color: var(--danger); }
.dl-row.dl-soon .dl-badge { color: #b8860b; }

/* letters composer preview + template cards */
.letter-preview { display: flex; justify-content: center; }
.letter-preview .bill { transform: scale(.8); transform-origin: top center; margin-bottom: -180px; }
.ltpl-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: #fff; }
.ltpl-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ltpl-head input { flex: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 600; }
.ltpl-card textarea { font-family: inherit; line-height: 1.5; }

/* letterhead element toggles */
.lh-toggles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.lh-tog { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); cursor: pointer; }
.lh-tog input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

/* language picker: segmented control with circular flags */
.lang-pick { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.lang-opt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.lang-opt:hover { background: #f5f7fa; }
.lang-opt.sel { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(31,58,95,.12); }
.cflag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; font-size: 15px; line-height: 1; box-shadow: 0 0 0 1px var(--line) inset; background: #eef1f4; }
.cflag-en::before { content: "🇬🇧"; }
.cflag-zh::before { content: "🇭🇰"; }

/* user dropdown: icons, verified badge, role pill */
.ud-head .ud-i { width: 15px; color: var(--brand); opacity: .8; margin-right: 4px; }
.ud-vbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #1f8b4c; background: #eaf7ef; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.ud-role-pill { display: inline-flex; align-items: center; text-transform: capitalize; font-size: 11px; font-weight: 700; color: var(--brand); background: #eef2f7; border-radius: 999px; padding: 2px 10px; margin-left: 6px; }

/* activity log: search/filter + event list */
.audit-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.audit-search { position: relative; flex: 1; min-width: 200px; }
.audit-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.audit-search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
#au-filter { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; background: #fff; }
.audit-list { display: flex; flex-direction: column; gap: 8px; }
.audit-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.au-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; }
.au-ic.ev-add { background: #1f8b4c; }
.au-ic.ev-upd { background: var(--brand); }
.au-ic.ev-del { background: var(--danger); }
.au-body { min-width: 0; }
.au-line { font-size: 14px; color: var(--ink); }
.au-line b { text-transform: capitalize; }
.au-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.au-meta i { margin-right: 3px; }

/* blue info "i" with click tooltip */
.info-i { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--accent, #3a6ea5); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; font-family: Georgia, serif; cursor: pointer; position: relative; vertical-align: middle; }
.info-i:hover { filter: brightness(1.08); }
.info-i.open { filter: brightness(1.12); box-shadow: 0 0 0 3px rgba(58,110,165,.25); }
/* The tooltip is a single floating popover appended to <body> (see app.js
   showInfoPop). position:fixed so it is NEVER clipped by an overflow:hidden
   card/summary, and JS clamps it inside the viewport so it never shows half. */
.info-pop {
  position: fixed; z-index: 9999; width: max-content; max-width: min(320px, calc(100vw - 16px));
  background: #0f2138; color: #fff; font-size: 12.5px; font-weight: 400; font-family: inherit;
  line-height: 1.55; text-align: left; padding: 10px 13px; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); white-space: normal; pointer-events: none;
  opacity: 0; transition: opacity .12s ease;
}
.info-pop.show { opacity: 1; }

/* ---------- subscription gate: expired / trial banners (Task 3) ---------- */
.sub-banner {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
}
.sub-banner .sb-msg { flex: 1; }
.sub-banner.expired {
  background: #fdecea; color: var(--danger); border-bottom: 1px solid #f5c6c0;
}
.sub-banner.trial {
  background: #fff6e0; color: #8a6100; border-bottom: 1px solid #f0dca0;
}
.sub-banner .sb-btn {
  border: 1px solid currentColor; background: transparent; color: inherit;
  padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.sub-banner .sb-btn:hover { filter: brightness(.92); background: rgba(0,0,0,.04); }
.sub-banner .sb-close {
  background: transparent; border: none; color: inherit; opacity: .6;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 4px;
}
.sub-banner .sb-close:hover { opacity: 1; }

/* read-only mode: dim + disable the primary write actions (view/export stay live) */
body.readonly #btn-save,
body.readonly #bill-new,
body.readonly #btn-new-client,
body.readonly #btn-new-matter,
body.readonly #btn-add-client-2,
body.readonly #lt-new,
body.readonly #lt-save,
body.readonly [data-caseact="save-case"],
body.readonly [data-act="save-settings"],
body.readonly [data-act="save-disb"],
body.readonly [data-act="save-vendors"],
body.readonly [data-act="save-ltpl"],
body.readonly [data-act="save-letterhead"],
body.readonly [data-act="invite-member"],
body.readonly #btn-polish {
  opacity: .45; pointer-events: none; cursor: not-allowed; filter: grayscale(.3);
}