:root{
  --bg:#05080f;
  --cyan:#5ee7ff;
  --gold:#ffd166;
  --rose:#ff6b7a;
  --green:#7dffc0;
  --violet:#b18cff;
  --text:#7d8aa3;
  --line:#22304a;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{
  background:radial-gradient(circle at 50% 28%,#0b1826 0%,#05080f 72%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

/* ═══ 加载界面 ═══ */
.boot{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#0d1c2e 0%,#05080f 70%);
  cursor:pointer;opacity:1;transition:opacity .5s ease;
}
.boot.hide{opacity:0;pointer-events:none;}
.boot-inner{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:40px 30px;max-width:420px;text-align:center;
  animation:bootIn .9s ease both;
}
@keyframes bootIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.boot-title{display:flex;flex-direction:column;align-items:center;gap:12px;}
.boot-cn{
  display:flex;align-items:center;justify-content:center;gap:.20em;
  font-size:46px;font-weight:600;color:var(--cyan);line-height:1;
  text-shadow:0 0 30px rgba(94,231,255,.6),0 0 70px rgba(94,231,255,.28);
}
.boot-cn .cn-dot{opacity:.42;font-weight:400;font-size:.62em;transform:translateY(-.06em);}
.boot-en{
  font-size:10px;font-weight:400;color:#4a5e7d;letter-spacing:.55em;
  padding-left:.55em;text-transform:uppercase;white-space:nowrap;
}
.boot-sub{font-size:10px;letter-spacing:.28em;color:#3e4a60;margin-top:-14px;}
.boot-rule{
  display:flex;flex-direction:column;gap:6px;padding:18px 26px;
  font-size:13px;letter-spacing:.12em;color:#8fa4c2;line-height:1.7;position:relative;
}
.boot-rule::before,.boot-rule::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:64px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,231,255,.5),transparent);
}
.boot-rule::before{top:0;}
.boot-rule::after{bottom:0;}
.boot-rule p{display:block;}
.boot-enter{
  font-size:12px;letter-spacing:.24em;color:var(--cyan);opacity:.85;
  animation:pulse 2s ease-in-out infinite;padding:9px 22px;
  border:1px solid rgba(94,231,255,.3);border-radius:22px;
  background:rgba(94,231,255,.05);
}
@keyframes pulse{0%,100%{opacity:.55;}50%{opacity:1;}}

/* ═══ 主布局 ═══ */
.app{
  height:100dvh;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 10px;
  max-width:560px;margin:0 auto;
}
.topbar{width:100%;display:flex;justify-content:center;align-items:center;position:relative;}
.tabs{
  display:flex;gap:3px;background:rgba(15,24,38,.7);
  border-radius:12px;padding:3px;border:1px solid #1a2538;
}
.tabs button{
  padding:5px 22px;border-radius:9px;background:transparent;border:none;
  color:#6b7a9c;font-family:inherit;font-size:11.5px;letter-spacing:.14em;
  cursor:pointer;transition:all .18s;
}
.tabs button.active{
  background:rgba(60,90,140,.6);color:#d5eeff;
  box-shadow:0 0 12px -4px rgba(94,231,255,.55);
}
.skin-btn{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  padding:5px 12px;border-radius:10px;
  background:rgba(20,32,50,.6);border:1px solid #22304a;
  color:#8fa4c2;font-size:10.5px;letter-spacing:.08em;
  font-family:inherit;cursor:pointer;transition:all .18s;
  white-space:nowrap;z-index:2;
}
.skin-btn:hover{background:rgba(35,58,90,.85);border-color:rgba(94,231,255,.5);color:#d5eeff;}
.skin-btn:active{transform:translateY(-50%) scale(.96);}
.skin-btn span{display:inline-block;}
.skin-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  display:none;flex-direction:column;gap:4px;padding:6px;min-width:118px;
  background:linear-gradient(180deg,#101a2a,#0a121e);
  border:1px solid #1e2a3d;border-radius:12px;
  box-shadow:0 14px 34px -10px #000,0 0 24px -12px rgba(94,231,255,.4);
}
.skin-menu.show{display:flex;}
.skin-menu button{
  padding:8px 14px;border-radius:8px;background:transparent;
  border:1px solid transparent;color:#8fa4c2;font-size:11px;
  letter-spacing:.1em;font-family:inherit;cursor:pointer;
  text-align:left;transition:all .15s;
}
.skin-menu button:hover{background:rgba(35,58,90,.7);color:#d5eeff;}
.skin-menu button.current{
  background:rgba(60,90,140,.5);border-color:rgba(94,231,255,.5);color:#d5eeff;
  box-shadow:0 0 12px -4px rgba(94,231,255,.5);
}
.skin-menu button:active{transform:scale(.97);}

.hud{
  display:flex;gap:14px;font-size:11.5px;color:#57637c;
  letter-spacing:.05em;flex-wrap:wrap;justify-content:center;min-height:15px;
}
.hud b{color:#c8d4e6;font-weight:600;font-variant-numeric:tabular-nums;}
.hud .bad{color:var(--rose);}
.hud .good{color:var(--green);}
.hud .gold{color:var(--gold);}
.hud .vio{color:var(--violet);}

.levelTitle{
  font-size:13px;font-weight:600;letter-spacing:.16em;
  color:#b8c6dd;text-align:center;padding:2px 12px 3px;min-height:19px;
  text-shadow:0 0 14px rgba(94,231,255,.25);position:relative;
}
.levelTitle::before,.levelTitle::after{
  content:'';position:absolute;top:50%;width:22px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,231,255,.4),transparent);
}
.levelTitle::before{right:100%;margin-right:6px;}
.levelTitle::after{left:100%;margin-left:6px;}

.stage{
  flex:1;width:100%;display:flex;align-items:center;justify-content:center;
  min-height:0;padding:2px 0;
}
canvas{
  display:block;border-radius:16px;
  box-shadow:0 0 0 1px #16202f, 0 22px 55px -16px #000;
  touch-action:none;cursor:pointer;transition:box-shadow .45s ease;
}
canvas.win{
  box-shadow:0 0 0 1px rgba(125,255,192,.55),
             0 0 48px -6px rgba(125,255,192,.4),
             0 22px 55px -16px #000;
}
canvas.random{
  box-shadow:0 0 0 1px rgba(177,140,255,.5),
             0 0 42px -8px rgba(177,140,255,.35),
             0 22px 55px -16px #000;
}
canvas.bonus{
  box-shadow:0 0 0 1px rgba(255,209,102,.55),
             0 0 42px -8px rgba(255,209,102,.4),
             0 22px 55px -16px #000;
}

.tip{
  font-size:11.5px;color:#7d8ba3;text-align:center;
  min-height:30px;letter-spacing:.02em;max-width:440px;
  line-height:1.55;white-space:pre-line;transition:color .3s;
  padding:3px 10px 2px;position:relative;
}
.tip::before{
  content:'';display:block;width:60px;height:1px;margin:0 auto 5px;
  background:linear-gradient(90deg,transparent,rgba(94,231,255,.3),transparent);
}
.tip.win{color:var(--green);text-shadow:0 0 18px rgba(125,255,192,.5);}
.tip.rand{color:var(--violet);}
.tip.bonus{color:var(--gold);}

.actions{
  display:flex;gap:6px;width:100%;max-width:440px;
  align-items:stretch;margin-top:2px;
}
.actions button,.seedbar button,.ghost{
  position:relative;flex:1;padding:11px 4px;border-radius:13px;
  cursor:pointer;
  background:linear-gradient(180deg,rgba(24,38,60,.88),rgba(12,20,34,.92));
  border:1px solid var(--line);color:#8fa4c2;
  font-size:11.5px;letter-spacing:.08em;font-family:inherit;
  transition:all .18s;white-space:nowrap;overflow:hidden;isolation:isolate;
}
.actions button::before,.seedbar button::before,.ghost::before{
  content:'';position:absolute;inset:3px;border-radius:9px;
  border:1px dashed rgba(94,231,255,.13);pointer-events:none;
  transition:border-color .18s;
}
.actions button::after,.seedbar button::after{
  content:'';position:absolute;top:0;right:0;width:10px;height:10px;
  background:linear-gradient(225deg,
    var(--accent, rgba(94,231,255,.28)) 0%,
    var(--accent, rgba(94,231,255,.28)) 45%,
    transparent 45%);
  border-top-right-radius:12px;pointer-events:none;opacity:.75;
}
.actions button[data-accent="rose"]  { --accent: rgba(255,107,122,.42); }
.actions button[data-accent="cyan"]  { --accent: rgba(94,231,255,.42); }
.actions button[data-accent="gold"]  { --accent: rgba(255,209,102,.55); }
.actions button[data-accent="violet"]{ --accent: rgba(177,140,255,.42); }

.actions button[data-accent="gold"]{
  background:linear-gradient(180deg,rgba(60,48,20,.88),rgba(30,22,8,.92));
  border-color:rgba(255,209,102,.35);color:#ffe0a0;
}
.actions button[data-accent="gold"]:hover{
  border-color:rgba(255,209,102,.7);color:#fff1c8;
  box-shadow:0 0 20px -6px rgba(255,209,102,.6);
}
.actions button[data-accent="rose"]{border-color:rgba(255,107,122,.2);}
.actions button[data-accent="rose"]:hover{border-color:rgba(255,107,122,.55);color:#ffd0d6;}
.actions button[data-accent="violet"]{border-color:rgba(177,140,255,.2);}
.actions button[data-accent="violet"]:hover{border-color:rgba(177,140,255,.55);color:#e0d0ff;}

.actions button:hover,.seedbar button:hover,.ghost:hover{
  background:linear-gradient(180deg,rgba(38,56,86,.92),rgba(18,30,50,.92));
  border-color:rgba(94,231,255,.45);color:#d5eeff;transform:translateY(-1px);
}
.actions button:hover::before,.seedbar button:hover::before,.ghost:hover::before{
  border-color:rgba(94,231,255,.3);
}
.actions button:active{transform:translateY(0) scale(.97);}
.actions button.locked{opacity:.36;cursor:not-allowed;}
.actions button.locked:active{transform:none;}
.actions button.icon{
  flex:0 0 auto;width:44px;display:flex;align-items:center;justify-content:center;
  color:#8fa4c2;
}
.actions button.icon svg{display:block;}
.actions button.round{
  flex:0 0 auto;width:46px;border-radius:23px;padding:11px 4px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%, rgba(40,60,88,.95), rgba(14,24,42,.98));
  border-color:#2b3d5a;color:#c8d4e6;
  font-size:12px;font-variant-numeric:tabular-nums;font-weight:600;
}
.actions button.round::before{
  inset:5px;border-radius:50%;border-style:solid;
  border-color:rgba(94,231,255,.18);
}
.actions button.round::after{display:none;}
.actions button.round:hover{
  border-color:rgba(94,231,255,.6);
  box-shadow:0 0 22px -6px rgba(94,231,255,.7);
  color:#e0f6ff;
}

.diff-menu{
  width:100%;max-width:440px;display:none;
  grid-template-columns:1fr 1fr;gap:6px;padding:8px;
  background:linear-gradient(180deg,#101a2a,#0a121e);
  border:1px solid #1e2a3d;border-radius:14px;margin-top:2px;
}
.diff-menu.show{display:grid;}
.diff-menu button{
  position:relative;padding:10px 6px;border-radius:10px;
  background:rgba(20,32,50,.6);border:1px solid #22304a;
  color:#8fa4c2;font-size:11.5px;font-family:inherit;
  letter-spacing:.08em;cursor:pointer;transition:all .15s;
}
.diff-menu button:hover{background:rgba(35,58,90,.85);color:#d5eeff;}
.diff-menu button:active{transform:scale(.96);}
.diff-menu button i{font-style:normal;font-size:9px;color:#4a5670;margin-left:4px;}
.diff-menu button.locked{opacity:.4;cursor:not-allowed;}

.seedbar{display:none;gap:6px;width:100%;max-width:440px;}
.seedbar.show{display:flex;}
.seedbar button{flex:0 0 auto;padding:11px 14px;}
.seedbar input{
  flex:1;min-width:0;padding:11px 12px;border-radius:13px;
  background:rgba(15,24,38,.7);border:1px solid var(--line);
  color:#c8d4e6;font-size:11.5px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.04em;outline:none;
}
.seedbar input:focus{border-color:rgba(94,231,255,.5);}

/* ═══ 关卡抽屉 ═══ */
.sheet{
  position:fixed;inset:0;z-index:110;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(4,6,10,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s;
}
.sheet.show{display:flex;opacity:1;}
.sheet-inner{
  width:100%;max-width:560px;max-height:78dvh;
  background:linear-gradient(180deg,#111a28,#090e17);
  border:1px solid #1e2a3d;border-radius:20px 20px 0 0;
  padding:16px 18px calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:12px;
  transform:translateY(20px);transition:transform .25s;
}
.sheet.show .sheet-inner{transform:translateY(0);}
.sheet-head{display:flex;align-items:center;justify-content:space-between;}
.sheet-head h2{font-size:13px;letter-spacing:.28em;color:var(--cyan);font-weight:600;}
.ghost{
  flex:0 0 auto;padding:6px 14px;font-size:11px;
  letter-spacing:.12em;border-radius:14px;color:#8fa4c2;
}
.ghost::before,.ghost::after{display:none;}
.sheet-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));
  gap:8px;overflow-y:auto;padding-right:4px;-webkit-overflow-scrolling:touch;
}
.sheet-item{
  position:relative;aspect-ratio:1;border-radius:12px;
  background:rgba(20,32,50,.6);border:1px solid #22304a;
  color:#8fa4c2;font-size:13px;font-family:inherit;
  font-variant-numeric:tabular-nums;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.sheet-item:active{transform:scale(.94);}
.sheet-item.cleared{background:rgba(20,60,45,.6);border-color:rgba(125,255,192,.4);color:#7dffc0;}
.sheet-item.current{
  border-color:var(--cyan);color:#d5eeff;
  box-shadow:0 0 14px -4px rgba(94,231,255,.6);
}
.sheet-item.bonus{background:rgba(60,42,10,.6);border-color:rgba(255,209,102,.35);color:var(--gold);}
.sheet-item.bonus.cleared{background:rgba(60,42,10,.85);}
.sheet-item.bonus:hover{border-color:rgba(255,209,102,.7);box-shadow:0 0 14px -4px rgba(255,209,102,.6);}
.sheet-item.bonus svg{display:block;filter:drop-shadow(0 0 6px rgba(255,209,102,.7));}
.sheet-item.bonus.cleared svg{filter:drop-shadow(0 0 8px rgba(255,209,102,.9));}
.sheet-item.bonus::after{display:none;}

/* ═══ 结算面板 ═══ */
#overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,10,.88);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .35s;z-index:100;padding:20px;
}
#overlay.show{opacity:1;pointer-events:auto;}
.panel{
  position:relative;background:linear-gradient(180deg,#111a28,#090e17);
  border:1px solid #1e2a3d;border-radius:16px;
  padding:26px 28px;text-align:center;max-width:340px;width:100%;
  box-shadow:0 30px 70px -20px #000;
}
.panel::before{
  content:'';position:absolute;inset:5px;border-radius:11px;
  border:1px dashed rgba(125,255,192,.18);pointer-events:none;
}
.panel h2{
  font-size:16px;color:var(--green);letter-spacing:.2em;font-weight:600;
  margin-bottom:12px;text-shadow:0 0 22px rgba(125,255,192,.45);
}
.panel p{font-size:12.5px;line-height:1.9;color:#74819a;white-space:pre-line;}
.panel button{
  margin-top:22px;padding:10px 30px;border-radius:24px;cursor:pointer;
  background:transparent;border:1px solid var(--green);color:var(--green);
  font-size:12.5px;letter-spacing:.16em;font-family:inherit;transition:all .2s;
}
.panel button:hover{background:rgba(125,255,192,.12);box-shadow:0 0 24px rgba(125,255,192,.25);}

#toast{
  position:fixed;left:50%;bottom:120px;transform:translate(-50%,8px);
  background:#111a28;border:1px solid #1e2a3d;color:#93a1ba;
  font-size:12px;padding:9px 18px;border-radius:20px;
  opacity:0;pointer-events:none;transition:all .25s;z-index:90;
  letter-spacing:.06em;max-width:80vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0);}

/* ═══ 图鉴 ═══ */
.gallery{
  position:fixed;inset:0;z-index:120;display:none;flex-direction:column;
  background:rgba(4,6,10,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.gallery.show{display:flex;}
.gal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 10px;
}
.gal-head h2{font-size:14px;letter-spacing:.3em;color:var(--cyan);font-weight:600;}
.gal-tabs{display:flex;gap:3px;padding:0 20px 8px;}
.gal-tab{
  padding:6px 16px;border-radius:14px;background:transparent;
  border:1px solid #1e2a3d;color:#6b7a9c;font-size:11px;
  font-family:inherit;letter-spacing:.14em;cursor:pointer;transition:all .18s;
}
.gal-tab.active{
  background:rgba(60,90,140,.45);border-color:rgba(94,231,255,.5);color:#d5eeff;
}
.gal-hint{padding:0 20px 8px;font-size:10px;letter-spacing:.14em;color:#4a5670;}
.gal-body{
  flex:1 1 0;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  padding:4px 20px 30px;
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(138px,1fr));
  grid-auto-rows:min-content;
  align-content:start;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.gal-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0d1626,#080d16);
  border:1px solid #1a2538;border-radius:14px;
  overflow:hidden;cursor:pointer;transition:all .2s;
  user-select:none;-webkit-user-select:none;
}
.gal-card:hover{border-color:rgba(94,231,255,.5);transform:translateY(-3px);}
.gal-card canvas{
  width:100%;height:auto;aspect-ratio:1/1;
  display:block;border-radius:0;box-shadow:none;
  flex-shrink:0;pointer-events:none;
}
.gal-card .meta{padding:8px 10px 9px;display:flex;flex-direction:column;gap:2px;}
.gal-card .meta .name{
  font-size:11px;color:#c8d4e6;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gal-card .meta .sub{
  font-size:9.5px;color:#556280;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gal-card .badge{
  position:absolute;top:6px;left:6px;font-size:9px;
  padding:2px 7px;border-radius:8px;
  background:rgba(94,231,255,.14);color:var(--cyan);
  border:1px solid rgba(94,231,255,.35);letter-spacing:.06em;
}
.gal-card .badge.gold{
  background:rgba(255,209,102,.18);color:var(--gold);
  border-color:rgba(255,209,102,.4);
}
.gal-card .slot-count{
  position:absolute;top:6px;right:6px;
  font-size:9px;
  padding:2px 7px;border-radius:8px;
  background:rgba(20,32,50,.85);
  color:#8fa4c2;
  border:1px solid #22304a;
  letter-spacing:.04em;
}
.gal-empty{
  grid-column:1/-1;text-align:center;color:#4a5670;
  padding:60px 20px;font-size:12.5px;line-height:2;white-space:pre-line;
}

/* ═══ 3 槽详情 ═══ */
.slots{
  position:fixed;inset:0;z-index:125;display:none;
  align-items:center;justify-content:center;
  background:rgba(4,6,10,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:20px;
}
.slots.show{display:flex;}
.slots-inner{
  width:100%;max-width:480px;max-height:88dvh;
  background:linear-gradient(180deg,#111a28,#090e17);
  border:1px solid #1e2a3d;border-radius:16px;
  display:flex;flex-direction:column;
  padding:16px 18px;
  gap:12px;
}
.slots-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.slots-title{
  font-size:12.5px;color:var(--cyan);letter-spacing:.14em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex:1;
}
.slots-body{
  overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
  padding-right:4px;
  -webkit-overflow-scrolling:touch;
}
.slot-card{
  display:flex;gap:12px;
  padding:10px;
  background:linear-gradient(180deg,#0d1626,#080d16);
  border:1px solid #1a2538;
  border-radius:12px;
  transition:all .2s;
  align-items:stretch;
}
.slot-card.filled{cursor:pointer;}
.slot-card.filled:hover{border-color:rgba(94,231,255,.5);transform:translateY(-2px);}
.slot-card.empty{
  opacity:.5;
  border-style:dashed;
  border-color:#22304a;
}
.slot-thumb{
  width:88px;height:88px;
  border-radius:8px;
  background:#05080f;
  flex-shrink:0;
  display:block;
}
.slot-info{
  flex:1;
  display:flex;flex-direction:column;
  justify-content:space-between;
  min-width:0;
  gap:6px;
}
.slot-idx{
  font-size:10.5px;color:#556280;letter-spacing:.08em;
}
.slot-meta{
  font-size:11px;color:#8fa4c2;
  display:flex;flex-direction:column;gap:3px;
  font-variant-numeric:tabular-nums;
}
.slot-meta .dur{color:var(--gold);font-weight:600;font-size:12.5px;}
.slot-meta .time{
  color:#6b7a9c;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;
}
.slot-del{
  align-self:flex-start;
  padding:3px 9px;
  border-radius:8px;
  background:rgba(255,107,122,.12);
  border:1px solid rgba(255,107,122,.4);
  color:var(--rose);
  font-size:10px;
  font-family:inherit;
  cursor:pointer;
  transition:all .18s;
  letter-spacing:.06em;
}
.slot-del:hover{background:rgba(255,107,122,.25);}
.slot-empty{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#4a5670;letter-spacing:.14em;
}

/* ═══ 回放 ═══ */
.viewer{
  position:fixed;inset:0;z-index:130;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:20px;background:rgba(4,6,10,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.viewer.show{display:flex;}
.viewer-head{
  width:100%;max-width:640px;display:flex;
  justify-content:space-between;align-items:center;gap:12px;
}
.viewer-title{
  font-size:12px;letter-spacing:.14em;color:var(--cyan);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.viewer canvas{
  border-radius:18px;
  box-shadow:0 0 0 1px #1a2538, 0 30px 80px -20px #000;
  max-width:100%;max-height:68dvh;
}
.viewer-info{
  font-size:11px;color:#6b7a9c;letter-spacing:.06em;text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;max-width:640px;
}

/* ═══ 确认弹窗 ═══ */
.confirm{
  position:fixed;inset:0;z-index:140;
  display:none;align-items:center;justify-content:center;
  background:rgba(4,6,10,.75);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:20px;
}
.confirm.show{display:flex;}
.confirm-inner{
  background:linear-gradient(180deg,#111a28,#090e17);
  border:1px solid #1e2a3d;border-radius:14px;
  padding:24px 26px;max-width:300px;width:100%;text-align:center;
  box-shadow:0 30px 70px -20px #000;
  animation:confirmIn .22s ease both;
}
@keyframes confirmIn{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}
.confirm-text{
  font-size:12.5px;color:#c8d4e6;line-height:1.75;
  margin-bottom:18px;white-space:pre-line;
}
.confirm-btns{display:flex;gap:8px;}
.confirm-btns button{
  flex:1;padding:11px 4px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:12px;letter-spacing:.14em;
  background:transparent;transition:all .18s;
}
.confirm-no{border:1px solid #22304a;color:#8fa4c2;}
.confirm-no:hover{background:rgba(35,58,90,.85);color:#d5eeff;}
.confirm-yes{border:1px solid var(--rose);color:var(--rose);}
.confirm-yes:hover{background:rgba(255,107,122,.12);box-shadow:0 0 20px rgba(255,107,122,.25);}
.confirm-btns button:active{transform:scale(.97);}

/* ═══ 小屏 ═══ */
@media (max-width:400px){
  .boot-cn{font-size:38px;}
  .tabs button{padding:5px 16px;font-size:11px;}
  .skin-btn{padding:4px 9px;font-size:9.5px;letter-spacing:.05em;}
  .skin-menu{min-width:100px;}
  .skin-menu button{padding:7px 10px;font-size:10.5px;}
  .actions button{font-size:11px;padding:10px 2px;}
  .actions button.icon{width:40px;}
  .actions button.round{width:40px;border-radius:20px;font-size:11px;}
  .gal-body{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));padding:4px 14px 26px;}
  .gal-hint{padding:0 14px 8px;}
  .slot-thumb{width:76px;height:76px;}
}
@media (max-height:660px){
  .tip{min-height:24px;font-size:11px;}
  .actions button{padding:9px 4px;font-size:11px;}
  .boot-inner{gap:18px;padding:30px 24px;}
  .boot-cn{font-size:34px;}
}