:root{--bg:#0c0a08;--bg2:#12100e;--bg3:#1a1710;--bg4:#231f18;--border:#2a2520;--pink:#DF39BB;--blue:#5AC1F9;--gold:#DF9A24;--green:#4caf50;--red:#9B151B;--white:#e0e0e0;--gray:#888;--dim:#555;--font:'JetBrains Mono',monospace;--mono:'JetBrains Mono',monospace;--serif:'Instrument Serif',serif}
html,body{margin:0;height:100%;background:var(--bg);color:var(--white);font:12px var(--font)}
*{box-sizing:border-box}
button,a{touch-action:manipulation}
.hidden{display:none!important}
.grow{flex:1}

.outbtn{background:var(--bg3);color:var(--white);border:1px solid var(--border);padding:4px 10px;font:inherit;font-size:9px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.outbtn:hover{border-color:var(--gray)}
.iconbtn{background:transparent;border:0;color:var(--gray);width:30px;height:30px;padding:5px;cursor:pointer}
.iconbtn:hover{color:var(--white)}
.iconbtn svg{width:100%;height:100%;display:block}
.x{background:transparent;border:0;color:var(--gray);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.x:hover{color:var(--white)}

#login{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px}
#login form{background:var(--bg2);border:1px solid var(--border);padding:24px;width:min(296px,100%);display:flex;flex-direction:column;gap:12px}
#login form .logo{display:block;width:166px;margin:0 auto 6px}
#login form .logo svg{display:block;width:100%;height:auto}
#login input{background:var(--bg);border:1px solid var(--border);color:var(--white);padding:9px 10px;font:inherit;outline:none;min-width:0}
#login input:focus{border-color:var(--pink)}
#login button.go,#login .tfgo{background:var(--pink);color:var(--bg);border:0;padding:10px;font:inherit;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
#login .err{color:var(--gold);min-height:1em;font-size:11px}
#login .pw{position:relative;display:flex}
#login .pw input{flex:1;padding-right:36px}
#login .eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;padding:4px;color:var(--gray);cursor:pointer;width:28px;height:28px}
#login .eye svg{width:20px;height:20px}
#login .eye .slash{display:none}
#login .eye.on .slash{display:block}
#login .eye.on{color:var(--pink)}
#login .tfhide{display:none}
#login .tfstep{display:flex;flex-direction:column;gap:12px}
#login .tfstep .lbl{color:var(--dim);font-size:11px}
#login .tfstep .lbl b{color:var(--white);font-weight:normal}
#login .tfstep .tfback{background:transparent;color:var(--dim);border:1px solid var(--border);font:inherit;padding:6px;cursor:pointer}
.tfcode{font:20px var(--mono);letter-spacing:.3em;text-align:center}
.tftrust{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--dim);cursor:pointer}
.tftrust input{width:16px;height:16px;margin:0;accent-color:var(--pink)}

.langpick{position:relative;display:flex}
.langpick.dim{opacity:.3;transition:opacity .2s;justify-content:center;margin-top:4px}
.langpick.dim:hover,.langpick.dim:focus-within{opacity:1}
.langpick .lp{--lp-radius:0px}
#langLogin .lp .lp-pop{inset-inline-end:auto;inset-inline-start:50%;transform:translateX(-50%);top:auto;bottom:calc(100% + 10px);height:min(440px,calc(100vh - 220px))}
#langSettings .lp .lp-pop{inset-inline-end:auto;inset-inline-start:0}

#app{position:fixed;inset:0;display:flex;flex-direction:column}
.top{height:46px;flex:none;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;border-bottom:1px solid var(--border);background:var(--bg2)}
.top .logo{display:flex;align-items:center}
.top .logo svg{display:block;height:24px;width:auto}
.top .who{color:var(--gray);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30vw}
.stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,var(--bg3),var(--bg) 70%)}
.empty{text-align:center;width:min(520px,100%);margin:auto;padding:28px 16px;color:var(--gray);overflow:auto;max-height:100%}
.empty .ring{width:72px;height:72px;color:var(--pink);opacity:.8}
.empty h1{font:400 34px var(--serif);color:var(--white);margin:14px 0 6px}
.empty p{margin:0;line-height:1.6}
.status{height:24px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;border-top:1px solid var(--border);background:var(--bg2);color:var(--dim);font-size:10px}
.status .off{color:var(--gold)}
#stMsg{color:var(--gold)}

#settings{position:fixed;inset:0;background:rgba(12,10,8,.72);display:flex;align-items:flex-start;justify-content:center;z-index:40;padding:60px 16px 16px}
#settings .panel{background:var(--bg2);border:1px solid var(--border);width:min(440px,100%);box-shadow:0 14px 48px rgba(0,0,0,.65)}
#settings .phead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
#settings .phead b{font:400 20px var(--serif)}
#settings section{padding:12px 14px;border-bottom:1px solid var(--border)}
#settings section:last-child{border-bottom:0}
#settings h3{margin:0 0 10px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500}
#settings .row{display:flex;align-items:center;gap:12px}
#settings .row label{color:var(--gray);min-width:84px}
#settings .acct span{flex:1;color:var(--white)}

#newver{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:var(--gold);color:var(--bg);padding:10px 14px;display:flex;gap:12px;align-items:center;z-index:50;font-size:12px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#newver button{background:var(--bg);color:var(--white);border:0;padding:6px 12px;font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
#newver button.x{background:transparent;color:var(--bg);font-size:16px;padding:0 4px}

#dlg{position:fixed;inset:0;background:rgba(12,10,8,.72);display:flex;align-items:center;justify-content:center;z-index:70;padding:20px}
#dlg.hidden{display:none}
#dlg .dpanel{background:var(--bg2);border:1px solid var(--gold);padding:16px 18px;width:min(420px,100%);display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 48px rgba(0,0,0,.65)}
#dlg .dtitle{font:20px var(--serif);color:var(--white)}
#dlg .dtitle:empty{display:none}
#dlg .dmsg{font-size:12px;color:var(--gray);white-space:pre-wrap;line-height:1.5}
#dlg .dinput{background:var(--bg);border:1px solid var(--border);color:var(--white);padding:8px 10px;font:inherit;font-size:13px;outline:none;width:100%}
#dlg .dinput:focus{border-color:var(--gold)}
#dlg .dform{display:flex;flex-direction:column;gap:8px}
#dlg .dbtns{display:flex;gap:6px;justify-content:flex-end}
#dlg .dbtns .dok{color:var(--gold);border-color:var(--gold)}

@media (max-width:520px){
  .top .who{display:none}
  .empty h1{font-size:28px}
}

.primary{background:var(--pink);color:var(--bg);border:0;padding:10px 18px;font:inherit;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.primary:hover{filter:brightness(1.08)}
.empty .fmts{font-size:10px;color:var(--dim);letter-spacing:.08em;margin-top:6px}
.emptybtns{margin:18px 0 6px}
.recent{margin-top:26px;text-align:left}
.recent h3,#files .fhead b{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500;margin:0 0 8px}
.flist{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.frow{display:flex;align-items:stretch;border-bottom:1px solid var(--border)}
.frow.cur{background:var(--bg3)}
.frow .fname{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left;background:transparent;border:0;color:var(--white);font:inherit;padding:8px 6px;cursor:pointer}
.frow .fname:hover{background:var(--bg4)}
.frow .fn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .fi{font-size:10px;color:var(--gray)}
.frow .fdel{padding:0 10px}
.fempty{color:var(--dim);padding:10px 6px;font-size:11px}
.sinfo{font-size:10px;color:var(--dim);margin-top:8px;min-height:1em}

.filesw{position:relative}
#files{position:absolute;right:0;top:calc(100% + 8px);width:min(420px,calc(100vw - 24px));max-height:min(520px,calc(100vh - 120px));overflow:auto;background:var(--bg2);border:1px solid var(--border);box-shadow:0 14px 48px rgba(0,0,0,.65);z-index:45;padding:12px}
#files .fhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#files .fhead b{margin:0}

#ed{flex:1;min-height:0;display:flex;flex-direction:column}
.edhead{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 14px;border-bottom:1px solid var(--border);background:var(--bg2);flex-wrap:wrap}
.docmeta{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 220px}
.docmeta b{font:400 18px var(--serif);color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.docmeta span{font-size:10px;color:var(--gray);white-space:nowrap}
.seg{display:flex;border:1px solid var(--border)}
.seg.hidden{display:none}
.segbtn{background:var(--bg3);color:var(--gray);border:0;border-right:1px solid var(--border);padding:4px 9px;font:inherit;font-size:10px;letter-spacing:.04em;cursor:pointer}
.segbtn:last-child{border-right:0}
.segbtn:hover{color:var(--white)}
.segbtn.on{background:var(--bg4);color:var(--gold)}
.iconbtn.sm{width:26px;height:26px;padding:4px}

canvas.ov{flex:none;display:block;width:100%;height:34px;cursor:pointer;border-bottom:1px solid var(--border)}
canvas.ru{flex:none;display:block;width:100%;height:22px;cursor:pointer}
.wvwrap{flex:1;min-height:120px;position:relative}
#wv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:text;touch-action:none}
canvas.mt{flex:none;display:block;width:100%;height:36px;cursor:pointer;border-top:1px solid var(--border)}

.edfoot{flex:none;display:flex;align-items:center;gap:14px;padding:6px 10px;border-top:1px solid var(--border);background:var(--bg2);flex-wrap:wrap}
.transport{display:flex;align-items:center;gap:4px}
.tbtn{width:32px;height:30px;padding:6px;background:var(--bg3);border:1px solid var(--border);color:var(--white);cursor:pointer;font:inherit;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.tbtn:hover{border-color:var(--gray)}
.tbtn svg{width:16px;height:16px;display:block}
.tbtn.on{color:var(--gold);border-color:var(--gold)}
.tbtn.play{width:40px;color:var(--pink)}
.tbtn.play .is{display:none}
.tbtn.play.on .ip{display:none}
.tbtn.play.on .is{display:block}
.tbtn.play.on{color:var(--white);border-color:var(--pink);background:var(--pink)}
.tdisp{display:flex;align-items:baseline;gap:6px;margin-left:10px;font-variant-numeric:tabular-nums}
#tnow{font-size:18px;color:var(--white);letter-spacing:.02em}
#tlen{font-size:10px;color:var(--dim)}
.selpanel{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.selpanel label{display:flex;flex-direction:column;gap:2px}
.selpanel label span{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.selpanel input{width:118px;background:var(--bg);border:1px solid var(--border);color:var(--white);font:inherit;font-size:12px;padding:5px 7px;outline:none;font-variant-numeric:tabular-nums}
.selpanel input:focus{border-color:var(--gold)}
.zoom{display:flex;gap:4px;margin-left:auto}

.dd{position:relative;font-size:11px;min-width:104px}
.dd .cur{background:var(--bg);border:1px solid var(--border);padding:5px 24px 5px 8px;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis}
.dd .cur::after{content:"";position:absolute;right:8px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--gray);border-bottom:1.5px solid var(--gray);transform:translateY(-70%) rotate(45deg)}
.dd .list{display:none;position:absolute;left:0;right:0;bottom:calc(100% + 4px);background:var(--bg2);border:1px solid var(--border);z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.dd.open .list{display:block}
.dd .ddi{padding:7px 8px;cursor:pointer;white-space:nowrap}
.dd .ddi:hover{background:var(--bg4);color:var(--gold)}

#busy{position:absolute;inset:0;background:rgba(12,10,8,.72);display:flex;align-items:center;justify-content:center;z-index:35;padding:16px}
#busy .bbox{background:var(--bg2);border:1px solid var(--border);padding:18px;width:min(380px,100%);display:flex;flex-direction:column;gap:10px}
#busy .btitle{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
#busy .bname{font:400 18px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#busy .bbar{height:4px;background:var(--bg4);overflow:hidden}
#busy .bbar i{display:block;height:100%;width:0;background:var(--pink);transition:width .15s}
#busy .brow{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--gray)}
#drop{position:absolute;inset:10px;border:2px dashed var(--pink);background:rgba(12,10,8,.78);display:flex;align-items:center;justify-content:center;z-index:40;pointer-events:none}
#drop div{font:400 30px var(--serif);color:var(--white)}

.keys{display:grid;grid-template-columns:1fr;gap:6px}
.keys div{display:flex;gap:12px;align-items:baseline}
.keys kbd{min-width:110px;font:inherit;font-size:11px;color:var(--gold)}
.keys div:has(> kbd){display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:12px}
.keys span{color:var(--gray);font-size:12px}

@media (max-width:760px){
  .edhead{padding:6px 8px}
  .docmeta{flex-basis:100%}
  .edfoot{gap:8px;padding:6px 8px}
  .selpanel input{width:98px}
  .zoom{margin-left:0}
  .tdisp{margin-left:4px}
  #tnow{font-size:15px}
}

.outbtn.big{padding:9px 14px;font-size:10px;margin-left:8px}
.ftabs{display:flex;align-items:center;gap:2px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.ftab{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--gray);font:inherit;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;cursor:pointer;margin-bottom:-1px}
.ftab:hover{color:var(--white)}
.ftab.on{color:var(--gold);border-bottom-color:var(--gold)}
.fsearch{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--white);font:inherit;font-size:12px;padding:7px 9px;outline:none;margin-bottom:8px}
.fsearch:focus{border-color:var(--gold)}
.fsearch:disabled{opacity:.4}
.frow .ftag{align-self:flex-start;font-size:8px;letter-spacing:.08em;color:var(--blue);border:1px solid #2c4d5c;padding:0 4px;margin-bottom:1px}
.badge{font-size:9px;letter-spacing:.06em;color:var(--blue);border:1px solid #2c4d5c;padding:1px 6px;white-space:nowrap}
#files{width:min(500px,calc(100vw - 24px))}
.tools{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.tsep{width:1px;height:20px;background:var(--border);margin:0 4px}
.tbtn.sm{width:28px;height:26px;padding:5px}
.tbtn:disabled{opacity:.32;cursor:default;border-color:var(--border)}
.histw{position:relative}
#histBtn{height:26px}
#histN:not(:empty){margin-left:6px}
#hist{position:absolute;left:0;top:calc(100% + 8px);width:min(400px,calc(100vw - 24px));max-height:min(440px,calc(100vh - 160px));display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--border);box-shadow:0 14px 48px rgba(0,0,0,.65);z-index:45;padding:10px 12px}
#hist.hidden{display:none}
.hhead{display:flex;align-items:center;margin-bottom:8px}
.hhead b{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500}
.hlist{overflow:auto;border-top:1px solid var(--border);min-height:0;flex:1}
.hrow{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--white);font:inherit;font-size:11px;padding:7px 6px;cursor:pointer}
.hrow:hover{background:var(--bg4)}
.hrow.cur{background:var(--bg3);color:var(--gold)}
.hrow.undone{color:var(--dim)}
.hrow .hn{min-width:22px;color:var(--dim);font-variant-numeric:tabular-nums}
.hrow .hl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.hrow .ht{font-size:10px;color:var(--dim)}
.dd.down .list{top:calc(100% + 4px);bottom:auto}
#settings .row + .row{margin-top:10px}
#dlg .dfield{display:flex;flex-direction:column;gap:4px}
#dlg .dfield span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
#dlg .dfield input{background:var(--bg);border:1px solid var(--border);color:var(--white);padding:8px 10px;font:inherit;font-size:13px;outline:none;width:100%;font-variant-numeric:tabular-nums}
#dlg .dfield input:focus{border-color:var(--gold)}
#dlg .dnote{font-size:11px;color:var(--gray)}
@media (max-width:760px){
  .tools{order:3;flex-basis:100%}
  #hist{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:55vh}
}
canvas.ru{height:34px}
#locs{position:absolute;left:0;top:calc(100% + 8px);width:min(430px,calc(100vw - 24px));max-height:min(440px,calc(100vh - 160px));display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--border);box-shadow:0 14px 48px rgba(0,0,0,.65);z-index:45;padding:10px 12px}
#locs.hidden{display:none}
#locsBtn{height:26px}
.hhead .outbtn{margin-right:6px}
.lrow{display:flex;align-items:stretch;border-bottom:1px solid var(--border)}
.lrow.cur{background:var(--bg3)}
.lrow .lgo{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;text-align:left;background:transparent;border:0;color:var(--white);font:inherit;font-size:11px;padding:7px 6px;cursor:pointer}
.lrow .lgo:hover{background:var(--bg4)}
.lrow .hn{min-width:22px;color:var(--blue);font-variant-numeric:tabular-nums}
.lrow .hl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lt{font-size:10px;color:var(--gray);font-variant-numeric:tabular-nums;white-space:nowrap}
.lrow .lz{font-size:9px;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
.lrow .x{font-size:14px;padding:0 6px}
#zpSeg .segbtn{padding:4px 7px;font-variant-numeric:tabular-nums}
#pal{position:fixed;inset:0;background:rgba(12,10,8,.6);display:flex;align-items:flex-start;justify-content:center;z-index:65;padding:12vh 16px 16px}
#pal.hidden{display:none}
#pal .ppanel{background:var(--bg2);border:1px solid var(--gold);width:min(620px,100%);max-height:70vh;display:flex;flex-direction:column;box-shadow:0 18px 60px rgba(0,0,0,.7)}
#palQ{background:var(--bg);border:0;border-bottom:1px solid var(--border);color:var(--white);font:inherit;font-size:14px;padding:13px 14px;outline:none;width:100%}
#palList{overflow:auto;min-height:0;flex:1}
.prow{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;border-bottom:1px solid #1c1915}
.prow.on{background:var(--bg4)}
.prow.on .pl{color:var(--gold)}
.prow.off{opacity:.38}
.prow .pl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .pg{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.prow .pk{background:var(--bg);border:1px solid var(--border);color:var(--gold);font:inherit;font-size:10px;padding:2px 7px;cursor:pointer;white-space:nowrap;min-width:46px}
.prow .pk:hover{border-color:var(--gray)}
.prow .pk.none{color:var(--dim)}
.prow .pk.cap{border-color:var(--pink);color:var(--pink)}
.pfoot{display:flex;gap:10px;padding:7px 14px;font-size:10px;color:var(--dim);border-top:1px solid var(--border)}
.keys .kgroup{margin-top:8px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.keys span em{display:block;font-style:normal;font-size:10px;color:var(--dim)}
#dlg .dpanel:has(.keys){width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto}
#settings .snote{font-size:10px;color:var(--dim)}
#dlg .dseg{align-self:flex-start}
@media (max-width:760px){
  #locs{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:55vh}
  #pal{padding-top:8vh}
}
#ctx{position:fixed;z-index:60;min-width:250px;max-width:calc(100vw - 8px);max-height:calc(100vh - 8px);overflow:auto;background:var(--bg2);border:1px solid var(--border);box-shadow:0 14px 44px rgba(0,0,0,.7);padding:4px 0}
#ctx.hidden{display:none}
#ctx .citem{display:flex;align-items:center;gap:18px;width:100%;background:transparent;border:0;color:var(--white);font:inherit;font-size:11.5px;padding:6px 14px;cursor:pointer;text-align:left;outline:none}
#ctx .citem:hover:not(:disabled),#ctx .citem:focus-visible,#ctx .citem:focus{background:var(--bg4);color:var(--gold)}
#ctx .citem:disabled{opacity:.35;cursor:default}
#ctx .cl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ctx .ck{font-size:10px;color:var(--dim);white-space:nowrap}
#ctx .csep{height:1px;background:var(--border);margin:4px 0}
#wv{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
@media (pointer:coarse){#ctx .citem{padding:10px 16px;font-size:13px}}
#ctx:focus{outline:none}
#exp{position:fixed;inset:0;background:rgba(12,10,8,.72);display:flex;align-items:flex-start;justify-content:center;z-index:42;padding:40px 16px 16px;overflow:auto}
#exp.hidden{display:none}
#exp .panel{background:var(--bg2);border:1px solid var(--border);width:min(640px,100%);box-shadow:0 14px 48px rgba(0,0,0,.65)}
#exp .phead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
#exp .phead b{font:400 20px var(--serif)}
#exp section{padding:12px 14px;border-bottom:1px solid var(--border)}
#exp h3{margin:0 0 10px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500}
#exp .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#exp .row + .row{margin-top:9px}
#exp .row > label{color:var(--gray);min-width:104px}
#exp .snote{font-size:10px;color:var(--dim)}
#exp .xprev{color:var(--gray);word-break:break-all}
.xfmt{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.xfmt .dd{min-width:120px}
.xfmt .dd[data-k=rate]{min-width:190px}
.xnum{width:72px;background:var(--bg);border:1px solid var(--border);color:var(--white);font:inherit;font-size:12px;padding:5px 7px;outline:none;font-variant-numeric:tabular-nums}
.xtext{flex:1;min-width:160px;background:var(--bg);border:1px solid var(--border);color:var(--white);font:inherit;font-size:12px;padding:6px 8px;outline:none}
.xnum:focus,.xtext:focus{border-color:var(--gold)}
.xtok{display:flex;flex-wrap:wrap;gap:4px}
.xtok button{background:var(--bg3);border:1px solid var(--border);color:var(--blue);font:inherit;font-size:10px;padding:2px 6px;cursor:pointer}
.xtok button:hover{border-color:var(--blue)}
.xfoot{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.xfoot .primary:disabled{opacity:.4;cursor:default}
.xjob{border-bottom:1px solid var(--border);padding:8px 0;display:flex;flex-direction:column;gap:4px}
.xjob .xj1,.xjob .xj2{display:flex;align-items:baseline;gap:10px}
.xjob .xn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xjob .xs{font-size:10px;color:var(--gold);white-space:nowrap}
.xjob.done .xs{color:var(--green)}
.xjob.failed .xs,.xjob .xr.warn{color:#ff6b5e}
.xjob .xf,.xjob .xr{font-size:10px;color:var(--gray)}
.xjob .xa{display:flex;gap:6px;align-items:center}
.xjob .bbar{height:3px;background:var(--bg4);overflow:hidden}
.xjob .bbar i{display:block;height:100%;background:var(--pink);transition:width .15s}
.xjob.done .bbar i{background:var(--green)}
#expN:not(:empty){margin-left:6px;color:var(--gold)}
#expBtn{height:26px}
@media (max-width:760px){
  #exp{padding:8px}
  #exp .row > label{min-width:0;flex-basis:100%}
  .xfmt{display:grid;grid-template-columns:.62fr 1.3fr 1.15fr auto}
  .xfmt .dd,.xfmt .dd[data-k=rate]{min-width:0}
}