/* ============================================================================
   Intelligent Paper Generator — design system
   Modern, polished, interactive. Single source of truth for visual tokens.
   ============================================================================ */

/* ---------- Design tokens ------------------------------------------------ */
:root{
  /* Brand palette */
  --brand-50:#e6f4f1;
  --brand-100:#b3ded6;
  --brand-200:#80c8ba;
  --brand-300:#4db29e;
  --brand-400:#26a690;
  --brand-500:#00897b;
  --brand-600:#00796b;
  --brand-700:#00695c;
  --brand-800:#004d40;
  --brand-900:#00382e;

  --accent-400:#ffc266;
  --accent-500:#ffab40;
  --accent-600:#ff9100;

  --primary-color:var(--brand-600);
  --primary-soft:var(--brand-50);
  --primary-rgb:0,121,107;
  --accent-color:var(--accent-500);

  /* Surfaces */
  --bg:#f6f8fb;
  --bg-elev:#eef2f7;
  --card:#ffffff;
  --card-2:#fbfcfe;
  --text:#1f2937;
  --text-soft:#475569;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --border:#e5eaf2;
  --border-strong:#cbd5e1;
  --divider:rgba(15,23,42,.06);

  /* Status */
  --easy:#16a34a;
  --med:#2563eb;
  --hard:#dc2626;
  --easy-soft:#dcfce7;
  --med-soft:#dbeafe;
  --hard-soft:#fee2e2;
  --warn:#f59e0b;
  --danger:#ef4444;
  --success:#10b981;
  --info:#0ea5e9;

  /* Shadows (layered for depth) */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 2px 6px rgba(15,23,42,.06);
  --shadow:0 6px 18px -8px rgba(15,23,42,.18), 0 2px 6px -2px rgba(15,23,42,.08);
  --shadow-md:0 12px 26px -14px rgba(15,23,42,.22), 0 4px 10px -4px rgba(15,23,42,.08);
  --shadow-lg:0 24px 50px -22px rgba(15,23,42,.32), 0 8px 16px -8px rgba(15,23,42,.10);
  --shadow-brand:0 16px 36px -20px rgba(var(--primary-rgb),.55);

  /* Radii */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius:10px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:24px;
  --radius-pill:999px;

  /* Spacing */
  --pad-xs:.375rem;
  --pad-sm:.625rem;
  --pad:.875rem;
  --pad-md:1.125rem;
  --pad-lg:1.5rem;
  --pad-xl:2rem;

  /* Typography */
  --font-body:'Inter','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Inter',system-ui,sans-serif;
  --font-deva:'Noto Sans Devanagari','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:160ms var(--ease-out);
  --t:240ms var(--ease-out);
  --t-slow:380ms var(--ease-out);

  /* Gradients */
  --gradient-brand:linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  --gradient-warm:linear-gradient(135deg, var(--accent-500) 0%, #ff7043 100%);
  --gradient-hero:radial-gradient(1200px circle at 0% 0%, rgba(var(--primary-rgb),.10), transparent 45%),
                  radial-gradient(900px circle at 100% 0%, rgba(255,171,64,.10), transparent 45%);
  --gradient-mesh:radial-gradient(at 20% 0%, rgba(var(--primary-rgb),.08) 0, transparent 50%),
                  radial-gradient(at 80% 0%, rgba(255,171,64,.06) 0, transparent 50%),
                  radial-gradient(at 50% 100%, rgba(99,102,241,.05) 0, transparent 50%);
}

[data-bs-theme="dark"]{
  --primary-color:var(--brand-400);
  --primary-soft:rgba(38,166,144,.10);
  --primary-rgb:38,166,144;
  --accent-color:#ffc266;

  --bg:#0b1220;
  --bg-elev:#0f172a;
  --card:#111c30;
  --card-2:#152037;
  --text:#e2e8f0;
  --text-soft:#cbd5e1;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --border:#1f2a44;
  --border-strong:#2d3a55;
  --divider:rgba(255,255,255,.06);

  --easy:#4ade80;
  --med:#60a5fa;
  --hard:#f87171;
  --easy-soft:rgba(74,222,128,.12);
  --med-soft:rgba(96,165,250,.12);
  --hard-soft:rgba(248,113,113,.12);

  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 2px 6px rgba(0,0,0,.35);
  --shadow:0 6px 20px -8px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.40);
  --shadow-md:0 14px 30px -14px rgba(0,0,0,.6), 0 4px 10px -4px rgba(0,0,0,.4);
  --shadow-lg:0 24px 50px -20px rgba(0,0,0,.7);
  --shadow-brand:0 18px 40px -20px rgba(var(--primary-rgb),.55);

  --gradient-hero:radial-gradient(1200px circle at 0% 0%, rgba(var(--primary-rgb),.18), transparent 45%),
                  radial-gradient(900px circle at 100% 0%, rgba(255,194,102,.10), transparent 45%);
}

/* ---------- Base --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-feature-settings:"cv11","ss01","ss03";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}
body{
  background-image:var(--gradient-mesh);
  background-attachment:fixed;
  background-size:cover;
}
::selection{ background:rgba(var(--primary-rgb),.22); color:var(--text); }

/* Scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--border); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--border-strong); background-clip:padding-box; border:2px solid transparent; }

/* Focus ring (visible only via keyboard) */
:focus-visible{
  outline:2px solid var(--primary-color);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

/* Hindi-language readability */
.question-body,.question-options,.question-meta,.result-meta,
[lang="hi"] body, html[lang="hi"]{ font-family:var(--font-deva); }

/* ---------- Container helpers ------------------------------------------- */
.app-shell{ position:relative; min-height:100vh; display:flex; flex-direction:column; }
.app-main{ flex:1; }

/* ---------- Navbar ------------------------------------------------------ */
.app-navbar{
  position:sticky; top:0; z-index:1030;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:background var(--t), border-color var(--t), box-shadow var(--t);
}
.app-navbar.is-scrolled{
  box-shadow:0 6px 22px -14px rgba(15,23,42,.18);
  background:color-mix(in srgb, var(--card) 96%, transparent);
}
[data-bs-theme="dark"] .app-navbar{
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border-bottom-color:var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.02);
}
[data-bs-theme="dark"] .app-navbar.is-scrolled{
  background:color-mix(in srgb, var(--card) 98%, transparent);
  box-shadow:0 8px 24px -18px rgba(0,0,0,.6);
}
.app-navbar .container{ padding-top:.85rem; padding-bottom:.85rem; }
.app-navbar .brand{
  font-weight:800; font-size:1.05rem; letter-spacing:-.01em;
  color:var(--text); display:inline-flex; align-items:center; gap:.7rem;
  text-decoration:none; line-height:1;
  transition:color var(--t-fast), transform var(--t-fast);
}
.app-navbar .brand:hover{ color:var(--primary-color); transform:translateY(-1px); }
.app-navbar .brand-mark{
  width:38px; height:38px; border-radius:12px;
  background:var(--gradient-brand);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.15rem;
  box-shadow:0 8px 20px -8px rgba(var(--primary-rgb),.55), inset 0 1px 0 rgba(255,255,255,.25);
  position:relative;
}
.app-navbar .brand-mark::after{
  content:""; position:absolute; inset:0; border-radius:12px;
  background:radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.35), transparent 50%);
  pointer-events:none;
}
.app-navbar .nav-controls{ display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* Language toggle */
.lang-group{
  display:inline-flex; align-items:stretch; height:36px;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--card);
}
.lang-group .btn{
  border:0; border-radius:0; background:transparent; color:var(--muted);
  padding:0 .85rem; font-size:.78rem; font-weight:700; line-height:1;
  display:inline-flex; align-items:center; transition:all var(--t-fast);
}
.lang-group .btn + .btn{ border-left:1px solid var(--border); }
.lang-group .btn:hover{ color:var(--primary-color); background:var(--primary-soft); }
.lang-group .btn.active{ background:var(--primary-color); color:#fff; }

/* Dark mode switch as icon button — completely overrides Bootstrap form-switch */
.dark-toggle.form-check{ min-height:auto; padding-left:0; }
.dark-toggle{
  position:relative; margin:0; padding:0;
  width:36px; height:36px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); color:var(--muted); cursor:pointer;
  overflow:hidden;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.dark-toggle:hover{ color:var(--primary-color); border-color:var(--primary-color); }
.dark-toggle .form-check-input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer; z-index:2;
  appearance:none; -webkit-appearance:none; background-image:none;
}
.dark-toggle .form-check-label{
  position:absolute; inset:0;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:none;
  line-height:1;
}
.dark-toggle .form-check-label i{
  font-size:1.05rem; line-height:1;
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.dark-toggle .form-check-label .bi-sun-fill{ display:none; color:var(--accent-500); }
[data-bs-theme="dark"] .dark-toggle{ background:rgba(255,171,64,.10); color:var(--accent-500); border-color:rgba(255,171,64,.30); }
[data-bs-theme="dark"] .dark-toggle:hover{ background:rgba(255,171,64,.18); color:var(--accent-500); border-color:rgba(255,171,64,.55); }
[data-bs-theme="dark"] .dark-toggle .form-check-label .bi-moon-stars-fill{ display:none; }
[data-bs-theme="dark"] .dark-toggle .form-check-label .bi-sun-fill{ display:inline-block; }

/* Generic nav buttons (saved templates / generated papers) */
.app-navbar .btn-outline-primary,
.app-navbar .btn-outline-success{
  --bs-btn-padding-x:.85rem; --bs-btn-padding-y:.4rem;
  border-radius:var(--radius); font-weight:600; font-size:.85rem;
  border-width:1px;
  transition:all var(--t-fast);
}
.app-navbar .btn-outline-primary{ color:var(--primary-color); border-color:var(--border); background:var(--card); }
.app-navbar .btn-outline-primary:hover{ background:var(--primary-color); border-color:var(--primary-color); color:#fff; transform:translateY(-1px); }
.app-navbar .btn-outline-success{ color:var(--success); border-color:var(--border); background:var(--card); }
.app-navbar .btn-outline-success:hover{ background:var(--success); border-color:var(--success); color:#fff; transform:translateY(-1px); }

@media (max-width:575.98px){
  .lang-group{ height:34px; }
  .dark-toggle{ width:34px; height:34px; }
  .app-navbar .brand{ font-size:.95rem; }
  .app-navbar .brand-mark{ width:34px; height:34px; font-size:1rem; }
}

/* ---------- Hero -------------------------------------------------------- */
.hero{
  position:relative;
  text-align:center;
  padding:3rem 1rem 2rem;
  background:var(--gradient-hero);
  border-radius:var(--radius-2xl);
  margin-bottom:1.5rem;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:auto 0 -1px;
  height:60px;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}
.hero .hero-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .8rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  color:var(--primary-color);
  font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:1rem;
  box-shadow:var(--shadow-xs);
}
.hero h1{
  font-weight:800; font-size:clamp(1.75rem, 4vw, 2.6rem);
  margin:0 0 .5rem; letter-spacing:-.02em;
  background:linear-gradient(135deg, var(--text) 0%, var(--primary-color) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1.15;
}
.hero p{
  color:var(--muted); margin:0; font-size:1.05rem;
  max-width:600px; margin-inline:auto; line-height:1.6;
}
.hero-meta{
  display:inline-flex; align-items:center; gap:1.25rem;
  margin-top:1.5rem; flex-wrap:wrap; justify-content:center;
}
.hero-meta .meta-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .8rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-pill);
  color:var(--text-soft);
  font-size:.82rem; font-weight:500;
  box-shadow:var(--shadow-xs);
  transition:all var(--t-fast);
}
.hero-meta .meta-pill i{ color:var(--primary-color); font-size:1rem; }
.hero-meta .meta-pill:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:var(--primary-color); }

/* ---------- Main card --------------------------------------------------- */
.main-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:box-shadow var(--t);
}
.main-card:hover{ box-shadow:var(--shadow-md); }

.card-header{
  background:linear-gradient(180deg, var(--card-2), var(--card));
  border-bottom:1px solid var(--border);
  padding:1.25rem 1.5rem;
}
.card-body{ padding:1.75rem 1.5rem; }

@media (min-width:768px){
  .card-body{ padding:2rem; }
}

/* ---------- Stepper ----------------------------------------------------- */
.stepper{
  display:flex; align-items:center; justify-content:center;
  gap:.25rem; padding:.25rem 0; flex-wrap:nowrap;
}
.stepper .step{
  display:flex; align-items:center; gap:.55rem;
  color:var(--muted); font-size:.9rem; font-weight:600;
  cursor:pointer; transition:color var(--t-fast);
  padding:.3rem .5rem;
  border-radius:var(--radius-sm);
}
.stepper .step:hover{ color:var(--text); }
.stepper .step-circle{
  width:32px; height:32px; border-radius:50%;
  background:var(--card); border:2px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--muted); font-weight:700;
  transition:all var(--t) var(--ease-spring);
  flex-shrink:0;
  position:relative;
}
.stepper .step.active{ color:var(--text); }
.stepper .step.active .step-circle{
  background:var(--gradient-brand);
  border-color:var(--brand-600); color:#fff;
  box-shadow:0 0 0 4px var(--primary-soft), var(--shadow-brand);
  transform:scale(1.05);
}
.stepper .step.active .step-circle::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--primary-color); opacity:.4;
  animation:pulse-ring 1.8s ease-out infinite;
}
.stepper .step.done{ color:var(--easy); }
.stepper .step.done .step-circle{
  background:var(--easy); border-color:var(--easy); color:#fff;
}
.stepper .step-divider{
  flex:1; max-width:48px; height:2px;
  background:var(--border); margin:0 .25rem; border-radius:1px;
  position:relative; overflow:hidden;
}
.stepper .step-divider::after{
  content:""; position:absolute; inset:0;
  background:var(--easy); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-slow);
}
.stepper .step.done + .step-divider::after,
.stepper .step.active + .step-divider::after{ transform:scaleX(.5); }
.stepper .step.done + .step-divider::after{ transform:scaleX(1); }

@keyframes pulse-ring{
  0%{ transform:scale(.85); opacity:.5; }
  100%{ transform:scale(1.3); opacity:0; }
}

@media (max-width:575.98px){
  .stepper .step .step-label{ display:none; }
  .stepper .step-divider{ max-width:32px; }
}

/* ---------- Progress bar ------------------------------------------------- */
.progress{
  height:6px; border-radius:var(--radius-pill);
  background:var(--bg-elev); overflow:hidden;
}
.progress-bar{
  background:var(--gradient-brand);
  transition:width .4s var(--ease-out);
  position:relative;
}
.progress-bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation:shimmer 2s infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

/* ---------- Form steps -------------------------------------------------- */
.form-step{
  display:none;
  animation:stepIn .4s var(--ease-out);
}
.form-step.active{ display:block; }
@keyframes stepIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}
.form-step h4{
  font-size:1.35rem; font-weight:700; letter-spacing:-.01em;
  color:var(--text); margin-bottom:.35rem;
}
.form-step .step-subtitle{
  color:var(--muted); font-size:.92rem; margin-bottom:1.5rem;
}

/* ---------- Form controls ----------------------------------------------- */
.form-label{
  font-weight:600; color:var(--text-soft);
  font-size:.85rem; letter-spacing:.005em;
  margin-bottom:.45rem;
  display:flex; align-items:center; gap:.4rem;
}
.form-label .req{ color:var(--danger); font-weight:700; }
.form-label .hint{ font-weight:400; color:var(--muted); font-size:.78rem; margin-left:auto; }

.form-control, .form-select{
  background:var(--card);
  border:1.5px solid var(--border);
  color:var(--text);
  border-radius:var(--radius);
  padding:.7rem .9rem;
  font-size:.95rem; font-weight:500;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  box-shadow:var(--shadow-xs);
}
.form-control::placeholder{ color:var(--muted-2); font-weight:400; }
.form-control:hover, .form-select:hover{ border-color:var(--border-strong); }
.form-control:focus, .form-select:focus{
  border-color:var(--primary-color);
  box-shadow:0 0 0 4px var(--primary-soft);
  background:var(--card);
  color:var(--text);
}
.form-control.is-invalid, .form-select.is-invalid{
  border-color:var(--danger);
  background-image:none;
  padding-right:.9rem;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus{
  box-shadow:0 0 0 4px rgba(239,68,68,.15);
}

.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='3 5.5 8 10.5 13 5.5'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:14px;
  padding-right:2.3rem;
}

/* Input groups */
.input-group{ box-shadow:var(--shadow-xs); border-radius:var(--radius); }
.input-group .form-control,
.input-group .input-group-text{
  border-radius:var(--radius);
}
.input-group .input-group-text{
  background:var(--bg-elev); color:var(--muted);
  border:1.5px solid var(--border); border-right:0;
  font-size:.85rem; font-weight:600;
}
.input-group .form-control{ border-left:0; }
.input-group .form-control:focus{ z-index:3; }
.input-group:focus-within .input-group-text{ border-color:var(--primary-color); color:var(--primary-color); background:var(--primary-soft); }

/* Buttons */
.btn{
  --bs-btn-padding-x:1rem;
  --bs-btn-padding-y:.55rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.005em;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border-width:1.5px;
}
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--primary-color); outline-offset:2px; }

.btn-primary{
  background:var(--gradient-brand);
  border-color:transparent; color:#fff;
  box-shadow:var(--shadow-brand);
}
.btn-primary:hover{
  background:var(--gradient-brand);
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 20px 40px -16px rgba(var(--primary-rgb),.6);
  color:#fff;
}
.btn-primary:disabled{
  background:var(--brand-300); border-color:transparent; color:#fff;
  opacity:.7; transform:none; box-shadow:none;
}

.btn-success{
  background:linear-gradient(135deg, var(--success) 0%, #059669 100%);
  border-color:transparent; color:#fff;
  box-shadow:0 14px 28px -16px rgba(16,185,129,.6);
}
.btn-success:hover{ filter:brightness(1.06); transform:translateY(-1px); color:#fff; }

.btn-outline-secondary{
  background:var(--card); color:var(--text-soft);
  border-color:var(--border);
}
.btn-outline-secondary:hover{
  background:var(--bg-elev); color:var(--text);
  border-color:var(--border-strong);
}

.btn-outline-primary{
  background:transparent; color:var(--primary-color);
  border-color:var(--primary-color);
}
.btn-outline-primary:hover{
  background:var(--primary-color); color:#fff;
}

.btn-outline-danger{
  background:transparent; color:var(--danger);
  border-color:rgba(239,68,68,.4);
}
.btn-outline-danger:hover{
  background:var(--danger); color:#fff; border-color:var(--danger);
}

.btn-sm{ --bs-btn-padding-x:.7rem; --bs-btn-padding-y:.35rem; font-size:.82rem; }

/* Mode toggle (By Topic / By Class) */
.mode-toggle{
  display:flex;
  padding:.3rem;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  gap:.25rem;
}
.mode-toggle .btn{
  flex:1; background:transparent; border:0; color:var(--muted);
  border-radius:var(--radius-sm); padding:.55rem .8rem;
  box-shadow:none; font-weight:600;
}
.mode-toggle .btn:hover{ color:var(--text); background:transparent; transform:none; }
.mode-toggle .btn.active{
  background:var(--card); color:var(--primary-color);
  box-shadow:var(--shadow-xs);
  border:1px solid var(--border);
}

/* Chapters */
#chaptersContainer{
  background:var(--bg-elev);
  border:1.5px dashed var(--border);
  border-radius:var(--radius);
  padding:1rem;
  max-height:260px;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:.35rem .75rem;
  transition:border-color var(--t-fast);
}
#chaptersContainer:has(.chapter-checkbox){ border-style:solid; border-color:var(--border); }
#chaptersContainer:empty,
#chaptersContainer .text-muted{
  grid-column:1/-1; text-align:center; padding:.5rem; color:var(--muted)!important; font-size:.88rem;
}
#chaptersContainer .form-check{
  padding:.5rem .75rem .5rem 2.1rem;
  border-radius:var(--radius-sm);
  margin:0;
  transition:background var(--t-fast);
  cursor:pointer;
  position:relative;
}
#chaptersContainer .form-check:hover{ background:var(--card); }
#chaptersContainer .form-check-input{
  position:absolute; left:.65rem; top:50%; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; margin:0;
  border:1.5px solid var(--border-strong);
  border-radius:5px;
  cursor:pointer;
  transition:all var(--t-fast);
}
#chaptersContainer .form-check-input:checked{
  background-color:var(--primary-color);
  border-color:var(--primary-color);
}
#chaptersContainer .form-check-label{
  font-size:.88rem; color:var(--text);
  cursor:pointer; line-height:1.3;
  display:block;
}
#chaptersContainer .form-check-input:checked + .form-check-label{ color:var(--primary-color); font-weight:600; }

.chapter-actions{ display:flex; gap:.4rem; align-items:center; }
.chapter-counter{
  margin-left:auto;
  font-size:.78rem; color:var(--muted); font-weight:500;
}
.chapter-counter .count{ color:var(--primary-color); font-weight:700; }

/* Question types */
.question-type-group{
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.1rem;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  position:relative;
  overflow:hidden;
}
.question-type-group::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--primary-color); opacity:0; transition:opacity var(--t-fast);
}
.question-type-group:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-sm);
}
.question-type-group.has-questions{
  border-color:var(--primary-color); background:linear-gradient(135deg, var(--primary-soft) 0%, var(--card) 100%);
}
.question-type-group.has-questions::before{ opacity:1; }
.question-type-group .qt-head{
  display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem;
}
.question-type-group .qt-icon{
  width:32px; height:32px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--primary-soft); color:var(--primary-color);
  font-size:1rem;
}
.question-type-group .form-label{
  margin:0; font-size:.92rem; color:var(--text);
}
.question-type-group .qt-subtotal{
  margin-left:auto;
  font-size:.78rem; color:var(--muted); font-weight:600;
}
.question-type-group .qt-subtotal .badge{
  background:var(--primary-color); color:#fff; padding:.2rem .55rem; border-radius:99px;
}

/* Total marks pill */
.totals-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem;
  background:var(--gradient-brand);
  color:#fff; border-radius:var(--radius-pill);
  font-weight:600; font-size:.92rem;
  box-shadow:var(--shadow-brand);
  transition:transform var(--t-fast);
}
.totals-pill .num{ font-size:1.05rem; font-weight:800; }
.totals-pill:hover{ transform:translateY(-1px); }

/* ---------- Difficulty distribution ------------------------------------- */
.distribution-bar-container{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem;
}
.dist-labels{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.85rem; gap:1rem; flex-wrap:wrap;
}
.dist-label{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; font-weight:600;
}
.dist-label::before{
  content:""; width:10px; height:10px; border-radius:50%;
  display:inline-block;
}
.dist-label.easy{ color:var(--easy); }   .dist-label.easy::before{   background:var(--easy); }
.dist-label.medium{ color:var(--med); }  .dist-label.medium::before{ background:var(--med); }
.dist-label.hard{ color:var(--hard); }   .dist-label.hard::before{   background:var(--hard); }
.dist-label .badge{
  font-size:.72rem; padding:.18rem .45rem;
  background:var(--card); border:1px solid currentColor;
}
.dist-label.easy .badge{ color:var(--easy); }
.dist-label.medium .badge{ color:var(--med); }
.dist-label.hard .badge{ color:var(--hard); }

.distribution-bar{
  position:relative; width:100%; height:14px;
  background:var(--border); border-radius:var(--radius-pill);
  display:flex; overflow:hidden;
  touch-action:none;
}
.dist-segment{ height:100%; transition:width var(--t-fast) linear; }
.dist-segment.easy{ background:var(--easy); }
.dist-segment.medium{ background:var(--med); }
.dist-segment.hard{ background:var(--hard); }
.dist-handle{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%;
  background:var(--card); border:3px solid var(--primary-color);
  cursor:ew-resize; z-index:10;
  box-shadow:var(--shadow-sm), 0 0 0 0 rgba(var(--primary-rgb),0);
  transition:box-shadow var(--t-fast), transform var(--t-fast);
}
.dist-handle:hover, .dist-handle.is-active{
  box-shadow:var(--shadow-sm), 0 0 0 6px rgba(var(--primary-rgb),.18);
  transform:translate(-50%,-50%) scale(1.08);
}

/* ---------- Final preview ----------------------------------------------- */
.final-preview-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t);
}
.final-preview-box:hover{ box-shadow:var(--shadow); }
.final-preview-header{
  display:flex; align-items:center;
  background:linear-gradient(135deg, var(--primary-soft), var(--card-2));
  color:var(--primary-color); font-weight:700;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--border);
}
.final-preview-header > div{ display:inline-flex; align-items:center; gap:.5rem; }
.preview-content{ padding:1.25rem!important; }
.preview-content .preview-title{ text-align:center; margin-bottom:.75rem; }
.preview-content .preview-title .exam-name{ font-size:1.35rem; font-weight:700; color:var(--text); margin-bottom:.15rem; }
.preview-content .preview-title .school-name{ font-size:.95rem; color:var(--muted); }
.preview-content .preview-section{ display:grid; gap:.45rem; }
.preview-content .preview-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .75rem;
  background:var(--bg-elev); border-radius:var(--radius-sm);
  font-size:.9rem; color:var(--text);
}
.preview-content .preview-item span:first-child{ color:var(--muted); }
.preview-content .preview-item span:last-child{ color:var(--text); font-weight:600; }
.preview-divider{
  margin:.9rem 0; border-top:1px dashed var(--border);
}

/* ---------- Generation panel / skeleton --------------------------------- */
.generation-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  box-shadow:var(--shadow-sm);
}
.generation-panel .gen-head{
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:1rem;
}
.gen-spinner{
  width:32px; height:32px; flex-shrink:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--primary-color), transparent 75%);
  animation:spin 1.1s linear infinite;
  position:relative;
}
.gen-spinner::after{
  content:""; position:absolute; inset:4px;
  background:var(--card); border-radius:50%;
}
.gen-spinner::before{
  content:"\F2D8"; font-family:"bootstrap-icons";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--primary-color); font-size:.85rem; z-index:2;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

#genPhaseLabel{ font-size:1rem; color:var(--text); font-weight:600; }
.gen-status-sub{ font-size:.82rem; color:var(--muted); }

.skeleton-slot{
  background:var(--bg-elev);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  margin-bottom:.6rem;
  padding:.85rem 1rem;
  position:relative;
  overflow:hidden;
  transition:all var(--t);
}
.skeleton-slot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation:shimmer 1.6s infinite; pointer-events:none;
}
.skeleton-slot.skeleton-filled{
  background:var(--card); border-style:solid; border-color:rgba(34,197,94,.4);
  box-shadow:0 0 0 2px rgba(34,197,94,.08);
  padding:0;
}
.skeleton-slot.skeleton-filled::after{ display:none; }
[data-bs-theme="dark"] .skeleton-slot::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}

/* ---------- Result card ------------------------------------------------- */
.result-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-top:1.25rem;
  box-shadow:var(--shadow);
  animation:popIn .4s var(--ease-spring);
}
@keyframes popIn{
  from{ opacity:0; transform:translateY(8px) scale(.99); }
  to{ opacity:1; transform:none; }
}
.result-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-bottom:1.1rem; margin-bottom:1.25rem;
  border-bottom:1px solid var(--border);
}
.result-head h5{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0; font-weight:700; color:var(--text);
}
.result-head h5::before{
  content:"\F26B"; font-family:"bootstrap-icons";
  color:var(--success); font-size:1.2rem;
}
.result-meta{ display:flex; gap:1rem; color:var(--muted); font-size:.88rem; flex-wrap:wrap; }
.result-meta span{ display:inline-flex; align-items:center; gap:.35rem; }
.result-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.questions-grid{
  display:grid; grid-template-columns:1fr; gap:.85rem;
}
@media (min-width:992px){
  .questions-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- Question card ----------------------------------------------- */
.question-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.question-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
  border-color:var(--border-strong);
}
.question-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin-bottom:.6rem;
}
.question-number{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:24px; padding:0 .55rem;
  background:var(--primary-soft); color:var(--primary-color);
  border-radius:var(--radius-pill);
  font-weight:700; font-size:.78rem; letter-spacing:.02em;
}
.question-marks{
  font-size:.78rem; color:var(--text-soft); font-weight:600;
  background:var(--bg-elev); border-radius:var(--radius-pill);
  padding:.15rem .65rem;
}
.question-body{ color:var(--text); line-height:1.55; font-size:.95rem; }
.question-options{
  margin:.55rem 0 0; padding-left:1.3rem;
  color:var(--text-soft); font-size:.9rem;
}
.question-options li{ margin-bottom:.2rem; }
.question-meta{
  display:flex; gap:.4rem; flex-wrap:wrap;
  margin-top:.75rem; padding-top:.6rem;
  border-top:1px dashed var(--border);
}
.question-meta .badge{
  font-weight:500; font-size:.7rem;
  padding:.25rem .55rem;
  border-radius:var(--radius-pill);
}

/* ---------- Offcanvas --------------------------------------------------- */
.offcanvas{
  background:var(--card); border:0;
  box-shadow:var(--shadow-lg);
  border-right:1px solid var(--border);
}
.offcanvas-header{
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--card-2), var(--card));
}
.offcanvas-title{
  font-weight:700; font-size:1.1rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.offcanvas-body{ padding:1.25rem 1.5rem; }
.btn-close{
  background:var(--bg-elev) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/14px no-repeat;
  border-radius:var(--radius-sm); opacity:1;
  width:32px; height:32px; padding:0;
}
.btn-close:hover{ background-color:var(--border); opacity:1; }
[data-bs-theme="dark"] .btn-close{
  background:var(--bg-elev) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cbd5e1'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/14px no-repeat;
}

/* ---------- Template / paper cards ------------------------------------- */
.template-grid{
  display:grid; grid-template-columns:1fr; gap:.85rem;
}
.template-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  display:flex; flex-direction:column;
  gap:.45rem;
  transition:all var(--t-fast);
  position:relative;
  cursor:pointer;
}
.template-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:var(--primary-color);
}
.template-card h6{
  font-size:.98rem; font-weight:700; color:var(--text);
  margin:0; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.template-card .tc-meta{
  display:flex; gap:.4rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--muted);
}
.template-card .tc-meta .pill{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.15rem .55rem;
  background:var(--bg-elev); border-radius:var(--radius-pill);
  color:var(--text-soft); font-weight:500;
}
.template-card .tc-actions{
  display:flex; gap:.4rem; margin-top:auto; padding-top:.5rem;
  border-top:1px dashed var(--border);
}
.template-card .tc-actions .btn{ font-size:.78rem; padding:.3rem .6rem; }

/* Empty states */
.empty-state{
  text-align:center; padding:2.5rem 1rem;
  color:var(--muted);
}
.empty-state .empty-icon{
  width:64px; height:64px; margin:0 auto 1rem;
  border-radius:50%; background:var(--bg-elev);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:var(--muted-2);
}
.empty-state h6{ color:var(--text); font-weight:700; margin:0 0 .35rem; font-size:1rem; }
.empty-state p{ margin:0; font-size:.88rem; max-width:280px; margin-inline:auto; }

/* ---------- Toast notifications ----------------------------------------- */
.toast-container{
  position:fixed; top:80px; right:1rem;
  z-index:1100;
  display:flex; flex-direction:column; gap:.6rem;
  pointer-events:none;
  max-width:340px;
}
.toast-item{
  pointer-events:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:.85rem 1rem;
  display:flex; align-items:flex-start; gap:.6rem;
  animation:toastIn .35s var(--ease-spring);
  position:relative; overflow:hidden;
}
.toast-item.toast-out{ animation:toastOut .25s var(--ease-in-out) forwards; }
@keyframes toastIn{
  from{ opacity:0; transform:translateX(20px); }
  to{ opacity:1; transform:none; }
}
@keyframes toastOut{
  from{ opacity:1; transform:none; }
  to{ opacity:0; transform:translateX(20px); }
}
.toast-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--primary-color);
}
.toast-item.success::before{ background:var(--success); }
.toast-item.error::before{ background:var(--danger); }
.toast-item.warn::before{ background:var(--warn); }
.toast-item.info::before{ background:var(--info); }
.toast-item .toast-icon{
  width:24px; height:24px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-size:1rem;
}
.toast-item.success .toast-icon{ color:var(--success); }
.toast-item.error .toast-icon{ color:var(--danger); }
.toast-item.warn .toast-icon{ color:var(--warn); }
.toast-item.info .toast-icon{ color:var(--info); }
.toast-item .toast-text{ flex:1; min-width:0; }
.toast-item .toast-title{ font-weight:700; font-size:.9rem; color:var(--text); margin:0; line-height:1.3; }
.toast-item .toast-msg{ font-size:.83rem; color:var(--muted); margin:.15rem 0 0; line-height:1.4; }
.toast-item .toast-close{
  margin-left:.25rem; padding:0; background:none; border:0;
  color:var(--muted); font-size:1.1rem; line-height:1; cursor:pointer;
  width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px;
}
.toast-item .toast-close:hover{ color:var(--text); background:var(--bg-elev); }

/* ---------- Confirm modal (drop-in replacement for confirm()) ----------- */
.confirm-backdrop{
  position:fixed; inset:0; z-index:1090;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  animation:fadeIn .2s ease-out;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.confirm-dialog{
  background:var(--card); color:var(--text);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  max-width:420px; width:100%;
  padding:1.5rem;
  animation:popIn .25s var(--ease-spring);
}
.confirm-icon{
  width:48px; height:48px; border-radius:50%;
  background:rgba(239,68,68,.12); color:var(--danger);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:.85rem;
}
.confirm-title{ font-weight:700; font-size:1.1rem; margin:0 0 .35rem; }
.confirm-msg{ color:var(--muted); margin:0 0 1.25rem; font-size:.92rem; line-height:1.5; }
.confirm-actions{ display:flex; gap:.5rem; justify-content:flex-end; }

/* ---------- Floating action helpers / sticky steps footer --------------- */
.step-actions{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:1.75rem; gap:.75rem;
  padding-top:1.25rem; border-top:1px solid var(--border);
}
.step-actions.end{ justify-content:flex-end; }

/* ---------- Saved questions / mini lists -------------------------------- */
.questions-list{
  background:var(--bg-elev); border-radius:var(--radius);
  padding:1rem; max-height:480px; overflow-y:auto;
}
.questions-list > div{ margin-bottom:.85rem; }
.questions-list > div:last-child{ margin-bottom:0; }

/* ---------- AI badge ---------------------------------------------------- */
.ai-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; font-weight:700; padding:.22rem .6rem;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.14), rgba(255,171,64,.22));
  color:var(--primary-color); border:1px solid rgba(var(--primary-rgb),.3);
  letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- Print preview ---------------------------------------------- */
.preview-iframe-wrap{ width:100%; min-height:70vh; background:var(--bg-elev); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.preview-iframe-wrap iframe{ width:100%; min-height:70vh; background:#fff; border:0; }

/* ---------- Editor mode ------------------------------------------------- */
.result-card.editing .editable{
  outline:1px dashed transparent; border-radius:4px; padding:2px 4px; cursor:text;
  transition:outline-color var(--t-fast), background-color var(--t-fast);
}
.result-card.editing .editable:hover{ outline-color:var(--primary-color); background:rgba(var(--primary-rgb),.05); }
.result-card.editing .editable:focus{
  outline:2px solid var(--primary-color);
  background:rgba(var(--primary-rgb),.08);
  box-shadow:0 0 0 4px rgba(var(--primary-rgb),.12);
}

/* ---------- Footer ------------------------------------------------------ */
.app-footer{
  margin-top:3rem;
  padding:1.5rem 1rem 2rem;
  text-align:center;
  font-size:.83rem; color:var(--muted);
  border-top:1px solid var(--border);
}
.app-footer a{ color:var(--primary-color); text-decoration:none; }
.app-footer a:hover{ text-decoration:underline; }

/* ---------- Dark mode overrides ---------------------------------------- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] #chaptersContainer,
[data-bs-theme="dark"] .template-card,
[data-bs-theme="dark"] .question-card,
[data-bs-theme="dark"] .question-type-group{
  background:var(--card); color:var(--text);
}
[data-bs-theme="dark"] .form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='3 5.5 8 10.5 13 5.5'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .input-group .input-group-text{ background:var(--bg-elev); }
[data-bs-theme="dark"] .preview-iframe-wrap iframe{ background:#fff; }
[data-bs-theme="dark"] body{
  background-image:radial-gradient(at 20% 0%, rgba(var(--primary-rgb),.10) 0, transparent 50%),
                   radial-gradient(at 80% 10%, rgba(255,194,102,.06) 0, transparent 50%);
}

/* ---------- Responsive niceties ---------------------------------------- */
@media (max-width:767.98px){
  .hero{ padding:2rem 1rem 1.5rem; border-radius:var(--radius-xl); }
  .card-body{ padding:1.25rem; }
  .result-actions{ width:100%; }
  .result-actions .btn{ flex:1; }
}

/* ---------- Visually-hidden ------------------------------------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Reduce motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}