/* ── Sur — offline music player ─────────────────────────────────────────── */

:root{
  --accent:#7c3aed;
  --accent2:#db2777;
  --bg:#0b0b12;
  --bg2:#12121c;
  --card:#171724;
  --card2:#1e1e2e;
  --line:#272738;
  --fg:#f2f2f7;
  --fg2:#a1a1b5;
  --fg3:#6e6e85;
  --danger:#ef4444;
  --nav-h:60px;
  --mini-h:62px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --r:16px;
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#f6f6fa; --bg2:#ffffff; --card:#ffffff; --card2:#f0f0f6;
  --line:#e2e2ec; --fg:#15151f; --fg2:#5a5a70; --fg3:#8b8ba3;
  color-scheme:light;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* class-level display rules below would otherwise beat the UA [hidden] rule */
[hidden]{display:none!important}

html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Bengali","Hind Siliguri",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.45;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
body.bn{font-size:15.5px}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
img{display:block;max-width:100%}

.ic{width:22px;height:22px;fill:currentColor;flex:none;pointer-events:none}

/* ── top bar ──────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:30;
  padding:calc(var(--safe-t) + 10px) 14px 10px;
  display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.brand-ic{width:26px;height:26px;color:var(--accent)}
.brand h1{font-size:20px;display:flex;align-items:baseline;gap:7px}
.brand-sub{font-size:11.5px;font-weight:500;color:var(--fg3);letter-spacing:0}
.topbar-actions{display:flex;align-items:center;gap:4px}

.iconbtn{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:var(--fg2);transition:background .15s,color .15s;
}
.iconbtn:active{background:var(--card2);color:var(--fg)}
.iconbtn.big{width:46px;height:46px;color:var(--fg)}
.iconbtn.big .ic{width:26px;height:26px}
.iconbtn.xl .ic{width:30px;height:30px}
.iconbtn.is-on{color:var(--accent)}
#btn-lang{font-size:12px;font-weight:800;letter-spacing:.03em}

.searchwrap{
  position:absolute;inset:calc(var(--safe-t) + 6px) 12px 6px;
  display:flex;align-items:center;gap:8px;padding:0 10px;
  background:var(--card);border:1px solid var(--line);border-radius:13px;
}
.searchwrap .ic{color:var(--fg3);width:19px;height:19px}
.searchwrap input{flex:1;background:none;border:0;outline:0;height:42px;font-size:15px}

/* ── mode switch ──────────────────────────────────────────────────────── */
.moderow{
  /* not sticky: the topbar already owns top:0 and the two would overlap */
  position:relative;z-index:29;padding:8px 10px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.modeswitch{
  display:flex;gap:5px;background:var(--card);padding:4px;border-radius:14px;
  overflow-x:auto;scrollbar-width:none;
}
.modeswitch::-webkit-scrollbar{display:none}
.mode-b{
  flex:1 0 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 10px;border-radius:11px;font-size:12.5px;font-weight:700;
  color:var(--fg3);white-space:nowrap;transition:.18s;
}
.mode-b .ic{width:16px;height:16px}
.mode-b.is-on{
  color:#fff;
  background:linear-gradient(135deg,var(--mode-a),var(--mode-b));
  box-shadow:0 4px 14px color-mix(in srgb,var(--mode-a) 40%,transparent);
}

.secttl{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--fg3);
  padding:14px 16px 4px;
}

.autorow .art{background:linear-gradient(140deg,var(--accent),var(--accent2))}
.autorow .art .ic{width:22px;height:22px}
.autobadge{
  font-size:10.5px;font-weight:700;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  padding:3px 8px;border-radius:8px;flex:none;
}

/* ── layout ───────────────────────────────────────────────────────────── */
#main{padding-bottom:calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + 8px)}
.view{min-height:40vh}

.segrow{padding:12px 14px 4px}
.seg{display:flex;gap:6px;background:var(--card);padding:4px;border-radius:13px;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg-b{
  flex:1;min-width:74px;padding:8px 12px;border-radius:10px;font-size:13.5px;
  font-weight:600;color:var(--fg2);white-space:nowrap;transition:.15s;
}
.seg-b.is-on{background:var(--accent);color:#fff}

.listbar{display:flex;align-items:center;gap:8px;padding:10px 14px 6px}
.listcount{font-size:12.5px;color:var(--fg3);flex:1;font-weight:500}
.listbar-right{display:flex;gap:6px;align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  font-size:12.5px;font-weight:600;color:var(--fg2);
}
.chip .ic{width:16px;height:16px}
.chip:active{background:var(--card2)}
.select{
  -webkit-appearance:none;appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg3) 50%),linear-gradient(135deg,var(--fg3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

.crumbs{padding:2px 14px 8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:13px;color:var(--fg2)}
.crumbs b{color:var(--fg)}
.crumbs button{color:var(--accent);font-weight:600}

/* ── lists ────────────────────────────────────────────────────────────── */
.list{padding:0 8px}
.row{
  display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:14px;
  cursor:pointer;position:relative;
}
.row:active{background:var(--card)}
.row.is-playing{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.row.is-playing .row-title{color:var(--accent)}
.art{
  width:50px;height:50px;border-radius:11px;flex:none;object-fit:cover;
  background:linear-gradient(140deg,var(--accent),var(--accent2));
}
.art.ph{display:grid;place-items:center}
.art.ph .ic{width:24px;height:24px;color:#fff;opacity:.9}
.art.sq{border-radius:13px}
.row-meta{flex:1;min-width:0}
.row-title{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:12.5px;color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.row-dur{font-size:12px;color:var(--fg3);font-variant-numeric:tabular-nums;flex:none}
.row-more{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--fg3);flex:none}
.row-more .ic{width:18px;height:18px}
.list.compact .row{padding:7px 8px}
.list.compact .art{width:42px;height:42px}

.eqbars{display:none;gap:2px;align-items:flex-end;height:15px;width:15px;flex:none}
.row.is-playing .eqbars{display:flex}
.row.is-playing .row-dur{display:none}
.eqbars i{width:3px;background:var(--accent);border-radius:2px;animation:bar .9s ease-in-out infinite}
.eqbars i:nth-child(2){animation-delay:.25s}
.eqbars i:nth-child(3){animation-delay:.5s}
@keyframes bar{0%,100%{height:20%}50%{height:100%}}
.row.is-paused .eqbars i{animation-play-state:paused}

.empty{padding:60px 30px;text-align:center;color:var(--fg2)}
.empty-ic{width:56px;height:56px;color:var(--accent);opacity:.5;margin:0 auto 14px}
.empty h2{font-size:18px;margin-bottom:6px;color:var(--fg)}
.empty p{margin:0 0 18px;font-size:14px}
.empty .hint{font-size:12.5px;color:var(--fg3);margin-top:16px;line-height:1.6}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border-radius:13px;font-weight:700;font-size:14.5px;
}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--fg2)}
.btn.big{height:50px;padding:0 26px}
.btn.wide{width:100%}
.btn:active{transform:scale(.98)}

.row-btn{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 4px;
  font-size:14.5px;font-weight:600;color:var(--fg);border-bottom:1px solid var(--line);
}
.row-btn:last-child{border-bottom:0}
.row-btn .ic{color:var(--fg3);width:20px;height:20px}
.row-btn.danger{color:var(--danger)}
.row-btn.danger .ic{color:var(--danger)}

/* ── mini player ──────────────────────────────────────────────────────── */
.mini{
  position:fixed;left:8px;right:8px;bottom:calc(var(--nav-h) + var(--safe-b) + 6px);
  z-index:35;height:var(--mini-h);display:flex;align-items:center;gap:11px;
  padding:0 8px 0 8px;border-radius:17px;overflow:hidden;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--line);box-shadow:0 10px 34px rgba(0,0,0,.42);
  animation:slideup .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes slideup{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
.mini-prog{position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--line)}
.mini-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s linear}
.mini-art{width:46px;height:46px;border-radius:11px;object-fit:cover;flex:none;background:linear-gradient(140deg,var(--accent),var(--accent2))}
.mini-meta{flex:1;min-width:0}
.mini-title{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-artist{font-size:11.5px;color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── bottom nav ───────────────────────────────────────────────────────── */
.bnav{
  position:fixed;left:0;right:0;bottom:0;z-index:36;height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);display:flex;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.bnav-b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--fg3);font-size:10.5px;font-weight:600}
.bnav-b .ic{width:23px;height:23px}
.bnav-b.is-on{color:var(--accent)}

/* ── sheets ───────────────────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:60}
.np{background:var(--bg);display:flex;flex-direction:column;animation:npin .3s cubic-bezier(.2,.9,.3,1)}
@keyframes npin{from{transform:translateY(100%)}to{transform:none}}
.np.closing{animation:npout .24s ease-in forwards}
@keyframes npout{to{transform:translateY(100%)}}
.np-bg{
  position:absolute;inset:-30%;background-size:cover;background-position:center;
  filter:blur(58px) saturate(180%) brightness(.55);transform:scale(1.25);opacity:.85;transition:background-image .4s;
}
.np-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--bg) 92%)}
.np-inner{
  position:relative;flex:1;display:flex;flex-direction:column;
  padding:calc(var(--safe-t) + 8px) 22px calc(var(--safe-b) + 14px);gap:8px;min-height:0;
}
.np-top{display:flex;align-items:center;gap:10px}
.np-src{flex:1;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.np-artwrap{
  flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:10px 0;
  position:relative;overflow:hidden;
}
.np-art{
  /* the vh term is what actually keeps the square from pushing the title and
     seek bar off screen — a percentage max-height does not resolve reliably
     against an auto-sized flex item */
  width:min(78vw,340px,38vh);max-width:100%;max-height:100%;
  aspect-ratio:1;border-radius:22px;object-fit:cover;
  background:linear-gradient(140deg,var(--accent),var(--accent2));
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  transition:transform .3s;
}
.np-art.swiping{transition:none}
.np-vis{position:absolute;left:22px;right:22px;bottom:6px;height:56px;width:calc(100% - 44px);opacity:.85}

.np-meta{text-align:center;padding:2px 0 6px}
.np-meta h2{font-size:21px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-meta p{margin:3px 0 0;color:var(--fg2);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.np-seek{padding:2px 0 0}
.np-times{display:flex;justify-content:space-between;font-size:11.5px;color:var(--fg3);font-variant-numeric:tabular-nums;margin-top:-2px}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;background:none;height:26px;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:var(--line)}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--fg);
  margin-top:-5px;box-shadow:0 1px 5px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--fg)}
#seek::-webkit-slider-thumb{background:var(--accent)}

.np-ctrl{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 10px}
.playbtn{
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 45%,transparent);
}
.playbtn .ic{width:34px;height:34px}
.playbtn:active{transform:scale(.94)}

.np-tools{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding-top:10px}
.tool{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--fg3);font-size:10.5px;font-weight:600;padding:4px 14px;border-radius:11px}
.tool .ic{width:20px;height:20px}
.tool.is-on{color:var(--accent)}

/* bottom sheets */
.bottomsheet{
  background:rgba(0,0,0,.5);display:flex;align-items:flex-end;
  animation:fade .2s;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.bottomsheet>.bs-head,.bottomsheet>.bs-body{background:var(--bg2)}
.bs-head{
  width:100%;display:flex;align-items:center;gap:10px;padding:16px 18px 10px;
  border-radius:22px 22px 0 0;order:1;
}
.bs-head h2{font-size:17px;flex:1}
.bs-body{
  width:100%;order:2;padding:0 18px calc(var(--safe-b) + 20px);
  max-height:min(74vh,620px);overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.bottomsheet{flex-direction:column;justify-content:flex-end}
.bottomsheet .bs-head,.bottomsheet .bs-body{animation:slideup .26s cubic-bezier(.2,.9,.3,1)}

/* ── settings ─────────────────────────────────────────────────────────── */
.settings{padding:14px 14px 20px;display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.card h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg3);margin-bottom:8px}
.statline{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--fg2)}
.statline b{color:var(--fg);font-weight:600}
.about p{font-size:13px;color:var(--fg2);margin:0 0 8px;line-height:1.6}
.ver{font-size:11.5px;color:var(--fg3)}

.switchrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.card>.switchrow:first-of-type,.bs-body>.switchrow:first-child{border-top:0}
.switchrow>span{flex:1;display:flex;flex-direction:column;gap:2px}
.switchrow b{font-size:14px;font-weight:600}
.switchrow i{font-style:normal;font-size:12px;color:var(--fg3);line-height:1.4}
.switch{
  -webkit-appearance:none;appearance:none;width:46px;height:27px;border-radius:14px;
  background:var(--line);position:relative;flex:none;cursor:pointer;transition:background .2s;margin:0;
}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(19px)}

.sliderrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.sliderrow label{font-size:13.5px;font-weight:600;flex:none;min-width:78px}
.sliderrow input[type=range]{flex:1}
.sliderrow output{font-size:12px;color:var(--fg3);font-variant-numeric:tabular-nums;min-width:52px;text-align:right;flex:none}

.accentrow{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.acc{width:32px;height:32px;border-radius:50%;border:2px solid transparent;transition:.15s}
.acc.is-on{border-color:var(--fg);transform:scale(1.12)}

/* ── equalizer ────────────────────────────────────────────────────────── */
.warn{
  background:color-mix(in srgb,#f59e0b 16%,transparent);border:1px solid color-mix(in srgb,#f59e0b 40%,transparent);
  color:#fbbf24;border-radius:12px;padding:10px 13px;font-size:12.5px;line-height:1.55;margin:4px 0 10px;
}
.eqbody{opacity:.4;pointer-events:none;transition:opacity .2s}
.eqbody.on{opacity:1;pointer-events:auto}
.bands{display:flex;gap:2px;justify-content:space-between;padding:16px 0 4px;border-top:1px solid var(--line);margin-top:10px}
.band{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.band input[type=range]{
  /* writing-mode is the standard way and what modern browsers use; the
     deprecated slider-vertical keyword stays for iOS Safari before 17.4,
     which ignores writing-mode on range inputs. Chrome logs a deprecation
     warning for it — harmless, and dropping it would break older iPhones. */
  -webkit-appearance:slider-vertical;appearance:slider-vertical;
  writing-mode:vertical-lr;direction:rtl;
  width:22px;height:118px;
}
.band .bl{font-size:9.5px;color:var(--fg3);font-weight:600;white-space:nowrap}
.band .bv{font-size:9.5px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:700}
.knobs{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;padding-top:6px}
.knob{display:flex;flex-direction:column;gap:0;padding:6px 0}
.knob label{font-size:12px;font-weight:600;color:var(--fg2)}
.knob output{font-size:11px;color:var(--fg3);text-align:right;font-variant-numeric:tabular-nums}

/* ── sleep ────────────────────────────────────────────────────────────── */
.sleepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 0}
.sleepgrid button{
  height:56px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  font-weight:700;font-size:14px;color:var(--fg);display:grid;place-items:center;
}
.sleepgrid button.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.sleepgrid button small{display:block;font-size:10.5px;font-weight:500;color:var(--fg3)}
.sleepgrid button.is-on small{color:rgba(255,255,255,.8)}
.sleepnow{text-align:center;padding:12px;font-size:13.5px;color:var(--accent);font-weight:600}

/* ── menu sheet ───────────────────────────────────────────────────────── */
.menuitems{padding:4px 0 8px}
.mi{display:flex;align-items:center;gap:14px;width:100%;padding:14px 4px;font-size:14.5px;font-weight:600;border-bottom:1px solid var(--line)}
.mi:last-child{border-bottom:0}
.mi .ic{color:var(--fg3);width:20px;height:20px}
.mi.danger{color:var(--danger)}
.mi.danger .ic{color:var(--danger)}
.mi-info{padding:10px 4px;font-size:13px;color:var(--fg2);line-height:1.7}
.mi-info b{color:var(--fg);font-weight:600}

/* ── modal ────────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:24px;animation:fade .18s}
.modal-box{background:var(--bg2);border-radius:20px;padding:20px;width:100%;max-width:380px;border:1px solid var(--line)}
.modal-box h2{font-size:17px;margin-bottom:10px}
.modal-box input[type=text]{width:100%;height:44px;padding:0 13px;border-radius:12px;background:var(--card);border:1px solid var(--line);outline:0;font-size:15px}
.modal-box p{font-size:13.5px;color:var(--fg2);margin:0 0 4px;line-height:1.6}
.modal-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.plpick{max-height:240px;overflow-y:auto;margin-top:4px}

/* ── toast / importing ────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + 22px);
  transform:translateX(-50%);z-index:90;background:var(--card2);color:var(--fg);
  padding:11px 18px;border-radius:13px;font-size:13.5px;font-weight:600;
  box-shadow:0 8px 28px rgba(0,0,0,.45);border:1px solid var(--line);
  max-width:calc(100vw - 40px);text-align:center;animation:fade .2s;
}
.importing{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:30px}
.imp-box{background:var(--bg2);border-radius:20px;padding:26px 24px;text-align:center;width:100%;max-width:320px}
.imp-box p{margin:14px 0 12px;font-size:13.5px;color:var(--fg2);word-break:break-word}
.spinner{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin:0 auto;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.imp-bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.imp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s}

/* ── desktop ──────────────────────────────────────────────────────────── */
@media (min-width:820px){
  #main{max-width:900px;margin:0 auto}
  .np-inner{max-width:520px;margin:0 auto;width:100%}
  .mini{left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 24px))}
  @keyframes slideup{from{transform:translateX(-50%) translateY(120%);opacity:0}to{transform:translateX(-50%);opacity:1}}
  .bs-head,.bs-body{max-width:560px;margin:0 auto}
  .bs-head{border-radius:22px 22px 0 0}
}

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