@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');:root{--ink:#252932;--muted:#68717f;--line:#e3e6eb;--accent:#b43f64;--light:#fff5f7;--surface:#fff;--bg:#f8f9fb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 'DM Sans',system-ui,-apple-system,sans-serif}a{text-decoration:none;color:inherit}button,input{font:inherit}button{cursor:pointer}header{background:white;border-bottom:1px solid var(--line);padding:17px max(22px,calc((100% - 1160px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px}.brand b{display:block;font-size:19px}.brand small{font-size:11px;color:var(--muted)}nav{display:flex;gap:25px;font-weight:600;font-size:14px}nav .here{color:var(--accent)}main{max-width:1160px;padding:0 22px 80px;margin:auto}.hero{padding:65px 0 45px;border-bottom:1px solid var(--line)}.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--accent);font-weight:800}.hero h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.05em;line-height:1.13;margin:14px 0}.hero p{font-size:17px;color:var(--muted)}.heroStats{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.heroStats span{font-size:12px;font-weight:700;background:white;border:1px solid var(--line);border-radius:8px;padding:9px 12px}.section{margin:45px 0}.sectionhead{display:flex;gap:18px;align-items:flex-start;margin-bottom:20px}.step{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:#f4e7ec;color:var(--accent);font-weight:800}.sectionhead h2{margin:0;font-size:25px;letter-spacing:-.03em}.sectionhead p{margin:2px 0 0}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.grid.modes{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{background:white;border:1.5px solid var(--line);border-radius:14px;text-align:left;padding:23px;min-height:145px;transition:.15s}.tile:hover{border-color:#c79aaa;transform:translateY(-2px)}.tile.active{border-color:var(--accent);background:var(--light);box-shadow:0 0 0 1px var(--accent)}.tile small{display:block;font-size:11px;font-weight:800;color:var(--accent);letter-spacing:.09em}.tile strong{display:block;font-size:23px;margin:12px 0 5px;letter-spacing:-.03em}.tile span{display:block;font-size:13px;color:var(--muted)}.modes .tile{min-height:154px}.panel{scroll-margin-top:22px;background:white;border:1px solid var(--line);border-radius:16px;padding:30px;margin:35px 0;box-shadow:0 12px 36px #18283a08}.hidden{display:none!important}.panel h2{font-size:25px;margin:5px 0 12px}.examtop,.progress,.navhead{display:flex;justify-content:space-between;align-items:center;gap:12px}.timer{background:#f8f1f3;padding:10px 14px;border-radius:10px;font-size:12px;color:var(--muted)}.timer strong{font-size:21px;color:var(--ink);display:block}.bar{height:6px;border-radius:99px;background:#edf0f2;margin:25px 0 16px;overflow:hidden}.bar div{height:100%;background:var(--accent)}.progress{color:var(--muted);font-size:13px}.question{font-size:22px;font-weight:700;line-height:1.6;margin:28px 0}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.choice{display:flex;align-items:center;gap:13px;border:1px solid var(--line);padding:15px;border-radius:10px;cursor:pointer}.choice:hover,.choice.selected{border-color:var(--accent);background:var(--light)}.choice input{accent-color:var(--accent)}.letter{font-weight:800;color:var(--accent)}.btn{background:var(--accent);border:1px solid var(--accent);color:white;padding:11px 18px;border-radius:9px;font-weight:700}.btn.outline{background:white;color:var(--ink);border-color:var(--line)}.btn:disabled{opacity:.45;cursor:not-allowed}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.grow{flex:1}.footeractions{border-top:1px solid var(--line);padding-top:20px;margin-top:28px}.feedback{padding:18px;border-radius:10px;background:#f4f6fa}.feedback.correct{background:#eaf6ee}.feedback.incorrect{background:#fff0ed}.feedback p{margin:7px 0}.navigator{border-top:1px solid var(--line);margin-top:25px;padding-top:22px}.navhead{font-size:13px;color:var(--muted)}.numbers{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.number{width:39px;height:39px;border-radius:8px;border:1px solid var(--line);background:white}.number.answered{background:#e8f2ee;border-color:#98c8b1}.number.current{border:2px solid var(--accent);color:var(--accent)}.submit{margin-top:5px}.score{padding:25px;background:var(--light);border-radius:12px;display:flex;flex-direction:column;gap:7px}.score strong{font-size:39px}.review{padding:20px 0;border-bottom:1px solid var(--line)}.review p{margin:6px 0}input[type=text]{width:100%;padding:14px;border:1px solid var(--line);border-radius:9px;margin:15px 0}footer{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding:24px 0}@media(max-width:780px){header{padding:16px;flex-wrap:wrap}nav{gap:15px}.grid,.grid.modes{grid-template-columns:repeat(2,1fr)}.choices{grid-template-columns:1fr}.hero{padding:42px 0 32px}}@media(max-width:480px){.grid,.grid.modes{grid-template-columns:1fr}.tile{min-height:100px}.panel{padding:18px}main{padding:0 15px 50px}.question{font-size:19px}}
/* Language switch, matches Study with Jasmine */
.lang-switch{display:flex;align-items:center;gap:3px;padding:4px;background:#f9edf1;border:1px solid #efd9e1;border-radius:999px;white-space:nowrap}
.lang-switch button{border:0;background:transparent;color:#705e68;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:800}
.lang-switch button.active{background:#b43f64;color:#fff}
header{flex-wrap:wrap}
@media(max-width:600px){.lang-switch{margin-left:auto}nav{order:3;width:100%;justify-content:center}}
/* Professional typography */

body,
button,
input,
textarea,
select {
    font-family: "Inter", "Noto Sans SC", sans-serif;
}

body {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4 {
    font-family: "Inter", "Noto Sans SC", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.035em;
}

h1 {
    font-size: clamp(32px, 4vw, 44px);
}

h2 {
    font-size: clamp(22px, 2.5vw, 28px);
}

p {
    line-height: 1.7;
}

/* =========================================
   STUDY WITH JASMINE
   PROFESSIONAL SOFT PINK THEME
========================================= */

:root {
    --pink: #B94F75;
    --pink-dark: #9F3E60;
    --pink-light: #FBEFF3;
    --border: #EEDDE4;
    --muted: #6D6872;
}

/* Main background */

html,
body {
    background: #FFF8FA !important;
    color: #292630;
}

/* Navigation */

header,
.site-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #F1DEE5;
}

/* Hero */

.hero {
    background: #FCEEF3 !important;
    border: 1px solid #F1DCE4;
    border-radius: 22px;
    padding: 50px 45px;
    margin-top: 35px;
    margin-bottom: 30px;
}

.hero h1 {
    color: #292630;
}

.hero p {
    color: #68616B;
}

/* Section backgrounds */

.section,
.level-section,
.mode-section,
.skills-section {
    background: #FFFDFE;
    border: 1px solid #F1E2E8;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 22px;
}

/* HSK level cards */

.tile,
.level-card {
    background: #FFFFFF;
    border: 1px solid #EEDDE4;
    border-radius: 14px;
    transition: 0.2s ease;
}

.tile:hover,
.level-card:hover {
    background: #FFF5F8;
    border-color: #D58AA5;
    transform: translateY(-2px);
}

.tile.active,
.level-card.active {
    background: #FCEBF1 !important;
    border: 2px solid #B94F75 !important;
    box-shadow: none !important;
}

/* Practice and mock exam */

.mode-card,
[data-mode] {
    background: #FFFFFF;
    border: 1px solid #EEDDE4;
    border-radius: 14px;
}

.mode-card.active,
[data-mode].active {
    background: #FCEBF1;
    border-color: #B94F75;
}

/* Exercise panel */

#panel,
.exercise-panel {
    background: #FFFFFF;
    border: 1px solid #EEDDE4;
    border-radius: 18px;
}

/* Buttons */

.btn:not(.secondary),
.primary-button {
    background: #B94F75;
    color: #FFFFFF;
    border-radius: 10px;
}

.btn:not(.secondary):hover,
.primary-button:hover {
    background: #9F3E60;
}

/* Mobile */

@media (max-width: 768px) {
    .hero {
        padding: 30px 22px;
        margin-top: 20px;
    }

    .section,
    .level-section,
    .mode-section,
    .skills-section {
        padding: 20px;
    }
}


/* Publisher-supplied mock listening tracks */
.audio-tracks{display:grid;gap:14px;margin-top:20px}
.audio-track{background:#fff;border:1px solid #e6dce2;border-radius:14px;padding:20px}
.audio-track-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.audio-track-head strong{font-size:16px;color:#242833}
.audio-track-head span{font-size:12px;color:#7a6572}
.audio-track audio{display:block;width:100%;accent-color:#bd3f72}
@media(max-width:600px){.audio-track-head{align-items:flex-start;flex-direction:column}}