@import url('alphabet-extra.css');

:root{
  --bg:#f3f5f7;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --brand:#0b5ed7;
  --brand2:#084298;
  --radius:14px;
  --shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden;max-width:100vw}

body{
  margin:0;
  font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  direction: rtl;
}

input,
textarea,
select,
button{
  font-family:inherit;
  font-size:100%;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea{
  text-align:start;
  unicode-bidi:plaintext;
}

textarea{
  line-height:1.85;
  letter-spacing:normal;
  word-spacing:normal;
  unicode-bidi:plaintext;
  text-align:start;
}

.page textarea{
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.95;
}

a{color:inherit;text-decoration:none}
.container{width:min(1180px, 94%); margin:auto}

/* ===== Topbar ===== */
.topbar{
  background: linear-gradient(90deg, var(--brand2), var(--brand));
  color:#fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.topbar .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding: 6px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  letter-spacing:.2px;
  min-width:0;
}
.brand .logo{
  width:36px;height:36px;border-radius:10px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  display:grid; place-items:center;
  font-weight: 900;
  flex: 0 0 auto;
}
.brand .logo.has-image{
  width:auto;
  height:52px;
  border:none;
  background:transparent;
  overflow:visible;
  border-radius:0;
}
.brand .logo.has-image img{
  width:auto;
  height:52px;
  object-fit:contain;
  display:block;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background:#ffffff;
}
.brand .sub{
  opacity:.9;
  font-weight:600;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0}
.icon-btn{
  width:38px;height:38px;border-radius:12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  display:grid; place-items:center;
}
.icon-btn:hover{background: rgba(255,255,255,.20)}
.lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 4px;
  min-width:0;
}
.lang-switch a{
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color:#fff;
  opacity:.9;
  white-space:nowrap;
}
.lang-switch a:hover{
  background: rgba(255,255,255,.18);
  opacity:1;
}
.lang-switch a.is-active{
  background: rgba(255,255,255,.28);
  opacity:1;
}

html[dir='ltr'] body{direction:ltr;}
html[dir='ltr'] .post{border-right:0;border-left:4px solid transparent;}
html[dir='ltr'] .post:hover{border-left:4px solid var(--brand);border-right:0;}
html[dir='ltr'] .chatbot-widget{right:auto;left:18px;}
html[dir='ltr'] .chatbot-panel{
  position:absolute;
  right:0;
  bottom:72px;
  width:min(380px, calc(100vw - 24px));
  max-height:min(540px, calc(100dvh - 96px));
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 38px rgba(2, 6, 23, .22);
  overflow:hidden;
}

.brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.brand-icon{
  height:36px;
  width:36px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
  border-radius:8px;
  background:transparent;
  padding:0;
}
.brand-text{
  font-weight:900;
  font-size:15px;
  letter-spacing:.2px;
  line-height:1.2;
}

/* Mobile brand in navbar */
.mobile-brand{
  display:none;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--text);
  flex:1;
  justify-content:center;
}
.mobile-brand img{
  width:32px;
  height:32px;
  border-radius:8px;
  flex-shrink:0;
}
.mobile-brand span{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.3px;
  line-height:1.1;
}
.mobile-brand span em{
  font-style:normal;
  color:var(--brand);
}

/* Sprachbausteine table scroll */
.sb-gaps-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sb-gaps-table{ min-width:320px; }

@media(max-width:640px){
  /* word-fill badge fix */
  .word-fill-row{ grid-template-columns:32px minmax(0,1fr) 44px !important; }

  /* ── Mobile Topbar: column → brand top, actions bottom ── */
  .topbar{ position:sticky !important; top:0; z-index:100; }
  .topbar .row{ flex-direction:column !important; align-items:center; padding:6px 0 4px !important; gap:4px !important; }
  .brand{ justify-content:center !important; }
  .brand-text{ display:flex !important; font-size:14px !important; }
  .brand-text .sub{ display:none; }
  .brand-logo{ height:26px !important; }
  .topbar .actions{ display:flex !important; justify-content:center; gap:6px !important; flex-wrap:wrap; }

  /* ── Mobile Navbar: row 1 = ☰ + pills, row 2 = search ── */
  .navbar{ background:#fff; border-bottom:1px solid var(--line); overflow:hidden; }
  .navbar .row{ flex-wrap:wrap !important; padding:4px 0 !important; gap:6px !important; align-items:center; overflow:hidden; max-width:100%; }
  .mobile-brand{ display:none !important; }
  .navbar .search{ display:flex !important; flex:0 0 100% !important; width:100% !important; margin:0 !important; }
  .navbar .search input{ width:100% !important; font-size:13px !important; }
  .navbar .search button{ font-size:13px !important; white-space:nowrap; }

  /* Navlinks: scrollable pills (no order — follows HTML source order) */
  .navlinks{
    display:flex !important;
    position:static !important;
    flex-direction:row !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:2px 0 !important;
    flex:1 !important;
    min-width:0 !important;
    scrollbar-width:none;
  }
  .navlinks::-webkit-scrollbar{ display:none; }
  .navlinks a{
    padding:5px 13px !important;
    font-size:13px !important;
    border-radius:20px !important;
    white-space:nowrap !important;
    border:1.5px solid var(--line) !important;
    background: none !important;
    text-align:center !important;
    color: var(--muted) !important;
    font-weight: 600 !important;
  }
  .navlinks a.is-active{
    background: var(--line) !important;
    color: var(--brand) !important;
    border-color: transparent !important;
  }

  /* Hide Home / Template Builder / About from pills row — only categories show */
  .navlinks .nav-extra{ display:none !important; }
  /* Hide dropdown wrappers entirely on mobile pills row */
  .navlinks .nav-tools-wrap { display:none !important; }
}

/* ===== App-Style Full-Screen Drawer ===== */
.nav-drawer-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:1100;
}
.nav-drawer-overlay.is-open{ display:block; }

.nav-drawer{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:1200;
  display:flex;
  flex-direction:column;
  transform:translateY(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.nav-drawer.is-open{ transform:translateY(0); }

.nav-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  background:#1d4ed8;
  flex-shrink:0;
}
.nav-drawer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:17px;
  font-weight:700;
}
.nav-drawer-close{
  background:rgba(255,255,255,.2);
  border:none;
  color:#fff;
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:17px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}
.nav-drawer-close:hover{ background:rgba(255,255,255,.35); }

.nav-drawer-body{
  display:flex;
  flex-direction:column;
  flex:1;
}
.nav-drawer-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 20px;
  text-decoration:none;
  color:#0f172a;
  border-bottom:1px solid #f1f5f9;
  transition:background .15s;
}
.nav-drawer-item:hover,
.nav-drawer-item.is-active{ background:#f0f6ff; }
.nav-drawer-item.is-active .nav-drawer-label{ color:#1d4ed8; }

/* CV & Motivationsschreiben — highlighted item */
.nav-drawer-item--highlight {
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border-bottom: 1px solid #dbeafe;
}
.nav-drawer-item--highlight .nav-drawer-icon {
  background: linear-gradient(135deg, #1d4ed8, #16a34a);
  color: #fff;
}
.nav-drawer-item--highlight .nav-drawer-label { color: #1d4ed8; font-weight: 700; }
.nav-drawer-item--highlight:hover { background: #dbeafe; }

.nav-drawer-icon{
  width:42px;
  height:42px;
  background:#f1f5f9;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#475569;
}
.nav-drawer-label{
  flex:1;
  font-size:15px;
  font-weight:600;
}
.nav-drawer-chevron{
  color:#94a3b8;
  flex-shrink:0;
}

.nav-drawer-lang-row{
  display:flex;
  gap:8px;
  padding:16px 20px;
  border-top:1px solid #e5e7eb;
  flex-wrap:wrap;
}
.nav-drawer-lang-row a{
  padding:7px 16px;
  border-radius:20px;
  font-size:13px;
  font-weight:700;
  color:#374151;
  border:1px solid #e2e8f0;
  text-decoration:none;
  transition:all .2s;
}
.nav-drawer-lang-row a:hover,
.nav-drawer-lang-row a.is-active{
  background:#1d4ed8;
  color:#fff;
  border-color:#1d4ed8;
}


/* ===== Hamburger ===== */
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  flex-shrink:0;
}
.nav-burger span{
  display:block;
  width:24px;
  height:2px;
  background:var(--brand);
  border-radius:2px;
  transition:all .25s ease;
}
.nav-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===== Navbar ===== */
.navbar{
  background:#fff;
  border-bottom: 1px solid var(--line);
}
.navbar .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
}

.navlinks{
  display:flex;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.navlinks::-webkit-scrollbar{ display:none; }
.navlinks a{
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.navlinks a:hover{
  background: var(--line);
  color: var(--text);
}
.navlinks a.is-active{
  background: var(--line);
  color: var(--brand);
  font-weight: 700;
}

.search{
  display:flex;
  gap: 8px;
  align-items:center;
}
.search input{
  width: 220px;
  max-width: 46vw;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  outline: none;
  font-family: inherit;
  background:#f8fafc;
}
.search button{
  padding: 10px 12px;
  border-radius: 12px;
  border: none;
  background: var(--brand);
  color:#fff;
  cursor: pointer;
  font-weight: 900;
  font-family: inherit;
}
.search button:hover{opacity:.92}

/* ===== Page Layout ===== */
.page{ padding: 14px 0 25px; }
.grid{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  align-items:start;
}
.sidebar-col { order: 0; }
main         { order: 0; }

/* ===== Cards ===== */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pad{padding:16px}

/* ===== Hero ===== */
.hero{
  overflow:hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand2), var(--brand));
  color:#fff;
}
.hero .pad{padding: 18px}
.hero h1{
  margin:0 0 8px;
  font-size: 22px;
  font-weight: 900;
  line-height:1.7;
}
.hero p{
  margin:0;
  opacity:.92;
  line-height:2;
  font-size: 14px;
}

/* ===== Post List ===== */
 .post{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  transition: all .2s ease;
  border-right: 4px solid transparent;
}
.post:last-child{border-bottom:0}
.post-body{
  flex:1;
  min-width:0;
}

.post:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  background:#f8fafc;
  border-right: 4px solid var(--brand);
}


.post h3{
  margin:0 0 6px;
  font-size: 15px;
  line-height:1.8;
}
.post p{
  margin:0;
  color: var(--muted);
  font-size: 13.5px;
  line-height:1.9;
  overflow-wrap:anywhere;
}
.meta{
  margin-top:6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color: #94a3b8;
  font-size: 12px;
}

/* ===== Sidebar ===== */
.sidebar{
  box-shadow: none;
  border: 1px solid var(--line);
  overflow: hidden;
}
.sidebar .title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.sidebar .title b {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  padding: 4px 10px 4px 8px;
  border-radius: 20px;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: 0 2px 8px rgba(239,68,68,.35);
  animation: badgePulse 2.2s ease-in-out infinite;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  opacity: .9;
  flex-shrink: 0;
  animation: dotBlink 1.1s ease-in-out infinite alternate;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(239,68,68,.35); }
  50%       { box-shadow: 0 2px 16px rgba(239,68,68,.6); }
}
@keyframes dotBlink {
  from { opacity: .4; transform: scale(.8); }
  to   { opacity: 1;  transform: scale(1.1); }
}
html.theme-dark .badge,
html[data-theme='dark'] .badge {
  background: linear-gradient(135deg, #dc2626, #ea580c);
  box-shadow: 0 2px 10px rgba(239,68,68,.4);
}

.side-item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
  cursor: pointer;
}
.side-item:last-child{ border-bottom: 0; }
.side-item:hover{ background: var(--line); }
.side-item.is-pinned{ background: #f0f7ff; }
html.theme-dark .side-item.is-pinned,
html[data-theme='dark'] .side-item.is-pinned{ background: rgba(37,99,235,.08); }

.side-item a{
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.side-item a:hover{ color: var(--brand); }

.date{
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  padding-top: 2px;
  white-space: nowrap;
}

/* ===== Simple pages ===== */
.page-title{
  margin:0 0 8px;
  font-size: 18px;
  font-weight: 900;
}
.page-text{
  color: var(--muted);
  line-height: 2;
  font-size: 14px;
}


.contact-box{
  display:grid;
  gap:12px;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.contact-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  font-weight:800;
}

.contact-note{
  margin:0;
  color:var(--muted);
  font-size:13px;
}/* ===== Footer ===== */
.footer{
  background:#fff;
  border-top: 1px solid var(--line);
  padding: 18px 0;
  color: var(--muted);
  font-size: 13px;
}
.footer .row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer a{color: #334155}
.footer a:hover{text-decoration: underline}

/* ===== Responsive (Mobile) ===== */
@media (max-width: 980px){
  .grid{grid-template-columns: 1fr;}
  .grid > main{order:1;}
  .grid > .sidebar, .grid > .sidebar-col {order:2;}
  .search input{width: 200px;}
}
@media (max-width: 700px){
  .grid > .sidebar, .grid > .sidebar-col { display: none; }
}

@media (max-width: 640px){
  .container{width:min(100%, calc(100% - 16px));}
  .topbar{position:static;}

  .topbar .row{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:8px;
    padding:8px 0;
  }
  .brand{
    justify-content:center;
    text-align:center;
  }
  .brand .sub{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .brand .logo.has-image{
    height:48px;
    width:auto;
  }
  .brand .logo.has-image img{
    height:48px;
    width:auto;
    border-radius:0;
  }
  .actions{
    width:100%;
    justify-content:center;
    gap:8px;
  }
  .lang-switch{
    flex:1;
    max-width:320px;
    margin-inline:auto;
    justify-content:space-between;
  }
  .lang-switch a{
    flex:1;
    text-align:center;
    padding:8px 6px;
    font-size:13px;
  }
  .icon-btn{
    width:36px;
    height:36px;
    border-radius:10px;
    flex:0 0 36px;
  }

  .nav-burger{ display:flex; }
  .navbar .row{ flex-wrap:wrap; padding:8px 0; }
  .navlinks{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    flex-direction:column;
    background:#fff;
    border-top:2px solid var(--brand);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    padding:8px 0;
    order:10;
  }
  .navlinks.is-open{ display:flex; }
  .navlinks a{
    padding:13px 20px;
    font-size:15px;
    border-radius:0;
    white-space:normal;
    border-bottom:1px solid var(--line);
    text-align:right;
  }
  .navlinks a:last-child{ border-bottom:none; }
  .navbar .row{ position:relative; flex-wrap:wrap; padding:8px 0; }
  .search{ order:11; width:100%; }

  .search{
    width:100%;
    direction:rtl !important;
    flex-direction:row !important;
  }
  .search input{
    width:100%;
    max-width:100%;
    order:1 !important;
    flex:1 1 auto;
  }
  .search button{
    width:auto;
    min-width:86px;
    order:2 !important;
    flex:0 0 auto;
  }
  .search .clear-btn{
    order:3 !important;
    flex:0 0 auto;
  }

  .admin-actions{
    gap:8px;
  }
  .admin-actions .admin-pin-form{
    order:-1;
  }
  .admin-actions .admin-pin-btn{
    min-width:112px;
    font-weight:800;
  }

.post{flex-direction: column;}
  .thumb{width:100%; height:140px;}
  .contact-grid{grid-template-columns:1fr;}
}

/* ===== Article Page ===== */
.article-container{max-width:850px;margin:auto}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:10px}
.article-title{font-size:26px;font-weight:900;margin:10px 0 12px;line-height:1.7}
.article-meta{font-size:13px;color:var(--muted);margin-bottom:18px}
.article-cover{width:100%;height:260px;background:#e2e8f0;border-radius:var(--radius);margin-bottom:20px}

.article-content{
  line-height:2.05;
  font-size:16px;
  direction:rtl;
  text-align:right;
  unicode-bidi:isolate;
  color:var(--text);
}
.article-content > *{
  max-width:760px;
  margin-inline-start:auto;
  margin-inline-end:0;
}
.article-content h2{
  font-size:26px;
  line-height:1.65;
  margin:30px 0 14px;
  font-weight:900;
}
.article-content h3{
  font-size:20px;
  line-height:1.75;
  margin:24px 0 12px;
  color:var(--text);
  font-weight:800;
}
.article-content hr{border:none;border-top:1px solid var(--line);margin:22px 0}
.article-content blockquote{
  margin:14px 0;
  padding:12px 14px;
  border-inline-start:3px solid var(--brand);
  background:#f8fafc;
  border-radius:10px;
}

/* Better reading flow for mixed Arabic/Latin text */
.article-content p,
.article-content li{
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  word-spacing:normal;
  letter-spacing:normal;
  margin:0 0 12px;
  text-align:right;
  unicode-bidi:isolate;
}

.article-content [dir="auto"]{
  text-align:right;
  unicode-bidi:isolate;
}

.article-content ul,
.article-content ol{
  margin:8px 0 18px;
  padding-inline-start:0;
  padding-inline-end:0;
  list-style-position:inside;
}
.article-content li{
  margin-bottom:8px;
  padding-inline-start:0;
  padding-inline-end:0;
}
.article-content li > p{
  margin:0;
}
.article-content p + ul,
.article-content p + ol{
  margin-top:6px;
}
.article-content .text-large{
  font-size:1.14em;
  font-weight:700;
}
.article-content .text-small{
  font-size:.92em;
  color:var(--muted);
}
.article-content li::marker{
  color:var(--brand);
}
html[dir='ltr'] .article-content{
  direction:ltr;
  text-align:left;
}
html[dir='ltr'] .article-content > *{
  margin-inline-start:0;
  margin-inline-end:auto;
}
html[dir='ltr'] .article-content p,
html[dir='ltr'] .article-content li,
html[dir='ltr'] .article-content [dir="auto"]{
  text-align:left;
}
html[dir='ltr'] .article-content ul,
html[dir='ltr'] .article-content ol{
  padding-inline-start:0;
  padding-inline-end:0;
}
html[dir='ltr'] .article-content li{
  padding-inline-start:0;
  padding-inline-end:0;
}

/* ===== Admin Rich Editor ===== */
.rich-editor-shell{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.rich-editor-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:10px;
  border-bottom:1px solid var(--line);
  background:#f8fafc;
}
.rich-editor-toolbar button{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.rich-editor-toolbar button:hover{
  background:#eaf2ff;
  border-color:#bfdbfe;
}
.rich-editor-surface{
  min-height:280px;
  padding:14px;
  outline:none;
  line-height:2;
  font-size:15px;
  background:#fff;
}
.rich-editor-surface:empty::before{
  content:attr(data-placeholder);
  color:#94a3b8;
}
.rich-editor-input{
  display:none;
}
.rich-editor-note{
  color:#64748b;
  font-size:12px;
  margin-top:8px;
}
/* Share */
.share-box{
  margin-top:25px;
  padding-top:15px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.share-btn{
  padding:8px 12px;
  border-radius:10px;
  background:#f1f5f9;
  font-size:13px;
  border:1px solid var(--line);
}
.share-btn:hover{background:#e2e8f0}
.admin-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.builder-actions .share-btn{
  background:linear-gradient(135deg,#0b5ed7,#1d4ed8);
  color:#ffffff;
  border:1px solid #1d4ed8;
  padding:10px 16px;
  font-size:14px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(29,78,216,.24);
}

.builder-actions .share-btn:hover{
  background:linear-gradient(135deg,#0a53c1,#1b43c4);
}

.builder-actions .share-btn:disabled{
  opacity:1;
  background:#64748b;
  border-color:#64748b;
  color:#fff;
}

html[data-theme='dark'] .builder-actions .share-btn,
body.dark-mode .builder-actions .share-btn{
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:#fff;
  border-color:#3b82f6;
}

@media (max-width: 780px){
  .builder-actions .share-btn{
    width:100%;
    min-height:46px;
    border-radius:12px;
  }
}

/* German blocks */
.ltr{
  direction:ltr;
  text-align:left;
  background:#f8fafc;
  border:1.5px solid #cbd5e1;
  padding:20px 22px;
  border-radius:12px;
  margin:12px 0;
  line-height:1.9;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13.5px;
  white-space:pre-wrap;
  overflow-x:auto;
}

/* ===== Copy Premium (Ripple + Toast) ===== */
.copy-wrap{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:10px;
  margin:14px 0;
}
.copy-wrap .ltr{
  flex:1;
  min-width:0;
}

.copy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:0 0 auto;
  min-width:76px;
  padding:8px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  white-space:nowrap;
  transition: all .25s ease;
  position:relative;
  overflow:hidden;
  user-select:none;
}
.copy-btn .copy-icon{
  width:14px;
  height:14px;
  display:inline-block;
}
.copy-btn .copy-icon svg{
  width:14px;
  height:14px;
  display:block;
}
.copy-btn .copy-label{
  line-height:1;
}
.copy-btn:hover{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.copy-btn:active{
  transform: translateY(0) scale(.98);
}

.copy-btn.copied{
  background:#16a34a;
  color:#fff;
  border-color:#16a34a;
}
.script-toolbar{
  display:flex;
  justify-content:flex-start;
  margin:0 0 12px;
}

/* Ripple */
.copy-btn .ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:ripple .55s ease-out;
  background: rgba(255,255,255,.55);
  pointer-events:none;
}

@keyframes ripple{
  to{
    transform:scale(3.2);
    opacity:0;
  }
}

/* Toast */
.toast{
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#111827;
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition: all .3s ease;
  z-index:9999;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
mark{
  background: #fff3b0;
  padding: 0 4px;
  border-radius: 6px;
}
/* Clear search button */
.clear-btn{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  color:#0f172a;
  transition: all .2s ease;
}
.clear-btn:hover{
  background:#f1f5f9;
  transform: translateY(-1px);
}

/* Result header card smaller */
.search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.search-count{
  font-size:13px;
  color:var(--muted);
}
.thumb{
  width:120px;
  height:90px;
  border-radius:14px;
  background:#e2e8f0;
  border:1px solid var(--line);
  flex:0 0 auto;
  overflow:hidden;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== Theme Toggle ===== */
.icon-btn{
  padding:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.mode-toggle .mode-icon{
  display:grid;
  place-items:center;
  line-height:0;
}
.icon-svg{
  width:18px;
  height:18px;
  display:block;
}

html[data-theme='dark']{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --line:#243247;
  --brand:#2563eb;
  --brand2:#1e3a8a;
  --shadow:0 10px 24px rgba(0,0,0,.35);
}

html[data-theme='dark'] .navbar,
html[data-theme='dark'] .footer{
  background:var(--card);
}

html[data-theme='dark'] .navlinks a,
html[data-theme='dark'] .footer a,
html[data-theme='dark'] .date,
html[data-theme='dark'] .side-item a{
  color:var(--text);
}

html[data-theme='dark'] .navlinks a:hover,
html[data-theme='dark'] .navlinks a.is-active,
html[data-theme='dark'] .clear-btn:hover,
html[data-theme='dark'] .share-btn:hover,
html[data-theme='dark'] .post:hover{
  background: var(--line);
}
html[data-theme='dark'] .navlinks a.is-active{
  color: var(--brand);
}

html[data-theme='dark'] .search input,
html[data-theme='dark'] .clear-btn,
html[data-theme='dark'] .share-btn,
html[data-theme='dark'] .date,
html[data-theme='dark'] .ltr,
html[data-theme='dark'] .thumb{
  background:#111b2d;
  color:var(--text);
  border-color:var(--line);
}

html[data-theme='dark'] .contact-link,
body.dark-mode .contact-link{
  background:#111b2d;
  color:var(--text);
  border-color:var(--line);
}
html[data-theme='dark'] .rich-editor-shell,
html[data-theme='dark'] .rich-editor-toolbar,
html[data-theme='dark'] .rich-editor-surface,
html[data-theme='dark'] .rich-editor-toolbar button,
body.dark-mode .rich-editor-shell,
body.dark-mode .rich-editor-toolbar,
body.dark-mode .rich-editor-surface,
body.dark-mode .rich-editor-toolbar button{
  background:#111b2d;
  color:var(--text);
  border-color:var(--line);
}
html[data-theme='dark'] .rich-editor-toolbar button:hover,
body.dark-mode .rich-editor-toolbar button:hover{
  background:#1a2436;
}
html[data-theme='dark'] .side-item.is-pinned,
body.dark-mode .side-item.is-pinned{
  background:#13233b;
}

html[data-theme='dark'] .meta{
  color:#8fa3bf;
}

/* ===== Strong Dark Overrides ===== */
html.theme-dark body,
html[data-theme='dark'] body,
body.dark-mode{
  background:#0b1220;
  color:#e2e8f0;
  --text:#e2e8f0;
  --muted:#94a3b8;
}

html.theme-dark .card,
html[data-theme='dark'] .card,
body.dark-mode .card{
  background:#0f172a;
  border-color:#243247;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

html.theme-dark .navbar,
html[data-theme='dark'] .navbar,
html.theme-dark .footer,
html[data-theme='dark'] .footer,
body.dark-mode .navbar,
body.dark-mode .footer{
  background:#0f172a;
  border-color:#243247;
}

html.theme-dark .page-title,
html.theme-dark .article-title,
html.theme-dark .post h3,
html.theme-dark .navlinks a,
html.theme-dark .side-item a,
html.theme-dark .footer a,
html.theme-dark .date,
html[data-theme='dark'] .page-title,
html[data-theme='dark'] .article-title,
html[data-theme='dark'] .post h3,
html[data-theme='dark'] .navlinks a,
html[data-theme='dark'] .side-item a,
html[data-theme='dark'] .footer a,
html[data-theme='dark'] .date,
body.dark-mode .page-title,
body.dark-mode .article-title,
body.dark-mode .post h3,
body.dark-mode .navlinks a,
body.dark-mode .side-item a,
body.dark-mode .footer a,
body.dark-mode .date{
  color:#e2e8f0;
}

html.theme-dark .page-text,
html.theme-dark .post p,
html.theme-dark .article-meta,
html.theme-dark .breadcrumb,
html[data-theme='dark'] .page-text,
html[data-theme='dark'] .post p,
html[data-theme='dark'] .article-meta,
html[data-theme='dark'] .breadcrumb,
body.dark-mode .page-text,
body.dark-mode .post p,
body.dark-mode .article-meta,
body.dark-mode .breadcrumb{
  color:#94a3b8;
}

/* ===== Chatbot Widget ===== */
.chatbot-widget{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:10020;
}

.chatbot-open{
  width:56px;
  height:56px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg, var(--brand2), var(--brand));
  color:#fff;
  box-shadow:0 14px 26px rgba(2, 6, 23, .28);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.chatbot-open svg{
  width:24px;
  height:24px;
}

.chatbot-panel{
  position:absolute;
  right:0;
  bottom:72px;
  width:min(380px, calc(100vw - 24px));
  max-height:min(540px, calc(100dvh - 96px));
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 38px rgba(2, 6, 23, .22);
  overflow:hidden;
}

.chatbot-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(37,99,235,.14), rgba(11,94,215,.10));
}
.chatbot-head strong{
  flex:1;
  min-width:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:18px;
}
.chatbot-close{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  width:30px;
  height:30px;
  border-radius:10px;
  cursor:pointer;
}

.chatbot-messages{
  flex:1;
  min-height:180px;
  overflow:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--card);
}

.chatbot-msg{
  display:flex;
}
.chatbot-msg-user{
  justify-content:flex-end;
}
.chatbot-msg-assistant{
  justify-content:flex-start;
}

.chatbot-bubble{
  max-width:84%;
  padding:9px 11px;
  border-radius:12px;
  font-size:13px;
  line-height:1.7;
  white-space:pre-wrap;
}
.chatbot-msg-user .chatbot-bubble{
  background:var(--brand);
  color:#fff;
}
.chatbot-msg-assistant .chatbot-bubble{
  background:#eef2ff;
  color:#1f2937;
  border:1px solid #dbeafe;
}

.chatbot-status{
  min-height:20px;
  padding:0 12px 8px;
  color:var(--muted);
  font-size:12px;
}

.chatbot-form{
  padding:10px;
  border-top:1px solid var(--line);
  display:flex;
  gap:8px;
  background:var(--card);
}
.chatbot-form input{
  flex:1;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  outline:none;
  font-family:inherit;
  background:#f8fafc;
  color:var(--text);
}
.chatbot-form button{
  border:none;
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
}
.chatbot-form.is-busy button{
  opacity:.7;
  cursor:wait;
}

html[data-theme='dark'] .chatbot-msg-assistant .chatbot-bubble,
body.dark-mode .chatbot-msg-assistant .chatbot-bubble{
  background:#111b2d;
  border-color:#243247;
  color:#dbe7ff;
}

html[data-theme='dark'] .chatbot-form input,
body.dark-mode .chatbot-form input{
  background:#111b2d;
  border-color:#243247;
  color:#e2e8f0;
}

@media (max-width: 640px){
  .chatbot-widget{
    right:10px;
    bottom:12px;
  }
  .chatbot-widget.is-open .chatbot-panel{
    position:fixed;
    left:8px;
    right:8px;
    bottom:calc(env(safe-area-inset-bottom) + 8px);
    width:auto;
    max-height:calc(100dvh - env(safe-area-inset-top) - 86px);
    border-radius:16px;
  }
  .chatbot-widget.is-open .chatbot-messages{
    min-height:140px;
  }
  .chatbot-form{
    padding:10px;
    gap:8px;
  }
  .chatbot-form button{
    min-width:96px;
  }
}








.chatbot-panel[hidden]{
  display:none !important;
}

.chatbot-widget.is-open{
  z-index:11050;
}

@media (max-width: 640px){
  .chatbot-widget.is-open .chatbot-panel{
    top:calc(env(safe-area-inset-top) + 8px);
    bottom:calc(env(safe-area-inset-bottom) + 8px);
    max-height:none;
  }
}
/* Quick reply buttons */
.chatbot-quick-replies{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:4px 12px 10px;
}
.chatbot-qr-btn{
  border:1.5px solid var(--brand);
  background:transparent;
  color:var(--brand);
  border-radius:20px;
  padding:5px 13px;
  font-size:0.82rem;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s,color .15s;
  white-space:nowrap;
  direction:rtl;
  line-height:1.4;
}
.chatbot-qr-btn:hover,.chatbot-qr-btn:focus{
  background:var(--brand);
  color:#fff;
  outline:none;
}
html[data-theme='dark'] .chatbot-qr-btn,
body.dark-mode .chatbot-qr-btn{border-color:#6b9cf7;color:#6b9cf7;}
html[data-theme='dark'] .chatbot-qr-btn:hover,
body.dark-mode .chatbot-qr-btn:hover{background:#6b9cf7;color:#0d1117;}

/* ===== Template Builder ===== */
.builder-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.builder-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.builder-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.builder-form label > span{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}
.builder-form input,
.builder-form textarea,
.builder-form select{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  background:#f8fafc;
  color:var(--text);
}
.builder-form textarea{
  resize:vertical;
}
.builder-style-field{
  position:relative;
  gap:10px;
}
.cv-design-native,
.email-design-native{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.cv-style-picker{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.cv-style-card{
  border:1px solid #d4dae5;
  background:#f8fafc;
  color:#0f172a;
  border-radius:12px;
  min-height:62px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  font:inherit;
  font-size:13px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.cv-style-card:hover{
  border-color:#2563eb;
  background:#eff6ff;
  transform:translateY(-1px);
}
.cv-style-card.is-active{
  border-color:#1d4ed8;
  background:#dbeafe;
  box-shadow:0 0 0 2px rgba(29, 78, 216, .15);
}
.cv-style-card:focus-visible{
  outline:2px solid #1d4ed8;
  outline-offset:2px;
}
.cv-style-swatch{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid #cbd5e1;
  flex:0 0 auto;
}
.swatch-modern{background:linear-gradient(135deg,#0b5ed7,#1d4ed8,#0f3aa3);}
.swatch-classic{background:linear-gradient(135deg,#f7f1e7,#f2e8d7,#d6c8b5);}
.swatch-minimal{background:linear-gradient(135deg,#ffffff,#e5e7eb,#0f172a);}
.swatch-executive{background:linear-gradient(135deg,#162132,#27374f,#f4d79a);}
.letter-style-picker{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.letter-style-card{
  border:1px solid #d4dae5;
  background:#f8fafc;
  color:#0f172a;
  border-radius:12px;
  min-height:58px;
  padding:9px;
  display:flex;
  align-items:center;
  gap:8px;
  font:inherit;
  font-size:12px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.letter-style-card:hover{
  border-color:#2563eb;
  background:#eff6ff;
  transform:translateY(-1px);
}
.letter-style-card.is-active{
  border-color:#1d4ed8;
  background:#dbeafe;
  box-shadow:0 0 0 2px rgba(29, 78, 216, .15);
}
.letter-style-card:focus-visible{
  outline:2px solid #1d4ed8;
  outline-offset:2px;
}
.letter-style-swatch{
  width:22px;
  height:22px;
  border-radius:7px;
  border:1px solid #cbd5e1;
  flex:0 0 auto;
}
.letter-swatch-classic{background:linear-gradient(135deg,#ffffff,#e5e7eb,#cbd5e1);}
.letter-swatch-modern{background:linear-gradient(135deg,#0b5ed7,#3b82f6,#dbeafe);}
.letter-swatch-executive{background:linear-gradient(135deg,#162132,#27374f,#f4d79a);}
.builder-actions{
  display:flex;
  justify-content:flex-start;
}
.builder-output{
  margin:0;
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:12px;
  padding:12px;
  line-height:1.9;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.builder-error{
  margin:0 0 12px;
  color:#dc2626;
  font-weight:700;
}

html[data-theme='dark'] .builder-form input,
html[data-theme='dark'] .builder-form textarea,
html[data-theme='dark'] .builder-form select,
body.dark-mode .builder-form input,
body.dark-mode .builder-form textarea,
body.dark-mode .builder-form select{
  background:#0b1628;
  color:#e2e8f0;
  border-color:#334155;
}

html[data-theme='dark'] .builder-form input::placeholder,
html[data-theme='dark'] .builder-form textarea::placeholder,
body.dark-mode .builder-form input::placeholder,
body.dark-mode .builder-form textarea::placeholder{
  color:#8fa3bf;
}

html[data-theme='dark'] .builder-form label > span,
body.dark-mode .builder-form label > span{
  color:#cbd5e1;
}

html[data-theme='dark'] .cv-style-card,
html[data-theme='dark'] .letter-style-card,
body.dark-mode .cv-style-card,
body.dark-mode .letter-style-card{
  background:#0f1b31;
  border-color:#334155;
  color:#e2e8f0;
}

html[data-theme='dark'] .cv-style-card:hover,
html[data-theme='dark'] .letter-style-card:hover,
body.dark-mode .cv-style-card:hover,
body.dark-mode .letter-style-card:hover{
  background:#152746;
}

html[data-theme='dark'] .cv-style-card.is-active,
html[data-theme='dark'] .letter-style-card.is-active,
body.dark-mode .cv-style-card.is-active,
body.dark-mode .letter-style-card.is-active{
  background:#1d3a6a;
  border-color:#3b82f6;
}

@media (max-width: 780px){
  .builder-grid{grid-template-columns: 1fr;}
  .cv-style-picker{grid-template-columns:1fr;}
  .letter-style-picker{grid-template-columns:1fr;}
}

/* ===== CV Designer ===== */
.cv-sheet{
  max-width:980px;
  margin:0 auto;
}

.cv-card{
  border:1px solid #dbe1ea;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 30px rgba(15, 23, 42, .07);
}

.cv-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 26px;
  border-bottom:1px solid #e5e7eb;
}

.cv-head h2{
  margin:0;
  font-size:42px;
  line-height:1.1;
  letter-spacing:.2px;
}

.cv-head p{
  margin:8px 0 0;
  color:#64748b;
  font-size:22px;
  font-weight:700;
}

.cv-contact-inline{
  margin-top:12px;
  color:#64748b;
  font-size:15px;
}

.cv-photo-wrap{flex:0 0 auto;}

.cv-photo{
  width:130px;
  height:130px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid #cbd5e1;
  display:grid;
  place-items:center;
  font-size:38px;
  font-weight:900;
  background:#eef2ff;
}

.cv-photo-placeholder{
  background:#e2e8f0;
  color:#334155;
}

.cv-layout{
  display:grid;
  grid-template-columns:minmax(230px, 280px) 1fr;
  align-items:stretch;
}

.cv-sidebar{
  padding:18px;
  background:#f8fafc;
  border-inline-end:1px solid #e5e7eb;
}

[dir="rtl"] .cv-sidebar{
  border-inline-end:none;
  border-inline-start:1px solid #e5e7eb;
}

.cv-main{
  padding:18px;
  display:grid;
  gap:14px;
}

.cv-panel{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  padding:12px 14px;
}

.cv-panel h3{
  margin:0 0 8px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.2px;
}

.cv-panel p{
  margin:0 0 8px;
  line-height:1.72;
  color:#0f172a;
}

.cv-panel p:last-child{margin-bottom:0;}

.cv-list{
  margin:0;
  padding-inline-start:18px;
  line-height:1.7;
}

.cv-list li{margin:0 0 4px;}
.cv-list li:last-child{margin-bottom:0;}

.cv-list-plain{
  list-style:none;
  padding-inline-start:0;
}

/* Design Variants */
.cv-design-modern .cv-head{
  background:linear-gradient(135deg, #0b5ed7, #1d4ed8 58%, #0f3aa3);
  color:#fff;
}

.cv-design-modern .cv-head p,
.cv-design-modern .cv-contact-inline{color:#dbeafe;}

.cv-design-modern .cv-sidebar{
  background:#eff6ff;
  border-inline-end-color:#c7d2fe;
}

[dir="rtl"] .cv-design-modern .cv-sidebar{
  border-inline-start-color:#c7d2fe;
}

.cv-design-modern .cv-panel h3{color:#1d4ed8;}

.cv-design-classic .cv-card{
  border-color:#d6c8b5;
  box-shadow:0 8px 20px rgba(61, 42, 24, .08);
}

.cv-design-classic .cv-head{
  background:linear-gradient(180deg, #f7f1e7, #f2e8d7);
  border-bottom:1px solid #ddceb6;
}

.cv-design-classic .cv-head h2,
.cv-design-classic .cv-panel h3{color:#5b3b1f;}

.cv-design-classic .cv-sidebar{
  background:#faf6ef;
  border-inline-end-color:#e8dcc9;
}

[dir="rtl"] .cv-design-classic .cv-sidebar{
  border-inline-start-color:#e8dcc9;
}

.cv-design-classic .cv-panel{
  border-color:#e8dcc9;
  background:#fffdf9;
}

.cv-design-minimal .cv-card{
  border-color:#d1d5db;
  box-shadow:none;
}

.cv-design-minimal .cv-head{
  background:#ffffff;
  border-bottom:2px solid #0f172a;
}

.cv-design-minimal .cv-head p,
.cv-design-minimal .cv-contact-inline{color:#475569;}

.cv-design-minimal .cv-sidebar{
  background:#ffffff;
}

.cv-design-minimal .cv-panel{
  border-radius:8px;
  border-color:#d1d5db;
}

.cv-design-minimal .cv-panel h3{color:#0f172a;}

.cv-design-executive .cv-card{
  border-color:#2f3e52;
  box-shadow:0 14px 28px rgba(15, 23, 42, .20);
}

.cv-design-executive .cv-head{
  background:linear-gradient(135deg, #162132, #27374f 62%, #364a67);
  color:#f8fafc;
  border-bottom:1px solid #425979;
}

.cv-design-executive .cv-head p,
.cv-design-executive .cv-contact-inline{color:#cdd8ea;}

.cv-design-executive .cv-sidebar{
  background:#1d2a3c;
  border-inline-end-color:#435777;
}

[dir="rtl"] .cv-design-executive .cv-sidebar{
  border-inline-start-color:#435777;
}

.cv-design-executive .cv-panel{
  border-color:#3e4f69;
  background:#f8fafc;
}

.cv-design-executive .cv-sidebar .cv-panel{
  background:#24344b;
  border-color:#3f5370;
}

.cv-design-executive .cv-sidebar .cv-panel,
.cv-design-executive .cv-sidebar .cv-panel p,
.cv-design-executive .cv-sidebar .cv-panel li,
.cv-design-executive .cv-sidebar .cv-panel h3{color:#e2e8f0;}

.cv-design-executive .cv-sidebar .cv-panel h3{color:#f4d79a;}

.cv-design-executive .cv-main .cv-panel h3{color:#22314a;}
@media (max-width: 960px){
  .cv-head h2{font-size:34px;}
  .cv-head p{font-size:19px;}
  .cv-layout{grid-template-columns:1fr;}
  .cv-sidebar{
    border-inline-end:none;
    border-bottom:1px solid #e5e7eb;
  }
  [dir="rtl"] .cv-sidebar{
    border-inline-start:none;
    border-bottom:1px solid #e5e7eb;
  }
}

@media (max-width: 640px){
  .cv-head{
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
  }
  .cv-main,
  .cv-sidebar{padding:12px;}
  .cv-head h2{font-size:29px;}
  .cv-head p{font-size:17px;}
  .cv-photo{width:108px;height:108px;}
}

@page{
  size:A4;
  margin:10mm;
}

@media print{
  html, body{
    background:#fff !important;
  }
  body *{visibility:hidden !important;}
  #cvPrintArea, #cvPrintArea *{visibility:visible !important;}

  #cvPrintArea{
    position:static !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    width:auto !important;
  }

  #cvPrintArea.card{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  #cvPrintArea .pad{padding:0 !important;}

  #cvPrintArea .cv-sheet{
    width:190mm;
    max-width:190mm;
    margin:0 auto !important;
  }

  #cvPrintArea .cv-card{
    min-height:270mm;
    border-radius:0;
    box-shadow:none;
    border:1px solid #d1d5db;
    overflow:visible;
  }

  .no-print{display:none !important;}
}

/* ===== Anschreiben ===== */
.letter-sheet{
  max-width:820px;
  margin:0 auto;
  border:1px solid #dbe1ea;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  padding:26px;
}

.letter-output{
  margin:0;
  white-space:pre-wrap;
  line-height:1.8;
  font-size:15px;
  color:#0f172a;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

.letter-sheet-pro{
  padding:30px 34px;
}

.letter-top{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

.letter-block{
  font-size:14px;
  line-height:1.75;
  color:#1e293b;
}

.letter-sender{max-width:56%;}

.letter-recipient{
  max-width:40%;
  text-align:right;
}

[dir="rtl"] .letter-recipient{
  text-align:left;
}

.letter-date{
  margin:0 0 10px;
  font-size:14px;
  color:#64748b;
}

.letter-subject{
  margin:0 0 16px;
  font-size:17px;
  font-weight:800;
  color:#0f172a;
}

.letter-paragraph{
  margin:0 0 12px;
  line-height:1.92;
  font-size:15px;
  color:#111827;
}

.letter-sign{
  margin-top:18px;
  font-weight:700;
}

.letter-design-classic{
  border-color:#dbe1ea;
}

.letter-design-modern{
  border-color:#bfdbfe;
  box-shadow:0 12px 26px rgba(29,78,216,.12);
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.letter-design-modern .letter-subject{color:#1d4ed8;}
.letter-design-modern .letter-date{color:#2563eb;}
.letter-design-modern .letter-sign{color:#1e40af;}

.letter-design-executive{
  border-color:#334155;
  box-shadow:0 14px 28px rgba(15,23,42,.16);
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);
}
.letter-design-executive .letter-subject{color:#1f2937;}
.letter-design-executive .letter-date{color:#475569;}
.letter-design-executive .letter-sign{color:#111827;}

@media (max-width: 760px){
  .letter-sheet-pro{padding:18px;}
  .letter-top{flex-direction:column;gap:10px;}
  .letter-sender,
  .letter-recipient{max-width:100%;text-align:inherit;}
}

@media print{
  #letterPrintArea, #letterPrintArea *{visibility:visible !important;}
  #letterPrintArea{
    position:static !important;
    margin:0 !important;
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  #letterPrintArea .pad{padding:0 !important;}
  #letterPrintArea .letter-sheet{
    width:190mm;
    max-width:190mm;
    margin:0 auto !important;
    border:none;
    border-radius:0;
    box-shadow:none;
    padding:0;
  }
}

html.theme-dark .navlinks a,
html[data-theme='dark'] .navlinks a,
body.dark-mode .navlinks a{
  background: none;
  border: none;
  color: var(--muted);
}

html.theme-dark .navlinks a:hover,
html[data-theme='dark'] .navlinks a:hover,
body.dark-mode .navlinks a:hover{
  background: var(--line);
  color: var(--text);
}

html.theme-dark .navlinks a.is-active,
html[data-theme='dark'] .navlinks a.is-active,
body.dark-mode .navlinks a.is-active{
  background: var(--line);
  color: var(--brand);
}







/* ===== Contact Pro ===== */
.category-container{
  max-width:1180px;
}

.category-hero{
  background:linear-gradient(135deg, #f8fbff 0%, #eef5ff 55%, #ffffff 100%);
  border:1px solid #d8e6ff;
}

.category-hero-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.category-lead{
  margin:8px 0 0;
  max-width:760px;
}

.category-stat{
  min-width:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:16px 20px;
  border-radius:18px;
  background:#0d5bd3;
  color:#fff;
  box-shadow:0 14px 32px rgba(29,78,216,.18);
}

.category-stat-number{
  font-size:34px;
  line-height:1;
  font-weight:900;
}

.category-stat-label{
  font-size:13px;
  opacity:.92;
}

.category-section-head{
  border-bottom:1px solid var(--line);
}

.category-section-title{
  margin:0;
  font-size:24px;
}

.category-empty-card .pad{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.category-empty-block{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.category-mini-title{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:var(--text);
}

.category-mini-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.category-mini-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.category-mini-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(15,23,42,.12);
  border-color:#8eb5ff;
}

.category-mini-card strong{
  font-size:15px;
  line-height:1.8;
  color:var(--text);
}

.category-mini-card span{
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
}

.category-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.category-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.category-tag:hover{
  transform:translateY(-2px);
  border-color:#8eb5ff;
  box-shadow:0 10px 24px rgba(15,23,42,.1);
}

.category-tag small{
  min-width:24px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0 6px;
  border-radius:999px;
  background:#eaf1ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
}

.language-roadmap-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.level-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.level-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #cfe0ff;
  background:#eef4ff;
  color:#0f3f9f;
  font-weight:900;
}

.level-chip:hover{
  background:#dceafe;
  border-color:#8eb5ff;
}

.language-levels-stack{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.level-accordion{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:0 12px 24px rgba(15,23,42,.06);
  overflow:hidden;
}

.level-accordion[open]{
  border-color:#cfe0ff;
}

.level-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px;
  transition:background .18s ease;
}
.level-summary:hover{
  background:var(--lvl-bg,#f0f7ff);
}

.level-summary::-webkit-details-marker,
.chapter-summary::-webkit-details-marker{
  display:none;
}

.level-summary-main{
  min-width:0;
  flex:1 1 auto;
}

.level-summary-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex:0 0 auto;
}

.level-summary-posts{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

/* Level toggle — circle icon (empty span) */
.level-summary-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid var(--lvl,#1d4ed8);
  color:var(--lvl,#1d4ed8);
  font-size:20px;
  font-weight:900;
  line-height:1;
  flex-shrink:0;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.level-summary-toggle::before{content:"+"}
.level-accordion[open] .level-summary-toggle::before{content:"−"}
.level-accordion[open] .level-summary-toggle{
  background:var(--lvl,#1d4ed8);
  border-color:var(--lvl,#1d4ed8);
  color:#fff;
}

/* Chapter toggle — text link style */
.chapter-summary-toggle{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  color:var(--lvl,#1d4ed8);
  font-weight:900;
  white-space:nowrap;
}
.chapter-summary-toggle::after{content:"▾";font-size:14px;line-height:1}
.chapter-accordion[open] .chapter-summary-toggle::after{content:"▴"}

.level-accordion-body{
  padding:0 18px 18px;
  border-top:1px solid #dbe7ff;
}

.level-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
  flex-wrap:wrap;
}

.level-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  height:36px;
  padding:0 14px;
  border-radius:12px;
  background:#0d5bd3;
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
}

.level-count{
  display:inline-flex;
  align-items:center;
  padding:3px 12px;
  border-radius:999px;
  border:1px solid var(--lvl-bd,#cfe0ff);
  background:var(--lvl-bg,#eef4ff);
  color:var(--lvl,#0d5bd3);
  font-size:12px;
  font-weight:900;
}

.level-title{
  margin:0 0 4px;
  font-size:20px;
  font-weight:900;
  color:var(--text);
}

.level-goal{
  margin:0;
  color:var(--muted);
  line-height:1.75;
  font-size:13px;
}

.chapter-accordion-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.chapter-accordion{
  border:1px solid #dbe7ff;
  border-radius:16px;
  background:#ffffff;
  overflow:hidden;
}

.chapter-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  background:#f8fbff;
}

.chapter-summary-main{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.chapter-summary-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex-shrink:0;
}

.chapter-summary-main strong{
  font-size:17px;
  line-height:1.6;
  color:var(--text);
}

.chapter-lesson-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:#edf4ff;
  border:1px solid #cfe0ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
}

.chapter-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.chapter-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(240px, .85fr);
  gap:18px;
  align-items:start;
}

.chapter-main-list{
  min-width:0;
}

.chapter-lessons-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.lesson-row{
  display:grid;
  grid-template-columns:84px minmax(0,1fr) 110px;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.lesson-row:hover{
  border-color:#9cc0ff;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  transform:translateY(-1px);
}

.lesson-row-disabled{
  opacity:.78;
  cursor:default;
}

.lesson-row-disabled:hover{
  border-color:var(--line);
  box-shadow:none;
  transform:none;
}

.lesson-row-index{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.lesson-row-title{
  min-width:0;
  font-size:16px;
  line-height:1.6;
}

.lesson-row-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  background:#0d5bd3;
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.lesson-row-disabled .lesson-row-cta{
  background:#eef4ff;
  color:#0d5bd3;
}

.chapter-aside{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.chapter-panel{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#ffffff;
}

.level-block{
  margin-top:16px;
}

.level-subtitle{
  margin:0 0 10px;
  font-size:15px;
  font-weight:900;
  color:var(--text);
}

.chapter-kicker{
  color:#ea580c;
  font-size:15px;
  font-weight:900;
  letter-spacing:0.02em;
}

.chapter-link{
  color:inherit;
}

.chapter-link:hover{
  color:#1d4ed8;
}

.chapter-topics,
.chapter-exercises{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.chapter-topic,
.exercise-item{
  font-size:14px;
  line-height:1.75;
  color:var(--text);
}

.chapter-topic{
  color:#4f46e5;
}

.exercise-item{
  color:var(--text);
}

.chapter-open-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  padding:10px 14px;
  border-radius:12px;
  background:#0d5bd3;
  color:#fff;
  font-weight:800;
}

.chapter-open-btn:hover{
  filter:brightness(1.05);
}

.level-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.level-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  font-weight:700;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.level-link:hover{
  transform:translateY(-2px);
  border-color:#8eb5ff;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}

.level-link::after{
  content:"\2039";
  font-size:18px;
  color:var(--muted);
}

.level-note{
  margin:0;
  padding:12px 14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  color:var(--muted);
  line-height:1.9;
  font-size:13px;
}

.lesson-container{
  max-width:980px;
}

.lesson-hero{
  background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 50%,#ffffff 100%);
  border:1px solid #d8e6ff;
  border-left:4px solid #2563eb;
}

.lesson-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.lesson-text-ltr{
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
  display:block;
}

.lesson-kicker{
  display:inline-block;
  margin-bottom:8px;
  color:#1d4ed8;
  font-size:13px;
  font-weight:900;
}

.lesson-title{
  margin:0;
}

.lesson-subtitle{
  margin:8px 0 0;
  max-width:720px;
}

.lesson-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.lesson-back-link,
.lesson-sound-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid #cfe0ff;
  background:#ffffff;
  color:#0f3f9f;
  font-weight:800;
}

.lesson-sound-btn{
  cursor:pointer;
  font:inherit;
}

.lesson-back-link:hover,
.lesson-sound-btn:hover{
  background:#eef4ff;
}

.lesson-instructions{
  margin-bottom:18px;
}

.lesson-instructions .page-text{
  margin:0 0 8px;
}

.lesson-exercise{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.wordbank-panel{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg,#f0f6ff 0%,#e8f0fe 100%);
  border:1px solid #c7d9ff;
}

.wordbank-title{
  margin-bottom:12px;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#1d4ed8;
}

.wordbank-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.word-chip{
  min-height:38px;
  padding:0 14px;
  border-radius:20px;
  border:1.5px solid #c7d9ff;
  background:#ffffff;
  color:#1d4ed8;
  font:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s ease;
  box-shadow:0 1px 3px rgba(37,99,235,.08);
}

.word-chip:hover{
  transform:translateY(-1px);
  border-color:#2563eb;
  background:#eef4ff;
  box-shadow:0 4px 12px rgba(37,99,235,.15);
}

.choice-bank{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg,#f0f6ff 0%,#e8f0fe 100%);
  border:1px solid #c7d9ff;
}

.choice-bank-title{
  margin-bottom:12px;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#1d4ed8;
}

.choice-bank-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.choice-pill{
  min-height:40px;
  padding:8px 14px;
  border-radius:12px;
  border:1px solid #e8d3a5;
  background:#ffffff;
  color:#111827;
  font-weight:800;
  display:flex;
  align-items:center;
}

.choice-example{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid #f1d69e;
  background:#fffdf7;
}

.choice-example-title{
  margin-bottom:10px;
  font-size:13px;
  font-weight:900;
  color:#9a3412;
}

.choice-example-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:16px;
  line-height:1.9;
}

.choice-example-answer{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:10px;
  background:#eef4ff;
  border:1px solid #cfe0ff;
  font-weight:800;
}

.ending-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ending-row{
  direction:ltr;
  grid-template-columns:48px minmax(0,1fr) 54px !important;
  gap:14px;
  align-items:start !important;
  padding:18px 18px 18px 16px;
  border-color:#dbe7fb;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.ending-row:hover{
  transform:translateY(-2px);
}

.ending-row .ending-content{
  min-width:0;
  width:100%;
  justify-self:stretch;
  grid-column:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding-top:4px;
}

.ending-row .exercise-audio-btn{
  grid-column:3;
  align-self:center;
  justify-self:end;
  width:44px;
  height:44px;
}

.ending-row .ending-line{
  font-size:18px;
  line-height:1.9;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
  font-weight:500;
  direction:ltr;
  text-align:left;
  width:100%;
  margin:0;
  max-width:100%;
  overflow:hidden;
}

.ending-row .ending-line-secondary{
  padding-inline-start:0;
}

.ending-row .ending-line > span,
.ending-row .ending-line > input{
  flex:0 0 auto;
}

.ending-row .ending-input{
  width:104px;
  min-width:88px;
  min-height:44px;
  text-align:center;
  padding:0 8px;
}

.ending-row .ending-sentence{
  display:block;
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
  font-size:17px;
  line-height:2;
  font-weight:500;
  color:var(--text);
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
}

.ending-row .ending-sentence-secondary{
  margin-top:2px;
}

.ending-row .ending-sentence .ending-input{
  display:inline-block;
  vertical-align:middle;
  margin:0 6px;
}

.ending-row .exercise-index{
  margin-top:10px;
  font-size:20px;
}

.select-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.exercise-row.select-row{
  direction:ltr;
  grid-template-columns:48px minmax(0,1fr) 54px;
  align-items:start;
}

.select-row .select-content{
  min-width:0;
  padding-top:4px;
}

.exercise-line.select-line{
  direction:ltr;
  display:block;
  font-size:20px;
  line-height:2;
  width:100%;
  overflow-wrap:break-word;
}
.exercise-line.select-line > span{
  display:inline;
  white-space:normal;
}
.exercise-line.select-line .exercise-select{
  display:inline-block;
  vertical-align:middle;
  position:relative;
  top:-2px;
}

.select-row .exercise-select{
  width:200px;
  min-width:150px;
  min-height:42px;
  border:1px solid #94a3b8;
  border-radius:12px;
  background:#fff;
  padding:0 12px;
  font:inherit;
  font-size:18px;
  text-align:left;
  cursor:pointer;
}

.select-row .exercise-audio-btn{
  justify-self:end;
  align-self:start;
  margin-top:8px;
}

.dual-select-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dual-select-row{
  direction:ltr;
  grid-template-columns:48px minmax(0,1fr) 54px !important;
  gap:14px;
  align-items:start !important;
}

.dual-select-content{
  grid-column:2;
  min-width:0;
  width:100%;
  justify-self:stretch;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dual-select-line{
  direction:ltr;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
  font-size:20px;
  line-height:1.8;
  width:100%;
}

.dual-select-input{
  display:inline-block;
  width:230px;
  min-width:170px;
  flex:0 0 230px;
  min-height:46px;
  border:1px solid #94a3b8;
  border-radius:12px;
  background:#fff;
  padding:0 12px;
  text-align:left;
}

.dual-select-row .exercise-audio-btn{
  grid-column:3;
  justify-self:end;
  align-self:center;
}

.dialogue-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.word-fill-grid,
.builder-grid,
.numbers-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.exercise-row.cloze-row{
  display:block;
  border-radius:16px;
  padding:0;
}
.cloze-body{
  padding:20px 24px;
  font-size:16px;
  line-height:2.4;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:16px;
  width:100%;
}
.cloze-input{
  display:inline-block;
  vertical-align:baseline;
  border:none;
  border-bottom:2px solid #94a3b8;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:0 4px 1px;
  min-height:28px;
  min-width:4ch;
  max-width:100%;
  font:inherit;
  font-size:15px;
  font-weight:700;
  text-align:left;
  transition:border-bottom-color .2s ease, color .2s ease;
}
.cloze-input:focus{
  outline:none;
  border-bottom-color:#2563eb;
}
.cloze-input.input-correct{
  border-bottom-color:#16a34a;
  color:#15803d;
  font-weight:800;
}
.cloze-input.input-wrong{
  border-bottom-color:#dc2626;
  color:#b91c1c;
}
html[data-theme='dark'] .cloze-body,
body.dark-mode .cloze-body{
  background:#1a2740;
  border-color:#31548b;
  color:#e2e8f0;
}
html[data-theme='dark'] .cloze-input,
body.dark-mode .cloze-input{
  border-bottom-color:#475569;
  color:#f1f5f9;
}
html[data-theme='dark'] .cloze-input:focus,
body.dark-mode .cloze-input:focus{
  border-bottom-color:#60a5fa;
}
html[data-theme='dark'] .cloze-input.input-correct,
body.dark-mode .cloze-input.input-correct{
  border-bottom-color:#4ade80;color:#4ade80;
}
html[data-theme='dark'] .cloze-input.input-wrong,
body.dark-mode .cloze-input.input-wrong{
  border-bottom-color:#f87171;color:#f87171;
}
.cloze-select{
  display:inline-block;
  vertical-align:baseline;
  border:none;
  border-bottom:2px solid #94a3b8;
  border-radius:4px;
  background:transparent;
  padding:0 4px 1px;
  min-height:28px;
  font:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.cloze-select:focus{
  outline:none;
  border-bottom-color:#2563eb;
}
.cloze-select.input-correct{
  border-bottom-color:#16a34a;
  color:#15803d;
  font-weight:800;
}
.cloze-select.input-wrong{
  border-bottom-color:#dc2626;
  color:#b91c1c;
}
html[data-theme='dark'] .cloze-select,
body.dark-mode .cloze-select{
  border-bottom-color:#475569;
  color:#f1f5f9;
  background:#1e293b;
}
html[data-theme='dark'] .cloze-select:focus,
body.dark-mode .cloze-select:focus{
  border-bottom-color:#60a5fa;
}
html[data-theme='dark'] .cloze-select.input-correct,
body.dark-mode .cloze-select.input-correct{
  border-bottom-color:#4ade80;color:#4ade80;
}
html[data-theme='dark'] .cloze-select.input-wrong,
body.dark-mode .cloze-select.input-wrong{
  border-bottom-color:#f87171;color:#f87171;
}

.word-fill-row{
  direction:ltr;
  grid-template-columns:48px minmax(0,1fr) 54px !important;
  align-items:start;
}
.word-fill-row .exercise-index,
.word-fill-row .exercise-audio-btn{
  margin-top:8px;
}

.word-fill-content{
  min-width:0;
  padding-top:4px;
}

.word-fill-line{
  display:block;
  font-size:20px;
  line-height:2.2;
  width:100%;
  hyphens:none;
  -webkit-hyphens:none;
}
.word-fill-line span{
  display:inline;
}
.word-fill-line .word-fill-input{
  display:inline-block;
  vertical-align:baseline;
}

.word-fill-input{
  width:110px;
  min-width:4ch;
  max-width:100%;
  border:none;
  border-bottom:2px solid #94a3b8;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:0 4px 2px;
  min-height:34px;
  text-align:left;
  font-weight:600;
  transition:border-bottom-color .2s ease, color .2s ease;
}
.word-fill-input:focus{
  outline:none;
  border-bottom-color:#2563eb;
  box-shadow:none;
}
.word-fill-input.input-correct{
  background:transparent;
  border-style:solid;
  border-top:none;
  border-left:none;
  border-right:none;
  border-bottom-color:#16a34a;
  box-shadow:none;
}
.word-fill-input.input-wrong{
  background:transparent;
  border-style:solid;
  border-top:none;
  border-left:none;
  border-right:none;
  border-bottom-color:#dc2626;
  box-shadow:none;
}
html[data-theme='dark'] .word-fill-input,
body.dark-mode .word-fill-input{
  background:transparent;
  border-bottom-color:#475569;
  color:#f1f5f9;
}
html[data-theme='dark'] .word-fill-input:focus,
body.dark-mode .word-fill-input:focus{
  border-bottom-color:#60a5fa;
}
html[data-theme='dark'] .word-fill-input.input-correct,
body.dark-mode .word-fill-input.input-correct{
  background:transparent;
  border-bottom-color:#4ade80;
  color:#4ade80;
}
html[data-theme='dark'] .word-fill-input.input-wrong,
body.dark-mode .word-fill-input.input-wrong{
  background:transparent;
  border-bottom-color:#f87171;
  color:#f87171;
}

.fill-context{
  font-size:15px;
  color:var(--muted);
  margin-bottom:2px;
  line-height:1.6;
  direction:ltr;
}
.fill-context-label{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#94a3b8;
  margin-inline-end:6px;
}
.fill-context-inline{
  font-size:13px;
  font-weight:900;
  color:#0d5bd3;
  vertical-align:middle;
  margin-inline-end:4px;
}
html[data-theme='dark'] .fill-context,
body.dark-mode .fill-context{
  color:#64748b;
}
html[data-theme='dark'] .fill-context-inline,
body.dark-mode .fill-context-inline{
  color:#60a5fa;
}

.fill-hint{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-bottom:4px;
  padding:3px 10px 3px 8px;
  border-radius:20px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.01em;
}
html[data-theme='dark'] .fill-hint,
body.dark-mode .fill-hint{
  background:#172554;
  border-color:#1e40af;
  color:#93c5fd;
}

.builder-example{
  margin-bottom:14px;
  padding:14px 16px;
  border:1px solid #c7d9ff;
  border-radius:16px;
  background:linear-gradient(180deg,#f0f6ff 0%,#e8f0fe 100%);
}

.builder-example-label{
  margin-bottom:8px;
  font-size:13px;
  font-weight:900;
  color:#92400e;
}

.builder-example-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.builder-example-prompt{
  color:#475569;
  font-weight:700;
}

.builder-example-answer{
  padding:8px 12px;
  border-radius:12px;
  border:1px dashed #93c5fd;
  background:#f8fbff;
  font-weight:800;
}

.builder-row{
  align-items:flex-start;
}

.builder-content{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.builder-prompt{
  color:#475569;
  font-size:16px;
  font-weight:700;
  line-height:1.8;
}

.builder-line{
  font-size:20px;
}

.builder-input{
  width:min(100%, 420px);
  max-width:420px;
  flex:0 1 420px;
  text-align:left;
}

.numbers-row{
  direction:ltr;
  grid-template-columns:48px minmax(0,1fr) 54px !important;
}

.numbers-content{
  min-width:0;
}

.numbers-line{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
  font-size:20px;
  line-height:1.8;
}

.numbers-prompt{
  font-weight:800;
  color:#334155;
}

.numbers-input{
  width:84px;
  min-width:84px;
  flex:0 0 84px;
  text-align:center;
}

.exercise-row.dialogue-row{
  direction:ltr;
  grid-template-columns:48px 120px minmax(0,1fr) 54px;
  align-items:start;
}

.dialogue-speaker{
  margin:0;
  padding-top:10px;
  font-size:13px;
  font-weight:900;
  color:#334155;
  text-align:left;
  line-height:1.5;
}

.dialogue-line{
  display:block;
  width:100%;
  font-size:20px;
  line-height:2;
}
.dialogue-line span{
  display:inline;
}
.dialogue-line .dialogue-input{
  display:inline-block;
  vertical-align:middle;
}

.dialogue-input{
  width:120px;
}

.dialogue-content{
  min-width:0;
  padding-top:4px;
}

.dialogue-row .exercise-index{
  align-self:start;
  padding-top:10px;
}

.dialogue-row .exercise-audio-btn{
  align-self:start;
  margin-top:6px;
}

.exercise-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 54px;
  gap:14px;
  align-items:center;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.exercise-row:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(15,23,42,.07);
}

.exercise-row.is-correct{
  border-color:#16a34a;
  background:linear-gradient(180deg,#f0fdf4 0%,#dcfce7 100%);
  box-shadow:0 0 0 3px rgba(22,163,74,.10);
}

.exercise-row.is-wrong{
  border-color:#dc2626;
  background:linear-gradient(180deg,#fff5f5 0%,#fee2e2 100%);
  box-shadow:0 0 0 3px rgba(220,38,38,.08);
}

.exercise-index{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eef4ff;
  border:1.5px solid #c7d9ff;
  font-size:15px;
  font-weight:900;
  color:#1d4ed8;
  text-align:center;
  flex-shrink:0;
}

.exercise-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#eef4ff;
  border:1px solid #d7e6ff;
  font-size:28px;
}

.exercise-content{
  min-width:0;
}

.exercise-scene{
  margin-bottom:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.exercise-scene-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.exercise-scene-row .exercise-icon{
  font-size:22px;
  line-height:1;
  flex-shrink:0;
}
.exercise-scene-row .exercise-scene{
  margin-bottom:0;
}

.exercise-line{
  display:block;
  color:var(--text);
  font-size:20px;
  font-weight:500;
  direction:ltr;
  unicode-bidi:isolate;
  text-align:left;
  line-height:2;
}
.exercise-line span{
  display:inline;
}
.exercise-line .exercise-input{
  display:inline-block;
  vertical-align:middle;
}

.exercise-input{
  border:none;
  border-bottom:2px solid #94a3b8;
  border-radius:0;
  background:transparent;
  padding:2px 4px 2px;
  font:inherit;
  font-weight:600;
  color:#1d4ed8;
  text-align:center;
  min-width:auto;
  transition:border-bottom-color .2s ease, color .2s ease;
}

.exercise-input:focus{
  outline:none;
  border-bottom-color:#2563eb;
}

.exercise-audio-btn{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid #cfe0ff;
  background:#eef4ff;
  color:#0f3f9f;
  font-size:20px;
  cursor:pointer;
}

.question-groups{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.question-group{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.question-group-title{
  padding:10px 16px;
  text-align:center;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#1d4ed8;
  background:linear-gradient(180deg,#f0f6ff 0%,#e8f0fe 100%);
  border-bottom:1px solid #c7d9ff;
}

.question-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
}

.question-row{
  direction:ltr;
  grid-template-columns:48px minmax(0,1fr) 54px;
  grid-template-rows:auto auto;
  align-items:start;
}
.question-row .exercise-index{
  grid-column:1;
  grid-row:1 / 3;
  align-self:start;
  margin-top:6px;
}
.question-row .question-main{
  grid-column:2;
  grid-row:1;
}
.question-row .question-reply{
  grid-column:2;
  grid-row:2;
  margin-top:10px;
}
.question-row .exercise-audio-btn{
  grid-column:3;
  grid-row:1;
}
.question-row:has(.question-reply-fill){
  grid-template-columns:48px minmax(0,1fr) 54px;
  align-items:start;
}

.question-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.question-line{
  font-size:20px;
  line-height:1.8;
}

.question-reply-fill{
  display:block;
  font-size:18px;
  line-height:2;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f0f7ff;
  width:100%;
}
.question-reply-fill > span{
  display:inline;
}
.question-reply-fill .question-input{
  display:inline-block;
  vertical-align:middle;
  position:relative;
  top:-1px;
  background:#fff;
  width:90px;
  min-width:70px;
}

.question-input{
  width:96px;
  min-width:96px;
}

.question-reply{
  display:none;
  min-width:0;
  padding:10px 14px;
  border-radius:12px;
  border-left:3px solid #16a34a;
  background:#f0fdf4;
  color:#166534;
  line-height:1.75;
  font-size:15px;
  font-weight:600;
  direction:ltr;
  text-align:left;
  animation:reply-reveal .25s ease;
}
.exercise-row.is-wrong .question-reply{
  border-left-color:#dc2626;
  background:#fff5f5;
  color:#991b1b;
}
.exercise-row.is-correct .question-reply,
.exercise-row.is-wrong .question-reply{
  display:block;
}
@keyframes reply-reveal{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

.lesson-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:8px;
  padding-top:8px;
}

.btn{
  min-height:46px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  font:inherit;
  font-weight:800;
}

.primary-btn{
  background:#0d5bd3;
  color:#fff;
}

.ghost-btn{
  background:#fff;
  color:var(--text);
  border-color:var(--line);
}

.lesson-score-box{
  min-width:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px 16px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid var(--line);
}

.lesson-score-box span{
  font-size:24px;
  line-height:1;
  font-weight:900;
  color:#0d5bd3;
}

.lesson-score-box small{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

.contact-hero{
  border-radius:14px;
  background:linear-gradient(135deg, #0a4fb6 0%, #0b5ed7 55%, #2977e5 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
}

.contact-hero .page-title{
  margin:0;
  color:#fff;
  font-size:30px;
}

.contact-hero .page-text{
  margin:6px 0 0;
  color:rgba(255,255,255,.92);
  max-width:780px;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.contact-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.contact-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(15,23,42,.14);
  border-color:#8eb5ff;
}

.contact-top{
  display:flex;
  align-items:center;
  gap:10px;
}

.contact-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#eaf1ff;
  color:#1d4ed8;
  border:1px solid #c9dcff;
}

.contact-icon svg{
  width:20px;
  height:20px;
}

.contact-label{
  font-size:15px;
  font-weight:900;
}

.contact-value{
  font-size:17px;
  font-weight:800;
  color:var(--text);
  direction:ltr;
  unicode-bidi:isolate;
  text-align:left;
}

.contact-action{
  font-size:12.5px;
  color:var(--muted);
  font-weight:700;
}

.contact-foot{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}

.contact-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#16a34a;
  box-shadow:0 0 0 4px rgba(22,163,74,.15);
}

/* ═══════════════════════════════════════════════════════════
   Level colour themes  (driven by data-level="a1/a2/b1/b2")
   ═══════════════════════════════════════════════════════════ */
.level-accordion[data-level="a1"],
.level-chip[data-level="a1"]{--lvl:#15803d;--lvl-bg:#f0fdf4;--lvl-bd:#86efac;--lvl-txt:#14532d}
.level-accordion[data-level="a2"],
.level-chip[data-level="a2"]{--lvl:#0f766e;--lvl-bg:#f0fdfa;--lvl-bd:#5eead4;--lvl-txt:#134e4a}
.level-accordion[data-level="b1"],
.level-chip[data-level="b1"]{--lvl:#b45309;--lvl-bg:#fffbeb;--lvl-bd:#fcd34d;--lvl-txt:#78350f}
.level-accordion[data-level="b2"],
.level-chip[data-level="b2"]{--lvl:#1d4ed8;--lvl-bg:#eff6ff;--lvl-bd:#93c5fd;--lvl-txt:#1e3a8a}

/* Coloured accent bar on the visual-start side (right in RTL) */
.level-accordion[data-level]{border-right:4px solid var(--lvl)}
.level-accordion[data-level][open]{border-right-color:var(--lvl)}

/* Badge colour per level */
.level-accordion[data-level] .level-badge{background:var(--lvl)}

/* Open summary: tinted bg + coloured bottom rule */
.level-accordion[data-level][open] > .level-summary{
  background:var(--lvl-bg);
  border-bottom:1px solid var(--lvl-bd);
}

/* Chapter header tint + border per level */
.level-accordion[data-level] .chapter-summary{background:var(--lvl-bg)}
.level-accordion[data-level] .chapter-accordion{border-color:var(--lvl-bd)}

/* Chapter kicker colour matches level */
.level-accordion[data-level] .chapter-kicker{color:var(--lvl)}

/* Available lesson row: right-side accent stripe */
.level-accordion[data-level] .lesson-row:not(.lesson-row-disabled){
  border-right:3px solid var(--lvl)
}

/* Level chip colour theming */
.level-chip[data-level]{
  background:var(--lvl-bg);
  border-color:var(--lvl-bd);
  color:var(--lvl-txt);
  transition:transform .18s ease,filter .18s ease;
  font-size:15px;
  min-width:70px;
  padding:10px 20px;
}
.level-chip[data-level]:hover{filter:brightness(.93);transform:translateY(-2px)}

/* "قريباً" — muted dashed pill instead of solid button */
.lesson-row-disabled .lesson-row-cta{
  background:#f8fafc;
  color:#94a3b8;
  border:1px dashed #cbd5e1;
  font-size:12px;
  letter-spacing:.03em;
}

/* ── German intro stats card ───────────────────────────────── */
.german-intro-card{
  background:linear-gradient(135deg,#0d2f7a 0%,#1d4ed8 60%,#2563eb 100%);
  color:#fff;
  border:none;
}
.german-intro-label{
  margin:0 0 10px;
  font-size:14px;
  font-weight:800;
  opacity:.8;
  letter-spacing:.04em;
}
.german-intro-title{
  margin:0 0 10px;
  font-size:24px;
  font-weight:900;
  line-height:1.4;
}
.german-intro-sub{
  margin:0 0 28px;
  font-size:15px;
  opacity:.85;
  line-height:1.8;
}
.german-intro-stats{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.german-istat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:100px;
  padding:16px 20px;
  border-radius:16px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.2);
  flex:1 1 100px;
}
.german-istat strong{
  font-size:30px;
  font-weight:900;
  line-height:1;
}
.german-istat span{
  font-size:13px;
  font-weight:700;
  opacity:.8;
}

/* ─────────────────────────────────────────────────────────── */
@media (max-width: 740px){
  .category-hero-head{
    align-items:stretch;
  }
  .category-stat{
    width:100%;
    min-width:0;
  }
  .category-mini-list{
    grid-template-columns:1fr;
  }
  .language-roadmap-head{
    align-items:stretch;
  }
  .level-summary{
    flex-direction:column;
    align-items:stretch;
  }
  .level-summary-side{
    align-items:flex-start;
  }
  .chapter-summary{
    flex-direction:column;
    align-items:flex-start;
  }
  .chapter-summary-side{
    width:100%;
    align-items:flex-start;
  }
  .chapter-layout{
    grid-template-columns:1fr;
  }
  .lesson-row{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
  .lesson-row-cta{
    width:100%;
  }
  .lesson-hero-head{
    align-items:stretch;
  }
  .lesson-top-actions{
    width:100%;
  }
  .lesson-back-link,
  .lesson-sound-btn{
    flex:1 1 180px;
  }
  .wordbank-list{
    gap:8px;
  }
  .word-chip{
    width:calc(50% - 4px);
  }
  .choice-pill{
    width:calc(50% - 5px);
    justify-content:center;
  }
  .ending-line{
    font-size:17px;
    flex-wrap:wrap;
    white-space:normal;
    overflow:visible;
  }
  .ending-input{
    width:88px;
    min-width:76px;
  }
  .ending-line-secondary{
    padding-inline-start:0;
  }
  .exercise-row.select-row{
    grid-template-columns:38px 1fr;
  }
  .select-row .select-content{
    grid-column:1 / -1;
  }
  .select-row .exercise-audio-btn{
    grid-column:1 / -1;
    width:100%;
  }
  .exercise-line.select-line{
    font-size:18px;
  }
  .select-row .exercise-select{
    width:130px;
    min-width:130px;
  }
  .dual-select-row{
    grid-template-columns:38px 1fr !important;
  }
  .dual-select-content{
    grid-column:1 / -1;
  }
  .dual-select-row .exercise-audio-btn{
    grid-column:1 / -1;
    width:100%;
  }
  .dual-select-line{
    font-size:18px;
  }
  .dual-select-input{
    width:130px;
    min-width:130px;
    flex-basis:130px;
  }
  .exercise-row.dialogue-row{
    grid-template-columns:38px 1fr;
  }
  .word-fill-row,
  .numbers-row{
    grid-template-columns:38px minmax(0,1fr) !important;
  }
  .word-fill-row .exercise-audio-btn,
  .numbers-row .exercise-audio-btn{
    grid-column:1 / -1;
    width:100%;
  }
  /* Word-fill: flex row that never wraps, parent scrolls horizontally */
  .word-fill-content{
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .word-fill-line{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:baseline !important;
    min-width:-webkit-max-content !important;
    min-width:max-content !important;
    width:auto !important;
    white-space:nowrap !important;
    font-size:15px !important;
    line-height:2 !important;
  }
  .word-fill-line span{
    white-space:nowrap !important;
    flex-shrink:0 !important;
  }
  .word-fill-input{
    flex-shrink:0 !important;
    font-size:15px !important;
    min-height:28px !important;
    width:auto !important;
    min-width:5ch !important;
    max-width:none !important;
  }
  .builder-input{
    width:100%;
    max-width:none;
    flex:1 1 auto;
  }
  .numbers-input{
    width:64px;
    min-width:64px;
    flex-basis:64px;
  }
  .dialogue-speaker{
    grid-column:2;
  }
  .dialogue-content{
    grid-column:1 / -1;
  }
  .dialogue-row .exercise-audio-btn{
    grid-column:1 / -1;
  }
  .dialogue-line{
    font-size:18px;
    flex-wrap:wrap;
    white-space:normal;
  }
  .dialogue-input{
    width:100px;
    flex-basis:100px;
  }
  .question-row{
    grid-template-columns:38px 1fr;
  }
  .question-main{
    grid-column:1 / -1;
  }
  .question-reply{
    grid-column:1 / -1;
  }
  .question-row .exercise-audio-btn{
    grid-column:1 / -1;
  }
  .exercise-row{
    grid-template-columns:38px 48px minmax(0,1fr);
  }
  .exercise-audio-btn{
    grid-column:1 / -1;
    width:100%;
  }
  .exercise-line{
    font-size:22px;
  }
  .exercise-input{
    min-width:60px;
  }
  .lesson-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .btn,
  .lesson-score-box{
    width:100%;
  }
  .contact-hero .page-title{font-size:24px;}
  .contact-grid{grid-template-columns:1fr;}
}

html[data-theme='dark'] .category-hero,
body.dark-mode .category-hero{
  background:linear-gradient(135deg, #111b2d 0%, #12233f 55%, #0f172a 100%);
  border-color:#274062;
}

html[data-theme='dark'] .category-stat,
body.dark-mode .category-stat{
  background:linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
}

html[data-theme='dark'] .category-mini-card,
html[data-theme='dark'] .category-tag,
body.dark-mode .category-mini-card,
body.dark-mode .category-tag{
  background:#111b2d;
  border-color:#2c3e5d;
}

html[data-theme='dark'] .category-tag small,
body.dark-mode .category-tag small{
  background:#1c3158;
  color:#dbeafe;
}

html[data-theme='dark'] .level-chip,
body.dark-mode .level-chip{
  background:#152545;
  border-color:#31548b;
  color:#dbeafe;
}

html[data-theme='dark'] .level-accordion,
body.dark-mode .level-accordion,
html[data-theme='dark'] .chapter-accordion,
body.dark-mode .chapter-accordion{
  background:linear-gradient(180deg, #111b2d 0%, #0f172a 100%);
  border-color:#2c3e5d;
  box-shadow:0 14px 30px rgba(2,6,23,.42);
}

html[data-theme='dark'] .chapter-summary,
body.dark-mode .chapter-summary,
html[data-theme='dark'] .chapter-panel,
body.dark-mode .chapter-panel{
  background:#111b2d;
  border-color:#2c3e5d;
}

html[data-theme='dark'] .level-link,
body.dark-mode .level-link{
  background:#111b2d;
  border-color:#2c3e5d;
}

html[data-theme='dark'] .level-note,
body.dark-mode .level-note{
  background:#0f172a;
  border-color:#334155;
}

html[data-theme='dark'] .chapter-row,
body.dark-mode .chapter-row{
  border-top-color:#294164;
}

html[data-theme='dark'] .chapter-topic,
body.dark-mode .chapter-topic{
  color:#93c5fd;
}

html[data-theme='dark'] .lesson-row,
body.dark-mode .lesson-row{
  background:linear-gradient(180deg,#111b2d 0%,#0f172a 100%);
  border-color:#253550;
}
html[data-theme='dark'] .lesson-row:hover,
body.dark-mode .lesson-row:hover{
  border-color:#3b6fd4;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
html[data-theme='dark'] .lesson-row-title,
body.dark-mode .lesson-row-title{
  color:#e2e8f0;
}
html[data-theme='dark'] .lesson-row-index,
body.dark-mode .lesson-row-index{
  color:#7aa3d4;
}
html[data-theme='dark'] .lesson-row-cta,
body.dark-mode .lesson-row-cta{
  background:#1d4ed8;
  color:#fff;
}
html[data-theme='dark'] .lesson-row-disabled .lesson-row-cta,
body.dark-mode .lesson-row-disabled .lesson-row-cta{
  background:#1e2d45;
  color:#5a8ac7;
}

html[data-theme='dark'] .lesson-hero,
body.dark-mode .lesson-hero{
  background:linear-gradient(135deg, #111b2d 0%, #12233f 50%, #0f172a 100%);
  border-color:#274062;
}

html[data-theme='dark'] .lesson-back-link,
html[data-theme='dark'] .lesson-sound-btn,
body.dark-mode .lesson-back-link,
body.dark-mode .lesson-sound-btn{
  background:#111b2d;
  border-color:#31548b;
  color:#dbeafe;
}

html[data-theme='dark'] .exercise-row,
body.dark-mode .exercise-row{
  background:linear-gradient(180deg, #111b2d 0%, #0f172a 100%);
  border-color:#2c3e5d;
}
html[data-theme='dark'] .question-reply,
body.dark-mode .question-reply{
  background:#0f172a;
  border-color:#2c3e5d;
  color:#e2e8f0;
}
html[data-theme='dark'] .question-reply-fill,
body.dark-mode .question-reply-fill{
  background:#0d1b2e;
  border-color:#2c3e5d;
  color:#e2e8f0;
}
html[data-theme='dark'] .question-group,
body.dark-mode .question-group{
  background:#0f172a;
  border-color:#243247;
}
html[data-theme='dark'] .question-group-title,
body.dark-mode .question-group-title{
  background:#0f1f3d;
  border-color:#1e3a8a;
  color:#60a5fa;
}

html[data-theme='dark'] .exercise-icon,
html[data-theme='dark'] .exercise-audio-btn,
body.dark-mode .exercise-icon,
body.dark-mode .exercise-audio-btn{
  background:#152545;
  border-color:#31548b;
  color:#dbeafe;
}

html[data-theme='dark'] .exercise-input,
body.dark-mode .exercise-input{
  background:transparent;
  border-bottom-color:#64748b;
  color:#93c5fd;
}

html[data-theme='dark'] .exercise-line,
body.dark-mode .exercise-line,
html[data-theme='dark'] .dialogue-line,
body.dark-mode .dialogue-line{
  color:#f1f5f9;
}

html[data-theme='dark'] .exercise-scene,
body.dark-mode .exercise-scene{
  color:#94a3b8;
}

html[data-theme='dark'] .exercise-index,
body.dark-mode .exercise-index{
  color:#e2e8f0;
}

html[data-theme='dark'] .builder-prompt,
body.dark-mode .builder-prompt{
  color:#cbd5e1;
}

html[data-theme='dark'] .lesson-score-box,
body.dark-mode .lesson-score-box{
  background:#111b2d;
  border-color:#2c3e5d;
}

html[data-theme='dark'] .wordbank-panel,
body.dark-mode .wordbank-panel{
  background:#0f2044;
  border-color:#1e3a8a;
}

html[data-theme='dark'] .wordbank-title,
body.dark-mode .wordbank-title{
  color:#60a5fa;
}

html[data-theme='dark'] .word-chip,
body.dark-mode .word-chip{
  background:#111b2d;
  border-color:#5b4320;
  color:#f8fafc;
}

html[data-theme='dark'] .dialogue-speaker,
body.dark-mode .dialogue-speaker{
  color:#cbd5e1;
}

html[data-theme='dark'] .contact-hero,
body.dark-mode .contact-hero{
  background:linear-gradient(135deg, #0d1b3a 0%, #12326f 55%, #1d4ed8 100%);
  border-color:#2b4370;
}

html[data-theme='dark'] .contact-card,
body.dark-mode .contact-card{
  background:#111b2d;
  border-color:#2c3e5d;
  box-shadow:0 14px 26px rgba(2,6,23,.5);
}

html[data-theme='dark'] .contact-card:hover,
body.dark-mode .contact-card:hover{
  border-color:#3b82f6;
}

html[data-theme='dark'] .contact-icon,
body.dark-mode .contact-icon{
  background:#162848;
  border-color:#2c4f90;
  color:#9fc2ff;
}

html[data-theme='dark'] .contact-value,
body.dark-mode .contact-value{
  color:#e2e8f0;
}
.pin-badge{
  display:inline-block;
  margin-inline-start:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1.5;
  background:#fff7ed;
  color:#b45309;
  border:1px solid #fed7aa;
  vertical-align:middle;
}

html[data-theme='dark'] .pin-badge,
body.dark-mode .pin-badge{
  background:#3a2a16;
  color:#fcd34d;
  border-color:#6b4f2f;
}
.hero-pin{
  display:block;
  text-decoration:none;
}

.hero-pin .pad{
  position:relative;
}

.hero-pin-tag{
  display:inline-block;
  margin-bottom:8px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.hero-pin:hover{
  filter:brightness(1.03);
}

.imperative-grid,
.checkbox-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.imperative-content,
.checkbox-content{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.imperative-prompt,
.checkbox-prompt{
  font-size:14px;
  font-weight:800;
  color:#475569;
}

.imperative-example{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.imperative-pair-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.imperative-line{
  justify-content:flex-start;
  gap:10px;
}

.imperative-line span{
  font-size:17px;
  font-weight:700;
  color:var(--ink);
}

.imperative-answer{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  border:1px dashed #94a3b8;
  border-radius:14px;
  background:#f8fbff;
  color:#0f172a;
}

.checkbox-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 18px;
}

.checkbox-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  color:var(--ink);
}

.checkbox-input{
  width:16px;
  height:16px;
  accent-color:var(--primary);
}

html[data-theme='dark'] .imperative-prompt,
html[data-theme='dark'] .checkbox-prompt,
body.dark-mode .imperative-prompt,
body.dark-mode .checkbox-prompt{
  color:#cbd5e1;
}

html[data-theme='dark'] .imperative-answer,
body.dark-mode .imperative-answer{
  background:#0f172a;
  border-color:#475569;
  color:#e2e8f0;
}

@media (max-width: 900px){
  .checkbox-options{
    grid-template-columns:1fr;
  }
}

/* ===== Lesson Pro Polish ===== */

.lesson-progress-wrap{
  height:7px;
  background:#e2e8f0;
  border-radius:999px;
  margin-bottom:12px;
  overflow:hidden;
}
.lesson-progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#2563eb 0%,#38bdf8 100%);
  border-radius:999px;
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.lesson-progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:18px;
}
.lesson-progress-count{
  color:#1d4ed8;
  font-size:14px;
}

.exercise-row.is-correct{
  border-color:#16a34a;
  background:linear-gradient(180deg,#f0fdf4 0%,#dcfce7 100%);
  box-shadow:0 0 0 2px rgba(22,163,74,.13);
}
.exercise-row.is-wrong{
  border-color:#dc2626;
  background:linear-gradient(180deg,#fff5f5 0%,#fee2e2 100%);
  box-shadow:0 0 0 2px rgba(220,38,38,.10);
}

.exercise-input.input-correct{
  border-bottom-color:#16a34a;
  color:#15803d;
  font-weight:800;
}
.exercise-input.input-wrong{
  border-bottom-color:#dc2626;
  color:#b91c1c;
}

.primary-btn{
  background:linear-gradient(135deg,#1e40af 0%,#2563eb 100%);
  box-shadow:0 4px 14px rgba(37,99,235,.30);
  transition:box-shadow .2s,transform .15s;
}
.primary-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(37,99,235,.40);
}
.ghost-btn{
  transition:background .15s,border-color .15s;
}
.ghost-btn:hover{
  background:#f1f5f9;
}

@keyframes lesson-score-pop{
  0%{transform:scale(1)}
  40%{transform:scale(1.28)}
  100%{transform:scale(1)}
}
.lesson-score-box.is-animating span{
  display:inline-block;
  animation:lesson-score-pop .38s ease;
}
.lesson-score-box.all-correct span{color:#16a34a}
.lesson-score-box.all-wrong span{color:#dc2626}

.lesson-actions{
  border-top:2px solid var(--line);
  margin-top:24px;
  padding-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

/* Dark mode additions */
html[data-theme='dark'] .lesson-progress-wrap,
body.dark-mode .lesson-progress-wrap{background:#1e293b}

html[data-theme='dark'] .exercise-row.is-correct,
body.dark-mode .exercise-row.is-correct{
  background:linear-gradient(180deg,#052e16 0%,#14532d 100%);
  border-color:#16a34a;
}
html[data-theme='dark'] .exercise-row.is-wrong,
body.dark-mode .exercise-row.is-wrong{
  background:linear-gradient(180deg,#2d0707 0%,#450a0a 100%);
  border-color:#dc2626;
}
html[data-theme='dark'] .exercise-input.input-correct,
body.dark-mode .exercise-input.input-correct{
  border-bottom-color:#16a34a;color:#4ade80;
}
html[data-theme='dark'] .exercise-input.input-wrong,
body.dark-mode .exercise-input.input-wrong{
  border-bottom-color:#dc2626;color:#f87171;
}

.grouped-fill-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.grouped-fill-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}


/* ── Exam article card ─────────────────────────────────────── */
.exam-article-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:28px 32px;
  max-width:560px;
  margin:0 auto;
}
.exam-article-card h2{
  font-size:20px;
  font-weight:800;
  margin-bottom:8px;
  color:#1e3a8a;
}
.exam-article-card ul{
  list-style:none;
  padding:0;
  margin:12px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.exam-article-card li{
  font-size:14px;
  color:#374151;
}
.exam-article-card p{
  font-size:14px;
  color:#475569;
  margin:12px 0 6px;
}
.btn-start-exam{
  display:inline-block;
  margin-top:20px;
  background:#1d4ed8;
  color:#fff !important;
  padding:12px 28px;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  text-decoration:none !important;
  transition:background .2s;
}
.btn-start-exam:hover{ background:#1e40af; }

/* ===== REDESIGN v2 ===== */

/* Hero V2 */
.hero-v2{
  display:flex;
  align-items:center;
  gap:20px;
  background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 60%,#3b82f6 100%);
  border-radius:18px;
  padding:28px 24px;
  color:#fff;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:filter .2s;
  margin-bottom:14px;
}
.hero-v2::before{
  content:'';
  position:absolute;
  top:-40px;right:-40px;
  width:180px;height:180px;
  background:rgba(255,255,255,.07);
  border-radius:50%;
  pointer-events:none;
}
.hero-v2:hover{ filter:brightness(1.05); }
.hero-v2-plain{ cursor:default; }
.hero-v2-plain:hover{ filter:none; }

.hero-v2-body{ flex:1; min-width:0; }
.hero-v2-body h1{
  margin:8px 0 10px;
  font-size:22px;
  font-weight:900;
  line-height:1.65;
  color:#fff;
}
.hero-v2-body p{
  margin:0 0 18px;
  font-size:14px;
  opacity:.92;
  line-height:1.9;
}

.hero-v2-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.hero-btn-green{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#16a34a;
  color:#fff;
  padding:10px 20px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  transition:background .2s;
}
.hero-v2:hover .hero-btn-green{ background:#15803d; }
.hero-btn-outline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:2px solid rgba(255,255,255,.6);
  color:#fff;
  padding:8px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  transition:border-color .2s;
}
.hero-v2:hover .hero-btn-outline{ border-color:#fff; }

/* Hero mockup */
.hero-v2-visual{
  flex:0 0 110px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.hero-v2-mockup{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  border-radius:14px;
  padding:16px 14px;
  width:100px;
}
.hero-mockup-doc{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hero-mockup-line{
  height:6px;
  background:rgba(255,255,255,.6);
  border-radius:3px;
}
.hero-mockup-line.short{ width:60%; }
.hero-mockup-label{
  margin-top:8px;
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,.9);
  text-align:center;
}

/* Posts Grid */
.posts-grid{
  display:flex;
  flex-direction:column;
  gap:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.post-card{
  display:flex;
  gap:14px;
  padding:14px;
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid var(--line);
  transition:background .18s, transform .18s;
  align-items:flex-start;
  border-right:4px solid transparent;
}
.post-card:last-child{ border-bottom:0; }
.post-card:hover{
  background:#f8faff;
  border-right:4px solid var(--brand);
  transform:translateX(-2px);
}

.post-card-thumb{
  flex:0 0 90px;
  height:80px;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(135deg,#e0e7ff,#dbeafe);
  display:flex;
  align-items:center;
  justify-content:center;
}
.post-card-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.post-card-thumb-placeholder{
  font-size:28px;
  opacity:.5;
}

.post-card-body{ flex:1; min-width:0; }
.post-cat-pill{
  display:inline-block;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:11px;
  font-weight:700;
  padding:2px 10px;
  border-radius:999px;
  margin-bottom:5px;
  border:1px solid #bfdbfe;
}
.post-card-body h3{
  margin:0 0 5px;
  font-size:15px;
  font-weight:800;
  line-height:1.7;
  color:var(--text);
}
.post-card-body p{
  margin:0 0 6px;
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px;
}
.post-card-date{ font-size:12px; color:#94a3b8; }
.post-card-arrow{
  font-size:14px;
  color:var(--brand);
  opacity:0;
  transition:opacity .2s;
}
.post-card:hover .post-card-arrow{ opacity:1; }

/* Share Section */
.share-section{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.share-label{
  font-size:14px;
  font-weight:700;
  color:var(--muted);
}
.share-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  border:none;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s;
}
.share-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.share-whatsapp{
  background:#25d366;
  color:#fff;
}
.share-copy{
  background:#f1f5f9;
  color:#334155;
  font-family:inherit;
}

/* Dark mode */
html[data-theme='dark'] .hero-v2,
body.dark-mode .hero-v2{
  background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 60%,#2563eb 100%);
}
html[data-theme='dark'] .post-card:hover,
body.dark-mode .post-card:hover{ background:#0f172a; }
html[data-theme='dark'] .post-card,
body.dark-mode .post-card{ color:#e2e8f0; }
html[data-theme='dark'] .post-cat-pill,
body.dark-mode .post-cat-pill{
  background:#1e3a8a;
  color:#93c5fd;
  border-color:#1d4ed8;
}
html[data-theme='dark'] .posts-grid,
body.dark-mode .posts-grid{
  background:var(--card);
}
html[data-theme='dark'] .post-card-body h3,
body.dark-mode .post-card-body h3{ color:#e2e8f0; }
html[data-theme='dark'] .share-copy,
body.dark-mode .share-copy{
  background:#1e293b;
  color:#cbd5e1;
}

/* Mobile */
@media(max-width:640px){
  .hero-v2{ flex-direction:column; padding:22px 18px; }
  .hero-v2-visual{ display:none; }
  .hero-v2-body h1{ font-size:18px; }
  .hero-btn-green{ font-size:13px; padding:9px 16px; }
  .hero-btn-outline{ font-size:12px; padding:7px 14px; }
  .post-card-thumb{ flex:0 0 70px; height:65px; }
  .post-card-body h3{ font-size:14px; }
}

/* ══════════════════════════════════════════════════════════════
   FLASHCARDS
══════════════════════════════════════════════════════════════ */

/* Picker page */
.fc-picker-container{ max-width:800px; margin:0 auto; padding:20px 12px 40px; }
.fc-picker-hero{ text-align:center; padding:32px 0 24px; }
.fc-picker-hero-icon{ font-size:52px; line-height:1; margin-bottom:10px; }
.fc-picker-title{ margin:0 0 6px; font-size:26px; font-weight:800; color:var(--text); }
.fc-picker-sub{ margin:0; color:var(--muted); font-size:15px; }

.fc-level-section{ margin-bottom:28px; }
.fc-level-header{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.fc-level-tag{ background:#1d4ed8; color:#fff; border-radius:6px; padding:3px 10px; font-size:13px; font-weight:700; }
.fc-level-goal{ font-size:13px; color:var(--muted); flex:1; }

.fc-lessons-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.fc-lesson-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .2s, transform .15s, box-shadow .2s;
}
.fc-lesson-card:hover{ border-color:#2563eb; transform:translateY(-2px); box-shadow:0 6px 18px rgba(37,99,235,.12); }
.fc-lesson-card-top{ display:flex; justify-content:space-between; align-items:center; }
.fc-lesson-chapter{ font-size:11px; color:var(--muted); font-weight:600; }
.fc-lesson-count{ font-size:11px; background:#eff6ff; color:#1d4ed8; border-radius:20px; padding:2px 8px; font-weight:700; }
.fc-lesson-card-title{ font-size:14px; font-weight:700; line-height:1.4; flex:1; }
.fc-lesson-card-arrow{ font-size:16px; color:#2563eb; align-self:flex-end; }

/* Flashcard game page */
.fc-container{ max-width:560px; margin:0 auto; padding:16px 12px 40px; }

.fc-header{ margin-bottom:20px; }
.fc-back-btn{
  display:inline-flex; align-items:center; gap:6px; color:var(--muted);
  font-size:13px; text-decoration:none; margin-bottom:12px;
  transition:color .15s;
}
.fc-back-btn:hover{ color:var(--brand); }
.fc-title-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.fc-level-badge{ background:#1d4ed8; color:#fff; border-radius:6px; padding:2px 8px; font-size:12px; font-weight:700; white-space:nowrap; }
.fc-lesson-title{ margin:0; font-size:17px; font-weight:800; }

.fc-progress-wrap{ display:flex; align-items:center; gap:10px; }
.fc-progress-bar{ flex:1; height:7px; background:var(--line); border-radius:99px; overflow:hidden; }
.fc-progress-fill{ height:100%; background:linear-gradient(90deg,#2563eb,#3b82f6); border-radius:99px; transition:width .4s; }
.fc-progress-text{ font-size:13px; color:var(--muted); white-space:nowrap; font-weight:600; }

/* Card flip */
.fc-scene{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.fc-scene.fc-scene-done .fc-results{ display:flex !important; }

.fc-card-wrap{ width:100%; max-width:440px; perspective:1200px; }

@keyframes fcSlideIn {
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

.fc-card{
  width:100%; min-height:220px;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
  border-radius:20px;
}
.fc-card.is-flipped{ transform:rotateY(180deg); }

.fc-card-front,
.fc-card-back{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:30px 24px; gap:12px;
  border:1.5px solid var(--line);
  box-shadow:0 8px 28px rgba(15,23,42,.08);
}
.fc-card-front{ background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%); color:#fff; border-color:transparent; }
.fc-card-back{ background:var(--card); transform:rotateY(180deg); }

.fc-card-hint{ font-size:11px; opacity:.6; letter-spacing:.5px; text-transform:uppercase; }
.fc-card-icon{ font-size:42px; line-height:1; }
.fc-card-de{ font-size:22px; font-weight:800; text-align:center; line-height:1.4; }
.fc-card-ar{ font-size:26px; font-weight:800; color:var(--text); text-align:center; }
.fc-card-de-small{ font-size:14px; color:var(--muted); text-align:center; margin-top:4px; }

/* Action buttons */
.fc-actions{ display:flex; gap:12px; width:100%; max-width:440px; }
.fc-btn{
  flex:1; padding:14px 0; border:none; border-radius:14px;
  font-size:15px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .1s, box-shadow .15s;
  font-family:inherit;
}
.fc-btn:active{ transform:scale(.97); }
.fc-btn-no{ background:#fee2e2; color:#b91c1c; }
.fc-btn-no:hover{ background:#fecaca; box-shadow:0 4px 12px rgba(185,28,28,.15); }
.fc-btn-yes{ background:#dcfce7; color:#15803d; }
.fc-btn-yes:hover{ background:#bbf7d0; box-shadow:0 4px 12px rgba(21,128,61,.15); }

.fc-flip-hint{ font-size:12px; color:var(--muted); }
.fc-flip-hint kbd{
  background:var(--line); border-radius:4px; padding:1px 5px;
  font-size:11px; font-family:monospace;
}

/* Results */
.fc-results{
  display:none; flex-direction:column; align-items:center; gap:14px;
  padding:36px 24px; background:var(--card);
  border:1.5px solid var(--line); border-radius:20px;
  width:100%; max-width:440px;
  box-shadow:0 8px 28px rgba(15,23,42,.08);
  text-align:center;
}
.fc-results-emoji{ font-size:56px; line-height:1; }
.fc-results-title{ margin:0; font-size:22px; font-weight:800; }
.fc-results-score{ font-size:18px; color:var(--muted); }
.fc-score-num{ font-size:36px; font-weight:900; color:#2563eb; }
.fc-score-lbl{ font-size:15px; }
.fc-results-actions{ display:flex; flex-direction:column; gap:10px; width:100%; margin-top:8px; }
.fc-restart-btn{
  background:linear-gradient(135deg,#1e3a8a,#2563eb); color:#fff;
  border:none; border-radius:12px; padding:13px; font-size:15px;
  font-weight:700; cursor:pointer; font-family:inherit;
  transition:opacity .15s;
}
.fc-restart-btn:hover{ opacity:.9; }
.fc-results-back{
  color:var(--muted); font-size:14px; text-decoration:none;
  padding:10px; border-radius:10px; transition:color .15s;
}
.fc-results-back:hover{ color:var(--brand); }

/* Dark mode */
@media(prefers-color-scheme:dark){
  .fc-lesson-card{ background:#1e293b; border-color:#334155; color:#f1f5f9; }
  .fc-lesson-card:hover{ border-color:#3b82f6; }
  .fc-lesson-count{ background:#1e3a8a; color:#93c5fd; }
  .fc-card-back{ background:#1e293b; border-color:#334155; }
  .fc-card-ar{ color:#f1f5f9; }
  .fc-card-de-small{ color:#94a3b8; }
  .fc-btn-no{ background:#3f1515; color:#fca5a5; }
  .fc-btn-yes{ background:#14311e; color:#86efac; }
  .fc-flip-hint kbd{ background:#334155; }
  .fc-results{ background:#1e293b; border-color:#334155; }
  .fc-results-title{ color:#f1f5f9; }
}

/* Artikel badge on front of card */
.fc-card-artikel-badge{
  display:inline-block; color:#fff; border-radius:20px;
  padding:3px 14px; font-size:13px; font-weight:700; margin-top:8px;
}

/* Mode picker home */
.fc-modes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; }
.fc-mode-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  padding:20px 18px; display:flex; gap:14px; align-items:flex-start;
  text-decoration:none; color:var(--text); transition:border-color .2s,transform .15s,box-shadow .2s;
}
.fc-mode-card:hover{ border-color:#2563eb; transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,99,235,.13); }
.fc-mode-flashcard{ cursor:default; opacity:.75; }
.fc-mode-icon{ font-size:32px; line-height:1; flex-shrink:0; }
.fc-mode-body h2{ margin:0 0 5px; font-size:16px; font-weight:800; }
.fc-mode-body p{ margin:0 0 8px; font-size:13px; color:var(--muted); line-height:1.5; }
.fc-mode-pill{ background:#eff6ff; color:#1d4ed8; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:700; }

.fc-section-title{ font-size:15px; font-weight:800; margin-bottom:12px; color:var(--muted); }

/* Topic cards — unified pro card design */
.fc-topic-card-wrap{
  display:flex; flex-direction:column; gap:0;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:16px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .18s, box-shadow .2s;
}
.fc-topic-card-wrap:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(37,99,235,.15);
  border-color:rgba(37,99,235,.35);
}
/* Main card body */
.fc-topic-card{
  flex-direction:column !important; gap:4px !important;
  align-items:stretch !important;
  text-align:center !important;
  background:transparent !important; border:none !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:20px 14px 14px !important;
}
.fc-topic-card-icon{
  font-size:38px; line-height:1;
  margin:0 auto 8px; display:block;
}
/* German title — visible + prominent */
.fc-topic-card .fc-lesson-card-title{
  font-size:14px !important; font-weight:800 !important;
  color:var(--text) !important; text-align:center !important;
  line-height:1.3 !important; flex:unset !important;
  margin-bottom:2px;
}
/* Arabic subtitle */
.fc-lesson-card-title-ar{
  font-size:12px; color:var(--muted); text-align:center;
  margin-bottom:8px;
}
/* Word count badge — centered */
.fc-topic-card .fc-lesson-card-top{
  justify-content:center !important;
  margin-top:4px;
}
.fc-topic-card .fc-lesson-card-arrow{ display:none !important; }
/* Artikel link — integrated footer */
.fc-topic-artikel-link{
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:12px; font-weight:700; color:#2563eb;
  background:rgba(37,99,235,.06); border-top:1px solid var(--line);
  padding:9px 14px; text-decoration:none;
  transition:background .15s;
  letter-spacing:.2px;
}
.fc-topic-artikel-link:hover{ background:rgba(37,99,235,.13); }

/* Title row enhancements */
.fc-topic-icon{ font-size:28px; line-height:1; }
.fc-title-ar{ font-size:13px; color:var(--muted); margin-right:4px; }

/* ── Artikel Game ─────────────────────────────────────────────────── */
.art-stats-bar{ display:flex; gap:10px; margin-top:10px; }
.art-stat{
  flex:1; background:var(--card); border:1.5px solid var(--line);
  border-radius:12px; padding:8px 12px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.art-stat span{ font-size:22px; font-weight:900; line-height:1; }
.art-stat small{ font-size:11px; color:var(--muted); }

.art-game{ display:flex; flex-direction:column; align-items:center; gap:16px; }

.art-word-card{
  width:100%; max-width:440px; background:var(--card);
  border:1.5px solid var(--line); border-radius:20px;
  padding:32px 24px 24px; text-align:center;
  box-shadow:0 8px 28px rgba(15,23,42,.07);
  min-height:170px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
}
.art-word-hint{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.art-word-arabic{ font-size:20px; font-weight:700; color:var(--text); }
.art-word-de{ font-size:28px; font-weight:900; color:var(--text); letter-spacing:.5px; direction:ltr; }

.art-feedback{
  font-size:14px; font-weight:700; min-height:22px;
  transition:opacity .2s;
}
.art-fb-correct{ color:#16a34a; }
.art-fb-wrong{ color:#b91c1c; }

/* Three Artikel buttons */
.art-btns{ display:flex; gap:12px; width:100%; max-width:440px; }
.art-btn{
  flex:1; padding:18px 0; border:2.5px solid transparent; border-radius:16px;
  font-size:20px; font-weight:900; cursor:pointer; font-family:inherit;
  transition:transform .1s, box-shadow .15s, background .15s;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  position:relative; overflow:hidden;
}
.art-btn:hover:not(:disabled){ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.art-btn:active:not(:disabled){ transform:scale(.97); }

.art-der{ background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.art-die{ background:#fff1f2; color:#be123c; border-color:#fecdd3; }
.art-das{ background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }

.art-btn.is-correct{ filter:brightness(.88); transform:scale(1.04) !important; }
.art-btn.is-wrong{   filter:brightness(.88); }
.art-btn.is-disabled{ opacity:.6; cursor:default; }

.art-next-btn{
  background:linear-gradient(135deg,#1e3a8a,#2563eb); color:#fff;
  border:none; border-radius:14px; padding:13px 36px;
  font-size:16px; font-weight:800; cursor:pointer; font-family:inherit;
  transition:opacity .15s;
}
.art-next-btn:hover{ opacity:.9; }

/* Results breakdown */
.art-results{ display:none; flex-direction:column; align-items:center; gap:14px;
  width:100%; max-width:440px; background:var(--card); border:1.5px solid var(--line);
  border-radius:20px; padding:32px 24px; box-shadow:0 8px 28px rgba(15,23,42,.08); text-align:center; }
.art-breakdown-title{ margin:0 0 8px; font-size:14px; color:var(--muted); }
.art-breakdown-list{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.art-breakdown-item{
  display:flex; flex-direction:column; align-items:center;
  border-radius:10px; padding:6px 12px; font-size:14px; font-weight:700;
  gap:2px;
}
.art-breakdown-item small{ font-size:11px; font-weight:400; opacity:.7; }
.art-breakdown-item.art-der{ background:#eff6ff; color:#1d4ed8; }
.art-breakdown-item.art-die{ background:#fff1f2; color:#be123c; }
.art-breakdown-item.art-das{ background:#f0fdf4; color:#15803d; }

/* Animations */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(6px)}
}
@keyframes popCorrect{
  0%{transform:scale(1)}
  40%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.shake{ animation:shake .35s ease !important; }
.pop-correct{ animation:popCorrect .3s ease !important; }

/* Dark mode */
@media(prefers-color-scheme:dark){
  .fc-lesson-card{ background:#1e293b; border-color:#334155; color:#f1f5f9; }
  .fc-lesson-card:hover{ border-color:#3b82f6; }
  .fc-lesson-count{ background:#1e3a8a; color:#93c5fd; }
  .fc-card-back{ background:#1e293b; border-color:#334155; }
  .fc-card-ar{ color:#f1f5f9; }
  .fc-card-de-small{ color:#94a3b8; }
  .fc-btn-no{ background:#3f1515; color:#fca5a5; }
  .fc-btn-yes{ background:#14311e; color:#86efac; }
  .fc-flip-hint kbd{ background:#334155; }
  .fc-results{ background:#1e293b; border-color:#334155; }
  .fc-results-title{ color:#f1f5f9; }
  .art-word-card{ background:#1e293b; border-color:#334155; }
  .art-stat{ background:#1e293b; border-color:#334155; }
  .art-der{ background:#1e3a5f; color:#93c5fd; border-color:#1e40af; }
  .art-die{ background:#3f1524; color:#fda4af; border-color:#9f1239; }
  .art-das{ background:#14311e; color:#86efac; border-color:#166534; }
  .fc-mode-card{ background:#1e293b; border-color:#334155; color:#f1f5f9; }
  .fc-topic-artikel-link{ background:rgba(59,130,246,.1); color:#93c5fd; border-top-color:#1e293b; }
  .fc-topic-card-wrap{ border-color:#1e293b; background:#0f172a; }
  .fc-topic-card-wrap:hover{ box-shadow:0 10px 28px rgba(59,130,246,.2); border-color:#2563eb; }
  .fc-topic-card .fc-lesson-card-title{ color:#f1f5f9 !important; }
  .art-results{ background:#1e293b; border-color:#334155; }
}

/* Mobile flashcard tweaks */
@media(max-width:480px){
  .fc-card-de{ font-size:18px; }
  .fc-card-ar{ font-size:22px; }
  .fc-card-icon{ font-size:34px; }
  .fc-lessons-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .fc-picker-title{ font-size:22px; }
  .fc-modes-grid{ grid-template-columns:1fr; }
  .art-word-de{ font-size:24px; }
  .art-btn{ font-size:18px; padding:15px 0; }
  .fc-topic-card-wrap{ min-width:0; }
}

/* ══════════════════════════════════════════════════════════════
   GRAMMATIK
══════════════════════════════════════════════════════════════ */

/* Multiple choice grid */
.gr-choices{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  width:100%; max-width:440px;
}
.gr-choice-btn{
  padding:14px 10px; border:2px solid var(--line); border-radius:14px;
  background:var(--card); color:var(--text); font-size:16px; font-weight:700;
  cursor:pointer; font-family:inherit; text-align:center;
  transition:border-color .15s, transform .1s, background .15s;
}
.gr-choice-btn:hover:not(:disabled){ border-color:#2563eb; transform:translateY(-2px); background:#eff6ff; }
.gr-choice-btn:active:not(:disabled){ transform:scale(.97); }
.gr-choice-btn.gr-choice-correct{ background:#dcfce7; border-color:#16a34a; color:#15803d; }
.gr-choice-btn.gr-choice-wrong{ background:#fee2e2; border-color:#b91c1c; color:#b91c1c; }
.gr-choice-btn:disabled{ opacity:.7; cursor:default; }

/* Wrong items in results */
.gr-wrong-item{
  display:flex; flex-direction:column; align-items:center;
  background:#fee2e2; color:#b91c1c; border-radius:10px;
  padding:6px 12px; font-size:13px; font-weight:700; gap:2px;
}
.gr-wrong-item small{ font-size:11px; opacity:.7; font-weight:400; }

/* Big card (Plural / Perfekt) */
.gr-mode-row{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.gr-big-card{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  padding:20px 18px; text-decoration:none; color:var(--text);
  transition:border-color .2s, transform .15s, box-shadow .2s;
}
.gr-big-card:hover{ border-color:#2563eb; transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,99,235,.12); }
.gr-big-card-icon{ font-size:36px; line-height:1; flex-shrink:0; }
.gr-big-card-body{ flex:1; }
.gr-big-card-body h2{ margin:0 0 5px; font-size:17px; font-weight:800; }
.gr-big-card-body p{ margin:0 0 8px; font-size:13px; color:var(--muted); }
.gr-big-card-examples{ font-size:12px; color:var(--muted); font-family:monospace; background:var(--bg); border-radius:6px; padding:6px 10px; }

/* Perfekt card colours */
.gr-big-card-perfekt:hover{ border-color:#d97706; box-shadow:0 6px 20px rgba(217,119,6,.12); }
.gr-big-card-aux:hover    { border-color:#7c3aed; box-shadow:0 6px 20px rgba(124,58,237,.12); }
.gr-big-card-vp:hover     { border-color:#7c3aed; box-shadow:0 6px 20px rgba(124,58,237,.12); }
.gr-big-card-pk:hover     { border-color:#d97706; box-shadow:0 6px 20px rgba(217,119,6,.12); }
.gr-pill-green { background:#dcfce7; color:#15803d; }
.gr-pill-blue  { background:#dbeafe; color:#1d4ed8; }
.gr-pill-violet{ background:#ede9fe; color:#6d28d9; }
.gr-pill-orange{ background:#fef3c7; color:#92400e; }

/* Kasus color badges */
.gr-kasus-badge{ display:inline-block; font-size:12px; font-weight:900; border-radius:8px; padding:2px 9px; }
.gr-kasus-akk  { background:#dbeafe; color:#1d4ed8; }
.gr-kasus-dat  { background:#dcfce7; color:#15803d; }
.gr-kasus-gen  { background:#fef3c7; color:#92400e; }

/* Kasus article quiz blank */
.ak-blank{ color:#be185d; font-weight:900; font-size:1.1em; }

/* 3-column choice grid for Präp+Kasus */
.gr-choices-3{ grid-template-columns:1fr 1fr 1fr !important; }
.gr-kasus-btn-akk:hover:not(:disabled){ border-color:#2563eb !important; background:#dbeafe !important; color:#1d4ed8 !important; }
.gr-kasus-btn-dat:hover:not(:disabled){ border-color:#16a34a !important; background:#dcfce7 !important; color:#15803d !important; }
.gr-kasus-btn-gen:hover:not(:disabled){ border-color:#d97706 !important; background:#fef3c7 !important; color:#92400e !important; }
.gr-kasus-btn-akk.gr-choice-correct{ border-color:#2563eb !important; background:#dbeafe !important; color:#1d4ed8 !important; }
.gr-kasus-btn-dat.gr-choice-correct{ border-color:#16a34a !important; background:#dcfce7 !important; color:#15803d !important; }
.gr-kasus-btn-gen.gr-choice-correct{ border-color:#d97706 !important; background:#fef3c7 !important; color:#92400e !important; }

/* Kasus lesson cards */
.gr-count-akk{ background:#dbeafe; color:#1d4ed8; }
.gr-count-dat{ background:#dcfce7; color:#15803d; }
.gr-count-gen{ background:#fef3c7; color:#92400e; }
.gr-kasus-card-akk:hover{ border-color:#2563eb; }
.gr-kasus-card-dat:hover{ border-color:#16a34a; }
.gr-kasus-card-gen:hover{ border-color:#d97706; }

/* Perfekt aux badge in feedback */
.pf-aux{ display:inline-block; font-size:13px; font-weight:900; border-radius:8px; padding:2px 8px; margin-inline-end:4px; }
.pf-aux-haben{ background:#dbeafe; color:#1d4ed8; }
.pf-aux-sein { background:#dcfce7; color:#15803d; }

/* haben/sein 2-choice layout */
.pf-aux-choices{ grid-template-columns:1fr 1fr !important; }
.pf-btn-haben{ border-color:#93c5fd !important; font-size:18px !important; font-weight:900 !important; }
.pf-btn-sein { border-color:#86efac !important; font-size:18px !important; font-weight:900 !important; }
.pf-btn-haben:hover:not(:disabled){ background:#dbeafe !important; border-color:#2563eb !important; }
.pf-btn-sein:hover:not(:disabled) { background:#dcfce7 !important; border-color:#16a34a !important; }

/* Präteritum note */
.gr-praet-note{
  font-size:12px; color:var(--muted); background:var(--bg);
  border:1.5px solid var(--line); border-radius:10px;
  padding:8px 14px; margin-bottom:12px; font-weight:600;
}
.gr-count-praet{ background:#fef3c7; color:#92400e; }

/* Verb cards */
.gr-verb-card .fc-lesson-card-title{ font-size:16px; font-weight:900; letter-spacing:.3px; }

/* Conjugation table */
.gr-table-details{
  width:100%; max-width:440px;
  background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  overflow:hidden;
}
.gr-table-details summary{
  padding:12px 16px; cursor:pointer; font-size:14px; font-weight:700;
  color:var(--muted); user-select:none;
}
.gr-table-details summary:hover{ color:var(--brand); }
.gr-konj-table{ width:100%; border-collapse:collapse; }
.gr-konj-table th{
  padding:8px 14px; background:var(--bg); text-align:right;
  font-size:12px; color:var(--muted); font-weight:700;
  border-bottom:1.5px solid var(--line);
}
.gr-konj-table td{ padding:9px 14px; border-bottom:1px solid var(--line); font-size:14px; }
.gr-konj-table tr:last-child td{ border-bottom:none; }
.gr-form{ font-weight:800; color:#2563eb; }
.gr-example{ color:var(--muted); font-size:13px; }

/* Dark mode */
@media(prefers-color-scheme:dark){
  .gr-choice-btn{ background:#1e293b; border-color:#334155; color:#f1f5f9; }
  .gr-choice-btn:hover:not(:disabled){ background:#1e3a5f; border-color:#3b82f6; }
  .gr-big-card{ background:#1e293b; border-color:#334155; color:#f1f5f9; }
  .gr-big-card-examples{ background:#0b1220; }
  .gr-table-details{ background:#1e293b; border-color:#334155; }
  .gr-konj-table th{ background:#0b1220; }
  .gr-konj-table td{ border-color:#334155; }
  .pf-aux-haben{ background:#1e3a5f; color:#93c5fd; }
  .pf-aux-sein { background:#052e16; color:#86efac; }
  .gr-praet-note{ background:#1e293b; border-color:#334155; }
  .gr-count-praet{ background:#422006; color:#fde68a; }
  .gr-pill-green{ background:#052e16; color:#86efac; }
  .gr-pill-blue { background:#1e3a5f; color:#93c5fd; }
}

/* Mobile */
@media(max-width:480px){
  .gr-choices{ grid-template-columns:1fr 1fr; gap:8px; }
  .gr-choice-btn{ font-size:14px; padding:12px 6px; }
  .gr-big-card{ flex-direction:column; gap:10px; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE HEROES (flashcards + grammatik pickers)
══════════════════════════════════════════════════════════════ */

.pg-hero{
  border-radius:20px; padding:28px 24px; margin-bottom:20px;
  display:flex; align-items:center; gap:20px;
  overflow:hidden; position:relative;
}
.pg-hero-flash{
  background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 60%,#3b82f6 100%);
  color:#fff;
}
.pg-hero-gram{
  background:linear-gradient(135deg,#4c1d95 0%,#7c3aed 60%,#8b5cf6 100%);
  color:#fff;
}
.pg-hero-body{ flex:1; z-index:1; }
.pg-hero-badge{
  display:inline-block; background:rgba(255,255,255,.18);
  border-radius:20px; padding:3px 12px; font-size:12px; font-weight:700;
  margin-bottom:10px; backdrop-filter:blur(4px);
}
.pg-hero-title{ margin:0 0 6px; font-size:22px; font-weight:900; line-height:1.3; }
.pg-hero-sub{ margin:0 0 16px; font-size:13px; opacity:.85; }
.pg-hero-cta{
  display:inline-block; background:#fff; color:#1d4ed8;
  border-radius:12px; padding:10px 20px; font-size:14px; font-weight:800;
  text-decoration:none; transition:opacity .15s, transform .15s;
}
.pg-hero-cta:hover{ opacity:.92; transform:translateY(-1px); }
.pg-hero-cta-gram{ color:#6d28d9; }

/* Flashcard demo visual */
.pg-hero-visual{ flex-shrink:0; }
.pg-fc-demo{ display:flex; flex-direction:column; gap:8px; }
.pg-fc-card{
  background:rgba(255,255,255,.15); backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.25); border-radius:12px;
  padding:10px 18px; display:flex; flex-direction:column;
  align-items:center; gap:2px; min-width:110px; text-align:center;
}
.pg-fc-card small{ font-size:11px; opacity:.7; }
.pg-fc-card strong{ font-size:15px; font-weight:800; }
.pg-fc-back{ background:rgba(255,255,255,.25); }

/* Grammatik demo visual */
.pg-gram-demo{ display:flex; flex-direction:column; gap:8px; }
.pgd-row{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border-radius:10px; padding:8px 12px;
}
.pgd-sg{ font-size:12px; opacity:.8; font-weight:600; }
.pgd-arrow{ font-size:14px; opacity:.6; }
.pgd-pl{ font-size:13px; font-weight:800; }
.pgd-quiz{ font-size:20px; font-weight:900; color:#fde68a; }

/* Artikel quick launch bar */
.artikel-quick-launch{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:2px solid #bfdbfe; border-radius:16px;
  padding:14px 18px; text-decoration:none; color:var(--text);
  margin-bottom:24px;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.artikel-quick-launch:hover{ border-color:#2563eb; transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,99,235,.12); }
.aql-left{ flex:1; }
.aql-title{ display:block; font-size:15px; font-weight:800; margin-bottom:3px; }
.aql-sub{ font-size:12px; color:var(--muted); }
.aql-badges{ display:flex; gap:6px; }
.aql-der{ background:#eff6ff; color:#1d4ed8; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:800; }
.aql-die{ background:#fff1f2; color:#be123c; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:800; }
.aql-das{ background:#f0fdf4; color:#15803d; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:800; }
.aql-arrow{ font-size:18px; color:#2563eb; font-weight:700; }

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE TOOLS SECTION
══════════════════════════════════════════════════════════════ */

/* Pro tools grid */
.tools-compact-section{ margin-bottom:16px; }
.tcs-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.tcs-title{ font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.tcs-sub  { font-size:12px; color:var(--brand); font-weight:700; text-decoration:none; }
.tcs-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:6px;
}
.tcs-card{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border:1.5px solid var(--line); border-radius:12px;
  text-decoration:none; color:inherit; background:var(--card);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.tcs-card:hover{
  border-color:var(--ic, #2563eb);
  box-shadow:0 3px 10px rgba(0,0,0,.07);
  transform:translateY(-1px);
}
.tcs-icon{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ic, #2563eb) 12%, transparent);
  color:var(--ic, #2563eb);
}
.tcs-body{ flex:1; min-width:0; }
.tcs-name{ font-size:12.5px; font-weight:800; margin-bottom:1px; }
.tcs-desc{ font-size:10.5px; color:var(--muted); direction:ltr; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcs-arrow{ display:none; }

/* ── Game-like icon backgrounds ── */
.tcs-ic-flash  { background:linear-gradient(135deg,#1d4ed8,#3b82f6); flex-direction:column; gap:2px; }
.tcs-ic-gram   { background:linear-gradient(135deg,#065f46,#10b981); flex-direction:column; gap:3px; }
.tcs-ic-alpha  { background:linear-gradient(135deg,#831843,#ec4899); }
.tcs-ic-zahl   { background:linear-gradient(135deg,#4c1d95,#8b5cf6); }
.tcs-ic-hoer   { background:linear-gradient(135deg,#c2410c,#f97316); }
.tcs-ic-iv     { background:linear-gradient(135deg,#0f766e,#14b8a6); }

/* Flashcard icon: DE / AR stacked */
.tci-top { font-size:11px; font-weight:900; color:#fff; line-height:1; letter-spacing:.5px; }
.tci-bot { font-size:11px; font-weight:900; color:rgba(255,255,255,.65); line-height:1; letter-spacing:.5px; }

/* Grammatik icon: der / die pills */
.tci-gram-der,
.tci-gram-die {
  font-size:9px; font-weight:900; color:#fff;
  background:rgba(255,255,255,.22); border-radius:5px;
  padding:2px 5px; line-height:1.3; letter-spacing:.3px;
}

/* Alphabet icon: Aa */
.tci-letter { font-size:15px; font-weight:900; color:#fff; letter-spacing:-1px; line-height:1; }

/* Zahlen icon: 42 */
.tci-num { font-size:17px; font-weight:900; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }

/* Hören icon: animated wave bars */
.tci-wave { display:flex; align-items:center; gap:3px; height:24px; }
.tci-wave i {
  display:block; width:3px; border-radius:99px; background:#fff;
  animation:tciWave 1.1s ease-in-out infinite;
}
.tci-wave i:nth-child(1){ height:8px;  animation-delay:0s;   }
.tci-wave i:nth-child(2){ height:15px; animation-delay:.18s; }
.tci-wave i:nth-child(3){ height:22px; animation-delay:.36s; }
.tci-wave i:nth-child(4){ height:15px; animation-delay:.54s; }
.tci-wave i:nth-child(5){ height:8px;  animation-delay:.72s; }
@keyframes tciWave{
  0%,100%{ transform:scaleY(1); opacity:1; }
  50%{ transform:scaleY(.45); opacity:.55; }
}

/* Interview icon: mic emoji */
.tci-mic { font-size:20px; line-height:1; }

@media(prefers-color-scheme:dark){
  .tcs-card{ background:#1e293b; border-color:#334155; }
  .tcs-card:hover{ box-shadow:0 4px 16px rgba(0,0,0,.25); }
  .tcs-icon{ background:color-mix(in srgb, var(--ic, #2563eb) 18%, transparent); }
  .tcs-ic-flash  { background:linear-gradient(135deg,#1d4ed8,#3b82f6); }
  .tcs-ic-gram   { background:linear-gradient(135deg,#065f46,#10b981); }
  .tcs-ic-alpha  { background:linear-gradient(135deg,#831843,#ec4899); }
  .tcs-ic-zahl   { background:linear-gradient(135deg,#4c1d95,#8b5cf6); }
  .tcs-ic-hoer   { background:linear-gradient(135deg,#c2410c,#f97316); }
  .tcs-ic-iv     { background:linear-gradient(135deg,#0f766e,#14b8a6); }
}
@media(max-width:480px){
  .tcs-grid{ grid-template-columns:1fr 1fr; gap:7px; }
  .tcs-card{ padding:11px 10px; gap:9px; }
  .tcs-icon{ width:36px; height:36px; }
  .tcs-name{ font-size:12px; }
  .tci-letter{ font-size:16px; }
  .tci-num   { font-size:18px; }
  .tci-mic   { font-size:18px; }
}

.tools-section{ margin-bottom:6px; }
.tools-section-label{
  font-size:11px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px;
  margin-bottom:10px; padding-right:2px;
}
.tools-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.tool-feat-card{
  border-radius:18px; overflow:hidden;
  text-decoration:none; color:#fff;
  display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.tool-feat-card:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.15); }

.tool-feat-flash{
  background:linear-gradient(150deg,#1e3a8a 0%,#2563eb 55%,#60a5fa 100%);
}
.tool-feat-gram{
  background:linear-gradient(150deg,#4c1d95 0%,#7c3aed 55%,#a78bfa 100%);
}
.tool-feat-iv{
  background:linear-gradient(150deg,#78350f 0%,#d97706 55%,#fbbf24 100%);
}
.tool-feat-ho{
  background:linear-gradient(150deg,#0f4c75 0%,#1b6ca8 55%,#118eca 100%);
}
.tool-feat-za{
  background:linear-gradient(150deg,#064e3b 0%,#065f46 55%,#059669 100%);
}
.tool-feat-al{
  background:linear-gradient(150deg,#831843 0%,#be185d 55%,#ec4899 100%);
}
.tfc-demo-al{
  display:flex; align-items:center; gap:8px; padding:8px 0;
}
.tfc-al-a   { font-size:36px; font-weight:900; color:#fff; line-height:1; }
.tfc-al-wie { font-size:13px; color:rgba(255,255,255,.65); font-weight:600; }
.tfc-al-word{ font-size:16px; font-weight:800; color:rgba(255,255,255,.9); }
.tfc-demo-za{
  display:flex; align-items:center; gap:8px; padding:6px 0;
}
.tfc-za-num{ font-size:28px; font-weight:900; color:#fff; }
.tfc-za-eq { font-size:18px; color:rgba(255,255,255,.6); }
.tfc-za-de { font-size:12px; font-weight:700; color:rgba(255,255,255,.85); }

/* Hören wave demo */
.tfc-demo-ho{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:8px 0;
}
.tfc-ho-wave{
  display:flex; align-items:flex-end; gap:4px; height:32px;
}
.tfc-ho-wave span{
  width:5px; background:rgba(255,255,255,.7); border-radius:3px;
  animation:hoWave 1.2s ease-in-out infinite;
}
.tfc-ho-wave span:nth-child(1){ height:12px; animation-delay:0s; }
.tfc-ho-wave span:nth-child(2){ height:22px; animation-delay:.15s; }
.tfc-ho-wave span:nth-child(3){ height:30px; animation-delay:.3s; }
.tfc-ho-wave span:nth-child(4){ height:20px; animation-delay:.45s; }
.tfc-ho-wave span:nth-child(5){ height:10px; animation-delay:.6s; }
@keyframes hoWave{
  0%,100%{ transform:scaleY(1); opacity:.7; }
  50%{ transform:scaleY(1.5); opacity:1; }
}
.tfc-ho-label{
  font-size:12px; font-weight:700; color:rgba(255,255,255,.85);
  letter-spacing:.3px;
}

/* Interview tool demo visual */
.tfc-demo-iv{
  display:flex; flex-direction:column; gap:6px; padding:8px 0;
}
.tfc-iv-q{
  font-size:12px; font-weight:700; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.12); border-radius:8px;
  padding:7px 10px; line-height:1.4;
}
.tfc-iv-hint{
  font-size:11px; color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.1); border-radius:8px;
  padding:5px 10px;
}

/* Top section with visual */
.tfc-top{
  padding:18px 18px 14px;
  display:flex; flex-direction:column; gap:12px;
}
.tfc-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.tfc-chip{
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  border-radius:20px; padding:3px 9px; font-size:11px; font-weight:700;
}

/* Flashcard demo inside card */
.tfc-demo-flash{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
}
.tfc-card-de{
  background:rgba(255,255,255,.2); border-radius:8px;
  padding:5px 12px; font-size:13px; font-weight:800; direction:ltr;
  align-self:stretch; text-align:center;
}
.tfc-flip-icon{ font-size:16px; opacity:.6; align-self:center; }
.tfc-card-ar{
  background:rgba(255,255,255,.35); border-radius:8px;
  padding:5px 12px; font-size:14px; font-weight:800;
  align-self:stretch; text-align:center;
}

/* Grammatik der/die/das demo */
.tfc-demo-gram{ display:flex; gap:6px; }
.tfc-der,.tfc-die,.tfc-das{
  flex:1; text-align:center; border-radius:10px;
  padding:8px 0; font-size:14px; font-weight:900;
}
.tfc-der{ background:rgba(96,165,250,.35); }
.tfc-die{ background:rgba(251,113,133,.35); }
.tfc-das{ background:rgba(74,222,128,.35); }

/* Bottom info */
.tfc-bottom{
  background:rgba(0,0,0,.18); backdrop-filter:blur(6px);
  padding:14px 18px; margin-top:auto;
}
.tfc-bottom h3{ margin:0 0 3px; font-size:15px; font-weight:900; }
.tfc-bottom p{ margin:0 0 8px; font-size:12px; opacity:.8; }
.tfc-cta{
  display:inline-block; background:rgba(255,255,255,.22);
  border-radius:8px; padding:5px 12px; font-size:12px; font-weight:800;
  transition:background .15s;
}
.tool-feat-card:hover .tfc-cta{ background:rgba(255,255,255,.35); }

/* Artikel quick launch bar */
.artikel-quick-launch{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:2px solid #bfdbfe; border-radius:16px;
  padding:14px 18px; text-decoration:none; color:var(--text);
  margin-bottom:24px;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.artikel-quick-launch:hover{ border-color:#2563eb; transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,99,235,.12); }
.aql-left{ flex:1; }
.aql-title{ display:block; font-size:15px; font-weight:800; margin-bottom:3px; }
.aql-sub{ font-size:12px; color:var(--muted); }
.aql-badges{ display:flex; gap:6px; }
.aql-der{ background:#eff6ff; color:#1d4ed8; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:800; }
.aql-die{ background:#fff1f2; color:#be123c; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:800; }
.aql-das{ background:#f0fdf4; color:#15803d; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:800; }
.aql-arrow{ font-size:18px; color:#2563eb; font-weight:700; }

/* Start Learning CTA Button */
.start-learning-btn{
  display:block; width:100%; margin-top:10px;
  background:linear-gradient(135deg,#15803d 0%,#16a34a 50%,#22c55e 100%);
  color:#fff; text-align:center; text-decoration:none;
  border-radius:14px; padding:15px;
  font-size:16px; font-weight:900; letter-spacing:.3px;
  box-shadow:0 4px 18px rgba(22,163,74,.35);
  transition:transform .15s, box-shadow .15s, opacity .15s;
}
.start-learning-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(22,163,74,.45);
  opacity:.95;
}
.start-learning-btn:active{ transform:scale(.98); }

/* Dark mode */
@media(prefers-color-scheme:dark){
  .aql-der{ background:#1e3a5f; color:#93c5fd; }
  .aql-die{ background:#3f1524; color:#fda4af; }
  .aql-das{ background:#14311e; color:#86efac; }
  .artikel-quick-launch{ background:#1e293b; border-color:#1e3a8a; }
  .artikel-quick-launch:hover{ border-color:#3b82f6; }
}

/* Mobile */
@media(max-width:640px){
  .pg-hero{ flex-direction:column; padding:22px 18px; }
  .pg-hero-visual{ display:none; }
  .pg-hero-title{ font-size:18px; }
  .tools-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .tfc-top{ padding:14px 14px 10px; }
  .tfc-bottom{ padding:10px 14px; }
  .tfc-bottom h3{ font-size:13px; }
  .tfc-bottom p{ display:none; }
  .aql-badges{ display:none; }
}

/* ══════════════════════════════════════════════════════════════
   DAILY WORD (sidebar widget)
══════════════════════════════════════════════════════════════ */

.daily-word-card{
  background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%);
  border-radius:14px; padding:14px 16px; margin-bottom:14px; color:#fff;
}
.dw-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.dw-badge{ font-size:11px; font-weight:800; background:rgba(255,255,255,.18); border-radius:20px; padding:3px 9px; }
.dw-date{ font-size:11px; opacity:.7; }
.dw-de{ font-size:20px; font-weight:900; margin-bottom:4px; display:flex; align-items:center; gap:7px; }
.dw-art{ font-size:11px; font-weight:800; border-radius:6px; padding:2px 7px; }
.dw-art-der{ background:#3b82f6; }
.dw-art-die{ background:#e11d48; }
.dw-art-das{ background:#16a34a; }
.dw-ar{ font-size:16px; font-weight:700; opacity:.9; margin-bottom:10px; }
.dw-practice{ display:inline-block; font-size:11px; font-weight:800; color:rgba(255,255,255,.8); text-decoration:none; transition:color .15s; }
.dw-practice:hover{ color:#fff; }

/* ══════════════════════════════════════════════════════════════
   SAVED WORDS (flashcards picker)
══════════════════════════════════════════════════════════════ */

.sw-section{ margin-top:4px; }
.sw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:12px; }
.sw-word-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 12px 10px; position:relative; display:flex; flex-direction:column; gap:4px;
}
.sw-word-de{ font-size:14px; font-weight:800; display:flex; align-items:center; gap:5px; }
.sw-art{ font-size:10px; font-weight:800; color:#fff; border-radius:5px; padding:1px 6px; flex-shrink:0; }
.sw-word-ar{ font-size:13px; color:var(--muted); }
.sw-remove{
  position:absolute; top:6px; left:6px; background:none; border:none;
  font-size:11px; color:var(--muted); cursor:pointer; padding:2px 4px;
  border-radius:4px; transition:color .15s, background .15s;
}
.sw-remove:hover{ color:#b91c1c; background:#fee2e2; }
.sw-clear-btn{
  background:none; border:1.5px solid var(--line); border-radius:10px;
  color:var(--muted); font-size:13px; font-weight:700; padding:8px 16px;
  cursor:pointer; font-family:inherit; transition:border-color .15s, color .15s;
}
.sw-clear-btn:hover{ border-color:#b91c1c; color:#b91c1c; }

@media(prefers-color-scheme:dark){
  .sw-word-card{ background:#1e293b; border-color:#334155; }
}

/* ═══════════════════════════════════════════════════════════════
   INTERVIEW SIMULATOR
═══════════════════════════════════════════════════════════════ */

/* Hero */
.pg-hero-iv{
  background:linear-gradient(135deg,#d97706 0%,#b45309 55%,#92400e 100%);
}

/* How-it-works bar */
.iv-how{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 20px; margin-bottom:24px;
}
.iv-how-title{ font-size:13px; font-weight:700; color:var(--muted); margin-bottom:12px; }
.iv-how-steps{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.iv-step{
  display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
}
.iv-step-n{
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,#d97706,#b45309);
  color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.iv-step-arrow{ color:var(--muted); font-size:14px; }

/* Category grid */
.iv-cats-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px; margin-bottom:28px;
}
.iv-cat-card{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  padding:18px 16px; text-decoration:none; color:inherit;
  transition:border-color .2s, transform .2s, box-shadow .2s;
  cursor:pointer;
}
.iv-cat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.iv-cat-icon{ font-size:32px; flex-shrink:0; }
.iv-cat-info{ flex:1; }
.iv-cat-label{ font-size:15px; font-weight:800; }
.iv-cat-count{ font-size:12px; color:var(--muted); margin-top:2px; }
.iv-cat-arrow{ color:var(--muted); font-size:18px; }

/* Color variants */
.iv-cat-blue:hover  { border-color:#2563eb; }
.iv-cat-green:hover { border-color:#16a34a; }
.iv-cat-purple:hover{ border-color:#7c3aed; }
.iv-cat-orange:hover{ border-color:#d97706; }
.iv-cat-teal:hover  { border-color:#0d9488; }

/* Saved hard questions (picker) */
.iv-saved-section{
  background:var(--card); border:1.5px solid #fde68a; border-radius:14px;
  padding:16px; margin-bottom:28px;
}
.iv-saved-header{
  display:flex; justify-content:space-between; align-items:center;
  font-size:14px; font-weight:800; margin-bottom:12px;
}
.iv-saved-clear{
  background:none; border:1.5px solid var(--line); border-radius:8px;
  color:var(--muted); font-size:12px; font-weight:700; padding:4px 10px;
  cursor:pointer; font-family:inherit; transition:color .15s, border-color .15s;
}
.iv-saved-clear:hover{ color:#b91c1c; border-color:#b91c1c; }
.iv-saved-item{
  border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; margin-bottom:8px; position:relative;
}
.iv-saved-q{ font-size:14px; font-weight:700; margin-bottom:4px; }
.iv-saved-hint{ font-size:12px; color:var(--muted); }
.iv-saved-remove{
  position:absolute; top:8px; left:8px; background:none; border:none;
  color:var(--muted); font-size:11px; cursor:pointer; padding:2px 5px;
  border-radius:4px; transition:color .15s, background .15s;
}
.iv-saved-remove:hover{ color:#b91c1c; background:#fee2e2; }

/* ── Practice Mode ─────────────────────────────────────────── */
.iv-practice-wrap{ max-width:680px; margin:0 auto; }

.iv-prac-nav{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.iv-back-btn{
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:700;
  padding:6px 12px; border:1.5px solid var(--line); border-radius:10px;
  transition:border-color .15s, color .15s;
}
.iv-back-btn:hover{ border-color:var(--brand); color:var(--brand); }
.iv-prac-cat{
  display:flex; align-items:center; gap:6px;
  font-size:14px; font-weight:800;
}
.iv-prac-progress-label{ font-size:13px; color:var(--muted); font-weight:700; }

.iv-progress-bar-wrap{
  height:5px; background:var(--line); border-radius:99px;
  margin-bottom:20px; overflow:hidden;
}
.iv-progress-bar{
  height:100%;
  background:linear-gradient(90deg,#d97706,#b45309);
  border-radius:99px; transition:width .4s ease;
}

/* Question card */
.iv-q-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:18px;
  padding:22px 22px 18px; margin-bottom:18px; display:none;
  transition:border-color .2s;
}
.iv-q-card.iv-q-active{ display:block; }
.iv-q-card.iv-rated-easy{ border-color:#16a34a; }
.iv-q-card.iv-rated-hard{ border-color:#d97706; }

.iv-q-number{
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;
}
.iv-q-de{
  font-size:20px; font-weight:800; line-height:1.45;
  color:var(--text); margin-bottom:16px;
}

.iv-hint-box{
  background:#fef9ec; border:1.5px solid #fde68a; border-radius:12px;
  padding:12px 14px; margin-bottom:16px;
}
.iv-hint-label{
  font-size:11px; font-weight:800; color:#92400e;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px;
}
.iv-hint-text{ font-size:14px; line-height:1.65; color:#78350f; }

.iv-reveal-btn{
  width:100%; padding:14px; border:2px solid #d97706; border-radius:12px;
  background:transparent; color:#b45309; font-size:15px; font-weight:800;
  cursor:pointer; font-family:inherit; display:flex; align-items:center;
  justify-content:center; gap:8px;
  transition:background .2s, color .2s;
}
.iv-reveal-btn:hover{ background:#d97706; color:#fff; }
.iv-reveal-icon{ font-size:16px; }

.iv-answer-box{
  margin-top:16px; border-top:1.5px solid var(--line);
  padding-top:16px;
}
.iv-ans-label{
  font-size:11px; font-weight:800; color:#166534;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;
}
.iv-ans-label-ar{ color:#1d4ed8; margin-top:14px; }
.iv-ans-de{
  font-size:15px; line-height:1.7; color:var(--text);
  background:#f0fdf4; border-radius:10px; padding:12px 14px;
  margin-bottom:4px;
}
.iv-ans-ar{
  font-size:14px; line-height:1.7; color:#1e40af;
  background:#eff6ff; border-radius:10px; padding:12px 14px;
}

/* Rating buttons */
.iv-q-actions{
  display:flex; gap:10px; margin-top:16px;
}
.iv-rate-btn{
  flex:1; padding:11px; border:none; border-radius:12px;
  font-size:14px; font-weight:800; cursor:pointer;
  font-family:inherit; transition:opacity .15s, transform .1s;
}
.iv-rate-btn:active{ transform:scale(.97); }
.iv-rate-easy{ background:#dcfce7; color:#15803d; }
.iv-rate-hard{ background:#fef9c3; color:#854d0e; }
.iv-rate-easy:hover{ background:#bbf7d0; }
.iv-rate-hard:hover{ background:#fef08a; }

/* Nav buttons */
.iv-nav-btns{
  display:flex; gap:10px; margin-bottom:32px;
}
.iv-nav-prev, .iv-nav-next{
  flex:1; padding:13px; border-radius:12px; font-size:15px; font-weight:800;
  cursor:pointer; font-family:inherit; transition:background .2s, color .2s;
}
.iv-nav-prev{
  background:var(--card); border:1.5px solid var(--line); color:var(--muted);
}
.iv-nav-prev:disabled{ opacity:.4; cursor:default; }
.iv-nav-next{
  background:linear-gradient(135deg,#d97706,#b45309); border:none; color:#fff;
}
.iv-nav-next:hover{ opacity:.92; }

/* Done screen */
.iv-done-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:20px;
  padding:36px 28px; text-align:center; margin-bottom:20px;
}
.iv-done-icon{ font-size:52px; margin-bottom:12px; }
.iv-done-card h2{ margin:0 0 8px; font-size:22px; }
.iv-done-card p{ margin:0 0 20px; color:var(--muted); font-size:15px; }
.iv-done-stats{
  display:flex; justify-content:center; gap:16px; margin-bottom:24px;
}
.iv-stat-easy, .iv-stat-hard{
  padding:8px 18px; border-radius:20px; font-size:14px; font-weight:800;
}
.iv-stat-easy{ background:#dcfce7; color:#15803d; }
.iv-stat-hard{ background:#fef9c3; color:#854d0e; }
.iv-done-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.iv-done-btn{
  padding:12px 24px; border-radius:12px; font-size:15px; font-weight:800;
  cursor:pointer; font-family:inherit; text-decoration:none;
  transition:opacity .15s;
}
.iv-done-restart{
  background:linear-gradient(135deg,#d97706,#b45309); color:#fff; border:none;
}
.iv-done-home{
  background:var(--card); color:var(--text);
  border:1.5px solid var(--line); display:inline-flex; align-items:center;
}
.iv-done-btn:hover{ opacity:.88; }

/* Dark mode */
@media(prefers-color-scheme:dark){
  .iv-cat-card{ background:#1e293b; border-color:#334155; }
  .iv-cat-card:hover{ border-color:#60a5fa; }
  .iv-how{ background:#1e293b; border-color:#334155; }
  .iv-q-card{ background:#1e293b; border-color:#334155; }
  .iv-q-card.iv-rated-easy{ border-color:#22c55e; }
  .iv-q-card.iv-rated-hard{ border-color:#f59e0b; }
  .iv-hint-box{ background:#1c1708; border-color:#713f12; }
  .iv-hint-text{ color:#fde68a; }
  .iv-hint-label{ color:#fbbf24; }
  .iv-ans-de{ background:#052e16; color:#d1fae5; }
  .iv-ans-ar{ background:#1e1b4b; color:#a5b4fc; }
  .iv-ans-label{ color:#4ade80; }
  .iv-ans-label-ar{ color:#818cf8; }
  .iv-done-card{ background:#1e293b; border-color:#334155; }
  .iv-saved-section{ background:#1e293b; border-color:#713f12; }
  .iv-saved-item{ border-color:#334155; }
  .iv-saved-q{ color:#e2e8f0; }
  .iv-back-btn{ background:#1e293b; border-color:#334155; color:#94a3b8; }
}

/* Mobile */
@media(max-width:640px){
  .iv-cats-grid{ grid-template-columns:1fr; }
  .iv-how-steps{ gap:6px; }
  .iv-step-arrow{ display:none; }
  .iv-q-de{ font-size:17px; }
  .iv-done-actions{ flex-direction:column; }
  .iv-done-btn{ width:100%; text-align:center; justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════════
   HÖREN — LISTENING TRAINER
═══════════════════════════════════════════════════════════════ */

/* Hero */
.pg-hero-ho{
  background:linear-gradient(135deg,#0f4c75 0%,#1b6ca8 55%,#118eca 100%);
}

/* No-support banner */
.ho-nosupport-banner{
  background:#fef9c3; border:1.5px solid #fde047; border-radius:12px;
  padding:12px 16px; margin-bottom:16px; font-size:14px; color:#713f12;
  transition:background .3s;
}

/* Tip bar */
.ho-tip-bar{
  background:#eff6ff; border:1.5px solid #bfdbfe; border-radius:12px;
  padding:11px 16px; margin-bottom:22px;
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; line-height:1.6; color:#1e40af;
}
.ho-tip-icon{ font-size:16px; flex-shrink:0; margin-top:1px; }

/* Stories grid */
.ho-stories-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px; margin-bottom:32px;
}
.ho-story-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  padding:18px 16px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.ho-story-card:hover{
  border-color:#1b6ca8; transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.ho-card-top{ display:flex; align-items:center; gap:8px; }
.ho-level{
  font-size:10px; font-weight:800; letter-spacing:.5px;
  padding:3px 8px; border-radius:20px; text-transform:uppercase;
}
.ho-level-a1{ background:#dcfce7; color:#15803d; }
.ho-level-a2{ background:#dbeafe; color:#1d4ed8; }
.ho-level-b1{ background:#fef9c3; color:#854d0e; }
.ho-topic-tag{
  font-size:12px; font-weight:600; color:var(--muted);
  background:var(--bg); border-radius:8px; padding:2px 8px;
}
.ho-card-title{ font-size:15px; font-weight:800; margin:0; line-height:1.4; }
.ho-card-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--muted);
}
.ho-card-arrow{ font-size:16px; }

/* ── Player ──────────────────────────────────────────────── */
.ho-player-wrap{ max-width:700px; margin:0 auto; }

.ho-player-nav{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.ho-back-btn{
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:700;
  padding:6px 12px; border:1.5px solid var(--line); border-radius:10px;
  transition:border-color .15s, color .15s;
}
.ho-back-btn:hover{ border-color:#1b6ca8; color:#1b6ca8; }
.ho-player-meta{ display:flex; gap:8px; align-items:center; }

.ho-story-title{
  font-size:22px; font-weight:900; margin:0 0 18px;
  line-height:1.35;
}

/* Controls card */
.ho-controls-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:18px;
  padding:20px; margin-bottom:18px;
}
.ho-controls-row{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:16px;
}
.ho-btn-play{
  display:flex; align-items:center; gap:8px;
  padding:13px 32px; border:none; border-radius:14px;
  background:linear-gradient(135deg,#0f4c75,#1b6ca8);
  color:#fff; font-size:16px; font-weight:800;
  cursor:pointer; font-family:inherit;
  transition:opacity .15s, transform .1s;
  min-width:130px; justify-content:center;
}
.ho-btn-play:hover{ opacity:.9; }
.ho-btn-play:active{ transform:scale(.97); }

.ho-btn-prev, .ho-btn-next{
  width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--card); color:var(--text); font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s;
}
.ho-btn-prev:hover, .ho-btn-next:hover{ border-color:#1b6ca8; background:#eff6ff; }
.ho-btn-prev:disabled, .ho-btn-next:disabled{ opacity:.35; cursor:default; }

.ho-btn-repeat{
  width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--card); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s;
}
.ho-btn-repeat.is-active{ border-color:#1b6ca8; background:#dbeafe; }

/* Speed row */
.ho-speed-row{
  display:flex; align-items:center; gap:6px; margin-bottom:14px;
  flex-wrap:wrap;
}
.ho-speed-label{ font-size:12px; font-weight:700; color:var(--muted); }
.ho-speed-btn{
  padding:5px 12px; border-radius:20px; border:1.5px solid var(--line);
  background:transparent; color:var(--muted); font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.ho-speed-btn.is-active{ border-color:#1b6ca8; background:#1b6ca8; color:#fff; }
.ho-speed-btn:hover:not(.is-active){ border-color:#1b6ca8; color:#1b6ca8; }

/* Progress */
.ho-progress-wrap{
  height:5px; background:var(--line); border-radius:99px; overflow:hidden;
}
.ho-progress-bar{
  height:100%; background:linear-gradient(90deg,#0f4c75,#118eca);
  border-radius:99px; transition:width .4s ease;
}
.ho-progress-label{
  margin-top:6px; font-size:12px; color:var(--muted); text-align:center;
  font-weight:600;
}

/* Text card */
.ho-text-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  padding:20px; margin-bottom:14px;
}
.ho-text-label{
  font-size:11px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px;
}
.ho-sentences{
  font-size:17px; line-height:1.85; color:var(--text);
}
.ho-sent{
  display:inline; cursor:pointer; border-radius:4px;
  padding:1px 2px; margin:0 1px;
  transition:background .15s, color .15s;
}
.ho-sent:hover{ background:rgba(27,108,168,.08); }
.ho-sent-active{
  background:#dbeafe; color:#1e3a8a; border-radius:6px;
  padding:2px 5px;
  box-shadow:0 0 0 2px #93c5fd;
}
.ho-sent-done{
  color:var(--muted);
  opacity:.55;
}

/* Toggle buttons */
.ho-toggle-btn{
  width:100%; padding:12px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--text); font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit; margin-bottom:12px;
  text-align:center; transition:border-color .15s, background .15s;
}
.ho-toggle-btn:hover{ border-color:#1b6ca8; background:#eff6ff; color:#1e40af; }

/* Translation box */
.ho-translation-box{
  background:#eff6ff; border:1.5px solid #bfdbfe; border-radius:14px;
  padding:16px 18px; margin-bottom:14px;
}
.ho-tr-label{
  font-size:11px; font-weight:800; color:#1d4ed8;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px;
}
.ho-translation-box p{
  margin:0; font-size:14px; line-height:1.8; color:#1e3a8a;
}

/* Vocabulary */
.ho-vocab-section{ margin-bottom:24px; }
.ho-vocab-toggle{ color:var(--text); }
.ho-vocab-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px; margin-bottom:8px;
}
.ho-vocab-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px;
}
.ho-vocab-de{
  font-size:13px; font-weight:800; margin-bottom:4px; color:var(--text);
}
.ho-vocab-ar{
  font-size:12px; color:var(--muted);
}

/* Story navigation */
.ho-story-nav{
  display:flex; justify-content:space-between; gap:10px;
  margin-bottom:32px;
}
.ho-story-prev, .ho-story-next{
  flex:1; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--text); text-decoration:none;
  font-size:13px; font-weight:700; line-height:1.4;
  transition:border-color .15s;
}
.ho-story-prev:hover, .ho-story-next:hover{ border-color:#1b6ca8; }
.ho-story-next{ text-align:left; direction:ltr; }

/* Dark mode */
@media(prefers-color-scheme:dark){
  .ho-story-card{ background:#1e293b; border-color:#334155; }
  .ho-story-card:hover{ border-color:#60a5fa; }
  .ho-controls-card{ background:#1e293b; border-color:#334155; }
  .ho-text-card{ background:#1e293b; border-color:#334155; }
  .ho-translation-box{ background:#1e3a5f; border-color:#1d4ed8; }
  .ho-translation-box p{ color:#bfdbfe; }
  .ho-tip-bar{ background:#0f2845; border-color:#1d4ed8; color:#93c5fd; }
  .ho-vocab-card{ background:#1e293b; border-color:#334155; }
  .ho-vocab-de{ color:#e2e8f0; }
  .ho-sent-active{ background:#1e3a5f; color:#bfdbfe; box-shadow:0 0 0 2px #1d4ed8; }
  .ho-toggle-btn{ background:#1e293b; border-color:#334155; color:#e2e8f0; }
  .ho-btn-prev,.ho-btn-next,.ho-btn-repeat{ background:#1e293b; border-color:#334155; color:#e2e8f0; }
  .ho-back-btn{ background:#1e293b; border-color:#334155; color:#94a3b8; }
  .ho-story-prev,.ho-story-next{ background:#1e293b; border-color:#334155; color:#e2e8f0; }
}

/* Mobile */
@media(max-width:640px){
  .ho-stories-grid{ grid-template-columns:1fr 1fr; }
  .ho-story-title{ font-size:18px; }
  .ho-sentences{ font-size:15px; }
  .ho-btn-play{ min-width:110px; padding:12px 20px; font-size:15px; }
  .ho-vocab-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:400px){
  .ho-stories-grid{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   ZAHLEN TRAINER
═══════════════════════════════════════════════════════════════ */

.pg-hero-za{
  background:linear-gradient(135deg,#064e3b 0%,#065f46 50%,#059669 100%);
}

/* Picker grid */
.za-modes-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px; margin-bottom:32px;
}
.za-mode-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:20px;
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  display:flex; flex-direction:column;
}
.za-mode-card:hover{
  transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.10);
}
.za-mode-zahlen:hover  { border-color:#059669; }
.za-mode-uhrzeit:hover { border-color:#2563eb; }
.za-mode-datum:hover   { border-color:#7c3aed; }

.za-mode-visual{
  padding:24px 20px 18px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; min-height:110px;
}
.za-mode-zahlen  .za-mode-visual{ background:linear-gradient(135deg,#064e3b,#059669); }
.za-mode-uhrzeit .za-mode-visual{ background:linear-gradient(135deg,#1e3a8a,#2563eb); }
.za-mode-datum   .za-mode-visual{ background:linear-gradient(135deg,#4c1d95,#7c3aed); }

.za-big-num{ font-size:36px; font-weight:900; color:#fff; line-height:1; }
.za-big-de { font-size:13px; color:rgba(255,255,255,.8); font-weight:600; }

/* Analog clock visual */
.za-clock{ width:64px; height:64px; }
.za-clock-face{
  width:64px; height:64px; border-radius:50%;
  border:3px solid rgba(255,255,255,.8);
  position:relative; background:rgba(255,255,255,.1);
}
.za-hand{
  position:absolute; bottom:50%; left:50%;
  transform-origin:bottom center;
  border-radius:3px;
}
.za-hour  { width:3px; height:18px; background:#fff; margin-left:-1.5px; }
.za-minute{ width:2px; height:24px; background:rgba(255,255,255,.85); margin-left:-1px; }
.za-clock-dot{
  position:absolute; top:50%; left:50%;
  width:6px; height:6px; background:#fff; border-radius:50%;
  transform:translate(-50%,-50%);
}

/* Calendar visual */
.za-cal{
  background:rgba(255,255,255,.15); border-radius:12px;
  padding:8px 18px; text-align:center;
}
.za-cal-month{ font-size:12px; font-weight:700; color:rgba(255,255,255,.8); }
.za-cal-day  { font-size:32px; font-weight:900; color:#fff; line-height:1.1; }

.za-mode-body{ padding:16px 18px 20px; }
.za-mode-body h3{ margin:0 0 5px; font-size:16px; font-weight:900; }
.za-mode-body p { margin:0 0 12px; font-size:13px; color:var(--muted); line-height:1.5; }
.za-cta{ font-size:13px; font-weight:800; color:#059669; }
.za-mode-uhrzeit .za-cta{ color:#2563eb; }
.za-mode-datum   .za-cta{ color:#7c3aed; }

/* ── Quiz ─────────────────────────────────────────────────── */
.za-quiz-wrap{ max-width:560px; margin:0 auto; }

.za-quiz-nav{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  flex-wrap:wrap;
}
.za-back-btn{
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:700;
  padding:6px 12px; border:1.5px solid var(--line); border-radius:10px;
  transition:border-color .15s, color .15s; white-space:nowrap;
}
.za-back-btn:hover{ border-color:var(--brand); color:var(--brand); }
.za-quiz-badge{
  font-size:13px; font-weight:800; padding:5px 12px; border-radius:20px;
}
.za-badge-green { background:#dcfce7; color:#15803d; }
.za-badge-blue  { background:#dbeafe; color:#1d4ed8; }
.za-badge-purple{ background:#ede9fe; color:#6d28d9; }

.za-score-display{
  margin-inline-start:auto; display:flex; gap:10px; align-items:center;
}
.za-streak{ font-size:14px; font-weight:800; color:#d97706; }
.za-score{
  font-size:14px; font-weight:800; background:#dcfce7; color:#15803d;
  padding:4px 12px; border-radius:20px;
}

/* Question card */
.za-q-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:20px;
  padding:30px 24px; text-align:center; margin-bottom:18px;
  min-height:140px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
}
.za-q-label{
  font-size:13px; font-weight:700; color:var(--muted);
}
.za-num-display{
  font-size:56px; font-weight:900; color:var(--text);
  line-height:1; display:block;
}
.za-time-display{
  font-size:44px; font-weight:900; color:var(--text);
  line-height:1; letter-spacing:2px; font-variant-numeric:tabular-nums;
  display:block; direction:ltr;
}
.za-q-main{
  font-size:18px; font-weight:800;
}

/* Choices */
.za-choices{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-bottom:14px;
}
.za-choice-btn{
  padding:14px 10px; border:2px solid var(--line); border-radius:14px;
  background:var(--card); color:var(--text); font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit; text-align:center; line-height:1.4;
  transition:border-color .15s, background .15s, transform .1s;
}
.za-choice-btn:hover:not(:disabled){ border-color:#059669; background:#f0fdf4; }
.za-choice-btn:active:not(:disabled){ transform:scale(.97); }
.za-choice-btn.za-correct{ border-color:#16a34a; background:#dcfce7; color:#14532d; }
.za-choice-btn.za-wrong  { border-color:#dc2626; background:#fee2e2; color:#991b1b; }
.za-choice-btn:disabled  { cursor:default; }

/* Shake animation */
@keyframes zaShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.za-shake{ animation:zaShake .4s ease; }

/* Feedback */
.za-feedback{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:14px; margin-bottom:12px;
  font-size:15px; font-weight:700;
}
.za-fb-correct{ background:#dcfce7; color:#14532d; }
.za-fb-wrong  { background:#fee2e2; color:#991b1b; }

/* Next button */
.za-next-btn{
  width:100%; padding:15px; border:none; border-radius:14px;
  background:linear-gradient(135deg,#064e3b,#059669);
  color:#fff; font-size:16px; font-weight:800;
  cursor:pointer; font-family:inherit; margin-bottom:32px;
  transition:opacity .15s;
}
.za-next-btn:hover{ opacity:.9; }

/* Dark mode */
@media(prefers-color-scheme:dark){
  .za-mode-card{ background:#1e293b; border-color:#334155; }
  .za-q-card   { background:#1e293b; border-color:#334155; }
  .za-choice-btn{ background:#1e293b; border-color:#334155; color:#e2e8f0; }
  .za-choice-btn:hover:not(:disabled){ border-color:#059669; background:#052e16; }
  .za-choice-btn.za-correct{ background:#052e16; }
  .za-choice-btn.za-wrong  { background:#450a0a; }
  .za-back-btn{ background:#1e293b; border-color:#334155; color:#94a3b8; }
  .za-fb-correct{ background:#052e16; color:#86efac; }
  .za-fb-wrong  { background:#450a0a; color:#fca5a5; }
}

/* Mobile */
@media(max-width:480px){
  .za-modes-grid{ grid-template-columns:1fr; }
  .za-num-display{ font-size:44px; }
  .za-time-display{ font-size:36px; }
  .za-choices{ grid-template-columns:1fr 1fr; gap:8px; }
  .za-choice-btn{ font-size:13px; padding:12px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LERNPFAD — مسار التعلم
   ═══════════════════════════════════════════════════════════════════════════ */

.lp-page{ min-height:100vh; padding-bottom:48px; }

/* Hero */
.lp-hero{
  text-align:center;
  padding:40px 24px 28px;
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 55%,#1e3a5f 100%);
  border-radius:20px;
  margin-bottom:28px;
  color:#fff;
}
.lp-hero-icon{ font-size:44px; margin-bottom:10px; }
.lp-hero-title{ font-size:26px; font-weight:900; margin:0 0 6px; }
.lp-hero-sub{ font-size:14px; color:rgba(255,255,255,.7); margin:0 0 18px; }
.lp-overall-bar{
  width:100%; max-width:380px; margin:0 auto 8px;
  background:rgba(255,255,255,.2); border-radius:99px; height:10px;
}
.lp-overall-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,#60a5fa,#a78bfa);
  transition:width .6s ease;
}
.lp-overall-pct{ font-size:13px; color:rgba(255,255,255,.65); font-weight:700; }

/* Path container */
.lp-path{ display:flex; flex-direction:column; }

/* Connector between levels */
.lp-connector{ display:flex; flex-direction:column; align-items:center; padding:4px 0; }
.lp-conn-line{ width:2px; height:28px; background:#e5e7eb; }
.lp-conn-arrow{ font-size:20px; line-height:1; }

/* Level card */
.lp-level{
  border:2px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  background:var(--card-bg,#fff);
  transition:border-color .25s, box-shadow .25s;
}
.lp-level:hover{ border-color:var(--lp-color); box-shadow:0 4px 18px color-mix(in srgb,var(--lp-color) 18%,transparent); }
.lp-level-complete{
  border-color:var(--lp-color) !important;
  box-shadow:0 4px 18px color-mix(in srgb,var(--lp-color) 15%,transparent);
}

/* Level header */
.lp-level-head{
  display:flex; align-items:center; gap:14px;
  padding:15px 16px;
  background:color-mix(in srgb,var(--lp-color) 7%,transparent);
  border-bottom:1px solid #f0f0f0;
}
.lp-badge{
  width:50px; height:50px; border-radius:13px;
  background:var(--lp-color); color:#fff;
  font-weight:900; font-size:14px; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 2px 8px color-mix(in srgb,var(--lp-color) 35%,transparent);
}
.lp-level-info{ flex:1; min-width:0; }
.lp-level-title{
  font-size:16px; font-weight:800; margin:0 0 3px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.lp-level-de{ font-size:12px; font-weight:500; color:var(--muted); }
.lp-level-desc{ font-size:12px; color:var(--muted); margin:0; }
.lp-level-count{
  font-size:13px; font-weight:700; color:var(--lp-color);
  white-space:nowrap; flex-shrink:0;
}
.lp-count-done{ font-size:20px; font-weight:900; line-height:1; }

/* Mini progress bar */
.lp-mini-bar{ height:4px; background:#f0f0f0; }
.lp-mini-fill{ height:100%; background:var(--lp-color); transition:width .5s ease; }

/* Module rows */
.lp-modules{ padding:4px 0; }
.lp-module{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  text-decoration:none; color:inherit;
  transition:background .15s;
  border-bottom:1px solid #f5f5f5;
}
.lp-module:last-child{ border-bottom:none; }
.lp-module:hover{ background:#f9fafb; }
.lp-module.lp-done{ background:color-mix(in srgb,var(--lp-color) 5%,transparent); }

.lp-mod-icon{ font-size:22px; flex-shrink:0; width:30px; text-align:center; }
.lp-mod-body{ flex:1; min-width:0; }
.lp-mod-name{
  display:block; font-size:14px; font-weight:600; color:var(--text);
  transition:color .15s;
}
.lp-mod-ar{ display:block; font-size:12px; color:var(--muted); margin-top:1px; }
.lp-module.lp-done .lp-mod-name{ color:var(--lp-color); }

.lp-mod-status{ flex-shrink:0; }
.lp-status-ring{
  display:block; width:22px; height:22px; border-radius:50%;
  border:2px solid #d1d5db;
}
.lp-status-check{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--lp-color); color:#fff;
  font-size:12px; font-weight:900; line-height:1;
}

/* Completed level badge overlay */
.lp-level-complete .lp-level-head::after{
  content:'✅ مكتمل';
  font-size:11px; font-weight:700;
  color:var(--lp-color);
  background:color-mix(in srgb,var(--lp-color) 12%,transparent);
  border-radius:99px; padding:2px 10px;
  margin-right:auto;
}

/* Coming soon card */
.lp-coming-soon{
  text-align:center; padding:28px 20px;
  border:2px dashed #d1d5db; border-radius:16px; color:var(--muted);
}
.lp-cs-icon{ font-size:36px; margin-bottom:10px; }
.lp-coming-soon h3{ margin:0 0 6px; font-size:16px; color:var(--text); font-weight:800; }
.lp-coming-soon p{ margin:0; font-size:13px; }

/* Reset button */
.lp-reset-btn{
  background:none; border:none; color:var(--muted);
  font-size:12px; cursor:pointer; padding:6px 12px;
  border-radius:8px; transition:background .15s;
}
.lp-reset-btn:hover{ background:#f3f4f6; color:var(--text); }

/* Mobile */
@media(max-width:480px){
  .lp-hero{ padding:32px 16px 24px; border-radius:14px; }
  .lp-hero-title{ font-size:22px; }
  .lp-level-head{ gap:10px; padding:12px; }
  .lp-badge{ width:44px; height:44px; font-size:13px; }
  .lp-module{ padding:10px 12px; }
}

/* Lernpfad homepage icon */
.tcs-ic-lp{
  background:linear-gradient(135deg,#312e81,#4f46e5);
  display:flex; align-items:center; justify-content:center; gap:2px;
  flex-direction:row;
}
.tci-lp-a{ font-size:11px; font-weight:900; color:#a5b4fc; }
.tci-lp-arr{ font-size:9px; color:rgba(255,255,255,.5); }
.tci-lp-b{ font-size:11px; font-weight:900; color:#fff; }

/* ── Flashcards level grouping ────────────────────────────────────── */
.fc-level-section{
  margin-bottom: 32px;
}
.fc-level-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--fc-lv-color) 8%, transparent);
  border-radius: 10px;
  border-right: 4px solid var(--fc-lv-color);
}
.fc-level-badge{
  background: var(--fc-lv-color);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: .5px;
  flex-shrink: 0;
}
.fc-level-name{
  font-size: 14px;
  font-weight: 700;
  color: var(--fc-lv-color);
  font-family: var(--font-sans, sans-serif);
}
.fc-level-ar{
  font-size: 13px;
  color: var(--text-muted, #64748b);
}
.fc-level-count{
  margin-right: auto;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  background: var(--bg-subtle, #f1f5f9);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ══════════════════════════════════════════════════════════════
   HOME HERO — Platform landing
   ══════════════════════════════════════════════════════════════ */
.home-hero {
  background: linear-gradient(135deg, #0f2557 0%, #1e40af 55%, #1d4ed8 100%);
  border-radius: 16px;
  padding: 32px 28px 0;
  margin-bottom: 12px;
  color: #fff;
  overflow: hidden;
}
.home-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.home-hero-text { flex: 1; min-width: 0; }

.home-hero-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: .3px;
}
.home-hero-title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 10px;
  letter-spacing: -.5px;
}
.home-hero-sub {
  font-size: 13px;
  opacity: .8;
  margin: 0 0 20px;
  line-height: 1.6;
}
.home-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 24px;
   margin-top: 10px;
}
.home-cta-primary {
  background: #fff;
  color: #1e40af;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s, transform .15s;
  white-space: nowrap;
}
.home-cta-primary:hover { background: #eff6ff; transform: translateY(-1px); }
.home-cta-secondary {
  background: transparent;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.5);
  transition: background .15s, border-color .15s, transform .15s;
  white-space: nowrap;
}
.home-cta-secondary:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.8);
  transform: translateY(-1px);
}

/* Level pills */
.home-hero-levels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 24px;
  flex-shrink: 0;
}
.home-lv {
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .5px;
  text-align: center;
  min-width: 52px;
  backdrop-filter: blur(4px);
}
.home-lv-a0 { background: rgba(124,58,237,.55); border: 1px solid rgba(167,139,250,.4); }
.home-lv-a1 { background: rgba(37,99,235,.55);  border: 1px solid rgba(147,197,253,.4); }
.home-lv-a2 { background: rgba(22,163,74,.55);  border: 1px solid rgba(134,239,172,.4); }
.home-lv-b1 { background: rgba(217,119,6,.55);  border: 1px solid rgba(252,211,77,.4); }
.home-lv-b2 { background: rgba(8,145,178,.55);  border: 1px solid rgba(103,232,249,.4); }
.home-lv-arr { opacity: .45; font-size: 10px; }

/* Stats bar */
.home-stats-bar {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.15);
  margin: 0 -28px;
  padding: 16px 28px;
  background: rgba(0,0,0,.15);
}
.home-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-right: 1px solid rgba(255,255,255,.12);
  padding: 0 8px;
}
.home-stat:last-child { border-right: none; }
.home-stat strong {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.home-stat span {
  font-size: 11px;
  opacity: .65;
}

/* Featured article strip */
.home-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  text-decoration: none;
  transition: background .15s;
}
.home-feat:hover { background: #fef3c7; }
.home-feat-pin {
  background: #d97706;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.home-feat-title {
  font-size: 13px;
  font-weight: 600;
  color: #78350f;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-feat-arr { color: #d97706; font-size: 14px; flex-shrink: 0; }

/* Tool card level badge */
.tcs-level {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 4px;
  letter-spacing: .3px;
}
.tcs-lv-a0    { background: #ede9fe; color: #5b21b6; }
.tcs-lv-b1    { background: #fef3c7; color: #92400e; }
.tcs-lv-range { background: #f0f9ff; color: #0369a1; }

/* Responsive home hero */
@media (max-width: 600px) {
  .home-hero { padding: 24px 18px 0; }
  .home-hero-title { font-size: 24px; }
  .home-hero-levels { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .home-lv { padding: 5px 10px; font-size: 11px; min-width: 40px; }
  .home-stats-bar { margin: 0 -18px; padding: 12px 18px; }
  .home-stat strong { font-size: 15px; }
}
@media (max-width: 400px) {
  .home-hero-top { flex-direction: column; }
  .home-hero-levels { flex-direction: row; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   HERO V3 — Pro redesign
   ══════════════════════════════════════════════════════════════ */

/* Override old vertical levels */
.home-hero-levels { display: none !important; }

/* Horizontal level path */
.home-level-path {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hlp-step {
  padding: 4px 11px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .4px;
}
.hlp-arr { color: rgba(255,255,255,.35); font-size: 11px; }
.hlp-a0 { background: rgba(124,58,237,.55); border: 1px solid rgba(167,139,250,.35); }
.hlp-a1 { background: rgba(37,99,235,.55);  border: 1px solid rgba(147,197,253,.35); }
.hlp-a2 { background: rgba(22,163,74,.55);  border: 1px solid rgba(134,239,172,.35); }
.hlp-b1 { background: rgba(217,119,6,.55);  border: 1px solid rgba(252,211,77,.35);  }
.hlp-b2 { background: rgba(8,145,178,.55);  border: 1px solid rgba(103,232,249,.35); }

/* Flashcard visual mockup — hidden by default, desktop only */
.home-hero-visual {
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 24px;
}
@media (min-width: 768px) {
  .home-hero-visual { display: flex; }
}
.hhv-deck {
  position: relative;
  width: 155px;
  height: 185px;
}
.hhv-card-shadow {
  position: absolute;
  inset: 12px 6px 0;
  background: rgba(0,0,0,.25);
  border-radius: 14px;
  filter: blur(8px);
}
.hhv-card-back {
  position: absolute;
  width: 145px;
  height: 172px;
  top: 8px;
  left: 5px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  transform: rotate(4deg);
}
.hhv-card-front {
  position: absolute;
  width: 150px;
  height: 178px;
  top: 0;
  left: 0;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 14px;
}
.hhv-artikel {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  color: #fff;
}
.hhv-art-der { background: #2563eb; }
.hhv-art-die { background: #e11d48; }
.hhv-art-das { background: #16a34a; }
.hhv-word {
  font-size: 27px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.5px;
}
.hhv-divider {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,.25);
}
.hhv-translation {
  font-size: 15px;
  color: rgba(255,255,255,.8);
  font-weight: 600;
}
.hhv-hint {
  font-size: 10px;
  color: rgba(255,255,255,.38);
  margin-top: 4px;
}
.hhv-badge-wrap {
  display: flex;
  gap: 6px;
}
.hhv-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(22,163,74,.35);
  border: 1px solid rgba(134,239,172,.3);
  color: #fff;
  white-space: nowrap;
}
.hhv-badge-no {
  background: rgba(220,38,38,.3);
  border-color: rgba(252,165,165,.3);
}

/* ══════════════════════════════════════════════════════════════
   TOOLS SECTION — Pro categories
   ══════════════════════════════════════════════════════════════ */

/* Category label */
.tcs-cat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 10px 0 5px;
  padding-right: 2px;
}

/* Lernpfad featured card */
.tcs-lp-featured {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
  text-decoration: none;
  color: #fff;
  transition: transform .15s, box-shadow .15s;
  border: 1px solid rgba(99,179,237,.25);
}
.tcs-lp-featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(29,78,216,.35);
}
.tcs-lp-featured-left { flex: 1; min-width: 0; }
.tcs-lp-feat-path {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.tlp-lv {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
}
.tlp-arr { color: rgba(255,255,255,.4); font-size: 10px; }
.tlp-a0 { background: rgba(124,58,237,.6); }
.tlp-a1 { background: rgba(37,99,235,.7); }
.tlp-a2 { background: rgba(22,163,74,.6); }
.tlp-b1 { background: rgba(217,119,6,.6); }
.tlp-b2 { background: rgba(8,145,178,.6); }
.tcs-lp-feat-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 3px;
}
.tcs-lp-feat-sub {
  font-size: 12px;
  opacity: .7;
}
.tcs-lp-feat-arrow {
  font-size: 20px;
  opacity: .7;
  flex-shrink: 0;
}

/* tcs-sub as link */
a.tcs-sub {
  text-decoration: none;
  color: var(--primary, #2563eb);
  font-size: 13px;
  font-weight: 600;
  transition: opacity .15s;
}
a.tcs-sub:hover { opacity: .75; }

/* Responsive hero visual */
@media (max-width: 700px) {
  .home-hero-visual { display: none !important; }
  .home-hero-top { flex-direction: column; align-items: stretch; }
  /* Fix: hero text must not overflow viewport on mobile */
  .home-hero-text { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  /* Stack CTA buttons vertically so they don't overflow */
  .home-hero-actions {
    flex-direction: column;
    gap: 8px;
    padding-bottom: 20px;
  }
  .home-cta-primary,
  .home-cta-secondary {
    text-align: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
  /* Level path on mobile: hide A0 pill + its arrow (starts from A1 like app design) */
  .hlp-a0 { display: none !important; }
  .hlp-a0 + .hlp-arr { display: none !important; }
  /* Level path: full width, no overflow */
  .home-level-path {
    width: 100%;
    overflow: hidden;
    flex-wrap: nowrap;
  }
  /* Make level pills slightly smaller on mobile */
  .hlp-step { padding: 4px 10px; font-size: 11px; }
}
@media (max-width: 420px) {
  .tcs-lp-feat-path { display: none; }
}

/* ════════════════════════════════════════════════════════════
   SCROLL FADE-IN ANIMATIONS
   ════════════════════════════════════════════════════════════ */
.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1),
              transform .55s cubic-bezier(.4,0,.2,1);
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   CTA BUTTON — BIGGER + PULSE
   ════════════════════════════════════════════════════════════ */
.home-cta-primary {
  position: relative;
  overflow: hidden;
}
.home-cta-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255,255,255,.45);
  animation: cta-pulse 2.2s ease-out infinite;
}
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ════════════════════════════════════════════════════════════
   STREAK STAT
   ════════════════════════════════════════════════════════════ */
.home-stat-streak {
  border-right: 1px solid rgba(255,255,255,.15);
  padding-right: 16px;
  animation: streak-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes streak-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.home-stat-streak strong { color: #fbbf24; }

/* ════════════════════════════════════════════════════════════
   DARK MODE — New elements
   ════════════════════════════════════════════════════════════ */
html[data-theme='dark'] .tcs-card {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
html[data-theme='dark'] .tcs-card:hover {
  border-color: #4f46e5;
  background: #1e293b;
}
html[data-theme='dark'] .tcs-cat-label {
  color: #94a3b8;
}
html[data-theme='dark'] .tcs-lp-featured {
  background: linear-gradient(135deg,#1e1b4b,#312e81);
  border-color: #4338ca;
}
html[data-theme='dark'] .tcs-lp-feat-title { color: #e0e7ff; }
html[data-theme='dark'] .tcs-lp-feat-sub   { color: #a5b4fc; }
html[data-theme='dark'] .home-feat {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
html[data-theme='dark'] .home-feat:hover { border-color: #4f46e5; }
html[data-theme='dark'] .tcs-header .tcs-title { color: #e2e8f0; }
html[data-theme='dark'] .tcs-header .tcs-sub   { color: #94a3b8; }
html[data-theme='dark'] .tcs-name  { color: #e2e8f0; }
html[data-theme='dark'] .tcs-desc  { color: #94a3b8; }
html[data-theme='dark'] .tcs-level { background: #0f172a; color: #94a3b8; }
html[data-theme='dark'] .tcs-lv-a0    { background:#312e81; color:#c4b5fd; }
html[data-theme='dark'] .tcs-lv-range { background:#1e3a5f; color:#7dd3fc; }
html[data-theme='dark'] .tcs-lv-b1    { background:#431407; color:#fdba74; }
html[data-theme='dark'] .fc-level-header {
  background: rgba(255,255,255,.04);
  border-color: var(--fc-lv-color);
}
html[data-theme='dark'] .fc-level-name  { color: var(--fc-lv-color); }
html[data-theme='dark'] .fc-level-ar    { color: #64748b; }
html[data-theme='dark'] .fc-level-count { background: #1e293b; color: #64748b; }

/* ════════════════════════════════════════════════════════════
   CTA — ORANGE + BIGGER
   ════════════════════════════════════════════════════════════ */
.home-cta-primary {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #fff !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(249,115,22,.45), 0 1px 4px rgba(0,0,0,.15) !important;
  border: none !important;
  letter-spacing: .3px;
}
.home-cta-primary:hover {
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(249,115,22,.55) !important;
}
.home-cta-primary::after { display: none; }

/* ════════════════════════════════════════════════════════════
   XP BADGE IN NAVBAR
   ════════════════════════════════════════════════════════════ */
.nav-xp-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  cursor: default;
  white-space: nowrap;
  animation: xp-appear .4s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
@keyframes xp-appear {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.nav-xp-icon { font-size: 13px; }
.nav-xp-num  { font-size: 13px; font-weight: 900; }
.nav-xp-label{ font-size: 10px; opacity: .8; }

/* Floating XP animation */
.xp-float {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg,#7c3aed,#4f46e5);
  color: #fff;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 15px;
  z-index: 9999;
  pointer-events: none;
  animation: xp-float-up 1.2s ease forwards;
}
@keyframes xp-float-up {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px); }
}

/* ════════════════════════════════════════════════════════════
   DAILY PROGRESS BAR (bottom of navbar)
   ════════════════════════════════════════════════════════════ */
.nav-progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}
.nav-progress-bar {
  height: 100%;
  width: 100%;
  background: transparent;
}
.nav-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  border-radius: 0 3px 3px 0;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}
html[data-theme='dark'] .nav-progress-wrap {
  background: rgba(255,255,255,.06);
}

/* Swipe hint on mobile */
.fc-swipe-hint {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 8px;
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .fc-swipe-hint { display: block; }
  .fc-flip-hint  { display: none; }
}

/* ════════════════════════════════════════════════════════════
   ACHIEVEMENT POPUP
   ════════════════════════════════════════════════════════════ */
.ach-popup {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px) scale(.95);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.ach-popup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.ach-popup-inner {
  background: #fff;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  border: 2px solid #f59e0b;
  min-width: 220px;
  text-align: center;
}
.ach-popup-top {
  font-size: 11px;
  font-weight: 700;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.ach-popup-icon { font-size: 38px; line-height: 1; margin-bottom: 6px; }
.ach-popup-name { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 3px; }
.ach-popup-desc { font-size: 12px; color: #64748b; }
html[data-theme='dark'] .ach-popup-inner {
  background: #1e293b;
  border-color: #d97706;
}
html[data-theme='dark'] .ach-popup-name { color: #e2e8f0; }

/* ════════════════════════════════════════════════════════════
   NAV LEVEL BADGE
   ════════════════════════════════════════════════════════════ */
.nav-level-badge {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  border: 2px solid #b45309;
  font-size: 12px;
  font-weight: 800;
  color: #b45309;
  background: #fef3c7;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .2s;
}
.nav-level-badge:hover { transform: scale(1.05); }

/* ════════════════════════════════════════════════════════════
   ACHIEVEMENTS PAGE
   ════════════════════════════════════════════════════════════ */
.ach-page-container { max-width: 780px; margin: 0 auto; padding: 24px 16px 48px; }

/* Hero */
.ach-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  border-radius: 20px;
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ach-hero-left { flex: 1; min-width: 200px; }
.ach-current-level { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ach-lv-icon { font-size: 48px; line-height: 1; }
.ach-lv-name { font-size: 22px; font-weight: 900; }
.ach-lv-xp  { font-size: 14px; opacity: .8; margin-top: 2px; }
.ach-lv-bar-wrap { }
.ach-lv-bar {
  height: 10px;
  background: rgba(255,255,255,.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
}
.ach-lv-fill { height: 100%; border-radius: 10px; transition: width .8s ease; }
.ach-lv-bar-label { font-size: 12px; opacity: .7; }

.ach-hero-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.ach-hs { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ach-hs strong { font-size: 28px; font-weight: 900; }
.ach-hs span   { font-size: 12px; opacity: .75; }

/* Levels path */
.ach-levels-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 20px;
  background: var(--card, #fff);
  border-radius: 16px;
  border: 1px solid var(--line, #e5e7eb);
  overflow-x: auto;
}
.ach-lv-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: 12px;
  transition: all .3s;
  flex-shrink: 0;
}
.ach-lv-step-icon { font-size: 28px; }
.ach-lv-step-name { font-size: 13px; font-weight: 700; }
.ach-lv-step-req  { font-size: 11px; color: #94a3b8; }
.ach-lv-done    { opacity: .5; }
.ach-lv-current { background: #eff6ff; box-shadow: 0 0 0 2px #2563eb; }
.ach-lv-locked  { opacity: .35; filter: grayscale(1); }
.ach-lv-connector {
  flex: 1;
  height: 3px;
  background: #e5e7eb;
  min-width: 20px;
}

/* Section title */
.ach-section-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--text, #0f172a);
}

/* Achievement cards grid */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.ach-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  background: var(--card, #fff);
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.ach-card-done {
  border-color: #fbbf24;
  background: #fffbeb;
}
html[data-theme='dark'] .ach-card-done {
  background: #292524;
  border-color: #d97706;
}
.ach-card-locked { opacity: .55; }
.ach-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.ach-card-icon   { font-size: 32px; flex-shrink: 0; }
.ach-card-body   { flex: 1; }
.ach-card-name   { font-size: 14px; font-weight: 700; color: var(--text, #0f172a); }
.ach-card-desc   { font-size: 12px; color: #64748b; margin-top: 2px; }
.ach-card-bonus  { font-size: 11px; color: #7c3aed; font-weight: 700; margin-top: 4px; }
.ach-card-check  { font-size: 18px; flex-shrink: 0; }

/* CTA row */
.ach-cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ach-cta-btn {
  padding: 13px 26px;
  border-radius: 12px;
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
}
.ach-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,.4); }
.ach-cta-gram { background: linear-gradient(135deg,#059669,#047857); box-shadow: 0 4px 16px rgba(5,150,105,.3); }
.ach-cta-gram:hover { box-shadow: 0 8px 24px rgba(5,150,105,.4); }

@media(max-width:540px){
  .ach-hero { padding: 20px; }
  .ach-grid { grid-template-columns: 1fr; }
  .ach-lv-step { padding: 8px 10px; }
}

/* ════════════════════════════════════════════════════════════
   HERO CARD — 3D FLIP
   ════════════════════════════════════════════════════════════ */
.hhv-card-3d {
  width: 158px;
  height: 195px;
  perspective: 900px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .2s ease, filter .2s ease;
}
.hhv-card-3d:hover:not(.is-flipped) {
  transform: scale(1.04) translateY(-3px);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.3));
}
.hhv-card-3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.hhv-card-3d.is-flipped .hhv-card-3d-inner {
  transform: rotateY(180deg);
}
.hhv-card-3d-front,
.hhv-card-3d-back {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
}
.hhv-card-3d-front {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.hhv-card-3d-back {
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  transform: rotateY(180deg);
}
/* hover scale handled on .hhv-card-3d itself */

.hhv-word-big  { font-size: 28px; font-weight: 900; color: #fff; }
.hhv-hint-flip {
  font-size: 11px; color: rgba(255,255,255,.55); margin-top: 4px;
  animation: hintPulse 2.5s ease-in-out infinite;
}
@keyframes hintPulse {
  0%,100% { opacity: .55; }
  50%      { opacity: 1; }
}
.hhv-sound-btn {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .2s;
  pointer-events: all;
}
.hhv-sound-btn:hover { background: rgba(255,255,255,.28); }
.hhv-back-ar   { font-size: 28px; font-weight: 900; color: #fff; letter-spacing: -.3px; }
.hhv-back-ex   {
  font-size: 11px; color: rgba(255,255,255,.85);
  font-style: italic; text-align: center;
  background: rgba(255,255,255,.1);
  border-radius: 8px; padding: 5px 8px; line-height: 1.5;
  direction: ltr;
}
.hhv-back-ex-ar{
  font-size: 11px; color: rgba(255,255,255,.6);
  text-align: center; margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   STREAK V2 — bold orange, eye-catching
   ════════════════════════════════════════════════════════════ */
.home-stat-streak-v2 {
  position: relative;
  background: rgba(251,146,60,.15);
  border: 1px solid rgba(251,146,60,.35);
  border-radius: 10px;
  padding: 6px 14px;
  animation: streakPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes streakPop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.home-stat-streak-v2 strong {
  color: #fb923c;
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(251,146,60,.5);
}
.home-stat-streak-v2 span {
  font-size: 11px;
  color: rgba(255,255,255,.75);
}

/* ════════════════════════════════════════════════════════════
   XP PROGRESS BAR IN STATS
   ════════════════════════════════════════════════════════════ */
.home-stat-xp-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1.4;
}
.home-stat-xp-bar strong { font-size: 14px; font-weight: 800; color: #fff; line-height: 1; }
.hsxp-bar {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,.15);
  border-radius: 6px;
  overflow: hidden;
}
.hsxp-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .8s ease;
}
.hsxp-next-label { font-size: 10px; color: rgba(255,255,255,.55); }

/* ════════════════════════════════════════════════════════════
   SECONDARY CTA — OUTLINE ONLY
   ════════════════════════════════════════════════════════════ */
.home-cta-secondary {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.5) !important;
  color: #fff !important;
  padding: 13px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  backdrop-filter: blur(4px);
}
.home-cta-secondary:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.8) !important;
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR — LIGHTER VISUAL WEIGHT
   ════════════════════════════════════════════════════════════ */
.sidebar {
  opacity: .88;
  transition: opacity .2s;
  font-size: 14px;
}
.sidebar:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   SHADOWS + DEPTH
   ════════════════════════════════════════════════════════════ */
.tcs-card {
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.tcs-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  transform: translateY(-3px) !important;
}
.home-hero { box-shadow: 0 12px 48px rgba(37,99,235,.25); }
.tcs-lp-featured { box-shadow: 0 4px 16px rgba(79,70,229,.2); }

/* ════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS
   ════════════════════════════════════════════════════════════ */
/* Buttons */
.home-cta-primary, .home-cta-secondary,
.pg-hero-cta, .ach-cta-btn, .fc-restart-btn {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
/* Nav links */
.navlinks a, .nav-extra {
  transition: color .15s ease, background .15s ease !important;
}
/* Tool cards */
.tcs-cat-label {
  transition: color .2s;
}
/* Flashcard flip hint */
.fc-lesson-card {
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.fc-lesson-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
}
/* Post cards */
.post-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

@media(max-width:540px){
  .hhv-card-3d { width: 130px; height: 165px; }
  .hhv-word-big { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════
   LIVE SEARCH DROPDOWN — compact design
   ════════════════════════════════════════════════════════════ */
.search-wrap { position: relative; }

.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 380px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.13), 0 1px 4px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
  z-index: 9999;
  overflow: hidden;
  animation: sd-appear .13s ease-out;
}
@keyframes sd-appear {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

.sd-section-label {
  font-size: 10px;
  font-weight: 700;
  color: #b0b8c8;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 10px 14px 4px;
  direction: rtl;
}

.sd-list {
  list-style: none;
  margin: 0;
  padding: 4px 6px 6px;
}

.sd-empty {
  padding: 18px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  direction: rtl;
}

/* ── Single-line compact item ── */
.sd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .1s;
  direction: rtl;
  min-height: 0;
}
.sd-item:hover,
.sd-item.is-active { background: #f4f6fb; }

/* Left: type badge */
.sd-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: .03em;
}
.sd-badge-word    { background:#eff6ff; color:#2563eb; }
.sd-badge-topic   { background:#f0fdf4; color:#16a34a; }
.sd-badge-lesson  { background:#fffbeb; color:#d97706; }
.sd-badge-article { background:#fdf4ff; color:#9333ea; }

/* Center: text */
.sd-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.sd-de {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.sd-sep {
  color: #d1d5db;
  font-size: 11px;
  flex-shrink: 0;
}

.sd-ar {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Right: artikel dot */
.sd-artikel {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Right: icon */
.sd-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

/* Footer */
.sd-footer {
  border-top: 1px solid #f1f3f7;
  padding: 7px 14px;
  text-align: center;
}
.sd-see-all {
  font-size: 12px;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  direction: rtl;
}
.sd-see-all:hover { text-decoration: underline; }

/* Dark mode */
html.theme-dark .search-dropdown {
  background: #1c2333;
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
html.theme-dark .sd-de { color: #f1f5f9; }
html.theme-dark .sd-ar { color: #94a3b8; }
html.theme-dark .sd-sep { color: #374151; }
html.theme-dark .sd-item:hover,
html.theme-dark .sd-item.is-active { background: rgba(255,255,255,.06); }
html.theme-dark .sd-footer { border-color: rgba(255,255,255,.07); }
html.theme-dark .sd-badge-word    { background:rgba(37,99,235,.25);  }
html.theme-dark .sd-badge-topic   { background:rgba(22,163,74,.25);  }
html.theme-dark .sd-badge-lesson  { background:rgba(217,119,6,.25);  }
html.theme-dark .sd-badge-article { background:rgba(147,51,234,.25); }

/* ════════════════════════════════════════════════════════════
   CONTINUE BUTTON — "كمل منين وقفتي"
   ════════════════════════════════════════════════════════════ */
.nav-continue-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff !important;
  text-decoration: none;
  padding: 6px 13px 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(249,115,22,.35);
  direction: rtl;
  flex-shrink: 0;
}
.nav-continue-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(249,115,22,.45);
}
.ncb-icon {
  font-size: 10px;
  opacity: .9;
}
.ncb-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ncb-label {
  font-size: 11px;
  font-weight: 800;
  opacity: .95;
}
.ncb-sub {
  font-size: 10px;
  opacity: .8;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide on very small screens */
@media (max-width: 900px) {
  .nav-continue-btn { display: none !important; }
}

/* Dark mode */
html.theme-dark .nav-continue-btn {
  box-shadow: 0 2px 8px rgba(249,115,22,.25);
}

/* ── Nav Tools Dropdown ─────────────────────────────── */
.nav-tools-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-tools-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-tools-btn:hover,
.nav-tools-btn.is-open {
  background: var(--line);
  color: var(--brand);
}
.nav-tools-btn.is-active {
  color: var(--brand);
}
.nav-tools-arrow {
  transition: transform .2s;
  flex-shrink: 0;
  margin-top: 1px;
}
.nav-tools-btn.is-open .nav-tools-arrow {
  transform: rotate(180deg);
}

.nav-tools-menu {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 180px;
  padding: 6px;
  z-index: 3000;
  animation: toolsMenuIn .15s ease;
}
@keyframes toolsMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-tools-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.nav-tools-menu a svg {
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .12s;
}
.nav-tools-menu a:hover svg,
.nav-tools-menu a.is-active svg {
  opacity: 1;
}
.nav-tools-menu a:hover,
.nav-tools-menu a.is-active {
  background: var(--line);
  color: var(--brand);
}

/* RTL: JS handles positioning via fixed */

/* Dark mode */
html.theme-dark .nav-tools-menu {
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* ══════════════════════════════════════════
   Sidebar Widgets (كمل تعلمك / هدف اليوم / روابط سريعة)
   ══════════════════════════════════════════ */

.sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Base widget card */
.sw-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Widget header row */
.sw-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--text);
}
.sw-head svg { color: var(--brand); flex-shrink:0; }
.sw-head b   { font-size: 13.5px; font-weight: 800; }

/* ── Widget 1: كمل تعلمك ── */
.sw-continue-meta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.sw-level-dot {
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sw-continue-titles { flex: 1; min-width: 0; }
.sw-continue-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.sw-continue-sub {
  font-size: 11px;
  color: var(--muted);
}
.sw-prog-bar {
  height: 5px;
  background: var(--line);
  border-radius: 99px;
  margin-bottom: 12px;
  overflow: hidden;
}
.sw-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 99px;
  transition: width .6s ease;
}
.sw-continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1e3a8a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s;
}
.sw-continue-btn:hover { background: #2563eb; }

/* ── Widget 2: هدف اليوم ── */
.sw-goal-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sw-circle-wrap {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}
.sw-circle-svg { width: 70px; height: 70px; transform: rotate(-90deg); }
.sw-circle-bg  { fill: none; stroke: var(--line); stroke-width: 6; }
.sw-circle-fg  {
  fill: none;
  stroke: #2563eb;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s ease;
}
.sw-circle-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.sw-circle-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.sw-circle-of {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}
.sw-goal-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.sw-xp-pill {
  display: inline-flex;
  align-items: center;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  align-self: flex-start;
}
html.theme-dark .sw-xp-pill,
html[data-theme='dark'] .sw-xp-pill {
  background: rgba(251,191,36,.15);
  color: #fbbf24;
}
.sw-goal-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: -4px;
}
.sw-goal-btn {
  display: block;
  background: var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 9px;
  text-decoration: none;
  text-align: center;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.sw-goal-btn:hover {
  background: #2563eb;
  color: #fff;
}

/* ── Widget 3: روابط سريعة ── */
.sw-ql-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sw-ql-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 11px;
  text-decoration: none;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s;
}
.sw-ql-item:hover {
  background: #e8efff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
html.theme-dark .sw-ql-item:hover,
html[data-theme='dark'] .sw-ql-item:hover {
  background: rgba(37,99,235,.15);
  border-color: #3b82f6;
  color: #93c5fd;
}
.sw-ql-icon { font-size: 22px; line-height: 1; }
/* Text label inside quick-link item — truncate if too long */
.sw-ql-item > span:not(.sw-ql-icon) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.sw-ql-item svg {
  color: var(--muted);
  transition: color .12s;
  flex-shrink: 0;
}
.sw-ql-item:hover svg { color: var(--brand); }

/* ── Mobile: sidebar below main ── */
@media (max-width: 980px) {

  /* Stack grid: main first, sidebar second */
  .grid {
    grid-template-columns: 1fr !important;
  }
  .sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    order: 2;
  }
  main { order: 1; }

  /* Hide heavy sidebar card on mobile (latest posts) */
  .sidebar-col .card.sidebar { display: none; }

  /* Compact goal widget on mobile */
  .sw-goal-body { gap: 12px; }
  .sw-circle-wrap { width: 62px; height: 62px; }
  .sw-circle-svg  { width: 62px; height: 62px; }
  .sw-circle-num  { font-size: 16px; }

  /* Quick links: 3 columns on mobile */
  .sw-ql-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .sw-ql-item {
    padding: 10px 6px;
    font-size: 10.5px;
    gap: 5px;
    overflow: hidden;
  }
  .sw-ql-icon { font-size: 20px; }

  /* Continue widget compact */
  .sw-continue-title { font-size: 12px; }
  .sw-continue-btn   { padding: 8px 12px; font-size: 12px; }

  /* Daily word compact */
  .sw-dw-word { font-size: 20px !important; }
  .sw-dw-ar   { font-size: 14px !important; }
}

/* ── Widget: كلمة اليوم (sw-dw) ── */
.sw-dw-card { padding: 16px; }

.sw-dw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sw-dw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}
html.theme-dark .sw-dw-badge,
html[data-theme='dark'] .sw-dw-badge {
  background: rgba(99,102,241,.2);
  color: #a5b4fc;
}
.sw-dw-date {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.sw-dw-body {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  border-radius: 12px;
  padding: 18px 16px;
  margin-bottom: 12px;
  text-align: right;
}
.sw-dw-de {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  direction: ltr;
  justify-content: flex-start;
}
.sw-dw-art {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  padding: 2px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}
.sw-dw-art-der { background: rgba(59,130,246,.6); }
.sw-dw-art-die { background: rgba(236,72,153,.6); }
.sw-dw-art-das { background: rgba(16,185,129,.6); }

.sw-dw-word {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.3px;
}
.sw-dw-ar {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  text-align: right;
  direction: rtl;
}

.sw-dw-link {
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  padding: 6px 0;
  border-radius: 8px;
  transition: background .15s;
}
.sw-dw-link:hover {
  background: var(--line);
}

/* ══════════════════════════════════════════
   MICRO-INTERACTIONS — Premium feel
   ══════════════════════════════════════════ */

/* Tool cards — lift on hover */
.tcs-card {
  transition: border-color .18s, box-shadow .18s, transform .18s !important;
}
.tcs-card:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
}
.tcs-card:active {
  transform: translateY(0) scale(.98) !important;
  transition-duration: .08s !important;
}

/* CTA buttons — satisfying click */
.home-cta-primary,
.home-cta-secondary {
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s !important;
}
.home-cta-primary:active,
.home-cta-secondary:active {
  transform: scale(.96) !important;
  transition-duration: .08s !important;
}

/* sw-cards (sidebar widgets) — subtle lift */
.sw-card {
  transition: box-shadow .2s, transform .2s !important;
}
.sw-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
  transform: translateY(-1px) !important;
}

/* Quick links — pop */
.sw-ql-item {
  transition: background .15s, border-color .15s, color .15s, transform .15s !important;
}
.sw-ql-item:hover  { transform: translateY(-2px) !important; }
.sw-ql-item:active { transform: scale(.95) !important; transition-duration: .08s !important; }

/* Continue button */
.sw-continue-btn {
  transition: background .15s, transform .12s !important;
}
.sw-continue-btn:active { transform: scale(.96) !important; }

/* Daily goal button */
.sw-goal-btn {
  transition: background .15s, color .15s, transform .12s !important;
}
.sw-goal-btn:active { transform: scale(.96) !important; }

/* Nav tools dropdown items */
.nav-tools-menu a {
  transition: background .12s, color .12s, transform .12s !important;
}
.nav-tools-menu a:hover { transform: translateX(-2px) !important; }

/* Posts / side-items */
.side-item {
  transition: background .15s, padding-right .15s !important;
}
.side-item:hover { padding-right: 20px !important; }

/* Post cards on homepage */
.post {
  transition: box-shadow .2s, transform .2s !important;
}
.post:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.09) !important;
}
.post:active { transform: scale(.99) !important; transition-duration: .08s !important; }

/* Featured strip */
.home-feat {
  transition: background .15s, transform .15s !important;
}
.home-feat:hover  { transform: translateX(-3px) !important; }
.home-feat:active { transform: scale(.99) !important; }

/* Lernpfad featured card */
.tcs-lp-featured {
  transition: transform .18s, box-shadow .18s !important;
}
.tcs-lp-featured:hover  { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.2) !important; }
.tcs-lp-featured:active { transform: scale(.98) !important; }

/* Daily word practice link */
.sw-dw-link {
  transition: background .15s, transform .12s !important;
}
.sw-dw-link:hover  { transform: translateX(-2px) !important; }

/* Search dropdown items */
.sd-item {
  transition: background .1s, transform .1s !important;
}
.sd-item:hover { transform: translateX(-2px) !important; }

/* ════════════════════════════════════════════════════════════════
   MOBILE UX v3 — Professional App-like Experience
   All rules are scoped to @media so desktop is untouched
   ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1 & 2. COMPACT HEADER — slim horizontal topbar on mobile
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* ▶ CRITICAL: clip topbar/navbar so they never widen the page */
  .topbar { overflow: hidden !important; }
  .navbar { overflow: hidden !important; }

  /* Convert stacked column → single compact row */
  .topbar .row {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    padding: 5px 0 !important;
    gap: 6px !important;
  }
  .brand {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    text-align: start !important;
  }
  .brand-text {
    font-size: 13px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 130px !important;
  }
  .brand-icon { height: 28px !important; width: 28px !important; }
  .brand .sub { display: none !important; }

  /* Actions: fixed width — don't grow, don't shrink */
  .topbar .actions {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }
  /* Compact lang switch — show short labels */
  .lang-switch {
    flex: 0 0 auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
    justify-content: center !important;
    padding: 3px !important;
  }
  .lang-switch a {
    flex: 0 0 auto !important;
    padding: 4px 7px !important;
    font-size: 10.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  /* Slim icon buttons */
  .icon-btn {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 9px !important;
  }
  /* Slim navbar row */
  .navbar .row {
    padding: 5px 4px !important;
    overflow: visible !important;
  }
  /* Center language + night mode + message on mobile */
  .topbar .actions {
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
    padding-inline: 10px !important;
    box-sizing: border-box !important;
  }
  /* Page top spacing */
  .page { padding-top: 10px !important; }
}

/* ──────────────────────────────────────────────────────────────
   OVERFLOW FIX — stats bar negative margin causes clipping on mobile
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Remove negative margin from stats bar — use padding instead */
  .home-stats-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-inline: 12px !important;
    border-radius: 0 0 14px 14px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   3. BETTER CARD VISIBILITY — richer shadows & contrast
   ────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .card {
    box-shadow: 0 1px 4px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.09) !important;
    border-color: rgba(15,23,42,.09) !important;
  }
  .sw-card {
    box-shadow: 0 1px 4px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.09) !important;
    border-color: rgba(15,23,42,.09) !important;
  }
  html[data-theme='dark'] .card,
  body.dark-mode .card,
  html[data-theme='dark'] .sw-card,
  body.dark-mode .sw-card {
    box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 6px 22px rgba(0,0,0,.3) !important;
    border-color: rgba(255,255,255,.06) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   4. SECTION SPACING — breathing room between elements
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .grid { gap: 14px !important; }
  .home-hero  { margin-bottom: 16px !important; }
  .home-feat  { margin-bottom: 14px !important; }
  .pad { padding: 16px !important; }
  .sw-card { padding: 14px 16px !important; }
}

/* ──────────────────────────────────────────────────────────────
   5. CHAT BUTTON — raised above bottom navigation bar
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .chatbot-widget:not(.is-open) {
    bottom: 76px !important;
    right: 14px !important;
  }
  .chatbot-open {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(2,6,23,.38) !important;
  }
  .chatbot-open svg { width: 22px !important; height: 22px !important; }
}

/* ──────────────────────────────────────────────────────────────
   6. VISUAL HIERARCHY — prominent titles & section labels
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tcs-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: -.2px !important;
  }
  .tcs-cat-label {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-top: 14px !important;
  }
  .sw-head b {
    font-size: 14.5px !important;
    font-weight: 800 !important;
  }
  .page-title    { font-size: 22px !important; }
  .home-hero-title {
    font-size: 27px !important;
    line-height: 1.22 !important;
  }
  .sidebar .title b { font-size: 15px !important; }
  .post h3 { font-size: 15px !important; line-height: 1.7 !important; }
}

/* ──────────────────────────────────────────────────────────────
   7 & 8. TOUCH TARGETS (44px+) & BUTTON STYLING
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sw-continue-btn,
  .sw-goal-btn,
  .btn { min-height: 46px !important; }
  .sw-ql-item { min-height: 56px !important; }
}

@media (max-width: 700px) {
  /* Hero: full-width stacked layout */
  .home-hero-visual { display: none !important; }
  .home-hero-top {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .home-hero-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .home-hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
    padding-bottom: 20px !important;
  }
  /* Full-width CTA buttons — primary solid, secondary ghost */
  .home-cta-primary,
  .home-cta-secondary {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
  }
  .home-cta-primary {
    background: #ffffff !important;
    color: #1e40af !important;
    box-shadow: 0 4px 16px rgba(255,255,255,.2) !important;
    border: none !important;
  }
  .home-cta-secondary {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,.55) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  /* Level path — hide A0 (start from A1) */
  .hlp-a0,
  .hlp-a0 + .hlp-arr { display: none !important; }
  .home-level-path {
    width: 100% !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }
  .hlp-step { padding: 4px 10px !important; font-size: 11px !important; }
}

/* ──────────────────────────────────────────────────────────────
   9. DEPTH — rich shadows & layering
   ────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .home-hero {
    box-shadow: 0 10px 40px rgba(14,30,80,.28), 0 3px 10px rgba(14,30,80,.14) !important;
  }
  .tcs-lp-featured {
    box-shadow: 0 4px 18px rgba(15,23,42,.15) !important;
  }
  .sw-dw-body {
    box-shadow: 0 4px 14px rgba(37,99,235,.25) !important;
  }
  .tcs-card { border-radius: 14px !important; }
}

/* ════════════════════════════════════════════════════════════════
   10. BOTTOM NAVIGATION — App-style fixed mobile tab bar
   ════════════════════════════════════════════════════════════════ */

/* Hidden on desktop */
/* ── Bottom nav: hidden by default, JS shows it on mobile ── */
.bottom-nav { display: none; }

/* Styles apply whenever bottom-nav is visible (JS sets display:flex) */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9500;
  background: #ffffff;
  border-top: 1px solid rgba(15,23,42,.1);
  box-shadow: 0 -2px 20px rgba(15,23,42,.10), 0 -1px 0 rgba(15,23,42,.06);
  padding: 6px 4px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  align-items: stretch;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: #9ca3af;
  font-size: 9.5px;
  font-weight: 700;
  padding: 4px 1px;
  min-height: 50px;
  border-radius: 10px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, background .15s;
}

.bottom-nav-item svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  transition: transform .18s;
}

.bnv-label {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.bottom-nav-item.is-active { color: #1d4ed8; }
.bottom-nav-item.is-active svg { transform: scale(1.1); }

.bottom-nav-item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: #1d4ed8;
  border-radius: 0 0 4px 4px;
}

.bottom-nav-item:active { background: rgba(29,78,216,.07); }

html[data-theme='dark'] .bottom-nav,
body.dark-mode .bottom-nav {
  background: #0f172a;
  border-top-color: #1a2940;
  box-shadow: 0 -2px 20px rgba(0,0,0,.45);
}
html[data-theme='dark'] .bottom-nav-item,
body.dark-mode .bottom-nav-item { color: #4b5e7a; }
html[data-theme='dark'] .bottom-nav-item.is-active,
body.dark-mode .bottom-nav-item.is-active { color: #60a5fa; }
html[data-theme='dark'] .bottom-nav-item.is-active::before,
body.dark-mode .bottom-nav-item.is-active::before { background: #60a5fa; }
html[data-theme='dark'] .bottom-nav-item:active,
body.dark-mode .bottom-nav-item:active { background: rgba(96,165,250,.08); }

/* ════════════════════════════════════════════════════════════════
   RTL OVERFLOW FIX — prevent left-side content clipping on mobile
   overflow:hidden creates a scroll container that in RTL anchors to
   the right edge, clipping left-side content. overflow:clip does NOT
   create a scroll container, so there is no RTL anchor/shift.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html {
    overflow-x: clip !important;
  }
  body {
    overflow-x: clip !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  /* Ensure the main content containers never exceed viewport */
  .container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .home-hero {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Prevent any absolutely-sized child from pushing layout */
  .home-hero-top,
  .home-hero-text,
  .home-stats-bar,
  .home-level-path {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 🔥 FIX level-path + stats on small mobile */
@media (max-width: 640px) {
  /* Level badges — wrap instead of hiding A0/A1/A2 */
  .home-level-path {
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 4px !important;
  }
  /* Stats bar — smaller font to fit 4 items */
  .home-stat strong { font-size: 15px !important; }
  .home-stat span   { font-size: 10px !important; }
  .home-stat        { padding: 0 5px !important; }
  /* Hero overflow — allow stats to reach edges without clipping */
  .home-hero {
    overflow: visible !important;
    border-radius: 16px !important;
  }
  .home-stats-bar {
    border-radius: 0 0 16px 16px !important;
    overflow: hidden !important;
  }
}

/* 🔥 FIX nav-drawer overflow — drawer was wider than viewport causing RTL left-clip */
.nav-drawer {
  left: 0;
  right: 0;
}
@media (max-width: 640px) {
  .nav-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  .nav-drawer-body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   🔥 GLOBAL MOBILE OVERFLOW CONTAINMENT
   Prevents ANY element from causing horizontal scroll/clip on mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Root containment */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* All block elements respect viewport */
  .container, .grid, main, section,
  .card, .pad, .posts-grid, .post-card,
  .post-card-body, .post-card-thumb,
  .tcs-grid, .tcs-card,
  .sidebar-col, .sw-card,
  .home-hero, .home-hero-top, .home-hero-text,
  .home-stats-bar, .home-level-path,
  .bottom-nav, header, footer, nav {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Post card: no overflow on title */
  .post-card {
    overflow: hidden !important;
    width: 100% !important;
  }
  .post-card-body h3 {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  .post-card-body p {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* Tables: scroll horizontally inside wrapper */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* Images never exceed container */
  img { max-width: 100% !important; height: auto !important; }

  /* Fixed-width inputs */
  input, textarea, select {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   📱 TCS CARDS — PRO MOBILE VERTICAL TILE DESIGN
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  .tcs-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Vertical card layout */
  .tcs-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
    transition: transform .18s, box-shadow .2s !important;
  }
  .tcs-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
  }

  /* Icon area — full-width top section */
  .tcs-icon {
    width: 100% !important;
    height: 80px !important;
    border-radius: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .tcs-ic-flash { background: linear-gradient(135deg,#1d4ed8,#3b82f6) !important; }
  .tcs-ic-gram  { background: linear-gradient(135deg,#065f46,#10b981) !important; }
  .tcs-ic-alpha { background: linear-gradient(135deg,#831843,#ec4899) !important; }
  .tcs-ic-zahl  { background: linear-gradient(135deg,#4c1d95,#8b5cf6) !important; }
  .tcs-ic-hoer  { background: linear-gradient(135deg,#c2410c,#f97316) !important; }
  .tcs-ic-iv    { background: linear-gradient(135deg,#0f766e,#14b8a6) !important; }

  /* Icon text bigger */
  .tcs-icon .tci-top    { font-size: 15px !important; }
  .tcs-icon .tci-bot    { font-size: 15px !important; }
  .tcs-icon .tci-letter { font-size: 22px !important; }
  .tcs-icon .tci-num    { font-size: 26px !important; }
  .tcs-icon .tci-gram-der,
  .tcs-icon .tci-gram-die { font-size: 13px !important; padding: 2px 8px !important; }

  /* Body area */
  .tcs-body {
    padding: 10px 11px 11px !important;
    background: var(--card) !important;
    border-top: none !important;
  }
  .tcs-name {
    font-size: 13px !important;
    font-weight: 800 !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .tcs-desc {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 6px !important;
  }
  .tcs-level {
    display: inline-block !important;
    margin-top: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   📱 PRO MOBILE CARD DESIGN — Grammatik + Interview
   Same gradient-visual-top style as Alphabet Trainer cards
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── GRAMMATIK: gr-big-card ── */
  .gr-mode-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .gr-big-card {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    align-items: stretch !important;
  }
  .gr-big-card-icon {
    font-size: 40px !important;
    padding: 20px 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
    flex-shrink: 0 !important;
  }
  /* Color per card type */
  .gr-big-card-perfekt .gr-big-card-icon,
  .gr-big-card-praet   .gr-big-card-icon { background: linear-gradient(135deg,#78350f,#d97706) !important; }
  .gr-big-card-aux     .gr-big-card-icon,
  .gr-big-card-kj      .gr-big-card-icon,
  .gr-big-card-nb      .gr-big-card-icon { background: linear-gradient(135deg,#4c1d95,#7c3aed) !important; }
  .gr-big-card-vp      .gr-big-card-icon,
  .gr-big-card-pk      .gr-big-card-icon { background: linear-gradient(135deg,#0f766e,#14b8a6) !important; }

  .gr-big-card-body {
    padding: 11px 13px 13px !important;
    flex: 1 !important;
  }
  .gr-big-card-body h2 {
    font-size: 13px !important;
    margin-bottom: 3px !important;
  }
  .gr-big-card-body p {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .gr-big-card-examples { display: none !important; }
  .fc-mode-pill {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  /* ── INTERVIEW: iv-cat-card ── */
  .iv-cats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .iv-cat-card {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  .iv-cat-icon {
    font-size: 36px !important;
    padding: 22px 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg,#1e3a8a,#2563eb) !important;
    flex-shrink: 0 !important;
  }
  /* Interview color variants */
  .iv-cat-blue   .iv-cat-icon { background: linear-gradient(135deg,#1e3a8a,#2563eb) !important; }
  .iv-cat-green  .iv-cat-icon { background: linear-gradient(135deg,#064e3b,#16a34a) !important; }
  .iv-cat-purple .iv-cat-icon { background: linear-gradient(135deg,#4c1d95,#7c3aed) !important; }
  .iv-cat-orange .iv-cat-icon { background: linear-gradient(135deg,#78350f,#d97706) !important; }
  .iv-cat-teal   .iv-cat-icon { background: linear-gradient(135deg,#134e4a,#0d9488) !important; }

  .iv-cat-info {
    padding: 10px 12px 12px !important;
    text-align: center !important;
  }
  .iv-cat-label { font-size: 13px !important; font-weight: 800 !important; }
  .iv-cat-count { font-size: 11px !important; }
  .iv-cat-arrow { display: none !important; }

  /* ── HOEREN: ho-story-card ── */
  .ho-story-card {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* ── ZA mode grid — already has visual, just ensure 1fr 1fr ── */
  .za-modes-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   📱 HERO MINI GOAL WIDGET — mobile only
   ════════════════════════════════════════════════════════════════ */
.hero-mini-goal { display: none; }

/* Desktop: widget-cta-row just shows primary button as normal block */
.hero-widget-cta-row {
  display: contents; /* children behave as if wrapper doesn't exist */
}
  .hero-widget-cta-row .home-cta-primary {
  display: inline-block;
}

/* Remove the hmg-btn (it was the old ابدأ inside widget) */
.hmg-btn { display: none; }

@media (max-width: 640px) {
  /* ── Widget container ── */
  .hero-mini-goal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    padding: 14px 12px 13px;
    color: #fff;
    flex-shrink: 0;
    width: 120px;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.2);
  }

  /* Header row */
  .hmg-top {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .2px;
  }
  .hmg-icon { font-size: 12px; }
  .hmg-title { font-size: 10.5px; opacity: .95; }

  /* Ring — bigger & glowing */
  .hmg-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .hmg-ring svg { filter: drop-shadow(0 0 5px rgba(255,255,255,.35)); }

  /* Count + XP stacked inside ring */
  .hmg-num {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    direction: ltr;
    line-height: 1;
    text-align: center;
  }
  .hmg-num span  { font-size: 16px; font-weight: 900; color: #fff; line-height: 1; }
  .hmg-num small { font-size: 9px;  opacity: .6;  font-weight: 600; }
  .hmg-num-xp {
    font-size: 9px;
    font-weight: 800;
    color: #fde68a;
    margin-top: 2px;
    letter-spacing: .2px;
  }

  /* CTA button — gold tint */
  .hmg-btn {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, rgba(251,191,36,.38), rgba(245,158,11,.25));
    border: 1px solid rgba(251,191,36,.45);
    border-radius: 10px;
    padding: 6px 14px;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 2px 8px rgba(251,191,36,.2);
  }
  .hmg-btn:hover { background: linear-gradient(135deg, rgba(251,191,36,.55), rgba(245,158,11,.4)); }

  /* Hero-top: text takes flex-1, widget stays fixed width */
  /* ── Widget + CTA row: side by side ── */
  .hero-widget-cta-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
  }

  /* Widget: fixed width */
  .hero-mini-goal {
    flex: 0 0 110px;
    width: 110px;
  }

  /* Primary CTA: fills remaining space, bright gold */
  .hero-widget-cta-row .home-cta-primary {
    flex: 1 !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 24px rgba(245,158,11,.45), 0 2px 8px rgba(0,0,0,.15) !important;
    display: flex !important;
    align-items: center !important;
    animation: none !important;
  }
  .hero-widget-cta-row .home-cta-primary:hover {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(249,115,22,.5) !important;
  }

  /* Secondary CTA: full width below */
  .home-hero-actions {
    margin-top: 10px !important;
    padding-bottom: 16px !important;
  }
  .home-hero-actions .home-cta-secondary {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
  }

}

/* ── Topbar actions centered — no breakpoint needed, works on any mobile viewport ── */
.topbar .actions {
  justify-content: center !important;
}
/* On larger screens keep it normal */
@media (min-width: 980px) {
  .topbar .actions {
    justify-content: flex-end !important;
  }
}

/* ── Footer: desktop vs mobile layouts ── */
.footer-mobile { display: none; }
.footer-desktop { display: flex; }

@media (max-width: 980px) {
  .footer {
    padding: 0 !important;
    margin-bottom: 80px !important;
    border-top: none !important;
    background: transparent !important;
  }
  .footer-desktop { display: none !important; }
  .footer-mobile {
    display: block !important;
    padding: 18px 16px 10px !important;
    border-top: 1px solid var(--line) !important;
    background: var(--card, #fff) !important;
  }

  /* Links grid */
  .ftr-mob-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .ftr-mob-link {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 10px !important;
    background: var(--bg, #f8fafc) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: background .15s !important;
  }
  .ftr-mob-link:active { background: var(--line) !important; }
  .ftr-mob-icon {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--brand-light, rgba(59,130,246,.1)) !important;
    border-radius: 8px !important;
    color: var(--brand, #2563eb) !important;
  }
  .ftr-mob-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Copyright */
  .ftr-mob-copy {
    text-align: center !important;
    font-size: 11px !important;
    color: var(--muted) !important;
    padding-top: 4px !important;
  }
}
@media (max-width: 640px) {
  /* LESSONS: clean mobile text flow */
  .lesson-container,
  .lesson-container * {
    box-sizing: border-box;
  }

  .lesson-container {
    overflow-x: hidden;
  }

  /* Any lesson sentence should wrap naturally */
  .lesson-container .word-fill-line,
  .lesson-container .cloze-body,
  .lesson-container .ending-row .ending-sentence,
  .lesson-container .exercise-line,
  .lesson-container .question-line,
  .lesson-container .dialogue-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    direction: ltr !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: auto !important;
    font-size: 18px !important;
    line-height: 1.9 !important;
  }

  /* Keep blanks/selects inline, not full-width bars */
  .lesson-container .word-fill-input,
  .lesson-container .cloze-input,
  .lesson-container .cloze-select,
  .lesson-container .ending-input,
  .lesson-container .exercise-input,
  .lesson-container .question-input,
  .lesson-container select,
  .lesson-container input[type="text"] {
    display: inline-block !important;
    width: auto !important;
    max-width: 42vw !important;
    min-width: 72px !important;
    height: auto !important;
    vertical-align: baseline !important;
    margin: 0 6px !important;
    padding: 2px 4px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* Restore lesson rows so content doesn't stack badly */
  .lesson-container .word-fill-row,
  .lesson-container .question-row,
  .lesson-container .exercise-row,
  .lesson-container .dual-select-row,
  .lesson-container .numbers-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .lesson-container .word-fill-content,
  .lesson-container .question-main,
  .lesson-container .question-reply,
  .lesson-container .select-content,
  .lesson-container .dual-select-content {
    min-width: 0 !important;
    width: 100% !important;
  }

  .lesson-container .exercise-audio-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Slightly smaller selects on mobile */
  .lesson-container .cloze-select,
  .lesson-container select {
    max-width: 46vw !important;
  }
}