/* DruckTrainer layout and M2 DARK THEME overrides.
   Base components come from official Material Components for Web 14.0.0.
   Reference: https://m2.material.io/design/color/dark-theme.html */
:root {
  color-scheme: dark;
  --mdc-theme-primary: #bb86fc;
  --mdc-theme-secondary: #03dac6;
  --mdc-theme-background: #121212;
  --mdc-theme-surface: #1e1e1e;
  --mdc-theme-error: #cf6679;
  --mdc-theme-on-primary: #000;
  --mdc-theme-on-secondary: #000;
  --mdc-theme-on-surface: rgba(255,255,255,.87);
  --dt-bg: #121212;
  --dt-surface-1: #1e1e1e;
  --dt-surface-2: #222;
  --dt-surface-4: #272727;
  --dt-surface-8: #2e2e2e;
  --dt-primary: #bb86fc;
  --dt-secondary: #03dac6;
  --dt-error: #cf6679;
  --dt-text: rgba(255,255,255,.87);
  --dt-text-secondary: rgba(255,255,255,.6);
  --dt-border: rgba(255,255,255,.12);
  --dt-outline: rgba(255,255,255,.28);
}
*, *::before,*::after { box-sizing:border-box; }
html {min-height:100%;background:var(--dt-bg);-webkit-text-size-adjust:100%}
body.mdc-typography {min-height:100vh;margin:0;background:var(--dt-bg);color:var(--dt-text);font-family:Roboto,"Segoe UI",Arial,sans-serif}
button,input,select {font-family:inherit}
button { -webkit-tap-highlight-color:transparent }
button:focus-visible,input:focus-visible,a:focus-visible {outline:2px solid #d7b7ff;outline-offset:3px}
::selection {background:rgba(187,134,252,.32)}
.layout {max-width:1024px;margin:auto;padding:16px 20px calc(70px + env(safe-area-inset-bottom))}
.loading-placeholder {margin:18vh auto;max-width:300px;text-align:center;color:var(--dt-text-secondary)}
h1,h2,h3 {color:var(--dt-text);font-weight:500;line-height:1.3}
h1 {font-size:28px;margin:8px 0 12px}
h2 {font-size:20px;margin:0 0 14px}
p {color:var(--dt-text-secondary);line-height:1.6;margin:8px 0 18px}
/* Official MDC top app bar, constrained to page flow for this standalone learning app. */
.dt-app-bar.mdc-top-app-bar {position:relative;background:var(--dt-surface-4);color:var(--dt-text);border-radius:8px;margin-bottom:16px;box-shadow:0 2px 9px rgba(0,0,0,.35)}
.dt-app-bar .mdc-top-app-bar__row {height:72px;padding:0 14px}
.dt-app-bar .mdc-top-app-bar__title {display:flex;align-items:center;gap:10px;padding:0;font-size:21px;line-height:1.2;white-space:normal;font-weight:500}
.dt-app-bar .mdc-top-app-bar__title>.material-icons {font-size:30px;color:var(--dt-primary)}
.dt-app-bar .mdc-top-app-bar__title small {display:block;color:var(--dt-text-secondary);font-size:11px;font-weight:400;letter-spacing:.2px;margin-top:4px}
.dt-date {display:inline-flex;align-items:center;border-radius:16px;background:rgba(187,134,252,.14);border:1px solid rgba(187,134,252,.4);padding:7px 11px;font-size:12px;white-space:nowrap;color:var(--dt-text)}
/* Official MDC tabs with M2 dark treatment */
.dt-tabbar.mdc-tab-bar {background:var(--dt-surface-1);border-radius:8px;margin-bottom:20px;overflow:hidden;border:1px solid var(--dt-border)}
.dt-tabbar .mdc-tab {min-width:100px;flex:1;color:var(--dt-text-secondary)}
.dt-tabbar .mdc-tab__text-label {color:var(--dt-text-secondary);font-size:13px}
.dt-tabbar .mdc-tab--active .mdc-tab__text-label {color:var(--dt-primary)}
.dt-tabbar .mdc-tab-indicator__content--underline {border-color:var(--dt-primary)}
.dt-tabbar .mdc-tab__ripple::before,.dt-tabbar .mdc-tab__ripple::after {background:var(--dt-primary)}
/* Genuine MDC Cards, Buttons, Text fields. Custom CSS handles dark mode and layout. */
.dt-stack {display:grid;gap:16px}
.dt-card.mdc-card {display:block;background:var(--dt-surface-2);color:var(--dt-text);border:1px solid var(--dt-border);border-radius:10px;padding:24px;box-shadow:0 3px 9px rgba(0,0,0,.22)}
.dt-eyebrow {color:var(--dt-primary);text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:1px}
.dt-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.dt-between {display:flex;justify-content:space-between;align-items:center;gap:10px}
.dt-button.mdc-button {min-height:48px;height:auto;min-width:64px;padding:10px 16px;border-radius:4px;letter-spacing:.6px;font-size:13px;font-weight:500;text-transform:uppercase;white-space:normal;line-height:1.35}
.dt-button .mdc-button__label {display:flex;align-items:center;justify-content:center;gap:8px}
.dt-button .material-icons {font-size:19px}
.dt-button.mdc-button--raised {background:var(--dt-primary);color:#000}
.dt-button.mdc-button--raised .mdc-button__ripple::before,.dt-button.mdc-button--raised .mdc-button__ripple::after {background:#000}
.dt-button.mdc-button--outlined {color:var(--dt-primary);border-color:rgba(187,134,252,.55)}
.dt-button.mdc-button--outlined .mdc-button__ripple::before,.dt-button.mdc-button--outlined .mdc-button__ripple::after {background:var(--dt-primary)}
.dt-button:disabled {opacity:.42}
.dt-full {width:100%}
.dt-notice {padding:16px;background:var(--dt-surface-4);border-left:3px solid var(--dt-primary);border-radius:4px;color:var(--dt-text-secondary);line-height:1.55}
/* Material text fields from MDC */
.auth-layout {max-width:465px;margin:clamp(35px,9vh,95px) auto;padding:0 12px}
.dt-auth-card.mdc-card {padding:32px}
.auth-mark {display:grid;place-items:center;background:rgba(187,134,252,.13);color:var(--dt-primary);border-radius:50%;width:60px;height:60px;margin-bottom:18px}
.auth-mark .material-icons {font-size:32px}
.dt-form {display:grid;gap:18px;margin-top:25px}
.dt-text-field.mdc-text-field {width:100%;height:56px;background:var(--dt-surface-4);border-radius:4px 4px 0 0}
.dt-text-field.mdc-text-field::before,.dt-text-field.mdc-text-field::after {background:var(--dt-primary)}
/* MDC's default input/label selectors are more specific than generic dark-mode rules.
   Match MDC specificity to keep white input text and legible floating labels. */
.dt-text-field.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
  color: var(--dt-text);
  -webkit-text-fill-color: var(--dt-text);
  caret-color: var(--dt-primary);
}
.dt-text-field.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: var(--dt-text-secondary);
}
.dt-text-field.mdc-text-field:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label {
  color: var(--dt-primary);
}
.dt-text-field.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
  color: var(--dt-text-secondary);
}
/* Browser autofill can otherwise paint dark text onto the dark filled MDC field. */
.dt-text-field.mdc-text-field .mdc-text-field__input:-webkit-autofill,
.dt-text-field.mdc-text-field .mdc-text-field__input:-webkit-autofill:hover,
.dt-text-field.mdc-text-field .mdc-text-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--dt-text);
  caret-color: var(--dt-primary);
}
.dt-text-field .mdc-line-ripple::before {border-bottom-color:var(--dt-outline)}
.dt-text-field .mdc-line-ripple::after {border-bottom-color:var(--dt-primary)}
.dt-error {color:var(--dt-error);min-height:16px;font-size:13px}
/* MDC radio/checkbox controls inside tappable answer rows. */
.dt-question {font-size:24px;margin-top:14px}
.dt-instruction {font-size:13px;margin:10px 0 18px}
.dt-options {display:grid;gap:10px;margin-bottom:22px}
.dt-answer {display:flex;align-items:center;gap:10px;min-height:62px;padding:10px 12px;border:1px solid var(--dt-outline);border-radius:8px;background:var(--dt-surface-1);color:var(--dt-text);cursor:pointer;transition:background .12s,border-color .12s}
.dt-answer:hover:not(.locked) {background:var(--dt-surface-8)}
.dt-answer.selected {background:rgba(187,134,252,.12);border-color:var(--dt-primary)}
.dt-answer.correct {background:rgba(3,218,198,.08);border:2px solid var(--dt-secondary);padding:9px 11px}
.dt-answer.incorrect {background:rgba(207,102,121,.1);border:2px solid var(--dt-error);padding:9px 11px}
.dt-answer.locked {cursor:default}
.dt-answer-content {display:flex;align-items:flex-start;gap:9px;line-height:1.48;font-size:15px;min-width:0;flex:1}
.dt-answer-letter {color:var(--dt-text-secondary);font-weight:700;font-size:12px;min-width:17px;padding-top:3px}
.dt-answer>.material-icons {font-size:20px;color:var(--dt-secondary)}
.dt-answer.incorrect>.material-icons {color:var(--dt-error)}
.dt-answer .mdc-radio,.dt-answer .mdc-checkbox {flex:none}
.dt-answer .mdc-radio__outer-circle {border-color:var(--dt-text-secondary)}
.dt-answer .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle {border-color:var(--dt-primary)}
.dt-answer .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle {border-color:var(--dt-primary)}
.dt-answer .mdc-checkbox__native-control:checked~.mdc-checkbox__background {background:var(--dt-primary);border-color:var(--dt-primary)}
.dt-answer .mdc-checkbox__native-control:not(:checked)~.mdc-checkbox__background {border-color:var(--dt-text-secondary)}
.dt-answer .mdc-checkbox__checkmark-path {stroke:#000}
.dt-answer.locked input:disabled {opacity:1}
.dt-answer.locked .mdc-checkbox,.dt-answer.locked .mdc-radio {opacity:1}
.dt-answer .mdc-radio__ripple::before,.dt-answer .mdc-radio__ripple::after,.dt-answer .mdc-checkbox__ripple::before,.dt-answer .mdc-checkbox__ripple::after {background:var(--dt-primary)}
.dt-actions {margin-top:16px;display:flex;justify-content:flex-end}
.dt-actions>.dt-button {min-width:180px}
/* MDC linear progress indicator, themed */
.dt-progress.mdc-linear-progress {height:6px;border-radius:12px;overflow:hidden;--mdc-theme-primary:var(--dt-primary);margin:6px 0}
.dt-progress .mdc-linear-progress__buffer-bar {background:rgba(187,134,252,.12)}
.dt-progress .mdc-linear-progress__bar-inner {border-color:var(--dt-primary)}
.dt-feedback {border-radius:6px;border-left:4px solid var(--dt-border);background:var(--dt-surface-4);padding:16px;margin-top:16px}
.dt-feedback.good {border-left-color:var(--dt-secondary)}
.dt-feedback.bad {border-left-color:var(--dt-error)}
.dt-feedback strong {display:flex;align-items:center;gap:8px}
.dt-feedback.good strong .material-icons {color:var(--dt-secondary)}
.dt-feedback.bad strong .material-icons {color:var(--dt-error)}
.dt-feedback p:last-child {margin-bottom:0}
.dt-topic-list {display:grid;gap:10px;margin-top:18px}
.dt-topic.mdc-button {width:100%;height:auto;min-height:52px;display:flex;justify-content:space-between;text-align:left;padding:10px 16px}
.dt-topic .mdc-button__label {text-transform:none;text-align:left;justify-content:flex-start;letter-spacing:0;font-size:15px;color:var(--dt-text);font-weight:400}
.dt-topic-count {color:var(--dt-primary);font-size:13px;padding-left:14px}
.dt-stat {background:var(--dt-surface-4);border-radius:8px;padding:18px;color:var(--dt-text-secondary);font-size:13px}
.dt-number {font-size:30px;font-weight:700;color:var(--dt-primary)}
.dt-list-row {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--dt-border);background:var(--dt-surface-1);border-radius:6px;font-size:13px}
.dt-list-row strong {color:var(--dt-text);font-weight:500}
.dt-list-row span {color:var(--dt-text-secondary);overflow-wrap:anywhere}
.dt-file-label {display:block;color:var(--dt-text);font-size:14px;margin:16px 0 8px}
input[type=file] {width:100%;max-width:100%;color:var(--dt-text-secondary);padding:10px;border:1px solid var(--dt-outline);border-radius:5px}
input[type=file]::file-selector-button {background:var(--dt-surface-8);border:1px solid var(--dt-border);border-radius:4px;color:var(--dt-primary);font-family:inherit;padding:10px 14px;margin-right:12px;cursor:pointer}
.dt-check-label {display:flex;align-items:center;gap:8px;color:var(--dt-text);margin:12px 0}
.dt-check-label .mdc-checkbox__native-control:checked~.mdc-checkbox__background {background:var(--dt-primary);border-color:var(--dt-primary)}
.dt-check-label .mdc-checkbox__native-control:not(:checked)~.mdc-checkbox__background {border-color:var(--dt-text-secondary)}
.dt-check-label .mdc-checkbox__checkmark-path {stroke:#000}
.dt-status {color:var(--dt-secondary);min-height:20px;margin-top:12px}
@media(max-width:640px){
  .layout {padding:10px 12px calc(60px + env(safe-area-inset-bottom))}
  .dt-app-bar .mdc-top-app-bar__row {height:70px;padding:0 10px}
  .dt-app-bar .mdc-top-app-bar__title {font-size:18px;gap:6px}
  .dt-app-bar .mdc-top-app-bar__title small {font-size:10px}
  .dt-date {font-size:11px;padding:7px 8px}
  .dt-card.mdc-card {padding:18px}
  .dt-grid {grid-template-columns:1fr}
  .dt-tabbar .mdc-tab {min-width:0;padding:0 6px}
  .dt-tabbar .mdc-tab__text-label {font-size:12px}
  h1 {font-size:24px}
  .dt-question {font-size:21px}
  .dt-answer {min-height:62px;padding:9px 6px}
  .dt-actions>.dt-button {width:100%}
  .dt-auth-card.mdc-card {padding:24px 18px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Graceful fallback for offline/network-restricted browsers when MDC CDN cannot load.
   This is ONLY used when the official JS is missing; connected browsers use MDC. */
body.dt-no-mdc .material-icons {font-size:0!important;line-height:1}
body.dt-no-mdc .material-icons::after {content:attr(data-fallback);font-family:Arial,sans-serif;font-weight:bold;font-size:19px}
body.dt-no-mdc .mdc-top-app-bar__row,body.dt-no-mdc .mdc-top-app-bar__section,body.dt-no-mdc .mdc-top-app-bar__title {display:flex;align-items:center}
body.dt-no-mdc .mdc-top-app-bar__row {justify-content:space-between}
body.dt-no-mdc .mdc-top-app-bar__section--align-end {justify-content:flex-end}
body.dt-no-mdc .mdc-top-app-bar__title small {line-height:1.1}
body.dt-no-mdc .mdc-tab-scroller__scroll-content {display:flex;width:100%}
body.dt-no-mdc .mdc-tab {border:0;background:transparent;flex:1;color:var(--dt-text-secondary);height:48px;cursor:pointer}
body.dt-no-mdc .mdc-tab--active {border-bottom:2px solid var(--dt-primary)}
body.dt-no-mdc .mdc-tab__text-label {color:inherit}
body.dt-no-mdc .mdc-tab--active .mdc-tab__text-label {color:var(--dt-primary)}
body.dt-no-mdc .mdc-button {cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px}
body.dt-no-mdc .mdc-button--raised {background:var(--dt-primary);color:#000}
body.dt-no-mdc .mdc-button--outlined {background:transparent;color:var(--dt-primary);border:1px solid var(--dt-primary)}
body.dt-no-mdc .mdc-button:disabled {cursor:default}
body.dt-no-mdc .mdc-text-field {position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px 12px}
body.dt-no-mdc .mdc-floating-label {position:static;font-size:12px}
body.dt-no-mdc .mdc-text-field__input {height:25px;min-height:0;width:100%;border:0;background:transparent;color:var(--dt-text);font-size:16px;outline:none}
body.dt-no-mdc .mdc-checkbox__native-control,body.dt-no-mdc .mdc-radio__native-control {width:19px;height:19px;margin:10px;accent-color:var(--dt-primary)}
body.dt-no-mdc .mdc-checkbox__background,body.dt-no-mdc .mdc-radio__background,body.dt-no-mdc .mdc-radio__ripple,body.dt-no-mdc .mdc-checkbox__ripple {display:none}
body.dt-no-mdc .mdc-linear-progress {height:6px;background:rgba(187,134,252,.12)}
body.dt-no-mdc .mdc-linear-progress__bar-inner {display:block;width:100%;height:6px;background:var(--dt-primary)}