/* 星约少女 — 二次元暗色抽卡风 UI；移动优先 390，平板/桌面渐进 */
:root{
  --bg:#0e1026; --bg2:#161a3a; --card:#1c2148; --card2:#232a5c;
  --line:rgba(255,255,255,.09); --txt:#eef0ff; --txt2:#a6acd8; --txt3:#6f76a8;
  --pink:#ff5fa2; --pink2:#ff8fc0; --violet:#9a6bff; --gold:#ffc24d; --cyan:#56d6e8;
  --r-gray:#9aa3b2;--r-white:#e8edf7;--r-green:#3ddc91;--r-blue:#4d9bff;--r-purple:#b061ff;--r-gold:#ffb02e;--r-red:#ff4d5e;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  /* 宿主 App 原生底部工具栏避让（百度/微信/QQ 等内嵌浏览器）；JS 会按 UA + 用户手动值覆盖 */
  --nav-pad:0px;
}
html[data-inapp="1"]{--nav-pad:52px}
/* JS 算出的手动值写在 <html style> 上，优先级最高 */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(1200px 700px at 80% -10%,#232a5c 0%,var(--bg) 55%) fixed;
  color:var(--txt);font-size:14px;line-height:1.45;overflow:hidden;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
img{display:block}
/* 视口高度：先 vh 兜底（老内核/内嵌浏览器不认 dvh），再用 dvh 覆盖（新版地址栏伸缩更准）；
   否则容器高度退化为内容高，掉落记录变长后会把底部导航顶出屏幕 */
.app-container{height:100vh;height:100dvh;height:var(--app-h,100dvh);max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
[data-font-scale="12"]{font-size:13px}[data-font-scale="14"]{font-size:15px}

/* 顶栏 */
.topbar{flex:0 0 auto;padding:calc(8px + var(--safe-t)) 10px 8px;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,rgba(20,24,56,.96),rgba(20,24,56,.7));backdrop-filter:blur(8px);z-index:20}
.res{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.28);border:1px solid var(--line);
  padding:4px 9px;border-radius:999px;font-weight:700;font-size:12.5px}
.res .ic{width:15px;height:15px;border-radius:50%}
.res.gold .ic{background:radial-gradient(circle at 35% 30%,#ffe89a,var(--gold))}
.res.gem .ic{background:radial-gradient(circle at 35% 30%,#bff3ff,#39c6ee)}
.res.ticket .ic{background:radial-gradient(circle at 35% 30%,#ffd6ec,var(--pink))}
.spacer{flex:1}
.icon-btn{min-width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;
  background:rgba(255,255,255,.06);border:1px solid var(--line)}

/* 内容区 */
.screens{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-overflow-scrolling:touch}
.screen{display:none;min-height:100%}.screen.active{display:block}

/* 底栏 */
.tabbar{flex:0 0 auto;display:flex;background:linear-gradient(0deg,rgba(14,16,38,.99),rgba(20,24,56,.92));
  border-top:1px solid var(--line);padding-bottom:calc(var(--safe-b) + var(--nav-pad));z-index:20}
.tab{flex:1;padding:7px 0 8px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--txt3);font-size:11px}
.tab .ti{font-size:20px;line-height:1}
.tab.active{color:var(--pink2)}.tab.active .ti{filter:drop-shadow(0 0 7px var(--pink))}
.tab .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--r-red);transform:translate(13px,-2px)}
.tab{position:relative}
/* 详情 sheet 打开时让底部导航浮到遮罩之上：点任意 tab 即关闭面板并跳转，避免被浮层"困住"。
   用 body 类名而非 :has()，兼容老内核/内嵌浏览器 */
body.sheet-open .tabbar{z-index:70}

/* 通用卡片/按钮 */
.glass{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:16px}
.btn{min-height:44px;padding:0 18px;border-radius:12px;font-weight:700;font-size:14px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(180deg,var(--pink2),var(--pink));color:#fff;box-shadow:0 6px 18px rgba(255,95,162,.35);border-color:transparent}
.btn-violet{background:linear-gradient(180deg,#b48bff,var(--violet));color:#fff;border-color:transparent}
.btn-danger{background:linear-gradient(180deg,#ff6b78,#ff4d5e);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(255,77,94,.3)}
.btn-gold{background:linear-gradient(180deg,#ffd47a,var(--gold));color:#3a2400;border-color:transparent}
.btn-ghost{background:transparent}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-sm{min-height:34px;padding:0 12px;font-size:12.5px;border-radius:10px}
.chip{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:12px;font-weight:600}
.chip.on{background:linear-gradient(180deg,var(--pink2),var(--pink));color:#fff;border-color:transparent}

/* 弹窗内表单输入框（云存档等） */
.sp-input{width:100%;height:44px;padding:0 14px;border-radius:12px;font-size:14px;color:var(--txt);
  background:rgba(0,0,0,.3);border:1px solid var(--line);outline:none;font-family:inherit}
.sp-input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,95,162,.18)}
.cred-box{background:rgba(0,0,0,.35);border:1px dashed rgba(255,194,77,.55);border-radius:12px;
  padding:10px 12px;font-weight:800;font-size:16px;letter-spacing:1.5px;text-align:center;
  color:var(--gold);word-break:break-all;user-select:all}

.section-title{display:flex;align-items:center;gap:8px;margin:14px 12px 8px;font-weight:800;font-size:15px}
.section-title::before{content:"";width:4px;height:15px;border-radius:2px;background:linear-gradient(var(--pink2),var(--violet))}
.muted{color:var(--txt2)}.tiny{font-size:11.5px;color:var(--txt3)}

/* ===== 战线 ===== */
.stage-wrap{position:relative;height:300px;margin:8px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-bg::after{content:""}
.stage-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,38,.15) 0%,rgba(14,16,38,.05) 40%,rgba(14,16,38,.85) 100%)}
.node-badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.5);padding:5px 12px;border-radius:999px;
  font-weight:800;font-size:13px;border:1px solid var(--line);backdrop-filter:blur(4px);z-index:3}
.kind-tag{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;z-index:3}
.kind-normal{background:rgba(90,220,140,.25);color:#8ff5bd;border:1px solid rgba(90,220,140,.5)}
.kind-elite{background:rgba(176,97,255,.3);color:#d6b3ff;border:1px solid rgba(176,97,255,.6)}
.kind-boss{background:rgba(255,77,94,.3);color:#ffb3bd;border:1px solid rgba(255,77,94,.6)}
.enemy-row{position:absolute;top:46px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:2;padding:0 10px}
.enemy{width:86px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:opacity .3s,transform .3s}
.enemy.dead{opacity:0;transform:translateY(14px) scale(.8)}
.enemy .fig{width:78px;height:78px;border-radius:14px;object-fit:cover;background:rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.25);box-shadow:0 6px 16px rgba(0,0,0,.5)}
.enemy.boss .fig{width:104px;height:104px;border-color:var(--r-red);box-shadow:0 0 22px rgba(255,77,94,.5)}
.enemy .hp{width:78px;height:7px;border-radius:4px;background:rgba(0,0,0,.55);overflow:hidden}
.enemy.boss .hp{width:104px}
.enemy .hp i{display:block;height:100%;background:linear-gradient(90deg,#ff6b6b,#ff3b50);border-radius:4px;transition:width .4s}
.enemy .nm{font-size:10.5px;color:#fff;text-shadow:0 1px 3px #000;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ally-row{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:14px;z-index:2}
.ally{width:54px;text-align:center}
.ally .fig{width:52px;height:64px;object-fit:cover;object-position:top;border-radius:12px 12px 8px 8px;
  border:2px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);margin:0 auto}
.ally.atk{animation:lunge .35s ease}
@keyframes lunge{0%{transform:translateY(0)}40%{transform:translateY(-12px) scale(1.06)}100%{transform:translateY(0)}}
.float{position:absolute;font-weight:900;font-size:16px;text-shadow:0 2px 4px #000;pointer-events:none;z-index:5;
  animation:floatup .9s ease-out forwards}
.float.crit{color:#ffd24d;font-size:21px}.float.dot{color:#c98bff}.float.heal{color:#7fffb0}
@keyframes floatup{0%{opacity:0;transform:translateY(6px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.1)}
  100%{opacity:0;transform:translateY(-46px) scale(1)}}
.burst{position:absolute;inset:0;z-index:6;display:grid;place-items:center;font-size:40px;opacity:0;pointer-events:none}
.burst.go{animation:burst .8s ease}@keyframes burst{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.5)}}

.hud-row{display:flex;gap:8px;margin:0 8px 8px}
.hud-card{flex:1;padding:9px 11px;border-radius:14px}
.hud-card .k{font-size:11px;color:var(--txt3)}.hud-card .v{font-weight:800;font-size:15px}
.ctrl-row{display:flex;gap:8px;margin:0 8px 10px;align-items:center}
.ctrl-row .btn{flex:1}
.pitybar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin:0 12px 6px}
.pitybar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--gold))}

/* 掉落流 */
.feed{margin:0 8px 12px;padding:8px 10px;border-radius:14px;max-height:150px;overflow-y:auto}
.feed .line{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:12.5px;border-bottom:1px dashed rgba(255,255,255,.05)}
.loot-mini{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex:0 0 auto;
  border:2px solid;background:rgba(0,0,0,.3)}
.rar-gray{color:var(--r-gray);border-color:var(--r-gray)!important}
.rar-white{color:var(--r-white);border-color:var(--r-white)!important}
.rar-green{color:var(--r-green);border-color:var(--r-green)!important}
.rar-blue{color:var(--r-blue);border-color:var(--r-blue)!important}
.rar-purple{color:var(--r-purple);border-color:var(--r-purple)!important;box-shadow:0 0 10px rgba(176,97,255,.35)}
.rar-gold{color:var(--r-gold);border-color:var(--r-gold)!important;box-shadow:0 0 12px rgba(255,176,46,.45)}
.rar-red{color:var(--r-red);border-color:var(--r-red)!important;box-shadow:0 0 14px rgba(255,77,94,.6)}

/* 节点选择条 */
.node-strip{display:flex;gap:7px;overflow-x:auto;padding:2px 10px 8px;scrollbar-width:none}
.node-strip::-webkit-scrollbar{display:none}
.node-chip{flex:0 0 auto;min-width:52px;padding:7px 4px;border-radius:11px;text-align:center;background:rgba(255,255,255,.05);
  border:1px solid var(--line);font-weight:800}
.node-chip.cur{background:linear-gradient(180deg,var(--pink2),var(--pink));color:#fff;border-color:transparent}
.node-chip.locked{opacity:.4}
.node-chip .sub{font-size:9.5px;font-weight:600;color:var(--txt3)}
.node-chip.cur .sub{color:#ffe3f0}

/* ===== 网格/列表 ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;padding:0 10px 14px}
.cell{position:relative;border-radius:14px;overflow:hidden;border:2px solid;background:rgba(0,0,0,.28);
  aspect-ratio:3/4;cursor:pointer;transition:transform .12s}
.cell:active{transform:scale(.95)}
.cell img{width:100%;height:100%;object-fit:cover;object-position:top center}
.cell .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 5px 5px;font-size:11px;font-weight:700;text-align:center;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);text-shadow:0 1px 2px #000}
.cell .lv{position:absolute;top:4px;left:5px;font-size:10px;background:rgba(0,0,0,.6);padding:1px 6px;border-radius:7px}
.cell .pl{position:absolute;top:4px;right:5px;font-size:9px;padding:1px 5px;border-radius:7px;background:var(--pink);color:#fff}
.cell.locked{filter:grayscale(1) brightness(.5)}
.cell.sel{outline:3px solid var(--pink);outline-offset:-1px}

.item-cell{border-radius:12px;border:2px solid;background:rgba(0,0,0,.3);aspect-ratio:1;position:relative;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px}
.item-cell .ic{font-size:22px}.item-cell .en{font-size:9px;color:var(--txt3);text-align:center}
.item-cell .plus{position:absolute;top:2px;left:5px;font-size:10px;font-weight:800;color:var(--gold)}
.item-cell .stk{position:absolute;top:2px;right:5px;font-size:9px;color:var(--gold)}
.item-cell.equipped::after{content:"装备中";position:absolute;bottom:2px;right:3px;font-size:8px;color:#8ff5bd}

.bag-tabs{display:flex;gap:6px;padding:4px 10px 8px;overflow-x:auto}
.bag-tabs::-webkit-scrollbar{display:none}

/* ===== 详情弹层 ===== */
.sheet{position:fixed;inset:0;z-index:60;display:none}
.sheet.open{display:block}
.sheet-mask{position:absolute;inset:0;background:rgba(5,6,18,.66);backdrop-filter:blur(2px)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;
  max-height:calc(88vh - var(--nav-pad));max-height:calc(88dvh - var(--nav-pad));overflow-y:auto;
  background:linear-gradient(180deg,var(--card2),var(--bg2));border-radius:22px 22px 0 0;border:1px solid var(--line);
  padding:14px 14px calc(76px + var(--safe-b) + var(--nav-pad));animation:up .28s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.sheet-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin:0 auto 12px}
.sheet-head{position:relative;display:flex;justify-content:center}
.sheet-x{position:absolute;right:-2px;top:-4px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--txt2);
  font-size:15px;line-height:1;display:grid;place-items:center;min-height:36px}
.sheet-x:active{transform:scale(.92)}
.detail-top{display:flex;gap:12px}
.portrait{width:128px;flex:0 0 128px;height:172px;border-radius:14px;object-fit:cover;object-position:top;
  border:2px solid var(--pink);box-shadow:0 8px 24px rgba(255,95,162,.3)}
.portrait.sm{width:84px;flex-basis:84px;height:112px}
.dl{display:flex;flex-direction:column;gap:4px;min-width:0}
.dl h2{margin:0;font-size:19px}
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0}
.tag{font-size:10.5px;padding:2px 8px;border-radius:7px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-weight:700}
.tag.elem-fire{background:rgba(255,122,77,.18);color:#ffb089}.tag.elem-water{background:rgba(77,178,255,.18);color:#9fd0ff}
.tag.elem-wind{background:rgba(87,217,119,.18);color:#a6f5bb}.tag.elem-thunder{background:rgba(255,210,77,.18);color:#ffe49a}
.tag.elem-light{background:rgba(255,233,160,.18);color:#fff0bf}.tag.elem-dark{background:rgba(168,123,255,.2);color:#cdaaff}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-top:6px}
.stat-grid .s{display:flex;justify-content:space-between;font-size:12.5px;border-bottom:1px dotted rgba(255,255,255,.08);padding:2px 0}
.stat-grid .s b{color:#fff}
.affix{font-size:12.5px;padding:3px 0;display:flex;justify-content:space-between}
.affix.main{color:var(--gold);font-weight:800}
.btn-col{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn-col .btn{flex:1 1 calc(50% - 4px);min-width:120px}
.btn-col .btn.full{flex:1 1 100%}
.equip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:8px 0}
.eq-slot{aspect-ratio:1;border-radius:11px;border:2px dashed rgba(255,255,255,.18);display:grid;place-items:center;
  font-size:10px;color:var(--txt3);position:relative;overflow:hidden;cursor:pointer}
.eq-slot.filled{border-style:solid;background:rgba(0,0,0,.3)}
.eq-slot .ic{font-size:20px}

/* 召唤 */
.summon-hero{position:relative;height:230px;margin:10px;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.summon-hero img{width:100%;height:100%;object-fit:cover}
.summon-hero .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,16,38,.9),transparent 60%)}
.summon-hero .cap{position:absolute;left:14px;bottom:12px}
.summon-hero .cap h2{margin:0;font-size:24px;text-shadow:0 2px 8px #000}
.summon-btns{display:flex;gap:10px;padding:0 12px}
.summon-btns .btn{flex:1;flex-direction:column;height:64px;gap:2px}
.summon-btns .cost{font-size:11px;font-weight:600;opacity:.9}
.reveal{position:fixed;inset:0;z-index:80;background:rgba(5,6,18,.92);display:none;place-items:center}
.reveal.open{display:grid}
.reveal-card{width:200px;height:280px;border-radius:18px;overflow:hidden;border:3px solid;position:relative;
  animation:pop .5s cubic-bezier(.2,1.4,.3,1)}
@keyframes pop{from{transform:scale(.3) rotate(-6deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.reveal-card img{width:100%;height:100%;object-fit:cover;object-position:top}
.reveal-card .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;text-align:center;font-weight:900;font-size:18px;
  background:linear-gradient(0deg,rgba(0,0,0,.9),transparent)}
.reveal-row{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center;max-width:90vw}
.reveal-mini{width:54px;height:72px;border-radius:9px;overflow:hidden;border:2px solid;cursor:pointer}
.reveal-mini img{width:100%;height:100%;object-fit:cover;object-position:top}
.reveal-hint{position:absolute;bottom:calc(26px + var(--nav-pad));color:var(--txt2);font-size:12px}

/* 更多/系统 */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:4px 12px}
.menu-item{aspect-ratio:1;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);font-size:12px;font-weight:600}
.menu-item .mi{font-size:26px}
.menu-item{position:relative}
.menu-badge{position:absolute;top:6px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:linear-gradient(180deg,#ff6b81,#ff3b57);color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(255,59,87,.5)}
.eq-slot.empty-hint{border-color:rgba(255,176,46,.55);color:var(--gold)}
.eq-slot .slot-plus{position:absolute;right:3px;bottom:0;font-size:13px;font-weight:900;line-height:1;color:var(--gold)}
.btn:disabled,.btn[disabled]{opacity:.5;filter:grayscale(.3)}

.list-card{margin:0 10px 10px;padding:12px;border-radius:14px}
.list-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.list-row:last-child{border-bottom:none}
.list-row .grow{flex:1;min-width:0}
.prog{height:8px;border-radius:4px;background:rgba(0,0,0,.4);overflow:hidden;margin-top:4px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--pink2),var(--violet))}

/* toast / modal */
.toast-host{position:fixed;top:calc(60px + var(--safe-t));left:0;right:0;z-index:100;display:flex;flex-direction:column;
  align-items:center;gap:7px;pointer-events:none}
.toast{background:rgba(30,36,80,.96);border:1px solid var(--pink);padding:9px 16px;border-radius:999px;font-weight:700;font-size:13px;
  opacity:0;transform:translateY(-12px);transition:.28s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:none}.toast.gold{border-color:var(--gold);box-shadow:0 0 18px rgba(255,176,46,.4)}
.toast.red{border-color:var(--r-red);box-shadow:0 0 18px rgba(255,77,94,.45)}
.sp-modal{border:1px solid var(--line);border-radius:18px;padding:0;max-width:440px;width:92%;
  background:linear-gradient(180deg,var(--card2),var(--bg2));color:var(--txt)}
.sp-modal::backdrop{background:rgba(5,6,18,.7);backdrop-filter:blur(2px)}
.modal-head{padding:16px 18px 6px}.modal-head h3{margin:0;font-size:17px}
.modal-body{padding:6px 18px 14px;max-height:60vh;max-height:calc(60dvh - var(--nav-pad));overflow-y:auto}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;padding:0 18px 18px}
.confirm-text{margin:6px 0}

.boot-card{margin:auto;width:88%;max-width:420px}.boot-title{font-size:22px;background:linear-gradient(90deg,var(--pink2),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}.boot-log{white-space:pre-wrap;font-size:12px;color:var(--txt2);max-height:50vh;overflow:auto}

@media(min-width:662px){
  .stage-wrap{height:380px}.grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}

/* 选档页：单机式 3 个全局存档槽（密码门后第一屏） */
.slot-select{min-height:100vh;min-height:100dvh;min-height:var(--app-h,100dvh);max-width:560px;margin:0 auto;
  padding:calc(26px + var(--safe-t)) 16px calc(20px + var(--safe-b) + var(--nav-pad));
  display:flex;flex-direction:column;gap:18px;overflow-y:auto}
.ss-head{text-align:center}
.ss-logo{font-size:23px;font-weight:850;letter-spacing:1px;
  background:linear-gradient(90deg,var(--pink2),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.ss-sub{margin-top:6px;font-size:12.5px;color:var(--txt2)}
.ss-grid{display:flex;flex-direction:column;gap:12px}
.ss-card{border:1.5px solid var(--line);border-radius:18px;padding:14px 16px;
  background:linear-gradient(180deg,var(--card),var(--bg2));box-shadow:0 10px 30px rgba(0,0,0,.3)}
.ss-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:128px;
  border-style:dashed;color:var(--txt2);cursor:pointer;transition:border-color .15s,transform .1s}
.ss-empty:active{transform:scale(.985)}
.ss-empty:hover{border-color:var(--pink)}
.ss-empty .ss-top{display:flex;align-items:center;gap:8px;color:var(--txt)}
.ss-plus{font-size:34px;font-weight:300;line-height:1;color:var(--pink2)}
.ss-desc{font-size:12.5px;color:var(--txt3)}
.ss-new{font-size:11px;font-weight:700;color:var(--gold);border:1px solid rgba(255,176,46,.45);
  padding:1px 8px;border-radius:999px;background:rgba(255,176,46,.1)}
.ss-filled{border-color:rgba(154,107,255,.35)}
.ss-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ss-top b{font-size:15.5px}
.ss-time{font-size:11.5px;color:var(--txt3)}
.ss-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:12px}
.ss-stat{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:11px;padding:7px 4px;text-align:center;min-width:0}
.ss-stat .tiny{font-size:10px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-stat b{display:block;margin-top:2px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-actions{display:flex;gap:10px}
.ss-play{flex:1}
.ss-del{flex:0 0 76px}
.ss-loading{margin:auto auto;padding:14px 20px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  color:var(--txt2);font-size:13px}
.ss-error-card{margin:auto auto;width:100%;max-width:360px;padding:20px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line)}
.ss-err-title{font-size:16px;font-weight:800;color:#ff8b98}
@media(min-width:662px){
  .ss-grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch}
  .ss-card{height:100%}
  .ss-filled{display:flex;flex-direction:column}
  .ss-stats{grid-template-columns:repeat(4,1fr)}
  .ss-actions{margin-top:auto}
}