.roll-app{--roll-accent:#07569a;--roll-teal:#22a8ab;--roll-body:#243247;--roll-bg:#fff;--roll-title:#fff;--roll-grad:115deg;--roll-grad-a:#07569a;--roll-grad-b:#22a8ab;--roll-title-size:30px;--roll-title-weight:700;color:var(--roll-body);background:var(--roll-bg);border:1px solid #dce5ee;border-radius:18px;overflow:hidden;max-width:100%;font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 12px 40px #102a4412}.roll-app[data-theme="dark"]{--roll-bg:#111c2b!important;--roll-body:#e8eef6!important;color-scheme:dark}.roll-app[data-theme="system"]{color-scheme:light dark}@media(prefers-color-scheme:dark){.roll-app[data-theme="system"]{--roll-bg:#111c2b!important;--roll-body:#e8eef6!important;color-scheme:dark}.roll-app[data-theme="system"] .roll-token-card,.roll-app[data-theme="system"] .roll-word-card,.roll-app[data-theme="system"] .roll-option{background:#1b2a3c;border-color:#31445a}}.roll-app *{box-sizing:border-box}.roll-header{display:flex;align-items:center;gap:16px;padding:24px clamp(16px,4vw,32px);background:linear-gradient(var(--roll-grad),var(--roll-grad-a),var(--roll-grad-b));color:var(--roll-title)}.roll-header h2{font-size:var(--roll-title-size);font-weight:var(--roll-title-weight);line-height:1.2;color:var(--roll-title);margin:0 0 5px}.roll-header p{margin:0;color:var(--roll-title);opacity:.9}.roll-icon{width:48px;height:48px;object-fit:contain}.roll-theme-toggle{margin-left:auto;flex:none;border:1px solid #ffffff80;background:#ffffff18;color:#fff;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:21px}.roll-main{padding:clamp(18px,4vw,36px);max-width:var(--roll-content-width,1100px);margin:auto}.roll-view[hidden]{display:none!important}.roll-welcome{margin-bottom:24px}.roll-kicker{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--roll-teal)}.roll-welcome h3,.roll-view h3{font-size:clamp(24px,4vw,32px);line-height:1.25;margin:8px 0 10px;color:var(--roll-body)}.roll-welcome p{margin:0;max-width:620px;opacity:.82}.roll-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.roll-app label{display:flex;flex-direction:column;gap:7px;font-weight:650;font-size:14px}.roll-app select,.roll-app input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #c8d5e2;border-radius:9px;background:var(--roll-bg);color:var(--roll-body);font:inherit}.roll-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:10px;background:var(--roll-accent);color:#fff;padding:12px 19px;min-height:46px;font-weight:750;cursor:pointer;transition:transform .15s,filter .15s}.roll-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.roll-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.roll-start-course{margin-top:18px;width:100%;justify-content:space-between}.roll-secondary{background:transparent;color:var(--roll-accent);border:1px solid var(--roll-accent)}.roll-or{display:flex;align-items:center;gap:12px;margin:25px 0 18px;color:#7b8999;font-size:11px;font-weight:800;letter-spacing:.12em}.roll-or:before,.roll-or:after{content:"";height:1px;background:#d8e1ea;flex:1}.roll-token-label{display:block}.roll-resume{margin-top:10px;width:100%}.roll-small{font-size:12px;opacity:.7;margin:12px 0 0}.roll-alert{display:none;padding:12px 14px;margin-bottom:18px;border-radius:9px;background:#fff2d8;color:#764d00}.roll-alert.show{display:block}.roll-alert.error{background:#fee8e7;color:#8c211d}.roll-course-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}.roll-text-btn{background:none;border:0;padding:6px 0;color:var(--roll-accent);font-weight:700;cursor:pointer}.roll-level{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--roll-teal)}.roll-progress-line{height:8px;border-radius:99px;background:#e4ebf1;overflow:hidden}.roll-progress-line span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--roll-accent),var(--roll-teal));border-radius:99px;transition:width .2s}.roll-progress-caption{font-size:12px;opacity:.72;margin:7px 0 24px}.roll-lesson-body{font-size:16px;opacity:.85;margin-bottom:18px}.roll-word-list{display:grid;grid-template-columns:1fr;gap:var(--roll-card-gap,12px)}.roll-word-card{border:1px solid #dce5ee;background:#f8fafc;border-radius:13px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 14px}.roll-word-target{font-size:25px;font-weight:800;line-height:1.35;direction:auto}.roll-word-roman{color:var(--roll-teal);font-size:13px;font-weight:700}.roll-word-meaning{font-weight:700}.roll-word-example{grid-column:1/-1;border-top:1px solid #dce5ee;padding-top:10px;margin-top:5px;font-size:14px}.roll-word-example span{display:block;opacity:.7}.roll-speak{align-self:start;border:1px solid #cbd8e4;border-radius:50%;background:var(--roll-bg);color:var(--roll-accent);width:40px;height:40px;font-size:18px;cursor:pointer}.roll-actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.roll-token-card{margin-top:24px;padding:15px;border:1px dashed #b8cbdc;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:14px}.roll-token-card p{font-size:12px;opacity:.72;margin:2px 0 6px}.roll-token-display{font-size:17px;letter-spacing:.1em;font-weight:800;overflow-wrap:anywhere}.roll-quiz-progress{font-size:12px;opacity:.72;margin:10px 0}.roll-question{margin:10px 0 20px!important}.roll-options{display:grid;gap:10px;margin-bottom:18px}.roll-option{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #d5e0ea;background:var(--roll-bg);color:var(--roll-body);padding:14px;border-radius:10px;cursor:pointer;font:inherit}.roll-option.selected{border-color:var(--roll-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--roll-accent) 18%,transparent)}.roll-option.correct{border-color:#18845b;background:#e7f7ef;color:#155b40}.roll-option.wrong{border-color:#bf3f3a;background:#fff0ef;color:#7f2522}.roll-option .roll-option-key{width:28px;height:28px;display:grid;place-items:center;border:1px solid #b8c8d8;border-radius:8px;flex:none;font-weight:800}.roll-feedback{margin:12px 0;padding:12px;border-radius:10px;background:#e9f7f1;color:#155b40}.roll-next-question{margin-top:12px}.roll-complete{text-align:center;padding:20px 0}.roll-complete-mark{margin:0 auto 20px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#dff7ed;color:#08764e;font-size:32px;font-weight:800}.roll-cert-form{max-width:440px;margin:25px auto;display:grid;gap:12px;text-align:left}.roll-certificate{margin:25px auto;padding:34px 25px;border:8px double #b99343;background:#fffdf5;color:#26374a;max-width:700px;text-align:center;font-family:Georgia,serif}.roll-certificate img{max-height:55px;max-width:170px;object-fit:contain}.roll-certificate h4{font-size:32px;color:#07569a;margin:10px 0}.roll-certificate .roll-cert-name{font-size:28px;color:#98752e;margin:18px 0}.roll-certificate p{margin:8px 0}.roll-certificate .roll-cert-number{font-size:11px;letter-spacing:.12em;margin-top:22px}.roll-footer{padding:15px;text-align:center;border-top:1px solid #dce5ee;font-size:12px;opacity:.75}@media(max-width:560px){.roll-form-grid{grid-template-columns:1fr}.roll-header{gap:10px;padding:18px}.roll-header h2{font-size:24px}.roll-word-card{padding:12px}.roll-token-card{align-items:flex-start;flex-direction:column}.roll-actions .roll-btn{flex:1;padding:10px}.roll-certificate{padding:22px 12px;border-width:5px}.roll-certificate h4{font-size:25px}}
@media print{body *{visibility:hidden!important}.roll-certificate,.roll-certificate *{visibility:visible!important}.roll-certificate{position:absolute;left:0;top:0;width:100%;max-width:none;box-shadow:none}.roll-certificate button{display:none!important}}

.roll-guide{max-width:var(--roll-content-width,1100px);margin:0 auto;padding:0 clamp(18px,4vw,36px) 28px}.roll-guide h3{font-size:21px;color:var(--roll-body);margin:0 0 14px}.roll-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--roll-card-gap,12px)}.roll-guide-grid article{border:1px solid #dce5ee;background:color-mix(in srgb,var(--roll-bg) 94%,var(--roll-teal));border-radius:12px;padding:14px}.roll-guide-grid strong{color:var(--roll-accent);display:block;margin-bottom:5px}.roll-guide-grid p{font-size:13px;line-height:1.55;margin:5px 0;opacity:.85}.roll-cert-actions,.roll-social-share{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}.roll-social-btn{border:1px solid #c8d5e2;background:#fff;color:#07569a;border-radius:8px;padding:9px 13px;font-weight:700;cursor:pointer}.roll-cert-actions .roll-btn{min-height:40px;padding:9px 13px}.roll-certificate{overflow-wrap:anywhere}@media(max-width:560px){.roll-guide-grid{grid-template-columns:1fr}.roll-guide{padding-bottom:20px}.roll-cert-actions .roll-btn{flex:1}}

/* Consistent theme surfaces for language selectors and all inner cards. */
.roll-app .roll-form-grid select,.roll-app .roll-form-grid input,.roll-app .roll-token-label input{background-color:var(--roll-bg)!important;color:var(--roll-body)!important;border-color:color-mix(in srgb,var(--roll-body) 22%,transparent)}
.roll-app select option{background-color:var(--roll-bg);color:var(--roll-body)}
.roll-app[data-theme="dark"] .roll-word-card,.roll-app[data-theme="dark"] .roll-guide-grid article,.roll-app[data-theme="dark"] .roll-token-card{background:#1b2a3c!important;color:#e8eef6!important;border-color:#34495f!important}
.roll-app[data-theme="dark"] .roll-word-example{border-color:#34495f}
.roll-app[data-theme="dark"] .roll-guide-grid strong{color:#59d1d0}
.roll-app[data-theme="dark"] .roll-option{background:#1b2a3c!important;color:#e8eef6!important;border-color:#34495f!important}
.roll-app[data-theme="dark"] .roll-option.correct{background:#173d32!important;color:#baf3d8!important}
.roll-app[data-theme="dark"] .roll-option.wrong{background:#492725!important;color:#ffd5d2!important}
.roll-app[data-theme="system"] .roll-form-grid select option{background-color:#111c2b;color:#e8eef6}
.roll-level-select-grid{margin-top:14px}
@media(prefers-color-scheme:dark){.roll-app[data-theme="system"] .roll-word-card,.roll-app[data-theme="system"] .roll-guide-grid article,.roll-app[data-theme="system"] .roll-token-card{background:#1b2a3c!important;color:#e8eef6!important;border-color:#34495f!important}.roll-app[data-theme="system"] .roll-form-grid select option{background:#111c2b;color:#e8eef6}}