/* 振家地产 · 每月奖励公告 —— 公示页样式（深色 + 金红，手机优先，大屏自适应） */
:root{
  --bg:#0d0f18; --bg2:#181130; --bg3:#241634;
  --panel:rgba(255,255,255,.048);
  --panel-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --text:#eef1f8; --muted:#98a1b8; --muted-2:#7b849c;
  --gold:#ffd76a; --gold-2:#ffb347;
  --red:#ff7a7a; --red-bg:rgba(255,96,96,.14); --red-bd:rgba(255,120,120,.34);
  --teal:#5fe0d0; --teal-bg:rgba(60,214,192,.13); --teal-bd:rgba(90,220,205,.32);
  --violet:#bda3ff; --violet-bg:rgba(150,110,255,.15); --violet-bd:rgba(170,140,255,.34);
  --pink:#ffa2c4; --pink-bg:rgba(255,110,170,.14); --pink-bd:rgba(255,140,190,.32);
  --gold-bg:rgba(255,196,90,.14); --gold-bd:rgba(255,205,110,.36);
  --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:linear-gradient(168deg,var(--bg) 0%,var(--bg2) 52%,var(--bg3) 100%);
  background-color:var(--bg3); color:var(--text); min-height:100vh; line-height:1.5;
  padding-bottom:calc(env(safe-area-inset-bottom) + 30px);
}
body::before{
  content:"";position:absolute;left:50%;top:-260px;transform:translateX(-50%);
  width:880px;height:560px;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,196,90,.20) 0%,rgba(255,140,60,.08) 42%,transparent 70%);
}
.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 15px}

/* ---------------- 头部 ---------------- */
.hd{text-align:center;padding:30px 0 4px}
.hd .brand{font-size:11px;letter-spacing:3.4px;color:var(--muted-2);font-weight:700}
.hd h1{
  font-size:26px;font-weight:900;letter-spacing:1.6px;margin-top:9px;
  background:linear-gradient(92deg,#ffe49a,var(--gold) 38%,var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hd .cur{margin-top:14px}
.hd .cur b{font-size:19px;font-weight:800;letter-spacing:.6px}
.hd .cur .sub{display:block;color:var(--muted);font-size:12.5px;margin-top:4px;letter-spacing:.6px}
.hd .sync{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  font-size:11.5px;color:var(--muted-2);background:var(--panel);border:1px solid var(--line);
  padding:4px 11px;border-radius:999px;
}
.hd .sync i{width:6px;height:6px;border-radius:50%;background:#48d597;box-shadow:0 0 8px #48d597;font-style:normal}

/* ---------------- 期次切换 ---------------- */
.periods{display:flex;gap:8px;overflow-x:auto;padding:16px 2px 4px;scrollbar-width:none}
.periods::-webkit-scrollbar{display:none}
.pill{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:8px 15px;border-radius:13px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font-size:13px;font-weight:700;
  cursor:pointer;transition:.16s;white-space:nowrap;
}
.pill small{font-size:9.5px;font-weight:600;letter-spacing:.5px;color:var(--muted-2)}
.pill:hover{border-color:var(--line-2);color:var(--text)}
.pill.on{
  background:linear-gradient(135deg,rgba(255,205,110,.20),rgba(255,150,70,.14));
  border-color:var(--gold-bd);color:var(--gold);
  box-shadow:0 6px 18px -8px rgba(255,180,70,.55);
}
.pill.on small{color:rgba(255,215,106,.72)}

/* ---------------- 概览条 ---------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:11px 12px;text-align:center}
.stat b{display:block;font-size:19px;font-weight:800;color:var(--gold);letter-spacing:.5px}
.stat span{font-size:11px;color:var(--muted);letter-spacing:.4px}

/* ---------------- 卡片 ---------------- */
.board{display:flex;flex-direction:column;gap:14px;margin-top:15px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 15px;backdrop-filter:blur(6px);
}
.card-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-hd .ico{
  flex:0 0 auto;width:36px;height:36px;border-radius:11px;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line);
}
.card-hd .tt{flex:1;min-width:0}
.card-hd .tt b{display:block;font-size:15.5px;font-weight:800;letter-spacing:.3px}
.card-hd .tt small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.card-hd .cnt{
  flex:0 0 auto;font-size:11px;color:var(--gold);background:var(--gold-bg);
  border:1px solid var(--gold-bd);border-radius:999px;padding:3px 9px;font-weight:700;
}

/* 大奖卡 */
.card-hi{
  border-color:var(--gold-bd);
  background:linear-gradient(158deg,rgba(255,205,110,.13),rgba(255,255,255,.035) 46%,rgba(255,140,60,.09));
  box-shadow:0 18px 40px -26px rgba(255,180,70,.75),inset 0 1px 0 rgba(255,255,255,.07);
}
.card-hi .card-hd .ico{background:var(--gold-bg);border-color:var(--gold-bd)}
.card-hi .card-hd .tt b{color:var(--gold)}

/* 规则行 */
.rules{display:flex;flex-direction:column;gap:8px}
.rule{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;
}
.rule .r-label{font-size:13.5px;font-weight:700;letter-spacing:.2px}
.rule .r-val{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rule .r-note{flex:1 0 100%;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:-1px}
.rule-plain{margin-left:auto;font-size:13.5px;font-weight:800;color:var(--gold)}

/* 奖励标签 */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  font-size:12.5px;font-weight:800;padding:3px 9px;border-radius:9px;letter-spacing:.2px;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);white-space:nowrap;
}
.chip.cash{color:var(--red);background:var(--red-bg);border-color:var(--red-bd)}
.chip.shell{color:var(--teal);background:var(--teal-bg);border-color:var(--teal-bd)}
.chip.score{color:var(--violet);background:var(--violet-bg);border-color:var(--violet-bd)}
.chip.honor{color:var(--gold);background:var(--gold-bg);border-color:var(--gold-bd)}
.chip.gift{color:var(--pink);background:var(--pink-bg);border-color:var(--pink-bd)}

/* 获奖名单 */
.wins{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.wins .cap{
  font-size:11px;letter-spacing:2px;color:var(--muted-2);font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.wins .cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.win{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px;
  background:linear-gradient(120deg,rgba(255,205,110,.09),rgba(255,255,255,.03));
  border:1px solid var(--line);flex-wrap:wrap;
}
.win .ava{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
  color:#2a1c05;background:linear-gradient(140deg,var(--gold),var(--gold-2));
  border:1.5px solid rgba(255,225,150,.55);
}
.win .ava img{width:100%;height:100%;object-fit:cover;display:block}
.win .wmain{flex:1;min-width:96px}
.win .wmain b{display:block;font-size:14.5px;font-weight:800;letter-spacing:.3px}
.win .wmain small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.win .wchips{flex:1 1 auto;min-width:0;margin-left:auto;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.rk{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;color:#3a2503;
  background:linear-gradient(140deg,#ffe49a,var(--gold-2));
}
@media(max-width:520px){
  .win .wchips{flex:1 1 100%;margin-left:49px;justify-content:flex-start}
}

/* 待公布 */
.pending{
  margin-top:11px;font-size:12px;color:var(--muted);text-align:center;
  border:1px dashed var(--line-2);border-radius:12px;padding:12px 10px;line-height:1.6;
}
.pending b{color:var(--gold);font-weight:800}

/* 新增维护房 · 自主登记 */
.maint{
  margin-top:12px;border:1px dashed var(--gold-bd);border-radius:13px;padding:12px;
  background:rgba(255,205,110,.05);
}
.maint-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.maint-hd b{font-size:13px;color:var(--gold);letter-spacing:.4px}
.maint-sum{margin-left:auto;font-size:11px;color:var(--muted);font-weight:700}
.maint-i{
  display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);margin-top:8px;
}
.maint-i .mm{flex:1;min-width:0}
.maint-i .mm b{display:block;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maint-i .mm small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maint-i .chip{flex:0 0 auto}
.mdel{flex:0 0 auto;background:none;border:none;color:var(--muted-2);font-size:13px;cursor:pointer;padding:2px 5px;font-family:inherit}
.mdel:hover{color:var(--red)}
.maint-empty{
  margin-top:9px;font-size:11.5px;color:var(--muted);text-align:center;
  border:1px dashed var(--line-2);border-radius:10px;padding:9px;line-height:1.6;
}
.maint-btn{
  width:100%;margin-top:10px;padding:11px;border-radius:12px;font-family:inherit;cursor:pointer;
  border:1px solid var(--gold-bd);letter-spacing:.4px;
  background:linear-gradient(135deg,rgba(255,205,110,.20),rgba(255,150,70,.12));color:var(--gold);
  font-size:13.5px;font-weight:800;transition:.15s;
}
.maint-btn:hover{filter:brightness(1.12)}

/* 荣誉墙 */
.honor{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;margin-top:12px}
.honor-i{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;
  background:var(--panel-2);border:1px solid var(--line);
}
.honor-i .ava{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  color:#2a1c05;background:linear-gradient(140deg,var(--gold),var(--gold-2));
}
.honor-i .ava img{width:100%;height:100%;object-fit:cover;display:block}
.honor-i .hn{min-width:0}
.honor-i .hn b{display:block;font-size:13.5px;font-weight:800}
.honor-i .hn small{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 页脚 */
.ft{text-align:center;margin-top:22px;color:var(--muted-2);font-size:11.5px;line-height:1.9}
.ft .line{width:46px;height:1px;background:var(--line-2);margin:0 auto 12px}
.ft a{color:var(--muted);text-decoration:none;border-bottom:1px dashed var(--line-2)}
.ft .sign{color:var(--gold);font-weight:800;letter-spacing:2px;font-size:12.5px;margin-top:6px}
.skeleton{height:112px;border-radius:var(--radius);background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:sk 1.3s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 轻提示 */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,26px);z-index:60;
  background:rgba(28,22,12,.94);border:1px solid var(--gold-bd);color:var(--gold);
  font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:999px;
  opacity:0;transition:.28s;pointer-events:none;backdrop-filter:blur(8px);
}
.toast.on{opacity:1;transform:translate(-50%,0)}