/* Glitnir (web): design rounds 1 + 2. Yaru orange and aubergine on Ubuntu Sans.
   Header and sidebar float over the canvas, so the page scrolls under real glass.
   Light and dark both follow the system preference. */

@font-face { font-family: "Ubuntu Sans"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/ubuntu-sans-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ubuntu Sans"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/ubuntu-sans-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Ubuntu Sans"; font-weight: 500; font-display: swap; src: url(../vendor/fonts/ubuntu-sans-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ubuntu Sans"; font-weight: 500; font-display: swap; src: url(../vendor/fonts/ubuntu-sans-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Ubuntu Sans"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/ubuntu-sans-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ubuntu Sans"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/ubuntu-sans-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Ubuntu Sans"; font-weight: 700; font-display: swap; src: url(../vendor/fonts/ubuntu-sans-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ubuntu Sans"; font-weight: 700; font-display: swap; src: url(../vendor/fonts/ubuntu-sans-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Ubuntu Sans Mono"; font-weight: 500; font-display: swap; src: url(../vendor/fonts/ubuntu-sans-mono-latin-500.woff2) format("woff2"); }

/* ------------------------------------------------------------ tokens */
:root {
  color-scheme: light;
  --orange: #E95420; --orange-hover: #D9481A; --orange-text: #C7431A; --orange-text-2: #B83C12;
  --on-dark-accent: #FFB08F; --green: #0E8420;
  --window: #FAF7F5; --canvas: #EEE9E6;
  --wash-orange: rgba(233,84,32,.18); --wash-aub: rgba(119,33,111,.16);
  --header: rgba(250,247,245,.72); --sidebar: rgba(250,247,245,.6);
  --glass: rgba(255,255,255,.62); --glass-inset: rgba(255,255,255,.6); --glass-shadow: 0 12px 32px rgba(44,0,30,.2);
  --hairline: rgba(60,20,40,.1); --hairline-2: rgba(60,20,40,.12);
  --neutral: rgba(255,255,255,.7); --tint-1: rgba(60,20,40,.06); --tint-2: rgba(60,20,40,.08); --tint-3: rgba(60,20,40,.1); --tint-4: rgba(60,20,40,.14);
  --fg: #2C001E; --icon: #3D2633; --fg-2: #5E4A55; --muted: #6E5A64; --tertiary: #7A6E74; --faint: #8A7C84; --disabled: #A99AA2;
  --focus: #E95420; --surface: #FAF7F5; --card: #ffffff; --input: #ffffff;
  --skeleton-1: #EFE8E4; --skeleton-2: #F4EEEB;
  --header-h: 52px; --side-w: 188px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --orange-text: #FF8A5C; --orange-text-2: #FF8A5C; --green: #7EE2A0;
    --window: #1F161B; --canvas: #171014;
    --wash-orange: rgba(233,84,32,.2); --wash-aub: rgba(119,33,111,.3);
    --header: rgba(36,24,31,.74); --sidebar: rgba(36,24,31,.62);
    --glass: rgba(48,32,42,.62); --glass-inset: rgba(255,255,255,.08); --glass-shadow: 0 12px 32px rgba(0,0,0,.45);
    --hairline: rgba(255,255,255,.08); --hairline-2: rgba(255,255,255,.12);
    --neutral: rgba(255,255,255,.08); --tint-1: rgba(255,255,255,.06); --tint-2: rgba(255,255,255,.08); --tint-3: rgba(255,255,255,.1); --tint-4: rgba(255,255,255,.14);
    --fg: #F4EDF0; --icon: #E6DBE0; --fg-2: #D3C6CC; --muted: #B9AAB2; --tertiary: #A3949C; --faint: #94858D; --disabled: #6F6168;
    --focus: #FF8A5C; --surface: #1F161B; --card: #2A1F25; --input: #2A1F25;
    --skeleton-1: #EFE8E4; --skeleton-2: #F4EEEB;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 400 14px/1.35 "Ubuntu Sans", "Ubuntu", system-ui, sans-serif;
  color: var(--fg); background: var(--window);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button, [role="button"], .item { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
input { font: inherit; color: var(--fg); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
kbd { font: 500 12px "Ubuntu Sans Mono", ui-monospace, monospace; background: var(--tint-2); border-radius: 4px; padding: 1px 5px; color: var(--fg-2); }
[hidden] { display: none !important; }

/* focus rings: keyboard only (2f) */
:focus { outline: none; }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus) !important; }
input:focus-visible { box-shadow: 0 0 0 2px var(--focus) !important; }

.app { position: relative; height: 100%; }
main { position: absolute; inset: 0; }

/* ------------------------------------------------------------ header (glass, floating) */
.hb {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  height: var(--header-h); padding: 0 10px; display: flex; align-items: center; gap: 8px;
  background: var(--header); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
}
@media (display-mode: window-controls-overlay) { /* 2j: header is the title bar */
  .hb {
    padding-left: max(10px, calc(env(titlebar-area-x, 0px) + 8px));
    padding-right: max(10px, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 8px));
  }
  .hb .title-block { -webkit-app-region: drag; app-region: drag; }
  .hb button { -webkit-app-region: no-drag; app-region: no-drag; }
}
.hb-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--icon); transition: background .1s; }
.hb-icon:hover { background: var(--tint-2); }
.hb-icon[aria-pressed="true"] { background: var(--tint-3); }
.neutral-btn, .open-btn {
  height: 34px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--neutral); box-shadow: 0 0 0 1px var(--hairline); font-weight: 500; color: var(--fg); transition: background .1s;
}
.open-btn svg { width: 17px; height: 17px; }
.neutral-btn:hover, .open-btn:hover { background: var(--card); }
.ghost-btn { height: 34px; padding: 0 12px; border-radius: 8px; font-weight: 500; color: var(--fg); }
.ghost-btn:hover { background: var(--tint-2); }
.title-block { flex: 1; min-width: 0; text-align: center; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subtitle { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.subtitle:empty { display: none; }
.subtitle.saved { color: var(--green); }
.subtitle svg { width: 12px; height: 12px; stroke-width: 2.4; }
.save-btn {
  height: 34px; padding: 0 14px; border-radius: 8px; background: var(--orange); color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(233,84,32,.35); transition: background .1s, box-shadow .1s, color .1s;
  white-space: nowrap;
}
.save-btn:hover:not(:disabled) { background: var(--orange-hover); }
.save-btn:disabled { background: rgba(233,84,32,.35); box-shadow: none; }
.save-btn.saved { background: var(--neutral); color: var(--fg); box-shadow: 0 0 0 1px var(--hairline); }
.save-btn.saved:hover:not(:disabled) { background: var(--card); }
.save-short { display: none; }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--orange); transition: width .2s; }

/* ------------------------------------------------------------ canvas + wash */
.doc { position: absolute; inset: 0; }
.stage, .empty { position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(700px 420px at 92% 8%, var(--wash-orange), transparent 70%),
    radial-gradient(640px 480px at 18% 100%, var(--wash-aub), transparent 70%),
    var(--canvas);
}
.canvas { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.canvas-inner { min-width: max-content; padding: var(--header-h) 0 0 var(--side-w); transition: padding .2s ease-out; }
.doc.no-sidebar .canvas-inner { padding-left: 0; }
.page-box {
  position: relative; margin: 28px 24px 110px; margin-inline: auto; background: #fff; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(44,0,30,.12), 0 12px 40px rgba(44,0,30,.14);
}
.page-wrap { padding: 0 24px; display: flex; justify-content: center; }
.page-box canvas { display: block; width: 100%; height: 100%; border-radius: 3px; }
.page-box .skeleton { position: absolute; inset: 0; padding: 9% 12%; display: flex; flex-direction: column; gap: 14px; }
.skeleton i { display: block; height: 12px; border-radius: 4px; background: var(--skeleton-2); }
.skeleton i:first-child { width: 42%; height: 16px; background: var(--skeleton-1); margin-bottom: 8px; }
.skeleton i:nth-child(3) { width: 90%; } .skeleton i:nth-child(4) { width: 76%; }
.items { position: absolute; inset: 0; }
.canvas.placing .items { cursor: crosshair; }

/* ------------------------------------------------------------ sidebar (glass, floating) */
.sidebar {
  position: absolute; top: var(--header-h); bottom: 0; left: 0; width: var(--side-w); z-index: 20;
  overflow-y: auto; padding: 14px 12px; background: var(--sidebar);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid var(--hairline); transition: transform .2s ease-out;
}
.doc.no-sidebar .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .2s ease-out, visibility 0s .2s; }
.pages-label { font-weight: 600; font-size: 12px; letter-spacing: .04em; color: var(--muted); margin-bottom: 12px; }
.thumbs { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.thumb { display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 6px; }
.thumb canvas {
  width: 92px; background: rgba(255,255,255,.45); border-radius: 5px; display: block;
  box-shadow: 0 0 0 1px var(--hairline); transition: box-shadow .1s, background .2s;
}
.thumb.rendered canvas { background: #fff; box-shadow: 0 0 0 1px rgba(60,20,40,.12), 0 2px 6px rgba(44,0,30,.08); }
.thumb span { font-size: 12px; font-weight: 500; color: var(--muted); }
.thumb.current canvas { box-shadow: 0 0 0 2.5px var(--orange), 0 4px 12px rgba(44,0,30,.15); }
.thumb.current span { font-weight: 700; color: var(--orange-text); }
.thumb:focus-visible { box-shadow: none !important; }
.thumb:focus-visible canvas { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
.thumb.current:focus-visible canvas { box-shadow: 0 0 0 2.5px var(--orange), 0 0 0 5px var(--surface), 0 0 0 7px #2C001E; }
.scrim { position: absolute; inset: 0; z-index: 19; background: rgba(44,0,30,.3); }

/* ------------------------------------------------------------ placed items */
.item { position: absolute; touch-action: none; cursor: move; user-select: none; -webkit-user-select: none; }
.item img { width: 100%; height: 100%; display: block; pointer-events: none; }
.item .txt { position: absolute; left: 0; top: 0; white-space: pre; font-family: Helvetica, Arial, "Liberation Sans", sans-serif; line-height: 1; pointer-events: none; }
.sel-frame { position: absolute; inset: -7px; border: 1.5px solid var(--orange); border-radius: 6px; background: rgba(233,84,32,.05); pointer-events: none; }
.handle { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid var(--orange); border-radius: 2px; pointer-events: auto; touch-action: none; }
.handle::after { content: ""; position: absolute; inset: -8px; } /* bigger hit area */
.handle.nw { left: -4.75px; top: -4.75px; cursor: nwse-resize; }
.handle.ne { right: -4.75px; top: -4.75px; cursor: nesw-resize; }
.handle.sw { left: -4.75px; bottom: -4.75px; cursor: nesw-resize; }
.handle.se { right: -4.75px; bottom: -4.75px; cursor: nwse-resize; }
.sel-chip {
  position: absolute; right: -7px; bottom: calc(100% + 16px); display: flex; align-items: center; padding: 3px;
  border-radius: 8px; background: rgba(44,0,30,.86); backdrop-filter: blur(12px); white-space: nowrap;
  font-size: 11px; color: #fff; pointer-events: auto; cursor: default;
}
.sel-chip.below { bottom: auto; top: calc(100% + 16px); }
.sel-chip span { padding: 3px 8px; }
.sel-chip i { width: 1px; align-self: stretch; margin: 2px 0; background: rgba(255,255,255,.15); }
.sel-chip button { padding: 3px 8px; color: var(--on-dark-accent); border-radius: 5px; }
.sel-chip button:hover { background: rgba(255,255,255,.1); }

/* ------------------------------------------------------------ hint chip + toasts (2g) */
.hint-chip {
  position: absolute; top: calc(var(--header-h) + 14px); right: 14px; z-index: 25; display: flex; align-items: center; gap: 5px;
  padding: 5px 6px 5px 12px; border-radius: 10px; font-size: 12px; color: var(--fg-2);
  background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-inset), 0 0 0 .5px rgba(44,0,30,.12), 0 4px 14px rgba(44,0,30,.1);
}
.chip-close { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: var(--tertiary); }
.chip-close svg { width: 14px; height: 14px; }
.chip-close:hover { background: var(--tint-2); }
.toasts { position: absolute; top: calc(var(--header-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 40; pointer-events: none; }
.doc:not(.no-sidebar) ~ .toasts, .app.has-sidebar .toasts { left: calc(var(--side-w) + (100% - var(--side-w)) / 2); }
.toast {
  height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; border-radius: 20px;
  background: rgba(44,0,30,.92); color: #fff; font-weight: 500; font-size: 14px; white-space: nowrap; pointer-events: auto;
  box-shadow: 0 8px 24px rgba(44,0,30,.3); animation: pop-in .15s ease-out;
}
.toast.has-icon { padding-left: 14px; }
.toast .t-icon { width: 16px; height: 16px; color: #7EE2A0; stroke-width: 2.4; }
.toast .t-badge { width: 16px; height: 16px; border-radius: 50%; background: #FF8A5C; color: #2C001E; font: 700 11px/16px "Ubuntu Sans", sans-serif; text-align: center; flex: none; }
.toast.error { box-shadow: inset 0 0 0 1px rgba(255,138,92,.5), 0 8px 24px rgba(44,0,30,.3); }
.toast .t-action { height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(255,255,255,.1); color: var(--on-dark-accent); font-weight: 600; }
.toast .t-action:hover { background: rgba(255,255,255,.16); }
.toast .t-close { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; color: rgba(255,255,255,.75); }
.toast .t-close svg { width: 14px; height: 14px; }
.toast .t-close:hover { background: rgba(255,255,255,.12); }
.toast:not(:has(.t-action)):not(:has(.t-close)) { padding-right: 16px; }

/* ------------------------------------------------------------ palette */
.palette {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 16px; white-space: nowrap;
  background: var(--glass); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-inset), 0 0 0 .5px rgba(44,0,30,.2), var(--glass-shadow);
  transition: left .2s ease-out;
}
.doc:not(.no-sidebar) .palette { left: calc(var(--side-w) + (100% - var(--side-w)) / 2); }
.tool { height: 40px; padding: 0 12px; border-radius: 11px; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--icon); transition: background .1s, color .1s; }
.tool.icon-only { width: 40px; padding: 0; justify-content: center; }
.tool:hover { background: var(--tint-2); }
.tool.active, .tool.active:hover { background: var(--orange); color: #fff; }
.palette-sep { width: 1px; height: 24px; background: var(--tint-4); margin: 0 6px; }
.pal-btn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--icon); font-size: 18px; }
.pal-btn:hover:not(:disabled) { background: var(--tint-2); }
.pal-btn:disabled { color: var(--disabled); }
.zoom-label { font: 500 13px "Ubuntu Sans Mono", ui-monospace, monospace; width: 48px; text-align: center; }
.page-label { font-weight: 500; font-size: 13px; min-width: 44px; text-align: center; }

/* ------------------------------------------------------------ glass surfaces: popovers + menu */
.glass {
  background: var(--glass); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-inset), 0 0 0 .5px rgba(44,0,30,.2), 0 18px 40px rgba(44,0,30,.22); border-radius: 16px;
}
@media (prefers-color-scheme: dark) { .glass { box-shadow: inset 0 0 0 1px var(--glass-inset), var(--glass-shadow); } }
.popover { position: absolute; bottom: 86px; padding: 10px; z-index: 28; animation: pop-in .15s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.toast { animation-name: toast-in; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#pop-sig { width: 280px; } #pop-date { width: 220px; } #pop-text { width: 300px; }
.grabber { display: none; }
.pop-header { font-weight: 600; font-size: 12px; color: var(--muted); margin: 2px 4px 8px; }
.pop-sep { height: 1px; background: var(--hairline); margin: 8px 0; }
.pop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pop-btn { height: 32px; border-radius: 8px; background: var(--tint-1); font-weight: 500; font-size: 13px; }
.pop-btn:hover { background: var(--tint-4); }
.sig-list { display: flex; flex-direction: column; gap: 4px; }
.sig-list .empty-note { font-size: 11px; color: var(--tertiary); text-align: center; padding: 6px; }
.sig-row { position: relative; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 6px 0 12px; border-radius: 10px; cursor: pointer; }
.sig-row:hover { background: var(--tint-1); }
.sig-row.selected { background: var(--card); box-shadow: 0 0 0 2px var(--orange); }
.sig-row.selected:focus-visible { box-shadow: 0 0 0 2px var(--orange), 0 0 0 4px var(--surface), 0 0 0 6px var(--focus) !important; }
.sig-row img { width: 128px; height: 36px; object-fit: contain; object-position: left center; flex: none; }
.sig-row .label { flex: 1; min-width: 0; text-align: right; font-size: 11px; color: var(--tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-btn { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--tertiary); flex: none; }
.row-btn svg { width: 15px; height: 15px; }
.row-btn:hover { background: var(--tint-1); color: var(--fg); }
.sig-row .row-btn { display: none; }
.sig-row:hover .row-btn:not(.more), .sig-row:focus-within .row-btn:not(.more) { display: grid; }
.sig-row .more { display: none; }
.sig-row.editing .label, .sig-row.editing .row-btn { display: none !important; }
.rename-input { flex: 1; min-width: 0; height: 30px; border: 0; border-radius: 7px; padding: 0 8px; background: var(--input); box-shadow: 0 0 0 2px var(--orange) !important; font-size: 13px; }
.rename-ok { width: 28px; height: 28px; border-radius: 7px; background: var(--orange); color: #fff; display: grid; place-items: center; flex: none; }
.rename-ok svg { width: 15px; height: 15px; stroke-width: 2.4; }
.fmt-row { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; }
.fmt-row:hover { background: var(--tint-1); }
.fmt-row.selected { background: rgba(233,84,32,.12); color: var(--orange-text-2); font-weight: 500; }
.text-entry {
  width: 100%; height: 36px; border-radius: 8px; border: 0; padding: 0 10px; background: var(--input);
  box-shadow: 0 0 0 1px var(--hairline-2); outline: none;
}
.text-entry:focus { box-shadow: 0 0 0 2px var(--focus) !important; }

/* 2d: menu */
.menu { position: fixed; top: calc(var(--header-h) - 4px); right: 52px; width: 250px; padding: 6px; border-radius: 14px; z-index: 50; animation: pop-in .15s ease-out; }
.menu-label { font-weight: 600; font-size: 12px; color: var(--muted); padding: 8px 10px 4px 34px; }
.menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; text-align: left; }
.menu button:hover:not(:disabled) { background: var(--tint-1); }
.menu button:disabled { color: var(--disabled); }
.menu button > svg { width: 16px; height: 16px; visibility: hidden; color: var(--orange); stroke-width: 2.2; }
.menu button[aria-checked="true"] > svg { visibility: visible; }
.menu .m-label { flex: 1; }
.menu .m-key { font: 500 12px "Ubuntu Sans Mono", ui-monospace, monospace; color: var(--muted); }
.menu button:disabled .m-key { color: var(--disabled); }
.menu .narrow-only { display: none; }

/* ------------------------------------------------------------ empty state + file errors (2h) */
.empty { position: absolute; inset: 0; padding: calc(var(--header-h) + 32px) 32px 32px; display: flex; }
.dropzone {
  flex: 1; border: 1.5px dashed rgba(60,20,40,.22); border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
  transition: background .15s, border-color .15s;
}
@media (prefers-color-scheme: dark) { .dropzone { border-color: rgba(255,255,255,.2); } }
.dropzone.drag-over, body.drag-over .dropzone { border-color: var(--orange); background: rgba(233,84,32,.06); }
.dropzone h1 { margin: 0; font-size: 22px; font-weight: 600; }
.dropzone p { margin: 0; color: var(--muted); }
.dropzone .row { display: flex; align-items: center; gap: 10px; }
.dropzone .row kbd { border-radius: 6px; padding: 3px 7px; background: var(--tint-2); }
.dropzone .privacy { font-size: 12px; color: var(--tertiary); margin-top: 8px; }
.file-error { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.file-error h2 { margin: 4px 0 0; font-size: 17px; font-weight: 600; }
.badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.badge.warn { background: rgba(233,84,32,.14); color: var(--orange-text); }
.badge.lock { background: rgba(119,33,111,.14); color: #77216F; }
@media (prefers-color-scheme: dark) { .badge.lock { color: #D9A3D2; } }
.badge svg { width: 18px; height: 18px; }
.unlock { display: flex; gap: 8px; margin-top: 4px; }
.unlock .text-entry { width: 200px; }
.unlock-error { font-size: 12px; color: var(--orange-text); min-height: 16px; }
.choose-btn {
  height: 38px; padding: 0 18px; border-radius: 9px; background: var(--orange); color: #fff; font-weight: 600;
  box-shadow: 0 2px 10px rgba(233,84,32,.35); white-space: nowrap;
}
.choose-btn:hover { background: var(--orange-hover); }
.unlock .choose-btn { height: 36px; box-shadow: none; }

/* ------------------------------------------------------------ dialogs */
dialog { border: 0; padding: 0; border-radius: 16px; color: var(--fg); background: var(--window); box-shadow: 0 28px 70px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(44,0,30,.32); }
/* 2e draw */
.draw-dialog { width: min(600px, 96vw); }
.draw-dialog[open] { display: flex; flex-direction: column; }
.draw-dialog .hb { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.draw-pad { position: relative; margin: 20px 20px 0; height: 240px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(60,20,40,.12); overflow: hidden; }
.draw-pad canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.draw-bar { display: flex; align-items: center; gap: 10px; padding: 16px 20px 20px; }
.draw-bar label { font-weight: 600; font-size: 13px; }
.draw-bar .text-entry { width: 220px; }
.draw-bar .hint { font-size: 12px; color: var(--faint); }
/* 2d about */
.about-dialog { width: min(360px, 92vw); padding: 28px 24px 20px; text-align: center; }
.about-dialog h2 { margin: 12px 0 0; font-size: 22px; font-weight: 700; }
.about-dialog .version { margin: 2px 0 12px; color: var(--muted); font-size: 13px; }
.about-dialog p.desc { margin: 0 0 18px; line-height: 1.45; }
.list-card { background: var(--card); border-radius: 12px; box-shadow: 0 0 0 1px var(--hairline); text-align: left; margin-bottom: 16px; overflow: hidden; }
.list-card a { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 14px; color: var(--fg); text-decoration: none; }
.list-card a + a { border-top: 1px solid var(--hairline); }
.list-card a:hover { background: var(--tint-1); }
.list-card a span:last-child { color: var(--muted); }
.wide { width: 100%; }
/* shortcuts + no-ink */
.small-dialog { width: min(420px, 92vw); padding: 22px 24px 20px; }
.small-dialog h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; text-align: center; }
.small-dialog p { margin: 0 0 18px; color: var(--muted); text-align: center; line-height: 1.45; }
.small-dialog .actions { display: flex; justify-content: center; gap: 8px; }
.shortcuts { margin: 8px 0 16px; display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; font-size: 13px; }
.shortcuts dt { color: var(--fg); } .shortcuts dd { margin: 0; text-align: right; }
.shortcuts dd kbd + kbd { margin-left: 3px; }

/* ------------------------------------------------------------ 2i: narrow + touch (< 720px) */
@media (max-width: 719px) {
  :root { --header-h: calc(56px + env(safe-area-inset-top, 0px)); --side-w: 0px; }
  .hb { padding: env(safe-area-inset-top, 0px) 8px 0; gap: 4px; }
  .hb-icon { width: 44px; height: 44px; }
  #openBtn { display: none; }
  .save-btn { height: 44px; padding: 0 16px; }
  .save-full { display: none; } .save-short { display: inline; }
  .menu { right: 8px; }
  .menu .narrow-only { display: flex; }
  .hint-chip { display: none !important; }
  .canvas { touch-action: pan-x pan-y; }
  .canvas-inner { padding-left: 0 !important; }
  .page-wrap { padding: 0 16px; }
  .page-box { margin: 16px auto 128px; }
  /* pages: left drawer, two-column grid */
  .sidebar { width: 300px; top: 0; padding-top: calc(env(safe-area-inset-top, 0px) + 20px); z-index: 45; background: var(--window); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .doc.no-sidebar .sidebar { transform: translateX(-100%); }
  .thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; justify-items: center; }
  .thumb canvas { width: 112px; }
  .scrim { z-index: 44; }
  /* palette: 4-tool bar */
  .palette, .doc:not(.no-sidebar) .palette {
    left: 16px; right: 16px; transform: none; bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    height: 68px; border-radius: 20px; padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  }
  .palette .palette-sep, .palette .pal-btn, .palette .zoom-label, .palette .page-label { display: none; }
  .tool, .tool.icon-only { width: auto; height: 56px; padding: 0; border-radius: 14px; flex-direction: column; justify-content: center; gap: 3px; font-size: 11px; }
  .tool svg { width: 20px; height: 20px; }
  .tool .tool-label-narrow { display: inline; }
  /* popovers become bottom sheets */
  .popover, #pop-sig, #pop-date, #pop-text {
    position: fixed; left: 0 !important; right: 0; bottom: 0; width: auto; z-index: 46;
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0;
    background: var(--window); backdrop-filter: none; animation: sheet-in .2s ease-out;
  }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .grabber { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--tint-4); margin: 0 auto 14px; }
  .sig-row { height: 64px; }
  .sig-row img { width: 160px; height: 44px; }
  .sig-row .row-btn { display: none !important; }
  .sig-row .more { display: grid; width: 44px; height: 44px; }
  .sig-row.actions-open .label { display: none; }
  .sig-row.actions-open .row-btn:not(.more) { display: grid !important; width: 44px; height: 44px; }
  .pop-btn { height: 48px; font-size: 15px; }
  .fmt-row { padding: 14px 12px; font-size: 16px; }
  .text-entry { height: 48px; font-size: 16px; }
  .sheet-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(44,0,30,.3); }
  .empty { padding: calc(var(--header-h) + 16px) 16px 16px; }
  .toasts, .doc:not(.no-sidebar) ~ .toasts { left: 50%; max-width: calc(100vw - 24px); }
}
@media (min-width: 720px) { .tool .tool-label-narrow { display: none; } }
@media (min-width: 720px) { .sheet-scrim { display: none; } }