:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #f3f6fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% 8%, #e3eeff 0, transparent 28rem), #f7f9fc; }
button, textarea { font: inherit; }
.auth-page { background:#f4f6fa; }.auth-shell { display:grid; min-height:100vh; place-items:center; padding:28px; }.auth-card { width:min(400px,100%); padding:34px; border:1px solid #e1e6ee; border-radius:14px; background:#fff; box-shadow:0 16px 38px rgba(27,45,74,.09); }.auth-brand { display:flex; align-items:center; gap:13px; }.auth-brand h1 { font-size:1.55rem; }.auth-brand .eyebrow { margin-bottom:3px; font-size:.66rem; }.auth-mark { display:grid; width:40px; height:40px; place-items:center; border-radius:10px; color:#fff; background:#274f9e; font-size:1.16rem; font-weight:800; }.auth-intro { margin:22px 0 0; color:#68778c; font-size:.92rem; line-height:1.6; }.login-form { display:grid; gap:17px; margin-top:25px; }.login-form label { display:grid; gap:7px; color:#3f5068; font-size:.88rem; font-weight:700; }.login-form input { padding:11px 12px; border:1px solid #ccd5e1; border-radius:8px; color:#172033; outline:none; }.login-form input:focus { border-color:#5a7bd1; box-shadow:0 0 0 3px #e5ecff; }.auth-submit { width:100%; margin-top:3px; padding:12px 18px; }.auth-error { margin:20px 0 -4px; padding:10px 12px; border-radius:7px; color:#93333f; background:#fff0f0; font-size:.85rem; }.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.dashboard-grid > :last-child { grid-column:1/-1; }.dashboard-text { color:#607089; line-height:1.6; }.admin-shell { width:min(1440px,calc(100% - 32px)); margin:0 auto; padding:40px 0; }.admin-shell .card { margin-bottom:18px; overflow:auto; }table { width:100%; border-collapse:collapse; margin-top:14px; font-size:.87rem; }th,td { padding:9px 10px; border-bottom:1px solid #e3e9f2; text-align:left; vertical-align:top; }th { color:#50617a; background:#f5f8fc; white-space:nowrap; }td { color:#2d3e58; }@media (max-width:780px){.dashboard-grid{grid-template-columns:1fr}.dashboard-grid > :last-child{grid-column:auto}.admin-shell{width:min(100% - 22px,1440px);padding:26px 0;}.auth-card{padding:28px 22px;}}
.page-shell { width: min(1260px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0; }
.topbar { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.eyebrow { margin: 0 0 6px; color: #5d6b82; font-size: .73rem; font-weight: 750; letter-spacing: .13em; }
h1, h2 { margin: 0; letter-spacing: -.035em; } h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); } h2 { font-size: 1.8rem; }
.date { margin: 7px 0 0; color: #65738a; font-size: .92rem; }
.progress { padding: 9px 13px; border-radius: 999px; background: #e9eef8; color: #31425f; font-weight: 700; } .progress span { color: #8793a8; padding: 0 2px; }
.practice-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }.pause-button { padding:8px 11px; border:1px solid #c8d4e4; border-radius:8px; color:#536782; background:#fff; cursor:pointer; font-size:.8rem; font-weight:700; }.pause-button:hover { color:#2e579b; border-color:#9eb4d5; background:#f6f9fe; }
.learning-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 22px; align-items: start; }
.sentence-panel { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; padding: 18px; border: 1px solid rgba(200, 211, 230, .8); border-radius: 18px; background: rgba(255,255,255,.75); box-shadow: 0 15px 45px rgba(35, 57, 92, .08); }
.sentence-panel-heading { padding-bottom: 14px; border-bottom: 1px solid #e5ebf3; } .sentence-panel h2 { font-size: 1.35rem; }
.sentence-stats { display: grid; gap: 8px; padding: 11px 0; }
.word-section { margin-top: 5px; padding-top: 12px; border-top: 1px solid #e5ebf3; }.word-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }.word-list span { padding: 4px 7px; border-radius: 6px; color: #8a4e14; background: #fff0d5; font-size: .75rem; }.word-list .no-words { color: #718098; background: #f0f3f7; }
.sentence-record { padding: 10px 12px; border: 1px solid #dde5f0; border-radius: 10px; background: #f9fbfe; } .sentence-record.current { border-color: #7896e6; background: #f1f5ff; }
.record-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .record-title strong { color: #273956; } .record-title em { padding: 3px 7px; border-radius: 999px; color: #52627a; background: #e7edf5; font-size: .72rem; font-style: normal; } .current .record-title em { color: #284fa8; background: #dce7ff; }
.record-meta { margin: 6px 0; color: #617089; font-size: .8rem; } .record-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.accuracy-list { display: flex; flex-wrap: wrap; gap: 5px; } .accuracy-list span { padding: 3px 6px; border-radius: 5px; color: #42607d; background: #e9f0f7; font-size: .74rem; }.score { flex: none; color: #d88a12; letter-spacing: 1px; font-size: .93rem; white-space: nowrap; }.score.no-score { color: #697993; letter-spacing: 0; font-size: .75rem; }.record-answer { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #cbd6e4; color: #233c68; font-size: .84rem; line-height: 1.45; }.stats-note { margin: 0; color: #718098; font-size: .76rem; line-height: 1.45; }
.card { padding: clamp(24px, 5vw, 42px); border: 1px solid rgba(200, 211, 230, .8); border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: 0 15px 45px rgba(35, 57, 92, .10); }
.prestudy-card { max-width:760px; margin:0 auto; }.prestudy-card .progress { display:inline-block; margin:0 0 28px; }.prestudy-card article { min-height:245px; padding:30px; border:1px solid #dce6f5; border-radius:16px; background:linear-gradient(135deg,#f7faff,#edf4ff); }.prestudy-card h2 { color:#244f9d; font-size:clamp(2rem,6vw,3.2rem); }.prestudy-meaning { margin:18px 0 0; color:#263f62; font-size:1.2rem; font-weight:700; }.prestudy-note { margin:16px 0 0; padding:13px 15px; border-radius:9px; color:#536b88; background:#fff; line-height:1.7; }.prestudy-confirm{display:flex;align-items:center;gap:9px;margin:18px 0 4px;padding:13px 15px;border:1px solid #cbd8ef;border-radius:12px;background:#f5f8fe;color:#314365;font-weight:700;cursor:pointer}.prestudy-confirm input{width:18px;height:18px;accent-color:#3867df}
.prestudy-card .ipa { display:inline-block; margin-left:10px; color:#7083a1; font-size:.42em; font-weight:600; letter-spacing:0; vertical-align:middle; white-space:nowrap; }
.audio-area { display: grid; justify-items: center; padding: 6px 0 32px; border-bottom: 1px solid #e7ecf4; }
.instruction { color: #65738a; margin: 0 0 18px; }
.play-controls { display: flex; align-items: center; gap: 9px; }.play-button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 0; border-radius: 12px; color: white; background: #345edb; box-shadow: 0 7px 16px rgba(52,94,219,.24); cursor: pointer; font-weight: 750; }
.slow-play-button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid #b9c9e6; border-radius: 10px; color: #34527d; background: #f4f7fd; cursor: pointer; font-size: .82rem; font-weight: 750; }
.play-button:hover { background: #254dc5; } .play-button:disabled { cursor: wait; opacity: .68; } .play-icon { font-size: .85rem; }
.input-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }.input-label { display: block; margin: 0; font-weight: 750; }.translation-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 0; border-radius: 7px; color: #536986; background: #edf2f8; cursor: pointer; font-size: .78rem; font-weight: 700; }.translation-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }.translation { margin: 10px 0 2px; padding: 10px 12px; border-left: 3px solid #7696e7; border-radius: 5px; color: #314866; background: #f1f5ff; font-size: .91rem; line-height: 1.55; }.translation-error { border-left-color: #d07070; color: #8b313b; background: #fff0f0; }
textarea { display: block; width: 100%; min-height: 145px; resize: vertical; padding: 16px; border: 1px solid #cbd5e3; border-radius: 13px; outline: none; line-height: 1.7; color: #172033; background: #fff; }
textarea:focus { border-color: #5379e5; box-shadow: 0 0 0 4px #dfe8ff; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.button { border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer; font-weight: 750; } .button:disabled { cursor: not-allowed; opacity: .42; }
.primary { color: white; background: #345edb; } .secondary { color: #3d4b62; background: #eaf0f8; } .success { margin-left: auto; color: white; background: #198b62; }
.feedback { margin-top: 24px; padding: 18px; border-radius: 13px; } .feedback-success { color: #07583c; background: #e5f8ef; } .feedback-error { color: #6d3a03; background: #fff4de; }.feedback-answer { color: #24456e; background: #edf3ff; }
.feedback-message { margin: 0 0 12px; font-weight: 750; } .feedback-success .feedback-message { margin: 0; }
.diff-result { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; line-height: 1.8; }
.diff-token { display: inline-block; padding: 1px 6px; border-radius: 5px; } .correct { color: #176348; background: #dff5e9; } .incorrect { color: #a22c38; background: #ffdfe2; text-decoration: line-through; text-decoration-thickness: 2px; } .missing { width: 1.1em; height: 1.55em; padding: 0; border-radius: 3px; background: #ffdfe2; border-bottom: 2px solid #d33848; }.correction { color: #176348; background: #dff5e9; font-weight: 700; }
.vocab-suggestions { margin-top:16px; padding:14px 16px; border:1px solid #cfe0fb; border-radius:11px; color:#35557e; background:#f3f7ff; }.vocab-suggestions p { margin:0 0 10px; font-size:.88rem; }.vocab-suggestions div { display:flex; flex-wrap:wrap; gap:7px; }.vocab-add { padding:6px 9px; border:1px solid #a9c3ee; border-radius:7px; color:#2b5da7; background:#fff; cursor:pointer; font-weight:700; }.vocab-add b { font-size:1rem; }.vocab-add:disabled { color:#5d7b69; border-color:#b9d8c0; cursor:default; }
.empty-state, .completion { text-align: center; padding: 30px 12px; } .empty-state p, .completion p { color: #64738b; line-height: 1.7; } code { padding: 2px 5px; border-radius: 4px; color: #263d72; background: #edf1f7; font-size: .9em; }
@media (max-width: 780px) { .page-shell { width: min(100% - 22px, 760px); padding: 26px 0; } .topbar { align-items: start; } .learning-layout { grid-template-columns: 1fr; } .sentence-panel { position: static; max-height: none; } .actions .button { flex: 1; } .success { margin-left: 0; } }

/* Login and dashboard layout refinements */
.auth-page { min-height:100vh; background:linear-gradient(135deg,#edf3fc 0%,#f7f9fc 58%,#eaf0fa 100%); }
.auth-shell { width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.auth-card { width:min(420px,100%); padding:38px 40px; border:1px solid #dce5f1; border-radius:18px; background:#fff; box-shadow:0 20px 55px rgba(35,58,96,.14); }
.auth-brand { display:flex; align-items:center; gap:14px; }.auth-brand h1 { margin:0; font-size:1.7rem; line-height:1.1; }.auth-mark { flex:none; width:42px; height:42px; }.auth-intro { margin:22px 0 0; }
.login-form { gap:16px; }.login-form input { width:100%; min-height:44px; font-size:.95rem; }.auth-submit { min-height:44px; border-radius:9px; }
.dashboard-page { min-height:100vh; background:#f5f7fb; }.dashboard-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:56px 0 72px; }
.dashboard-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }.dashboard-header h1 { font-size:2rem; }.dashboard-header .secondary { padding:10px 15px; }
.today-card { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:178px; padding:30px 34px; border-radius:16px; color:#fff; background:linear-gradient(110deg,#244d98,#3866c5); box-shadow:0 16px 34px rgba(45,88,180,.22); }.today-card .eyebrow { color:#cbd9ff; }.today-card h2 { font-size:1.6rem; }.today-card p { margin:12px 0 0; color:#e9efff; }.today-card strong { color:#fff; font-size:1.25rem; }.today-card .primary { flex:none; min-width:108px; color:#244d98; background:#fff; }
.dashboard-panels { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr); gap:18px; margin-top:18px; align-items:stretch; }.dashboard-panel { min-height:220px; padding:26px 28px; border:1px solid #dfe6f0; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(42,61,95,.06); }.panel-heading { margin-bottom:8px; }.panel-heading h2 { font-size:1.35rem; }.empty-copy { margin:20px 0; color:#718096; line-height:1.7; }.dashboard-panel table { margin-top:12px; }.dashboard-panel th,.dashboard-panel td { padding:9px 7px; font-size:.83rem; }.dashboard-panel th:first-child,.dashboard-panel td:first-child { padding-left:0; }.dashboard-panel th:last-child,.dashboard-panel td:last-child { padding-right:0; }
.cumulative-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }.cumulative-metrics article { padding:20px 23px; border:1px solid #d9e4f3; border-radius:14px; background:#fff; box-shadow:0 7px 20px rgba(40,59,91,.05); }.cumulative-metrics span,.cumulative-metrics small { display:block; color:#708099; font-size:.78rem; }.cumulative-metrics strong { display:block; margin:7px 0 5px; color:#244f9d; font-size:1.55rem; letter-spacing:-.03em; }
@media (max-width:760px) { .auth-card { padding:30px 24px; }.dashboard-shell { width:min(100% - 28px,1120px); padding:32px 0 46px; }.dashboard-header { margin-bottom:20px; }.dashboard-header h1 { font-size:1.65rem; }.today-card { align-items:flex-start; flex-direction:column; padding:25px; }.cumulative-metrics { grid-template-columns:1fr; }.dashboard-panels { grid-template-columns:1fr; }.dashboard-panel { min-height:auto; padding:24px; } }

.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.settings-form { display:flex; align-items:end; gap:8px; padding:12px; border:1px solid #e1e7f0; border-radius:10px; background:#f8faff; }.settings-form label { display:grid; flex:1; gap:6px; color:#53647c; font-size:.8rem; font-weight:700; }.settings-form input,.settings-form select { min-width:0; height:36px; padding:6px 8px; border:1px solid #cdd8e7; border-radius:6px; color:#273a57; background:#fff; }.settings-form .button { flex:none; padding:9px 11px; font-size:.8rem; white-space:nowrap; }@media (max-width:900px){.settings-grid{grid-template-columns:1fr}.settings-form{align-items:stretch; flex-direction:column}.settings-form .button{width:100%;}}
.history-list { display:grid; gap:10px; }.history-row { display:grid; grid-template-columns:1.25fr 1fr .9fr; gap:16px; align-items:center; padding:13px 0; border-bottom:1px solid #e7edf5; }.history-row:last-child { border-bottom:0; }.history-date strong,.history-date small,.history-progress span,.history-rating small { display:block; }.history-date strong { color:#334762; font-size:.9rem; }.history-date small,.history-progress span,.history-rating small { margin-top:3px; color:#7a899d; font-size:.75rem; }.history-progress b { color:#3158a2; font-size:.92rem; }.progress-track { height:6px; margin-top:7px; overflow:hidden; border-radius:999px; background:#e8eef7; }.progress-track i { display:block; height:100%; border-radius:999px; background:#4c76d2; }.history-rating { text-align:right; }.rating-stars { letter-spacing:1px; font-size:1rem; }.rating-3 { color:#198b62; }.rating-2 { color:#3d70ce; }.rating-1 { color:#df8d1f; }.rating-0 { color:#a8b2c1; }@media (max-width:760px){.history-row{grid-template-columns:1fr;gap:7px}.history-rating{text-align:left}}
.history-details { display:block; margin-top:7px; color:#657b9a; font-size:.76rem; }

/* Administrator console */
.admin-page { min-height:100vh; background:#f4f6fa; }.admin-shell { width:min(1240px,calc(100% - 40px)); padding:52px 0 72px; }.admin-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; }.admin-header h1 { font-size:2rem; }.admin-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }.admin-metrics article { padding:21px 23px; border:1px solid #dfe6f0; border-radius:14px; background:#fff; box-shadow:0 7px 20px rgba(40,59,91,.05); }.admin-metrics span,.admin-metrics small { display:block; color:#718096; font-size:.8rem; }.admin-metrics strong { display:block; margin:6px 0; color:#254b91; font-size:1.85rem; }.admin-panel { margin-bottom:18px; padding:24px 26px; border:1px solid #dfe6f0; border-radius:15px; background:#fff; box-shadow:0 7px 20px rgba(40,59,91,.05); }.admin-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }.admin-panel-heading h2 { font-size:1.35rem; }.admin-panel-heading > span { margin-top:4px; color:#78869b; font-size:.8rem; }.table-wrap { overflow-x:auto; }.admin-panel table { margin:0; min-width:680px; }.admin-panel th { color:#5a6b84; background:#f6f8fc; font-size:.76rem; letter-spacing:.02em; }.admin-panel td { font-size:.82rem; }.admin-panel tr:last-child td { border-bottom:0; }.table-empty { padding:22px; text-align:center; color:#7a879a; }.user-badge { display:inline-block; padding:3px 7px; border-radius:5px; color:#31549b; background:#edf3ff; font-size:.75rem; }.admin-bottom-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }.admin-bottom-grid .admin-panel { min-height:186px; }.admin-word-list { display:flex; flex-wrap:wrap; gap:8px; }.admin-word-list span { display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:7px; color:#805010; background:#fff3dd; font-size:.8rem; }.admin-word-list em { min-width:18px; padding:1px 5px; border-radius:999px; color:#fff; background:#c8862b; font-size:.72rem; font-style:normal; text-align:center; }.admin-note { margin:0 0 13px; color:#65758b; line-height:1.7; font-size:.88rem; }.library-panel { overflow:hidden; }.sentence-cell { min-width:270px; line-height:1.55; }.library-panel code { color:#52698a; background:#f1f4f8; white-space:nowrap; }@media (max-width:760px){.admin-shell{width:min(100% - 28px,1240px);padding:32px 0 48px}.admin-header{margin-bottom:20px}.admin-header h1{font-size:1.65rem}.admin-metrics{grid-template-columns:1fr}.admin-bottom-grid{grid-template-columns:1fr}.admin-panel{padding:22px 20px}}
.user-history-group { padding:22px 0 4px; border-top:1px solid #e3eaf3; }.user-history-group:first-of-type { padding-top:3px; border-top:0; }.user-history-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:13px; }.user-history-heading h3 { margin:0; color:#2f466b; font-size:1.05rem; }.user-history-heading span { color:#8190a5; font-size:.78rem; }.compact-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }.compact-metrics article { padding:13px 15px; border:1px solid #e1e8f2; border-radius:10px; background:#f8faff; }.compact-metrics span,.compact-metrics small { display:block; color:#718096; font-size:.74rem; }.compact-metrics strong { display:block; margin:5px 0 2px; color:#3159a5; font-size:1.2rem; }@media (max-width:760px){.compact-metrics{grid-template-columns:1fr}.user-history-heading{align-items:flex-start;flex-direction:column;gap:4px}}
.table-pagination { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:16px; color:#718096; font-size:.8rem; }.table-pagination div { display:flex; align-items:center; gap:8px; }.table-pagination a,.table-pagination .page-disabled,.table-pagination strong { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 11px; border:1px solid #cfd9e8; border-radius:7px; text-decoration:none; white-space:nowrap; }.table-pagination a { color:#3159a5; background:#f8faff; font-weight:700; }.table-pagination a:hover { background:#edf3ff; }.table-pagination strong { color:#244f9d; background:#edf3ff; font-weight:750; }.table-pagination .page-disabled { color:#a5afbd; background:#f5f7fa; border-color:#e0e6ef; cursor:not-allowed; }@media (max-width:680px){.table-pagination{align-items:flex-end;flex-direction:column;}}
.sentence-cell { min-width:400px; }.sentence-learning { display:grid; gap:4px; margin-top:8px; padding:8px 10px; border-left:3px solid #a9c1ee; border-radius:4px; color:#536b88; background:#f5f8fe; font-size:.76rem; line-height:1.55; }.sentence-learning > span { color:#3159a5; font-weight:750; }.sentence-learning article { margin:0; }.sentence-learning b { color:#284f91; }.sentence-learning i { margin-left:6px; color:#7588a3; font-style:normal; }.sentence-learning small { color:#718096; }.empty-learning { color:#9a7a55; border-left-color:#d5c2a9; background:#fcfaf5; }@media (max-width:760px){.practice-header-actions{align-items:flex-end;flex-direction:column;}}