/* Nota — Keep-style UI. Fonts are self-hosted. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/InterVariable.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/InterVariable-Italic.woff2") format("woff2"); }
@font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 100 700; font-display: block; src: url("/fonts/MaterialSymbolsOutlined.woff2") format("woff2"); }

:root {
  --bg: #ffffff; --text: #202124; --text-2: #5f6368; --icon: #5f6368; --border: #e0e0e0; --hover: #f1f3f4;
  --nav-active: #feefc3; --accent: #fbbc04; --link: #1a73e8; --select-ring: #a142f4; --highlight: #fdd663;
  --scrim: rgba(32,33,36,.6); --snackbar: #323232; --tooltip: #3c4043; --chip-bg: rgba(0,0,0,.08); --surface: #ffffff;
  --shadow-1: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --shadow-3: 0 4px 12px rgba(0,0,0,.25);
  --topbar-h: 64px; --sidebar-w: 280px; --rail-w: 72px; --font: "Inter", "Roboto", system-ui, -apple-system, sans-serif;
  --c-default:#ffffff; --c-coral:#faafa8; --c-peach:#f39f76; --c-sand:#fff8b8; --c-mint:#e2f6d3; --c-sage:#b4ddd3; --c-fog:#d4e4ed; --c-storm:#aeccdc; --c-dusk:#d3bfdb; --c-blossom:#f6e2dd; --c-clay:#e9e3d4; --c-chalk:#efeff1;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #202124; --text: #e8eaed; --text-2: #9aa0a6; --icon: #9aa0a6; --border: #5f6368; --hover: rgba(232,234,237,.08);
  --nav-active: #41331c; --chip-bg: rgba(255,255,255,.1); --surface: #202124; --scrim: rgba(0,0,0,.7); --snackbar: #e8eaed;
  --c-default:#202124; --c-coral:#77172e; --c-peach:#692b17; --c-sand:#7c4a03; --c-mint:#264d3b; --c-sage:#0c625d; --c-fog:#256377; --c-storm:#284255; --c-dusk:#472e5b; --c-blossom:#6c394f; --c-clay:#4b443a; --c-chalk:#232427;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-y: scroll; }
body.modal-open { overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--link); }
.ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; user-select: none; }
.ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* icon buttons */
.ib { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--icon); position: relative; flex: none; }
.ib:hover { background: rgba(95,99,104,.157); }
:root[data-theme="dark"] .ib:hover { background: rgba(232,234,237,.12); }
.ib:disabled { opacity: .35; cursor: default; background: none; }
.ib.small { width: 32px; height: 32px; }
.ib.small .ms { font-size: 20px; }
.ib:focus-visible, .btn:focus-visible, .card:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.btn { padding: 0 16px; height: 36px; border-radius: 4px; font-weight: 500; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--link); color: #fff; }
.btn.primary:hover { background: #1765cc; }
.btn.link { color: var(--link); }
.btn.small { height: 28px; padding: 0 10px; font-size: 13px; }
.btn[disabled] { opacity: .6; cursor: default; }

/* boot */
.boot { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-2); }
.boot .ms { font-size: 64px; opacity: .4; }

/* top bar */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 8px; gap: 8px; z-index: 30; }
.topbar.selecting { background: var(--bg); }
.tb-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.topbar .ib { width: 48px; height: 48px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-2); font-size: 22px; padding: 0 8px; white-space: nowrap; }
.brand-logo { width: 40px; height: 40px; }
.tb-search { flex: 1; max-width: 720px; height: 46px; background: var(--hover); border-radius: 8px; display: flex; align-items: center; margin: 0 16px; transition: background .15s, box-shadow .15s; }
:root[data-theme="dark"] .tb-search { background: #282a2c; }
.tb-search:focus-within, .tb-search.active { background: var(--surface); box-shadow: var(--shadow-1); }
.tb-search input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; min-width: 0; }
.tb-search input::-webkit-search-cancel-button { display: none; }
.tb-search [data-act="search-clear"] { visibility: hidden; }
.tb-search.active [data-act="search-clear"], .tb-search:focus-within [data-act="search-clear"] { visibility: visible; }
.tb-right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.tb-spacer { flex: 1; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #202124; font-weight: 600; margin: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
.sel-count { font-size: 22px; margin-left: 8px; }

/* layout */
.body { display: flex; padding-top: var(--topbar-h); min-height: 100vh; }
.sidebar { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--sidebar-w); background: var(--bg); padding-top: 8px; z-index: 20; overflow-y: auto; transition: width .15s; }
.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; padding: 32px 24px 120px; transition: margin-left .15s; }
.body.sidebar-collapsed .sidebar { width: var(--rail-w); }
.body.sidebar-collapsed .sidebar:hover { width: var(--sidebar-w); box-shadow: var(--shadow-2); }
.body.sidebar-collapsed .main { margin-left: var(--rail-w); }
.body.sidebar-collapsed .sidebar .nav-item span { opacity: 0; }
.body.sidebar-collapsed .sidebar:hover .nav-item span { opacity: 1; }
.body.sidebar-collapsed .sidebar .nav-item.active { border-radius: 0 25px 25px 0; }
.body.sidebar-collapsed .sidebar .nav-footer { display: none; }
.body.sidebar-collapsed .sidebar:hover .nav-footer { display: block; }
.scrim { display: none; }
.nav-item { display: flex; align-items: center; height: 48px; padding-left: 12px; gap: 20px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px; border-radius: 0 25px 25px 0; margin-right: 12px; white-space: nowrap; overflow: hidden; }
.nav-item .ms { width: 48px; text-align: center; flex: none; }
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: var(--nav-active); }
.nav-item span { transition: opacity .15s; overflow: hidden; text-overflow: ellipsis; }
.nav-footer { padding: 24px 24px; font-size: 11px; }
.nav-footer a { color: var(--text-2); text-decoration: none; }
.content { max-width: 100%; margin: 0 auto; }
.section-title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: var(--text-2); margin: 32px 0 8px; padding-left: 8px; }
.grid { position: relative; transition: height .2s; }
.mobilebar { display: none; }

/* composer */
.composer-wrap { max-width: 600px; margin: 0 auto 16px; }
.composer { background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-2); border: 1px solid transparent; position: relative; }
:root[data-theme="dark"] .composer { border-color: var(--border); }
.composer.collapsed { display: flex; align-items: center; height: 46px; padding: 0 4px 0 16px; }
.composer-ph { flex: 1; font-size: 16px; font-weight: 500; color: var(--text-2); cursor: text; height: 46px; line-height: 46px; }
.composer.expanded { padding: 0; }

/* cards */
.card { position: absolute; top: 0; left: 0; width: 240px; border-radius: 8px; border: 1px solid var(--border); background: var(--c-default); padding: 0; transition: transform .2s, opacity .2s, box-shadow .15s; cursor: default; outline: none; overflow: visible; }
.card:hover, .card.focused { box-shadow: var(--shadow-2); }
.card.selected { border: 2px solid var(--text); }
.card.dragging { opacity: .4; }
.card.dropzone, #editor.dropzone, .composer.dropzone { outline: 2px dashed var(--link); }
.card > .card-title, .card > .card-body, .card > .card-list, .card > .chips, .card > .file-chip, .card > .audio-row { margin-left: 16px; margin-right: 16px; }
.card-title { font-size: 16px; font-weight: 500; line-height: 22px; padding-top: 12px; word-wrap: break-word; overflow-wrap: anywhere; }
.card-title:only-child, .card .card-title:last-of-type { padding-bottom: 8px; }
.card-body { font-size: 14.5px; line-height: 22px; padding: 12px 0 8px; max-height: 352px; overflow: hidden; word-wrap: break-word; overflow-wrap: anywhere; position: relative; white-space: pre-wrap; }
.card-body.empty-body { color: var(--text-2); font-style: italic; }
.card-body h1, .ed-body h1 { font-size: 22px; margin: 0; line-height: 30px; font-weight: 600; }
.card-body h2, .ed-body h2 { font-size: 17px; margin: 0; line-height: 26px; font-weight: 600; }
.card-body p, .ed-body p { margin: 0; }
.card-body div, .ed-body div { min-height: 22px; }
.card-body a { pointer-events: auto; }
.card .card-title + .card-body { padding-top: 4px; }
.card-list { padding: 8px 0 8px; font-size: 14px; }
.card-item { display: flex; align-items: flex-start; gap: 6px; line-height: 22px; min-height: 22px; word-break: break-word; }
.card-item.indent { padding-left: 24px; }
.card-item .cb { color: var(--icon); width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.card-item .cb .ms { font-size: 18px; }
.card-item.more, .card-item.checked-count { color: var(--text-2); font-size: 13px; }
.card-item.checked-count .ms { font-size: 18px; }
.card-tools { display: flex; align-items: center; gap: 2px; padding: 2px 4px 2px 8px; opacity: 0; transition: opacity .15s; min-height: 38px; }
.card:hover .card-tools, .card:focus-within .card-tools, .card.focused .card-tools { opacity: 1; }
.card-tools .ib { width: 34px; height: 34px; }
.card-tools .ib .ms { font-size: 18px; }
.card .pin { position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; opacity: 0; transition: opacity .15s; }
.card .pin .ms { font-size: 20px; }
.card:hover .pin, .card.focused .pin, .card .pin .ms.fill { opacity: 1; }
.select-circle { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--text); opacity: 0; transition: opacity .15s; display: inline-flex; align-items: center; justify-content: center; }
.select-circle .ms { font-size: 24px; }
.card:hover .select-circle, .card.selected .select-circle, .card.focused .select-circle { opacity: 1; }
.card.selected .select-circle .ms { font-variation-settings: "FILL" 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--chip-bg); font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; max-width: 100%; }
:root[data-theme="dark"] .chip { border: 1px solid var(--border); }
.chip .ms { font-size: 16px; }
.chip.past span:first-of-type { text-decoration: line-through; }
.chip span { overflow: hidden; text-overflow: ellipsis; }
.chip-x { display: none; width: 18px; height: 18px; border-radius: 50%; margin-right: -6px; align-items: center; justify-content: center; }
.chip-x .ms { font-size: 14px; }
.chip:hover .chip-x { display: inline-flex; }
.chip-x:hover { background: rgba(0,0,0,.15); }
.chip.btn-chip { cursor: pointer; }
.chip.btn-chip:hover { background: var(--hover); }
mark { background: var(--highlight); color: #202124; border-radius: 2px; padding: 0 1px; }

/* attachments */
.imgs { display: grid; gap: 2px; border-radius: 8px 8px 0 0; overflow: hidden; }
.imgs.cols1 { grid-template-columns: 1fr; }
.imgs.cols2 { grid-template-columns: 1fr 1fr; }
.imgs.cols3 { grid-template-columns: 1fr 1fr 1fr; }
.img-wrap { position: relative; background: var(--hover); cursor: pointer; }
.imgs.cols1 .img-wrap img { width: 100%; height: auto; display: block; max-height: 480px; object-fit: cover; }
.imgs.cols2 .img-wrap img, .imgs.cols3 .img-wrap img { width: 100%; height: 140px; object-fit: cover; display: block; }
.img-btn { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: none; align-items: center; justify-content: center; }
.img-btn.edit { right: 44px; }
.img-btn .ms { font-size: 18px; }
.img-wrap:hover .img-btn { display: inline-flex; }
.upload-ph { height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-2); font-size: 12px; padding: 8px; text-align: center; }
.bar { width: 80%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--link); width: 0; transition: width .2s; }
.audio-row { display: flex; align-items: center; gap: 6px; padding: 8px 0 4px; }
.audio-row audio { flex: 1; min-width: 0; height: 36px; }
.audio-dur { font-size: 12px; color: var(--text-2); }
.file-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 6px 0; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; min-width: 0; }
.file-chip .ms { font-size: 20px; color: var(--icon); flex: none; }
.file-chip .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .file-size { color: var(--text-2); font-size: 12px; }
.file-chip:hover { background: var(--hover); }
.ed-attach .file-chip, .ed-attach .audio-row { margin-left: 16px; margin-right: 16px; }
.card > .file-chip:first-child, .card > .audio-row:first-child { margin-top: 12px; }

/* note colors */
.c-default { background: var(--c-default); }
.c-coral { background: var(--c-coral); border-color: var(--c-coral); }
.c-peach { background: var(--c-peach); border-color: var(--c-peach); }
.c-sand { background: var(--c-sand); border-color: var(--c-sand); }
.c-mint { background: var(--c-mint); border-color: var(--c-mint); }
.c-sage { background: var(--c-sage); border-color: var(--c-sage); }
.c-fog { background: var(--c-fog); border-color: var(--c-fog); }
.c-storm { background: var(--c-storm); border-color: var(--c-storm); }
.c-dusk { background: var(--c-dusk); border-color: var(--c-dusk); }
.c-blossom { background: var(--c-blossom); border-color: var(--c-blossom); }
.c-clay { background: var(--c-clay); border-color: var(--c-clay); }
.c-chalk { background: var(--c-chalk); border-color: var(--c-chalk); }
.card.c-default.selected, .card.selected { border-color: var(--text); }

/* editor (shared by composer + modal) */
.ed-head { display: flex; align-items: flex-start; padding: 12px 8px 0 16px; }
.ed-title { flex: 1; border: 0; background: none; outline: none; resize: none; font-size: 18px; font-weight: 500; line-height: 24px; padding: 6px 0; overflow: hidden; font-family: inherit; }
.ed-title::placeholder, .ed-body:empty::before, .li-text.placeholder { color: var(--text-2); }
.ed-pin { flex: none; }
.ed-body { min-height: 46px; padding: 8px 16px 12px; font-size: 14.5px; line-height: 22px; outline: none; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.ed-body:empty::before { content: attr(data-placeholder); pointer-events: none; }
.ed-body[contenteditable="false"] { cursor: default; }
.ed-chips { padding: 0 16px; }
.ed-chips .chips { padding-top: 8px; }
.ed-meta { text-align: right; font-size: 12px; color: var(--text-2); padding: 8px 16px 4px; }
.ed-toolbar { display: flex; align-items: center; padding: 4px 8px; position: sticky; bottom: 0; background: inherit; border-radius: 0 0 8px 8px; }
.ed-tools { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; overflow-x: auto; min-width: 0; }
.ed-toolbar .ib { width: 36px; height: 36px; }
.ed-toolbar .ib .ms { font-size: 20px; }
.ed-toolbar .btn { margin-left: auto; flex: none; }
.ed-banner { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 13px; background: rgba(0,0,0,.05); }
.ed-banner .btn { height: 30px; padding: 0 10px; }
.ed-banner .btn:first-of-type { margin-left: auto; }
.fmt-bar { display: flex; align-items: center; gap: 2px; padding: 4px 12px; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fmt { min-width: 36px; height: 36px; border-radius: 50%; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.fmt:hover { background: var(--hover); }
.fmt.b { font-weight: 800; } .fmt.i { font-style: italic; } .fmt.u { text-decoration: underline; }
.fmt-sep { width: 1px; height: 24px; background: var(--border); margin: 0 6px; }
.fmt-bar .ib.small { margin-left: auto; }

/* checklist editor */
.ed-list { padding: 4px 8px 8px 8px; }
.li { display: flex; align-items: flex-start; gap: 2px; padding: 2px 0; border-radius: 4px; position: relative; }
.li:hover { background: rgba(0,0,0,.03); }
.li .handle { width: 22px; flex: none; color: var(--icon); opacity: 0; cursor: grab; display: inline-flex; justify-content: center; padding-top: 5px; }
.li .handle .ms { font-size: 18px; }
.li:hover .handle { opacity: 1; }
.li .cb { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--icon); flex: none; }
.li .cb .ms { font-size: 20px; }
.li-text { flex: 1; min-height: 28px; padding: 4px 6px; outline: none; font-size: 14.5px; line-height: 20px; word-wrap: break-word; overflow-wrap: anywhere; }
.li.done .li-text { color: var(--text-2); text-decoration: line-through; }
.li.indent { padding-left: 28px; }
.li-del { opacity: 0; }
.li:hover .li-del, .li:focus-within .li-del { opacity: 1; }
.li.add { cursor: text; color: var(--text-2); }
.li-checked-head { display: flex; align-items: center; gap: 6px; padding: 8px 6px 4px; color: var(--text-2); font-size: 13px; cursor: pointer; border-top: 1px solid var(--border); margin-top: 6px; }
.li-checked.collapsed { display: none; }

/* modal editor */
.modal-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; overflow: hidden; }
.modal { width: 600px; max-width: 100%; max-height: calc(100vh - 120px); border-radius: 8px; box-shadow: var(--shadow-3); display: flex; flex-direction: column; animation: pop .18s ease-out; border: 1px solid transparent; }
.modal.c-default { border-color: var(--border); }
@keyframes pop { from { transform: scale(.96); opacity: .6; } to { transform: none; opacity: 1; } }
.ed-scroll { overflow-y: auto; flex: 1; min-height: 0; }
.modal .ed-body { min-height: 80px; }

/* popovers & menus */
#popover .pop { position: fixed; z-index: 60; background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-2); min-width: 160px; animation: fade .12s; border: 1px solid transparent; }
:root[data-theme="dark"] #popover .pop { border-color: var(--border); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
#popover .pop.sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; border-radius: 16px 16px 0 0; max-height: 80vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
.menu { padding: 8px 0; min-width: 220px; }
.menu-title { padding: 8px 16px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 4px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 16px; height: 40px; text-align: left; color: var(--text); font-size: 14px; }
.menu-item:hover { background: var(--hover); }
.menu-item .ms { font-size: 20px; color: var(--icon); }
.menu-item .menu-right { margin-left: auto; color: var(--text-2); font-size: 13px; }
.menu-sep { height: 1px; background: var(--border); margin: 6px 0; }
.menu-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px 4px; }
.menu.pick { padding: 8px 12px; width: 320px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px; font-size: 14px; }
.field input, .field select { height: 34px; border: 1px solid var(--border); border-radius: 4px; padding: 0 8px; background: var(--surface); min-width: 150px; }
.field.inline input { min-width: 70px; width: 70px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 8px; }
.custom-rep { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.weekdays { display: flex; gap: 4px; padding: 4px; }
.wd { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); font-size: 12px; font-weight: 500; }
.wd.on { background: var(--link); color: #fff; border-color: var(--link); }
.palette { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; max-width: 500px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--icon); }
.swatch:hover { border-color: var(--text); }
.swatch.selected { border-color: var(--select-ring); }
.swatch .check { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--select-ring); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.swatch .check .ms { font-size: 12px; }
.swatch .ms { font-size: 20px; }
.swatch.big { width: 44px; height: 44px; }
.menu.labels { width: 260px; }
.label-search { display: flex; align-items: center; padding: 4px 16px 8px; gap: 8px; }
.label-search input { flex: 1; border: 0; outline: none; background: none; font-size: 14px; }
.label-search .ms { color: var(--icon); font-size: 20px; }
.label-list { max-height: 260px; overflow-y: auto; }
.label-row { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 36px; cursor: pointer; font-size: 14px; }
.label-row:hover { background: var(--hover); }
.label-row input { width: 18px; height: 18px; accent-color: var(--text); margin: 0; }
.menu-item.create { color: var(--text); font-weight: 500; }
.badge { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 1px 6px; border-radius: 8px; background: var(--nav-active); color: var(--text); vertical-align: middle; }
.badge.off { background: var(--hover); color: var(--text-2); }

/* dialogs */
.dlg-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg { background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-3); width: 360px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 24px; animation: pop .15s; }
.dlg.wide { width: 640px; }
.dlg-title { font-size: 18px; font-weight: 500; margin-bottom: 12px; }
.dlg p { margin: 8px 0; line-height: 20px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.err { color: #d93025; font-size: 13px; min-height: 18px; }
.small { font-size: 12px; color: var(--text-2); }
.warn { color: #b06000; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
code { background: var(--hover); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.recovery-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: 1px; padding: 12px; background: var(--hover); border-radius: 6px; text-align: center; user-select: all; word-break: break-all; }
.lic { padding-left: 18px; line-height: 22px; font-size: 13px; }
.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr img { border-radius: 8px; background: #fff; padding: 6px; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form input[type=text], .form input[type=password], .form input[type=number], .form select { height: 40px; border: 1px solid var(--border); border-radius: 4px; padding: 0 12px; background: var(--surface); outline: none; }
.form input:focus { border-color: var(--link); }
.form .btn.primary { align-self: flex-start; }
.form .btn.link { align-self: flex-start; padding: 0; }
.inline-form { flex-direction: row; flex-wrap: wrap; align-items: center; }
.inline-form input { flex: 1; min-width: 140px; }
.settings .sec { color: var(--link); font-size: 15px; font-weight: 500; margin: 18px 0 8px; }
.settings .sec:first-child { margin-top: 4px; }
.toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 14px; gap: 12px; }
.toggle input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--link); margin: 0; }
.toggle select, .toggle input[type=time], .toggle input[type=number] { height: 32px; border: 1px solid var(--border); border-radius: 4px; padding: 0 8px; background: var(--surface); }
.toggle.small { padding: 0; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.tbl th { text-align: left; color: var(--text-2); font-weight: 500; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); }
.tbl td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl td.key { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text-2); white-space: nowrap; }
.shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.versions { display: flex; gap: 16px; min-height: 200px; }
.ver-list { width: 200px; flex: none; display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.ver { text-align: left; padding: 8px 10px; border-radius: 4px; font-size: 13px; }
.ver:hover { background: var(--hover); }
.ver.on { background: var(--nav-active); }
.ver-preview { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; max-height: 50vh; overflow-y: auto; }
.label-new { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; border-bottom: 1px solid var(--border); }
.label-new .ms { color: var(--icon); }
.label-new input { flex: 1; border: 0; border-bottom: 1px solid var(--link); outline: none; background: none; padding: 6px 0; font-size: 14px; }
.label-edit-list { max-height: 50vh; overflow-y: auto; }
.label-edit-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.label-edit-row input { flex: 1; border: 0; border-bottom: 1px solid transparent; outline: none; background: none; padding: 6px 0; font-size: 14px; min-width: 0; }
.label-edit-row input:focus { border-bottom-color: var(--link); }
.label-edit-row .del:hover .ms::before { content: "delete"; }
.label-edit-row .del:hover .ms { font-size: 0; }
.label-edit-row .del:hover .ms::before { font-size: 20px; }

/* snackbar */
#snackbar .snack { position: fixed; left: 24px; bottom: 24px; z-index: 80; background: var(--snackbar); color: #fff; min-width: 300px; max-width: calc(100vw - 48px); padding: 8px 8px 8px 16px; border-radius: 6px; box-shadow: var(--shadow-2); display: flex; align-items: center; gap: 8px; font-size: 14px; animation: up .2s ease-out; }
:root[data-theme="dark"] #snackbar .snack { color: #202124; }
@keyframes up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.snack-text { flex: 1; }
.snack-act { color: var(--accent); font-weight: 600; padding: 6px 8px; border-radius: 4px; text-transform: uppercase; font-size: 13px; }
:root[data-theme="dark"] .snack-act { color: #7a5b00; }
#snackbar .snack .ib { color: inherit; }
.tip { max-width: 600px; margin: 0 auto 16px; background: var(--link); color: #fff; border-radius: 8px; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.tip span { flex: 1; min-width: 200px; }
.tip-btn { color: #fff; background: rgba(255,255,255,.15); height: 32px; }
.tip-btn:hover { background: rgba(255,255,255,.3); }

/* empty states, trash notice, search landing */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-2); font-size: 22px; padding: 80px 16px; text-align: center; }
.empty .ms { font-size: 120px; color: var(--border); }
.trash-notice { display: flex; align-items: center; justify-content: center; gap: 16px; font-style: italic; font-size: 17px; color: var(--text); padding: 8px 0 24px; flex-wrap: wrap; }
.filter-row { display: flex; justify-content: center; padding-bottom: 16px; }
.landing { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.landing-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; }
.landing-title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: var(--text-2); margin-bottom: 10px; }
.tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.tile { width: 120px; height: 100px; border-radius: 8px; background: var(--hover); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text); font-size: 13px; }
.tile:hover { filter: brightness(.95); }
.tile.blue { background: var(--link); color: #fff; }
.tile .ms { font-size: 32px; }

/* lightbox & recorder */
.lb { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 90; display: flex; flex-direction: column; color: #fff; }
.lb-top { display: flex; align-items: center; gap: 4px; padding: 8px 12px; }
.lb-top .ib { color: #fff; }
.lb-top .ib:hover { background: rgba(255,255,255,.15); }
.lb-name { font-size: 14px; margin-left: 8px; opacity: .85; }
.lb-spacer { flex: 1; }
.lb-body { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 8px; }
.lb-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; color: #fff; background: rgba(255,255,255,.12); }
.lb-nav.prev { left: 16px; } .lb-nav.next { right: 16px; }
.lb.rec { align-items: center; justify-content: center; }
.rec-box { background: var(--surface); color: var(--text); border-radius: 12px; padding: 32px; width: 320px; max-width: 90vw; text-align: center; }
.rec-mic { width: 96px; height: 96px; border-radius: 50%; background: #d93025; color: #fff; display: inline-flex; align-items: center; justify-content: center; animation: pulse 1.2s ease-in-out infinite; }
.rec-mic .ms { font-size: 48px; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,48,37,.5); } 50% { box-shadow: 0 0 0 20px rgba(217,48,37,0); } }
.rec-title { font-size: 18px; margin-top: 16px; }
.rec-time { font-size: 32px; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.rec-box .dlg-actions { justify-content: center; }

/* drawing */
.draw { position: fixed; inset: 0; z-index: 85; background: #fafafa; display: flex; flex-direction: column; color: #202124; }
.draw-bar { height: 56px; background: #fff; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 2px; padding: 0 8px; flex: none; overflow-x: auto; }
.draw-bar .ib { color: #5f6368; }
.draw-bar .ib.tool.on { background: #e8f0fe; color: #1a73e8; }
.tip-color { position: absolute; bottom: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; }
.draw-menu { background: #fff; border-bottom: 1px solid #e0e0e0; padding: 8px 12px; flex: none; }
.draw-colors { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.dc { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.dc.on { border-color: #1a73e8; }
.draw-sizes { display: flex; gap: 6px; margin-top: 8px; }
.ds { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ds.on { background: #e8f0fe; }
.ds .dot { background: #202124; border-radius: 50%; display: block; }
.draw-bgs { display: flex; gap: 12px; }
.bg-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.bg-opt.on { color: #1a73e8; }
.bg-prev { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #e0e0e0; background-color: #fafafa; }
.bg-opt.on .bg-prev { border-color: #1a73e8; }
.draw-canvas-wrap { flex: 1; overflow: auto; position: relative; background-color: #fafafa; touch-action: none; }
.draw-canvas-wrap canvas { display: block; touch-action: none; cursor: crosshair; }
.bg-grid { background-image: linear-gradient(#e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px); background-size: 24px 24px; }
.bg-dots { background-image: radial-gradient(#c0c0c0 1.2px, transparent 1.4px); background-size: 20px 20px; }
.bg-lines { background-image: linear-gradient(#e0e0e0 1px, transparent 1px); background-size: 100% 28px; }

/* auth */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-card { width: 400px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px; }
.auth-logo { display: flex; align-items: center; gap: 10px; font-size: 24px; color: var(--text-2); margin-bottom: 16px; }
.auth-logo img { width: 40px; height: 40px; }
.auth h1 { font-size: 22px; font-weight: 500; margin: 0 0 8px; }
.auth .form { margin-top: 12px; }
.auth .form .btn.primary { align-self: stretch; justify-content: center; height: 40px; }

/* list view */
.content.listview .grid { max-width: 100%; }

/* responsive */
@media (max-width: 900px) {
  .body:not(.sidebar-collapsed) .main { margin-left: var(--rail-w); }
  .body:not(.sidebar-collapsed) .sidebar { width: var(--rail-w); }
  .body:not(.sidebar-collapsed) .sidebar:hover { width: var(--sidebar-w); box-shadow: var(--shadow-2); }
  .body:not(.sidebar-collapsed) .sidebar .nav-item span { opacity: 0; }
  .body:not(.sidebar-collapsed) .sidebar:hover .nav-item span { opacity: 1; }
}
@media (max-width: 700px) {
  :root { --topbar-h: 56px; }
  .topbar { padding: 0 4px; }
  .brand-name { display: none; }
  .brand { padding: 0 4px; }
  .topbar .ib { width: 44px; height: 44px; }
  .tb-search { margin: 0 4px; height: 40px; min-width: 0; }
  .tb-left, .tb-right { flex: none; }
  .avatar { margin: 0 4px; }
  .tb-right [data-act="toggle-view"], .tb-right [data-act="menu-settings"] { display: none; }
  .main { margin-left: 0 !important; padding: 12px 8px 140px; }
  .sidebar { width: var(--sidebar-w) !important; transform: translateX(-100%); transition: transform .2s; box-shadow: none; top: 0; z-index: 45; padding-top: 16px; }
  .body.drawer-open .sidebar { transform: none; box-shadow: var(--shadow-3); }
  .body.drawer-open .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 44; }
  .sidebar .nav-item span { opacity: 1 !important; }
  .section-title { margin-top: 16px; }
  .composer-wrap { margin-bottom: 8px; }
  .card-tools { opacity: 1; }
  .card .pin { opacity: 1; }
  .card > .card-title, .card > .card-body, .card > .card-list, .card > .chips { margin-left: 12px; margin-right: 12px; }
  .card-body { max-height: 240px; }
  .modal-scrim { padding: 0; }
  .modal { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .ed-toolbar { padding-bottom: env(safe-area-inset-bottom); }
  .mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; background: var(--surface); border-top: 1px solid var(--border); align-items: center; padding: 0 8px; gap: 4px; z-index: 25; padding-bottom: env(safe-area-inset-bottom); }
  .mobilebar .ib { width: 48px; height: 48px; }
  .fab { position: absolute; right: 16px; bottom: 24px; width: 64px; height: 64px; border-radius: 20px; background: var(--nav-active); color: var(--text); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-2); }
  :root[data-theme="dark"] .fab { background: #3c3f43; }
  .fab .ms { font-size: 36px; }
  body.modal-open .mobilebar { display: none; }
  .dlg { padding: 16px; }
  .shortcuts { grid-template-columns: 1fr; }
  .versions { flex-direction: column; }
  .ver-list { width: 100%; flex-direction: row; overflow-x: auto; }
  .tile { width: calc(50% - 6px); }
  #snackbar .snack { left: 8px; right: 8px; bottom: 72px; min-width: 0; }
  .lb-nav { width: 44px; height: 44px; }
}