/* ============ OmniTree ============
   Colors come from app.js (applyTheme sets --bg --fg --mut --card --solid --line --ac --acfg --acsoft --acglow),
   so everything here only uses those tokens. */
*{box-sizing:border-box}
:root{--dock-w:460px;--r:16px;--r-sm:10px;--up:#2fd17f;--down:#ff5c6c;--live:#ff4655;--ease:cubic-bezier(.2,.7,.2,1)}
:root[data-theme=dark]{--bg:#0b0e14;--fg:#e9ecf2;--mut:#8c93a3;--card:rgba(22,26,36,.72);--line:rgba(255,255,255,.1);--solid:#141824;--shadow:0 12px 32px -14px rgba(0,0,0,.65);--hl:rgba(255,255,255,.06)}
:root[data-theme=light]{--bg:#eceff4;--fg:#161a22;--mut:#5d6575;--card:rgba(255,255,255,.8);--line:rgba(0,0,0,.1);--solid:#fff;--shadow:0 10px 28px -16px rgba(20,30,60,.35);--hl:rgba(255,255,255,.7)}
html{background:var(--bg)}
/* the page color sits on <html>; <body> must stay see-through or it covers the wallpaper layer behind it */
body{margin:0;min-height:100vh;background:transparent;color:var(--fg);font:15px/1.45 "Bricolage Grotesque",system-ui,sans-serif;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);-webkit-font-smoothing:antialiased}
::selection{background:var(--ac);color:var(--acfg)}

/* ---- Background: wallpaper, or a soft glow in your accent color ---- */
#wall{position:fixed;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-2}
#aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  background:radial-gradient(40vmax 30vmax at 15% 10%,var(--acglow),transparent 70%),
             radial-gradient(35vmax 28vmax at 90% 20%,rgba(90,120,255,.16),transparent 70%),
             radial-gradient(45vmax 35vmax at 60% 110%,var(--acsoft),transparent 70%)}
body.haswall #aurora,body.noaurora #aurora{display:none}

/* ---- Page frame ---- */
#app{max-width:1200px;margin:auto;padding:20px}
header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
#day{font-size:calc(40px*var(--gfs,1));font-weight:800;line-height:1;letter-spacing:-1px;
  background:linear-gradient(100deg,var(--fg) 30%,var(--ac));-webkit-background-clip:text;background-clip:text;color:transparent}
#date{margin-top:4px;font-variant-numeric:tabular-nums}
/* the next thing in your calendar, one small line under the date; the header gives up some of its bottom gap for it */
#nextUp{display:block;margin:2px 0 0;padding:0;border:0;background:none;font:inherit;font-size:11.5px;line-height:1.25;color:var(--nextc,var(--ac));text-align:left;cursor:pointer;max-width:min(46ch,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nextUp[hidden]{display:none}
#nextUp:hover{text-decoration:underline}
header.hasnext{margin-bottom:6px}
/* The logo: the tree, a thin divider, then the name in two pictures. "OMNI" is dark in the picture, so on the dark
   theme it is turned light; "TREE" keeps its own blue. */
#logoImg{--lh:44px;height:var(--lh);display:flex;align-items:center;gap:calc(var(--lh)*.2);flex:none;filter:drop-shadow(0 4px 14px rgba(0,0,0,.25))}
#logoImg .lgi{height:calc(var(--lh)*.8);width:auto;display:block}
#logoImg .lgs{width:1px;height:calc(var(--lh)*.68);background:var(--mut);opacity:.5}
#logoImg .lgo,#logoImg .lgt{height:calc(var(--lh)*.5);width:auto;display:block}
html[data-theme=dark] #logoImg .lgo{filter:invert(1) brightness(1.15)}
#logoImg .lgt{margin-left:calc(var(--lh)*-.2)}
/* Thin search box on the top line of the header; timers sit on the date line below it, so they never touch */
#srch{flex:0 1 280px;align-self:flex-start;margin:2px auto 0}
#srchIn{width:100%;height:26px;font:inherit;font-size:12.5px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:0 12px;outline:0;transition:border-color .15s}
#srchIn:focus{border-color:var(--ac)}
#srchIn::placeholder{color:var(--mut)}
footer{margin-top:18px;font-size:12px;text-align:center;opacity:.8}
.mut{color:var(--mut)}
.sn{font-size:13px}


/* ---- Controls ---- */
button,input[type=color]{font:inherit;font-size:13px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:6px 12px;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .1s}
button:hover{border-color:var(--ac)}
button:active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
input[type=color]{padding:0;width:38px;height:30px}
input[type=range]{accent-color:var(--ac);width:130px}
input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mut);border-radius:5px;background:none;cursor:pointer;vertical-align:middle;transition:background .15s,border-color .15s}
input[type=checkbox]:hover{border-color:var(--ac)}
input[type=checkbox]:checked{background:var(--ac);border-color:var(--ac)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--acfg);border-width:0 2px 2px 0;transform:rotate(45deg)}
select{font:inherit;font-size:13px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:4px 8px;max-width:180px;cursor:pointer}
option{background:var(--solid);color:var(--fg)}
.pri{background:var(--ac);color:var(--acfg);border-color:var(--ac);font-weight:600}
.pri:hover{box-shadow:0 0 0 4px var(--acsoft)}
a.btn{display:inline-block;padding:6px 12px;border-radius:9px;background:var(--ac);color:var(--acfg);text-decoration:none;font-size:13px;font-weight:600;transition:box-shadow .15s}
a.btn:hover{box-shadow:0 0 0 4px var(--acsoft)}
.lnk{background:none;border:0;padding:0;color:var(--fg);cursor:pointer;font:inherit;text-align:left;border-radius:4px}
.lnk:hover{color:var(--ac)}
a.lnk{color:var(--fg);text-decoration:none}
a.lnk:hover{color:var(--ac);text-decoration:underline}
.lnk2{background:none;border:0;padding:2px 0;color:var(--ac);text-decoration:underline;font-size:12px;text-align:left;cursor:pointer}
.acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.vis-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.filebtn{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--fg);cursor:pointer;font-size:13px}
.filebtn:hover{border-color:var(--ac)}
.filebtn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Grid of boxes ---- */
/* Every box is as tall as its own content. The grid is made of 1px rows and app.js (packGrid) tells each box
   how many of them it covers, so a short box can sit under another short box next to a tall one. */
#grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:14px;row-gap:0;grid-auto-rows:1px;grid-auto-flow:row dense;align-items:start}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}
.c8{grid-column:span 8}.c9{grid-column:span 9}.c10{grid-column:span 10}.c11{grid-column:span 11}.c12{grid-column:span 12}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0;font-size:calc(15px*var(--fs,1));box-shadow:var(--shadow),inset 0 1px 0 var(--hl);transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:color-mix(in srgb,var(--ac) 35%,var(--line))}
.card.menuopen{z-index:30}
/* Frosted glass only over a photo wallpaper (where it is visible); it is costly for the browser to redraw */
body.haswall .card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.editing .card{border-style:dashed;border-color:color-mix(in srgb,var(--ac) 50%,var(--line))}
.card h3{margin:0 0 8px;font-size:calc(13px*var(--fs,1));font-weight:600;color:var(--mut)}
.th{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin-bottom:6px}
.th h3{margin:0;white-space:nowrap;display:flex;align-items:center;gap:6px}
.card select{font-size:calc(12.5px*var(--fs,1));padding:3px 6px}
.card .ib.sm{font-size:calc(12px*var(--fs,1))}
.hc select[data-s^=sort]{flex:none}
.th h3::before{content:"";width:3px;height:12px;border-radius:3px;background:var(--ac);box-shadow:0 0 10px var(--acglow)}
.hc{display:flex;gap:6px;min-width:0;align-items:center}
.hc select{min-width:0;max-width:130px;text-overflow:ellipsis}
.hc select[data-s=tcat]{max-width:104px}
.hc .rf{flex:none;padding:2px 6px}
.click{cursor:pointer}
.click:hover{border-color:var(--ac)}
.big{font-size:calc(38px*var(--fs,1));font-weight:800;line-height:1;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.grab{cursor:grab}
.tools{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.tools button{padding:2px 8px;font-size:11px;min-width:24px;text-align:center}
.tools button.on{border-color:var(--ac);color:var(--ac)}
.mbox .tools button,.mbox p.tools button{font-size:13px;padding:6px 12px}
p.tools{align-items:center;gap:6px}

/* ---- Compact boxes (weather, mail, converter, menu) ---- */
.compact{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 12px;min-height:44px;font-size:calc(13px*var(--fs,1))}
.compact>h3{margin:0 0 3px;flex:none;white-space:nowrap}
.compact .mrow{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;flex-wrap:nowrap}
.compact .mrow .mut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.compact .tools{flex-basis:100%;margin:0 0 4px}
.compact .big{font-size:calc(18px*var(--fs,1))}
.compact .mut{font-size:inherit}
.compact .dh{cursor:grab;color:var(--mut);flex:none}
.mrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mrn{color:var(--mut);flex:none;min-width:0;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wi{color:var(--ac);display:inline-flex;filter:drop-shadow(0 0 6px var(--acglow))}
.mailgrid{display:grid;grid-template-columns:1fr 1fr;flex:1 1 0;min-width:0}
.mailcell{display:flex;align-items:center;gap:6px;min-width:0;padding:0 10px}
.mailcell:first-child{padding-left:0}
.mailcell+.mailcell{border-left:1px solid var(--line);padding-right:0}
.mailcell[data-a]{cursor:pointer}
.mailcell[data-a]:hover .mrn{color:var(--ac)}
.mailcell b{font-variant-numeric:tabular-nums}
.mailcell .mut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mailcell button{margin-left:auto;flex:none;padding:0 6px;font-size:12px}
.menurow{flex:1 1 0;justify-content:center;gap:6px;flex-wrap:wrap}
.menurow .dd{position:relative}
.menurow .dd:last-child .menu{left:auto;right:0}
.menurow .menu{left:0;right:auto;top:calc(100% + 6px);z-index:31}
.ib{display:inline-flex;align-items:center;gap:4px;padding:4px 7px}
.ib svg{display:block}
.ib span:empty{display:none}
.ib span{font-size:11px;font-weight:700;color:var(--ac)}
.ib.on{border-color:var(--ac);color:var(--ac)}
.ib.sm{padding:2px 8px;font-size:12px}
/* Radio: station list, play, stop, volume */
.compact .mrow.radio{flex-wrap:nowrap;gap:6px}
.radio select{flex:1 1 0;min-width:0;max-width:none;text-overflow:ellipsis}
.radio .ib{flex:none;padding:4px 6px}
.radio .ib.bad{border-color:var(--down);color:var(--down)}
.radio .ib.busy svg{opacity:.45}
.radio .dd{position:relative;flex:none}
.radio .menu.volpop{left:auto;right:0;top:calc(100% + 6px);z-index:31;display:flex;align-items:center;gap:8px;padding:8px 10px;min-width:0;width:170px}
.volpop input[type=range]{flex:1 1 0;min-width:0}
.volpop span{flex:none;width:2.2em;text-align:right;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){.radio .ib.busy svg{animation:radbusy 1s ease-in-out infinite alternate}}
@keyframes radbusy{to{opacity:1}}
/* what the radio is playing: window and hover card */
.card[data-a=radinfo]{cursor:pointer}
.rnp{display:flex;gap:14px;align-items:flex-start}
.rnp img,.rnpx{flex:none;width:132px;height:132px;border-radius:12px;object-fit:cover;background:var(--bg);border:1px solid var(--line)}
.rnpx{display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--mut)}
.rnp>div{min-width:0;flex:1}
.rnp .mh{font-size:19px;margin-bottom:2px}
.rnpa{font-size:15px;font-weight:600;margin-bottom:4px}
.rnp .tools{margin:8px 0 0}
#rnpW:empty{display:none}
.rnph{font-size:13px;padding:4px 0}
.rnph span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rnpf{margin:10px 0 0}
#peek .rpk{flex-direction:row;gap:9px;align-items:center}
#peek.fpk .rpk img{flex:none;width:52px;height:52px;border-radius:6px;object-fit:cover}
#peek.fpk:has(.rpk){width:270px}
#peek .rpk small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#peek .rpk>div{display:flex;flex-direction:column;gap:1px;min-width:0}
#peek .rpk b,#peek .rpk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:520px){.rnp img,.rnpx{width:88px;height:88px}}
.rlang{color:var(--mut);font-size:11.5px;margin-left:6px;padding:0 6px;border:1px solid var(--line);border-radius:99px}
/* "help" in the search bar */
.shelp{width:100%;border-collapse:collapse;font-size:13px}
.shelp th{text-align:left;font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;padding:10px 0 3px}
.shelp td{padding:4px 8px 4px 0;border-top:1px solid var(--line);vertical-align:top}
.shelp td:first-child{white-space:nowrap;width:1%}
.pairwrap{grid-column:span 6;display:flex;gap:10px;align-items:stretch;min-width:0}
.pairwrap>.card{min-width:0}
.paird{flex:0 0 18px;align-self:stretch;background:transparent;border:0;border-radius:8px;color:var(--mut);cursor:ew-resize;touch-action:none;font-size:14px;letter-spacing:-2px}
.paird:hover,.paird:focus-visible{color:var(--ac);background:var(--card)}

/* ---- Lists and rows ---- */
.list{max-height:360px;overflow-y:auto;overscroll-behavior:contain;padding-right:12px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);transition:color .15s}
.row:last-child{border-bottom:0}
.list .row:hover .lnk{color:var(--ac)}
.row>span:first-child{min-width:0}
.row small{color:var(--mut)}
.r{display:flex;align-items:center;gap:6px;white-space:nowrap}
.r button{padding:1px 8px}
.row.new{box-shadow:inset 3px 0 0 var(--ac);padding-left:8px;background:linear-gradient(90deg,var(--acsoft),transparent 60%)}
.row.rd>span:first-child{opacity:.55}
.row.hi .lnk{color:color-mix(in srgb,var(--ac) 65%,var(--fg));font-weight:700}
/* Time label ("Last hour") printed on the divider line above the first headline of that period: no extra row */
.row{position:relative}
.list[data-list=news]{padding-top:5px}
.row.bk{padding-top:9px}
.row.bk::before{content:attr(data-b);position:absolute;left:0;top:-1px;transform:translateY(-50%);font-size:calc(10px*var(--fs,1));font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1;color:var(--mut);background:var(--solid);padding-right:6px;pointer-events:none}
/* Telegram: two full lines per post, cut where the space ends */
.row.tg .lnk{display:block;width:100%}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.35}
.clamp small{color:var(--mut)}
.flt{width:100%;font:inherit;font-size:calc(13px*var(--fs,1));color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:9px;padding:5px 10px;margin:0 0 6px;outline:0}
.flt:focus{border-color:var(--ac)}
.fv{color:var(--ac);font-style:normal;margin-right:4px}
.pill{font-size:calc(11px*var(--fs,1));padding:1px 8px;border-radius:99px;border:1px solid var(--line);color:var(--mut);font-variant-numeric:tabular-nums}
.pill.ac{background:var(--ac);border-color:var(--ac);color:var(--acfg);font-weight:600}
.pill.hot{background:linear-gradient(90deg,#ff7a18,#ff3d6e);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 0 10px rgba(255,80,80,.45)}
button.pill{cursor:pointer;line-height:1.5}
.newp{animation:pop .4s var(--ease)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.up{color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent);padding:0 6px;border-radius:6px;font-variant-numeric:tabular-nums;font-weight:600}
.down{color:var(--down);background:color-mix(in srgb,var(--down) 14%,transparent);padding:0 6px;border-radius:6px;font-variant-numeric:tabular-nums;font-weight:600}
.dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);margin-right:7px}
/* the pulse animates only transform/opacity, which the GPU handles without repainting the list */
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);opacity:0}
@media(prefers-reduced-motion:no-preference){.dot::after{animation:live 2s ease-out infinite}}
@keyframes live{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.4);opacity:0}}
.empty{color:var(--mut);padding:8px 0}
.ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:calc(20px*var(--fs,1));height:calc(20px*var(--fs,1));border-radius:50%;flex:none;vertical-align:middle;margin-right:6px;overflow:hidden;background:hsl(var(--h) 45% 32%);color:#fff;font-size:calc(9px*var(--fs,1));font-weight:700}
.ic i{font-style:normal}
.ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}

/* ---- Menus ---- */
.dd{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;background:var(--solid);border:1px solid var(--line);border-radius:12px;padding:4px;z-index:8;display:flex;flex-direction:column;gap:2px;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);animation:menuin .14s var(--ease)}
@keyframes menuin{from{opacity:0;transform:translateY(-4px)}}
.menu[hidden]{display:none}
.menu button{border:0;background:transparent;text-align:left;padding:7px 10px;border-radius:8px;width:100%;font-size:14px}
.menu button:hover,.menu button:focus-visible{background:var(--acsoft)}
.menu label{display:flex;gap:8px;align-items:center;padding:5px 8px;font-size:13px;white-space:nowrap;cursor:pointer;border-radius:7px}
.menu label:hover{background:var(--acsoft)}
.acctpop{min-width:200px;gap:6px;padding:10px}
.acctpop input{width:100%;font:inherit;font-size:12.5px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.acctpop input:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.acctpop .acts{display:flex;gap:6px}
.acctpop .acts button,.acctpop>button:not(.lnk2){flex:1;text-align:center;background:var(--ac);color:var(--acfg);border-color:var(--ac);padding:5px 6px;border-radius:8px;font-size:12px;font-weight:600}
.acctpop>.mut{padding:2px 2px 0;font-size:12px}

/* ---- Settings panel ---- */
/* ---- Settings window: sections on the left, one section at a time on the right ---- */
#panel{position:fixed;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,7,12,.7)}
#panel[hidden]{display:none}
.setwin{display:grid;grid-template-columns:210px 1fr;width:min(880px,100%);height:min(640px,calc(100vh - 32px));background:var(--solid);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);animation:modalin .2s var(--ease)}
#setNav{display:flex;flex-direction:column;gap:1px;padding:16px 10px;background:var(--bg);border-right:1px solid var(--line);overflow-y:auto}
.navtitle{font-size:16px;font-weight:800;padding:0 10px 8px}
.navcat{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);padding:12px 10px 4px}
#setNav button{border:0;background:none;text-align:left;padding:6px 10px;border-radius:8px;font-size:13.5px;color:var(--mut)}
#setNav button:hover{background:var(--card);color:var(--fg)}
#setNav button.on{background:var(--acsoft);color:var(--fg);font-weight:600}
.setmain{display:flex;flex-direction:column;min-width:0;min-height:0}
.setmain>.ph{padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.setmain>.ph b{font-size:17px}
.setbody{flex:1;overflow-y:auto;padding:16px 20px 20px}
.ph{display:flex;justify-content:space-between;align-items:center}
.setgrp{display:none;flex-direction:column;gap:10px;max-width:560px}
.setgrp.on{display:flex}
@media(max-width:700px){.setwin{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:calc(100vh - 32px)}#setNav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}.navtitle,.navcat{display:none}#setNav button{white-space:nowrap}}
.setgrp h4{margin:0 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ac)}
.setgrp label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.setgrp .sub{display:flex;flex-direction:column;gap:6px;padding:10px;margin:2px 0;background:var(--card);border:1px solid var(--line);border-radius:12px}
.setgrp .sub b{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.setgrp input[type=text],.setgrp input[type=password],.setgrp input[type=email],.setgrp textarea,.setgrp .add input{width:100%;font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px;min-width:0}
.setgrp label input[type=password]{width:auto;flex:1}
.setgrp .row button{padding:1px 8px}
.setgrp .add{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.setgrp .add input{flex:1 1 90px}
.add{display:flex;gap:6px;margin-top:8px}
.add input{flex:1;min-width:0;font:inherit;font-size:14px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.imp{align-items:flex-start}
.imp textarea{flex:1;min-width:0;font:inherit;font-size:13px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:6px 10px}
label.add{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
#wallFile{max-width:150px;font-size:12px}

/* ---- Details window ---- */
#modal{position:fixed;inset:0;background:rgba(5,7,12,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40}
#modal[hidden]{display:none}
.mbox{background:var(--solid);border:1px solid var(--line);border-radius:18px;padding:18px;width:min(760px,100%);max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);animation:modalin .2s var(--ease)}
@keyframes modalin{from{opacity:0;transform:translateY(8px) scale(.98)}}
.mbox .ph{margin-bottom:10px}
.mbox h3{margin:16px 0 6px;font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;scroll-margin-top:10px}
.mbox input[type=search]{flex:1}
.mbox input[type=text],.mbox input[type=search],.mbox input[type=time],.mbox input[type=number],.mbox input[type=datetime-local],.mbox textarea{font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 10px;min-width:0}
.mbox textarea{width:100%;resize:vertical}
.mbox .add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.mbox .add label{display:flex;align-items:center;gap:6px;font-size:13px}
.mbox .add input[type=number]{width:72px}
.mbox #cityIn{flex:1}
.mbox code{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.92em}
.mbox ol,.mbox ul{padding-left:20px;margin:8px 0}
.mbox li{margin-bottom:4px}
.mh{margin:0 0 4px;font-size:22px;line-height:1.25;letter-spacing:-.3px}
.mimg,.mvid{max-width:100%;border-radius:12px;margin:12px 0;display:block}
.mi{padding:10px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.mi:last-child{border:0}
.mi a{color:var(--fg)}
.mi a:hover{color:var(--ac)}
.mi .r2{display:flex;justify-content:space-between;gap:8px}
.mi .btn{align-self:flex-start;margin-top:4px}
.nt{white-space:pre-wrap}
/* the 12 hours share the width of the window, so there is nothing to scroll sideways */
.hrs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.hr{display:flex;flex-direction:column;align-items:center;min-width:0;padding:5px 1px;border:1px solid var(--line);border-radius:9px;font-variant-numeric:tabular-nums;font-size:12.5px;line-height:1.35}
.hr small{font-size:11px}
@media(max-width:560px){.hrs{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* the weather window fits on screen without a scroll bar */
.mbox:has(.hrs){max-height:96vh}
.mbox:has(.hrs) .row{padding:4px 0}
.mbox:has(.hrs) h3{margin:12px 0 5px}
.mbox:has(.hrs)>#mBody>p:last-child{margin:8px 0 0}
.tv{height:340px}
.tw{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.tw iframe{width:100%;height:100%;border:0;display:block}.helptoc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.helptoc button{font-size:12px;padding:4px 10px;border-radius:99px}
.codebox{margin:8px 0}
.codebox pre{max-height:260px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;margin-top:6px}
.copybtn{display:inline-block;padding:6px 12px;border:1px solid var(--ac);border-radius:9px;background:var(--ac);color:var(--acfg);font-weight:600;text-decoration:none}

/* ---- Timers ---- */
#clocks{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:16px;right:16px;z-index:9;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;pointer-events:none}
#clocks .clk{pointer-events:auto}
#clocks[hidden]{display:none}
.clk{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:1px 3px 1px 9px;font-size:11.5px;line-height:1.3;box-shadow:var(--shadow)}
.clk b{font-variant-numeric:tabular-nums}
.clk button{padding:0 5px;border-radius:99px;font-size:10.5px;line-height:1.5;min-height:0}
.clk.done{background:var(--ac);color:var(--acfg);border-color:var(--ac);animation:pulse 1s 4;box-shadow:0 0 24px var(--acglow)}
.clk.done button[data-a=clstop]{background:var(--acfg);color:var(--ac);border-color:var(--acfg);font-weight:600}
@keyframes pulse{50%{opacity:.55}}
input[type=datetime-local]{color-scheme:dark}
:root[data-theme=light] input[type=datetime-local]{color-scheme:light}

/* ---- Update banner ---- */
#upd{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ac);color:var(--acfg);padding:8px 14px;border-radius:99px;z-index:20;display:flex;gap:10px;align-items:center;font-size:14px;box-shadow:0 10px 30px var(--acglow)}
#upd[hidden]{display:none}
#upd button{background:transparent;color:inherit;border-color:currentColor}

/* ---- Docked players ---- */
#dock{position:fixed;left:0;top:0;bottom:0;width:var(--dock-w);background:transparent;padding:calc(10px + env(safe-area-inset-top,0px)) 6px 10px 10px;overflow-y:auto;z-index:4;display:flex;flex-direction:column;gap:6px}
#dock[hidden]{display:none}
body.docked{padding-left:var(--dock-w)}
/* A docked player is just the video (plus chat if you turn it on); its buttons show when the mouse is over it */
.dk{position:relative;display:flex;flex-direction:column;gap:6px;flex:none}
.dk>.tw{flex:none}
.dk.haschat{flex:1 1 auto}
.dkchat{position:relative;flex:1 1 auto;min-height:300px;max-width:100%;border-radius:12px;overflow:hidden}
.dkchat.fixedh{flex:none;min-height:0}
/* drag the bottom edge for height, the right edge for width */
.cgrip{position:absolute;z-index:2;touch-action:none}
.cgh{left:0;right:0;bottom:0;height:9px;cursor:ns-resize}
.cgw{top:0;bottom:9px;right:0;width:9px;cursor:ew-resize}
.cgrip:hover,.cgrip:active{background:var(--ac);opacity:.7}
.dkchat iframe{display:block;width:100%;height:100%;border:0}
.dkc{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.dk:hover .dkc,.dkc:focus-within{opacity:1}
.dkc button{background:rgba(0,0,0,.72);color:#fff;border:0;border-radius:7px;padding:3px 9px;font-size:12px}
.dkc button:hover{background:var(--ac);color:var(--acfg)}
@media(hover:none){.dkc{opacity:1}}
/* Settings > Appearance > Shadows off */
body.noshadow{--shadow:0 0 0 transparent;--hl:transparent}
body.noshadow #logoImg,body.noshadow .wi{filter:none}
body.noshadow .th h3::before,body.noshadow .mbox,body.noshadow .menu,body.noshadow .toast,body.noshadow #peek,body.noshadow #panel,body.noshadow .pill.hot,body.noshadow #upd,body.noshadow .clk.done{box-shadow:none}
#dockGrip{display:none;position:fixed;top:0;bottom:0;left:calc(var(--dock-w) - 5px);width:10px;cursor:ew-resize;z-index:6;touch-action:none}
#dockGrip:hover,#dockGrip:active{background:linear-gradient(90deg,transparent 4px,var(--ac) 4px,var(--ac) 6px,transparent 6px)}
body.docked #dockGrip{display:block}
body.resizing iframe{pointer-events:none}
body.resizing{user-select:none}

/* ---- Wallpaper drag ---- */
#wallDragOverlay{position:fixed;inset:0;z-index:45;cursor:grab;touch-action:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:24px}
#wallDragOverlay:active{cursor:grabbing}
#wallDragOverlay[hidden]{display:none}
.wdrow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.6);color:#fff;padding:8px 8px 8px 14px;border-radius:99px;font-size:13px;pointer-events:auto}
.wdrow span{pointer-events:none}
.wdrow button{background:#fff;color:#111;border:0;border-radius:99px;padding:5px 12px;font-weight:600;cursor:pointer}

/* ---- Small windows for notes, calendar and the summary ---- */
.mbox:has(.brief){width:min(460px,100%)}
.mbox:has(.nt2){width:min(520px,100%)}
.mbox:has(.calwrap){width:min(640px,100%)}

/* ---- Weather warning ---- */
.warn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#ff9f1a;color:#111;font-weight:800;font-size:11px;line-height:1;flex:none;cursor:help}
.warnbox{border:1px solid #ff9f1a;background:rgba(255,159,26,.1);border-radius:10px;padding:6px 10px;margin-bottom:10px;font-size:13px;display:flex;flex-direction:column;gap:2px}
.warnbox b{color:#ff9f1a}

/* ---- Notifications (bottom right) ---- */
#toasts{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;flex-direction:column;gap:6px;width:min(290px,calc(100vw - 28px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:4px;background:var(--solid);border:1px solid var(--line);border-left:3px solid var(--ac);border-radius:10px;padding:7px 6px 7px 10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.65);font-size:12.5px;line-height:1.3;animation:toastin .2s var(--ease)}
@keyframes toastin{from{opacity:0;transform:translateX(12px)}}
.toast .tb{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.toast b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.toast b i{font-style:normal;color:var(--ac);margin-right:5px}
.toast span{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast .tx{border:0;background:none;padding:0 4px;color:var(--mut);font-size:11px}
.toast .tx:hover{color:var(--fg)}
.toast.k-stock{border-left-color:var(--up)}.toast.k-stock b i{color:var(--up)}
.toast.k-live{border-left-color:var(--live)}.toast.k-live b i{color:var(--live)}
.toast.k-cal{border-left-color:#ff9f1a}.toast.k-cal b i{color:#ff9f1a}

/* ---- Hover preview ---- */
#peek{position:fixed;z-index:38;width:300px;max-height:calc(100vh - 16px);overflow:hidden;background:var(--solid);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px -12px rgba(0,0,0,.7);pointer-events:none;font-size:12.5px;line-height:1.4}
#peek[hidden]{display:none}
#peek img{display:block;width:100%;height:140px;object-fit:cover}
.pk{padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.pk p{margin:0;white-space:pre-wrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:10;line-clamp:10;overflow:hidden}
.pk small{color:var(--mut);font-size:11px}

/* ---- Notes and to-dos ---- */
.seg{display:flex;gap:2px;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:11px;margin-bottom:12px}
.seg button{flex:1;border:0;background:none;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;color:var(--mut)}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--card);color:var(--fg);box-shadow:0 1px 4px rgba(0,0,0,.25),inset 0 0 0 1px var(--line)}
.seg i{font-style:normal;font-size:11px;font-weight:700;margin-left:5px;padding:1px 7px;border-radius:99px;background:var(--acsoft);color:var(--fg)}
.tadd{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px dashed var(--line);border-radius:10px;margin-bottom:6px;transition:border-color .15s}
.tadd:focus-within{border-color:var(--ac);border-style:solid}
.tadd i{font-style:normal;flex:none;width:18px;text-align:center;color:var(--ac);font-size:18px;line-height:18px}
.mbox .tadd input{flex:1;min-width:0;border:0;background:none;padding:0;outline:0;font-size:14px}
.trow{display:flex;align-items:flex-start;gap:10px;padding:7px 10px;border-radius:10px;transition:background .15s}
.trow:hover,.trow:focus-within{background:var(--card)}
.chk{flex:none;position:relative;width:18px;height:18px;margin-top:1px;padding:0;border-radius:50%;border:1.5px solid var(--mut);background:none;transition:border-color .15s,background .15s}
.chk:hover{border-color:var(--ac);background:var(--acsoft)}
.chk.on{background:var(--ac);border-color:var(--ac)}
.chk.on::after{content:"";position:absolute;left:5.5px;top:2.5px;width:4px;height:8px;border:solid var(--acfg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ntx{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;outline:0;font-size:14px;line-height:1.4;cursor:text;border-radius:4px}
.trow.done .ntx{text-decoration:line-through;color:var(--mut)}
.trow.pin .ntx{font-weight:600}
.nact{display:flex;flex:none;gap:2px;opacity:0;transition:opacity .15s}
.trow:hover .nact,.trow:focus-within .nact,.ncard:hover .nact,.ncard:focus-within .nact,.pin .nact{opacity:1}
.nact button{border:0;background:none;padding:0 4px;color:var(--mut);font-size:13px;line-height:18px}
.nact button:hover{color:var(--ac)}
.pin .nact button[data-a=notepin]{color:var(--ac)}
.tdh{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:8px 10px 2px;border-top:1px solid var(--line)}
.tdh .lnk2{text-decoration:none;color:var(--mut);font-size:12px}
.tdh .lnk2:hover{color:var(--ac)}
.nempty{color:var(--mut);font-size:13px;text-align:center;padding:16px 0;margin:0}
.ngrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ncard{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:88px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;transition:border-color .15s}
.ncard:hover,.ncard:focus-within{border-color:color-mix(in srgb,var(--ac) 50%,var(--line))}
.ncard.pin{border-color:var(--ac)}
.ncard.new{border-style:dashed;background:none}
.mbox .ncard textarea{flex:1;width:100%;border:0;background:none;padding:0;resize:none;outline:0;font-size:14px;line-height:1.4;min-height:40px;max-height:200px;field-sizing:content}
.ncard .ntx{max-height:150px;overflow-y:auto}
.ncard .ntx:focus{max-height:none}
.nfoot{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:20px}
.nfoot small{color:var(--mut);font-size:11px}
.nfoot .pri{padding:3px 10px;font-size:12px}
@media(max-width:520px){.ngrid{grid-template-columns:1fr}}
@media(hover:none){.nact{opacity:1}}

/* ---- Notification history (bell) and mail preview ---- */
.menurow{gap:4px}
.menurow .ib{padding:4px 5px}
.menurow .menu.bell{left:auto;right:0;width:290px;max-height:380px;overflow-y:auto;gap:0}
.bell button[role=menuitem]{display:flex;flex-direction:column;gap:1px;padding:6px 8px;font-size:12.5px;line-height:1.3;border-radius:7px}
.bell button[role=menuitem]+button[role=menuitem]{border-top:1px solid var(--line)}
.bell b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.bell b i{font-style:normal;color:var(--ac);margin-right:5px}
.bell .k-stock b i{color:var(--up)}.bell .k-live b i{color:var(--live)}.bell .k-cal b i{color:#ff9f1a}
.bell span{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bell small{color:var(--mut);font-size:10.5px}
.bell .lnk2{text-align:center;padding:7px 8px 4px;font-size:12px}
.bell>div{padding:8px}
.pm{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:3px 0;border-top:1px solid var(--line)}
.pm span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm small{flex:none}
.pm.nw b{color:var(--ac)}
.rdimg{max-height:260px}

/* ---- Calendar ---- */
.calwrap{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:start}
.calh{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.calh b{flex:1;text-align:center;font-size:13px}
.calh button{padding:1px 7px;font-size:11px}
.calg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.calg i{font-style:normal;font-size:10px;color:var(--mut)}
.calg button{position:relative;padding:0;height:26px;border:1px solid transparent;background:none;border-radius:7px;font-size:12px;font-variant-numeric:tabular-nums}
.calg button:hover{border-color:var(--line)}
.calg button.td{color:var(--ac);font-weight:800;border-color:var(--line)}
.calg button.on{background:var(--ac);color:var(--acfg)}
.calg u{position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ac)}
.calg .on u{background:var(--acfg)}
.calr{min-width:0}
.calr h3:first-child,.brief h3:first-child{margin-top:0}
.calr .row,.brief .row{padding:4px 0;font-size:13px}
.calr .row button:not(.lnk){padding:0 6px;font-size:11px}
.ctm{font-variant-numeric:tabular-nums;font-weight:600;color:var(--mut);font-size:12px}
.cadd{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.cadd #calT{flex:1 1 100%}
.cadd select{flex:1 1 0;min-width:0;max-width:none}
.mbox input[type=time]{color-scheme:dark;padding:4px 6px;font-size:13px}
:root[data-theme=light] .mbox input[type=time]{color-scheme:light}

/* ---- Stock window ---- */
.sthead{margin-bottom:8px}
.sthead .big{font-size:26px}
.si{padding:4px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.35}
.si a{color:var(--fg);text-decoration:none}
.si a:hover{color:var(--ac)}
.si small{color:var(--mut)}
.stlinks{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 0}

/* ---- Summary ---- */
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{padding:3px 8px;font-size:12px;display:inline-flex;align-items:center;gap:5px}
.chips .dot{margin-right:0}

/* ---- Notification settings ---- */
.setgrp input[type=number]{width:64px;font:inherit;font-size:13px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px 6px}
.setgrp label.in{padding-left:14px;color:var(--mut);font-size:13px}

/* ---- Notes / calendar docked at the side of the page ---- */
#dockP,#sideL,#sideR{display:contents}
#dockR{position:fixed;right:0;top:0;bottom:0;width:var(--dockr-w,320px);padding:calc(10px + env(safe-area-inset-top,0px)) 10px 10px 6px;overflow-y:auto;z-index:4;display:flex;flex-direction:column;gap:6px}
#dockR[hidden]{display:none}
body.dockedr{padding-right:var(--dockr-w,320px)}
body.dockedr #toasts{right:calc(var(--dockr-w,320px) + 14px)}
.sw{flex:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 12px;box-shadow:var(--shadow)}
.swh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:var(--mut)}
.swh span{display:flex;gap:2px}
.swh button{border:0;background:none;padding:0 5px;color:var(--mut);font-size:13px}
.swh button:hover{color:var(--ac)}
/* with no video docked, the left side is as narrow as the right one */
body.dockslim{padding-left:var(--dockr-w,320px)}
body.dockslim #dock{width:var(--dockr-w,320px)}
body.dockslim #dockGrip{display:none}
/* the same field styles the windows use */
.sw input[type=text],.sw input[type=time],.sw textarea{font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 10px;min-width:0}
.sw input[type=time]{color-scheme:dark;padding:4px 6px;font-size:13px}
:root[data-theme=light] .sw input[type=time]{color-scheme:light}
.sw .tadd input{flex:1;min-width:0;border:0;background:none;padding:0;outline:0;font-size:14px}
.sw .ncard textarea{flex:1;width:100%;border:0;background:none;padding:0;resize:none;outline:0;font-size:14px;line-height:1.4;min-height:40px;max-height:200px;field-sizing:content}
.sw h3{margin:14px 0 6px;font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.sw .trow{padding:6px 6px}
.sw .calwrap{grid-template-columns:1fr}
#dockR .ngrid{grid-template-columns:1fr}
.sw .seg{margin-bottom:8px}
.dockbtns{display:flex;gap:6px;justify-content:flex-end;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.dockbtns button{font-size:12px;padding:3px 9px;color:var(--mut)}
.dockbtns button:hover{color:var(--fg)}

/* ---- Sports ---- */
.pill.live{background:var(--live);border-color:var(--live);color:#fff;font-weight:700}
.row.splive .lnk b{color:var(--live)}
.mbox:has(.spwin){width:min(580px,100%)}
.spscore{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;text-align:center;padding:8px 0}
.spteam{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.spteam img{width:56px;height:56px;object-fit:contain}
.spmid{display:flex;flex-direction:column;align-items:center;gap:8px}
.win{color:var(--up)}
.spwin .row{font-size:13px;padding:5px 0}
.spwin .row .ib.sm{padding:0 5px}

/* ---- Sports icons and team crests ---- */
.spi{display:inline-flex;vertical-align:-3px;margin-right:6px;color:var(--mut)}
.spi svg{width:calc(15px*var(--fs,1));height:calc(15px*var(--fs,1))}
.sp-football{color:#3fbf7f}.sp-basketball{color:#f08a3c}.sp-ufc{color:var(--live)}
.sp-hockey{color:#6cb8ff}.sp-amfootball{color:#c98a4b}.sp-baseball{color:#e8e8e8}.sp-tennis{color:#d6e84a}.sp-racing{color:#ff6b5e}.sp-golf{color:#7ed957}
.setgrp .sub b .spi{vertical-align:-3px}
.tl{width:calc(16px*var(--fs,1));height:calc(16px*var(--fs,1));object-fit:contain;vertical-align:-3px;margin:0 5px 0 0}
.lnk .tl:last-child{margin:0 0 0 5px}
/* Sports rows in fixed columns so icons, names, scores and times line up down the list.
   Columns: sport icon | home crest | home short name | score | away short name | away crest */
.sprow>span:first-child{flex:1 1 auto;min-width:0}
.sprow .r{flex:0 1 auto;width:var(--stw,3.4em);min-width:0;overflow:hidden;justify-content:flex-end}
.sprow.spx .r{width:auto;flex:none}
.sprow{gap:4px}
.sprow .pill{padding:0 5px}
.list[data-list=sports]{overflow-x:hidden;container-type:inline-size}
/* a very narrow Sports box has no room for everything: the sport icon and crests step aside so the names and score stay */
@container (max-width:185px){
  .sprow .lnk.spg{grid-template-columns:0 0 minmax(1.9em,1fr) var(--scw,2em) minmax(1.9em,1fr) 0;column-gap:.15em}
  .sprow .spg .spi,.sprow .spg .tlc{visibility:hidden;width:0;overflow:hidden}
  .sprow:not(.spx) .r{max-width:3em}
  .sprow{gap:2px}
}
/* the two name columns share whatever width the box has (so the row shrinks and grows with the box, and every row
   still lines up because all rows are the same width); the icons, crests and score keep their size */
.lnk.spg{display:grid;grid-template-columns:1.25em 1.35em minmax(1.9em,1fr) var(--scw,2em) minmax(1.9em,1fr) 1.35em;align-items:center;column-gap:.25em;white-space:nowrap;width:100%}
.lnk.spt{display:grid;grid-template-columns:1.25em minmax(0,1fr);align-items:center;column-gap:.35em;width:100%}
.spg .spi,.spt .spi{margin:0;vertical-align:0}
.spg .tlc{display:flex;align-items:center;justify-content:center;height:1.3em}
.spg .tl,.spg .tl:last-child{margin:0;vertical-align:0}
.spg .ab{font-weight:600;overflow:hidden;text-overflow:ellipsis;text-align:left}
.spg .ab.aw{text-align:right}
.spg .ab.fvn{color:var(--ac)}
.spg .sc{text-align:center;font-variant-numeric:tabular-nums}
.spt .spn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.row.splive .lnk b.sc{color:var(--live)}

/* ---- Game details: goals and cards, period scores, stats, top performers (popup and hover card) ---- */
.evs{display:flex;flex-direction:column;gap:3px;font-size:13px}
.ev{display:flex;align-items:center;gap:6px;width:50%}
.ev.a{align-self:flex-end;flex-direction:row-reverse;text-align:right}
.evm{flex:none;min-width:2.6em;color:var(--mut);font-variant-numeric:tabular-nums}
.ev.a .evm{text-align:left}
.evg{font-style:normal;font-size:11px;line-height:1}
.evc{flex:none;width:8px;height:11px;border-radius:2px;background:#f2c94c}
.evc.red{background:var(--down)}
.lines{border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums;margin:8px 0 2px}
.lines th{color:var(--mut);font-weight:400;padding:1px 7px;text-align:center}
.lines td{padding:2px 7px;text-align:center;border-top:1px solid var(--line)}
.lines td:first-child{text-align:left;font-weight:600;padding-left:0}
.stat{display:grid;grid-template-columns:3em 1fr 3em;align-items:center;gap:8px;font-size:13px;padding:3px 0}
.stat b{font-variant-numeric:tabular-nums}
.stat b:last-child{text-align:right}
.stat span{display:flex;flex-direction:column;gap:2px;text-align:center;color:var(--mut);font-size:11.5px}
.stat em{display:block;height:5px;border-radius:4px;background:var(--line);overflow:hidden}
.stat em u{display:block;height:100%;background:var(--ac);border-radius:4px}
.leads{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px}
.leads>div:last-child{text-align:right}
.leads small{color:var(--mut)}
.sprecap{text-align:center;margin:8px 0 0}
.sppk .pkscore{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-weight:600}
.sppk .pkscore span:last-child{text-align:right}
.sppk .pkscore b{font-size:16px;font-variant-numeric:tabular-nums}
.sppk .evs{font-size:12px}
.sppk .lines{font-size:11.5px;margin:2px 0}

/* ---- Sign in / create account ---- */
.mbox:has(.auth){width:min(380px,100%)}
.auth{display:flex;flex-direction:column;gap:10px}
.auth p{margin:0}
.auth label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut)}
.mbox input[type=email],.mbox input[type=password]{font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px;min-width:0}
.auth .pri{padding:9px 12px;font-size:14px}
.auth .lnk2{align-self:center}
#acctMsg:empty,#wzMsg:empty{display:none}
#acctMsg,#wzMsg{color:var(--fg);background:var(--acsoft);border-radius:8px;padding:6px 10px}

/* ---- Setup guide ---- */
.mbox:has(.wiz){width:min(640px,100%)}
.wiz{font-size:14px;line-height:1.5}
.wiz p{margin:0 0 10px}
.wiz a{color:var(--ac)}
.wiz ol,.wiz ul{margin:0 0 10px}
.wiz li{margin-bottom:8px}
.wizgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wizbox{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.wizbox.on{border-color:var(--ac);background:var(--acsoft)}
.wizbox b{display:block;font-size:14px}
.wizbox small{display:block;color:var(--mut);font-size:12px;line-height:1.35;font-weight:400}
.wizbox .chk{pointer-events:none;border-radius:5px;margin-top:2px}
.wizchips{margin:0 0 10px}
.wizchips span{padding:2px 9px;font-size:12px;border:1px solid var(--line);border-radius:99px;color:var(--mut)}
.wiz .add{margin:0 0 8px}
.wiz .add input{flex:1;background:var(--bg)}
.wizmail{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.wizmail #wzU{grid-column:1/-1}
.wiznav{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.wizdots{flex:1;display:flex;gap:5px;justify-content:center}
.wizdots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.wizdots i.on{background:var(--ac)}
.wiznav button:disabled{opacity:.35;cursor:default}
/* drawn pictures of the screens */
.mock{margin:8px 0 4px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);font-size:12.5px;max-width:420px}
.mockbar{display:flex;align-items:center;gap:5px;padding:5px 9px;background:var(--card);border-bottom:1px solid var(--line);color:var(--mut);font-size:11px}
.mockbar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.mockbar span{margin-left:6px}
.mockbody{display:flex;flex-direction:column;gap:7px;padding:10px 12px}
.mkrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mkl{display:block;height:7px;border-radius:4px;background:var(--line)}
.mkb{display:inline-block;padding:3px 10px;border:1px solid var(--line);border-radius:7px;color:var(--mut);white-space:nowrap}
.mkb.hl{border-color:var(--ac);color:var(--fg);background:var(--acsoft);box-shadow:0 0 0 3px var(--acsoft);font-weight:600}
.mkchk{display:inline-block;width:12px;height:12px;border:1.5px solid var(--mut);border-radius:3px;vertical-align:-2px}
.mkchk.on{background:var(--ac);border-color:var(--ac)}
.mknote{color:var(--mut);font-size:11.5px}
.mkcode{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--mut)}
@media(max-width:520px){.wizgrid,.wizmail{grid-template-columns:1fr}}

/* ---- Preview banner (not signed in) and the delete-account button ---- */
#pv{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:8px 12px;border:1px solid var(--ac);border-radius:12px;background:var(--acsoft);font-size:13px;line-height:1.4}
#pv[hidden]{display:none}
#pv>span:first-child{flex:1 1 320px;min-width:0}
.pvb{display:flex;gap:6px;flex:none}
.pvnote{margin:12px 0 0;padding:8px 10px;border-radius:9px;background:var(--acsoft);font-size:13px}
.pvnote .lnk2{font-size:13px}
button.danger{align-self:flex-start;border-color:var(--down);color:var(--down)}
button.danger:hover{background:var(--down);color:#fff}
#delMsg:empty,#nfMailMsg:empty{display:none}
#nfMailMsg{color:var(--fg);background:var(--acsoft);border-radius:8px;padding:6px 10px}
#delMsg{color:var(--fg);background:var(--acsoft);border-radius:8px;padding:6px 10px}

/* ---- Scrollbars ---- */
*{scrollbar-width:thin;scrollbar-color:rgba(140,147,163,.4) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(140,147,163,.35);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:var(--ac)}

/* ---- Phones and small windows ---- */
@media(max-width:820px){
  header{flex-wrap:wrap}
  #srch{order:3;flex:1 1 100%;margin:0}
  #day{font-size:calc(30px*var(--gfs,1))}
  #logoImg{--lh:30px}
  #grid{grid-template-columns:1fr}
  #grid .card{grid-column:auto}
  .pairwrap{grid-column:auto;flex-wrap:wrap}
  .pairwrap>.card,.pairwrap .paird{flex-basis:100% !important}
  .paird{display:none}
  #dock{position:static;width:auto;padding:10px}
  body.docked{padding-left:0}
  #dockR{position:static;width:auto;padding:10px}
  body.dockedr{padding-right:0}
  body.dockedr #toasts{right:14px}
  body.docked #dockGrip{display:none}
  .tv{height:280px}
  .calwrap{grid-template-columns:1fr}
  #peek{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* ---- Small day chart on a stock row. A fixed-size box in the right-hand group: it cannot push the row wider,
   and when the Stocks box gets narrow (a docked stream, a small window) it is dropped before any text is cut ---- */
.spk{flex:none;display:block;height:1.05em;overflow:visible}
.spk path{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.spk.u path{stroke:var(--up)}
.spk.d path{stroke:var(--down)}
/* app.js (fitSparks) sets one chart width (--spkw) and one percentage width (--pillw) for the whole list */
.spk{width:var(--spkw,3.1em)}
.spk+span{min-width:var(--pillw,0);text-align:right;box-sizing:border-box}
.list.spkm .spk,.list.spk0 .spk{display:none}
.list.spk0 .spk+span{min-width:0}
/* with the charts on, each stock is one line: the ticker stays whole and the price is cut short when the box is narrow */
.list.spkon .row>span:first-child{flex:1 1 0;white-space:nowrap;overflow:hidden}
.list.spkon .row>.r,.list.spkm .row>.r{flex:none}

/* ---- League table in a game's window ---- */
.sptabw{max-height:17.5em;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:10px}
.sptab{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.sptab th{position:sticky;top:0;background:var(--solid);color:var(--mut);font-weight:600;font-size:11px;padding:4px 6px;text-align:right}
.sptab td{padding:3px 6px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
.sptab td.ps{text-align:center;color:var(--mut);width:2.2em;padding-left:8px}
.sptab td.tn{text-align:left;width:99%;overflow:hidden;text-overflow:ellipsis;max-width:0}
.sptab td.tn img{width:16px;height:16px;object-fit:contain;vertical-align:-3px;margin-right:6px}
.sptab td.pt{font-weight:700}
.sptab tr.me td{background:var(--acsoft);font-weight:600}
.calsp .spi{margin-right:4px;vertical-align:-2px}
.toast.k-sport b i{color:var(--ac)}

/* ---- Keyboard shortcut list in Settings ---- */
#keyList label{font-size:13.5px}
.kbd{min-width:2.4em;padding:1px 8px;font:600 12px ui-monospace,Consolas,monospace;border-radius:6px;border:1px solid var(--line);border-bottom-width:2px;background:var(--bg);color:var(--fg);cursor:pointer}
.kbd.none{color:var(--mut);font-weight:400}
.kbd.cap{border-color:var(--ac);color:var(--ac)}
.setgrp code{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 4px;font-size:.92em}

/* ---- Answer under the search bar (sums and conversions) ---- */
#srch{position:relative}
#srchAns{position:absolute;left:0;right:0;top:29px;z-index:40;display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:var(--solid);border:1px solid var(--line);border-radius:10px;padding:4px 12px;font-size:13px;cursor:pointer;box-shadow:var(--shadow)}
#srchAns[hidden]{display:none}
#srchAns b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
#srchAns small{flex:none;color:var(--mut);font-size:11px}
body.noshadow #srchAns{box-shadow:none}

/* ---- Reddit comments in a post's window ---- */
.rdc{padding:8px 0 2px 10px;border-left:2px solid var(--line);margin:8px 0}
.rdc .mut{font-size:12px}
.rdc .mut b{color:var(--fg);font-weight:600}
.rdc .nt{margin:3px 0 0;font-size:13.5px}

/* ---- 'Show 20 more' / 'Load older' at the end of a list ---- */
.list .more{display:block;width:100%;margin:6px 0 2px;padding:4px 8px;font:inherit;font-size:calc(12px*var(--fs,1));text-align:center;color:var(--mut);background:none;border:1px dashed var(--line);border-radius:8px;cursor:pointer}
.list button.more:hover{color:var(--fg);border-color:var(--ac)}

/* ---- Offline favorite streamers ---- */
.dot.off{background:var(--mut);box-shadow:none;animation:none;opacity:.6}
.dot.off::after,.dot.off::before{display:none}
.row.twoff .lnk{opacity:.6}

/* ---- Sign-in activity ---- */
#actList .row{font-size:13px;padding:5px 0}
#actList .row:last-child{border-bottom:0}

/* ---- Settings search ---- */
#setQ{width:calc(100% - 16px);margin:0 8px 8px;height:28px;font:inherit;font-size:13px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:0 9px;outline:0}
#setQ:focus{border-color:var(--ac)}
#setRes button{display:block;width:100%;text-align:left;white-space:normal;line-height:1.3}
#setRes small{display:block;font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
#setRes .sn{padding:6px 10px}
.setgrp .found{outline:2px solid var(--ac);outline-offset:4px;border-radius:6px}

/* ---- 'Save what you pasted?' card, and the Watch buttons in an esports game ---- */
.toast.pasteask .acts{display:flex;gap:6px;margin:6px 0 0}
.toast.pasteask .acts button{padding:2px 10px;font-size:12px}
.toast.pasteask .tb{cursor:default}
.spwatch{justify-content:center}
/* the section list and the search results are each one column, like the menu was before the search field */
#setNavL,#setRes{display:flex;flex-direction:column;gap:1px}
#setNavL[hidden],#setRes[hidden]{display:none}
@media(max-width:700px){#setNavL{flex-direction:row;flex-wrap:nowrap}#setQ{flex:none;width:130px;margin:0 6px 0 0}}

/* ---- Signal colors per box (Settings > Appearance) ---- */
.bcrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:5px 0;border-bottom:1px solid var(--line)}
.bcrow:last-child{border-bottom:0}
.setgrp .sub .bcrow b{flex:0 0 4.6em;font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--fg)}
.setgrp .bcrow label{font-size:12.5px;color:var(--mut);gap:6px;justify-content:flex-start}
.bcrow input[type=range]{width:90px}
.setgrp .sub>button[data-a=bcreset]{align-self:flex-start}

/* ---- UFC: fight rows, fight and fighter windows, odds ---- */
.spn .vs{font-style:normal;color:var(--mut);font-size:.85em;padding:0 .15em}
.spn small{color:var(--mut);font-weight:400;margin-left:.3em}
.spn b.win{color:var(--up)}
.od{font-variant-numeric:tabular-nums;color:var(--mut);font-weight:600}
.od:empty{display:none}
.od.odf{color:var(--ac)}
.spteam.fgt img{width:80px;height:58px;object-fit:cover;object-position:top;border-radius:8px}
.spteam.fgt .lnk{font-size:15px}
.odl{font-size:12px;color:var(--mut)}
.odl:has(.od:empty){visibility:hidden}
/* the window of one fight: compact, so everything is on screen at once */
.mbox:has(.fwf){max-height:96vh;padding:14px 18px}
.fwf .spscore{padding:0 0 2px;gap:8px;align-items:start}
.fwf .spteam{gap:2px}
.fwf .spteam.fgt img{width:68px;height:49px}
.fwf .spteam .ib.sm{padding:0 7px;margin-top:2px}
.fwf .spmid{gap:5px;padding-top:6px}
.fwf .fgbtn{display:flex;gap:5px;margin-top:4px}
.fwf h3{margin:8px 0 2px}
.fwf .tape{font-size:12.5px}
.fwf .tape td,.fwf .tape th{padding:1px 6px;line-height:1.45}
.fwf .tape th{font-size:11px}
.frow .fname{display:inline}
.frow .r .lnk{color:var(--mut);white-space:nowrap}
.tape{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tape td{width:36%;padding:3px 6px;border-top:1px solid var(--line)}
.tape td:first-child{text-align:right}
.tape th{width:28%;padding:3px 6px;border-top:1px solid var(--line);color:var(--mut);font-weight:400;font-size:11.5px;text-align:center}
.fwin .tape th{text-align:left;width:62%}
.fwin .tape td,.fwin .tape td:first-child{text-align:right;width:38%;font-weight:600}
.fwin .fhead{display:block;width:150px;height:109px;object-fit:cover;object-position:top;border-radius:10px;margin:0 auto 6px}
.fwin .pk{padding:0 0 8px;text-align:center;align-items:center}
#peek.fpk{z-index:80;width:230px}
#peek.fpk img{height:120px;object-position:top}
.fpkh span{font-weight:600;line-height:1.25}
.fpkh small{font-weight:400}

/* ---- "Is this safe?" note in the setup guide and Help ---- */
.safe{margin:8px 0 12px;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--up);border-radius:10px;background:var(--bg);font-size:13px;line-height:1.45}
.safe a{color:var(--ac)}
.safe ul{margin:5px 0 0;padding-left:18px}
.safe li{margin-bottom:3px}

/* ---- "!" for a problem in a box, and its window ---- */
.errb{font-weight:800;min-width:1.9em;justify-content:center}
.berr{padding:8px 0;border-bottom:1px solid var(--line)}
.berr:last-of-type{border-bottom:0}
.berr p{margin:3px 0 0;overflow-wrap:anywhere}

/* ---- Special days in the calendar ---- */
.calg.wk{grid-template-columns:1.5em repeat(7,1fr)}
.calg .wkn{font-style:normal;font-size:9.5px;color:var(--mut);align-self:center;opacity:.8}
.calg button.hol{color:var(--down);font-weight:700}
.calg button.on.hol{color:var(--acfg)}
.calg s{position:absolute;right:3px;top:3px;width:4px;height:4px;border-radius:50%;border:1px solid var(--mut);text-decoration:none}
.calg .on s{border-color:var(--acfg)}
.sdrow .ctm{display:inline-block;width:1.2em;text-align:center}
.sdrow.sd-hol .ctm{color:var(--down)}
.sdrow.sd-big .ctm,.sdrow.sd-small .ctm{color:var(--ac)}
.setgrp input[type=number]{width:64px;font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:5px 8px}
.chipwrap{display:flex;flex-wrap:wrap;gap:4px 6px}
.setgrp .chipwrap label.chip{display:inline-flex;justify-content:flex-start;gap:6px;font-size:12.5px;padding:2px 9px 2px 6px;border:1px solid var(--line);border-radius:99px;cursor:pointer}

/* ---- Language choice (Settings > News) ---- */
#langList{display:flex;flex-wrap:wrap;gap:4px 6px}
.setgrp #langList label.chip{display:inline-flex;justify-content:flex-start;gap:6px;font-size:12.5px;padding:2px 9px 2px 6px;border:1px solid var(--line);border-radius:99px;cursor:pointer}
#langNote:empty{display:none}