/* ===================== Tokens =====================
   Light = cool grey "graphite", Dark = matte black. No purple anywhere. */
:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif;
  --text:#1d1d1f; --text-2:rgba(29,29,31,.64); --text-3:rgba(29,29,31,.4);
  --accent:#1d1d1f; --accent-text:#fff; --accent-soft:rgba(0,0,0,.07); --focus:rgba(0,0,0,.14); --sel:rgba(29,29,31,.5);
  --danger:#e5484d; --ok:#30a46c; --warn:#f5a524;
  --chatgpt:#10a37f; --claude:#d97757; --gemini:#4285f4; --other:#8e8e93;
  --wall:#e3e3e6; --wall-hi:#f5f5f7; --grain:.035;
  --glass: rgba(247,247,249,.62); --glass-strong: rgba(250,250,251,.9); --glass-thin: rgba(255,255,255,.42); --glass-hover: rgba(255,255,255,.8);
  --stroke: rgba(255,255,255,.85); --edge: rgba(0,0,0,.08); --hi: rgba(255,255,255,.95);
  --field: rgba(0,0,0,.05); --sep: rgba(0,0,0,.08);
  --shadow: 0 10px 30px -14px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg: 0 30px 80px -24px rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.15);
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px -6px rgba(0,0,0,.55);
  --mark: rgba(255,204,0,.42); --sheen:.5; --blur:28px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --text:#ededee; --text-2:rgba(237,237,238,.6); --text-3:rgba(237,237,238,.34);
  --accent:#ededee; --accent-text:#0b0b0c; --accent-soft:rgba(255,255,255,.075); --focus:rgba(255,255,255,.16); --sel:rgba(255,255,255,.42);
  --wall:#08080a; --wall-hi:#17171a; --grain:.06;
  --glass: rgba(22,22,24,.74); --glass-strong: rgba(26,26,28,.95); --glass-thin: rgba(255,255,255,.03); --glass-hover: rgba(34,34,37,.88);
  --stroke: rgba(255,255,255,.065); --edge: rgba(0,0,0,.65); --hi: rgba(255,255,255,.045);
  --field: rgba(255,255,255,.055); --sep: rgba(255,255,255,.065);
  --shadow: 0 10px 30px -14px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.5);
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.9), 0 8px 24px -8px rgba(0,0,0,.6);
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px -6px rgba(0,0,0,.9);
  --mark: rgba(255,204,0,.26); --sheen:0; --blur:22px;
  color-scheme: dark;
}}
:root[data-theme="dark"]{
  --text:#ededee; --text-2:rgba(237,237,238,.6); --text-3:rgba(237,237,238,.34);
  --accent:#ededee; --accent-text:#0b0b0c; --accent-soft:rgba(255,255,255,.075); --focus:rgba(255,255,255,.16); --sel:rgba(255,255,255,.42);
  --wall:#08080a; --wall-hi:#17171a; --grain:.06;
  --glass: rgba(22,22,24,.74); --glass-strong: rgba(26,26,28,.95); --glass-thin: rgba(255,255,255,.03); --glass-hover: rgba(34,34,37,.88);
  --stroke: rgba(255,255,255,.065); --edge: rgba(0,0,0,.65); --hi: rgba(255,255,255,.045);
  --field: rgba(255,255,255,.055); --sep: rgba(255,255,255,.065);
  --shadow: 0 10px 30px -14px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.5);
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.9), 0 8px 24px -8px rgba(0,0,0,.6);
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px -6px rgba(0,0,0,.9);
  --mark: rgba(255,204,0,.26); --sheen:0; --blur:22px;
  color-scheme: dark;
}

/* ===================== Base ===================== */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:13px/1.45 var(--font); color:var(--text); background:var(--wall);
  -webkit-font-smoothing:antialiased; overflow:hidden; letter-spacing:-.003em;
}
.wallpaper{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(130% 70% at 50% -15%, var(--wall-hi) 0, transparent 65%), var(--wall);
}
.wallpaper::after{content:"";position:absolute;inset:0;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:default;-webkit-tap-highlight-color:transparent}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--accent-soft)}

/* ===================== Liquid Glass ===================== */
.glass{
  position:relative; background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%); backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi), inset 0 -1px 0 rgba(255,255,255,.06), 0 0 0 .5px var(--edge), var(--shadow);
}
.glass.sheen::before{ /* specular highlight across the top-left edge */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.08) 28%, transparent 50%);
  mix-blend-mode:overlay; opacity:var(--sheen);
}
@media (prefers-reduced-transparency: reduce){
  .glass{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-strong) }
}

/* ===================== Layout ===================== */
.app{position:relative;z-index:1;display:grid;grid-template-columns:248px 1fr;gap:10px;height:100vh;height:100dvh;padding:10px;
  padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right))}
.app.collapsed{grid-template-columns:0 1fr;gap:0}
.app.collapsed aside{opacity:0;pointer-events:none;transform:translateX(-12px)}

aside{border-radius:22px;padding:14px 10px 10px;display:flex;flex-direction:column;min-height:0;transition:opacity .2s, transform .25s}
.brand{display:flex;align-items:center;gap:9px;padding:2px 8px 12px;font-weight:650;font-size:14px}
.brand img{width:24px;height:24px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.brand-sub{font-size:11px;font-weight:450;color:var(--text-3);margin-top:1px}
.privacy-badge .lbl{color:var(--text-2);font-size:12px}
.privacy-badge svg{color:var(--ok)}
.privacy-badge.ai svg{color:var(--warn)}
.backup-item.stale svg,.backup-item.stale .ct{color:var(--warn)}
.backup-item .ct{font-size:11.5px}
.backup-card{display:flex;gap:14px;align-items:center;padding:14px;border-radius:14px;background:var(--field);border:1px solid var(--sep);margin:6px 0 4px}
.backup-card svg{width:26px;height:26px;color:var(--text-2)}
.backup-card.stale svg{color:var(--warn)}
.backup-card b{display:block;font-size:13.5px}
.backup-card span{color:var(--text-2);font-size:12px}
.side-scroll{overflow:auto;flex:1;margin:0 -4px;padding:0 4px;scrollbar-width:none}
.side-scroll::-webkit-scrollbar{display:none}
.sec{font-size:11px;font-weight:600;color:var(--text-3);margin:14px 10px 4px;display:flex;justify-content:space-between;align-items:center}
.sec button{border:0;background:none;color:var(--text-3);padding:0 2px;border-radius:5px;display:flex}
.sec button:hover{color:var(--text-2);background:var(--field)}
.nav-item{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:9px;color:var(--text);user-select:none;-webkit-user-select:none;cursor:default;min-height:28px;border:1px solid transparent}
.nav-item svg{color:var(--text-2)}
.nav-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .ct{color:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums}
.nav-item:hover{background:var(--glass-thin)}
.nav-item.on{background:var(--accent-soft)}
.nav-item.on svg{color:var(--text)}
.nav-item.on .lbl{font-weight:600}
.nav-item.drop{border-color:var(--accent);background:var(--accent-soft)}
.nav-item .x{display:none;border:0;background:none;color:var(--text-3);padding:0;border-radius:4px}
.nav-item:hover .x{display:flex}
.nav-item:hover .x + .ct{display:none}
.side-foot{border-top:1px solid var(--sep);margin-top:8px;padding-top:8px;display:flex;flex-direction:column;gap:2px}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.ai-dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(52,199,89,.18)}

main{display:flex;flex-direction:column;min-width:0;min-height:0;gap:10px}
.toolbar{border-radius:18px;padding:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-title{display:flex;flex-direction:column;line-height:1.15;padding:0 6px;min-width:0}
.tb-title b{font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.tb-title span{font-size:11px;color:var(--text-2)}
.flex{flex:1}

.icon-btn{border:0;background:transparent;height:30px;min-width:30px;padding:0 8px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--text);white-space:nowrap}
.icon-btn:hover{background:var(--field)}
.icon-btn:active{transform:scale(.97)}
.pill{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--stroke);background:var(--glass-thin);display:inline-flex;align-items:center;gap:6px;box-shadow:inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge);white-space:nowrap}
.pill:hover{background:var(--glass-hover)}
.pill.primary{background:var(--accent);color:var(--accent-text);border-color:transparent;box-shadow:var(--btn-shadow);font-weight:550}
.pill.primary:hover{filter:brightness(1.08)}
.pill:disabled{opacity:.5}

.search{position:relative;flex:1 1 260px;max-width:520px;min-width:180px}
.search input{width:100%;height:32px;border-radius:999px;border:1px solid transparent;background:var(--field);padding:0 54px 0 32px;outline:none;transition:box-shadow .15s, background .15s}
.search input:focus{background:var(--glass-strong);box-shadow:0 0 0 3.5px var(--focus);border-color:var(--sel)}
.search > svg{position:absolute;left:11px;top:8px;color:var(--text-2);width:15px;height:15px}
.search kbd{position:absolute;right:10px;top:7px;font:11px var(--font);color:var(--text-3);border:1px solid var(--sep);border-radius:5px;padding:0 5px;line-height:16px}

.seg{display:inline-flex;padding:2px;border-radius:10px;background:var(--field);gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:transparent;height:26px;padding:0 10px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--text)}
.seg button.on{background:var(--glass-strong);box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px var(--edge), inset 0 1px 0 var(--hi);font-weight:550}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}

/* ===================== Cards ===================== */
.content{flex:1;overflow:auto;border-radius:22px;padding:4px 2px 30px;scroll-padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:2px}
.ai-row{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px}
.ai-row .t{flex:1;color:var(--text-2)}
.card{border-radius:18px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:7px;cursor:default;transition:transform .15s ease, box-shadow .15s, background .15s;outline:none;min-width:0}
.card:hover{background:var(--glass-hover);transform:translateY(-1px)}
.card.sel{box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1.5px var(--sel), var(--shadow)}
.card{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:manipulation}
.card.placeholder{opacity:.28;outline:1.5px dashed var(--sel);outline-offset:-2px;box-shadow:none}
.drag-ghost{position:fixed!important;left:0;top:0;z-index:80;margin:0;pointer-events:none;transition:none!important;
  box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--sel), var(--shadow-lg)!important;will-change:transform;
  /* see-through while dragging: the cards and sidebar underneath stay visible */
  background:color-mix(in srgb, var(--glass-strong) 40%, transparent)!important;
  -webkit-backdrop-filter:blur(3px) saturate(140%)!important;backdrop-filter:blur(3px) saturate(140%)!important;opacity:.88}
body.is-dragging, body.is-dragging *{cursor:grabbing!important}
body.is-dragging .card:hover{transform:none;background:var(--glass)}
.card-h{display:flex;align-items:flex-start;gap:10px}
.av{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px -2px rgba(0,0,0,.3)}
.card-t{flex:1;min-width:0;padding-right:54px}
.card-t b{display:block;font-size:13.5px;font-weight:620;line-height:1.3;word-break:break-word}
.card-t small{color:var(--text-2);font-size:11.5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px}
.card .sum{color:var(--text-2);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--field);color:var(--text-2);white-space:nowrap}
.chip.mode{display:inline-flex;gap:4px;align-items:center}
.chip.mode svg{width:11px;height:11px}
.card-actions{position:absolute;top:10px;right:10px;display:flex;gap:2px;opacity:0;transition:opacity .12s}
.card:hover .card-actions,.card.sel .card-actions{opacity:1}
.card-actions button{border:0;background:var(--glass-strong);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--text-2);box-shadow:0 0 0 .5px var(--edge)}
.card-actions button:hover{color:var(--text)}
.card-actions .on{color:var(--warn)}
mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 1px}
.empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--text-2);border-radius:22px}
.empty h2{color:var(--text);font-size:19px;margin:6px 0 6px;font-weight:650}
.empty .big{width:54px;height:54px;border-radius:14px;margin:0 auto 6px}

/* ===================== Sheets / dialogs ===================== */
dialog{border:0;padding:0;background:transparent;color:var(--text);max-width:none;max-height:none;overflow:visible}
dialog::backdrop{background:rgba(10,12,20,.22);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
dialog[open] .sheet{animation:drop .22s cubic-bezier(.2,.9,.3,1.15)}
@keyframes drop{from{transform:translateY(-14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.sheet{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 40px);overflow:auto;border-radius:24px;padding:20px 22px;background:var(--glass-strong);box-shadow:inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge), var(--shadow-lg)}
.sheet h3{margin:0 0 2px;font-size:17px;font-weight:650}
.sheet .sub{color:var(--text-2);margin:0 0 14px;font-size:12.5px}
.form{display:grid;grid-template-columns:110px 1fr;gap:9px 12px;align-items:center}
.form > label{text-align:right;color:var(--text-2);font-size:12.5px}
.form > label.top{align-self:start;padding-top:6px}
.field{width:100%;border:1px solid transparent;background:var(--field);border-radius:8px;padding:6px 9px;outline:none;min-height:30px;transition:box-shadow .15s}
.field:focus{box-shadow:0 0 0 3.5px var(--focus);border-color:var(--sel);background:var(--glass-strong)}
textarea.field{resize:vertical;line-height:1.4}
.hint{font-size:11.5px;color:var(--text-2);margin:0}
.hint.full{grid-column:1/-1}
.span2{grid-column:2}
.sheet-foot{display:flex;align-items:center;gap:8px;margin-top:18px}
.ai-bar{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--field);border:1px solid var(--sep);font-size:12.5px}
.ai-bar .t{flex:1;color:var(--text-2)}
.ai-bar svg{color:var(--text-2)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
details.ctx summary{cursor:default;color:var(--text-2);font-size:12px;list-style:none;display:flex;gap:6px;align-items:center}
details.ctx summary::-webkit-details-marker{display:none}
details.ctx summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:15px}
details.ctx[open] summary::before{transform:rotate(90deg)}
details.ctx textarea{margin-top:6px}
.tabs{display:flex;justify-content:center;margin:2px 0 16px}
.paste-zone{margin:16px auto 12px;padding:26px;border:1.5px dashed var(--sel);border-radius:16px;font-size:26px;font-weight:600;color:var(--text-2);outline:none}
.paste-zone:focus{background:var(--field)}
.welcome{width:min(600px,calc(100vw - 24px));padding:28px 28px 22px;text-align:center}
.welcome-icon{width:64px;height:64px;border-radius:15px;box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}
.welcome h2{margin:14px 0 4px;font-size:21px;font-weight:680;letter-spacing:-.01em}
.welcome .sub{font-size:13.5px;margin-bottom:20px}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
.pillars > div{background:var(--field);border:1px solid var(--sep);border-radius:14px;padding:13px 14px;display:flex;flex-direction:column;gap:4px}
.pillars svg{width:18px;height:18px;color:var(--text-2);margin-bottom:2px}
.pillars b{font-size:13px;font-weight:620}
.pillars span{font-size:12px;color:var(--text-2);line-height:1.45}
@media (max-width:560px){ .pillars{grid-template-columns:1fr} }
.tabpane{display:none}.tabpane.on{display:block}
.tabpane h4{margin:14px 0 6px;font-size:13px}
.tabpane p{margin:0 0 8px;color:var(--text-2);font-size:12.5px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bm{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--accent);color:var(--accent-text);text-decoration:none;font-weight:600;cursor:grab;box-shadow:var(--btn-shadow)}
.status-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--sep)}
.status-row:last-child{border-bottom:0}
.status-row .ok{color:var(--ok)}.status-row .no{color:var(--warn)}
.status-row div{flex:1}
.status-row b{display:block;font-weight:600}
.status-row .ok svg,.status-row .no svg{margin-top:1px}
.status-row span{color:var(--text-2);font-size:12px}
code{font:11.5px ui-monospace, SFMono-Regular, Menlo, monospace;background:var(--field);padding:1px 5px;border-radius:5px}
.switch{position:relative;width:38px;height:22px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--field);transition:.2s;box-shadow:inset 0 0 0 .5px var(--edge)}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.switch input:checked + span{background:var(--accent)}
.switch input:checked + span::after{background:var(--accent-text)}
.switch input:checked + span::after{transform:translateX(16px)}

/* ===================== Menu & toast ===================== */
.menu{position:fixed;z-index:50;min-width:210px;padding:5px;border-radius:12px;background:var(--glass-strong);display:none}
.menu.on{display:block;animation:pop .12s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
.menu button{display:flex;width:100%;align-items:center;gap:9px;border:0;background:none;padding:5px 9px;border-radius:7px;text-align:left}
.menu button:hover{background:var(--accent);color:var(--accent-text)}
.menu button.danger{color:var(--danger)}
.menu button.danger:hover{background:var(--danger);color:#fff}
.menu hr{border:0;border-top:1px solid var(--sep);margin:4px 6px}
.combo{max-height:300px;overflow:auto;z-index:70}
.combo button{gap:8px}
.combo button span:not(.dot){flex:1}
.combo button small{color:var(--text-3);font-size:11px}
.combo button.on{background:var(--accent);color:var(--accent-text)}
.combo button.on small{color:inherit;opacity:.6}
.combo button:hover:not(.on){background:var(--field);color:var(--text)}
.combo-empty{padding:8px 10px;color:var(--text-2)}
.prov-field{position:relative}
.prov-field .dot{position:absolute;left:10px;top:11px}
.prov-field .field{padding-left:26px}
.seg-input{border:0;background:transparent;height:26px;width:104px;flex:none;padding:0 9px;border-radius:8px;outline:none;color:var(--text-2);transition:background .2s}
.seg-input::placeholder{color:var(--text-3)}
.seg-input:focus{background:var(--glass-strong);color:var(--text);box-shadow:0 0 0 .5px var(--edge)}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;z-index:60;padding:9px 10px 9px 16px;border-radius:999px;display:flex;align-items:center;gap:10px;transition:.25s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;max-width:calc(100vw - 30px)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{border:0;background:var(--accent);color:var(--accent-text);border-radius:999px;padding:4px 11px;font-weight:600}
.toast button:empty{display:none}
.drop-overlay{position:fixed;inset:10px;z-index:40;border-radius:24px;border:2px dashed var(--accent);background:var(--accent-soft);display:none;place-items:center;font-size:18px;font-weight:600;color:var(--accent);pointer-events:none}
.drop-overlay.on{display:grid}

/* ===================== Mobile ===================== */
.only-mobile{display:none}
@media (max-width: 780px){
  .app{grid-template-columns:1fr;padding:8px}
  #side{position:fixed;z-index:30;top:8px;bottom:8px;left:8px;width:min(300px,82vw);transform:translateX(-110%);transition:transform .25s;background:var(--glass-strong)}
  #side.open{transform:none}
  .app.collapsed{grid-template-columns:1fr}
  .only-mobile{display:inline-flex}
  .hide-mobile{display:none!important}
  .search{order:5;flex-basis:100%;max-width:none}
  .seg.prov{order:6;flex-basis:100%}
  .grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .form > label{text-align:left;margin-bottom:-5px}
  .span2{grid-column:1}
  .card-actions{opacity:1}
  .search kbd{display:none}
}

/* ===================== Utilities (replace inline styles so the CSP needs no 'unsafe-inline') ===================== */
.mt-4{margin-top:4px}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.ml-6{margin-left:6px}
.danger-text{color:var(--danger)}
.sheet-wide{width:min(620px,calc(100vw - 24px))}
.sheet-narrow{width:min(460px,calc(100vw - 24px))}
.center{text-align:center}
.va-mid{vertical-align:middle}
.svg-defs{position:absolute;width:0;height:0}
.form-110{grid-template-columns:110px 1fr}
.d-flex{display:flex}.d-contents{display:contents}
.pad-x{padding:2px 10px}
.kbd-dim{opacity:.6}
.italic{font-style:italic}
.spin.inline{display:inline-block;vertical-align:-2px}
.nav-item[data-indent="1"]{padding-left:26px}.nav-item[data-indent="2"]{padding-left:42px}.nav-item[data-indent="3"]{padding-left:58px}
.nav-item[data-indent="4"]{padding-left:74px}.nav-item[data-indent="5"]{padding-left:90px}.nav-item[data-indent="6"]{padding-left:106px}