:root{
  --red:#c8102e; --red-dark:#9e0b23; --red-soft:#fdecec;
  --gold:#e6b422; --gold-dark:#c8961a;
  --ink:#2a2320; --muted:#8a817c; --line:#f0e3e3;
  --bg:#fbf5ef; --card:#ffffff; --ok:#2e9e5b; --shadow:0 8px 30px rgba(180,60,60,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
button{font-family:inherit;cursor:pointer;border:none}
input,select{font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid #e6d8d8;border-radius:8px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus{outline:none;border-color:var(--red)}
a{color:var(--red)}
.hidden{display:none!important}

/* ---------- Login ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(1200px 600px at 50% -10%,#ffe3c2 0%,transparent 55%),linear-gradient(160deg,#c8102e,#7d0a1c)}
.auth-card{width:100%;max-width:400px;background:var(--card);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:34px 30px}
.auth-logo{text-align:center;margin-bottom:22px}
.auth-logo .icon{font-size:48px}
.auth-logo h1{font-size:21px;margin-top:6px;color:var(--red)}
.auth-logo p{color:var(--muted);font-size:13px;margin-top:4px}
.tabs{display:flex;background:#f6eeee;border-radius:10px;padding:4px;margin-bottom:20px}
.tabs button{flex:1;padding:9px;border-radius:8px;background:transparent;color:var(--muted);font-size:14px;font-weight:600}
.tabs button.active{background:#fff;color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.btn{padding:11px 16px;border-radius:9px;font-size:15px;font-weight:600;background:var(--red);color:#fff;width:100%;transition:.15s}
.btn:hover{background:var(--red-dark)}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#4a2c00}
.btn.sm{width:auto;padding:7px 14px;font-size:13px}
.btn.ghost{background:#f6eeee;color:var(--ink)}
.btn.danger{background:#fff;color:var(--red);border:1px solid #f0c7c7}
.msg{font-size:13px;margin-top:10px;text-align:center;min-height:18px}
.msg.err{color:var(--red)} .msg.ok{color:var(--ok)}

/* ---------- App shell ---------- */
.app{display:none;min-height:100vh}
.topbar{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;padding:0 22px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;box-shadow:0 2px 14px rgba(150,20,30,.25)}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.topbar .brand .icon{font-size:24px}
.topbar .user{display:flex;align-items:center;gap:14px;font-size:14px}
.topbar .user .badge{background:rgba(255,255,255,.18);padding:4px 10px;border-radius:20px;font-size:12px}
.topbar .user button{background:rgba(255,255,255,.15);color:#fff;padding:6px 12px;border-radius:8px;font-size:13px}
.layout{display:flex;max-width:1240px;margin:0 auto}
.side{width:200px;padding:20px 12px;flex-shrink:0}
.side nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 14px;border-radius:10px;background:transparent;color:var(--ink);font-size:14px;font-weight:500;margin-bottom:4px}
.side nav button:hover{background:#fff}
.side nav button.active{background:var(--red);color:#fff;box-shadow:var(--shadow)}
.main{flex:1;padding:22px 22px 60px;min-width:0}
.page-title{font-size:20px;font-weight:700;margin-bottom:4px}
.page-sub{color:var(--muted);font-size:13px;margin-bottom:18px}

/* ---------- Cards / tables ---------- */
.card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.card h3{font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--card);border-radius:14px;padding:18px;box-shadow:var(--shadow);border-left:4px solid var(--red)}
.stat .label{color:var(--muted);font-size:12px}
.stat .value{font-size:26px;font-weight:800;margin-top:4px;color:var(--red)}
.stat .value small{font-size:14px;font-weight:600}
.stat.gold{border-left-color:var(--gold)} .stat.gold .value{color:var(--gold-dark)}
.stat.ink{border-left-color:var(--ink)} .stat.ink .value{color:var(--ink)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:12px;background:#fdf8f5}
tbody tr:hover{background:#fdf8f5}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}
.tag.g{background:#e7f6ec;color:var(--ok)} .tag.r{background:var(--red-soft);color:var(--red)}
.revoked-row{opacity:.6}
.revoked-row td:first-child{text-decoration:line-through}
.revoke-tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:700;background:var(--red-soft);color:var(--red);border:1px solid #f0c7c7;line-height:1.6;white-space:nowrap}
.tag.lvl{color:#fff}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.grow{flex:1}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row .field{flex:1;min-width:140px}

/* ---------- Draw / red packet ---------- */
.draw-hero{background:linear-gradient(160deg,#c8102e,#8a0c1e);border-radius:20px;padding:26px;color:#fff;position:relative;overflow:hidden;box-shadow:0 14px 40px rgba(150,20,30,.35)}
.draw-hero::after{content:"福";position:absolute;right:-10px;bottom:-30px;font-size:170px;opacity:.08;font-weight:900}
.draw-hero .lvl-name{font-size:15px;opacity:.9}
.draw-hero .range{font-size:13px;opacity:.8;margin-top:2px}
.draw-hero .coins{display:flex;gap:26px;margin:18px 0}
.draw-hero .coins .b .n{font-size:30px;font-weight:800}
.draw-hero .coins .b .t{font-size:12px;opacity:.85}
.progress{height:9px;background:rgba(255,255,255,.22);border-radius:20px;overflow:hidden;margin-top:6px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#fff3c4);border-radius:20px}
.progress-txt{font-size:12px;opacity:.9;margin-top:6px}

/* ===== 红包主体 —— 更大、更华丽 ===== */
.packet-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:0;padding:10px 0 6px}
.packet{width:300px;height:360px;margin:0 auto;perspective:1000px;position:relative}
.packet .env{
  width:100%;height:100%;
  background:linear-gradient(165deg,#e11d33 0%,#c8102e 35%,#a30f22 70%,#7d0a1c 100%);
  border-radius:24px;
  text-align:center;
  box-shadow:
    0 18px 50px rgba(160,16,32,.5),
    0 4px 14px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,200,180,.3),
    inset 0 -4px 20px rgba(80,0,12,.3);
  position:relative;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
  border:2.5px solid rgba(230,180,34,.45)
}
/* 顶部装饰线 */
.packet .env::before{
  content:"";
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:120px;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:2px
}
/* 底部装饰 */
.packet .env::after{
  content:"";
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  width:60px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,215,106,.5),transparent);border-radius:2px
}

/* 福字印章 —— 更大更精致 */
.packet .seal{
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 38% 28%,#ffe08a 0%,var(--gold) 40%,var(--gold-dark) 100%);
  margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  font-size:44px;color:#7a4a00;
  box-shadow:
    0 6px 20px rgba(200,150,26,.55),
    inset 0 2px 6px rgba(255,240,180,.7);
  border:3px solid rgba(255,215,106,.65);
  z-index:2;position:relative;
  animation:sealFloat 3s ease-in-out infinite
}
@keyframes sealFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* 開運紅包 文字 */
.packet .fu{
  color:#ffd76a;font-size:19px;letter-spacing:10px;font-weight:800;
  text-shadow:0 2px 8px rgba(120,20,20,.6);
  z-index:2;position:relative
}

/* 红包光晕脉冲（待机态） */
.packet .glow-ring{
  position:absolute;inset:-12px;border-radius:30px;
  border:2px solid rgba(230,180,34,.25);
  pointer-events:none;z-index:0;
  animation:glowPulse 2.5s ease-in-out infinite
}
@keyframes glowPulse{
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.02)}
}

/* 金币飘落粒子容器 */
.particles-canvas{
  position:absolute;inset:0;pointer-events:none;z-index:10;overflow:hidden;border-radius:24px
}
.particle{
  position:absolute;font-size:18px;pointer-events:none;
  will-change:transform,opacity
}

/* 抽奖动画状态 */
.packet.shake .env{animation:packetShake .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes packetShake{
  0%{transform:rotate(0) scale(1)}
  12%{transform:rotate(-8deg) scale(1.06)}
  25%{transform:rotate(7deg) scale(1.08)}
  37%{transform:rotate(-5deg) scale(1.05)}
  50%{transform:rotate(4deg) scale(1.07)}
  62%{transform:rotate(-3deg) scale(1.04)}
  75%{transform:rotate(2deg) scale(1.03)}
  87%{transform:rotate(-1deg) scale(1.01)}
  100%{transform:rotate(0) scale(1)}
}

/* 开包后 —— 红包变金色，金额显示在内部 */
.packet.opened .env{
  animation:packetOpen .7s cubic-bezier(.34,1.56,.64,1) forwards;
  background:linear-gradient(165deg,#f5d76b 0%,#e6b422 30%,#c8961a 70%,#9a7200 100%);
  border-color:rgba(255,245,190,.7);
  box-shadow:
    0 18px 50px rgba(200,150,26,.5),
    0 4px 14px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -4px 20px rgba(120,80,0,.25)
}
/* ===== 各等级红包配色（开包后按等级切换） ===== */
.packet.opened.lvl-bronze .env{
  background:linear-gradient(165deg,#e0b07a,#cd7f32 35%,#9c5a26 70%,#6b3d18);
  border-color:rgba(255,215,140,.6);
  box-shadow:0 18px 50px rgba(160,90,30,.5),0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,235,200,.4),inset 0 -4px 20px rgba(80,40,10,.3)
}
.packet.opened.lvl-silver .env{
  background:linear-gradient(165deg,#f4f6f8,#cfd8dc 35%,#9aa0a6 70%,#6b7178);
  border-color:rgba(255,255,255,.7);
  box-shadow:0 18px 50px rgba(120,130,140,.45),0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 20px rgba(60,65,70,.3)
}
.packet.opened.lvl-gold .env{
  background:linear-gradient(165deg,#ffe49a,#f2b705 35%,#d49b18 70%,#a87400);
  border-color:rgba(255,245,190,.7);
  box-shadow:0 18px 50px rgba(200,150,26,.5),0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -4px 20px rgba(120,80,0,.25)
}
.packet.opened.lvl-platinum .env{
  background:linear-gradient(165deg,#bff0f7,#26c6da 35%,#0e9aa8 70%,#0a6072);
  border-color:rgba(200,250,255,.7);
  box-shadow:0 18px 50px rgba(20,150,170,.5),0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -4px 20px rgba(0,60,70,.3)
}
.packet.opened.lvl-diamond .env{
  background:linear-gradient(165deg,#cfd3f7,#5c6bc0 35%,#3a46a0 70%,#222a78);
  border-color:rgba(200,210,255,.7);
  box-shadow:0 18px 50px rgba(70,85,180,.5),0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 20px rgba(20,25,80,.35)
}
.packet.opened.lvl-king .env{
  background:linear-gradient(165deg,#ff8a8a,#c8102e 35%,#8a0c1e 70%,#560818);
  border-color:rgba(255,215,106,.8);
  box-shadow:0 18px 55px rgba(200,16,46,.55),0 4px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,220,180,.5),inset 0 -4px 20px rgba(80,0,12,.35)
}
/* 金额字色随等级 */
.packet.opened.lvl-bronze .pr-amt{background:linear-gradient(135deg,#5a3410,#3a2008,#5a3410);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.packet.opened.lvl-silver .pr-amt{background:linear-gradient(135deg,#3a4046,#23282d,#3a4046);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.packet.opened.lvl-gold .pr-amt{background:linear-gradient(135deg,#7a4a00,#4a2c00,#7a4a00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.packet.opened.lvl-platinum .pr-amt{background:linear-gradient(135deg,#063b44,#022a31,#063b44);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.packet.opened.lvl-diamond .pr-amt{background:linear-gradient(135deg,#eef0ff,#c5cae9,#eef0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.packet.opened.lvl-king .pr-amt{background:linear-gradient(135deg,#ffe9a8,#ffd76a,#ffe9a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* 标签/徽章随等级 */
.packet.opened.lvl-bronze .pr-lbl{color:#5a3410}
.packet.opened.lvl-bronze .pr-level{background:rgba(255,240,210,.5);color:#5a3410}
.packet.opened.lvl-silver .pr-lbl{color:#3a4046}
.packet.opened.lvl-silver .pr-level{background:rgba(255,255,255,.55);color:#3a4046}
.packet.opened.lvl-gold .pr-lbl{color:#5a3a00}
.packet.opened.lvl-gold .pr-level{background:rgba(255,255,255,.5);color:#5a3a00}
.packet.opened.lvl-platinum .pr-lbl{color:#03363f}
.packet.opened.lvl-platinum .pr-level{background:rgba(220,250,255,.5);color:#03363f}
.packet.opened.lvl-diamond .pr-lbl{color:#e6e9ff}
.packet.opened.lvl-diamond .pr-level{background:rgba(255,255,255,.3);color:#e6e9ff}
.packet.opened.lvl-king .pr-lbl{color:#ffe2a0}
.packet.opened.lvl-king .pr-level{background:rgba(255,215,106,.35);color:#ffe2a0}
/* 等级光晕 */
.packet.opened.lvl-bronze .glow-ring{border-color:rgba(205,127,50,.5)}
.packet.opened.lvl-silver .glow-ring{border-color:rgba(170,176,182,.5)}
.packet.opened.lvl-gold .glow-ring{border-color:rgba(242,183,5,.6)}
.packet.opened.lvl-platinum .glow-ring{border-color:rgba(38,198,218,.55)}
.packet.opened.lvl-diamond .glow-ring{border-color:rgba(92,107,192,.55)}
.packet.opened.lvl-king .glow-ring{border-color:rgba(255,215,106,.7);box-shadow:0 0 30px rgba(255,215,106,.4)}

/* 开包后隐藏原始元素（福字+文字） */
.packet.opened .seal{animation:sealFade .35s ease forwards}
.packet.opened .fu{animation:fuFade .3s ease forwards}
@keyframes sealFade{to{transform:scale(0);opacity:0}}
@keyframes fuFade{to{opacity:0;transform:translateY(-10px)}}
@keyframes packetOpen{
  0%{transform:scale(1)}
  40%{transform:scale(1.12)}
  65%{transform:scale(.95)}
  85%{transform:scale(1.03)}
  100%{transform:scale(1)}
}

/* ===== 红包内部的金额展示 ===== */
.packet-result{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:5;pointer-events:none;opacity:0
}
.packet.opened .packet-result{animation:resultReveal .6s .25s cubic-bezier(.34,1.56,.64,1) forwards}
.packet-result .pr-amt{
  font-size:52px;font-weight:900;line-height:1.05;
  background:linear-gradient(135deg,#7a4a00,#4a2c00,#7a4a00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))
}
.packet-result .pr-amt small{font-size:24px}
.packet-result .pr-lbl{
  color:#6b4500;font-size:14px;font-weight:600;margin-top:6px;letter-spacing:2px
}
.packet-result .pr-level{
  margin-top:4px;padding:3px 14px;border-radius:20px;
  background:rgba(255,255,255,.45);color:#5a3800;font-size:12px;font-weight:700
}
.packet-result .pr-icon{
  font-size:54px;line-height:1;margin-bottom:4px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
  animation:iconPop .6s .35s cubic-bezier(.34,1.56,.64,1) backwards
}
@keyframes iconPop{
  from{transform:scale(0) rotate(-22deg);opacity:0}
  to{transform:scale(1) rotate(0);opacity:1}
}
@keyframes resultReveal{
  from{opacity:0;transform:scale(.5) rotate(-8deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}

/* 按钮更大更有质感 */
.draw-actions{text-align:center;margin-top:20px}
.draw-btn-main{
  padding:14px 48px;border-radius:14px;font-size:18px;font-weight:800;
  background:linear-gradient(135deg,var(--gold),#d4a01a,var(--gold));
  color:#4a2c00;width:auto;
  box-shadow:0 6px 24px rgba(200,150,26,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transition:all .2s;letter-spacing:2px;
  position:relative;overflow:hidden
}
.draw-btn-main:hover:not(:disabled){
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 32px rgba(200,150,26,.55),inset 0 1px 0 rgba(255,255,255,.35);
  background:linear-gradient(135deg,#f0c830,var(--gold),#d4a01a)
}
.draw-btn-main:active:not(:disabled){transform:translateY(0) scale(.98)}
.draw-btn-main:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}

/* 全屏闪光遮罩 */
.flash-overlay{
  position:fixed;inset:0;background:radial-gradient(circle at center,rgba(255,235,170,.75) 0%,rgba(255,200,100,.2) 30%,transparent 70%);
  pointer-events:none;z-index:9999;animation:flashFade .7s ease-out forwards
}
@keyframes flashFade{
  0%{opacity:1}100%{opacity:0}
}

/* medal */
.medal{font-weight:800}
.rank-1{color:#e6b422} .rank-2{color:#9aa0a6} .rank-3{color:#cd7f32}

/* 抽红包两栏布局 */
.draw-layout{display:flex;gap:22px;align-items:stretch;flex-wrap:wrap;margin-top:6px}
.draw-left{flex:1 1 360px;min-width:300px;display:flex;flex-direction:column}
.draw-left > .card{flex:1;display:flex;flex-direction:column;margin-bottom:0}
.draw-right{flex:1 1 340px;min-width:280px;display:flex;flex-direction:column;gap:16px}
.cur-lvl-mini{text-align:center;color:var(--muted);font-size:14px;margin-bottom:10px}
.cur-lvl-mini b{color:var(--red)}
.stat-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-grid2 .stat{padding:16px 14px}
.progress-card{
  background:linear-gradient(160deg,#fff,#fff6f3);
  border:1px solid rgba(200,16,46,.12);
  border-radius:16px;padding:18px 18px 16px;
  box-shadow:0 8px 24px rgba(200,16,46,.08)
}
.progress-card .pc-head{font-size:14px;font-weight:700;color:#7a0c1e;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.progress-card .pc-head::before{content:"🎯";font-size:16px}
.progress.big{height:18px;border-radius:20px;margin-top:2px}
.progress.big span{background:linear-gradient(90deg,var(--gold),#ffd76a)}
.progress-card .progress-txt{font-size:13px;color:var(--muted);margin-top:10px;text-align:center;font-weight:600}
.prod-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.prod-tbl th,.prod-tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
.prod-tbl th{color:var(--muted);font-weight:600;font-size:12px;background:#fdf8f5}
.prod-tbl .num{text-align:right;font-weight:800;color:var(--red)}
.prod-tbl tbody tr:hover{background:#fdf8f5}

.empty{text-align:center;color:var(--muted);padding:30px;font-size:14px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(40,20,20,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
.modal h3{font-size:17px;margin-bottom:16px}
.modal .actions{display:flex;gap:10px;margin-top:18px}
.modal .actions .btn{flex:1}

/* 红包抽取记录筛选栏 */
.draw-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.draw-filter select,.draw-filter input{flex:1;min-width:150px}
.draw-filter .btn{flex:0 0 auto}
.rec-sum{text-align:right;color:var(--muted);font-size:13px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--border)}
.loading{text-align:center;color:var(--muted);padding:24px}

/* 用户批量工具条 */
.bulk-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;background:#fff7ee;border:1px solid rgba(200,150,26,.25);border-radius:10px}
.sel-all{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;cursor:pointer}
.sel-count{font-weight:700;color:var(--red)}
.sel-tip{color:var(--muted);font-size:12px;margin-left:auto}
.row-sel{cursor:pointer}

@media(max-width:820px){
  .layout{flex-direction:column}
  .side{width:100%;padding:10px;overflow-x:auto}
  .side nav{display:flex;gap:6px}
  .side nav button{white-space:nowrap;margin-bottom:0}
}