:root{color-scheme:light dark}

/* Die Farben dürfen NICHT davon abhängen, dass JavaScript ein Attribut
   setzt. Sonst ist die Seite weiß, solange das Skript noch lädt – und
   für immer weiß, falls es gar nicht lädt.
   Deshalb: Dunkel ist die Grundeinstellung, Hell greift über die
   Systemeinstellung, und die Auswahl in der App setzt sich per Attribut
   darüber. */
:root,
html[data-theme="dark"]{
  --base:#071a24;
  --base-2:#0a2430;
  --text:#EEFBFF;
  --text-2:rgba(238,251,255,.62);
  --text-3:rgba(238,251,255,.38);
  --glass:rgba(255,255,255,.08);
  --glass-2:rgba(255,255,255,.13);
  --edge:rgba(255,255,255,.15);
  --hair:rgba(255,255,255,.09);
  --sheet:rgba(11,36,48,.82);
  --lens-fill:rgba(255,255,255,.10); --lens-rim:rgba(255,255,255,.55);
  --lens-blend:plus-lighter; --lens-fringe:.62;
  --aurora:.42;
  --shadow:0 22px 55px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
  --base:#DCEDF4;
  --base-2:#EAF6FA;
  --text:#042029;
  --text-2:rgba(4,32,41,.68);
  --text-3:rgba(4,32,41,.46);
  --glass:rgba(255,255,255,.55);
  --glass-2:rgba(255,255,255,.75);
  --edge:rgba(255,255,255,.9);
  --hair:rgba(4,32,41,.09);
  --sheet:rgba(252,254,255,.85);
  --lens-fill:rgba(255,255,255,.42); --lens-rim:rgba(255,255,255,.95);
  --lens-blend:overlay; --lens-fringe:.85;
  --aurora:.30;
  --shadow:0 22px 55px rgba(6,60,80,.16);
  }
}

html[data-theme="light"]{
  --base:#DCEDF4;
  --base-2:#EAF6FA;
  --text:#042029;
  --text-2:rgba(4,32,41,.68);
  --text-3:rgba(4,32,41,.46);
  --glass:rgba(255,255,255,.55);
  --glass-2:rgba(255,255,255,.75);
  --edge:rgba(255,255,255,.9);
  --hair:rgba(4,32,41,.09);
  --sheet:rgba(252,254,255,.85);
  --lens-fill:rgba(255,255,255,.42); --lens-rim:rgba(255,255,255,.95);
  --lens-blend:overlay; --lens-fringe:.85;
  --aurora:.30;
  --shadow:0 22px 55px rgba(6,60,80,.16);
}
:root{--mint:#4FE8B0;--cyan:#1EC8F0;--blur:saturate(175%) blur(28px);
  --lens-w:112px;--lens-h:96px;--lens-round:44% / 46%;--lens-zoom:1.42}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--base)}
body{
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit;background:none;border:0;outline:none;width:100%}

/* Grundfläche + Farbschleier, unabhängig vom body gemalt */
#base{position:fixed;inset:0;z-index:0;background:var(--base);overflow:hidden}
#base b{position:absolute;display:block;border-radius:50%;filter:blur(80px);opacity:var(--aurora)}
#base b.a{width:130vw;height:65vh;left:-40vw;top:-16vh;background:radial-gradient(circle at 45% 45%,var(--mint),transparent 63%)}
#base b.b{width:120vw;height:75vh;right:-45vw;bottom:-20vh;background:radial-gradient(circle at 55% 50%,var(--cyan),transparent 63%)}

.glass{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--edge)}

/* ---------- Splash ---------- */
#splash{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--base);
  transition:opacity .55s ease,visibility .55s}
#splash.done{opacity:0;visibility:hidden}
#splash .in{text-align:center;animation:pop 1s cubic-bezier(.2,.8,.25,1) both}
@keyframes pop{from{opacity:0;transform:scale(.88) translateY(12px)}to{opacity:1;transform:none}}
.logo{width:150px;display:block;margin:0 auto;animation:float 3.4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cap{margin-top:30px;color:var(--text-2);font-size:14.5px}
.bar{width:120px;height:3px;border-radius:3px;margin:15px auto 0;overflow:hidden;background:var(--hair)}
.bar i{display:block;height:100%;width:36%;border-radius:3px;
  background:linear-gradient(90deg,var(--mint),var(--cyan));animation:slide 1.3s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}

/* ---------- Lock ---------- */
#lock{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:0 26px;
  transition:opacity .45s ease}
#lock.show{display:grid}
#lock.done{opacity:0;pointer-events:none}
.card{width:100%;max-width:340px;padding:34px 26px 28px;border-radius:28px;text-align:center;
  background:var(--glass-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--edge);box-shadow:var(--shadow)}
.card .logo{width:88px;animation:none}
.card h1{font-size:24px;font-weight:640;letter-spacing:-.022em;margin:22px 0 6px;color:var(--text)}
.card p{margin:0 0 26px;color:var(--text-2);font-size:14.5px;line-height:1.5}
.faceid{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:15px 0;border-radius:16px;font-weight:600;font-size:16px;color:#042029;
  background:linear-gradient(135deg,var(--mint),var(--cyan));
  box-shadow:0 10px 26px color-mix(in srgb,var(--cyan) 32%,transparent)}
.faceid:active{transform:scale(.975)}
.faceid svg{width:22px;height:22px}
.alt{margin-top:16px;color:var(--text-2);font-size:14px;text-decoration:underline;text-underline-offset:3px}

/* ---------- Shell ---------- */
#shell{position:relative;z-index:1;height:100%;display:none;flex-direction:column;opacity:0;transition:opacity .5s ease .05s}
#shell.show{display:flex}
#shell.on{opacity:1}

.topbar{position:sticky;top:0;z-index:20;border-width:0 0 1px;padding:calc(env(safe-area-inset-top) + 10px) 16px 11px}
.acct{display:flex;align-items:center;gap:11px;width:100%}
.badge{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  font-size:14px;font-weight:660;color:#042029;letter-spacing:-.02em;
  background:linear-gradient(140deg,var(--mint),var(--cyan))}
.acct-txt{min-width:0;flex:1;text-align:left}
.acct-txt b{display:block;font-size:16px;font-weight:620;letter-spacing:-.018em}
.acct-txt span{display:block;font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{width:15px;height:15px;color:var(--text-3);flex:none}
.search{display:flex;align-items:center;gap:9px;margin-top:12px;padding:10px 13px;border-radius:13px;
  background:var(--glass-2);border:1px solid var(--hair)}
.search svg{width:16px;height:16px;color:var(--text-3);flex:none}
.search input::placeholder{color:var(--text-3)}

.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:125px}

.daymark{padding:20px 20px 8px;font-size:13px;color:var(--text-3);font-weight:540}
.row{display:flex;gap:13px;padding:14px 18px 14px 16px;position:relative;width:100%;text-align:left;align-items:flex-start}
.row+.row::before{content:"";position:absolute;left:63px;right:0;top:0;height:1px;background:var(--hair)}
.row:active{background:var(--glass)}
.dot{width:8px;height:8px;border-radius:50%;margin-top:8px;flex:none;background:linear-gradient(140deg,var(--mint),var(--cyan))}
.dot.read{background:transparent}
.av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:14.5px;font-weight:620;color:#042029;background:linear-gradient(140deg,#93EFD4,#79DCF2)}
.body{min-width:0;flex:1}
.line1{display:flex;align-items:baseline;gap:8px}
.from{font-size:15.5px;font-weight:620;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.row.seen .from{font-weight:460;color:var(--text-2)}
.when{font-size:12.5px;color:var(--text-3);flex:none}
.subj{font-size:14.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.seen .subj{color:var(--text-2)}
.prev{font-size:13.5px;color:var(--text-3);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;gap:6px;margin-top:7px}
.tag{font-size:11.5px;padding:2.5px 8px;border-radius:6px;background:var(--glass-2);border:1px solid var(--hair);color:var(--text-2)}
.tag.src{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 38%,transparent)}
html[data-theme="light"] .tag.src{color:#0B8FB4}
.clip{width:13px;height:13px;color:var(--text-3);vertical-align:-1px;margin-right:3px}

.tabbar{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:30;
  display:flex;border-radius:22px;padding:9px 6px;box-shadow:var(--shadow)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-3);font-size:10.5px;padding:2px 0}
.tab svg{width:23px;height:23px}
.tab.on{color:var(--text)}
.tab.on svg{color:var(--cyan)}
html[data-theme="light"] .tab.on svg{color:#0B9FC6}
.fab{position:fixed;right:20px;bottom:calc(env(safe-area-inset-bottom) + 92px);z-index:31;
  width:56px;height:56px;border-radius:19px;display:grid;place-items:center;color:#042029;
  background:linear-gradient(140deg,var(--mint),var(--cyan));
  box-shadow:0 12px 30px color-mix(in srgb,var(--cyan) 36%,transparent)}
.fab:active{transform:scale(.94)}
.fab svg{width:25px;height:25px}

.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,12,18,.44);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.on{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;border-radius:26px 26px 0 0;
  border:1px solid var(--edge);border-bottom:0;background:var(--sheet);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  padding:10px 0 calc(env(safe-area-inset-bottom) + 18px);
  transform:translateY(102%);transition:transform .42s cubic-bezier(.32,.85,.3,1);
  max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.sheet.on{transform:none}
.grip{width:38px;height:5px;border-radius:3px;background:var(--hair);margin:0 auto 6px;flex:none}
.sheet h2{font-size:20px;font-weight:640;letter-spacing:-.02em;margin:10px 20px 4px}
.sheet .sub{margin:0 20px 12px;font-size:13.5px;color:var(--text-2)}
.sheet-scroll{overflow-y:auto}
.arow{display:flex;align-items:center;gap:12px;width:100%;padding:11px 20px;text-align:left}
.arow:active{background:var(--glass)}
.arow .badge{width:40px;height:40px;border-radius:13px}
.arow .t{flex:1;min-width:0}
.arow .t b{display:block;font-size:15.5px;font-weight:580}
.arow .t span{display:block;font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{font-size:12px;padding:3px 9px;border-radius:8px;font-weight:600;color:#042029;
  background:linear-gradient(140deg,var(--mint),var(--cyan))}
.check{width:19px;height:19px;color:var(--cyan);flex:none}
html[data-theme="light"] .check{color:#0B9FC6}

#reader{position:fixed;inset:0;z-index:60;background:var(--base);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.32,.85,.3,1)}
#reader.on{transform:none}
.rbar{border-width:0 0 1px;padding:calc(env(safe-area-inset-top) + 9px) 8px 10px;display:flex;align-items:center;gap:2px}
.ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--text-2)}
.ico:active{background:var(--glass)}
.ico svg{width:21px;height:21px}
.rbody{flex:1;overflow-y:auto;padding:20px 20px 135px}
/* Ein sehr langer Betreff ohne Leerzeichen würde die Seite sonst breiter
   machen als den Bildschirm – dann lässt sie sich seitlich wegschieben. */
.rbody{overflow-x:hidden}
.rbody h1{font-size:23px;line-height:1.26;font-weight:660;letter-spacing:-.026em;margin:0 0 16px;
  overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.rmeta b,.rmeta span,.rfrom span{overflow-wrap:anywhere;word-break:break-word}
#reader{overflow:hidden}
.rfrom{display:flex;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.rfrom .av{width:44px;height:44px}
.rtext{margin-top:20px;font-size:16px;line-height:1.62;max-width:36em}
.rtext p{margin:0 0 15px}
.replybar{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:62;
  display:flex;gap:8px;padding:8px;border-radius:20px;box-shadow:var(--shadow)}
.rbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 0;
  border-radius:14px;font-size:14.5px;font-weight:560;background:var(--glass-2);border:1px solid var(--hair)}
.rbtn svg{width:17px;height:17px}
.rbtn.pri{color:#042029;border-color:transparent;background:linear-gradient(140deg,var(--mint),var(--cyan))}

#compose .fld{display:flex;gap:10px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--hair)}
#compose .fld label{font-size:14.5px;color:var(--text-3);width:56px;flex:none}
#compose textarea{padding:16px 20px;min-height:170px;resize:none;font-size:16px;line-height:1.6}
.sendrow{display:flex;gap:10px;padding:12px 20px 0}
.sendrow .rbtn{padding:13px 0;font-size:15.5px}

.seg{display:flex;gap:4px;margin:0 20px;padding:4px;border-radius:14px;background:var(--glass-2);border:1px solid var(--hair)}
.seg button{flex:1;padding:9px 0;border-radius:10px;font-size:14.5px;font-weight:540;color:var(--text-2)}
.seg button.on{color:var(--text);background:var(--glass);border:1px solid var(--edge)}
.sect{margin:26px 20px 9px;font-size:13px;color:var(--text-3);font-weight:540}
.srow{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid var(--hair);font-size:15.5px}
.srow span{margin-left:auto;color:var(--text-3);font-size:14px}
.empty{text-align:center;padding:90px 40px;color:var(--text-3)}
.empty svg{width:44px;height:44px;margin-bottom:14px;opacity:.5}
.empty b{display:block;color:var(--text-2);font-weight:580;font-size:16px;margin-bottom:5px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ---------- Ergänzungen für die echte App ---------- */
#lock .lockerr,.cerr{margin-top:14px;font-size:13.5px;color:#ff9b9b;
  background:rgba(255,110,110,.12);border:1px solid rgba(255,110,110,.35);
  border-radius:11px;padding:9px 12px;text-align:left}
#pwInput{margin-top:6px;padding:13px 14px;border-radius:14px;font-size:16px;
  background:var(--glass);border:1px solid var(--edge)}
#pwInput::placeholder{color:var(--text-3)}

/* Absenderkopf in der Leseansicht */
.rhead{padding-bottom:16px;border-bottom:1px solid var(--hair)}
.rhead h1{font-size:23px;line-height:1.26;font-weight:660;letter-spacing:-.026em;margin:0 0 14px}
.rmeta{display:flex;gap:12px;align-items:center}
.rmeta .av{width:44px;height:44px}
.rmeta b{display:block;font-size:15.5px}
.rmeta span{display:block;font-size:13px;color:var(--text-2)}

/* Hinweisleisten */
.banner{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;
  border-radius:14px;font-size:13.5px;line-height:1.5;border:1px solid var(--hair);background:var(--glass-2)}
.banner svg{width:18px;height:18px;flex:none;margin-top:1px}
.banner .txt{flex:1;min-width:0}
.banner button{margin-top:8px;padding:7px 13px;border-radius:10px;font-size:13px;font-weight:560;
  background:var(--glass);border:1px solid var(--edge)}
.banner.warn{background:rgba(255,190,80,.13);border-color:rgba(255,190,80,.4)}
.banner.warn svg{color:#f0a93c}
.banner.bad{background:rgba(255,110,110,.13);border-color:rgba(255,110,110,.45)}
.banner.bad svg{color:#ff7a7a}

/* Mailinhalt im abgeschotteten Rahmen */
.mailframe{width:100%;border:0;display:block;margin-top:18px;background:transparent;min-height:120px}

/* Anhänge */
.attachwrap{margin-top:22px}
.attachwrap h3{font-size:13px;color:var(--text-3);font-weight:540;margin:0 0 10px}
.att{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:11px 13px;
  border-radius:15px;background:var(--glass-2);border:1px solid var(--hair);margin-bottom:8px}
.att:active{transform:scale(.99)}
.att.lvl-warn{border-color:rgba(255,190,80,.45)}
.att.lvl-blocked{border-color:rgba(255,110,110,.5);background:rgba(255,110,110,.08)}
.att .ficon{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--mint),var(--cyan));color:#042029}
.att.lvl-blocked .ficon{background:linear-gradient(140deg,#ff9a8b,#ff6b6b);color:#3a0d0d}
.att.lvl-warn .ficon{background:linear-gradient(140deg,#ffd08a,#f0a93c);color:#3a2405}
.att .ficon svg{width:20px;height:20px}
.att .meta{flex:1;min-width:0}
.att .meta b{display:block;font-size:14.5px;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .meta span{display:block;font-size:12.5px;color:var(--text-2)}
.att .why{font-size:12.5px;color:var(--text-2);margin-top:3px;line-height:1.45;white-space:normal}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:10px}
.thumbs img{width:100%;height:120px;object-fit:cover;border-radius:14px;border:1px solid var(--hair);display:block}

/* Anhänge im Verfassen-Fenster */
.cfiles{padding:0 20px}
.cfiles .chip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:11px;
  background:var(--glass-2);border:1px solid var(--hair);font-size:13px;margin:0 6px 6px 0}
.cfiles .chip button{color:var(--text-3);font-size:16px;line-height:1}
.attachbtn{cursor:pointer}

/* Ladezustände */
.skel{padding:16px}
.skel i{display:block;height:13px;border-radius:6px;background:var(--glass-2);margin-bottom:10px;
  animation:pulse 1.4s ease-in-out infinite}
.skel i:nth-child(2){width:70%}.skel i:nth-child(3){width:45%}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.9}}

#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 100px);z-index:95;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.28s;
  padding:11px 18px;border-radius:14px;font-size:14px;background:var(--sheet);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--edge);box-shadow:var(--shadow);max-width:82vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}


/* ---------- Lupe auf der Tab-Leiste ---------- */
/* Ohne touch-action fängt iOS beim Halten an zu scrollen und blendet
   seine eigene Textauswahl ein. */
.tabbar{touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
/* Die Knöpfe bekommen keine eigenen Ereignisse mehr – Tippen und Halten
   werden beide über die Leiste ausgewertet, sonst beißt sich das. */
.tab{pointer-events:none}

#lens{
  position:fixed;left:0;top:0;z-index:35;
  width:var(--lens-w);height:var(--lens-h);border-radius:var(--lens-round);
  opacity:0;visibility:hidden;will-change:transform;
  transition:opacity .16s ease,visibility .16s;
  background:var(--lens-fill);
  -webkit-backdrop-filter:blur(2px) saturate(185%) brightness(1.06);
  backdrop-filter:blur(2px) saturate(185%) brightness(1.06);
  box-shadow:
    0 10px 26px rgba(0,0,0,.16),
    inset 0 2px 2px var(--lens-rim),
    inset 0 -3px 5px rgba(255,255,255,.45),
    inset 0 0 0 1px rgba(255,255,255,.35);
}
#lens.on{opacity:1;visibility:visible}
.lens-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
/* right und bottom MÜSSEN weg. Die Kopie erbt sie von .tabbar, und bei
   absoluter Positionierung mit gesetztem top UND bottom rechnet der Browser
   die Höhe aus dem Abstand aus. Die Leiste würde auseinandergezogen, das
   Symbol rutschte nach oben aus der Blase und nur die Beschriftung bliebe
   sichtbar. */
.clone{position:absolute!important;left:0;top:0;right:auto!important;bottom:auto!important;
  height:auto!important;margin:0;
  background:none!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;will-change:transform}
.lens-fringe{
  position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 205deg,
    rgba(255,86,180,.95),rgba(255,178,86,.85),rgba(120,255,214,.85),
    rgba(96,164,255,.95),rgba(198,120,255,.9),rgba(255,86,180,.95));
  -webkit-mask:radial-gradient(closest-side,transparent 79%,#000 93%,#000 100%);
  mask:radial-gradient(closest-side,transparent 79%,#000 93%,#000 100%);
  mix-blend-mode:var(--lens-blend);opacity:var(--lens-fringe);filter:blur(2.5px);
}
.lens-gloss{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -12%,rgba(255,255,255,.75),transparent 58%),
    radial-gradient(90% 55% at 50% 112%,rgba(255,255,255,.35),transparent 60%);
}
@media (prefers-reduced-motion:reduce){#lens{display:none}}



/* ---------- Regler in den Einstellungen ---------- */
.tune{display:flex;align-items:center;gap:12px;padding:11px 20px;border-top:1px solid var(--hair);
  font-size:14.5px}
.tune label{flex:none;width:112px;color:var(--text-2)}
.tune input[type=range]{flex:1;min-width:0;accent-color:var(--cyan);height:26px}
.tune b{width:46px;text-align:right;font-variant-numeric:tabular-nums;font-weight:560}