*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ===== DESIGN TOKENS (Learning App_design / README_handoff) ===== */
:root{
  --bg:         #1C1C1A;
  --card-bg:    #2A2A27;
  --panel:      #2A2A27;
  --panel2:     #333330;
  --surface:    #333330;
  --border:     #333330;
  --input-bg:   #262623;
  --accent:     #C4892A;
  --accent-dim: rgba(196,137,42,0.14);
  --accent-glow:rgba(196,137,42,0.22);
  --mode-kk:    #C4892A;
  --mode-lt:    #4A7C59;
  --mode-mc:    #C4892A;
  --mode-theory:#8C3A5A;
  --teal:       #4A7C59;
  --teal-dim:   rgba(74,124,89,0.14);
  --teal-text:  #7EC99A;
  --rose:       #8C3A5A;
  --rose-dim:   rgba(140,58,90,0.14);
  --text:       #F0EDE8;
  --subtext:    #9A9690;
  --error:      #D4A574;
  --error-bg:   rgba(196,137,42,0.12);
  --success-bg: rgba(74,124,89,0.12);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Sans', system-ui, sans-serif;
  --radius-card: 12px;
  --radius-pill: 20px;
  --shadow-card: 0 8px 24px rgba(0,0,0,0.30);
  --app-vh: 100dvh;
}

/* ===== BASE ===== */
html,body{
  height:100%;
  /* Kein Dokument-Scroll: Inhalt scrollt nur in #screen-login bzw. in der React-App */
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:none;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
body.app-scroll-lock{
  overflow:hidden;
}
/* React-App (nach Login): eine Viewport-Höhe, kein Seiten-Scroll am Handy */
#react-root{
  display:block;
  height:var(--app-vh);
  min-height:var(--app-vh);
  max-height:var(--app-vh);
  overflow:hidden;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  box-sizing:border-box;
}
#app{display:flex;flex-direction:column;height:var(--app-vh);min-height:var(--app-vh);overflow:hidden;}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--panel);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:var(--subtext);}
@media(pointer:coarse){
  ::-webkit-scrollbar{display:none;}
  *{-ms-overflow-style:none;scrollbar-width:none;}
}

/* ===== UTILITIES ===== */
.hidden{display:none!important;}

/* Karteikarten nur im Desktop-Layout (React): nutzt die volle Inhaltsbreite bis 960px */
.desk-flashcards-shell{
  width:100%;
  max-width:min(960px,calc(100vw - 120px));
  margin:0 auto;
}

@keyframes screenSlideUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes pop{
  0%{transform:scale(0.95);opacity:0;}
  100%{transform:scale(1);opacity:1;}
}
#app > div:not(.hidden).screen-anim{
  animation:screenSlideUp 0.28s ease both;
}

/* ===== BACK BUTTON ===== */
.back-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--subtext);
  font-family:var(--font-body);
  font-size:.8rem;font-weight:500;
  padding:5px 12px;
  cursor:pointer;
  text-decoration:none;
  transition:color .2s,border-color .2s;
  letter-spacing:.01em;
}
.back-btn:hover{color:var(--accent);border-color:var(--accent);transform:translateX(-2px);}
.back-btn{transition:color .15s,border-color .15s,transform .15s;}

/* ===== LOGIN ===== */
#screen-login{
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  min-height:var(--app-vh);
  height:var(--app-vh);
  max-height:var(--app-vh);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
  background-image:radial-gradient(ellipse 55% 45% at 50% 40%, rgba(196,137,42,0.07) 0%, transparent 65%);
}
.login-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-top:2px solid var(--accent);
  border-radius:var(--radius-card);
  padding:44px 40px 40px;
  width:100%;max-width:420px;
  display:flex;flex-direction:column;gap:22px;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.login-logo{text-align:center;}
.mobile-help-btn{
  margin-top:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--accent);
  border-radius:999px;
  width:34px;
  height:34px;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.mobile-help-btn:hover{
  border-color:var(--accent);
}
.login-logo h1{
  font-family:var(--font-display);
  font-size:2rem;font-weight:600;
  color:var(--text);
  letter-spacing:.02em;
  line-height:1.1;
}
.login-logo p{font-size:.83rem;color:var(--subtext);margin-top:6px;font-weight:400;letter-spacing:.02em;}
.login-field{display:flex;flex-direction:column;gap:7px;}
.login-field label{
  font-size:.72rem;color:var(--subtext);
  text-transform:uppercase;letter-spacing:.1em;font-weight:500;
}
.login-field > input{
  width:100%;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px 14px;
  font-size:.95rem;
  font-family:var(--font-body);
  color:var(--text);
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.login-field > input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-dim);
}
.login-pw-wrap{position:relative;display:flex;align-items:center;}
.login-pw-wrap input{
  width:100%;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px 44px 11px 14px;
  font-size:.95rem;
  font-family:var(--font-body);
  color:var(--text);
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.login-pw-wrap input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-dim);
}
.login-pw-wrap input.login-error{border-color:var(--error);animation:shake .35s ease;}
.login-eye{
  position:absolute;right:12px;
  background:none;border:none;
  color:var(--subtext);cursor:pointer;
  font-size:1rem;padding:4px;line-height:1;transition:color .15s;
}
.login-eye:hover{color:var(--text);}
.login-remember{
  display:flex;align-items:center;gap:9px;
  font-size:.82rem;color:var(--subtext);cursor:pointer;user-select:none;font-weight:400;
}
.login-remember input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;}
.login-btn{
  background:var(--accent);
  color:#1C1C1A;
  border:none;border-radius:10px;padding:13px;
  font-family:var(--font-body);
  font-size:.95rem;font-weight:600;letter-spacing:.03em;
  cursor:pointer;transition:opacity .15s,box-shadow .2s,transform .15s;
}
.login-btn:hover{opacity:.92;box-shadow:0 6px 22px rgba(196,137,42,.28);transform:translateY(-1px);}
.login-btn-secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  margin-top:8px;
}
.login-btn-secondary:hover{
  box-shadow:none;
}
.login-error-msg{font-size:.8rem;color:var(--error);text-align:center;min-height:1.1em;font-family:var(--font-body);}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}

/* ===== ADMIN PANEL ===== */
.admin-open-btn{
  position:fixed;
  right:16px;
  bottom:max(16px, env(safe-area-inset-bottom, 0px));
  z-index:1000;
  border:1px solid var(--accent);
  border-radius:999px;
  background:var(--accent);
  color:#1C1C1A;
  padding:10px 14px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
}
.admin-home-back-btn{
  position:fixed;
  right:16px;
  bottom:max(16px, env(safe-area-inset-bottom, 0px));
  z-index:1000;
  border:1px solid var(--accent);
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 18%, var(--panel2));
  color:var(--text);
  padding:10px 14px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
}
.admin-home-back-btn:hover{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 28%, var(--panel2));
}
.logout-btn{
  position:fixed;
  right:16px;
  top:max(16px, env(safe-area-inset-top, 0px));
  z-index:1000;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--panel2);
  color:var(--text);
  padding:10px 14px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
}
.logout-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.admin-panel{
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.admin-card{
  width:min(900px,100%);
  max-height:90dvh;
  overflow:auto;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-top:2px solid var(--accent);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.admin-panel.standalone{
  background:radial-gradient(circle at top, color-mix(in srgb, var(--accent) 18%, #000) 0%, #080808 42%, #060606 100%);
  align-items:flex-start;
  justify-content:center;
  padding:36px 20px 24px;
}
.admin-panel.standalone .admin-card{
  width:min(1120px,100%);
  max-height:calc(100dvh - 72px);
  border-radius:16px;
  border-top:2px solid var(--accent);
  box-shadow:0 22px 48px rgba(0,0,0,.45);
}
.admin-panel.standalone .admin-header h2{
  font-size:1.12rem;
}
body.admin-light{
  background:#f4efe7;
  color:#2b2b2a;
}
body.admin-light .admin-panel{
  background:rgba(250,244,236,.78);
  backdrop-filter:blur(4px);
}
body.admin-light .admin-panel.standalone{
  background:linear-gradient(180deg,#f7f2ea 0%,#efe7dc 100%);
}
body.admin-light .admin-panel.standalone .admin-card{
  background:#fffdf9;
  border:1px solid #e7dccd;
  border-top:2px solid var(--accent);
  box-shadow:0 20px 40px rgba(58,45,30,.12);
}
body.admin-light .admin-header h2{
  color:#3a2f21;
}
body.admin-light .admin-message{
  color:#6d6254;
}
body.admin-light .admin-tab-btn{
  background:#f6f0e6;
  border-color:#eadfce;
  color:#6d6254;
}
body.admin-light .admin-tab-btn.active{
  background:#f4e4c6;
  color:#5c461d;
  border-color:#d4b47a;
}
body.admin-light .admin-table th{
  color:#6d6254;
}
body.admin-light .admin-table td{
  color:#2f2f2e;
  border-top:1px solid #eee5d8;
}
.admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.admin-header h2{
  font-size:1rem;
  font-family:var(--font-body);
  font-weight:600;
}
.admin-close-btn{
  border:1px solid var(--border);
  background:transparent;
  color:var(--subtext);
  border-radius:8px;
  width:32px;
  height:32px;
  cursor:pointer;
}
.admin-message{
  min-height:1.2em;
  font-size:.82rem;
  color:var(--subtext);
}
.admin-message.error{color:var(--error);}
.admin-message.success{color:var(--teal-text);}
.admin-home-screen{
  display:none;
  min-height:100dvh;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:var(--bg);
}
.admin-home-card{
  max-width:520px;
}
.admin-home-logo{
  margin-bottom:14px;
}
.admin-home-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius:999px;
  padding:4px 10px;
  margin-bottom:10px;
}
.admin-home-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-home-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel2);
  color:var(--text);
  padding:12px;
}
.admin-home-link strong{
  display:block;
  font-size:.95rem;
  line-height:1.25;
}
.admin-home-link small{
  display:block;
  font-size:.75rem;
  line-height:1.35;
  color:var(--subtext);
  margin-top:2px;
}
.admin-home-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--panel3);
  border:1px solid var(--border);
  font-size:18px;
  flex-shrink:0;
}
.admin-home-link:hover{
  border-color:var(--accent);
}
.admin-home-link-primary{
  border-color:color-mix(in srgb, var(--accent) 60%, var(--border));
  background:color-mix(in srgb, var(--accent) 8%, var(--panel2));
}
.admin-tabs{
  display:flex;
  gap:8px;
  margin:8px 0 2px;
}
.admin-tab-btn{
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--subtext);
  border-radius:999px;
  padding:7px 12px;
  font-size:.78rem;
  cursor:pointer;
}
.admin-tab-btn.active{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-dim);
}
.admin-toolbar{
  display:flex;
  justify-content:flex-end;
  margin:10px 0;
}
.admin-refresh-btn{
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
}
.admin-table-wrap{overflow:auto;}
.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:.85rem;
}
.admin-table th,
.admin-table td{
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  text-align:left;
  vertical-align:middle;
}
.admin-role-select{
  background:var(--panel2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:6px;
  padding:6px 8px;
}
.admin-actions{
  display:flex;
  gap:6px;
}
.admin-action-btn{
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  border-radius:7px;
  padding:6px 8px;
  cursor:pointer;
}
.admin-action-btn.approve{
  border-color:var(--mode-lt);
  color:var(--teal-text);
}
.admin-action-btn.block{
  border-color:var(--accent);
  color:var(--accent);
}
.admin-status-pill{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 8px;
  font-size:.72rem;
}
.admin-status-pill.pending{border-color:var(--accent);color:var(--accent);}
.admin-status-pill.active{border-color:var(--mode-lt);color:var(--teal-text);}
.admin-status-pill.blocked{border-color:var(--error);color:var(--error);}

/* ===== MOBILE HELP DIALOG ===== */
.mobile-help-dialog{
  position:fixed;
  inset:0;
  z-index:1300;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.mobile-help-card{
  width:min(520px,100%);
  max-height:86dvh;
  overflow:auto;
  border:1px solid var(--border);
  border-top:2px solid var(--accent);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  box-shadow:var(--shadow-card);
  padding:14px 16px 16px;
}
.mobile-help-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.mobile-help-head h2{
  font-size:.98rem;
  font-family:var(--font-body);
  font-weight:600;
}
.mobile-help-close{
  border:1px solid var(--border);
  background:transparent;
  color:var(--subtext);
  border-radius:8px;
  width:30px;
  height:30px;
  cursor:pointer;
}
.mobile-help-body h3{
  font-size:.88rem;
  margin:10px 0 6px;
}
.mobile-help-body ol{
  margin:0 0 0 18px;
  color:var(--text);
  font-size:.86rem;
  line-height:1.55;
}
.mobile-help-body li{margin:3px 0;}
@media(pointer:fine){
  .mobile-help-btn{display:none;}
}

/* ===== FÄCHERAUSWAHL ===== */
#screen-subject{
  display:flex;flex-direction:column;align-items:center;
  min-height:100vh;
  background:var(--bg);
  background-image:radial-gradient(ellipse 90% 50% at 50% 0%, rgba(196,137,42,0.05) 0%, transparent 55%);
  padding:28px 24px 40px;gap:24px;
  overflow-y:auto;
}
.main-logo{text-align:center;max-width:560px;}
.main-kicker{
  font-size:12px;font-weight:600;color:var(--subtext);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;
}
.main-tagline{
  font-size:14px;color:var(--subtext);margin-top:8px;font-weight:400;line-height:1.45;
}
.modes-hero .main-tagline{margin-top:6px;}
.main-logo h1{
  font-family:var(--font-display);
  font-size:28px;font-weight:500;
  color:var(--text);letter-spacing:.01em;line-height:1.2;
}
.subject-hero h1{color:var(--text);}

/* ===== SUBJECT GRID — Moodle card style ===== */
.subject-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;width:100%;max-width:420px;
}
@media(min-width:520px){
  .subject-grid{max-width:480px;}
}
@media(min-width:720px){
  .subject-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px;}
}
/* Subject cards: vertical, banner on top */
.subject-grid .main-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  padding:0;
  border:1px solid var(--border);
  border-left:1px solid var(--border);
  border-radius:var(--radius-card);
  overflow:hidden;
  gap:0;
  background:var(--card-bg);
  box-shadow:var(--shadow-card);
  transition:transform .15s ease,box-shadow .2s ease;
}
.subject-grid .main-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(0,0,0,.45);
}
.subject-grid .main-card:active{transform:translateY(0);}

/* Banner area (repurposed icon span) */
.subject-grid .main-card .main-card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;height:108px;
  font-size:2.4rem;
  flex-shrink:0;
  background:repeating-linear-gradient(135deg,#3a3428 0px,#3a3428 10px,#2f2a22 10px,#2f2a22 20px);
}
.subject-grid .main-card:nth-child(8n+1) .main-card-icon{background:repeating-linear-gradient(135deg,#4a3d2a 0px,#4a3d2a 11px,#3a3020 11px,#3a3020 22px);}
.subject-grid .main-card:nth-child(8n+2) .main-card-icon{background:repeating-linear-gradient(135deg,#2f3d32 0px,#2f3d32 11px,#243028 11px,#243028 22px);}
.subject-grid .main-card:nth-child(8n+3) .main-card-icon{background:repeating-linear-gradient(135deg,#353045 0px,#353045 11px,#282436 11px,#282436 22px);}
.subject-grid .main-card:nth-child(8n+4) .main-card-icon{background:repeating-linear-gradient(135deg,#423030 0px,#423030 11px,#322424 11px,#322424 22px);}
.subject-grid .main-card:nth-child(8n+5) .main-card-icon{background:repeating-linear-gradient(135deg,#2e3840 0px,#2e3840 11px,#222a30 11px,#222a30 22px);}
.subject-grid .main-card:nth-child(8n+6) .main-card-icon{background:repeating-linear-gradient(135deg,#3a3438 0px,#3a3438 11px,#2a262a 11px,#2a262a 22px);}
.subject-grid .main-card:nth-child(8n+7) .main-card-icon{background:repeating-linear-gradient(135deg,#344038 0px,#344038 11px,#263028 11px,#263028 22px);}
.subject-grid .main-card:nth-child(8n+8) .main-card-icon{background:repeating-linear-gradient(135deg,#403a2e 0px,#403a2e 11px,#302a22 11px,#302a22 22px);}

/* Text block below banner */
.subject-grid .main-card .main-card-title{
  font-size:13px;font-weight:500;
  color:var(--text);
  padding:10px 12px 2px;
  line-height:1.35;
}
.subject-grid .main-card .main-card-sub{
  font-size:11px;color:var(--subtext);font-weight:400;
  padding:0 12px 12px;
  line-height:1.4;
}

/* ===== HAUPTMENÜ ===== */
.subj-hdr{
  flex-shrink:0;
  display:flex;align-items:center;gap:14px;
  padding:14px 24px;
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
}
.subj-hdr-title{
  font-family:var(--font-display);
  font-size:1.05rem;font-weight:500;
  color:var(--text);letter-spacing:.01em;
}
.main-content{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  padding:24px 24px 32px;gap:18px;
  overflow-y:auto;
}

/* ===== MODE GRID — Moodle list-item style ===== */
.main-grid{
  display:flex;flex-direction:column;
  gap:10px;width:100%;max-width:420px;
}
.main-grid .main-card{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  box-shadow:0 2px 12px rgba(0,0,0,.2);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
  cursor:pointer;
}
.main-grid .main-card:hover{
  transform:translateX(4px);
  border-color:var(--accent);
  box-shadow:var(--shadow-card);
}
.main-grid .main-card:nth-child(1){--tile:#C4892A;}
.main-grid .main-card:nth-child(2){--tile:#4A7C59;}
.main-grid .main-card:nth-child(3){--tile:#8C3A5A;}
.main-grid .main-card:nth-child(4){--tile:#C4892A;}
.main-grid .main-card .main-card-icon{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border-radius:10px;
  background:color-mix(in srgb, var(--tile) 22%, transparent);
  color:var(--tile);
  font-size:1.25rem;
  flex-shrink:0;
}
.main-grid .main-card .main-card-text{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.main-grid .main-card .main-card-title{
  font-size:14px;font-weight:600;
  color:var(--text);
  line-height:1.25;
}
.main-grid .main-card .main-card-sub{
  font-size:11px;color:var(--subtext);font-weight:400;
  line-height:1.35;
}
.main-grid .main-card .main-card-chev{
  color:var(--subtext);
  font-size:1.1rem;
  flex-shrink:0;
  opacity:.75;
  transition:transform .15s ease,color .15s ease;
}
.main-grid .main-card:hover .main-card-chev{
  transform:translateX(2px);
  color:var(--accent);
}

@media(max-width:700px){.main-grid{max-width:100%;}}

/* ===== SHARED HEADER PATTERN ===== */
.kk-hdr,.lt-hdr,.tl-hdr{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 24px;
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
}
.kk-hdr h1,.lt-hdr h1,.tl-hdr h1{
  font-family:var(--font-body);
  font-size:15px;font-weight:600;
  color:var(--text);letter-spacing:.01em;margin:0;
}

/* ===== KARTEIKARTEN ===== */
#screen-main{display:flex;flex-direction:column;height:var(--app-vh);min-height:var(--app-vh);background:var(--bg);}

/* Karten-/Übungs-Screens nutzen die zentral berechnete Viewport-Höhe */
#screen-karten{display:flex;flex-direction:column;height:var(--app-vh);min-height:var(--app-vh);overflow:hidden;}
.kk-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;min-height:0;-webkit-overflow-scrolling:touch;}
.kk-status{
  font-family:var(--font-body);
  font-size:12px;color:var(--subtext);font-weight:500;letter-spacing:.02em;
}
.kk-study-stats{
  font-family:var(--font-body);
  font-size:12px;color:var(--teal-text);font-weight:500;letter-spacing:.02em;
}
.kk-mode-switch{display:flex;flex-wrap:wrap;gap:8px;}
.kk-mode-btn{
  border:1px solid var(--border);background:var(--panel2);color:var(--subtext);
  border-radius:7px;font-family:var(--font-body);font-size:.83rem;font-weight:500;
  padding:7px 16px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;letter-spacing:.01em;
}
.kk-mode-btn:hover{border-color:var(--accent);color:var(--text);}
.kk-mode-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.kk-restart-btn{
  border:1px solid var(--border);background:var(--panel2);color:var(--subtext);
  border-radius:7px;font-family:var(--font-body);font-size:.8rem;font-weight:500;
  padding:7px 13px;cursor:pointer;transition:border-color .15s,color .15s;
}
.kk-restart-btn:hover{border-color:var(--teal);color:var(--teal);}

/* ===== FLASHCARD ===== */
.kk-card-wrap{perspective:1400px;}
.kk-card{
  width:100%;min-height:305px;
  border-radius:calc(var(--radius-card) + 2px);border:1px solid var(--border);
  position:relative;transform-style:preserve-3d;
  transition:transform 0.5s cubic-bezier(.4,0,.2,1);
  background:var(--card-bg);box-shadow:var(--shadow-card);cursor:pointer;
}
.kk-card.is-flipped{transform:rotateY(180deg);}
.kk-card-face{
  position:absolute;inset:0;backface-visibility:hidden;
  padding:28px 24px;
  display:grid;align-content:safe center;justify-items:center;
  gap:12px;text-align:center;overflow-y:auto;overflow-x:hidden;
  background:var(--card-bg);
}
.kk-card-back{
  transform:rotateY(180deg);
  background:color-mix(in srgb, var(--mode-kk) 14%, var(--card-bg));
}
.kk-face-label{
  text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  color:var(--accent);font-weight:600;font-family:var(--font-body);
}
.kk-category{color:var(--subtext);font-size:12px;font-weight:400;font-family:var(--font-body);letter-spacing:.02em;}
.kk-card-text{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,2.4vw,1.25rem);font-weight:500;line-height:1.55;
  max-width:68ch;white-space:pre-wrap;width:100%;color:var(--text);
}
.kk-card-back .kk-card-text{
  font-family:var(--font-body);font-size:1rem;font-weight:400;
}
.kk-card-text p{margin:0;}
.kk-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
@media(max-width:600px){.kk-controls{grid-template-columns:repeat(2,minmax(0,1fr));}}
.kk-btn{
  border:1px solid var(--border);background:var(--panel2);color:var(--text);
  border-radius:9px;font-family:var(--font-body);font-size:.86rem;font-weight:500;
  padding:11px 10px;cursor:pointer;
  transition:transform .15s,box-shadow .2s,border-color .2s,color .15s;letter-spacing:.01em;
}
.kk-btn:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent);box-shadow:0 4px 16px rgba(196,137,42,.15);}
.kk-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
.kk-btn.primary{background:var(--accent);color:#1C1C1A;border-color:var(--accent);font-weight:600;}
.kk-btn.primary:hover{opacity:.92;box-shadow:0 6px 22px rgba(196,137,42,.28);}
.kk-btn.danger{background:var(--error-bg);border-color:var(--accent);color:var(--accent);}
.kk-btn.success{background:var(--success-bg);border-color:var(--teal);color:var(--teal-text);}

/* ===== THEORY BUTTON ===== */
.kk-theory-btn{
  background:transparent;border:1px solid var(--mode-theory);color:var(--rose);
  border-radius:8px;padding:6px 16px;font-family:var(--font-body);
  font-size:.78rem;font-weight:500;cursor:pointer;
  transition:background .15s;margin-top:4px;flex-shrink:0;letter-spacing:.02em;
}
.kk-theory-btn:hover{background:var(--rose-dim);}

/* ===== LÃœCKENTEXT ===== */
#screen-luecken{display:flex;flex-direction:column;height:var(--app-vh);min-height:var(--app-vh);overflow:hidden;background:var(--bg);}
.lt-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:0;-webkit-overflow-scrolling:touch;}
.lt-toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:12px 16px;
}
.lt-left,.lt-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.lt-right{color:var(--subtext);font-family:var(--font-mono);font-size:.78rem;gap:16px;}
#lt-categorySelect{
  background:var(--panel2);border:1px solid var(--border);color:var(--text);
  border-radius:7px;padding:7px 10px;font-size:.86rem;font-family:var(--font-body);
  outline:none;transition:border-color .2s;
}
#lt-categorySelect:focus{border-color:var(--accent);}
.lt-card{
  background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--mode-lt);
  border-radius:var(--radius-card);padding:20px;flex:1;
}
.lt-meta-row{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.lt-pill{
  background:color-mix(in srgb, var(--mode-lt) 12%, var(--card-bg));color:var(--teal-text);
  border:1px solid color-mix(in srgb, var(--mode-lt) 35%, transparent);
  border-radius:999px;padding:3px 11px;font-size:.75rem;font-weight:500;
  font-family:var(--font-body);letter-spacing:.02em;
}
.lt-meta-id{color:var(--subtext);font-family:var(--font-mono);font-size:.75rem;}
.lt-question{
  font-size:clamp(.95rem,1.7vw,1.15rem);font-weight:600;color:var(--text);
  margin:0 0 16px;line-height:1.4;
}
.lt-cloze{display:grid;gap:6px;margin-bottom:16px;}
.lt-cloze p{margin:0;padding:4px 0;color:var(--text);font-size:.93rem;line-height:1.75;}
.lt-gap-wrap{display:inline-flex;align-items:center;gap:5px;margin:0 2px;vertical-align:middle;}
input.lt-gap{
  min-width:90px;background:var(--panel2);border:2px solid var(--border);color:var(--text);
  border-radius:7px;padding:5px 10px;font-size:.88rem;font-family:var(--font-body);
  transition:border-color .2s,box-shadow .2s;
}
input.lt-gap:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
input.lt-gap.correct{border-color:var(--mode-lt);background:var(--success-bg);color:var(--teal-text);}
input.lt-gap.wrong{border-color:var(--accent);background:var(--error-bg);color:var(--accent);}
.lt-hint{color:var(--subtext);font-size:.74rem;font-family:var(--font-mono);}
.lt-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.lt-btn{
  background:var(--panel2);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:8px 14px;font-size:.84rem;font-weight:500;
  font-family:var(--font-body);cursor:pointer;transition:border-color .15s,color .15s;letter-spacing:.01em;
}
.lt-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.lt-btn:disabled{opacity:.35;cursor:not-allowed;}
.lt-btn-primary{
  background:var(--accent);border:none;color:#1C1C1A;border-radius:10px;padding:8px 18px;
  font-size:.84rem;font-weight:600;font-family:var(--font-body);cursor:pointer;
  transition:opacity .15s,box-shadow .2s;letter-spacing:.01em;
}
.lt-btn-primary:hover{opacity:.92;box-shadow:0 4px 20px rgba(196,137,42,.25);}
.lt-btn-secondary{
  background:var(--panel2);border:1px solid var(--mode-lt);color:var(--teal-text);
  border-radius:10px;padding:8px 14px;font-size:.84rem;font-weight:500;
  font-family:var(--font-body);cursor:pointer;transition:background .15s;letter-spacing:.01em;
}
.lt-btn-secondary:hover{background:var(--teal-dim);}
.lt-feedback{
  min-height:1.4em;font-weight:500;font-size:.86rem;
  font-family:var(--font-mono);margin:10px 0 0;letter-spacing:.01em;
}
.lt-feedback.ok{color:var(--teal-text);}
.lt-feedback.warn{color:var(--accent);}
label[for="lt-categorySelect"]{color:var(--subtext);font-size:.84rem;}
@media(max-width:540px){
  .lt-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .lt-btn-primary,.lt-btn-secondary{grid-column:1/-1;}
}

/* ===== MULTIPLE CHOICE ===== */
#screen-mc{display:flex;flex-direction:column;height:var(--app-vh);min-height:var(--app-vh);overflow:hidden;background:var(--bg);}
#mc-status-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;}
#mc-status{font-family:var(--font-body);font-size:12px;color:var(--subtext);letter-spacing:.02em;font-weight:500;}
.mc-options{display:flex;flex-direction:column;gap:9px;margin-bottom:.75rem;}
.mc-option{
  width:100%;padding:12px 14px;text-align:left;
  display:flex;flex-direction:row;align-items:flex-start;gap:12px;
  background:var(--panel2);border:1px solid var(--border);
  border-radius:10px;color:var(--text);cursor:pointer;
  font-size:15px;font-family:var(--font-body);font-weight:400;
  transition:background .15s,border-color .15s,transform .15s;letter-spacing:.01em;
}
.mc-option:hover:not(:disabled){border-color:var(--accent);background:var(--accent-dim);}
.mc-opt-indicator{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--subtext);
  background:var(--surface);border:2px solid var(--border);
  line-height:1;
}
.mc-opt-indicator--multi{border-radius:3px;}
.mc-opt-text{flex:1;min-width:0;line-height:1.45;text-align:left;}
button.mc-option:disabled{cursor:default;}
.mc-option.mc-correct{background:var(--success-bg);border-color:var(--mode-lt);color:var(--teal-text);}
.mc-option.mc-correct .mc-opt-indicator{background:var(--mode-lt);border-color:var(--mode-lt);color:#fff;}
.mc-option.mc-wrong{background:var(--error-bg);border-color:var(--accent);color:var(--accent);}
.mc-option.mc-wrong .mc-opt-indicator{background:var(--accent);border-color:var(--accent);color:#fff;}
.mc-option:disabled{opacity:1;}
.mc-option-multi{
  cursor:pointer;display:flex;flex-direction:row;align-items:flex-start;gap:12px;user-select:none;
}
.mc-option-multi input[type="checkbox"]{
  margin-top:4px;flex-shrink:0;accent-color:var(--accent);
  width:18px;height:18px;cursor:pointer;
}
.mc-option-multi:has(input:disabled){cursor:default;}
.mc-option-multi:has(input:disabled) input{cursor:default;}
label.mc-option-multi.mc-correct{background:var(--success-bg);border-color:var(--mode-lt);color:var(--teal-text);}
label.mc-option-multi.mc-correct .mc-opt-indicator{background:var(--mode-lt);border-color:var(--mode-lt);color:#fff;}
label.mc-option-multi.mc-wrong{background:var(--error-bg);border-color:var(--accent);color:var(--accent);}
label.mc-option-multi.mc-wrong .mc-opt-indicator{background:var(--accent);border-color:var(--accent);color:#fff;}
#mc-question{font-family:var(--font-display);font-weight:500;font-size:1.05rem;line-height:1.45;}
#mc-card.lt-card{
  background:var(--card-bg);
  border-radius:calc(var(--radius-card) + 2px);
  border:1px solid var(--border);
  border-left:3px solid var(--mode-mc);
}

/* ===== THEORIE-ÃœBERSICHT ===== */
#screen-theory-list{display:flex;flex-direction:column;height:var(--app-vh);min-height:var(--app-vh);overflow:hidden;background:var(--bg);}
.tl-body{flex:1;overflow-y:auto;padding:16px;min-height:0;-webkit-overflow-scrolling:touch;}
.tl-list{display:flex;flex-direction:column;gap:8px;}
.tl-item{
  width:100%;background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--mode-theory);
  border-radius:var(--radius-card);padding:15px 18px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:transform .15s ease,border-left-color .18s,box-shadow .18s;text-align:left;
}
.tl-item:hover{transform:translateX(4px);border-left-color:var(--rose);box-shadow:0 4px 16px rgba(0,0,0,.2);}
.tl-item-info{display:flex;flex-direction:column;gap:4px;}
.tl-item-title{font-size:.92rem;font-weight:600;color:var(--text);font-family:var(--font-body);}
.tl-item-meta{font-size:.78rem;color:var(--subtext);font-family:var(--font-mono);letter-spacing:.01em;}
.tl-item-arrow{color:var(--subtext);font-size:1.1rem;flex-shrink:0;transition:transform .18s;}
.tl-item:hover .tl-item-arrow{transform:translateX(3px);color:var(--rose);}
.tl-empty{color:var(--subtext);font-size:.88rem;text-align:center;padding:40px;}

/* ===== THEORIE SCREEN ===== */
#screen-theory{display:flex;flex-direction:column;height:var(--app-vh);min-height:var(--app-vh);overflow:hidden;}
.theory-hdr{
  flex-shrink:0;display:flex;align-items:center;gap:14px;
  padding:14px 24px;background:var(--card-bg);border-bottom:1px solid var(--border);
}
.theory-hdr-title{
  flex:1;font-family:var(--font-display);font-size:1rem;font-weight:500;
  color:var(--text);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.theory-body{flex:1;overflow-y:auto;padding:28px 20px;min-height:0;-webkit-overflow-scrolling:touch;}

/* ===== THEORY NAVIGATION ===== */
.theory-nav{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.theory-nav-btn{
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--subtext);
  font-size:1.1rem;line-height:1;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:color .2s,border-color .2s;
  padding:0;
}
.theory-nav-btn:hover:not(:disabled){color:var(--accent);border-color:var(--accent);}
.theory-nav-btn:disabled{opacity:.3;cursor:not-allowed;}
.theory-nav-pos{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--subtext);
  min-width:34px;
  text-align:center;
  letter-spacing:.02em;
  font-weight:500;
}
.theory-content{
  max-width:72ch;margin:0 auto;font-size:.95rem;
  line-height:1.85;color:var(--text);font-family:var(--font-body);
  padding-bottom:28px;overflow:hidden;
}
.theory-content h1,.theory-content h2{
  font-family:var(--font-display);color:var(--text);font-weight:600;
  margin:1.5em 0 .5em;letter-spacing:.01em;line-height:1.2;
}
.theory-content h1{font-size:1.5rem;}
.theory-content h2{font-size:1.25rem;}
.theory-content h3{
  font-family:var(--font-body);font-size:1.05rem;color:var(--text);
  font-weight:600;margin:1.2em 0 .4em;letter-spacing:.01em;
}
.theory-content p{margin:.6em 0;}
.theory-content ul,.theory-content ol{margin:.5em 0 .5em 1.5em;}
.theory-content li{margin:.35em 0;}
.theory-content strong{color:var(--text);font-weight:600;}
.theory-content em{color:var(--text);font-style:italic;}
.theory-content code{
  background:var(--panel2);border:1px solid var(--border);border-radius:4px;
  padding:1px 7px;font-size:.85em;font-family:var(--font-body);color:var(--accent);
}
.theory-content table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.88rem;}
.theory-content th,.theory-content td{border:1px solid var(--border);padding:9px 12px;text-align:left;}
.theory-content th{
  background:var(--panel2);color:var(--text);font-weight:600;
  font-family:var(--font-display);font-size:.95rem;letter-spacing:.01em;
}
.theory-content tr:nth-child(even) td{background:rgba(255,255,255,.02);}
.theory-content hr{border:none;border-top:1px solid var(--border);margin:1.8em 0;}

/* ===== LIGHT MODE ===== */
html.light{
  --bg:         #FAF9F6;
  --card-bg:    #FFFFFF;
  --panel:      #FFFFFF;
  --panel2:     #F2F0EC;
  --surface:    #F2F0EC;
  --border:     #EDEAE4;
  --input-bg:   #F0EEE9;
  --text:       #1A1916;
  --subtext:    #7A7670;
  --teal-text:  #4A7C59;
  --error-bg:   rgba(196,137,42,0.08);
  --success-bg: rgba(74,124,89,0.08);
  --accent-dim: rgba(196,137,42,0.10);
  --accent-glow:rgba(196,137,42,0.16);
  --teal-dim:   rgba(74,124,89,0.10);
  --rose-dim:   rgba(140,58,90,0.10);
  --shadow-card:0 4px 16px rgba(0,0,0,0.08);
}
html.light .login-card{box-shadow:0 12px 40px rgba(0,0,0,.12);}
html.light .kk-card-back{background:color-mix(in srgb, var(--mode-kk) 8%, var(--card-bg));}
html.light .theory-content,
html.light .theory-content p,
html.light .theory-content li,
html.light .theory-content td{
  color:#1A1916;
}
html.light .theory-content h1,
html.light .theory-content h2,
html.light .theory-content h3,
html.light .theory-content strong,
html.light .theory-content em,
html.light .theory-content th{
  color:#111111;
}

/* ===== SUBJECT TOPBAR ===== */
.subject-topbar{
  width:100%;max-width:none;
  display:flex;align-items:center;justify-content:flex-end;
  gap:8px;margin-bottom:-8px;
  align-self:stretch;
}
.topbar-btn{
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:20px;
  color:var(--subtext);
  font-family:var(--font-body);
  font-size:12px;font-weight:500;
  padding:6px 14px;
  cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
  letter-spacing:.01em;
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.topbar-btn:hover{color:var(--accent);border-color:var(--accent);}

/* ===== PROGRESS RING ===== */
.progress-ring-wrap{
  position:absolute;bottom:6px;right:6px;
  width:28px;height:28px;
  pointer-events:none;
}
.subject-card-banner{position:relative;}

/* ===== MODE CARD PROGRESS BAR ===== */
.mode-prog-bar{
  display:block;height:3px;border-radius:2px;
  background:rgba(128,128,128,0.15);
  margin-top:4px;overflow:hidden;
}
.mode-prog-fill{
  display:block;height:100%;border-radius:2px;
  transition:width .4s ease;
}
.mode-prog-count{
  font-size:11px;color:var(--subtext);font-weight:500;
  flex-shrink:0;letter-spacing:.01em;
}

/* ===== PROGRESS SCREEN ===== */
#screen-progress{display:flex;flex-direction:column;height:var(--app-vh);min-height:var(--app-vh);overflow:hidden;background:var(--bg);}
.prog-body{flex:1;overflow-y:auto;padding:16px 20px 32px;min-height:0;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:16px;}

.prog-stats-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.prog-stat-card{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:14px 12px;
  text-align:center;
}
.prog-stat-num{
  font-family:var(--font-display);font-size:26px;font-weight:500;
  color:var(--text);line-height:1;
}
.prog-stat-lbl{font-size:10px;color:var(--subtext);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;font-weight:500;}

.prog-continue{
  background:var(--accent-dim);border:1px solid var(--accent-glow);
  border-radius:var(--radius-card);padding:14px 16px;
  display:flex;align-items:center;gap:12px;
}
.prog-continue-info{flex:1;min-width:0;}
.prog-continue-label{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin-bottom:3px;}
.prog-continue-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prog-continue-time{font-size:11px;color:var(--subtext);margin-top:2px;}
.prog-continue-btn{
  background:var(--accent);color:#1C1C1A;
  border:none;border-radius:8px;padding:8px 16px;
  font-family:var(--font-body);font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:opacity .15s;
}
.prog-continue-btn:hover{opacity:.88;}

.prog-section-label{font-size:11px;color:var(--subtext);text-transform:uppercase;letter-spacing:.07em;font-weight:600;}

.prog-course-card{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
}
.prog-course-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-card);}
.prog-course-top{display:flex;align-items:center;gap:12px;}
.prog-course-ring{flex-shrink:0;}
.prog-course-info{flex:1;min-width:0;}
.prog-course-cat{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin-bottom:2px;}
.prog-course-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.3;}
.prog-course-meta{font-size:11px;color:var(--subtext);margin-top:2px;}
.prog-mode-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.prog-mode-bar-item{display:flex;flex-direction:column;gap:3px;}
.prog-mode-bar-label{font-size:9px;color:var(--subtext);text-transform:uppercase;letter-spacing:.05em;font-weight:500;}
.prog-mode-bar-track{height:3px;border-radius:2px;background:rgba(128,128,128,0.15);}
.prog-mode-bar-fill{height:100%;border-radius:2px;transition:width .4s ease;}

/* ===== REACT ROOT ===== */
#react-root{display:none;height:var(--app-vh);min-height:var(--app-vh);max-height:var(--app-vh);overflow:hidden;}

/* ===== SCROLLBAR (React screens) ===== */
#react-root ::-webkit-scrollbar{width:0;height:0;}

/* ===== FLIP CARD (Flashcards) ===== */
.flip-card{
  perspective:1000px;
  -webkit-perspective:1000px;
}
.flip-inner{
  transition:transform 0.5s cubic-bezier(.4,0,.2,1);
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  position:relative;
  will-change:transform;
}
.flip-inner.flipped{transform:rotateY(180deg);}
.flip-front,.flip-back{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.flip-back{transform:rotateY(180deg);position:absolute;top:0;left:0;width:100%;height:100%;}
/* WebKit: hidden face must not receive hit-testing; overflow:hidden on faces breaks 3D compositing */
.flip-inner:not(.flipped) .flip-back{pointer-events:none;}
.flip-inner.flipped .flip-front{pointer-events:none;}

/* Stacked flashcard (mobile + desk KK) — no 3D transform */
.fc-stack:focus{outline:none;}
.fc-stack:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* Biochemie: SVG structure cards (subject data) */
.flip-inner .aa-question-structure,
.flip-inner .aa-answer{display:grid;justify-items:center;gap:10px;max-width:100%;}
.flip-inner .aa-question-structure svg,
.flip-inner .aa-answer svg{max-width:100%;height:auto;display:block;}
.flip-inner .aa-question-structure .prompt{font-size:12px;color:var(--subtext);text-align:center;}
.flip-inner .aa-answer .aa-meta{font-weight:600;color:var(--text);}

/* ===== ANIMATIONS ===== */
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{transform:scale(0.95);opacity:0}100%{transform:scale(1);opacity:1}}
.anim-slide{animation:slideUp 0.28s ease both;}
.anim-pop{animation:pop 0.2s ease both;}