:root {
  /* 品牌色：活力草绿 + 能量橙 + 金 */
  --grass: #25a85a;
  --grass-d: #178a47;
  --grass-dd: #0c5f30;
  --accent: #ff6a2b;
  --accent-d: #df531a;
  --gold: #ffc233;
  --gold-d: #e69a00;

  --ink: #18271f;
  --ink-soft: #45554b;
  --muted: #84938a;
  --line: #e7ede8;
  --bg: #eef4ef;
  --card: #ffffff;
  --ok: #2faa4d;
  --bad: #e0483b;

  /* 多层柔和阴影（带轻微绿调氛围光） */
  --shadow-sm: 0 2px 6px rgba(18, 40, 27, 0.06);
  --shadow: 0 8px 22px rgba(18, 40, 27, 0.09), 0 2px 6px rgba(18, 40, 27, 0.05);
  --shadow-lg: 0 18px 44px rgba(18, 40, 27, 0.16), 0 4px 12px rgba(18, 40, 27, 0.08);

  --radius: 16px;
  --radius-lg: 22px;
  --nav-h: 62px;
  --maxw: 1180px;
  --display: 'Fredoka', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --bg-deep: #031b1a;
  --panel-deep: rgba(3, 31, 27, .88);
  --panel-border: rgba(53, 205, 153, .44);
  --neon-green: #35e6a1;
  --cyan: #55d9e8;
  --orange: #ff8a18;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(18, 60, 35, 0.045) 1px, transparent 0);
  background-size: 22px 22px;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); }
.boot-screen {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  color: #eafff5;
  background:
    radial-gradient(circle at 50% 18%, rgba(53,230,161,.18), transparent 34%),
    linear-gradient(145deg, #062c28 0%, #031b1a 56%, #021313 100%);
}
.boot-card {
  width: min(360px, 100%); display: grid; justify-items: center; gap: 10px;
  padding: 30px 28px 27px; border: 1px solid rgba(76,224,176,.34);
  border-radius: 22px; background: rgba(2,31,27,.78);
  box-shadow: 0 20px 55px rgba(0,0,0,.3), inset 0 0 30px rgba(53,230,161,.05);
  text-align: center; backdrop-filter: blur(12px);
}
.boot-logo { width: 58px; height: 58px; object-fit: contain; border-radius: 16px; }
.boot-card strong { font-family: var(--display); font-size: 19px; letter-spacing: .04em; }
.boot-card span { color: rgba(218,246,233,.7); font-size: 12px; }
.boot-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(90,226,177,.22); border-top-color: var(--neon-green);
  animation: boot-spin .8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-spinner { animation: none; } }
.boot-error { color: #fff1ed; }
.boot-error .boot-card { border-color: rgba(255,154,128,.5); }
.boot-error strong { color: #ffd1c4; }
.boot-error button { margin-top: 4px; }
.grow { flex: 1; }

/* ---------- 糖果式可按压按钮 ---------- */
button { font-family: inherit; cursor: pointer; border: none; }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #146ee8; outline-offset: 3px;
}
.btn {
  background: var(--accent); color: #fff; font-weight: 700; font-family: var(--display);
  padding: 11px 22px; border-radius: 12px; font-size: 15px; letter-spacing: .3px;
  box-shadow: 0 4px 0 var(--accent-d), 0 8px 16px rgba(255, 106, 43, 0.28);
  transition: transform .06s, box-shadow .06s, filter .15s;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--accent-d), 0 3px 8px rgba(255, 106, 43, 0.25); }
.btn.lg { padding: 15px 30px; font-size: 17px; border-radius: 14px; }
.btn.sm { padding: 8px 15px; font-size: 13px; border-radius: 10px; box-shadow: 0 3px 0 var(--accent-d), 0 5px 10px rgba(255,106,43,.22); }
.btn.sm:active { transform: translateY(3px); box-shadow: 0 0 0 var(--accent-d); }
.btn.block { width: 100%; padding: 14px; font-size: 16px; }
.btn.green { background: var(--grass); box-shadow: 0 4px 0 var(--grass-dd), 0 8px 16px rgba(37,168,90,.28); }
.btn.green:active { box-shadow: 0 0 0 var(--grass-dd); }
.btn.ghost { background: #fff; color: var(--accent); box-shadow: 0 4px 0 #e6ddd6, 0 8px 16px rgba(18,40,27,.08); }
.btn.ghost:active { box-shadow: 0 0 0 #e6ddd6; }
.btn.gray { background: #eef2ee; color: var(--ink-soft); box-shadow: 0 3px 0 #d6ddd6; }
.btn.gray:hover { background: #e8eee8; }
.btn.gray.sm { box-shadow: 0 3px 0 #d6ddd6; }
.btn.gray:active { transform: translateY(3px); box-shadow: 0 0 0 #d6ddd6; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* 禁用态仍要传达“这是可用操作，只是当前条件未满足”。不要把按钮
   洗成透明底，尤其是深色战术工作台中的“单步/开球”。 */
body:has(.tb-page) .btn:disabled {
  opacity: .78;
  filter: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}
body:has(.tb-page) .btn.gray:disabled {
  background: rgba(73, 97, 108, .92);
  color: #dcefeb;
  border-color: rgba(186,225,211,.2);
  box-shadow: 0 2px 0 rgba(42,63,70,.82);
}
body:has(.tb-page) .btn.amber:disabled {
  background: linear-gradient(90deg, #b98512, #d9a928);
  color: #fff2bc;
  border-color: rgba(255,220,103,.42);
  box-shadow: 0 2px 0 #85650d;
}
body:has(.tb-page) .btn.green:disabled {
  background: linear-gradient(90deg, #16804f, #1da56a);
  color: #dcffef;
  border-color: rgba(130,255,205,.32);
  box-shadow: 0 2px 0 #075c3c;
}

/* Access and operations surfaces stay in the DOM so the playfield remains unobstructed. */
.access-grid { align-items: stretch; }
.access-plan { border: 2px solid rgba(37,168,90,.25); }
.access-price { font: 800 34px/1 var(--display); color: var(--accent); margin: 22px 0; }
body:has(.access-page) { background:#031719; background-image:linear-gradient(180deg,rgba(1,20,22,.78),rgba(1,12,16,.96)),url('../assets/generated/ui/home-stadium-night.webp'); background-size:cover; background-attachment:fixed; color:#effff8; }
body:has(.access-page) .access-page .page-head h2,
body:has(.access-page) .access-page .page-head p { color:#effff8; }
body:has(.access-page) .access-page .card { background:linear-gradient(145deg,rgba(4,53,46,.94),rgba(2,28,30,.96)); border-color:rgba(62,211,166,.32); color:#effff8; box-shadow:0 12px 30px rgba(0,0,0,.24); }
body:has(.access-page) .access-page .card p { color:rgba(222,246,236,.74); }
body:has(.access-page) .access-price { color:#ffc733; }
@media (max-width:860px) { body:has(.access-page) .access-page { padding-left:12px; padding-right:12px; }.access-grid { grid-template-columns:1fr; } }
.access-code-form, .admin-form { display: flex; gap: 10px; flex-wrap: wrap; }
.access-code-form .ed-input, .admin-form .ed-input { flex: 1 1 150px; }
.access-checkout { max-width: 460px; }
.access-qr { width: min(260px, 75vw); aspect-ratio: 1; object-fit: contain; border-radius: 16px; background: #fff; padding: 8px; }
.access-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.access-kicker { display:block; margin-bottom:7px; color:#79e2bb; font-weight:800; letter-spacing:.12em; font-size:12px; }
.access-state { padding:9px 14px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(0,0,0,.18); font-weight:800; white-space:nowrap; }.access-state.on{background:rgba(36,183,113,.18);border-color:#43cf91;color:#8ff0be}
.access-benefits { display:grid; grid-template-columns:minmax(250px,1fr) minmax(420px,1.5fr); align-items:center; gap:28px; margin-bottom:18px; }
.access-benefits h3,.access-methods h3 { margin:10px 0 6px; font-size:21px; }.access-benefits p,.access-methods p{margin:0}
.access-benefit-list { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.access-benefit-list>div{min-height:92px;padding:16px 10px;border:1px solid rgba(103,225,182,.2);border-radius:14px;background:rgba(0,0,0,.16);display:flex;flex-direction:column;justify-content:center;text-align:center}.access-benefit-list strong{font-size:23px;color:#ffc733}.access-benefit-list span{font-size:12px;color:rgba(231,255,246,.7);margin-top:6px}
.access-methods { display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:stretch; }.access-methods>.card{margin:0}
.access-section-title { display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; }.access-section-title>span{display:grid;place-items:center;min-width:38px;height:38px;border-radius:11px;background:#ffc733;color:#16372e;font-weight:900}
.support-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }.support-card{padding:13px;border-radius:14px;border:1px solid rgba(103,225,182,.22);background:rgba(0,0,0,.16);text-align:center}.support-person{display:flex;align-items:center;gap:9px;text-align:left;margin-bottom:10px}.support-person>span,.support-person>img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#2cb978;display:grid;place-items:center;font-weight:900}.support-person small{display:block;color:rgba(231,255,246,.62);margin-top:2px}.support-qr{display:block;width:min(170px,100%);aspect-ratio:1;object-fit:contain;margin:auto;background:#fff;padding:7px;border-radius:12px}.support-card p{margin-top:9px!important;font-size:13px}
.access-code-form { margin-top:22px; }.access-code-form .ed-input{min-height:46px;flex:1 1 220px}.access-notes{padding-left:19px;margin:20px 0 0;color:rgba(231,255,246,.7);font-size:13px;line-height:1.9}.access-empty{padding:35px;text-align:center;border:1px dashed rgba(255,255,255,.25);border-radius:14px}.access-empty small{display:block;margin-top:8px;color:rgba(255,255,255,.55)}
.access-footer { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px!important }.access-footer p{margin:5px 0 0!important}
.admin-support-qr{width:58px;height:58px;object-fit:contain;background:#fff;border:1px solid #dce7df;border-radius:8px;padding:3px}.admin-panel-note{margin:-6px 0 14px;color:#68786d;font-size:13px}
@media (max-width:900px){.access-head{align-items:flex-start;flex-direction:column}.access-benefits,.access-methods{grid-template-columns:1fr}.access-benefit-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.access-benefit-list{grid-template-columns:1fr 1fr}.access-footer{align-items:stretch;flex-direction:column}.access-footer .btn{width:100%}}
.admin-section { margin-bottom: 18px; }
.admin-table-wrap { overflow-x: auto; margin-top: 16px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: 10px; border-bottom: 1px solid #e5ebe6; text-align: left; white-space: nowrap; }
.admin-table th { color: var(--grass-d); background: #f4f8f4; }

/* Standalone tournament administration console. */
.admin-console { min-height: 100vh; background: #f3f6f4; color: #18261d; display: grid; grid-template-columns: 248px minmax(0,1fr); }
.admin-sidebar { position: sticky; top: 0; height: 100vh; background: #102a1b; color: #fff; display: flex; flex-direction: column; padding: 22px 16px; box-shadow: 8px 0 28px rgba(7,31,17,.1); z-index: 20; }
.admin-brand { border: 0; background: none; color: #fff; display: flex; gap: 12px; align-items: center; text-align: left; padding: 4px 8px 26px; cursor: pointer; }
.admin-brand img { width: 38px; height: 38px; object-fit: contain; }
.admin-brand span { font-size: 17px; font-weight: 900; line-height: 1.1; }
.admin-brand small { display: block; margin-top: 5px; color: #94b9a2; font-size: 11px; letter-spacing: 1px; }
.admin-menu { display: grid; gap: 7px; }
.admin-menu a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 10px; color: #c9dbcf; font-weight: 700; font-size: 14px; }
.admin-menu a:hover { background: #183d28; color: #fff; }
.admin-menu a.on { background: #2a8d51; color: #fff; box-shadow: inset 3px 0 #a8ee85; }
.admin-menu-icon { width: 22px; font-size: 18px; text-align: center; }
.admin-sidebar-foot { margin-top: auto; padding: 16px 13px 4px; border-top: 1px solid #2d4d39; display: grid; gap: 3px; }
.admin-sidebar-foot span { color: #8db39b; font-size: 11px; }
.admin-sidebar-foot b { font-size: 14px; }
.admin-workspace { min-width: 0; }
.admin-topbar { height: 66px; padding: 0 30px; background: rgba(255,255,255,.92); border-bottom: 1px solid #dde7e0; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 15; backdrop-filter: blur(10px); }
.admin-topbar b { font-size: 15px; }.admin-topbar span { color: #718078; font-size: 13px; }
.admin-top-actions { display: flex; gap: 8px; }
.admin-stage { max-width: 1440px; margin: 0 auto; padding: 30px; }
.admin-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.admin-page-head h1 { margin: 0 0 5px; font-size: 28px; letter-spacing: -.5px; }.admin-page-head p { margin: 0; color: #708078; }
.admin-live { background: #e5f7ea; color: #237c42; border: 1px solid #bce2c8; border-radius: 20px; padding: 7px 12px; font-size: 12px; }
.admin-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.admin-metric { min-height: 138px; padding: 20px; border-radius: 15px; background: #fff; border: 1px solid #dce7df; box-shadow: 0 5px 18px rgba(24,56,35,.05); display: flex; flex-direction: column; }
.admin-metric small { color: #718078; font-weight: 700; }.admin-metric strong { font-size: 31px; margin: 12px 0 5px; }.admin-metric span { font-size: 12px; color: #758179; }
.admin-metric.green { border-top: 4px solid #38a863; }.admin-metric.gold { border-top: 4px solid #e1ad32; }.admin-metric.blue { border-top: 4px solid #3b8fcb; }.admin-metric.purple { border-top: 4px solid #8b6cc5; }
.admin-overview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.admin-overview-card,.admin-panel,.admin-quick,.admin-content-card { background: #fff; border: 1px solid #dce7df; border-radius: 15px; box-shadow: 0 5px 18px rgba(24,56,35,.045); }
.admin-overview-card { padding: 20px; }.admin-overview-card h3 { margin: 0 0 15px; }.admin-overview-card>div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #edf1ee; color: #66766d; }.admin-overview-card>div b { color: #1a2b20; }.admin-overview-card>button { border: 0; background: none; color: #26874b; font-weight: 800; padding: 15px 0 0; cursor: pointer; }
.admin-quick { padding: 20px; }.admin-quick h3 { margin: 0 0 15px; }.admin-quick>div { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.admin-quick-item { background: #f3f8f4; border: 1px solid #dce8df; border-radius: 11px; padding: 15px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; text-align: left; }.admin-quick-item b { color: #1d412a; }.admin-quick-item span { grid-column: 1; font-size: 12px; color: #718078; margin-top: 4px; }.admin-quick-item i { grid-column: 2; grid-row: 1/3; align-self: center; color: #2d9855; font-size: 19px; }
.admin-toolbar,.admin-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid #dce7df; padding: 14px; border-radius: 13px; margin-bottom: 15px; }
.admin-input { min-width: 150px; padding: 9px 11px; border-radius: 8px; border: 1px solid #cad8ce; background: #fff; color: #213329; }.admin-toolbar .admin-input:first-child { flex: 1; min-width: 230px; }
.admin-panel { padding: 20px; margin-bottom: 18px; }.admin-panel h2 { margin: 0 0 15px; font-size: 19px; }
.admin-console .admin-table-wrap { background: #fff; border: 1px solid #dce7df; border-radius: 13px; margin-top: 0; }
.admin-console .admin-table th { padding: 13px 12px; background: #eef5f0; color: #425b49; font-size: 12px; }.admin-console .admin-table td { padding: 13px 12px; vertical-align: middle; }.admin-console .admin-table tr:hover td { background: #f8fbf9; }
.admin-user-cell,.admin-cell-note { display: grid; gap: 3px; }.admin-user-cell small,.admin-cell-note { color: #7a8880; font-size: 11px; }.admin-actions { display: flex; gap: 6px; }
.admin-badge { display: inline-block; padding: 5px 8px; border-radius: 20px; background: #eef1ef; color: #65726a; font-size: 11px; font-weight: 800; }.admin-badge.ok { color: #247642; background: #e4f5e9; }
.admin-content-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }.admin-content-card { padding: 22px; }.admin-content-card h3 { margin: 0 0 18px; }.admin-content-card p { min-height: 42px; color: #68776e; line-height: 1.55; }.admin-content-number { font-size: 34px; font-weight: 900; color: #23884a; }.admin-content-number small { font-size: 12px; color: #6d7c73; margin-left: 7px; }
.admin-loading,.admin-error { padding: 50px; text-align: center; background: #fff; border: 1px solid #dce7df; border-radius: 14px; color: #66766d; }
@media (max-width: 980px) { .admin-console { grid-template-columns: 76px minmax(0,1fr); }.admin-sidebar { padding: 18px 10px; }.admin-brand span,.admin-menu a:not(.on)::after,.admin-menu a { font-size: 0; }.admin-brand { padding-left: 8px; }.admin-menu a { justify-content: center; padding: 12px; }.admin-menu-icon { font-size: 18px; }.admin-sidebar-foot { display: none; }.admin-metrics { grid-template-columns: repeat(2,1fr); }.admin-overview-grid,.admin-content-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .admin-console { display: block; }.admin-sidebar { position: sticky; height: auto; padding: 8px 10px; flex-direction: row; align-items: center; overflow: hidden; }.admin-brand { flex: 0 0 auto; padding: 0 8px 0 0; }.admin-brand img { width: 32px;height:32px; }.admin-menu { display: flex; flex: 1; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }.admin-menu::-webkit-scrollbar { display: none; }.admin-menu a { flex: 0 0 48px; padding: 8px; }.admin-topbar { padding: 0 12px; }.admin-topbar>div:first-child { display:none; }.admin-stage { padding: 18px 12px; }.admin-page-head { display: block; }.admin-page-head h1 { font-size: 24px; }.admin-page-head p { overflow-wrap: anywhere; }.admin-live { display: none; }.admin-metrics { grid-template-columns: 1fr; gap: 9px; }.admin-metric { min-height: 104px; padding: 14px; }.admin-quick>div { grid-template-columns: 1fr; } }
.competition-card code { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--grass-d); }
.competition-create { display: grid; gap: 12px; margin-bottom: 24px; }
.competition-create .ed-input { width: 100%; }

/* 比赛平台与首页、排行榜、闯关工作台保持同一套深色足球主题。
   特别覆盖“暂无比赛”的空状态，避免只剩一张浅色卡片漂在白底上。 */
body:has(.competition-page) {
  background: #031719;
  background-image: linear-gradient(180deg, rgba(1,20,22,.72), rgba(1,12,16,.95)), url('../assets/generated/ui/home-stadium-night.webp');
  background-size: cover;
  background-attachment: fixed;
  color: #effff8;
}
body:has(.competition-page) .competition-page { min-height: calc(100vh - var(--nav-h)); padding-bottom: 80px; }
body:has(.competition-page) .competition-page .page-head h2,
body:has(.competition-page) .competition-page .page-head p,
body:has(.competition-page) .competition-page h3,
body:has(.competition-page) .competition-page h4 { color: #effff8; }
body:has(.competition-page) .competition-page .page-head p,
body:has(.competition-page) .competition-page .muted { color: rgba(222,246,236,.72); }
body:has(.competition-page) .competition-page > .grid-3 > .card,
body:has(.competition-page) .competition-page > .card,
body:has(.competition-page) .competition-page .competition-card,
body:has(.competition-page) .competition-page .competition-create {
  background: linear-gradient(145deg, rgba(4,53,46,.94), rgba(2,28,30,.96));
  border: 1px solid rgba(62,211,166,.32);
  color: #effff8;
  box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 0 24px rgba(41,180,135,.04);
}
body:has(.competition-page) .competition-page .competition-card p,
body:has(.competition-page) .competition-page .competition-create p,
body:has(.competition-page) .competition-page .competition-order-row,
body:has(.competition-page) .competition-page .competition-level-choice { color: rgba(222,246,236,.78); }
body:has(.competition-page) .competition-page .competition-card code { color: #8df6c5; }
body:has(.competition-page) .competition-page .competition-level-choice:hover,
body:has(.competition-page) .competition-page .competition-order-row:hover { background: rgba(21,111,84,.35); border-color: rgba(78,226,175,.58); }
body:has(.competition-page) .competition-page .ed-input,
body:has(.competition-page) .competition-page .ed-sel {
  background: rgba(1,24,22,.86); border-color: rgba(78,211,169,.35); color: #effff8;
}
body:has(.competition-page) .competition-page .ed-input::placeholder { color: rgba(205,232,220,.56); }

/* ---------- 顶部导航 ---------- */
.navbar { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; box-shadow: var(--shadow-sm); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); display: flex; align-items: center; gap: 24px; padding: 0 24px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .3px; cursor: pointer; color: var(--grass-dd); display: flex; align-items: center; gap: 8px; }
.brand-ball { width: 30px; height: 30px; display: inline-flex; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.brand-ball svg, .brand-ball img { width: 100%; height: 100%; }
.hero-art img, .auth-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav-links { display: flex; gap: 6px; flex: 1; }
.navlink { padding: 8px 15px; border-radius: 10px; font-weight: 600; color: var(--ink-soft); font-size: 15px; transition: background .12s; }
.navlink:hover { background: #eef4ee; }
.navlink.on { background: var(--grass); color: #fff; box-shadow: 0 3px 0 var(--grass-dd); }
.nav-user { display: flex; align-items: center; gap: 12px; }
.nav-nick { font-weight: 700; color: var(--ink-soft); font-size: 14px; }
.help-trigger { flex: 0 0 auto; background: #eef4ee; color: var(--grass-dd); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 800; }
.help-trigger:hover { background: #dfeee1; }
.nav-bell { width:42px; height:38px; border-radius:18px; background:rgba(4,41,37,.74); color:#dff8ed; border:1px solid rgba(64,188,151,.25); }.nav-user-menu { position:relative; }.nav-user-menu summary { list-style:none; min-width:150px; height:42px; display:flex; align-items:center; gap:9px; padding:4px 12px 4px 5px; border:1px solid rgba(64,188,151,.28); border-radius:22px; background:rgba(4,37,34,.72); cursor:pointer; }.nav-user-menu summary::-webkit-details-marker { display:none; }.nav-avatar { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; overflow:hidden; background:#f2fff8; border:2px solid #ff8419; }.nav-avatar img { width:100%; height:100%; object-fit:contain; }.nav-chevron { margin-left:auto; color:#9eb9ae; }.nav-user-pop { position:absolute; right:0; top:49px; width:150px; padding:7px; border-radius:12px; background:#042824; border:1px solid rgba(59,195,151,.35); box-shadow:0 14px 35px rgba(0,0,0,.4); z-index:50; }.nav-user-pop button { width:100%; padding:9px 10px; border-radius:8px; text-align:left; background:transparent; color:#eafff4; }.nav-user-pop button:hover { background:rgba(50,189,143,.16); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 64px; }

/* ---------- 登录 / 注册 ---------- */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px;
  background: radial-gradient(1100px 560px at 50% -8%, #2fb866 0%, #0c5f30 62%, #073f20 100%); }
.auth-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 30px 28px 28px; width: 100%; max-width: 384px; }
.auth-logo { width: 116px; height: 124px; margin: -6px auto 2px; }
.auth-title { font-family: var(--display); text-align: center; margin: 0 0 2px; font-size: 30px; color: var(--grass-dd); letter-spacing: .5px; }
.auth-sub { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.auth-tabs { display: flex; background: #eef3ef; border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.auth-tabs button { flex: 1; padding: 10px; border-radius: 9px; background: none; font-weight: 700; color: var(--muted); transition: .12s; }
.auth-tabs button.on { background: #fff; color: var(--grass-d); box-shadow: var(--shadow-sm); }
.inp { width: 100%; padding: 13px 15px; border: 2px solid var(--line); border-radius: 12px; font-size: 15px; margin-bottom: 12px; outline: none; transition: border-color .15s, box-shadow .15s; background: #fbfdfb; }
.inp:focus { border-color: var(--grass); box-shadow: 0 0 0 4px rgba(37,168,90,.13); background: #fff; }
.profile-card { max-width: 560px; gap: 12px; }
.profile-card h3 { margin: 0 0 4px; }
.profile-field { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.profile-field .inp { margin: 0; }
@media (max-width: 560px) { .profile-field { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- 学生档案：与深色足球工作台统一 ---------- */
body:has(.profile-page) {
  color: #effff8;
  background-color: #031719;
  background-image: linear-gradient(180deg, rgba(1, 18, 22, .72), rgba(1, 12, 15, .96)), url('../assets/generated/ui/home-stadium-night.webp');
  background-size: cover;
  background-attachment: fixed;
}
body:has(.profile-page) .navbar { background: rgba(1, 18, 21, .92); border-bottom-color: rgba(49, 215, 166, .25); }
body:has(.profile-page) .profile-page { max-width: 1040px; padding-top: 34px; }
body:has(.profile-page) .profile-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
body:has(.profile-page) .profile-head h2 { color:#effff8; font-size:32px; letter-spacing:.02em; }
body:has(.profile-page) .profile-head p { color:rgba(222,246,236,.72); }
.profile-status { color:#75f2bd; font-size:12px; font-weight:800; border:1px solid rgba(75,230,175,.35); background:rgba(11,92,68,.36); padding:7px 11px; border-radius:999px; white-space:nowrap; }
.profile-hero { position:relative; display:flex; align-items:center; gap:22px; min-height:178px; padding:28px 32px; overflow:hidden; border:1px solid rgba(65,220,170,.42); border-radius:22px; background:linear-gradient(125deg, rgba(5,72,58,.96), rgba(2,35,35,.95)); box-shadow:0 18px 44px rgba(0,0,0,.28), inset 0 0 42px rgba(50,224,168,.07); }
.profile-hero::after { content:''; position:absolute; width:330px; height:330px; right:-70px; top:-110px; border-radius:50%; border:1px solid rgba(87,226,177,.24); box-shadow:0 0 0 18px rgba(87,226,177,.05), 0 0 0 38px rgba(87,226,177,.035); pointer-events:none; }
.profile-avatar { width:104px; height:104px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#f5fff9,#bcebd5); border:3px solid #ff9c35; box-shadow:0 8px 24px rgba(0,0,0,.28); overflow:hidden; z-index:1; }
.profile-avatar img { width:82%; height:82%; object-fit:contain; }
.profile-identity { z-index:1; }
.profile-kicker { color:#67e8b3; font-size:11px; letter-spacing:.15em; font-weight:800; }
.profile-identity h1 { margin:5px 0 2px; color:#fff; font-size:34px; }
.profile-identity p { margin:0; color:rgba(227,251,240,.74); font-size:14px; }
.profile-hero-badge { margin-left:auto; display:grid; gap:3px; justify-items:center; z-index:1; min-width:120px; padding:14px 16px; border:1px solid rgba(255,205,86,.35); border-radius:16px; background:rgba(79,61,15,.28); color:#ffe39a; }
.profile-hero-badge span { font-size:25px; }.profile-hero-badge b { font-size:14px; }.profile-hero-badge small { color:rgba(255,235,179,.7); font-size:11px; }
.profile-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.profile-stat { display:flex; align-items:center; gap:11px; padding:16px 17px; border:1px solid rgba(62,211,166,.28); border-radius:15px; background:linear-gradient(145deg,rgba(4,56,48,.9),rgba(3,30,31,.92)); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.profile-stat-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#7af0bc; background:rgba(45,194,147,.13); font-size:18px; }
.profile-stat strong { display:block; color:#fff; font:800 23px/1 var(--display); }.profile-stat small { display:block; margin-top:4px; color:rgba(222,246,236,.66); font-size:11px; }
body:has(.profile-page) .profile-card { max-width:none; padding:24px 26px; border-color:rgba(62,211,166,.3); background:linear-gradient(145deg,rgba(4,53,46,.94),rgba(2,28,30,.96)); color:#effff8; box-shadow:0 14px 34px rgba(0,0,0,.24); }
.profile-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }.profile-card-head h3 { margin:0 0 4px; color:#fff; font-size:21px; }.profile-card-head p { margin:0; color:rgba(222,246,236,.65); font-size:13px; }.profile-card-mark { color:#ffd36b; font-size:23px; }
.profile-fields { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 22px; }.profile-field { display:grid; grid-template-columns:1fr; gap:7px; color:#bfe3d2; font-size:13px; font-weight:700; }.profile-field .inp { margin:0; background:rgba(1,24,23,.78); border-color:rgba(74,211,165,.3); color:#effff8; }.profile-field .inp::placeholder { color:rgba(203,235,220,.4); }.profile-field .inp:focus { border-color:#4de0ab; background:rgba(2,35,31,.9); }
.profile-actions { display:flex; justify-content:flex-end; margin-top:20px; padding-top:18px; border-top:1px solid rgba(84,209,170,.16); }
@media (max-width: 720px) { .profile-hero { padding:23px 20px; }.profile-hero-badge { display:none; }.profile-stats { grid-template-columns:repeat(2,1fr); }.profile-fields { grid-template-columns:1fr; } }
@media (max-width: 430px) { body:has(.profile-page) .profile-head { align-items:flex-start; flex-direction:column; }.profile-hero { gap:14px; }.profile-avatar { width:78px; height:78px; }.profile-identity h1 { font-size:26px; }.profile-stats { gap:8px; }.profile-stat { padding:13px 11px; }.profile-stat strong { font-size:20px; } }
.auth-hint { color: var(--muted); font-size: 13px; text-align: center; margin-top: 14px; line-height: 1.6; }
.auth-error { background: #fff0ed; border: 1px solid #f1c1b8; color: #a53c2c; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.auth-help { display: block; margin: 12px auto 0; background: transparent; color: var(--grass-d); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 首页 ---------- */
.hero { display: flex; align-items: center; gap: 24px; color: #fff; border-radius: var(--radius-lg); padding: 38px 44px; box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
  background: linear-gradient(135deg, #2bb45f 0%, #14834a 55%, #0c5f30 100%); }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.08) 1.5px, transparent 0); background-size: 24px 24px; pointer-events: none; }
.hero-text { flex: 1; position: relative; }
.hero h1 { font-size: 36px; margin: 0 0 12px; line-height: 1.2; letter-spacing: .5px; }
.hero-sub { font-size: 16px; opacity: .94; line-height: 1.7; margin: 0 0 18px; max-width: 560px; }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tagchip { background: rgba(255,255,255,.18); padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-actions .season-v2-entry { border-color: rgba(255, 215, 92, .72); color: #ffe88b; background: rgba(83, 62, 10, .34); box-shadow: 0 4px 0 rgba(112, 79, 10, .6); }
.hero-actions .season-v2-entry:hover { border-color: #ffe88b; background: rgba(108, 79, 12, .5); color: #fff5c7; }
.hero-art { width: 200px; height: 200px; flex: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); position: relative; }
.next-step { display: flex; gap: 14px; align-items: center; background: #fff9df; border: 2px solid #f1cf57; border-radius: 16px; padding: 14px 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.next-step-no { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #553b00; font-weight: 900; }
.next-step > div:nth-child(2) { flex: 1; }
.next-step b { font-size: 15px; }
.next-step p { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.home-season { margin-top: 22px; padding: 24px; }
.home-season-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.home-season-head h2 { margin: 0 0 6px; }
.home-season-head p { margin: 0; color: var(--muted); }
.home-season-map { display: grid; gap: 16px; }
.home-unit { padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(15,95,62,.08), rgba(255,255,255,.72)); border: 1px solid rgba(15,95,62,.12); }
.home-unit-title { font-weight: 800; color: var(--grass-dd); margin-bottom: 10px; }
.home-levels { display: grid; grid-template-columns: repeat(10, minmax(38px, 1fr)); gap: 9px; }
.home-lv { min-height: 48px; border: 1px solid rgba(15,95,62,.18); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.home-lv:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,95,62,.14); }
.home-lv small { display: block; color: #e2a91b; font-size: 11px; letter-spacing: 0; }
.home-lv.done { background: #ecf8ef; border-color: #8ac99a; }
.home-lv.locked { color: #99a59d; background: #f4f6f4; }
.home-lv.paid-locked { border-color: #e1b54a; background: #fff8e5; }
.home-lv.progression-locked { border-color:#4b9680; background:#103a35; color:#a8d5c4; }
.home-lv-number { display:block; line-height:1; }
.home-lv-lock-note,.lv-lock-note { display:block; margin-top:4px; font-size:10px; font-weight:700; color:#8cb6a8; letter-spacing:0; }
.home-lv.paid-locked .home-lv-lock-note,.lv.paid-locked .lv-lock-note { color:#8a5b00; }

/* 首页参考图：代码战术板 + 赛季路线 */
body:has(.home-hero) { background-color:#031719; background-image:linear-gradient(180deg,rgba(1,17,22,.5),rgba(1,12,15,.92)),url('../assets/generated/ui/home-stadium-night.webp'); background-size:cover; background-attachment:fixed; color:#effff8; }
body:has(.home-hero) .container { max-width:1540px; padding-top:0; }
body:has(.home-hero) .navbar { background:rgba(1,18,21,.92); border-bottom-color:rgba(49,215,166,.25); }
body:has(.home-hero) .navlink.on { background:transparent; color:#39dfa5; box-shadow:inset 0 -3px #39dfa5; }
.home-hero { min-height:365px; margin:0 -24px; padding:54px max(40px,8vw) 42px; border-radius:0; background:linear-gradient(90deg,rgba(1,26,28,.82),rgba(1,34,31,.46)),url('../assets/generated/ui/home-stadium-night.webp') center/cover; box-shadow:inset 0 -1px rgba(57,214,170,.22); overflow:visible; }
.home-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 50%,rgba(6,35,32,.45)),radial-gradient(circle at 84% 50%,rgba(33,214,163,.18),transparent 22%); pointer-events:none; }
.home-hero .hero-text { max-width:720px; z-index:1; }.home-hero h1 { font-size:clamp(46px,5vw,76px); letter-spacing:.02em; font-weight:900; }.home-hero h1 span { color:#57e2b1; }.home-hero h1 em { color:#4ee0ae; font-style:normal; }.home-hero .hero-sub { font-size:18px; color:#e5fff4; margin:12px 0 3px; }.hero-route { display:flex; flex-wrap:wrap; gap:10px; color:#e9fff5; font-size:18px; font-weight:600; margin-bottom:18px; }.hero-route b { color:#45dca6; }.home-hero .tagchip { background:rgba(0,39,36,.72); border:1px solid rgba(74,219,172,.3); padding:7px 14px; }.home-hero .hero-art { width:440px; height:300px; align-self:flex-end; z-index:1; }.home-hero .hero-art img { object-fit:contain; filter:drop-shadow(0 18px 22px rgba(0,0,0,.35)); transform:scale(1.35) translateY(-10px); }.hero-orbit { position:absolute; width:360px; height:110px; right:26px; bottom:10px; border-radius:50%; border:2px solid rgba(63,222,176,.65); box-shadow:0 0 0 14px rgba(63,222,176,.07),0 0 30px rgba(63,222,176,.4); transform:perspective(350px) rotateX(62deg); }
.home-hero .hero-actions { position:relative; z-index:2; }.home-hero .hero-actions .btn.lg:first-child { min-width:235px; background:linear-gradient(90deg,#ff8a18,#ff6a0e); box-shadow:0 5px 0 #b74c0d,0 8px 22px rgba(255,116,17,.35); }.home-hero .hero-actions .btn.ghost { background:rgba(4,33,31,.72); color:#effff8; border:1px solid #38c99a; box-shadow:0 4px 0 #155b47; }
.home-season { margin:-2px 50px 0; padding:22px 24px 14px; border:1px solid rgba(55,213,165,.56); border-radius:20px; background:linear-gradient(150deg,rgba(2,45,39,.84),rgba(2,22,24,.92)); box-shadow:0 18px 50px rgba(0,0,0,.32),inset 0 0 30px rgba(42,193,149,.06); position:relative; z-index:3; }.home-season-head { margin-bottom:14px; }.home-season-head h2 { color:#effff8; font-size:24px; }.home-season-head p { color:#afd3c2; }.season-progress { width:220px; height:7px; margin-top:9px; background:#0b3e36; border-radius:99px; overflow:hidden; }.season-progress span { display:block; height:100%; background:linear-gradient(90deg,#2acb8e,#57efaf); border-radius:inherit; }.season-goal-badge { display:flex; flex-direction:column; gap:4px; padding:10px 14px; border:1px solid rgba(69,209,163,.35); border-radius:12px; background:rgba(5,57,47,.64); color:#eafff4; min-width:205px; }.season-goal-badge span { font-size:12px; color:#a8caba; }.home-unit { position:relative; padding:10px 38px 10px 16px; border:1px solid rgba(61,207,161,.4); border-radius:15px; background:linear-gradient(90deg,rgba(5,61,50,.55),rgba(2,37,35,.6)); }.home-unit-title { display:flex; align-items:center; gap:10px; min-width:0; margin:0 0 9px; color:#39dfa5; }.home-unit-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; min-width:0; }.home-unit-copy strong { display:block; color:#39dfa5; line-height:1.25; }.home-unit-title small { display:block; color:#d2ebdf; font-size:13px; font-weight:500; line-height:1.3; }.home-unit-emblem { box-sizing:border-box; flex:0 0 38px; width:38px; height:38px; aspect-ratio:1 / 1; border-radius:50%; display:grid; place-items:center; background:rgba(37,168,123,.5); border:2px solid #35cf99; color:#eafff5; font-size:20px; }.home-levels { grid-template-columns:repeat(10,minmax(48px,1fr)); gap:10px; }.home-lv { min-height:60px; color:#f2fff8; background:linear-gradient(145deg,rgba(7,49,43,.86),rgba(3,28,29,.92)); border:1px solid rgba(76,201,165,.38); box-shadow:none; }.home-lv small { color:#ffc32c; }.home-lv.done { background:linear-gradient(145deg,rgba(8,90,69,.9),rgba(4,53,48,.95)); border-color:#39d69e; }.home-lv.locked { color:#6c8179; background:rgba(3,27,29,.72); border-color:rgba(62,108,97,.26); }.home-lv.paid-locked { border-color:#d99b2b; background:rgba(63,48,19,.45); }.home-unit-next { position:absolute; right:8px; top:50%; transform:translateY(-50%); color:#5ee5b2; font-size:30px; background:transparent; }
.home-onboarding { position:relative; right:auto; bottom:auto; z-index:4; width:min(760px,100%); margin:16px auto 18px; padding:12px 16px; background:rgba(4,38,33,.96); border:1px solid rgba(62,213,163,.55); color:#effff7; box-shadow:0 10px 28px rgba(0,0,0,.24); }
.home-onboarding p { color:#c5dfd2; margin:4px 0 0; line-height:1.45; }
.home-onboarding .next-step-no { width:30px; height:30px; }
.home-onboarding .btn { margin-left:auto; white-space:nowrap; }
body:has(.home-hero) .home-season.card { display:block; color:#effff8; background:linear-gradient(150deg,rgba(2,45,39,.92),rgba(2,22,24,.96)); border-color:rgba(55,213,165,.56); }
body:has(.home-hero) .grid-3 { display:none; }
body:has(.home-hero) .home-season-map { gap:10px; }.home-unit { display:grid; grid-template-columns:250px minmax(0,1fr) 24px; align-items:center; min-height:76px; padding:8px 10px 8px 14px; }.home-unit-title { margin:0; }.home-unit-copy { max-width:180px; }.home-unit-title small { max-width:none; }.home-unit .home-levels { min-width:0; }.home-unit-next { position:static; transform:none; justify-self:center; }

/* 参考稿比例层：以 1672×941 桌面稿为基准，随视口等比收缩。 */
@media (min-width: 1181px) {
  /* 参考稿只允许向下等比缩放，不在超宽屏继续放大，避免 2K/4K 下比例失衡。 */
  :root { --ref-s: min(1px, 1vw / 16.72, 1vh / 9.41); }
  .navbar,.nav-inner { height:calc(78 * var(--ref-s)); }.nav-inner { max-width:none; padding:0 calc(38 * var(--ref-s)); gap:calc(26 * var(--ref-s)); }.brand { font-size:calc(25 * var(--ref-s)); }.brand-ball { width:calc(42 * var(--ref-s)); height:calc(42 * var(--ref-s)); }.navlink { font-size:calc(17 * var(--ref-s)); padding:calc(27 * var(--ref-s)) calc(22 * var(--ref-s)) calc(23 * var(--ref-s)); }.nav-user { gap:calc(10 * var(--ref-s)); }.help-trigger { height:calc(40 * var(--ref-s)); padding:0 calc(18 * var(--ref-s)); }.nav-bell { width:calc(44 * var(--ref-s)); height:calc(40 * var(--ref-s)); }.nav-user-menu summary { width:calc(176 * var(--ref-s)); height:calc(42 * var(--ref-s)); }.nav-avatar { width:calc(32 * var(--ref-s)); height:calc(32 * var(--ref-s)); }
  body:has(.home-hero) .container { max-width:none; padding:0 0 calc(28 * var(--ref-s)); }.home-hero { height:calc(364 * var(--ref-s)); min-height:0; margin:0; padding:calc(58 * var(--ref-s)) calc(314 * var(--ref-s)) calc(28 * var(--ref-s)); }.home-hero .hero-text { max-width:calc(715 * var(--ref-s)); }.home-hero h1 { font-size:calc(57 * var(--ref-s)); margin-bottom:calc(9 * var(--ref-s)); }.home-hero .hero-sub { font-size:calc(18 * var(--ref-s)); margin:0 0 calc(4 * var(--ref-s)); }.hero-route { font-size:calc(18 * var(--ref-s)); gap:calc(9 * var(--ref-s)); margin-bottom:calc(16 * var(--ref-s)); }.home-hero .hero-tags { margin-bottom:calc(20 * var(--ref-s)); gap:calc(10 * var(--ref-s)); }.home-hero .tagchip { font-size:calc(14 * var(--ref-s)); padding:calc(7 * var(--ref-s)) calc(15 * var(--ref-s)); }.home-hero .hero-actions { gap:calc(20 * var(--ref-s)); }.home-hero .hero-actions .btn.lg { height:calc(60 * var(--ref-s)); padding:0 calc(34 * var(--ref-s)); font-size:calc(18 * var(--ref-s)); }.home-hero .hero-art { position:absolute; right:calc(260 * var(--ref-s)); top:calc(70 * var(--ref-s)); width:calc(380 * var(--ref-s)); height:calc(280 * var(--ref-s)); }.hero-orbit { width:calc(360 * var(--ref-s)); height:calc(108 * var(--ref-s)); }
  .home-season { width:calc(1522 * var(--ref-s)); height:auto; min-height:calc(471 * var(--ref-s)); margin:calc(-1 * var(--ref-s)) auto 0; padding:calc(20 * var(--ref-s)) calc(24 * var(--ref-s)); border-radius:calc(20 * var(--ref-s)); overflow:visible; }.home-season-head { height:calc(72 * var(--ref-s)); margin-bottom:calc(10 * var(--ref-s)); }.home-season-head h2 { font-size:calc(24 * var(--ref-s)); }.home-season-head p { font-size:calc(14 * var(--ref-s)); }.season-progress { width:calc(220 * var(--ref-s)); height:calc(7 * var(--ref-s)); }.season-goal-badge { min-width:calc(260 * var(--ref-s)); padding:calc(10 * var(--ref-s)) calc(16 * var(--ref-s)); }.home-season-map { gap:calc(8 * var(--ref-s))!important; }.home-unit { grid-template-columns:calc(250 * var(--ref-s)) minmax(0,1fr) calc(24 * var(--ref-s)); min-height:calc(75 * var(--ref-s)); height:calc(75 * var(--ref-s)); padding:calc(7 * var(--ref-s)) calc(10 * var(--ref-s)); }.home-unit-emblem { flex-basis:calc(42 * var(--ref-s)); width:calc(42 * var(--ref-s)); height:calc(42 * var(--ref-s)); }.home-unit-copy { max-width:calc(180 * var(--ref-s)); gap:calc(3 * var(--ref-s)); }.home-unit-title { gap:calc(10 * var(--ref-s)); font-size:calc(16 * var(--ref-s)); }.home-unit-title small { font-size:calc(13 * var(--ref-s)); }.home-levels { gap:calc(10 * var(--ref-s)); }.home-lv { min-height:calc(60 * var(--ref-s)); height:calc(60 * var(--ref-s)); font-size:calc(17 * var(--ref-s)); }.home-lv small { font-size:calc(12 * var(--ref-s)); }.home-onboarding { position:relative; right:auto; bottom:auto; width:min(760px,100%); margin:calc(16 * var(--ref-s)) auto calc(18 * var(--ref-s)); }
  .home-unit.home-unit-long { height:calc(145 * var(--ref-s)); min-height:calc(145 * var(--ref-s)); }
  body:has(.cities-view) .container { padding:calc(28 * var(--ref-s)) calc(134 * var(--ref-s)) calc(28 * var(--ref-s)); }.cities-head { height:calc(95 * var(--ref-s)); margin:0; padding-left:calc(20 * var(--ref-s)); }.cities-head h2 { font-size:calc(32 * var(--ref-s)); }.cities-head p { font-size:calc(15 * var(--ref-s)); }.cities-layout { grid-template-columns:calc(1085 * var(--ref-s)) calc(300 * var(--ref-s)); gap:calc(30 * var(--ref-s)); }.cities-list { height:auto; min-height:0; overflow:visible; }.cities-promo { height:calc(710 * var(--ref-s)); min-height:0; overflow:hidden; }.prov-block { margin-bottom:calc(12 * var(--ref-s)); }.prov-head { height:calc(66 * var(--ref-s)); min-height:0; margin-bottom:calc(10 * var(--ref-s)); padding:0 calc(20 * var(--ref-s)); }.city-grid { gap:calc(12 * var(--ref-s)) calc(18 * var(--ref-s)); }.city { height:calc(106 * var(--ref-s)); min-height:0; padding:calc(15 * var(--ref-s)) calc(22 * var(--ref-s)); }.city .badge { width:calc(60 * var(--ref-s)); height:calc(60 * var(--ref-s)); margin-right:calc(18 * var(--ref-s)); }.cities-promo { position:relative; top:auto; }
  body:has(.tb-page) .tb-page { width:calc(1535 * var(--ref-s)); height:calc(850 * var(--ref-s)); padding:calc(10 * var(--ref-s)) 0; }.tb-page .lv-head { height:calc(154 * var(--ref-s)); min-height:0; padding:calc(18 * var(--ref-s)) calc(22 * var(--ref-s)); margin-bottom:calc(16 * var(--ref-s)); }.tb-page .lv-title { font-size:calc(25 * var(--ref-s)); }.tb-page .goal-pill { font-size:calc(13 * var(--ref-s)); padding:calc(5 * var(--ref-s)) calc(12 * var(--ref-s)); }.tb-page .tb-layout { height:calc(535 * var(--ref-s)); grid-template-columns:calc(420 * var(--ref-s)) calc(700 * var(--ref-s)) calc(380 * var(--ref-s)); gap:calc(16 * var(--ref-s)); }.tb-page .tb-left,.tb-page .tb-center,.tb-page .tb-right { min-height:0; height:calc(535 * var(--ref-s)); }.tb-page .board-wrap { min-height:0; height:calc(500 * var(--ref-s)); }.tb-page #board { max-height:calc(500 * var(--ref-s)); }.tb-page .coach-body { min-height:calc(440 * var(--ref-s)); }.tb-page .tb-bottom { height:calc(105 * var(--ref-s)); min-height:0; margin-top:calc(16 * var(--ref-s)); padding:calc(12 * var(--ref-s)) calc(18 * var(--ref-s)); }.tb-page .run-bar .btn { height:calc(48 * var(--ref-s)); min-height:0; }
}

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; border: 1px solid rgba(18,40,27,.04); transition: transform .12s, box-shadow .12s; }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.6; flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.pts-tag { color: var(--accent); font-weight: 800; font-size: 14px; font-family: var(--display); }
.pbar { height: 10px; background: #e9efe9; border-radius: 999px; overflow: hidden; margin: 6px 0 16px; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.pbar-fill { height: 100%; background: linear-gradient(90deg, var(--grass), var(--gold)); border-radius: 999px; transition: width .5s; }
.board-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.board-line:last-child { border-bottom: none; }
.board-line b { color: var(--accent); font-family: var(--display); }
.rank-no { color: var(--muted); font-weight: 800; font-size: 12px; font-family: var(--display); }

/* ---------- 通用页头 ---------- */
.page-head { margin-bottom: 22px; }
.page-head h2 { margin: 0 0 4px; font-size: 27px; }
.page-head p { margin: 0; color: var(--muted); font-size: 14px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.city-chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; box-shadow: var(--shadow-sm); padding: 9px 15px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.city-chip.sm { padding: 5px 11px; font-size: 12px; box-shadow: none; background: #eef4ee; }

/* ---------- 城市队 ---------- */
.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.city { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 14px; text-align: center; border: 3px solid transparent; transition: .14s; cursor: pointer; }
.city:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.city.sel { border-color: var(--accent); }
.city .badge { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 26px; font-family: var(--display);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.15); }
.city .name { font-weight: 800; font-size: 16px; }
.city .style { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.city .pts { color: var(--accent); font-weight: 800; font-size: 13px; margin-top: 8px; font-family: var(--display); }
.city-copy { min-width:0; }.city-arrow { margin-left:auto; color:rgba(218,242,232,.55); font-size:30px; line-height:1; }

/* ---------- 东北超视觉主题覆盖：雪夜球场 + 深绿玻璃 ---------- */
body:has(.auth-page), body:has(.cities-view), body:has(.tb-page) { background: #031717; color: #eaf8f0; background-image: linear-gradient(180deg, rgba(1,20,22,.28), rgba(1,12,16,.82)), url('../assets/generated/ui/login-stadium-night.webp'); background-size: cover; background-attachment: fixed; background-position: center; }
.auth-page { min-height: 100vh; padding: 0 3.2vw 34px; display: block; position: relative; overflow: hidden; background-color: #021714; background-image: linear-gradient(90deg, rgba(1,18,18,.84), rgba(1,13,19,.94)), url('../assets/generated/ui/login-stadium-night.webp'); background-position: center; background-size: cover; background-attachment: fixed; background-blend-mode: multiply, normal; }
.auth-page::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse at 12% 75%, rgba(20,166,125,.12), transparent 42%), linear-gradient(135deg, rgba(2,31,29,.38), transparent 38%); }
.navbar { background: rgba(1, 24, 22, .88); border-bottom: 1px solid rgba(69,226,174,.2); box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.nav-inner { max-width: 1540px; height: 76px; }
.brand { color: #f3fff8; font-size: 23px; text-shadow: 0 2px 18px rgba(42,224,154,.25); }
.brand-ball { width: 42px; height: 42px; }
.nav-links { justify-content: center; gap: 12px; }
.navlink { color: rgba(235,250,242,.72); border-radius: 0; padding: 27px 18px 23px; position: relative; }
.navlink:hover { background: rgba(48,183,138,.12); color: #fff; }
.navlink.on { background: transparent; color: var(--neon-green); box-shadow: none; }
.navlink.on::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--neon-green); box-shadow: 0 0 14px rgba(53,230,161,.75); }
.nav-nick { color: #ecfff4; }
.help-trigger { background: rgba(7,45,40,.9); color: #dfffee; border: 1px solid rgba(53,230,161,.25); }
.container { max-width: 1540px; }

/* 登录页 */
.auth-page { min-height: 100vh; padding: 0 4vw 34px; display: block; background: linear-gradient(90deg, rgba(1,20,20,.18), rgba(1,15,22,.78)), url('../assets/generated/ui/login-stadium-night.webp') center/cover fixed; }
.auth-topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; max-width: 1580px; width: 100%; margin: 0 auto; position: relative; z-index: 1; }
.auth-brand { display: flex; gap: 12px; align-items: center; color: #fff; }
.auth-brand img { width: 52px; height: 52px; object-fit: contain; }
.auth-brand b, .auth-brand small { display: block; }.auth-brand b { font-size: 22px; }.auth-brand small { font-size: 12px; color: rgba(228,247,239,.7); margin-top: 4px; }
.auth-toplinks { display: flex; gap: 16px; }.auth-toplinks button { background: transparent; color: rgba(244,255,250,.84); padding: 9px 14px; border-radius: 22px; font-size: 14px; }.auth-toplinks button:last-child { border: 1px solid rgba(197,242,222,.25); }
.auth-shell { max-width: 1370px; width: 100%; min-height: calc(100vh - 120px); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 500px; gap: 60px; align-items: center; position: relative; z-index: 1; }
.auth-hero-copy { padding: 20px 0 50px; }.auth-kicker { color: var(--neon-green); font: 700 12px/1.4 ui-monospace, monospace; letter-spacing: .18em; margin-bottom: 24px; }.auth-hero-copy h1 { font-size: clamp(56px, 6vw, 94px); line-height: .98; margin: 0; color: #f5fffb; letter-spacing: .05em; text-shadow: 0 8px 32px rgba(0,0,0,.4); }.auth-hero-copy h1 em { color: var(--neon-green); font-style: normal; }.auth-hero-copy p { color: #e7fff3; font-size: 21px; letter-spacing: .14em; margin: 28px 0 34px; }.auth-features { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; max-width: 680px; }.auth-feature { min-height: 105px; padding: 18px 12px; border: 1px solid rgba(74,223,176,.17); border-radius: 13px; background: rgba(1,24,22,.52); backdrop-filter: blur(8px); text-align: center; }.auth-feature-icon { display: block; color: #d8fff0; font-size: 27px; margin-bottom: 9px; }.auth-feature-copy b, .auth-feature-copy small { display: block; }.auth-feature-copy b { font-size: 14px; }.auth-feature-copy small { color: rgba(218,243,233,.6); font-size: 11px; margin-top: 5px; }
.auth-card { max-width: none; width: auto; padding: 28px 38px 30px; border: 1px solid var(--panel-border); border-radius: 20px; background: linear-gradient(145deg, rgba(4,34,28,.92), rgba(2,22,21,.83)); box-shadow: 0 25px 80px rgba(0,0,0,.45), inset 0 0 40px rgba(26,160,111,.06); backdrop-filter: blur(16px); color: #effff6; }.auth-mascot { width: 118px; height: 118px; margin: -2px auto 6px; }.auth-mascot img { width: 100%; height: 100%; object-fit: contain; }.auth-card h2 { text-align: center; margin: 4px 0 3px; font-size: 28px; }.auth-card-sub { text-align: center; color: rgba(226,250,238,.62); font-size: 13px; margin: 0 0 20px; }.auth-form .auth-tabs { background: rgba(1,18,16,.65); border: 1px solid rgba(75,213,169,.1); }.auth-tabs button { color: rgba(218,244,233,.55); }.auth-tabs button.on { background: rgba(12,67,52,.9); color: var(--neon-green); box-shadow: inset 0 0 0 1px rgba(50,215,160,.35); }.auth-field { display: block; margin-bottom: 11px; }.auth-field>span { display: block; color: rgba(217,243,232,.72); font-size: 12px; margin-bottom: 5px; }.auth-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.auth-inline { display: flex; gap: 7px; }.auth-inline .inp { width: 50%; }.auth-options { display:flex; justify-content:space-between; color: rgba(214,240,229,.62); font-size: 12px; margin: 1px 0 15px; }.auth-options button { background: transparent; color: rgba(220,244,233,.65); }.auth-card .inp { background: rgba(0,17,15,.58); border: 1px solid rgba(92,210,174,.18); color: #effff6; margin-bottom: 0; }.auth-card .inp::placeholder { color: rgba(202,231,218,.4); }.auth-card .inp:focus { border-color: var(--neon-green); box-shadow: 0 0 0 3px rgba(53,230,161,.1); }.auth-submit { width: 100%; margin-top: 5px; background: linear-gradient(90deg, #ff7e0b, #ff9e1d); box-shadow: 0 5px 0 #c75d00, 0 9px 22px rgba(255,132,22,.26); border-radius: 10px; }.auth-hint { color: rgba(213,240,227,.56); }.auth-help { color: var(--neon-green); }

/* 城市选择页 */
.cities-view { padding-bottom: 30px; }.cities-head { margin: 24px 0 20px 2px; }.cities-head h2 { color: #f1fff8; font-size: 34px; }.cities-head p { color: rgba(224,246,237,.62); }.cities-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; }.cities-list { min-width: 0; }.cities-promo { min-height: 690px; border: 1px solid rgba(53,210,164,.18); border-radius: 18px; padding: 34px 18px 20px; background: linear-gradient(180deg, rgba(2,29,29,.12), rgba(2,19,21,.82)), url('../assets/generated/ui/home-stadium-night.webp') center/cover; text-align: center; position: sticky; top: 96px; overflow: hidden; }.cities-promo::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% 15%, rgba(80,237,188,.14), transparent 42%); pointer-events:none; }.promo-title { position:relative; z-index:1; font-size: 39px; line-height: 1.12; font-weight: 900; color:#f5fffb; text-shadow: 0 3px 15px #000; }.promo-title em { color: var(--neon-green); font-style: normal; }.cities-promo p { position:relative; z-index:1; color: rgba(230,252,242,.75); font-size: 13px; }.cities-promo img { position:relative; z-index:1; width: 100%; max-height: 400px; object-fit: contain; margin-top: 22px; filter: drop-shadow(0 22px 24px rgba(0,0,0,.45)); }.promo-mark { position: absolute; z-index:1; bottom: 18px; left:0; right:0; color: rgba(191,239,219,.44); font: 10px ui-monospace, monospace; letter-spacing: .18em; }.prov-head { min-height: 68px; padding: 12px 20px; background: linear-gradient(100deg, color-mix(in srgb, var(--prov) 32%, #092c2b), rgba(8,41,39,.72)); border: 1px solid color-mix(in srgb, var(--prov) 70%, transparent); border-left: 5px solid var(--prov); }.prov-name { color: #effff7; }.prov-sub { color: rgba(218,242,231,.62); }.city { background: rgba(4,35,31,.82); border: 1px solid rgba(81,203,167,.23); color: #effff7; box-shadow: 0 12px 30px rgba(0,0,0,.22); }.city:hover { border-color: var(--neon-green); box-shadow: 0 0 0 1px rgba(53,230,161,.3), 0 14px 30px rgba(0,0,0,.32); }.city.sel { border-color: var(--neon-green); }.city .style { color: rgba(217,242,231,.55); }.city .pts { color: var(--orange); }

/* 关卡工作台 */
.tb-page { padding-top: 20px; }.lv-head, .tb-left, .tb-right, .tb-bottom { background: linear-gradient(145deg, rgba(3,38,31,.89), rgba(2,22,22,.84)); border: 1px solid rgba(52,199,153,.34); box-shadow: 0 16px 42px rgba(0,0,0,.28), inset 0 0 26px rgba(41,180,135,.04); color: #eafff4; backdrop-filter: blur(12px); }.lv-head { padding: 20px 26px; }.lv-head .story, .goal-pill, .tb-help, .tc-group-t, .coach-sub, .tl-label { color: rgba(215,241,229,.64); }.goal-pill { background: rgba(9,85,63,.45); color: #c4ffe5; border: 1px solid rgba(71,220,168,.2); }.goal-pill.hint { background: rgba(121,78,10,.35); color: #ffd78b; }.tb-layout { grid-template-columns: minmax(320px, 430px) minmax(420px, 1fr) minmax(280px, 330px); gap: 16px; }.tb-tabs { background: rgba(1,22,19,.55); border-bottom: 1px solid rgba(62,208,162,.18); }.tb-tab { background: transparent; color: rgba(218,243,232,.62); }.tb-tab.on { background: rgba(17,106,75,.82); color: #d8ffec; box-shadow: inset 0 -3px var(--neon-green); }.tb-cardhost, .tb-pane { background: transparent; }.tb-code, .tb-cpp, .code-body { background: rgba(1,17,17,.82); color: #d9ffed; }.tb-help-row code, .code-cheats code { background: rgba(11,75,57,.65); color: #8df6c5; }.tb-center { min-width: 0; }.variant-preview { background: rgba(2,28,27,.76); border-color: rgba(73,211,170,.25); color: #eafff4; }.pitch-wrap { padding: 10px; background: rgba(1,23,22,.74); border: 1px solid rgba(55,210,165,.48); box-shadow: 0 0 0 1px rgba(55,210,165,.13), 0 16px 36px rgba(0,0,0,.32); }.tb-right { padding: 18px; }.coach-title { color: #f2fff8; }.coach-k, .coach-dim { color: rgba(215,241,229,.54); }.coach-alert { background: rgba(111,73,12,.28); border-color: rgba(238,181,81,.5); color: #ffe1a0; }.coach-result.win { background: rgba(25,129,76,.26); color: #a8ffd0; }.coach-result.lose { background: rgba(125,47,42,.3); color: #ffc4bb; }.tb-bottom { margin-top: 16px; }.tl-strip { min-height: 52px; }.tl-empty { color: rgba(215,241,229,.5); }.btn.gray { background: rgba(83,110,122,.6); color: #e6f4f5; box-shadow: 0 3px 0 rgba(42,63,70,.8); }.btn.amber { background: linear-gradient(90deg, #f0a900, #ffca2e); }.tb-bottom .run-bar .btn.green { background: linear-gradient(90deg, #14ad6e, #22d589); box-shadow: 0 4px 0 #08754c, 0 9px 18px rgba(26,213,137,.25); }

/* ---------- 赛季地图 ---------- */
.stage-block { margin-bottom: 28px; }
.group-title { font-family: var(--display); font-weight: 600; margin: 0 0 12px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.group-title .tag { background: var(--gold); color: #5a3d00; font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-family: inherit; box-shadow: 0 2px 0 var(--gold-d); }
.levels { display: grid; grid-template-columns: repeat(10, 1fr); gap: 13px; }
.lv { aspect-ratio: 1; border-radius: 15px; background: var(--card); box-shadow: 0 4px 0 #dde6dd, var(--shadow-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.lv:hover { transform: translateY(-3px); box-shadow: 0 7px 0 #dde6dd, var(--shadow); }
.lv-no { font-weight: 700; font-size: 20px; font-family: var(--display); }
.lv.locked { background: #e6ebe6; color: #aeb8af; box-shadow: 0 4px 0 #d3dad3; cursor: default; }
.lv.locked:hover { transform: none; box-shadow: 0 4px 0 #d3dad3; }
.lv.done { background: linear-gradient(160deg, #34c061, #16923f); color: #fff; box-shadow: 0 4px 0 #0c6e2c, 0 6px 14px rgba(22,146,63,.3); }
.lv.done:hover { box-shadow: 0 7px 0 #0c6e2c, 0 9px 18px rgba(22,146,63,.34); }
.lv .stars { font-size: 11px; position: absolute; bottom: 7px; color: var(--gold); letter-spacing: 1px; }
.lv.done .stars { color: #fff0ad; }

/* ---------- 排行榜 ---------- */
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-row { display: flex; align-items: center; gap: 16px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 15px 18px; transition: transform .1s; }
.rank-row:hover { transform: translateX(3px); }
.rank-row.me { border: 2px solid var(--accent); }
.rank-medal { width: 42px; text-align: center; font-size: 24px; font-weight: 800; color: var(--muted); font-family: var(--display); }
.rank-badge { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--display); box-shadow: inset 0 -3px 6px rgba(0,0,0,.18); }
.rank-name { flex: 1; font-weight: 800; font-size: 16px; }
.rank-style { font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; }
.me-tag { background: var(--accent); color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.rank-pts { font-weight: 800; color: var(--accent); font-size: 20px; font-family: var(--display); }

/* ---------- 关卡页 ---------- */
.level-container { padding-top: 18px; max-width: min(1640px, 97vw); }
.lv-head { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 18px; }
.lv-head-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.lv-title { font-family: var(--display); font-weight: 700; font-size: 20px; flex: 1; }
.lv-head .story { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.lv-head .goals { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.goal-pill { font-size: 13px; padding: 5px 12px; border-radius: 999px; background: #eaf4ea; color: #2c6b3e; font-weight: 600; }
.goal-pill.hint { background: #fff3e3; color: #9a5b00; }
.goal-pill.warn { background: #fdece8; color: #c0392b; border: 1px solid #f3c4bb; }

.level-cols { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(440px, 640px); gap: 18px; align-items: start; }
.lv-left { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; min-height: 560px; }
.lv-right { min-width: 0; }
.lv-extra { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; margin-top: 18px; }

.mode-tabs { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.mode-tabs button { flex: 1; padding: 10px; border-radius: 11px; background: #eef2ee; font-weight: 700; color: var(--muted); font-size: 14px; transition: .12s; }
.mode-tabs button.on { background: var(--grass); color: #fff; box-shadow: 0 3px 0 var(--grass-dd); }
.mode-tabs button:disabled { opacity: .5; }

.work { flex: 1; display: flex; flex-direction: column; min-height: 420px; }
#blocklyArea { flex: 1; min-height: 420px; position: relative; }
#blocklyDiv { position: absolute; inset: 0; }
.py-area { flex: 1; display: flex; flex-direction: column; min-height: 420px; padding: 12px; }
.py-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.py-toolbar button { font-size: 12px; background: #eef6ef; color: #2c6b3e; padding: 6px 11px; border-radius: 8px; font-family: ui-monospace, monospace; font-weight: 600; }
.py-toolbar button:hover { background: #dcebdd; }
#pyCode { flex: 1; width: 100%; resize: none; border: none; border-radius: 12px; padding: 15px; font-family: ui-monospace, "Cascadia Code", monospace; font-size: 14px; line-height: 1.75; background: #122821; color: #d7f5e3; outline: none; }
.py-help { font-size: 12px; color: var(--muted); margin-top: 8px; }

.run-bar { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.run-bar .btn { flex: 1; }

.pitch-wrap { background: linear-gradient(160deg, #0e4a2a, #07351d); padding: 12px; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; justify-content: center; }
#pitch { display: block; border-radius: 12px; max-width: 100%; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.pitch-hint { text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; }

/* 战术板 */
.board-wrap { display: flex; justify-content: center; }
#board { display: block; max-width: 100%; box-shadow: var(--shadow-lg); border-radius: 14px; }
.mini-link { color: var(--muted); font-size: 13px; font-weight: 600; }
.mini-link:hover { color: var(--accent); }

/* 命令参考 / 答案 侧栏 */
.side-panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.side-title { font-family: var(--display); font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.cmd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 20px; }
.cmd-sub { grid-column: 1 / -1; font-size: 12px; color: var(--muted); font-weight: 800; margin: 6px 0 0; }
.cmd-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cmd-row code { background: #122821; color: #7fe3a4; padding: 3px 9px; border-radius: 7px; font-family: ui-monospace, monospace; font-size: 12.5px; white-space: nowrap; }
.cmd-zh { font-weight: 700; }
.cmd-desc { color: var(--muted); }
.answer-note { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.answer-steps { background: #eef7ef; border-radius: 10px; padding: 11px 13px; font-weight: 700; color: #2c6b3e; line-height: 1.9; }
.answer-code { background: #122821; color: #d7f5e3; border-radius: 10px; padding: 13px 15px; font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.6; margin: 10px 0; white-space: pre-wrap; overflow: auto; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); background: rgba(20,36,27,.95); color: #fff; padding: 13px 24px; border-radius: 999px; font-size: 14px; z-index: 60; max-width: 86%; text-align: center; box-shadow: var(--shadow-lg); }

/* ---------- 战报弹层 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(8,20,12,.6); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 80; padding: 18px; animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.report { background: #fff; color: #173e2d; border-radius: var(--radius-lg); width: 100%; max-width: 408px; overflow: hidden; box-shadow: var(--shadow-lg); animation: pop .26s cubic-bezier(.2,1.2,.4,1); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.report .rhead { background: linear-gradient(150deg, #2bb45f, #0c5f30); color: #fff; padding: 22px; text-align: center; position: relative; overflow: hidden; }
.report .rhead::before { content: ''; position: absolute; inset: -40% -10% auto; height: 160%; background: radial-gradient(circle at 50% 0, rgba(255,255,255,.25), transparent 60%); }
.report .rhead.lost { background: linear-gradient(150deg, #c05a4d, #883a30); }
.report .rhead div:first-child { font-family: var(--display); font-size: 18px; position: relative; }
.report .rhead .stars-big { font-size: 38px; letter-spacing: 6px; margin-top: 8px; position: relative; filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
.report .rbody { padding: 18px 22px; color: #173e2d; }
.report .line { display: flex; justify-content: space-between; align-items:center; gap:16px; padding: 8px 0; border-bottom: 1px dashed #d7e4dc; font-size: 14px; color:#315b47; }
.report .line span { color:#315b47; font-weight:650; }
.report .line b { color: #ff5c27; font-family: var(--display); font-weight:800; white-space:nowrap; }
.report .title-badge { background: var(--gold); color: #5a3d00; display: inline-block; padding: 6px 16px; border-radius: 999px; font-weight: 800; margin: 12px 0; box-shadow: 0 3px 0 var(--gold-d); }
.report .coach { background: #eef7ef; border:1px solid #dcecdf; border-radius: 12px; padding: 13px 15px; font-size: 13px; color: #245438; line-height: 1.7; margin-top: 8px; }
.report .center { text-align: center; }
.report .ractions { display: flex; gap: 10px; padding: 4px 22px 22px; }
.report .ractions .btn { flex: 1; }

/* Theme120 首页关卡快速选择器 */
.level-picker-mask { z-index: 120; place-items: center; }
.level-picker-modal { width: min(920px, 96vw); max-height: min(82vh, 760px); display:flex; flex-direction:column; overflow:hidden; background: linear-gradient(155deg,#f8fffb,#edf8f2); color:#173e2d; border:1px solid rgba(49,151,111,.28); border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.34); }
.level-picker-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 22px 16px; background:linear-gradient(135deg,#0c5f3a,#0a3d2e); color:#effff7; }
.level-picker-header h2 { margin:0; font-size:24px; line-height:1.2; }
.level-picker-subtitle { margin:6px 0 0; color:rgba(229,255,242,.75); font-size:13px; }
.level-picker-close { width:34px; height:34px; flex:0 0 34px; border:1px solid rgba(255,255,255,.35); border-radius:10px; background:rgba(0,0,0,.16); color:#fff; font-size:25px; line-height:1; cursor:pointer; }
.level-picker-close:hover,.level-picker-close:focus-visible { background:rgba(255,255,255,.18); outline:2px solid #8ff0c8; outline-offset:2px; }
.level-picker-list { overflow:auto; padding:16px 18px 20px; }
.level-picker-group + .level-picker-group { margin-top:18px; }
.level-picker-group-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 9px; color:#1f6047; }
.level-picker-group-head strong { font-size:15px; }
.level-picker-group-head span { color:#668274; font-size:12px; }
.level-picker-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.level-picker-item { min-height:66px; padding:9px 9px 8px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; border:1px solid #cfe3d8; border-radius:11px; background:#fff; color:#244e3b; text-align:left; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease; }
.level-picker-item:hover,.level-picker-item:focus-visible { transform:translateY(-2px); border-color:#36b67f; box-shadow:0 7px 16px rgba(22,111,76,.15); outline:none; }
.level-picker-item.current { border-color:#e4a927; background:#fff8df; box-shadow:inset 0 0 0 2px rgba(228,169,39,.2); }
.level-picker-item.done { background:#effcf4; border-color:#90d5ac; }
.level-picker-item.locked { opacity:.52; cursor:not-allowed; background:#f1f4f2; }
.level-picker-number { color:#16865b; font-size:11px; font-weight:900; letter-spacing:.08em; }
.level-picker-name { width:100%; overflow:hidden; color:#1d4534; font-size:12px; font-weight:750; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.level-picker-status { color:#718a7c; font-size:11px; }
.level-picker-item.current .level-picker-status { color:#9a6b00; font-weight:800; }
@media (max-width:700px) { .level-picker-modal { max-height:88vh; border-radius:16px; } .level-picker-header { padding:17px 16px 14px; } .level-picker-list { padding:14px 12px 18px; } .level-picker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .level-picker-item { min-height:62px; padding:8px 7px; } }
@media (max-width:430px) { .level-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.empty { color: var(--muted); text-align: center; padding: 40px 16px; }

/* ============ 战术工作台（三栏） ============ */
.tb-page { max-width: min(1240px, 96vw); margin: 0 auto; padding-top: 18px; }
.tb-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(320px, 440px) minmax(240px, 300px); gap: 16px; align-items: start; justify-content: center; }
.lv-head-actions { margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.lv-head-actions .btn { min-height:40px; padding:8px 14px; white-space:nowrap; }
.lv-head-actions .step-info { min-width:72px; padding:5px 8px; border-radius:8px; background:rgba(2,27,25,.72); border:1px solid rgba(72,194,157,.22); }
.lv-head-actions .step-info:empty { display:none; }
.lv-head-lower { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.lv-head-info { min-width:0; flex:1 1 auto; }
.lv-head-lower .lv-head-actions { flex:0 0 auto; }
.lv-head-top .lv-title { flex: 0 1 auto; }
.lv-head-top { flex-wrap:wrap; }
.lv-head-top .level-budget { flex:0 0 auto; margin-left:auto; white-space:nowrap; }
.lv-title-tools { display:flex; align-items:center; gap:7px; margin-left:0; flex:0 0 auto; }
.lv-title-tools:empty { display:none; }
.lv-title-tools .btn { min-height:34px; padding:6px 11px; white-space:nowrap; }
.lv-head .goal-primary { color:#145f42; border-color:rgba(88,227,177,.38); }

/* 左：编程区 */
.tb-left { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-height: 560px; }
.tb-tabs { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
.tb-tab { flex: 1; padding: 9px 6px; border-radius: 10px; background: #eef2ee; font-weight: 700; color: var(--muted); font-size: 13.5px; transition: .12s; }
.tb-tab.on { background: var(--grass); color: #fff; box-shadow: 0 3px 0 var(--grass-dd); }
.tb-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tb-pane { flex: 1; display: flex; flex-direction: column; padding: 12px; min-height: 0; }
.tb-code { flex: 1; width: 100%; resize: none; border: none; border-radius: 12px; padding: 14px; font-family: ui-monospace, "Cascadia Code", monospace; font-size: 14px; line-height: 1.7; background: #122821; color: #d7f5e3; outline: none; min-height: 260px; }
.tb-help { font-size: 12px; color: var(--muted); margin-top: 10px; }
.tb-help-t { font-weight: 800; margin-bottom: 4px; }
.tb-help-row { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.tb-help-row code { background: #122821; color: #7fe3a4; padding: 2px 7px; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 12px; }
.tb-readonly { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.tb-cpp { flex: 1; width: 100%; margin: 0; border: 0; resize: none; background: #101b2d; color: #e8f1ff; caret-color: #ffd166; border-radius: 0 0 12px 12px; padding: 14px; font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", monospace; font-size: 13px; line-height: 1.65; overflow: auto; white-space: pre; min-height: 260px; outline: none; tab-size: 4; }
.tb-cpp:focus { box-shadow: inset 0 0 0 2px rgba(91,156,255,.55); }
.tb-cpp::selection { background: rgba(91,156,255,.35); }

/* 战术卡编辑器 */
.tb-cardhost { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 12px; }
.tc-palette { display: flex; flex-direction: column; gap: 9px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
.tc-group-t { font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 5px; letter-spacing: .04em; }
.tc-pick { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.tc-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-card { padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: 13px; box-shadow: 0 2px 0 rgba(0,0,0,.12); transition: .1s; }
.tc-card:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.12); }
/* 卡片配色（动作绿 / 传球蓝 / 射门橙 / 等待灰 / 如果紫 / 重复黄 / 变量灰白） */
.tc-move, .tc-pass, .tc-shoot, .tc-wait, .tc-if { color: #fff; }
.tc-move { background: #2bb45f; } .tc-pass { background: #2f6fe0; } .tc-shoot { background: #ff6a2b; }
.tc-wait { background: #7d8a99; } .tc-if { background: #8a4fd0; }
.tc-for { background: #f0b400; color: #3a2c00; }
.tc-var { background: #e7ecf2; color: #3a4452; box-shadow: inset 0 0 0 1.5px #c7d0db; }

.tc-plan-t { font-weight: 800; font-size: 13px; margin-bottom: 8px; color: var(--ink-soft); }
.tc-list { display: flex; flex-direction: column; gap: 5px; }
.tc-empty { color: var(--muted); font-size: 13px; padding: 20px 8px; text-align: center; border: 1.5px dashed var(--line); border-radius: 12px; }
.tc-row { display: flex; align-items: center; gap: 8px; background: #f6f8f6; border-radius: 10px; padding: 5px 8px; border: 1.5px solid transparent; cursor: pointer; }
.tc-row.sel { border-color: var(--grass); background: #eef9f0; }
.tc-chip { font-weight: 700; font-size: 13px; padding: 4px 11px; border-radius: 8px; flex: 1; }
.tc-ops { display: flex; gap: 3px; }
.tc-ops button { width: 24px; height: 24px; border-radius: 7px; background: #e7ecf2; color: #5a6573; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.tc-ops button:hover { background: #d7dde5; }
.tc-ops button.del:hover { background: #ffd9d3; color: #b83a2a; }
.tc-subhead { font-size: 12px; color: var(--muted); padding: 4px 8px; border-left: 2px dashed #c7d0db; margin: 2px 0; cursor: pointer; border-radius: 0 8px 8px 0; }
.tc-subhead.sel { color: var(--grass); border-left-color: var(--grass); background: #eef9f0; }
.tc-elserow { font-size: 12px; font-weight: 800; color: #8a4fd0; padding: 2px 8px; }
.tc-param { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); padding: 2px 0; flex-wrap: wrap; }
.tc-inline-sel, .tc-inline-num, .tc-inline-text { border: 1.5px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 12.5px; font-family: inherit; background: #fff; }
.tc-inline-num { width: 64px; } .tc-inline-text { width: 84px; }

/* 中：足球战术场 */
.tb-center { min-width: 0; }
.variant-preview { margin-bottom: 10px; padding: 10px 12px; border: 1px solid #d9e5db; border-radius: 13px; background: rgba(255,255,255,.94); box-shadow: 0 5px 18px rgba(28,72,41,.08); }
.variant-preview:empty { display: none; }
.variant-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--ink-soft); }
.variant-preview-head strong { font-size: 13px; color: var(--ink); }
.variant-preview-head span { font-size: 11.5px; color: var(--muted); }
.variant-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.variant-tab { flex: 1 1 120px; min-height: 38px; padding: 7px 9px; border: 1.5px solid #cad7cd; border-radius: 10px; background: #f7faf7; color: #536259; font-size: 12px; font-weight: 750; line-height: 1.25; transition: .12s ease; }
.variant-tab:hover { border-color: var(--grass); background: #eef8f0; }
.variant-tab:focus-visible { outline: 3px solid rgba(31,155,78,.25); outline-offset: 2px; }
.variant-tab.on { border-color: var(--grass); background: #dff3e4; color: #176a35; box-shadow: inset 0 0 0 1px rgba(31,155,78,.12); }
.variant-tab:disabled { cursor: not-allowed; opacity: .55; }

/* 右：教练面板 */
.tb-right { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.coach-title { font-family: var(--display); font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.coach-sub { font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: .04em; margin: 13px 0 6px; }
.coach-row { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 13px; }
.coach-row.wrap { flex-wrap: wrap; }
.coach-k { color: var(--muted); min-width: 62px; flex-shrink: 0; }
.coach-v { flex: 1; min-width: 0; }
.coach-strong { font-weight: 800; } .coach-strong.ok { color: #1f9b4e; } .coach-strong.bad { color: #c0392b; }
.coach-dim { color: #9aa6b0; }
.coach-alert { margin: 7px 0 9px; padding: 8px 9px; border: 1px solid #f3c46b; border-radius: 10px; background: #fff8df; color: #74510a; font-size: 12px; line-height: 1.55; }
.coach-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.coach-chip { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.coach-chip.ok { background: #e6f7ec; color: #1f9b4e; }
.coach-chip.bad { background: #fdece8; color: #c0392b; }
.coach-var { background: #fff7e0; color: #7a5a00; padding: 2px 8px; border-radius: 6px; font-weight: 700; }
.coach-result { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.coach-result.win { background: #e6f7ec; color: #1f8b4a; }
.coach-result.lose { background: #fdece8; color: #b8412e; }

/* 底：战术时间线 + 运行栏 */
.tb-bottom { display: flex; gap: 14px; align-items: center; margin-top: 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; }
.tl-wrap { flex: 1; min-width: 0; }
.tl-label { font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.tl-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tl-empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }
.tl-chip { display: flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: #fff; opacity: .92; transition: .12s; }
.tl-no { background: rgba(255,255,255,.32); border-radius: 5px; padding: 0 5px; font-size: 11px; }
.tl-move { background: #2bb45f; } .tl-pass { background: #2f6fe0; } .tl-shoot { background: #ff6a2b; }
.tl-wait { background: #7d8a99; } .tl-if { background: #8a4fd0; }
.tl-for { background: #f0b400; color: #3a2c00; } .tl-var { background: #9aa6b0; }
.tl-chip.active { outline: 3px solid var(--gold); outline-offset: 1px; transform: translateY(-2px); opacity: 1; box-shadow: 0 5px 12px rgba(0,0,0,.2); }
.tb-bottom .run-bar { border-top: 0; padding: 0; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.tb-bottom .run-bar .btn { flex: 0 0 auto; }
.btn.amber { background: #f3b418; color: #5a3d00; box-shadow: 0 3px 0 #c98f00; }
.btn.amber:hover { filter: brightness(1.03); }
.btn.amber:disabled { opacity: .55; }
.step-info { font-size: 12.5px; font-weight: 800; color: var(--muted); align-self: center; min-width: 56px; text-align: center; }

/* 战术卡：拖拽手柄 + 拖拽态 */
.tc-row { touch-action: pan-y; cursor: grab; }
.tc-grip { color: #b6bfc9; font-size: 13px; cursor: grab; flex: 0 0 auto; letter-spacing: -2px; }
.tc-row.tc-dragging { opacity: .6; cursor: grabbing; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.tc-row.tc-drop-before { box-shadow: inset 0 3px 0 var(--grass); }
.tc-row.tc-drop-after { box-shadow: inset 0 -3px 0 var(--grass); }
.tc-plan-hint { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 8px; }
/* 插入点缝隙（caret） */
.tc-slot { height: 7px; margin: 1px 0; border-radius: 4px; cursor: pointer; transition: background .1s; }
.tc-slot:hover { background: rgba(43,180,95,.20); }
.tc-slot.active { height: auto; padding: 3px 10px; margin: 3px 0; background: #eef9f0; border: 1.5px dashed var(--grass); }
.tc-caret { color: var(--grass); font-size: 12px; font-weight: 800; }

/* Python 仿编辑器 */
.code-pane { padding: 12px; gap: 10px; }
.code-bar { display: flex; align-items: center; gap: 10px; background: #0d211b; border-radius: 10px 10px 0 0; padding: 8px 12px; }
.code-dots { display: flex; gap: 5px; }
.code-dots .d { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.code-dots .r { background: #ff5f57; } .code-dots .y { background: #febc2e; } .code-dots .g { background: #28c840; }
.code-file { color: #9fd8b8; font-family: ui-monospace, monospace; font-size: 12.5px; }
.code-bar-actions { margin-left: auto; }
.code-mini { background: #1d3b30; color: #a8e6c2; font-size: 12px; padding: 4px 10px; border-radius: 7px; font-weight: 600; }
.code-mini:hover { background: #27513f; }
.code-snips { display: flex; flex-wrap: wrap; gap: 6px; }
.code-snips .snip { padding: 5px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #fff; font-family: ui-monospace, monospace; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.code-snips .snip:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.code-snips .snip.tc-for { color: #3a2c00; } .code-snips .snip.tc-var { color: #3a4452; }
.code-body { display: flex; flex: 1; min-height: 240px; background: #122821; border-radius: 0 0 12px 12px; overflow: hidden; }
.code-gutter { flex: 0 0 auto; padding: 14px 8px 14px 12px; text-align: right; color: #4f7a64; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.7; white-space: pre; user-select: none; overflow: hidden; background: #0f231c; }
.code-input { flex: 1; border: none; resize: none; padding: 14px 14px 14px 10px; font-family: ui-monospace, "Cascadia Code", monospace; font-size: 14px; line-height: 1.7; background: transparent; color: #d7f5e3; outline: none; }
.code-cheats { font-size: 12px; color: var(--muted); }
.code-cheats summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.cheat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 6px; }
.cheat { display: flex; gap: 6px; align-items: baseline; }
.cheat code { background: #122821; color: #7fe3a4; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-family: ui-monospace, monospace; }
.cheat-zh { color: var(--ink-soft); }
.code-guide-trigger { flex:0 0 auto; width:100%; padding:10px 12px; border:1px solid rgba(75,211,169,.25); border-radius:10px; background:rgba(4,37,32,.88); color:#8df6c5; font-size:13px; font-weight:800; text-align:left; }
.code-guide-trigger::after { content:'↑'; float:right; color:#b8d7ca; }
.code-guide-trigger:hover,.code-guide-trigger.on { background:rgba(12,91,68,.9); color:#effff8; border-color:#43dba6; }
.code-api-dock { position:relative; z-index:4; width:100%; margin:0 0 16px; border:1px solid rgba(66,220,170,.5); border-radius:16px; background:linear-gradient(145deg,rgba(3,47,39,.98),rgba(2,24,25,.98)); color:#dff8ed; box-shadow:0 18px 46px rgba(0,0,0,.4),inset 0 0 30px rgba(49,211,160,.05); overflow:hidden; }
.code-api-dock[hidden] { display:none!important; }
.api-dock-head { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:48px; padding:9px 16px; border-bottom:1px solid rgba(72,201,160,.22); background:rgba(4,63,50,.72); }
.api-dock-heading { display:flex; align-items:center; gap:9px; min-width:0; }
.api-dock-heading strong { color:#66efbd; font-size:16px; white-space:nowrap; }
.api-dock-heading small { color:#a8caba; font-size:11.5px; }
.api-dock-close { flex:0 0 auto; padding:7px 12px; border:1px solid rgba(189,225,211,.26); border-radius:8px; background:#3e5964; color:#fff; font-weight:700; }
.api-dock-close:hover { background:#53717c; }
.api-dock-body { min-width:0; }
.api-guide-body { overflow:auto; scrollbar-color:#26795c #071d1b; }
.api-guide-wide { display:grid; grid-template-columns:repeat(5,minmax(220px,1fr)); gap:0 16px; max-height:255px; padding:0 16px 12px; overflow:auto; }
.api-guide-wide>.api-syntax,.api-guide-wide>.api-direction,.api-guide-wide>.api-group { min-width:0; padding:10px 0; border-top:0; border-right:1px solid rgba(78,190,153,.16); padding-right:15px; }
.api-guide-wide>.api-group:last-child { border-right:0; }
.api-syntax,.api-direction,.api-group { padding:9px 0; border-top:1px solid rgba(78,190,153,.16); }
.api-syntax>b,.api-direction>b { display:block; margin-bottom:6px; color:#effff8; }
.api-syntax-row { display:grid; grid-template-columns:minmax(130px,1fr) minmax(120px,1fr); align-items:start; gap:8px; margin:5px 0; color:#b8d7ca; }
.api-syntax-row code,.api-row code { padding:4px 7px; border-radius:6px; background:#061a1b; color:#8df6c5; font:600 11.5px/1.45 ui-monospace,"Cascadia Code",monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.api-direction { display:flex; flex-direction:column; gap:4px; color:#b8d7ca; line-height:1.45; }
.api-group-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; color:#effff8; }
.api-stage { flex:0 0 auto; padding:2px 7px; border-radius:999px; background:rgba(191,132,30,.22); color:#ffd78b; font-size:10px; }
.api-stage.ready { background:rgba(36,169,105,.22); color:#8df6c5; }
.api-group.future { opacity:.72; }
.api-row { display:grid; grid-template-columns:minmax(145px,1.15fr) minmax(120px,1fr); align-items:start; gap:8px; margin:5px 0; }
.api-row>span { color:#b8d7ca; font-size:11.5px; line-height:1.45; }
.api-guide-wide .api-syntax-row,.api-guide-wide .api-row { grid-template-columns:1fr; gap:4px; }
@media (max-width:1100px) {
  .api-syntax-row,.api-row { grid-template-columns:1fr; }
  .api-guide-wide { grid-template-columns:repeat(5,minmax(205px,1fr)); }
  .api-dock-heading small { display:none; }
}

/* 省份分区（城市选择） */
.prov-block { margin-bottom: 22px; }
.prov-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; margin-bottom: 12px; background: linear-gradient(100deg, color-mix(in srgb, var(--prov) 18%, #fff), #fff); border-left: 5px solid var(--prov); }
.prov-em { font-size: 26px; }
.prov-name { font-family: var(--display); font-weight: 700; font-size: 18px; }
.prov-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* 自定义关卡格子标记 */
.lv.custom { position: relative; }
.lv.custom .lv-badge { position: absolute; top: 4px; right: 5px; font-size: 11px; color: #8a4fd0; }
.lv.custom { box-shadow: inset 0 0 0 2px rgba(138,79,208,.4); }
.row-gap { display: flex; align-items: center; gap: 10px; }

/* ============ 关卡设计器 ============ */
.ed-page { max-width: min(1500px, 97vw); }
.ed-head .lv-head-top { flex-wrap: wrap; }
.ed-page .ed-head { background: #fff; border-color: rgba(18,40,27,.08); color: var(--ink); }
.ed-page .ed-head .lv-title { color: var(--grass-dd); font-size: 22px; }
.ed-page .ed-head .story { color: var(--ink-soft); }
.ed-page .ed-head .city-chip { color: var(--grass-d); background: #e9f5ec; }
.ed-layout { display: grid; grid-template-columns: minmax(270px, 310px) minmax(430px, 1fr) minmax(290px, 330px); gap: 16px; align-items: start; margin-top: 16px; }
.ed-pane { padding: 14px; max-height: calc(100vh - 112px); overflow: auto; scrollbar-width: thin; }
.ed-center { min-width: 0; }
.ed-sub { font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: .04em; margin: 12px 0 7px; }
.ed-sub:first-child { margin-top: 0; }
.ed-toolgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-tool { min-height: 38px; padding: 8px 7px; border-radius: 9px; font-weight: 700; font-size: 12.5px; background: #eef2ee; color: var(--ink); text-align: left; transition: .1s; border: 2px solid transparent; line-height: 1.25; }
.ed-tool:hover, .ed-tool:focus-visible { background:#e1f2e5; color:#173e2a; border-color:rgba(31,155,78,.5); outline:none; }
.ed-tool.on { border-color: var(--grass); background: #d9f2df; color:#15552e; box-shadow: 0 2px 0 rgba(0,0,0,.06), inset 0 0 0 1px rgba(31,155,78,.14); }
.ed-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.ed-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.ed-help-card { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid rgba(31,155,78,.22); border-radius: 11px; background: linear-gradient(135deg,#effaf2,#f8fbf7); color: #315e3e; font-size: 12px; line-height: 1.55; }
.ed-legacy-banner { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 10px 14px; border: 1px solid rgba(214,144,37,.28); border-radius: 12px; background: #fff8e8; color: #73521d; font-size: 12.5px; line-height: 1.5; }
.ed-summary { display: grid; gap: 4px; padding: 10px 11px; margin-top: 12px; border-radius: 10px; background: #f3f7f4; color: var(--muted); font-size: 12px; }

.ed-field { display: block; margin-bottom: 8px; }
.ed-field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.ed-page .ed-field span, .ed-page .ed-number-field, .ed-page .ed-sub { color: #617168; }
.ed-input { width: 100%; border: 1.5px solid var(--line); border-radius: 9px; padding: 7px 10px; font-family: inherit; font-size: 13px; resize: vertical; }
.ed-sel { border: 1.5px solid var(--line); border-radius: 9px; padding: 6px 10px; font-family: inherit; font-size: 13px; background: #fff; }
.ed-sel.sm { padding: 4px 7px; }
.ed-check { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 6px; }
.ed-check-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ed-objective-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 9px; }
.ed-number-field { display: grid; gap: 3px; color: var(--muted); font-size: 11.5px; }
.ed-number-field input { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 8px; color: var(--ink); background: #fff; }

.ed-bottom { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-top: 16px; }
.ed-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ed-section-title > div { display: grid; gap: 2px; }
.ed-section-title span { color: var(--muted); font-size: 12px; }
.ed-program-host .tc-palette { margin-bottom: 10px; }
.ed-program-host .tc-plan { max-height: 430px; overflow: auto; }
.ed-brow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ed-brow:last-child { margin-bottom: 0; }
.ed-blabel { font-size: 12px; font-weight: 800; color: var(--muted); }
.ed-sol-strip { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 180px; }
.ed-soltok { background: #eef2ee; border-radius: 7px; padding: 3px 9px; font-size: 12.5px; font-weight: 700; }
.ed-dim { color: var(--muted); font-size: 13px; }
.ed-valid { font-size: 13px; font-weight: 700; }
.ed-valid.ok { color: #1f9b4e; } .ed-valid.bad { color: #c0392b; }
.ed-tokbtns { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
.ed-tokbtn { padding: 7px 12px; border-radius: 8px; background: #eef6ef; color: #2c6b3e; font-weight: 700; font-size: 13px; }
.ed-tokbtn:hover { background: #dcebdd; } .ed-tokbtn.gray { background: #eef2f6; color: #5a6573; }
.ed-deploy { font-size: 13px; }

.ed-manage { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-top: 16px; }
.ed-mrow { display: grid; grid-template-columns: minmax(220px,1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.ed-mtitle { font-weight: 700; font-size: 13.5px; }
.ed-map-meta { color: var(--muted); font-size: 12px; }
.ed-mrow .btn.sm { margin-left: 6px; }

/* ============ 战术回合轴编辑器 ============ */
.tc-plan-t { display: flex; align-items: center; justify-content: space-between; }
.tc-tools { display: flex; gap: 4px; }
.tc-tool { font-size: 12px; font-weight: 700; color: var(--muted); background: #eef2f6; border-radius: 8px; padding: 4px 9px; }
.tc-tool:hover { background: #e2e8ef; color:#243b4b; } .tc-tool.dis { opacity:1; color:#687784; background:#e9eef2; cursor:not-allowed; }

.axis { display: flex; flex-direction: column; gap: 0; margin-top: 6px; --axis-indent: 18px; }
.axis-empty { color: var(--muted); font-size: 13px; padding: 18px 8px; text-align: center; border: 1.5px dashed var(--line); border-radius: 12px; }
.axis-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; min-height: 46px; position: relative; }
.axis-no { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--grass); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 0 var(--grass-dd); }
.axis-row.container > .axis-no { background: #8a4fd0; box-shadow: 0 2px 0 #5f2fa0; }
.axis-card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; background: rgba(16,75,58,.72); border: 1px solid rgba(62,205,157,.24); border-radius: 10px; padding: 6px 10px; font-size: 13.5px; min-height: 42px; color: #eafff4; }
.axis-card.k-if, .axis-card.k-for { background: #f5eefc; }
.axis-ic { font-size: 15px; }
.axis-tx { font-weight: 600; color: var(--ink-soft); }
/* 射门计划行使用浅色卡片背景，必须显式使用深色文字。
   旧规则引用了未定义的 --self，浏览器会丢弃 color 声明，
   在深色战术工作台上最终继承白色，导致“射门”不可读。 */
.axis-tx.strong { font-weight: 800; color: #173c2d; text-shadow: none; }
.axis-ar { color: var(--muted); }
.axis-more { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; color: var(--muted); font-weight: 800; font-size: 16px; }
.axis-more:hover { background: #e7ecf2; }
.axis-toggle { width: 18px; color: var(--muted); font-size: 12px; }
.axis-sum { color: var(--muted); font-size: 12px; }
.axis-inbtns { margin-left: auto; display: flex; gap: 5px; }
.axis-in { font-size: 11.5px; font-weight: 700; color: #6a3fb0; background: #efe6fb; border-radius: 7px; padding: 3px 8px; }
.axis-in:hover { background: #e3d4f7; }
.axis-sublabel { font-size: 11.5px; color: var(--muted); padding: 2px 0 2px 30px; }

/* Structured program tree: containers own their body and visually connect
   nested actions without exposing AST path numbers. */
.axis-container { position: relative; margin: 7px 0; padding: 0 0 5px; border: 0; border-radius: 10px; background: transparent; transition: border-color .12s, background .12s, box-shadow .12s; }
.axis-container::before { content: ''; position: absolute; left: 20px; top: 52px; bottom: 16px; width: 3px; border-radius: 3px; background: rgba(138,79,208,.55); pointer-events: none; }
.axis-container.depth-1 { margin-left: var(--axis-indent); border-color: rgba(138,79,208,.30); background: rgba(138,79,208,.08); }
.axis-container.depth-2 { margin-left: calc(var(--axis-indent) * 2); border-color: rgba(138,79,208,.24); background: rgba(138,79,208,.055); }
.axis-container.depth-3 { margin-left: calc(var(--axis-indent) * 3); border-color: rgba(138,79,208,.20); background: rgba(138,79,208,.04); }
.axis-container.selected { border-color: #b48cff; box-shadow: 0 0 0 2px rgba(180,140,255,.18); }
.axis-container-head { min-height: 43px; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid rgba(138,79,208,.34); border-radius: 10px; cursor: pointer; color: #eefcf6; background: rgba(53,42,95,.28); }
.axis-container-head:hover { background: rgba(53,230,161,.09); }
.axis-container-icon { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #6635a6; color: #fff; font-size: 18px; font-weight: 800; }
.axis-container-label { font-size: 15px; font-weight: 800; color: #f5fff9; }
.axis-container-spacer { flex: 1; }
.axis-collapse { width: 30px; height: 30px; border-radius: 8px; color: #d5e7df; font-size: 21px; }
.axis-collapse:hover { background: rgba(255,255,255,.12); }
.axis-container-body { position: relative; padding: 3px 8px 2px 14px; }
.axis-container-body .axis-row { margin-left: 16px; }
.axis-container-body .axis-insert-zone { margin-left: 16px; }
.axis-branch { position: relative; padding: 2px 0 5px; }
.axis-branch-label { color: #b7c9c1; font-size: 12px; padding: 2px 0 2px 28px; }
.axis-container-insert { display: flex; width: 28px; height: 22px; margin: 3px 0 0 17px; min-height: 22px; align-items: center; justify-content: center; border: 1px dashed rgba(53,230,161,.35); border-radius: 7px; color: #35e6a1; background: transparent; font-size: 16px; font-weight: 800; }
.axis-branch > .axis-container-insert { margin-left: 28px; width: calc(100% - 34px); }
.axis-container-insert:hover { background: rgba(53,230,161,.10); border-color: #35e6a1; }
.axis-container-summary { margin: 0 12px 0 48px; color: #a9c2b6; font-size: 11px; }
.action-row { margin-left: calc(var(--axis-indent) * var(--nest-depth, 0)); }
.action-row.selected .axis-card { outline: 2px solid rgba(53,230,161,.72); outline-offset: 1px; }
.action-row .axis-card { background: rgba(16,75,58,.72); }
.axis-actor { color: #8de9bf; font-size: 11px; font-weight: 800; }
.action-main { color: #f0fff7 !important; font-size: 14px; font-weight: 800 !important; }
.text-param { background: transparent !important; color: #bfe5d5 !important; border: 0 !important; box-shadow: none !important; padding: 1px 3px !important; font-weight: 700 !important; }
.text-param:hover, .action-row.selected .text-param { background: rgba(53,230,161,.16) !important; color: #eafff4 !important; border-radius: 5px; }
.chip.c-var { color: #ffd56a !important; }
.action-no { display: none; }
.axis-insert-zone { border: 0; background: transparent; width: 100%; min-height: 14px; margin: 1px 0; padding: 0; color: transparent; }
.axis-insert-zone.active { min-height: 38px; border: 1px dashed rgba(53,230,161,.55); border-radius: 9px; color: #35e6a1; background: rgba(53,230,161,.06); }
.axis-insert-zone:hover { min-height: 28px; border: 1px dashed rgba(53,230,161,.35); border-radius: 9px; color: #35e6a1; background: rgba(53,230,161,.045); }
.axis-insert-zone .axis-line-tip { color: inherit; justify-content: center; font-size: 12px; }
.axis-insert-zone .axis-line-tip::after { display: none; }

/* 可点参数 chip */
.chip { font-weight: 800; font-size: 13px; padding: 2px 10px; border-radius: 999px; color: #fff; cursor: pointer; transition: .1s; }
.chip:hover { filter: brightness(1.06); transform: translateY(-1px); }
.chip.c-who { background: #2f6fe0; } .chip.c-dir { background: #2bb45f; } .chip.c-num { background: #f0a500; color: #4a3200; }
.chip.c-cond { background: #8a4fd0; }

/* 绿色插入线（纯 UI 状态） */
.axis-gap { height: 8px; cursor: pointer; border-radius: 5px; display: flex; align-items: center; }
.axis-gap:hover { background: rgba(43,180,95,.14); }
.axis-gap.active { height: auto; padding: 4px 0; }
.axis-gap.active::before { content: ''; flex: 0 0 22px; }
.axis-line-tip { display: inline-flex; align-items: center; gap: 6px; color: var(--grass-dd); font-size: 12px; font-weight: 800; width: 100%; }
.axis-line-tip::after { content: ''; flex: 1; height: 0; border-top: 2px dashed var(--grass); margin-left: 6px; }

/* 浮层编辑 / 菜单 */
.edit-pop { position: fixed; z-index: 120; background: #fff; border-radius: 14px; box-shadow: 0 14px 40px rgba(20,30,40,.28); border: 1px solid var(--line); padding: 12px 14px; min-width: 180px; max-width: 86vw; animation: pop .14s ease; }
.edit-pop-t { font-weight: 800; font-size: 13px; margin-bottom: 8px; color: var(--ink); }
.ep-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.ep-field > span { color: var(--muted); }
.ep-sel, .ep-text { border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 9px; font-family: inherit; font-size: 13px; background: #fff; min-width: 96px; }
.ep-stepper { display: inline-flex; align-items: center; gap: 4px; }
.ep-step { width: 28px; height: 28px; border-radius: 8px; background: #eef2f6; font-weight: 800; font-size: 16px; color: var(--ink); }
.ep-step:hover { background: #e2e8ef; }
.ep-num { width: 48px; text-align: center; border: 1.5px solid var(--line); border-radius: 8px; padding: 5px; font-family: inherit; font-size: 13px; }
.edit-pop-btns { display: flex; gap: 8px; margin-top: 6px; }
.ep-ok { flex: 1; background: var(--grass); color: #fff; border-radius: 9px; padding: 7px; font-weight: 800; box-shadow: 0 2px 0 var(--grass-dd); }
.ep-del { background: #fdece8; color: #c0392b; border-radius: 9px; padding: 7px 12px; font-weight: 700; }
.menu-pop { padding: 6px; min-width: 130px; }
.mp-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.mp-item:hover { background: #eef2f6; } .mp-item.danger { color: #c0392b; }

/* 编辑器浮层位于画布/深色工作台上时，保持清晰的层级和键盘焦点。 */
.edit-pop { color: #1b3025; z-index: 260; }
.edit-pop button:focus-visible, .edit-pop select:focus-visible, .edit-pop input:focus-visible { outline: 3px solid #146ee8; outline-offset: 2px; }
.mp-item:hover, .mp-item:focus-visible { background: #dcefe2; color: #163d28; }
.ep-step:hover, .ep-step:focus-visible { background: #d2e6d8; color: #183c29; }

/* ============ 新手引导 / 帮助中心 ============ */
.ux-mask { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(7,24,14,.68); backdrop-filter: blur(4px); animation: fadein .16s ease; }
.ux-dialog { width: min(520px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: hidden; display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: 20px; box-shadow: 0 24px 70px rgba(5,28,14,.32); }
.ux-dialog.wide { width: min(900px, 100%); }
.ux-dialog-head { display: flex; gap: 16px; align-items: center; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.ux-dialog-head h2 { margin: 0; flex: 1; font-size: 24px; color: var(--grass-dd); }
.ux-close { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: #eef2ee; color: var(--ink-soft); font-size: 25px; line-height: 1; }
.ux-close:hover { background: #e1e8e2; }
.ux-dialog-body { overflow-y: auto; padding: 18px 22px; line-height: 1.65; }
.ux-dialog-body,
.ux-dialog-body p,
.ux-dialog-body li,
.ux-dialog-body dd { color: var(--ink-soft); }
.ux-dialog-body h3,
.ux-dialog-body dt,
.ux-dialog-body strong { color: var(--ink); }
.ux-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid var(--line); }
.ux-lead { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; }
.ux-note { margin: 12px 0 0; background: #f2f6f2; border-radius: 10px; padding: 9px 12px; color: var(--muted); font-size: 12.5px; }
.ux-steps, .help-list { margin: 8px 0 0; padding-left: 24px; }
.ux-steps li, .help-list li { margin: 7px 0; padding-left: 4px; }
.ux-steps li::marker { color: var(--grass); font-weight: 900; }
.help-section { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--line); }
.help-section:last-of-type { border-bottom: 0; margin-bottom: 0; }
.help-section h3 { margin: 0 0 10px; font-size: 17px; }
.help-section p { margin: 6px 0; color: var(--ink-soft); }
.help-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.help-mode { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fbfdfb; }
.help-mode.ready { border-color: #b8dfc5; background: #f3fbf5; }
.help-mode.preview { border-color: #ead8a8; background: #fffaf0; }
.help-mode-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.help-mode-head span { border-radius: 999px; background: #e6f5ea; color: #1c8242; padding: 2px 7px; font-size: 11px; font-weight: 800; }
.help-mode.preview .help-mode-head span { background: #fff0c7; color: #8a6100; }
.help-mode p { font-size: 12.5px; margin: 8px 0 0; }
.help-trouble { display: grid; grid-template-columns: minmax(125px, 180px) 1fr; gap: 9px 14px; margin: 0; }
.help-trouble dt { font-weight: 800; color: var(--ink); }
.help-trouble dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 640px) {
  .edit-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; border-radius: 16px 16px 0 0; max-width: 100vw; width: 100%; }
}

/* ============ 响应式回落 ============ */
@media (max-width: 1180px) {
  .tb-layout { grid-template-columns: minmax(300px, 360px) minmax(320px, 440px); justify-content: center; }
  .tb-right { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .levels { grid-template-columns: repeat(6, 1fr); }
  .city-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .nav-inner { padding: 0 12px; gap: 8px; }
  .brand { min-width:0; max-width:148px; flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:17px; gap:5px; }
  .brand-ball { flex:0 0 30px; width:30px; height:30px; }
  .nav-user { flex:0 0 auto; gap:4px; }
  .nav-nick { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-links { display: none; }
  .container { padding: 18px 14px 54px; }
  .hero { flex-direction: column-reverse; text-align: center; padding: 28px 22px; }
  .hero-art { width: 130px; height: 130px; }
  .hero h1 { font-size: 27px; }
  .hero-actions { justify-content: center; }
  .grid-3 { grid-template-columns: 1fr; }
  .home-season-head { align-items: flex-start; flex-direction: column; }
  .home-levels { grid-template-columns: repeat(5, minmax(42px, 1fr)); }
  .city-grid { grid-template-columns: repeat(2, 1fr); }
  .levels { grid-template-columns: repeat(5, 1fr); }
  .level-cols { grid-template-columns: 1fr; }
  .lv-extra { grid-template-columns: 1fr; }
  .lv-right { position: static; }
  .lv-left { min-height: 0; }
  .work, #blocklyArea, .py-area { min-height: 300px; }
  .tb-layout { grid-template-columns: 1fr; }
  .tb-center { order: 1; } .tb-left { order: 2; min-height: 0; } .tb-right { order: 3; }
  .variant-preview-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .variant-tab { flex-basis: calc(50% - 7px); }
  .tb-bottom { flex-direction: column; align-items: stretch; }
  .tb-bottom .run-bar { flex: 1; }
  .tb-bottom .run-bar .btn { flex: 1; }
  .ed-layout { grid-template-columns: 1fr; }
  .ed-pane { max-height: none; overflow: visible; }
  .ed-mrow { grid-template-columns: 1fr; }
  .help-trigger { padding: 8px 10px; }
  .help-trigger { font-size: 0; }
  .help-trigger::first-letter { font-size: 14px; }
  .next-step { align-items: flex-start; flex-wrap: wrap; }
  .next-step .btn { margin-left: 48px; }
  .help-modes { grid-template-columns: 1fr; }
  .help-trouble { grid-template-columns: 1fr; gap: 2px; }
  .help-trouble dd { margin-bottom: 10px; }
  .ux-mask { padding: 8px; align-items: end; }
  .ux-dialog { max-height: calc(100vh - 16px); border-radius: 18px 18px 8px 8px; }
  .ux-dialog-actions { flex-wrap: wrap; }
  .ux-dialog-actions .btn { flex: 1; min-width: 150px; }
}
@media (max-width: 420px) {
  /* Keep the account control compact instead of clipping the product name. */
  .brand { max-width:156px; min-width:0; font-size:15px; }
  .brand-ball { flex-basis:26px; width:26px; height:26px; }
  .nav-nick { display:none; }
  .nav-user-menu summary { min-width:48px; width:48px; padding:4px; justify-content:center; }
  .nav-user-menu .nav-chevron { margin-left:0; font-size:10px; }
  .levels { grid-template-columns: repeat(4, 1fr); }
  .home-levels { grid-template-columns: repeat(4, minmax(42px, 1fr)); }
  .page-head h2 { font-size: 22px; }
}
@media (max-width: 900px) {
  .home-hero { margin:0 -14px; padding:38px 24px 30px; }.home-hero .hero-art { width:260px; height:190px; align-self:center; }.home-hero .hero-art img { transform:scale(1.15); }.home-season { margin:0; }.home-levels { grid-template-columns:repeat(5,minmax(48px,1fr)); }
  .home-onboarding { width:100%; margin:12px 0 16px; }
  .home-unit { grid-template-columns:minmax(0,1fr) 24px; height:auto; min-height:0; }
  .home-unit-title { grid-column:1 / -1; }
  .home-unit .home-levels { grid-column:1 / -1; width:100%; min-width:0; }
  .home-unit-next { grid-column:2; grid-row:1; }
}

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; gap: 24px; padding: 20px 0 40px; }
  .auth-hero-copy { text-align: center; padding-bottom: 0; }.auth-features { margin: 0 auto; }.auth-hero-copy h1 { font-size: 58px; }.auth-hero-copy p { font-size: 16px; }
  .cities-layout { grid-template-columns: 1fr; }.cities-promo { min-height: 280px; position: relative; top: auto; }.cities-promo img { width: 280px; max-height: 210px; }.promo-title { font-size: 30px; }
}
@media (max-width: 560px) {
  .auth-page { padding: 0 14px 24px; }.auth-topbar { height: 72px; }.auth-toplinks button:nth-child(1) { display: none; }.auth-toplinks { gap: 4px; }.auth-brand b { font-size: 17px; }.auth-brand small { font-size: 10px; }.auth-brand img { width: 40px; height: 40px; }.auth-hero-copy h1 { font-size: 46px; }.auth-features { grid-template-columns: repeat(2,1fr); }.auth-card { padding: 22px 18px 24px; }.auth-field-grid { grid-template-columns: 1fr; gap: 0; }.nav-inner { height: 62px; }.brand { font-size: 17px; }.brand-ball { width: 33px; height: 33px; }
}

/* ============ 东北超编程闯关 · 参考图深色主题覆盖 ============
   仅作用于登录、城市与战术工作台，不改变首页/后台的数据结构。
   真实体育场/雪景图可通过 body class 或 background-image 继续替换。
*/
body:has(.auth-page), body:has(.tb-page), body:has(.prov-block) {
  background-color: #031812;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(28, 166, 124, .12), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(22, 103, 136, .16), transparent 36%),
    linear-gradient(135deg, #041b17 0%, #03211d 48%, #03121b 100%);
  color: #eefbf6;
}
body:has(.auth-page) .navbar,
body:has(.tb-page) .navbar,
body:has(.prov-block) .navbar {
  background: rgba(2, 22, 18, .90);
  border-bottom-color: rgba(87, 225, 178, .20);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .24);
}
body:has(.auth-page) .brand,
body:has(.tb-page) .brand,
body:has(.prov-block) .brand { color: #f4fffb; }
body:has(.auth-page) .navlink,
body:has(.tb-page) .navlink,
body:has(.prov-block) .navlink { color: #b8d7cc; }
body:has(.auth-page) .navlink:hover,
body:has(.tb-page) .navlink:hover,
body:has(.prov-block) .navlink:hover { background: rgba(46, 184, 135, .16); }
body:has(.auth-page) .navlink.on,
body:has(.tb-page) .navlink.on,
body:has(.prov-block) .navlink.on { background: #0a9b6b; box-shadow: 0 3px 0 #056246; color: #fff; }
body:has(.auth-page) .nav-nick,
body:has(.tb-page) .nav-nick,
body:has(.prov-block) .nav-nick { color: #e5f8ef; }
body:has(.auth-page) .help-trigger,
body:has(.tb-page) .help-trigger,
body:has(.prov-block) .help-trigger { background: rgba(14, 94, 74, .55); color: #d9fff0; border: 1px solid rgba(93, 220, 178, .24); }

/* 登录页：深色玻璃卡，与参考图保持明确的登录焦点。 */
.auth-page {
  place-items: center end;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 500px);
  gap: clamp(28px, 7vw, 120px);
  padding: clamp(24px, 5vw, 70px) clamp(24px, 7vw, 110px);
  background:
    linear-gradient(90deg, rgba(1, 20, 17, .12), rgba(1, 18, 21, .72)),
    radial-gradient(900px 600px at 22% 70%, rgba(24, 130, 112, .30), transparent 68%),
    linear-gradient(135deg, #04271c 0%, #03211e 48%, #03141d 100%);
}
.auth-card {
  max-width: 500px;
  padding: 38px 38px 30px;
  color: #e8f8f1;
  background: linear-gradient(160deg, rgba(9, 45, 35, .93), rgba(1, 20, 18, .95));
  border: 1px solid rgba(45, 203, 145, .58);
  border-radius: 20px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .42), inset 0 0 50px rgba(39, 175, 128, .06);
  backdrop-filter: blur(14px);
}
.auth-logo { width: 132px; height: 132px; margin: -14px auto 4px; }
.auth-title { color: #f4fff9; font-size: 31px; text-shadow: 0 2px 16px rgba(93, 224, 175, .18); }
.auth-sub, .auth-hint { color: #9dbeb1; }
.auth-tabs { background: rgba(1, 17, 16, .62); border: 1px solid rgba(69, 182, 143, .14); }
.auth-tabs button { color: #88a89b; }
.auth-tabs button.on { color: #67e3ae; background: rgba(13, 117, 82, .25); box-shadow: inset 0 0 0 1px rgba(56, 224, 157, .46); }
.auth-page .inp { color: #eafbf3; background: rgba(8, 38, 31, .80); border-color: rgba(83, 158, 131, .32); }
.auth-page .inp::placeholder { color: #7b9c90; }
.auth-page .inp:focus { border-color: #39c891; box-shadow: 0 0 0 4px rgba(44, 200, 145, .16); background: rgba(9, 49, 39, .95); }
.auth-page .btn.block { background: linear-gradient(90deg, #ff971b, #ff6e17); box-shadow: 0 4px 0 #b64b0c, 0 10px 22px rgba(255, 125, 24, .28); }
.auth-page .auth-help { color: #65dca7; }
.auth-page .auth-error { background: rgba(143, 47, 47, .25); border-color: rgba(242, 117, 117, .44); color: #ffc5c5; }

/* 城市页：省份横幅与队伍卡切换为参考图的深色赛季选择器。 */
body:has(.prov-block) .container { max-width: 1440px; }
body:has(.prov-block) .page-head h2, body:has(.prov-block) .page-head p { color: #effcf7; }
.prov-block { margin-bottom: 24px; }
.prov-head {
  min-height: 68px; padding: 12px 20px; border-radius: 14px; margin-bottom: 12px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--prov) 42%, #0b322b), rgba(15, 51, 45, .72));
  border: 1px solid color-mix(in srgb, var(--prov) 60%, #47d5a4);
  border-left: 5px solid var(--prov); box-shadow: inset 0 0 30px rgba(102, 221, 180, .07), 0 8px 24px rgba(0, 0, 0, .18);
}
.prov-name { color: #effff8; font-size: 20px; }
.prov-sub { color: #a8c8ba; }
.city-grid { gap: 14px; }
body:has(.prov-block) .city {
  color: #effcf7; background: linear-gradient(150deg, rgba(8, 48, 39, .90), rgba(3, 27, 25, .94));
  border: 1px solid rgba(62, 185, 145, .34); box-shadow: 0 10px 28px rgba(0, 0, 0, .20), inset 0 0 24px rgba(37, 169, 125, .05);
}
body:has(.prov-block) .city:hover { border-color: rgba(93, 224, 175, .72); box-shadow: 0 16px 34px rgba(0, 0, 0, .28), 0 0 0 1px rgba(93, 224, 175, .22); }
body:has(.prov-block) .city .style { color: #9ebbae; }
body:has(.prov-block) .city .pts { color: #ffae2b; }
body:has(.cities-view) .container { max-width:none; padding:26px 5.8vw 26px; }.cities-head { margin:6px 0 18px 18px; }.cities-head h2 { font-size:32px; }.cities-layout { grid-template-columns:minmax(0,2.25fr) minmax(280px,.75fr); gap:30px; }.cities-promo { min-height:calc(100vh - 175px); }.prov-block { margin-bottom:14px; }.prov-head { min-height:58px; margin-bottom:10px; }.city-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }.city { min-height:98px; display:flex; align-items:center; text-align:left; padding:16px 22px; border-width:1px; }.city .badge { width:58px; height:58px; margin:0 18px 0 0; font-size:24px; flex:0 0 auto; }.city .name { font-size:17px; }.city .style { margin-top:3px; }.city .pts { margin-top:6px; }

/* 战术工作台：三列玻璃面板+深色编辑器，保护中间球场区域。 */
body:has(.tb-page) .container { max-width: 1640px; }
body:has(.tb-page) .lv-head,
body:has(.tb-page) .tb-left,
body:has(.tb-page) .tb-right {
  color: #e9faf3; background: linear-gradient(155deg, rgba(7, 46, 37, .88), rgba(2, 25, 24, .94));
  border: 1px solid rgba(54, 191, 146, .38); box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 0 28px rgba(47, 183, 139, .045);
}
body:has(.tb-page) .lv-head .story,
body:has(.tb-page) .coach-k,
body:has(.tb-page) .coach-sub,
body:has(.tb-page) .step-info { color: #9dbeb1; }
body:has(.tb-page) .lv-title, body:has(.tb-page) .coach-title { color: #f2fff8; }
/* The level-group chip sits on the dark workbench header.  The base chip
   style uses a light background, which made its inherited light text nearly
   invisible (it appeared as a blank white pill). */
body:has(.tb-page) .lv-head .city-chip.sm {
  background: rgba(11, 102, 76, .72);
  border: 1px solid rgba(86, 225, 177, .42);
  color: #dffff0;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .32);
}

/* Right-side learning workspace: the coach and the language reference share
   one stable column so students can keep the map and editor visible. */
body:has(.tb-page) .tb-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.coach-panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  flex: 0 0 auto;
  margin: -4px -2px 12px;
  padding: 4px;
  border: 1px solid rgba(67, 211, 164, .2);
  border-radius: 12px;
  background: rgba(1, 24, 22, .72);
}
.coach-panel-tab {
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #9fc5b6;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
}
.coach-panel-tab:hover,
.coach-panel-tab:focus-visible {
  color: #effff8;
  border-color: rgba(75, 222, 171, .38);
  outline: none;
}
.coach-panel-tab.on {
  background: linear-gradient(135deg, #0b9b6b, #087657);
  border-color: rgba(95, 238, 188, .54);
  color: #fff;
  box-shadow: 0 3px 0 rgba(2, 75, 54, .85), inset 0 0 18px rgba(117, 255, 207, .08);
}
.coach-tab-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-color: #26795c #071d1b;
}
.coach-tab-panel[hidden] { display: none !important; }
body:has(.tb-page) .coach-tab-panel .coach-body { min-width: 0; min-height: 0 !important; }
.coach-api-panel { padding: 1px 2px 8px; }
.coach-api-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-bottom: 10px;
  padding: 9px 8px 12px;
  border-bottom: 1px solid rgba(66, 196, 154, .18);
}
.coach-api-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(25, 151, 106, .2); }
.coach-api-head strong { display: block; color: #effff8; font-size: 15px; }
.coach-api-head small { display: block; margin-top: 3px; color: #8fb6a7; font-size: 10.5px; line-height: 1.35; }
.coach-api-body { min-width: 0; }
.coach-api-body .api-guide-wide {
  display: block;
  max-height: none;
  min-width: 0;
  padding: 0 6px 8px;
  overflow: visible;
}
.coach-api-body .api-guide-wide > .api-syntax,
.coach-api-body .api-guide-wide > .api-direction,
.coach-api-body .api-guide-wide > .api-group {
  min-width: 0;
  padding: 10px 3px;
  border-top: 1px solid rgba(78, 190, 153, .16);
  border-right: 0;
}
.coach-api-body .api-guide-wide > :first-child { border-top: 0; }
.coach-api-body .api-syntax-row,
.coach-api-body .api-row { grid-template-columns: 1fr; gap: 4px; }
.coach-api-body .api-syntax-row span,
.coach-api-body .api-row span,
.coach-api-body .api-direction span { overflow-wrap: anywhere; }
.coach-api-body .api-syntax-row code,
.coach-api-body .api-row code { width: 100%; box-sizing: border-box; }

@media (max-width: 1180px) {
  body:has(.tb-page) .tb-right { overflow: hidden; }
  .coach-tab-panel { max-height: 620px; }
  .coach-api-body .api-guide-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body:has(.tb-page) .tb-layout {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    justify-content: stretch;
  }
  body:has(.tb-page) .tb-right {
    grid-column: 1 / -1;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .coach-tab-panel { max-height: 70vh; }
  .coach-api-body .api-guide-wide { grid-template-columns: 1fr; }
}

/* Compact tactical-plan density: keep nested programs readable inside the
   narrow left workbench without changing the AST or editor behavior. */
body:has(.tb-page) .tb-left .tb-cardhost { padding: 9px 10px; }
body:has(.tb-page) .tb-left .tc-palette { gap: 6px; padding-bottom: 9px; margin-bottom: 7px; }
body:has(.tb-page) .tb-left .tc-group-t { font-size: 10.5px; margin-bottom: 3px; }
body:has(.tb-page) .tb-left .tc-cards { gap: 5px; }
body:has(.tb-page) .tb-left .tc-card { padding: 5px 10px; font-size: 12px; }
body:has(.tb-page) .tb-left .tc-plan-t { font-size: 12px; margin-bottom: 5px; }
body:has(.tb-page) .tb-left .tc-tools { gap: 3px; }
body:has(.tb-page) .tb-left .tc-tool { padding: 3px 7px; font-size: 11px; }
body:has(.tb-page) .tb-left .axis { --axis-indent: 14px; margin-top: 3px; }
body:has(.tb-page) .tb-left .axis-container { margin-top: 4px; margin-bottom: 5px; padding-bottom: 5px; border-radius: 13px; }
body:has(.tb-page) .tb-left .axis-container.depth-1 { margin-left: 14px; }
body:has(.tb-page) .tb-left .axis-container.depth-2 { margin-left: 28px; }
body:has(.tb-page) .tb-left .axis-container.depth-3 { margin-left: 42px; }
body:has(.tb-page) .tb-left .axis-container::before { left: 16px; top: 43px; bottom: 11px; width: 2px; }
body:has(.tb-page) .tb-left .axis-container-head { min-height: 40px; gap: 6px; padding: 5px 7px; border-radius: 12px; }
body:has(.tb-page) .tb-left .axis-container-icon { flex-basis: 30px; width: 30px; height: 30px; border-radius: 8px; font-size: 19px; }
body:has(.tb-page) .tb-left .axis-container-label { font-size: 15px; }
body:has(.tb-page) .tb-left .axis-container-head .chip { font-size: 11.5px; padding: 2px 8px; }
body:has(.tb-page) .tb-left .axis-collapse { width: 25px; height: 25px; font-size: 17px; }
body:has(.tb-page) .tb-left .axis-more { width: 24px; height: 24px; font-size: 14px; }
body:has(.tb-page) .tb-left .axis-container-body { padding: 1px 7px 1px 9px; }
body:has(.tb-page) .tb-left .axis-container-body .axis-row { margin-left: 10px; }
body:has(.tb-page) .tb-left .axis-row { min-height: 39px; gap: 5px; padding: 2px 0; }
body:has(.tb-page) .tb-left .tb-cardhost .axis-card { min-height: 36px; gap: 5px; padding: 5px 8px; border-radius: 10px; font-size: 12px; }
body:has(.tb-page) .tb-left .axis-ic { font-size: 13px; }
body:has(.tb-page) .tb-left .axis-tx { font-size: 12px; }
body:has(.tb-page) .tb-left .chip { font-size: 11.5px; padding: 2px 8px; }
body:has(.tb-page) .tb-left .action-no { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
body:has(.tb-page) .tb-left .axis-container-insert { min-height: 23px; margin-top: 2px; font-size: 10.5px; }
body:has(.tb-page) .tb-left .axis-branch > .axis-container-insert { margin-left: 20px; width: calc(100% - 24px); }
body:has(.tb-page) .tb-left .axis-branch-label { font-size: 10.5px; padding-left: 22px; }
body:has(.tb-page) .tb-left .axis-container-summary { font-size: 10.5px; margin-left: 47px; }
body:has(.tb-page) .tb-left .tc-plan-t { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'title tools' 'budget tools'; align-items: center; column-gap: 5px; row-gap: 1px; }
body:has(.tb-page) .tb-left .program-title { grid-area: title; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(.tb-page) .tb-left .program-budget { grid-area: budget; margin-left: 0; font-size: 10px; white-space: nowrap; color: #9de4c1; }
body:has(.tb-page) .tb-left .program-budget.danger { color: #ffb19b; }
body:has(.tb-page) .tb-left .tc-tools { grid-area: tools; align-self: center; }
body:has(.tb-page) .tb-left .tc-tool { width: 25px; height: 24px; padding: 0; display: grid; place-items: center; font-size: 13px; }
body:has(.tb-page) .tb-left .command-library { padding: 8px 0 7px; gap: 5px; }
body:has(.tb-page) .tb-left .command-library-head { display: flex; align-items: center; gap: 7px; }
body:has(.tb-page) .tb-left .command-library-title { font-size: 12px; font-weight: 800; color: #eafff4; }
body:has(.tb-page) .tb-left .command-library-note { flex: 1; color: rgba(215,241,229,.52); font-size: 10px; }
body:has(.tb-page) .tb-left .command-library-toggle { color: #9ed8c0; font-size: 14px; padding: 0 4px; background: transparent; }
body:has(.tb-page) .tb-left .command-search { width: 100%; min-height: 28px; border: 1px solid rgba(62,205,157,.28); border-radius: 8px; padding: 4px 8px; background: rgba(1,26,23,.6); color: #eafff4; font-size: 11px; }
body:has(.tb-page) .tb-left .command-search::placeholder { color: rgba(215,241,229,.45); }
body:has(.tb-page) .tb-left .command-group { gap: 2px; }
body:has(.tb-page) .tb-left .command-group .tc-cards { gap: 4px; }
body:has(.tb-page) .tb-left .command-group .tc-card { padding: 4px 8px; font-size: 11px; }
body:has(.tb-page) .tb-left .command-library.collapsed .command-search,
body:has(.tb-page) .tb-left .command-library.collapsed .command-group { display: none; }

/* Tactical Program Editor V2 presentation layer.  These nodes deliberately
   do not use the legacy .axis-card/.axis-container surfaces. */
.program-tree { position: relative; padding: 8px 2px 18px 0; color: #eafff4; }
.program-action-line, .program-branch-head { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; margin-left: calc(var(--tree-depth, 0) * 18px); padding: 4px 6px; border-radius: 7px; background: transparent; border: 0; color: #eafff4; transition: background .14s, outline .14s; }
.program-action-line:hover, .program-branch-head:hover { background: rgba(53,230,161,.07); }
.program-action-line.is-selected, .program-branch.is-selected > .program-branch-head { background: rgba(53,230,161,.11); outline: 1px solid rgba(53,230,161,.42); }
.program-guide { position: absolute; left: -14px; top: -5px; bottom: -5px; width: 2px; background: rgba(138,79,208,.72); pointer-events: none; }
.program-action-line:last-child .program-guide { bottom: 50%; }
.program-guide::after { content: ''; position: absolute; left: 0; top: 50%; width: 13px; height: 2px; background: rgba(138,79,208,.72); }
.program-icon, .branch-icon { width: 22px; flex: 0 0 22px; text-align: center; font-size: 17px; }
.program-action-content { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.program-action-main { color: #f2fff8; font-size: 14px; font-weight: 800; white-space: nowrap; }
.program-action-main.shoot-text { color: #c69aff; }
.program-actor { color: #8de9bf; font-size: 11px; font-weight: 800; }
.program-operator { color: #a6c4b8; font-size: 13px; }
.program-param { border: 0; background: transparent; color: #a9c8ba; padding: 1px 3px; border-radius: 5px; font: inherit; font-size: 12px; cursor: pointer; }
.program-param:hover, .program-action-line.is-selected .program-param, .program-branch-head:hover .program-param { background: rgba(53,230,161,.16); color: #effff6; }
.program-more { opacity: 0; width: 24px; height: 24px; padding: 0; border-radius: 5px; background: transparent; color: #98b9aa; font-size: 16px; transition: opacity .14s, background .14s; }
.program-action-line:hover .program-more, .program-action-line.is-selected .program-more, .program-branch-head:hover .program-more { opacity: .9; }
.program-more:hover { background: rgba(255,255,255,.1); color: #fff; }
.program-action-spacer, .branch-spacer { flex: 1; }
.program-function-branch { position:relative; margin:5px 0 7px calc(var(--tree-depth, 0) * 18px); padding:5px 0 5px 10px; border-left:2px solid rgba(74,214,174,.72); border-radius:7px; background:rgba(20,96,76,.13); }
.program-function-branch.is-selected { background:rgba(53,230,161,.10); outline:1px solid rgba(53,230,161,.32); }
.program-function-head { display:flex; align-items:center; gap:7px; min-height:36px; padding:3px 7px 4px 2px; color:#effff7; cursor:pointer; }
.program-function-icon { display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border-radius:7px; background:rgba(53,230,161,.16); color:#72efc0; font-size:15px; font-weight:1000; }
.program-function-label { color:#9ccfbb; font-size:11px; font-weight:800; white-space:nowrap; }
.program-function-name,.program-call-name { color:#f4fff9; font-size:12.5px; overflow-wrap:anywhere; }
.program-function-params,.program-call-args { display:inline-flex; flex-wrap:wrap; gap:4px; min-width:0; }
.program-function-param,.program-call-arg,.program-function-no-param { padding:2px 6px; border:1px solid rgba(125,179,255,.34); border-radius:999px; background:rgba(61,111,177,.18); color:#cfe4ff; font-size:10.5px; font-weight:850; white-space:nowrap; }
.program-function-no-param { border-color:rgba(255,255,255,.13); background:rgba(255,255,255,.05); color:#9db3a9; }
.program-function-size { margin-left:auto; color:#89a99c; font-size:10px; white-space:nowrap; }
.program-function-body { position:relative; padding:0 2px 1px 3px; }
.coach-function-live { display:flex; align-items:center; gap:9px; margin:0 0 10px; padding:9px 10px; border:1px solid rgba(72,224,177,.35); border-radius:11px; background:linear-gradient(135deg,rgba(24,114,87,.35),rgba(11,54,45,.5)); color:#effff8; }
.coach-function-live[hidden] { display:none; }
.coach-function-live-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:8px; background:#35d6a0; color:#073b2d; font-weight:1000; }
.coach-function-live-copy { display:grid; gap:2px; min-width:0; }
.coach-function-live-copy b { color:#f4fff9; font-size:11.5px; line-height:1.3; overflow-wrap:anywhere; }
.coach-function-live-copy small { color:#a8d8c6; font-size:10px; line-height:1.35; }
.coach-function-guide { margin:10px 0; padding:10px; border:1px solid rgba(82,190,255,.2); border-radius:12px; background:rgba(25,77,105,.18); }
.coach-function-guide-head { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#d9f2ff; font-size:11.5px; font-weight:900; }
.coach-function-guide-head small { color:#89b7c9; font-size:9.5px; }
.coach-function-guide ul { display:grid; gap:4px; margin:8px 0 0; padding-left:17px; color:#b8d8e4; font-size:10.5px; line-height:1.4; }
.coach-function-guide li b { color:#eafff7; }
.coach-module-route { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.coach-module-route span { display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border-radius:999px; background:rgba(53,214,160,.10); color:#bce9d8; font-size:9.5px; font-weight:800; }
.coach-module-route i { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:rgba(53,214,160,.22); color:#eafff6; font-size:8px; font-style:normal; }
.program-branch { position: relative; margin: 3px 0; padding-bottom: 2px; }
.program-branch::before { content: ''; position: absolute; left: calc(var(--tree-depth, 0) * 18px + 8px); top: 20px; bottom: 4px; width: 2px; background: rgba(138,79,208,.72); pointer-events: none; }
.program-branch-head { margin-left: calc(var(--tree-depth, 0) * 18px); min-height: 42px; }
.branch-icon { color: #d4adff; font-size: 20px; }
.if-icon { color: #b9a0ff; font-weight: 900; }
.branch-label { color: #f1e9ff; font-size: 14px; font-weight: 800; }
.program-branch-body { position: relative; margin-left: calc(var(--tree-depth, 0) * 18px + 20px); padding-left: 2px; }
.program-if-arm { position: relative; }
.if-arm-label { color: #9fb9ad; font-size: 10.5px; margin: 2px 0 0 15px; }
.branch-collapse { width: 24px; height: 24px; background: transparent; color: #bbd4c8; border-radius: 5px; font-size: 17px; }
.branch-collapse:hover { background: rgba(255,255,255,.1); }
.branch-summary { margin-left: calc(var(--tree-depth, 0) * 18px + 48px); color: #94b1a3; font-size: 11px; }
.program-insert-point { display: flex; align-items: center; justify-content: center; gap: 5px; width: calc(100% - var(--tree-depth, 0) * 18px); min-height: 12px; margin: 0; padding: 0; border: 0; border-radius: 6px; color: transparent; background: transparent; }
.program-insert-point:hover, .program-insert-point.is-active { min-height: 26px; color: #39d99f; background: rgba(53,230,161,.06); }
.insert-line { flex: 1; height: 1px; background: currentColor; opacity: .4; }
.insert-plus { font-size: 15px; line-height: 1; }
.insert-label { font-size: 11px; font-weight: 800; }
.program-empty-insert { width: 100%; min-height: 42px; border: 1px dashed rgba(53,230,161,.34); border-radius: 7px; color: #39d99f; background: transparent; font-size: 12px; font-weight: 800; }
.program-empty-insert:hover { background: rgba(53,230,161,.08); }
.floating-command-palette { position: fixed; z-index: 600; width: min(280px, calc(100vw - 24px)); max-height: 350px; overflow: auto; padding: 12px; border: 1px solid rgba(53,230,161,.42); border-radius: 12px; background: rgba(3,31,27,.98); box-shadow: 0 18px 42px rgba(0,0,0,.4); color: #eafff4; }
.floating-command-palette[hidden] { display: none; }
.floating-command-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.floating-command-head strong { font-size: 14px; }
.floating-command-close { background: transparent; color: #a4c9b8; font-size: 20px; }
.floating-command-search { width: 100%; margin-bottom: 8px; padding: 7px 9px; border: 1px solid rgba(62,205,157,.34); border-radius: 7px; background: rgba(1,20,18,.8); color: #eafff4; }
.floating-command-list { display: grid; gap: 5px; }
.floating-command-item { text-align: left; padding: 7px 9px; border-radius: 7px; background: rgba(13,73,56,.8); color: #eafff4; font-size: 12px; }
.floating-command-item:hover { background: rgba(26,133,95,.82); }
body:has(.tb-page) .tb-left .tb-cardhost > .tc-plan { padding-top: 4px; }
body:has(.tb-page) .tb-left .tb-cardhost .program-tree { padding-top: 2px; }
body:has(.tb-page) .tb-left .tb-cardhost .program-action-line, body:has(.tb-page) .tb-left .tb-cardhost .program-branch-head { min-height: 36px; font-size: 12px; }
body:has(.tb-page) .tb-left .tb-cardhost .program-action-main { font-size: 12.5px; }
body:has(.tb-page) .tb-left .tb-cardhost .program-param { font-size: 11px; }
@media (min-width: 1500px) {
  body:has(.tb-page) .tb-page .tb-layout { grid-template-columns: minmax(560px, 600px) minmax(680px, 1fr) minmax(280px, 310px); }
}
body:has(.tb-page) .tb-tab { background: rgba(4, 31, 28, .78); color: #9cbcaf; }
body:has(.tb-page) .tb-tab.on { background: #0c9d6c; color: #fff; box-shadow: 0 3px 0 #056246; }
body:has(.tb-page) .tb-code, body:has(.tb-page) .tb-cpp, body:has(.tb-page) #pyCode { background: #061a1b; color: #d9f9eb; }
body:has(.tb-page) .tb-help, body:has(.tb-page) .tb-readonly { color: #8eafa2; }
body:has(.tb-page) .pitch-wrap { background: linear-gradient(160deg, #063f32, #031d22); border: 1px solid rgba(45, 199, 152, .40); box-shadow: 0 18px 46px rgba(0, 0, 0, .36); }
body:has(.tb-page) .pitch-hint { color: #a6c7b9; }
body:has(.tb-page) .coach-chip.ok { background: rgba(36, 169, 105, .22); color: #73e9ad; }
body:has(.tb-page) .coach-chip.bad { background: rgba(186, 67, 67, .24); color: #ffaaaa; }
body:has(.tb-page) .coach-result.win { background: rgba(36, 169, 105, .22); color: #87efb9; }
body:has(.tb-page) .coach-result.lose { background: rgba(186, 67, 67, .24); color: #ffb0a7; }
body:has(.tb-page) .tl-empty { color: #8eafa2; }
/* 工作台按 1920×1080 参考稿比例锁定：移除底部时间线后，三栏占满释放出的纵向空间。 */
body:has(.tb-page) .tb-page { width:calc(100% - 7.6vw); max-width:none; padding:16px 0 20px; }.tb-page .lv-head { min-height:142px; padding:18px 22px; margin-bottom:16px; }.tb-page .lv-head-top { margin-bottom:8px; }.tb-page .lv-title { font-size:25px; }.tb-page .story { font-size:14px; }.tb-page .tb-layout { width:100%; grid-template-columns:minmax(320px,29fr) minmax(520px,48fr) minmax(260px,23fr); gap:16px; align-items:stretch; justify-content:stretch; }.tb-page .tb-left,.tb-page .tb-center,.tb-page .tb-right { min-height:680px; }.tb-page .tb-left { width:auto; }.tb-page .tb-center { display:flex; flex-direction:column; align-items:stretch; }.tb-page .board-wrap { flex:1; min-height:650px; display:flex; align-items:center; justify-content:center; padding:8px; border:1px solid rgba(52,203,158,.42); border-radius:18px; background:rgba(2,27,25,.74); overflow:hidden; }.tb-page #board { max-width:100%; max-height:650px; }.tb-page .tb-right { padding:18px 16px; }.tb-page .coach-title { font-size:21px; padding:8px 4px 15px; border-bottom:1px solid rgba(66,196,154,.18); }.tb-page .coach-body { min-height:595px; }.tb-page .coach-sub { margin-top:18px; }.tb-page .coach-row { padding:8px 4px; border-bottom:1px solid rgba(64,178,143,.12); }

@media (max-width: 860px) {
  .auth-page { place-items: center; grid-template-columns: 1fr; padding: 24px 16px; }
  .auth-card { width: min(500px, 100%); }
}

@media (max-width: 1450px) {
  .tb-page .lv-head-lower { align-items:stretch; flex-direction:column; gap:10px; }
  .tb-page .lv-head-lower .lv-head-actions { width:100%; justify-content:flex-start; margin-left:0; }
}

/* Final pixel-match pass: keep the custom two-column auth shell intact after legacy overrides. */
  .auth-page { display: block; min-height: 100vh; padding: 0 3.2vw 34px; position: relative; overflow: hidden; background-color: #021714; background-image: linear-gradient(90deg, rgba(1,18,18,.84), rgba(1,13,19,.94)), url('../assets/generated/ui/login-stadium-night.webp'); background-position: center; background-size: cover; background-attachment: fixed; background-blend-mode: multiply, normal; }
.auth-page::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse at 12% 75%, rgba(20,166,125,.12), transparent 42%), linear-gradient(135deg, rgba(2,31,29,.38), transparent 38%); }
.auth-page > .auth-topbar { width:100%; max-width:1580px; margin:0 auto; position:relative; z-index:1; }
.auth-page > .auth-shell { width:calc(100% - 132px); max-width:1370px; margin:0 132px 0 auto; position:relative; z-index:1; }
.auth-province-rail { position: absolute; right: 2.1vw; top: 160px; bottom: 56px; width: 108px; display: flex; flex-direction: column; justify-content: space-around; z-index: 2; }
.auth-rail-item { display:flex; align-items:center; gap:8px; color: rgba(218,240,231,.5); }.auth-rail-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(180,226,207,.26); border-radius:10px; color:rgba(214,247,231,.68); font-size:17px; background:rgba(5,42,34,.35); }.auth-rail-item b,.auth-rail-item small { display:block; white-space:nowrap; }.auth-rail-item b { font-size:11px; }.auth-rail-item small { font-size:8px; color:rgba(186,221,204,.45); margin-top:3px; }
@media (max-width: 1100px) { .auth-page > .auth-shell { width:100%; margin:0 auto; } }
@media (max-width: 860px) { .auth-page { display:block; padding:0 16px 24px; }.auth-page > .auth-shell { grid-template-columns:1fr; }.auth-page > .auth-topbar { height:72px; } }
@media (max-width: 1400px) { .auth-province-rail { display:none; }.auth-page > .auth-shell { width:100%; margin:0 auto; } }

/* FINAL REFERENCE LOCK — must remain last so legacy rules cannot alter screenshot proportions. */
@media (min-width: 1181px) {
  .auth-page { padding:0; }
  .auth-page > .auth-topbar { width:calc(1582 * var(--ref-s)); max-width:none; height:calc(102 * var(--ref-s)); margin:0 auto; }
  .auth-page > .auth-shell { width:calc(1104 * var(--ref-s)); max-width:none; min-height:0; height:calc(770 * var(--ref-s)); margin:0 0 0 calc(314 * var(--ref-s)); left:calc(-195 * var(--ref-s)); grid-template-columns:calc(564 * var(--ref-s)) calc(500 * var(--ref-s)); gap:calc(40 * var(--ref-s)); align-items:center; }
  .auth-hero-copy { width:calc(564 * var(--ref-s)); padding:calc(88 * var(--ref-s)) 0 0; align-self:start; }
  .auth-kicker { font-size:calc(12 * var(--ref-s)); margin-bottom:calc(30 * var(--ref-s)); }
  .auth-hero-copy h1 { font-size:calc(74 * var(--ref-s)); line-height:.98; }
  .auth-hero-copy p { font-size:calc(21 * var(--ref-s)); margin:calc(28 * var(--ref-s)) 0 calc(42 * var(--ref-s)); }
  .auth-features { width:calc(564 * var(--ref-s)); max-width:none; grid-template-columns:repeat(4,calc(132 * var(--ref-s))); gap:calc(12 * var(--ref-s)); }
  .auth-feature { width:calc(132 * var(--ref-s)); height:calc(118 * var(--ref-s)); min-height:0; padding:calc(18 * var(--ref-s)) calc(9 * var(--ref-s)); }
  .auth-card { width:calc(500 * var(--ref-s)); height:calc(770 * var(--ref-s)); padding:calc(38 * var(--ref-s)) calc(38 * var(--ref-s)) calc(30 * var(--ref-s)); overflow:auto; }
  .auth-mascot { width:calc(122 * var(--ref-s)); height:calc(122 * var(--ref-s)); margin:calc(-2 * var(--ref-s)) auto calc(6 * var(--ref-s)); }
  .auth-card h2 { font-size:calc(28 * var(--ref-s)); }
  .auth-card-sub { font-size:calc(13 * var(--ref-s)); margin-bottom:calc(20 * var(--ref-s)); }
  .auth-form .auth-tabs { height:calc(48 * var(--ref-s)); }
  .auth-tabs button { font-size:calc(15 * var(--ref-s)); }
  .auth-field { margin-bottom:calc(11 * var(--ref-s)); }
  .auth-field>span,.auth-options { font-size:calc(12 * var(--ref-s)); }
  .auth-card .inp { height:calc(54 * var(--ref-s)); padding:0 calc(14 * var(--ref-s)); font-size:calc(14 * var(--ref-s)); }
  .auth-submit { height:calc(59 * var(--ref-s)); font-size:calc(17 * var(--ref-s)); }
  .auth-province-rail { display:flex; right:calc(29 * var(--ref-s)); top:calc(156 * var(--ref-s)); bottom:calc(54 * var(--ref-s)); width:calc(112 * var(--ref-s)); z-index:0; opacity:.76; }
  body:has(.cities-view) .container { max-width:none; padding:calc(28 * var(--ref-s)) calc(134 * var(--ref-s)) calc(28 * var(--ref-s)); }
  body:has(.cities-view) .cities-head { height:calc(95 * var(--ref-s)); margin:0; padding-left:calc(20 * var(--ref-s)); }
  body:has(.cities-view) .cities-layout { grid-template-columns:calc(1085 * var(--ref-s)) calc(300 * var(--ref-s)); gap:calc(30 * var(--ref-s)); }
  body:has(.cities-view) .cities-list,body:has(.cities-view) .cities-promo { height:calc(710 * var(--ref-s)); min-height:0; }
  body:has(.cities-view) .prov-head { height:calc(66 * var(--ref-s)); min-height:0; }
  body:has(.cities-view) .city { height:calc(106 * var(--ref-s)); min-height:0; padding:calc(15 * var(--ref-s)) calc(22 * var(--ref-s)); }
  body:has(.tb-page) .tb-page { width:calc(1535 * var(--ref-s)); height:calc(850 * var(--ref-s)); max-width:none; padding:calc(10 * var(--ref-s)) 0; }
  body:has(.tb-page) .tb-page .lv-head { height:calc(154 * var(--ref-s)); min-height:0; padding:calc(18 * var(--ref-s)) calc(22 * var(--ref-s)); margin-bottom:calc(16 * var(--ref-s)); }
  body:has(.tb-page) .tb-page .tb-layout { height:calc(656 * var(--ref-s)); grid-template-columns:calc(420 * var(--ref-s)) calc(700 * var(--ref-s)) calc(380 * var(--ref-s)); gap:calc(16 * var(--ref-s)); align-items:stretch; }
  body:has(.tb-page) .tb-page .tb-left,body:has(.tb-page) .tb-page .tb-center,body:has(.tb-page) .tb-page .tb-right { height:calc(656 * var(--ref-s)); min-height:0; }
  body:has(.tb-page) .tb-page .board-wrap { height:calc(621 * var(--ref-s)); min-height:0; }
  /* Canvas 必须保持每关真实网格比例，禁止用固定宽高把 9×7、11×9 等地图横向拉伸。 */
  body:has(.tb-page) .tb-page #board { width:auto !important; height:auto !important; max-width:100%; max-height:calc(621 * var(--ref-s)); }
  body:has(.tb-page) .tb-page .coach-body { min-height:calc(561 * var(--ref-s)); }
}

/* 工作台右栏按照参考稿拆成教练介绍、控球、关卡信息和小贴士。 */
.coach-header { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; padding:2px 2px 14px; border-bottom:1px solid rgba(66,196,154,.18); }
.coach-avatar { width:64px; height:76px; object-fit:contain; align-self:start; filter:drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.coach-header-copy { min-width:0; }
.coach-header .coach-title { margin:0 0 5px; padding:0; border:0; font-size:20px; }
.coach-level { display:flex; align-items:center; gap:7px; margin-bottom:5px; font-size:11px; color:#b8d7ca; }
.coach-level b { padding:2px 7px; border:1px solid rgba(57,223,165,.55); border-radius:999px; color:#61e8b5; }
.coach-quote { margin:0; color:#bfd9ce; font-size:11.5px; line-height:1.5; }
.coach-section { margin-top:10px; padding:9px 10px; border:1px solid rgba(54,191,146,.18); border-radius:10px; background:rgba(5,51,43,.36); }
.coach-section .coach-sub { margin:0 0 5px; color:#54dfa9; }
.coach-section .coach-row { padding:5px 0; }
.coach-section .coach-row:last-child { border-bottom:0; }
.coach-reward { color:#ffc733; font-weight:800; }
.coach-tip { display:grid; gap:5px; margin-top:10px; padding:10px 11px; border:1px solid rgba(64,201,155,.24); border-radius:10px; background:rgba(6,62,51,.42); color:#bddbce; font-size:11.5px; line-height:1.55; }
.coach-tip b { color:#f0fff7; }

/* 教练栏以行动为中心：主任务常驻，规则和场地细节按需展开。 */
.coach-mission { margin-top:12px; padding:14px; border:1px solid rgba(61,226,169,.55); border-radius:14px; background:linear-gradient(145deg,rgba(13,91,68,.72),rgba(4,49,42,.82)); box-shadow:inset 0 0 24px rgba(48,225,166,.06),0 10px 26px rgba(0,0,0,.16); }
.coach-mission-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.coach-mission-kicker { color:#73f1bf; font-size:15px; font-weight:900; letter-spacing:.08em; }
.coach-mission-reward { padding:3px 8px; border-radius:999px; background:rgba(255,190,38,.14); color:#ffd05b; font-size:11px; font-weight:900; }
.coach-task-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; counter-reset:coach-task; }
.coach-task-list li { position:relative; min-height:28px; padding:5px 6px 5px 35px; color:#f2fff8; font-size:13px; font-weight:750; line-height:1.45; }
.coach-task-list li::before { counter-increment:coach-task; content:counter(coach-task); position:absolute; left:0; top:2px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#20c987; color:#03251d; font-size:12px; font-weight:950; box-shadow:0 0 0 3px rgba(32,201,135,.12); }
.coach-now { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:9px 11px; border-radius:9px; background:rgba(0,23,21,.55); color:#a9cbbd; font-size:12px; }
.coach-now strong { color:#fff; font-size:13px; }
.coach-details { margin-top:9px; border:1px solid rgba(54,191,146,.18); border-radius:10px; background:rgba(4,43,38,.34); overflow:hidden; }
.coach-details summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 11px; color:#c9e7da; font-size:12px; font-weight:800; cursor:pointer; list-style:none; }
.coach-details summary::-webkit-details-marker { display:none; }
.coach-details summary::after { content:'＋'; order:3; color:#57dea9; font-size:16px; line-height:1; }
.coach-details[open] summary::after { content:'－'; }
.coach-details summary small { margin-left:auto; color:rgba(201,231,218,.45); font-size:10px; font-weight:600; }
.coach-details-body { padding:2px 11px 9px; border-top:1px solid rgba(54,191,146,.12); }
.coach-details-body .coach-row { padding:7px 0; }
.coach-runtime-details summary { color:#9eeccc; }
.coach-progress-details summary { color:#ffe08a; }
.coach-runtime-details .coach-details-body,
.coach-progress-details .coach-details-body { display:grid; gap:0; }
.coach-runtime-details .coach-row,
.coach-progress-details .coach-row { min-height:34px; align-items:center; }
.coach-runtime-details .coach-k,
.coach-progress-details .coach-k { min-width:52px; font-size:11px; font-weight:850; }
.coach-runtime-details .coach-v,
.coach-progress-details .coach-v { font-size:12px; line-height:1.45; }
.coach-mission + .coach-details { margin-top:10px; }
.coach-details-body .coach-rule-primary { margin:0 -5px; padding:8px 7px; border-bottom:1px solid rgba(70,226,172,.18); background:rgba(22,111,82,.18); }
.coach-details-body .coach-rule-primary .coach-k { color:#75e9bd; font-weight:850; }
.coach-details-body .coach-rule-primary .coach-v,.coach-details-body .coach-rule-primary .coach-strong { color:#fff6d7; }
.coach-start-tip { display:grid; gap:4px; margin-top:12px; padding:11px 12px; border-left:3px solid #f4b82d; border-radius:4px 10px 10px 4px; background:rgba(96,66,10,.25); }
.coach-start-tip>span { color:#ffc84d; font-size:10px; font-weight:900; letter-spacing:.12em; }
.coach-start-tip b { color:#fff5d7; font-size:12px; line-height:1.45; }
.coach-start-tip small { color:rgba(236,224,190,.68); font-size:10.5px; line-height:1.45; }
.coach-field-rules { margin-top:10px; padding:12px; border:1px solid rgba(89,207,255,.42); border-radius:13px; background:linear-gradient(145deg,rgba(8,58,75,.72),rgba(4,38,50,.82)); box-shadow:inset 0 0 20px rgba(70,194,255,.05); }
.coach-field-rules-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:1px solid rgba(100,205,248,.18); }
.coach-field-rules-head span { color:#9ce3ff; font-size:14px; font-weight:950; letter-spacing:.08em; }
.coach-field-rules-head small { color:rgba(200,235,246,.68); font-size:10px; }
.coach-field-rules-list { display:grid; gap:7px; padding-top:8px; }
.coach-field-rule { display:grid; grid-template-columns:70px minmax(0,1fr); gap:8px; align-items:start; margin:0; }
.coach-field-rule-title { color:#ffe18b; font-size:11px; font-weight:900; }
.coach-field-rule p { margin:0; color:#edfaff; font-size:11.5px; line-height:1.48; }
.coach-runtime-unknowns { margin-top:9px; padding:8px 9px; border-left:3px solid #ffb84d; border-radius:5px 9px 9px 5px; background:rgba(104,66,9,.25); }
.coach-runtime-unknowns b { color:#ffc85d; font-size:10.5px; }
.coach-runtime-unknowns ul { display:grid; gap:3px; margin:5px 0 0; padding-left:17px; color:#fff2d1; font-size:10.5px; line-height:1.4; }
.coach-hint-entry { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; padding:9px 10px; border:1px solid rgba(236,190,78,.24); border-radius:10px; background:rgba(74,54,14,.22); }
.coach-hint-entry>div { display:grid; gap:2px; }
.coach-hint-entry b { color:#ffdc78; font-size:12px; }
.coach-hint-entry small { color:rgba(246,229,185,.62); font-size:9.5px; }
.coach-hint-button { flex:0 0 auto; padding:6px 9px; border:1px solid rgba(255,207,89,.5); border-radius:8px; background:rgba(163,105,10,.34); color:#fff0bd; font-size:10.5px; font-weight:850; cursor:pointer; }
.coach-hint-button:hover,.coach-hint-button:focus-visible { border-color:#ffd66b; background:rgba(191,126,12,.48); color:#fff; }

/* 城市页即使缺少省份横幅图，也保留参考稿的横幅构图、层次和文字比例。 */
.prov-head { position:relative; overflow:hidden; isolation:isolate; }
.prov-head::before { content:''; position:absolute; inset:0; z-index:-2; opacity:.9; background:
  linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.42) 42%,rgba(255,255,255,.08)),
  radial-gradient(ellipse at 84% 80%,color-mix(in srgb,var(--prov) 32%,transparent),transparent 48%); }
.prov-head::after { content:''; position:absolute; right:18px; bottom:-20px; width:42%; height:82px; z-index:-1; opacity:.5; background:linear-gradient(145deg,transparent 45%,color-mix(in srgb,var(--prov) 42%,transparent) 46% 52%,transparent 53%),linear-gradient(20deg,transparent 52%,rgba(255,255,255,.26) 53% 57%,transparent 58%); transform:skewX(-10deg); }
.prov-head .prov-name { color:#112e28; text-shadow:0 1px rgba(255,255,255,.55); }
.prov-head .prov-sub { color:#31584c; }
.prov-hlj .prov-head::after { border-radius:50%; transform:skewX(-8deg) scaleY(.7); }
.prov-ln .prov-head::after { clip-path:polygon(0 70%,15% 48%,29% 60%,40% 20%,53% 62%,66% 35%,78% 67%,100% 42%,100% 100%,0 100%); background:color-mix(in srgb,var(--prov) 36%,transparent); }
.prov-jl .prov-head::after { clip-path:polygon(0 100%,14% 30%,24% 100%,39% 4%,51% 100%,68% 18%,80% 100%,93% 42%,100% 100%); background:color-mix(in srgb,var(--prov) 42%,transparent); }
.prov-nmg .prov-head::after { border-radius:50% 50% 0 0; background:color-mix(in srgb,var(--prov) 34%,transparent); transform:skewX(-9deg) scaleY(.55); }
.cities-promo { display:flex; flex-direction:column; align-items:center; }
.cities-promo img { margin-top:auto; margin-bottom:auto; }

/* 首页要能查看全部单元；导航保持吸顶，正文按内容自然产生纵向滚动。 */
html, body { overflow-x:hidden; overflow-y:auto; }
body:has(.home-hero) .container { overflow:visible; padding-bottom:96px; }
body:has(.home-hero) .home-season.card { height:auto; overflow:visible; }

/* 分层提示按钮悬停时维持深色高对比，避免浅底白字不可读。 */
.lv-head-actions .hint-action,
.lv-head-actions .hint-action:visited { background:#3e5964; color:#f6fffb; border:1px solid rgba(186,225,211,.26); text-shadow:0 1px 1px rgba(0,0,0,.28); }
.lv-head-actions .hint-action:hover,
.lv-head-actions .hint-action:focus-visible { background:#53717c; color:#fff; filter:none; }
.lv-head-actions .hint-action:active { background:#314952; color:#fff; }

/* 操作区换成第二行时，标题卡必须随内容增高，不能继续套用旧版固定高度。 */
@media (min-width:861px) and (max-width:1450px) {
  body:has(.tb-page) .tb-page .lv-head { height:auto; min-height:0; }
  body:has(.tb-page) .tb-page .lv-head-lower { align-items:stretch; flex-direction:column; gap:10px; }
  body:has(.tb-page) .tb-page .lv-head-actions { width:100%; justify-content:flex-end; margin-left:0; }
}

/* 右侧教练信息在深色面板上强制使用高对比文字，避免选中/悬停后消失。 */
.tb-page .coach-section, .tb-page .coach-tip { color:#eafff4; }
.tb-page .coach-section b, .tb-page .coach-section strong, .tb-page .coach-row b { color:#f4fff9; }
.tb-page .coach-section .coach-dim, .tb-page .coach-section span { color:rgba(225,247,237,.78); }

.interactive-guide-mask { position:fixed; inset:0; z-index:120; pointer-events:none; }
.interactive-guide { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); width:min(430px,calc(100vw - 28px)); padding:16px 18px; border:2px solid #35e6a1; border-radius:16px; background:rgba(3,31,28,.97); color:#effff8; box-shadow:0 18px 52px rgba(0,0,0,.5); pointer-events:auto; }
.interactive-guide h2 { margin:0 0 7px; font-size:19px; color:#62efba; }.interactive-guide-copy { margin:0 0 10px; line-height:1.55; color:#e7fff4; }.interactive-guide-progress { display:inline-flex; margin-bottom:10px; padding:3px 9px; border-radius:999px; background:#0f7656; color:#cffff0; font:800 12px ui-monospace,monospace; }.interactive-guide .btn { width:100%; }.guide-focus { position:relative!important; z-index:125!important; box-shadow:0 0 0 4px #ffd347,0 0 28px rgba(255,211,71,.9)!important; animation:guidePulse 1.1s ease-in-out infinite; }
@keyframes guidePulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.35)} }

/* 统一选中态：示例稿中的绿色高亮必须同时保证文字可读。 */
.tb-tab.on, .mode-tabs button.on, .navlink.on, .city.sel, .rank-row.me { color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.42); }
.tb-tab.on, .mode-tabs button.on { background:#0fae78 !important; border-color:#47e4b1 !important; }
.rank-row.me { background:linear-gradient(145deg,rgba(5,74,57,.96),rgba(2,39,36,.96)); border:2px solid #35e6a1; }
body:has(.rank-list) { background:#031719; background-image:linear-gradient(180deg,rgba(1,20,22,.72),rgba(1,12,16,.95)),url('../assets/generated/ui/home-stadium-night.webp'); background-size:cover; background-attachment:fixed; color:#effff8; }
body:has(.rank-list) .page-head h2, body:has(.rank-list) .page-head p { color:#effff8; }
body:has(.rank-list) .rank-row { background:linear-gradient(145deg,rgba(4,53,46,.94),rgba(2,28,30,.96)); border:1px solid rgba(62,211,166,.32); color:#effff8; box-shadow:0 12px 30px rgba(0,0,0,.24); }
body:has(.rank-list) .rank-style { color:rgba(222,246,236,.68); }
body:has(.rank-list) .rank-pts { color:#ffc733; }

/* 交互状态的统一可读性基线：悬浮只改变底色/边框，不用滤镜洗淡文字。 */
.btn:hover:not(.guide-focus),
.btn:focus-visible:not(.guide-focus) { filter: none; }
.btn:disabled { opacity: .62; }
.tc-tool.dis,
.variant-tab:disabled { opacity: .68; }
.tc-tool.dis { color: #697784; background: #e9eef2; }
.coach-details summary small { color: rgba(201,231,218,.7); }
body:has(.tb-page) .interactive-guide-mask { z-index: 200; }
body:has(.tb-page) .interactive-guide { z-index: 201; }
body:has(.tb-page) .ux-mask { z-index: 240; }
body:has(.tb-page) .ux-dialog { color: #173e2d; }
body:has(.tb-page) .ux-dialog h2 { color: #0b6f4d; }
body:has(.tb-page) .ux-dialog .ux-lead { color: #244c3b; }
body:has(.tb-page) .ux-dialog .ux-note { color: #476657; background: #f1f7f2; }
body:has(.tb-page) .ux-dialog-actions .btn.gray { background: #eef2ee; color: #314b3e; }
/* 牌面按钮和标签在深色工作台上使用更深的色阶，避免白字贴底看不清。 */
body:has(.tb-page) .tc-move, body:has(.tb-page) .tc-pass,
body:has(.tb-page) .tc-shoot, body:has(.tb-page) .tc-wait,
body:has(.tb-page) .tc-if { color:#ffffff; text-shadow:0 1px 2px rgba(0,0,0,.42); }
body:has(.tb-page) .tc-move { background:#16834e; }
body:has(.tb-page) .tc-pass { background:#2459b8; }
body:has(.tb-page) .tc-shoot { background:#d94b1f; }
body:has(.tb-page) .tc-wait { background:#5e6b79; }
body:has(.tb-page) .tc-if { background:#6635a6; }
body:has(.tb-page) .tc-for { background:#d29400; color:#2f2300; }
body:has(.tb-page) .tb-tab.on { background:#087c58 !important; color:#ffffff !important; }
body:has(.tb-page) .tc-ops button { color:#334250; }
body:has(.tb-page) .home-lv.locked { color: #9ab2a8; }

/* 战术页操作区可读性锁定：全局 .btn.gray:hover 不能覆盖深色工作台的文字对比度。 */
body:has(.tb-page) .lv-head-actions,
body:has(.tb-page) .lv-head-top {
  position: relative;
  z-index: 130;
  isolation: isolate;
  opacity: 1;
  filter: none;
}
body:has(.tb-page) .lv-head-actions .btn,
body:has(.tb-page) .lv-head-top > .btn {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.38);
  -webkit-text-fill-color: currentColor;
}
body:has(.tb-page) .lv-head-actions .btn.gray,
body:has(.tb-page) .lv-head-top > .btn.gray {
  background: rgba(83,110,122,.92);
  color: #f4fffb;
  border: 1px solid rgba(186,225,211,.26);
  box-shadow: 0 3px 0 rgba(42,63,70,.9), 0 6px 14px rgba(0,0,0,.16);
}
body:has(.tb-page) .lv-head-actions .btn.gray:hover,
body:has(.tb-page) .lv-head-actions .btn.gray:focus-visible,
body:has(.tb-page) .lv-head-top > .btn.gray:hover,
body:has(.tb-page) .lv-head-top > .btn.gray:focus-visible {
  background: #53717c;
  color: #ffffff;
  border-color: rgba(213,247,233,.56);
  filter: none;
  box-shadow: 0 3px 0 #2a3f46, 0 0 0 2px rgba(83,225,179,.2), 0 8px 16px rgba(0,0,0,.22);
}
body:has(.tb-page) .lv-head-actions .btn.gray:active,
body:has(.tb-page) .lv-head-top > .btn.gray:active {
  background: #314952;
  color: #ffffff;
  box-shadow: 0 1px 0 #24373d, 0 3px 8px rgba(0,0,0,.22);
}
body:has(.tb-page) .lv-head-actions .btn.amber,
body:has(.tb-page) .lv-head-actions .btn.amber:hover,
body:has(.tb-page) .lv-head-actions .btn.amber:focus-visible {
  background: linear-gradient(90deg, #f0a900, #ffca2e);
  color: #3f2b00;
  border-color: rgba(255,220,103,.72);
  filter: none;
}
body:has(.tb-page) .lv-head-actions .btn.green,
body:has(.tb-page) .lv-head-actions .btn.green:hover,
body:has(.tb-page) .lv-head-actions .btn.green:focus-visible {
  background: linear-gradient(90deg, #14ad6e, #22d589);
  color: #ffffff;
  border-color: rgba(130,255,205,.52);
  filter: none;
}
body:has(.tb-page) .lv-head-actions .btn:disabled {
  opacity: .72;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
body:has(.tb-page) .lv-head-actions .btn.amber:disabled { color: #4a3500; }
body:has(.tb-page) .lv-head .goal-primary {
  background:#eaf8ef;
  color:#145f42;
  border-color:#9ed8ba;
  text-shadow:none;
}

/* 关卡提示可能因目标数量增加而换行，标题卡必须随内容增高。 */
@media (min-width:1181px) {
  body:has(.tb-page) .tb-page .lv-head {
    height:auto;
    min-height:calc(154 * var(--ref-s));
  }
}

@media (max-width: 860px) {
  .home-onboarding { position:relative; right:auto; bottom:auto; width:100%; max-height:none; overflow:visible; }
  body:has(.tb-page) .lv-title { max-width:calc(100vw - 90px); line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  body:has(.tb-page) .lv-head-top > .btn { flex:0 0 auto; min-width:52px; }
  body:has(.tb-page) .goal-pill { white-space:normal; line-height:1.25; }
  body:has(.tb-page) .lv-head-actions { flex-wrap:wrap; gap:7px; }
  body:has(.tb-page) .lv-title-tools { margin-left:0; flex:0 0 auto; padding-left:0; }
  body:has(.tb-page) .lv-head-top .level-budget { margin-left:0; }
}

/* 悬浮/聚焦时保持教练信息的对比度，避免提示文字被背景吞掉。 */
body:has(.tb-page) .coach-details summary:hover,
body:has(.tb-page) .coach-details summary:focus-visible {
  background: rgba(24,113,84,.42);
  color: #f5fffa;
  outline: 2px solid rgba(81,225,174,.38);
  outline-offset: -2px;
}
body:has(.tb-page) .coach-details summary:hover small,
body:has(.tb-page) .coach-details summary:focus-visible small { color: #d8f2e7; }
body:has(.tb-page) .coach-task-list li:hover { background: rgba(30,138,101,.18); border-radius: 8px; color: #fff; }
@media (max-width: 860px) {
  body:has(.tb-page) .interactive-guide { bottom: max(12px, env(safe-area-inset-bottom)); max-height: min(42vh, 330px); overflow-y: auto; }
}

@media (min-width:1181px) {
  .tb-page .coach-header { grid-template-columns:calc(64 * var(--ref-s)) minmax(0,1fr); gap:calc(12 * var(--ref-s)); padding-bottom:calc(12 * var(--ref-s)); }
  .tb-page .coach-avatar { width:calc(64 * var(--ref-s)); height:calc(76 * var(--ref-s)); }
  .tb-page .coach-header .coach-title { font-size:calc(20 * var(--ref-s)); }
  .tb-page .coach-quote { font-size:calc(11.5 * var(--ref-s)); }
  .tb-page .coach-section,.tb-page .coach-tip { margin-top:calc(9 * var(--ref-s)); padding:calc(8 * var(--ref-s)) calc(10 * var(--ref-s)); }
  .tb-page .coach-row { font-size:calc(12 * var(--ref-s)); padding:calc(4 * var(--ref-s)) 0; }
  .tb-page .coach-sub { font-size:calc(11.5 * var(--ref-s)); }
  .tb-page .coach-tip { font-size:calc(11.5 * var(--ref-s)); }
  .tb-page .coach-mission { margin-top:calc(10 * var(--ref-s)); padding:calc(12 * var(--ref-s)); }
  .tb-page .coach-task-list { gap:calc(5 * var(--ref-s)); }
  .tb-page .coach-task-list li { min-height:calc(25 * var(--ref-s)); padding:calc(4 * var(--ref-s)) calc(5 * var(--ref-s)) calc(4 * var(--ref-s)) calc(31 * var(--ref-s)); font-size:calc(12 * var(--ref-s)); }
  .tb-page .coach-task-list li::before { width:calc(22 * var(--ref-s)); height:calc(22 * var(--ref-s)); font-size:calc(11 * var(--ref-s)); }
}

/* Responsive safety net: the desktop reference-lock above must never force
   the three-column workbench wider than a tablet/phone viewport. */
@media (max-width:1180px) {
  body:has(.tb-page) .tb-page {
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  body:has(.tb-page) .tb-layout {
    width: 100%;
    height: auto;
    align-items: stretch;
  }
  body:has(.tb-page) .tb-left,
  body:has(.tb-page) .tb-center,
  body:has(.tb-page) .tb-right {
    width: auto;
    height: auto;
    min-height: 0;
  }
  body:has(.tb-page) .tb-page .board-wrap {
    height: auto;
    min-height: 280px;
    max-height: none;
  }
  body:has(.tb-page) .tb-page #board {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    max-height: none;
  }
  body:has(.tb-page) .tb-page .coach-body {
    min-height: 0;
  }
}

@media (max-width:760px) {
  body:has(.tb-page) .tb-layout {
    grid-template-columns: 1fr;
  }
  body:has(.tb-page) .tb-right {
    grid-column: auto;
  }
  body:has(.tb-page) .lv-head-top {
    align-items: flex-start;
  }
  body:has(.tb-page) .lv-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  body:has(.tb-page) .lv-head-actions {
    flex-wrap: wrap;
  }
}


/* Accessibility/readability hardening for interactive states.
   Keep labels readable when a pointer enters a control, including dark workbench
   panels and disabled/preview controls.  These rules intentionally live last so
   legacy theme overrides cannot wash out text with opacity or filter effects. */
.btn:hover,
.btn:focus-visible,
.btn:active { filter: none; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 1;
  cursor: not-allowed;
  filter: none;
  transform: none;
  color: #5d6c64;
  background: #e2e8e3;
  border-color: #c3cec5;
  box-shadow: 0 2px 0 #c3cec5;
  text-shadow: none;
}

/* Override the old tactical-header opacity rule with equal-or-higher
   specificity. Disabled labels remain visible while their muted surface still
   communicates that the action is unavailable. */
body:has(.tb-page) .lv-head-actions .btn:disabled,
body:has(.tb-page) .lv-head-actions .btn[aria-disabled="true"],
body:has(.tb-page) .lv-head-top > .btn:disabled,
body:has(.tb-page) .lv-head-top > .btn[aria-disabled="true"] {
  opacity: 1;
}
body:has(.tb-page) .interactive-guide .btn:disabled,
body:has(.tb-page) .interactive-guide .btn[aria-disabled="true"] {
  opacity: 1;
  color: #0a3928;
  background: #39d69e;
  border-color: #7df2c5;
  box-shadow: 0 3px 0 #147b58;
}

/* In the dark tactical header, a disabled action must remain legible rather
   than becoming a low-contrast translucent pill. */
body:has(.tb-page) .btn:disabled,
body:has(.tb-page) .btn[aria-disabled="true"] {
  color: #b7cbc1;
  background: rgba(53, 78, 76, .9);
  border: 1px solid rgba(162, 202, 186, .38);
  box-shadow: 0 2px 0 rgba(24, 48, 45, .9);
}
body:has(.tb-page) .btn.green:disabled,
body:has(.tb-page) .btn.green[aria-disabled="true"] {
  color: #b8f0d4;
  background: rgba(12, 105, 75, .82);
}
body:has(.tb-page) .btn.amber:disabled,
body:has(.tb-page) .btn.amber[aria-disabled="true"] {
  color: #ffe3a2;
  background: rgba(113, 81, 13, .88);
}
body:has(.tb-page) .lv-head-actions .btn.amber:disabled,
body:has(.tb-page) .lv-head-actions .btn.amber[aria-disabled="true"] {
  color: #fff1c5;
  background: rgba(113, 81, 13, .88);
}

/* Preview tabs are intentionally inactive, but opacity-based fading made the
   label disappear on light backgrounds. */
.variant-tab:disabled,
.variant-tab[aria-disabled="true"] {
  opacity: 1;
  color: #5f6c64;
  background: #e6ece7;
  border-color: #b9c7bd;
  text-shadow: none;
}

/* Floating editor menus should sit above the workbench while remaining below
   the onboarding/help dialog. */
body:has(.tb-page) .edit-pop { z-index: 210; }
body:has(.tb-page) .ux-mask { z-index: 240; }

/* Login copy and form content must be allowed to scroll on short viewports. */
body:has(.auth-page) .auth-page { overflow-x: hidden; overflow-y: auto; }

/* Native title/tooltips and dense hint labels need a solid backing layer. */
.hint-action,
.code-guide-trigger,
.api-dock-close,
.coach-details summary,
.tc-tool,
.axis-more,
.mp-item {
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}
.hint-action:hover,
.hint-action:focus-visible {
  background: #5d7781;
  color: #fff;
  border-color: rgba(224, 251, 239, .7);
}

/* Keep dense guidance text readable even when the pointer is over a nested
   hint/control.  The old low-opacity hover cascade made the copy disappear
   against the dark workbench. */
body:has(.tb-page) .coach-row:hover,
body:has(.tb-page) .coach-row:focus-within {
  background: rgba(18, 104, 78, .34);
  border-radius: 7px;
}
body:has(.tb-page) .coach-row:hover .coach-k,
body:has(.tb-page) .coach-row:hover .coach-dim,
body:has(.tb-page) .coach-row:focus-within .coach-k,
body:has(.tb-page) .coach-row:focus-within .coach-dim {
  color: #e7fff3;
  opacity: 1;
}
body:has(.tb-page) .coach-row:hover .coach-v,
body:has(.tb-page) .coach-row:focus-within .coach-v {
  color: #fffdf0;
  opacity: 1;
}

/* Tooltips and coach rows must remain readable while the pointer is over the
   hint region. Do not dim the panel or inherit a translucent text color from
   the playfield; hover only changes the surface and focus ring. */
body:has(.tb-page) .coach-section:hover,
body:has(.tb-page) .coach-tip:hover,
body:has(.tb-page) .coach-details:hover {
  background-color: rgba(7, 67, 54, .72);
  border-color: rgba(84, 229, 180, .48);
  color: #f3fff9;
}
body:has(.tb-page) .coach-section:hover *,
body:has(.tb-page) .coach-tip:hover *,
body:has(.tb-page) .coach-details:hover * {
  color: inherit;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.34);
}
/* Preserve semantic status colors while the details panel itself is hovered.
   The readability guard above intentionally inherits a solid foreground, but
   a successful objective, blocked route, or collected item still needs its
   distinct visual meaning. */
body:has(.tb-page) .coach-details:hover .coach-strong.ok,
body:has(.tb-page) .coach-details:hover .coach-chip.ok { color:#73e9ad !important; }
body:has(.tb-page) .coach-details:hover .coach-strong.bad,
body:has(.tb-page) .coach-details:hover .coach-chip.bad { color:#ffaaa0 !important; }
body:has(.tb-page) .coach-details:hover .coach-dim { color:rgba(225,247,237,.82) !important; }
body:has(.tb-page) .coach-details:hover .coach-chip.ok { background:rgba(36,169,105,.22); }
body:has(.tb-page) .coach-details:hover .coach-chip.bad { background:rgba(186,67,67,.24); }
body:has(.tb-page) .coach-section:hover .coach-strong.ok,
body:has(.tb-page) .coach-tip:hover .coach-strong.ok,
body:has(.tb-page) .coach-section:hover .coach-chip.ok,
body:has(.tb-page) .coach-tip:hover .coach-chip.ok { color:#73e9ad !important; }
body:has(.tb-page) .coach-section:hover .coach-strong.bad,
body:has(.tb-page) .coach-tip:hover .coach-strong.bad,
body:has(.tb-page) .coach-section:hover .coach-chip.bad,
body:has(.tb-page) .coach-tip:hover .coach-chip.bad { color:#ffaaa0 !important; }
body:has(.tb-page) .coach-section:hover .coach-chip.ok,
body:has(.tb-page) .coach-tip:hover .coach-chip.ok { background:rgba(36,169,105,.22); }
body:has(.tb-page) .coach-section:hover .coach-chip.bad,
body:has(.tb-page) .coach-tip:hover .coach-chip.bad { background:rgba(186,67,67,.24); }
/* Keep native title hints native.  A previous fixed pseudo-tooltip had no
   anchor coordinates, so hovering a hint could paint a large layer over the
   whole workbench and make the coach text unreadable. */
body:has(.tb-page) [title]:hover::after { content: none; display: none; }

/* Dark product surfaces share light foreground text.  The legacy global
   `.btn.gray:hover` changes only the background to a near-white color; when
   combined with these page themes it produced the exact light-on-light state
   reported for the hint/save controls.  Keep all gray actions on an explicit
   high-contrast palette in every dark workspace, not only the tactics header. */
.competition-page .btn.gray,
.access-page .btn.gray,
.cities-view .btn.gray,
.rank-list .btn.gray,
.home-hero .btn.gray {
  background: #405d67;
  color: #f4fffb;
  border: 1px solid rgba(190, 228, 214, .30);
  box-shadow: 0 3px 0 #263f47, 0 7px 14px rgba(0,0,0,.18);
  text-shadow: 0 1px 2px rgba(0,0,0,.36);
}
.competition-page .btn.gray:hover,
.competition-page .btn.gray:focus-visible,
.access-page .btn.gray:hover,
.access-page .btn.gray:focus-visible,
.cities-view .btn.gray:hover,
.cities-view .btn.gray:focus-visible,
.rank-list .btn.gray:hover,
.rank-list .btn.gray:focus-visible,
.home-hero .btn.gray:hover,
.home-hero .btn.gray:focus-visible {
  background: #587781;
  color: #ffffff;
  border-color: rgba(224, 251, 239, .66);
  filter: none;
}
.competition-page .btn.gray:disabled,
.competition-page .btn.gray[aria-disabled="true"],
.access-page .btn.gray:disabled,
.access-page .btn.gray[aria-disabled="true"] {
  background: rgba(55, 78, 77, .88);
  color: #afc4ba;
  border-color: rgba(154, 188, 175, .28);
  box-shadow: 0 2px 0 rgba(25, 45, 43, .9);
}

/* Checked competition levels need a surface-level selected state.  A native
   checkbox alone is too easy to miss in a dense 10/30-level composer. */
.competition-page .competition-level-choice:has(input:checked) {
  background: rgba(12, 116, 82, .66);
  border-color: #4ce2ad;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(102, 240, 190, .24), 0 8px 20px rgba(0,0,0,.20);
}
.competition-page .competition-level-choice:has(input:checked) span,
.competition-page .competition-level-choice:has(input:checked) small,
.competition-page .competition-level-choice:has(input:checked) b { color: inherit; }

/* Make the open account menu visibly anchored to its trigger and preserve
   keyboard focus without washing out the username. */
.nav-user-menu[open] summary,
.nav-user-menu summary:hover,
.nav-user-menu summary:focus-visible {
  background: rgba(10, 73, 61, .96);
  border-color: rgba(89, 229, 181, .62);
  color: #ffffff;
}
.nav-user-menu[open] .nav-chevron { color: #6fe7ba; }

@media (max-width: 760px) {
  body:has(.tb-page) .tb-page { width: calc(100% - 20px); padding-inline: 0; }
  body:has(.tb-page) .tb-layout { grid-template-columns: 1fr; overflow: visible; }
  body:has(.tb-page) .tb-left,
  body:has(.tb-page) .tb-center,
  body:has(.tb-page) .tb-right { width: 100%; min-width: 0; min-height: 0; height: auto; }
  body:has(.tb-page) .board-wrap { min-height: 0; height: auto; }
  body:has(.tb-page) #board { width: min(100%, 620px); height: auto; }
  body:has(.tb-page) .interactive-guide { bottom: 12px; width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .lv, .city, .rank-row, .chip, .interactive-guide, .report { transition: none !important; animation: none !important; }
}

/* Final cascade guard for the dark tactical header's stage chip. */
body:has(.tb-page) .lv-head .city-chip.sm {
  background: rgba(11, 102, 76, .72) !important;
  border: 1px solid rgba(86, 225, 177, .42) !important;
  color: #dffff0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .32);
}
/* Title tools (level picker / hint) use the same dark-workbench contrast as
   the run controls.  Keep the label readable in every pointer state. */
body:has(.tb-page) .lv-title-tools .btn.gray {
  background: rgba(83, 110, 122, .92) !important;
  color: #f4fffb !important;
  border: 1px solid rgba(186, 225, 211, .26) !important;
  box-shadow: 0 3px 0 rgba(42, 63, 70, .9), 0 6px 14px rgba(0, 0, 0, .16) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .38);
  filter: none !important;
}
body:has(.tb-page) .lv-title-tools .btn.gray:hover,
body:has(.tb-page) .lv-title-tools .btn.gray:focus-visible {
  background: #53717c !important;
  color: #ffffff !important;
  border-color: rgba(213, 247, 233, .56) !important;
  box-shadow: 0 3px 0 #2a3f46, 0 0 0 2px rgba(83, 225, 179, .2), 0 8px 16px rgba(0, 0, 0, .22) !important;
}
body:has(.tb-page) .lv-title-tools .btn.gray:active {
  background: #314952 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 0 #24373d, 0 3px 8px rgba(0, 0, 0, .22) !important;
}
/* 个人练习成绩卡位于排行榜深色主题页面内，不能继续沿用通用白色卡片。
   明确锁定背景、标题和四项统计的对比度，避免浅色文字落在白底上。 */
body:has(.rank-list) .rank-personal-stats {
  background: linear-gradient(145deg, rgba(4, 53, 46, .96), rgba(2, 28, 30, .98)) !important;
  border: 1px solid rgba(62, 211, 166, .36) !important;
  color: #effff8 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
}
body:has(.rank-list) .rank-personal-stats h3 {
  color: #f2fff8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .34);
}
body:has(.rank-list) .rank-personal-stats .card-foot {
  color: #d9ffed !important;
  border-top: 1px solid rgba(111, 229, 186, .18);
  padding-top: 12px;
}
body:has(.rank-list) .rank-personal-stats .card-foot span {
  color: #d9ffed !important;
  font-weight: 700;
  white-space: nowrap;
}
/* Focused maps should not sit inside a tall empty stage.  The canvas keeps its
   true aspect ratio and the surrounding board panel follows its content. */
body:has(.tb-page) .board-wrap[data-fit-content="true"] {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: center;
}
/* ========================================================================== */
/* 足球编程实验场：本地独立玩法，不复用正式关卡布局与进度。 */

/* 240 关原型实验室：独立开发入口，不影响正式赛季样式 */
.prototype240-page{padding-top:24px;padding-bottom:56px}
.prototype240-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:32px 36px;border:1px solid rgba(70,218,164,.28);border-radius:24px;background:radial-gradient(circle at 84% 20%,rgba(55,204,151,.2),transparent 34%),linear-gradient(135deg,#0b3e31,#092a26 68%,#071f22);color:#f4fff9;box-shadow:0 18px 42px rgba(4,31,28,.26)}
.prototype240-hero h1{margin:12px 0 8px;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em}
.prototype240-hero p{margin:0;max-width:720px;color:rgba(232,255,245,.78);line-height:1.75}
.prototype240-kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(94,235,184,.13);border:1px solid rgba(113,244,196,.34);color:#9ff5ce;font-size:12px;font-weight:900;letter-spacing:.08em}
.prototype240-hero-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.prototype240-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}
.prototype240-theme-card{padding:20px;border:1px solid #dce8e0;border-radius:20px;background:linear-gradient(155deg,#fff,#f2f7f3);box-shadow:0 10px 26px rgba(31,71,52,.08)}
.prototype240-theme-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.prototype240-theme-head h2{margin:7px 0 4px;color:#143b2c;font-size:21px}.prototype240-theme-head p{margin:0;color:#74877c;font-size:13px}.prototype240-theme-head>strong{padding:6px 9px;border-radius:9px;background:#e5f6ec;color:#22714c;font-size:12px;white-space:nowrap}
.prototype240-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.prototype240-level-card{min-height:132px;padding:14px;text-align:left;border:1px solid #d6e3da;border-radius:15px;background:#fbfefc;color:#224936;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.prototype240-level-card:hover,.prototype240-level-card:focus-visible{transform:translateY(-3px);border-color:#4fcb91;box-shadow:0 10px 20px rgba(33,113,75,.13);outline:none}.prototype240-level-card strong{display:block;margin:8px 0 5px;font-size:15px;line-height:1.25}.prototype240-level-card small{display:block;color:#75887d;font-size:12px}.prototype240-level-id{font-size:11px;font-weight:1000;letter-spacing:.1em;color:#0c9c67}
.prototype240-metrics{display:grid;grid-template-columns:1fr 1fr;gap:3px 7px;margin-top:10px;color:#567265;font-size:10px}.prototype240-metrics span{white-space:nowrap}
.prototype240-footnote{margin:16px 4px 0;color:#708178;font-size:13px;line-height:1.6}
@media(max-width:900px){.prototype240-theme-grid{grid-template-columns:1fr}}
@media(max-width:600px){.prototype240-hero{align-items:flex-start;flex-direction:column;padding:24px 20px}.prototype240-hero-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.prototype240-level-grid{grid-template-columns:1fr 1fr}.prototype240-theme-card{padding:16px}}
@media(max-width:390px){.prototype240-level-grid{grid-template-columns:1fr}}

/* Theme120 isolated curriculum lab */
.theme120-page{padding-top:24px;padding-bottom:56px}
.theme120-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:32px 36px;border:1px solid rgba(72,179,235,.3);border-radius:24px;background:radial-gradient(circle at 82% 18%,rgba(68,168,235,.2),transparent 32%),linear-gradient(135deg,#123d5e,#102c4a 66%,#0d2339);color:#f4fbff;box-shadow:0 18px 42px rgba(10,34,57,.25)}
.theme120-hero h1{margin:12px 0 8px;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em}.theme120-hero p{margin:0;max-width:740px;color:rgba(237,248,255,.78);line-height:1.75}.theme120-kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(115,204,255,.13);border:1px solid rgba(131,213,255,.36);color:#a8e2ff;font-size:12px;font-weight:900;letter-spacing:.08em}.theme120-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.theme120-meta span{padding:7px 10px;border-radius:10px;background:rgba(0,0,0,.2);color:#d9f2ff;font-size:12px;font-weight:800}.theme120-theme-card{margin-top:20px;padding:22px;border:1px solid #dce7ef;border-radius:20px;background:linear-gradient(155deg,#fff,#f2f7fb);box-shadow:0 10px 26px rgba(30,68,96,.08)}.theme120-theme-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.theme120-theme-head h2{margin:7px 0 4px;color:#173c58;font-size:23px}.theme120-theme-head p{margin:0;color:#728898;font-size:13px}.theme120-theme-head>strong{padding:6px 9px;border-radius:9px;background:#e3f2fc;color:#1d6790;font-size:12px;white-space:nowrap}.theme120-level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.theme120-level-card{min-height:138px;padding:15px;text-align:left;border:1px solid #d2e1eb;border-radius:15px;background:#fbfdff;color:#24485d;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.theme120-level-card:hover,.theme120-level-card:focus-visible{transform:translateY(-3px);border-color:#54b7e8;box-shadow:0 10px 20px rgba(41,121,165,.14);outline:none}.theme120-level-card strong{display:block;margin:9px 0 6px;font-size:16px;line-height:1.3}.theme120-level-card small{display:block;color:#718a99;font-size:12px;line-height:1.5}.theme120-level-id{font-size:11px;font-weight:1000;letter-spacing:.1em;color:#2588b4}.theme120-note{margin:17px 4px 0;color:#71818e;font-size:13px;line-height:1.6}@media(max-width:900px){.theme120-level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.theme120-hero{align-items:flex-start;flex-direction:column;padding:24px 20px}.theme120-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme120-theme-card{padding:16px}}@media(max-width:390px){.theme120-level-grid{grid-template-columns:1fr}}

/* ---------- 足球编程实验场 v2：竞技训练场 ---------- */
/* Golden20 独立足球谜题原型 */
.golden20-page{padding-top:26px;padding-bottom:50px}.golden-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:220px;padding:34px 42px;border:1px solid rgba(255,215,92,.34);border-radius:28px;background:radial-gradient(circle at 82% 25%,rgba(255,216,94,.24),transparent 29%),linear-gradient(135deg,#0c4b31,#083722 64%,#062719);box-shadow:0 22px 50px rgba(4,31,20,.24);color:#fff}.golden-hero:after{content:"";position:absolute;inset:auto -8% -55% 28%;height:220px;border:2px solid rgba(255,255,255,.12);border-radius:50%}.golden-hero-copy{position:relative;z-index:1;max-width:720px}.golden-kicker{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(255,222,104,.15);border:1px solid rgba(255,222,104,.45);color:#ffe88b;font-size:12px;font-weight:900;letter-spacing:.12em}.golden-hero h1{margin:16px 0 10px;font-size:clamp(30px,4vw,52px);line-height:1.05}.golden-hero p{margin:0;max-width:640px;color:rgba(255,255,255,.8);font-size:16px;line-height:1.8}.golden-hero-stats{display:flex;gap:10px;margin-top:20px}.golden-hero-stats span{padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.2);font-weight:800;color:#fff3b5}.golden-cup{position:relative;z-index:1;display:grid;place-items:center;width:150px;height:150px;flex:0 0 150px;border-radius:50%;background:radial-gradient(circle,#fff6b0 0 12%,#eabf39 13% 18%,rgba(255,209,63,.18) 19% 58%,transparent 59%);font-size:72px;filter:drop-shadow(0 15px 25px rgba(0,0,0,.25))}.golden-chapter{margin-top:22px;padding:26px;border-radius:24px;background:#fff;border:1px solid #e4e7e1;box-shadow:0 14px 36px rgba(33,57,44,.09)}.golden-chapter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.golden-chapter-head h2{margin:0 0 5px;font-size:25px;color:#153b2a}.golden-chapter-head p{margin:0;color:#718078}.golden-chapter-head>span{padding:7px 11px;border-radius:999px;background:#fff4c5;color:#73570b;font-size:12px;font-weight:900}.golden-level-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:14px}.golden-level{position:relative;min-height:154px;padding:16px;border:1px solid #e1e5df;border-radius:20px;background:linear-gradient(155deg,#f7f9f6,#edf1ed);color:#89918c;text-align:left;cursor:not-allowed;box-shadow:none}.golden-level.unlocked{cursor:pointer;background:linear-gradient(155deg,#fffef7,#f2f8f1);color:#244436;border-color:#c7d9cc;box-shadow:0 9px 20px rgba(33,78,53,.1);transition:transform .18s ease,box-shadow .18s ease}.golden-level.unlocked:hover{transform:translateY(-4px);box-shadow:0 15px 28px rgba(33,78,53,.16)}.golden-level.done{background:linear-gradient(155deg,#f1fff5,#ddf3e4);border-color:#83c497}.golden-level.boss{background:linear-gradient(145deg,#fff7cf,#fff0a4);border-color:#dfb839;color:#513e08}.golden-level.coming{opacity:.63}.golden-level-no{font-size:12px;font-weight:1000;letter-spacing:.1em}.golden-level-ball{display:block;margin:14px 0 9px;font-size:30px}.golden-level strong{display:block;font-size:16px;line-height:1.25}.golden-level small{display:block;margin-top:9px;font-weight:800;color:inherit}.golden-level em{position:absolute;right:12px;top:12px;padding:4px 7px;border-radius:7px;background:#5e4700;color:#ffe990;font-size:10px;font-style:normal;font-weight:1000}.golden-footnote{margin:18px 4px 0;color:#718078;font-size:13px}.golden-star-rules .coach-row{grid-template-columns:46px 1fr}.golden-star-rules .coach-k{color:#986f00;font-weight:900}
@media(max-width:1000px){.golden-level-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}}@media(max-width:700px){.golden-hero{padding:28px 22px}.golden-cup{display:none}.golden-level-grid{grid-template-columns:repeat(2,minmax(135px,1fr))}.golden-chapter{padding:18px}}@media(max-width:430px){.golden-level-grid{grid-template-columns:1fr}}