/* Mise en page : appli mobile d'abord, onglets en bas ; sur grand écran ils passent en colonne à gauche. Seules les pochettes apportent de la couleur. */
:root{
  --bg:#F6F6F4; --surface:#FFFFFF; --ink:#17171B; --muted:#6C6C76; --line:#E5E5E1; --line2:#CFCFCA;
  --accent:#3A38D4; --accent-soft:#ECECFC; --ok:#1E7F50; --ok-soft:#E3F3EA; --gold:#D49A00; --gold-soft:#FFF3D1; --gold-ink:#7A5600; --danger:#B83434;
  --f-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r:10px; color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:30px;line-height:1.1}
h2{font-size:19px}
h3{font-size:15px;font-family:var(--f-body);font-weight:600;letter-spacing:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}

.banner{background:var(--accent-soft);color:var(--accent);font-size:12px;text-align:center;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.app{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:28px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.top .sub{margin-top:4px}
.iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none;overflow:hidden;padding:0}
.iconbtn svg{width:18px;height:18px}
.iconbtn img,.bigavatar img{width:100%;height:100%;object-fit:cover;display:block}

nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
nav.tabs .in{max-width:560px;margin:0 auto;display:flex}
.tab{flex:1;border:0;background:none;padding:8px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted)}
.tab svg{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--ink);font-weight:600}
.tab[aria-current="page"] svg{color:var(--accent)}
.brand{display:none}
body.out nav.tabs{display:none}
body.out .app{padding-bottom:32px}
@media (min-width:900px){
  nav.tabs{top:0;right:auto;width:220px;border-top:0;border-right:1px solid var(--line);padding:24px 12px}
  nav.tabs .in{flex-direction:column;gap:2px}
  .brand{display:block;font-family:var(--f-display);font-weight:700;font-size:28px;padding:0 12px 20px;letter-spacing:-.03em}
  .tab{flex-direction:row;gap:12px;font-size:15px;padding:10px 12px;border-radius:var(--r);flex:none}
  .tab[aria-current="page"]{background:var(--bg)}
  body:not(.out) .app, body:not(.out) .banner{margin-left:220px}
  .app{padding-bottom:48px;padding-top:32px}
}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.section{display:flex;flex-direction:column;gap:12px}
.linkbtn{border:0;background:none;color:var(--accent);padding:0;font-size:14px;font-weight:500;text-align:left}

.cv{position:relative;aspect-ratio:1;max-width:100%;border-radius:6px;overflow:hidden;background:var(--line);transition:transform .18s ease}
.cv svg{display:block;width:100%;height:100%}
.cv .heart{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#D2335A}
.cv .heart svg{width:13px;height:13px}
.cv .clean{position:absolute;left:6px;bottom:6px;font-size:10px;font-weight:600;background:rgba(255,255,255,.92);color:#1E7F50;padding:1px 6px;border-radius:99px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:18px 12px}
@media (min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 18px}}
.tile{border:0;background:none;padding:0;text-align:left;display:flex;flex-direction:column;gap:6px;min-width:0}
.tile .tt{font-weight:600;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .ta{font-size:12px;color:var(--muted);margin-top:-4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile:hover .cv,.cvbtn:hover .cv{transform:translateY(-2px)}

.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:120px;gap:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
@media (min-width:600px){.shelf{grid-auto-columns:150px}}

.list{display:flex;flex-direction:column}
.li{display:flex;gap:12px;align-items:center;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;width:100%}
.li .cv{width:52px;flex:none}
.li .grow{flex:1;min-width:0}
.li .grow b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .grow span{font-size:13px;color:var(--muted)}
.li > svg{width:18px;height:18px;flex:none;color:var(--muted)}
.cvbtn{border:0;background:none;padding:0;flex:none}
.tbtn{border:0;background:none;padding:0;text-align:left;display:block;width:100%;min-width:0}

.field{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 12px;min-width:0}
.field:focus{border-color:var(--accent);outline:none}
.searchbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:0 14px;flex:1;min-width:0}
.searchbox svg{width:18px;height:18px;color:var(--muted);flex:none}
.searchbox input{border:0;background:none;padding:11px 0;flex:1;min-width:0;outline:none}
.searchbox:focus-within{border-color:var(--accent)}
select.field{width:auto;max-width:100%;padding:8px 10px;border-radius:99px}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 12px;font-size:13px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--bg);border:1px solid var(--line)}
.tag svg{width:12px;height:12px}
.tag.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.tag.acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.tag.must{background:var(--gold-soft);color:var(--gold-ink);border-color:transparent}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:9px 16px;font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.danger{color:var(--danger)}
.btn.big{justify-content:center;padding:13px 18px;font-size:15px}
.mini{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 10px;font-size:12px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.mini svg{width:12px;height:12px;flex:none}
.mini.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 11px;font-size:13px}
.seg button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.seg.full{display:grid;grid-template-columns:1fr 1fr}
.rate{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:420px}
.rate button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 0;font-family:var(--f-mono);font-size:13px}
.rate button.on{background:var(--accent);border-color:var(--accent);color:#fff}

.star{border:0;background:none;padding:8px;color:var(--line2);flex:none;display:grid;place-items:center}
.star svg{width:22px;height:22px}
.star.on{color:var(--gold)}
.grip{border:0;background:none;padding:10px 4px;color:var(--muted);flex:none;touch-action:none;cursor:grab;display:grid;place-items:center}
.grip svg{width:18px;height:18px}
.li.dragging{background:var(--surface);box-shadow:0 10px 30px rgba(20,20,40,.14);border-radius:12px;position:relative;z-index:2;padding-inline:8px}
.li.dragging .grip{cursor:grabbing;color:var(--accent)}
.pos{font-family:var(--f-mono);font-size:12px;color:var(--muted);width:18px;text-align:right;flex:none}

.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi .v{font-family:var(--f-display);font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:4px}
.kpi .d{font-size:12px;color:var(--muted);margin-top:2px}
.chart{width:100%;height:auto;display:block;color:var(--muted)}
.chart .bar{fill:var(--accent);opacity:.35;cursor:pointer;transition:opacity .15s}
.chart .bar.sel,.chart .bar:hover{opacity:1}
.chart .gl{stroke:var(--line)}
.chart text{font-family:var(--f-mono);font-size:11px;fill:currentColor}
.hbar{display:grid;grid-template-columns:90px 1fr 28px;gap:10px;align-items:center;font-size:13px}
.hbar .track{height:8px;background:var(--bg);border-radius:99px;overflow:hidden}
.hbar .fill{height:100%;background:var(--ink);border-radius:99px}
.progress{height:6px;background:var(--bg);border-radius:99px;overflow:hidden}
.progress div{height:100%;background:var(--accent)}

.sheet{position:fixed;inset:0;z-index:40;background:rgba(10,10,14,.45);display:flex;justify-content:center;align-items:flex-end}
.panel{background:var(--surface);width:100%;max-width:680px;max-height:100%;overflow-y:auto;border-radius:18px 18px 0 0;padding-block:calc(14px + env(safe-area-inset-top,0px)) calc(28px + env(safe-area-inset-bottom,0px));padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px;animation:up .22s ease}
@media (min-width:700px){.sheet{align-items:center;padding:24px}.panel{border-radius:18px;max-height:92vh;padding:20px 28px 28px}}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}.cv{transition:none}}
.sheetbar{display:flex;align-items:center;gap:10px;margin-bottom:-6px}
.sheetbar span{font-size:13px;color:var(--muted)}
.hero{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:560px){.hero{grid-template-columns:220px 1fr;align-items:end}}
.hero .cv{max-width:280px;width:100%;border-radius:8px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
@media (min-width:560px){.facts.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facts div{min-width:0}
.facts b{display:block;font-weight:500;overflow-wrap:anywhere}
.tracks{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:560px){.tracks{grid-template-columns:1fr 1fr}}
.tracks ol{margin:6px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:3px}
.ahead{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center}
.ahead .ph{width:104px;aspect-ratio:1;border-radius:50%;overflow:hidden}
.ahead .ph svg{display:block;width:100%;height:100%}
@media (max-width:420px){.ahead{grid-template-columns:72px 1fr;gap:14px}.ahead .ph{width:72px}}
.bio{margin:0;line-height:1.6;max-width:62ch}
.disco{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:18px 12px}
.disco .missing .cv{filter:grayscale(1);opacity:.35}
.disco .item{display:flex;flex-direction:column;gap:5px;min-width:0;border:0;background:none;padding:0;text-align:left}
.disco .item .tt{font-size:12px;font-weight:600;line-height:1.25}
.disco .item .ta{font-size:11px;color:var(--muted)}
.disco .item .tag{align-self:flex-start;font-size:11px}
.grouph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:6px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;font-size:14px;max-width:calc(100% - 32px)}
@media (min-width:900px){.toast{bottom:28px}}
.ed{display:flex;flex-direction:column;gap:8px}
.ed button{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px;text-align:left;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ed button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.form2{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:520px){.form2{grid-template-columns:1fr 1fr}}
.form2 label,.fl{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:500}
.fl .field{color:var(--ink);font-size:15px;font-weight:400}
.swi{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.swi input{width:20px;height:20px;accent-color:var(--accent)}
.empty{text-align:center;padding:32px 16px;color:var(--muted)}
.notice{background:var(--accent-soft);color:var(--accent);border-radius:12px;padding:12px 14px;font-size:13px}
textarea.field{font-family:var(--f-mono);font-size:12px;min-height:180px;resize:vertical;white-space:pre}
.bigavatar{width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--muted)}
.bigavatar svg{width:36px;height:36px}

.auth{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;min-height:min(760px,calc(100vh - 80px))}
@media (min-width:860px){.auth{grid-template-columns:1.15fr 420px;gap:56px}}
.auth-art{border-radius:22px;overflow:hidden;height:220px;position:relative;background:var(--ink)}
@media (min-width:860px){.auth-art{height:560px}}
.mosaic{position:absolute;inset:-20%;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;transform:rotate(-8deg);align-content:center}
.mosaic .cv{border-radius:8px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 12px 40px rgba(20,20,40,.06)}
.wordmark{font-family:var(--f-display);font-weight:700;font-size:60px;letter-spacing:-.05em;line-height:.9}
.err{color:var(--danger);font-size:13px}
.logo{display:inline-flex;align-items:center;gap:.28em;font-family:var(--f-display);font-weight:700;letter-spacing:-.05em;line-height:1;font-size:var(--logo,34px);color:var(--ink)}
.disc{width:.92em;height:.92em;flex:none;animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.disc{animation:none}}
.brand .logo{--logo:28px}
.hometop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.onair{background:#17171B;color:#F6F6F4;border-radius:20px;padding:18px;display:grid;grid-template-columns:116px minmax(0,1fr);gap:18px;align-items:center}
@media (min-width:600px){.onair{grid-template-columns:168px minmax(0,1fr);padding:22px;gap:26px}}
.onair .cvbtn{width:100%}
.onair .cv{border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.onair .label{color:#A9A9B6}
.onair h2{font-size:24px;color:#fff;overflow-wrap:anywhere}
.onair .muted{color:#B9B9C4}
.onair .btn{background:transparent;color:#fff;border-color:#43434D}
.onair .btn.light{background:#fff;color:#17171B;border-color:#fff}
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (min-width:700px){.strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.strip > *{background:var(--surface);padding:14px 16px;border:0;text-align:left;min-width:0}
.strip .v{font-family:var(--f-display);font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px;line-height:1.15}
.strip .d{font-size:12px;color:var(--muted)}
.disco{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
.disco .acts{flex-direction:column;align-items:stretch;gap:4px}
.disco .mini{justify-content:center;white-space:normal;text-align:center}
.mini{max-width:100%}
.li.missing .cv{filter:grayscale(1);opacity:.4}
#wllist .li{transition:transform .2s cubic-bezier(.2,.8,.2,1);background:var(--bg)}
#wllist .li.dragging{transition:none;padding-inline:0;border-radius:10px;background:var(--surface);box-shadow:0 14px 34px rgba(20,20,40,.16)}
#wllist .li.dragging.settling{transition:transform .18s ease;box-shadow:none}
body.dragging-on{user-select:none;-webkit-user-select:none;cursor:grabbing}
.linkbtn svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.cv img{display:block;width:100%;height:100%;object-fit:cover}
.mcover{width:140px;aspect-ratio:1;border-radius:8px;border:1.5px dashed var(--line2);display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:12px;overflow:hidden;cursor:pointer;background:var(--bg);flex:none}
.mcover svg{width:26px;height:26px}
.mcover img{width:100%;height:100%;object-fit:cover}
.form2 .full{grid-column:1/-1}
textarea.plain{font-family:var(--f-body);font-size:14px;min-height:110px;white-space:pre-wrap}
.req{color:var(--danger)}
.btn:disabled{opacity:.45;cursor:default}
.onair .sleeve{position:relative;width:86%}
.onair .art{position:relative;z-index:1;display:block;width:100%;transition:transform .08s}
.onair .recwrap{position:absolute;top:4%;left:4%;width:92%;aspect-ratio:1;z-index:0;transform:translateX(22%);transition:transform .45s cubic-bezier(.2,.9,.3,1)}
.onair .rec{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at center,#F6F6F4 0 2.5%,var(--lab,#E7B23C) 3% 17%,#0c0c0e 17.5% 19%,transparent 19.5%),repeating-radial-gradient(circle at center,#2B2B33 0 2px,#3A3A44 2px 4px);box-shadow:0 0 0 1px #55555F,0 6px 20px rgba(0,0,0,.45);animation:spin 3s linear infinite}
.onair .shuffling .recwrap{transform:translateX(0)}
.onair .shuffling .rec{animation-duration:.45s}
.onair.landed .art{animation:drop .45s cubic-bezier(.2,1.35,.4,1)}
.onair.landed .recwrap{animation:peek .75s .15s cubic-bezier(.2,.9,.3,1) both}
.onair .oninfo{transition:opacity .15s}
.onair .oninfo.fade{opacity:.2}
.onair.landed .oninfo{animation:fadeup .4s .1s both}
@keyframes drop{0%{transform:translateY(-12px) scale(.92);opacity:.5}100%{transform:none;opacity:1}}
@keyframes peek{from{transform:translateX(0)}to{transform:translateX(22%)}}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.onair .rec,.onair.landed .art,.onair.landed .recwrap,.onair.landed .oninfo{animation:none!important}}
.onair .gear{border:1px solid #43434D;background:transparent;color:#D8D8E0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;padding:0}
.onair .gear svg{width:17px;height:17px}
.onair .gear[aria-expanded="true"]{background:#fff;color:#17171B;border-color:#fff}
.onair .opts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;padding-top:14px;border-top:1px solid #2E2E36}
.onair .chip{background:transparent;color:#D8D8E0;border-color:#43434D}
.onair .chip[aria-pressed="true"]{background:#fff;color:#17171B;border-color:#fff}
html.dark .onair .gear[aria-expanded="true"],html.dark .onair .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
html.dark{--bg:#111114;--surface:#1A1A1F;--ink:#F1F1F3;--muted:#9B9BA7;--line:#2B2B32;--line2:#4A4A55;--accent:#9C9BFF;--accent-soft:#25254A;--ok:#5CCB91;--ok-soft:#163326;--gold:#F2B92C;--gold-soft:#3A2E10;--gold-ink:#F5CD6B;--danger:#F07C7C;color-scheme:dark}
html.dark .rate button.on{color:#111114}
html.dark .onair{background:var(--surface);border:1px solid var(--line)}
html.dark .auth-card,html.dark .li.dragging{box-shadow:0 12px 40px rgba(0,0,0,.4)}
html.dark .cv{background:#26262C}
html.dark .disc > circle:first-child{fill:#34343C}
html.dark .disc circle[fill="none"]{stroke:#4A4A55}
.auth{grid-template-columns:minmax(0,420px)!important;justify-content:center}
.auth-card > div:first-child{text-align:center}
.hometop{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:12px}
.hometop .logo{justify-self:center}
.crop{position:fixed;inset:0;z-index:80;background:rgba(10,10,14,.82);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.crop .box{background:var(--surface);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:440px;max-height:100%;overflow-y:auto}
.crop canvas{width:100%;height:auto;aspect-ratio:1;touch-action:none;cursor:grab;border-radius:10px;display:block}
.crop input[type=range]{width:100%;accent-color:var(--accent)}
.mphoto{display:flex;flex-direction:column;gap:6px;width:150px;flex:none}
.mphoto .mcover{width:100%}
.mphoto .mini{justify-content:center;cursor:pointer}
@property --glow{syntax:'<color>';inherits:true;initial-value:#3A38D4}
.onair{grid-template-columns:116px minmax(0,1fr);grid-template-areas:"cover info" "acts acts";row-gap:14px;background:radial-gradient(120% 150% at 0% 50%,color-mix(in srgb,var(--glow) 40%,transparent),transparent 62%),#17171B;transition:--glow .22s ease}
html.dark .onair{background:radial-gradient(120% 150% at 0% 50%,color-mix(in srgb,var(--glow) 34%,transparent),transparent 62%),var(--surface)}
.onair .sleeve{grid-area:cover;align-self:center}
.onair .oninfo{grid-area:info;height:116px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.onair .onacts{grid-area:acts;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.onair h2{line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.onair .one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (min-width:600px){.onair{grid-template-columns:168px minmax(0,1fr);grid-template-areas:"cover info" "cover acts";row-gap:10px}.onair .oninfo{height:118px;align-self:end}.onair .onacts{align-self:start}}
.onair .btn.shuffle{border:0;color:#17171B;font-weight:600;background:linear-gradient(90deg,#F25F5C,#F2A541,#E7B23C,#7FB069,#2E86AB,#9C9BFF,#F25F5C);background-size:300% 100%;animation:hue 6s linear infinite;box-shadow:0 4px 18px color-mix(in srgb,var(--glow) 50%,transparent)}
.onair .btn.shuffle:hover{filter:brightness(1.08)}
.onair .btn.shuffle:disabled{opacity:1}
.onair.spinning .btn.shuffle{animation-duration:.7s}
@keyframes hue{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.onair .btn.shuffle{animation:none}.onair{transition:none}}
.seg button svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.scanview{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#2C2C35,#0C0C10);display:grid;place-items:center}
.scanview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.scanview .frame{width:62%;aspect-ratio:1;border:2px solid rgba(255,255,255,.9);border-radius:10px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.scanview.bc .frame{aspect-ratio:2.2/1;width:72%}
.scanview .laser{position:absolute;left:16%;right:16%;top:50%;height:2px;background:#F25F5C;box-shadow:0 0 12px #F25F5C;animation:laser 1.6s ease-in-out infinite alternate}
@keyframes laser{from{transform:translateY(-30px)}to{transform:translateY(30px)}}
.scanview .hint{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;color:#fff;font-size:13px}
.scanmsg{position:relative;color:#fff;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:14px}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.scanview .laser{animation:none}}
select.field{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236C6C76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 12px;padding-right:38px!important;padding-left:14px;cursor:pointer}
html.dark select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239B9BA7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
select.field::-ms-expand{display:none}
.appicon{width:72px;height:72px;border-radius:17px;background:#17171B;display:grid;place-items:center;flex:none;box-shadow:0 6px 16px rgba(20,20,40,.18)}
.appicon{overflow:hidden;background:#0E0E11}
.appicon svg{display:block;width:100%;height:100%}
.appicon.sm{width:48px;height:48px;border-radius:12px}
html.dark .appicon{box-shadow:0 0 0 1px var(--line)}
.installbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.steps{margin:0;padding:0;list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:12px}
.steps li{counter-increment:st;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;line-height:1.7}
.steps li::before{content:counter(st);width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:600;display:grid;place-items:center;font-size:13px}
.kbd{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border:1px solid var(--line);border-radius:7px;background:var(--bg);font-weight:500;font-size:14px;white-space:nowrap;vertical-align:1px}
.kbd svg{width:14px;height:14px}
@media (min-width:900px){body:not(.out){padding-left:220px}body:not(.out) .app{margin-left:auto;margin-right:auto;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}