/* 蓝星学院 A-Level 报名系统 · 版式参照 British Council：深色顶栏、扁平方角、大标题短下划线 */
:root{
  --indigo:#1d1b4f;      /* 顶栏深靛 */
  --navy:#24409a;        /* 主操作色 */
  --navy-d:#1b3179;
  --gold:#d9a036;
  --accent:#12b3e6;      /* BC 式亮蓝强调 */
  --ink:#12121a; --ink2:#4d4c57; --ink3:#8a8894;
  --hair:#dcdbe3; --panel:#f4f4f7; --surf:#fff; --page:#fafafc;
  --ok:#2e7d32; --ok-bg:#e9f3ea;
  --warn:#b5651d; --warn-bg:#fdf3e5;
  --err:#b3261e; --err-bg:#fdecea;
  --info:#24409a; --info-bg:#edf1fb;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--page);font-size:15px;line-height:1.6}

/* 顶栏 */
.mast{background:var(--indigo);color:#fff;position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:62px}
.mast .brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.06em;font-size:15px}
.mast .brand small{display:block;font-weight:400;letter-spacing:.02em;font-size:12px;opacity:.75}
.mast nav{display:flex;gap:2px}
.mast nav a{color:#fff;text-decoration:none;padding:20px 16px;font-size:14px}
.mast nav a:hover{background:rgba(255,255,255,.12)}
.mast nav a.cur{background:var(--accent);color:#06263a;font-weight:600}
.mast .who{font-size:12px;opacity:.85;display:flex;align-items:center;gap:10px}
.mast .who form{display:inline}
.mast .who button{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;
  padding:4px 10px;font-size:12px;cursor:pointer}
.tag-internal{background:var(--gold);color:#241a00;font-size:11px;font-weight:700;
  padding:2px 7px;margin-left:8px;vertical-align:2px}

.wrap{max-width:1060px;margin:34px auto;padding:0 24px}
.wrap.narrow{max-width:640px}

h1{font-size:30px;line-height:1.25;margin:0 0 6px;color:var(--indigo);font-weight:800}
h1::after{content:"";display:block;width:48px;height:4px;background:var(--gold);margin-top:10px}
.sub{color:var(--ink2);font-size:14px;margin:14px 0 26px}
h2{font-size:17px;margin:0 0 16px;color:var(--indigo)}
h2 .stepnum{display:inline-block;background:var(--indigo);color:#fff;width:24px;height:24px;
  line-height:24px;text-align:center;font-size:13px;margin-right:9px;font-weight:700}

/* 面板与表单 */
.panel{background:var(--surf);border:1px solid var(--hair);padding:22px 24px;margin-bottom:18px}
.row{display:flex;gap:28px;flex-wrap:wrap}
.fld{flex:1;min-width:180px;margin-bottom:14px}
.fld label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.fld .req{color:var(--err)}
/* 相邻两栏的说明文字挨在一起会被看成一句话，限宽 + 留白把它们分开；
   12px 中文太挤，放宽行距与字距 */
.fld .help{font-size:12.5px;color:var(--ink3);margin-top:6px;line-height:1.7;
  letter-spacing:.02em;max-width:32em}
.fld .help + .help{margin-top:2px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],
input[type=password],select,textarea{
  width:100%;padding:9px 11px;border:1px solid #b9b8c4;background:#fff;font-size:15px;
  border-radius:0;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:var(--navy)}
textarea{min-height:70px;resize:vertical}

.btn{display:inline-block;background:var(--navy);color:#fff;border:none;padding:11px 26px;
  font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--navy-d)}
.btn.gold{background:var(--gold);color:#241a00}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--navy);padding:10px 25px}
.btn.danger{background:var(--err)}
.btn.sm{padding:6px 14px;font-size:13px}
.actions{display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap}

/* 提示条 */
.alert{padding:12px 16px;margin-bottom:16px;font-size:14px;border-left:4px solid}
.alert.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.alert.err{background:var(--err-bg);border-color:var(--err);color:var(--err)}
.alert.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.alert.info{background:var(--info-bg);border-color:var(--info);color:var(--navy-d)}
.alert ul{margin:6px 0 0;padding-left:20px}

/* 阶段横幅 */
.stagebar{background:var(--indigo);color:#fff;padding:14px 18px;margin-bottom:18px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.stagebar b{color:#ffd98a}
.stagebar .dl{font-size:13px;opacity:.9}

/* 科目选择 */
.subject-cat{margin-bottom:6px}
.subject-cat h3{font-size:14px;color:var(--ink2);margin:16px 0 8px;border-bottom:1px solid var(--hair);
  padding-bottom:5px;letter-spacing:.04em}
.subj{display:flex;align-items:baseline;gap:10px;padding:7px 10px;cursor:pointer;font-size:14px}
.subj:hover{background:var(--panel)}
.subj input{transform:scale(1.15);flex:none;position:relative;top:2px}
.subj .code{font-weight:700;font-family:ui-monospace,Menlo,monospace;min-width:64px}
.subj .title{color:var(--ink2);flex:1}
.subj .when{display:inline-block;margin-left:10px;font-size:12px;color:var(--navy);
  background:var(--info-bg);padding:1px 7px;white-space:nowrap}
.subj .when.tbd{color:var(--ink3);background:var(--panel)}
.subj .price{font-weight:600;white-space:nowrap}
.subj .price.free{color:var(--ok)}
.subj .price.tbd{color:var(--warn)}

/* 底部总额条 */
.totalbar{position:sticky;bottom:0;background:#fff;border-top:3px solid var(--gold);
  padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  box-shadow:0 -4px 14px rgba(0,0,0,.06);z-index:10;flex-wrap:wrap}
.totalbar .amt{font-size:24px;font-weight:800;color:var(--indigo)}
.totalbar .amt small{font-size:13px;color:var(--ink3);font-weight:400}

/* 表格 */
table.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.tbl th{background:var(--panel);text-align:left;padding:10px 12px;font-size:13px;color:var(--ink2);
  border-bottom:2px solid var(--hair);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl tr:hover td{background:#f8f9fc}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}

/* 徽章 */
.badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.err{background:var(--err-bg);color:var(--err)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.info{background:var(--info-bg);color:var(--navy)}
.badge.mute{background:var(--panel);color:var(--ink3)}

/* 统计卡 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--navy);padding:14px 16px}
.stat .n{font-size:26px;font-weight:800;color:var(--indigo)}
.stat .l{font-size:13px;color:var(--ink2)}
.stat.warn{border-top-color:var(--warn)}
.stat.err{border-top-color:var(--err)}
.stat.ok{border-top-color:var(--ok)}

/* 缴费凭证 */
.proofs{display:flex;gap:12px;flex-wrap:wrap}
.proof{border:1px solid var(--hair);padding:8px;background:#fff;font-size:12px;color:var(--ink2);
  text-align:center}
.proof img{max-width:180px;max-height:140px;display:block;margin-bottom:6px}
.proof a{color:var(--navy)}

.note{font-size:12px;color:var(--ink3)}
/* 发件人地址：等宽 + 高亮，方便学生逐字比对，仿冒地址一眼能看出来 */
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;
  background:#fff;padding:1px 6px;border:1px solid currentColor;white-space:nowrap}
.kv{font-size:14px}
.kv dt{float:left;width:130px;color:var(--ink3);clear:left}
.kv dd{margin:0 0 6px 140px}
.footer{margin:50px 0 30px;text-align:center;font-size:12px;color:var(--ink3)}
a{color:var(--navy)}

@media (max-width:720px){
  .mast{padding:0 14px;height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .mast nav a{padding:10px 10px}
  .wrap{margin:20px auto}
  h1{font-size:24px}
  .kv dt{float:none;width:auto}
  .kv dd{margin-left:0}
}