@charset "UTF-8";
/*
  PixelKit Hybrid v2.0
  ---------------------------------------------
  EN: Retro Pixel + NeoBrutalism SCSS Toolkit (full version)
  IT: Toolkit SCSS completo Pixel/Neobrutalismo

  Compatibilità: mantiene tutte le classi di PixelKit v1.0
  Aggiornamenti: ombre bold, blocchi saturi, pattern isometrici, temi brutali.
*/
:root {
  --bg: #fdfdfd;
  --surface: #f5f5f5;
  --surface-2: #e6e6e6;
  --text: #111;
  --text-muted: #555;
  --primary: #2d7e3e;
  --primary-700: #256734;
  --secondary: #3a5da8;
  --accent: #ffc107;
  --success: #2f9e44;
  --warning: #f08c00;
  --danger: #c92a2a;
  --border: #000;
  --shadow: #000;
  --px: 4px;
  --bg-pattern: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
}

[data-theme=original] {
  --bg: #a5d6a7;
  --surface: #f5f5e8;
  --surface-2: #e6e4d0;
  --text: #000000;
  --text-muted: #333333;
  --primary: #0000ff;
  --primary-700: #00008b;
  --secondary: #81c784;
  --accent: #66bb6a;
  --success: #7cb342;
  --warning: #ffb300;
  --danger: #e53935;
  --border: #000000;
  --shadow: #1b5e20;
  --bg-pattern: repeating-linear-gradient(180deg, #008000 0 300px, #9acd32 300px 600px);
}

/* cyberpunk theme: neon night atmosphere */
[data-theme=cyberpunk] {
  --bg: #000714; /* quasi nero blu */
  --surface: #001433;
  --surface-2: #00214a;
  --text: #00e5ff;
  --text-muted: #00e5ff99;
  --primary: #ff0077; /* rosa acceso */
  --primary-700: #b80055;
  --secondary: #9d00ff; /* viola elettrico */
  --accent: #00e5ff; /* ciano brillante */
  --success: #b4ff00; /* lime fluorescente */
  --warning: #ffea00;
  --danger: #ff1744;
  --border: #00e5ff;
  --shadow: #00e5ff00;
  --bg-pattern: linear-gradient(to bottom, #000714 0%, #003459 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 2px);
  --neon-pink: #ff0077;
  --neon-purple: #9d00ff;
  --neon-cyan: #00e5ff;
  --neon-lime: #b4ff00;
  --neon: var(--accent);
}

/* scanline overlay */
html[data-theme=cyberpunk] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 2px);
  mix-blend-mode: overlay;
  opacity: 0.1;
}

[data-theme=neobrutalist] {
  --bg: #fff44f;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --text: #000000;
  --text-muted: #333333;
  --primary: #ff005d;
  --primary-700: #c40045;
  --secondary: #0066ff;
  --accent: #00c853;
  --success: #00c853;
  --warning: #ffab00;
  --danger: #d50000;
  --border: #000000;
  --shadow: #000000;
  --px: 8px;
  --bg-pattern: repeating-linear-gradient(135deg, #fff44f 0 25px, #ffd600 25px 50px);
}

html[data-theme=neobrutalist] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
  opacity: 0.1;
}

/* calm nature-inspired theme */
[data-theme=grove] {
  --bg: #b3e5fc;
  --surface: #e8f5e9;
  --surface-2: #c8e6c9;
  --text: #1b5e20;
  --text-muted: #4e342e;
  --primary: #4caf50;
  --primary-700: #2e7d32;
  --secondary: #81c784;
  --accent: #ffcc80;
  --success: #66bb6a;
  --warning: #ffd54f;
  --danger: #e53935;
  --border: #2e7d32;
  --shadow: #1b5e2033;
  --bg-pattern: linear-gradient(to bottom, #b3e5fc 0%, #c8e6c9 100%);
}

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

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  background-image: var(--bg-pattern);
}

html {
  color: var(--text);
  font-family: "Rubik", "Inter", "Arial Black", sans-serif;
  line-height: 1.4;
}

img, canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

:focus-visible {
  outline: 2px solid transparent;
}

.m-0 {
  margin: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mx-0 {
  margin-inline: 0 !important;
}

.my-0 {
  margin-block: 0 !important;
}

.px-0 {
  padding-inline: 0 !important;
}

.py-0 {
  padding-block: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mx-1 {
  margin-inline: 0.25rem !important;
}

.my-1 {
  margin-block: 0.25rem !important;
}

.px-1 {
  padding-inline: 0.25rem !important;
}

.py-1 {
  padding-block: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mx-2 {
  margin-inline: 0.5rem !important;
}

.my-2 {
  margin-block: 0.5rem !important;
}

.px-2 {
  padding-inline: 0.5rem !important;
}

.py-2 {
  padding-block: 0.5rem !important;
}

.m-3 {
  margin: 0.75rem !important;
}

.p-3 {
  padding: 0.75rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.mx-3 {
  margin-inline: 0.75rem !important;
}

.my-3 {
  margin-block: 0.75rem !important;
}

.px-3 {
  padding-inline: 0.75rem !important;
}

.py-3 {
  padding-block: 0.75rem !important;
}

.m-4 {
  margin: 1rem !important;
}

.p-4 {
  padding: 1rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.mx-4 {
  margin-inline: 1rem !important;
}

.my-4 {
  margin-block: 1rem !important;
}

.px-4 {
  padding-inline: 1rem !important;
}

.py-4 {
  padding-block: 1rem !important;
}

.m-5 {
  margin: 1.5rem !important;
}

.p-5 {
  padding: 1.5rem !important;
}

.mt-5 {
  margin-top: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 1.5rem !important;
}

.mx-5 {
  margin-inline: 1.5rem !important;
}

.my-5 {
  margin-block: 1.5rem !important;
}

.px-5 {
  padding-inline: 1.5rem !important;
}

.py-5 {
  padding-block: 1.5rem !important;
}

.m-6 {
  margin: 2rem !important;
}

.p-6 {
  padding: 2rem !important;
}

.mt-6 {
  margin-top: 2rem !important;
}

.mb-6 {
  margin-bottom: 2rem !important;
}

.mx-6 {
  margin-inline: 2rem !important;
}

.my-6 {
  margin-block: 2rem !important;
}

.px-6 {
  padding-inline: 2rem !important;
}

.py-6 {
  padding-block: 2rem !important;
}

.m-7 {
  margin: 3rem !important;
}

.p-7 {
  padding: 3rem !important;
}

.mt-7 {
  margin-top: 3rem !important;
}

.mb-7 {
  margin-bottom: 3rem !important;
}

.mx-7 {
  margin-inline: 3rem !important;
}

.my-7 {
  margin-block: 3rem !important;
}

.px-7 {
  padding-inline: 3rem !important;
}

.py-7 {
  padding-block: 3rem !important;
}

.m-8 {
  margin: 4rem !important;
}

.p-8 {
  padding: 4rem !important;
}

.mt-8 {
  margin-top: 4rem !important;
}

.mb-8 {
  margin-bottom: 4rem !important;
}

.mx-8 {
  margin-inline: 4rem !important;
}

.my-8 {
  margin-block: 4rem !important;
}

.px-8 {
  padding-inline: 4rem !important;
}

.py-8 {
  padding-block: 4rem !important;
}

.text-xs {
  font-size: 0.75rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

.text-base {
  font-size: 1rem !important;
}

.text-lg {
  font-size: 1.25rem !important;
}

.text-xl {
  font-size: 1.5rem !important;
}

.text-xxl {
  font-size: 2rem !important;
}

.text-xxxl {
  font-size: 3rem !important;
}

.fw-700 {
  font-weight: 700;
}

.fw-400 {
  font-weight: 400;
}

.flex {
  display: flex !important;
}

.grid {
  display: grid !important;
}

.center {
  display: grid;
  place-items: center;
}

.pixel {
  font-family: "Press Start 2P", "VT323", "Pixelify Sans", monospace;
}

.pixel-border {
  border: var(--px) solid var(--border);
  border-radius: 0;
}

.pixel-shadow {
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.9), 6px 6px 0 0 rgba(0, 0, 0, 0.9), 9px 9px 0 0 rgba(0, 0, 0, 0.9);
}

.btn, .btn--compact, .btn-small, .btn-sm {
  font-family: "Press Start 2P", "VT323", "Pixelify Sans", monospace;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  text-transform: uppercase;
  border: var(--px) solid var(--border);
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.9), 6px 6px 0 0 rgba(0, 0, 0, 0.9), 9px 9px 0 0 rgba(0, 0, 0, 0.9);
  background: var(--surface);
  color: var(--text);
}
.btn:hover, .btn--compact:hover, .btn-small:hover, .btn-sm:hover {
  transform: translate(-3px, -3px);
}
.btn:active, .btn--compact:active, .btn-small:active, .btn-sm:active {
  transform: translate(0, 0);
}
.btn:focus-visible, .btn--compact:focus-visible, .btn-small:focus-visible, .btn-sm:focus-visible {
  outline: none;
  position: relative;
}
.btn:focus-visible::after, .btn--compact:focus-visible::after, .btn-small:focus-visible::after, .btn-sm:focus-visible::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 3px solid var(--primary);
  box-shadow: 4px 4px 0 #000;
  pointer-events: none;
}

.btn--compact, .btn-small, .btn-sm {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.btn-small, .btn-sm {
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.66rem;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-secondary {
  background: var(--secondary);
  color: #fff;
}

.btn-accent {
  background: var(--accent);
  color: #111;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-success {
  background: var(--success);
  color: #fff;
}

/* neon sign buttons */
[data-theme=cyberpunk] .btn, [data-theme=cyberpunk] .btn--compact, [data-theme=cyberpunk] .btn-small, [data-theme=cyberpunk] .btn-sm {
  background: transparent;
  color: var(--accent);
  border-color: currentColor;
  box-shadow: none;
  text-shadow: none;
  transition: color 0.3s, box-shadow 0.3s, text-shadow 0.3s;
}

[data-theme=cyberpunk] .btn-primary {
  background: transparent;
  color: var(--primary);
}

[data-theme=cyberpunk] .btn-secondary {
  background: transparent;
  color: var(--secondary);
}

[data-theme=cyberpunk] .btn-accent {
  background: transparent;
  color: var(--accent);
}

[data-theme=cyberpunk] .btn-danger {
  background: transparent;
  color: var(--danger);
}

[data-theme=cyberpunk] .btn-success {
  background: transparent;
  color: var(--success);
}

[data-theme=cyberpunk] .btn:hover, [data-theme=cyberpunk] .btn--compact:hover, [data-theme=cyberpunk] .btn-small:hover, [data-theme=cyberpunk] .btn-sm:hover {
  box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

.card, .card2 {
  background: var(--surface);
  border: var(--px) solid var(--border);
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.9), 6px 6px 0 0 rgba(0, 0, 0, 0.9), 9px 9px 0 0 rgba(0, 0, 0, 0.9), 12px 12px 0 0 rgba(0, 0, 0, 0.9);
  padding: 1rem;
}

.card2 {
  background: var(--surface-2);
}

.card3 {
  background: var(--surface);
  border: 4px solid #000;
  padding: 4rem;
}

/* neon sign cards */
[data-theme=cyberpunk] .card, [data-theme=cyberpunk] .card2 {
  background: rgba(0, 0, 0, 0.25);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 5px var(--accent), 0 0 15px var(--accent), 0 0 30px var(--accent);
}

.card-title {
  font-family: "Press Start 2P", "VT323", "Pixelify Sans", monospace;
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

.input, .select, .textarea {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: var(--px) solid var(--border);
  border-radius: 0;
  padding: 0.75rem;
  font-family: "Press Start 2P", "VT323", "Pixelify Sans", monospace;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  position: relative;
}
.input:focus-visible::after, .select:focus-visible::after, .textarea:focus-visible::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 3px solid var(--primary);
  box-shadow: 4px 4px 0 #000;
  pointer-events: none;
}

.toggle {
  --w: 3rem;
  --h: 1.5rem;
  position: relative;
  width: var(--w);
  height: var(--h);
}
.toggle input {
  display: none;
}
.toggle .rail {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  border: var(--px) solid var(--border);
  border-radius: 0;
}
.toggle .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--h) - 4px);
  height: calc(var(--h) - 4px);
  background: var(--accent);
  border: 2px solid var(--border);
  border-radius: 0;
  transition: left 0.1s linear;
}
.toggle input:checked + .rail + .knob {
  left: calc(var(--w) - var(--h) + 2px);
  background: var(--primary);
}

.badge {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 0;
  font-family: "Press Start 2P", "VT323", "Pixelify Sans", monospace;
}

.badge-success {
  background: var(--success);
  color: #0c150e;
}

.badge-warning {
  background: var(--warning);
  color: #261500;
}

.badge-danger {
  background: var(--danger);
  color: #fff;
}

.progress {
  --val: 40;
  width: 100%;
  height: 1.25rem;
  background: var(--surface-2);
  border: var(--px) solid var(--border);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.progress::after {
  content: "";
  position: absolute;
  inset: 2px;
  right: auto;
  width: calc(var(--val) * 1% - 4px);
  background: repeating-linear-gradient(90deg, var(--primary), var(--primary) 8px, var(--primary-700) 8px, var(--primary-700) 16px);
  border: 2px solid var(--border);
  border-radius: 0;
}

.toolbar, .navigation-buttons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  background: var(--surface-2);
  border: var(--px) solid var(--border);
  border-radius: 0;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.4);
}
.modal .modal-box {
  background: var(--surface);
  border: var(--px) solid var(--border);
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.9), 6px 6px 0 0 rgba(0, 0, 0, 0.9), 9px 9px 0 0 rgba(0, 0, 0, 0.9), 12px 12px 0 0 rgba(0, 0, 0, 0.9);
  padding: 1.5rem;
  max-width: 640px;
  width: 100%;
}

.panel {
  background: var(--surface-2);
  border: var(--px) solid var(--border);
  border-radius: 0;
  padding: 1rem;
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: var(--surface);
  color: var(--text);
  padding: 1rem 1.5rem;
  border: var(--px) solid var(--border);
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.9), 6px 6px 0 0 rgba(0, 0, 0, 0.9), 9px 9px 0 0 rgba(0, 0, 0, 0.9);
  opacity: 0;
  animation: toast-fade 2s ease-in-out forwards;
  z-index: 1000;
}

.toast-success {
  background: var(--success);
  color: #0c150e;
}

.toast-danger {
  background: var(--danger);
  color: #fff;
}

.toast-warning {
  background: var(--warning);
  color: #261500;
}

.toast-info {
  background: var(--surface);
  color: var(--text);
}

@keyframes toast-fade {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.tile {
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 8px);
}

.hr {
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 16px);
  border: 0;
}

.button-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.card-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

[disabled], .is-disabled {
  filter: grayscale(0.3) brightness(0.9);
  pointer-events: none;
}

.focus-pixel {
  outline: none;
  position: relative;
}
.focus-pixel::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 3px solid var(--accent);
  box-shadow: 4px 4px 0 #000;
  pointer-events: none;
}

.navigation-buttons {
  margin-top: auto;
  justify-content: space-between;
}

.site-header {
  margin: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #0d0d0d, var(--accent));
  color: #fff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  position: relative;
}

.site-header-logo {
  width: 100px;
  height: 100px;
  opacity: 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: scale(1.5);
  transform-origin: center;
}

.site-header-title {
  margin: 0;
  font-size: 2.5rem;
}

.site-header-home-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.site-header-menu {
  position: absolute;
  bottom: 0;
  left: 0.5rem;
}

.site-header-logout {
  position: absolute;
  bottom: 0;
  right: 0.75rem;
}

.site-nav {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 600;
  min-width: 300px;
}

.site-header-menu.open .site-nav {
  display: flex;
}

.site-nav .btn, .site-nav .btn--compact, .site-nav .btn-small, .site-nav .btn-sm {
  width: 100%;
}

[data-theme=original] .site-header {
  background: linear-gradient(135deg, #00002a, #00008b);
}

.dashboard-shell {
  position: relative;
  padding: 1.5rem;
  padding-left: 0.75rem;
}

.dashboard-main {
  min-height: 60vh;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-main-editor {
  margin-left: 0;
  max-width: 100%;
}

/* Auth/Onboarding: center content */
.auth-center {
  min-height: 100vh;
  display: grid;
  place-items: center;
  place-content: center;
  padding: 2rem;
}

.auth-card {
  width: min(100% - 2rem, 420px);
}

.auth-logo {
  width: 240px;
  margin: 0 auto 1rem;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Small helpers for dashboard mock bits */
.home-avatar-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-pixel {
  width: 72px;
  height: 72px;
  background: var(--primary);
  border: 3px solid var(--border);
}

/* Choose quiz container */
.choose-quiz {
  display: flex;
  flex-direction: column;
  min-height: 350px;
  gap: 1rem;
  width: min(100%, 520px);
  margin-inline: auto;
}

.choose-step {
  width: min(100%, 420px);
  margin-inline: auto;
}

.text-mastery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .text-mastery-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.text-mastery-grid .card--full {
  grid-column: 1/-1;
}

.tme-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 0.5rem;
}

.tme-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.tme-actions {
  display: flex;
  gap: 0.75rem;
}

.mcq-editor-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(6px);
  z-index: 100;
}
.mcq-editor-footer__content {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.mcq-editor-footer__group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mcq-editor-footer__group--scroll {
  flex-wrap: wrap;
  justify-content: center;
}
.mcq-editor-footer__group--actions {
  gap: 0.75rem;
  margin-left: auto;
}
.mcq-editor-footer__math-button {
  white-space: nowrap;
}
.mcq-editor-footer .btn, .mcq-editor-footer .btn--compact, .mcq-editor-footer .btn-small, .mcq-editor-footer .btn-sm {
  margin-bottom: 0;
  white-space: nowrap;
}
.mcq-editor-footer .btn--compact, .mcq-editor-footer .btn-small, .mcq-editor-footer .btn-sm {
  padding: 0.5rem 0.75rem;
}

.mcq-editor-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  scroll-padding-bottom: 6rem;
}
.mcq-editor-layout[data-math-editor-visible=true] {
  scroll-padding-bottom: clamp(10rem, 45vh, 22rem);
}

.mcq-editor {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: min(100%, 960px);
  margin: 0 auto;
  text-align: left;
  min-height: 26rem;
  gap: 1.5rem;
  padding-bottom: clamp(2rem, 12vw, 4rem);
}

.mcq-editor__top-bar {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mcq-editor__header-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.mcq-editor__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mcq-editor__actions .btn, .mcq-editor__actions .btn--compact, .mcq-editor__actions .btn-small, .mcq-editor__actions .btn-sm {
  margin-bottom: 0.5rem;
}

.mcq-editor__csv-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.mcq-editor__mathlive-wrapper {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 0 1rem;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease, filter 0.3s ease;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  filter: saturate(0.85);
}
@media (min-width: 768px) {
  .mcq-editor__mathlive-wrapper {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .mcq-editor__mathlive-wrapper {
    padding-inline: 0;
  }
}

.mcq-editor__mathlive-wrapper.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  max-height: 520px;
  margin-top: 2rem;
  padding-bottom: clamp(10rem, 45vh, 22rem);
  filter: saturate(1);
  overflow: visible;
}

.mcq-editor__scroll-spacer {
  height: clamp(4.5rem, 12vh, 6.5rem);
  min-height: 4.5rem;
  transition: height 0.3s ease;
}
.mcq-editor__scroll-spacer.is-active {
  height: clamp(12rem, 45vh, 18rem);
  min-height: 12rem;
}

.mcq-editor__mathlive {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  color: var(--text);
  isolation: isolate;
}
.mcq-editor__mathlive > * {
  position: relative;
  z-index: 1;
}

.mcq-editor__mathlive-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-family: "Press Start 2P", "VT323", "Pixelify Sans", monospace;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-2);
  border: calc(var(--px) / 2) solid var(--border);
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.mcq-editor__mathlive-field {
  width: 100%;
  min-height: 12rem;
  padding: 0.75rem;
  background: var(--surface-2);
  color: var(--text);
  font-family: "Rubik", "Inter", "Arial Black", sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  border: var(--px) solid var(--border);
  border-radius: 0;
  box-shadow: inset 0 0 0 calc(var(--px) / 2) rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mcq-editor__mathlive-field:focus-within, .mcq-editor__mathlive-field:focus {
  outline: none;
  box-shadow: inset 0 0 0 var(--px) var(--primary), inset 3px 3px 0 rgba(0, 0, 0, 0.08);
}
.mcq-editor__mathlive-field::part(content) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}
.mcq-editor__mathlive-field::part(virtual-keyboard-toggle), .mcq-editor__mathlive-field::part(menu-toggle) {
  background: var(--primary);
  color: var(--surface);
  border: none;
  padding: 0.5rem 0.75rem;
  font-family: "Press Start 2P", "VT323", "Pixelify Sans", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border: calc(var(--px) / 2) solid var(--border);
  border-radius: 0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.mcq-editor__mathlive-field::part(virtual-keyboard-toggle):hover, .mcq-editor__mathlive-field::part(menu-toggle):hover {
  background: var(--primary-700);
}

.mcq-editor-table {
  width: 100%;
}

.mcq-editor-table__cell {
  position: relative;
  cursor: default;
}

.mcq-editor-table__cell.is-clickable {
  cursor: pointer;
}

.mcq-editor-table__cell-overlay {
  position: absolute;
  inset: 0;
  border: 6px solid transparent;
  border-radius: 0.25rem;
  pointer-events: none;
  transition: border-color 0.1s ease-out;
}

.mcq-editor-table__cell-content {
  position: relative;
  z-index: 1;
}

.mcq-editor-table__cell textarea {
  cursor: text;
}

.mcq-editor-table__cell.is-clickable:hover .mcq-editor-table__cell-overlay,
.mcq-editor-table__cell.is-clickable:active .mcq-editor-table__cell-overlay,
.mcq-editor-table__cell.is-active .mcq-editor-table__cell-overlay {
  border-color: #39ff14;
}

.mcq-quiz {
  max-width: 700px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mcq-quiz--empty {
  text-align: center;
}

.mcq-quiz__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.mcq-quiz__quit {
  margin-bottom: 0;
}

.mcq-quiz__counter {
  font-family: "Press Start 2P", "VT323", "Pixelify Sans", monospace;
  text-transform: uppercase;
}

.mcq-quiz__question-card {
  margin: 0;
}

.mcq-quiz__question-text {
  font-size: 1.25rem;
  margin: 0;
}

.mcq-quiz__question-text-content {
  display: block;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}

.mcq-quiz__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mcq-quiz__multi-indicator {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted, #6c757d);
}

.mcq-quiz__option {
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  border: var(--px) solid var(--border);
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.9), 6px 6px 0 0 rgba(0, 0, 0, 0.9), 9px 9px 0 0 rgba(0, 0, 0, 0.9);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.mcq-quiz__option-text {
  display: block;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}

.mcq-quiz__question-text-content mjx-container,
.mcq-quiz__option-text mjx-container {
  display: inline-block !important;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: normal;
  word-break: normal;
}

.mcq-quiz__question-text-content mjx-container[display=true],
.mcq-quiz__option-text mjx-container[display=true] {
  display: block !important;
}

.mcq-quiz__question-text-content mjx-container mjx-math,
.mcq-quiz__option-text mjx-container mjx-math {
  white-space: normal !important;
}

.mcq-quiz__option:hover {
  transform: translate(-3px, -3px);
}

.mcq-quiz__option:focus-visible {
  outline: none;
  position: relative;
}
.mcq-quiz__option:focus-visible::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 3px solid var(--primary);
  box-shadow: 4px 4px 0 #000;
  pointer-events: none;
}

.mcq-quiz__option.is-selected {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 2px var(--border) inset;
}

.mcq-quiz__option.is-correct {
  background: var(--success, #198754);
  color: #fff;
  box-shadow: 0 0 0 2px var(--border) inset;
}

.mcq-quiz__option.is-incorrect {
  background: var(--danger, #dc3545);
  color: #fff;
  box-shadow: 0 0 0 2px var(--border) inset;
}

.mcq-quiz__option[disabled] {
  cursor: not-allowed;
  opacity: 0.8;
}

.mcq-quiz__navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.mcq-quiz__navigation .btn, .mcq-quiz__navigation .btn--compact, .mcq-quiz__navigation .btn-small, .mcq-quiz__navigation .btn-sm {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .mcq-quiz {
    margin: 1rem auto;
  }
  .mcq-quiz__header {
    align-items: flex-start;
  }
  .mcq-quiz__counter {
    font-size: 0.875rem;
  }
}
.mcq-results__answer-list {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
  list-style: disc;
}

.mcq-results__answer-list li {
  margin-bottom: 0.25rem;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.loading-image {
  width: 80px;
  height: 80px;
  margin-bottom: 0.5rem;
}

.loading-text {
  font-size: 0.875rem;
  color: var(--text-weak);
}

.admin-panel {
  margin: 0 auto;
  max-width: 1000px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-panel h2 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.admin-table th,
.admin-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
}
.admin-table th {
  background: var(--surface-2);
  text-align: left;
  font-weight: 600;
}

.admin-permissions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.admin-search {
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  width: 100%;
}

.subjects-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 150px;
  overflow-y: auto;
}

.admin-management-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.admin-management-grid .card, .admin-management-grid .card2 {
  aspect-ratio: 1/1;
}

.admin-panel-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(6px);
  z-index: 100;
}
.admin-panel-footer__content {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.admin-panel-footer .btn, .admin-panel-footer .btn--compact, .admin-panel-footer .btn-small, .admin-panel-footer .btn-sm {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
}

/*# sourceMappingURL=index.css.map */