/* Harrowsoft's look: white, quiet, one strong thing on a screen. Two themes from one set of tokens. No inline styles anywhere: the CSP refuses them. */
@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root, :root[data-theme="light"] {
  --bg: #ffffff; --bg-2: #fafafa; --bg-3: #f4f4f5; --bg-4: #e9e9eb; --card: #ffffff;
  --line: rgba(9, 9, 11, .085); --line-2: rgba(9, 9, 11, .16);
  --ink: #111113; --ink-2: #52525b; --ink-3: #6e6e78;
  --btn: #111113; --btn-ink: #ffffff; --btn-hover: #2c2c30;
  --good: #137a4b; --good-soft: rgba(19, 122, 75, .1);
  --warn: #a96400; --warn-soft: rgba(217, 134, 0, .13);
  --bad: #c9302c; --bad-soft: rgba(201, 48, 44, .09);
  --info: #2563c9; --info-soft: rgba(37, 99, 201, .09);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --shadow-1: 0 1px 2px rgba(9, 9, 11, .05);
  --shadow-2: 0 4px 16px rgba(9, 9, 11, .08), 0 1px 3px rgba(9, 9, 11, .05);
  --shadow-3: 0 24px 64px rgba(9, 9, 11, .2), 0 4px 12px rgba(9, 9, 11, .08);
  --a: #8c7bff; --b: #5b3df5;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0c0c0e; --bg-2: #131316; --bg-3: #1b1b1f; --bg-4: #27272c; --card: #141417;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .18);
  --ink: #f4f4f5; --ink-2: #b4b4bc; --ink-3: #8f8f99;
  --btn: #f4f4f5; --btn-ink: #111113; --btn-hover: #d9d9dd;
  --good: #4cc98c; --good-soft: rgba(76, 201, 140, .13);
  --warn: #e8ab4a; --warn-soft: rgba(232, 171, 74, .14);
  --bad: #f07a76; --bad-soft: rgba(240, 122, 118, .13);
  --info: #7fb0f5; --info-soft: rgba(127, 176, 245, .13);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, .65);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.45 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; letter-spacing: inherit; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; width: 100%; letter-spacing: inherit; outline: none; transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b) 18%, transparent); }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; padding: 0; flex: none; accent-color: var(--b); box-shadow: none; }
input[type="color"] { padding: 2px; height: 34px; }
input[type="range"] { padding: 0; border: 0; accent-color: var(--b); box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { resize: vertical; min-height: 72px; line-height: 1.45; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
code, kbd, pre, .mono { font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }
kbd { padding: 1px 5px; border-radius: 4px; background: var(--bg-3); border: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
[hidden] { display: none !important; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 12px; min-width: 0; }
.stack.tight { gap: 6px; }
.stack.loose { gap: 20px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.side-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.hint, .dim { color: var(--ink-3); }
.hint { font-size: 12.5px; }
.ink2 { color: var(--ink-2); }
.small { font-size: 12.5px; }
.strong { font-weight: 560; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.num { font-variant-numeric: tabular-nums; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic.small { width: 14px; height: 14px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-weight: 500; font-size: 13.5px; white-space: nowrap; cursor: pointer; transition: background-color .12s, border-color .12s, transform .06s; }
.btn:hover { background: var(--bg-3); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.btn.primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.ghost { border-color: transparent; background: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--bg-3); color: var(--ink); }
.btn.small { min-height: 28px; padding: 0 9px; font-size: 12.5px; border-radius: 7px; }
.btn.big { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
.btn.wide { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--ink-2); flex: none; transition: background-color .12s, color .12s; }
.icon-btn:hover { background: var(--bg-3); color: var(--ink); }
.icon-btn.small { width: 24px; height: 24px; }
.link { color: var(--b); font-weight: 500; cursor: pointer; }
.link:hover { text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .link { color: var(--a); }
.a-plain:hover { text-decoration: underline; text-underline-offset: 2px; }

/* the frame */
.shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--line); background: var(--bg-2); overflow-y: auto; }
.side-top { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 7px; margin-bottom: 8px; border-radius: 9px; text-align: left; transition: background-color .12s; }
.side-top:hover { background: var(--bg-3); }
.tile { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; flex: none; color: #fff; background: linear-gradient(150deg, var(--a), var(--b)); overflow: hidden; }
.tile img { width: 100%; height: 100%; display: block; }
.side-name { display: grid; line-height: 1.2; min-width: 0; flex: 1; }
.side-name b { font-weight: 600; font-size: 14px; letter-spacing: -.015em; }
.side-name small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-group { margin: 14px 8px 4px; font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.nav-item { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 8px; border-radius: 7px; color: var(--ink-2); font-weight: 450; transition: background-color .1s, color .1s; width: 100%; text-align: left; }
.nav-item:hover { background: var(--bg-3); color: var(--ink); }
.nav-item.on { background: var(--bg-4); color: var(--ink); font-weight: 520; }
.nav-item .count { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.side-foot { margin-top: auto; padding-top: 8px; display: grid; gap: 2px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 20; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 20px; background: var(--bg-3); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.banner .btn { margin-left: auto; }
.page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 26px 28px 64px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.page.wide { max-width: none; }
.page.narrow { max-width: 720px; }
.page-head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 14px; }
.page-title { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.page-title h1 { font-size: 22px; font-weight: 620; letter-spacing: -.025em; line-height: 1.2; }
.page-title p { color: var(--ink-3); font-size: 13.5px; }
.crumb { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 2px; }
.crumb:hover { color: var(--ink); }
.page-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card h2, .h2 { font-size: 14.5px; font-weight: 580; letter-spacing: -.012em; }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-width: 0; }
.card-head h2 { flex: 1; min-width: 0; }
.card.flush .card-head { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--line); }
.stat { display: grid; gap: 3px; }
.stat .k { font-size: 12.5px; color: var(--ink-3); }
.stat .v { font-size: 24px; font-weight: 620; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat .d { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.up { color: var(--good) !important; } .down { color: var(--bad) !important; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; min-height: 20px; border-radius: 99px; background: var(--bg-3); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--info-soft); color: var(--info); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* tables */
.tbl-wrap { overflow-x: auto; min-width: 0; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--ink-3); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--card); position: sticky; top: 0; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--ink); }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--bg-2); }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.card.flush .tbl th:first-child, .card.flush .tbl td:first-child { padding-left: 16px; }
.card.flush .tbl th:last-child, .card.flush .tbl td:last-child { padding-right: 16px; }

/* forms */
.field { display: grid; gap: 4px; min-width: 0; }
.field > label, .field-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.field .hint { font-size: 12.5px; }
.check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 13.5px; }
.check input { margin-top: 2px; }
.form-err { padding: 8px 10px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); font-size: 13px; }
.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--bg-3); gap: 1px; max-width: 100%; overflow-x: auto; }
.seg button { padding: 4px 10px; min-height: 26px; border-radius: 6px; font-size: 13px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { padding: 8px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-3); font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.code { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--bg-3); font: 12.5px/1.5 "Geist Mono", ui-monospace, monospace; min-width: 0; }
.code pre { margin: 0; flex: 1; min-width: 0; overflow-x: auto; white-space: pre; }
.code.wrap pre { white-space: pre-wrap; word-break: break-all; }
.empty { display: grid; justify-items: center; gap: 6px; padding: 44px 20px; text-align: center; }
.empty h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.empty p { color: var(--ink-3); max-width: 42ch; text-wrap: pretty; }
.empty .btn { margin-top: 8px; }
.empty .ic { width: 26px; height: 26px; color: var(--ink-3); margin-bottom: 4px; stroke-width: 1.25; }
.drop { display: grid; justify-items: center; gap: 4px; padding: 28px 20px; border: 1.5px dashed var(--line-2); border-radius: 12px; text-align: center; color: var(--ink-2); cursor: pointer; transition: background-color .12s, border-color .12s; }
.drop:hover, .drop.over { background: var(--bg-2); border-color: var(--ink-3); }

/* people */
.av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; font-size: 10.5px; font-weight: 600; color: #fff; letter-spacing: 0; }
.av.big { width: 34px; height: 34px; font-size: 13px; }
.av0 { background: #2a78d6; } .av1 { background: #c2410c; } .av2 { background: #0f8a5f; } .av3 { background: #a16207; } .av4 { background: #be3a74; } .av5 { background: #157f15; } .av6 { background: #6250d6; } .av7 { background: #c63a39; }
.av-none { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); }

/* floating things */
.menu { position: fixed; z-index: 60; min-width: 190px; max-width: 340px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2); padding: 4px; outline: none; }
.menu-filter { border: 0; border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 4px; box-shadow: none !important; }
.menu-list { max-height: 320px; overflow-y: auto; display: grid; gap: 1px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; font-size: 13.5px; min-height: 30px; }
.menu-item.active { background: var(--bg-3); }
.menu-item.current { font-weight: 560; }
.menu-item.danger { color: var(--bad); }
.menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-hint { color: var(--ink-3); font-size: 12px; }
.menu-empty { padding: 8px; color: var(--ink-3); font-size: 13px; }
.menu-sep { height: 1px; background: var(--line); margin: 3px 4px; }
.scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; padding: 8vh 16px 24px; background: rgba(9, 9, 11, .42); overflow-y: auto; animation: fade .12s linear; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.modal { width: 100%; max-width: 460px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-3); display: grid; animation: rise .16s ease-out; min-width: 0; }
.modal.big { max-width: 760px; }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; }
.modal-head h2 { flex: 1; font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.modal-body { padding: 12px 16px 16px; display: grid; gap: 12px; min-width: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.drawer-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(9, 9, 11, .26); animation: fade .12s linear; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 46; width: min(560px, 100%); background: var(--card); box-shadow: var(--shadow-3); display: flex; flex-direction: column; animation: slide .18s ease-out; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 16px; align-content: start; }
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 70; display: grid; gap: 6px; justify-items: center; width: max-content; max-width: calc(100% - 24px); }
.toast { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-size: 13.5px; box-shadow: var(--shadow-2); animation: rise .16s ease-out; }
.toast button { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tooltip { position: fixed; z-index: 65; pointer-events: none; padding: 7px 10px; border-radius: 8px; background: var(--btn); color: var(--btn-ink); font-size: 12.5px; box-shadow: var(--shadow-2); max-width: 280px; }
.tooltip .t-head { font-weight: 560; margin-bottom: 2px; }
.tooltip .t-row { display: flex; gap: 10px; justify-content: space-between; font-variant-numeric: tabular-nums; }
.tooltip .t-key { display: inline-flex; align-items: center; gap: 5px; }
.tooltip .t-swatch { width: 8px; height: 8px; border-radius: 2px; }
.palette { width: 100%; max-width: 560px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-3); overflow: hidden; animation: rise .14s ease-out; }
.palette input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 13px 16px; font-size: 15px; box-shadow: none !important; }
.palette-list { max-height: 50vh; overflow-y: auto; padding: 5px; display: grid; gap: 1px; }
.switcher { width: 340px; max-width: calc(100vw - 16px); padding: 6px; }
.switcher-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; max-height: 66vh; overflow-y: auto; }
.switcher-app { display: grid; justify-items: center; gap: 4px; padding: 9px 2px; border-radius: 8px; font-size: 11.5px; color: var(--ink-2); text-align: center; line-height: 1.15; min-width: 0; }
.switcher-app:hover { background: var(--bg-3); color: var(--ink); }
.switcher-app img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.switcher-app.soon { opacity: .55; }
.switcher-title { padding: 6px 8px 4px; font-size: 12px; color: var(--ink-3); font-weight: 500; }

/* charts: thin marks, quiet axes, a value when you point */
.chart { position: relative; width: 100%; min-width: 0; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { font: 400 11px "Geist", system-ui, sans-serif; fill: var(--ink-3); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { stroke: none; opacity: .09; }
.chart .hair { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.hbars { display: grid; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(70px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; min-width: 0; }
.hbar-track { height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; min-width: 0; }
.hbar-fill { height: 100%; border-radius: 4px; background: var(--s1); transition: width .3s ease-out; }
.funnel { display: grid; gap: 10px; }
.funnel-step { display: grid; gap: 4px; }
.funnel-bar { height: 30px; border-radius: 6px; background: var(--s1); min-width: 2px; }
.funnel-track { background: var(--bg-3); border-radius: 6px; overflow: hidden; }
.skeleton { display: grid; gap: 10px; }
.skeleton i { display: block; height: 14px; border-radius: 6px; background: var(--bg-3); animation: pulse 1.2s ease-in-out infinite; }
.skeleton i:nth-child(2) { width: 70%; } .skeleton i:nth-child(3) { width: 85%; }
@keyframes pulse { 50% { opacity: .5; } }
body.viewer .write-only { display: none !important; }

/* sign-in and other pages that stand alone */
.alone { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; background: var(--bg-2); }
.alone-box { width: 100%; max-width: 400px; display: grid; gap: 16px; }
.alone-mark { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.alone-mark b { font-weight: 650; }
.alone-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 13px; box-shadow: var(--shadow-1); }
.alone-card h1 { font-size: 19px; font-weight: 620; letter-spacing: -.02em; }
.alone-foot { text-align: center; font-size: 13.5px; color: var(--ink-3); }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 40; left: 0; width: 260px; transform: translateX(-100%); transition: transform .18s ease-out; box-shadow: var(--shadow-3); }
  .side.open { transform: none; }
  .topbar { display: flex; }
  .page { padding: 16px 16px 56px; }
  .cols-2, .cols-3, .side-main { grid-template-columns: minmax(0, 1fr); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scrim { padding-top: 16px; }
  .banner { padding: 8px 16px; }
  .btn, .icon-btn { touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { .side, .topbar, .banner, .page-acts { display: none !important; } .shell { display: block; } }