:root{
  --bg:#f8fafc;--surface:#fff;--surface-2:#f1f5f9;
  --fg:#0f172a;--fg-soft:#64748b;--fg-faint:#94a3b8;
  --border:#e2e8f0;--accent:#0f172a;--accent-fg:#fff;
  --note-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --note-bg:#fff;--note-fg:#0f172a;--note-border:#e2e8f0;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.14);
}
html.dark{
  --bg:#0b1220;--surface:#111c2e;--surface-2:#1a2740;
  --fg:#e8eefb;--fg-soft:#94a3b8;--fg-faint:#64748b;
  --border:#22304a;--accent:#e8eefb;--accent-fg:#0b1220;
  --note-bg:#111c2e;--note-fg:#e8eefb;--note-border:#22304a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;max-width:100vw;overflow-x:clip}
body{font-family:var(--note-font);background:var(--bg);color:var(--fg);
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;
  transition:background .2s,color .2s}
#app{display:flex;flex-direction:column;min-height:100dvh;max-width:100vw;overflow-x:clip}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
input,select{outline:none}
[hidden]{display:none!important}

.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-fill{fill:currentColor;stroke:none}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:8px 0 4px}
.hdr-row{display:flex;align-items:center;gap:6px;padding:0 12px;max-width:680px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.brand .logo{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--accent);color:var(--accent-fg);font-size:15px;flex:none}
.brand h1{font-size:16px;font-weight:700;letter-spacing:-.02em}
.lang-sel{width:116px;padding:6px 4px 6px 8px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);font-size:11px;font-weight:600}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  color:var(--fg-soft);font-size:15px;flex:none;transition:background .12s,transform .1s}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.active{background:var(--accent);color:var(--accent-fg)}
.icon-btn.tiny{width:26px;height:26px;font-size:12px}
.icon-btn.install{background:var(--accent);color:var(--accent-fg)}
.tools{justify-content:space-between;padding-top:2px}
.toolgroup{display:flex;align-items:center;gap:2px}
.view-chip{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 8px;
  border-radius:999px;font-size:11px;font-weight:600;color:var(--fg-soft);
  background:var(--surface);border:1px solid var(--border);transition:.12s}
.view-chip .ico{font-size:11px}
.view-chip.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.search-wrap{position:relative;max-width:680px;margin:4px auto 0;padding:0 12px}
.search-wrap input{width:100%;padding:9px 34px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);font-size:13px}
.search-wrap input::placeholder{color:var(--fg-faint)}
.search-ic{position:absolute;left:26px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--fg-faint);pointer-events:none}
.search-wrap .icon-btn{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.folder-bar{display:flex;gap:6px;overflow-x:auto;padding:6px 12px 2px;max-width:680px;
  margin:0 auto;scrollbar-width:none}
.folder-bar::-webkit-scrollbar{display:none}
.chip{flex:none;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  color:var(--fg-soft);background:var(--surface);border:1px solid var(--border);white-space:nowrap}
.chip.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.trash-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;
  max-width:680px;margin:4px auto 0;padding:8px 12px;border-radius:12px;
  background:#fef3c7;color:#78350f;font-size:12px;font-weight:600}
html.dark .trash-banner{background:#422006;color:#fde68a}
.status{max-width:680px;margin:0 auto;padding:0 14px;font-size:11px;font-weight:600;
  color:#dc2626;min-height:0}
.status:empty{display:none}

/* notes */
main{flex:1;width:100%;max-width:680px;margin:0 auto;padding:10px 12px 190px;overflow-x:hidden}
.notes{max-width:100%;overflow-x:hidden}
.note-card{position:relative;background:var(--note-bg);color:var(--note-fg);
  border:1px solid var(--note-border);border-radius:16px;padding:12px;
  box-shadow:var(--shadow);overflow:hidden;max-width:100%;margin-bottom:10px;
  transition:box-shadow .15s;background-size:cover;background-position:center}
.note-card.custom-bg::before{content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.9);border-radius:inherit}
html.dark .note-card.custom-bg::before{background:rgba(11,18,32,.9)}
.note-card.custom-bg>*{position:relative;z-index:1}
.note-card.playing{box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.note-card.selected{box-shadow:0 0 0 2px var(--accent)}
.note-card .sel-check{position:absolute;top:10px;inset-inline-end:10px;width:22px;height:22px;
  border-radius:50%;border:2px solid var(--fg-faint);background:var(--surface);
  display:none;place-items:center;z-index:4}
body.multi .note-card .sel-check{display:grid}
.note-card.selected .sel-check{background:var(--accent);border-color:var(--accent)}
.note-card.selected .sel-check::after{content:"";width:9px;height:5px;
  border-left:2px solid var(--accent-fg);border-bottom:2px solid var(--accent-fg);
  transform:rotate(-45deg) translate(1px,-1px)}
.note-head{width:100%;background:none;border:0;font-size:16px;font-weight:700;
  color:var(--note-fg);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-head::placeholder{color:var(--fg-faint);font-weight:500}
.note-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.note-meta select{font-size:10.5px;font-weight:600;padding:2px 5px;border-radius:6px;
  border:1px solid var(--note-border);background:transparent;color:var(--fg-soft);max-width:120px}
.type-btn{font-size:10.5px;font-weight:600;color:var(--fg-soft);padding:2px 5px;border-radius:6px}
.type-btn:hover{background:rgba(127,127,127,.12)}
.note-editor{outline:none;font-size:14.5px;line-height:1.6;min-height:1.6em;
  overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;max-width:100%}
.note-editor:empty::before{content:attr(data-ph);color:var(--fg-faint);opacity:.7}
.note-editor img{max-width:100%;border-radius:8px;margin:4px 0}
.note-editor ul,.note-editor ol{padding-inline-start:1.4em;margin:2px 0}
.todo-row{display:flex;align-items:center;gap:8px;padding:3px 2px}
.todo-row input[type=checkbox]{width:16px;height:16px;flex:none;accent-color:var(--accent)}
.todo-row .todo-text{flex:1;min-width:0;border:0;background:none;font-size:14px;outline:none}
.todo-row.done .todo-text{text-decoration:line-through;opacity:.5}
.todo-row .del{width:24px;height:24px;border-radius:50%;color:var(--fg-faint);
  display:grid;place-items:center;font-size:10px;flex:none}
.todo-row .del:hover{background:rgba(239,68,68,.12);color:#ef4444}
.add-item{margin-top:4px;font-size:12px;font-weight:600;color:var(--fg-faint);
  display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:6px}
.add-item:hover{background:rgba(127,127,127,.1)}
.note-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--note-border)}
.note-foot .stamp{font-size:10.5px;color:var(--fg-faint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.note-actions{display:flex;align-items:center;gap:1px;flex:none}
.note-actions .icon-btn{width:28px;height:28px;font-size:12px}
.read-btn{display:inline-flex;align-items:center;gap:3px;padding:4px 7px;border-radius:999px;
  font-size:11px;font-weight:600;color:var(--fg-soft)}
.read-btn:hover{background:rgba(127,127,127,.12)}
.trash-title{font-size:15px;font-weight:700}
.trash-preview{font-size:13px;opacity:.65;margin-top:4px;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trash-actions{display:flex;gap:6px;margin-top:10px;padding-top:8px;
  border-top:1px solid var(--note-border)}

/* views */
.notes.view-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:hidden}
.notes.view-grid .note-card{min-width:0;width:100%;max-width:100%;margin:0;padding:10px;contain:inline-size}
.notes.view-grid .note-head{font-size:13px}
.notes.view-grid .note-editor{font-size:12px;min-height:44px;max-height:96px;overflow-y:auto}
.notes.view-grid .note-meta select{font-size:9px;max-width:64px}
.notes.view-grid .note-meta .type-btn{font-size:9px}
.notes.view-grid .note-foot .stamp{display:none}
.notes.view-grid .read-btn span{display:none}
.notes.view-grid .note-actions .icon-btn{width:24px;height:24px;font-size:10px}
.notes.view-compact .note-card{padding:8px 12px;margin-bottom:6px}
.notes.view-compact .note-editor,.notes.view-compact .note-meta,
.notes.view-compact .note-body{display:none}
.notes.view-compact .note-head{font-size:14px;margin:0}
.notes.view-compact .note-foot{margin-top:4px;padding-top:4px;border:0}
.notes.view-compact .read-btn span{display:none}
.notes.view-compact .note-actions .icon-btn{width:24px;height:24px;font-size:10px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 24px}
.empty-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;
  background:var(--surface);border:1px solid var(--border);color:var(--fg-faint);font-size:24px}
.empty h2{font-size:15px;font-weight:600;margin-top:14px}
.empty p{font-size:13px;color:var(--fg-soft);margin-top:4px;max-width:260px}

/* FABs */
.fabs{position:fixed;inset-inline-end:16px;z-index:40;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px;bottom:calc(18px + env(safe-area-inset-bottom));
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
body.playing .fabs,body.multi .fabs{transform:translateY(220%);opacity:0;pointer-events:none}
.fab{display:grid;place-items:center;border-radius:999px;transition:transform .12s}
.fab:active{transform:scale(.93)}
.fab-sm{width:46px;height:46px;background:var(--surface);color:var(--fg);
  border:1px solid var(--border);box-shadow:var(--shadow);font-size:16px}
.fab-lg{width:62px;height:62px;background:var(--accent);color:var(--accent-fg);
  box-shadow:0 10px 24px -8px rgba(15,23,42,.45);font-size:22px}
.fab-lg.rec{background:#dc2626;box-shadow:0 10px 24px -8px rgba(220,38,38,.5);
  animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}
  70%{box-shadow:0 0 0 16px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
.mic-engine{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.engine-seg{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;color:var(--fg-soft)}
.engine-seg .ico{font-size:11px}
.engine-seg.active{background:var(--accent);color:var(--accent-fg)}
.engine-seg .dot{width:5px;height:5px;border-radius:50%;background:#22c55e;margin-inline-start:1px}
.engine-seg .dot.off{background:#f59e0b}

/* overlays */
.overlay,.sheet{position:fixed;inset:0;z-index:50}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.add-menu{position:absolute;inset-inline-end:18px;display:flex;flex-direction:column;
  align-items:flex-end;gap:8px;bottom:calc(150px + env(safe-area-inset-bottom))}
.add-menu button{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  background:var(--surface);color:var(--fg);font-size:13px;font-weight:600;
  box-shadow:var(--shadow);border:1px solid var(--border)}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-panel{position:absolute;inset-inline:0;bottom:0;max-width:680px;margin:0 auto;
  background:var(--surface);border-radius:24px 24px 0 0;padding:10px 20px
  calc(24px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.18);
  animation:sheetIn .26s cubic-bezier(.2,.8,.2,1);max-height:90dvh;overflow-y:auto;
  /* ---- v14: hard stop on horizontal overflow ---- */
  overflow-x:hidden}
.sheet-panel.tall{max-height:93dvh}
/* every flex/grid child may shrink */
.sheet-panel *{min-width:0;max-width:100%}
.sheet-handle{width:40px;height:5px;border-radius:999px;background:var(--border);margin:0 auto 12px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheet-head h2{font-size:15px;font-weight:700}
.sheet-note{font-size:12px;line-height:1.55;color:var(--fg-soft);margin-bottom:12px}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.share-grid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;
  border-radius:16px;background:var(--surface-2);font-size:11px;font-weight:600}
.share-grid .ico{font-size:18px}
.field-label{display:block;font-size:12px;font-weight:600;color:var(--fg-soft);margin:12px 0 5px}
.field-select,.field-input{width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);font-size:13px}
.field-input.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.translate-out{margin-top:12px;padding:12px;border-radius:12px;background:var(--surface-2);
  font-size:14px;line-height:1.65;white-space:pre-wrap;max-height:36dvh;overflow-y:auto;
  overflow-wrap:anywhere}
.btn-row{display:flex;gap:8px;margin-top:12px}
.btn-col{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.btn-primary{flex:1;padding:12px;border-radius:12px;background:var(--accent);
  color:var(--accent-fg);font-size:13px;font-weight:700;display:flex;align-items:center;
  justify-content:center;gap:6px}
.btn-primary:disabled{opacity:.5}
.btn-ghost{flex:1;padding:12px;border-radius:12px;background:var(--surface-2);color:var(--fg);
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-primary.full,.btn-ghost.full{width:100%;margin-top:8px}
.btn-ghost.small{padding:8px 10px;font-size:12px;flex:none}
.btn-mini{padding:6px 10px;border-radius:8px;font-size:11.5px;font-weight:600;
  background:var(--surface-2);color:var(--fg)}
.btn-mini.warn{background:#f59e0b;color:#fff}
a.btn-ghost{text-decoration:none}
.setting-block{padding:16px 0;border-bottom:1px solid var(--border)}
.setting-block:last-child{border-bottom:0}
.setting-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--fg-faint);margin-bottom:10px}
.cap-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12.5px;padding:5px 0}
.cap-row>span:first-child{overflow-wrap:anywhere}
.cap-pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--surface-2);color:var(--fg-soft);white-space:nowrap;flex:none;
  max-width:150px;overflow:hidden;text-overflow:ellipsis}
.cap-pill.ok{background:#dcfce7;color:#166534}
.cap-pill.no{background:#fee2e2;color:#991b1b}
.cap-pill.warn{background:#fef3c7;color:#92400e}
html.dark .cap-pill.ok{background:#064e3b;color:#6ee7b7}
html.dark .cap-pill.no{background:#7f1d1d;color:#fca5a5}
html.dark .cap-pill.warn{background:#78350f;color:#fcd34d}
.about-card{background:linear-gradient(135deg,rgba(15,23,42,.06),rgba(15,23,42,.02));
  border:1px solid var(--border);border-radius:16px;padding:16px}
html.dark .about-card{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.about-card h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:8px}
.about-card p{font-size:12.5px;line-height:1.6;color:var(--fg-soft)}
.about-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.about-badges span{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);color:var(--fg-soft)}

/* community */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.stat-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;
  border-radius:14px;background:var(--surface-2);border:1px solid var(--border);text-align:center}
.stat-card .ico{font-size:18px;color:var(--fg-soft);margin-bottom:4px}
.stat-num{font-size:20px;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums}
.stat-label{font-size:10.5px;font-weight:600;color:var(--fg-faint)}
.rate-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.stars{display:flex;gap:2px}
.stars button{width:34px;height:34px;display:grid;place-items:center;color:var(--fg-faint);
  transition:color .12s,transform .1s}
.stars button .ico{font-size:22px;fill:none}
.stars button.lit{color:#f59e0b}
.stars button.lit .ico{fill:currentColor}
.stars button:active{transform:scale(.9)}

.key-row{display:flex;gap:6px;align-items:center}
.key-row .field-input{flex:1}
.key-row .icon-btn{width:38px;height:38px;border:1px solid var(--border);border-radius:12px}
.puter-box{border:1px solid var(--border);border-radius:14px;padding:12px;margin-top:8px;
  background:var(--surface-2)}
.puter-head{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-bottom:6px}
.puter-head .ico{font-size:14px;color:#6366f1}
.sarvam-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 8px}
.sarvam-prog{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-bottom:12px}
.sarvam-prog>div{height:100%;width:0;background:linear-gradient(90deg,#0ea5e9,#6366f1);transition:width .3s}
.sstep{display:flex;gap:10px;padding:10px;border-radius:12px;border:1px solid var(--border);
  margin-bottom:7px;background:var(--surface);transition:.15s}
.sstep.done{border-color:#22c55e;background:rgba(34,197,94,.07)}
.sstep-num{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:800;background:var(--surface-2);color:var(--fg-soft)}
.sstep.done .sstep-num{background:#22c55e;color:#fff}
.sstep-body{flex:1;min-width:0}
.sstep-body strong{display:block;font-size:12.5px;font-weight:700;margin-bottom:2px}
.sstep-body span{font-size:11.5px;line-height:1.45;color:var(--fg-soft);display:block;
  overflow-wrap:anywhere}
.sstep-link{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:11px;
  font-weight:700;color:#0ea5e9;text-decoration:none;overflow-wrap:anywhere}
.sstep-check{width:24px;height:24px;border-radius:8px;border:2px solid var(--border);
  display:grid;place-items:center;flex:none;color:transparent;font-size:11px}
.sstep.done .sstep-check{background:#22c55e;border-color:#22c55e;color:#fff}
.range-row{display:flex;justify-content:space-between;font-size:12.5px;margin:12px 0 4px}
input[type=range]{width:100%;accent-color:var(--accent)}
.engine-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:4px}
.engine-opt{display:flex;align-items:center;justify-content:center;padding:10px 6px;
  border-radius:11px;border:1px solid var(--border);font-size:12px;font-weight:600;
  cursor:pointer;text-align:center}
.engine-opt input{display:none}
.engine-opt:has(input:checked){border-color:var(--accent);background:var(--surface-2)}
.upload-row{display:flex;gap:6px;margin-top:6px}
.hint{font-size:10.5px;line-height:1.55;color:var(--fg-faint);margin-top:5px;
  overflow-wrap:anywhere}
.hint code{font-family:ui-monospace,monospace;font-size:10px;overflow-wrap:anywhere}
.bg-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.bg-swatch{height:38px;border-radius:10px;border:2px solid transparent;font-size:10px;
  font-weight:700;display:grid;place-items:center;overflow:hidden}
.bg-swatch.active{border-color:var(--accent)}
.color-wheel-wrap{margin-top:12px}
#colorWheel{width:170px;height:170px;border-radius:50%;display:block;margin:0 auto;
  cursor:crosshair;touch-action:none}
.color-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.color-preview{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);flex:none}

/* media bar */
.media-bar{position:fixed;inset-inline:0;z-index:40;bottom:env(safe-area-inset-bottom);
  transform:translateY(115%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.media-bar.show{transform:translateY(0)}
.media-inner{max-width:680px;margin:0 12px 12px;background:var(--accent);color:var(--accent-fg);
  border-radius:20px;padding:12px 14px;box-shadow:0 -8px 32px rgba(0,0,0,.25)}
.media-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.75;margin-bottom:6px}
.media-right{display:flex;align-items:center;gap:3px;text-transform:none;letter-spacing:0;font-size:10.5px}
.media-inner .icon-btn{color:inherit;opacity:.85}
.media-inner .icon-btn:hover{background:rgba(255,255,255,.16);opacity:1}
.karaoke{font-size:14px;font-weight:500;line-height:1.6;max-height:5.4em;overflow-y:auto;
  scrollbar-width:none}
.karaoke::-webkit-scrollbar{display:none}
.word{padding:0 1px;border-radius:3px;transition:background .08s,color .08s}
.word.active{background:#fbbf24;color:#0f172a}
.progress{height:3px;border-radius:2px;background:rgba(255,255,255,.18);margin:8px 0;overflow:hidden}
.progress>div{height:100%;background:#fbbf24;width:0;transition:width .2s}
.media-controls{display:flex;align-items:center;justify-content:space-between;gap:4px}
.play-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--accent-fg);color:var(--accent);font-size:17px}
.play-btn .ico-play{display:block}
.play-btn .ico-pause{display:none}
.play-btn[data-state="playing"] .ico-play{display:none}
.play-btn[data-state="playing"] .ico-pause{display:block}
.speed-sel{background:rgba(255,255,255,.16);color:inherit;border:0;border-radius:999px;
  padding:6px 9px;font-size:11px;font-weight:700}

/* multi */
.multi-bar{position:fixed;inset-inline:0;bottom:0;z-index:45;padding:12px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.multi-inner{max-width:680px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:8px 10px;border-radius:16px;
  background:var(--accent);color:var(--accent-fg);box-shadow:0 -8px 32px rgba(0,0,0,.25)}
.multi-inner>span{font-size:12.5px;font-weight:700;padding-inline-start:6px}
.multi-actions{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.multi-actions .btn-mini{background:rgba(255,255,255,.15);color:inherit}

/* format panel */
.format-panel{position:fixed;inset-inline:0;z-index:55;background:var(--surface);
  border-top:1px solid var(--border);box-shadow:0 -8px 28px rgba(0,0,0,.12);
  bottom:0;transition:bottom .15s ease-out;-webkit-user-select:none;user-select:none}
.fmt-tabs{display:flex;align-items:center;gap:4px;padding:6px 8px;
  border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.fmt-tabs::-webkit-scrollbar{display:none}
.fmt-tab{flex:none;padding:6px 11px;border-radius:7px;font-size:11.5px;font-weight:700;
  color:var(--fg-soft)}
.fmt-tab.active{background:var(--accent);color:var(--accent-fg)}
.fmt-tab-actions{margin-inline-start:auto;display:flex;gap:2px}
.fmt-panel{display:flex;gap:2px;padding:8px;overflow-x:auto;scrollbar-width:none}
.fmt-panel::-webkit-scrollbar{display:none}
.fmt-action{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:52px;
  padding:6px;border-radius:9px;font-size:10px;font-weight:600;color:var(--fg-soft)}
.fmt-action:hover,.fmt-action:active{background:var(--surface-2)}
.fmt-action b,.fmt-action i,.fmt-action u,.fmt-action s{font-size:15px;line-height:1}
.fmt-action .ico{font-size:17px}

/* video */
.video-overlay{position:fixed;inset:0;z-index:97;display:grid;place-items:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(4px);padding:20px}
.vo-card{background:var(--surface);border-radius:18px;padding:24px;max-width:340px;
  width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.vo-label{font-size:14px;font-weight:700;color:var(--fg)}
.vo-bar{height:8px;border-radius:4px;background:var(--surface-2);margin:14px 0 10px;overflow:hidden}
.vo-bar>div{height:100%;width:0;background:linear-gradient(90deg,#0ea5e9,#6366f1);
  transition:width .2s linear}
.vo-sub{font-size:11.5px;line-height:1.5;color:var(--fg-soft);margin-bottom:14px}
.video-poster{width:100%;max-height:200px;object-fit:cover;border-radius:12px;
  border:1px solid var(--border);background:var(--surface-2)}

/* toast / busy */
.toast{position:fixed;inset-inline:0;z-index:90;bottom:calc(170px + env(safe-area-inset-bottom));
  margin:0 auto;width:fit-content;max-width:88%;padding:9px 16px;border-radius:999px;
  background:rgba(15,23,42,.95);color:#fff;font-size:12.5px;font-weight:600;
  text-align:center;opacity:0;transform:translateY(-6px);
  transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.busy{position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.busy-card{background:var(--surface);border-radius:18px;padding:24px 28px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);max-width:280px}
.busy-card p{font-size:13px;font-weight:600;margin-top:12px;color:var(--fg)}
.spinner{width:28px;height:28px;border-radius:50%;margin:0 auto;border:3px solid var(--border);
  border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:360px){
  .view-chip{padding:0 6px;font-size:10px}
  .share-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lang-sel{width:96px}
  .stat-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}