/* PHOROwort – Schweizer Wörterbuch
   PHORO Design System (Brand Identity 2026)
   Lexend + OpenDyslexic lokal gehostet.
*/

/* === Fonts === */

@font-face{
  font-family: "Lexend";
  src: url("../assets/fonts/Lexend-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Lexend";
  src: url("../assets/fonts/Lexend-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Lexend";
  src: url("../assets/fonts/Lexend-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Lexend";
  src: url("../assets/fonts/Lexend-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Lexend";
  src: url("../assets/fonts/Lexend-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "OpenDyslexic";
  src: url("../assets/fonts/OpenDyslexic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* === PHORO Design Tokens === */

:root{
  /* Primärfarben */
  --phoro-warmbeige: #F5F0E6;
  --phoro-blue: #1A3550;
  --phoro-morgenrot: #E07A5F;
  --phoro-green: #6B9080;
  --phoro-slate: #3D405B;

  /* Abgeleitete Töne */
  --phoro-slate-80: rgba(61,64,91,0.8);
  --phoro-slate-60: rgba(61,64,91,0.6);
  --phoro-slate-30: rgba(61,64,91,0.3);
  --phoro-slate-20: rgba(61,64,91,0.2);
  --phoro-blue-60: rgba(26,53,80,0.6);
  --phoro-blue-35: rgba(26,53,80,0.35);
  --phoro-blue-15: rgba(26,53,80,0.15);
  --phoro-blue-12: rgba(26,53,80,0.12);
  --phoro-blue-8: rgba(26,53,80,0.08);

  /* Hintergründe */
  --bg-page: #F5F0E6;
  --bg-header: #FAF8F5;
  --bg-card: #FFFFFF;

  /* Borders */
  --border-hairline: 1px solid var(--phoro-slate-30);
  --border-standard: 1px solid var(--phoro-blue-35);
  --border-key: 1.5px solid var(--phoro-blue);
  --border-divider: 2px solid var(--phoro-blue);
  --border-panel: 1px solid #DDD8CE;

  /* Schatten – extrem subtil */
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);

  /* Typografie */
  --font-primary: 'Lexend', sans-serif;
  --ls: 0em;
  --lh: 1.7;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* Spacing (4px Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* Layout */
  --gap: 12px;
  --panel-edge-gap: clamp(12px, 4vw, 24px);

  /* Focus */
  --focus-color: var(--phoro-blue);
}

*{ box-sizing:border-box }

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

[hidden]{
  display:none !important;
}

html,body{ height:100% }

body{
  margin:0;
  font-family: var(--font-primary);
  font-weight: 400;
  background: var(--bg-page);
  color: var(--phoro-slate);
  letter-spacing: var(--ls);
  line-height: var(--lh);
  font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === Dyslexie-Modus === */

body.dys{
  font-family: "OpenDyslexic", var(--font-primary);
  letter-spacing: .055em;
}
body.dys .definition,
body.dys .example,
body.dys .card h2{ line-height: 1.7; }

/* === Header === */

.app-header{
  position:sticky; top:0; z-index:10;
  background: var(--bg-header);
  border-bottom: var(--border-standard);
  padding: var(--space-3) clamp(12px,3vw,24px) var(--space-4);
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

.header-bar{
  display:flex;
  align-items:center;
  gap: var(--space-4);
}

.header-brand{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  flex:1;
  min-width:0;
}

.logo-composite{
  display:inline-flex;
  align-items:flex-end;
  flex-shrink:0;
  margin-left: clamp(-3.5rem, -7vw, -2.5rem);
}

.header-logo{
  height: clamp(80px, 16vw, 112px);
  width:auto;
}

.logo-suffix{
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--phoro-blue-60);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-left: clamp(-3.75rem, -8vw, -2.5rem);
  margin-bottom: clamp(2.4rem, 5.2vw, 3.2rem);
}

.header-sub{
  margin:0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(0.75rem, 1.6vw, 0.875rem);
  color: var(--phoro-slate-60);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

/* Badge (Lernwörter-Zähler) */
.badge{
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--phoro-blue);
  background: var(--phoro-blue-8);
  border: 1px solid var(--phoro-blue-35);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  line-height: 1.3;
}

/* === Settings === */

.settings-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.settings-toggle{
  background: transparent;
  color: var(--phoro-blue);
  border: 1px solid var(--phoro-blue-35);
}

.settings-toggle:hover{ background: var(--phoro-blue-8); }
.settings-toggle:focus{ outline:2px solid var(--focus-color); outline-offset:2px; }
.settings-toggle:active{ transform: translateY(1px); }

.settings-toggle .burger{
  position:relative;
  display:block;
  width:20px;
  height:1.5px;
  border-radius:1px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.settings-toggle .burger::before,
.settings-toggle .burger::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:1.5px;
  border-radius:1px;
  background: currentColor;
  transition: transform .2s ease;
}

.settings-toggle .burger::before{ top:-5px; }
.settings-toggle .burger::after{ top:5px; }

.settings-wrapper.open .settings-toggle .burger{ opacity:0; }
.settings-wrapper.open .settings-toggle .burger::before{
  transform: translateY(5px) rotate(45deg);
}
.settings-wrapper.open .settings-toggle .burger::after{
  transform: translateY(-5px) rotate(-45deg);
}

.settings-panel{
  position:fixed;
  top: var(--settings-panel-top, 80px);
  left: var(--settings-panel-left, auto);
  right: var(--settings-panel-right, var(--panel-edge-gap));
  width: min(400px, calc(100vw - var(--panel-edge-gap) * 2));
  max-height: calc(100vh - var(--settings-panel-top, 80px) - var(--settings-panel-gap, 16px));
  display:flex;
  flex-direction:column;
  gap: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--phoro-blue-12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  z-index:20;
  overflow:auto;
  overscroll-behavior: contain;
}

.settings-panel::before{
  content:"";
  position:absolute;
  top:-8px;
  right: var(--settings-panel-caret-right, 18px);
  width:14px;
  height:14px;
  background: var(--bg-card);
  border-left:1px solid var(--phoro-blue-12);
  border-top:1px solid var(--phoro-blue-12);
  transform: rotate(45deg);
  opacity: var(--settings-panel-caret-opacity, 1);
}

/* === Search === */

.search-row{
  display:flex;
  gap: var(--space-2);
  align-items:stretch;
  width:100%;
}

.search-row .search{
  flex:1 1 auto;
  min-width:0;
  height:44px;
  padding:0 var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--phoro-blue-35);
  background: var(--bg-card);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(15px, 4vw, 16px);
  color: var(--phoro-slate);
  line-height:1.4;
}

.search-row .search::placeholder{
  color: var(--phoro-slate-60);
}

.search-row .search:focus{
  outline: 2px solid var(--focus-color);
  outline-offset: 1px;
  border-color: var(--phoro-blue);
}

/* === Buttons === */

.btn{
  -webkit-appearance:none; appearance:none;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  cursor:pointer;
  transition: filter .15s ease, transform .02s ease-in, background-color .12s ease;
  border: 1px solid var(--phoro-blue-35);
  color: var(--phoro-blue);
  background: var(--bg-card);
}

.btn:hover{ background: var(--phoro-blue-8); }
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline: 2px solid var(--focus-color); outline-offset:2px; }

.btn-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn .icon{
  width:18px; height:18px;
  display:inline-block;
  vertical-align:-3px;
  flex-shrink:0;
}

.btn.btn-icon{
  width:44px;
  height:44px;
  padding:0;
}

/* Secondary */
.btn-secondary{
  background: var(--bg-card);
  color: var(--phoro-blue);
}
.btn-secondary:hover{ background: var(--phoro-blue-8); }

/* Warning / Destructive (Morgenrot – sparsam) */
.btn-warning{
  background: var(--phoro-morgenrot);
  color: #FFFFFF;
  border-color: var(--phoro-morgenrot);
}
.btn-warning:hover{ filter: brightness(1.1); }
.btn-warning:focus{ outline-color: var(--phoro-morgenrot); }

/* === Mic Button === */

.btn.mic{
  position:relative;
  border-color: var(--phoro-blue-35);
  background: var(--bg-card);
  color: var(--phoro-blue);
  overflow:hidden;
}
.btn.mic:hover{ background: var(--phoro-blue-8); }
.btn.mic.rec{
  background: var(--phoro-blue);
  color:#fff;
  border-color: var(--phoro-blue);
}

.btn.mic .icon{
  width: 22px;
  height: 22px;
  display: block;
  color: var(--phoro-blue);
  transition: color .12s ease;
}

.btn.mic.rec .icon{
  color: #fff;
}

/* === Settings Panel Layout === */

.settings-panel .toggles,
.settings-panel .sliders,
.settings-panel .io{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-3) var(--space-4);
}

.settings-panel .toggles{ justify-content:flex-start; }
.settings-panel .toggles .switch{ flex:1 1 45%; }

.settings-panel .sliders{ flex-direction:column; align-items:stretch; }

.settings-panel .sliders label{
  display:flex;
  flex-direction:column;
  gap: var(--space-1);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--phoro-blue);
}

.settings-panel .sliders input{ width:100%; }

.settings-panel .io{
  flex-direction:column;
  align-items:stretch;
}

.settings-panel .io .btn{ width:100%; }

.switch{ display:flex; align-items:center; gap: var(--space-2); }
.switch span{
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--phoro-blue);
}

@media (max-width: 720px){
  .settings-panel{
    left: var(--settings-panel-left, var(--panel-edge-gap));
    right: var(--settings-panel-right, var(--panel-edge-gap));
    width:auto;
    max-width:none;
    border-radius: var(--radius-md);
  }
  .settings-panel::before{ opacity:0; }
  .settings-panel .toggles .switch{ flex:1 1 100%; }
}

/* === Results Grid === */

.results{
  padding: var(--space-5) clamp(12px,3vw,24px) var(--space-10);
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* === Cards === */

.card{
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  border: 1px solid var(--phoro-blue-12);
  display:flex;
  flex-direction:column;
  gap: var(--space-2);
  min-height:100%;
}

.card h2{
  margin:0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--phoro-blue);
  line-height: 1.4;
}

.meta{
  color: var(--phoro-slate-80);
  font-size: 0.8125rem;
  font-weight: 400;
}

.syll{ letter-spacing: .04em; }

/* Tags */
.tag{
  display:inline-block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--phoro-blue-35);
  color: var(--phoro-blue);
  background: var(--phoro-blue-8);
  margin-right: var(--space-1);
  letter-spacing: 0.02em;
}

/* Actions in Cards */
.actions{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top:auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--phoro-slate-20);
}

.actions button{
  font-family: var(--font-primary);
  font-weight: 500;
  border: 1px solid var(--phoro-blue-35);
  background: var(--bg-card);
  color: var(--phoro-blue);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-lg);
  cursor:pointer;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size: clamp(0.6875rem, 3vw, 0.8125rem);
  line-height:1.3;
  transition: filter .15s ease, transform .02s ease-in;
}
.actions button:hover{ background: var(--phoro-blue-8); }
.actions button:active{ transform: translateY(1px); }
.actions button:focus{ outline: 2px solid var(--focus-color); outline-offset:2px; }

/* === Text Elements === */

.definition{
  margin: 0;
  font-size: 0.9375rem;
  color: var(--phoro-slate);
}

.example{
  margin: 0;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--phoro-slate-80);
}

/* === Leselineal === */

.ruler{
  position: fixed; left:0; right:0; height: 2.2em;
  top: 0;
  z-index: 9999;
  background: rgba(107,144,128,0.20);
  pointer-events:none;
  border-top: 1.5px solid var(--phoro-green);
  border-bottom: 1.5px solid var(--phoro-green);
}

/* === Footer === */

.app-footer{
  padding: var(--space-6) clamp(12px,3vw,24px) var(--space-10);
  font-size: 0.6875rem;
  color: var(--phoro-slate-60);
  letter-spacing: 0.02em;
}

.app-footer a{
  color: var(--phoro-blue-60);
  text-decoration: none;
}
.app-footer a:hover{
  text-decoration: underline;
}
.app-footer .version{
  margin-top: var(--space-2);
  font-size: 0.5625rem;
  color: var(--phoro-slate-30);
  letter-spacing: 0.04em;
}

/* === Hoher Kontrast === */

body.contrast{
  --bg-page: #0D1B2A;
  --bg-header: #132639;
  --bg-card: #1B2D44;
  --phoro-slate: #E0E6ED;
  --phoro-slate-80: rgba(224,230,237,0.8);
  --phoro-slate-60: rgba(224,230,237,0.6);
  --phoro-slate-30: rgba(224,230,237,0.3);
  --phoro-slate-20: rgba(224,230,237,0.2);
  --phoro-blue: #7EB8E0;
  --phoro-blue-60: rgba(126,184,224,0.6);
  --phoro-blue-35: rgba(126,184,224,0.35);
  --phoro-blue-15: rgba(126,184,224,0.15);
  --phoro-blue-12: rgba(126,184,224,0.12);
  --phoro-blue-8: rgba(126,184,224,0.08);
  --focus-color: #7EB8E0;
  color: #E0E6ED;
}

body.contrast .app-header{
  background: var(--bg-header);
  border-bottom-color: rgba(126,184,224,0.2);
}

body.contrast .header-logo{
  filter: brightness(0) invert(1) brightness(0.85);
}

body.contrast .logo-suffix{
  color: var(--phoro-blue-60);
}

body.contrast .header-sub{
  color: rgba(224,230,237,0.7);
}

body.contrast .badge{
  color: var(--phoro-blue);
  background: var(--phoro-blue-8);
  border-color: var(--phoro-blue-35);
}

body.contrast .search-row .search{
  background: var(--bg-card);
  color: #E0E6ED;
  border-color: var(--phoro-blue-35);
}

body.contrast .btn,
body.contrast .actions button{
  border-color: var(--phoro-blue-35);
  color: var(--phoro-blue);
  background: var(--bg-card);
}
body.contrast .btn:hover,
body.contrast .actions button:hover{
  background: var(--phoro-blue-8);
}

body.contrast .btn-warning{
  background: var(--phoro-morgenrot);
  color: #FFFFFF;
  border-color: var(--phoro-morgenrot);
}

body.contrast .card{
  background: var(--bg-card);
  border-color: var(--phoro-blue-12);
}

body.contrast .card h2{
  color: #E0E6ED;
}

body.contrast .meta,
body.contrast .tag,
body.contrast .example{
  color: rgba(224,230,237,0.7);
}

body.contrast .tag{
  background: var(--phoro-blue-8);
  border-color: var(--phoro-blue-35);
  color: var(--phoro-blue);
}

body.contrast .app-footer{
  color: rgba(224,230,237,0.5);
}
body.contrast .app-footer a{
  color: var(--phoro-blue-60);
}

body.contrast .switch span{
  color: #E0E6ED;
}

body.contrast .settings-panel .sliders label{
  color: #E0E6ED;
}

/* === Lernwörter-Panel === */

.learn{
  margin: var(--space-3) clamp(12px,3vw,24px) var(--space-10);
  background: var(--bg-card);
  border: 1px solid var(--phoro-blue-12);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  display:grid;
  gap: var(--space-3);
  grid-template-areas:
    "title"
    "summary"
    "list"
    "actions";
}

.learn-head{
  grid-area:title;
}

.learn-head h2{
  margin:0;
  display:flex;
  align-items:center;
  gap: var(--space-2);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--phoro-blue);
  line-height: 1.4;
}

.learn-head .badge{ flex-shrink:0; }

.learn-list{
  grid-area:list;
  margin: 0;
  padding-inline-start: clamp(24px, 4vw, 36px);
  list-style-position: outside;
}

.learn-actions{
  grid-area:actions;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width:100%;
}

.learn-actions .btn{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 500;
  font-size: 0.8125rem;
}

@media (min-width: 640px){
  .learn{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title actions"
      "summary actions"
      "list actions";
    align-items:start;
  }
  .learn-actions{
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    max-width:500px;
    width:auto;
    justify-self:end;
  }
}

.learn-list li{
  margin: var(--space-1) 0;
  padding-inline-start: .2em;
  font-size: 0.9375rem;
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.learn-word-text{
  flex:0 1 auto;
  min-width:0;
}
.learn-word-fach{
  flex-shrink:0;
}

body.dys .learn-list{ padding-inline-start: clamp(28px, 6vw, 42px); }

.learn-list .rm{
  margin-left:auto;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  border: 1px solid var(--phoro-blue-35);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--phoro-blue);
  cursor: pointer;
  flex-shrink:0;
}
.learn-list .rm:hover{ background: var(--phoro-blue-8); }

/* Learn summary bar */
.learn-summary{
  grid-area:summary;
  display:flex;
  gap:var(--space-4);
  flex-wrap:wrap;
  font-size:0.8125rem;
  font-weight:500;
  color:var(--phoro-slate);
}
.learn-summary-item{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
}
.learn-summary-intensiv::before,
.learn-summary-behandlung::before,
.learn-summary-entlassen::before{
  content:'';
  display:inline-block;
  width:8px; height:8px;
  border-radius:2px;
}
.learn-summary-intensiv::before{ background:var(--phoro-slate-20); }
.learn-summary-behandlung::before{ background:var(--phoro-blue); }
.learn-summary-entlassen::before{ background:var(--phoro-green); }

body.contrast .learn{
  background: var(--bg-card);
  border-color: var(--phoro-blue-12);
}
body.contrast .learn-head h2{
  color: #E0E6ED;
}
body.contrast .learn-list .rm{
  background: var(--bg-card);
  color: var(--phoro-blue);
  border-color: var(--phoro-blue-35);
}
body.contrast .learn-summary{ color:#A0A8C0; }
body.contrast .learn-summary-intensiv::before{ background:rgba(160,168,192,0.3); }
body.contrast .learn-summary-behandlung::before{ background:#7EB8E0; }
body.contrast .learn-summary-entlassen::before{ background:#8CC5AD; }

/* === Focus Ring (global) === */

:focus{ outline: 2px solid var(--focus-color); outline-offset:2px; }

/* === PHORO Dialog (replaces native alert/confirm) === */

.phoro-overlay{
  position:fixed;
  inset:0;
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(26,53,80,0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity:0;
  transition: opacity .15s ease;
}
.phoro-overlay.visible{ opacity:1; }

.phoro-dialog{
  background: var(--bg-card);
  border: var(--border-standard);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-6) var(--space-5);
  max-width: min(380px, calc(100vw - 48px));
  width:100%;
  transform: scale(0.96);
  transition: transform .15s ease;
}
.phoro-overlay.visible .phoro-dialog{ transform: scale(1); }

.phoro-dialog-msg{
  font-family: var(--font-primary);
  font-size: 0.938rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--phoro-slate);
  margin: 0 0 var(--space-5);
}

.phoro-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap: var(--space-2);
}

.phoro-dialog-actions button{
  -webkit-appearance:none; appearance:none;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--radius-lg);
  padding: 8px 20px;
  cursor:pointer;
  transition: filter .15s ease, transform .02s ease-in, background-color .12s ease;
}
.phoro-dialog-actions button:focus{
  outline: 2px solid var(--focus-color);
  outline-offset:2px;
}
.phoro-dialog-actions button:active{ transform: translateY(1px); }

.phoro-dialog-actions .phoro-btn-cancel{
  border: 1px solid var(--phoro-blue-35);
  color: var(--phoro-slate);
  background: var(--bg-card);
}
.phoro-dialog-actions .phoro-btn-cancel:hover{ background: var(--phoro-blue-8); }

.phoro-dialog-actions .phoro-btn-ok{
  border: 1px solid var(--phoro-blue);
  color: #FFFFFF;
  background: var(--phoro-blue);
}
.phoro-dialog-actions .phoro-btn-ok:hover{ filter: brightness(1.15); }

/* Contrast mode */
body.contrast .phoro-overlay{ background: rgba(0,0,0,0.5); }
body.contrast .phoro-dialog{
  background: var(--bg-card);
  border-color: var(--phoro-blue-35);
}
body.contrast .phoro-dialog-msg{ color: #E0E6ED; }
body.contrast .phoro-dialog-actions .phoro-btn-cancel{
  border-color: var(--phoro-blue-35);
  color: #E0E6ED;
  background: var(--bg-card);
}
body.contrast .phoro-dialog-actions .phoro-btn-cancel:hover{ background: var(--phoro-blue-8); }
body.contrast .phoro-dialog-actions .phoro-btn-ok{
  background: var(--phoro-blue);
  border-color: var(--phoro-blue);
}

/* === Auth / Login === */

.auth-area{
  display:flex;
  align-items:center;
  gap: var(--space-2);
  flex-shrink:0;
}

.btn-login,
.btn-logout{
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  cursor:pointer;
  white-space:nowrap;
  transition: background-color .12s ease, transform .02s ease-in;
}

.btn-login{
  border: 1px solid var(--phoro-blue);
  color: var(--phoro-blue);
  background: transparent;
}
.btn-login:hover{ background: var(--phoro-blue-8); }

.btn-logout{
  border: 1px solid var(--phoro-blue-35);
  color: var(--phoro-slate-60);
  background: transparent;
  font-weight: 400;
  font-size: 0.75rem;
  padding: 4px 10px;
}
.btn-logout:hover{ background: var(--phoro-blue-8); }

.user-info{
  display:flex;
  align-items:center;
  gap: var(--space-2);
}

.user-name{
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--phoro-blue);
  max-width: 120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Login dialog overrides */
.login-dialog{
  max-width: min(400px, calc(100vw - 48px));
}

.login-title{
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--phoro-blue);
  margin: 0 0 var(--space-4);
}

.login-form{
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
}

.login-label{
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--phoro-slate);
  margin-bottom: calc(-1 * var(--space-2));
}

.login-input{
  -webkit-appearance:none; appearance:none;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--phoro-slate);
  background: var(--bg-card);
  border: var(--border-standard);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  width:100%;
  transition: border-color .12s ease;
}
.login-input:focus{
  outline:none;
  border-color: var(--phoro-blue);
  box-shadow: 0 0 0 2px var(--phoro-blue-15);
}

.login-error{
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--phoro-morgenrot);
  margin: 0;
}

.login-hint{
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--phoro-slate-60);
  margin: -0.25rem 0 0.25rem;
}

.register-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--phoro-slate);
  line-height: 1.4;
}

.register-checkbox input[type="checkbox"]{
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--phoro-blue);
}

.register-checkbox a{
  color: var(--phoro-blue);
  text-decoration: underline;
}

.login-footer{
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--phoro-slate-60);
  text-align: center;
  margin: 0.75rem 0 0;
}

.login-footer-link{
  color: var(--phoro-blue);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}

/* Demo-Banner */

.demo-banner{
  margin: var(--space-3) clamp(12px,3vw,24px) 0;
  background: var(--phoro-blue-8);
  border: 1px solid var(--phoro-blue-15);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  display:flex;
  align-items:center;
  gap: var(--space-3);
  flex-wrap:wrap;
}

.demo-banner p{
  margin:0;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--phoro-slate);
  flex:1;
  min-width:200px;
}

.btn-small{
  font-size: 0.8125rem;
  padding: 6px 16px;
  border-radius: var(--radius-lg);
}

.btn-primary{
  -webkit-appearance:none; appearance:none;
  font-family: var(--font-primary);
  font-weight: 500;
  border: 1px solid var(--phoro-blue);
  color: #FFFFFF;
  background: var(--phoro-blue);
  cursor:pointer;
  transition: filter .15s ease, transform .02s ease-in;
}
.btn-primary:hover{ filter: brightness(1.15); }
.btn-primary:focus{ outline: 2px solid var(--focus-color); outline-offset:2px; }
.btn-primary:active{ transform: translateY(1px); }

/* Contrast mode – Auth */
body.contrast .btn-login{
  border-color: var(--phoro-blue-35);
  color: #E0E6ED;
}
body.contrast .btn-login:hover{ background: var(--phoro-blue-8); }

body.contrast .btn-logout{
  border-color: var(--phoro-blue-35);
  color: #A0A4B8;
}

body.contrast .user-name{ color: #E0E6ED; }

body.contrast .login-dialog{
  background: var(--bg-card);
  border-color: var(--phoro-blue-35);
}
body.contrast .login-title{ color: #E0E6ED; }
body.contrast .login-label{ color: #A0A4B8; }
body.contrast .login-input{
  background: #0D1B2A;
  border-color: var(--phoro-blue-35);
  color: #E0E6ED;
}
body.contrast .login-input:focus{
  border-color: var(--phoro-blue);
  box-shadow: 0 0 0 2px var(--phoro-blue-15);
}

body.contrast .demo-banner{
  background: rgba(26,53,80,0.12);
  border-color: var(--phoro-blue-35);
}
body.contrast .demo-banner p{ color: #A0A4B8; }

/* === Search Limit Banner (WRT-015) === */

.search-limit-banner{
  grid-column: 1 / -1;
  background: var(--bg-card);
  border: 1px solid var(--phoro-blue-15);
  border-radius: var(--radius-sm);
  padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4, 1rem);
}

.search-limit-icon{ color: var(--phoro-slate); opacity: 0.55; }

.search-limit-text{
  margin: 0;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--phoro-slate);
  max-width: 400px;
}

.search-limit-actions{
  display: flex;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  justify-content: center;
}

body.contrast .search-limit-banner{
  background: var(--bg-card);
  border-color: var(--phoro-blue-35);
}
body.contrast .search-limit-text{ color: #E0E6ED; }
body.contrast .search-limit-icon{ color: #A0A8C0; }

/* === Export Gate Dialog (WRT-017) === */

.export-gate-dialog{ text-align:center; max-width:380px; }
.export-gate-icon{ color: var(--phoro-slate); margin-bottom:0.75rem; }
.export-gate-title{
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--phoro-blue);
  margin: 0 0 0.5rem;
}
.export-gate-text{
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: var(--phoro-slate);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}
.export-gate-subtext{
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--phoro-blue-60);
  margin: 0 0 1rem;
  line-height: 1.4;
}
.export-gate-dialog .phoro-dialog-actions{ justify-content:center; }
.export-gate-dialog .login-footer{ margin-top:0.75rem; }

body.contrast .export-gate-title{ color: #C5D1E0; }
body.contrast .export-gate-text{ color: #A0A8C0; }
body.contrast .export-gate-subtext{ color: #8890A8; }
body.contrast .export-gate-icon{ color: #8890A8; }

/* === Print – Karteikarten (WRT-013) === */

#print-cards{ display:none; }

.syl-a{ color: #E07A5F; }
.syl-b{ color: #1A3550; }

@media print{
  body > *:not(#print-cards){ display:none !important; }
  #print-cards{ display:block !important; }

  /* A4 landscape, no CSS-level margins (printer handles physical margins) */
  @page{ size:A4 landscape; margin:0; }

  /* Float-based layout – no grid/flexbox (Safari print compat) */
  .print-page{
    width:297mm;
    height:210mm;
    padding:53mm 0.5mm;
    box-sizing:border-box;
    overflow:hidden;
  }
  .print-page::after{
    content:'';
    display:block;
    clear:both;
  }
  .print-page:not(:last-child){
    page-break-after:always;
    break-after:page;
  }

  .print-card{
    float:left;
    width:74mm;
    height:52mm;
    box-sizing:border-box;
    position:relative;
    font-family:'Lexend',sans-serif;
    overflow:hidden;
  }

  /* --- Front cards (no border) --- */
  .print-front{
    padding:4mm 5mm;
  }
  .print-front .print-card-head{
    position:absolute;
    top:3mm;
    right:4mm;
  }
  .print-tag{
    font-size:0.6875rem;
    color:#3D405B;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  .print-word{
    position:absolute;
    top:50%;
    left:5mm;
    right:5mm;
    transform:translateY(-50%);
    font-size:1.6rem;
    font-weight:600;
    text-align:center;
    line-height:1.4;
  }

  /* --- Back cards: dashed border + L-shaped corner crop marks --- */
  .print-back{
    border:1px dashed #999;
    padding:3mm 4mm;
    text-align:center;
    background-color:#fff;
    background-image:
      linear-gradient(#999,#999), linear-gradient(#999,#999),
      linear-gradient(#999,#999), linear-gradient(#999,#999),
      linear-gradient(#999,#999), linear-gradient(#999,#999),
      linear-gradient(#999,#999), linear-gradient(#999,#999);
    background-size:
      5mm 0.3mm, 0.3mm 5mm,
      5mm 0.3mm, 0.3mm 5mm,
      5mm 0.3mm, 0.3mm 5mm,
      5mm 0.3mm, 0.3mm 5mm;
    background-position:
      left top, left top,
      right top, right top,
      left bottom, left bottom,
      right bottom, right bottom;
    background-repeat:no-repeat;
  }
  .print-def{
    position:absolute;
    top:50%;
    left:4mm;
    right:4mm;
    transform:translateY(-50%);
    font-size:0.8125rem;
    line-height:1.6;
    color:#3D405B;
    margin:0;
  }
  .print-word-back{
    position:absolute;
    top:50%;
    left:4mm;
    right:4mm;
    transform:translateY(-50%);
    font-size:1.2rem;
    font-weight:600;
    color:#1A3550;
    margin:0;
  }
  .print-empty{
    border-color:transparent;
    background:none !important;
  }
}

/* === Practice Animations === */

@keyframes practice-fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes practice-slideUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes practice-scaleIn{
  from{ opacity:0; transform:scale(0.96); }
  to{ opacity:1; transform:scale(1); }
}

/* === Wörterspital (WRT-014) === */

.practice-overlay{
  position:fixed; inset:0;
  background:var(--bg-page);
  z-index:100;
  overflow-y:auto;
}
.practice-overlay[hidden]{ display:none; }

.practice-inner{
  display:flex; flex-direction:column;
  align-items:center;
  min-height:100vh;
  padding:var(--space-8) var(--space-4);
  box-sizing:border-box;
  animation:practice-fadeIn .2s ease both;
}

/* Topbar */
.practice-topbar{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; max-width:640px;
  margin-bottom:var(--space-6);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--phoro-slate-20);
}
.practice-close{
  width:44px; height:44px;
  border:1px solid var(--phoro-blue-35);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  color:var(--phoro-blue);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease;
  flex-shrink:0;
}
.practice-close:hover{ background:var(--phoro-blue-8); }
.practice-close:focus{ outline:2px solid var(--focus-color); outline-offset:2px; }
.practice-close .icon{ width:20px; height:20px; display:block; }

/* Progress */
.practice-progress-wrap{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:var(--space-1);
  flex:1;
  margin-left:var(--space-4);
}
.practice-progress-text{
  font-size:0.8125rem;
  color:var(--phoro-slate-60);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.practice-progress-bar{
  width:100%; height:3px;
  background:var(--phoro-blue-12);
  border-radius:var(--radius-full);
  overflow:hidden;
}
.practice-progress-fill{
  height:100%;
  background:var(--phoro-blue);
  border-radius:var(--radius-full);
  transition:width .3s ease;
}

/* Tag */
.practice-tag{
  font-size:0.8125rem;
  color:var(--phoro-slate-60);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:var(--space-6);
}
.practice-learned{ color:var(--phoro-green); font-weight:600; }
.practice-learned-icon{
  display:inline-block;
  width:14px; height:14px;
  vertical-align:-2px;
  margin-left:4px;
}

/* Speaker */
.practice-speak{
  display:inline-flex; align-items:center; gap:var(--space-2);
  margin-bottom:var(--space-8);
  font-size:0.9375rem; font-weight:500;
  font-family:var(--font-primary);
  padding:var(--space-3) var(--space-5);
  border:1px solid var(--phoro-blue-35);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  color:var(--phoro-blue);
  cursor:pointer;
  transition:background-color .15s ease;
}
.practice-speak:hover{ background:var(--phoro-blue-8); }
.practice-speak:focus{ outline:2px solid var(--focus-color); outline-offset:2px; }
.practice-speak .icon{ width:20px; height:20px; display:block; flex-shrink:0; }

/* Write area */
.practice-write-area{
  width:100%; max-width:640px;
  margin-bottom:var(--space-6);
  animation:practice-slideUp .25s ease both;
  animation-delay:.05s;
}
.practice-canvas{
  display:block;
  width:100%; max-width:600px;
  height:200px;
  margin:0 auto;
  border:1.5px solid var(--phoro-blue-35);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);
  touch-action:none;
  cursor:crosshair;
}
.practice-input{
  display:block;
  width:100%; max-width:600px;
  margin:0 auto;
  font-size:1.75rem;
  font-family:var(--font-primary);
  text-align:center;
  padding:var(--space-5) var(--space-4);
  border:1.5px solid var(--phoro-blue-35);
  border-radius:var(--radius-md);
  background:#fff;
  color:var(--phoro-blue);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);
  box-sizing:border-box;
  transition:border-color .15s ease;
}
.practice-input:focus{
  border-color:var(--phoro-blue);
  outline:2px solid var(--focus-color);
  outline-offset:2px;
}

/* Reveal */
.practice-reveal-area{
  min-height:3rem;
  margin-bottom:var(--space-2);
  width:100%; max-width:640px;
}
.practice-reveal{
  font-size:clamp(1.5rem,5vw,2.5rem);
  font-family:var(--font-primary);
  font-weight:600;
  text-align:center;
  margin-top:var(--space-4);
  animation:practice-slideUp .25s ease both;
}

/* Action buttons */
.practice-actions{
  display:flex; gap:var(--space-4);
  flex-wrap:wrap; justify-content:center;
  margin-top:var(--space-6);
  animation:practice-fadeIn .2s ease both;
  animation-delay:.1s;
}
.practice-actions .btn{
  min-width:150px; min-height:52px;
  font-size:1rem; font-weight:500;
  border-radius:var(--radius-lg);
  cursor:pointer;
  padding:var(--space-3) var(--space-5);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  transition:background-color .15s ease, border-color .15s ease, filter .15s ease, transform .02s ease-in;
}
.practice-actions .btn .icon{ width:18px; height:18px; display:block; flex-shrink:0; }
.practice-actions .btn:focus{ outline:2px solid var(--focus-color); outline-offset:2px; }
.practice-actions .btn:active{ transform:translateY(1px); }

.practice-actions .btn-secondary{
  border:1px solid var(--phoro-blue-35);
  background:var(--bg-card);
  color:var(--phoro-blue);
}
.practice-actions .btn-secondary:hover{ background:var(--phoro-blue-8); }

.practice-actions .btn-primary{
  border:1px solid var(--phoro-blue);
  background:var(--phoro-blue);
  color:#fff;
}
.practice-actions .btn-primary:hover{ filter:brightness(1.15); }

.practice-actions .btn-success{
  border:1px solid var(--phoro-green);
  background:rgba(107,144,128,0.08);
  color:var(--phoro-green);
  font-weight:600;
}
.practice-actions .btn-success:hover{ background:rgba(107,144,128,0.15); }

.practice-actions .btn-soft{
  border:1px solid var(--phoro-blue-35);
  background:var(--bg-card);
  color:var(--phoro-slate);
}
.practice-actions .btn-soft:hover{ background:var(--phoro-blue-8); }

/* Completion */
.practice-complete{
  justify-content:center;
  text-align:center;
  animation:practice-scaleIn .25s ease both;
}
.practice-complete-icon{
  width:48px; height:48px;
  color:var(--phoro-green);
  margin-bottom:var(--space-4);
}
.practice-complete h2{
  font-size:clamp(1.25rem,4vw,1.75rem);
  font-weight:600;
  color:var(--phoro-blue);
  margin:0 0 var(--space-8);
}
.practice-stats-card{
  border:1px solid var(--phoro-slate-20);
  border-radius:var(--radius-md);
  padding:var(--space-6) var(--space-8);
  background:var(--bg-card);
  margin-bottom:var(--space-8);
  display:inline-flex;
  gap:var(--space-10);
}
.practice-stat{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-1);
}
.practice-stat-number{
  font-size:2rem; font-weight:700; line-height:1;
}
.practice-stat-label{
  font-size:0.8125rem; font-weight:500;
  color:var(--phoro-slate-60);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.practice-stat-ok .practice-stat-number{ color:var(--phoro-green); }
.practice-stat-nok .practice-stat-number{ color:var(--phoro-slate); }

/* Fach indicator (Leitner boxes) */
.practice-fach{
  display:inline-flex;
  gap:3px;
  align-items:center;
}
.practice-fach-seg{
  width:8px; height:8px;
  border-radius:2px;
  background:var(--phoro-slate-20);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.practice-fach-filled{
  background:var(--phoro-green);
}
.practice-fach-done{
  color:var(--phoro-green);
  background:transparent;
}
.practice-fach-done .icon{
  width:10px; height:10px;
  display:block;
}

/* Reveal fach + transition feedback */
.practice-reveal-fach{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  margin-top:var(--space-3);
  min-height:24px;
  transition:opacity .2s ease;
}
.practice-feedback-text{
  font-size:0.8125rem;
  font-weight:500;
}
.practice-feedback-up{
  color:var(--phoro-green);
}
.practice-feedback-down{
  color:var(--phoro-slate-60);
}

/* Self-assessment prompt (metacognition) */
.practice-confidence{
  text-align:center;
  margin:var(--space-6) 0;
}
.practice-confidence-label{
  font-size:0.9375rem;
  font-weight:500;
  color:var(--phoro-slate);
  margin:0 0 var(--space-3);
}
.practice-confidence-options{
  display:flex;
  gap:var(--space-3);
  justify-content:center;
}
.practice-conf-btn{
  font-family:var(--font-primary);
  font-size:0.8125rem;
  font-weight:500;
  padding:var(--space-2) var(--space-4);
  border-radius:10px;
  border:1px solid var(--phoro-blue-12);
  background:var(--bg-card);
  color:var(--phoro-slate);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.practice-conf-btn:hover{
  border-color:var(--phoro-blue-35);
  background:var(--phoro-blue-4);
}

/* Definition display after reveal */
.practice-definition{
  font-size:0.8125rem;
  color:var(--phoro-slate-60);
  margin:var(--space-3) auto 0;
  text-align:center;
  line-height:1.5;
  max-width:480px;
}
.practice-definition-label{
  font-weight:600;
  color:var(--phoro-slate);
}

/* Completion summary (process feedback) */
.practice-summary{
  text-align:center;
  margin-bottom:var(--space-8);
  line-height:1.8;
  color:var(--phoro-slate);
}
.practice-summary p{
  margin:0;
}
.practice-summary strong{
  font-weight:700;
  color:var(--phoro-blue);
}
.practice-summary-up{
  font-weight:700;
  color:var(--phoro-green);
}
.practice-summary-down{
  font-weight:700;
  color:var(--phoro-slate);
}

/* High contrast support */
body.contrast .practice-overlay{ background:var(--bg-page); }
body.contrast .practice-topbar{ border-bottom-color:var(--phoro-blue-35); }
body.contrast .practice-canvas{ background:#132639; border-color:var(--phoro-blue-35); box-shadow:none; }
body.contrast .practice-input{ background:#132639; color:#E0E6ED; border-color:var(--phoro-blue-35); box-shadow:none; }
body.contrast .practice-close{ background:#132639; color:#E0E6ED; border-color:var(--phoro-blue-35); }
body.contrast .practice-speak{ background:#132639; color:#E0E6ED; border-color:var(--phoro-blue-35); }
body.contrast .practice-actions .btn-secondary{ background:#132639; color:#E0E6ED; border-color:var(--phoro-blue-35); }
body.contrast .practice-actions .btn-primary{ background:var(--phoro-blue); border-color:var(--phoro-blue); color:#fff; }
body.contrast .practice-actions .btn-success{ background:rgba(107,144,128,0.15); color:#8CC5AD; border-color:#8CC5AD; }
body.contrast .practice-actions .btn-soft{ background:#132639; color:#E0E6ED; border-color:var(--phoro-blue-35); }
body.contrast .practice-actions .btn-secondary:hover,
body.contrast .practice-actions .btn-soft:hover{ background:var(--phoro-blue-8); }
body.contrast .practice-stats-card{ background:#132639; border-color:var(--phoro-blue-35); }
body.contrast .practice-complete h2{ color:#7EB8E0; }
body.contrast .practice-complete-icon{ color:#8CC5AD; }
body.contrast .practice-stat-label{ color:#A0A8C0; }
body.contrast .practice-progress-bar{ background:rgba(26,53,80,0.25); }
body.contrast .practice-progress-fill{ background:#7EB8E0; }
body.contrast .practice-fach-seg{ background:rgba(160,168,192,0.3); }
body.contrast .practice-fach-filled{ background:#8CC5AD; }
body.contrast .practice-fach-done{ color:#8CC5AD; }
body.contrast .practice-feedback-up{ color:#8CC5AD; }
body.contrast .practice-feedback-down{ color:#A0A8C0; }
body.contrast .practice-conf-btn{ background:#132639; color:#E0E6ED; border-color:var(--phoro-blue-35); }
body.contrast .practice-conf-btn:hover{ background:var(--phoro-blue-8); }
body.contrast .practice-definition{ color:#A0A8C0; }
body.contrast .practice-definition-label{ color:#E0E6ED; }
body.contrast .practice-summary{ color:#A0A8C0; }
body.contrast .practice-summary strong{ color:#7EB8E0; }
body.contrast .practice-summary-up{ color:#8CC5AD; }
body.contrast .practice-summary-down{ color:#A0A8C0; }
body.contrast .syl-a{ color:#E07A5F; }
body.contrast .syl-b{ color:#7EB8E0; }

/* Dyslexia mode */
body.dys .practice-canvas{ height:250px; }
body.dys .practice-input{ font-size:2rem; }
body.dys .practice-reveal{ font-size:clamp(1.75rem,6vw,3rem); }
body.dys .practice-stat-number{ font-size:2.5rem; }