/* ============================================================
   黑金主题 · 共用视觉组件
   ============================================================ */
:root{
  --gold:#e8c877;
  --gold-2:#f6e2a6;
  --gold-deep:#b8842f;
  --gold-line:rgba(201,162,75,.55);
  --gold-line-strong:#c9a24b;
  --red-1:#e2453a;
  --red-2:#8c1410;
  --red-deep:#5a0d0a;
  --ink:#050505;
  --text:#f4e9cf;
  --text-dim:#9a8a63;
  /* 深红半透明面板（背景图偏亮时也能看清内容） */
  --panel:rgba(30,8,8,.74);
  --panel-strong:rgba(22,6,6,.85);
  --panel-grad:linear-gradient(180deg,rgba(38,10,10,.80),rgba(18,5,5,.86));
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  color:var(--text);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
}
/* 手机端背景：固定铺满视口，与各页统一按 750×1334 展示，不随长内容变形 */
.m-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:#050505;
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
}
.page{position:relative;z-index:1;}
a{color:inherit;text-decoration:none;}

/* 金色渐变文字 */
.gold-text{
  background:linear-gradient(180deg,#fbeeb8 0%,#e8c877 45%,#bd8f38 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
  /* 背景图偏亮时也能保持可读 */
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

/* ---------- 顶部 LOGO / 标题条 ---------- */
.top-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;}
.logo-box{
  border:1px solid var(--gold-line);border-radius:8px;
  padding:10px 18px;color:var(--gold);font-size:15px;letter-spacing:1px;
  position:relative;flex:none;
}
.title-box{
  flex:1;border:1px solid var(--gold-line);border-radius:8px;
  padding:12px 20px;text-align:center;font-size:18px;letter-spacing:3px;
  color:var(--gold);position:relative;
  background:linear-gradient(90deg,rgba(201,162,75,.05),rgba(201,162,75,.12),rgba(201,162,75,.05));
}

/* ---------- 装饰性标题（两侧麦穗/花纹） ---------- */
.orn-title{
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:34px;font-weight:800;letter-spacing:6px;margin:6px 0;
}
.orn-title .wheat{width:46px;height:34px;opacity:.95;flex:none;}
.orn-title .wheat.r{transform:scaleX(-1);}
.orn-sub{
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:var(--text-dim);font-size:14px;letter-spacing:3px;margin-top:4px;
}
.orn-sub::before,.orn-sub::after{
  content:"";width:60px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line));
}
.orn-sub::after{transform:scaleX(-1);}

/* ---------- 金色科技边框卡片（带四角） ---------- */
.gold-frame{
  position:relative;
  border:1px solid var(--gold-line);
  border-radius:10px;
  background:var(--panel-grad);
}
.gold-frame::before,.gold-frame::after,
.gold-frame > .corner-tl,.gold-frame > .corner-br{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;
  border:2px solid var(--gold-line-strong);
}
.gold-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:10px 0 0 0;}
.gold-frame::after{top:-1px;right:-1px;border-left:0;border-bottom:0;border-radius:0 10px 0 0;}
.gold-frame > .corner-tl{bottom:-1px;left:-1px;top:auto;border-right:0;border-top:0;border-radius:0 0 0 10px;}
.gold-frame > .corner-br{bottom:-1px;right:-1px;top:auto;border-left:0;border-top:0;border-radius:0 0 10px 0;}

/* ---------- 按钮 ---------- */
.btn{
  display:block;width:100%;border:0;cursor:pointer;
  font-size:20px;font-weight:800;letter-spacing:6px;
  padding:18px 0;border-radius:8px;text-align:center;
  font-family:inherit;
}
.btn-red{
  color:#fff;
  background:linear-gradient(180deg,var(--red-1),var(--red-2));
  border:1px solid #f0a24b;
  box-shadow:0 0 22px rgba(226,69,58,.45),inset 0 0 18px rgba(255,180,120,.25);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.btn-red:active{filter:brightness(.92);}
.btn-gold{
  color:var(--gold);background:var(--panel);
  border:1px solid var(--gold-line-strong);
  box-shadow:inset 0 0 14px rgba(201,162,75,.18);
}
.btn-gold:active{filter:brightness(1.15);}

/* ---------- 表单字段 ---------- */
.field{margin:22px 0;}
.field-label{
  display:flex;align-items:center;gap:10px;
  font-size:20px;font-weight:700;color:var(--gold);margin-bottom:12px;
}
.field-label::before,.field-label::after{content:"◇";font-size:12px;color:var(--gold-deep);}
.field input, .field textarea, .field select{
  width:100%;padding:18px 18px;font-size:17px;color:var(--text);
  background:var(--panel);
  border:1px solid var(--gold-line);border-radius:8px;
  font-family:inherit;
}
.field input::placeholder{color:#6b5f42;}
.field input:focus{outline:none;border-color:var(--gold-line-strong);box-shadow:0 0 10px rgba(201,162,75,.25);}

/* 头像占位（剪影） */
.avatar-ph{
  background:radial-gradient(ellipse at 50% 35%,rgba(232,200,119,.35),rgba(0,0,0,.2) 70%);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
}

/* 通用滚动隐藏 */
.noscroll::-webkit-scrollbar{display:none;}

/* 提示浮层 */
.toast{
  position:fixed;left:50%;top:24px;transform:translateX(-50%);
  background:rgba(0,0,0,.88);border:1px solid var(--gold-line-strong);
  color:var(--gold-2);padding:12px 22px;border-radius:30px;font-size:15px;
  z-index:9999;max-width:86%;text-align:center;
  box-shadow:0 6px 26px rgba(0,0,0,.6);opacity:0;transition:opacity .25s,top .25s;
}
.toast.show{opacity:1;top:40px;}

/* ============================================================
   手机端 · 顶部留白区（LOGO / 标题在背景图中体现）
   ============================================================ */
.m-reserve{flex:none;height:var(--reserve,26vh);}

/* ---------- 签到页（图标输入框 + 立即签到 + 隐私说明） ---------- */
.sform{display:flex;flex-direction:column;gap:16px;}
.sfield{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--gold-line);border-radius:40px;
  padding:2px 20px 2px 18px;height:60px;
  background:var(--panel);position:relative;
}
.sfield:focus-within{border-color:var(--gold-line-strong);box-shadow:0 0 12px rgba(201,162,75,.25);}
.sfield .ico{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#3a2a00;font-size:19px;
  background:linear-gradient(180deg,#f6e2a6,#bd8f38);box-shadow:0 0 10px rgba(232,200,119,.3);
}
.sfield .lab{flex:none;color:var(--gold-2);font-weight:800;font-size:16px;letter-spacing:1px;}
.sfield input{
  flex:1;min-width:0;border:0;background:transparent;
  color:var(--text);font-size:15px;font-family:inherit;height:100%;
}
.sfield input:focus{outline:none;}
.sfield input::placeholder{color:#6b5f42;font-size:14px;}
.sform .btn{margin-top:10px;border-radius:40px;}
.privacy{
  display:flex;align-items:center;gap:16px;margin-top:26px;
  border:1px solid var(--gold-line);border-radius:16px;padding:16px 18px;
  background:var(--panel);position:relative;overflow:hidden;
}
.privacy .shield{
  flex:none;width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--gold-2);
  background:radial-gradient(circle at 50% 30%,rgba(226,69,58,.4),rgba(0,0,0,.4));
  border:1px solid var(--gold-line);
}
.privacy p{margin:0;min-width:0;color:var(--text-dim);font-size:12.5px;line-height:1.7;position:relative;z-index:1;}
.privacy .leaf{position:absolute;right:-6px;bottom:-10px;font-size:52px;color:rgba(232,200,119,.14);pointer-events:none;}

/* ---------- 投票页（信息条 + 单列选手卡片） ---------- */
.vote-stats{
  display:flex;align-items:stretch;justify-content:center;width:100%;max-width:100%;
  border:1px solid var(--gold-line);border-radius:12px;
  background:var(--panel);margin:0 0 14px;overflow:hidden;
}
.vote-stats .it{flex:1 1 33.333%;width:33.333%;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 6px;color:var(--text);font-size:12.5px;line-height:1.3;text-align:center;}
.vote-stats .it .ico{flex:none;color:var(--gold);font-size:17px;display:flex;}
.vote-stats .it + .it{border-left:1px solid var(--gold-line);}
.vote-remain{
  text-align:center;margin:0 auto 16px;padding:10px 20px;max-width:320px;
  border:1px solid var(--gold-line);border-radius:12px;background:var(--panel);
  color:var(--gold-2);font-size:15px;letter-spacing:1px;
}
.vote-remain b{font-size:26px;font-weight:900;margin:0 4px;}
.vlist{display:flex;flex-direction:column;gap:14px;padding-bottom:120px;}
.vcard{
  position:relative;display:flex;align-items:center;gap:14px;
  border:1px solid var(--gold-line);border-radius:14px;padding:12px 14px;
  background:var(--panel-grad);
}
.vcard .ph{flex:none;width:78px;height:78px;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--gold-line);}
.vcard .ph img{width:100%;height:100%;object-fit:cover;display:block;}
.vcard .ph .num{
  position:absolute;top:0;left:0;background:linear-gradient(180deg,var(--red-1),var(--red-2));
  color:#fff;font-weight:800;font-size:13px;padding:2px 8px;border-radius:10px 0 10px 0;
}
.vcard .mid{flex:1;min-width:0;}
.vcard .mid .nm{font-size:18px;font-weight:800;color:var(--gold-2);letter-spacing:1px;}
.vcard .mid .ds{margin-top:5px;color:var(--text-dim);font-size:12px;line-height:1.6;}
.vcard .pick{
  flex:none;border:1px solid var(--gold-line-strong);border-radius:30px;
  padding:9px 16px;color:var(--gold);font-weight:800;font-size:14px;white-space:nowrap;
  background:var(--panel);cursor:pointer;
}
.vcard.sel{border-color:var(--gold-line-strong);box-shadow:0 0 0 1px var(--gold-line-strong),0 0 18px rgba(232,200,119,.3);}
.vcard.sel .pick{background:linear-gradient(180deg,#f6e2a6,#bd8f38);color:#3a2a00;border-color:#f6e2a6;}
.vbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.96));
  display:flex;align-items:center;gap:14px;border-top:1px solid var(--gold-line);
}
.vbar .cnt{flex:none;color:var(--gold-2);font-size:14px;display:flex;align-items:center;gap:8px;}
.vbar .cnt .ico{color:var(--gold);font-size:18px;display:flex;}
.vbar .cnt b{font-size:22px;}
.vbar .btn{flex:1;padding:15px 0;font-size:18px;letter-spacing:4px;border-radius:12px;}