:root { color-scheme: light; --bg: #f6f8fa; --text: #253138; --muted: #69757d; --line: #dce3e8; --accent: #16786d; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); letter-spacing: 0; }
main { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.topbar { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.brand { font-size: 1.8rem; font-weight: 750; color: var(--text); text-decoration: none; }
.brand span { font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-left: 10px; }
.stage { color: #96546b; font-size: 0.8rem; white-space: nowrap; }
.courses { padding: 32px 0 48px; min-height: 480px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
h1 { font-size: 1.25rem; margin: 0; }
.section-heading > span { color: var(--muted); font-size: 0.8rem; }
.course-heading { align-items: center; flex-wrap: wrap; }
.course-count { display: grid; gap: 6px; }
.course-count > span { color: var(--muted); font-size: .8rem; }
.learning-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; max-width: 100%; padding: 12px 18px; border: 1px solid var(--accent); border-radius: 6px; background: #fff; color: var(--accent); font-size: 1.25rem; font-weight: 650; line-height: 1.5; text-decoration: none; }
.learning-link img { display: block; flex: 0 0 22px; }
.learning-link:hover { background: #edf6f3; }
.learning-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.course { display: block; max-width: 520px; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.course:hover { border-color: var(--accent); }
.course:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.preview { aspect-ratio: 1080 / 760; border-bottom: 1px solid var(--line); background: #fff; overflow: hidden; }
.preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.course[href="/eiken/"] .preview img { object-fit: contain; }
.course-content { padding: 22px; }
.subject { font-size: 0.78rem; color: var(--accent); }
h2 { font-size: 1.25rem; margin: 8px 0 10px; line-height: 1.5; overflow-wrap: anywhere; }
.materials { font-size: 0.85rem; color: var(--muted); margin: 0 0 22px; line-height: 1.7; }
.materials span { margin: 0 6px; }
.open { display: flex; align-items: center; justify-content: space-between; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
footer { border-top: 1px solid var(--line); padding: 18px 0 28px; }
.app-version { font-size: 0.75rem; color: var(--muted); margin: 0; }
.account-navigation { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; font-size: .85rem; min-width: 0; }
a { color: var(--accent); }
button, input { font: inherit; }
button { cursor: pointer; border: 1px solid var(--line); border-radius: 5px; background: white; padding: 10px 14px; color: var(--text); }
button:disabled { opacity: .65; cursor: default; }
.primary, .register-link { background: var(--accent); color: white; border: 0; border-radius: 5px; padding: 12px 16px; text-decoration: none; }
.viewer-name { overflow-wrap: anywhere; max-width: 180px; }
.account-section { max-width: 420px; margin: 48px auto 64px; min-height: 450px; }
.account-section h1 { margin-bottom: 28px; }
form { display: grid; gap: 20px; }
form label, .search-label { display: grid; gap: 8px; font-size: .9rem; }
input:not([type="checkbox"]) { width: 100%; min-width: 0; border: 1px solid #a9b7bf; border-radius: 5px; background: white; padding: 12px; color: var(--text); }
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.account-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; font-size: .85rem; }
#notice, .status { padding: 12px; border-left: 3px solid #ae526c; background: #fff2f5; color: #653143; font-size: .9rem; line-height: 1.7; overflow-wrap: anywhere; }
#resend { margin-top: 20px; }
.staff-section { padding: 32px 0 48px; min-height: 550px; }
.search-label { max-width: 400px; margin-bottom: 24px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 16px 12px; vertical-align: middle; }
th { color: var(--muted); white-space: nowrap; font-weight: 500; }
.student-email { display: block; margin-top: 6px; color: var(--muted); overflow-wrap: anywhere; }
.enable-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.enable-label input { accent-color: var(--accent); width: 18px; height: 18px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); font-size: .85rem; line-height: 1.7; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 20px 0; margin: 0 0 24px; border-block: 1px solid var(--line); }
.metrics dt { font-size: .8rem; color: var(--muted); }
.metrics dd { margin: 8px 0 0; font-size: 1.25rem; font-weight: 650; overflow-wrap: anywhere; }
.roster-tools { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.roster-tools .search-label { flex: 1 1 260px; margin: 0; }
.roster-tools > label, .report-heading label { display: grid; gap: 8px; font-size: .85rem; }
select { font: inherit; padding: 11px; border: 1px solid #a9b7bf; border-radius: 5px; background: white; color: var(--text); max-width: 100%; }
button img, .tool-link img { display: block; flex: 0 0 18px; }
#refresh { width: 44px; height: 44px; padding: 12px; flex: 0 0 44px; }
.tool-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; font-size: .85rem; }
.report-section { padding: 32px 0 48px; min-height: 550px; }
.report-tools { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.report-tools label { display: grid; gap: 8px; font-size: .9rem; flex: 0 1 340px; min-width: 0; }
.report-tools select { width: 100%; min-height: 48px; }
.report-tools > a { display: inline-flex; align-items: center; min-height: 48px; font-size: .9rem; }
.report-identity { overflow-wrap: anywhere; font-weight: 550; font-size: .9rem; }
.report-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 32px 0 16px; }
.report-section table { min-width: 640px; }
.report-section td:first-child { max-width: 240px; overflow-wrap: anywhere; }
#more { margin-top: 20px; }
.study-section { padding: 32px 0; border-bottom: 1px solid var(--line); }
.study-section h2 { margin: 0; }
.study-section h3 { margin: 0 0 8px; font-size: 1rem; }
.study-section h3 span { display: inline-block; margin-left: 8px; font-size: .8rem; font-weight: 400; color: var(--muted); }
.study-section p { overflow-wrap: anywhere; }
#study-refresh, #study-save { width: 44px; height: 44px; padding: 11px; flex: 0 0 44px; }
#study-notice { padding: 12px; border-left: 3px solid #ae526c; background: #fff2f5; font-size: .9rem; }
.today-study { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 300px); align-items: center; gap: 24px; padding-bottom: 24px; }
.today-duration { margin: 8px 0; font-size: 1.6rem; font-weight: 650; }
#study-achievement { font-size: .9rem; margin: 10px 0; }
#study-progress { display: block; width: 100%; max-width: 440px; height: 12px; accent-color: var(--accent); }
#study-goal-form { display: flex; gap: 12px; align-items: flex-end; }
#study-goal-form label { flex: 1; min-width: 0; }
.study-period { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.study-period label { display: grid; gap: 6px; font-size: .85rem; min-width: 0; }
#study-range-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
#study-range-form label { flex: 1 1 150px; }
#study-range-form button { min-height: 44px; }
#study-range-label { font-size: .85rem; color: var(--muted); margin: 0 0 12px; }
.study-metrics { margin-bottom: 16px; }
.study-chart { margin: 0 0 20px; }
.study-chart figcaption { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; margin-bottom: 12px; }
.study-chart-key { margin-left: auto; color: var(--muted); }
#study-chart { display: block; width: 100%; height: 240px; }
.study-days { margin-top: 24px; }
.study-days summary { cursor: pointer; font-size: .9rem; font-weight: 600; }
.study-days table { min-width: 450px; }
.study-pagination { display: flex; gap: 16px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: .85rem; }
.study-pagination button { width: 44px; height: 44px; padding: 8px; }
.experience-section { padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.experience-heading, .experience-progress-line { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.experience-heading h3 { display: flex; align-items: baseline; gap: 12px; margin: 0; }
#experience-level { font-size: 1.6rem; color: #16786d; }
#experience-total, .experience-progress-line { font-size: .85rem; }
#experience-progress { display: block; width: 100%; height: 12px; accent-color: #447faa; }
.experience-skills { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 20px 0 14px; }
.experience-skills dt { font-size: .8rem; color: var(--muted); }
.experience-skills dt span { display: inline-block; margin-left: 6px; }
.experience-skills dd { font-size: 1.2rem; font-weight: 650; margin: 8px 0 0; overflow-wrap: anywhere; }
.experience-target { font-size: .9rem; line-height: 1.7; }
.experience-details summary { font-size: .85rem; cursor: pointer; }
.experience-details h4 { font-size: .9rem; margin: 24px 0 10px; }
.experience-details h4 span { font-size: .8rem; font-weight: 400; color: var(--muted); }
.experience-details table { min-width: 620px; }
.trophy-section { padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.trophy-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.trophy-heading h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.trophy-heading h3 .trophy-icon { margin: 0; }
#trophy-count { font-size: .8rem; color: var(--muted); }
#trophy-list { list-style: none; margin: 0; padding: 0; }
#trophy-list li { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
#trophy-list li:last-child { border-bottom: 0; }
.trophy-icon { display: block; width: 32px; height: 32px; background: #7d8790; mask: url('/icons/trophy.svg') center / contain no-repeat; }
[data-unlocked="true"] .trophy-icon { background: #a67417; }
#trophy-list h4 { font-size: 1rem; margin: 0 0 6px; overflow-wrap: anywhere; }
#trophy-list p { margin: 0; font-size: .85rem; color: var(--muted); }
.trophy-status { display: grid; gap: 6px; text-align: right; font-size: .85rem; }
.trophy-status time { font-size: .75rem; color: var(--muted); }
#trophy-latest, #trophy-empty { font-size: .85rem; color: var(--muted); line-height: 1.7; }
.trophy-collection summary { cursor: pointer; font-size: .85rem; }
.trophy-tools { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }
.trophy-tools label { display: grid; gap: 6px; font-size: .8rem; }
#trophy-shown { font-size: .8rem; color: var(--muted); padding-bottom: 12px; }
@media (max-width: 600px) { #trophy-list li { grid-template-columns: 32px minmax(0,1fr); } .trophy-status { grid-column: 2; text-align: left; } }
@media (max-width: 600px) { .today-study { grid-template-columns: minmax(0, 1fr); gap: 18px; } .study-chart-key { width: 100%; margin-left: 0; } }
@media (max-width: 600px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .report-heading { align-items: flex-start; } }
@media (max-width: 600px) { .topbar { align-items: flex-start; padding: 20px 0; flex-wrap: wrap; } .account-navigation { justify-content: flex-start; } .account-section { margin-top: 32px; } }
@media (max-width: 480px) { main { width: calc(100% - 28px); } .topbar { min-height: 80px; } .courses { padding-top: 24px; } .course-content { padding: 18px; } }