/* ══════════════════════════════════════════════════════════════════════════════
   Samadhi Reports — Design System
   Generated from redesign prototypes
══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange:      #E4780D;
  --orange-2:    #c4650a;
  --orange-50:   #FFF5EB;
  --orange-100:  #FFEEE6;
  --orange-200:  #fbd9bf;
  --ink:         #1a1a1a;
  --ink-2:       #2a2a2a;
  --muted:       #6b6b6b;
  --muted-2:     #9a9a9a;
  --line:        #ececea;
  --line-2:      #f2f1ee;
  --bg:          #faf8f5;
  --card:        #ffffff;
  --green:       #2e7d32;
  --green-soft:  #e8f5e9;
  --blue:        #1565c0;
  --blue-soft:   #e3f2fd;
  --red:         #b3261e;
  --red-soft:    #fdecec;
  --amber:       #a66100;
  --amber-soft:  #fff3dc;
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
::selection { background: var(--orange-100); color: var(--ink); }
#app { min-height: 100vh; }


  body { background: var(--bg); }

  /* Shell */
  .shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
  .sidebar {
    background: #fbf9f5;
    border-right: 1px solid var(--line);
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    padding: 14px 10px 10px;
  }
  .sb-logo { display:flex; align-items:center; gap:10px; padding: 6px 10px 16px; border-bottom: 1px solid var(--line-2); }
  .sb-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--orange); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; letter-spacing:-0.02em; }
  .sb-name { font-weight: 700; font-size: 14px; color: var(--orange); letter-spacing: -0.01em; }
  .sb-nav { list-style: none; padding: 10px 0; margin: 0; flex: 1; }
  .sb-nav li a {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; font-size: 13px; color: var(--ink-2);
    border-radius: 6px; margin: 1px 2px;
    transition: background .12s;
  }
  .sb-nav li a:hover { background: #f2ede6; }
  .sb-nav li a.active { background: var(--orange-100); color: var(--orange); font-weight: 600; }
  .sb-nav .ico { width: 16px; height: 16px; flex: none; color: var(--muted-2); }
  .sb-nav a.active .ico { color: var(--orange); }
  .sb-user {
    display:flex; align-items:center; gap:10px;
    padding: 10px; border-top: 1px solid var(--line-2);
    margin-top: auto;
  }
  .sb-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; }
  .sb-user-info { flex: 1; min-width: 0; line-height: 1.2; }
  .sb-user-name { font-weight: 600; font-size: 12.5px; }
  .sb-user-sub { font-size: 11px; color: var(--muted); }

  .main { padding: 20px 28px 80px; min-width: 0; }

  /* Breadcrumb */
  .crumbs { display:flex; align-items:center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
  .crumbs a { color: var(--muted); }
  .crumbs a:hover { color: var(--orange); }
  .crumb-sep { color: var(--muted-2); }

  /* Page header — tight, informative */
  .ph { display:flex; align-items:flex-start; justify-content:space-between; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
  .ph-title h1 {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px;
    color: var(--ink);
  }
  .serif h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.015em; font-size: 30px; }
  .ph-meta { display:flex; align-items:center; gap: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
  .ph-meta .dot { width: 3px; height: 3px; background: var(--muted-2); border-radius: 50%; }
  .ph-badge {
    display:inline-flex; align-items:center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--orange-100); color: var(--amber);
    font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--orange-200);
  }
  .ph-actions { display:flex; gap: 8px; flex-wrap: wrap; }

  /* Buttons */
  .btn {
    display:inline-flex; align-items:center; gap: 6px;
    padding: 7px 12px; font-size: 12.5px; font-weight: 500;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--card); color: var(--ink-2);
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
    font-family: inherit;
  }
  .btn:hover { border-color: #d6d3cc; background: #fbf9f5; }
  .btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
  .btn-primary:hover { background: #000; border-color: #000; }
  .btn-accent { background: var(--orange); color: #fff; border-color: var(--orange); }
  .btn-accent:hover { background: var(--orange-2); border-color: var(--orange-2); }
  .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
  .btn-ghost:hover { background: var(--line-2); color: var(--ink); }
  .btn-sm { padding: 4px 8px; font-size: 11.5px; }
  .btn-icon { padding: 6px; }

  /* Date pills — period selector */
  .occpicker {
    display:flex; align-items:center; gap: 6px; flex-wrap: nowrap;
    background: #f3efe9; padding: 4px; border-radius: 10px;
    width: fit-content; margin-bottom: 16px;
  }
  .occpicker button, .occpicker a {
    padding: 6px 14px; font-size: 12.5px; font-weight: 500;
    background: transparent; border: none; border-radius: 7px;
    color: var(--muted); cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; white-space: nowrap;
  }
  .occpicker button:hover, .occpicker a:hover { color: var(--ink); }
  .occpicker button.active, .occpicker a.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600; }
  .occpicker .count { font-size: 10.5px; color: var(--muted-2); }
  .occpicker button.active .count, .occpicker a.active .count { color: var(--muted); }

  /* Occurrence overflow dropdown */
  .occ-more-wrap { position: relative; }
  .occ-more-btn.open { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
  .occ-chevron { font-size: 10px; transition: transform .15s; display: inline-block; }
  .occ-more-btn.open .occ-chevron { transform: rotate(180deg); }
  .occ-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
    background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
    padding: 6px; min-width: 210px; max-height: 320px; overflow-y: auto;
  }
  .occ-dropdown.open { display: block; }
  .occ-dropdown-group {
    font-size: 10px; font-weight: 700; color: var(--muted-2);
    text-transform: uppercase; letter-spacing: .6px; padding: 6px 8px 2px;
  }
  .occ-dropdown-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; border-radius: 7px;
    font-size: 12.5px; font-weight: 500; color: var(--ink); text-decoration: none;
  }
  .occ-dropdown-item:hover { background: var(--cream); }
  .occ-dropdown-item.active { background: var(--peach); color: var(--orange); font-weight: 600; }
  .occ-dropdown-bk { font-size: 11px; color: var(--muted-2); }

  /* Stats band — NOT a card-wall. Inline, clear hierarchy. */
  .statband {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .stat {
    padding: 14px 18px;
    border-right: 1px solid var(--line-2);
    position: relative;
  }
  .stat:last-child { border-right: none; }
  .stat-label {
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 4px; font-weight: 500;
  }
  .stat-value {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .stat-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .stat-hybrid { display:flex; gap: 12px; align-items: flex-end; margin-top: 2px; }
  .stat-hybrid .leg { font-size: 11px; color: var(--muted); }
  .stat-hybrid .leg .num { font-size: 16px; font-weight: 700; color: var(--ink); display:block; }
  .stat-hybrid .leg.online .dot { background: var(--blue); }
  .stat-hybrid .leg.inperson .dot { background: var(--green); }
  .leg .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 2px; }

  /* Fill bars */
  .fillrow { display:flex; align-items:center; gap: 10px; margin-top: 4px; font-size: 11px; }
  .fillrow .lbl { color: var(--muted); width: 70px; }
  .fillrow .track { flex: 1; height: 5px; background: var(--line-2); border-radius: 3px; overflow: hidden; position: relative; }
  .fillrow .fill { height: 100%; border-radius: 3px; }
  .fillrow.online .fill { background: var(--blue); }
  .fillrow.inperson .fill { background: var(--green); }
  .fillrow .pct { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

  /* Side-panels (notes / tasks / history) as collapsible side column */
  .layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
  @media (max-width: 1200px) { .layout { grid-template-columns: 1fr; } }

  /* Panel */
  .panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .panel-head {
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--line-2);
    cursor: pointer; user-select: none;
  }
  .panel-head h3 {
    margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
    display:flex; align-items:center; gap: 8px;
  }
  .panel-count {
    font-size: 11px; font-weight: 600;
    padding: 2px 5px; border-radius: 999px; min-width: 20px; text-align: center;
    background: var(--line-2); color: var(--muted);
  }
  .panel-count.live { background: var(--orange-100); color: var(--amber); }
  .panel-body { padding: 12px 16px; }
  .panel.collapsed .panel-body { display: none; }
  .panel-chev {
    width: 14px; height: 14px; color: var(--muted);
    transition: transform .15s;
  }
  .panel.collapsed .panel-chev { transform: rotate(-90deg); }

  /* Tasks */
  .task {
    display:flex; gap: 10px; padding: 10px 12px; border-radius: 8px;
    align-items: flex-start;
    transition: background .12s;
  }
  .task:hover { background: #fbf9f5; }
  .task:hover .task-actions { opacity: 1; }
  .task-check {
    margin-top: 2px; width: 16px; height: 16px; flex: none;
    border: 1.5px solid #c9c5bd; border-radius: 4px;
    cursor: pointer; background: #fff;
    display: grid; place-items: center;
  }
  .task-check:hover { border-color: var(--orange); }
  .task-check.done { background: var(--orange); border-color: var(--orange); }
  .task-check.done svg { color: #fff; }
  .task-body { flex: 1; min-width: 0; }
  .task-title { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.35; }
  .task.done .task-title { color: var(--muted); text-decoration: line-through; }
  .task-meta { display:flex; align-items:center; gap: 8px; margin-top: 3px; font-size: 11px; color: var(--muted); }
  .due {
    display:inline-flex; align-items:center; gap: 4px;
    padding: 1px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 500;
  }
  .due.soon { background: var(--amber-soft); color: var(--amber); }
  .due.overdue { background: var(--red-soft); color: var(--red); }
  .due.ok { background: var(--line-2); color: var(--muted); }
  .task-actions {
    display:flex; gap: 2px; opacity: 0;
    transition: opacity .12s;
  }
  .task-actions .btn { padding: 3px 5px; }

  /* Notes */
  .note {
    display: grid; grid-template-columns: 28px 1fr; gap: 10px;
    padding: 10px 2px;
  }
  .note + .note { border-top: 1px solid var(--line-2); }
  .note-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--orange-100); color: var(--amber);
    display: grid; place-items: center; font-weight: 700; font-size: 11.5px;
  }
  .note-head { display:flex; align-items:baseline; gap: 8px; font-size: 11.5px; }
  .note-author { font-weight: 600; color: var(--ink-2); }
  .note-time { color: var(--muted); }
  .note-text { font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }
  .note-input {
    display: grid; grid-template-columns: 28px 1fr; gap: 10px;
    padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line-2);
  }
  .note-input textarea {
    width: 100%; min-height: 36px; resize: none;
    border: 1px solid var(--line); border-radius: 7px;
    padding: 8px 10px; font-family: inherit; font-size: 13px;
    outline: none; background: #fff;
    transition: border-color .12s, box-shadow .12s;
  }
  .note-input textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }

  /* Filter bar above table */
  .tablehead {
    display:flex; align-items:center; gap: 10px;
    margin-bottom: 10px; flex-wrap: wrap;
  }
  .tablehead h2 {
    font-size: 14px; font-weight: 600; margin: 0;
    letter-spacing: -0.005em;
    display: flex; align-items: center; gap: 8px;
  }
  .tablehead .seg {
    display: flex; background: var(--line-2); padding: 2px; border-radius: 7px;
  }
  .seg button {
    padding: 4px 10px; font-size: 12px; font-weight: 500;
    border: none; background: transparent; color: var(--muted);
    cursor: pointer; border-radius: 5px; font-family: inherit;
    display:flex; align-items:center; gap: 5px;
  }
  .seg button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600; }
  .seg .dot { width: 6px; height: 6px; border-radius: 50%; }
  .seg .dot.online { background: var(--blue); }
  .seg .dot.inperson { background: var(--green); }

  .search {
    position: relative; margin-left: auto;
  }
  .search input {
    border: 1px solid var(--line); border-radius: 7px;
    padding: 6px 10px 6px 30px; font-family: inherit; font-size: 12.5px;
    background: #fff; width: 200px;
    outline: none; transition: border-color .12s, box-shadow .12s, width .15s;
  }
  .search input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); width: 240px; }
  .search svg { position:absolute; top: 50%; left: 9px; transform: translateY(-50%); color: var(--muted-2); width: 14px; height: 14px; }

  /* Column menu */
  .colmenu-wrap { position: relative; }
  .colmenu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 6px; min-width: 240px;
  }
  .colmenu-section { padding: 6px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); font-weight: 600; }
  .colmenu label {
    display:flex; align-items:center; gap: 10px;
    padding: 6px 10px; border-radius: 6px;
    font-size: 12.5px; cursor: pointer;
  }
  .colmenu label:hover { background: var(--line-2); }
  .colmenu input[type=checkbox] { accent-color: var(--orange); }

  /* Bulk action bar */
  .bulk {
    display:flex; align-items:center; gap: 10px;
    padding: 8px 14px;
    background: var(--ink); color: #fff;
    border-radius: 10px; margin-bottom: 10px;
    font-size: 12.5px;
  }
  .bulk .btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color:#fff; }
  .bulk .btn:hover { background: rgba(255,255,255,0.2); }

  /* TABLE — the main work */
  .tbl-wrap {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  .tbl-scroll { overflow-x: auto; }
  table.attn {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    font-size: 13px;
  }
  table.attn th {
    text-align: left; font-weight: 500;
    padding: 10px 12px;
    background: #fbf9f5;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
  }
  table.attn th.sortable { cursor: pointer; user-select: none; }
  table.attn th.sortable:hover { color: var(--ink); }
  table.attn th .sortarrow { opacity: 0.4; margin-left: 4px; font-size: 9px; vertical-align: 1px; }
  table.attn th.sorted .sortarrow { opacity: 1; color: var(--orange); }
  table.attn td {
    padding: 12px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
  }
  .density-compact table.attn td { padding: 7px 12px; }
  .density-compact table.attn th { padding: 7px 12px; }
  .density-spacious table.attn td { padding: 16px 14px; }
  table.attn tr:last-child td { border-bottom: none; }
  table.attn tbody tr {
    transition: background .1s;
  }
  table.attn tbody tr:hover { background: #fbf9f5; }
  table.attn tbody tr:hover .row-actions { opacity: 1; }
  table.attn tr.is-sub { background: #fdfbf7; }
  table.attn tr.is-sub:hover { background: #f7f3ec; }
  table.attn tr.is-sub td:first-child + td { padding-left: 32px; position: relative; }
  table.attn tr.is-sub td:first-child + td::before {
    content: ""; position: absolute; left: 18px; top: 0; bottom: 50%;
    width: 1px; background: #d9d4cc;
  }
  table.attn tr.is-sub td:first-child + td::after {
    content: ""; position: absolute; left: 18px; top: 50%;
    width: 7px; height: 1px; background: #d9d4cc;
  }

  /* check column */
  .chk-col { width: 32px; padding-left: 16px !important; padding-right: 0 !important; }
  .chk-col input { accent-color: var(--orange); cursor: pointer; }

  /* Name */
  .name-cell { display:flex; align-items:center; gap: 10px; min-width: 0; }
  .avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--orange-100); color: var(--amber);
    display:grid; place-items:center;
    font-weight: 600; font-size: 10.5px; letter-spacing: 0;
    flex: none;
  }
  .is-sub .avatar { background: var(--line-2); color: var(--muted); font-size: 10px; }
  .name { font-weight: 600; color: var(--ink); font-size: 13px; line-height: 1.25; }
  .name:hover { color: var(--orange); }
  .email { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
  .name-stack { min-width: 0; overflow: hidden; }
  .name-stack .name, .name-stack .email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Ticket pills */
  .tck {
    display:inline-flex; align-items:center; gap: 6px;
    padding: 2px 8px; border-radius: 5px;
    font-size: 11.5px; font-weight: 500;
  }
  .tck.online   { background: var(--blue-soft); color: var(--blue); }
  .tck.inperson { background: var(--green-soft); color: var(--green); }
  .tck.hybrid   { background: var(--orange-100,#fff3e0); color: var(--amber); }
  .tck.manual   { background: var(--line-2); color: var(--muted); font-style: italic; }
  .tck .dot { width: 5px; height: 5px; border-radius: 50%; }
  .tck.online .dot   { background: var(--blue); }
  .tck.inperson .dot { background: var(--green); }
  .tck.hybrid .dot   { background: var(--amber); }

  /* Money column — tabular, de-emphasized zeros */
  .money { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .money .z { color: var(--muted-2); }
  .money .v { font-weight: 500; }
  .money-big { font-weight: 600; color: var(--ink); }

  /* Placeholder / edit-hint cells */
  .edit-hint {
    color: var(--muted-2); font-style: italic; font-size: 12px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .edit-hint:hover { color: var(--orange); }
  .edit-hint svg { width: 11px; height: 11px; opacity: 0.6; }
  td[data-editable]:hover .edit-hint svg { opacity: 1; }

  /* Row actions — reveal on hover */
  .row-actions {
    display: flex; gap: 2px; opacity: 0; transition: opacity .12s;
    justify-content: flex-end;
  }
  .row-actions .btn { padding: 4px 6px; color: var(--muted); }
  .row-actions .btn:hover { color: var(--ink); background: var(--line-2); border-color: transparent; }

  /* Note button */
  .notebtn {
    display:inline-flex; align-items:center; gap: 5px;
    padding: 3px 8px; border-radius: 5px;
    border: 1px dashed var(--line); background: transparent;
    color: var(--muted-2); font-size: 11.5px; cursor: pointer;
    font-family: inherit;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .notebtn:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-100); border-style: solid; }
  .notebtn.has-note {
    background: var(--orange-100); color: var(--amber);
    border: 1px solid var(--orange-200); border-style: solid;
  }
  .notebtn.has-note:hover { background: var(--orange-200); color: var(--amber); }

  /* Order link */
  .orderlink { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  .orderlink:hover { color: var(--orange); text-decoration: underline; }

  /* Toolbar row */
  .toolbar {
    display:flex; align-items:center; gap: 6px;
  }

  /* Footer of table */
  .tbl-foot {
    padding: 10px 14px; border-top: 1px solid var(--line-2);
    display:flex; align-items:center; justify-content:space-between;
    font-size: 12px; color: var(--muted);
    background: #fbf9f5;
  }
  .pager { display:flex; gap: 4px; }
  .pager button { padding: 4px 9px; font-size: 12px; border: 1px solid var(--line); background:#fff; border-radius: 5px; cursor: pointer; font-family: inherit; }
  .pager button:disabled { opacity: 0.4; cursor: not-allowed; }
  .pager button.active { background: var(--ink); color:#fff; border-color: var(--ink); font-weight: 600; }

  /* Annotations overlay */
  .anno {
    position: relative;
  }
  .anno-tag {
    position: absolute; z-index: 5;
    background: #fff5d6; color: #7a5200;
    border: 1px solid #f5d572;
    border-radius: 6px;
    padding: 6px 10px; font-size: 11.5px; line-height: 1.35;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    max-width: 240px; font-weight: 500;
    pointer-events: none;
  }
  .anno-tag::before {
    content: ""; position: absolute;
    width: 12px; height: 12px; background: #fff5d6;
    border-left: 1px solid #f5d572; border-bottom: 1px solid #f5d572;
    transform: rotate(45deg);
  }

  /* Cancelled disclosure */
  .disclosure {
    margin-top: 18px;
    border-top: 1px solid var(--line-2); padding-top: 12px;
  }
  .disclosure summary {
    font-size: 12.5px; color: var(--muted);
    cursor: pointer; display:flex; align-items:center; gap: 6px;
    padding: 6px 2px;
    list-style: none;
  }
  .disclosure summary::-webkit-details-marker { display: none; }
  .disclosure summary:hover { color: var(--ink); }

  /* Tweaks panel */
  .tw-panel {
    position: fixed; bottom: 18px; right: 18px; z-index: 50;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    padding: 14px; width: 260px; font-size: 12.5px;
  }
  .tw-panel h4 {
    font-size: 12px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); font-weight: 600;
    display:flex; align-items:center; gap: 6px;
  }
  .tw-row {
    display:flex; align-items:center; justify-content:space-between;
    padding: 6px 0; gap: 10px;
  }
  .tw-row + .tw-row { border-top: 1px solid var(--line-2); }
  .tw-label { color: var(--ink-2); font-size: 12.5px; }
  .tw-seg { display:flex; background: var(--line-2); padding: 2px; border-radius: 6px; }
  .tw-seg button { padding: 3px 8px; font-size: 11px; border: none; background: transparent; border-radius: 4px; cursor: pointer; font-family: inherit; color: var(--muted); }
  .tw-seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
  .switch {
    width: 30px; height: 17px; background: var(--line);
    border-radius: 999px; position: relative; cursor: pointer;
    transition: background .15s;
  }
  .switch::after {
    content:""; position:absolute; top:2px; left:2px;
    width: 13px; height: 13px; background: #fff;
    border-radius: 50%; transition: transform .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .switch.on { background: var(--orange); }
  .switch.on::after { transform: translateX(13px); }

  /* Mobile */
  @media (max-width: 820px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    /* Push content below the fixed hamburger button (38px + 12px top + 8px gap) */
    .main { padding: 58px 14px 80px; }
    .statband { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(even) { border-right: none; }
    .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
    .ph { gap: 12px; }
    .ph-title h1 { font-size: 22px; }
    .tbl-scroll { overflow-x: auto; }
    table.attn { min-width: 700px; }
    .tw-panel { bottom: 10px; right: 10px; left: 10px; width: auto; }
    /* Table card wrappers: allow horizontal scroll instead of clipping */
    .rv-wrap, .bo-wrap { overflow-x: auto; }
    /* Dashboard stat band: 3-col (1100px) → 2-col at mobile */
    .dash-statband { grid-template-columns: 1fr 1fr; }
    .dash-statband .stat:nth-child(3) { border-right: 1px solid var(--line-2); }
    .dash-statband .stat:nth-child(n+4) { border-top: none; }
    .dash-statband .stat:nth-child(2n) { border-right: none; }
    .dash-statband .stat:nth-child(n+3) { border-top: 1px solid var(--line-2); }
    /* Book orders band: 4-col → 2-col at mobile */
    .book-band { grid-template-columns: 1fr 1fr; }
    .book-cell:nth-child(3) { border-right: none; }
    .book-cell:nth-child(n+4) { border-top: 1px solid var(--line-2); }
  }

/* ── Dashboard ──────────────────────────────────────────────────────────── */

  .dash-statband {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  @media (max-width: 1100px) {
    .dash-statband { grid-template-columns: repeat(3, 1fr); }
    .dash-statband .stat:nth-child(3) { border-right: none; }
    .dash-statband .stat:nth-child(n+4) { border-top: 1px solid var(--line-2); }
  }

  .book-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
  }
  .book-band-head {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px 8px;
    border-bottom: 1px solid var(--line-2);
  }
  .book-band-head h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 7px; }
  .book-cell {
    padding: 12px 18px;
    border-right: 1px solid var(--line-2);
  }
  .book-cell:last-child { border-right: none; }
  .book-cell .stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; font-weight: 500; }
  .book-cell .stat-value { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .book-cell .stat-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .book-cell.alert .stat-value { color: var(--orange); }
  .book-cell.warn  .stat-value { color: var(--red); }

  .dash-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
  }
  @media (max-width: 1200px) { .dash-layout { grid-template-columns: 1fr; } }

  .chart-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: visible;
    margin-bottom: 20px;
  }
  .chart-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--line-2);
    border-radius: 12px 12px 0 0;
  }
  .chart-head h3 { font-size: 13px; font-weight: 600; margin: 0; letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; }
  .chart-body { padding: 16px 18px 14px; border-radius: 0 0 12px 12px; }

  .trend-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  }
  .trend-pill.up   { background: #e8f5e9; color: var(--green); }
  .trend-pill.down { background: var(--red-soft); color: var(--red); }

  /* Bar chart */
  .bar-chart { display: flex; align-items: flex-end; gap: 5px; height: 100px; }
  .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; height: 100%; justify-content: flex-end; position: relative; }
  .bar-col .bar {
    width: 100%; border-radius: 3px 3px 0 0;
    transition: background .12s; cursor: default;
  }
  .bar-col:hover .bar { background: var(--orange) !important; }
  .bar-col .bar-label { font-size: 9.5px; color: var(--muted-2); margin-top: 5px; white-space: nowrap; }
  .bar-col.current .bar-label { color: var(--ink); font-weight: 600; }

  /* Bar chart tooltip */
  .bar-tip {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--ink); color: #fff; border-radius: 6px;
    padding: 5px 9px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity .1s;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 10;
  }
  .bar-col:hover .bar-tip { opacity: 1; }

  /* Horizontal bar (top events) */
  .hbar-list { display: flex; flex-direction: column; gap: 0; }
  .hbar-row {
    display: grid; grid-template-columns: 160px 1fr 60px 60px 72px;
    align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--line-2);
    font-size: 12.5px;
  }
  .hbar-row:last-child { border-bottom: none; }
  .hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 500; }
  .hbar-track { flex: 1; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
  .hbar-fill  { height: 100%; border-radius: 3px; }
  .hbar-num   { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; font-size: 12px; }
  .hbar-num.strong { color: var(--ink); font-weight: 600; }
  .hbar-head {
    display: grid; grid-template-columns: 160px 1fr 60px 60px 72px;
    gap: 10px; padding: 8px 18px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted-2); font-weight: 600;
    background: #fbf9f5; border-bottom: 1px solid var(--line);
  }
  .hbar-head span { text-align: right; }
  .hbar-head span:first-child { text-align: left; }
  .hbar-head span:nth-child(2) { text-align: left; }

  /* Upcoming table */
  .mini-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .mini-tbl th {
    text-align: left; padding: 8px 10px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
    background: #fbf9f5;
  }
  .mini-tbl th.r, .mini-tbl td.r { text-align: right; }
  .mini-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; font-variant-numeric: tabular-nums; }
  .mini-tbl tr:last-child td { border-bottom: none; }
  .mini-tbl tbody tr { transition: background .1s; }
  .mini-tbl tbody tr:hover { background: #fbf9f5; }
  .mini-tbl .ev-name { font-weight: 500; color: var(--ink); }
  .mini-tbl .ev-date { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
  .fill-bar { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
  .fill-bar .track { width: 36px; height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
  .fill-bar .fill  { height: 100%; border-radius: 2px; }

  /* Period picker */
  .period-bar {
    display: flex; background: var(--line-2); padding: 3px; border-radius: 9px;
  }
  .period-bar button {
    padding: 5px 11px; font-size: 12px; font-weight: 500;
    border: none; background: transparent; color: var(--muted);
    cursor: pointer; border-radius: 7px; font-family: inherit; white-space: nowrap;
  }
  .period-bar button.active {
    background: #fff; color: var(--ink);
    box-shadow: 0 1px 3px rgba(0,0,0,.07); font-weight: 600;
  }
  .period-bar button:hover:not(.active) { color: var(--ink); }

  /* Custom range */
  .custom-range {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: var(--orange-50);
    border: 1px solid var(--orange-200); border-radius: 9px;
    font-size: 12.5px;
  }
  .custom-range label { font-weight: 600; color: var(--ink-2); }
  .custom-range input[type=date] {
    border: 1px solid var(--line); border-radius: 6px;
    padding: 5px 8px; font-family: inherit; font-size: 12.5px;
    background: #fff; outline: none;
  }
  .custom-range input[type=date]:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }

  /* Attention panel */
  .attn-task {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 10px; border-radius: 8px; cursor: default;
    transition: background .1s;
  }
  .attn-task:hover { background: #fbf9f5; }
  .attn-task-body { flex: 1; min-width: 0; }
  .attn-task-title { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
  .attn-task-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .overdue-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; background: var(--red-soft); color: var(--red); }
  .attn-note {
    display: grid; grid-template-columns: 26px 1fr; gap: 8px;
    padding: 8px 10px; border-radius: 8px; transition: background .1s; cursor: default;
  }
  .attn-note:hover { background: #fbf9f5; }
  .attn-note-av { width: 26px; height: 26px; border-radius: 50%; background: var(--orange-100); color: var(--amber); display: grid; place-items: center; font-weight: 700; font-size: 10.5px; }
  .attn-note-event { font-size: 11px; color: var(--orange); font-weight: 500; margin-bottom: 1px; }
  .attn-note-text  { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .attn-note-time  { font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }

  .dash-ph { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 14px; }
  .dash-ph h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 2px; }
  .dash-ph .sub { font-size: 13px; color: var(--muted); margin: 0; }

/* ── book-orders ──────────────────────────────────────────────────── */
/* KPI band variant for book-orders — hero is profit, trio is operational */
  .bo-kband {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .bo-kband .k { padding: 16px 20px; border-right: 1px solid var(--line-2); position: relative; min-width: 0; }
  .bo-kband .k:last-child { border-right: none; }
  .bo-kband .k-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 500; }
  .bo-kband .k-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
  .bo-kband .k.hero .k-value { font-size: 34px; color: var(--green); }
  .bo-kband .k-sub { font-size: 12px; color: var(--muted); margin-top: 4px; display:flex; align-items:center; gap: 6px; flex-wrap: wrap; }

  .bo-kband .k.hero { background: linear-gradient(180deg, #f4faf4 0%, #fff 70%); }

  /* Revenue waterfall inside hero */
  .bo-waterfall { display:flex; align-items:stretch; height: 22px; margin-top: 10px; border-radius: 5px; overflow: hidden; background: var(--line-2); font-size: 10px; color: #fff; font-weight: 600; }
  .bo-waterfall .seg { display:flex; align-items:center; justify-content:center; white-space: nowrap; }
  .bo-waterfall .rev { background: var(--orange); }
  .bo-waterfall .prod { background: #b67a3c; }
  .bo-waterfall .post { background: #c9985e; }
  .bo-waterfall .profit { background: var(--green); }
  .bo-waterfall-legend { display:flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--muted); }
  .bo-waterfall-legend .lg { display:inline-flex; align-items:center; gap: 5px; }
  .bo-waterfall-legend .sw { width: 9px; height: 9px; border-radius: 2px; }

  /* Operational cells */
  .bo-opstat { display:flex; align-items:baseline; gap: 8px; margin-top: 3px; }
  .bo-opstat .big { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
  .bo-opstat .unit { font-size: 12px; color: var(--muted); }
  .bo-urgent { color: var(--red); }
  .bo-ready  { color: var(--orange); }
  .bo-done   { color: var(--green); }

  /* Two-book split (4th cell): CM + PG mini cards */
  .bo-books { display:flex; flex-direction: column; gap: 8px; }
  .bo-book-row {
    display:grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center;
    padding: 4px 0;
  }
  .bo-book-row + .bo-book-row { border-top: 1px solid var(--line-2); padding-top: 8px; }
  .bo-book-cover {
    width: 26px; height: 34px; border-radius: 2px 4px 4px 2px;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700; color: #fff;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.08);
    position: relative;
  }
  .bo-book-cover::after { content:""; position:absolute; left:0; top:0; bottom:0; width: 2px; background: rgba(0,0,0,0.15); }
  .bo-book-cover.cm { background: linear-gradient(135deg, #2e5c4a, #1f3d30); }
  .bo-book-cover.pg { background: linear-gradient(135deg, #8a4a1c, #5d2e0f); }
  .bo-book-title { font-size: 12px; color: var(--ink-2); font-weight: 500; line-height: 1.2; }
  .bo-book-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
  .bo-book-qty { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.01em; }

  /* Flagged alert banner — prominent but not garish */
  .bo-alert {
    display:flex; gap: 14px; align-items: flex-start;
    background: #fef5f3; border: 1px solid #f2c4bc;
    border-left: 4px solid var(--red);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 12.5px; line-height: 1.5;
  }
  .bo-alert .ico { color: var(--red); flex: none; margin-top: 2px; }
  .bo-alert .body { flex: 1; }
  .bo-alert strong { color: var(--red); font-weight: 600; }
  .bo-alert .flags { display:flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .bo-alert .flag-btn {
    display:inline-flex; align-items:center; gap: 6px;
    padding: 4px 10px; border-radius: 6px;
    background: #fff; border: 1px solid #f2c4bc; color: var(--red);
    font-size: 11.5px; font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }
  .bo-alert .flag-btn:hover { border-color: var(--red); background: #fef0ed; }

  /* Table */
  .bo-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  table.bo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  table.bo th {
    text-align: left; font-weight: 500; padding: 10px 12px;
    background: #fbf9f5; color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line); white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
  }
  table.bo th.sortable { cursor: pointer; user-select: none; }
  table.bo th.sortable:hover { color: var(--ink); }
  table.bo th.sorted { color: var(--ink); }
  table.bo th.sorted .sortarrow { opacity: 1; color: var(--orange); }
  table.bo th .sortarrow { opacity: 0.4; margin-left: 4px; font-size: 9px; }
  table.bo th.num, table.bo td.num { text-align: right; }
  table.bo td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
  .density-compact table.bo td { padding: 7px 12px; }
  .density-compact table.bo th { padding: 7px 12px; }
  .density-spacious table.bo td { padding: 15px 14px; }
  table.bo tr:last-child td { border-bottom: none; }
  table.bo tbody tr { transition: background .1s; }
  table.bo tbody tr:hover { background: #fbf9f5; }
  table.bo tbody tr:hover .row-actions { opacity: 1; }
  table.bo tr.flagged td { background: #fef5f3; }
  table.bo tr.flagged:hover td { background: #fdecea; }
  table.bo tr.flagged td:first-child { border-left: 3px solid var(--red); }

  /* Order cell: # + date stacked */
  .bo-order {
    display: flex; flex-direction: column; line-height: 1.25;
    font-variant-numeric: tabular-nums;
  }
  .bo-order .num { font-weight: 600; font-size: 13px; color: var(--ink); }
  .bo-order .num:hover { color: var(--orange); }
  .bo-order .dt { font-size: 11px; color: var(--muted); }

  /* Customer cell */
  .bo-cust { display:flex; align-items:center; gap: 10px; min-width: 0; }
  .bo-cust .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--orange-100); color: var(--amber);
    display:grid; place-items:center;
    font-weight: 600; font-size: 11px; flex: none;
  }
  .bo-cust .stk { min-width: 0; }
  .bo-cust .nm { font-weight: 600; color: var(--ink); font-size: 13px; line-height: 1.2; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 200px; }
  .bo-cust .em { font-size: 11px; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 200px; }

  /* Ship address: city + postcode + country flag */
  .bo-ship { font-size: 12px; line-height: 1.3; min-width: 0; }
  .bo-ship .city { color: var(--ink-2); font-weight: 500; }
  .bo-ship .line1 { color: var(--muted); font-size: 11px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 180px; }
  .bo-ship .zip { color: var(--muted); font-variant-numeric: tabular-nums; }
  .cc-flag {
    display:inline-block; padding: 0 5px; margin-right: 4px;
    border-radius: 3px; font-size: 10px; font-weight: 600;
    background: var(--line-2); color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    vertical-align: 1px;
  }
  .cc-flag.intl { background: var(--blue-soft); color: var(--blue); }

  /* Book pills */
  .bo-books-cell { display:flex; flex-wrap: wrap; gap: 5px; }
  .bo-book-pill {
    display:inline-flex; align-items:center; gap: 5px;
    padding: 2px 7px 2px 4px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .bo-book-pill.cm { background: #e3efe9; color: #2e5c4a; }
  .bo-book-pill.pg { background: #f4e9dc; color: #8a4a1c; }
  .bo-book-pill .sw { width: 4px; height: 14px; border-radius: 1px; }
  .bo-book-pill.cm .sw { background: #2e5c4a; }
  .bo-book-pill.pg .sw { background: #8a4a1c; }
  .bo-book-pill .q { font-variant-numeric: tabular-nums; }
  .bo-book-pill .lbl { font-weight: 500; opacity: 0.85; }

  /* Dedication */
  .bo-ded {
    display:inline-flex; align-items:center; gap: 5px; max-width: 200px;
    padding: 3px 8px; border-left: 2px solid var(--orange);
    background: var(--orange-100); color: var(--amber);
    border-radius: 0 4px 4px 0;
    font-size: 11.5px; font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bo-ded svg { flex: none; opacity: 0.7; }

  /* Donation pill */
  .bo-don {
    display:inline-flex; align-items:center; gap: 4px;
    padding: 1px 7px; border-radius: 4px;
    background: var(--orange-100); color: var(--amber);
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* Total */
  .bo-total { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 13.5px; }

  /* Status badge (reimagined, quieter than event badge) */
  .bo-status {
    display:inline-flex; align-items:center; gap: 5px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .bo-status .dot { width: 6px; height: 6px; border-radius: 50%; }
  .bo-status.pending   { background: var(--amber-soft); color: var(--amber); }
  .bo-status.pending .dot { background: var(--amber); }
  .bo-status.flagged   { background: var(--red-soft); color: var(--red); }
  .bo-status.flagged .dot { background: var(--red); animation: blink 1.6s ease-in-out infinite; }
  .bo-status.processing{ background: var(--blue-soft); color: var(--blue); }
  .bo-status.processing .dot { background: var(--blue); }
  .bo-status.dispatched{ background: var(--green-soft); color: var(--green); }
  .bo-status.dispatched .dot { background: var(--green); }
  .bo-status.completed { background: var(--green-soft); color: var(--green); }
  .bo-status.completed .dot { background: var(--green); }
  .bo-status.cancelled { background: var(--line-2); color: var(--muted); }
  .bo-status.cancelled .dot { background: var(--muted-2); }
  @keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

  /* Action button for "Mark dispatched" visible on processing rows */
  .bo-dispatch-btn {
    display:inline-flex; align-items:center; gap: 5px;
    padding: 4px 9px; border-radius: 6px;
    background: var(--ink); color: #fff; border: 1px solid var(--ink);
    font-size: 11.5px; font-weight: 600; cursor: pointer;
    font-family: inherit;
  }
  .bo-dispatch-btn:hover { background: #000; }

  /* Row actions */
  .row-actions { display:flex; gap: 4px; opacity: 0; transition: opacity .12s; justify-content: flex-end; }
  .row-actions .btn { padding: 4px 6px; color: var(--muted); }
  .row-actions .btn:hover { color: var(--ink); background: var(--line-2); border-color: transparent; }

  /* Filter bar */
  .bo-head {
    display:flex; align-items:center; gap: 10px;
    margin-bottom: 10px; flex-wrap: wrap;
  }
  .bo-head h2 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.005em; display:flex; align-items:center; gap: 8px; }
  .bo-head .ct { font-size: 11.5px; color: var(--muted); padding: 1px 8px; border-radius: 999px; background: var(--line-2); font-weight: 500; }
  .bo-head .seg { display: flex; background: var(--line-2); padding: 2px; border-radius: 7px; }
  .bo-head .seg button { padding: 4px 10px; font-size: 12px; font-weight: 500; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 5px; font-family: inherit; display:inline-flex; align-items:center; gap: 5px; }
  .bo-head .seg button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600; }
  .bo-head .seg .dot { width: 6px; height: 6px; border-radius: 50%; }
  .bo-head .seg .cpt { font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; margin-left: 3px; }
  .bo-head .seg button.active .cpt { color: var(--muted); }
  .bo-head .search { position: relative; }
  .bo-head .search input {
    border: 1px solid var(--line); border-radius: 7px;
    padding: 6px 10px 6px 30px; font-family: inherit; font-size: 12.5px;
    background: #fff; width: 240px; outline: none;
    transition: border-color .12s, box-shadow .12s, width .15s;
  }
  .bo-head .search input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); width: 300px; }
  .bo-head .search svg { position:absolute; top: 50%; left: 9px; transform: translateY(-50%); color: var(--muted-2); }

  /* Book-type filter chips (second row) */
  .bo-chips { display:flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .bo-chip {
    display:inline-flex; align-items:center; gap: 6px;
    padding: 4px 10px 4px 6px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line);
    font-size: 11.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
    font-family: inherit;
  }
  .bo-chip:hover { border-color: #d6d3cc; background: #fbf9f5; }
  .bo-chip.on { background: var(--orange-100); color: var(--amber); border-color: var(--orange-200); }
  .bo-chip .sw { width: 4px; height: 14px; border-radius: 1px; }
  .bo-chip .ct { font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
  .bo-chip.on .ct { color: var(--amber); }

  /* Footer */
  .bo-wrap .tbl-foot {
    padding: 10px 14px; border-top: 1px solid var(--line-2);
    display:flex; align-items:center; justify-content:space-between;
    font-size: 12px; color: var(--muted);
    background: #fbf9f5;
  }
  .bo-wrap .pager { display:flex; gap: 4px; }
  .bo-wrap .pager button { padding: 4px 9px; font-size: 12px; border: 1px solid var(--line); background:#fff; border-radius: 5px; cursor: pointer; font-family: inherit; }
  .bo-wrap .pager button:disabled { opacity: 0.4; cursor: not-allowed; }
  .bo-wrap .pager button.active { background: var(--ink); color:#fff; border-color: var(--ink); font-weight: 600; }

  @media (max-width: 980px) {
    .bo-kband { grid-template-columns: 1fr 1fr; }
    .bo-kband .k { border-right: none; border-bottom: 1px solid var(--line-2); }
    .bo-kband .k.hero { grid-column: 1 / -1; }
  }

/* ── bookings ──────────────────────────────────────────────────── */
/* KPI band — mirrors events list, plus a compact sparkline in the hero */
  .bk-kband {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .bk-kband .k {
    padding: 16px 20px;
    border-right: 1px solid var(--line-2);
    position: relative;
    min-width: 0;
  }
  .bk-kband .k:last-child { border-right: none; }
  .bk-kband .k-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 500; }
  .bk-kband .k-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
  .bk-kband .k.hero .k-value { font-size: 34px; }
  .bk-kband .k-sub { font-size: 12px; color: var(--muted); margin-top: 4px; display:flex; align-items:center; gap: 6px; flex-wrap: wrap; }
  .bk-kband .split-row { display:flex; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
  .bk-kband .seg-bar { display:flex; height: 4px; border-radius: 2px; overflow:hidden; background: var(--line-2); width: 100%; margin-top: 8px; }
  .bk-kband .seg-bar .t { background: var(--orange); }
  .bk-kband .seg-bar .d { background: var(--amber); opacity: 0.55; }

  /* Sparkline inside hero */
  .spark {
    display: block; margin-top: 10px; width: 100%; height: 34px;
  }
  .spark .area { fill: var(--orange-100); }
  .spark .line { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
  .spark .today { fill: var(--orange); }
  .spark-axis { display:flex; justify-content:space-between; font-size: 10px; color: var(--muted-2); margin-top: 2px; font-variant-numeric: tabular-nums; }

  /* Top events mini-leaderboard in 4th cell */
  .bk-top { display:flex; flex-direction: column; gap: 6px; margin-top: 6px; }
  .bk-top-row { display:flex; align-items:baseline; gap: 8px; font-size: 12px; min-width: 0; }
  .bk-top-row .rk { color: var(--muted-2); font-variant-numeric: tabular-nums; font-weight: 600; width: 12px; flex: none; }
  .bk-top-row .nm {
    color: var(--ink-2); font-weight: 500; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bk-top-row .nm:hover { color: var(--orange); }
  .bk-top-row .ct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; flex: none; }

  /* Period tabs — reuse period style but scoped */
  .bk-period {
    display:inline-flex; align-items:center; gap: 4px;
    background: #f3efe9; padding: 3px; border-radius: 9px;
    margin-bottom: 16px;
  }
  .bk-period button {
    padding: 5px 12px; font-size: 12px; font-weight: 500;
    background: transparent; border: none; border-radius: 6px;
    color: var(--muted); cursor: pointer; font-family: inherit;
  }
  .bk-period button:hover { color: var(--ink); }
  .bk-period button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600; }

  /* Table */
  .bk-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  table.bk { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  table.bk th {
    text-align: left; font-weight: 500; padding: 10px 12px;
    background: #fbf9f5; color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line); white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
  }
  table.bk th.sortable { cursor: pointer; user-select: none; }
  table.bk th.sortable:hover { color: var(--ink); }
  table.bk th.sorted { color: var(--ink); }
  table.bk th.sorted .sortarrow { opacity: 1; color: var(--orange); }
  table.bk th .sortarrow { opacity: 0.4; margin-left: 4px; font-size: 9px; }
  table.bk th.num, table.bk td.num { text-align: right; }
  table.bk td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
  .density-compact table.bk td { padding: 7px 12px; }
  .density-compact table.bk th { padding: 7px 12px; }
  .density-spacious table.bk td { padding: 15px 14px; }
  table.bk tr:last-child td { border-bottom: none; }
  table.bk tbody tr { transition: background .1s; }
  table.bk tbody tr:hover { background: #fbf9f5; }
  table.bk tbody tr:hover .row-actions { opacity: 1; }
  table.bk tr.sel td { background: var(--orange-50); }
  table.bk tr.sel:hover td { background: var(--orange-100); }

  /* Group header row (when group-by-event is on) */
  table.bk tr.grp td {
    background: #fbf9f5;
    border-bottom: 1px solid var(--line);
    padding: 8px 12px;
    font-size: 12px;
  }
  .grp-head {
    display:flex; align-items:center; gap: 10px;
  }
  .grp-head .caret { width: 12px; height: 12px; color: var(--muted); transition: transform .12s; flex: none; }
  .grp-head.collapsed .caret { transform: rotate(-90deg); }
  .grp-head .n { font-weight: 600; color: var(--ink); font-size: 13px; }
  .grp-head .n:hover { color: var(--orange); }
  .grp-head .meta { font-size: 11.5px; color: var(--muted); display:flex; align-items:center; gap: 8px; }
  .grp-head .meta .dot { width: 3px; height: 3px; background: var(--muted-2); border-radius: 50%; }
  .grp-head .totals { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; display:flex; gap: 16px; }
  .grp-head .totals b { color: var(--ink); font-weight: 600; margin-right: 3px; }

  /* Person (name+email+guest badge) */
  .bk-person {
    display:flex; align-items:center; gap: 10px; min-width: 0;
  }
  .bk-person .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--orange-100); color: var(--amber);
    display:grid; place-items:center;
    font-weight: 600; font-size: 11px;
    flex: none;
  }
  .bk-person.guest .avatar { background: var(--line-2); color: var(--muted); }
  .bk-person .stk { min-width: 0; }
  .bk-person .nm { font-weight: 600; color: var(--ink); font-size: 13px; line-height: 1.2; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 220px; }
  .bk-person .nm:hover { color: var(--orange); }
  .bk-person .em { font-size: 11.5px; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 220px; }
  .guest-pill {
    display:inline-block; padding: 1px 5px; margin-left: 6px;
    border-radius: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--line-2); color: var(--muted); vertical-align: 1px;
  }

  /* Event cell: compact — date stack + name + format pill */
  .bk-event {
    display:flex; align-items:center; gap: 10px; min-width: 0;
  }
  .bk-date-chip {
    flex: none;
    display: flex; flex-direction: column; align-items:center; justify-content:center;
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .bk-date-chip .m { font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-top: 2px; }
  .bk-date-chip .d { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-top: 1px; }
  .bk-date-chip .wd { font-size: 7.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; margin-bottom: 2px; }

  .bk-event .meta { min-width: 0; }
  .bk-event .nm { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 260px; }
  .bk-event .nm:hover { color: var(--orange); }
  .bk-event .sub { display:flex; align-items:center; gap: 8px; margin-top: 2px; font-size: 11px; color: var(--muted); }

  /* Format pill (reuse from events_styles vocabulary) */
  .ev-fmt { display:inline-flex; align-items:center; gap: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; }
  .ev-fmt.hybrid    { background: var(--orange-100); color: var(--amber); }
  .ev-fmt.online    { background: var(--blue-soft);  color: var(--blue); }
  .ev-fmt.inperson  { background: var(--green-soft); color: var(--green); }
  .ev-fmt .dot { width: 5px; height: 5px; border-radius: 50%; }
  .ev-fmt.hybrid .dot    { background: var(--amber); }
  .ev-fmt.online .dot    { background: var(--blue); }
  .ev-fmt.inperson .dot  { background: var(--green); }

  /* Booked-at: "2d ago" with absolute tooltip; stacked */
  .booked-stk { line-height: 1.2; font-variant-numeric: tabular-nums; }
  .booked-stk .rel { font-size: 12px; font-weight: 500; color: var(--ink); }
  .booked-stk .rel.today { color: var(--orange); font-weight: 600; }
  .booked-stk .abs { font-size: 11px; color: var(--muted); }

  /* Seats cell */
  .seats-cell {
    display:inline-flex; align-items:center; gap: 4px;
    font-variant-numeric: tabular-nums; font-weight: 500;
  }
  .seats-cell .x { color: var(--muted-2); font-weight: 400; margin: 0 2px; }
  .seats-cell.multi { color: var(--amber); font-weight: 600; }

  /* Amount: ticket + dana breakdown on hover */
  .amt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .amt .v { font-weight: 600; color: var(--ink); }
  .amt .v.zero { color: var(--muted-2); font-weight: 400; }
  .amt .don {
    display:inline-flex; align-items:center; gap: 3px;
    margin-left: 6px; font-size: 10.5px; color: var(--amber);
    background: var(--orange-100); padding: 0 5px; border-radius: 3px;
    font-weight: 600;
  }

  /* Order link */
  .orderlink {
    font-variant-numeric: tabular-nums; color: var(--muted);
    font-size: 12px;
  }
  .orderlink:hover { color: var(--orange); text-decoration: underline; }

  /* Selection + row actions reuse */
  table.bk .chk-col { width: 34px; padding-left: 14px; padding-right: 0; }
  table.bk .chk-col input { accent-color: var(--orange); cursor: pointer; }
  .row-actions { display:flex; gap: 4px; opacity: 0; transition: opacity .12s; justify-content: flex-end; }
  .row-actions .btn { padding: 4px 6px; color: var(--muted); }
  .row-actions .btn:hover { color: var(--ink); background: var(--line-2); border-color: transparent; }

  /* Format filter tabs in bookings toolbar */
  .bk-fmt-tabs { display:inline-flex; align-items:center; gap: 4px; background: var(--line-2); padding: 2px; border-radius: 7px; }
  .bk-fmt-tabs button { padding: 4px 10px; font-size: 12px; font-weight: 500; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 5px; font-family: inherit; display:inline-flex; align-items:center; gap: 5px; }
  .bk-fmt-tabs button:hover { color: var(--ink); }
  .bk-fmt-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600; }
  .bk-fmt-tabs .dot { width: 6px; height: 6px; border-radius: 50%; display:inline-block; }

  /* Dana donation label */
  .dana-pill { display:inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px; background: var(--green-soft,#e8f5e9); color: var(--green); font-size: 10.5px; font-weight: 600; white-space: nowrap; }

  /* Filter bar above table */
  .bk-head {
    display:flex; align-items:center; gap: 10px;
    margin-bottom: 10px; flex-wrap: wrap;
  }
  .bk-head h2 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.005em; display:flex; align-items:center; gap: 8px; }
  .bk-head .ct { font-size: 11.5px; color: var(--muted); padding: 1px 8px; border-radius: 999px; background: var(--line-2); font-weight: 500; }
  .bk-head .seg { display: flex; background: var(--line-2); padding: 2px; border-radius: 7px; }
  .bk-head .seg button { padding: 4px 10px; font-size: 12px; font-weight: 500; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 5px; font-family: inherit; display:inline-flex; align-items:center; gap: 5px; }
  .bk-head .seg button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600; }
  .bk-head .seg .dot { width: 6px; height: 6px; border-radius: 50%; }
  .bk-head .seg .dot.online { background: var(--blue); }
  .bk-head .seg .dot.inperson { background: var(--green); }
  .bk-head .seg .dot.hybrid { background: var(--amber); }
  .bk-head .search { position: relative; }
  .bk-head .search input {
    border: 1px solid var(--line); border-radius: 7px;
    padding: 6px 10px 6px 30px; font-family: inherit; font-size: 12.5px;
    background: #fff; width: 220px; outline: none;
    transition: border-color .12s, box-shadow .12s, width .15s;
  }
  .bk-head .search input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); width: 280px; }
  .bk-head .search svg { position:absolute; top: 50%; left: 9px; transform: translateY(-50%); color: var(--muted-2); }

  /* Bulk action bar */
  .bk-bulk {
    display:flex; align-items:center; gap: 10px;
    padding: 9px 14px;
    background: var(--ink); color: #fff;
    border-radius: 10px; margin-bottom: 10px;
    font-size: 12.5px;
  }
  .bk-bulk b { font-weight: 600; }
  .bk-bulk .btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color:#fff; }
  .bk-bulk .btn:hover { background: rgba(255,255,255,0.2); }
  .bk-bulk .spacer { flex: 1; }

  /* Toolbar toggle (Group by event) */
  .toggle-btn {
    display:inline-flex; align-items:center; gap: 6px;
    padding: 6px 10px; font-size: 12.5px; font-weight: 500;
    border: 1px solid var(--line); border-radius: 7px;
    background: #fff; color: var(--ink-2); cursor: pointer; font-family: inherit;
  }
  .toggle-btn:hover { border-color: #d6d3cc; background: #fbf9f5; }
  .toggle-btn.on { background: var(--orange-100); color: var(--amber); border-color: var(--orange-200); }

  /* Footer */
  .bk-wrap .tbl-foot {
    padding: 10px 14px; border-top: 1px solid var(--line-2);
    display:flex; align-items:center; justify-content:space-between;
    font-size: 12px; color: var(--muted);
    background: #fbf9f5;
  }
  .bk-wrap .pager { display:flex; gap: 4px; }
  .bk-wrap .pager button { padding: 4px 9px; font-size: 12px; border: 1px solid var(--line); background:#fff; border-radius: 5px; cursor: pointer; font-family: inherit; }
  .bk-wrap .pager button:disabled { opacity: 0.4; cursor: not-allowed; }
  .bk-wrap .pager button.active { background: var(--ink); color:#fff; border-color: var(--ink); font-weight: 600; }

  /* Annotations */
  .anno { position: relative; }
  .anno-tag {
    position: absolute; z-index: 5;
    background: #fff5d6; color: #7a5200;
    border: 1px solid #f5d572;
    border-radius: 6px;
    padding: 6px 10px; font-size: 11.5px; line-height: 1.35;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    max-width: 240px; font-weight: 500;
    pointer-events: none;
  }

  @media (max-width: 980px) {
    .bk-kband { grid-template-columns: 1fr 1fr; }
    .bk-kband .k { border-right: none; border-bottom: 1px solid var(--line-2); }
    .bk-kband .k.hero { grid-column: 1 / -1; }
  }

/* ── community ──────────────────────────────────────────────────── */
/* Segment cards row */
  .seg-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .seg-card {
    padding: 14px 16px;
    border-right: 1px solid var(--line-2);
    cursor: pointer;
    transition: background .12s;
    position: relative;
  }
  .seg-card:last-child { border-right: none; }
  .seg-card:hover { background: #fbf9f5; }
  .seg-card.active { background: var(--orange-50); }
  .seg-card.active::after {
    content: ''; position: absolute; bottom: 0; left: 16px; right: 16px;
    height: 2px; background: var(--orange); border-radius: 2px 2px 0 0;
  }
  .seg-card .seg-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted); font-weight: 500; margin-bottom: 4px;
  }
  .seg-card.active .seg-label { color: var(--orange); }
  .seg-card .seg-count {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .seg-card .seg-bookings {
    font-size: 11.5px; color: var(--muted); margin-top: 1px;
  }
  .seg-card .seg-delta {
    font-size: 11px; margin-top: 3px; font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .seg-delta.up { color: var(--green); }
  .seg-delta.down { color: var(--red); }
  .seg-delta.flat { color: var(--muted-2); }

  /* Period selector */
  .comm-period {
    display: flex; align-items: center; gap: 4px;
    background: #f3efe9; padding: 3px; border-radius: 9px;
    width: fit-content; margin-bottom: 16px;
  }
  .comm-period button {
    padding: 5px 12px; font-size: 12px; font-weight: 500;
    background: transparent; border: none; border-radius: 6px;
    color: var(--muted); cursor: pointer; font-family: inherit;
  }
  .comm-period button:hover { color: var(--ink); }
  .comm-period button.active {
    background: #fff; color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600;
  }

  /* People table */
  .people-wrap {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  table.ptbl {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
  }
  table.ptbl th {
    text-align: left; font-weight: 500; padding: 10px 12px;
    background: #fbf9f5; color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line); white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
  }
  table.ptbl th.sortable { cursor: pointer; user-select: none; }
  table.ptbl th.sortable:hover { color: var(--ink); }
  table.ptbl th .sa { opacity: 0.4; margin-left: 4px; font-size: 9px; }
  table.ptbl th.sorted .sa { opacity: 1; color: var(--orange); }
  table.ptbl td {
    padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle;
  }
  table.ptbl tr:last-child td { border-bottom: none; }
  table.ptbl tbody tr { transition: background .1s; }
  table.ptbl tbody tr:hover { background: #fbf9f5; }
  table.ptbl .num { font-variant-numeric: tabular-nums; text-align: right; }
  table.ptbl .money { text-align: right; font-variant-numeric: tabular-nums; }

  /* Segment chip in table */
  .seg-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  }
  .seg-chip.core { background: #fce4ec; color: #c62828; }
  .seg-chip.regular { background: var(--orange-100); color: var(--amber); }
  .seg-chip.occasional { background: var(--blue-soft); color: var(--blue); }
  .seg-chip.once { background: var(--line-2); color: var(--muted); }

  /* Lapsed section */
  .lapsed-section {
    margin-top: 28px; padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .lapsed-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
  }
  .lapsed-head h2 {
    font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px;
  }
  .lapsed-head p { margin: 0; font-size: 12.5px; color: var(--muted); }
  .lapsed-stat {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: var(--amber-soft); border: 1px solid #f5d572;
    border-radius: 8px; font-size: 13px; color: var(--amber); font-weight: 500;
    margin-bottom: 12px;
  }
  .lapsed-stat strong { font-size: 18px; font-weight: 700; color: var(--ink); }

  /* Days-since bar */
  .days-bar { display: flex; align-items: center; gap: 8px; }
  .days-track { width: 50px; height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
  .days-fill { height: 100%; border-radius: 2px; }
  .days-num { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; min-width: 28px; }

  @media (max-width: 900px) {
    .seg-row { grid-template-columns: repeat(3, 1fr); }
    .seg-row .seg-card:nth-child(3) { border-right: none; }
  }
  @media (max-width: 600px) {
    .seg-row { grid-template-columns: 1fr 1fr; }
    .seg-row .seg-card:nth-child(even) { border-right: none; }
  }

/* ── demographics ──────────────────────────────────────────────────── */
/* Map container */
  .demo-map-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden; margin-bottom: 16px;
  }
  .demo-map-legend {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 16px; border-bottom: 1px solid var(--line-2);
    font-size: 11.5px; color: var(--muted);
  }
  .demo-map-legend .leg-item {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .demo-map-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
  }
  .demo-map-dot.hollow {
    background: transparent; border: 2px solid currentColor;
    width: 7px; height: 7px;
  }
  #community-map {
    height: 440px; width: 100%; background: #f5f3ef;
  }

  /* Segment filter pills */
  .demo-seg-bar {
    display: flex; align-items: center; gap: 4px;
    background: #f3efe9; padding: 3px; border-radius: 9px;
    width: fit-content;
  }
  .demo-seg-bar button {
    padding: 5px 12px; font-size: 12px; font-weight: 500;
    background: transparent; border: none; border-radius: 6px;
    color: var(--muted); cursor: pointer; font-family: inherit;
  }
  .demo-seg-bar button:hover { color: var(--ink); }
  .demo-seg-bar button.active {
    background: #fff; color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600;
  }

  /* Radius search */
  .demo-search-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
  }
  .demo-search-card h3 {
    margin: 0 0 10px; font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  }
  .demo-search-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .demo-search-row label {
    font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  }
  .demo-search-row input,
  .demo-search-row select {
    padding: 7px 10px; font-size: 12.5px; font-family: inherit;
    border: 1px solid var(--line); border-radius: 7px;
    outline: none; background: #fff;
    transition: border-color .15s, box-shadow .15s;
  }
  .demo-search-row input:focus,
  .demo-search-row select:focus {
    border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100);
  }
  .demo-search-row input { width: 130px; text-transform: uppercase; }
  .demo-search-result {
    font-size: 12.5px; color: var(--muted);
  }

  /* Top cities grid */
  .demo-cities-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  }
  .demo-city-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; font-size: 13px;
    border-bottom: 1px solid var(--line-2);
  }
  .demo-city-row:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--line-2); margin-right: -1px; }
  .demo-city-row:nth-child(even) { padding-left: 16px; }
  .demo-city-row:nth-last-child(-n+2) { border-bottom: none; }
  .demo-city-count {
    font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
    font-size: 12.5px;
  }

  /* Charts row */
  .demo-charts-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 16px;
  }
  @media (max-width: 900px) { .demo-charts-row { grid-template-columns: 1fr; } }
  .demo-chart-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 16px 18px;
  }
  .demo-chart-card h3 {
    margin: 0 0 12px; font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  }
  .demo-chart-canvas { width: 100%; max-height: 240px; }

  /* Bar charts — pure CSS (no Chart.js dependency) */
  .demo-hbar { display: flex; flex-direction: column; gap: 6px; }
  .demo-hbar-row {
    display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px;
    align-items: center; font-size: 12.5px;
  }
  .demo-hbar-label { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .demo-hbar-track { height: 16px; background: var(--line-2); border-radius: 4px; overflow: hidden; position: relative; }
  .demo-hbar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
  .demo-hbar-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; font-size: 12px; }

  /* Donut — CSS based */
  .demo-donut-wrap { display: flex; align-items: center; gap: 24px; justify-content: center; padding: 12px 0; }
  .demo-donut-svg { width: 140px; height: 140px; }
  .demo-donut-legend { display: flex; flex-direction: column; gap: 8px; }
  .demo-donut-leg {
    display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  }
  .demo-donut-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
  .demo-donut-pct { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; color: var(--ink); }

  /* Year bar chart */
  .demo-year-bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 8px; }
  .demo-year-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
  .demo-year-bar { width: 100%; border-radius: 3px 3px 0 0; transition: height .4s ease; min-height: 2px; }
  .demo-year-label { font-size: 10px; color: var(--muted); writing-mode: vertical-lr; transform: rotate(180deg); height: 30px; }
  .demo-year-val { font-size: 10px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .demo-year-labels { display: flex; gap: 4px; margin-top: 2px; }
  .demo-year-labels span { flex: 1; text-align: center; font-size: 9px; color: var(--muted); overflow: hidden; }

/* ── events ──────────────────────────────────────────────────── */
/* KPI band — tighter than 6-card sprawl: single hero + trio */
  .kband {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .kband .k {
    padding: 16px 20px;
    border-right: 1px solid var(--line-2);
    position: relative;
  }
  .kband .k:last-child { border-right: none; }
  .kband .k-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 500; }
  .kband .k-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .kband .k.hero .k-value { font-size: 34px; }
  .kband .k-sub { font-size: 12px; color: var(--muted); margin-top: 4px; display:flex; align-items:center; gap: 6px; }
  .delta { font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
  .delta.up { background: rgba(46,125,50,0.1); color: var(--green); }
  .delta.down { background: rgba(198,40,40,0.1); color: var(--red); }
  .delta.flat { background: var(--line-2); color: var(--muted); }
  .split-row { display:flex; gap: 14px; margin-top: 4px; font-size: 12px; color: var(--muted); }
  .split-row .seg-bar { display:flex; height: 4px; border-radius: 2px; overflow:hidden; background: var(--line-2); width: 100%; margin-top: 6px; }
  .split-row .seg-bar .t { background: var(--orange); }
  .split-row .seg-bar .d { background: var(--amber); opacity: 0.5; }

  /* Period tabs — match occpicker rhythm */
  .period {
    display:inline-flex; align-items:center; gap: 4px;
    background: #f3efe9; padding: 3px; border-radius: 9px;
    margin-bottom: 16px;
  }
  .period button, .period a {
    padding: 5px 12px; font-size: 12px; font-weight: 500;
    background: transparent; border: none; border-radius: 6px;
    color: var(--muted); cursor: pointer; font-family: inherit;
    text-decoration: none; display: inline-block;
  }
  .period button:hover, .period a:hover { color: var(--ink); }
  .period button.active, .period a.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600; }

  /* Events table */
  .evt-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  table.evt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  table.evt th {
    text-align: left; font-weight: 500; padding: 10px 14px;
    background: #fbf9f5; color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line); white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
  }
  table.evt th.sortable { cursor: pointer; user-select: none; }
  table.evt th.sortable:hover { color: var(--ink); }
  table.evt th.sorted { color: var(--ink); }
  table.evt th.sorted .sortarrow { opacity: 1; color: var(--orange); }
  table.evt th .sortarrow { opacity: 0.4; margin-left: 4px; font-size: 9px; }
  table.evt th.num, table.evt td.num { text-align: right; }
  table.evt td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
  .density-compact table.evt td { padding: 8px 14px; }
  .density-spacious table.evt td { padding: 16px 14px; }
  table.evt tr:last-child td { border-bottom: none; }
  table.evt tbody tr { transition: background .1s; cursor: pointer; }
  table.evt tbody tr:hover { background: #fbf9f5; }
  table.evt tbody tr:hover .row-actions { opacity: 1; }

  /* Event name cell — big row of info */
  .ev-name {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
  }
  .ev-cal {
    flex: none;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    display: flex; flex-direction: column;
    overflow: hidden;
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .ev-cal .m {
    background: var(--orange); color: #fff;
    font-size: 9px; padding: 3px 0 2px;
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  }
  .ev-cal .d { font-size: 18px; font-weight: 700; padding: 3px 0 0; color: var(--ink); letter-spacing: -0.02em; }
  .ev-cal .wd { font-size: 8.5px; color: var(--muted-2); padding-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }

  .ev-meta { min-width: 0; }
  .ev-meta .n { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
  .ev-meta .n:hover { color: var(--orange); }
  .ev-meta .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; display:flex; align-items:center; gap: 8px; }
  .ev-fmt {
    display:inline-flex; align-items:center; gap: 4px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
    padding: 1px 6px; border-radius: 4px;
    text-transform: uppercase;
  }
  .ev-fmt.hybrid    { background: var(--orange-100); color: var(--amber); }
  .ev-fmt.online    { background: var(--blue-soft);  color: var(--blue); }
  .ev-fmt.inperson  { background: var(--green-soft); color: var(--green); }
  .ev-fmt .dot { width: 5px; height: 5px; border-radius: 50%; }
  .ev-fmt.hybrid .dot    { background: var(--amber); }
  .ev-fmt.online .dot    { background: var(--blue); }
  .ev-fmt.inperson .dot  { background: var(--green); }

  /* Fill column */
  .fill-cell { min-width: 140px; }
  .fill-cell .fill-bar {
    display: block;
    height: 5px; border-radius: 3px; background: var(--line-2);
    overflow: hidden; position: relative;
    margin-top: 4px;
  }
  .fill-cell .fill-bar .f { height: 100%; background: var(--red); border-radius: 3px; transition: width .2s; }
  .fill-cell .fill-bar.low .f { background: var(--red); }
  .fill-cell .fill-bar.warn .f { background: var(--amber); }
  .fill-cell .fill-bar.ok .f { background: var(--green); }
  .fill-cell .fill-bar.over .f { background: var(--green); }
  .fill-row { display:flex; align-items:baseline; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .fill-row .pct { font-weight: 600; color: var(--ink); }

  /* Task badge */
  .tb {
    display:inline-flex; align-items:center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .tb.red    { background: var(--red-soft); color: var(--red); }
  .tb.orange { background: var(--amber-soft); color: var(--amber); }
  .tb.blue   { background: var(--blue-soft); color: var(--blue); }
  .tb.done   { background: var(--green-soft); color: var(--green); }
  .tb.none   { color: var(--muted-2); }

  /* Event task badge (colored circle in tasks column) */
  .ev-task-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 50%;
    font-size: 11.5px; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .ev-task-badge--none { color: var(--muted-2); min-width: auto; }
  .ev-task-badge--done { color: var(--green); font-size: 14px; min-width: auto; }
  .ev-task-badge--red    { background: var(--red-soft,#fde8e8);    color: var(--red); }
  .ev-task-badge--orange { background: var(--amber-soft,#fef0e0);  color: var(--orange); }
  .ev-task-badge--blue   { background: var(--blue-soft,#e8eef8);   color: #1a56db; }

  /* Sortable column headers */
  .sortable { user-select: none; white-space: nowrap; }
  .sortable:hover { color: var(--ink); }
  .sort-arrow { color: var(--muted-2); font-size: 10px; }

  /* Row actions */
  .row-actions { display:flex; gap: 4px; opacity: 0; transition: opacity .12s; justify-content: flex-end; }
  .row-actions .btn { padding: 4px 6px; color: var(--muted); }
  .row-actions .btn:hover { color: var(--ink); background: var(--line-2); border-color: transparent; }

  /* Section divider */
  .past-sep {
    padding: 16px 14px 10px;
    border-top: 1px solid var(--line);
    background: #fbf9f5;
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
    display:flex; align-items:center; gap: 8px;
  }
  .past-sep .line { flex:1; height:1px; background: var(--line-2); }

  /* Filters row above table */
  .evt-head {
    display:flex; align-items:center; gap: 10px;
    margin-bottom: 10px; flex-wrap: wrap;
  }
  .evt-head h2 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.005em; display:flex; align-items:center; gap: 8px; }
  .evt-head .ct { font-size: 11.5px; color: var(--muted); padding: 1px 8px; border-radius: 999px; background: var(--line-2); font-weight: 500; }
  .evt-head .seg { display: flex; background: var(--line-2); padding: 2px; border-radius: 7px; }
  .evt-head .search { position: relative; }
  .evt-head .search input {
    border: 1px solid var(--line); border-radius: 7px;
    padding: 6px 10px 6px 30px; font-family: inherit; font-size: 12.5px;
    background: #fff; width: 220px; outline: none;
    transition: border-color .12s, box-shadow .12s, width .15s;
  }
  .evt-head .search input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); width: 260px; }
  .evt-head .search svg { position:absolute; top: 50%; left: 9px; transform: translateY(-50%); color: var(--muted-2); }

  /* Table footer reuse */
  .evt-wrap .tbl-foot {
    padding: 10px 14px; border-top: 1px solid var(--line-2);
    display:flex; align-items:center; justify-content:space-between;
    font-size: 12px; color: var(--muted);
    background: #fbf9f5;
  }
  .evt-wrap .pager { display:flex; gap: 4px; }
  .evt-wrap .pager button { padding: 4px 9px; font-size: 12px; border: 1px solid var(--line); background:#fff; border-radius: 5px; cursor: pointer; font-family: inherit; }
  .evt-wrap .pager button:disabled { opacity: 0.4; cursor: not-allowed; }
  .evt-wrap .pager button.active { background: var(--ink); color:#fff; border-color: var(--ink); font-weight: 600; }

  /* Money */
  .evt .money .z { color: var(--muted-2); }

  @media (max-width: 900px) {
    .kband { grid-template-columns: 1fr 1fr; }
    .kband .k { border-right: none; border-bottom: 1px solid var(--line-2); }
    .kband .k.hero { grid-column: 1 / -1; }
  }

/* ── login ──────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bg);
    padding: 20px;
  }
  .login-card {
    width: 100%; max-width: 400px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 36px 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  }
  .login-logo {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 28px;
  }
  .login-logo .mark {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--orange); color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
  }
  .login-logo .wordmark {
    font-weight: 700; font-size: 16px; color: var(--orange);
    letter-spacing: -0.01em;
  }
  .login-card h2 {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 6px; color: var(--ink);
  }
  .login-card .login-sub {
    font-size: 13px; color: var(--muted); margin: 0 0 24px;
  }
  .login-field { margin-bottom: 16px; }
  .login-field label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--ink-2); margin-bottom: 5px;
  }
  .login-field input {
    width: 100%; padding: 10px 12px; font-size: 14px;
    font-family: inherit; border: 1px solid var(--line);
    border-radius: 8px; background: #fff; outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .login-field input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-100);
  }
  .login-field small {
    display: block; font-size: 11.5px; color: var(--muted);
    margin-top: 4px;
  }
  .login-btn {
    width: 100%; padding: 11px; font-size: 14px; font-weight: 600;
    font-family: inherit; border: none; border-radius: 8px;
    background: var(--ink); color: #fff; cursor: pointer;
    transition: background .15s;
  }
  .login-btn:hover { background: #000; }
  .login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .login-link {
    display: block; text-align: center; margin-top: 14px;
    font-size: 12.5px; color: var(--muted);
  }
  .login-link a { color: var(--orange); }
  .login-link a:hover { text-decoration: underline; }
  .login-error {
    padding: 10px 12px; background: var(--red-soft); color: var(--red);
    border-radius: 8px; font-size: 13px; font-weight: 500;
    margin-bottom: 16px;
  }
  .login-success {
    padding: 10px 12px; background: var(--green-soft); color: var(--green);
    border-radius: 8px; font-size: 13px; font-weight: 500;
    margin-bottom: 16px;
  }
  .login-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; font-size: 11px; color: var(--muted-2);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .login-divider::before, .login-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
  }
  .totp-grid {
    display: flex; gap: 6px; margin-bottom: 16px;
  }
  .totp-grid input {
    width: 42px; height: 48px; text-align: center;
    font-size: 20px; font-weight: 600; font-family: inherit;
    border: 1px solid var(--line); border-radius: 8px;
    outline: none; transition: border-color .15s, box-shadow .15s;
    font-variant-numeric: tabular-nums;
  }
  .totp-grid input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-100);
  }
  .trust-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-2); margin-bottom: 16px;
  }
  .trust-check input { accent-color: var(--orange); }
  .login-footer {
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--line-2);
    font-size: 11.5px; color: var(--muted-2); text-align: center;
  }

/* ── notifications ──────────────────────────────────────────────────── */
.notif-list { margin-top: 4px; }

  .notif-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px; align-items: start;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 6px;
    transition: border-color .12s, box-shadow .12s;
    cursor: pointer;
    text-decoration: none; color: inherit;
  }
  .notif-item:hover {
    border-color: #d6d3cc;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
  }
  .notif-item.unread {
    background: var(--orange-50);
    border-color: var(--orange-200);
  }
  .notif-icon {
    width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center;
    font-size: 11px; color: var(--muted);
  }
  .notif-icon.task { background: var(--amber-soft); color: var(--amber); }
  .notif-icon.booking { background: var(--blue-soft); color: var(--blue); }
  .notif-icon.done { background: var(--green-soft); color: var(--green); }
  .notif-icon.overdue { background: var(--red-soft); color: var(--red); }

  .notif-body { min-width: 0; }
  .notif-msg {
    font-size: 13px; font-weight: 500; color: var(--ink);
    line-height: 1.4;
  }
  .unread .notif-msg { font-weight: 600; }
  .notif-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 4px; font-size: 11.5px; color: var(--muted);
  }
  .notif-meta .ndot {
    width: 3px; height: 3px; background: var(--muted-2); border-radius: 50%;
  }

  .notif-time-col {
    font-size: 11.5px; color: var(--muted); white-space: nowrap;
    padding-top: 2px;
  }
  .notif-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--orange); display: inline-block;
    margin-left: 6px; vertical-align: 1px;
  }

  .notif-empty {
    text-align: center; padding: 60px 20px; color: var(--muted);
  }
  .notif-empty .ne-icon { margin-bottom: 10px; color: var(--muted-2); }
  .notif-empty .ne-msg { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
  .notif-empty .ne-sub { font-size: 12.5px; }

  .notif-group-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted); padding: 6px 4px 8px;
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px;
  }
  .notif-group-label:first-child { margin-top: 0; }
  .notif-group-label .ngl-line { flex: 1; height: 1px; background: var(--line-2); }

/* ── person ──────────────────────────────────────────────────── */
/* Layout: main + side rail */
  .person-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
  @media (max-width: 1100px) { .person-layout { grid-template-columns: 1fr; } }

  /* Hero card */
  .person-hero {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: flex-start;
  }
  .person-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--orange-100); color: var(--amber);
    display: grid; place-items: center;
    font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
    flex: none;
  }
  .person-name {
    font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 4px; color: var(--ink);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .person-contact { display: flex; gap: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; margin-bottom: 4px; align-items: center; }
  .person-contact > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .person-contact a { color: var(--muted); }
  .person-contact a:hover { color: var(--orange); }
  .person-address { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
  .person-since { font-size: 11.5px; color: var(--muted-2); margin-top: 8px; }

  .seg-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .seg-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
  .seg-pill.core       { background: var(--orange-100); color: var(--amber); }
  .seg-pill.core .dot  { background: var(--amber); }
  .seg-pill.regular       { background: var(--green-soft); color: var(--green); }
  .seg-pill.regular .dot  { background: var(--green); }
  .seg-pill.occasional       { background: var(--blue-soft); color: var(--blue); }
  .seg-pill.occasional .dot  { background: var(--blue); }
  .seg-pill.once       { background: var(--line-2); color: var(--muted); }
  .seg-pill.once .dot  { background: var(--muted-2); }

  .person-actions { display: flex; gap: 6px; flex-wrap: wrap; }

  /* Stat tiles inside hero */
  .person-stats {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line-2); padding-top: 16px; margin-top: 4px;
  }
  .person-stats .ps {
    padding: 0 18px;
    border-right: 1px solid var(--line-2);
  }
  .person-stats .ps:first-child { padding-left: 0; }
  .person-stats .ps:last-child { border-right: none; padding-right: 0; }
  .ps-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; font-weight: 500; }
  .ps-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
  .ps-sub   { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

  /* Section heading */
  .psection {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 10px;
  }
  .psection h2 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.005em; }
  .psection .ct { font-size: 11.5px; color: var(--muted); padding: 1px 8px; border-radius: 999px; background: var(--line-2); font-weight: 500; }
  .psection .spacer { flex: 1; }

  /* History table — reuse .evt-wrap + .evt vocabulary */
  .phist {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  table.phist-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  table.phist-tbl th {
    text-align: left; font-weight: 500; padding: 10px 14px;
    background: #fbf9f5; color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  table.phist-tbl th.num { text-align: right; }
  table.phist-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
  table.phist-tbl tr:last-child td { border-bottom: none; }
  table.phist-tbl tbody tr { transition: background .1s; }
  table.phist-tbl tbody tr:hover { background: #fbf9f5; }
  table.phist-tbl tr.guest { opacity: 0.78; }
  table.phist-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }

  .phist .ev-link { font-weight: 600; color: var(--ink); }
  .phist .ev-link:hover { color: var(--orange); }
  .phist .guest-tag {
    font-size: 10px; padding: 1px 6px; border-radius: 3px;
    background: var(--line-2); color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
    margin-left: 6px; vertical-align: 1px;
  }
  .phist .z { color: var(--muted-2); }
  .phist .ev-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; gap: 6px; align-items: center; }

  /* Timeline variant — grouped by year */
  .tl-year {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted);
    padding: 14px 14px 6px;
    background: #fbf9f5;
    border-bottom: 1px solid var(--line-2);
  }
  .tl-year .count { color: var(--muted-2); font-weight: 500; margin-left: 8px; }

  /* Book orders row styling */
  .bk-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
    text-transform: capitalize;
  }
  .bk-status.dispatched { background: var(--green-soft); color: var(--green); }
  .bk-status.processing { background: var(--blue-soft); color: var(--blue); }
  .bk-status.pending    { background: var(--amber-soft); color: var(--amber); }

  /* Side column — notes */
  .pnotes .note-list { max-height: none; overflow: visible; }

/* ── profile ──────────────────────────────────────────────────── */
.profile-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; align-items: start;
  }
  @media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }

  .profile-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden;
  }
  .profile-card.attention { border-color: var(--orange-200); }
  .profile-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--line-2);
  }
  .profile-card-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
  .profile-tag {
    font-size: 10.5px; font-weight: 600; padding: 2px 8px;
    border-radius: 999px; background: var(--amber-soft); color: var(--amber);
  }
  .profile-card-body { padding: 16px 18px; }

  .profile-dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: 13px; }
  .profile-dl dt { color: var(--muted); font-weight: 500; }
  .profile-dl dd { margin: 0; color: var(--ink); }

  .profile-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  }
  .profile-pill.ok { background: var(--green-soft); color: var(--green); }
  .profile-pill.warn { background: var(--amber-soft); color: var(--amber); }

  .profile-field { margin-bottom: 14px; }
  .profile-field label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--ink-2); margin-bottom: 4px;
  }
  .profile-field label .opt { font-weight: 400; color: var(--muted); }
  .profile-field input {
    width: 100%; padding: 9px 12px; font-size: 13.5px;
    font-family: inherit; border: 1px solid var(--line);
    border-radius: 7px; outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .profile-field input:focus {
    border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100);
  }
  .profile-field small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

  .profile-status {
    padding: 10px 14px; border-radius: 8px; font-size: 13px;
    margin-bottom: 12px;
  }
  .profile-status.ok { background: var(--green-soft); color: var(--green); }

  .profile-device-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
  .profile-device-table th {
    text-align: left; font-weight: 500; color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 6px 0; border-bottom: 1px solid var(--line-2);
  }
  .profile-device-table td {
    padding: 8px 0; border-bottom: 1px solid var(--line-2);
    color: var(--ink-2);
  }
  .profile-device-table tr:last-child td { border-bottom: none; }

  .profile-toast {
    font-size: 12.5px; font-weight: 500; margin-left: 8px;
    display: inline-block;
  }
  .profile-toast.ok { color: var(--green); }
  .profile-toast.err { color: var(--red); }

/* ── revenue ──────────────────────────────────────────────────── */
/* Hero band: income → costs → surplus */
  .rv-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .rv-hero .k { padding: 18px 22px; border-right: 1px solid var(--line-2); min-width: 0; }
  .rv-hero .k:last-child { border-right: none; }
  .rv-hero .k-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 500; }
  .rv-hero .k-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
  .rv-hero .k.hero .k-value { font-size: 36px; }
  .rv-hero .k.surplus .k-value { color: var(--green); font-size: 32px; }
  .rv-hero .k.surplus.neg .k-value { color: var(--red); }
  .rv-hero .k-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
  .rv-hero .k.hero { background: linear-gradient(180deg, #fffaf3 0%, #fff 60%); }

  /* Income composition bar */
  .rv-compbar {
    display:flex; height: 24px; border-radius: 5px; overflow: hidden;
    background: var(--line-2);
    margin-top: 12px;
    font-size: 10.5px; font-weight: 600; color: #fff;
  }
  .rv-compbar .seg { display:flex; align-items:center; justify-content:center; white-space: nowrap; }
  .rv-compbar .tkt  { background: var(--orange); }
  .rv-compbar .dana { background: var(--amber); }
  .rv-compbar .book { background: #6c7a50; }
  .rv-compbar .bdana { background: #8a6a3c; }
  .rv-compbar .sdon  { background: #5b7a9a; }
  .rv-compbar-legend { display:flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--muted); }
  .rv-compbar-legend .lg { display:inline-flex; align-items:center; gap: 5px; font-variant-numeric: tabular-nums; }
  .rv-compbar-legend .sw { width: 9px; height: 9px; border-radius: 2px; }
  .rv-compbar-legend b { color: var(--ink-2); font-weight: 600; }

  /* Costs breakdown list (hero middle cell) */
  .rv-costs { display:flex; flex-direction: column; gap: 6px; margin-top: 10px; }
  .rv-cost-row { display:flex; align-items:center; justify-content:space-between; gap: 8px; font-size: 12px; }
  .rv-cost-row .lbl { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rv-cost-row .bar {
    flex: 1; height: 4px; border-radius: 2px; background: var(--line-2);
    position: relative; overflow: hidden;
  }
  .rv-cost-row .bar .fill { position:absolute; left: 0; top: 0; bottom: 0; background: #c17a5a; border-radius: 2px; }
  .rv-cost-row .amt { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* Surplus margin meter */
  .rv-margin {
    display:flex; align-items:baseline; gap: 6px;
    margin-top: 10px; font-size: 12px;
  }
  .rv-margin .pct { font-size: 18px; font-weight: 700; color: var(--green); }
  .rv-hero .surplus.neg .rv-margin .pct { color: var(--red); }
  .rv-margin .lbl { color: var(--muted); }

  /* Secondary KPI strip — per-booking + per-attendee averages */
  .rv-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    overflow: hidden; margin-bottom: 14px;
  }
  .rv-stats .s { padding: 14px 18px; border-right: 1px solid var(--line-2); min-width: 0; }
  .rv-stats .s:last-child { border-right: none; }
  .rv-stats .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .rv-stats .val { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; margin-top: 3px; }
  .rv-stats .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; display:flex; align-items:center; gap: 6px; }

  /* Trend chart */
  .rv-chart-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 16px 18px; margin-bottom: 14px;
  }
  .rv-chart-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
  }
  .rv-chart-head h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
  .rv-chart-head .sub { font-size: 12px; color: var(--muted); }
  .rv-chart-legend { display:flex; gap: 12px; font-size: 12px; color: var(--muted); }
  .rv-chart-legend .lg { display:inline-flex; align-items:center; gap: 6px; cursor: pointer; user-select: none; }
  .rv-chart-legend .lg.off { opacity: 0.4; }
  .rv-chart-legend .sw { width: 10px; height: 10px; border-radius: 2px; }

  .rv-chart {
    position: relative;
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 10px;
    height: 260px;
  }
  .rv-chart .y-axis {
    display:flex; flex-direction: column; justify-content: space-between;
    font-size: 10.5px; color: var(--muted-2); text-align: right; padding: 4px 0;
    font-variant-numeric: tabular-nums;
  }
  .rv-chart .plot {
    position: relative; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 6px; padding: 4px 6px 0;
  }
  .rv-chart .plot::before, .rv-chart .plot::after {
    content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-2); pointer-events: none;
  }
  .rv-chart .plot::before { top: 25%; }
  .rv-chart .plot::after  { top: 50%; }
  .rv-chart .gridline3 {
    position: absolute; left: 0; right: 0; top: 75%; border-top: 1px dashed var(--line-2);
    pointer-events: none;
  }
  .rv-bar-group {
    position: relative; display:flex; flex-direction: column; justify-content: flex-end;
    align-items: stretch;
    cursor: pointer;
  }
  .rv-bar-group .seg { transition: filter .12s; min-height: 1px; }
  .rv-bar-group .event { background: var(--orange); }
  .rv-bar-group .book  { background: #6c7a50; }
  .rv-bar-group:hover .seg { filter: brightness(0.92); }
  .rv-bar-group.current .event { background: var(--ink); }
  .rv-bar-group.current .book  { background: #2e5c4a; }
  .rv-bar-group:hover .tip { opacity: 1; }
  .rv-bar-group .tip {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--ink); color: #fff; font-size: 11px; border-radius: 6px;
    padding: 6px 9px; white-space: nowrap; opacity: 0; transition: opacity .1s;
    pointer-events: none; z-index: 3;
    font-variant-numeric: tabular-nums;
  }
  .rv-bar-group .tip::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 4px solid transparent; border-top-color: var(--ink);
  }
  .rv-x-axis {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
    font-size: 10.5px; color: var(--muted); text-align: center;
    margin-top: 6px;
    padding: 0 6px;
  }
  .rv-x-axis .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rv-x-axis .lbl.current { color: var(--ink); font-weight: 600; }

  /* Top-revenue event spotlight */
  .rv-top {
    display: grid; grid-template-columns: auto 1fr auto; gap: 16px;
    align-items: center;
    background: linear-gradient(135deg, var(--orange-100) 0%, #fff 70%);
    border: 1px solid var(--orange-200);
    border-radius: 12px; padding: 14px 18px;
    margin-bottom: 14px;
  }
  .rv-top .star {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--orange); color: #fff;
    display:grid; place-items:center; font-size: 18px;
  }
  .rv-top .nm { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
  .rv-top .lb { font-size: 11px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 3px; }
  .rv-top .val { font-size: 22px; font-weight: 700; color: var(--orange); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
  .rv-top a { color: inherit; }

  /* Events by revenue table */
  .rv-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
  .rv-wrap .hd { padding: 12px 16px; border-bottom: 1px solid var(--line-2); display:flex; align-items:baseline; gap: 10px; }
  .rv-wrap .hd h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
  .rv-wrap .hd .sub { font-size: 12px; color: var(--muted); }
  table.rv { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  table.rv th {
    text-align: left; font-weight: 500; padding: 9px 12px;
    background: #fbf9f5; color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  table.rv th.num, table.rv td.num { text-align: right; }
  table.rv td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
  table.rv tr:last-child td { border-bottom: none; }
  table.rv tbody tr:hover { background: #fbf9f5; }
  table.rv tbody tr.totrow { background: #f6efe5; font-weight: 600; }
  table.rv tbody tr.totrow td { border-top: 2px solid var(--line); padding-top: 12px; padding-bottom: 12px; }

  .rv-ev-nm { font-weight: 500; color: var(--ink); }
  .rv-ev-nm:hover { color: var(--orange); }
  .rv-ev-sub { font-size: 11px; color: var(--muted); margin-top: 1px; display:flex; align-items:center; gap: 6px; }
  .rv-ev-fmt { display:inline-flex; align-items:center; gap: 4px; font-size: 10.5px; color: var(--muted); }
  .rv-ev-fmt .dot { width: 5px; height: 5px; border-radius: 50%; }
  .rv-ev-fmt.online .dot { background: var(--blue); }
  .rv-ev-fmt.hybrid .dot { background: var(--orange); }
  .rv-ev-fmt.inperson .dot { background: var(--green); }

  .rv-revbar {
    height: 4px; border-radius: 2px; background: var(--line-2);
    overflow: hidden; margin-top: 4px; display:flex;
  }
  .rv-revbar .tkt { background: var(--orange); }
  .rv-revbar .dana { background: var(--amber); }

  .rv-fill {
    display:inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  }
  .rv-fill.ok   { background: var(--green-soft); color: var(--green); }
  .rv-fill.warn { background: var(--amber-soft); color: var(--amber); }
  .rv-fill.low  { background: var(--red-soft); color: var(--red); }

  /* Books panel */
  .rv-books {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 16px 18px; margin-bottom: 14px;
  }
  .rv-books-hd {
    display:flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px; gap: 10px; flex-wrap: wrap;
  }
  .rv-books-hd h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
  .rv-books-hd .lnk { font-size: 12px; color: var(--orange); }
  .rv-books-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .rv-book-card {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px;
    display: grid; grid-template-columns: 44px 1fr; gap: 14px;
    align-items: center;
  }
  .rv-book-cover-lg {
    width: 44px; height: 58px; border-radius: 3px 6px 6px 3px;
    display:grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.07);
    position: relative;
  }
  .rv-book-cover-lg::after { content:""; position:absolute; left:0; top:0; bottom:0; width: 3px; background: rgba(0,0,0,0.15); }
  .rv-book-cover-lg.cm { background: linear-gradient(135deg, #2e5c4a, #1f3d30); }
  .rv-book-cover-lg.pg { background: linear-gradient(135deg, #8a4a1c, #5d2e0f); }
  .rv-book-ttl { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
  .rv-book-nums { display:flex; align-items: baseline; gap: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .rv-book-nums .qty { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
  .rv-book-nums .qty .u { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 3px; }
  .rv-book-nums .rev { font-size: 13px; color: var(--muted); }
  .rv-book-nums .rev b { color: var(--ink-2); font-weight: 600; }

  @media (max-width: 1100px) {
    .rv-hero { grid-template-columns: 1fr; }
    .rv-hero .k { border-right: none; border-bottom: 1px solid var(--line-2); }
    .rv-stats { grid-template-columns: 1fr 1fr; }
    .rv-books-grid { grid-template-columns: 1fr; }
  }

/* ── search ──────────────────────────────────────────────────── */
/* Search bar */
  .search-bar {
    display: flex; gap: 10px; margin-bottom: 20px;
  }
  .search-bar input {
    flex: 1; padding: 12px 16px 12px 42px;
    font-size: 15px; font-family: inherit;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .search-bar input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-100);
  }
  .search-bar input::placeholder { color: var(--muted-2); }
  .search-bar .search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--muted-2);
  }

  /* Result tabs */
  .result-tabs {
    display: flex; gap: 4px;
    background: #f3efe9; padding: 3px; border-radius: 9px;
    width: fit-content; margin-bottom: 16px;
  }
  .result-tab {
    padding: 6px 14px; font-size: 12.5px; font-weight: 500;
    background: transparent; border: none; border-radius: 6px;
    color: var(--muted); cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
  }
  .result-tab:hover { color: var(--ink); }
  .result-tab.active {
    background: #fff; color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600;
  }
  .result-tab .rc {
    font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
    background: var(--line-2); color: var(--muted); font-weight: 600;
  }
  .result-tab.active .rc { background: var(--orange-100); color: var(--amber); }

  /* Result panels */
  .result-panel { display: none; }
  .result-panel.active { display: block; }

  /* Result table (reuses ptbl from community) */
  .result-wrap {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  table.rtbl {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
  }
  table.rtbl th {
    text-align: left; font-weight: 500; padding: 10px 12px;
    background: #fbf9f5; color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  table.rtbl td {
    padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle;
  }
  table.rtbl tr:last-child td { border-bottom: none; }
  table.rtbl tbody tr { transition: background .1s; }
  table.rtbl tbody tr:hover { background: #fbf9f5; }
  table.rtbl .num { font-variant-numeric: tabular-nums; text-align: right; }
  table.rtbl .money { text-align: right; font-variant-numeric: tabular-nums; }

  /* Highlight match */
  mark {
    background: var(--orange-100); color: var(--ink);
    padding: 0 2px; border-radius: 2px;
  }

  /* Empty / idle states */
  .search-idle {
    text-align: center; padding: 60px 20px; color: var(--muted);
  }
  .search-idle .si-icon { margin-bottom: 12px; color: var(--muted-2); }
  .search-idle .si-title { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
  .search-idle .si-sub { font-size: 13px; color: var(--muted); }

  .search-noresults {
    padding: 32px 20px; text-align: center; color: var(--muted);
    font-size: 13px;
  }

  /* Format badge */
  .fmt { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; }
  .fmt .dot { width: 6px; height: 6px; border-radius: 50%; }
  .fmt.online { color: var(--blue); }
  .fmt.online .dot { background: var(--blue); }
  .fmt.inperson { color: var(--green); }
  .fmt.inperson .dot { background: var(--green); }
  .fmt.hybrid { color: var(--amber); }
  .fmt.hybrid .dot { background: var(--amber); }

  /* Status pill for book orders */
  .order-status {
    display: inline-block; padding: 2px 8px; border-radius: 5px;
    font-size: 11.5px; font-weight: 500;
  }
  .order-status.dispatched { background: var(--green-soft); color: var(--green); }
  .order-status.processing { background: var(--blue-soft); color: var(--blue); }
  .order-status.pending { background: var(--amber-soft); color: var(--amber); }
  .order-status.refunded { background: var(--red-soft); color: var(--red); }

  /* Keyboard hint */
  .search-kbd {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--muted-2); margin-top: 8px;
  }
  .search-kbd kbd {
    display: inline-block; padding: 1px 5px; border-radius: 3px;
    background: var(--line-2); border: 1px solid var(--line);
    font-family: inherit; font-size: 10px; font-weight: 600;
  }

/* ── tasks ──────────────────────────────────────────────────── */
/* Status filter tabs */
  .task-tabs {
    display: flex; gap: 4px;
    background: #f3efe9; padding: 3px; border-radius: 9px;
    width: fit-content;
  }
  .task-tab {
    padding: 5px 12px; font-size: 12px; font-weight: 500;
    background: transparent; border: none; border-radius: 6px;
    color: var(--muted); cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 5px;
  }
  .task-tab:hover { color: var(--ink); }
  .task-tab.active {
    background: #fff; color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600;
  }
  .task-tab .tc {
    font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
    background: var(--line-2); color: var(--muted); font-weight: 600;
  }
  .task-tab.active .tc { background: var(--orange-100); color: var(--amber); }
  .task-tab--overdue .tc { background: var(--red-soft); color: var(--red); }
  .task-tab--soon .tc { background: var(--amber-soft); color: var(--amber); }

  /* Event filter dropdown */
  .ev-filter {
    padding: 6px 10px; font-size: 12.5px; font-family: inherit;
    border: 1px solid var(--line); border-radius: 7px; background: #fff;
    color: var(--ink-2); outline: none; cursor: pointer;
    max-width: 220px;
  }
  .ev-filter:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }

  /* Task groups */
  .task-group { margin-bottom: 20px; }
  .task-group-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted); padding: 0 4px 8px;
    display: flex; align-items: center; gap: 8px;
  }
  .task-group-label .tgl-line {
    flex: 1; height: 1px; background: var(--line-2);
  }
  .task-group-label .tgl-count {
    font-size: 10px; color: var(--muted-2); font-weight: 500;
  }

  /* Task card row */
  .tcard {
    display: grid;
    grid-template-columns: 28px 1fr auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 6px;
    transition: border-color .12s, box-shadow .12s;
  }
  .tcard:hover { border-color: #d6d3cc; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
  .tcard:hover .tcard-actions { opacity: 1; }
  .tcard.done { opacity: 0.55; }
  .tcard.done .tcard-title { text-decoration: line-through; color: var(--muted); }

  .tcard-check {
    width: 20px; height: 20px; border: 1.5px solid #c9c5bd;
    border-radius: 5px; cursor: pointer; background: #fff;
    display: grid; place-items: center; transition: all .15s;
  }
  .tcard-check:hover { border-color: var(--orange); }
  .tcard-check.checked { background: var(--orange); border-color: var(--orange); }

  .tcard-body { min-width: 0; }
  .tcard-title { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
  .tcard-desc { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
  .tcard-meta {
    display: flex; align-items: center; gap: 8px; margin-top: 4px;
    font-size: 11.5px; color: var(--muted);
  }
  .tcard-event {
    font-size: 12px; color: var(--ink-2); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 160px;
  }
  .tcard-event:hover { color: var(--orange); }

  .tcard-due {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
    white-space: nowrap;
  }
  .tcard-due.overdue { background: var(--red-soft); color: var(--red); }
  .tcard-due.soon { background: var(--amber-soft); color: var(--amber); }
  .tcard-due.ok { background: var(--line-2); color: var(--muted); }
  .tcard-due.done { background: var(--green-soft); color: var(--green); }
  .tcard-due .days { font-size: 10px; font-weight: 600; }

  .tcard-actions {
    display: flex; gap: 2px; opacity: 0; transition: opacity .12s;
  }

  /* KPI mini band for tasks */
  .task-kpi {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden; margin-bottom: 20px;
  }
  .task-kpi .tk {
    padding: 12px 16px; border-right: 1px solid var(--line-2);
  }
  .task-kpi .tk:last-child { border-right: none; }
  .tk-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-bottom: 3px; }
  .tk-value { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .tk-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

  /* Empty state */
  .task-empty {
    text-align: center; padding: 48px 20px; color: var(--muted);
  }
  .task-empty .e-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.5; }
  .task-empty .e-msg { font-size: 13px; margin-bottom: 14px; }

/* ── templates ──────────────────────────────────────────────────── */
.tpl-explainer {
    display: flex; gap: 14px; padding: 16px 18px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; margin-bottom: 20px;
  }
  .tpl-explainer-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--orange-100); color: var(--orange);
    display: grid; place-items: center; flex: none;
  }
  .tpl-explainer-body { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
  .tpl-explainer-body strong { color: var(--ink); }
  .tpl-explainer-body ol { margin: 8px 0 0; padding-left: 18px; }
  .tpl-explainer-body li { margin-bottom: 2px; }

  .tpl-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden; margin-bottom: 12px;
  }
  .tpl-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--line-2);
    gap: 12px; flex-wrap: wrap;
  }
  .tpl-card-title { display: flex; align-items: center; gap: 10px; }
  .tpl-name { font-size: 14px; font-weight: 600; color: var(--ink); }
  .tpl-item-count {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: var(--line-2); color: var(--muted); font-weight: 600;
  }
  .tpl-card-actions { display: flex; gap: 6px; }

  .tpl-items { padding: 4px 0; }
  .tpl-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px; gap: 12px;
    transition: background .1s;
  }
  .tpl-item:hover { background: #fbf9f5; }
  .tpl-item:hover .tpl-item-actions { opacity: 1; }
  .tpl-item + .tpl-item { border-top: 1px solid var(--line-2); }
  .tpl-item-body { flex: 1; min-width: 0; }
  .tpl-item-title { font-size: 13px; font-weight: 500; color: var(--ink); }
  .tpl-item-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .tpl-item-timing { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
  .tpl-timing-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 6px;
    font-size: 11.5px; font-weight: 500;
    background: var(--blue-soft); color: var(--blue);
  }
  .tpl-timing-chip.after { background: var(--green-soft); color: var(--green); }
  .tpl-timing-chip.onday { background: var(--line-2); color: var(--muted); }
  .tpl-item-actions {
    display: flex; gap: 2px; opacity: 0; transition: opacity .12s;
  }

  .tpl-empty {
    padding: 20px 18px; text-align: center;
    font-size: 12.5px; color: var(--muted);
  }

  /* Column picker toggle items */
  .col-toggle-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; font-size: 12.5px; cursor: pointer;
    color: var(--ink-2); user-select: none;
  }
  .col-toggle-item input[type="checkbox"] { accent-color: var(--orange); }

  /* See-more hidden rows */
  .see-more-hidden { display: none !important; }

/* ── Functional UI (toasts, inline-edit, bell, modals, hamburger) ───────── */

/* Hamburger (mobile only) */
.hamburger {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 200;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.hamburger span { display: block; width: 16px; height: 1.5px; background: var(--ink-2); border-radius: 2px; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 99; }
@media (max-width: 820px) {
  .hamburger { display: flex; }
  body.sidebar-open .sidebar-overlay { display: block; }
  body.sidebar-open .sidebar { display: flex; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; width: 240px; }
}

/* Bell dropdown */
.bell-wrap { position: relative; }
.bell-btn { position: relative; }
.bell-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--red); color: #fff;
  border-radius: 999px; font-size: 9.5px; font-weight: 700;
  padding: 0 4px; min-width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.bell-badge--hidden { display: none; }
.bell-dropdown {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 200;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
  width: 300px; overflow: hidden;
}
.bell-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 600;
}
.bell-see-all { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.bell-see-all:hover { color: var(--orange); }
.bell-list { max-height: 300px; overflow-y: auto; }
.bell-empty { padding: 16px 14px; font-size: 12.5px; color: var(--muted); text-align: center; }
.bell-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-2);
  text-decoration: none; transition: background .1s;
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: #fbf9f5; }
.bell-item--unread { border-left: 3px solid var(--orange); }
.bell-item-icon { font-size: 14px; flex: none; padding-top: 1px; }
.bell-item-msg { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.bell-item-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.bell-item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; margin-top: 4px; }

/* Toast notifications */
#sr-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 999; background: var(--ink); color: #fff;
  padding: 9px 16px; border-radius: 8px; font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  display: none; white-space: nowrap;
}
.sr-toast--error { background: var(--red); }
.sr-toast--undo { padding-right: 12px; }
.toast-undo-btn {
  margin-left: 10px; padding: 2px 8px; border-radius: 5px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer; font-size: 12px;
}
.toast-undo-btn:hover { background: rgba(255,255,255,.3); }

/* Inline edit */
.inline-edit-input {
  border: 1px solid var(--orange); border-radius: 5px;
  padding: 3px 7px; font-family: inherit; font-size: 13px;
  outline: none; background: #fff;
  box-shadow: 0 0 0 3px var(--orange-100);
}
.inline-edit-btn {
  margin-left: 4px; padding: 3px 7px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font-size: 12px; font-family: inherit;
}
.inline-edit-save  { background: var(--orange); color: #fff; border-color: var(--orange); }
.inline-edit-cancel { color: var(--muted); }

/* Flash cells */
@keyframes flash-ok   { 0%,100%{background:transparent} 50%{background:#e8f5e9} }
@keyframes flash-warn { 0%,100%{background:transparent} 50%{background:var(--amber-soft)} }
.flash-ok   { animation: flash-ok   .8s ease; }
.flash-warn { animation: flash-warn .8s ease; }

/* Retreat payment badges */
.pay-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600; }
.pay-badge--paid { background: var(--green-soft); color: var(--green); }
.pay-action { padding: 3px 8px; font-size: 11.5px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; background: var(--card); font-family: inherit; }
.pay-action:hover { border-color: var(--orange); color: var(--orange); }
.pay-hint { font-size: 11.5px; color: var(--muted-2); font-style: italic; }
.pay-unset { color: var(--muted-2); }

/* Attendee note popup */
.att-note-popup {
  position: absolute; z-index: 300;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 14px; width: 300px;
}
.att-note-popup textarea {
  width: 100%; min-height: 72px; resize: vertical;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-family: inherit; font-size: 13px;
  outline: none; margin-top: 6px;
}
.att-note-popup textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }
.att-note-popup-foot { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.att-note-popup-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }

/* Capacity / cost edit overlay */
.modal-overlay,
.cap-edit-overlay, .task-modal-overlay, #task-modal-overlay, #apply-tpl-overlay, #save-tpl-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 500;
  display: none; align-items: center; justify-content: center;
}

/* Modal shell */
.modal-box {
  background: var(--card); border-radius: 14px;
  width: 520px; max-width: 96vw; max-height: 90vh;
  overflow-y: auto; box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line-2);
}
.modal-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.modal-close {
  background: none; border: none; cursor: pointer; font-size: 16px;
  color: var(--muted); padding: 2px 6px; border-radius: 5px; line-height: 1;
}
.modal-close:hover { background: var(--line-2); color: var(--ink); }
.modal-body { padding: 18px 20px; }
.modal-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--line-2);
}

/* Form rows & inputs (modal forms) */
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 5px;
}
.form-input {
  width: 100%; border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 10px; font-family: inherit; font-size: 13px;
  outline: none; background: #fff; color: var(--ink); line-height: 1.4;
}
.form-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }
textarea.form-input { min-height: 60px; resize: vertical; }
.form-row--check { margin-bottom: 6px; }
.check-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 13px; color: var(--ink-2); font-weight: 400;
}
.check-label input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--orange); flex: none; }

/* Timing row */
.timing-row { display: flex; gap: 8px; }
.timing-num { width: 70px !important; flex: none; }
.timing-unit, .timing-dir { flex: 1; }

/* Multi-event picker */
.multi-event-list {
  border: 1px solid var(--line); border-radius: 8px;
  max-height: 200px; overflow-y: auto; background: #fff; margin-top: 4px;
}
.multi-event-item { padding: 8px 12px; border-bottom: 1px solid var(--line-2); }
.multi-event-item:last-child { border-bottom: none; }
.multi-event-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 13px;
}
.multi-event-name { flex: 1; font-weight: 500; color: var(--ink); }
.multi-event-meta { font-size: 11px; color: var(--muted); }
.multi-occ-list { padding: 6px 0 2px 20px; display: flex; flex-direction: column; gap: 4px; }
.occ-all-label, .occ-item-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; cursor: pointer; color: var(--ink-2);
}
.multi-event-summary { margin-top: 8px; font-size: 12px; color: var(--muted); }
.cap-edit-box {
  background: var(--card); border-radius: 14px; padding: 24px;
  width: 340px; box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.cap-edit-box h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.cap-edit-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.cap-edit-row label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.cap-edit-input {
  border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 10px; font-family: inherit; font-size: 13px; outline: none;
}
.cap-edit-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }
.cap-edit-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Task modal */
.task-modal { background: var(--card); border-radius: 14px; padding: 24px; width: 520px; max-width: 96vw; box-shadow: 0 16px 48px rgba(0,0,0,.18); max-height: 90vh; overflow-y: auto; }
.task-modal h3 { font-size: 15px; font-weight: 700; margin: 0 0 16px; }
.tm-field { margin-bottom: 14px; }
.tm-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; }
.tm-input, .tm-select, .tm-textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 10px; font-family: inherit; font-size: 13px; outline: none;
  background: #fff;
}
.tm-input:focus, .tm-select:focus, .tm-textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }
.tm-textarea { min-height: 60px; resize: vertical; }
.tm-row { display: flex; gap: 8px; }
.tm-row .tm-field { flex: 1; }
.tm-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
#due-preview { font-size: 12px; color: var(--orange); margin-top: 4px; font-weight: 500; }

/* Apply template modal */
.atpl-modal { background: var(--card); border-radius: 14px; padding: 24px; width: 480px; max-width: 96vw; box-shadow: 0 16px 48px rgba(0,0,0,.18); }
.atpl-modal h3 { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.atpl-items-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.atpl-items-list { margin: 0; padding-left: 16px; }
.atpl-item { padding: 4px 0; font-size: 12.5px; display: flex; align-items: baseline; gap: 8px; }
.atpl-item-title { color: var(--ink); font-weight: 500; }
.atpl-item-timing { font-size: 11.5px; color: var(--muted); }
.atpl-empty { font-size: 12.5px; color: var(--muted); }
.atpl-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }

/* Save as template modal */
.stpl-modal { background: var(--card); border-radius: 14px; padding: 24px; width: 480px; max-width: 96vw; box-shadow: 0 16px 48px rgba(0,0,0,.18); max-height: 80vh; overflow-y: auto; }
.stpl-modal h3 { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.stpl-task-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.stpl-task-item:hover { background: #fbf9f5; }
.stpl-task-label { flex: 1; }
.stpl-task-name { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.stpl-task-timing { font-size: 11.5px; color: var(--muted); }
.stpl-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }

/* History panel */
.history-entry { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.history-entry:last-child { border-bottom: none; }
.history-entry--reverted { opacity: 0.6; }
.history-entry-main { flex: 1; }
.history-entry-actions { flex: none; }
.history-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; background: var(--line-2); color: var(--muted); }
.history-who { font-weight: 600; }
.history-time { font-size: 11px; color: var(--muted-2); margin-left: 4px; }
.history-val { background: var(--line-2); padding: 0 4px; border-radius: 3px; font-family: monospace; font-size: 11.5px; }
.history-revert-btn { font-size: 11px; padding: 2px 8px; }
.history-reverted-tag { font-size: 11px; color: var(--muted); font-style: italic; }
.history-empty { font-size: 12.5px; color: var(--muted); font-style: italic; }

/* event-panel* aliases — maps old class names to new panel styles */
.event-panel { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.event-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; user-select: none; font-weight: 600; font-size: 13px; }
.event-panel-head h3 { font-size: 13px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; }
.event-panel-head.open .event-panel-chevron { transform: rotate(0deg); }
.event-panel-chevron { transition: transform .15s; color: var(--muted); font-size: 12px; }
.event-panel-body { padding: 0 16px 14px; border-top: 1px solid var(--line); }

/* Editable cell pencil hint */
td[data-editable]:not([data-editing]),
div.email[data-editable]:not([data-editing]) { cursor: text; }
td[data-editable="name"]:not([data-editing]):hover .name::after {
  content: ' ✏'; font-size: 10px; color: var(--orange); opacity: 0.8;
}
div.email[data-editable]:not([data-editing]):hover::after {
  content: ' ✏'; font-size: 10px; color: var(--orange); opacity: 0.8;
}
td[data-editable]:not([data-editable="name"]):not([data-editing]):hover::after {
  content: ' ✏'; font-size: 10px; color: var(--orange);
}

/* Attendee note btn aliases */
.att-note-btn { display:inline-flex; align-items:center; gap: 5px; padding: 3px 8px; border-radius: 5px; border: 1px dashed var(--line); background: transparent; color: var(--muted-2); font-size: 11.5px; cursor: pointer; font-family: inherit; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-note-btn:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-100); border-style: solid; }
.att-note-btn.att-note-btn--has-note, .att-note-btn--has-note { background: var(--orange-100); color: var(--amber); border: 1px solid var(--orange-200); }
.att-note-btn.att-note-btn--has-note:hover, .att-note-btn--has-note:hover { background: var(--orange-200); color: var(--amber); }

/* Task items in event panel (BEM variant) */
.task-item { display:flex; gap:10px; padding:10px 12px; border-radius:8px; align-items:flex-start; transition:background .12s; }
.task-item:hover { background:#fbf9f5; }
.task-item:hover .task-item__actions { opacity:1; }
.task-item__check { margin-top:2px; width:16px; height:16px; flex:none; cursor:pointer; accent-color:var(--orange); }
.task-item__body { flex:1; min-width:0; }
.task-item__title { font-size:13px; font-weight:500; color:var(--ink); line-height:1.35; }
.task-item--completed .task-item__title, .task-item__title--done { color:var(--muted-2); text-decoration:line-through; }
.task-item__desc { font-size:11.5px; color:var(--muted); margin-top:2px; }
.task-item__meta { display:flex; align-items:center; gap:8px; margin-top:3px; font-size:11px; flex-wrap:wrap; }
.due-chip { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:4px; font-size:10.5px; font-weight:500; line-height:1; }
.due-chip--soon { background:var(--amber-soft); color:var(--amber); }
.due-chip--overdue { background:var(--red-soft); color:var(--red); }
.due-chip--ok, .due-chip--none { background:var(--line-2); color:var(--muted); }
.due-days { font-weight:700; margin-left:1px; }
.task-notify-badge { display:inline-flex; align-items:center; color:var(--amber); }
.task-item__actions { display:flex; gap:2px; opacity:0; transition:opacity .12s; flex-shrink:0; }
.task-item__act-btn { background:none; border:none; cursor:pointer; padding:3px 5px; border-radius:4px; color:var(--muted); font-size:13px; line-height:1; }
.task-item__act-btn:hover { background:var(--line-2); color:var(--ink); }
.tasks-completed-toggle { background:none; border:none; cursor:pointer; font-size:12px; color:var(--muted); padding:6px 12px; display:flex; align-items:center; gap:5px; width:100%; }
.tasks-completed-toggle:hover { color:var(--ink); }
.tasks-completed-list .task-item { opacity:0.75; }
.tasks-panel-add { display:flex; align-items:center; gap:10px; padding:8px 12px 10px; border-top:1px solid var(--line-2); margin-top:4px; }
.tasks-tpl-link { background:none; border:none; padding:0; cursor:pointer; font-size:12px; color:var(--muted); font-family:inherit; }
.tasks-tpl-link:hover { color:var(--ink); text-decoration:underline; }

/* Note entries in event panel */
.note-entry { display:grid; grid-template-columns:28px 1fr auto; gap:8px; padding:10px 4px; align-items:start; }
.note-entry + .note-entry { border-top:1px solid var(--line-2); }
.note-main { min-width:0; }
.note-header { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:11.5px; margin-bottom:3px; }
.note-occ-tag { font-size:10.5px; background:var(--line-2); color:var(--muted); padding:1px 6px; border-radius:999px; }
.note-edited { font-size:11px; color:var(--muted-2); margin-top:3px; }
.note-actions { display:flex; gap:3px; flex-shrink:0; }
.note-action-btn { background:none; border:none; cursor:pointer; padding:3px 5px; border-radius:4px; color:var(--muted); font-size:13px; line-height:1; opacity:0; transition:opacity .12s; }
.note-entry:hover .note-action-btn { opacity:1; }
.note-action-btn:hover { background:var(--line-2); color:var(--ink); }
.note-add-form { margin-top:10px; padding-top:10px; border-top:1px solid var(--line-2); }
.note-add-form textarea { width:100%; min-height:60px; resize:none; border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-family:inherit; font-size:13px; outline:none; background:#fff; transition:border-color .12s,box-shadow .12s; box-sizing:border-box; }
.note-add-form textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-100); }
.note-add-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap; }
.note-shortcut { font-size:11px; color:var(--muted-2); }
.note-occ-check { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer; }

/* ── Email config panel ─────────────────────────────────────────────────────── */
.ec-label { display:block; font-size:.82rem; font-weight:600; margin-bottom:.3rem; color:var(--text); }

/* ── Rich-text toolbar ──────────────────────────────────────────────────────── */
.rte-wrap { display:flex; flex-direction:column; }
.rte-toolbar {
  display:flex; align-items:center; gap:3px;
  background:var(--cream); border:1px solid #e0d5cb;
  border-bottom:none; border-radius:6px 6px 0 0;
  padding:5px 8px;
}
.rte-btn {
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent; cursor:pointer;
  width:28px; height:26px; border-radius:5px;
  color:var(--text-muted); line-height:1;
  transition:background .12s, border-color .12s, color .12s;
}
.rte-btn--text { font-size:.75rem; font-weight:600; width:auto; padding:0 7px; letter-spacing:.01em; }
.rte-btn:hover  { background:#fff; border-color:#d4c4b8; color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.rte-btn:active { background:var(--peach); border-color:var(--orange); color:var(--orange); }
.rte-sep { width:1px; height:18px; background:#ddd; margin:0 3px; flex-shrink:0; }

/* ── Emailed badge ──────────────────────────────────────────────────────────── */
.emailed-badge {
  display:inline-block; font-size:.72rem; font-weight:600; padding:.15rem .45rem;
  border-radius:3px; background:#e8f5e9; color:#2e7d32; white-space:nowrap; cursor:default;
}
.emailed-badge--none  { background:transparent; color:var(--muted-2); font-weight:400; }
.emailed-badge--fail  { background:#fdecea; color:#c62828; }

/* ── Email action bar ───────────────────────────────────────────────────────── */
#email-action-bar { animation:fadeIn .15s; }

/* Screen-only: hide print header */
@media screen {
  .no-print-screen { display: none !important; }
}

/* Print */
@media print {
  .sidebar, .hamburger, .sidebar-overlay, .bulk, .tw-panel, .ph-actions { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  .tbl-wrap { border: 1px solid #ccc; border-radius: 0; }
  table.attn th, .mini-tbl th { background: #f5f5f5 !important; }
  .no-print { display: none !important; }
  .no-print-screen { display: block !important; }
}