/* ==========================================================================
    MK-16 · MK电子竞技学院
    深色板岩底 #15181d + 荧光绿点缀，靠文字明度分层级
    ========================================================================== */

:root {
    --slate-bg: #15181d;
    --slate-card: #1e242c;
    --slate-deep: #12151a;
    --slate-line: #2b3340;
    --neon: #3ce88a;
    --neon-soft: rgba(60, 232, 138, 0.42);
    --neon-faint: rgba(60, 232, 138, 0.14);
    --text-main: #eef1f5;
    --text-muted: #7d8794;
    --radius-card: 12px;
    --shell: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html body {
    margin: 0;
    background-color: var(--slate-bg);
    color: var(--text-main);
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
}

body img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body a {
    color: inherit;
    text-decoration: none;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------- 页头 ---------- */

.academy {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: rgba(18, 21, 26, 0.94);
    border-bottom: 1px solid var(--slate-line);
    backdrop-filter: blur(6px);
}

.academy .header-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.academy .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.academy .brand i {
    color: var(--neon);
    font-size: 20px;
}

.academy .main-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.academy .nav-list {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.academy .nav-link {
    display: inline-block;
    padding: 6px 2px;
    font-size: 15px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.academy .nav-link:hover,
.academy .nav-link.is-current {
    color: var(--text-main);
    border-bottom-color: var(--neon);
}

.academy .has-drop {
    position: relative;
}

.academy .drop-panel {
    position: absolute;
    top: 100%;
    left: -14px;
    min-width: 232px;
    padding: 12px 14px 14px;
    background-color: var(--slate-card);
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.academy .has-drop:hover .drop-panel,
.academy .has-drop:focus-within .drop-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.academy .drop-title {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--neon);
    letter-spacing: 0.4px;
}

.academy .drop-panel a {
    display: block;
    padding: 7px 8px;
    font-size: 14px;
    color: var(--text-muted);
    border-radius: 8px;
}

.academy .drop-panel a:hover {
    color: var(--text-main);
    background-color: rgba(60, 232, 138, 0.08);
}

.academy .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    font-size: 14px;
    color: var(--neon);
    border: 1px solid var(--neon-soft);
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.academy .btn-outline:hover {
    background-color: var(--neon-faint);
    border-color: var(--neon);
}

.academy .menu-toggle {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    font-size: 14px;
    color: var(--text-main);
    background-color: transparent;
    border: 1px solid var(--slate-line);
    border-radius: 8px;
    cursor: pointer;
}

.academy .mobile-panel {
    display: none;
    border-top: 1px solid var(--slate-line);
    background-color: var(--slate-deep);
}

.academy .mobile-panel ul {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 10px 20px 16px;
    list-style: none;
}

.academy .mobile-panel a {
    display: block;
    padding: 11px 4px;
    font-size: 15px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--slate-line);
}

.academy .mobile-panel a:hover {
    color: var(--neon);
}

/* ---------- 通用区块与栏头 ---------- */

main {
    display: block;
}

.band {
    padding: 62px 0;
}

.band-alt {
    padding: 62px 0;
    background-color: var(--slate-deep);
    border-top: 1px solid var(--slate-line);
    border-bottom: 1px solid var(--slate-line);
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 34px;
}

.section-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 12px;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--neon);
    border: 1px solid var(--neon-soft);
    border-radius: 999px;
}

.section-head h1 {
    margin: 0;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 700;
}

.section-head h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.35;
    font-weight: 700;
}

.section-goal {
    margin: 0;
    max-width: 380px;
    font-size: 14px;
    color: var(--text-muted);
}

.section-goal strong {
    color: var(--neon);
    font-weight: 600;
}

.lead {
    margin: 0 0 30px;
    max-width: 820px;
    font-size: 15px;
    color: var(--text-muted);
}

/* ---------- 图片容器与裁切比例 ---------- */

.media {
    position: relative;
    margin: 0;
    overflow: hidden;
    background-color: #191e25;
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
}

.media img {
    max-height: 100%;
}

.r-21x9 {
    aspect-ratio: 21 / 9;
}

.r-32x9 {
    aspect-ratio: 32 / 9;
}

.r-16x9 {
    aspect-ratio: 16 / 9;
}

.r-4x3 {
    aspect-ratio: 4 / 3;
}

.r-3x4 {
    aspect-ratio: 3 / 4;
}

.r-4x5 {
    aspect-ratio: 4 / 5;
}

.r-1x1 {
    aspect-ratio: 1 / 1;
}

.r-3x2 {
    aspect-ratio: 3 / 2;
}

.pos-left {
    object-position: left center;
}

.pos-top {
    object-position: center top;
}

.pos-bottom {
    object-position: center bottom;
}

.pos-high {
    object-position: center 34%;
}

.media figcaption,
figure .fig-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 20px 14px;
    font-size: 13px;
    color: var(--text-main);
    background: linear-gradient(to top, rgba(18, 21, 26, 0.92), rgba(18, 21, 26, 0));
}

.fig-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- 按钮 ---------- */

.btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #10141a;
    background-color: var(--neon);
    border: 1px solid var(--neon);
    border-radius: 999px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(60, 232, 138, 0.22);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    color: var(--text-main);
    border: 1px solid var(--slate-line);
    border-radius: 999px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-ghost:hover {
    color: var(--neon);
    border-color: var(--neon-soft);
}

/* ---------- 首页 Hero ---------- */

.campus-hero {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 46px;
    align-items: center;
    padding: 54px 0 66px;
}

.hero-kicker {
    margin: 0 0 14px;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--neon);
}

.hero-title {
    margin: 0 0 18px;
    font-size: 46px;
    line-height: 1.24;
    font-weight: 700;
}

.campus-copy p {
    color: var(--text-muted);
}

.hero-tags-title {
    margin: 24px 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-tags li {
    padding: 6px 14px;
    font-size: 13px;
    color: var(--neon);
    border: 1px solid var(--neon-soft);
    border-radius: 999px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.hero-entry {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.campus-figure,
.mode-figure,
.train-strip,
.faq-band,
.about-banner,
.drill-band {
    margin: 32px 0 0;
}

.campus-figure {
    margin: 0;
}

.campus-figure .media {
    border-color: var(--neon-soft);
}

/* ---------- 课程卡 ---------- */

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.course-card {
    padding: 24px 22px;
    background-color: var(--slate-card);
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.course-card:hover {
    border-color: var(--neon);
    transform: translateY(-3px);
}

.course-card i {
    color: var(--neon);
    font-size: 22px;
}

.course-card h3 {
    margin: 14px 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.course-card p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.course-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-card li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.course-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    background-color: var(--neon);
    border-radius: 50%;
}

.course-banner {
    margin: 26px 0 0;
}

/* ---------- 模式区 6/6 ---------- */

.mode-split {
    display: grid;
    grid-template-columns: 6fr 6fr;
    gap: 40px;
    align-items: start;
}

.mode-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mode;
}

.mode-list li {
    position: relative;
    padding: 18px 0 18px 62px;
    border-bottom: 1px solid var(--slate-line);
}

.mode-list li::before {
    counter-increment: mode;
    content: counter(mode, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 18px;
    font-size: 22px;
    font-weight: 700;
    color: var(--neon);
}

.mode-list h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
}

.mode-list p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ---------- 训练阶段整行 ---------- */

.train-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 220px;
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--slate-line);
}

.train-name h3 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
}

.train-name span {
    font-size: 13px;
    color: var(--neon);
}

.train-desc p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.train-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.train-tags span {
    padding: 4px 11px;
    font-size: 12px;
    color: var(--text-muted);
    border: 1px solid var(--slate-line);
    border-radius: 999px;
}

.train-strip {
    margin: 30px 0 0;
}

/* ---------- 工具区四等分 ---------- */

.tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.tool-block {
    padding: 22px 20px;
    background-color: var(--slate-card);
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
}

.tool-block h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
}

.tool-block p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.tool-block .media {
    margin-bottom: 14px;
    max-height: 300px;
}

/* ---------- 资讯两列 ---------- */

.news-split {
    display: grid;
    grid-template-columns: 6fr 6fr;
    gap: 40px;
}

.news-col > h2 {
    margin: 0 0 16px;
    padding-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
    border-bottom: 1px solid var(--neon-soft);
}

.news-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--slate-line);
}

.news-item h3 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 600;
}

.news-item p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.news-thumb {
    align-self: start;
}

/* ---------- FAQ ---------- */

.faq-list {
    max-width: 880px;
}

.faq-list details {
    background-color: var(--slate-card);
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
    margin-bottom: 12px;
}

.faq-list summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-size: 16px;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary i {
    color: var(--neon);
    font-size: 14px;
    transition: transform 0.2s ease;
}

.faq-list details[open] summary i {
    transform: rotate(90deg);
}

.faq-list details p {
    margin: 0;
    padding: 0 20px 18px 46px;
    font-size: 14px;
    color: var(--text-muted);
}

.faq-band {
    margin: 38px 0 0;
}

.faq-more {
    margin: 18px 0 0;
    font-size: 15px;
}

.faq-more a {
    color: var(--neon);
    border-bottom: 1px solid var(--neon-soft);
}

/* ---------- 页脚 ---------- */

.academy-foot {
    margin-top: 10px;
    background-color: var(--slate-deep);
    border-top: 1px solid var(--slate-line);
}

.foot-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 46px 20px 30px;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px;
}

.foot-brand {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
}

.foot-desc,
.foot-entry {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.foot-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.foot-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--neon);
}

.foot-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.foot-col a {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    color: var(--text-muted);
}

.foot-col a:hover {
    color: var(--text-main);
}

.foot-bottom {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 16px 20px 26px;
    border-top: 1px solid var(--slate-line);
}

.foot-path,
.foot-copy {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- 关于页 ---------- */

.about-academy {
    padding: 56px 0 46px;
    border-bottom: 1px solid var(--slate-line);
}

.about-head {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.about-rule {
    width: 4px;
    height: 120px;
    background-color: var(--neon);
    border-radius: 4px;
}

.about-head h1 {
    margin: 0 0 16px;
    font-size: 40px;
    line-height: 1.3;
    font-weight: 700;
}

.about-head p {
    margin: 0 0 12px;
    max-width: 820px;
    color: var(--text-muted);
}

.about-head h2 {
    margin: 26px 0 10px;
    font-size: 22px;
    font-weight: 700;
}

.about-banner {
    margin: 34px 0 0;
}

.system-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.system-cell {
    padding: 26px 22px;
    background-color: var(--slate-card);
    border-right: 1px solid var(--slate-line);
}

.system-cell:last-child {
    border-right: none;
}

.system-cell h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--neon);
}

.system-cell p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.system-cell ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-muted);
}

.about-split {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    align-items: center;
}

/* ---------- 课程目录页 ---------- */

.catalog-split {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 44px;
    align-items: start;
}

.catalog-dir {
    position: sticky;
    top: 88px;
    padding: 22px 20px;
    background-color: var(--slate-card);
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
}

.catalog-dir h2 {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
}

.catalog-dir .dir-hint {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.dir-level {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.dir-list {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.dir-list a {
    display: block;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--text-muted);
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
}

.dir-list a:hover {
    color: var(--text-main);
    background-color: rgba(60, 232, 138, 0.06);
}

.dir-list a.is-active {
    color: var(--text-main);
    border-left-color: var(--neon);
    background-color: rgba(60, 232, 138, 0.1);
}

.course-entry {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--slate-line);
    scroll-margin-top: 90px;
}

.course-entry:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.course-entry h2 {
    margin: 0 0 8px;
    font-size: 25px;
    font-weight: 700;
}

.course-goal {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--neon);
}

.course-entry p {
    margin: 0 0 12px;
    color: var(--text-muted);
}

.course-points {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.course-points li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: var(--text-muted);
}

.course-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 7px;
    height: 1px;
    background-color: var(--neon);
}

.course-shot {
    margin: 0;
}

/* ---------- 资讯页 ---------- */

.news-hero-item {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 34px;
    align-items: center;
    padding-bottom: 40px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--slate-line);
}

.news-hero-item h2 {
    margin: 0 0 14px;
    font-size: 28px;
    font-weight: 700;
}

.news-hero-item p {
    margin: 0 0 12px;
    color: var(--text-muted);
}

.news-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 3px 11px;
    font-size: 12px;
    color: var(--neon);
    border: 1px solid var(--neon-soft);
    border-radius: 999px;
}

.notice-group h2 {
    margin: 34px 0 8px;
    font-size: 20px;
    font-weight: 700;
}

.notice-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 132px;
    gap: 20px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--slate-line);
}

.notice-row h3 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 600;
}

.notice-row p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.notice-term {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.notice-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notice-meta .news-tag {
    align-self: flex-start;
    margin-bottom: 0;
}

.notice-shot {
    max-width: 132px;
}

.news-note {
    margin: 30px 0 0;
    padding: 18px 20px;
    font-size: 14px;
    color: var(--text-muted);
    background-color: var(--slate-card);
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
}

/* ---------- 联系页 ---------- */

.contact-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 46px;
    align-items: start;
}

.contact-copy h2 {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 700;
}

.contact-copy p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.contact-faq h3 {
    margin: 18px 0 6px;
    font-size: 16px;
    font-weight: 600;
}

.contact-faq p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.contact-figure {
    margin: 26px 0 0;
    max-width: 360px;
}

.form-banner {
    margin: 0 0 22px;
    max-height: 190px;
}

.form-card {
    padding: 28px 26px;
    background-color: var(--slate-card);
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
}

.form-card h2 {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 700;
}

.form-card .form-hint {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--text-muted);
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    color: var(--text-main);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 11px 13px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-main);
    background-color: #171c22;
    border: 1px solid var(--slate-line);
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--neon);
}

.field-note {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-muted);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.form-status {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--neon);
}

.contact-strip {
    margin: 40px 0 0;
}

/* ---------- 赛事训练页 ---------- */

.sport-academy-hero {
    padding: 44px 0 50px;
}

.sport-academy-hero h1 {
    margin: 22px 0 12px;
    font-size: 42px;
    line-height: 1.28;
    font-weight: 700;
}

.sport-academy-hero p {
    margin: 0;
    max-width: 780px;
    color: var(--text-muted);
}

.track-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.track-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 18px;
    padding: 24px 22px;
    background-color: var(--slate-card);
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-card);
    transition: border-color 0.2s ease;
}

.track-block:hover {
    border-color: var(--neon);
}

.track-block h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.track-block p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.track-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.track-block li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.track-block li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    background-color: var(--neon);
    border-radius: 50%;
}

.drill-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.drill-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--slate-line);
}

.drill-index {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--neon);
    opacity: 0.9;
}

.drill-body h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
}

.drill-body p {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text-muted);
}

.drill-body .fig-note {
    margin: 0;
}

.drill-band {
    margin: 34px 0 0;
}

.track-shared {
    margin: 44px 0 10px;
    font-size: 22px;
    font-weight: 700;
}

.track-block .media {
    align-self: start;
    max-height: 240px;
}

.radio-row input[type="radio"] {
    width: auto;
    padding: 0;
    accent-color: var(--neon);
}

section[id],
article[id] {
    scroll-margin-top: 84px;
}

/* ---------- 动效 ---------- */

/* 入场效果只做位移，不做透明度，任何情况下正文都保持可见 */
.reveal {
    transition: transform 0.6s ease;
}

.js-anim .reveal {
    transform: translateY(16px);
}

.js-anim .reveal.is-in {
    transform: translateY(0);
}

.academy.is-scrolled {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}

/* ---------- 响应式 ---------- */

@media (max-width: 1080px) {
    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-cell {
        border-bottom: 1px solid var(--slate-line);
    }

    .system-cell:nth-child(2n) {
        border-right: none;
    }

    .track-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 899px) {
    .academy .main-nav {
        display: none;
    }

    .academy .menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    /* 无脚本时面板直接展开，保证主要链接始终可读 */
    .academy .mobile-panel {
        display: block;
    }

    .js-anim .academy .mobile-panel {
        display: none;
    }

    .js-anim .academy .mobile-panel.is-open {
        display: block;
    }

    .academy .drop-panel {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
    }

    .campus-hero,
    .mode-split,
    .news-split,
    .about-split,
    .catalog-split,
    .contact-split,
    .news-hero-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-title,
    .about-head h1,
    .sport-academy-hero h1 {
        font-size: 32px;
    }

    .train-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .catalog-dir {
        position: static;
    }

    .foot-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .band,
    .band-alt {
        padding: 44px 0;
    }

    .course-grid,
    .tool-grid,
    .foot-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .section-head h2 {
        font-size: 24px;
    }

    .notice-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .notice-shot {
        max-width: 100%;
    }

    .track-block {
        grid-template-columns: minmax(0, 1fr);
    }

    .drill-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .news-item {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-anim .reveal,
    .js-anim .reveal.is-in {
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}