/* ============================================================
   QuizPlatform — "Studio Indigo" design system
   Bootstrap 5.3.1 + Bootstrap Icons. Light & dark via
   <html data-bs-theme="light|dark">
   ============================================================ */

:root {
  --qp-brand: #5b5bd6;
  --qp-brand-2: #8b5cf6;
  --qp-brand-soft: rgba(91, 91, 214, .10);
  --qp-accent: #0d9488;
  --qp-grad: linear-gradient(135deg, var(--qp-brand), var(--qp-brand-2));

  /* score language — same colors everywhere results appear */
  --qp-high: #16a34a;
  --qp-mid: #3b82f6;
  --qp-low: #dc2626;
  --qp-partial: #d97706;

  --qp-track: #e8e9f3;          /* progress bar / ring track */
  --qp-ring-hole: #ffffff;
  --qp-surface-tint: #f7f8fd;   /* subtle nested surface */
  --qp-line: #e4e6f0;
  --qp-hero-ink: #ffffff;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-border-radius: .6rem;
}

[data-bs-theme="dark"] {
  --qp-brand: #7c7ce8;
  --qp-brand-2: #a78bfa;
  --qp-brand-soft: rgba(124, 124, 232, .14);
  --qp-accent: #2dd4bf;

  --qp-high: #4ade80;
  --qp-mid: #60a5fa;
  --qp-low: #f87171;
  --qp-partial: #fbbf24;

  --qp-track: #2a3149;
  --qp-ring-hole: #171d31;
  --qp-surface-tint: #1a2136;
  --qp-line: #2a3149;
}

body {
  background: var(--bs-body-bg);
  font-feature-settings: "cv02", "cv03";
}

.display-font, .qp-logo, h1.hero-title { font-family: "Sora", var(--bs-body-font-family); }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Navbar — always dark, in both themes.
   The app bar is BootstrapTemplate's `Navbar` (id #navbar);
   the mockups write it as <nav class="navbar qp-navbar">.
   ------------------------------------------------------------ */
#navbar, .qp-navbar {
  background: linear-gradient(120deg, #141a2e 0%, #1d2440 55%, #232a52 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 2px 14px rgba(10, 14, 30, .35);
}
/* the Navbar component carries bg-body-tertiary (a !important utility) — the bar must stay dark */
#navbar.bg-body-tertiary {
  background: linear-gradient(120deg, #141a2e 0%, #1d2440 55%, #232a52 100%) !important;
}
#navbar .navbar-toggler { border-color: rgba(255,255,255,.16); }
#navbar .navbar-toggler-icon { filter: invert(1) opacity(.8); }
#navbar > .container { width: 100%; }
@media (min-width: 1200px) { #navbar > .container { max-width: 1320px; } }

#navbar .navbar-nav { gap: .35rem; align-items: center; }
#navbar .nav-link, .qp-navbar .nav-link {
  color: #aeb6d6;
  border-radius: .5rem;
  padding: .4rem .9rem;
  position: relative;
}
#navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
#navbar .nav-link.active { color: #fff; background: rgba(124,124,232,.22); }
#navbar .dropdown-menu, .qp-navbar .dropdown-menu { --bs-dropdown-min-width: 11rem; }

/* the brand renders the mockups' logo mark (a "Q" tile) before the name */
#navbar .navbar-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Sora", var(--bs-body-font-family);
  font-weight: 800; letter-spacing: .2px; color: #fff; font-size: 1.15rem;
}
#navbar .navbar-brand::before {
  content: "Q";
  width: 34px; height: 34px; border-radius: .7rem;
  background: var(--qp-grad);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 1.05rem; font-weight: 800;
  box-shadow: 0 3px 10px rgba(139, 92, 246, .45);
}

/* rounded pill toggles with inner padding for the navbar dropdowns */
#navbar .nav-item.dropdown > .nav-link.dropdown-toggle {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 99rem;
  color: #cfd6ee;
  padding: .4rem .8rem;
}
#navbar .qp-user-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(124,124,232,.5);
  border-radius: 99rem;
  color: #fff;
  padding: .35rem .9rem;
}
#navbar .qp-caret { color: rgba(255,255,255,.5); }

/* the logged user's avatar: the first letter of the display name */
.qp-avatar {
  width: 26px; height: 26px; border-radius: .55rem; flex: 0 0 auto;
  background: var(--qp-grad); color: #fff;
  display: inline-grid; place-items: center;
  font-size: .8rem; font-weight: 800;
}

.qp-logo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 800; letter-spacing: .2px; color: #fff; font-size: 1.15rem;
}
.qp-logo-mark {
  width: 34px; height: 34px; border-radius: .7rem;
  background: var(--qp-grad);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 1.05rem; font-weight: 800;
  box-shadow: 0 3px 10px rgba(139, 92, 246, .45);
}

.theme-toggle {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #cfd6ee; border-radius: 99rem;
  width: 38px; height: 38px; display: grid; place-items: center;
}
.theme-toggle:hover { background: rgba(255,255,255,.14); color:#fff; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn-brand {
  background: var(--qp-grad); color: #fff; border: 0;
  box-shadow: 0 4px 14px rgba(91, 91, 214, .35);
  font-weight: 600;
}
.btn-brand:hover, .btn-brand:focus { color: #fff; filter: brightness(1.07); }
.btn-ghost {
  border: 1px solid var(--qp-line); background: transparent; color: var(--bs-body-color);
}
.btn-ghost:hover { background: var(--qp-brand-soft); border-color: var(--qp-brand); color: var(--qp-brand); }

/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */
.card { border-color: var(--qp-line); }
.card-soft { background: var(--qp-surface-tint); }

.quiz-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--qp-line);
  border-radius: .9rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.quiz-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--qp-grad); opacity: 0; transition: opacity .15s ease;
}
.quiz-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(30, 35, 80, .14);
  border-color: color-mix(in srgb, var(--qp-brand) 45%, var(--qp-line));
}
.quiz-card:hover::before { opacity: 1; }

.cat-tile {
  width: 46px; height: 46px; border-radius: .8rem; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.25rem; color: #fff;
  background: var(--qp-grad);
}
.cat-tile.t-teal  { background: linear-gradient(135deg,#0d9488,#2dd4bf); }
.cat-tile.t-amber { background: linear-gradient(135deg,#d97706,#f59e0b); }
.cat-tile.t-rose  { background: linear-gradient(135deg,#e11d48,#fb7185); }
.cat-tile.t-slate { background: linear-gradient(135deg,#475569,#94a3b8); }

/* The category icon inline (owner-panel category table, category page header). */
.cat-icon { color: var(--qp-brand); }

.quiz-meta { color: var(--bs-secondary-color); font-size: .875rem; }
.quiz-meta .bi { margin-right: .25rem; }

/* ------------------------------------------------------------
   Badges
   ------------------------------------------------------------ */
.badge-cat {
  background: var(--qp-brand-soft); color: var(--qp-brand);
  border: 1px solid color-mix(in srgb, var(--qp-brand) 30%, transparent);
  font-weight: 600; border-radius: 99rem;
}
.badge-vis { border-radius: 99rem; font-weight: 600; }
.badge-vis.public         { background: rgba(22,163,74,.12);  color: var(--qp-high);   border: 1px solid color-mix(in srgb, var(--qp-high) 35%, transparent); }
.badge-vis.authenticated  { background: var(--qp-brand-soft); color: var(--qp-brand);  border: 1px solid color-mix(in srgb, var(--qp-brand) 35%, transparent); }
.badge-vis.private        { background: color-mix(in srgb, var(--bs-secondary-color) 12%, transparent); color: var(--bs-secondary-color); border: 1px solid var(--qp-line); }
.badge-flag {
  border-radius: .45rem; font-weight: 600; font-size: .72rem;
  background: var(--qp-surface-tint); color: var(--bs-secondary-color);
  border: 1px solid var(--qp-line);
}
.badge-flag.exam { background: rgba(217,119,6,.12); color: var(--qp-partial); border-color: color-mix(in srgb, var(--qp-partial) 35%, transparent); }
.badge-flag.time { background: rgba(220,38,38,.10); color: var(--qp-low); border-color: color-mix(in srgb, var(--qp-low) 35%, transparent); }

/* question-type badges */
.tbadge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 99rem; font-size: .74rem; font-weight: 700; padding: .28em .7em; }
.tbadge.single   { background: rgba(91,91,214,.12);  color: var(--qp-brand); }
.tbadge.multiple { background: rgba(13,148,136,.12); color: var(--qp-accent); }
.tbadge.open     { background: rgba(217,119,6,.12);  color: var(--qp-partial); }
.tbadge.fill     { background: rgba(225,29,72,.10);  color: #e11d48; }
[data-bs-theme="dark"] .tbadge.fill { color: #fb7185; }

/* ------------------------------------------------------------
   Score language — rings, bars, chips
   ------------------------------------------------------------ */
.score-ring {
  --v: 0; --c: var(--qp-high);
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--qp-track) 0);
}
.score-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--qp-ring-hole); }
.score-ring > span { position: relative; font-weight: 800; font-size: 1.15rem; font-family: "Sora", sans-serif; }
.score-ring.sm { width: 54px; height: 54px; }
.score-ring.sm::before { inset: 5px; }
.score-ring.sm > span { font-size: .8rem; }
.score-ring.high { --c: var(--qp-high); } .score-ring.mid { --c: var(--qp-mid); }
.score-ring.low  { --c: var(--qp-low); }  .score-ring.partial { --c: var(--qp-partial); }

.score-cell { display: flex; align-items: center; gap: .6rem; min-width: 9.5rem; }
.score-bar { flex: 1; height: .5rem; border-radius: 99rem; background: var(--qp-track); overflow: hidden; }
.score-bar > i { display: block; height: 100%; border-radius: 99rem; background: var(--qp-mid); }
.score-bar > i.high { background: var(--qp-high); }
.score-bar > i.mid  { background: var(--qp-mid); }
.score-bar > i.low  { background: var(--qp-low); }
.score-num { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.1em; text-align: right; }
.score-num.high { color: var(--qp-high); } .score-num.mid { color: var(--qp-mid); } .score-num.low { color: var(--qp-low); }

.badge-progress {
  border-radius: 99rem; font-weight: 600;
  background: var(--qp-surface-tint); color: var(--bs-secondary-color);
  border: 1px dashed var(--qp-line);
}

/* ------------------------------------------------------------
   Quiz solving page
   ------------------------------------------------------------ */
.quiz-head {
  border-radius: 1rem; border: 1px solid var(--qp-line);
  background: var(--qp-grad); color: #fff;
  box-shadow: 0 10px 30px rgba(60, 60, 140, .25);
}
.quiz-head .badge-cat { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }

.qcard { border: 1px solid var(--qp-line); border-radius: .9rem; position: relative; }
.qcard > .card-body { padding: 1.15rem 1.3rem; }
.qnum {
  width: 34px; height: 34px; border-radius: .6rem; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 800;
  background: var(--qp-brand-soft); color: var(--qp-brand);
  font-family: "Sora", sans-serif;
}
.qtitle { font-weight: 700; font-size: 1.02rem; }
.qhint { color: var(--bs-secondary-color); font-size: .83rem; }
.qpoints { color: var(--bs-secondary-color); font-size: .8rem; white-space: nowrap; }

.opt {
  border: 1px solid var(--qp-line); border-radius: .6rem;
  padding: .65rem .9rem; margin-bottom: .5rem;
  display: flex; align-items: center; gap: .6rem;
  cursor: pointer; transition: border-color .12s, background .12s;
  background: var(--bs-body-bg);
}
.opt:hover { border-color: var(--qp-brand); background: var(--qp-brand-soft); }
.opt input { flex: 0 0 auto; }
.opt:has(input:checked) {
  border-color: var(--qp-brand);
  background: var(--qp-brand-soft);
  box-shadow: inset 0 0 0 1px var(--qp-brand);
}

/* fill-in gaps use standard Bootstrap .form-select / .form-control inline */

/* floating countdown */
.timer-float {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1080;
  display: flex; align-items: center; gap: .7rem;
  background: #141a2e; color: #fff;
  border: 1px solid rgba(255,255,255,.14); border-radius: 99rem;
  padding: .55rem 1.15rem .55rem .6rem;
  box-shadow: 0 14px 34px rgba(10, 14, 30, .4);
}
.timer-ring {
  --v: 100;
  width: 44px; height: 44px; border-radius: 50%; position: relative; display: grid; place-items: center;
  background: conic-gradient(#7c7ce8 calc(var(--v) * 1%), rgba(255,255,255,.14) 0);
}
.timer-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #141a2e; }
.timer-ring .bi { position: relative; font-size: 1.05rem; color: #cfd6ee; }
.timer-value { font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.timer-float.low { animation: qp-pulse 1s infinite; border-color: rgba(248,113,113,.6); }
.timer-float.low .timer-ring { background: conic-gradient(#f87171 calc(var(--v) * 1%), rgba(255,255,255,.14) 0); }
@keyframes qp-pulse {
  0%, 100% { box-shadow: 0 14px 34px rgba(10,14,30,.4), 0 0 0 0 rgba(248,113,113,.35); }
  50%      { box-shadow: 0 14px 34px rgba(10,14,30,.4), 0 0 0 10px rgba(248,113,113,0); }
}

/* ------------------------------------------------------------
   Result report
   ------------------------------------------------------------ */
.verdict { border-radius: .9rem; border: 1px solid var(--qp-line); }
.verdict > .card-header {
  background: var(--qp-surface-tint); border-bottom: 1px solid var(--qp-line);
  border-radius: .9rem .9rem 0 0 !important; font-weight: 600;
}
.verdict.ok      { border-left: 4px solid var(--qp-high); }
.verdict.partial { border-left: 4px solid var(--qp-partial); }
.verdict.bad     { border-left: 4px solid var(--qp-low); }
.verdict.ok      > .card-header { color: var(--qp-high); }
.verdict.partial > .card-header { color: var(--qp-partial); }
.verdict.bad     > .card-header { color: var(--qp-low); }

.opt-result { border-radius: .55rem; padding: .5rem .8rem; border: 1px solid var(--qp-line); margin-bottom: .45rem; }
.opt-result.correct  { background: color-mix(in srgb, var(--qp-high) 10%, transparent); border-color: color-mix(in srgb, var(--qp-high) 40%, transparent); }
.opt-result.wrong    { background: color-mix(in srgb, var(--qp-low) 9%, transparent);  border-color: color-mix(in srgb, var(--qp-low) 40%, transparent); }
.opt-tag { font-size: .7rem; font-weight: 700; border-radius: 99rem; padding: .2em .6em; }
.opt-tag.ok   { background: color-mix(in srgb, var(--qp-high) 16%, transparent); color: var(--qp-high); }
.opt-tag.bad  { background: color-mix(in srgb, var(--qp-low) 14%, transparent);  color: var(--qp-low); }

.compare-box { border: 1px solid var(--qp-line); border-radius: .6rem; background: var(--qp-surface-tint); padding: .7rem .9rem; font-size: .92rem; }
.compare-label { font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .3rem; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  border-radius: .45rem; font-weight: 600; padding: .12rem .55rem; margin: 0 .1rem;
  font-size: .92em;
}
.chip.ok    { background: color-mix(in srgb, var(--qp-high) 15%, transparent); color: var(--qp-high); border: 1px solid color-mix(in srgb, var(--qp-high) 45%, transparent); }
.chip.bad   { background: color-mix(in srgb, var(--qp-low) 12%, transparent);  color: var(--qp-low);  border: 1px solid color-mix(in srgb, var(--qp-low) 45%, transparent); text-decoration: line-through; }
.chip.fix   { background: color-mix(in srgb, var(--qp-high) 15%, transparent); color: var(--qp-high); border: 1px solid color-mix(in srgb, var(--qp-high) 45%, transparent); } /* correction shown after a bad chip */
.chip.empty { background: var(--qp-surface-tint); color: var(--bs-secondary-color); border: 1px dashed var(--qp-line); }
.chip.answer { background: color-mix(in srgb, var(--qp-high) 15%, transparent); color: var(--qp-high); border: 1px solid color-mix(in srgb, var(--qp-high) 45%, transparent); } /* accepted answer in the editor rail */
.chip.choice { background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--qp-line); } /* a [select] distractor option */
.chip-info { border: 0; background: none; color: var(--bs-secondary-color); padding: 0 .15rem; font-size: .85em; }
.chip-info:hover { color: var(--qp-brand); }

/* ------------------------------------------------------------
   Static state pages
   ------------------------------------------------------------ */
.state-wrap { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 2.5rem 1rem; }
.state-card { max-width: 30rem; width: 100%; border-radius: 1.1rem; border: 1px solid var(--qp-line); box-shadow: 0 16px 44px rgba(30,35,80,.12); }
.state-icon {
  width: 66px; height: 66px; border-radius: 1.1rem; display: grid; place-items: center;
  font-size: 1.7rem; margin: 0 auto 1rem; background: var(--qp-brand-soft); color: var(--qp-brand);
}
.state-icon.warn { background: rgba(217,119,6,.12); color: var(--qp-partial); }
.state-icon.danger { background: rgba(220,38,38,.10); color: var(--qp-low); }

.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--bs-secondary-color); }
.empty-state .bi { font-size: 2.6rem; opacity: .45; display: block; margin-bottom: .8rem; }

/* ------------------------------------------------------------
   User panel sidebar
   ------------------------------------------------------------ */
.panel-nav { position: sticky; top: 1.2rem; }
.panel-nav .nav-link {
  color: var(--bs-body-color); border-radius: .65rem; padding: .6rem .9rem;
  display: flex; align-items: center; gap: .65rem; font-weight: 500;
  margin-bottom: .25rem; border: 1px solid transparent;
}
.panel-nav .nav-link .bi { font-size: 1.05rem; color: var(--bs-secondary-color); }
.panel-nav .nav-link:hover { background: var(--qp-surface-tint); text-decoration: none; }
.panel-nav .nav-link.active { background: var(--qp-grad); color: #fff; box-shadow: 0 6px 16px rgba(91,91,214,.3); }
.panel-nav .nav-link.active .bi { color: #fff; }
.panel-title { font-family: "Sora", sans-serif; font-weight: 700; }

/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */
.table-qp { --bs-table-border-color: var(--qp-line); }
.table-qp > thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .7px;
  color: var(--bs-secondary-color); border-bottom: 1px solid var(--qp-line);
  background: var(--qp-surface-tint);
}
.table-qp > tbody tr:last-child > td { border-bottom: 0; }
.row-actions .btn { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .55rem; }
.row-confirm { background: color-mix(in srgb, var(--qp-low) 8%, transparent); }

/* ------------------------------------------------------------
   BBC (fill-in) editor
   ------------------------------------------------------------ */
.editor-switch .btn { border-radius: 0; }
.editor-switch .btn:first-child { border-radius: .5rem 0 0 .5rem; }
.editor-switch .btn:last-child { border-radius: 0 .5rem .5rem 0; }
.editor-switch .btn.active { background: var(--qp-grad); color: #fff; border-color: transparent; }

.bbc-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem; background: var(--qp-surface-tint); border: 1px solid var(--qp-line); border-bottom: 0; border-radius: .6rem .6rem 0 0; }
.bbc-toolbar .btn { border: 1px solid var(--qp-line); background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: .5rem; }
.bbc-toolbar .btn:hover { border-color: var(--qp-brand); color: var(--qp-brand); }
.bbc-toolbar .sep { width: 1px; background: var(--qp-line); margin: .25rem .35rem; }

.bbc-canvas {
  border: 1px solid var(--qp-line); border-radius: 0 0 .6rem .6rem;
  min-height: 9.5rem; padding: 1rem 1.1rem; line-height: 2.1;
  background: var(--bs-body-bg);
}
.bbc-canvas:focus { outline: 2px solid var(--qp-brand); outline-offset: -2px; }
.bbc-canvas hr { border-style: solid; border-color: var(--qp-line); margin: .9rem 0; }
.gap-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: .5rem; font-weight: 600; font-size: .9em;
  padding: .18rem .65rem; margin: 0 .12rem; cursor: pointer;
  background: var(--qp-brand-soft); color: var(--qp-brand);
  border: 1px dashed color-mix(in srgb, var(--qp-brand) 55%, transparent);
}
.gap-chip.text-gap { border-style: solid; border-bottom-width: 2px; }
.gap-chip:hover { background: color-mix(in srgb, var(--qp-brand) 20%, transparent); }

.bbc-source {
  border: 1px solid var(--qp-line); border-radius: 0 0 .6rem .6rem;
  background: #141a2e; color: #dbe1f5; padding: 1rem 1.1rem;
  font-size: .88rem; line-height: 1.7; min-height: 9.5rem; white-space: pre-wrap;
}
.bbc-source .bb { color: #8be9fd; }

.bbc-issues { border: 1px solid color-mix(in srgb, var(--qp-low) 40%, transparent); background: color-mix(in srgb, var(--qp-low) 8%, transparent); border-radius: .6rem; }
.bbc-hintbox { border: 1px dashed var(--qp-line); background: var(--qp-surface-tint); border-radius: .6rem; font-size: .84rem; color: var(--bs-secondary-color); }

.qpreview-sentence { line-height: 2.1; }
.ans-list { font-size: .82rem; color: var(--bs-secondary-color); }
.ans-list .chip { font-size: .78em; }

/* ------------------------------------------------------------
   Modals / misc
   ------------------------------------------------------------ */
.modal-content { border-radius: 1rem; border: 1px solid var(--qp-line); }
.modal-static-demo { position: relative; z-index: 5; display: block !important; opacity: 1; }
.modal-static-demo .modal { position: relative; }
.demo-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--bs-secondary-color); margin-bottom: .8rem;
}
.demo-label .bi { color: var(--qp-brand); }

hr.section-divider { border: 0; border-top: 1px dashed var(--qp-line); margin: 2.2rem 0; }

.footer-min { color: var(--bs-secondary-color); font-size: .85rem; border-top: 1px solid var(--qp-line); }

/* hero (home) */
.hero-home {
  border-radius: 1.1rem; background: var(--qp-grad); color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 16px 40px rgba(80, 70, 180, .3);
}
.hero-home::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(255,255,255,.12);
}
.hero-home::before {
  content: ""; position: absolute; right: 90px; bottom: -110px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255,255,255,.08);
}
.hero-stat { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: .7rem; padding: .5rem .9rem; font-size: .85rem; backdrop-filter: blur(4px); }
.hero-stat b { font-family: "Sora", sans-serif; font-size: 1.1rem; }

/* login */
.login-shell { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 2.5rem 1rem; position: relative; overflow: hidden; }
.login-card { width: 100%; max-width: 26rem; border-radius: 1.1rem; border: 1px solid var(--qp-line); box-shadow: 0 18px 50px rgba(30,35,80,.16); }
.login-deco { position: absolute; color: color-mix(in srgb, var(--qp-brand) 12%, transparent); font-size: 9rem; transform: rotate(-12deg); }

/* category icon picker (owner panel: new / edit category) */
.qp-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; max-height: 14rem; overflow: auto; padding: .5rem; border: 1px solid var(--qp-line); border-radius: .5rem; }
.qp-icon-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem .25rem; border: 1px solid var(--qp-line); border-radius: .5rem; cursor: pointer; text-align: center; font-size: .7rem; line-height: 1.15; user-select: none; }
.qp-icon-tile i { font-size: 1.4rem; color: var(--bs-body-color); }
.qp-icon-tile input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.qp-icon-tile:hover { background: var(--qp-brand-soft); border-color: var(--qp-brand); }
.qp-icon-tile:has(input:checked) { background: var(--qp-brand-soft); border-color: var(--qp-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--qp-brand) 45%, transparent); }
.qp-icon-tile:has(input:focus-visible) { outline: 2px solid var(--qp-brand); outline-offset: 1px; }