/* voltech-base.css — Shared styles for VOLTECH-Suite apps */
/* Loaded by: VOLTECH-ampere.html, VOLTECH-torque.html      */

/* NOTE: :root color tokens (--bg2, --bg3, --bg4, --ac, --acd, --acg,
   --acb, --sep, --brd, --brd2, --ok, --ok-g, --ok-b, --warn-g, --err,
   --err-g and theme-specific aliases) are kept inline in each HTML file
   because they differ per app. Only the accent-color-neutral custom
   properties are shared here. */

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

html {
  background: var(--bg); color: var(--tx); font-family: var(--sa);
  scroll-padding-top: 52px; /* Sticky header compensation */
  transition: background-color .25s ease, color .25s ease;
}

body {
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--tx);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;opacity:.08;
}

/* Light Mode */.dm {
  color-scheme: dark;
  --bg:#0a0a0f; --bg2:#0f0f17; --bg3:#171720; --bg4:#1e1e2a;
  --tx:#f0f0f5; --tx2:#a0a0b0; --tx3:#606070; --tx4:rgba(255,255,255,.08);
  --sep:rgba(255,255,255,.06); --brd:rgba(255,255,255,.09); --brd2:rgba(255,255,255,.14);
  --br:rgba(255,255,255,.09); --br2:rgba(255,255,255,.14);
  --border:rgba(255,255,255,.09);
  --shadow-sm:0 1px 4px rgba(0,0,0,.5); --shadow-md:0 4px 20px rgba(0,0,0,.55); --shadow-lg:0 16px 48px rgba(0,0,0,.65);
  --sh:0 1px 4px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.45); --sh2:0 2px 8px rgba(0,0,0,.6),0 12px 40px rgba(0,0,0,.5);
}
.dm .hdr { background:rgba(10,10,15,.92); }
.dm .bnav { background:rgba(10,10,15,.94); border-top: 1px solid rgba(255,255,255,.08); }
.dm .bnav-btn { color: rgba(255,255,255,.35); }
.dm .bnav-btn.on { color: var(--ac); }
.dm .drawer-overlay { background: rgba(255,255,255,.35); }
.dm .drawer { background: var(--bg2); }

/* Header */
.hdr {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--sep);
  padding: .75rem 1rem;
  display: flex; align-items: center; gap: .65rem;
}
.hdr-wordmark { flex: 1; }
.hdr-wordmark h1 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; line-height: 1.1; }
.hdr-wordmark p { font-size: 10px; color: var(--tx3); font-weight: 500; letter-spacing: .2px; margin-top: 1px; }
.hdr-actions { display: flex; gap: .4rem; }
.hdr-btn {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--bg3); border: 1px solid var(--brd);
  color: var(--tx2); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.hdr-btn:hover { background: var(--bg4); color: var(--tx); }
.hdr-btn:active { opacity: .7; }

/* ── BOTTOM NAV ── */
.bnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(10,10,15,.94);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom));
  z-index: 40; gap: 2px;
}
.bnav-btn {
  flex: 1; font-size: 9.5px; font-weight: 600;
  padding: .5rem .2rem .45rem; border: none; background: transparent;
  cursor: pointer; color: var(--tx3); border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: var(--touch); /* 44px touch target */
  letter-spacing: .02em; -webkit-tap-highlight-color: transparent;
  text-transform: uppercase; transition: color var(--t-fast), background var(--t-fast);
}
.bnav-btn:active { opacity: .65; transform: scale(.95); }
.bnav-btn.on { color: var(--ac); }
.bnav-icon { font-size: 20px; line-height: 1; display: block;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.bnav-btn.on .bnav-icon { transform: translateY(-2px) scale(1.12); }

/* Screens */
.screen { display: none; padding: 1rem; max-width: 640px; margin: 0 auto; padding-bottom: 90px; animation: none; }
.screen.on { display: block; animation: fadeUp .25s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cards */
.card {
  background: var(--bg2);
  border: 1px solid var(--br);
  border-radius: var(--r2, 14px);
  padding: 1rem;
  margin-bottom: .75rem;
  transition: border-color .2s;
}
.card:hover { border-color: var(--br2); }

/* Section titles */
.sec-title {
  font-size: 11px; font-weight: 700; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .8px;
  margin: 1.25rem 0 .6rem;
}
.sec-title:first-child { margin-top: 0; }

/* Daily Question */
.dq-card {
  background: var(--bg2);
  border: 1px solid var(--br);
  border-left: 3px solid var(--ac);
  border-radius: var(--r2);
  padding: 1rem;
  margin-bottom: .75rem;
}
.dq-label {
  font-size: 10px; font-weight: 700; color: var(--ac);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: .5rem;
}
.dq-question {
  font-size: 15px; font-weight: 600; color: var(--tx);
  line-height: 1.4; margin-bottom: .75rem;
}
.dq-toggle {
  background: var(--acg); color: var(--ac);
  border: 1px solid var(--acb);
  border-radius: var(--r-sm); padding: .5rem .85rem;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--sa); min-height: var(--touch);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.dq-toggle:hover { background: var(--acb); }
.dq-answer {
  background: var(--bg3); border-radius: 8px;
  padding: .75rem; margin-top: .75rem;
  font-size: 13px; line-height: 1.5; color: var(--tx2);
}

/* Stats grid */
.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .5rem; margin-bottom: .75rem;
}
.stat-card {
  background: var(--bg2); border: 1px solid var(--br);
  border-radius: var(--r); padding: .75rem;
}
.stat-value {
  font-size: 24px; font-weight: 700; color: var(--ac);
  font-family: var(--mo); line-height: 1.2;
}
.stat-label { font-size: 11px; color: var(--tx3); margin-top: 2px; font-weight: 500; }

/* Quick LF Grid */
.lf-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.lf-quick-card {
  background: var(--bg2); border: 1px solid var(--br);
  border-radius: var(--r); padding: .75rem;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .15s;
  text-align: left;
}
.lf-quick-card:hover { background: var(--bg3); border-color: var(--acb); }
.lf-quick-icon { font-size: 18px; margin-bottom: .3rem; display: block; }
.lf-quick-name { font-size: 12px; font-weight: 600; color: var(--tx); line-height: 1.3; }
.lf-quick-sub { font-size: 10px; color: var(--tx3); margin-top: 2px; }

/* Accordion */
.lf-accordion {
  background: var(--bg2); border: 1px solid var(--br);
  border-radius: var(--r2); margin-bottom: .5rem;
  overflow: hidden;
}
.lf-summary {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem; cursor: pointer;
  list-style: none; user-select: none;
  transition: color .15s;
}
.lf-summary::-webkit-details-marker { display: none; }
details[open] > .lf-summary { color: var(--ac); }
.lf-icon { font-size: 20px; flex-shrink: 0; }
.lf-meta { flex: 1; }
.lf-title { font-size: 14px; font-weight: 600; display: block; line-height: 1.3; }
.lf-count { font-size: 11px; color: var(--tx3); margin-top: 2px; display: block; }
.lf-arrow {
  font-size: 16px; color: var(--tx3); font-weight: 700;
  transition: transform .2s; flex-shrink: 0;
}
details[open] .lf-arrow { transform: rotate(90deg); color: var(--ac); }
.lf-body {
  border-top: 1px solid var(--sep);
  padding: .75rem 1rem 1rem;
}
.lf-body ul { list-style: none; }
.lf-body ul li {
  padding: .45rem 0;
  border-bottom: 1px solid var(--sep);
  font-size: 13px; line-height: 1.4; color: var(--tx2);
  display: flex; gap: .5rem; align-items: flex-start;
}
.lf-body ul li:last-child { border-bottom: none; padding-bottom: 0; }
.lf-body ul li::before {
  content: '›'; color: var(--ac); font-weight: 700;
  flex-shrink: 0; margin-top: 0;
}

/* Quiz */
.quiz-hero {
  text-align: center; padding: 2rem 1rem;
  background: var(--bg2); border: 1px solid var(--br);
  border-radius: var(--r2); margin-bottom: 1rem;
}
.quiz-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 1rem;justify-content:center;}
.quiz-filter-btn{padding:.3rem .75rem;border-radius:20px;border:1px solid var(--sep);background:var(--bg3);color:var(--tx2);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;min-height:32px;}
.quiz-filter-btn:hover{background:var(--bg3);border-color:var(--brd2);}
.quiz-hero-icon { font-size: 48px; display: block; margin-bottom: .75rem; }
.quiz-hero h2 { font-size: 22px; font-weight: 700; margin-bottom: .35rem; }
.quiz-hero p { font-size: 14px; color: var(--tx2); margin-bottom: 1.5rem; }
.quiz-hs-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--acg); color: var(--ac);
  border: 1px solid var(--acb);
  border-radius: 20px; padding: .3rem .8rem;
  font-size: 12px; font-weight: 600; margin-bottom: 1.25rem;
}

.btn-primary {
  background: var(--ac); color: #fff;
  border: none; border-radius: 12px;
  padding: .75rem 1.5rem; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: var(--sa);
  min-height: 48px; width: 100%; max-width: 300px;
  transition: background .15s; display: block; margin: 0 auto;
}
.btn-primary:hover { background: var(--acd); }

.quiz-progress-wrap {
  background: var(--bg3); border-radius: 4px;
  height: 4px; margin-bottom: .75rem; overflow: hidden;
}
.quiz-progress-bar {
  height: 4px; background: var(--ac);
  border-radius: 4px; transition: width .3s;
}
.quiz-counter {
  font-size: 12px; color: var(--tx3); font-weight: 600;
  text-align: right; margin-bottom: .75rem;
}
.quiz-card {
  background: var(--bg2); border: 1px solid var(--br);
  border-radius: var(--r2); padding: 1.25rem;
}
.quiz-question {
  font-size: 16px; font-weight: 600; line-height: 1.45;
  margin-bottom: 1rem; color: var(--tx);
}
.quiz-opts {
  display: flex; flex-direction: column; gap: .5rem;
  margin-bottom: .75rem;
}
.quiz-opt {
  background: var(--bg3); border: 1px solid var(--br);
  border-radius: 10px; padding: .75rem 1rem;
  font-size: 14px; font-weight: 500; color: var(--tx);
  cursor: pointer; text-align: left; font-family: var(--sa);
  min-height: 44px; transition: background .15s, color .15s, border-color .15s, opacity .15s; line-height: 1.3;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--ac); color: var(--tx); }
.quiz-opt.chosen { border-color: var(--ac); background: var(--acg); color: var(--ac); }
.quiz-opt.correct { border-color: var(--ok); background: var(--ok-g); color: var(--ok); }
.quiz-opt.wrong { border-color: var(--err); background: var(--err-g); color: var(--err); }
.quiz-opt:disabled { cursor: default; }
.quiz-explanation {
  background: var(--bg3); border-radius: 10px;
  padding: .85rem; margin-bottom: .75rem;
  font-size: 13px; line-height: 1.5; color: var(--tx2);
  border-left: 2px solid var(--ac);
}
.quiz-next-btn {
  background: var(--ac); color: #fff;
  border: none; border-radius: 10px;
  padding: .7rem 1.25rem; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--sa);
  min-height: 44px; width: 100%;
  transition: background .15s;
}
.quiz-next-btn:hover { background: var(--acd); }

.quiz-end-card {
  text-align: center; background: var(--bg2);
  border: 1px solid var(--br); border-radius: var(--r2);
  padding: 2rem 1.25rem;
}
.quiz-score-big {
  font-size: 56px; font-weight: 700; color: var(--ac);
  font-family: var(--mo); line-height: 1;
}
.quiz-score-sub { font-size: 14px; color: var(--tx2); margin: .35rem 0 1rem; }
.quiz-end-hs { font-size: 13px; color: var(--tx3); margin-bottom: 1.5rem; }

/* Formulas */
.formula-cat-title {
  font-size: 13px; font-weight: 700; color: var(--ac);
  margin: 1.25rem 0 .5rem; display: flex; align-items: center; gap: .4rem;
}
.formula-cat-title:first-child { margin-top: 0; }
.formula-card {
  background: var(--bg2); border: 1px solid var(--br);
  border-radius: var(--r); padding: .85rem 1rem;
  margin-bottom: .4rem; position: relative;
}
.formula-cat-badge {
  display: inline-block; background: var(--acg);
  color: var(--ac); border-radius: 5px;
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  margin-bottom: .35rem; letter-spacing: .3px;
}
.formula-name {
  font-size: 13px; font-weight: 600; color: var(--tx);
  margin-bottom: .3rem;
}
.formula-eq {
  font-family: var(--mo); font-size: 15px; font-weight: 600;
  color: var(--ac); margin-bottom: .35rem; line-height: 1.4;
}
.formula-desc { font-size: 12px; color: var(--tx3); line-height: 1.4; }
.formula-copy {
  position: absolute; top: .7rem; right: .7rem;
  background: var(--bg3); border: 1px solid var(--br);
  border-radius: 6px; width: 28px; height: 28px;
  font-size: 12px; cursor: pointer; color: var(--tx3);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, opacity .15s; font-family: var(--sa);
}
.formula-copy:hover { color: var(--ac); border-color: var(--ac); background: var(--acg); }

/* AP Check */
.inner-tabs {
  display: flex; gap: .4rem; margin-bottom: 1rem;
}
.inner-tab {
  padding: .55rem 1.1rem; border-radius: var(--r-full);
  border: 1px solid var(--brd); background: var(--bg2);
  color: var(--tx2); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--sa); min-height: var(--touch);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.inner-tab.on { background: var(--ac); color: #fff; border-color: var(--ac); }
.inner-tab:hover:not(.on) { border-color: var(--ac); color: var(--ac); }

.ap-panel { display: none; }
.ap-panel.on { display: block; }

.ap-progress-wrap {
  background: var(--bg2); border: 1px solid var(--br);
  border-radius: var(--r); padding: .75rem;
  margin-bottom: .75rem;
}
.ap-prog-label {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: .5rem;
}
.ap-prog-text { font-size: 13px; font-weight: 600; color: var(--tx2); }
.ap-prog-val { font-size: 13px; font-weight: 700; color: var(--ac); }
.ap-progress-bar-bg {
  background: var(--bg3); border-radius: 4px; height: 6px; overflow: hidden;
}
.ap-progress-bar { height: 6px; background: var(--ac); border-radius: 4px; transition: width .3s; }

.ap-list { display: flex; flex-direction: column; gap: .35rem; }
.ap-item {
  display: flex; align-items: flex-start; gap: .75rem;
  background: var(--bg2); border: 1px solid var(--br);
  border-radius: var(--r); padding: .75rem;
  cursor: pointer; transition: border-color .15s;
}
.ap-item:hover { border-color: var(--acb); }
.ap-check {
  width: 18px; height: 18px; accent-color: var(--ac);
  cursor: pointer; flex-shrink: 0; margin-top: 1px;
}
.ap-item-text {
  font-size: 13px; color: var(--tx2); line-height: 1.4;
  flex: 1;
}
.ap-item-text.done { color: var(--tx3); text-decoration: line-through; }

/* Drawer */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.drawer-overlay.on { opacity: 1; pointer-events: all; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(300px, 85vw);
  background: var(--bg2);
  border-left: 1px solid var(--br);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.on { transform: translateX(0); }
.drawer-hdr {
  padding: 1rem; border-bottom: 1px solid var(--sep);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-title { font-size: 14px; font-weight: 700; color: var(--tx); }
.drawer-apps { padding: .5rem 0; flex: 1; }
.drawer-app {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem; cursor: pointer;
  text-decoration: none; color: var(--tx);
  transition: background .15s;
}
.drawer-app:hover { background: var(--bg3); }
.drawer-app.active { color: var(--ac); }
.drawer-app-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.drawer-app-name { font-size: 14px; font-weight: 500; }
.drawer-app-sub { font-size: 11px; color: var(--tx3); }
.drawer-app-badge {
  margin-left: auto; background: var(--ac); color: #fff;
  border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 700;
}
.drawer-footer {
  padding: .5rem 1rem .75rem;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: .25rem;
}
.drawer-footer a {
  color: var(--ac); text-decoration: none;
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: .3rem;
}
.drawer-footer a:hover { color: var(--acd); }

/* Utility */
.mt05 { margin-top: .5rem; }
.mt1 { margin-top: 1rem; }
.gap2 { gap: .2rem; }

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .lf-grid { grid-template-columns: 1fr 1fr; }
  .formula-eq { font-size: 13px; }
}
@media (min-width: 768px) {
  .screen { max-width: 720px; padding-left: 1.5rem; padding-right: 1.5rem; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .lf-grid { grid-template-columns: repeat(3, 1fr); }
  .sr-grade-row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .screen { max-width: 800px; }
  .lf-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Calculator ─────────────────────────────────── */
.calc-card-title{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:.25rem;display:flex;align-items:center;gap:.4rem;}
.calc-card-desc{font-size:11px;color:var(--tx3);margin-bottom:.75rem;line-height:1.4;}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.6rem;}
.calc-row.cols3{grid-template-columns:1fr 1fr 1fr;}
.calc-field label{display:block;font-size:10px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
.calc-field input,.calc-field select{width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--br);border-radius:8px;padding:.5rem .7rem;font-size:14px;color:var(--tx);outline:none;font-family:var(--sa);-webkit-appearance:none;appearance:none;}
.calc-field input:focus,.calc-field select:focus{border-color:var(--ac);}
.calc-field input[readonly]{color:var(--ac);font-weight:700;background:var(--acg);border-color:var(--acb);}
.calc-go{width:100%;background:var(--ac);color:#fff;border:none;border-radius:8px;padding:.65rem;font-size:13px;font-weight:700;cursor:pointer;margin:.5rem 0 .25rem;letter-spacing:.02em;}
.calc-go:active{opacity:.85;}
.calc-result-box{background:var(--acg);border:1px solid var(--acb);border-radius:8px;padding:.75rem 1rem;display:none;margin-top:.4rem;}
.calc-result-box.show{display:block;}
.calc-result-val{font-size:22px;font-weight:800;color:var(--ac);}
.calc-result-unit{font-size:13px;color:var(--tx3);margin-left:.25rem;}
.calc-result-label{font-size:11px;color:var(--tx3);margin-top:2px;}
.calc-error{font-size:12px;color:#ff453a;margin-top:.4rem;display:none;}
.calc-hint{font-size:11px;color:var(--tx3);background:var(--bg3);border-radius:8px;padding:.5rem .75rem;margin-bottom:.75rem;line-height:1.5;}
.calc-section-title{font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.1em;margin:1.25rem 0 .5rem;}
.calc-section-title:first-child{margin-top:0;}

/* ── Language ──────────────────────────────────── */
html.lang-en .de-only { display: none !important; }
html.lang-de .en-only { display: none !important; }
html.lang-tr .de-only, html.lang-tr .en-only, html.lang-tr .ru-only, html.lang-tr .ar-only { display: none !important; }
html.lang-ru .de-only, html.lang-ru .en-only, html.lang-ru .tr-only, html.lang-ru .ar-only { display: none !important; }
html.lang-ar .de-only, html.lang-ar .en-only, html.lang-ar .tr-only, html.lang-ar .ru-only { display: none !important; }
html.lang-de .tr-only, html.lang-de .ru-only, html.lang-de .ar-only { display: none !important; }
html.lang-en .tr-only, html.lang-en .ru-only, html.lang-en .ar-only { display: none !important; }
html.lang-ar { direction: rtl; }
html.lang-ar .hdr { flex-direction: row-reverse; }
html.lang-ar .hdr-logo { flex-direction: row-reverse; }
html.lang-ar .bnav { direction: rtl; }
html.lang-ar .drawer { direction: rtl; }

.lang-btn { font-size: 16px; font-weight: 700; padding: .35rem .5rem; border-radius: 8px; background: var(--bg3); border: 1px solid var(--br); color: var(--tx2); cursor: pointer; letter-spacing: .04em; min-height:44px;min-width:44px; }
.lang-btn:hover { background: var(--bg4); }

/* ── SPACED REPETITION ── */
.sr-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1.25rem;}
.sr-stat{background:var(--bg2);border:1px solid var(--br);border-radius:var(--r);padding:.75rem .5rem;text-align:center;}
.sr-stat-v{font-family:var(--mo);font-size:22px;font-weight:700;line-height:1;}
.sr-stat-l{font-size:10px;color:var(--tx3);margin-top:4px;letter-spacing:.04em;text-transform:uppercase;}
.sr-section-title{font-size:13px;font-weight:700;color:var(--tx2);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.75rem;}
.sr-start-btn{width:100%;padding:.85rem;background:var(--ac);color:#fff;border:none;border-radius:var(--r2);font-family:var(--sa);font-size:15px;font-weight:700;cursor:pointer;letter-spacing:-.2px;transition:opacity .15s;}
.sr-start-btn:active{opacity:.8;}
.sr-start-btn:hover{opacity:.88;}
.sr-reset-btn{width:100%;padding:.6rem;background:transparent;color:var(--tx3);border:1px solid var(--br);border-radius:var(--r);font-family:var(--sa);font-size:13px;cursor:pointer;margin-top:8px;}
.sr-notify-row { margin: 1rem 0 0; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.sr-notify-btn { background: var(--acg); border:1px solid var(--acb); color:var(--ac); padding:.5rem 1.2rem; border-radius:20px; font-size:.85rem; cursor:pointer; }
.sr-notify-btn.active { background:var(--acb); }
.sr-notify-hint { font-size:.75rem; color:var(--tx2,#aaa); }

/* ── Backup Panel ─────────────────────────────────────── */
.backup-panel{background:var(--bg2);border:1px solid var(--brd);border-radius:16px;padding:20px;margin:20px 0}
.backup-panel h3{margin:0 0 4px;font-size:1rem}
.backup-panel p{margin:0 0 16px;font-size:.82rem;color:var(--tx3)}
.backup-btns{display:flex;gap:10px;flex-wrap:wrap}
.backup-btn{flex:1;min-width:120px;padding:12px;background:var(--bg3);border:1px solid var(--brd);border-radius:10px;color:var(--tx);font-size:.88rem;cursor:pointer;text-align:center}
.backup-btn:hover{background:var(--bg4)}
.backup-btn.primary{background:var(--ac);color:#fff;border-color:transparent}
.backup-btn.primary:hover{background:var(--acd)}
.backup-keys{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.bk-tag{padding:4px 10px;background:var(--bg3);border:1px solid var(--brd);border-radius:20px;font-size:.75rem;color:var(--tx3)}
.bk-tag.has-data{border-color:var(--ok);color:var(--ok)}

/* ── Sync Panel ───────────────────────────────────────── */
.sync-panel{background:var(--bg2);border:1px solid var(--brd);border-radius:16px;padding:20px;margin:20px 0}
.sync-panel h3{margin:0 0 4px;font-size:1rem}
.sync-panel p{margin:0 0 16px;font-size:.82rem;color:var(--tx3)}
.sync-views>div{display:none}
.sync-views>div.active{display:block}
.sync-input{width:100%;padding:10px 12px;background:var(--bg3);border:1px solid var(--brd);border-radius:10px;color:var(--tx);font-size:.9rem;margin-bottom:10px;box-sizing:border-box}
.sync-btn{width:100%;padding:12px;background:var(--ac);color:#fff;border:none;border-radius:10px;font-size:.9rem;cursor:pointer;margin-bottom:8px}
.sync-btn:hover{background:var(--acd)}
.sync-btn.sec{background:var(--bg3);color:var(--tx);border:1px solid var(--brd)}
.sync-btn.sec:hover{background:var(--bg4)}
.sync-code-display{text-align:center;padding:20px;background:var(--bg3);border-radius:12px;margin-bottom:12px}
.sync-code-display .code{font-size:2rem;font-weight:700;letter-spacing:.2em;color:var(--ac);font-family:var(--font-mono)}
.sync-status{font-size:.8rem;color:var(--tx3);text-align:center;margin-top:8px}

@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── SR Flashcard — Industrial Redesign ─────────────────── */
.sr-flip-wrap{
  perspective:1200px;
  width:100%;
  max-width:480px;
  margin:0 auto 1.5rem;
}
.sr-flip{
  position:relative;
  width:100%;
  min-height:300px;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.33,1,.68,1);
  cursor:pointer;
  border-radius:20px;
}
.sr-flip.flipped{transform:rotateY(180deg);}
.sr-front,.sr-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:20px;
  padding:2rem 1.75rem 1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:300px;
}
.sr-front{
  background:#111118;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 64px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06);
}
.sr-card-tag{
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tx3);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:.25rem .75rem;
  margin-bottom:1.5rem;
  align-self:center;
}
.sr-back .sr-card-tag{color:var(--ac);background:var(--acg);border-color:var(--acb);}
.sr-card-q{
  font-size:clamp(18px,4vw,22px);
  font-weight:700;
  line-height:1.35;
  color:var(--tx);
  letter-spacing:-.4px;
  flex:1;
  display:flex;
  align-items:center;
}
.sr-card-a{
  font-size:clamp(14px,3vw,16px);
  line-height:1.65;
  color:var(--tx);
  font-family:var(--mo);
}
.sr-card-hint{
  font-size:10px;
  color:var(--tx3);
  margin-top:auto;
  padding-top:1.25rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:6px;
}
.sr-card-hint::before{content:'↕';font-size:13px;}

/* Progress bar */
.sr-prog-wrap{margin-bottom:1.25rem;width:100%;max-width:480px;margin-left:auto;margin-right:auto;}
.sr-prog-bar-track{height:3px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;margin-bottom:.6rem;}
.sr-prog-bar-fill{height:100%;background:var(--ac);border-radius:99px;transition:width .3s ease;}
.sr-prog-label{font-family:var(--mo);font-size:10px;color:var(--tx3);text-align:right;letter-spacing:.05em;}

/* Grade buttons */
.sr-grade-prompt{
  font-family:var(--mo);
  font-size:10px;
  color:var(--tx3);
  text-align:center;
  margin-bottom:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.sr-grade-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:.75rem;}
.sr-grade-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:64px;
  padding:1rem .5rem;
  border-radius:16px;
  border:1px solid;
  background:transparent;
  cursor:pointer;
  transition:transform .1s ease,background .15s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.sr-grade-btn:active{transform:scale(.94);}
.sr-grade-btn-label{font-size:14px;font-weight:700;letter-spacing:-.2px;}
.sr-grade-btn-note{font-family:var(--mo);font-size:10px;opacity:.55;letter-spacing:.03em;}
.sr-grade-btn.bad{border-color:rgba(255,69,58,.3);color:#ff453a;background:rgba(255,69,58,.06);}
.sr-grade-btn.bad:active{background:rgba(255,69,58,.16);}
.sr-grade-btn.ok{border-color:rgba(255,214,10,.3);color:#ffd60a;background:rgba(255,214,10,.05);}
.sr-grade-btn.ok:active{background:rgba(255,214,10,.14);}
.sr-grade-btn.good{border-color:rgba(48,209,88,.3);color:#30d158;background:rgba(48,209,88,.06);}
.sr-grade-btn.good:active{background:rgba(48,209,88,.16);}

/* Done screen */
.sr-done{text-align:center;padding:2.5rem 1rem;}
.sr-done-emoji{font-size:48px;margin-bottom:.75rem;display:block;}
.sr-done-title{font-size:22px;font-weight:800;margin-bottom:.5rem;letter-spacing:-.4px;}
.sr-done-sub{font-size:14px;color:var(--tx3);line-height:1.6;}

/* ── DARK MODE: Inputs, Selects, Checkboxes ──────────────────── */
.dm input,
.dm input[type=text],
.dm input[type=number],
.dm input[type=date],
.dm input[type=time],
.dm input[type=email],
.dm input[type=password],
.dm input[type=search],
.dm input[type=url],
.dm textarea,
.dm select {
  background: #1a1a28 !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f0f0f5 !important;
  color-scheme: dark !important;
}
.dm input::placeholder,
.dm textarea::placeholder { color: rgba(240,240,245,.35) !important; }

/* ── DARK MODE POLISH ──────────────────────────────────────── */
.dm body {
  background: #08080f !important;
}
.dm .hdr,
.dm header,
.dm nav {
  background: rgba(8,8,15,.94) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: saturate(120%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(20px) !important;
}
.dm .card,
.dm .dash-card,
.dm .app-tile,
.dm .stat-card,
.dm .quiz-card,
.dm .lern-card,
.dm .info-card,
.dm .feature-card,
.dm .tool-card,
.dm .week-card,
.dm .bento-cell {
  background: #0f0f1a !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
.dm .badge,
.dm .chip,
.dm .tag,
.dm .pill,
.dm .label {
  background: rgba(255,255,255,.07) !important;
  color: var(--tx2) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.dm .bnav,
.dm .nav,
.dm .tab-bar,
.dm .bottom-nav {
  background: rgba(8,8,15,.97) !important;
  border-top-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,.06) !important;
}
.dm .drawer,
.dm .modal,
.dm .sheet,
.dm .popup,
.dm .dropdown,
.dm .panel {
  background: #0f0f1a !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6) !important;
}
.dm .toast,
.dm .snack,
.dm .alert {
  background: #1a1a28 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: var(--tx) !important;
}
.dm a:not(.btn):not([class*="btn"]):not([class*="card"]) {
  color: #c084fc;
}
.dm a:not(.btn):not([class*="btn"]):not([class*="card"]):hover {
  color: #e879f9;
}
.dm code,
.dm pre,
.dm .code-block {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #c4b5fd !important;
}
.dm table thead {
  background: rgba(255,255,255,.05) !important;
}
.dm table tr:nth-child(even) {
  background: rgba(255,255,255,.025) !important;
}
.dm table td,
.dm table th {
  border-color: rgba(255,255,255,.07) !important;
}
.dm hr,
.dm .divider,
.dm .sep {
  border-color: rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.07) !important;
}
/* ── Lückentext Mode ── */
.sr-mode-row{display:flex;gap:8px;margin-bottom:1rem;}
.sr-mode-btn{flex:1;padding:.55rem;background:var(--bg2);border:1px solid var(--br);border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;color:var(--tx2);font-family:var(--sa);transition:all .15s;}
.sr-mode-btn.active{background:rgba(202,138,4,.12);border-color:rgba(202,138,4,.4);color:var(--ac);}
.sr-fill-area-wrap{width:100%;max-width:480px;margin:0 auto;}
.sr-fill-q-card{background:var(--bg2);border:1px solid var(--br);border-radius:var(--r2);padding:1.5rem 1.25rem;margin-bottom:1rem;text-align:center;}
.sr-fill-q-tag{font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--ac);background:rgba(202,138,4,.1);border:1px solid rgba(202,138,4,.2);border-radius:99px;padding:3px 10px;display:inline-block;margin-bottom:.75rem;}
.sr-fill-q-text{font-size:clamp(17px,3.5vw,21px);font-weight:700;line-height:1.4;color:var(--tx);}
.sr-fill-input{width:100%;padding:.9rem 1rem;font-size:15px;font-family:var(--sa);background:var(--bg2);border:2px solid var(--br2);border-radius:var(--r2);color:var(--tx);outline:none;resize:vertical;min-height:72px;transition:border-color .2s;display:block;}
.sr-fill-input:focus{border-color:var(--ac);}
.sr-fill-input:disabled{opacity:.55;cursor:not-allowed;}
.sr-fill-submit{width:100%;padding:.85rem;background:var(--ac);color:#fff;border:none;border-radius:var(--r2);font-family:var(--sa);font-size:15px;font-weight:700;cursor:pointer;letter-spacing:-.2px;margin-top:.75rem;transition:opacity .15s;display:block;}
.sr-fill-submit:active{opacity:.8;}
.sr-fill-submit:disabled{opacity:.45;cursor:not-allowed;}

.sr-fill-input-row { position:relative; }
.sr-mic-btn {
  position:absolute; right:8px; bottom:8px;
  width:36px; height:36px; border-radius:50%;
  border:none; background:var(--acg); color:var(--ac);
  cursor:pointer; font-size:18px; display:flex;
  align-items:center; justify-content:center;
  transition:background var(--t-fast), transform var(--t-fast);
  z-index:2;
}
.sr-mic-btn:hover { background:var(--acb); transform:scale(1.1); }
.sr-mic-btn.listening {
  background:rgba(255,69,58,.15); color:#ff453a;
  animation:mic-pulse 1s ease infinite;
}
@keyframes mic-pulse {
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
}
.sr-fill-answer-box{background:var(--bg2);border:1px solid var(--br);border-left:3px solid var(--ac);border-radius:var(--r2);padding:1rem 1.25rem;margin-top:1rem;}
.sr-fill-answer-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:.4rem;font-weight:600;}
.sr-fill-answer-text{font-size:15px;line-height:1.55;color:var(--tx);}
/* ── Beruf wechseln ──────────────────────────────────── */
.hdr-back{font-size:13px;font-weight:500;color:var(--tx2);text-decoration:none;padding:.5rem .75rem;border-radius:8px;background:var(--acg);border:1px solid var(--acb);white-space:nowrap;transition:background var(--t-fast);}
.hdr-back:hover{background:var(--acb);}
/* ── Session Hero ────────────────────────────────────── */
.sh-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem;}
.sh-label{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);}
.sh-streak{font-size:12px;font-weight:700;color:var(--warn);background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.18);padding:.2rem .6rem;border-radius:100px;}
.sh-streak.great{color:var(--ok);background:var(--ok-g);border-color:rgba(22,163,74,.2);}
.sh-count{font-size:38px;font-weight:800;letter-spacing:-.5px;line-height:1;color:var(--tx);margin-bottom:.25rem;}
.sh-count b{color:var(--ac);}
.sh-done-ico{font-size:32px;line-height:1;margin-bottom:.25rem;}
.sh-sub{font-size:13px;color:var(--tx2);margin-bottom:1rem;line-height:1.4;}
.sh-cta:hover{opacity:.88;}.sh-cta:active{transform:scale(.97);}
.sh-cta.done-cta{background:var(--ok);box-shadow:0 4px 16px rgba(22,163,74,.25);}
/* ── App Tile Grid (shared) ───────────────────────────── */
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.75rem;}

/* Light mode tiles: white card with visible shadow + border */
.tile{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.09);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  border-radius:var(--r2);
  padding:1.1rem 1rem;
  text-decoration:none;color:var(--tx);
  display:flex;flex-direction:column;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .15s;
  position:relative;overflow:hidden;cursor:pointer;
  /* Reset button appearance for <button> tiles */
  -webkit-appearance:none;appearance:none;font-family:inherit;text-align:left;
}
.tile:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.06);}
.tile:active{opacity:.75;transform:scale(.97);}

/* Wide tile: icon left, content+arrow right */
.tile.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:1rem;}

/* Icon block — left-aligned, no extra gap */
.tile-ico{font-size:0;display:block;flex-shrink:0;margin-bottom:.65rem;}
.tile.wide .tile-ico{margin-bottom:0;}

/* Info wrapper for wide tile text area */
.tile-info{flex:1;min-width:0;}

/* Category label */
.tile-sup{
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:.2rem;display:block;
}

/* Title */
.tile-name{font-size:15px;font-weight:700;letter-spacing:-.2px;line-height:1.2;color:var(--tx);display:block;}

/* Description */
.tile-desc{font-size:12px;color:var(--tx3);line-height:1.4;margin-top:.2rem;display:block;}

/* Arrow — sits at bottom-left for small tiles, right edge for wide */
.tile-arrow{font-size:13px;color:var(--ac);font-weight:700;margin-top:auto;padding-top:.65rem;display:block;}
.tile.wide .tile-arrow{margin-top:0;padding-top:0;margin-left:auto;flex-shrink:0;font-size:16px;}

/* Accent border overrides (colour-coded per tile type) */
.a-indigo{border-color:rgba(99,102,241,.28)!important;}
.a-purple{border-color:rgba(124,58,237,.28)!important;}
.a-orange{border-color:rgba(249,115,22,.28)!important;}
.a-teal  {border-color:rgba(20,184,166,.28)!important;}
.a-green {border-color:rgba(22,163,74,.28)!important;}
.a-blue  {border-color:rgba(59,130,246,.28)!important;}
.a-red   {border-color:rgba(239,68,68,.28)!important;}
.a-yellow{border-color:rgba(217,119,6,.28)!important;}

/* Dark mode tiles: dark card with subtle glow border */
.dm .tile{
  background:var(--bg2);
  border:1px solid var(--brd);
  box-shadow:none;
}
.dm .tile:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  border-color:var(--brd2);
}
.dm .a-indigo{border-color:rgba(99,102,241,.22)!important;}
.dm .a-purple{border-color:rgba(124,58,237,.22)!important;}
.dm .a-orange{border-color:rgba(249,115,22,.22)!important;}
.dm .a-teal  {border-color:rgba(20,184,166,.22)!important;}
.dm .a-green {border-color:rgba(22,163,74,.22)!important;}
.dm .a-blue  {border-color:rgba(59,130,246,.22)!important;}
.dm .a-red   {border-color:rgba(239,68,68,.22)!important;}
.dm .a-yellow{border-color:rgba(217,119,6,.22)!important;}
.dm .a-indigo:hover{border-color:rgba(99,102,241,.45)!important;}
.dm .a-purple:hover{border-color:rgba(124,58,237,.45)!important;}
.dm .a-orange:hover{border-color:rgba(249,115,22,.45)!important;}
.dm .a-teal:hover  {border-color:rgba(20,184,166,.45)!important;}
.dm .a-green:hover {border-color:rgba(22,163,74,.45)!important;}
.dm .a-blue:hover  {border-color:rgba(59,130,246,.45)!important;}
.dm .a-red:hover   {border-color:rgba(239,68,68,.45)!important;}
.dm .a-yellow:hover{border-color:rgba(217,119,6,.45)!important;}

/* New badge */
.new-badge{
  position:absolute;top:.75rem;right:.75rem;
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(22,163,74,.15);color:var(--ok);
  border:1px solid rgba(22,163,74,.25);
  padding:.15rem .5rem;border-radius:100px;
}

/* Forum spotlight — styled to match tile quality */
.forum-spotlight{
  display:flex;align-items:center;gap:14px;
  grid-column:1/-1; /* always spans full width inside app-grid */
  background:#ffffff;
  border:1px solid rgba(0,0,0,.09);
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  border-radius:var(--r2);
  padding:1rem 1.1rem;
  margin-bottom:0; /* grid gap handles spacing inside app-grid */
  text-decoration:none;color:var(--tx);cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .15s;
}
.forum-spotlight:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12);border-color:var(--ac);}
.forum-spotlight:active{opacity:.75;transform:scale(.98);}
.forum-spotlight:visited{color:var(--tx);}
.dm .forum-spotlight{background:var(--bg2);border-color:var(--brd);box-shadow:none;}
.dm .forum-spotlight:hover{box-shadow:0 8px 24px rgba(0,0,0,.35);border-color:var(--ac);}
.fs-icon{font-size:1.6rem;flex-shrink:0;}
.fs-text{flex:1;min-width:0;}
.fs-text strong{display:block;font-size:.9rem;font-weight:700;color:var(--tx);margin-bottom:.1rem;}
.fs-text span{font-size:.78rem;color:var(--tx3);line-height:1.35;}
.fs-arrow{margin-left:auto;color:var(--ac);font-size:1.1rem;flex-shrink:0;}

@keyframes tileIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.app-grid .tile{animation:tileIn .3s ease both;}
.app-grid .tile:nth-child(2){animation-delay:.04s}.app-grid .tile:nth-child(3){animation-delay:.08s}
.app-grid .tile:nth-child(4){animation-delay:.12s}.app-grid .tile:nth-child(5){animation-delay:.16s}
.app-grid .tile:nth-child(6){animation-delay:.20s}.app-grid .tile:nth-child(7){animation-delay:.24s}