@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;500;600;700;800&family=Noto+Serif+HK:wght@500;600;700&display=swap');

:root {
    --primary: #83D7CA;
    --primary-inverse: #FFFFFF;
    --secondary: #FD7899;
    --secondary-inverse: #FFFFFF;
    --footer: #002933;
    --footer-inverse: #FFFFFF;
    --ink: #002933;
    --muted: #4f6970;
    --accent: #83D7CA;
    --accent-dark: #002933;
    --wash: #e8f8f5;
    --cream: #fffdfd;
    --line: rgba(0, 41, 51, .14);
    --surface: #FFFFFF;
    --sans: 'Noto Sans HK', 'PingFang HK', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    --display: 'Noto Serif HK', 'Noto Serif TC', 'PingFang TC', 'Microsoft JhengHei', serif;
    --shadow: 0 16px 35px -28px rgba(0, 41, 51, .45);
    --radius: 18px;
    --teal: #83D7CA;
    --teal-dark: #002933;
    --coral: #FD7899;
    --mint: #e8f8f5;
    --primary-color: #002933;
    --accent-color: #83D7CA;
    --bg-color: #f3fbf9;
    --card-bg: #FFFFFF;
    --border-color: rgba(0, 41, 51, .14);
    --text-color: #002933;
    --text-muted: #4f6970;
}

* { box-sizing: border-box; }

html {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
    color: var(--ink);
    background: linear-gradient(145deg, #f3fbf9 0%, #e8f8f5 42%, #fffdfd 100%);
    font-family: var(--sans);
}

@media (min-width: 901px) {
    .nihao-shell,
    .shell,
    .page-shell {
        width: min(1120px, calc(100% - 80px));
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 820px) {
    input, select, textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    .table-wrap:has(> table.nihao-cards),
    .table-container:has(> table.nihao-cards) {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    table.nihao-cards {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    table.nihao-cards thead { display: none; }
    table.nihao-cards tbody { display: block; width: 100%; }

    table.nihao-cards tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 10px;
        padding: 14px 16px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        box-shadow: 0 10px 24px -22px rgba(0, 41, 51, .45);
    }

    table.nihao-cards tbody tr:last-child { margin-bottom: 0; }

    table.nihao-cards tbody tr:has(td[colspan]) {
        padding: 18px 16px;
        color: var(--muted);
        text-align: center;
    }

    table.nihao-cards tbody tr:has(td[colspan]) td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
    }

    table.nihao-cards td {
        display: grid;
        grid-template-columns: minmax(5.5rem, 36%) minmax(0, 1fr);
        align-items: start;
        gap: 4px 12px;
        width: auto;
        min-width: 0 !important;
        max-width: 100%;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid rgba(131, 215, 202, .28);
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: left;
    }

    table.nihao-cards td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .72rem;
        font-weight: 800;
        line-height: 1.4;
    }

    table.nihao-cards td:first-child {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 0 10px;
        color: var(--ink);
        font-size: 1.02rem;
        font-weight: 800;
        line-height: 1.3;
    }

    table.nihao-cards td:first-child::before { display: none; }

    table.nihao-cards td:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    table.nihao-cards td > * { max-width: 100%; min-width: 0; }

    table.nihao-cards td button,
    table.nihao-cards td .button,
    table.nihao-cards td .btn {
        width: auto;
        min-height: 40px;
    }
}

.button,
.nav-cta,
.primary,
.btn,
.btn-primary,
button.primary,
button.btn-primary {
    background: var(--primary);
    color: var(--primary-inverse);
}

.button:hover,
.nav-cta:hover,
.primary:hover,
.btn:hover,
.btn-primary:hover,
button.primary:hover,
button.btn-primary:hover {
    background: #6ac9ba;
    color: var(--primary-inverse);
}

.availability-hour.open {
    background: var(--primary);
    color: var(--primary-inverse);
    border-color: var(--primary);
}

.button.secondary {
    background: var(--wash);
    color: var(--footer);
    border: 1px solid rgba(131, 215, 202, .55);
}

.nav-btn.register,
.chip.selected,
.student-choice.active,
.client-tab.active,
.step-pill.active {
    background: var(--primary);
    color: var(--primary-inverse);
    border-color: var(--primary);
}

.site-footer,
.site-footer footer,
.feature-band {
    background: var(--footer);
    color: var(--footer-inverse);
}

.site-footer,
.site-footer footer,
.site-footer a,
.footer-column a,
.footer-brand strong,
.footer-brand span,
.footer-column strong,
.footer-note,
.legal-content {
    color: var(--footer-inverse);
}

.site-footer a:hover,
.footer-column a:hover {
    color: var(--primary);
}

.header,
.site-header {
    border-bottom-color: var(--primary);
}

.eyebrow {
    color: var(--footer);
}

.notification-badge,
.chat-badge,
.trial-float {
    background: var(--secondary);
    color: var(--secondary-inverse);
}

.admin-handled-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff4d6;
    color: #8a5a00;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
}

.admin-handled-note {
    margin: 4px 0 0;
    color: #8a5a00;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
}

.nihao-mascot {
    display: block;
    width: min(220px, 48vw);
    max-width: 160px;
    max-height: 200px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.nihao-mascot.xs { width: min(92px, 28vw); max-width: 92px; max-height: 110px; }
.nihao-mascot.sm { width: min(132px, 36vw); max-width: 132px; max-height: 160px; }
.nihao-mascot.md { width: min(180px, 44vw); max-width: 180px; max-height: 220px; }
.nihao-mascot.lg { width: min(280px, 62vw); max-width: 280px; max-height: 320px; }

.page-hero-mascot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px 28px;
}

.page-hero-mascot > div { min-width: 0; flex: 1; }

.page-hero-mascot .nihao-mascot {
    flex: 0 0 auto;
    width: min(140px, 28vw);
    max-width: 140px;
    max-height: 170px;
    margin: 0;
}

.nihao-empty {
    display: grid !important;
    justify-items: center;
    gap: 10px;
}

.nihao-empty .nihao-mascot {
    width: min(120px, 42vw);
    margin: 0;
}

.auth-mascot {
    width: min(148px, 46vw);
    margin: 0 auto 10px;
}

.about-with-mascot {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(180px, .55fr);
    gap: 28px 40px;
    align-items: center;
}

@media (max-width: 780px) {
    .page-hero-mascot { flex-wrap: wrap; }
    .page-hero-mascot .nihao-mascot { width: min(128px, 42vw); }
    .about-with-mascot { grid-template-columns: 1fr; }
    .about-with-mascot .nihao-mascot { width: min(150px, 46vw); margin-left: 0; }
}