/* ============================================================================
   QUICK WITH US — UNIVERSAL THEME
   ----------------------------------------------------------------------------
   Extracted from PROTOTYPE_Unit01_Galaxy.html so the platform and the books
   speak the same language.

   Load ONCE, after Tailwind, in layouts/app.blade.php:
       <link rel="stylesheet" href="{{ asset('css/theme.css') }}?v=1">
   Bump ?v= when you edit this file, to bust the browser cache.

   Structure
     1 · Tokens — dark (default)
     2 · Tokens — light
     3 · Role identity (student / teacher / admin)
     4 · Sky — stars, embers, background
     5 · Layout — shell, rail, panels
     6 · Hero + station crest
     7 · Nav — glass strip, tabs, theme button
     8 · Components — stats, rows, pills, tags, rings, inputs
     9 · Forms (Breeze partial overrides)
    10 · Motion + accessibility
   ========================================================================== */


/* ============================================================================
   1 · TOKENS — DARK (default)
   ========================================================================== */
:root,
[data-theme="dark"]{
  --serif:"Fraunces", Georgia, "Times New Roman", Cambria, serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* surfaces */
  --bg:#0A0D12;
  --panel:#161C27;
  --panel-2:#11161F;
  --line:#232C3A;
  --hair:rgba(255,255,255,.06);
  --paper:#EAF0F7;
  --dim:#6B7789;
  --dim2:#94A2B5;

  --surf-1:rgba(255,255,255,.04);
  --surf-2:rgba(255,255,255,.055);
  --well:rgba(10,13,18,.55);

  /* ink on bright accents */
  --ink-on:#0A0D12;
  --on-warm:#241804;

  /* accents */
  --yellow:#FBC02D;
  --ember:#FF8A3D;
  --teal:#00BFA5;
  --teal-light:#4DD8C4;
  --pink:#FF4D8D;
  --green:#5BD16A;
  --purple:#B388FF;
  --red:#FF6B6B;
  --amber:#FBC02D;
  --mark:#FBC02D;

  /* tinted wells */
  --yellow-soft:#2C2007;
  --teal-soft:#072723;
  --pink-soft:#2A1020;
  --green-soft:#0D2916;
  --purple-soft:#1B1430;
  --red-soft:#2B1014;

  /* depth + glow */
  --shadow-card:0 18px 44px rgba(0,0,0,.45);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.03);
  --glow-teal:0 0 26px rgba(0,191,165,.30);
  --glow-teal-soft:0 0 22px rgba(0,191,165,.14);
  --glow-ember:0 0 20px rgba(255,138,61,.30);
  --glow-green:0 0 22px rgba(91,209,106,.14);
  --glow-pink:0 0 16px rgba(255,77,141,.35);

  /* the sky */
  --sky:
    radial-gradient(90% 55% at 50% 108%, rgba(255,138,61,.20) 0%, transparent 62%),
    radial-gradient(70% 45% at 50% -6%,  rgba(0,191,165,.13) 0%, transparent 70%);
  --stars-op:.5;
  --ember-op:1;
  --ember-dot:#FF8A3D;
  --ember-dot2:#FBC02D;
  --ember-shadow:none;

  /* the hero */
  --hero-bg:
    radial-gradient(120% 100% at 50% -20%, rgba(0,191,165,.16) 0%, transparent 58%),
    radial-gradient(90% 70% at 50% 118%,  rgba(255,138,61,.26) 0%, transparent 66%),
    linear-gradient(180deg,#0C1017 0%, #0A0D12 100%);
  --hero-edge:rgba(255,138,61,.14);

  /* the station crest */
  --crest-bg:linear-gradient(160deg,#3A2708,#241804);
  --crest-border:#FBC02D;
  --crest-ink:#FBC02D;
  --crest-glow:0 0 0 1px rgba(251,192,45,.25), 0 0 34px rgba(255,138,61,.45);
  --crest-cap:rgba(255,138,61,.80);

  /* glass bars */
  --bar-glass:rgba(10,13,18,.74);

  /* selected states */
  --sel-bg:linear-gradient(160deg,#0F3A34,#0B2B27);
  --sel-ink:#4DD8C4;

  /* the trail rail */
  --rail:linear-gradient(180deg, rgba(0,191,165,.55), rgba(255,138,61,.65) 55%, rgba(251,192,45,.30));
  --rail-op:.55;

  --locked-bg:#1E2632;
  --locked-ink:#4E5A6C;
}


/* ============================================================================
   2 · TOKENS — LIGHT (the sun button)
   Warm paper, never white — the dark-mode brights die on white.
   ========================================================================== */
[data-theme="light"]{
  --bg:#F0E7D5;
  --panel:#FAF5EA;
  --panel-2:#FFFDF7;
  --line:#DACEB4;
  --hair:rgba(42,38,32,.10);
  --paper:#2A2620;
  --dim:#8B8474;
  --dim2:#59544A;

  --surf-1:rgba(42,38,32,.045);
  --surf-2:#FFFFFF;
  --well:#FFFFFF;

  --ink-on:#FFFFFF;
  --on-warm:#2A1608;

  --yellow:#FBC02D;
  --ember:#D9520A;
  --teal:#00897B;
  --teal-light:#4DB6AC;
  --pink:#E91E63;
  --green:#43A047;
  --purple:#6A1B9A;
  --red:#E53935;
  --amber:#FBC02D;
  --mark:#B8862B;

  --yellow-soft:#FFF4C2;
  --teal-soft:#E0F2F1;
  --pink-soft:#FCE4EC;
  --green-soft:#DCEDC8;
  --purple-soft:#EDE7F6;
  --red-soft:#FFEBEE;

  --shadow-card:0 10px 26px rgba(110,85,30,.10);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.75);
  --glow-teal:0 6px 18px rgba(0,137,123,.20);
  --glow-teal-soft:0 4px 14px rgba(0,137,123,.12);
  --glow-ember:0 6px 18px rgba(217,82,10,.18);
  --glow-green:0 4px 14px rgba(67,160,71,.14);
  --glow-pink:0 4px 14px rgba(233,30,99,.20);

  --sky:
    radial-gradient(90% 55% at 50% 108%, rgba(255,138,61,.20) 0%, transparent 62%),
    radial-gradient(70% 45% at 50% -6%,  rgba(0,137,123,.10) 0%, transparent 70%);
  --stars-op:0;                       /* no stars in daylight */
  --ember-op:.92;
  --ember-dot:#D9520A;
  --ember-dot2:#C07C00;
  --ember-shadow:0 0 5px rgba(217,82,10,.40);

  --hero-bg:
    radial-gradient(120% 100% at 50% -20%, rgba(0,137,123,.10) 0%, transparent 58%),
    radial-gradient(90% 70% at 50% 118%,  rgba(217,82,10,.16) 0%, transparent 66%),
    linear-gradient(180deg,#FAF5EA 0%, #F0E7D5 100%);
  --hero-edge:rgba(190,130,30,.35);

  --crest-bg:linear-gradient(160deg,#FAE7BE,#F4D795);
  --crest-border:#CE8912;
  --crest-ink:#7C4B05;
  --crest-glow:0 0 0 1px rgba(206,137,18,.28), 0 10px 26px rgba(255,138,61,.30);
  --crest-cap:#B4600A;

  --bar-glass:rgba(240,231,213,.84);

  --sel-bg:linear-gradient(160deg,#DCEFE9,#C6E4DB);
  --sel-ink:#00594E;

  --rail:linear-gradient(180deg, rgba(0,137,123,.55), rgba(217,82,10,.60) 55%, rgba(190,130,30,.35));
  --rail-op:.65;

  --locked-bg:#E6DFCE;
  --locked-ink:#A79E8B;
}


/* ============================================================================
   3 · ROLE IDENTITY
   The brand owns chrome only — rail, crest, tags, active tab. Everything
   else stays constant so the three dashboards feel like one product.
   Put data-role on <body> or the page wrapper.
   ========================================================================== */
[data-role="student"]{
  --brand:#FBC02D; --brand-2:#FF8A3D; --brand-ink:var(--on-warm);
  --brand-glow:0 0 20px rgba(255,138,61,.30);
  --rail:linear-gradient(180deg, rgba(0,191,165,.45), rgba(255,138,61,.65) 55%, rgba(251,192,45,.30));
}
[data-role="teacher"]{
  --brand:#00BFA5; --brand-2:#00897B; --brand-ink:#04241F;
  --brand-glow:0 0 26px rgba(0,191,165,.30);
  --rail:linear-gradient(180deg, rgba(251,192,45,.35), rgba(0,191,165,.65) 55%, rgba(77,216,196,.30));
  --crest-bg:linear-gradient(160deg,#0F3A34,#0B2B27);
  --crest-border:#00BFA5; --crest-ink:#4DD8C4;
  --crest-glow:0 0 0 1px rgba(0,191,165,.25), 0 0 34px rgba(0,191,165,.40);
  --crest-cap:rgba(77,216,196,.80);
}

[data-role="staff"]{
  --brand:#B388FF; --brand-2:#6C5CE7; --brand-ink:#0A0D12;
  --brand-glow:0 0 26px rgba(179,136,255,.32);
  --rail:linear-gradient(180deg, rgba(0,191,165,.35), rgba(179,136,255,.65) 55%, rgba(108,92,231,.32));
  --crest-bg:linear-gradient(160deg,#241B3E,#1B1430);
  --crest-border:#B388FF; --crest-ink:#CBB2FF;
  --crest-glow:0 0 0 1px rgba(179,136,255,.28), 0 0 34px rgba(179,136,255,.40);
  --crest-cap:rgba(203,178,255,.80);
}

[data-role="manager"]{
  --brand:#FF4D8D; --brand-2:#C2185B; --brand-ink:#FFFFFF;
  --brand-glow:0 0 26px rgba(255,77,141,.35);
  --rail:linear-gradient(180deg, rgba(251,192,45,.35), rgba(255,77,141,.65) 55%, rgba(194,24,91,.32));
  --crest-bg:linear-gradient(160deg,#3A1023,#2A1020);
  --crest-border:#FF4D8D; --crest-ink:#FF87B0;
  --crest-glow:0 0 0 1px rgba(255,77,141,.30), 0 0 34px rgba(255,77,141,.42);
  --crest-cap:rgba(255,135,176,.82);
}

[data-theme="light"][data-role="staff"],
[data-theme="light"] [data-role="staff"]{ --brand:#6A1B9A; --brand-2:#4A0F72; --brand-ink:#FFFFFF; }
[data-theme="light"][data-role="manager"],
[data-theme="light"] [data-role="manager"]{ --brand:#E91E63; --brand-2:#AD1457; --brand-ink:#FFFFFF; }

/* ============================================================================
   4 · THE SKY
   ========================================================================== */
html, body{ background:var(--bg); }
body{
  color:var(--paper);
  background:var(--sky), var(--bg);
  background-attachment:fixed;
  font-family:var(--sans);
  transition:background-color .45s ease, color .45s ease;
}

/* static star field — no JS, fades out in daylight */
.qw-stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--stars-op); transition:opacity .45s ease;
  background-image:
    radial-gradient(1.1px 1.1px at 24px 38px,  rgba(255,255,255,.60), transparent),
    radial-gradient(1px 1px    at 148px 96px,  rgba(255,255,255,.38), transparent),
    radial-gradient(1.4px 1.4px at 76px 190px, rgba(190,220,255,.42), transparent),
    radial-gradient(1px 1px    at 232px 148px, rgba(255,225,190,.34), transparent),
    radial-gradient(1px 1px    at 300px 44px,  rgba(255,255,255,.28), transparent);
  background-size:340px 260px, 300px 300px, 420px 380px, 360px 320px, 480px 300px;
}

/* rising embers */
.qw-embers{
  position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;
  opacity:var(--ember-op); transition:opacity .45s ease;
}
.qw-ember{
  position:absolute; bottom:-18px; width:3px; height:3px; border-radius:50%;
  background:var(--ember-dot); box-shadow:var(--ember-shadow);
  opacity:0; filter:blur(.4px); animation:qwRise linear infinite;
}
.qw-ember.alt{ background:var(--ember-dot2); }
@keyframes qwRise{
  0%  { transform:translateY(0) translateX(0) scale(.6); opacity:0; }
  12% { opacity:.75; }
  70% { opacity:.5; }
  100%{ transform:translateY(var(--rise,-104vh)) translateX(var(--dx,0)) scale(1.1); opacity:0; }
}

/* A LOCAL ember layer — for boxes with their own opaque background (the hero),
   which would otherwise hide the fixed sky embers behind them.
   The parent must be position:relative; this layer clips its own overflow. */
.qw-embers.qw-local{
  position:absolute; inset:0; z-index:1;
  /* NOTE: translateY() percentages resolve against the ember itself (3px),
     not the container — so --rise must be an absolute length. */
  --rise:-460px;
}

/* everything interactive sits above the sky — set z-index only, never position */
.qw-shell, .qw-hero{ position:relative; }
.qw-hero, .qw-shell{ z-index:2; }

/* the page-title strip's glass must never sit above the sidebar —
   a dropdown from the sidebar's user card has to clear it. */
.qw-titlebar{ z-index:5; }

/* ============================================================================
   5 · LAYOUT — shell, rail, panels
   ========================================================================== */
.qw-shell{
  max-width:1040px; margin:0 auto;
  padding:22px 16px 64px;
}
@media(min-width:640px){ .qw-shell{ padding:26px 20px 72px; } }

/* the rail lives in the gutter and never moves content — desktop only */
@media(min-width:860px){
  .qw-shell.qw-railed{ padding-left:56px; }
  .qw-shell.qw-railed::before{
    content:""; position:absolute; left:26px; top:14px; bottom:14px;
    width:2px; border-radius:2px;
    background:var(--rail); opacity:var(--rail-op);
  }
  .qw-shell.qw-railed::after{
    content:""; position:absolute; left:20px; top:14px; bottom:14px; width:14px;
    background:var(--rail); filter:blur(7px); opacity:.4; pointer-events:none;
  }
  /* station dot beside each panel */
  .qw-shell.qw-railed > .qw-panel::after,
  .qw-shell.qw-railed > .qw-section > .qw-panel:first-child::after{
    content:""; position:absolute; left:-36px; top:28px;
    width:11px; height:11px; border-radius:50%;
    background:var(--brand,var(--ember)); border:2px solid var(--bg);
    box-shadow:0 0 16px var(--brand,var(--ember)); z-index:3;
  }
}

/* the panel — a card lit along its top edge, the line burning past it */
.qw-panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-card), var(--inset-top);
  padding:20px 18px;
  margin-bottom:18px;
  transition:background-color .45s ease, border-color .45s ease;
}
@media(min-width:640px){ .qw-panel{ padding:24px 24px; } }

/* inset from the corners so the hairline never crosses the radius */
.qw-panel::before{
  content:""; position:absolute; top:0; left:18px; right:18px; height:1px;
  background:linear-gradient(90deg,transparent, var(--yellow), var(--ember), var(--teal), transparent);
  opacity:.85;
}
.qw-panel.qw-flush{ padding:0; overflow:hidden; }
.qw-panel.qw-flush::before{ left:0; right:0; }

/* section heading above a panel */
.qw-h3{
  font-family:var(--sans);
  font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim2); margin:26px 0 12px;
}
.qw-shell > .qw-h3:first-child{ margin-top:0; }

h1, h2, .qw-serif{ font-family:var(--serif); color:var(--paper); }
.qw-lead{ color:var(--dim2); }
.qw-lead b{ color:var(--paper); }


/* ============================================================================
   6 · HERO + STATION CREST
   ========================================================================== */
.qw-hero{
  background:var(--hero-bg);
  color:var(--paper);
  padding:32px 20px 40px;
  border-bottom:1px solid var(--hero-edge);
  text-align:center;
  transition:background .45s ease, border-color .45s ease;
}
@media(min-width:640px){ .qw-hero{ padding:40px 22px 48px; } }

/* the horizon the trail burns along */
.qw-hero::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent, var(--yellow) 30%, var(--ember) 50%, var(--yellow) 70%, transparent);
}

.qw-crest{ display:flex; flex-direction:column; align-items:center; gap:9px; margin:0 0 16px; }
.qw-crest-dot{
  position:relative; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:19px; font-weight:700;
  color:var(--crest-ink);
  background:var(--crest-bg);
  border:1.5px solid var(--crest-border);
  box-shadow:var(--crest-glow);
}
.qw-crest-dot::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--crest-border);
  animation:qwPing 2.4s cubic-bezier(0,.55,.45,1) infinite; pointer-events:none;
}
@keyframes qwPing{ 0%{transform:scale(1); opacity:.65;} 100%{transform:scale(1.9); opacity:0;} }
.qw-crest-cap{
  font-size:9.5px; font-weight:800; letter-spacing:3px; text-transform:uppercase;
  color:var(--crest-cap);
}

.qw-hero h1{
  font-family:var(--serif); font-size:clamp(26px,5vw,38px); font-weight:700;
  margin:0 0 8px; line-height:1.1;
}
[data-theme="dark"] .qw-hero h1{ text-shadow:0 0 30px rgba(255,138,61,.18); }
.qw-hero .qw-tagline{ color:var(--dim2); margin:0; font-size:15px; }

/* hero content sits above its own ember layer */
.qw-hero > *{ position:relative; z-index:2; }
.qw-hero > .qw-embers{ z-index:1; }
.qw-hero .qw-tagline b{ color:var(--paper); }

/* the crosshair divider */
.qw-divider{
  height:2px; width:56px; margin:16px auto 0; border-radius:2px;
  background:linear-gradient(90deg,var(--yellow),var(--ember));
}


/* ============================================================================
   7 · NAV — left sidebar (desktop), slide-in drawer (mobile)
   ========================================================================== */
.qw-titlebar{
  position:relative; z-index:5;
  background:var(--bar-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hair);
  transition:background-color .45s ease, border-color .45s ease;
}

/* the sidebar — fixed left column on desktop, a slide-in drawer on mobile */
.qw-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:248px; z-index:10;
  display:flex; flex-direction:column; overflow:visible;
  background:var(--bar-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-right:1px solid var(--hair);
  transform:translateX(-100%);
  transition:background-color .45s ease, border-color .45s ease, transform .32s cubic-bezier(.2,.8,.3,1);
}
.qw-sidebar.open{ transform:none; }
@media(min-width:900px){ .qw-sidebar{ transform:none; } }

.qw-sidebar-brand{
  display:flex; align-items:center; gap:9px; flex:0 0 auto;
  padding:18px 18px 14px; text-decoration:none;
}
.qw-sidebar-brand .dot{
  width:11px; height:11px; border-radius:50%; flex:0 0 auto;
  background:var(--brand,var(--yellow)); box-shadow:0 0 12px var(--brand,var(--yellow));
}
.qw-sidebar-brand span{ color:var(--paper); font-weight:800; letter-spacing:.01em; }

.qw-navlist{ display:flex; flex-direction:column; gap:2px; padding:6px 12px; flex:1 1 auto; min-height:0; overflow-y:auto; }

.qw-navitem{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px;
  color:var(--dim2); font:700 13.5px/1.2 var(--sans); text-decoration:none;
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:background .22s ease, color .22s ease, box-shadow .22s ease;
}
.qw-navitem svg{ width:19px; height:19px; flex:0 0 auto; }
.qw-navitem:hover{ background:var(--surf-1); color:var(--paper); }
.qw-navitem[aria-current="true"]{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:var(--brand-ink); box-shadow:var(--brand-glow);
}

/* a couple of secondary links under a parent tab — pages that exist but
   don't deserve their own top-level row (order history, a settings page) */
.qw-subnav{ display:none; flex-direction:column; padding:1px 0 7px 43px; gap:1px; }
.qw-subnav.open{ display:flex; }
.qw-subitem{
  display:block; padding:6px 10px; border-radius:8px;
  color:var(--dim); font:600 12px/1.2 var(--sans); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.qw-subitem:hover{ background:var(--surf-1); color:var(--paper); }
.qw-subitem[aria-current="true"]{
  background:var(--surf-1); color:var(--paper); font-weight:800;
  box-shadow:inset 2px 0 0 var(--brand);
}

/* non-interactive section header inside a long sub-nav (e.g. "Leads",
   "Reservations" grouping the Student tab's filters) */
.qw-subgroup-label{
  padding:8px 10px 2px; font:800 10px/1.2 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--dim2);
}
.qw-subgroup-label:first-child{ padding-top:2px; }

/* theme toggle + user card, pinned to the sidebar's bottom */
.qw-sidebar-bottom{ margin-top:auto; padding:12px; display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }

.qw-sidebar-user{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
  cursor:pointer; transition:background .22s ease; width:100%; border:0; background:transparent; text-align:left;
}
.qw-sidebar-user:hover{ background:var(--surf-1); }
.qw-sidebar-user .av{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:var(--brand-ink);
  font:800 14px/1 var(--sans);
}
.qw-sidebar-user .who{ min-width:0; }
.qw-sidebar-user .name{
  color:var(--paper); font-weight:800; font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qw-sidebar-user .role{ color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

/* the slim mobile top bar that opens the drawer */
.qw-mobile-topbar{
  display:flex; align-items:center; gap:12px; height:56px; padding:0 16px;
  position:relative; z-index:9;
  background:var(--bar-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hair);
}
@media(min-width:900px){ .qw-mobile-topbar{ display:none; } }

.qw-hamburger{
  width:34px; height:34px; flex:0 0 auto; padding:0; border-radius:10px;
  border:1px solid var(--line); background:var(--surf-2); color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.qw-hamburger svg{ width:18px; height:18px; }

.qw-sidebar-backdrop{
  display:none; position:fixed; inset:0; z-index:9; background:rgba(0,0,0,.5);
}
.qw-sidebar-backdrop.open{ display:block; }
@media(min-width:900px){ .qw-sidebar-backdrop{ display:none !important; } }

/* content sits beside the sidebar once it's permanently visible */
@media(min-width:900px){ .qw-content{ margin-left:248px; } }

/* sun / moon */
.qw-themebtn{
  flex:0 0 auto; width:34px; height:34px; padding:0;
  border-radius:50%; border:1px solid var(--line); background:var(--surf-2);
  color:var(--dim2); cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s cubic-bezier(.2,.8,.3,1.4), color .3s, border-color .3s, background .3s;
}
.qw-themebtn:hover{ color:var(--paper); border-color:var(--dim); }
.qw-themebtn:active{ transform:scale(.9) rotate(28deg); }
.qw-themebtn .moon{ display:none; }
[data-theme="light"] .qw-themebtn .sun{ display:none; }
[data-theme="light"] .qw-themebtn .moon{ display:block; }


/* ============================================================================
   8 · COMPONENTS
   ========================================================================== */

/* --- stat tiles --- */
.qw-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:560px){ .qw-stats{ grid-template-columns:repeat(3,1fr); gap:12px; } }
@media(min-width:820px){ .qw-stats.qw-4{ grid-template-columns:repeat(4,1fr); } }

.qw-stat{
  background:var(--surf-1); border:1px solid var(--hair);
  border-radius:14px; padding:14px 16px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}
.qw-stat:hover{
  transform:translateY(-4px);
  border-color:var(--brand); box-shadow:var(--brand-glow);
}
.qw-stat .k{
  font:800 10.5px/1 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}
.qw-stat .v{ font-size:26px; font-weight:800; color:var(--paper); margin-top:8px; line-height:1; }
.qw-stat .v small{ font-size:13px; color:var(--dim2); font-weight:700; }

/* --- list rows --- */
.qw-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--hair);
  transition:background .22s ease;
}
@media(min-width:640px){ .qw-row{ padding:16px 22px; } }
.qw-row:last-child{ border-bottom:0; }
.qw-row:hover{ background:var(--surf-1); }
.qw-row .qw-t{ font-weight:800; color:var(--paper); font-size:15px; }
.qw-row .qw-s{ font-size:13px; color:var(--dim2); margin-top:3px; }
.qw-row .qw-meta{ min-width:0; flex:1 1 220px; }

/* --- a stacked (non-flex) card body inside a flush panel list --- */
.qw-cardrow{ padding:16px 18px; border-bottom:1px solid var(--hair); }
.qw-cardrow:last-child{ border-bottom:0; }

/* --- an indented accent sub-section within a card; override the accent
   with --qw-inset-c, e.g. style="--qw-inset-c:var(--teal)" --- */
.qw-inset{
  margin-top:13px; padding:12px 14px;
  border-left:2px solid var(--qw-inset-c, var(--brand));
}

/* --- the small uppercase label above an inset sub-section --- */
.qw-subhead{
  font:800 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:9px;
}

/* --- a single-line item row: label + action, no card border of its own --- */
.qw-miniRow{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }

.qw-empty{ padding:30px 20px; text-align:center; color:var(--dim2); font-size:14.5px; }

/* --- pills / buttons --- */
.qw-pill{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:9px 18px;
  font:800 13px/1 var(--sans); border:0; cursor:pointer; text-decoration:none;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.qw-pill:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.qw-pill-brand{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:var(--brand-ink); box-shadow:var(--brand-glow); }
.qw-pill-warm { background:linear-gradient(90deg,var(--yellow),var(--ember));  color:var(--on-warm);  box-shadow:var(--glow-ember); }
.qw-pill-teal { background:linear-gradient(90deg,var(--teal),var(--teal-light)); color:var(--ink-on); box-shadow:var(--glow-teal); }
.qw-pill-ghost{ background:var(--surf-1); border:1px solid var(--line); color:var(--dim2); }
.qw-pill-ghost:hover{ color:var(--paper); border-color:var(--dim); }
.qw-pill-off  { color:var(--dim); font-weight:700; font-size:13.5px; }

.qw-dot-live{
  width:7px; height:7px; border-radius:50%; background:currentColor;
  animation:qwBlip 1.4s ease-in-out infinite;
}
@keyframes qwBlip{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.72)} }

/* --- tags --- */
.qw-tag{
  display:inline-block; white-space:nowrap;
  font:800 10.5px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  background:var(--surf-2); color:var(--dim2); border:1px solid var(--line);
}
.qw-tag-brand{ background:color-mix(in srgb, var(--brand) 16%, transparent); color:var(--brand); border-color:color-mix(in srgb, var(--brand) 40%, transparent); }
.qw-tag-teal { background:var(--teal-soft);  color:var(--teal);  border-color:var(--teal); }
.qw-tag-green{ background:var(--green-soft); color:var(--green); border-color:var(--green); }
.qw-tag-red  { background:var(--red-soft);   color:var(--red);   border-color:var(--red); }

/* --- progress ring --- */
.qw-ring{ position:relative; flex:0 0 78px; width:78px; height:78px; }
.qw-ring svg{ transform:rotate(-90deg); display:block; }
.qw-ring .bg{ fill:none; stroke:var(--hair); stroke-width:8; }
.qw-ring .fg{
  fill:none; stroke:var(--brand); stroke-width:8; stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--brand));
  stroke-dasharray:var(--c); stroke-dashoffset:var(--c);
  animation:qwRing 1.3s .25s cubic-bezier(.3,.9,.3,1) forwards;
}
@keyframes qwRing{ to{ stroke-dashoffset:var(--off); } }
.qw-ring .pct{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:16px; font-weight:800; color:var(--paper);
}

/* --- progress bar --- */
.qw-bar{ height:8px; border-radius:999px; background:var(--hair); overflow:hidden; }
.qw-bar > i{
  display:block; height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  animation:qwGrow 1.1s .2s cubic-bezier(.3,.9,.3,1) forwards;
}
@keyframes qwGrow{ to{ width:var(--w,0%); } }

/* --- link cards (the admin "jump to" tiles) --- */
.qw-cards{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:640px){ .qw-cards{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .qw-cards.qw-3{ grid-template-columns:repeat(3,1fr); } }

.qw-card{
  position:relative; overflow:hidden; display:block; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:20px; box-shadow:var(--shadow-card), var(--inset-top);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s;
}
.qw-card:hover{ transform:translateY(-5px); border-color:var(--brand); }
.qw-card::after{
  content:""; position:absolute; left:-40px; bottom:-70px;
  width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, var(--glow-c,var(--brand)), transparent 70%);
  opacity:.16; transition:opacity .28s; pointer-events:none;
}
.qw-card:hover::after{ opacity:.38; }
.qw-card > *{ position:relative; z-index:1; }
.qw-card .ic{ font-size:22px; }
.qw-card .kick{
  font:800 10.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--glow-c,var(--brand));
}
.qw-card .lt{ font-weight:800; color:var(--paper); margin-top:10px; font-size:17px; }
.qw-card .ls{ font-size:13px; color:var(--dim2); margin-top:4px; }

/* a card that holds a ring on the left */
.qw-card.qw-split{ display:flex; gap:18px; align-items:center; }


/* ============================================================================
   9 · FORMS — inputs, and Breeze partial overrides
   ========================================================================== */
.qw-input, .qw-panel input[type="text"], .qw-panel input[type="email"],
.qw-panel input[type="password"], .qw-panel input[type="time"],
.qw-panel input[type="number"], .qw-panel input[type="date"],
.qw-panel select, .qw-panel textarea{
  background:var(--well);
  border:1px solid var(--line);
  color:var(--paper);
  border-radius:10px; padding:9px 12px;
  font:500 14px/1.4 var(--sans);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.qw-input:focus, .qw-panel input:focus, .qw-panel select:focus, .qw-panel textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand), var(--brand-glow);
}
.qw-panel select option{ background:var(--panel); color:var(--paper); }
.qw-panel ::placeholder{ color:var(--dim); }

.qw-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.qw-form > input, .qw-form > select{ min-width:0; flex:1 1 160px; }

/* Breeze's profile partials render Tailwind greys — lift them onto the panel */
.qw-panel h2{ color:var(--paper) !important; font-family:var(--sans); font-weight:800; font-size:17px; }
.qw-panel p { color:var(--dim2) !important; }
.qw-panel label{ color:var(--dim2) !important; }
.qw-panel .text-gray-900, .qw-panel .dark\:text-gray-100{ color:var(--paper) !important; }
.qw-panel .text-gray-600, .qw-panel .text-gray-500,
.qw-panel .dark\:text-gray-400{ color:var(--dim2) !important; }

/* alerts */
.qw-alert{ border-radius:12px; padding:12px 16px; font-size:14px; margin-bottom:16px; border:1px solid; }
.qw-alert-ok { background:var(--green-soft); color:var(--green); border-color:var(--green); }
.qw-alert-bad{ background:var(--red-soft);   color:var(--red);   border-color:var(--red); }

:focus-visible{ outline:2px solid var(--brand,var(--teal)); outline-offset:3px; border-radius:6px; }


/* ============================================================================
   10 · MOTION + ACCESSIBILITY
   ========================================================================== */
.qw-panel-tab{ display:none; animation:qwIn .45s cubic-bezier(.2,.7,.3,1); }
.qw-panel-tab.on{ display:block; }
@keyframes qwIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.qw-flame{ display:inline-block; animation:qwFlick 1.6s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes qwFlick{ 0%,100%{transform:scale(1) rotate(-2deg)} 50%{transform:scale(1.14) rotate(3deg)} }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .qw-ring .fg{ stroke-dashoffset:var(--off) !important; }
  .qw-bar > i{ width:var(--w,0%) !important; }
  .qw-embers{ display:none; }
}