/* ============================================================
   CYBER COMMAND — CONTROL CENTER
   ============================================================ */

:root{
  --red:        #ff1a2e;
  --red-soft:   #ff5a68;
  --red-deep:   #8b0d18;
  --red-dim:    rgba(255,26,46,.16);
  --bg:         #000000;
  --bg-2:       #050406;
  --panel:      rgba(10,7,9,.72);
  --panel-2:    rgba(15,10,12,.62);
  --line:       rgba(255,26,46,.16);
  --line-soft:  rgba(255,255,255,.06);
  --text:       #e9e9ee;
  --muted:      #8b8b95;
  --muted-2:    #6a6a74;
  --green:      #2fd06a;
  --amber:      #ffa62e;
  --head:       'Orbitron', 'Rajdhani', sans-serif;
  --body:       'Rajdhani', 'Segoe UI', sans-serif;
  --rail-w:     54px;
  /* every vertical rhythm below scales with viewport height so the
     whole console always fits on one screen — never scrolls */
  --gap:        clamp(7px, 1.1vh, 13px);
  --pad-y:      clamp(8px, 1.15vh, 13px);
  /* only .status-list and .info-list use this, both in the right column —
     it's the cheapest place to buy back the height the bigger rings cost */
  --row-gap:    clamp(6px, 1vh, 12px);

  /* The one line that makes every browser-drawn control dark: the option
     list a <select> opens, date pickers, scrollbars. That list is painted by
     the browser rather than the page, so styling the <select> itself leaves
     it white — which is why the "option { background }" rules dotted around
     this project were never quite enough on their own. Declared once here
     rather than per component, because it applies to the whole document. */
  color-scheme: dark;
}

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

/* Belt and braces for the option list. color-scheme above is what actually
   makes the popup dark in current Chrome; these keep it dark in browsers that
   honour explicit option colours instead, and are harmless where they do not.
   App-wide, so a select added later inherits it without being remembered. */
select option,
select optgroup{
  background-color:#120b0e;
  color:var(--text);
}

html,body{ height:100%; overflow-x:hidden; }

body{
  background: #090303;
  color: var(--text);
  font-family: var(--body);
  font-size:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}

svg{ display:block; }

/* ---------- autofilled fields ----------
   Chrome paints a saved username/password with its own near-white background
   and dark text, and a plain background-color cannot override it. The inset
   shadow is what actually covers that layer, -webkit-text-fill-color restores
   our text colour, and the absurd transition delay stops Chrome fading its
   own colour back in a moment later. Applied site-wide so every form behaves
   the same, not just sign-in.

   Two things about the way this is written, both deliberate:

   1. !important on the shadow. The mask lives in a single property that
      every decorative box-shadow on the site also wants — the standing glow
      on the sign-in, register and profile fields is a box-shadow, and each
      of those selectors carries more classes than "input:-webkit-autofill"
      does, so on specificity alone they replace the mask and Chrome's white
      background comes straight back. Losing the glow for a moment is
      cosmetic; losing the mask makes the field unreadable, so the mask has
      to win outright.
   2. The glow is folded in here. Because the mask has to own the property,
      the resting glow is re-declared alongside it, and an autofilled field
      keeps looking like every other filled field rather than going flat. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px #120b0e inset,
                      0 3px 16px -5px rgba(255,26,46,.28) !important;
          box-shadow: 0 0 0 1000px #120b0e inset,
                      0 3px 16px -5px rgba(255,26,46,.28) !important;
  border-color: rgba(255,26,46,.55) !important;
  caret-color: var(--red);
  transition: background-color 100000s ease-in-out 0s;
}
/* focused, the field normally takes a red tint — keep that when autofilled */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px #1b0c11 inset,
                      0 0 22px -4px rgba(255,26,46,.55) !important;
          box-shadow: 0 0 0 1000px #1b0c11 inset,
                      0 0 22px -4px rgba(255,26,46,.55) !important;
  border-color: rgba(255,26,46,.6) !important;
}
/* Firefox and the standardised selector */
input:autofill, textarea:autofill, select:autofill{
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px #120b0e inset,
              0 3px 16px -5px rgba(255,26,46,.28) !important;
  border-color: rgba(255,26,46,.55) !important;
  caret-color: var(--red);
  filter: none;
}

/* ---------- borrowed-session banner ----------
   Shown by partials/header.php whenever a trainer or admin is viewing a
   student's account. Amber on purpose: the student app is red throughout, so
   a bar in a colour that appears nowhere else cannot be mistaken for part of
   the normal interface. Sticky, because it has to stay true further down a
   long page, and it pushes the layout rather than floating over it so nothing
   is hidden behind it. */
.imp-bar{
  position:sticky; top:0; z-index:400;
  display:flex; align-items:center; gap:13px;
  padding:9px 18px;
  background:linear-gradient(90deg, #3a2708, #533708);
  border-bottom:1px solid rgba(255,166,46,.55);
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.imp-ic{
  flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:7px;
  background:rgba(255,166,46,.18); border:1px solid rgba(255,166,46,.5);
}
.imp-ic svg{ width:15px; height:15px; fill:none; stroke:var(--amber); stroke-width:1.9;
             stroke-linecap:round; stroke-linejoin:round; }
.imp-text{ flex:1; min-width:0; font-size:12.5px; color:#ffd79a; }
.imp-text b{ color:#fff; font-weight:700; }
.imp-text i{ display:block; font-style:normal; font-size:11px; color:#c9a668; margin-top:1px; }
.imp-out{
  flex:0 0 auto; padding:7px 14px; border-radius:8px; cursor:pointer; transition:.15s;
  background:var(--amber); border:1px solid var(--amber);
  font-family:var(--body); font-size:12.5px; font-weight:700; color:#241703;
}
.imp-out:hover{ filter:brightness(1.12); }
@media (max-width:620px){
  .imp-bar{ padding:8px 12px; gap:9px; }
  .imp-text i{ display:none; }
}

/* ---------- slim themed scrollbar: things that scroll inside the page ----
   The panel columns and the pop-out panels, not the page itself — the
   window's own scrollbar is left to the operating system.

   One rule for all of them rather than a copy per panel: a scrollbar that
   matches in three places and not the fourth is more obvious than one that
   was never themed at all.

   Two syntaxes: Chrome 121+/Firefox honour scrollbar-width/color, older
   Chrome and Safari need the -webkit pseudo-elements. Same thin red bar. */
.col,
.ccpop-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,26,46,.6) rgba(255,255,255,.04);
}
/* .w-cards is deliberately not in that list — see its own block below. */
.col::-webkit-scrollbar,
.ccpop-scroll::-webkit-scrollbar{ width:7px; height:7px; }
.col::-webkit-scrollbar-track,
.ccpop-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:4px; }
.col::-webkit-scrollbar-thumb,
.ccpop-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--red), #7a0d16);
  border-radius:4px;
  box-shadow:0 0 8px rgba(255,26,46,.45);
}
.col::-webkit-scrollbar-thumb:hover,
.ccpop-scroll::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, #ff5a68, var(--red)); }
.col::-webkit-scrollbar-corner,
.ccpop-scroll::-webkit-scrollbar-corner{ background:transparent; }

/* ---------- background fx ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,26,46,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,26,46,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 85%);
}
.bg-glow{ position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(90px); }
.bg-glow-1{ width:900px; height:700px; left:22%; top:-14%; background:rgba(255,26,46,.07); }
.bg-glow-2{ width:700px; height:600px; right:-10%; bottom:-18%; background:rgba(255,26,46,.05); }
.scanline{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.35;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  position:relative; z-index:20; flex:0 0 auto;
  height: clamp(60px, 7.4vh, 76px); display:flex; align-items:center; gap:22px;
  padding:0 18px 0 20px;
  background:
    linear-gradient(180deg, rgba(60,4,8,.45), transparent 60%),
    linear-gradient(180deg, #050101, #000000);
  border-bottom:1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}

/* brand is a link in the shared header */
.brand{ display:flex; align-items:center; flex:0 0 auto;
        text-decoration:none; color:inherit; }

/* The logo is 2172x724 with a real alpha channel, so it needs no blending —
   and must not get any: the CONTROL CENTER bar is dark metal, and `screen`
   would erase exactly that part against a dark header.
   Nearly a third of the file's height is empty above the artwork and another
   quarter below it. Measured, not guessed: ink sits 29.3% down from the top,
   27.9% up from the bottom, 2.4% in from the left and 2.7% from the right.
   The inset crops that padding and the negative margins reclaim the space it
   would still hold in the flex row, so all of the height goes to the mark:
   a 79px box renders about 226x34 of visible lockup in a 60px bar. */
.brand-logo{
  display:block; height:100px; width:auto;
  clip-path: inset(29.3% 2.7% 27.9% 2.4%);
  margin: -23px -6px -35px 7px;
}
@media (max-width: 1100px){
  .brand-logo{ height:66px; margin:-19px -5px -18px -5px; }
}
.mainnav{ display:flex; align-items:center; justify-content:center; gap:6px; height:100%; flex:1 1 auto; }

/* Wide screens: pin the nav to the true page centre. Flex centring alone
   would only centre it in the gap left between the brand (226px) and the
   right-hand cluster (289px), which lands ~38px off. Absolute positioning is
   only safe once there's room — below 1300px it falls back to flex centring
   so the nav can never overlap the brand or the avatar. */
@media (min-width:1300px){
  .mainnav{
    position:absolute; left:50%; transform:translateX(-50%);
    flex:0 0 auto; width:max-content;
  }
  .topbar-right{ margin-left:auto; }
}
.nav-item{
  position:relative; height:84%; display:flex; align-items:center; padding:0 15px;
  color:#ffffff; text-decoration:none; font-weight:650; font-size:13px; letter-spacing:.12em;
  transition:color .18s ease;
}
.nav-item:hover{ color:#fff; }
.nav-item.active{ color:var(--red); text-shadow:0 0 12px rgba(255,26,46,.55); }
.nav-item.active::after{
  content:''; position:absolute; left:8px; right:8px; bottom:0; height:2px;
  background:var(--red); box-shadow:0 0 12px 2px rgba(255,26,46,.8);
}

/* Between the nav disappearing at 900px and the bar being comfortable around
   1150px, six nav items plus the lockup are wider than the header. The lockup
   is already as small as it can be and stay readable, so the nav gives up its
   generous padding for that band rather than the logo shrinking further. */
@media (max-width:1150px) and (min-width:901px){
  .nav-item{ padding:0 7px; font-size:12px; letter-spacing:.07em; }
}

.topbar-right{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  position:relative; width:34px; height:34px; display:grid; place-items:center;
  background:transparent; border:none; cursor:pointer; color:#c7c7d0; transition:.18s;
  font-family:var(--body);
}
.icon-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn:hover{ color:var(--red); filter:drop-shadow(0 0 8px rgba(255,26,46,.7)); }
.badge{
  position:absolute; top:1px; right:1px; min-width:15px; height:15px; padding:0 3px;
  background:var(--red); color:#fff; border-radius:8px;
  font-family:var(--body); font-size:10px; font-weight:700;
  display:grid; place-items:center; box-shadow:0 0 10px rgba(255,26,46,.9);
}

.user{
  display:flex; align-items:center; gap:10px; padding:4px 8px 4px 8px; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:9px;
  font-family:var(--body); color:inherit; text-align:left; transition:.18s;
}
.user:hover, .user.open{ border-color:rgba(255,26,46,.4); background:rgba(255,26,46,.08); }
.icon-btn.open{ color:var(--red); }

/* ============================================================
   HEADER MENUS
   position:fixed on purpose — the console pages set overflow:hidden on
   body, which would clip an absolutely positioned dropdown.
   ============================================================ */
.menu{
  position:fixed; top:calc(clamp(60px, 7.4vh, 76px) + 6px); z-index:80;
  width:300px; padding:6px; border-radius:11px;
  background:linear-gradient(160deg, rgba(16,10,13,.98), rgba(10,7,9,.98));
  border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.7), 0 0 30px rgba(255,26,46,.12);
  backdrop-filter:blur(10px);
  animation:menuIn .14s ease-out;
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.menu[hidden]{ display:none; }
.menu-bell{ right:150px; width:330px; }
.menu-settings{ right:106px; width:326px; }
.menu-user{ right:14px; width:302px; }

.menu-head{ display:flex; align-items:center; gap:10px; padding:10px 12px 8px; }
.menu-head h3{
  font-family:var(--head); font-size:10.5px; font-weight:700; letter-spacing:.16em; color:#e6e6ee;
}
.menu-link{
  margin-left:auto; background:none; border:none; cursor:pointer;
  font-family:var(--body); font-size:11px; font-weight:600; color:var(--red);
}
.menu-link:hover{ text-shadow:0 0 10px rgba(255,26,46,.8); }
.menu-sep{ height:1px; margin:6px 4px; background:var(--line-soft); }

.menu-item{
  width:100%; display:flex; align-items:center; gap:11px; padding:10px 12px;
  background:none; border:none; border-radius:8px; cursor:pointer; text-decoration:none;
  font-family:var(--body); font-size:13px; color:#dcdce4; transition:.16s;
}
.menu-item svg{ width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.menu-item:hover{ background:rgba(255,26,46,.12); color:#fff; }
.menu-item.danger{ color:#ff8d99; }
.menu-item.danger:hover{ background:rgba(255,26,46,.18); color:#fff; }
/* a menu row that holds a control instead of being a button itself */
.menu-item.as-row{ cursor:default; }
.menu-item.as-row:hover{ background:none; color:#dcdce4; }
.menu-item.as-row span{ flex:1; }
.menu-select{
  padding:5px 8px; border-radius:6px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--line-soft);
  font-family:var(--body); font-size:12px; color:#e2e2ea; outline:none;
}
.menu-select:focus{ border-color:rgba(255,26,46,.5); }
.menu-select option{ background:#120a0d; }

/* the account menu is tall — let it scroll rather than run off screen */
.menu-user{ max-height:calc(100vh - clamp(60px, 7.4vh, 76px) - 24px); overflow-y:auto;
            scrollbar-width:thin; scrollbar-color:rgba(255,26,46,.5) transparent; }
.menu-user::-webkit-scrollbar{ width:5px; }
.menu-user::-webkit-scrollbar-thumb{ background:rgba(255,26,46,.5); border-radius:3px; }

.menu-foot{
  display:block; padding:10px; text-align:center; text-decoration:none;
  font-size:11.5px; font-weight:600; letter-spacing:.06em; color:var(--red);
  border-top:1px solid var(--line-soft); margin-top:4px;
}
.menu-foot:hover{ background:rgba(255,26,46,.1); }

/* notifications */
.menu-list{ list-style:none; max-height:300px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,26,46,.5) transparent; }
.menu-list::-webkit-scrollbar{ width:5px; }
.menu-list::-webkit-scrollbar-thumb{ background:rgba(255,26,46,.5); border-radius:3px; }
.notif{
  position:relative; display:flex; align-items:flex-start; gap:11px;
  padding:10px 12px; border-radius:8px; cursor:pointer; transition:.16s;
}
.notif:hover{ background:rgba(255,255,255,.04); }
.notif.unread::after{
  content:''; position:absolute; right:10px; top:14px; width:6px; height:6px;
  border-radius:50%; background:var(--red); box-shadow:0 0 8px rgba(255,26,46,.9);
}
.n-ic{ width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.05); }
.n-ic svg{ width:15px; height:15px; fill:none; stroke:#b0b0ba; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.n-ic.danger svg{ stroke:var(--red); }
.n-ic.ok svg{ stroke:var(--green); }
.n-ic.warn svg{ stroke:var(--amber); }
.n-title{ font-size:12.5px; color:#e6e6ee; line-height:1.35; padding-right:14px; }
.n-sub{ font-size:10.5px; color:#8b8b95; margin-top:3px; }

/* a notification carrying a link is one — the anchor covers the row rather
   than sitting inside the text, so the whole thing is clickable and the
   unread dot (a ::after on .notif, painted later) still shows through */
.n-open{ position:absolute; inset:0; border-radius:8px; }
.n-open:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }

.menu-empty{
  padding:14px 14px 16px; font-size:11.5px; line-height:1.6; color:#8b8b95;
}

/* settings switches */
.opt{
  display:flex; align-items:center; gap:12px; padding:9px 12px;
  border-radius:8px; cursor:pointer; transition:.16s;
}
.opt:hover{ background:rgba(255,255,255,.035); }
.opt span{ flex:1; min-width:0; }
.opt b{ display:block; font-size:12.5px; font-weight:600; color:#e2e2ea; }
.opt i{ display:block; font-style:normal; font-size:10.5px; color:#8b8b95; margin-top:2px; line-height:1.35; }
.menu .pref-sw{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; position:relative;
  width:38px; height:21px; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid var(--line-soft); transition:.18s;
}
.menu .pref-sw::after{
  content:''; position:absolute; left:2px; top:2px; width:15px; height:15px;
  border-radius:50%; background:#8b8b95; transition:.18s;
}
.menu .pref-sw:checked{ background:rgba(255,26,46,.35); border-color:rgba(255,26,46,.6); }
.menu .pref-sw:checked::after{ left:19px; background:var(--red); box-shadow:0 0 10px rgba(255,26,46,.9); }

/* account card */
.acct{ display:flex; align-items:center; gap:12px; padding:12px; }
.acct-av{
  width:44px; height:44px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  border:1.5px solid var(--red); box-shadow:0 0 14px rgba(255,26,46,.4);
}
.acct-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.acct-name{ font-family:var(--head); font-size:13px; font-weight:700; color:#fff; }
.acct-mail{ font-size:11px; color:#8b8b95; margin-top:3px; word-break:break-all; }
.acct-rank{ display:inline-block; margin-top:5px; font-size:9.5px; letter-spacing:.12em; color:var(--red); }
/* the batch line under the account block, replacing the old XP bar */
.acct-batch{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 12px 10px; padding:7px 10px; border-radius:8px;
  background:rgba(255,26,46,.08); border:1px solid rgba(255,26,46,.24);
}
.acct-batch span{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.acct-batch b{
  font-family:ui-monospace, 'Consolas', monospace;
  font-size:11.5px; color:#fff; font-weight:600; word-break:break-all;
}

/* preferences from the settings menu */
body.no-motion *,
body.no-motion *::before,
body.no-motion *::after{
  animation:none !important;
  transition:none !important;
}
body.no-scanline .scanline{ display:none; }
body.no-grid .bg-grid{ display:none; }

@media (max-width:900px){
  .menu{ left:10px; right:10px; width:auto; }
}
.avatar{ position:relative; width:34px; height:34px; border-radius:50%; overflow:hidden; background:#1a0a0e; }
.avatar img{ width:180%; height:180%; object-fit:cover; object-position:52% 8%; margin:-6px 0 0 -32%; }
.avatar-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--red); box-shadow:0 0 10px rgba(255,26,46,.6) inset; }
/* one line only — the name and rank live inside the dropdown */
.user-name{ font-family:var(--head); font-size:12px; font-weight:700; letter-spacing:.08em;
            white-space:nowrap; }
.user-name .caret{ color:#ffffff; font-size:10px; }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout{
  position:relative; z-index:10; flex:1 1 auto; min-height:0;
  display:grid;
  grid-template-columns: 408px minmax(0,1fr) 408px var(--rail-w);
  gap: var(--gap); padding: var(--gap) 12px calc(var(--gap) * .7) 14px;
}

.col{
  min-height:0; display:flex; flex-direction:column; gap:var(--gap);
  /* the column scrolls itself rather than pushing the page taller; the fit
     pass normally keeps it from overflowing, so the bar only shows when a
     column genuinely can't shrink any further */
  overflow-y:auto; overflow-x:hidden; transform-origin:top left;
}
.col-center{ overflow:hidden; }

/* ---------- panel ---------- */
.panel{
  position:relative; flex:0 0 auto;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}
.panel::before,.panel::after{
  content:''; position:absolute; width:12px; height:12px; border:1px solid var(--red); opacity:.55;
}
.panel::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; border-radius:10px 0 0 0; }
.panel::after{ right:-1px; bottom:-1px; border-left:0; border-top:0; border-radius:0 0 10px 0; }

.panel-head{
  display:flex; align-items:center; gap:9px;
  padding: var(--pad-y) 16px calc(var(--pad-y) * .8);
  border-bottom:1px solid var(--line-soft);
}
.panel-head h2{
  font-family:var(--head); font-size:12px; font-weight:700; letter-spacing:.14em; color:#dcdce4;
}
.panel-head .dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 10px 2px rgba(255,26,46,.85); animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.head-link{ margin-left:auto; }

.panel-body{ padding: var(--pad-y) 16px calc(var(--pad-y) * 1.1); }

.panel-foot{
  display:flex; align-items:center; gap:10px;
  padding: calc(var(--pad-y) * .8) 16px; border-top:1px solid var(--line-soft); font-size:12px;
}
.foot-label{ color:#ffffff; letter-spacing:.12em; font-size:10.5px; }
.foot-val{ color:#c9c9d2; }

.link{
  margin-left:auto; color:var(--red); text-decoration:none; font-size:11px; font-weight:600;
  letter-spacing:.13em; display:inline-flex; align-items:center; gap:5px; transition:.18s;
}
.link:hover{ text-shadow:0 0 10px rgba(255,26,46,.8); }
.link i{ font-style:normal; font-size:14px; }
.link-right{ display:flex; justify-content:flex-end; margin-top:12px; }

/* ============================================================
   OPERATOR PROFILE CARD
   ============================================================ */
.profile{
  display:flex; align-items:center; gap:16px;
  padding: calc(var(--pad-y) * 4.3) 20px;
  /* notched top-left / bottom-right corners, as in the reference card */
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px),
                     calc(100% - 18px) 100%, 0 100%, 0 18px);
  border-radius:0;
  background:
    linear-gradient(360deg, rgba(24,6,10,.95) 0%, rgba(14,8,10,.9) 55%, rgba(48,8,14,.92) 100%);
  box-shadow: inset -3px 0 0 rgba(255,26,46,.85), 0 12px 30px rgba(0,0,0,.5);
}
/* the shared panel corner brackets would poke out of the notches */
.profile::before, .profile::after{ display:none; }

/* Chamfered square — same two clipped corners as the card itself (top-left
   and bottom-right), in percentages so the cut stays proportional as the
   avatar scales. A `border` can't be used: clip-path would cut it away with
   everything else, so the frame is the parent's red fill showing through a
   2px padding, both boxes clipped to the same shape. box-shadow gets clipped
   too, hence drop-shadow for the glow. */
.pf-avatar{
  /* px cut, not %, now that the box is taller than it is wide — a percentage
     would give a different bite on each axis and skew the 45° chamfer */
  --frame: polygon(18px 0, 100% 0, 100% calc(100% - 18px),
                   calc(100% - 18px) 100%, 0 100%, 0 18px);
  position:relative; flex:0 0 auto; overflow:hidden;
  width:  clamp(102px, 10.7vh, 110px);
  height: clamp(115px, 11.2vh, 116px);
  padding:2px;
  background: linear-gradient(150deg, var(--red), #6d0b15 55%, var(--red));
  clip-path: var(--frame);
  -webkit-clip-path: var(--frame);
  filter: drop-shadow(0 0 12px rgba(255,26,46,.55));
}
/* Sits inside the 2px padding, i.e. exactly the red ring's inner edge.
   `padding` on .pf-avatar only reserves layout space — it doesn't clip
   paint, so a zoomed (transform:scale) image still paints straight over
   it and hides the ring. This mask is never transformed, so its own
   overflow:hidden keeps that paint inside the ring regardless of how far
   the image inside is scaled.
   It also needs its OWN chamfer, 2px smaller than the parent's (18-2=16),
   not just a plain rectangle: a plain rectangle's square corners reach
   past the parent's diagonal cut (2px in is still well inside the 18px
   bite), so the parent's clip-path removes mask and ring together right
   on the two chamfered corners, leaving no ring there even though the
   straight edges show one fine. Matching, inset chamfers keep the ring a
   constant width all the way around, corners included. */
.pf-avatar-mask{
  width:100%; height:100%; overflow:hidden; display:block;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px),
                     calc(100% - 16px) 100%, 0 100%, 0 16px);
  -webkit-clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px),
                     calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.pf-avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* No clip-path of its own any more — it used to carry the same chamfer
     as the parent, redundantly, but a chamfer cut at a fixed pixel inset
     scales right along with any transform:scale() put on this element (a
     zoomed-in avatar picture, see js/app.js), dragging those corner cuts
     far outside the visible box and leaving what looks like a plain
     rectangle. The parent is never transformed, so its own clip-path
     (plus its new overflow:hidden) frames this image correctly no matter
     how far it's zoomed in. */
}

.pf-info{ flex:1; min-width:0; }
/* Titles the panel in place of the name and role that used to be here —
   both of those are already on the welcome line and in the account menu. */
.pf-title{
  font-family:var(--head); font-size: clamp(12px, 0.1vh, 14px); font-weight:700;
  color:#fff; letter-spacing:.04em; margin-bottom:9px; white-space:nowrap;
}
/* ---------- batch code + student ID ----------
   Where the level and XP bar used to be. Each is its own small card rather
   than a bare label-and-value pair: these are codes a student reads out to
   somebody, so they get room, a fixed-pitch face, and a copy button on
   hover. The red spine on the left ties them to the panel's own accent
   without another border competing with the panel's. */
.pf-ids{ display:flex; flex-direction:column; gap:6px; }

.pf-id{
  position:relative; display:block; overflow:hidden;
  padding:7px 30px 7px 11px; border-radius:9px; text-decoration:none;
  background:linear-gradient(90deg, rgba(255,26,46,.11), rgba(255,26,46,.03));
  border:1px solid rgba(255,26,46,.2);
  transition:.16s;
}
/* the spine */
.pf-id::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--red), #8b0d18);
  box-shadow:0 0 8px rgba(255,26,46,.7);
}
.pf-id:hover{ border-color:rgba(255,26,46,.42); background:linear-gradient(90deg, rgba(255,26,46,.17), rgba(255,26,46,.05)); }

.pf-id-top{
  display:flex; align-items:center; gap:5px;
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600;
}
.pf-id-top svg{
  width:10px; height:10px; flex:0 0 auto; fill:none; stroke:var(--red);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* Set in the panel's own heading face rather than a monospace one, so the
   two codes and the title above them read as one block. */
.pf-id-val{
  display:block; margin-top:3px;
  font-family:var(--head);
  font-size:11px; font-weight:700; letter-spacing:.03em; color:#fff;
  word-break:break-all; line-height:1.2;
}
.pf-id-val.none{ font-family:var(--body); font-weight:600; color:var(--muted); letter-spacing:0; }
.pf-id-sub{
  display:block; margin-top:1px; font-style:normal;
  font-size:10px; color:var(--muted); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pf-id-join:hover .pf-id-sub{ color:var(--red); }

/* copy: quiet until the card is hovered, so two of these do not shout */
.pf-id-copy{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:6px; cursor:pointer; opacity:0; transition:.15s;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,26,46,.32);
  /* it only ever holds an icon, but a button that does not name its font
     falls back to the browser's — and the day one gains a word of text is
     the day that shows */
  font-family:var(--body);
}
.pf-id-copy svg{ width:11px; height:11px; fill:none; stroke:var(--red); stroke-width:1.9;
                 stroke-linecap:round; stroke-linejoin:round; }
.pf-id:hover .pf-id-copy{ opacity:1; }
.pf-id-copy:hover{ background:rgba(255,26,46,.22); }
.pf-id-copy:hover svg{ stroke:#fff; }
.pf-id-copy:focus-visible{ opacity:1; outline:none; border-color:var(--red); }
/* confirmation, without a layout shift */
.pf-id.copied::after{
  content:'Copied'; position:absolute; right:32px; top:50%; transform:translateY(-50%);
  padding:2px 6px; border-radius:5px;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--green);
  /* opaque, because a long code wraps underneath it */
  background:#0c0709; border:1px solid rgba(47,208,106,.35);
}

/* ============================================================
   AI ASSISTANT CARD
   ============================================================ */
.ai-card{ padding: calc(var(--pad-y) * 1.55) 16px calc(var(--pad-y) * 1.6); }
.ai-top{ display:flex; align-items:flex-start; gap:13px; }

.ai-badge{
  position:relative; flex:0 0 auto;
  width: clamp(44px, 5.3vh, 58px); height: clamp(44px, 5.3vh, 58px);
  border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,26,46,.55);
  background: radial-gradient(circle at 50% 45%, rgba(255,26,46,.22), rgba(255,26,46,.03) 70%);
  box-shadow:0 0 16px rgba(255,26,46,.3), inset 0 0 12px rgba(255,26,46,.15);
}
.ai-badge::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px dashed rgba(255,26,46,.35);
  animation: spinSlow 9s linear infinite;
}
@keyframes spinSlow{ to{ transform:rotate(360deg) } }
.ai-badge span{
  font-family:var(--head); font-size: clamp(12px,1.4vh,14px); font-weight:700;
  color:var(--red); letter-spacing:.06em; text-shadow:0 0 12px rgba(255,26,46,.7);
}

.ai-body{ flex:1; min-width:0; }
.ai-head{ display:flex; align-items:center; gap:8px; }
.ai-head h3{
  font-family:var(--head); font-size: clamp(11px,1.3vh,12.5px); font-weight:700;
  letter-spacing:.11em; color:#fff; white-space:nowrap;
}
.ai-status{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:9.5px; letter-spacing:.14em; color:var(--green); white-space:nowrap;
}
.ai-status i{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px 1px rgba(47,208,106,.9);
  animation:pulse 2.2s ease-in-out infinite;
}
.ai-text{
  margin-top:7px; font-size: clamp(11.5px,1.4vh,12.5px);
  line-height:1.5; color:#a8a8b3;
}

/* The AI card's call to action, shared with the CV box so the two read as
   the same control rather than two buttons that nearly match. */
.ai-cta, .cv-cta{
  display:block; text-align:center; text-decoration:none;
  width:100%; margin-top: clamp(11px,1.7vh,17px);
  padding: clamp(10px,1.5vh,15px) 10px;
  background: linear-gradient(180deg, rgba(255,26,46,.3), rgba(110,10,18,.42));
  border:1px solid rgba(255,26,46,.6); border-radius:6px; cursor:pointer;
  font-family:var(--head); font-size: clamp(10px,1.2vh,11.5px); font-weight:700;
  letter-spacing:.14em; color:#fff;
  box-shadow:0 0 18px rgba(255,26,46,.22); transition:.18s;
}
.ai-cta:hover, .cv-cta:hover{
  background: linear-gradient(180deg, rgba(255,26,46,.46), rgba(140,12,22,.55));
  box-shadow:0 0 26px rgba(255,26,46,.45);
}

/* ============================================================
   SYSTEM STATUS
   ============================================================ */
.status-body{ display:flex; align-items:center; gap:16px; }

.secure-gauge{
  position:relative; flex:0 0 auto;
  width: clamp(108px, 15vh, 140px); height: clamp(108px, 15vh, 140px);
}
.secure-gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:rgba(255,255,255,.07); stroke-width:9; }
.ring-fill{
  fill:none; stroke:var(--red); stroke-width:9; stroke-linecap:round;
  filter: drop-shadow(0 0 6px rgba(255,26,46,.85));
  transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);
}
.secure-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.secure-val{
  font-family:var(--head); font-size:clamp(23px, 3.3vh, 32px); font-weight:900; line-height:1;
  color:#fff; text-shadow:0 0 18px rgba(255,26,46,.6);
}
.secure-label{ font-size:10px; letter-spacing:.3em; color:#ffffff; margin-top:clamp(3px,.6vh,6px); }
.secure-badge{
  position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  width:28px; height:28px; background:#0b0507; border:1px solid var(--red);
  border-radius:6px; display:grid; place-items:center;
  box-shadow:0 0 14px rgba(255,26,46,.5);
}
.secure-badge svg{ width:15px; height:15px; transform:none; }

.status-list{ list-style:none; flex:1; display:flex; flex-direction:column; gap:var(--row-gap); }
.status-list li{ display:flex; align-items:center; justify-content:space-between; }
.status-list span{ font-size:11.5px; letter-spacing:.13em; color:#ffffff; }
.status-list b{ font-size:12px; font-weight:600; }
.ok{ color:var(--green); }
.hot{ color:var(--red); }
/* a section of the CV with nothing in it yet — stated plainly rather than
   dressed up as a warning: an empty CV is the normal starting point */
.todo{ color:#6a6a74; font-weight:500; }

/* cv.php while the builder is still being built — one centred column
   rather than the dashboard's three */
.cv-soon{ display:block; max-width:640px; margin:0 auto; }
.cv-lead{ font-size:14.5px; line-height:1.65; color:#e2e2e9; margin-bottom:12px; }
.cv-note{ font-size:13px; line-height:1.7; color:#9a9aa4; margin-bottom:12px; }

/* ============================================================
   LEARNING PATH
   A doorway into path.php, where the student picks a domain and a
   designation and gets the certifications that lead to it.
   ============================================================ */
.lp-lead{ font-size:12px; line-height:1.45; color:#9a9aa4; }

.lp-domains{ display:flex; flex-wrap:wrap; gap:5px; margin-top: clamp(7px, 1.2vh, 11px); }
.lp-chip{
  padding:3px 8px; border-radius:5px; text-decoration:none; transition:.16s;
  font-size:10.5px; letter-spacing:.04em; color:#b4b4be;
  background:rgba(255,255,255,.05); border:1px solid var(--line-soft);
}
.lp-chip:hover{ color:#fff; border-color:rgba(255,26,46,.5); background:rgba(255,26,46,.14); }
.lp-chip.more{ color:var(--red); border-color:rgba(255,26,46,.3); }

/* Wears the Ask AI Assistant look — a translucent red over the panel
   rather than a solid slab of it. Same family as .ai-cta and
   .sc-btn.primary; those three are the red buttons on this screen and
   they should not each be a different red. */
.lp-cta{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top: clamp(8px, 1.3vh, 12px); padding:8px 10px; border-radius:8px;
  text-decoration:none; transition:.18s;
  font-family:var(--head); font-size:11px; font-weight:700; letter-spacing:.12em; color:#fff;
  background: linear-gradient(180deg, rgba(255,26,46,.3), rgba(110,10,18,.42));
  border:1px solid rgba(255,26,46,.6);
  box-shadow:0 0 18px rgba(255,26,46,.22);
}
.lp-cta:hover{
  background: linear-gradient(180deg, rgba(255,26,46,.46), rgba(140,12,22,.55));
  box-shadow:0 0 26px rgba(255,26,46,.45);
}
.lp-cta svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8;
             stroke-linecap:round; stroke-linejoin:round; }

.lp-stats{
  display:flex; justify-content:space-between; gap:8px;
  margin-top: clamp(8px, 1.3vh, 12px); padding-top:9px; border-top:1px solid var(--line-soft);
}
.lp-stats span{ display:flex; flex-direction:column; font-size:9.5px; letter-spacing:.12em;
                text-transform:uppercase; color:#7f7f89; }
.lp-stats b{ font-family:var(--head); font-size:15px; color:#fff; line-height:1.1; margin-bottom:1px; }

/* ============================================================
   SYSTEM ACTIVITY
   ============================================================ */
.mini-select{
  margin-left:auto; background:rgba(255,255,255,.04); color:#c4c4ce;
  border:1px solid var(--line); border-radius:5px; padding:4px 8px;
  font-family:var(--body); font-size:11px; outline:none; cursor:pointer;
}
.mini-select option{ background:#120a0d; }

.legend{ display:flex; gap:18px; font-size:11.5px; color:#b0b0ba; margin-bottom:6px; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); }

.chart-wrap{ position:relative; height: clamp(84px, 14.5vh, 128px); padding-left:34px; }
.chart-wrap svg{ width:100%; height:100%; overflow:visible; }
.y-axis{
  position:absolute; left:0; top:0; bottom:0; width:32px;
  display:flex; flex-direction:column; justify-content:space-between;
  font-size:9.5px; color:#ffffff; text-align:right; padding-right:6px;
}
.x-axis{ display:flex; justify-content:space-between; margin-left:34px; margin-top:5px; font-size:9.5px; color:#ffffff; }
.grid-line{ stroke:rgba(255,255,255,.05); stroke-width:1; }
.spark{ fill:none; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }

/* ============================================================
   CENTER STAGE
   ============================================================ */
.stage{
  position:relative; flex:1; min-height:0; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,26,46,.10);
}
/* the corridor rebuilt from the artwork's own rack walls, then dimmed back
   down to the artwork's native darkness so the character's rectangle doesn't
   read as a brighter picture-in-picture against it */
.stage-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 58% 26% at 50% 90%, rgba(255,26,46,.15), transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.46) 45%, rgba(0,0,0,.72)),
    url('../assets/bg-corridor-stage.jpg') center / cover no-repeat,
    #000;
}
.stage-bg::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 50%, transparent 42%, #000 100%);
}
.stage-vignette{
  position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 140px 40px rgba(0,0,0,.85);
}

/* Pinned top and bottom so the block has a real height to divide up: the
   name and tagline take what they need, and the cards below get the rest.
   .welcome itself never scrolls — only .w-cards does. */
.welcome{
  position:absolute; left:28px; z-index:4;
  top: clamp(16px, 2.4vh, 26px);
  /* Stops above the action bar, which floats over the stage on z-index 5.
     Pinned to the stage bottom instead, this column ran underneath it and
     the last card was unreachable however far you scrolled.
     --actionbar-h is measured by js/app.js rather than guessed: the button
     labels wrap to two lines on a narrow screen and the bar grows. */
  /* the bar's own 16px offset from the stage floor counts too, or the
     column stops level with the bar's top edge and still tucks under it */
  bottom: calc(var(--actionbar-h, 94px) + 16px + clamp(8px, 1.2vh, 16px));
  /* Wider than it was (27% / 292px max). The floor is raised only a little:
     on a 1366 screen the stage is barely 560px, and a big minimum here
     covers the character rather than sitting beside them. */
  width: clamp(216px, 30%, 328px);
  display:flex; flex-direction:column; min-height:0;
}

/* Everything above the cards keeps its natural height. Flex items may
   shrink below their content by default, so once the alias wrapped to
   three lines this column ran short of room and squeezed the name and the
   alias into each other — the text overflowed its own row upwards and the
   gap between them disappeared. The cards below absorb the shrink instead;
   they already scroll. */
.welcome > *:not(.w-cards){ flex:0 0 auto; }

/* The creed, today's mission and the support card. .stage clips whatever
   will not fit, and on a short screen that quietly cut the support card
   off with no way to reach it — so this group scrolls on its own while
   the name above it stays put. The bar is the shared .col treatment
   further up, so it matches the columns either side. */
.w-cards{
  flex:1 1 auto; min-height:0;
  /* auto, not scroll. With scroll the lane is reserved whether or not there
     is anything in it, and once the cards were widened they stopped
     overflowing — which left an empty channel down the artwork with no
     thumb in it. The bar now appears exactly when there is something to
     scroll, and is absent when there is not. */
  overflow-y:auto;
  padding-right:5px;                 /* keeps the bar off the cards */
  /* no bottom padding either, for the same reason: the lane would run on
     past the last card and the bar would look longer than the stack */
  padding-bottom:0;

  /* The gap above the first card lives here rather than on the card. A
     scrollbar spans its container, so with the space inside, the lane
     started above the card and the two ends did not line up. Moved out,
     the container begins exactly where the first card does. */
  margin-top: clamp(12px, 1.8vh, 18px);

  /* scrollbar-color inherits, and .col up the tree sets one — which alone
     is enough to keep Chrome in standard-scrollbar mode and ignore the
     -webkit rules below, drawing a 15px default bar. Reset to auto so the
     pseudo-elements are the ones in charge. Firefox is put back at the end
     of this block, where auto would otherwise leave it grey. */
  scrollbar-color: auto;
}

/* Sized through the -webkit pseudo-elements on purpose: Chrome ignores
   these rules entirely the moment scrollbar-width or scrollbar-color is in
   effect on the element, which is why an 8px width here did nothing and
   the system bar kept being drawn.
   Solid thumb, no track: this bar sits over the stage artwork rather than
   a flat panel, where a filled track reads as a pale band down the middle
   of the picture. */
/* Whatever the first card would have put above itself, the container has
   already accounted for — including the larger value the short-screen
   media query sets. Specificity keeps this ahead of that rule. */
.w-cards > :first-child{ margin-top:0; }

/* 9px of lane, not 5: the stepper arrows below need room to read as
   arrows. The thumb keeps the slim look anyway — see the border trick. */
.w-cards::-webkit-scrollbar{ width:9px; }
.w-cards::-webkit-scrollbar-track{ background:transparent; box-shadow:none; }

/* A transparent 2px border with background-clip:content-box paints the
   thumb 5px wide inside a 9px lane, so widening the lane for the arrows
   does not fatten the bar you actually drag. */
.w-cards::-webkit-scrollbar-thumb{
  /* background-color, not the background shorthand: the shorthand carrying
     a var() parses as a pending substitution and resets background-clip
     with it, which is the one property doing the work here */
  background-color:var(--red); background-clip:content-box;
  border:2px solid transparent; border-radius:5px; box-shadow:none;
}
.w-cards::-webkit-scrollbar-thumb:hover{ background-color:#ff5a68; }

/* The steppers, one at each end, in the same red as the thumb rather than
   Chrome's grey default. Drawn as background SVG because the button is a
   painted box, not an element that can hold a glyph. */
.w-cards::-webkit-scrollbar-button{
  display:block; height:9px;
  background-repeat:no-repeat; background-position:center; background-size:7px 7px;
}
.w-cards::-webkit-scrollbar-button:vertical:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2.2 8.6 7.2H1.4z' fill='%23ff1a2e'/%3E%3C/svg%3E");
}
.w-cards::-webkit-scrollbar-button:vertical:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 7.8 1.4 2.8h7.2z' fill='%23ff1a2e'/%3E%3C/svg%3E");
}
.w-cards::-webkit-scrollbar-button:vertical:decrement:hover,
.w-cards::-webkit-scrollbar-button:vertical:increment:hover{ background-color:rgba(255,26,46,.16); }

/* Chrome offers a button at both ends of both directions — four in all.
   Without these two hidden, an extra down-arrow sits under the top one and
   an extra up-arrow above the bottom one. */
.w-cards::-webkit-scrollbar-button:vertical:start:increment,
.w-cards::-webkit-scrollbar-button:vertical:end:decrement{ display:none; }

/* Firefox has no -webkit pseudo-elements, so it gets the standard pair —
   guarded by a property only Firefox implements, so Chrome never sees it
   and never falls back to the wider system bar. */
@supports (-moz-orient: inline){
  .w-cards{ scrollbar-width: thin; scrollbar-color: var(--red) transparent; }
}
.w-hi{ font-size:15px; color:#ffffff; }
.w-name{
  font-family:var(--head); font-size:38px; font-weight:900; letter-spacing:.02em;
  color:var(--red); line-height:1.1;
  /* 2px read as cramped against a 38px name — matched to the gap below the
     name so the greeting, the name and the alias sit evenly apart */
  margin-top: clamp(7px, 1.1vh, 12px);
  text-shadow:0 0 26px rgba(255,26,46,.65), 0 0 60px rgba(255,26,46,.35);
}
/* the student's own line, with an edit pencil that keeps out of the way */
.w-role{
  /* flex-start, not center: a wrapped alias is taller than the pencil, and
     centring pushed the first line up out of the row */
  display:flex; align-items:flex-start; gap:7px;
  font-size:13.5px; line-height:1.45; color:#ffffff; min-height:22px;
  /* 4px was set when this line was a fixed role label sitting close under
     the name. It is the student's own sentence now and needs to read as a
     separate thought, not as a third line of the name above it. */
  margin-top: clamp(9px, 1.3vh, 14px);
}
.w-alias{ min-width:0; overflow-wrap:anywhere; }
/* nothing written yet — an invitation, dimmed so it does not read as a fact */
.w-alias.none{ color:#7c7c88; font-style:italic; }

/* At rest it is a faint pencil and nothing else — visible enough to say the
   line can be edited, quiet enough not to compete with the name above it.
   Hovering the row brings it up to full and gives it the chip, so it only
   looks like a button once you are near it. */
.w-aliasedit{
  flex:0 0 auto; width:22px; height:22px; border-radius:6px; cursor:pointer;
  display:grid; place-items:center; padding:0;
  background:transparent; border:1px solid transparent;
  /* .5 rather than something fainter: below about this the pencil drops
     under 3:1 against the panel and stops being reliably visible */
  opacity:.5; transition:opacity .16s, border-color .16s, background .16s;
  /* the row aligns to the top now, so this sits level with the first line
     of a wrapped alias rather than floating above it */
  margin-top:-1px;
}
.w-aliasedit svg{
  width:13px; height:13px; fill:none; stroke:#c9c9d2; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
/* full on hover, and on keyboard focus — a control that only surfaces for a
   mouse is a control a keyboard cannot reach */
.w-role:hover .w-aliasedit,
.w-aliasedit:focus-visible{
  opacity:1; background:rgba(255,255,255,.06); border-color:var(--line-soft);
}
.w-aliasedit:hover{ border-color:var(--red); background:rgba(255,26,46,.12); }
.w-aliasedit:hover svg{ stroke:var(--red); }

.w-aliasinput{
  flex:1; min-width:0; max-width:340px; padding:4px 9px; border-radius:7px;
  background:rgba(255,255,255,.06); border:1px solid var(--red);
  font-family:var(--body); font-size:13.5px; color:var(--text); outline:none;
}
.w-aliasinput::placeholder{ color:#6a6a74; }
.w-aliashint{ flex:0 0 auto; font-size:10px; color:#7c7c88; white-space:nowrap; }
.w-aliashint.bad{ color:#ff8a94; }

/* ---------- welcome column: rule, creed, mission ---------- */
.w-rule{
  width:64px; height:2px; margin: clamp(10px,1.6vh,16px) 0 clamp(10px,1.6vh,16px);
  background:linear-gradient(90deg, var(--red), rgba(255,26,46,0));
  box-shadow:0 0 10px rgba(255,26,46,.6);
}

/* creed card */
.quote-card{
  position:relative; margin-top: clamp(12px,1.8vh,18px);
  padding: clamp(11px,1.5vh,15px) 16px clamp(10px,1.4vh,14px) 34px;
  background: linear-gradient(140deg, rgba(18,8,11,.82), rgba(10,6,8,.66));
  border:1px solid var(--line); border-left:2px solid var(--red);
  border-radius:8px; backdrop-filter: blur(5px);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.q-mark{
  position:absolute; left:11px; top:6px;
  font-family:var(--head); font-size:26px; line-height:1; color:var(--red);
  text-shadow:0 0 14px rgba(255,26,46,.6);
}
.quote-card blockquote{
  font-size: clamp(12.5px, 1.5vh, 14.5px); line-height:1.5; color:#e4e4ec;
}
.quote-card figcaption{
  margin-top:8px; font-size:12px; font-weight:600; color:var(--red);
  text-shadow:0 0 10px rgba(255,26,46,.45);
}

/* today's mission */
.mission-card{
  margin-top: clamp(10px,1.5vh,15px);
  padding: clamp(11px,1.5vh,15px) 16px clamp(12px,1.6vh,16px);
  background: linear-gradient(150deg, rgba(18,8,11,.85), rgba(10,6,8,.7));
  border:1px solid var(--line); border-radius:8px;
  backdrop-filter: blur(5px); box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.mc-head{ display:flex; align-items:center; gap:9px; }
.mc-icon{
  width:16px; height:16px; flex:0 0 auto;
  fill:none; stroke:var(--red); stroke-width:1.7; stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(255,26,46,.8));
}
.mc-head h3{
  font-family:var(--head); font-size:11px; font-weight:700;
  letter-spacing:.16em; color:#e6e6ee;
}
.mc-title{
  margin-top: clamp(9px,1.3vh,13px);
  font-size: clamp(13px,1.6vh,15px); font-weight:600; color:#fff;
}
.mc-cta{
  width:100%; margin-top: clamp(9px,1.3vh,13px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: clamp(8px,1.1vh,11px) 13px;
  background:rgba(255,255,255,.045); border:1px solid var(--line);
  border-radius:6px; cursor:pointer; transition:.18s;
  font-family:var(--body); font-size:12.5px; font-weight:600; color:#e2e2ea;
}
.mc-cta i{ font-style:normal; font-size:16px; color:var(--red); line-height:1; }
.mc-cta:hover{
  background:rgba(255,26,46,.12); border-color:rgba(255,26,46,.5);
  box-shadow:0 0 18px rgba(255,26,46,.25);
}
.mc-prow{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: clamp(10px,1.4vh,14px); font-size:11.5px; color:#a6a6b0;
}
.mc-prow b{ font-family:var(--head); font-size:12px; color:#fff; }
.mc-track{
  position:relative; height:5px; margin-top:7px; border-radius:3px;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.mc-fill{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:3px;
  background:linear-gradient(90deg, #8b0d18, var(--red) 70%, #ff6a3a);
  box-shadow:0 0 12px rgba(255,40,30,.8);
  transition: width 1.3s cubic-bezier(.4,0,.2,1);
}

/* support / help desk */
.support-card{
  margin-top: clamp(10px,1.5vh,15px);
  padding: clamp(11px,1.5vh,15px) 16px clamp(12px,1.6vh,16px);
  background: linear-gradient(150deg, rgba(18,8,11,.85), rgba(10,6,8,.7));
  border:1px solid var(--line); border-radius:8px;
  backdrop-filter: blur(5px); box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.sc-head{ display:flex; align-items:center; gap:9px; }
.sc-icon{
  width:17px; height:17px; flex:0 0 auto;
  fill:none; stroke:var(--red); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(255,26,46,.75));
}
.sc-head h3{
  font-family:var(--head); font-size:11px; font-weight:700;
  letter-spacing:.16em; color:#e6e6ee;
}
.sc-status{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:9.5px; letter-spacing:.16em; color:var(--green);
}
.sc-status i{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px 1px rgba(47,208,106,.9);
  animation:pulse 2.2s ease-in-out infinite;
}
.sc-text{
  margin-top: clamp(8px,1.2vh,12px);
  font-size:12px; line-height:1.5; color:#a8a8b3;
}
.sc-actions{ display:flex; flex-wrap:wrap; gap:7px; margin-top: clamp(9px,1.3vh,13px); }
.sc-btn{
  flex:1; padding: clamp(7px,1vh,10px) 6px;
  background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:6px;
  font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.04em;
  color:#dcdce4; cursor:pointer; transition:.18s; white-space:nowrap;
}
.sc-btn:hover{ background:rgba(255,26,46,.12); border-color:rgba(255,26,46,.5); }
.sc-btn.primary{
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border-color:rgba(255,26,46,.55); color:#fff;
  box-shadow:0 0 16px rgba(255,26,46,.22);
}
.sc-btn.primary:hover{
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  box-shadow:0 0 22px rgba(255,26,46,.4);
}
/* feedback button takes its own row — three across would leave ~54px each
   in this column, too narrow for "Raise Ticket" to stay on one line */
.sc-btn.wide{
  flex:1 0 100%; white-space:normal;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:11px; letter-spacing:.02em;
}
.sc-btn.wide svg{
  width:14px; height:14px; flex:0 0 auto;
  fill:none; stroke:var(--red); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.sc-btn.wide:hover svg{ filter:drop-shadow(0 0 6px rgba(255,26,46,.8)); }

/* ---------- hero ---------- */
.hero{ position:absolute; inset:0; z-index:3; }
/* absolutely positioned so the height percentage resolves against a
   definite box — as a grid item it overflowed and clipped the boots */
.hero-img{
  position:absolute; z-index:3;
  left:69%; transform:translateX(-50%);
  bottom: clamp(56px, 8vh, 76px);
  height: calc(112% - clamp(124px, 17vh, 156px));
  /* the 112% above oversizes the figure on purpose; this cap is what keeps
     it inside the stage instead of running out through the floor */
  max-height: calc(110% - clamp(96px, 13vh, 132px));
  max-width:100%;
  object-fit:contain; object-position:bottom center;
  filter: drop-shadow(0 0 46px rgba(255,26,46,.28));
  /* feather the artwork's left/right edges into the black panel */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* ---------- avatar switcher ---------- */
.av-pick{
  position:absolute; left:69%; transform:translateX(-50%); z-index:6;
  /* clears the action bar along the bottom of the stage — sitting on top of
     the QUICK SCAN row was worse than sitting on the welcome column */
  bottom: clamp(108px, 14vh, 128px);
  display:flex; align-items:center; gap:12px;
  padding:6px 12px; border-radius:12px;
  background:rgba(8,3,5,.55); border:1px solid rgba(255,26,46,.28);
  backdrop-filter:blur(3px);
  opacity:.6; transition:opacity .18s;
}
/* only the avatar itself reveals the picker — hovering anywhere else on the
   stage used to light it up, which was noisy */
.hero-img:hover ~ .av-pick,
.av-pick:hover{ opacity:1; }

.av-arrow{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px; cursor:pointer; transition:.16s;
  background:linear-gradient(180deg, rgba(255,26,46,.24), rgba(255,26,46,.10));
  border:1px solid rgba(255,26,46,.5);
  color:#fff; font-family:var(--body); font-size:19px; line-height:1; font-weight:700;
}
.av-arrow:hover{
  background:linear-gradient(180deg, rgba(255,26,46,.5), rgba(255,26,46,.24));
  border-color:var(--red); box-shadow:0 0 16px rgba(255,26,46,.6);
}
.av-arrow:active{ transform:scale(.92); }

/* wide enough that the longest avatar name never shifts the arrows */
.av-label{ display:flex; align-items:center; justify-content:center; gap:7px; min-width:150px; }
.av-name{
  font-family:var(--head); font-size:10.5px; font-weight:700; letter-spacing:.22em; color:#fff;
  text-shadow:0 0 12px rgba(255,26,46,.8); white-space:nowrap;
}
/* which of the six — kept dim so the name stays the thing you read */
.av-num{
  font-family:var(--head); font-size:9px; font-style:normal; letter-spacing:.08em;
  color:rgba(255,255,255,.42); white-space:nowrap;
}

/* the swap fades the new figure in rather than snapping it */
@keyframes avIn{ from{ opacity:0; transform:translateX(-50%) scale(.97) } to{ opacity:1; transform:translateX(-50%) scale(1) } }
.hero-img.av-in{ animation:avIn .32s ease-out; }
.no-motion .hero-img.av-in{ animation:none; }

.hero-fallback{ display:none; }
body.no-hero .hero-fallback{
  display:grid; place-items:center; position:absolute; inset:auto 0 150px 0; z-index:3;
}
.hf-glow{
  width:220px; height:330px; border-radius:110px 110px 40px 40px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,26,46,.35), rgba(255,26,46,.05) 60%, transparent 72%);
  filter:blur(6px);
}
.hf-text{
  margin-top:14px; text-align:center; font-size:11.5px; letter-spacing:.16em; color:#ffffff;
}
.hf-text code{ color:var(--red); font-size:12.5px; letter-spacing:.06em; }

/* the artwork carries its own glowing platform — only draw ours as a
   stand-in when the image is missing */
body:not(.no-hero) .platform{ display:none; }
.platform{ position:absolute; bottom:96px; left:50%; transform:translateX(-50%); z-index:2; }
.plat-ring{
  position:absolute; left:50%; top:50%; border-radius:50%;
  transform:translate(-50%,-50%) rotateX(72deg);
  border:2px solid rgba(255,26,46,.55); box-shadow:0 0 26px rgba(255,26,46,.55), inset 0 0 26px rgba(255,26,46,.25);
}
.plat-ring.r1{ width:430px; height:430px; animation: spin 22s linear infinite; border-style:dashed; }
.plat-ring.r2{ width:330px; height:330px; animation: spin 16s linear reverse infinite; opacity:.8; }
.plat-ring.r3{ width:210px; height:210px; opacity:.9; }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotateX(72deg) rotate(360deg); } }
.plat-core{
  position:absolute; left:50%; top:50%; width:90px; height:90px;
  transform:translate(-50%,-50%) rotateX(72deg);
  border-radius:50%; background:radial-gradient(circle, rgba(255,26,46,.65), transparent 68%);
  filter:blur(2px);
}

.smoke{ position:absolute; bottom:60px; z-index:1; width:260px; height:150px; border-radius:50%; filter:blur(34px); }
.smoke.s1{ left:4%;  background:rgba(255,60,70,.08); animation: drift 11s ease-in-out infinite; }
.smoke.s2{ right:4%; background:rgba(255,60,70,.065); animation: drift 13s ease-in-out infinite reverse; }
@keyframes drift{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(24px,-18px) } }

/* ---------- action bar ---------- */
.actionbar{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:5;
  display:flex; gap:4px; padding:8px 10px;
  max-width: calc(100% - 24px);        /* never wider than the stage */
  background: rgba(10,6,8,.82); border:1px solid var(--line); border-radius:10px;
  backdrop-filter: blur(10px); box-shadow:0 14px 40px rgba(0,0,0,.7);
}
/* buttons share the bar's width instead of taking a fixed one — with seven
   of them a fixed width overflowed the stage on a 1366 screen */
.action{
  flex:1 1 auto; width:104px; min-width:0; max-width:118px;
  /* Trimmed to sit closer to the rest of the buttons on this screen, which
     run 34–39px tall. This one carries an icon over a two-line label so it
     is always the tallest, but at 74px it was twice the height of anything
     near it — the icon, the gap and the padding each gave a little back. */
  padding:7px 4px 7px; background:transparent; cursor:pointer;
  /* transparent rather than none: the hover and active states below put a
     real border on, and going from none to 1px would jog the whole row */
  border:1px solid transparent;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#ffffff; font-family:var(--body); font-size:clamp(9px, 1.05vh, 10.5px);
  font-weight:600; letter-spacing:.09em; white-space:nowrap;
  border-radius:8px; transition:.2s;
}
.action svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* The Live Chat button's look — see .sc-btn.primary. Only on hover and
   while a panel is open: seven of these washed red at rest would be a red
   strip across the stage, and nothing would be left to say which one is
   the open panel. */
.action:hover{
  color:#fff;
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border-color:rgba(255,26,46,.55);
  box-shadow:0 0 16px rgba(255,26,46,.22);
}
/* The one whose panel is open wears that button's hover state, so it still
   reads as the strongest thing in the bar even with a neighbour under the
   cursor. Keyed to .open — set and cleared from whether the panel is
   actually showing — and not to .active, which only ever meant "the last
   one clicked" and so stayed lit after its panel had closed. */
.action.open, .action.open:hover{
  color:#fff;
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  border-color:rgba(255,26,46,.55);
  box-shadow:0 0 22px rgba(255,26,46,.4);
}
.action.open svg{ filter:drop-shadow(0 0 9px rgba(255,26,46,.9)); }

/* ============================================================
   RIGHT COLUMN
   ============================================================ */
/* the negative margin lets the four rings borrow back part of the panel's
   side padding — the rings fill their grid cell, so cell width is what
   actually caps their size */
.meters{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:0 -6px; }
.meter{ text-align:center; }
.meter-title{ font-size:10.5px; letter-spacing:.18em; color:#ffffff; margin-bottom:clamp(4px,.75vh,7px); }
/* the ring is sized mainly by the column's width, not viewport height —
   shrinking it vertically is what used to crush the label inside it */
.meter-ring{ position:relative; width:100%; aspect-ratio:1; max-width:clamp(78px, 9.8vh, 104px); margin:0 auto; }
.meter-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.meter-ring .ring-track{ stroke-width:6; }
.meter-ring .ring-fill{ stroke-width:6; }
.meter-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1;
}
.meter-val{
  font-family:var(--head); font-size:12px; font-weight:700;
  color:#fff; line-height:1; white-space:nowrap;
}
.meter-unit{
  font-size:clamp(7px, .9vh, 9px); letter-spacing:.16em; color:#ffffff;
  line-height:1; margin-top:3px; white-space:nowrap;
}

.info-list{ list-style:none; display:flex; flex-direction:column; gap:var(--row-gap); }
.info-list li{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; }
.info-list span{ color:#ffffff; }
.info-list b{ font-weight:600; color:#ffffff; }

.scan-title{ font-size:11px; letter-spacing:.16em; color:#ffffff; margin-bottom:clamp(7px,1.4vh,12px); }
.scan-row{ display:flex; align-items:center; gap:16px; }
.scan-ring{
  position:relative; flex:0 0 auto;
  width: clamp(60px, 7.8vh, 82px); height: clamp(60px, 7.8vh, 82px);
}
.scan-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.scan-ring .ring-track{ stroke-width:7; }
.scan-ring .ring-fill{ stroke-width:7; }
.scan-pct{
  position:absolute; inset:0; display:grid; place-content:center;
  font-family:var(--head); font-size:17px; font-weight:700; color:#fff;
}
.scan-meta{ flex:1; display:flex; flex-direction:column; gap:clamp(8px,1.6vh,14px); }
.sm-label{ font-size:12px; color:#ffffff; }
.sm-val{
  font-size:12.5px; color:#ffffff; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Roomier than it was. The gap was tuned for four single-line rows; these
   carry two lines each, and at 4-6px the boxes read as one block rather
   than three separate sign-ins. */
.activity-list{ list-style:none; display:flex; flex-direction:column; gap:clamp(8px,1.1vh,12px); }
.act{
  display:flex; align-items:center; gap:11px; padding:clamp(6px,.85vh,9px) 12px;
  background:rgba(255,255,255,.025); border:1px solid var(--line-soft); border-radius:7px;
  transition:.18s;
}
.act:hover{ background:rgba(255,26,46,.07); border-color:var(--line); }
.act-icon{ width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; }
/* a default stroke, so a row with no tone class still draws its icon —
   the three .act.ok / .danger / .warn rules below all outrank this */
.act-icon svg{ width:19px; height:19px; fill:none; stroke:#8b8b95; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.act.ok    .act-icon svg{ stroke:var(--green); filter:drop-shadow(0 0 6px rgba(47,208,106,.6)); }
.act.danger .act-icon svg{ stroke:var(--red);  filter:drop-shadow(0 0 6px rgba(255,26,46,.7)); }
.act.warn  .act-icon svg{ stroke:var(--amber); filter:drop-shadow(0 0 6px rgba(255,166,46,.6)); }
.act-body{ flex:1; min-width:0; }
.act-title{ font-size:12.5px; color:#e2e2ea; }
.act.danger .act-title{ color:var(--red); }
.act-sub{ font-size:11px; color:#ffffff; margin-top:3px; }
/* right-hand column: when it happened, and from what. flex:0 0 auto keeps
   it at its natural width so the location on the left takes the squeeze */
.act-right{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end;
  text-align:right; min-width:0;
}
/* the device, under the time — dimmer, because it is the part you check
   second */
.act-meta{ font-size:10.5px; color:#8b8b95; margin-top:2px; white-space:nowrap; }
.act-time{ font-size:10.5px; color:#ffffff; white-space:nowrap; }
/* an account that has not signed in since the history existed */
.act-empty{ padding:10px 2px; font-size:12px; line-height:1.6; color:#8b8b95; }

/* ============================================================
   ICON RAIL
   ============================================================ */
.rail{ display:flex; flex-direction:column; gap:10px; }
.rail-btn{
  width:var(--rail-w); height:46px; display:grid; place-items:center; cursor:pointer;
  background: linear-gradient(160deg, rgba(20,10,13,.8), rgba(12,7,9,.7));
  border:1px solid var(--line); border-radius:9px; color:var(--red); transition:.18s;
  font-family:var(--body);
}
.rail-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* the Live Chat button's look — see .sc-btn.primary. On hover only: six
   of these lit at rest would be a red ladder down the edge of the screen,
   and nothing would be left to say which panel is open. The open one is
   handled further down, on .open. */
.rail-btn:hover{
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border-color:rgba(255,26,46,.55);
  box-shadow:0 0 16px rgba(255,26,46,.22);
  color:#fff;
}

/* ============================================================
   STATUS BAR
   ============================================================ */
.statusbar{
  position:relative; z-index:20; flex:0 0 auto; height: clamp(28px, 3.6vh, 36px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 20px; border-top:1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(14,4,7,.96));
  font-size:11.5px; letter-spacing:.12em; color:#ffffff;
  overflow-x:auto; scrollbar-width:none;
}
.statusbar::-webkit-scrollbar{ display:none; }
.sb-left,.sb-right{ display:flex; align-items:center; gap:26px; flex:0 0 auto; }
@media (max-width:600px){
  .statusbar{ gap:16px; font-size:10.5px; }
  .sb-left,.sb-right{ gap:14px; }
}
.sb-item{ display:inline-flex; align-items:center; gap:7px; }
.sb-item b{ font-weight:700; }
.sb-ic{ width:14px; height:14px; fill:none; stroke:var(--green); stroke-width:1.6; stroke-linejoin:round; }
.sb-item:last-child .sb-ic{ stroke:var(--green); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Short screens (laptops at 768/800) can't hold four full-size panels in the
   right column — it wants ~800px in ~670px. Rather than let the fit pass
   shrink the whole column to 82% (which makes the side columns read smaller
   than the centre stage), tighten the padding and dial down the gauges here.
   Type sizes are untouched; only the air around them goes. */
@media (max-height:880px){
  :root{
    --gap:     6px;
    --pad-y:   6.5px;
    --row-gap: 6px;
  }
  .meter-ring{ max-width:56px; }
  /* 4px was set when these rows held one line of text; they hold two now */
  .act{ padding:7px 10px; }
  .activity-list{ gap:7px; }
  .chart-wrap{ height:82px; }
  .lp-lead{ font-size:11.5px; line-height:1.4; }
  .lp-cta{ padding:7px 8px; }
  .legend{ margin-bottom:5px; }
  /* the AI card is new weight in the left column — give it back here */
  .ai-text{ margin-top:5px; font-size:11.5px; line-height:1.42; }
  /* both call-to-action buttons shrink together — leaving .cv-cta out of
     this left it 6px taller than the AI one on short screens */
  .ai-cta, .cv-cta{ margin-top:8px; padding:7px 8px; }
  /* on the container, not the card: the card's own top margin is zeroed as
     the first child so the scrollbar lane starts level with it */
  .w-cards{ margin-top:30px; }
  .mission-card{ margin-top:9px; }
  .support-card{ margin-top:8px; padding:8px 12px 9px; }
  .sc-text{ margin-top:6px; font-size:11.5px; line-height:1.42; }
  .sc-actions{ margin-top:8px; gap:6px; }
  .sc-btn{ padding:7px 5px; font-size:11px; }
  .sc-btn.wide{ padding:6px 5px; font-size:10.5px; }
  .mc-cta{ padding:7px 11px; }
  .mc-prow{ margin-top:8px; }
  .quote-card{ padding:9px 14px 8px 30px; }
  .mission-card{ padding:9px 13px 10px; }
  /* SYSTEM STATUS now lives in the right column, which is the tight one —
     the gauge and both lists give back the height it needs */
  /* the bigger monitoring rings are paid for here, so the right column
     still lands at full scale on a 768-tall screen */
  .secure-gauge{ width:84px; height:84px; }
  .secure-val{ font-size:17px; }
  .secure-label{ font-size:9px; margin-top:2px; }
  .status-list{ gap:5px; }
  .info-list{ gap:5px; }
  .panel-foot{ padding:5px 16px; }
}

@media (max-width:1600px){
  .layout{ grid-template-columns: 352px minmax(0,1fr) 352px var(--rail-w); }
  .w-name{ font-size:26px; }
  .action{ max-width:98px; }
  .action svg{ width:20px; height:20px; }   /* the rail's icon size */
}
@media (max-width:1280px){
  body{ overflow:auto; }
  .layout{ grid-template-columns: 1fr 1fr; grid-template-areas:"l c" "r c" "rail rail"; }
  .col-left{ grid-area:l; } .col-center{ grid-area:c; min-height:640px; } .col-right{ grid-area:r; }
  .rail{ grid-area:rail; flex-direction:row; justify-content:center; }
  .col{ overflow:visible; }

  /* Nothing special for the welcome column here any more. Letting it flow
     with the page looked right until the numbers were checked: .stage is a
     fixed 640px in this layout, so a column sized to its content simply
     overflowed and was clipped, dropping the support card behind the
     action bar. Keeping the same bottom pin as the wide layout bounds the
     column to the stage, and the cards scroll inside it exactly as they do
     there. */
}
@media (max-width:900px){
  body{ overflow:auto; }
  .layout{ grid-template-columns:1fr; grid-template-areas:"c" "l" "r" "rail"; }
  .mainnav{ display:none; }
  .col-center{ min-height:560px; }
  .actionbar{ flex-wrap:wrap; justify-content:center; width:calc(100% - 24px); }
}

/* ============================================================
   MY CLASS — the rail's second button

   A panel anchored to the rail rather than a full-screen dialog: it
   answers two short questions and dimming the whole console to say
   "Mon–Fri, 7 PM" would be out of proportion to the asking.
   ============================================================ */
.classpop{
  position:fixed; z-index:80; top:96px; right:calc(var(--rail-w) + 22px);
  width:min(330px, calc(100vw - 40px));
  padding:14px; border-radius:14px;
  background:rgba(14,10,12,.98); border:1px solid rgba(255,26,46,.34);
  box-shadow:0 26px 70px rgba(0,0,0,.72), 0 0 44px rgba(255,26,46,.12);
}
.classpop[hidden]{ display:none; }
.classpop-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.07);
}
.classpop-head h2{
  font-family:var(--head); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
}
.classpop-x{
  width:26px; height:26px; border-radius:7px; cursor:pointer; line-height:1;
  background:transparent; border:1px solid rgba(255,255,255,.12);
  color:#9b9ba6; font-family:var(--body); font-size:16px; transition:.14s;
}
.classpop-x:hover{ border-color:#ff1a2e; color:#ff1a2e; }

.classpop-code{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:12px; padding:8px 11px; border-radius:9px;
  background:rgba(255,26,46,.08); border:1px solid rgba(255,26,46,.22);
}
.classpop-code span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#9b9ba6; }
.classpop-code b{ font-family:var(--head); font-size:13px; font-weight:700; color:#ff5a68; }

.classpop-row{ display:flex; align-items:flex-start; gap:10px; padding:8px 2px; }
.classpop-row svg{
  width:17px; height:17px; margin-top:1px; flex:0 0 auto;
  fill:none; stroke:#ff1a2e; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.classpop-row > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.classpop-row i{ font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#7c7c88; }
.classpop-row b{ font-size:13.5px; font-weight:600; color:#e9e9ee; }
.classpop-row b.none{ font-weight:400; color:#6a6a74; }
.classpop-row em{ font-style:normal; font-size:11px; color:#8b8b95; }

/* the Live Chat button's look — see .sc-btn.primary */
/* 9px and 8px, not 11px and 10px: at 41px tall with a 10px radius this was
   the largest and roundest button on the screen, next to a Live Chat at 35
   and a Send request at 36. */
.classpop-join{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:12px; padding:9px; border-radius:8px; text-decoration:none;
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border:1px solid rgba(255,26,46,.55);
  box-shadow:0 0 16px rgba(255,26,46,.22);
  font-family:var(--head); font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; transition:.16s;
}
.classpop-join svg{ width:17px; height:17px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linejoin:round; }
.classpop-join:hover{
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  box-shadow:0 0 22px rgba(255,26,46,.4);
}

/* the address in full under the button, so it is clear where it goes
   before it is pressed */
.classpop-url{
  margin-top:7px; font-size:10.5px; color:#6a6a74; text-align:center;
  overflow-wrap:anywhere;
}
.classpop-note{
  margin-top:12px; padding:9px 11px; border-radius:9px; font-size:12px; line-height:1.5;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#9b9ba6;
}
.classpop-note.done{ margin-top:0; margin-bottom:10px; border-color:rgba(255,26,46,.24); color:#c9a0a5; }
.classpop-empty{ font-size:12.5px; line-height:1.6; color:#9b9ba6; }

/* who the trainer is */
.classpop-who{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.classpop-face{
  width:40px; height:40px; flex:0 0 auto; border-radius:11px;
  display:grid; place-items:center;
  background:rgba(255,26,46,.14); border:1px solid rgba(255,26,46,.3);
  font-family:var(--head); font-size:15px; font-weight:700; color:#ff5a68;
}
.classpop-who > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.classpop-who b{ font-size:14px; font-weight:600; color:#e9e9ee; }
.classpop-who i{ font-style:normal; font-size:11px; color:#8b8b95; }

/* what the trainer wrote — their words, so they get the room */
.classpop-news{
  padding:11px 12px; border-radius:10px; font-size:13px; line-height:1.6; color:#e2e2e9;
  background:rgba(255,26,46,.06); border:1px solid rgba(255,26,46,.2);
}
.classpop-by{ margin-top:8px; font-size:10.5px; color:#7c7c88; text-align:right; }

.classpop-lead{ font-size:12.5px; line-height:1.65; color:#b9b9c4; }
.classpop-lead b{ color:#fff; }
.classpop-stats{
  display:flex; gap:8px; margin:12px 0 4px;
}
.classpop-stats span{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 6px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#8b8b95;
}
.classpop-stats b{ font-family:var(--head); font-size:17px; font-weight:800; color:#ff5a68; }

/* the referral code, and who has used it */
.classpop-code.refcode{ position:relative; padding-right:38px; }
.classpop-code.refcode b{ font-size:15px; letter-spacing:.06em; }
.classpop-code.refcode .pf-id-copy{ position:absolute; right:8px; top:50%; transform:translateY(-50%); }
.classpop-code.copied b::after{
  content:'Copied'; margin-left:8px; font-family:var(--body); font-size:10px;
  letter-spacing:.06em; color:#7ee08a;
}

.reflist{ margin-top:10px; display:flex; flex-direction:column; gap:1px; }
.reflist li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.03);
}
.reflist span{ font-size:12.5px; color:#e2e2e9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reflist i{
  flex:0 0 auto; font-style:normal; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:#7c7c88;
}
.reflist i.on{ color:#7ee08a; }

/* ============================================================
   THE TWO ACTION-BAR PANELS — news, and rating a trainer

   Centred rather than pinned to the rail like the others: these open from
   a button at the bottom of the middle column, and a panel that flew to
   the far edge of the screen would leave the reader hunting for it.
   ============================================================ */
/* Fewer buttons than the seven this bar was built for, but longer labels.
   The width is left to flex — an earlier version set a 160px minimum here,
   which cannot shrink, so five of them ran past the end of the bar and the
   last label was cut in half. Sharing the width is what the base rule
   already does; this only widens the ceiling and lets the words wrap. */
.actionbar.compact{ justify-content:center; gap:4px; }
/* A width to aim for, not a floor. Shrink is left on so a narrow screen
   makes them give ground rather than push the bar past the stage; grow is
   off so that when the bar wraps, a button left alone on the last row
   stays the size of the others instead of stretching across it. */
.actionbar.compact .action{
  flex:0 1 108px; width:108px; min-width:0; max-width:none;
  padding:7px 5px 7px;
}
/* A hairline in each gap.
   The cells are already equal and the icons evenly spaced, but the labels
   are centred and run from 28px ("FOCUS") to 67px ("IMPROVEMENTS") — so
   the space between the *words* varies by twenty pixels and the shortest
   label looks like it has been pushed away from its neighbour. The rule
   gives the eye a fixed thing to measure from, and the varying slack
   around each label reads as a centred cell rather than a bad gap. */
.actionbar.compact .action{ position:relative; }
.actionbar.compact .action + .action::before{
  content:''; position:absolute; left:-3px; top:24%; bottom:24%; width:1px;
  background:rgba(255,255,255,.08);
}

/* Two lines are reserved whether or not the label needs them, so a
   one-word button sits at the same height as "RATE MY TRAINER" and the
   row of icons stays level. */
.actionbar.compact .action span{
  display:flex; align-items:flex-start; justify-content:center;
  min-height:2.3em; line-height:1.15; text-align:center;
  white-space:normal; overflow-wrap:break-word;
}

/* ---------- RESPECT: conduct points and stories ----------
   Wider than the other panels: this one is read rather than glanced at,
   and a column of prose at 430px is a column of two-word lines. */
.ccpop.wide{ width:min(560px, calc(100vw - 40px)); max-height:min(680px, calc(100vh - 70px)); }

.conductlist{ margin:14px 0 0; padding:0; list-style:none; counter-reset:conduct; }
.conductlist li{
  position:relative; padding:11px 0 11px 34px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.conductlist li:last-child{ border-bottom:0; }
.conductlist li::before{
  counter-increment:conduct; content:counter(conduct);
  position:absolute; left:0; top:11px;
  width:22px; height:22px; border-radius:7px;
  display:grid; place-items:center;
  background:rgba(255,26,46,.12); border:1px solid rgba(255,26,46,.28);
  font-family:var(--head); font-size:10px; font-weight:700; color:#ff5a68;
}
.conductlist b{ display:block; font-size:13.5px; font-weight:600; color:#fff; }
.conductlist span{ display:block; margin-top:4px; font-size:12.5px; line-height:1.6; color:#a9a9b4; }

.respect-h{
  margin:18px 0 4px; padding-top:14px; border-top:1px solid rgba(255,26,46,.22);
  font-family:var(--head); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#ff5a68;
}
/* The list of titles: one row per story, tap to read it.
   font-family is named because a <button> does not inherit it — left off,
   these titles came out in the browser's own default while everything
   around them stayed in Rajdhani. */
/* ---------- LIVE CHAT ---------- */
#chatPop .ccpop-scroll{ min-height:220px; }
.chat-msg{ margin-bottom:12px; }
.chat-who{
  display:block; margin-bottom:3px;
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.chat-msg.bot .chat-who{ color:#ff5a68; }
.chat-msg.me  .chat-who{ color:#8b8b95; }
.chat-msg p{
  padding:10px 12px; border-radius:10px;
  font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere;
}
.chat-msg.bot p{
  background:rgba(255,26,46,.07); border:1px solid rgba(255,26,46,.18); color:#d5d5de;
}
.chat-msg.me p{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#e9e9ee;
}
.chat-msg.thinking p{ color:#8b8b95; font-style:italic; }
.chat-msg.err p{ border-color:rgba(255,138,148,.4); color:#ff8a94; }

.chat-bar{ display:flex; gap:8px; margin-top:10px; }
.chat-bar input{
  flex:1; min-width:0; padding:11px 13px; border-radius:10px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,26,46,.22);
  font-family:var(--body); font-size:13px; color:var(--text); outline:none;
}
.chat-bar input:focus{ border-color:#ff1a2e; background:rgba(255,26,46,.06); }
.chat-bar input::placeholder{ color:#5e5e68; }
.chat-bar input:disabled{ opacity:.6; }
/* the Live Chat button's look — see .sc-btn.primary. It is the button
   that opens this panel, so the send inside it matching is the least
   surprising thing it could do. */
.chat-bar button{
  flex:0 0 auto; width:44px; border-radius:10px; cursor:pointer;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border:1px solid rgba(255,26,46,.55);
  box-shadow:0 0 16px rgba(255,26,46,.22);
  font-family:var(--body); transition:.16s;
}
.chat-bar button svg{
  width:18px; height:18px; fill:none; stroke:#fff;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.chat-bar button:hover{
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  box-shadow:0 0 22px rgba(255,26,46,.4);
}
.chat-bar button:disabled{ opacity:.5; cursor:default; box-shadow:none; }

/* said once, at the bottom, rather than dressed up as a person online */
.chat-foot{
  margin-top:8px; font-size:10.5px; line-height:1.5; color:#6a6a74; text-align:center;
}

/* ---------- TICKETS: raising one, and what came back ---------- */
.tk-subject{
  width:100%; margin-bottom:8px; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,26,46,.22);
  font-family:var(--body); font-size:13px; color:var(--text); outline:none;
}
#tkMessage{
  width:100%; padding:10px 12px; border-radius:10px; resize:vertical;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,26,46,.22);
  font-family:var(--body); font-size:13px; line-height:1.6; color:var(--text); outline:none;
}
.tk-subject:focus, #tkMessage:focus{ border-color:#ff1a2e; background:rgba(255,26,46,.06); }
.tk-subject::placeholder, #tkMessage::placeholder{ color:#5e5e68; }
.tk-err{ display:block; margin:-4px 0 8px; font-style:normal; font-size:11.5px; color:#ff8a94; }
.tk-err:empty{ display:none; }
#tkMsg{ margin-top:9px; font-size:12px; }
#tkMsg.ok{ color:#7ee08a; }
#tkMsg.bad{ color:#ff8a94; }

.tk-item{
  padding:11px 12px; margin-top:8px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
}
.tk-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tk-top b{ font-size:13px; font-weight:600; color:#e9e9ee; }
.tk-pill{
  flex:0 0 auto; font-style:normal; font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
}
.tk-pill.open{ background:rgba(255,176,32,.14); color:#ffb020; }
.tk-pill.answered{ background:rgba(126,224,138,.14); color:#7ee08a; }
.tk-pill.closed{ background:rgba(255,255,255,.07); color:#8b8b95; }
.tk-item > p{ margin-top:6px; font-size:12.5px; line-height:1.6; color:#a9a9b4; }
.tk-item > small{ display:block; margin-top:7px; font-size:10.5px; color:#6a6a74; }

/* the answer, set apart so it does not read as more of the question */
.tk-reply{
  margin-top:9px; padding:9px 11px; border-radius:8px;
  background:rgba(255,26,46,.07); border-left:2px solid #ff1a2e;
}
.tk-reply span{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#ff5a68;
}
.tk-reply p{ margin-top:4px; font-size:12.5px; line-height:1.6; color:#d5d5de; }

/* the admin side */
.pt-ticket{
  padding:13px 14px; border-radius:11px;
  background:rgba(255,255,255,.03); border:1px solid var(--pt-edge);
}
.pt-ticket-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pt-ticket-head b{ font-size:13.5px; font-weight:700; color:#fff; }
.pt-ticket-body{ margin-top:7px; font-size:12.5px; line-height:1.6; color:#b9b9c4; }
.pt-ticket-meta{ display:block; margin:8px 0 11px; font-size:10.5px; color:var(--muted); }
.pt-select.tiny{ width:auto; padding:7px 28px 7px 10px; font-size:11.5px; }

/* ---------- HELP: questions that open, and who to ask ---------- */
.faqlist{ display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.faqlist details{
  border-radius:9px; background:rgba(255,255,255,.03); transition:.14s;
}
.faqlist details[open]{ background:rgba(255,26,46,.07); }
.faqlist summary{
  display:flex; align-items:center; gap:9px; padding:11px 12px; cursor:pointer;
  font-size:13px; font-weight:600; color:#e9e9ee; list-style:none;
}
/* the default triangle differs per browser, so it is replaced by one that
   matches the chevrons used everywhere else here */
.faqlist summary::-webkit-details-marker{ display:none; }
.faqlist summary::before{
  content:''; flex:0 0 auto; width:7px; height:7px; margin-left:2px;
  border-right:2px solid #ff1a2e; border-bottom:2px solid #ff1a2e;
  transform:rotate(-45deg); transition:transform .16s;
}
.faqlist details[open] summary::before{ transform:rotate(45deg); }
.faqlist summary:hover{ color:#fff; }
.faqlist p{
  padding:0 12px 12px 30px; font-size:12.5px; line-height:1.65; color:#a9a9b4;
}

.helpwho{
  display:flex; align-items:center; gap:11px; margin-top:8px;
  padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,26,46,.16);
}
.helpwho > span:nth-child(2){ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.helpwho b{ font-size:13.5px; font-weight:600; color:#e9e9ee; }
.helpwho i{ font-style:normal; font-size:11px; line-height:1.45; color:#8b8b95; }
.helpwho a{
  flex:0 0 auto; padding:7px 13px; border-radius:8px; text-decoration:none;
  background:rgba(255,26,46,.14); border:1px solid rgba(255,26,46,.4);
  font-size:11.5px; font-weight:700; letter-spacing:.06em; color:#ff5a68; transition:.14s;
}
.helpwho a:hover{ background:#ff1a2e; border-color:#ff1a2e; color:#fff; }
.classpop-face.support{ display:grid; place-items:center; }
.classpop-face.support svg{
  width:20px; height:20px; fill:none; stroke:#ff5a68;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.storypick{ display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.storypick button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 12px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid transparent; transition:.14s;
  font-family:var(--body);
}
.storypick button span{
  flex:1; min-width:0; font-size:13px; font-weight:600; color:#e9e9ee;
}
.storypick button i{
  flex:0 0 auto; font-style:italic; font-size:10.5px; color:#6a6a74;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38%;
}
.storypick button svg{
  flex:0 0 auto; width:14px; height:14px; fill:none; stroke:#ff1a2e;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .14s;
}
.storypick button:hover{
  background:rgba(255,26,46,.1); border-color:rgba(255,26,46,.3);
}
.storypick button:hover svg{ transform:translateX(2px); }

/* the way back out of one story */
.storyback{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:10px;
  padding:7px 11px 7px 8px; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  font-family:var(--body); font-size:11.5px; font-weight:600; color:#9b9ba6;
  transition:.14s;
}
.storyback svg{ width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .14s; }
.storyback:hover{ color:#ff5a68; border-color:rgba(255,26,46,.4); }
.storyback:hover svg{ transform:translateX(-2px); }

.storyitem{
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.storyitem[hidden]{ display:none; }
.storyitem:last-child{ border-bottom:0; }
.storyitem b{ display:block; font-size:13.5px; font-weight:700; color:#fff; }
.storyitem p{ margin-top:6px; font-size:12.5px; line-height:1.7; color:#b9b9c4; white-space:pre-line; }
.storyitem small{ display:block; margin-top:7px; font-size:10.5px; color:#6a6a74; font-style:italic; }

/* the same list on the admin page, without the numbering */
.pt-conductlist{ display:flex; flex-direction:column; gap:1px; }
.pt-conductlist li{
  padding:9px 11px; border-radius:8px; background:rgba(255,255,255,.03);
}
.pt-conductlist b{ display:block; font-size:12.5px; font-weight:600; color:#e9e9ee; }
.pt-conductlist span{ display:block; margin-top:3px; font-size:11.5px; line-height:1.55; color:var(--muted); }

/* ---------- FOLLOW US ---------- */
.sociallist{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
  gap:8px; margin-top:12px;
}
.sociallist a{
  display:flex; align-items:center; gap:9px;
  padding:11px 12px; border-radius:10px; text-decoration:none;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,26,46,.2);
  font-size:12.5px; font-weight:600; color:#e2e2e9; transition:.16s;
}
.sociallist svg{
  width:19px; height:19px; flex:0 0 auto; fill:none; stroke:#ff1a2e;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.sociallist a:hover{
  border-color:#ff1a2e; background:rgba(255,26,46,.12);
  transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,26,46,.18);
}
.sociallist a:hover svg{ stroke:#ff5a68; }

/* the admin form's rows: an icon beside each label so the list is
   scannable by shape rather than only by reading nine words */
.soc-row > span{ display:flex; align-items:center; gap:8px; }
.soc-ic{
  width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- FOCUS: the student's own list ---------- */
.focus-add{ display:flex; gap:8px; margin-bottom:11px; }
/* 8px to match the panels' other fields; 10px made this row read rounder
   than everything under it */
.focus-add input{
  flex:1; min-width:0; padding:10px 12px; border-radius:8px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,26,46,.22);
  font-family:var(--body); font-size:13px; color:var(--text); outline:none;
}
.focus-add input:focus{ border-color:#ff1a2e; background:rgba(255,26,46,.06); }
.focus-add input::placeholder{ color:#5e5e68; }
/* the Live Chat button's look — see .sc-btn.primary */
.focus-add button{
  flex:0 0 auto; width:38px; border-radius:8px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border:1px solid rgba(255,26,46,.55);
  box-shadow:0 0 16px rgba(255,26,46,.22);
  color:#fff; font-family:var(--body); font-size:17px; line-height:1; transition:.16s;
}
.focus-add button:hover{
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  box-shadow:0 0 22px rgba(255,26,46,.4);
}
/* the list is full — the form says so rather than going quietly dead */
.focus-add input:disabled, .focus-add button:disabled{
  opacity:.45; cursor:not-allowed; box-shadow:none;
}
.focus-cap{
  margin:-6px 0 11px; font-size:11px; line-height:1.5; color:#ff8a94;
}

.focus-list{ display:flex; flex-direction:column; gap:2px; }
.focus-list li{
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:8px; transition:.14s;
}
.focus-list li:hover{ background:rgba(255,255,255,.04); }
.focus-list label{ flex:1; display:flex; align-items:center; gap:9px; cursor:pointer; min-width:0; }
.focus-list input[type=checkbox]{
  flex:0 0 auto; width:16px; height:16px; accent-color:#ff1a2e; cursor:pointer;
}
.focus-list span{ font-size:13px; color:#e2e2e9; overflow-wrap:anywhere; }
/* struck through and dimmed, so a finished task stays visible as progress
   rather than vanishing the moment it is ticked */
.focus-list li.done span{ color:#6a6a74; text-decoration:line-through; }
.focus-del{
  flex:0 0 auto; width:22px; height:22px; border-radius:6px; cursor:pointer;
  background:transparent; border:0; color:#5e5e68;
  font-family:var(--body); font-size:16px; line-height:1;
  opacity:0; transition:.14s;
}
.focus-list li:hover .focus-del, .focus-del:focus-visible{ opacity:1; }
.focus-del:hover{ color:#ff1a2e; background:rgba(255,26,46,.12); }

.focus-empty{ padding:14px 4px; font-size:12.5px; line-height:1.6; color:#6a6a74; }

.focus-notelabel{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:14px 0 6px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7c7c88;
}
/* the word count sits on the label. <u> because that is the element the
   other counters in this app use, so it inherits their reset */
.focus-words{
  font-size:10px; letter-spacing:.06em; text-transform:none;
  color:#6a6a74; text-decoration:none; transition:color .18s;
}
.focus-words.at{ color:#ff8a94; }
/* a brief flash when text was actually cut, so the trim is not silent */
.focus-words.cut{ color:#ff1a2e; }
#focusNote{
  width:100%; padding:10px 12px; border-radius:10px; resize:vertical;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,26,46,.22);
  font-family:var(--body); font-size:13px; line-height:1.6; color:var(--text); outline:none;
}
#focusNote:focus{ border-color:#ff1a2e; background:rgba(255,26,46,.06); }
#focusNote::placeholder{ color:#5e5e68; }

.focus-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:11px; padding-top:10px; border-top:1px solid rgba(255,255,255,.07);
  font-size:11px; color:#6a6a74;
}
.focus-foot b{ font-family:var(--head); font-size:11px; font-weight:700; color:#ff5a68; }

.ccpop{
  position:fixed; z-index:90; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(430px, calc(100vw - 40px)); max-height:min(560px, calc(100vh - 80px));
  display:flex; flex-direction:column;
  padding:14px; border-radius:14px;
  background:rgba(14,10,12,.98); border:1px solid rgba(255,26,46,.34);
  box-shadow:0 30px 80px rgba(0,0,0,.8), 0 0 54px rgba(255,26,46,.14);
}
.ccpop[hidden]{ display:none; }
/* the list scrolls, the heading does not */
.ccpop-scroll{ overflow-y:auto; margin:0 -4px; padding:0 4px; }

.newsitem{ padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.newsitem:last-child{ border-bottom:0; }
.newsitem b{ display:block; font-size:13.5px; font-weight:700; color:#fff; }
.newsitem p{ margin-top:5px; font-size:12.5px; line-height:1.6; color:#b9b9c4; }
.newsitem a{ display:inline-block; margin-top:6px; font-size:12px; color:#ff5a68; text-decoration:none; }
.newsitem a:hover{ text-decoration:underline; }
.newsitem small{ display:block; margin-top:6px; font-size:10.5px; color:#6a6a74; }

/* Five stars, drawn from radio buttons so the keyboard and the form both
   behave. Laid out in reverse so the sibling selector can light every star
   up to the one hovered or chosen — a later sibling cannot be styled from
   an earlier one, so the markup counts down from 5. */
.fb-stars{ display:flex; flex-direction:row-reverse; justify-content:center; gap:4px; margin:12px 0; border:0; padding:0; }
.fb-stars input{ position:absolute; opacity:0; width:0; height:0; }
.fb-stars label{
  font-size:30px; line-height:1; color:#3a2a2e; cursor:pointer; transition:.12s;
}
.fb-stars input:checked ~ label,
.fb-stars label:hover,
.fb-stars label:hover ~ label{ color:#ff1a2e; text-shadow:0 0 14px rgba(255,26,46,.6); }
.fb-stars input:focus-visible + label{ outline:2px solid #ff1a2e; outline-offset:3px; border-radius:4px; }

#improveText,
#fbComment{
  width:100%; padding:10px 12px; border-radius:10px; resize:vertical;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,26,46,.22);
  font-family:var(--body); font-size:13px; color:var(--text); outline:none;
}
#improveText:focus,
#fbComment:focus{ border-color:#ff1a2e; background:rgba(255,26,46,.06); }
#improveText::placeholder,
#fbComment::placeholder{ color:#5e5e68; }
#improveMsg,
#fbMsg{ margin-top:9px; font-size:12px; }
#improveMsg.ok, #fbMsg.ok{ color:#7ee08a; }
#improveMsg.bad, #fbMsg.bad{ color:#ff8a94; }

.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;
}

/* the star row on the admin side, read-only */
.pt-stars i{ font-style:normal; color:#3a2a2e; }
.pt-stars i.on{ color:#ff1a2e; }
.pt-starnum{
  margin-left:6px; font-family:var(--head); font-size:11px; font-weight:700;
  color:#8b8b95; letter-spacing:.04em;
}

/* A rail button with something unread behind it. The whole button breathes
   rather than just wearing a dot: the rail sits at the edge of a busy screen
   and a 7px dot there is easy to never notice. It stops the moment the panel
   is opened, and the account remembers — so it does not come back on the
   next load, and does come back when the trainer posts something new. */
.rail-btn{ position:relative; }
.rail-btn.has-new{
  border-color:#ff1a2e; color:#ff5a68;
  animation:railGlow 1.9s ease-in-out infinite;
}
.rail-btn.has-new::after{
  content:''; position:absolute; top:6px; right:6px; width:8px; height:8px;
  border-radius:50%; background:#ff1a2e;
  box-shadow:0 0 8px rgba(255,26,46,.95); border:1.5px solid #0b0709;
}
@keyframes railGlow{
  0%, 100%{ box-shadow:0 0 0 rgba(255,26,46,0);   background:rgba(255,26,46,.08); }
  50%     { box-shadow:0 0 18px rgba(255,26,46,.55); background:rgba(255,26,46,.2); }
}
/* somebody who has asked for less movement gets the colour and the dot,
   which carry the same message without the pulse */
@media (prefers-reduced-motion:reduce){
  .rail-btn.has-new{ animation:none; background:rgba(255,26,46,.16); }
}

/* The one whose panel is open wears that button's hover state, a step
   stronger, so it stays the brightest thing in the rail even with a
   neighbour under the cursor. */
.rail-btn.open, .rail-btn.open:hover{
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  border-color:rgba(255,26,46,.55);
  box-shadow:0 0 22px rgba(255,26,46,.4);
  color:#fff;
}

@media (max-width:1280px){
  /* the rail is a horizontal strip down here, so anchoring to its width
     would put the panel off the side of the screen */
  .classpop{ top:auto; bottom:16px; right:16px; }
}

/* ============================================================
   COMMAND GRID — three arrangements of the three columns

   The rail's first button steps through them, and the fourth press is the
   first one again:

     0  panels · console · readouts     (the default)
     1  panels · readouts · console     console trades with the readouts
     2  console · panels · readouts     console trades with the panels
     3  console · readouts · panels     console leads, the two narrow swap

   The console leads in both 2 and 3; what differs is which narrow column
   sits beside it. Between them that is every arrangement with the console
   in the middle or at the front, which is the only place a column built
   round a full-height figure reads properly.

   The wide track travels with the console rather than staying where it
   was. Dropping a column built round a full-height figure into a 408px
   slot would make a sidebar of it, so the sizes follow the content: the
   1fr track is wherever the console is, and the two narrow columns keep
   the width they were designed at. Nothing is rescaled, only reordered —
   which is also why the fit pass in js/app.js still measures the same two
   columns whatever the arrangement.

   The rail is pinned to column four in all three. It is the thing you
   press to change the layout, so it is the one thing that must not move
   under the cursor while you press it.

   Every column names its row as well as its track. Auto-placement is
   sparse — it walks the grid forwards only — and the markup order is
   left, centre, right, rail. Send the centre column to track 3 and the
   cursor is past track 2, so the right column cannot go back for it and
   opens a second row instead, taking the rail down with it. Naming the
   row pins all four to the same one and the markup order stops mattering.

   Only above 1280px. Below that the layout is grid-template-areas and the
   columns are stacked, where "left of" and "right of" mean nothing.
   ============================================================ */
@media (min-width:1281px){
  /* 1 — console on the right */
  .layout[data-grid="1"]{ grid-template-columns: 408px 408px minmax(0,1fr) var(--rail-w); }
  .layout[data-grid="1"] .col-left  { grid-column:1; grid-row:1; }
  .layout[data-grid="1"] .col-right { grid-column:2; grid-row:1; }
  .layout[data-grid="1"] .col-center{ grid-column:3; grid-row:1; }
  .layout[data-grid="1"] .rail      { grid-column:4; grid-row:1; }

  /* 2 — console at the front, panels take second; readouts do not move */
  .layout[data-grid="2"]{ grid-template-columns: minmax(0,1fr) 408px 408px var(--rail-w); }
  .layout[data-grid="2"] .col-center{ grid-column:1; grid-row:1; }
  .layout[data-grid="2"] .col-left  { grid-column:2; grid-row:1; }
  .layout[data-grid="2"] .col-right { grid-column:3; grid-row:1; }
  .layout[data-grid="2"] .rail      { grid-column:4; grid-row:1; }

  /* 3 — console still at the front, the two narrow columns swapped */
  .layout[data-grid="3"]{ grid-template-columns: minmax(0,1fr) 408px 408px var(--rail-w); }
  .layout[data-grid="3"] .col-center{ grid-column:1; grid-row:1; }
  .layout[data-grid="3"] .col-right { grid-column:2; grid-row:1; }
  .layout[data-grid="3"] .col-left  { grid-column:3; grid-row:1; }
  .layout[data-grid="3"] .rail      { grid-column:4; grid-row:1; }
}
/* after the rules above, so it wins on source order in the range they share */
@media (min-width:1281px) and (max-width:1600px){
  .layout[data-grid="1"]{ grid-template-columns: 352px 352px minmax(0,1fr) var(--rail-w); }
  .layout[data-grid="2"],
  .layout[data-grid="3"]{ grid-template-columns: minmax(0,1fr) 352px 352px var(--rail-w); }
}













/* ============================================================
   DOUBT SESSION
   The card under Need Help, and the panel it opens.
   ============================================================ */
.doubt-card{
  margin-top: clamp(10px,1.5vh,15px);
  padding: clamp(11px,1.5vh,15px) 16px clamp(12px,1.6vh,16px);
  background: linear-gradient(150deg, rgba(18,8,11,.85), rgba(10,6,8,.7));
  border:1px solid var(--line); border-radius:8px;
  backdrop-filter: blur(5px); box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.dc-head{ display:flex; align-items:center; gap:9px; }
.dc-icon{ width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--red);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dc-head h3{
  font-family:var(--head); font-size:12px; font-weight:700; letter-spacing:.14em;
  color:#e9e9ee;
}
.dc-text{ margin-top:7px; font-size:12px; line-height:1.5; color:#9a9aa4; }

/* where the last request got to, so the panel need not be opened to find out */
.dc-state{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin-top:8px;
  padding:7px 10px; border-radius:7px;
  background:rgba(255,255,255,.04); border-left:2px solid #6a6a74;
}
.dc-state b{ font-size:11.5px; font-weight:600; color:#d5d5de; }
.dc-state i{ font-style:normal; font-size:11px; color:#9a9aa4; }
.dc-state.open{ border-left-color:var(--amber); }
.dc-state.open b{ color:var(--amber); }
/* the accent, not green: confirmed is the live state and the theme's
   live colour is red. Declined drops to grey below — an inert request is
   not an alarm, and two reds would not tell them apart. */
.dc-state.confirmed, .dc-state.done{ border-left-color:var(--red); }
.dc-state.confirmed b, .dc-state.done b{ color:#ff5a68; }
.dc-state.proposed{ border-left-color:#7aa2ff; }
.dc-state.proposed b{ color:#7aa2ff; }
.dc-state.declined{ border-left-color:#6a6a74; }
.dc-state.declined b{ color:#8b8b95; }

.dc-btn{
  width:100%; margin-top:10px; padding:9px 12px; border-radius:7px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(110,10,18,.4));
  border:1px solid rgba(255,26,46,.55); color:#fff;
  font-family:var(--body); font-size:12px; font-weight:600; transition:.16s;
}
.dc-btn:hover{ background:linear-gradient(180deg, rgba(255,26,46,.44), rgba(140,12,22,.52));
  box-shadow:0 0 18px rgba(255,26,46,.35); }
.dc-note{ margin-top:6px; text-align:center; font-size:10px; color:#6a6a74; }
.dc-note.blocked{ color:#ff8a94; }

/* ---------- the panel ---------- */
.db-lead{ font-size:12.5px; line-height:1.6; color:#b6b6c0; margin-bottom:12px; }
.db-lead b{ color:#e9e9ee; }

.db-form{ display:flex; flex-direction:column; gap:12px; }
.db-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:420px){ .db-row{ grid-template-columns:1fr; } }

/* the control sits at the bottom of the cell, so two fields side by side
   line up even if one label wraps and the other does not */
.db-field{
  display:flex; flex-direction:column; gap:6px; position:relative; min-width:0;
  justify-content:flex-end;
}
/* label and its hint on one line, the hint pushed to the right edge */
.db-field > span{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:11.5px; color:#9a9aa4; min-height:15px;
}
/* namespaced: a bare .opt is the settings-menu row further up this file —
   display:flex with padding, which turned this hint into a block and pushed
   the field below it out of line with its neighbour */
.db-field .db-req{ color:var(--red); font-style:normal; }
.db-field .db-opt{ font-style:normal; font-size:10.5px; color:#6a6a74; }
.db-field textarea, .db-field input, .db-field select{
  width:100%; padding:9px 11px; border-radius:8px; resize:vertical;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,26,46,.22);
  font-family:var(--body); font-size:12.5px; line-height:1.55; color:var(--text);
  outline:none; transition:.16s;
}
/* one height for every control in the row, so the day button and the
   picker beside it match */
.db-field input, .db-field select, .db-datebtn{ height:38px; }
.db-field textarea{ min-height:82px; }
.db-field textarea:focus, .db-field input:focus, .db-field select:focus{
  border-color:var(--red); background:rgba(255,26,46,.06);
}
.db-field textarea::placeholder{ color:#5a5a64; }
.db-count{
  position:absolute; right:9px; bottom:8px; font-size:10px; color:#6a6a74;
  text-decoration:none; pointer-events:none;
}

.db-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.db-actions small{ font-size:10.5px; color:#6a6a74; }
/* the Live Chat button's look — see .sc-btn.primary */
.db-send{
  padding:9px 16px; border-radius:8px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border:1px solid rgba(255,26,46,.55); color:#fff;
  box-shadow:0 0 16px rgba(255,26,46,.22);
  font-family:var(--body); font-size:12.5px; font-weight:600; transition:.16s;
}
.db-send:hover:not(:disabled){
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  box-shadow:0 0 22px rgba(255,26,46,.4);
}
.db-send:disabled{ opacity:.55; cursor:default; }
.db-msg{ font-size:11.5px; line-height:1.5; }
.db-msg.bad{ color:#ff8a94; }
.db-msg.ok{ color:var(--green); }

.db-wait{
  padding:11px 12px; border-radius:8px; font-size:12px; line-height:1.6;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft); color:#9a9aa4;
}
.db-wait b{ color:#d5d5de; }
/* a trainer's pause, not a wait — reads as a stop rather than a countdown */
.db-wait.blocked{ background:rgba(255,90,104,.06); border-color:rgba(255,90,104,.28); color:#ff8a94; }

.db-h{
  margin:16px 0 8px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-family:var(--head); font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#7c7c88;
}
.db-list{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.db-item{
  padding:9px 11px; border-radius:8px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
  border-left:2px solid #6a6a74;
}
.db-item.open{ border-left-color:var(--amber); }
.db-item.confirmed, .db-item.done{ border-left-color:var(--red); }
.db-item.proposed{ border-left-color:#7aa2ff; }
.db-item.declined{ border-left-color:#6a6a74; }
.db-item-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.db-item-top b{ font-size:11.5px; font-weight:600; color:#d5d5de; }
.db-item-top span{ flex:0 0 auto; font-size:10px; color:#6a6a74; }
.db-item p{ margin-top:5px; font-size:12px; line-height:1.55; color:#c9c9d2;
  overflow-wrap:anywhere; }
.db-item em{ display:block; margin-top:4px; font-style:normal; font-size:10.5px;
  color:#8b8b95; }
.db-item .db-when{ color:#ff5a68; }
.db-item .db-reply{
  margin-top:7px; padding:7px 9px; border-radius:6px;
  background:rgba(255,255,255,.04); font-size:11.5px; color:#b6b6c0;
}

/* ---------- themed date picker (doubt session) ---------- */
.db-date{ position:relative; }

.db-datebtn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 11px; border-radius:8px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,26,46,.22);
  font-family:var(--body); font-size:12.5px; color:var(--text); transition:.16s;
}
.db-datebtn:hover{ border-color:rgba(255,26,46,.45); }
.db-datebtn[aria-expanded="true"]{ border-color:var(--red); background:rgba(255,26,46,.06); }
.db-datebtn svg{
  width:15px; height:15px; flex:0 0 auto; fill:none; stroke:#8b8b95;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.db-datebtn:hover svg, .db-datebtn[aria-expanded="true"] svg{ stroke:var(--red); }
/* nothing chosen yet — an invitation, dimmed so it does not read as a date */
.db-datebtn .none{ color:#6a6a74; }

/* Fixed, and placed by js/app.js from the button's position. Absolute
   would be clipped by the panel's own scroll container, so the calendar
   was cut off inside the box instead of floating over it. */
.db-cal{
  position:fixed; z-index:120; left:0; top:0;
  width:228px; padding:8px;
  background:#140a0d; border:1px solid rgba(255,26,46,.4); border-radius:10px;
  box-shadow:0 22px 50px rgba(0,0,0,.78), 0 0 26px rgba(255,26,46,.12);
}

.db-cal-head{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  margin-bottom:6px;
}
.db-cal-head b{
  font-family:var(--head); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#e9e9ee;
}
.db-cal-nav{
  width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:7px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--line-soft); transition:.16s;
}
.db-cal-nav svg{ width:12px; height:12px; fill:none; stroke:#c9c9d2; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.db-cal-nav:hover:not(:disabled){ border-color:var(--red); background:rgba(255,26,46,.12); }
.db-cal-nav:hover:not(:disabled) svg{ stroke:var(--red); }
.db-cal-nav:disabled{ opacity:.3; cursor:not-allowed; }

.db-cal-dow, .db-cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
}
.db-cal-dow{ margin-bottom:3px; }
.db-cal-dow span{
  text-align:center; font-size:9px; letter-spacing:.06em; color:#7c7c88;
  text-transform:uppercase;
}

.db-cal-day{
  aspect-ratio:1; display:grid; place-items:center; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid transparent;
  font-family:var(--body); font-size:11px; color:#d5d5de; transition:.13s;
}
.db-cal-day:hover:not(:disabled){ background:rgba(255,26,46,.14); border-color:rgba(255,26,46,.4); color:#fff; }
.db-cal-day:disabled{ opacity:.22; cursor:not-allowed; }
/* today is outlined, the chosen day is filled — so both can show at once */
.db-cal-day.today{ border-color:rgba(255,26,46,.5); color:#ff8a94; }
/* matched to the time picker beside it, and to .sc-btn.primary through it */
.db-cal-day.on{
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border-color:rgba(255,26,46,.55); color:#fff; font-weight:600;
  box-shadow:0 0 16px rgba(255,26,46,.22);
}
.db-cal-day.on:hover:not(:disabled){
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  border-color:rgba(255,26,46,.55);
  box-shadow:0 0 22px rgba(255,26,46,.4);
}

.db-cal-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:7px; padding-top:7px; border-top:1px solid var(--line-soft);
}
.db-cal-clear, .db-cal-soon{
  padding:4px 9px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid var(--line-soft);
  font-family:var(--body); font-size:10.5px; color:#b6b6c0; transition:.16s;
}
.db-cal-clear:hover{ border-color:rgba(255,138,148,.5); color:#ff8a94; }
.db-cal-soon:hover{ border-color:var(--red); background:rgba(255,26,46,.12); color:#fff; }

/* ---------- the time picker ----------
   Three columns to scroll — hour, minutes, AM/PM — in the same shell as
   the calendar, so the two controls in that row open the same-looking
   box.

   Compounded with .db-cal because both are single classes: on equal
   specificity the later rule wins by file order alone, which is a thing
   to trip over the next time this file is reordered. */
.db-cal.db-times{ width:186px; }

.db-t-heads, .db-t-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.db-t-lab{
  text-align:center; margin-bottom:4px;
  font-family:var(--head); font-size:8.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#7c7c88;
}

.db-t-col{
  max-height:152px; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:2px;
  /* the standard properties only — Chrome ignores ::-webkit-scrollbar
     once scrollbar-width or scrollbar-color is set, so mixing the two
     mechanisms just leaves dead rules behind */
  scrollbar-width:thin; scrollbar-color:rgba(255,26,46,.5) transparent;
}
.db-t-opt{
  flex:0 0 auto; padding:5px 0; border-radius:5px; cursor:pointer;
  background:transparent; border:1px solid transparent;
  font-family:var(--body); font-size:12px; color:#d5d5de; transition:.13s;
}
.db-t-opt:hover:not(:disabled){
  background:rgba(255,26,46,.14); border-color:rgba(255,26,46,.4); color:#fff;
}
/* greyed rather than dropped: an hour with no AM should say so, not
   vanish and leave the column jumping about */
.db-t-opt:disabled{ opacity:.22; cursor:not-allowed; }
/* the Live Chat button's look — see .sc-btn.primary */
.db-t-opt.on{
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border-color:rgba(255,26,46,.55); color:#fff; font-weight:600;
  box-shadow:0 0 16px rgba(255,26,46,.22);
}
.db-t-opt.on:hover:not(:disabled){
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  border-color:rgba(255,26,46,.55);
  box-shadow:0 0 22px rgba(255,26,46,.4);
}
/* dimmed until an hour is chosen: they refine a time, they do not make one */
.db-t-cols.idle .db-t-col:not(:first-child){ opacity:.5; }

/* ---------- join a doubt session ---------- */
/* the Live Chat button's look — see .sc-btn.primary */
.dc-join, .db-join{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; border-radius:7px; transition:.16s;
  background:linear-gradient(180deg, rgba(255,26,46,.28), rgba(255,26,46,.12));
  border:1px solid rgba(255,26,46,.55);
  box-shadow:0 0 16px rgba(255,26,46,.22);
  color:#fff; font-family:var(--body); font-weight:700;
}
.dc-join{ width:100%; margin-top:10px; padding:9px 12px; font-size:12px; }
.db-join{ margin-top:8px; padding:7px 13px; font-size:11.5px; }
.dc-join:hover, .db-join:hover{
  background:linear-gradient(180deg, rgba(255,26,46,.42), rgba(255,26,46,.2));
  box-shadow:0 0 22px rgba(255,26,46,.4);
}
.dc-join svg, .db-join svg{
  width:15px; height:15px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
/* the button under it is the secondary action once a link is there */
.dc-join + .dc-btn{
  background:rgba(255,255,255,.05); border-color:var(--line-soft); color:#d5d5de;
}
.dc-join + .dc-btn:hover{ background:rgba(255,26,46,.1); border-color:var(--red); color:#fff; }

/* why the Join button is not there yet, or no longer is */
.dc-gate{
  margin-top:10px; padding:8px 10px; border-radius:7px; text-align:center;
  background:rgba(255,255,255,.04); border:1px dashed var(--line-soft);
  font-size:10.5px; line-height:1.5; color:#9a9aa4;
}
.dc-gate b{ color:#d5d5de; }
.dc-gate.over{ color:#7c7c88; }
.db-gate{
  display:block; margin-top:8px; font-style:normal; font-size:10.5px;
  color:#8b8b95;
}