/* ATTUNE AGCY HQ: admin UI styled after Apple's Human Interface Guidelines.
   System font, translucent sidebar & toolbar, large titles, grouped inset cards,
   segmented controls, switches, sheets, HUD toasts, and automatic dark mode.
   Branded output (documents, forms) keeps the ATTUNE AGCY brand styles from /shared/brand.css. */

:root {
  /* Apple-style semantic colours (light) */
  --label: #1D1D1F; --label-2: rgba(60,60,67,.80); --label-3: rgba(60,60,67,.58); --label-4: rgba(60,60,67,.30);
  --sep: rgba(60,60,67,.14); --sep-opaque: #E5E5EA;
  --fill: rgba(120,120,128,.12); --fill-2: rgba(120,120,128,.08); --fill-3: rgba(120,120,128,.05);
  --bg: #F5F5F7; --card: #FFFFFF; --card-2: #FBFBFD; --elev: #FFFFFF;
  --sidebar: rgba(236,236,240,.78); --bar: rgba(255,255,255,.72);
  --tint: var(--b-primary, #4F99F2); --tint-ink: var(--b-primary-ink, #3B74BC); --tint-soft: color-mix(in srgb, var(--tint) 14%, transparent);
  --green: #34C759; --green-ink: #248A3D; --orange: #FF9500; --orange-ink: #C93400; --red: #FF3B30; --red-ink: #D70015;
  --purple: #AF52DE; --teal: #30B0C7; --gray: #8E8E93;
  --radius: 12px; --radius-sm: 8px;
  --shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.08), 0 24px 64px -12px rgba(0,0,0,.28);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.32,.72,0,1);
  /* legacy aliases used in markup */
  --ink: var(--label); --ink-2: var(--label-2); --ink-3: var(--label-3); --line: var(--sep); --line-2: var(--fill-2);
  --primary: var(--tint); --primary-ink: var(--tint-ink); --primary-soft: var(--tint-soft); --bad: var(--red-ink); --font-h: var(--font-d);
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --label: #F5F5F7; --label-2: rgba(235,235,245,.80); --label-3: rgba(235,235,245,.58); --label-4: rgba(235,235,245,.28);
    --sep: rgba(84,84,88,.55); --sep-opaque: #38383A;
    --fill: rgba(120,120,128,.32); --fill-2: rgba(120,120,128,.22); --fill-3: rgba(120,120,128,.14);
    --bg: #000000; --card: #1C1C1E; --card-2: #232325; --elev: #2C2C2E;
    --sidebar: rgba(30,30,32,.80); --bar: rgba(22,22,24,.72);
    --tint-ink: color-mix(in srgb, var(--tint) 82%, #fff); --tint-soft: color-mix(in srgb, var(--tint) 24%, transparent);
    --green-ink: #30D158; --orange-ink: #FF9F0A; --red-ink: #FF453A;
    --shadow: 0 0 0 .5px rgba(255,255,255,.06);
    --shadow-lg: 0 0 0 .5px rgba(255,255,255,.1), 0 24px 64px -12px rgba(0,0,0,.7); }
}
:root[data-theme="dark"] { --label: #F5F5F7; --label-2: rgba(235,235,245,.80); --label-3: rgba(235,235,245,.58); --label-4: rgba(235,235,245,.28);
    --sep: rgba(84,84,88,.55); --sep-opaque: #38383A;
    --fill: rgba(120,120,128,.32); --fill-2: rgba(120,120,128,.22); --fill-3: rgba(120,120,128,.14);
    --bg: #000000; --card: #1C1C1E; --card-2: #232325; --elev: #2C2C2E;
    --sidebar: rgba(30,30,32,.80); --bar: rgba(22,22,24,.72);
    --tint-ink: color-mix(in srgb, var(--tint) 82%, #fff); --tint-soft: color-mix(in srgb, var(--tint) 24%, transparent);
    --green-ink: #30D158; --orange-ink: #FF9F0A; --red-ink: #FF453A;
    --shadow: 0 0 0 .5px rgba(255,255,255,.06);
    --shadow-lg: 0 0 0 .5px rgba(255,255,255,.1), 0 24px 64px -12px rgba(0,0,0,.7); }

* { box-sizing: border-box; }
/* Text size (sidebar → Text Size) scales the whole app; viewport-height values are corrected for it. */
:root { --z: 1; --vh100: calc(100vh / var(--z)); }
body { zoom: var(--z); }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--label); background: var(--bg); font-size: 14px; line-height: 1.45; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--tint-ink); text-decoration: none; }
a:hover { text-decoration: none; opacity: .8; }
h1, h2, h3, h4 { font-family: var(--font-d); margin: 0; font-weight: 600; letter-spacing: -0.02em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--tint-soft); }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 55%, transparent); outline-offset: 1px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- Window layout: source-list sidebar + content ---------- */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: var(--vh100); }
.side { background: var(--sidebar); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border-right: .5px solid var(--sep); padding: 18px 10px 14px; display: flex; flex-direction: column; gap: 1px; position: sticky; top: 0; height: var(--vh100); overflow-y: auto; }
.side .brandmark { display: flex; align-items: flex-end; gap: 10px; padding: 6px 10px 20px; }
.side .brandmark img { max-height: 40px; max-width: 110px; display: block; }
.side .brandmark .logo-dark { display: none; }
.side .brandmark .hq { font-weight: 700; font-size: 11px; letter-spacing: .14em; color: var(--tint-ink); background: var(--tint-soft); border-radius: 5px; padding: 3px 6px; margin-bottom: 1px; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a { display: flex; align-items: center; gap: 10px; color: var(--label); padding: 6px 10px; border-radius: 7px; font-weight: 500; font-size: 13.5px; text-decoration: none; }
.nav a svg.i { color: var(--tint); width: 18px; height: 18px; }
.nav a:hover { background: var(--fill-2); opacity: 1; }
.nav a.on { background: var(--fill); }
.nav a.on, .nav a.on svg.i { color: var(--label); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nav a.on { background: rgba(0,0,0,.08); }
}
:root[data-theme="light"] .nav a.on { background: rgba(0,0,0,.08); }
.nav .count { margin-left: auto; color: var(--label-3); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.nav-label { font-size: 11px; font-weight: 600; color: var(--label-3); padding: 18px 10px 5px; }
.side .spacer { flex: 1; }
.claude-hint { background: var(--card); box-shadow: var(--shadow); border-radius: 10px; padding: 12px; font-size: 12px; color: var(--label-2); margin: 0 2px; }
.claude-hint strong { color: var(--label); display: flex; gap: 6px; align-items: center; margin-bottom: 3px; font-size: 12.5px; }
.claude-hint strong svg.i { color: var(--tint); width: 15px; height: 15px; }

.main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 32px; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-bottom: .5px solid var(--sep); position: sticky; top: 0; z-index: 20; min-height: 52px; }
.search { flex: 1; max-width: 420px; position: relative; }
.search input { width: 100%; padding: 6px 10px 6px 30px; border: 0; border-radius: 8px; background: var(--fill-2); font-size: 13.5px; }
.search input::placeholder { color: var(--label-3); }
.search input:focus { outline: none; background: var(--fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 40%, transparent); }
.search svg { position: absolute; left: 9px; top: 7.5px; width: 15px; height: 15px; color: var(--label-3); }
.search kbd { position: absolute; right: 8px; top: 6px; font-size: 11px; color: var(--label-3); font-family: inherit; }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--elev); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 60vh; overflow: auto; padding: 6px; }
.search-results .grp { font-size: 11px; font-weight: 600; color: var(--label-3); padding: 8px 10px 3px; }
.search-results a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 6px; color: var(--label); }
.search-results a:hover, .search-results a.sel { background: var(--tint); color: #fff; opacity: 1; }
.search-results a:hover .muted, .search-results a.sel .muted { color: rgba(255,255,255,.8); }

.page { padding: 28px 32px 72px; max-width: 1280px; animation: rise .35s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
.page-head .sub { color: var(--label-3); margin-top: 4px; font-size: 14px; }
.crumb { font-size: 13px; color: var(--label-3); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.crumb a { color: var(--tint-ink); }

/* ---------- Buttons (macOS push buttons) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 13px; min-height: 30px; border-radius: 8px; border: 0; background: var(--fill); font-weight: 500; font-size: 13.5px; cursor: pointer; white-space: nowrap; text-decoration: none !important; color: var(--label); transition: background .15s, transform .1s, opacity .15s; }
.btn:hover { background: color-mix(in srgb, var(--fill) 100%, var(--fill-2)); filter: brightness(.97); opacity: 1; }
.btn:active { transform: scale(.97); }
.btn svg.i { width: 15px; height: 15px; }
.btn.primary { background: var(--tint-ink); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.primary { background: var(--tint); }
}
:root[data-theme="dark"] .btn.primary { background: var(--tint); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--tint-ink); }
.btn.ghost:hover { background: var(--fill-2); }
.btn.danger { color: var(--red-ink); }
.btn.sm { padding: 4px 10px; min-height: 26px; font-size: 12.5px; border-radius: 7px; }
.btn.icon { padding: 5px; min-height: 0; }
.btn:disabled { opacity: .45; cursor: default; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Grouped inset cards ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; }
.card-h h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card-h > svg.i { color: var(--label-3); }
.card-b { padding: 6px 18px 18px; }
.card-h + .card-b, .card-h + .list, .card-h + div { border-top: .5px solid var(--sep); }
.card-h + .card-b { padding-top: 14px; }
.card > .card-b:first-child { padding-top: 18px; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.g-side { grid-template-columns: 340px 1fr; }
.g-main { grid-template-columns: 1fr 360px; }
.grid > *, .builder > * { min-width: 0; }
@media (max-width: 1100px) { .g-side, .g-main, .g3 { grid-template-columns: 1fr !important; } .g4 { grid-template-columns: 1fr 1fr; } }

.stat { padding: 16px 18px 14px; transition: transform .2s var(--ease); }
.stat:hover { transform: translateY(-1px); }
.stat .n { font-family: var(--font-d); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .l { color: var(--label-3); font-size: 13px; font-weight: 500; margin-top: 2px; }

/* Status labels: tinted capsules with system colours */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--fill-2); color: var(--label-2); text-transform: capitalize; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.nodot::before { display: none; }
.s-lead, .s-prospect, .s-inquiry, .s-new { background: color-mix(in srgb, var(--tint) 16%, transparent); color: var(--tint-ink); }
.s-proposal { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); }
.s-active, .s-confirmed, .s-open, .s-converted { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-ink); }
.s-in-prep, .s-doing, .s-reviewed { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange-ink); }
.s-live { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red-ink); }
.s-wrap { background: color-mix(in srgb, var(--teal) 16%, transparent); color: var(--teal); }
.s-past, .s-closed, .s-done, .s-archived, .s-cancelled { background: var(--fill-2); color: var(--label-3); }
.p-high { color: var(--red-ink); font-weight: 600; }
.muted { color: var(--label-3); }
.small { font-size: 12.5px; }
.empty { text-align: center; padding: 40px 16px; color: var(--label-3); }
.empty svg.i { width: 40px; height: 40px; stroke-width: 1.3; margin-bottom: 10px; color: var(--label-4); }
.empty p { margin: 0 0 14px; font-size: 14px; }

/* Tables: inset list style with hairlines */
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-size: 12px; color: var(--label-3); font-weight: 500; padding: 10px 16px 8px; border-bottom: .5px solid var(--sep); }
table.t td { padding: 11px 16px; border-bottom: .5px solid var(--sep); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.click { cursor: default; }
table.t tr.click:hover td { background: var(--fill-3); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; position: relative; }
.list > li + li::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; border-top: .5px solid var(--sep); }
.list > li[onclick]:hover { background: var(--fill-3); }
.list .grow { flex: 1; min-width: 0; }
.list .title { font-weight: 500; color: var(--label); }
.list > li > svg.i { color: var(--tint); }
.date-chip { width: 44px; flex: none; text-align: center; border-radius: 10px; background: var(--card-2); box-shadow: inset 0 0 0 .5px var(--sep); padding: 4px 0 5px; line-height: 1.05; overflow: hidden; }
.date-chip span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--red-ink); order: -1; }
.date-chip b { display: block; font-size: 19px; font-weight: 500; font-family: var(--font-d); color: var(--label); }
.date-chip { display: flex; flex-direction: column; }

/* Segmented controls (chips + tabs) */
.chips { display: inline-flex; gap: 2px; flex-wrap: wrap; background: var(--fill-2); padding: 2px; border-radius: 9px; }
.chip { padding: 4px 12px; border-radius: 7px; border: 0; background: transparent; cursor: pointer; font-weight: 500; font-size: 13px; color: var(--label); text-transform: capitalize; display: inline-flex; align-items: center; transition: background .2s var(--ease); }
.chip svg.i { width: 16px; height: 16px; }
.chip.on { background: var(--elev); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip.on { background: #636366; }
}
:root[data-theme="dark"] .chip.on { background: #636366; }
.tabs { display: inline-flex; gap: 2px; background: var(--fill-2); padding: 2px; border-radius: 9px; margin-bottom: 20px; overflow-x: auto; max-width: 100%; }
.tabs button { background: none; border: 0; padding: 5px 14px; font-weight: 500; font-size: 13px; color: var(--label); cursor: pointer; border-radius: 7px; white-space: nowrap; transition: background .2s var(--ease); }
.tabs button.on { background: var(--elev); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabs button.on { background: #636366; }
}
:root[data-theme="dark"] .tabs button.on { background: #636366; }
.tabs .count { font-size: 11px; color: var(--label-3); margin-left: 5px; font-variant-numeric: tabular-nums; }

/* ---------- Form controls ---------- */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } }
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld > span { font-size: 12.5px; font-weight: 500; color: var(--label-2); }
.inp, .fld input:not([type=checkbox]):not([type=color]):not([type=radio]), .fld select, .fld textarea { width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 .5px var(--label-4), 0 .5px 1px rgba(0,0,0,.04); color: var(--label); font-size: 13.5px; transition: box-shadow .15s; }
.modal .inp, .modal .fld input:not([type=checkbox]):not([type=color]):not([type=radio]), .modal .fld select, .modal .fld textarea { background: var(--fill-3); }
select.inp, .fld select { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3' fill='none' stroke='%238E8E93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.inp:focus, .fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--tint), 0 0 0 3.5px color-mix(in srgb, var(--tint) 35%, transparent); }
.inp::placeholder, .fld input::placeholder, textarea::placeholder { color: var(--label-3); }
textarea { resize: vertical; min-height: 70px; }
/* Switches (iOS/macOS toggles) */
input[type=checkbox] { accent-color: var(--tint); }
.fld.check { flex-direction: row; align-items: center; gap: 9px; cursor: pointer; }
.fld.check > span { color: var(--label); font-size: 13.5px; font-weight: 400; }
.fld.check input[type=checkbox], #share, #closed { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--fill); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .25s var(--ease); }
.fld.check input[type=checkbox]::after, #share::after, #closed::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 0 0 .5px rgba(0,0,0,.04); transition: transform .25s var(--ease); }
.fld.check input[type=checkbox]:checked, #share:checked, #closed:checked { background: var(--green); }
.fld.check input[type=checkbox]:checked::after, #share:checked::after, #closed:checked::after { transform: translateX(16px); }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 9px 14px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--label-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.color-row { display: flex; align-items: center; gap: 8px; }
.color-row input[type=color] { width: 34px; height: 34px; border: 0; border-radius: 50%; padding: 0; background: none; cursor: pointer; flex: none; }
.color-row input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-row input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
.color-row input[type=text] { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }

/* ---------- Sheets & HUD ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 100; padding: 20px; animation: fade .2s ease; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-bg { background: rgba(0,0,0,.5); }
}
:root[data-theme="dark"] .modal-bg { background: rgba(0,0,0,.5); }
.modal { background: var(--elev); border-radius: 14px; width: min(600px, 100%); max-height: calc(var(--vh100) * .88); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: sheet .38s var(--ease); }
.modal.wide { width: min(860px, 100%); }
.modal-h { padding: 18px 22px 0; display: flex; justify-content: space-between; align-items: center; }
.modal-h h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.modal-h .btn { background: var(--fill-2); border-radius: 50%; padding: 4px; color: var(--label-3); }
.modal-h .btn svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.modal-b { padding: 16px 22px 18px; overflow-y: auto; }
.modal-f { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; }
.modal-f .btn { min-width: 84px; }
@keyframes fade { from { opacity: 0; } }
@keyframes sheet { from { opacity: 0; transform: translateY(14px) scale(.98); } }
#toasts { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; }
.toast { background: color-mix(in srgb, var(--elev) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: var(--label); padding: 10px 18px; border-radius: 99px; box-shadow: var(--shadow-lg); font-weight: 500; font-size: 13.5px; animation: hud .35s var(--ease); }
.toast.err { color: var(--red-ink); }
@keyframes hud { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ---------- Tasks (Reminders style) ---------- */
.task { display: flex; align-items: flex-start; gap: 11px; padding: 10px 18px; position: relative; }
.task + .task::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; border-top: .5px solid var(--sep); }
.task .tick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--label-4); background: transparent; cursor: pointer; flex: none; margin-top: 0; display: grid; place-items: center; padding: 0; transition: background .2s, border-color .2s; }
.task .tick:hover { border-color: var(--tint); }
.task .tick.on { background: var(--tint); border-color: var(--tint); }
.task .tick.on::after { content: ""; width: 8px; height: 4.5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.task.done .ttl { color: var(--label-3); }
.task .ttl { font-weight: 400; font-size: 14px; }
.task .meta { font-size: 12.5px; color: var(--label-3); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1px; }
.task .meta .over { color: var(--red-ink); }
.task .acts { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.task:hover .acts { opacity: 1; }
.add-row { display: flex; gap: 8px; padding: 10px 14px; border-top: .5px solid var(--sep); flex-wrap: wrap; align-items: center; }
.add-row .inp { flex: 1; min-width: 140px; }
.add-row .inp.narrow { flex: 0 0 150px; min-width: 0; }

/* ---------- Board ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.col { background: var(--fill-3); border-radius: 14px; padding: 10px; min-height: 220px; transition: background .2s; }
.col.over { background: var(--tint-soft); box-shadow: inset 0 0 0 2px var(--tint); }
.col-h { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; font-weight: 600; font-size: 13px; color: var(--label); text-transform: capitalize; }
.ecard { background: var(--card); border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; box-shadow: var(--shadow); cursor: grab; transition: transform .2s var(--ease), box-shadow .2s; }
.ecard:hover { transform: translateY(-1px); box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 6px 16px -6px rgba(0,0,0,.18); }
.ecard:active { cursor: grabbing; }
.ecard .nm { font-weight: 600; margin-bottom: 3px; letter-spacing: -0.01em; }
.ecard .mt { font-size: 12px; color: var(--label-3); display: flex; flex-direction: column; gap: 1px; }
.progress { height: 4px; background: var(--fill); border-radius: 4px; overflow: hidden; margin-top: 9px; }
.progress > i { display: block; height: 100%; background: var(--tint); border-radius: 4px; }

/* ---------- Notes & files ---------- */
.note { padding: 12px 18px; border-top: .5px solid var(--sep); }
.note .who { font-size: 12px; color: var(--label-3); margin-bottom: 3px; display: flex; gap: 8px; align-items: center; }
.note .who b { color: var(--label); font-weight: 600; }
.note .body p { margin: 0 0 6px; }
.note .body p:last-child { margin: 0; }
.dropzone { border: 1.5px dashed var(--label-4); border-radius: 12px; padding: 22px; text-align: center; color: var(--label-3); cursor: pointer; transition: all .2s var(--ease); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dropzone svg.i { width: 26px; height: 26px; color: var(--tint); margin-bottom: 4px; }
.dropzone b { color: var(--tint-ink); font-weight: 600; }
.dropzone:hover { background: var(--fill-3); }
.dropzone.over { border-color: var(--tint); background: var(--tint-soft); color: var(--tint-ink); transform: scale(1.01); }
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.file { border-radius: 10px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); position: relative; border: 0; color: var(--label); }
.file .th { aspect-ratio: 4/3; background: var(--fill-2); display: grid; place-items: center; color: var(--label-3); overflow: hidden; }
.file .th img, .file .th video { width: 100%; height: 100%; object-fit: cover; }
.file .nm { padding: 7px 9px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file .x { position: absolute; top: 6px; right: 6px; background: color-mix(in srgb, var(--elev) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 50%; opacity: 0; transition: opacity .15s; }
.file:hover .x { opacity: 1; }

/* ---------- Builders (inspector + canvas) ---------- */
.builder { display: grid; grid-template-columns: minmax(360px, 420px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .builder { grid-template-columns: 1fr; } }
.builder .panel { position: sticky; top: 72px; max-height: calc(var(--vh100) - 92px); overflow-y: auto; padding: 2px 2px 8px; }
.blk { border-radius: 10px; background: var(--card); margin-bottom: 6px; box-shadow: var(--shadow); transition: box-shadow .2s; }
.blk.open { box-shadow: 0 0 0 2px var(--tint), var(--shadow); }
.blk-h { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; cursor: default; }
.blk-h .ty { font-size: 11px; font-weight: 600; color: var(--tint-ink); background: var(--tint-soft); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.blk-h .sum { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--label-2); font-size: 13.5px; }
.blk-h .btn { padding: 4px; min-height: 0; background: transparent; color: var(--label-3); }
.blk-h .btn:hover { background: var(--fill-2); color: var(--label); }
.blk-b { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; border-top: .5px solid var(--sep); }
.sublist { display: flex; flex-direction: column; gap: 8px; }
.subitem { background: var(--fill-3); border-radius: 9px; padding: 10px; display: grid; gap: 6px; position: relative; }
.subitem .x { position: absolute; top: 5px; right: 5px; background: transparent; }
.img-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.img-pick .thumb { width: 54px; height: 40px; border-radius: 7px; background: var(--fill-2) center/cover; flex: none; box-shadow: inset 0 0 0 .5px var(--sep); }
.img-pick input { flex: 1; min-width: 0; }
.preview-wrap { background: var(--fill-2); border-radius: 16px; padding: 24px; overflow: auto; }
.preview-wrap .b-doc { box-shadow: 0 20px 50px -18px rgba(0,0,0,.35); border-radius: 4px; overflow: hidden; }
.preview-form { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.preview-form .b-form-page { min-height: 0; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-chips code { font-size: 11px; background: var(--fill-2); padding: 2px 6px; border-radius: 5px; cursor: pointer; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.ph-chips code:hover { background: var(--tint-soft); color: var(--tint-ink); }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "›"; display: inline-block; margin-right: 6px; transition: transform .2s; font-weight: 600; }
details[open] summary::before { transform: rotate(90deg); }
.add-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.add-menu button { text-align: left; padding: 7px 10px; border: 0; background: var(--fill-2); border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 13px; color: var(--label); transition: background .15s; }
.add-menu button:hover { background: var(--tint-soft); color: var(--tint-ink); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.tpl { border: 0; border-radius: 12px; padding: 14px; cursor: pointer; background: var(--fill-3); text-align: left; box-shadow: inset 0 0 0 .5px var(--sep); transition: all .2s var(--ease); color: var(--label); }
.tpl:hover { background: var(--fill-2); }
.tpl.on { box-shadow: inset 0 0 0 2px var(--tint); background: var(--tint-soft); }
.tpl b { display: block; margin-bottom: 3px; font-weight: 600; }
.tpl span { font-size: 12.5px; color: var(--label-3); }
.doc-card { overflow: hidden; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.doc-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 .5px rgba(0,0,0,.05), 0 14px 30px -12px rgba(0,0,0,.25); }
.doc-thumb { height: 128px; background: var(--tint); color: #fff; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.doc-thumb::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; border: 16px solid rgba(255,255,255,.14); }
.doc-thumb .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; font-weight: 600; }
.doc-thumb .t { font-family: var(--b-font-h, var(--font-d)); font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -0.01em; }
.code { background: #1C1C1E; color: #E5E5EA; padding: 14px 16px; border-radius: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; white-space: pre; overflow-x: auto; position: relative; line-height: 1.55; }
.code .copy { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.14); color: #fff; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.steps > li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--tint-ink); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12.5px; }
.prompt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.prompt-list div { background: var(--fill-3); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--label-2); box-shadow: inset 0 0 0 .5px var(--sep); }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }

/* ---------- Sign in ---------- */
.auth { min-height: var(--vh100); display: grid; place-items: center; background: radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--tint) 85%, #fff), var(--tint) 60%); padding: 20px; }
.auth .card { width: min(380px, 100%); padding: 32px 30px 28px; border-radius: 18px; box-shadow: var(--shadow-lg); text-align: center; }
.auth img.b-logo { max-height: 56px; margin: 0 auto; }
.auth h1 { font-size: 22px; margin: 20px 0 6px; font-weight: 700; }
.auth p { color: var(--label-3); margin: 0 0 20px; font-size: 13.5px; }
.auth .b-wordmark { font-size: 28px; }
.auth form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.auth .btn { justify-content: center; padding: 9px; font-size: 14px; }
.err-text { color: var(--red-ink); font-size: 13px; min-height: 18px; }

/* Dark mode: swap to white logo in the sidebar */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .side .brandmark .logo-light { display: none; }
  :root:not([data-theme="light"]) .side .brandmark .logo-dark { display: block; }
  :root:not([data-theme="light"]) .preview-wrap { background: #2C2C2E; }
}
:root[data-theme="dark"] .side .brandmark .logo-light { display: none; }
:root[data-theme="dark"] .side .brandmark .logo-dark { display: block; }
:root[data-theme="dark"] .preview-wrap { background: #2C2C2E; }

/* Small screens */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: .5px solid var(--sep); }
  .side .spacer, .claude-hint, .nav-label { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .g2, .g4 { grid-template-columns: 1fr; }
  .page { padding: 20px 16px 48px; }
  .page-head h1 { font-size: 28px; }
  .topbar { padding: 10px 16px; flex-wrap: wrap; }
  .search { flex-basis: 100%; max-width: none; order: 2; }
  .topbar > div[style] { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.claude-card { background: linear-gradient(160deg, var(--tint-soft), transparent 70%), var(--card); padding-top: 16px; }
.claude-card svg.i { color: var(--tint); }
.claude-prompt { background: var(--fill-3); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; color: var(--label-2); box-shadow: inset 0 0 0 .5px var(--sep); }
.page-head > input#title { box-shadow: none !important; background: transparent !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.025em; font-family: var(--font-d) !important; padding: 2px 6px !important; margin-left: -6px; border-radius: 8px; }
.page-head > input#title:hover { background: var(--fill-3) !important; }
.page-head > input#title:focus { background: var(--card) !important; box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tint) 35%, transparent) !important; }

/* QBridge panel */
.page.page-wide { max-width: none; padding-bottom: 24px; }
.ext-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.qb-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.qb-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qb-title > svg.i { width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: var(--tint); color: #fff; stroke-width: 1.8; flex: none; }
.qb-title h1 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.qb-title > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qb-status { font-size: 11.5px; color: var(--label-2); display: flex; align-items: center; gap: 5px; }
.qb-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--gray); display: inline-block; }
.qb-status i.on { background: var(--green); } .qb-status i.off { background: var(--orange); }
.qb-bar .btn { padding: 4px 10px; font-size: 12px; }
.qb-bar .btn.icon { padding: 4px 6px; }
.qb-bar select.inp { padding: 4px 28px 4px 9px; font-size: 12px; min-height: 0; height: 28px; }
.page.page-qb { padding: 14px 20px 12px; }
.page-qb .qb-note { margin-top: 8px; font-size: 11.5px; }
.qb-frame { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--card); }
.qb-frame iframe { display: block; width: 100%; height: calc(var(--vh100) - 130px); min-height: 480px; border: 0; }
.qb-note { display: flex; align-items: center; gap: 6px; margin: 12px 2px 0; }
.qb-note svg.i { width: 14px; height: 14px; }
.qb-hero svg.i { width: 52px; height: 52px; padding: 12px; border-radius: 14px; background: var(--tint); color: #fff; }

/* ---------- Resizable panes (document viewer) ---------- */
.split { display: grid; grid-template-columns: minmax(360px, 1fr) 14px var(--side, 320px); align-items: start; }
.split > * { min-width: 0; }
.split-side { margin-left: 4px; }
.viewer-box { height: var(--viewer-h, calc(var(--vh100) * .78)); }
.split-bar, .resize-y { position: relative; touch-action: none; -webkit-user-select: none; user-select: none; }
.split-bar { align-self: stretch; cursor: col-resize; min-height: 200px; }
.resize-y { height: 14px; cursor: row-resize; }
.split-bar::after, .resize-y::after { content: ""; position: absolute; border-radius: 999px; background: var(--label-4); transition: background .15s, transform .15s; }
.split-bar::after { left: 50%; top: 50%; width: 4px; height: 44px; transform: translate(-50%, -50%); }
.resize-y::after { left: 50%; top: 50%; width: 44px; height: 4px; transform: translate(-50%, -50%); }
.split-bar:hover::after, .split-bar:focus-visible::after, .resize-y:hover::after, .resize-y:focus-visible::after, .split.resizing .split-bar::after, .split.resizing .resize-y::after { background: var(--tint); }
.split.resizing iframe { pointer-events: none; } /* keep the drag going when the pointer passes over the PDF */
body.resizing-x, body.resizing-x * { cursor: col-resize !important; user-select: none; }
body.resizing-y, body.resizing-y * { cursor: row-resize !important; user-select: none; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; gap: 18px; } .split-bar { display: none; } .split-side { margin-left: 0; } }

/* ---------- Collapsible sidebar ---------- */
.side-toggle { flex: none; margin-left: -10px; color: var(--label-2); }
.side-toggle svg.i { width: 18px; height: 18px; }
.shell { transition: grid-template-columns .25s var(--ease); }
.shell.collapsed { grid-template-columns: 64px 1fr; }
.shell.collapsed .side { padding: 14px 8px; align-items: center; }
.shell.collapsed .brandmark { padding: 6px 0 16px; }
.shell.collapsed .brandmark img { display: none !important; }
.shell.collapsed .nav { width: 100%; }
.shell.collapsed .nav a { justify-content: center; padding: 8px 0; position: relative; }
.shell.collapsed .nav a > span:not(.count):not(.ext-dot) { display: none; }
.shell.collapsed .nav a .count { position: absolute; top: 2px; right: 6px; font-size: 10px; margin: 0; }
.shell.collapsed .nav a .ext-dot { position: absolute; top: 6px; right: 10px; margin: 0; }
.shell.collapsed .nav-label { font-size: 0; padding: 10px 0 4px; margin: 0 10px; border-top: .5px solid var(--sep); }
.shell.collapsed .claude-hint, .shell.collapsed .appearance { display: none; }

/* ---------- Appearance & text size (sidebar footer) ---------- */
.appearance { margin: 12px 2px 0; padding-top: 12px; border-top: .5px solid var(--sep); display: grid; gap: 10px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fill); border-radius: 8px; padding: 2px; }
.seg button { appearance: none; border: 0; background: transparent; color: var(--label); font: 500 12px var(--font); padding: 4px 0; border-radius: 6px; cursor: default; }
.seg button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
:root[data-theme="dark"] .seg button.on { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button.on { background: #636366; } }
.tsize { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--label-3); padding: 0 2px; }
.tsize-ctl { display: flex; align-items: center; background: var(--fill); border-radius: 8px; padding: 2px; }
.tsize-ctl button { appearance: none; border: 0; background: transparent; color: var(--label); width: 28px; height: 24px; border-radius: 6px; font: 600 11px var(--font); cursor: default; }
.tsize-ctl button + output + button { font-size: 15px; }
.tsize-ctl button:hover:not(:disabled) { background: var(--fill-2); }
.tsize-ctl button:disabled { opacity: .35; }
.tsize-ctl output { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; color: var(--label-2); }
@media (max-width: 760px) { .side-toggle, .appearance { display: none; } }

/* ---------- billing ---------- */
table.t .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.bill td, table.bill th { padding-top: 9px; padding-bottom: 9px; }
.bill-totals { padding: 10px 16px 14px; border-top: .5px solid var(--sep); display: grid; gap: 6px; }
.bill-totals .row, .bill-dash .row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.bill-totals .total b { font-size: 15px; }
.bill-totals .tax, .bill-dash .tax { color: var(--orange-ink); }
.bill-totals .net { border-top: .5px solid var(--sep); padding-top: 6px; }
.bill-totals .net b { font-size: 16px; color: var(--green-ink); }
.bill-meta { border-top: .5px solid var(--sep); }
.bill-dash { display: grid; gap: 8px; }
.bill-dash hr { border: 0; border-top: .5px solid var(--sep); margin: 4px 0; width: 100%; }
.modal .bill-totals { border: 0; padding: 12px 4px 0; }
table.bill-edit td { padding: 6px 6px; }
table.bill-edit th { padding: 6px; }
table.bill-edit .inp { width: 100%; }
.s-bill-quote { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); }
.s-bill-invoiced { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange-ink); }
.s-bill-paid { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-ink); }
.s-bill-declined { background: var(--fill-2); color: var(--label-3); }

/* ---------- sortable tables ---------- */
table.t th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.t th.sortable:hover { color: var(--label); }
table.t th.sortable::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; opacity: 0; }
table.t th.sortable:hover::after { opacity: .35; }
table.t th.sorted { color: var(--label); }
table.t th.sorted::after { opacity: .8; border-top-color: transparent; border-bottom-color: currentColor; vertical-align: 5px; }
table.t th.sorted.desc::after { border-bottom-color: transparent; border-top-color: currentColor; vertical-align: 1px; }
table.t th.num.sortable::after { margin-left: 4px; }
table.t th:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }

/* ---------- billing period picker + Billing page ---------- */
.period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.period select.inp { width: auto; min-width: 0; padding-top: 5px; padding-bottom: 5px; }
.bill-dash .muted-row { color: var(--label-3); }
.bill-dash .net b { color: var(--green-ink); }
.bill-stats .stat .n { font-variant-numeric: tabular-nums; }
.bill-stats .stat .n.tax { color: var(--orange-ink); }
.bill-stats .stat .n.net { color: var(--green-ink); }
.bill-stats .stat .s { font-size: 12px; color: var(--label-3); margin-top: 2px; }
table.bill-list td.num, table.bill-list th.num { text-align: right; }
table.bill-list { font-size: 13px; }
table.bill-list th, table.bill-list td { padding-left: 8px; padding-right: 8px; }
table.bill-list th:first-child, table.bill-list td:first-child { padding-left: 16px; }
table.bill-list th:last-child, table.bill-list td:last-child { padding-right: 16px; }
table.bill-list td { white-space: nowrap; }
table.bill-list td.wrap { white-space: normal; min-width: 96px; }
table.bill-list td.wrap:first-child { min-width: 160px; }
table.bill-list th { white-space: normal; }
.bill-wrap { overflow-x: auto; }
table.bill-list .dcell { min-width: 96px; }
table.bill-list .dcell .dbtn { border: 0; background: transparent; padding: 3px 6px; margin: -3px -6px; border-radius: 6px; font: inherit; color: var(--label); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.bill-list .dcell .dbtn:hover { background: var(--fill-2); }
table.bill-list .dcell .dbtn.add { color: var(--label-4); }
table.bill-list tr:hover .dcell .dbtn.add { color: var(--tint); }
table.bill-list .dcell input { width: 128px; padding: 3px 6px; font-size: 13px; }
/* keep the event name in view while scrolling sideways */
table.bill-list th:first-child, table.bill-list td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: inset -.5px 0 0 var(--sep); }
table.bill-list tr.click:hover td:first-child { background: linear-gradient(var(--fill-3), var(--fill-3)), var(--card); }

/* ---------- Gmail ---------- */
.gm-labels { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 0; padding-bottom: 8px; }
.gm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--fill-2); color: var(--label); font-size: 12px; text-decoration: none; max-width: 100%; }
.gm-chip svg.i { width: 13px; height: 13px; color: var(--label-3); }
.gm-chip:hover { background: var(--fill-1, var(--fill-2)); }
.gm-threads > li { align-items: flex-start; cursor: pointer; padding-top: 9px; padding-bottom: 9px; }
.gm-threads > li:hover, .gm-threads > li:focus-visible { background: var(--fill-3); outline: none; }
.gm-row1 { display: flex; justify-content: space-between; gap: 10px; }
.gm-from { font-size: 13px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-date { white-space: nowrap; }
.gm-subj { font-weight: 500; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.gm-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-threads > li.unread .gm-subj, .gm-threads > li.unread .gm-from { font-weight: 700; color: var(--label); }
.gm-threads > li.unread::after { content: ''; position: absolute; left: 7px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--tint); }
.gm-pick { max-height: 46vh; overflow: auto; display: grid; gap: 2px; }
.gm-opt { padding: 5px 4px; border-radius: 6px; }
.gm-opt:hover { background: var(--fill-3); }
.gm-reader { display: grid; gap: 14px; }
.gm-msg { border: .5px solid var(--sep); border-radius: 10px; overflow: hidden; }
.gm-msg-h { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--fill-3); }
.gm-frame { width: 100%; border: 0; display: block; height: 80px; background: #fff; }
.gm-att { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: .5px solid var(--sep); }
.gm-setup summary { cursor: pointer; color: var(--label-2); margin-top: 12px; }
.gm-uri { margin-bottom: 4px; flex-wrap: nowrap; }
.gm-uri code { font-size: 11.5px; background: var(--fill-2); padding: 4px 6px; border-radius: 6px; word-break: break-all; }