/* 茧历推免模拟系统 · 复刻官方推免系统视觉 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #f0f2f5; color: #333; font-size: 14px; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ===== 落地页 ===== */
.landing { min-height: 100vh; background: linear-gradient(160deg, #0b3d91 0%, #1475d0 55%, #2f9e64 130%); padding: 40px 20px; }
.landing-inner { max-width: 960px; margin: 0 auto; }
.landing-brand { color: #fff; display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.landing-brand .logo { width: 46px; height: 46px; border-radius: 10px; background: #fff; color: #1475d0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.landing-brand h1 { font-size: 24px; letter-spacing: 1px; }
.landing-brand p { font-size: 13px; opacity: .85; margin-top: 4px; }
.landing-card { background: #fff; border-radius: 14px; padding: 34px 38px; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.landing-card h2 { font-size: 20px; margin-bottom: 6px; color: #123; }
.landing-card .sub { color: #778; font-size: 13px; margin-bottom: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.form-grid .full { grid-column: 1 / -1; }
.f-item label { display: block; font-size: 13px; color: #556; margin-bottom: 6px; }
.f-item label b { color: #e33; font-weight: 400; margin-left: 2px; }
.f-item input, .f-item select, .f-item textarea { width: 100%; border: 1px solid #d9d9d9; border-radius: 6px; padding: 9px 12px; outline: none; transition: border .2s; background: #fff; }
.f-item input:focus, .f-item select:focus, .f-item textarea:focus { border-color: #1475d0; }
.intent-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 8px; }
.btn-primary { background: #1475d0; color: #fff; border: none; border-radius: 6px; padding: 10px 26px; font-size: 15px; }
.btn-primary:hover { background: #0e62b4; }
.btn-primary:disabled { background: #a8c6e8; cursor: not-allowed; }
.btn-ghost { background: #fff; color: #1475d0; border: 1px solid #1475d0; border-radius: 6px; padding: 9px 22px; }
.btn-danger { background: #fff; color: #d4380d; border: 1px solid #ffa39e; border-radius: 6px; padding: 9px 22px; }
.btn-sm { padding: 5px 14px; font-size: 13px; border-radius: 5px; }
.landing-foot { color: rgba(255,255,255,.75); text-align: center; font-size: 12px; margin-top: 26px; line-height: 1.9; }
.free-badge { display: inline-block; background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; border-radius: 20px; padding: 2px 12px; font-size: 12px; margin-left: 10px; vertical-align: 2px; }

/* ===== 系统骨架（复刻官方） ===== */
.sys { min-height: 100vh; display: flex; flex-direction: column; }
.sys-topbar { height: 64px; background: linear-gradient(90deg, #1668b4, #1475d0); color: #fff; display: flex; align-items: center; padding: 0 26px; position: sticky; top: 0; z-index: 50; }
.sys-topbar .cap { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #1475d0; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-right: 14px; }
.sys-topbar h1 { font-size: 19px; font-weight: 600; letter-spacing: .5px; white-space: nowrap; }
.sim-tag { background: #faad14; color: #613400; font-size: 11px; border-radius: 4px; padding: 2px 8px; margin-left: 14px; font-weight: 700; white-space: nowrap; }
.sys-topbar .right { margin-left: auto; display: flex; gap: 20px; font-size: 13px; align-items: center; }
.sys-topbar .right a { color: #eaf3ff; text-decoration: none; cursor: pointer; }
.sys-topbar .right a:hover { color: #fff; text-decoration: underline; }
.sys-clock { background: rgba(255,255,255,.15); border-radius: 6px; padding: 5px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }

.sys-body { flex: 1; display: flex; max-width: 1280px; width: 100%; margin: 0 auto; }
.sys-nav { width: 218px; background: #fff; border-right: 1px solid #e8e8e8; padding: 14px 0; flex-shrink: 0; }
.nav-item { padding: 12px 22px; font-size: 14px; color: #445; cursor: pointer; display: flex; align-items: center; gap: 9px; border-left: 3px solid transparent; }
.nav-item:hover { background: #f2f8ff; color: #1475d0; }
.nav-item.active { background: #e8f2fd; color: #1475d0; border-left-color: #1475d0; font-weight: 600; }
.nav-item.disabled { color: #bbb; cursor: not-allowed; }
.nav-item.disabled:hover { background: none; color: #bbb; }
.nav-sub { padding-left: 40px; font-size: 13px; }
.nav-badge { margin-left: auto; background: #f5222d; color: #fff; border-radius: 9px; font-size: 11px; min-width: 17px; height: 17px; line-height: 17px; text-align: center; padding: 0 4px; }

.sys-main { flex: 1; padding: 22px 28px 60px; min-width: 0; }
.page-title { font-size: 17px; font-weight: 600; color: #222; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e8e8e8; }

.tip { background: #fffbe6; border: 1px solid #ffe58f; border-radius: 6px; padding: 11px 16px; font-size: 13px; color: #874d00; margin-bottom: 18px; line-height: 1.8; }
.tip b { color: #ad4e00; }
.tip .dot { color: #faad14; margin-right: 7px; }

.card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 26px 30px; margin-bottom: 18px; }
.card h3 { font-size: 15px; color: #333; margin-bottom: 18px; }

.success-strip { background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 8px; padding: 16px 22px; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.success-strip .ck { width: 30px; height: 30px; border-radius: 50%; background: #52c41a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.success-strip h4 { color: #237804; font-size: 15px; margin-bottom: 4px; }
.success-strip p { color: #55803a; font-size: 13px; }

.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 40px; margin: 8px 0 20px; }
.kv .row { display: flex; font-size: 14px; }
.kv .k { color: #8899aa; width: 150px; flex-shrink: 0; text-align: right; padding-right: 14px; }
.kv .v { color: #223; font-weight: 500; }
.link { color: #1475d0; cursor: pointer; text-decoration: none; font-size: 13px; }
.link:hover { text-decoration: underline; }

/* 志愿卡片 */
.vol-card { border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; padding: 20px 24px; margin-bottom: 16px; position: relative; }
.vol-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vol-seq { width: 40px; height: 40px; border-radius: 8px; background: #1475d0; color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.vol-seq.b { background: #2f9e64; } .vol-seq.c { background: #722ed1; }
.vol-head .t { font-size: 15px; font-weight: 600; }
.vol-head .time { color: #99a; font-size: 12px; margin-top: 2px; }
.vol-lock { margin-left: auto; color: #ad6800; font-size: 13px; font-variant-numeric: tabular-nums; }
.vol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; font-size: 13px; }
.vol-grid .k { color: #99a; margin-right: 8px; }
.vol-status { margin-top: 12px; font-size: 13px; color: #faad14; display: flex; align-items: center; gap: 6px; }
.vol-status.rejected { color: #f5222d; }
.vol-status.cancelled { color: #999; }

/* 通知卡片 */
.notice-card { border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; margin-bottom: 16px; overflow: hidden; }
.notice-banner { background: linear-gradient(90deg, #1475d0, #40a9ff); color: #fff; text-align: center; padding: 9px; font-size: 15px; font-weight: 600; letter-spacing: 4px; }
.notice-banner.adm { background: linear-gradient(90deg, #d4380d, #fa541c); }
.notice-body { padding: 20px 26px; }
.notice-school { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.notice-time { color: #99a; font-size: 12px; margin-bottom: 12px; }
.notice-note { background: #f8fafc; border-radius: 6px; padding: 12px 16px; color: #456; font-size: 13px; line-height: 1.9; margin-bottom: 16px; }
.notice-actions { display: flex; gap: 12px; align-items: center; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: #cf1322; font-size: 14px; }
.countdown.calm { color: #ad6800; }
.notice-done { padding: 20px 26px; color: #52c41a; font-size: 14px; }
.notice-done.rej { color: #f5222d; } .notice-done.exp { color: #999; }

/* 消息 */
.msg-item { padding: 13px 18px; border-bottom: 1px solid #f0f0f0; font-size: 13px; display: flex; gap: 14px; }
.msg-item .t { color: #99a; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* 复盘报告 */
.debrief-hero { background: linear-gradient(135deg, #0b3d91, #1475d0); border-radius: 12px; color: #fff; padding: 30px 34px; margin-bottom: 20px; }
.debrief-hero h3 { font-size: 20px; margin-bottom: 8px; }
.debrief-hero p { opacity: .88; line-height: 1.9; font-size: 14px; }
.debrief-item { border-left: 3px solid #1475d0; background: #fff; padding: 12px 18px; margin-bottom: 10px; border-radius: 0 6px 6px 0; font-size: 14px; }
.debrief-item.bad { border-left-color: #f5222d; }
.debrief-item.final { border-left-color: #52c41a; background: #f6ffed; font-weight: 600; }
.ai-box { background: #fff; border: 1px solid #d3e0f5; border-radius: 10px; padding: 22px 26px; margin-top: 16px; white-space: pre-wrap; line-height: 2; font-size: 14px; }
.ai-box .ai-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 600; color: #0b3d91; }

/* 弹窗 */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; border-radius: 10px; width: 460px; max-width: 92vw; padding: 28px 30px; }
.modal h3 { font-size: 16px; margin-bottom: 14px; }
.modal .warn { color: #cf1322; font-size: 13px; background: #fff1f0; border: 1px solid #ffccc7; border-radius: 6px; padding: 10px 14px; margin: 12px 0; line-height: 1.8; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }

.watermark { position: fixed; right: 14px; bottom: 12px; color: #b8c4d4; font-size: 12px; z-index: 60; pointer-events: none; }
.empty { text-align: center; color: #9aa5b1; padding: 50px 0 60px; font-size: 13px; }
.empty .ic { font-size: 40px; margin-bottom: 12px; opacity: .5; }
.pay-circle { width: 90px; height: 90px; border-radius: 50%; margin: 30px auto 18px; display: flex; align-items: center; justify-content: center; font-size: 44px; color: #fff; }
.pay-circle.green { background: #52c41a; } .pay-circle.blue { background: #40a9ff; }
.center { text-align: center; }

@media (max-width: 860px) {
  .sys-nav { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  .vol-grid { grid-template-columns: 1fr; }
  .sys-topbar h1 { font-size: 14px; }
}