/* ============================================================
   FU LCARS — Outer chrome stylesheet
   Replaces the page-level header/sidebar/right-rail/ticker
   geometry with an LCARS shell. Internal Tailwind components
   (feed cards, chat messages, modals) are untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Saira+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --lcars-orange:#ff9966; --lcars-peach:#ffcc99; --lcars-salmon:#ff9999;
  --lcars-yellow:#ffcc66; --lcars-tan:#ffcc99;
  --lcars-blue:#7a90c8; --lcars-violet:#a88aff; --lcars-cream:#ffeecc;
  --lcars-grey:#5599cc; --lcars-green:#99cc99;
  --fu-purple-bright:#6f00f0;
  --fu-purple-deep:#300080;
  --lcars-display:"Saira Condensed",-apple-system,BlinkMacSystemFont,sans-serif;
  --lcars-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --lcars-serif:"Source Serif 4",Georgia,serif;
}

/* Body becomes the LCARS shell host. We override Tailwind's flex layout. */
body.lcars{
  background:#000 !important;
  color:#fff;
  font-family:var(--lcars-display);
  height:100vh;
  overflow:hidden;
  margin:0;
  padding:0;
}

/* Scrollbar treatment everywhere */
body.lcars *{scrollbar-width:thin;scrollbar-color:var(--lcars-orange) transparent}
body.lcars ::-webkit-scrollbar{width:8px;height:8px}
body.lcars ::-webkit-scrollbar-track{background:transparent}
body.lcars ::-webkit-scrollbar-thumb{background:var(--lcars-orange);border-radius:4px}
body.lcars ::-webkit-scrollbar-thumb:hover{background:var(--lcars-peach)}
body.lcars ::selection{background:var(--lcars-orange);color:#000}

/* ============================================================
   SHELL GRID
   ============================================================ */
.lcars-shell{
  display:grid;
  grid-template-columns:190px 1fr;
  grid-template-rows:auto 1fr auto auto;
  column-gap:8px; row-gap:0;
  height:100vh; width:100%;
  max-width:100vw;
  overflow-x:hidden;
  padding:6px;
  background:#000;
  box-sizing:border-box;
}

/* ============================================================
   TOP STRIP
   ============================================================ */
.lcars-topstrip{
  grid-column:2; grid-row:1;
  display:grid;
  grid-template-columns:auto auto 1fr auto auto;
  align-items:center;
  background:var(--fu-purple-bright);
  color:#fff;
  font-family:var(--lcars-display);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 6px 6px 6px;
  border-radius:0 24px 0 0;
  min-height:46px;
  gap:14px;
}
.lcars-topstrip .crest{
  display:flex; align-items:center; justify-content:center;
  background:#000; border-radius:18px;
  padding:4px 14px 4px 10px; height:36px;
}
.lcars-topstrip .crest img{
  height:28px; width:auto; display:block;
  filter:drop-shadow(0 0 6px rgba(168,138,255,.4));
}
.lcars-topstrip .title{font-size:1.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lcars-topstrip .sub{
  font-family:var(--lcars-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.12em; color:#fff; opacity:.85;
  text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.lcars-topstrip .stardate{
  font-family:var(--lcars-mono); font-size:.74rem; font-weight:600;
  letter-spacing:.08em; color:#fff;
  background:rgba(0,0,0,.25);
  padding:4px 10px; border-radius:10px;
}
.lcars-topstrip .user{
  display:flex; align-items:center; gap:.5em;
  background:#000; color:var(--lcars-violet);
  font-family:var(--lcars-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.06em; padding:5px 12px 5px 5px;
  border-radius:0 12px 12px 0;
}
.lcars-topstrip .user img{width:22px;height:22px;border-radius:50%}
.lcars-topstrip .user .logout{
  background:none; border:0; color:var(--lcars-orange);
  font-family:var(--lcars-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  padding:0 0 0 6px; border-left:1px solid #333;
}
.lcars-topstrip .user .logout:hover{color:var(--lcars-cream)}
.lcars-topstrip .login{
  font-family:var(--lcars-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; background:#000; color:var(--lcars-violet);
  padding:5px 12px; border-radius:0 12px 12px 0;
  text-decoration:none; cursor:pointer; border:0;
}
.lcars-topstrip .login:hover{color:var(--lcars-orange)}

.lcars-topstrip .hamburger{
  background:#000; color:var(--lcars-orange); border:0;
  padding:6px 10px; border-radius:12px;
  font-family:var(--lcars-mono); font-weight:700;
  cursor:pointer; display:none;
}

/* ============================================================
   LEFT ELBOW
   ============================================================ */
.lcars-elbow{
  grid-column:1; grid-row:1/4;
  display:flex; flex-direction:column; gap:6px;
  min-height:0;
}
.lcars-elbow .cap-top{
  background:var(--fu-purple-bright);
  height:46px;
  border-radius:24px 0 0 0;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:0 12px 6px; color:#fff;
  flex-shrink:0;
}
.lcars-elbow .cap-top .code{
  font-family:var(--lcars-mono); font-size:.7rem;
  font-weight:600; letter-spacing:.08em;
}
.lcars-elbow .head{
  padding:10px 14px;
  background:var(--lcars-orange); color:#000;
  font-family:var(--lcars-display); font-weight:700;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius:0 8px 8px 0;
  flex-shrink:0;
}
.lcars-elbow .head .meta{
  display:block; font-family:var(--lcars-mono);
  font-size:.6rem; font-weight:500; letter-spacing:.1em;
  margin-top:.2rem; opacity:.7;
}
.lcars-elbow .stack{
  flex:1; display:flex; flex-direction:column; gap:4px;
  overflow-y:auto; min-height:0;
}
.lcars-elbow .nav{
  display:grid; grid-template-columns:42px 1fr;
  align-items:baseline;
  padding:9px 12px;
  background:var(--lcars-peach); color:#000;
  font-family:var(--lcars-display); font-weight:600;
  font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
  border-radius:0 8px 8px 0;
  transition:filter 120ms,background 120ms;
  text-decoration:none; border:0; text-align:left;
  width:100%;
}
.lcars-elbow .nav .n{
  font-family:var(--lcars-mono); font-size:.68rem;
  font-weight:700; color:#000; letter-spacing:.04em;
}
.lcars-elbow .nav .t{line-height:1.15}
.lcars-elbow .nav:hover{filter:brightness(1.08)}
.lcars-elbow .nav.current{background:var(--lcars-orange);color:#000}
.lcars-elbow .nav.muted{background:var(--lcars-tan)}
.lcars-elbow .nav.purple{background:var(--lcars-violet);color:#000}
.lcars-elbow .nav.blue{background:var(--lcars-blue);color:#000}
.lcars-elbow .nav.red{background:var(--lcars-salmon);color:#000}
.lcars-elbow .nav.yellow{background:var(--lcars-yellow);color:#000}

/* Projects grid as compact LCARS tiles */
.lcars-elbow .projects-label{
  font-family:var(--lcars-mono); font-size:.62rem;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-orange); padding:8px 12px 4px;
}
.lcars-elbow .projects{
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
  padding:0 4px 0 0;
}
.lcars-elbow .projects .pj{
  position:relative; aspect-ratio:1/1;
  background:#0d0d0d; border:0; border-left:2px solid var(--lcars-violet);
  cursor:pointer; padding:0; overflow:hidden;
  border-radius:0 4px 4px 0;
}
.lcars-elbow .projects .pj img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.85; transition:opacity 120ms;
}
.lcars-elbow .projects .pj:hover img{opacity:1}
.lcars-elbow .projects .pj:hover{border-left-color:var(--lcars-orange)}
.lcars-elbow .projects .pj .label{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top,rgba(0,0,0,.95),transparent);
  color:var(--lcars-cream);
  font-family:var(--lcars-mono); font-size:.54rem;
  font-weight:600; letter-spacing:.04em;
  padding:8px 3px 2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center;
}
.lcars-elbow .projects .pj.current{border-left-color:var(--lcars-orange);outline:1px solid var(--lcars-orange)}

.lcars-elbow .cap-bot{
  background:var(--fu-purple-bright);
  min-height:60px;
  border-radius:0 0 0 24px;
  display:flex; flex-direction:column; gap:3px;
  padding:8px 12px 8px; color:#fff;
  font-family:var(--lcars-mono); font-size:.6rem; font-weight:600;
  letter-spacing:.08em; line-height:1.4;
  flex-shrink:0;
}
.lcars-elbow .cap-bot .stat{
  display:flex; justify-content:space-between; gap:.4em;
}
.lcars-elbow .cap-bot .stat .v{color:var(--lcars-cream)}
.lcars-elbow .cap-bot .ministats{
  background:#0d0d0d; border-left:2px solid var(--lcars-orange);
  padding:6px 8px; margin:0 -8px 0; border-radius:0 4px 4px 0;
  display:flex; flex-direction:column; gap:2px;
  font-family:var(--lcars-mono); font-size:.6rem;
}
.lcars-elbow .cap-bot .ministats .label{color:var(--lcars-peach);letter-spacing:.1em;text-transform:uppercase}
.lcars-elbow .cap-bot .ministats .value{color:var(--lcars-orange);font-size:.85rem;font-weight:700;letter-spacing:.04em}
.lcars-elbow .cap-bot .ministats .sub{color:#888;font-size:.55rem;letter-spacing:.06em}

/* ============================================================
   BODY — centre + right
   ============================================================ */
.lcars-body{
  grid-column:2; grid-row:2;
  display:grid;
  grid-template-columns:1fr 320px;
  column-gap:8px;
  min-height:0;
  overflow:hidden;
  padding-top:6px;
}
.lcars-centre{
  background:#0a0a0a;
  color:#fff;
  overflow:hidden; /* internal scroll handled by inner content */
  border-radius:0 0 0 8px;
  position:relative;
  display:flex; flex-direction:column;
  min-width:0;
}
.lcars-centre::before{
  content:""; position:absolute; left:0; top:0;
  width:5px; height:100%;
  background:linear-gradient(180deg,var(--fu-purple-bright) 0%,var(--lcars-violet) 100%);
  z-index:1; pointer-events:none;
}
/* Reserve left padding so content clears the spine */
.lcars-centre > *{padding-left:8px}

.lcars-right{
  display:flex; flex-direction:column; gap:8px;
  min-height:0; min-width:0;
  overflow:hidden;
}

/* ============================================================
   TV CARD (top of right rail)
   ============================================================ */
.lcars-tvcard{
  background:#000;
  border:1px solid #1a1a1a;
  border-left:3px solid var(--lcars-orange);
  overflow:hidden;
  flex-shrink:0;
}
.lcars-tvcard .head{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 12px;
  background:#101010;
  border-bottom:1px solid #1f1f1f;
  font-family:var(--lcars-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-peach);
}
.lcars-tvcard .head .live{color:var(--lcars-salmon);font-weight:600}
.lcars-tvcard .screen{
  aspect-ratio:16/9;
  background:radial-gradient(circle at 30% 30%,#1a0a30 0%,#000 70%);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  cursor:pointer;
}
.lcars-tvcard .screen::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px);
  pointer-events:none;
}
.lcars-tvcard .footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 12px;
  background:#0a0a0a;
  border-top:1px solid #1f1f1f;
  font-family:var(--lcars-mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--lcars-blue);
}
.lcars-tvcard .footer .count{color:var(--lcars-orange)}

/* ============================================================
   LCARS panel frame around any internal block (e.g. chat aside)
   ============================================================ */
.lcars-panel{
  background:#0a0a0a;
  border:1px solid #1a1a1a;
  border-left:3px solid var(--lcars-violet);
  flex:1 1 auto;
  min-height:0; min-width:0;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.lcars-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px;
  background:#101010;
  border-bottom:1px solid #1f1f1f;
  font-family:var(--lcars-display); font-weight:700;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-orange);
  flex-shrink:0;
}
.lcars-panel-head .meta{
  font-family:var(--lcars-mono); font-size:.62rem;
  letter-spacing:.08em; color:var(--lcars-peach);
  font-weight:500; opacity:.75;
}

/* ============================================================
   NARRATOR / NOW-PLAYING BAR
   ============================================================ */
.lcars-narrator{
  grid-column:2; grid-row:3;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:14px;
  background:var(--lcars-orange);
  color:#000;
  padding:8px 18px 8px 14px;
  border-radius:24px 0 24px 0;
  min-height:54px;
  margin-top:6px;
}
.lcars-narrator.disabled{
  background:#1a1a1a; color:#555;
  display:flex; justify-content:center; align-items:center;
  font-family:var(--lcars-mono); font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.lcars-narrator .play{
  width:38px; height:38px; border-radius:50%;
  background:#000; color:var(--lcars-orange);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; border:0;
  flex-shrink:0;
}
.lcars-narrator .play:hover{filter:brightness(1.25)}
.lcars-narrator .info{min-width:0}
.lcars-narrator .label{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.2rem; color:#000;
  display:flex; align-items:center; gap:.5em;
}
.lcars-narrator .label .live-dot{
  width:7px; height:7px; border-radius:50%;
  background:#000;
  animation:lcars-pulse 1.8s infinite;
}
.lcars-narrator .now{
  font-family:var(--lcars-mono); font-size:.78rem;
  font-weight:500; color:#000;
  letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lcars-narrator .meta{
  font-family:var(--lcars-mono); font-size:.74rem;
  letter-spacing:.08em; color:#000; font-weight:600;
  background:rgba(0,0,0,.15);
  padding:.3em .7em; border-radius:.2em;
  white-space:nowrap;
}
@keyframes lcars-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ============================================================
   BOTTOM TICKER STRIP
   ============================================================ */
.lcars-botbar{
  grid-column:1/3; grid-row:4;
  display:grid;
  grid-template-columns:190px 1fr;
  column-gap:8px;
  margin-top:6px;
}
.lcars-botbar .label{
  background:var(--fu-purple-bright);
  color:#fff;
  border-radius:0 0 0 24px;
  font-family:var(--lcars-display); font-weight:700;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 14px;
  display:flex; align-items:center; justify-content:flex-end;
  gap:.6em;
}
.lcars-botbar .label .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--lcars-orange);
  box-shadow:0 0 6px var(--lcars-orange);
}
.lcars-botbar .tickerwrap{
  background:#0a0a0a;
  border:1px solid #1a1a1a;
  border-radius:0 0 24px 0;
  overflow:hidden;
  position:relative;
  display:flex; align-items:center;
  height:38px;
}

/* Tailwind ticker styles from existing site bleed through; we
   normalise the inner text styling here while keeping its track. */
.lcars-botbar .fu-marquee{
  background:transparent !important; border:0 !important; height:38px !important;
}
.lcars-botbar .fu-marquee > div:first-child{display:none !important}
.lcars-botbar .fu-marquee-track button{
  font-family:var(--lcars-mono); font-size:.78rem;
  color:#9aa0a8 !important;
}
.lcars-botbar .fu-marquee-track button span:nth-child(2){
  font-family:var(--lcars-display) !important; font-weight:700 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  font-size:.82rem !important;
}

/* ============================================================
   Mobile responsive
   ============================================================ */
@media(max-width:900px){
  /* dvh keeps the shell off the mobile browser chrome (100vh gets cut off) */
  body.lcars{height:100dvh}
  .lcars-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr auto auto;
    height:100dvh;
    column-gap:0;
  }

  /* Left elbow becomes an off-canvas drawer, opened by the ≡ hamburger.
     It keeps its full vertical desktop layout; .open is toggled by Alpine. */
  .lcars-elbow{
    position:fixed; top:0; left:0; bottom:0;
    width:82vw; max-width:300px;
    z-index:40;
    background:#000; padding:6px;
    overflow-y:auto;
    box-shadow:4px 0 28px rgba(0,0,0,.7);
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .lcars-elbow.open{transform:translateX(0)}
  .lcars-elbow .cap-top{border-radius:24px 0 0 0}

  .lcars-topstrip{
    grid-column:1;grid-row:1;border-radius:24px 24px 0 0;gap:8px;
    /* .sub is hidden, leaving: crest · title · hamburger · stardate · user */
    grid-template-columns:auto 1fr auto auto auto;
  }
  .lcars-topstrip .sub{display:none}
  .lcars-topstrip .title{font-size:.92rem}
  .lcars-topstrip .hamburger{display:flex;align-items:center}

  .lcars-body{grid-column:1;grid-row:2;grid-template-columns:1fr}
  .lcars-right{display:none}

  .lcars-narrator{grid-column:1;grid-row:3}
  .lcars-botbar{grid-column:1;grid-row:4;grid-template-columns:96px 1fr}

  /* Welcome prose: tighten the generous desktop gutters on small screens */
  .lcars-welcome{padding:20px 16px 28px}
}

/* ============================================================
   WELCOME VIEW — LCARS prose inside the centre
   ============================================================ */
.lcars-welcome{
  flex:1; overflow-y:auto;
  padding:28px 40px 36px 48px;
  font-family:var(--lcars-serif);
  color:#fff;
}
.lcars-welcome-inner{max-width:68ch;margin:0 auto}
.lcars-welcome .archtag{
  font-family:var(--lcars-mono); font-size:.66rem;
  color:var(--lcars-peach); letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:6px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; opacity:.85;
}
.lcars-welcome .archtag .ref{color:var(--lcars-blue)}
.lcars-welcome .centre-num{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.85rem; letter-spacing:.16em;
  color:var(--lcars-orange); text-transform:uppercase;
  margin-bottom:24px;
}
.lcars-welcome .prose{
  font-family:var(--lcars-serif); font-size:1.1rem;
  line-height:1.7; color:#fff; max-width:68ch;
}
.lcars-welcome .prose h1{
  font-family:var(--lcars-serif); font-weight:600;
  font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.01em;
  line-height:1.15; margin:0 0 .4em; color:var(--lcars-cream);
}
.lcars-welcome .prose h2{
  font-family:var(--lcars-serif); font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.005em;
  line-height:1.2; margin:1.6em 0 .55em; color:var(--lcars-cream);
  display:flex; align-items:baseline; gap:.7em;
  padding-bottom:.35em; border-bottom:1px solid #1f1f1f;
}
.lcars-welcome .prose h2 .num{
  font-family:var(--lcars-mono); font-weight:600;
  font-size:.5em; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lcars-orange); padding-right:.7em;
  border-right:1px solid #2a2a2a;
}
.lcars-welcome .prose p{margin:0 0 1.05em}
.lcars-welcome .prose p.dek{
  font-family:var(--lcars-serif); font-style:italic;
  font-size:1.12em; color:var(--lcars-cream); line-height:1.55;
  margin:0 0 1.5em;
}
.lcars-welcome .prose strong{color:var(--lcars-cream);font-weight:600}
.lcars-welcome .prose em{color:var(--lcars-peach);font-style:italic}
.lcars-welcome .prose p.lede::first-letter{
  font-family:var(--lcars-serif); font-weight:700;
  font-size:3em; float:left; line-height:.85;
  padding:.08em .14em 0 0; color:var(--lcars-orange);
}

.lcars-welcome .chips{display:flex;flex-wrap:wrap;gap:.4em;margin:1em 0 1.4em}
.lcars-welcome .chip{
  display:inline-block; font-family:var(--lcars-mono);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lcars-peach); border:1px solid var(--lcars-peach);
  padding:.25em .65em; border-radius:.2em; background:transparent;
}
.lcars-welcome .chip.amber{color:var(--lcars-yellow);border-color:var(--lcars-yellow)}
.lcars-welcome .chip.violet{color:var(--lcars-violet);border-color:var(--lcars-violet)}
.lcars-welcome .chip.salmon{color:var(--lcars-salmon);border-color:var(--lcars-salmon)}
.lcars-welcome .chip.blue{color:var(--lcars-blue);border-color:var(--lcars-blue)}

.lcars-welcome .onair{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:1.1em;
  background:#0d0d0d; border-left:3px solid var(--lcars-salmon);
  padding:1em 1.2em; margin:1em 0 1.6em;
}
.lcars-welcome .onair.standby{border-left-color:var(--lcars-blue)}
.lcars-welcome .onair .badge{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:#000; background:var(--lcars-salmon);
  padding:.35em .7em; border-radius:.2em;
  animation:lcars-pulse 2.4s ease-in-out infinite;
}
.lcars-welcome .onair.standby .badge{
  background:var(--lcars-blue); animation:none;
}
.lcars-welcome .onair .title{
  font-family:var(--lcars-serif); font-weight:600;
  font-size:1.05rem; color:var(--lcars-cream); line-height:1.25;
  display:block;
}
.lcars-welcome .onair .meta{
  font-family:var(--lcars-mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--lcars-peach); margin-top:.3em; display:block;
  opacity:.85;
}
.lcars-welcome .onair .watch{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:#000; background:var(--lcars-orange);
  padding:.55em 1em; border:0; cursor:pointer;
  border-radius:0 8px 0 8px;
}
.lcars-welcome .onair .watch:hover{filter:brightness(1.1)}

.lcars-welcome .netgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.6em; margin:1em 0 1.6em;
}
.lcars-welcome .netcard{
  display:block; background:#0d0d0d;
  border-left:3px solid var(--lcars-violet);
  padding:.95em 1.1em; text-decoration:none; color:inherit;
  transition:background 120ms,border-color 120ms;
  cursor:pointer; border-top:0; border-right:0; border-bottom:0;
  text-align:left; width:100%; font-family:inherit;
  position:relative;
}
.lcars-welcome .netcard .newtab{
  position:absolute; top:6px; right:8px;
  font-family:var(--lcars-mono); font-size:.95rem;
  font-weight:700; line-height:1; color:var(--lcars-orange);
  background:#000; border:1px solid #2a2a2a;
  padding:3px 6px; border-radius:3px;
  text-decoration:none; opacity:.55;
  transition:opacity 120ms,background 120ms,color 120ms,border-color 120ms;
}
.lcars-welcome .netcard:hover .newtab{opacity:1}
.lcars-welcome .netcard .newtab:hover{
  background:var(--lcars-orange); color:#000; border-color:var(--lcars-orange);
}
.lcars-welcome .netcard:hover{
  background:#141414; border-left-color:var(--lcars-orange);
}
.lcars-welcome .netcard .row{display:flex;align-items:baseline;gap:.55em;margin-bottom:.3em}
.lcars-welcome .netcard .glyph{font-size:1.1em;line-height:1}
.lcars-welcome .netcard .site{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.84rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--lcars-cream);
}
.lcars-welcome .netcard .blurb{
  font-family:var(--lcars-serif); font-size:.82rem;
  line-height:1.4; color:#9aa0a8; margin:0;
}
.lcars-welcome .netcard .tag{
  font-family:var(--lcars-mono); font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-orange); margin-top:.4em; display:block;
  opacity:.8;
}

.lcars-welcome .stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:.8em; background:#0d0d0d;
  border-left:3px solid var(--lcars-orange);
  padding:1.1em 1.3em; margin:1.5em 0;
}
.lcars-welcome .stats .col .big{
  font-family:var(--lcars-display); font-weight:700;
  color:var(--lcars-orange); font-size:2.1rem; letter-spacing:.02em;
  line-height:1; display:block;
}
.lcars-welcome .stats .col .big.violet{color:var(--lcars-violet)}
.lcars-welcome .stats .col .big.yellow{color:var(--lcars-yellow)}
.lcars-welcome .stats .col .big.green{color:var(--lcars-green)}
.lcars-welcome .stats .col .label{
  font-family:var(--lcars-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-peach); margin-top:.45em; display:block;
  opacity:.85;
}

/* Hidden by default; visible only after Alpine boots */
[x-cloak]{display:none !important}