/* shell.css — docvault web shell. Ships its own copy of the design tokens and app chrome
   (mirrors the box app's docvault.css: two text colours, one accent, hairline structure,
   quiet Notion/Linear-like chrome). No external fonts, no external images. */

:root {
  --ink: #1a1b1e;
  --mut: #6a6c72;
  --line: #e7e6e2;
  --paper: #fafaf9;
  --card: #ffffff;
  --well: #f1f1ee;
  --hover: #f4f4f1;
  --accent: #4f4fd0;
  --tag-green-bg: #e4f4ec; --tag-green-fg: #19694b;
  --tag-amber-bg: #fbf0d7; --tag-amber-fg: #82570c;
  --tag-blue-bg:  #e9edf9; --tag-blue-fg:  #3a5390;
  --danger-bg: #fdecec; --danger-fg: #8a1f1f; --danger-line: #f0b8b8;
  --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 17px; --t-xl: 21px;
  --r: 8px; --r-sm: 6px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper);
       font-size: var(--t-md); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
::selection { background: #dddcf6; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.dv-icon { flex: none; vertical-align: -3px; }

/* boot spinner */
.dv-bootload { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--line);
        border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ================================================================= buttons + tags */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
       border-radius: var(--r-sm); padding: 6px 14px; font-size: var(--t-sm); font-weight: 550;
       border: 1px solid transparent; transition: transform .06s ease, background .15s, border-color .15s;
       line-height: 1.45; }
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2c2d33; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: #c9c8c2; }
.btn-sm { padding: 4px 10px; font-size: var(--t-sm); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.btn.busy { opacity: .55; pointer-events: none; }
.tag { font-family: var(--mono); font-size: var(--t-xs); padding: 2px 7px; border-radius: 4px;
       white-space: nowrap; background: var(--well); color: var(--mut); }
.tag-filed { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.tag-exp { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.tag-ent { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--mut); text-transform: uppercase; }
.h-page { font-size: var(--t-xl); letter-spacing: -.015em; margin: 3px 0 2px; font-weight: 650; }
.sub-mut { color: var(--mut); font-size: var(--t-sm); }
.dv-pagehead { margin: 4px 0 16px; }
.dv-pagehead.lib-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

/* ================================================================= app shell */
.app-shell { display: flex; min-height: 100vh; background: var(--card); }
.side { width: 236px; flex: none; display: flex; flex-direction: column;
        background: var(--paper); border-right: 1px solid var(--line);
        padding: 10px 8px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side-brand { display: flex; align-items: center; padding: 4px 8px 10px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; letter-spacing: -.02em; }
.side-new { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--line);
            background: #fff; border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-sm);
            font-weight: 550; color: var(--ink); box-shadow: 0 1px 1px rgba(20,20,18,.04); margin-bottom: 2px; }
.side-new:hover { border-color: #c9c8c2; }
.side-search { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none;
               border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-sm); color: var(--mut); text-align: left; }
.side-search:hover { background: var(--hover); color: var(--ink); }
.side-search kbd { margin-left: auto; font-family: var(--mono); font-size: 10px; border: 1px solid var(--line);
                   background: #fff; border-radius: 4px; padding: 1px 5px; color: var(--mut); }
.side-sec { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--mut);
            text-transform: uppercase; padding: 14px 10px 4px; }
.side-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.side-nav a { display: flex; align-items: center; gap: 9px; padding: 4px 10px; border-radius: var(--r-sm);
              font-size: var(--t-sm); font-weight: 500; color: var(--ink); min-height: 28px; }
.side-nav a:hover { background: var(--hover); }
.side-nav a.on { background: #ebebe7; font-weight: 600; }
.side-nav a .ic { width: 17px; color: var(--mut); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.side-nav a.on .ic { color: var(--ink); }
.side-nav a .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav a .n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--mut); }
.side-bottom { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.side-user { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-sm); margin-top: 2px; }
.side-user .who { min-width: 0; line-height: 1.25; }
.side-user .who b { display: block; font-size: var(--t-sm); font-weight: 550; }
.side-user .who span { display: block; font-size: 11px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; flex: none;
          display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; }
.dv-side-empty { padding: 4px 10px; display: block; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--card); }
.topbar { display: none; }
.app-main { width: 100%; max-width: 1000px; padding: 22px 36px 64px; }
.app-foot { border-top: 1px solid var(--line); margin-top: auto; padding: 9px 36px; display: flex;
            justify-content: space-between; gap: 16px; font-size: 11.5px; color: var(--mut); }
.app-foot .lock { display: flex; gap: 7px; align-items: center; }
.app-foot a { text-decoration: underline; text-decoration-style: dotted; }
.mobile-tabs { display: none; }

/* ================================================================= lists / rows */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
            margin: 24px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sec-head .more { font-size: var(--t-sm); color: var(--mut); }
.sec-head .more:hover { color: var(--ink); }
.sec-head + .doc-list { margin-top: 8px; }
.doc-list { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 8px; }
.doc-list:empty { display: none; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); min-height: 38px; color: var(--ink); }
.doc-row:first-child { border-top: 0; }
a.doc-row:hover { background: var(--hover); }
.doc-row .fic { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--line);
                display: flex; align-items: center; justify-content: center; color: var(--mut); flex: none; background: #fff; }
.doc-row .t { font-weight: 550; font-size: var(--t-sm); }
.doc-row .m { font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.doc-row .right { margin-left: auto; font-size: var(--t-sm); color: var(--mut); white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.empty { border: 1px dashed var(--line); background: #fff; border-radius: var(--r); padding: 22px 18px;
         text-align: center; color: var(--mut); font-size: var(--t-sm); margin-top: 8px; }
.empty b { color: var(--ink); display: block; font-size: var(--t-sm); margin-bottom: 4px; }
.empty .star { font-size: 18px; display: block; margin-bottom: 8px; }
.dv-empty-act { margin-top: 12px; }
.dv-member-row .avatar { width: 30px; height: 30px; }
.dv-inline { display: inline-flex; gap: 8px; align-items: center; }
.dv-inline input { flex: 1; }
.dv-row { display: inline-flex; gap: 8px; align-items: center; }
.dv-stack { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.dv-stack .btn { justify-content: flex-start; }
.dv-kv { display: flex; gap: 14px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.dv-kv:first-of-type { border-top: 0; }
.dv-kv-l { color: var(--mut); min-width: 150px; }
.dv-kv-v { color: var(--ink); overflow-wrap: anywhere; }

/* search box */
.askbox { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line);
          border-radius: var(--r); padding: 3px 8px 3px 12px; margin: 12px 0 8px;
          box-shadow: 0 1px 2px rgba(20,20,18,.03); transition: border-color .15s, box-shadow .15s; }
.askbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,79,208,.10); }
.askbox svg { flex: none; color: var(--mut); }
.askbox input { flex: 1; border: 0; outline: 0; background: none; font-size: var(--t-md); padding: 8px 0; color: var(--ink); }
.askbox input::placeholder { color: var(--mut); opacity: .7; }
.askbox .ret { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); border-radius: 5px;
               padding: 3px 6px; color: var(--mut); background: var(--paper); }
.dv-content-search { margin: 18px 0 6px; }
.ent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-top: 8px; }
.ent-card { display: flex; gap: 9px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; }
.ent-card .ic { width: 24px; height: 24px; font-family: var(--mono); font-size: var(--t-xs); border-radius: 5px;
                background: var(--well); color: var(--mut); display: flex; align-items: center; justify-content: center; flex: none; }
.ent-card b { font-size: var(--t-sm); font-weight: 550; }
.ent-card .meta { font-size: 11.5px; color: var(--mut); }
.dv-answers { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dv-answer-text { white-space: pre-wrap; font-size: var(--t-md); line-height: 1.6; }

/* tabs */
.tabs { display: flex; gap: 4px; margin: 14px 0 10px; border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; gap: 7px; align-items: center; border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 6px 11px;
       font-size: var(--t-sm); font-weight: 500; border: 0; background: none; color: var(--mut);
       border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.dv-tabpanel { padding-bottom: 40px; }

/* ================================================================= settings-style sections */
.set-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; margin-top: 18px; }
.set-grid > div { min-width: 0; }
.set-nav { display: flex; flex-direction: column; gap: 1px; font-size: var(--t-sm); position: sticky; top: 20px; align-self: start; }
.set-nav a { padding: 5px 10px; border-radius: var(--r-sm); color: var(--mut); }
.set-nav a:hover { background: var(--hover); color: var(--ink); }
.set-sec { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; scroll-margin-top: 20px; overflow-wrap: anywhere; }
.set-sec h2 { font-size: var(--t-md); margin: 0 0 3px; font-weight: 600; }
.set-sec .d { font-size: var(--t-sm); color: var(--mut); margin: 0 0 12px; max-width: 68ch; }
.set-sec input[type=text], .set-sec input[type=email], .set-sec input[type=password], .set-sec select {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-sm); background: #fff; }
.set-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.sess { font-size: var(--t-sm); display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); align-items: center; }
.sess:first-of-type { border-top: 0; }
.sess .cur { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); color: var(--mut); padding: 1px 6px; border-radius: 4px; }
.audit-row { display: flex; gap: 14px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); align-items: baseline; flex-wrap: wrap; }
.audit-row .when { font-family: var(--mono); font-size: 10.5px; color: var(--mut); min-width: 150px; }
.audit-row .act { font-family: var(--mono); font-size: 10.5px; background: var(--well); padding: 1px 7px; border-radius: 4px; }
.audit-row .det { color: var(--ink); }
.hint { display: flex; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--ink);
        color: var(--ink); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-sm); margin: 8px 0; }
.dv-check { display: flex; gap: 8px; align-items: center; font-size: var(--t-sm); }
.dv-tier { padding: 12px 14px; }
.dv-adopt { margin: 14px 0 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.dv-adopt > summary { cursor: pointer; font-size: var(--t-sm); color: var(--mut); }
.dv-adopt .hint { margin-top: 10px; }
.dv-adopt .dv-check { margin: 10px 0 4px; }
.dv-adopt input[type=text], .dv-adopt input[type=password] { font-family: var(--mono); font-size: var(--t-sm); }
/* Migration codes are one unbroken token; wrapping mid-token is what makes a partial copy
   possible, so they wrap on any character and never scroll sideways out of view. */
.dv-adopt textarea, .set-sec textarea.mono { width: 100%; font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5;
        overflow-wrap: anywhere; word-break: break-all; resize: vertical; }
.dv-adopt .dv-field { margin-top: 12px; }
.dv-adopt .sub-mut { margin-top: 6px; }
.dv-prose h2 { font-size: var(--t-md); margin: 22px 0 6px; }
.dv-prose p { max-width: 72ch; font-size: var(--t-md); line-height: 1.65; color: var(--ink); }

/* ================================================================= forms (auth + modal) */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.dv-auth-brand { padding: 18px 22px; }
.auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { width: 420px; max-width: 100%; }
.auth-card h1 { font-size: var(--t-xl); letter-spacing: -.02em; margin: 0 0 8px; }
.auth-card .d { color: var(--mut); font-size: var(--t-sm); margin: 0 0 22px; }
.auth-card form { display: flex; flex-direction: column; gap: 10px; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=search] {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 13px; font-size: var(--t-md); background: #fff; width: 100%; }
.auth-card input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,79,208,.10); }
.auth-card .alt { font-size: var(--t-sm); color: var(--mut); text-align: center; margin-top: 16px; }
.auth-card .alt a { color: var(--ink); font-weight: 600; }
.auth-card .btn { width: 100%; margin-top: 4px; }
.auth-card .set-row .btn, .auth-card .dv-inline .btn { width: auto; }
.auth-foot { padding: 18px; text-align: center; font-size: var(--t-sm); color: var(--mut); display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.dv-field { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.dv-field-l { font-size: var(--t-sm); color: var(--mut); font-weight: 500; }
.dv-field-h { font-size: 11.5px; color: var(--mut); }
.dv-field input[type=text], .dv-field input[type=email], .dv-field input[type=password], .dv-field textarea, .dv-field select {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-md); background: #fff; width: 100%; }
.dv-field input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,79,208,.10); }
.err { background: #fff; border: 1px solid var(--line); border-left: 2px solid var(--ink); color: var(--ink);
       border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-sm); margin: 8px 0; }
.dv-status { min-height: 20px; }
.dv-meter { margin: 2px 0 6px; }
.dv-meter-bar { display: block; height: 5px; background: var(--well); border-radius: 999px; overflow: hidden; }
.dv-meter-bar span { display: block; height: 100%; width: 0; background: var(--tag-amber-fg); transition: width .2s; }
.dv-meter[data-score="3"] .dv-meter-bar span, .dv-meter[data-score="4"] .dv-meter-bar span { background: var(--tag-green-fg); }
.dv-meter-label { display: block; font-size: 11.5px; color: var(--mut); margin-top: 4px; }
.dv-lockicon { width: 52px; height: 52px; border-radius: 14px; background: var(--well); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.dv-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.dv-word { display: inline-flex; gap: 6px; align-items: baseline; background: #fff; border: 1px solid var(--line);
           border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-md); font-weight: 600; }
.dv-word i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--mut); }
.dv-scan video { width: 100%; border-radius: var(--r-sm); background: #000; margin-top: 8px; }

/* ================================================================= kit */
.dv-kitpreview { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 12px 0; }
.dv-kit-row { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); flex-wrap: wrap; }
.dv-kit-row:first-child { border-top: 0; }
.dv-sk { font-size: var(--t-md); letter-spacing: .04em; }
.dv-kit-codes { padding: 8px 0 2px; }
.dv-kit-codes summary { cursor: pointer; font-size: var(--t-sm); color: var(--mut); }
.dv-codegrid { list-style: decimal-leading-zero inside; columns: 2; column-gap: 24px; margin: 8px 0; padding: 0; }
.dv-codegrid li { font-family: var(--mono); font-size: var(--t-sm); padding: 3px 0; break-inside: avoid; }
.dv-fp { display: inline-flex; gap: 6px; align-items: baseline; cursor: pointer; }
.dv-fp-l { font-size: 11px; color: var(--mut); }
.dv-fp-v { font-family: var(--mono); font-size: 11.5px; background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.dv-fp--none { color: var(--mut); font-size: 11.5px; }

/* ================================================================= banners */
.dv-bannerhost { display: flex; flex-direction: column; gap: 8px; }
.dv-banner { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-left: 3px solid var(--ink);
             border-radius: var(--r-sm); padding: 11px 14px; margin: 10px 0; background: var(--paper); }
.dv-banner--warn { background: var(--tag-amber-bg); border-color: #e0a03c66; border-left-color: var(--tag-amber-fg); color: var(--tag-amber-fg); }
.dv-banner--block { background: var(--danger-bg); border-color: var(--danger-line); border-left-color: var(--danger-fg); color: var(--danger-fg); }
.dv-banner-title { display: block; font-size: var(--t-sm); }
.dv-banner-text { margin: 4px 0 0; font-size: var(--t-sm); }
.dv-banner-detail { margin-top: 8px; }
.dv-banner-acts { display: flex; gap: 8px; margin-top: 10px; }
.dv-banner .dv-icon { color: currentColor; }

/* ================================================================= connectivity chooser */
.dv-conn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.dv-conn-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r);
                background: #fff; padding: 12px 14px; cursor: pointer; }
.dv-conn-card.on { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(26,27,30,.06); }
.dv-conn-card input { margin-top: 3px; }
.dv-conn-head { display: flex; gap: 8px; align-items: center; }
.dv-conn-title { font-weight: 600; font-size: var(--t-md); }
.dv-conn-sum { margin: 6px 0 4px; font-size: var(--t-sm); color: var(--ink); }
.dv-conn-details { margin: 6px 0 0; padding-left: 18px; font-size: 11.5px; color: var(--mut); }
.dv-conn-details li { margin: 3px 0; }
@media (max-width: 720px) { .dv-conn { grid-template-columns: 1fr; } }

/* ================================================================= modal + toast */
.modal-back { position: fixed; inset: 0; background: rgba(12,13,16,.45); z-index: 90; display: none;
              align-items: flex-start; justify-content: center; padding: 9vh 16px; backdrop-filter: blur(3px);
              overflow-y: auto; }
.modal-back.open { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 520px; max-width: 100%; box-shadow: 0 24px 70px rgba(0,0,0,.35);
         max-height: 82vh; overflow: hidden auto; }
.modal-wide { width: 660px; }
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 0; }
.modal-h b { font-size: var(--t-md); }
.modal-h button { background: none; border: 0; font-size: 17px; color: var(--mut); }
.dv-modal-body { padding: 12px 22px 6px; display: flex; flex-direction: column; gap: 10px; }
.dv-modal-body input[type=text], .dv-modal-body input[type=email], .dv-modal-body input[type=password] {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-md); width: 100%; }
.dv-modal-acts { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 22px 18px; }
.toast { position: fixed; bottom: 20px; right: 20px; transform: translateY(80px); background: var(--ink);
         color: #fff; border-radius: var(--r-sm); padding: 9px 16px; font-size: var(--t-sm); opacity: 0;
         transition: all .22s; z-index: 99; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: min(90vw, 420px); }
.toast.show { transform: translateY(0); opacity: 1; }

/* ================================================================= dropzone */
.dropzone { margin: 12px 0; border: 1.5px dashed var(--line); border-radius: var(--r); padding: 28px 20px;
            text-align: center; color: var(--mut); font-size: var(--t-sm); transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--accent); background: #f5f5fc; }
.dropzone b { color: var(--ink); }
.dropzone a { color: var(--ink); text-decoration: underline; }
.dropzone .formats { font-family: var(--mono); font-size: 10.5px; margin-top: 10px; }

/* ================================================================= print (Emergency Kit) */
#dv-print { display: none; }
@media print {
  body.dv-printing > *:not(#dv-print) { display: none !important; }
  body.dv-printing #dv-print { display: block !important; }
  body { background: #fff; }
  .kit-print { color: #111; font-family: var(--sans); padding: 24px; }
  .kit-print h1 { font-size: 22px; margin: 0 0 4px; }
  .kit-print h2 { font-size: 14px; margin: 22px 0 6px; text-transform: uppercase; letter-spacing: .08em; }
  .kit-print .kit-sub, .kit-print .kit-meta, .kit-print .kit-help { color: #555; font-size: 11px; }
  .kit-print .kit-mono { font-family: var(--mono); font-size: 15px; letter-spacing: .04em; }
  .kit-print .kit-small { font-size: 9px; }
  .kit-print .kit-codes { columns: 2; font-family: var(--mono); font-size: 12px; }
  .kit-print .kit-codes li { padding: 3px 0; }
  .kit-print .kit-qr canvas { width: 42mm; height: 42mm; image-rendering: pixelated; }
  .kit-print .kit-foot { margin-top: 24px; border: 1px solid #999; padding: 10px 12px; font-size: 10px; }
}

/* ================================================================= responsive */
@media (max-width: 900px) {
  .side { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 5; }
  .topbar .logo { font-size: 14px; }
  .topbar-right { display: flex; gap: 8px; align-items: center; }
  .topbar-bell { position: relative; display: inline-flex; align-items: center; justify-content: center;
                 width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--mut); border: 0; background: none; }
  .topbar-bell:hover { background: var(--hover); color: var(--ink); }
  .app-main { padding: 18px 16px 120px; }
  .app-foot { display: none; }
  .mobile-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--paper);
                 border-top: 1px solid var(--line); z-index: 20; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .mobile-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--mut); padding: 4px 0; }
  .set-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .set-nav { position: static; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
  .set-nav a { flex: none; white-space: nowrap; padding: 8px 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: #fff; }
  .h-page { font-size: 19px; }
  .doc-row { flex-wrap: wrap; }
  .doc-row .right { margin-left: 36px; flex-wrap: wrap; }
}