:root {
    --paper: #f2f6f5;
    --surface: #ffffff;
    --surface-soft: #eaf1ef;
    --ink: #172b3a;
    --muted: #6b7d87;
    --line: #d8e4e1;
    --line-strong: #c4d5d1;
    --accent: #087987;
    --accent-deep: #075865;
    --accent-soft: #dcefed;
    --success: #287a58;
    --warning: #a56819;
    --danger: #b34d4c;
    --radius-card: 16px;
    --radius-control: 8px;
    --shadow-soft: 0 14px 36px rgba(20, 49, 59, .08);
    --shadow-hover: 0 18px 42px rgba(20, 49, 59, .14);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Aptos", "Microsoft YaHei", "PingFang SC", sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Shared application chrome */
.app-page .navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 72px;
    padding: 0 clamp(18px, 4vw, 56px);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 16px rgba(19, 48, 57, .04);
    backdrop-filter: blur(14px);
}

.app-page .navbar .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink) !important;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: .01em;
    text-decoration: none;
}

.app-page .navbar .logo::first-letter { color: var(--accent); }

.app-page .navbar .right {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: 13px;
}

.app-page .navbar .right a:not(.logout) {
    color: var(--muted) !important;
    text-decoration: none;
}

.app-page .navbar .right a:not(.logout):hover { color: var(--accent) !important; }

.app-page .navbar .role {
    padding: 4px 10px;
    color: var(--accent-deep) !important;
    background: var(--accent-soft) !important;
    border: 1px solid #c3e3df;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.app-page .navbar a.logout {
    color: var(--danger) !important;
    text-decoration: none;
    font-weight: 600;
}

.app-page .navbar a.logout:hover { color: #8f3636 !important; }

.app-page .container {
    width: min(1180px, calc(100% - 40px));
    max-width: none;
    margin: 42px auto 64px;
    padding: 0;
}

.app-page .card,
.app-page .info-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}

.app-page .card { padding: clamp(20px, 3vw, 32px); }
.app-page h3, .app-page h4 { color: var(--ink) !important; }

.app-page .btn {
    min-height: 38px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.app-page .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(14, 54, 64, .12);
}

.app-page .btn:active { transform: translateY(0) scale(.98); }
.app-page .btn-primary { background: var(--accent) !important; color: #fff !important; }
.app-page .btn-primary:hover { background: var(--accent-deep) !important; }
.app-page .btn-success { background: var(--success) !important; color: #fff !important; }
.app-page .btn-success:hover { background: #1e6246 !important; }
.app-page .btn-edit { background: #356c88 !important; color: #fff !important; }
.app-page .btn-add { background: var(--accent) !important; color: #fff !important; }
.app-page .btn-del, .app-page .btn-del:hover { background: var(--danger) !important; color: #fff !important; }
.app-page .btn-back { background: var(--surface-soft) !important; color: var(--ink) !important; border-color: var(--line); }

.app-page input,
.app-page select {
    min-height: 40px;
    color: var(--ink);
    background: #fbfdfc;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--radius-control) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.app-page input:focus,
.app-page select:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(8, 121, 135, .14);
}

.app-page input::placeholder { color: #9aaab0; }

.app-page table { font-size: 13px; }
.app-page thead th {
    color: var(--muted);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line-strong);
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: none;
}
.app-page tbody td { color: var(--ink); border-bottom: 1px solid #edf2f0; }
.app-page tbody tr:hover { background: #f5faf8; }
.app-page .tag { border-radius: 999px; font-weight: 700; }
.app-page .tag-985, .app-page .tier-chong, .app-page .cat-chong { background: #b75a57 !important; }
.app-page .tag-211 { background: #3f7892 !important; }
.app-page .tag-other, .app-page .tier-wen, .app-page .cat-wen { background: #71858d !important; }
.app-page .tier-bao, .app-page .cat-bao { background: #4a8b67 !important; }
.app-page .empty { color: var(--muted); }
.app-page .count { color: var(--muted); }

/* Dashboard landing */
.home-page .container { width: min(1120px, calc(100% - 40px)); }
.home-page .welcome {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 34px clamp(24px, 4vw, 48px);
    color: #f6fcfb;
    background: var(--ink);
    border: 1px solid #203f4d;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hover);
}
.home-page .welcome::after {
    content: "";
    position: absolute;
    right: 8%;
    top: -55px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(180, 226, 220, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(180, 226, 220, .04), 0 0 0 48px rgba(180, 226, 220, .03);
}
.home-page .welcome h2 { position: relative; z-index: 1; margin-bottom: 8px; font-size: clamp(23px, 3vw, 32px); letter-spacing: -.02em; }
.home-page .welcome p { position: relative; z-index: 1; max-width: 560px; color: #c8d9d8; font-size: 14px; }
.home-page .cards { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 14px; }
.home-page .cards .card { min-height: 168px; padding: 24px; border-radius: var(--radius-card); }
.home-page .cards .card:nth-child(1) { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; background: var(--accent); border-color: var(--accent); color: #fff; }
.home-page .cards .card:nth-child(1) h3, .home-page .cards .card:nth-child(1) p { color: #fff !important; }
.home-page .cards .card:nth-child(1) p { color: #d5eeeb !important; }
.home-page .card .icon { margin-bottom: 12px; font-size: 25px; }
.home-page .card h3 { margin-bottom: 6px; font-size: 16px; }
.home-page .card p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.home-page .cards .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.home-page .info-box { margin-top: 22px; padding: 22px 26px; }
.home-page .info-box table { font-size: 13px; }
.home-page .info-box td { border-bottom-color: #edf2f0; }
.home-page .info-box td:first-child { color: var(--muted); }
.home-page .info-box td:last-child { color: var(--ink); }

/* Tool pages */
.school-page .card:first-child { padding-top: 26px; }
.school-page .card h3 { padding-bottom: 16px; margin-bottom: 18px !important; border-bottom: 1px solid var(--line); font-size: 22px; letter-spacing: -.02em; }
.school-page .filter { gap: 10px; padding: 14px; margin-bottom: 18px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.school-page .filter input, .school-page .filter select { background: var(--surface); }
.school-page .filter > a { color: #fff !important; }
.school-page .filter > a:nth-of-type(1) { background: #789099 !important; }
.school-page .filter > a:nth-of-type(3) { background: #147f7b !important; }
.school-page .card { overflow-x: auto; }
.school-page table { min-width: 890px; }

.match-page .container { width: min(1100px, calc(100% - 40px)); }
.match-page .card h3 { margin-bottom: 10px !important; font-size: 22px; letter-spacing: -.02em; }
.match-page .tip { max-width: 680px; color: var(--muted); }
.match-page .form { padding-top: 18px; border-top: 1px solid var(--line); }
.match-page .field label, .score-page .field label { color: var(--muted); font-weight: 700; }
.match-page .card[style*="margin-top"] { margin-top: 18px !important; }
.match-page .card[style*="margin-top"] h4 { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.match-page .card { overflow-x: auto; }
.match-page table { min-width: 900px; }

.wish-page .card, .score-page .card { overflow-x: auto; }
.wish-page .card h3, .score-page .card h3 { margin-bottom: 8px !important; font-size: 22px; letter-spacing: -.02em; }
.wish-page .card > p { color: var(--muted) !important; }
.wish-page table { min-width: 760px; }
.score-page .goal { border: 1px solid transparent; }
.score-page .goal-bad { background: #fff4df; color: var(--warning); border-color: #f1ddb7; }
.score-page .goal-good { background: #e2f3e9; color: var(--success); border-color: #c5e6d3; }
.score-page .goal-none { background: var(--surface-soft); color: var(--muted); border-color: var(--line); }
.score-page .sum-card { background: var(--surface-soft); border-color: var(--line); border-radius: 12px; }
.score-page .sum-card .sub { color: var(--accent-deep); }
.score-page .sum-card .avg { color: var(--ink); }
.score-page table { min-width: 700px; }

.form-page .container { width: min(680px, calc(100% - 40px)); }
.form-page .card { padding: clamp(24px, 5vw, 42px); }
.form-page .card h3 { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 22px; }
.form-page .btns { gap: 10px; }
.form-page .err, .app-page .msg-err { color: #8d3c3c; background: #fff0ef; border: 1px solid #f0cdca; }
.app-page .msg-ok { color: #236847; background: #e7f4ec; border: 1px solid #c8e6d4; }

/* Authentication */
.auth-page {
    display: grid;
    grid-template-columns: minmax(240px, .9fr) minmax(360px, 1fr);
    align-items: center;
    gap: clamp(36px, 8vw, 140px);
    min-height: 100dvh;
    padding: 48px clamp(24px, 8vw, 120px);
    background: #102f3c;
}
.auth-page::before {
    content: "";
    display: block;
    width: min(34vw, 360px);
    height: min(34vw, 360px);
    justify-self: center;
    border: 1px solid rgba(205, 234, 230, .35);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(205, 234, 230, .04), 0 0 0 72px rgba(205, 234, 230, .025);
}
.auth-page .card {
    grid-column: 2;
    width: min(430px, 100%);
    justify-self: start;
    padding: clamp(28px, 4vw, 42px);
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(217, 236, 232, .75);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(4, 24, 32, .28);
}
.auth-page h1 { color: var(--ink) !important; font-size: 22px; letter-spacing: -.02em; }
.auth-page .sub { color: var(--muted); }
.auth-page label { color: var(--ink); font-weight: 700; }
.auth-page input { background: #f9fcfb; }
.auth-page input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(8, 121, 135, .14); }
.auth-page .captcha-row img { border-color: var(--line-strong); border-radius: var(--radius-control); }
.auth-page .btn { min-height: 44px; margin-top: 24px; background: var(--accent) !important; border-radius: var(--radius-control); font-weight: 750; }
.auth-page .btn:hover { background: var(--accent-deep) !important; }
.auth-page .tip { color: var(--muted); }
.auth-page .tip a { color: var(--accent); font-weight: 700; }
.auth-page .msg.err { color: #8d3c3c; background: #fff0ef; border: 1px solid #f0cdca; }
.auth-page .msg.ok { color: #236847; background: #e7f4ec; border: 1px solid #c8e6d4; }

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #102129;
        --surface: #152c36;
        --surface-soft: #1a3942;
        --ink: #e8f1ef;
        --muted: #a4b9bd;
        --line: #2a4850;
        --line-strong: #3e6067;
        --accent-soft: #1b4b54;
        --shadow-soft: 0 14px 36px rgba(0, 0, 0, .18);
        --shadow-hover: 0 18px 42px rgba(0, 0, 0, .25);
    }
    .app-page .navbar { background: rgba(21, 44, 54, .94); }
    .app-page input, .app-page select { background: #122932; }
    .app-page input:focus, .app-page select:focus { background: var(--surface); }
    .app-page tbody tr:hover { background: #1a3942; }
    .home-page .cards .card:nth-child(1) { background: #0d7180; }
}

@media (max-width: 760px) {
    .app-page .navbar { height: auto; min-height: 68px; padding: 14px 18px; align-items: flex-start; gap: 12px; }
    .app-page .navbar .logo { max-width: 58%; line-height: 1.35; }
    .app-page .navbar .right { flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px; }
    .app-page .container, .home-page .container { width: min(100% - 28px, 680px); margin-top: 24px; }
    .home-page .cards { grid-template-columns: 1fr; }
    .home-page .cards .card:nth-child(1) { grid-row: auto; min-height: 150px; }
    .home-page .info-box { padding: 18px; }
    .auth-page { grid-template-columns: 1fr; min-height: 100dvh; padding: 26px 18px; }
    .auth-page::before { display: none; }
    .auth-page .card { grid-column: 1; justify-self: center; width: min(430px, 100%); }
    .school-page .filter, .match-page .form, .score-page .form { align-items: stretch; }
    .school-page .filter > *, .match-page .field, .score-page .field { width: 100% !important; }
    .match-page .field input, .match-page .field select,
    .score-page .field input, .score-page .field select { width: 100% !important; }
    .school-page .filter .btn, .school-page .filter a.btn { text-align: center; }
    .form-page .btns { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}