/* SchoolCoach — shared styles */
:root {
  --bg-from:     #f0f4ff;
  --bg-to:       #e8edf8;
  --accent:      #4f7ef7;
  --accent-dark: #2352c7;
  --text:        #1e2a45;
  --text-muted:  #5a6a8a;
  --card-bg:     rgba(255,255,255,0.88);
  --card-border: rgba(79,126,247,0.18);
  --shadow-sm:   0 2px 8px rgba(30,42,69,0.08);
  --shadow-md:   0 4px 14px rgba(30,42,69,0.12);
  --shadow-lg:   0 8px 26px rgba(30,42,69,0.16);
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
}

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

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-to) 100%);
  min-height: 100vh;
  color: var(--text);
}

/* ── Layout ─────────────────────────────────────── */
.sc-page { max-width: 900px; margin: 0 auto; padding: 1.5rem; }
.sc-page-wide { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

/* ── Header ──────────────────────────────────────── */
.sc-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.8rem; flex-wrap: wrap;
}
.sc-logo {
  font-size: 2rem; font-weight: 900; letter-spacing: -1px;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--accent-dark);
  text-decoration: none;
}
.sc-tagline { color: var(--text-muted); font-size: 0.9rem; flex: 1; }
.sc-header-actions { display: flex; gap: 0.5rem; margin-left: auto; }

/* ── Buttons ─────────────────────────────────────── */
.sc-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 1.4rem; border-radius: var(--r-sm);
  font-size: 1rem; font-weight: 700; cursor: pointer;
  border: 2px solid transparent; text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sc-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.sc-btn:active { transform: translateY(0); }
.sc-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }
.sc-btn-ghost { background: var(--card-bg); color: var(--text); border-color: var(--card-border); }
.sc-btn-danger { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* ── Cards ───────────────────────────────────────── */
.sc-card {
  background: var(--card-bg); border: 1.5px solid var(--card-border);
  border-radius: var(--r-md); padding: 1.2rem;
  box-shadow: var(--shadow-sm);
}

/* ── App Grid (home) ─────────────────────────────── */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.app-card {
  background: var(--card-bg); border: 1.5px solid var(--card-border);
  border-radius: var(--r-md); padding: 1.1rem;
  cursor: pointer; text-decoration: none; color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.app-card-icon { font-size: 2rem; }
.app-card-title { font-weight: 700; font-size: 0.95rem; }
.app-card-desc { font-size: 0.8rem; color: var(--text-muted); }
.fach-label { font-size: 0.7rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }

.badge-tag {
  display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.55rem;
  background: rgba(79,126,247,0.1); color: var(--text-muted);
  border: 1px solid var(--card-border); border-radius: 99px;
}

/* ── Search / Filters ────────────────────────────── */
.search-wrap { margin-bottom: 0.8rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.search-input {
  flex: 1; min-width: 200px; padding: 0.7rem 1.4rem;
  border: 2px solid var(--card-border); border-radius: 99px;
  background: var(--card-bg); color: var(--text); font-size: 1.05rem;
  outline: none; box-shadow: var(--shadow-sm);
}
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,126,247,0.15); }
.faecher-bar {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.faecher-label { font-weight: 700; color: var(--accent-dark); white-space: nowrap; font-size: 0.95rem; }
.filter-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filter-pill {
  padding: 0.4rem 1rem; border-radius: 99px; font-size: 0.85rem; font-weight: 600;
  border: 1.5px solid var(--card-border); background: var(--card-bg);
  color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.filter-pill:hover { background: var(--bg-to); color: var(--text); }
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent-dark); }

/* ── Exercise shell ──────────────────────────────── */
.sc-exercise-shell {
  display: flex; flex-direction: column; gap: 1.4rem;
  max-width: 800px; margin: 0 auto;
}
.sc-toolbar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.sc-difficulty-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sc-diff-btn {
  padding: 0.45rem 1.1rem; border-radius: 99px; font-size: 0.9rem; font-weight: 700;
  border: 2px solid var(--card-border); background: var(--card-bg);
  color: var(--text-muted); cursor: pointer; transition: background 0.15s;
}
.sc-diff-btn:hover { background: rgba(255,255,255,0.88); }
.sc-diff-btn.active { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
.sc-streak { font-size: 1.3rem; font-weight: 700; color: #f97316; min-width: 2.5rem; }

.sc-exercise-area {
  background: var(--card-bg); border: 1.5px solid var(--card-border);
  border-radius: var(--r-lg); padding: 2rem;
  box-shadow: var(--shadow-md); min-height: 200px;
  display: flex; align-items: center; justify-content: center;
}

.sc-task { display: flex; flex-direction: column; gap: 1rem; align-items: center; width: 100%; }
.sc-equation { display: flex; align-items: center; gap: 0.7rem; font-size: 2rem; font-weight: 700; flex-wrap: wrap; justify-content: center; }
.sc-num { color: var(--text); }
.sc-op { color: var(--text-muted); }

.sc-input {
  width: 4rem; text-align: center; font-size: 1.8rem; font-weight: 700;
  padding: 0.2rem 0.3rem; border: 2.5px solid var(--card-border);
  border-radius: var(--r-sm); background: var(--card-bg); color: var(--text);
  outline: none; transition: border-color 0.2s;
}
.sc-input:focus { border-color: var(--accent); }
.sc-input.sc-correct { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.sc-input.sc-wrong   { border-color: #dc2626; background: #fef2f2; color: #dc2626; }
.sc-input-lg { width: 5.5rem; font-size: 2rem; }

.sc-message {
  text-align: center; font-size: 1.1rem; font-weight: 700;
  padding: 0.7rem 1.2rem; border-radius: var(--r-sm); display: none;
}
.sc-msg-correct { background: #f0fdf4; color: #15803d; border: 1.5px solid #86efac; }
.sc-msg-wrong   { background: #fef2f2; color: #dc2626; border: 1.5px solid #fca5a5; }
.sc-msg-streak  { background: #fff7ed; color: #c2410c; border: 1.5px solid #fed7aa; }

.sc-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

.sc-loading { color: var(--text-muted); font-size: 1rem; }

/* ── Rechenwege paths ────────────────────────────── */
.sc-rechenwege { width: 100%; }
.sc-rw-problem { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 1rem; }
.sc-rw-paths { display: flex; flex-direction: column; gap: 0.7rem; }
.sc-rw-path { border-radius: var(--r-sm); padding: 0.8rem 1rem; border-left: 4px solid transparent; }
.sc-rw-path.orange { background: #fff7ed; border-color: #f97316; }
.sc-rw-path.pink   { background: #fdf4ff; border-color: #d946ef; }
.sc-rw-path.green  { background: #f0fdf4; border-color: #16a34a; }
.sc-rw-label { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.2rem; }
.sc-rw-hint  { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.sc-rw-steps { font-size: 0.9rem; font-family: monospace; }

/* ── Triangle ────────────────────────────────────── */
.sc-triangle-wrap {
  position: relative; width: 360px; max-width: 100%; margin: 0 auto;
}
.sc-tri-svg { width: 100%; display: block; }
.sc-tri-cells {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.sc-tri-cell {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: all; display: flex; align-items: center; justify-content: center;
}
/* Corners */
.sc-tri-A   { top: 10.3%; left: 50%; }
.sc-tri-B   { top: 93%;   left: 8.3%; }
.sc-tri-C   { top: 93%;   left: 91.7%; }
/* Edge midpoints */
.sc-tri-L   { top: 52%;   left: 29%; }
.sc-tri-R   { top: 52%;   left: 71%; }
.sc-tri-Bot { top: 100%;  left: 50%; }

.sc-tri-given {
  font-size: 1.4rem; font-weight: 700; color: var(--text);
  background: var(--card-bg); border: 2px solid var(--card-border);
  border-radius: var(--r-sm); padding: 0.2rem 0.5rem;
  min-width: 2.5rem; text-align: center;
}
.sc-tri-input {
  width: 3.2rem; font-size: 1.2rem; font-weight: 700; text-align: center;
  padding: 0.2rem; border: 2.5px solid var(--accent); border-radius: var(--r-sm);
  background: var(--card-bg); color: var(--text); outline: none;
}

/* ── Pyramid ─────────────────────────────────────── */
.sc-pyramid { gap: 0.5rem; }
.sc-pyr-row { display: flex; gap: 0.4rem; justify-content: center; }
.sc-pyr-cell { width: 3.2rem; height: 3.2rem; font-size: 1.2rem; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); }
.sc-pyr-given { background: var(--card-bg); border: 2px solid var(--card-border); }

/* ── Koffer ──────────────────────────────────────── */
.sc-koffer { gap: 0.8rem; }
.sc-instr { font-size: 0.95rem; color: var(--text-muted); }
.sc-koffer-nums { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.sc-koffer-card { font-size: 1.3rem; font-weight: 700; padding: 0.5rem 1rem; background: var(--card-bg); border: 2px solid var(--accent); border-radius: var(--r-sm); cursor: pointer; }
.sc-koffer-card:disabled { opacity: 0.35; cursor: default; }
.sc-koffer-slots { font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.sc-koffer-slot { min-width: 2.8rem; text-align: center; border-bottom: 2px solid var(--accent); padding: 0.2rem; }
.sc-koffer-slot.sc-correct { color: #15803d; border-color: #16a34a; }
.sc-koffer-slot.sc-wrong   { color: #dc2626; border-color: #dc2626; }

/* ── Confetti ────────────────────────────────────── */
#sc-effects { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.sc-confetti-dot {
  position: absolute; top: -12px; border-radius: 2px;
  animation: sc-fall 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes sc-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ── Forms ───────────────────────────────────────── */
.sc-form { display: flex; flex-direction: column; gap: 0.8rem; max-width: 360px; }
.sc-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.sc-field { display: flex; flex-direction: column; gap: 0.25rem; }
.sc-text-input {
  padding: 0.55rem 1rem; border: 1.5px solid var(--card-border);
  border-radius: var(--r-sm); background: var(--card-bg); color: var(--text);
  font-size: 0.95rem; outline: none;
}
.sc-text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,126,247,0.15); }
.sc-error { color: #dc2626; font-size: 0.85rem; }

/* ── Table ───────────────────────────────────────── */
.sc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sc-table th { padding: 0.6rem 0.8rem; text-align: left; color: var(--text-muted); font-weight: 600; border-bottom: 2px solid var(--card-border); }
.sc-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--card-border); }
.sc-table tr:last-child td { border-bottom: none; }

/* ── Toggle ──────────────────────────────────────── */
.toggle-wrap {
  display: inline-flex; width: 44px; height: 24px;
  background: var(--card-border); border-radius: 99px;
  cursor: pointer; transition: background 0.2s;
}
.toggle-wrap.on { background: var(--accent); }
.toggle-knob {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  margin: 2px; transition: transform 0.2s;
}
.toggle-wrap.on .toggle-knob { transform: translateX(20px); }

/* ── Back button ─────────────────────────────────── */
.sc-back {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.9rem; color: var(--text-muted); text-decoration: none;
  padding: 0.4rem 0.8rem; border-radius: var(--r-sm);
  background: var(--card-bg); border: 1px solid var(--card-border);
}
.sc-back:hover { color: var(--text); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
  .sc-exercise-area { padding: 1.2rem; }
  .sc-equation { font-size: 1.6rem; }
  .sc-input { width: 3.2rem; font-size: 1.4rem; }
}

/* ── Check / Next buttons (exercise shell) ───────── */
.sc-btn-check { background: linear-gradient(135deg, #ffd740, #ff8f00); color: #4a2200; border-color: #e65100; }
.sc-btn-check:hover { box-shadow: 0 4px 14px rgba(255,143,0,0.4); }
.sc-btn-next  { background: linear-gradient(135deg, #81c784, #2e7d32); color: #fff; border-color: #1b5e20; }
.sc-btn-next:hover  { box-shadow: 0 4px 14px rgba(46,125,50,0.4); }

/* ── Score box ───────────────────────────────────── */
.sc-score-box { display:flex; gap:18px; justify-content:center; }
.sc-score-good, .sc-score-bad { background:var(--card-bg); border-radius:var(--r-md); padding:10px 26px; font-size:1.2em; font-weight:bold; box-shadow:var(--shadow-sm); }
.sc-score-good { color:#2e7d32; }
.sc-score-bad  { color:#c62828; }

/* ── Rule box ────────────────────────────────────── */
.sc-rule-box { background:var(--card-bg); border:2px solid var(--card-border); border-radius:var(--r-lg); padding:13px 26px; text-align:center; color:#555; font-size:1.05em; line-height:1.5; max-width:520px; margin-left:auto; margin-right:auto; }

/* ── Hint ────────────────────────────────────────── */
.sc-hint { font-size:0.83em; color:var(--text-muted); margin-top:6px; text-align:center; }
.sc-hint kbd { background:rgba(255,255,255,0.8); border:1px solid #ccc; border-radius:4px; padding:1px 6px; font-family:inherit; }

/* ── Decomp tree ─────────────────────────────────── */
.sc-decomp-wrap { display:flex; justify-content:center; margin:18px 0 14px; }
.sc-decomp-tree { display:flex; flex-direction:column; align-items:center; }
.sc-tree-num { font-size:1.85em; font-weight:bold; color:#c87941; }
.sc-tree-lines { position:relative; width:130px; height:30px; margin:2px 0; }
.sc-tree-lines::before, .sc-tree-lines::after { content:''; position:absolute; bottom:0; height:100%; width:50%; border-bottom:3px solid #c87941; }
.sc-tree-lines::before { left:0; border-left:3px solid #c87941; border-radius:0 0 0 10px; }
.sc-tree-lines::after { right:0; border-right:3px solid #c87941; border-radius:0 0 10px 0; }
.sc-tree-labels { display:flex; gap:8px; margin-bottom:3px; }
.sc-tree-label { width:70px; text-align:center; font-size:0.72em; color:var(--text-muted); font-weight:bold; text-transform:uppercase; letter-spacing:0.5px; }
.sc-tree-inputs { display:flex; gap:8px; }

/* ── Warm num input ──────────────────────────────── */
.sc-num-input { width:78px; height:60px; font-size:1.6em; font-weight:bold; font-family:inherit; text-align:center; background:rgba(255,252,225,0.95); border:2.5px solid rgba(160,82,45,0.35); border-radius:10px; color:#4a2200; outline:none; transition:border-color 0.2s, background 0.2s; -moz-appearance:textfield; }
.sc-num-input::-webkit-outer-spin-button, .sc-num-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.sc-num-input:focus { background:#fffde7; border-color:#ffd600; box-shadow:0 0 8px rgba(255,214,0,0.55); }
.sc-num-input.sc-correct { background:#e8f5e9 !important; border-color:#2e7d32 !important; }
.sc-num-input.sc-wrong { background:#ffebee !important; border-color:#c62828 !important; animation:sc-shake 0.4s ease; }
@keyframes sc-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }

/* ── Problem row / card ──────────────────────────── */
.sc-prob-row { display:flex; align-items:center; justify-content:center; gap:12px; font-size:2.4em; font-weight:bold; color:#4a2200; flex-wrap:wrap; }
.sc-num-given { min-width:54px; text-align:center; }
.sc-op-sign { color:#c87941; }
.sc-eq-sign { color:#999; font-size:0.9em; }
.sc-mirror { min-width:54px; text-align:center; color:#c87941; font-style:italic; }
.sc-row-divider { height:2px; background:rgba(200,121,65,0.18); border-radius:1px; margin:10px 0; }
.sc-problem-card { background:var(--card-bg); border:2px solid var(--card-border); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:32px 44px 36px; min-width:340px; max-width:100%; }
.sc-problem-card.sc-animate-in { animation:sc-card-in 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes sc-card-in { from{transform:scale(0.88);opacity:0} to{transform:scale(1);opacity:1} }

/* ── Sticky Nav Bar ──────────────────────────────── */
:root { --nav-h: 56px; }
#sc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h); background: var(--card-bg);
  border-bottom: 1.5px solid var(--card-border); box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.sc-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 100%; display: flex; align-items: center; gap: 0.8rem; }
.sc-nav-logo { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.5px; color: var(--accent); text-shadow: 1px 1px 0 var(--accent-dark); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.sc-nav-links { display: flex; gap: 0.2rem; flex: 1; align-items: center; }
.sc-nav-link { padding: 0.32rem 0.75rem; border-radius: var(--r-sm); font-size: 0.88rem; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: background 0.13s, color 0.13s; white-space: nowrap; }
.sc-nav-link:hover { background: rgba(79,126,247,0.1); color: var(--text); }
.sc-nav-link.active { background: rgba(79,126,247,0.12); color: var(--accent-dark); }
.sc-nav-link-test { background: linear-gradient(135deg,rgba(79,126,247,0.14),rgba(79,126,247,0.07)); color: var(--accent-dark) !important; border: 1px solid rgba(79,126,247,0.22); }
.sc-nav-link-test:hover { background: rgba(79,126,247,0.2) !important; }
.sc-nav-user { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-shrink: 0; }
.sc-nav-icon-btn { font-size: 1.1rem; padding: 0.28rem 0.4rem; border-radius: var(--r-sm); text-decoration: none; transition: background 0.13s; line-height: 1; }
.sc-nav-icon-btn:hover { background: rgba(79,126,247,0.1); }
.sc-nav-user-wrap { position: relative; }
.sc-nav-user-btn { display: flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.8rem; border-radius: var(--r-sm); font-size: 0.88rem; font-weight: 600; color: var(--text); background: none; border: 1.5px solid var(--card-border); cursor: pointer; transition: background 0.13s; white-space: nowrap; }
.sc-nav-user-btn:hover { background: rgba(79,126,247,0.08); }
.sc-nav-chevron { font-size: 0.65rem; color: var(--text-muted); }
.sc-nav-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: var(--r-md); box-shadow: var(--shadow-md); min-width: 178px; padding: 0.35rem; display: none; flex-direction: column; z-index: 1001; }
.sc-nav-dropdown.open { display: flex; }
.sc-nav-dd-item { display: block; padding: 0.48rem 0.8rem; border-radius: var(--r-sm); font-size: 0.88rem; font-weight: 600; color: var(--text); text-decoration: none; cursor: pointer; background: none; border: none; text-align: left; width: 100%; transition: background 0.12s; }
.sc-nav-dd-item:hover { background: rgba(79,126,247,0.1); }
.sc-nav-dd-sep { height: 1px; background: var(--card-border); margin: 0.25rem 0; }
.sc-nav-dd-logout { color: #dc2626; }
.sc-has-nav .sc-page,
.sc-has-nav .sc-page-wide { padding-top: calc(var(--nav-h) + 1.4rem); }

/* ── Test builder ────────────────────────────────── */
.tb-section { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: var(--r-md); padding: 1.2rem 1.4rem; }
.tb-section h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
.tb-order-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.tb-order-btn { border: 2px solid var(--card-border); border-radius: var(--r-md); padding: 0.8rem 1rem; background: var(--card-bg); cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; width: 100%; }
.tb-order-btn.active { border-color: var(--accent); background: rgba(79,126,247,0.08); }
.tb-ob-title { font-weight: 700; font-size: 0.95rem; }
.tb-ob-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }
.tb-ex-search { width: 100%; padding: 0.55rem 1rem; border: 1.5px solid var(--card-border); border-radius: var(--r-sm); background: var(--card-bg); color: var(--text); font-size: 0.9rem; outline: none; margin-bottom: 0.7rem; }
.tb-ex-search:focus { border-color: var(--accent); }
.tb-ex-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; border: 1.5px solid var(--card-border); border-radius: var(--r-sm); padding: 0.5rem; }
.tb-ex-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.7rem; border-radius: var(--r-sm); border: 1.5px solid var(--card-border); background: var(--card-bg); cursor: default; }
.tb-ex-icon { font-size: 1.3rem; flex-shrink: 0; }
.tb-ex-info { flex: 1; }
.tb-ex-title { font-weight: 700; font-size: 0.9rem; }
.tb-ex-sub { font-size: 0.75rem; color: var(--text-muted); }
.tb-add-btn { padding: 0.3rem 0.8rem; border-radius: 99px; font-size: 0.82rem; font-weight: 700; background: var(--accent); color: #fff; border: none; cursor: pointer; white-space: nowrap; }
.tb-selected-list { display: flex; flex-direction: column; gap: 0.5rem; min-height: 80px; }
.tb-sel-empty { color: var(--text-muted); font-size: 0.9rem; text-align: center; padding: 1.5rem; border: 2px dashed var(--card-border); border-radius: var(--r-sm); }
.tb-sel-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; background: rgba(79,126,247,0.06); border: 1.5px solid rgba(79,126,247,0.2); border-radius: var(--r-sm); }
.tb-sel-icon { font-size: 1.2rem; }
.tb-sel-info { flex: 1; font-size: 0.88rem; font-weight: 600; }
.tb-sel-count input { width: 52px; text-align: center; font-size: 0.9rem; font-weight: 700; padding: 0.25rem; border: 1.5px solid var(--card-border); border-radius: var(--r-sm); background: var(--card-bg); }
.tb-sel-remove { background: #fee2e2; color: #dc2626; border: none; border-radius: var(--r-sm); padding: 0.25rem 0.6rem; cursor: pointer; font-weight: 700; }
.tb-total { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.6rem; }
.tb-total strong { color: var(--text); }
.tb-start-btn { width: 100%; padding: 1rem; font-size: 1.1rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border: none; border-radius: var(--r-md); cursor: pointer; transition: opacity 0.15s, box-shadow 0.15s; margin-top: 0.5rem; }
.tb-start-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tb-start-btn:not(:disabled):hover { box-shadow: var(--shadow-md); }

/* ── Test runner ─────────────────────────────────── */
.sc-test-progress { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.sc-test-prog-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.sc-test-prog-bar { flex: 1; height: 8px; background: var(--card-border); border-radius: 99px; overflow: hidden; }
.sc-test-prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 99px; transition: width 0.4s; }
.sc-test-ex-label { font-size: 0.78rem; color: var(--accent-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sc-test-score-big { font-size: 3rem; font-weight: 900; color: var(--accent); text-align: center; }
.sc-test-score-sub { font-size: 1rem; color: var(--text-muted); text-align: center; }

/* ── Koffer ──────────────────────────────────────── */
.sc-number-card { width:160px; height:160px; background:linear-gradient(145deg,#fff9e8,#ffe8b2); border:4px solid #c87941; border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:4.2em; font-weight:900; color:#4a2200; box-shadow:0 6px 22px rgba(0,0,0,0.18); margin:0 auto 30px; user-select:none; }
.sc-number-card.sc-card-in { animation:sc-card-in 0.32s cubic-bezier(0.34,1.56,0.64,1); }
.sc-number-card.sc-flash-right { animation:sc-flash-green 0.45s ease; }
.sc-number-card.sc-flash-wrong { animation:sc-flash-red 0.45s ease; }
@keyframes sc-flash-green { 0%,100%{border-color:#c87941;background:linear-gradient(145deg,#fff9e8,#ffe8b2)} 50%{border-color:#2e7d32;background:linear-gradient(145deg,#e8f5e9,#c8e6c9)} }
@keyframes sc-flash-red { 0%,100%{border-color:#c87941;background:linear-gradient(145deg,#fff9e8,#ffe8b2)} 50%{border-color:#c62828;background:linear-gradient(145deg,#ffebee,#ffcdd2)} }
.sc-suitcases { display:flex; gap:30px; justify-content:center; flex-wrap:wrap; }
.sc-suitcase { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.sc-suitcase-handle { width:64px; height:20px; border-radius:12px 12px 0 0; border:5px solid; border-bottom:none; margin-bottom:-2px; }
.sc-suitcase.sc-green .sc-suitcase-handle { border-color:#1b5e20; }
.sc-suitcase.sc-purple .sc-suitcase-handle { border-color:#4a148c; }
.sc-suitcase-body { width:190px; height:148px; border-radius:20px; border:4px solid; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 20px rgba(0,0,0,0.18); transition:transform 0.18s,box-shadow 0.18s; position:relative; }
.sc-suitcase-body::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:24px; border-radius:8px; border:3px solid rgba(255,255,255,0.45); background:rgba(255,255,255,0.15); }
.sc-suitcase:hover .sc-suitcase-body { transform:translateY(-6px); box-shadow:0 14px 32px rgba(0,0,0,0.25); }
.sc-suitcase.sc-green .sc-suitcase-body { background:linear-gradient(145deg,#81c784,#2e7d32); border-color:#1b5e20; }
.sc-suitcase.sc-purple .sc-suitcase-body { background:linear-gradient(145deg,#ce93d8,#7b1fa2); border-color:#4a148c; }
.sc-suitcase-emoji { font-size:2.4em; filter:drop-shadow(1px 2px 4px rgba(0,0,0,0.35)); }
.sc-suitcase-rule { font-size:0.82em; font-weight:bold; color:rgba(255,255,255,0.92); text-shadow:0 1px 3px rgba(0,0,0,0.4); text-align:center; padding:0 14px; line-height:1.3; }
.sc-suitcase-label { margin-top:8px; font-size:1.05em; font-weight:bold; }
.sc-suitcase.sc-green .sc-suitcase-label { color:#1b5e20; }
.sc-suitcase.sc-purple .sc-suitcase-label { color:#4a148c; }
.sc-suitcase.sc-bounce .sc-suitcase-body { animation:sc-suitcase-bounce 0.42s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes sc-suitcase-bounce { 0%{transform:scale(1)} 45%{transform:scale(1.14) translateY(-5px)} 100%{transform:scale(1)} }
.sc-key-hint { font-size:0.82em; color:var(--text-muted); margin-top:14px; text-align:center; }

/* ── Brick pyramid ───────────────────────────────── */
.sc-pyramid { align-items:center; }
.sc-pyr-row { display:flex; gap:0; justify-content:center; margin-bottom:7px; }
.sc-brick { width:108px; height:68px; margin:0 5px; border-radius:11px; border:3px solid #7b3f1a; box-shadow:4px 4px 9px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-size:2em; font-weight:bold; color:#fff8dc; text-shadow:1px 1px 3px rgba(0,0,0,0.4); transition:background 0.3s; }
.sc-brick.sc-given { background:linear-gradient(145deg,#c07035,#8b4513); }
.sc-brick.sc-empty { background:linear-gradient(145deg,#e8c090,#d4956a); }
.sc-brick.sc-correct { background:linear-gradient(145deg,#81c784,#388e3c)!important; border-color:#1b5e20!important; animation:sc-pop 0.35s ease; }
.sc-brick.sc-wrong { background:linear-gradient(145deg,#ef9a9a,#c62828)!important; border-color:#7f0000!important; animation:sc-bshake 0.40s ease; }
@keyframes sc-pop { 0%{transform:scale(1)} 50%{transform:scale(1.18)} 100%{transform:scale(1)} }
@keyframes sc-bshake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.sc-brick input { width:84px; height:50px; font-size:1.75em; font-weight:bold; text-align:center; background:rgba(255,252,225,0.93); border:2px solid rgba(160,82,45,0.25); border-radius:7px; color:#4a2200; outline:none; font-family:inherit; -moz-appearance:textfield; }
.sc-brick input::-webkit-outer-spin-button, .sc-brick input::-webkit-inner-spin-button { -webkit-appearance:none; }
.sc-brick input:focus { background:#fffde7; border-color:#ffd600; box-shadow:0 0 9px rgba(255,214,0,0.65); }

/* ── Footer ──────────────────────────────────────── */
#sc-footer {
  text-align: center;
  padding: 1.2rem 1rem 1.5rem;
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--card-border);
}
.sc-footer-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 0.55rem; flex-wrap: wrap;
}
.sc-footer-sep { opacity: 0.35; }

/* ── Disclaimer (unauthenticated home) ───────────── */
#sc-disclaimer { display: none; padding: 2rem 0; }
.sc-disc-box {
  max-width: 620px; margin: 0 auto;
  background: var(--card-bg); border-radius: var(--r-lg);
  border: 1.5px solid rgba(198,40,40,0.28);
  box-shadow: var(--shadow-md);
  padding: 2rem 2.2rem;
}
.sc-disc-box h2 { font-size: 1.3rem; font-weight: 900; margin-bottom: 0.9rem; }
.sc-disc-lead { font-size: 1rem; font-weight: 600; margin-bottom: 1.1rem; color: var(--text); }
.sc-disc-box ul {
  padding-left: 1.3rem; margin-bottom: 1.2rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.sc-disc-box li { font-size: 0.92rem; color: var(--text); line-height: 1.5; }
.sc-disc-accept { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1.4rem; }
.sc-disc-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }