:root { --blue:#003a82; --deep:#002a5e; --orange:#d84c19; --light:#eaf1f8; --warm:#fbfaf7; --ink:#16181c; --muted:#626b77; --line:#dfe4e8; --green:#1d7a60; --shadow:0 20px 60px rgba(0,42,94,.09); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--warm); font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(28px,calc((100vw - 1440px)/2)); border-bottom:1px solid var(--line); background:rgba(251,250,247,.97); }
.brand { display:flex; align-items:center; gap:22px; padding:0; border:0; color:var(--deep); background:none; font-weight:850; }
.brand img { width:150px; }
.brand span { padding-left:22px; border-left:1px solid #cad2d9; }
.demo-badge { padding:8px 12px; border-radius:4px; color:var(--orange); background:#f7e0d1; font-size:12px; font-weight:800; }
.shell { width:min(1440px,100%); margin:0 auto; padding:28px 28px 56px; }
.eyebrow { color:var(--orange); font-size:12px; font-weight:900; letter-spacing:.13em; }
.home-view { min-height:calc(100vh - 156px); display:grid; grid-template-rows:auto 1fr auto; gap:18px; }
.hero-copy { max-width:900px; padding:18px 0 12px; }
.hero-copy h1 { margin:11px 0 10px; color:var(--deep); font-size:clamp(34px,4vw,52px); line-height:1.12; letter-spacing:-.04em; }
.hero-copy p { max-width:730px; margin:0; color:var(--muted); font-size:16px; line-height:1.7; }
.compact-hero { max-width:none; display:grid; grid-template-columns:1fr auto; align-items:end; column-gap:36px; padding:5px 0 12px; border-bottom:2px solid var(--deep); }
.compact-hero .eyebrow { grid-column:1 / -1; }
.compact-hero h1 { margin:8px 0 0; font-size:clamp(30px,3.5vw,44px); }
.compact-hero p { max-width:560px; margin-bottom:3px; font-size:13px; text-align:right; }
.home-section { margin-top:34px; padding-top:28px; border-top:2px solid var(--deep); }
.section-heading { display:flex; gap:18px; align-items:start; margin-bottom:18px; }
.section-heading > span { color:var(--orange); font-size:12px; font-weight:900; }
.section-heading h2 { margin:0 0 4px; color:var(--deep); font-size:24px; }
.section-heading p { margin:0; color:var(--muted); font-size:13px; }
.home-dashboard { min-height:0; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr); gap:22px; }
.registration-choice-panel,.result-choice-panel { padding:20px 22px; border:1px solid var(--line); background:#fff; }
.registration-choice-panel .section-heading,.result-choice-panel .section-heading { margin-bottom:13px; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.choice-card { min-height:150px; display:grid; align-content:start; justify-items:start; padding:19px 20px; border:1px solid #cbd5dd; border-radius:4px; text-align:left; background:#fff; transition:.18s ease; }
.choice-card:hover { transform:translateY(-3px); border-color:var(--blue); box-shadow:var(--shadow); }
.choice-code { display:inline-block; margin-bottom:13px; padding:5px 8px; color:#fff; background:var(--orange); font-size:10px; font-weight:900; letter-spacing:.12em; }
.choice-card strong { color:var(--deep); font-size:20px; }
.choice-card small { margin-top:7px; color:var(--muted); font-size:11px; line-height:1.5; }
.choice-card .choice-date { width:100%; margin-top:10px; padding-top:9px; border-top:1px solid #dce3e8; color:#536774; font-size:9px; }
.choice-card i { margin-top:auto; padding-top:12px; color:var(--blue); font-size:11px; font-style:normal; font-weight:850; }
.choice-card.selected { border-color:var(--deep); color:#fff; background:var(--deep); box-shadow:0 10px 24px rgba(0,42,94,.13); }
.choice-card.selected strong,.choice-card.selected i { color:#fff; }
.choice-card.selected small { color:#bed0e3; }
.choice-card.selected .choice-date { border-color:rgba(255,255,255,.2); color:#d7e5f2; }
.eju-track-picker { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; margin-top:13px; padding:11px 13px; background:var(--light); }
.eju-track-picker > span { color:var(--deep); font-size:11px; font-weight:800; }
.eju-track-picker > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.eju-track-picker button { display:flex; justify-content:space-between; gap:9px; padding:9px 11px; border:1px solid #b7c6d4; color:var(--deep); background:#fff; text-align:left; }
.eju-track-picker button small { color:var(--muted); font-size:9px; }
.eju-track-picker button.selected { border-color:var(--blue); color:#fff; background:var(--blue); }
.eju-track-picker button.selected small { color:#d7e5f2; }
.home-continue { width:100%; margin-top:13px; }
.home-continue:disabled { border-color:#d8dde1; color:#8a9299; background:#e9ecee; cursor:not-allowed; }
.result-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.result-choice-grid button { display:flex; justify-content:space-between; gap:20px; padding:21px 24px; border:1px solid var(--line); background:#fff; text-align:left; }
.result-choice-grid button:hover { border-color:var(--blue); }
.result-choice-grid b { color:var(--deep); }
.result-choice-grid span { color:var(--muted); font-size:12px; }
.compact-results { grid-template-columns:1fr; gap:9px; }
.compact-results button { min-height:70px; display:grid; padding:14px 16px; }
.compact-results span { font-size:10px; }
.result-scope { margin:10px 0 0; padding:9px 11px; color:#74432d; background:#fff4ed; font-size:9px; line-height:1.55; }
.backend-note { display:grid; gap:5px; margin-top:12px; padding:13px 15px; border-left:3px solid var(--orange); background:#f5f7f8; }
.backend-note b { color:var(--deep); font-size:12px; }
.backend-note span { color:var(--muted); font-size:10px; line-height:1.5; }
.system-strip { display:flex; justify-content:center; gap:18px; margin-top:38px; padding:18px; color:var(--deep); background:var(--light); font-size:13px; }
.system-strip span { color:var(--orange); }
.compact-strip { margin-top:0; padding:11px 16px; font-size:11px; }
.app-view { display:grid; grid-template-columns:310px minmax(0,1fr); gap:30px; }
.sidebar { position:sticky; top:24px; align-self:start; padding:10px 8px 20px 0; }
.back-home,.text-button { padding:0; border:0; color:var(--blue); background:none; font-weight:800; }
.program-mark { display:inline-block; margin-top:30px; padding:6px 9px; color:#fff; background:var(--orange); font-size:12px; font-weight:900; letter-spacing:.12em; }
.sidebar h1 { margin:16px 0 10px; color:var(--deep); font-size:36px; line-height:1.15; }
.sidebar > p { margin:0 0 25px; color:var(--muted); line-height:1.7; }
.steps { display:grid; gap:7px; margin:0; padding:24px 0; border-top:2px solid var(--deep); list-style:none; }
.steps li { display:grid; grid-template-columns:36px 1fr; gap:11px; align-items:center; padding:10px; border-radius:6px; color:#8a929b; }
.steps b { width:32px; height:32px; display:grid; place-items:center; border:1px solid #cbd1d7; border-radius:50%; font-size:12px; }
.steps span,.steps small { display:block; }
.steps strong { font-size:13px; }
.steps small { margin-top:2px; font-size:10px; }
.steps li.active { color:var(--deep); background:var(--light); }
.steps li.active b { color:#fff; border-color:var(--blue); background:var(--blue); }
.steps li.done { color:var(--green); }
.steps li.done b { color:#fff; border-color:var(--green); background:var(--green); }
.principle { display:grid; gap:5px; padding:16px; border-left:3px solid var(--orange); background:#fff; }
.principle span { color:var(--muted); font-size:10px; }
.principle strong { color:var(--deep); font-size:13px; }
.card { min-height:760px; overflow:hidden; border:1px solid #e3e0d8; border-radius:4px; background:#fff; box-shadow:var(--shadow); }
.card-head { display:flex; justify-content:space-between; gap:24px; padding:29px 34px 25px; border-bottom:1px solid var(--line); }
.card-head h2 { margin:7px 0; color:var(--deep); font-size:28px; }
.card-head p { margin:0; color:var(--muted); }
.save-state { align-self:start; padding:8px 10px; color:var(--muted); background:#f2f4f5; font-size:10px; white-space:nowrap; }
form { padding:29px 34px 34px; }
.screen { animation:enter .22s ease-out; }
@keyframes enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.notice,.confirm-alert { padding:15px 17px; border-left:3px solid var(--orange); color:#5c4a42; background:#fff7f1; line-height:1.65; }
.confirm-alert { margin-bottom:22px; border:1px solid #efb9a6; border-left:5px solid var(--orange); }
.deadline-warning { display:grid; gap:6px; margin-bottom:18px; padding:14px 16px; border:1px solid #efc4a8; border-left:4px solid var(--orange); background:#fff8f2; }
.deadline-warning b { color:#8c3518; }
.deadline-warning span { color:#6d594e; font-size:11px; line-height:1.7; }
.form-section { margin-top:26px; padding-top:26px; border-top:1px solid var(--line); }
.form-section-title { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.form-section-title > span { color:var(--orange); font-size:12px; font-weight:900; }
.form-section-title strong,.form-section-title small { display:block; }
.form-section-title strong { color:var(--deep); }
.form-section-title small { margin-top:2px; color:var(--muted); font-size:10px; }
.field-grid { display:grid; gap:16px; }
.field-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.field-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.span-two { grid-column:span 2; }
label > span { display:block; margin-bottom:7px; color:#323842; font-size:13px; font-weight:750; }
label em { color:var(--orange); font-style:normal; }
input,select { width:100%; height:46px; padding:0 13px; border:1px solid #cbd3da; border-radius:4px; color:var(--ink); background:#fff; outline:none; }
input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,58,130,.09); }
.uppercase-input,.residence-card-input { text-transform:uppercase; letter-spacing:.07em; }
.field-help { display:block; margin-top:6px; color:var(--muted); font-size:10px; line-height:1.5; }
.format-preview { margin-top:13px; padding:11px 13px; color:var(--muted); background:#f4f6f8; font-size:11px; }
.format-preview strong { margin-left:7px; color:var(--deep); letter-spacing:.06em; }
.format-preview .valid-text { color:var(--green); }
.residence-help { margin-top:13px; border:1px solid #cad6dc; background:#f7fafb; }
.residence-help summary { padding:13px 15px; color:var(--deep); font-size:11px; font-weight:800; cursor:pointer; }
.residence-help > div { padding:0 15px 15px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.75; }
.residence-help p { margin:12px 0 0; }
.residence-help b { color:var(--deep); }
.residence-help small { display:block; margin-top:12px; padding:10px; color:#8b391e; background:#fff4ed; line-height:1.7; }
.amount-preview { display:grid; grid-template-columns:140px 1fr; align-items:center; margin-top:25px; padding:17px; border:1px solid #cbd8e4; background:#f3f7fb; }
.amount-preview span { color:var(--muted); font-size:11px; }
.amount-preview strong { color:var(--deep); font-size:22px; }
.amount-preview small { grid-column:2; margin-top:4px; color:var(--muted); }
.photo-layout { display:grid; grid-template-columns:220px 1fr; gap:25px; }
.photo-drop { min-height:260px; display:grid; place-items:center; overflow:hidden; border:1px dashed #91a9c0; background:#f7fafc; cursor:pointer; }
.photo-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.photo-drop img { width:100%; height:260px; object-fit:contain; background:#eef2f5; }
.photo-drop > span { display:grid; gap:8px; padding:20px; text-align:center; }
.photo-drop b { color:var(--blue); }
.photo-drop small { color:var(--muted); font-size:10px; }
.photo-rules { padding:20px 23px; background:#f6f8f8; }
.photo-rules h3 { margin:16px 0 8px; color:var(--deep); }
.photo-rules ul { margin:0; padding-left:20px; color:var(--muted); font-size:12px; line-height:1.9; }
.status-chip { display:inline-block; padding:6px 9px; border-radius:999px; color:var(--muted); background:#e8ebed; font-size:10px; font-weight:800; }
.status-chip.ok { color:var(--green); background:#e4f2ed; }
.status-chip.error { color:#b22a36; background:#fdecef; }
.file-name-result { margin-top:15px; padding-top:13px; border-top:1px solid #dce1e4; color:var(--muted); font-size:10px; }
.file-name-result strong { color:var(--deep); }
.review-layout { display:grid; grid-template-columns:1fr 250px; gap:22px; align-items:start; }
.review-sheet { border:1px solid var(--line); }
.review-title { display:flex; justify-content:space-between; gap:15px; padding:16px 18px; color:#fff; background:var(--deep); }
.review-title b { font-size:11px; font-weight:500; opacity:.8; }
.review-sheet dl { margin:0; }
.review-sheet dl > div { display:grid; grid-template-columns:145px 1fr; gap:17px; padding:11px 17px; border-bottom:1px solid var(--line); }
.review-sheet dt { color:var(--muted); font-size:11px; }
.review-sheet dd { margin:0; color:var(--deep); font-size:12px; font-weight:800; }
.agreement { display:flex; gap:10px; padding:16px 17px; background:#fff8f3; cursor:pointer; }
.agreement input { width:18px; height:18px; flex:0 0 auto; }
.agreement span { margin:0; font-size:11px; line-height:1.6; }
.refund-agreement { border-top:1px solid #efc9b7; color:#6e2d1c; background:#fff1e9; }
.price-card { padding:23px; color:#fff; background:var(--deep); }
.price-card > span,.price-card small { display:block; color:#afc4d9; font-size:10px; }
.price-card strong { display:block; margin:10px 0 7px; font-size:30px; }
.price-lock { margin-top:18px; padding:10px; border:1px solid rgba(255,255,255,.18); color:#d8e6f3; font-size:10px; }
.payment-grid { display:grid; grid-template-columns:320px 1fr; gap:28px; }
.qr-card { position:relative; display:grid; justify-items:center; padding:28px; border:1px solid var(--line); text-align:center; }
.qr-card img { width:225px; margin:17px 0; }
.qr-card strong { color:var(--deep); font-size:18px; }
.qr-card small { margin-top:7px; color:var(--muted); }
.mock-ribbon { position:absolute; inset:0 0 auto; padding:7px; color:#963a18; background:#f7e0d1; font-size:10px; font-weight:800; }
.order-card { padding:28px; background:#f5f7f9; }
.callback-state { display:flex; align-items:center; gap:8px; color:var(--orange); font-size:11px; font-weight:800; }
.callback-state i { width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(216,76,25,.12); }
.order-card h3 { margin:17px 0; color:var(--deep); font-size:35px; }
.order-card dl { margin:0; }
.order-card dl > div { display:flex; justify-content:space-between; gap:18px; padding:10px 0; border-bottom:1px solid #dfe3e7; }
.order-card dt { color:var(--muted); font-size:11px; }
.order-card dd { margin:0; color:var(--deep); font-size:12px; font-weight:800; text-align:right; }
.order-card dd.orange { color:var(--orange); }
.api-note { margin:18px 0; padding:12px; border-left:3px solid var(--orange); color:var(--muted); background:#fff; font-size:10px; line-height:1.7; }
.api-note b { color:var(--deep); }
.payment-warning { display:grid; gap:5px; margin-top:18px; padding:13px; border:1px solid #e5ad95; color:#6c3120; background:#fff2ec; font-size:10px; line-height:1.7; }
.success-screen { padding:18px 4px 0; text-align:center; }
.success-mark { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; color:#fff; background:var(--green); font-size:34px; }
.success-screen h2 { margin:8px 0; color:var(--deep); }
.success-screen > p { margin:0; color:var(--muted); }
.success-id { display:inline-grid; gap:5px; margin:21px auto; padding:12px 25px; border:1px solid #b9c8d7; background:#f5f8fb; }
.success-id span { color:var(--muted); font-size:9px; }
.success-id strong { color:var(--deep); letter-spacing:.08em; }
.success-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.progress-entry { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 14px; padding:16px 18px; border:1px solid #9dc9c2; border-radius:14px; color:var(--deep); background:#e9f7f4; text-align:left; cursor:pointer; }
.progress-entry b { font-size:17px; }
.progress-entry span { color:var(--muted); }
.progress-view,.result-view { max-width:1100px; margin:0 auto; padding:28px 20px 60px; }
.progress-header { display:flex; align-items:center; gap:18px; margin:24px 0; }
.progress-header h1 { margin:4px 0; color:var(--deep); }
.progress-header p { margin:0; color:var(--muted); }
.progress-result { margin-top:18px; padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); }
.progress-result-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.progress-result-head span { color:var(--green); font-weight:800; }
.progress-result-head b { font-size:20px; color:var(--deep); }
.progress-result dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:18px 0 0; background:var(--line); }
.progress-result dl div { padding:14px; background:#fff; }
.progress-result dt { color:var(--muted); font-size:12px; }
.progress-result dd { margin:5px 0 0; color:var(--deep); font-weight:700; }
.qr-card em { display:block; margin-top:12px; color:var(--green); font-size:12px; font-style:normal; }
@media (max-width:700px) { .progress-entry { align-items:flex-start; flex-direction:column; } .progress-result dl { grid-template-columns:1fr; } }
.status-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:17px 0; text-align:left; }
.status-flow > div { display:flex; gap:9px; padding:15px; border:1px solid var(--line); }
.status-flow b { width:27px; height:27px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:var(--muted); background:#e9ecee; font-size:10px; }
.status-flow .done b { color:#fff; background:var(--green); }
.status-flow span,.status-flow small { display:block; }
.status-flow strong { color:var(--deep); font-size:11px; }
.status-flow small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.5; }
.form-actions { display:flex; justify-content:flex-end; gap:11px; margin-top:28px; padding-top:23px; border-top:1px solid var(--line); }
.primary-button,.secondary-button { min-height:45px; padding:0 21px; border-radius:4px; font-weight:850; }
.primary-button { border:1px solid var(--deep); color:#fff; background:var(--deep); }
.primary-button:hover { background:var(--blue); }
.primary-button:disabled { cursor:wait; opacity:.65; }
.secondary-button { border:1px solid #aeb9c4; color:var(--deep); background:#fff; }
.pay-demo { width:100%; }
.result-view { max-width:1080px; margin:0 auto; }
.result-header { display:flex; gap:22px; align-items:start; margin:35px 0 24px; padding-bottom:24px; border-bottom:2px solid var(--deep); }
.result-header .program-mark { margin:0; }
.result-header h1 { margin:7px 0 5px; color:var(--deep); font-size:38px; }
.result-header p { margin:0; color:var(--muted); }
.lookup-card { padding:24px; border:1px solid var(--line); background:#fff; }
.result-update-notice { display:grid; gap:5px; margin-bottom:12px; padding:13px 15px; border-left:4px solid var(--orange); color:#654638; background:#fff5ef; }
.result-update-notice b { font-size:11px; }
.result-update-notice span { font-size:10px; line-height:1.65; }
.lookup-line { display:grid; grid-template-columns:1fr auto; gap:10px; }
.lookup-fields { display:grid; grid-template-columns:190px minmax(260px,1fr) 190px auto; gap:10px; align-items:end; }
.lookup-card .text-button { margin-top:13px; font-size:12px; }
.privacy-note { margin:16px 0 0; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.result-empty { margin-top:20px; padding:44px; border:1px dashed #abb9c5; color:var(--muted); text-align:center; }
.result-empty.waiting { display:grid; gap:8px; border-style:solid; border-color:#e5bd9f; color:#6e4836; background:#fff7f1; }
.result-empty.waiting b { color:#8a3518; font-size:18px; }
.result-panel { margin-top:20px; padding:28px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }
.result-status { display:flex; align-items:end; justify-content:space-between; gap:15px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.result-status span { color:var(--muted); }
.result-status strong { font-size:30px; }
.result-status.pass strong { color:var(--green); }
.identity-row { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; padding:18px 0; }
.identity-row div { display:grid; gap:4px; padding:13px; background:#f4f6f7; }
.identity-row small { color:var(--muted); }
.identity-row b { color:var(--deep); }
.score-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.score-grid div { display:grid; gap:6px; padding:18px; border-top:3px solid var(--blue); background:var(--light); }
.score-grid span,.score-grid small { color:var(--muted); font-size:11px; }
.score-grid strong { color:var(--deep); font-size:24px; }
.score-grid .total { border-color:var(--orange); }
.jlpt-note { display:grid; gap:6px; margin-top:16px; padding:15px; border-left:3px solid var(--orange); background:#fff7f1; }
.jlpt-note span { color:var(--muted); font-size:11px; line-height:1.7; }
.download-demo { margin-top:18px; }
.official-result-head { display:flex; justify-content:space-between; align-items:end; gap:18px; padding:17px 19px; border-top:5px solid #ce1730; background:#f8fafb; }
.official-result-head span { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.12em; }
.official-result-head h2 { margin:5px 0 0; color:var(--ink); font-size:21px; }
.official-result-head > strong { color:var(--green); font-size:20px; }
.jlpt-result-head { border-color:#1470b7; }
.official-info-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #bfc9cf; border-bottom:0; }
.official-info-grid div { display:grid; gap:6px; padding:13px 15px; border-right:1px solid #bfc9cf; background:#fff; }
.official-info-grid div:last-child { border-right:0; }
.official-info-grid span { color:var(--muted); font-size:10px; }
.official-info-grid b { font-size:12px; }
.official-score-title { padding:14px 0 9px; color:var(--deep); font-size:12px; font-weight:900; }
.official-score-table { border:1px solid #bfc9cf; }
.official-score-table > div { display:grid; grid-template-columns:1.1fr 1.5fr .7fr .8fr; border-bottom:1px solid #cbd3d8; }
.official-score-table > div:last-child { border-bottom:0; }
.official-score-table span,.official-score-table b,.official-score-table strong { padding:10px 12px; border-right:1px solid #cbd3d8; font-size:11px; }
.official-score-table > div > :last-child { border-right:0; }
.official-score-table .head { color:var(--deep); background:#e8eef1; font-weight:900; }
.official-score-table b { text-align:right; }
.official-score-table .total-row { background:#f5f8f9; }
.result-download-row { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:18px; padding:15px; border-left:4px solid var(--orange); background:#fff6ef; }
.result-delay { display:grid; gap:5px; }
.result-delay b { color:var(--deep); font-size:12px; }
.result-delay span { color:var(--muted); font-size:10px; line-height:1.65; }
.result-download-row .download-demo { flex:0 0 auto; margin:0; }
.top-actions { display:flex; align-items:center; gap:12px; }
.admin-demo-link { padding:9px 13px; border:1px solid #a9c0be; color:var(--deep); background:#fff; font-size:11px; font-weight:850; text-decoration:none; }
@media (max-width:980px) { .home-dashboard { grid-template-columns:1fr; } .app-view { grid-template-columns:1fr; } .sidebar { position:static; } .sidebar h1,.sidebar > p,.principle { display:none; } .program-mark { margin-top:14px; } .steps { grid-template-columns:repeat(4,1fr); padding:12px 0; } .steps li { grid-template-columns:1fr; justify-items:center; text-align:center; } .steps small { display:none; } }
@media (max-width:680px) { .topbar { min-height:66px; height:auto; padding:12px 15px; } .brand img { width:116px; } .brand span { display:none; } .demo-badge { max-width:155px; text-align:center; font-size:9px; } .shell { padding:15px 12px 42px; } .home-view { gap:12px; } .compact-hero { display:block; padding:7px 2px 12px; } .compact-hero h1 { margin:7px 0 5px; font-size:27px; } .compact-hero p { margin:0; font-size:11px; text-align:left; } .registration-choice-panel,.result-choice-panel { padding:15px; } .home-dashboard { gap:12px; } .choice-grid,.result-choice-grid,.field-grid.two,.field-grid.three,.photo-layout,.review-layout,.payment-grid,.status-flow,.identity-row,.score-grid { grid-template-columns:1fr; } .compact-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .choice-card { min-height:138px; padding:13px; } .choice-card strong { font-size:16px; } .choice-card small { font-size:9px; } .eju-track-picker { grid-template-columns:1fr; gap:7px; } .eju-track-picker > div { grid-template-columns:repeat(2,minmax(0,1fr)); } .eju-track-picker button { display:grid; padding:8px; } .result-choice-grid button { display:grid; } .compact-results { grid-template-columns:repeat(2,minmax(0,1fr)); } .compact-results button { min-height:78px; padding:11px; } .backend-note { display:none; } .system-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; justify-content:start; text-align:center; } .system-strip span { display:none; } .steps { gap:2px; } .steps li { padding:6px 2px; } .steps b { width:28px; height:28px; } .steps strong { font-size:9px; } .card { min-height:0; } .card-head { display:block; padding:21px 18px; } .card-head h2 { font-size:22px; } .card-head p { font-size:11px; line-height:1.6; } .save-state { display:inline-block; margin-top:10px; white-space:normal; } form { padding:21px 18px 25px; } .span-two { grid-column:auto; } .amount-preview { grid-template-columns:1fr; gap:5px; } .amount-preview small { grid-column:auto; } .photo-drop { min-height:215px; } .review-title { display:grid; } .review-sheet dl > div { grid-template-columns:105px 1fr; } .price-card { order:-1; } .qr-card img { width:210px; } .order-card { padding:21px 17px; } .form-actions { justify-content:stretch; } .form-actions button { flex:1; padding:0 10px; font-size:11px; } .result-header { display:grid; } .result-header h1 { font-size:29px; } .lookup-line { grid-template-columns:1fr; } .result-panel { padding:19px; } .score-grid div { padding:15px; } }
@media (max-width:680px) { .top-actions { gap:6px; } .admin-demo-link { padding:8px; font-size:9px; } .demo-badge { display:none; } }

/* Student-facing text should remain readable on phones without zooming. */
.choice-code { font-size:12px; }
.choice-card small { font-size:13px; }
.choice-card .choice-date { font-size:12px; line-height:1.65; }
.choice-card i,.eju-track-picker > span { font-size:13px; }
.eju-track-picker button { font-size:14px; }
.eju-track-picker button small { font-size:11px; }
.compact-results span,.result-scope,.backend-note span,.compact-strip { font-size:12px; }
.backend-note b { font-size:14px; }
.steps strong { font-size:15px; }
.steps small,.principle span,.save-state { font-size:12px; }
.principle strong { font-size:15px; }
.deadline-warning span { font-size:13px; }
.form-section-title strong { font-size:16px; }
.form-section-title small { font-size:13px; }
label > span { font-size:15px; }
input,select { height:50px; font-size:16px; }
.field-help,.residence-help > div,.photo-drop small,.file-name-result { font-size:13px; }
.format-preview,.residence-help summary,.amount-preview span { font-size:13px; }
.photo-rules ul { font-size:14px; }
.status-chip { font-size:12px; }
.review-title b,.review-sheet dt,.agreement span { font-size:13px; }
.review-sheet dd { font-size:14px; }
.price-card > span,.price-card small,.price-lock,.api-note,.payment-warning { font-size:13px; }
.callback-state,.order-card dt { font-size:13px; }
.order-card dd { font-size:14px; }
.success-id span,.status-flow small { font-size:11px; }
.status-flow strong { font-size:13px; }
.result-update-notice b { font-size:14px; }
.result-update-notice span,.privacy-note,.result-delay span { font-size:13px; }
.official-result-head span,.official-info-grid span { font-size:12px; }
.official-info-grid b,.official-score-title,.result-delay b { font-size:14px; }
.official-score-table span,.official-score-table b,.official-score-table strong,.jlpt-note span { font-size:13px; }

@media (max-width:680px) {
  .compact-hero p { font-size:13px; }
  .choice-card { min-height:158px; }
  .choice-card strong { font-size:18px; }
  .choice-card small { font-size:12px; }
  .choice-card .choice-date { font-size:11px; }
  .steps strong { font-size:12px; }
  .steps small { font-size:11px; }
  .card-head p { font-size:13px; }
  .form-actions button { font-size:14px; }
  .compact-results button { min-height:92px; }
}
@media (max-width:680px) { .lookup-fields { grid-template-columns:1fr; } .official-result-head { display:grid; } .official-info-grid { grid-template-columns:1fr 1fr; border-bottom:1px solid #bfc9cf; } .official-info-grid div { border-bottom:1px solid #bfc9cf; } .official-info-grid div:nth-last-child(-n+2) { border-bottom:0; } .official-score-table { overflow:auto; } .official-score-table > div { min-width:620px; } .result-download-row { display:grid; } .result-download-row .download-demo { width:100%; } }