/* ============================================================
   TVDesk — Shared Visual Theme ("Midnight Glow")
   Palette: TV App navy / blue / sky / indigo
   Style: dark glass, glowing frame, thin display type, pill buttons
   Used by: TVDesk-Web-Portal.html, TVDesk-TV-App.html, TVDesk-Support-App.html
   ============================================================ */

:root{
  /* Brand */
  --blue:#2563EB; --sky:#0EA5E9; --indigo:#4338CA;
  --sky-300:#7DD3FC; --sky-400:#38BDF8; --indigo-300:#A5B4FC; --indigo-400:#818CF8;
  --green:#10B981; --green-300:#86EFAC; --amber:#F59E0B; --amber-300:#FCD34D; --red:#EF4444; --red-300:#FCA5A5;

  /* Surfaces (from TV App scene) */
  --bg-0:#040A14; --bg-1:#07101D; --bg-2:#0A1930; --bg-3:#11295D;

  /* Text */
  --text:#F1F5FF; --text-2:#BFD0EA; --muted:#8597B6; --faint:#55657F;

  /* Glass + strokes */
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.065); --glass-3:rgba(255,255,255,.10);
  --stroke:rgba(148,190,255,.13); --stroke-2:rgba(148,190,255,.24); --stroke-accent:rgba(56,189,248,.45);

  /* Gradients */
  --grad-brand:linear-gradient(135deg,var(--blue),var(--sky) 55%,var(--indigo));
  --grad-cta:linear-gradient(135deg,var(--blue),var(--sky));
  --grad-scene:
    radial-gradient(circle at 84% 20%,rgba(67,56,202,.48),transparent 30%),
    radial-gradient(circle at 62% 58%,rgba(14,165,233,.16),transparent 34%),
    linear-gradient(135deg,#07101d,#0a1930 52%,#11295d);
  --grad-frame:linear-gradient(140deg,rgba(125,211,252,.75),rgba(125,211,252,.10) 28%,rgba(129,140,248,.06) 62%,rgba(165,180,252,.55));
  --grad-display:linear-gradient(180deg,#ffffff 25%,#a9bddb);

  /* Glows */
  --glow-sky:0 0 0 1px rgba(56,189,248,.35),0 0 28px rgba(14,165,233,.28);
  --glow-focus:0 0 0 4px rgba(14,165,233,.22),0 14px 36px rgba(14,165,233,.38);

  /* Radius */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px;

  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color-scheme:dark;
}

/* ---------- Base ---------- */
.tvd-body{margin:0;background:var(--bg-0);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}
.tvd-body *{box-sizing:border-box}

/* ---------- Glowing frame (gradient border) ---------- */
.frame{
  border:1.5px solid transparent;
  background:var(--grad-scene) padding-box,var(--grad-frame) border-box;
  border-radius:var(--r-xl);
}

/* ---------- Glass surfaces ---------- */
.glass{background:var(--glass);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.glass-2{background:var(--glass-2);border:1px solid var(--stroke-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---------- Display type ---------- */
.display{font-weight:300;letter-spacing:-.035em;line-height:1.02;background:var(--grad-display);-webkit-background-clip:text;background-clip:text;color:transparent}
.accent-text{color:var(--sky-300)}

/* ---------- Sparkle (4-point star) ---------- */
.sparkle{display:inline-block;width:1em;height:1em;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.1 16.9 11.1 24 12C16.9 12.9 12.9 16.9 12 24C11.1 16.9 7.1 12.9 0 12C7.1 11.1 11.1 7.1 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.1 16.9 11.1 24 12C16.9 12.9 12.9 16.9 12 24C11.1 16.9 7.1 12.9 0 12C7.1 11.1 11.1 7.1 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--text-2);font-weight:400}
.eyebrow .sparkle{color:#fff}

/* ---------- Pill buttons ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:500;font-size:15px;color:var(--text);border:1px solid var(--stroke-2);background:rgba(255,255,255,.025);white-space:nowrap;cursor:pointer;transition:box-shadow .2s,background .2s,border-color .2s}
.pill:hover{border-color:rgba(148,190,255,.4);background:rgba(255,255,255,.05)}
.pill.accent{color:var(--sky-300);border-color:var(--stroke-accent);background:rgba(14,165,233,.07);box-shadow:inset 0 0 18px rgba(14,165,233,.10)}
.pill.accent:hover{box-shadow:var(--glow-sky)}
.pill.solid,.pill.is-focused{color:#fff;border-color:transparent;background:var(--grad-cta);box-shadow:var(--glow-focus)}
.pill.danger{color:var(--red-300);border-color:rgba(239,68,68,.45);background:rgba(127,29,29,.22)}
.pill.danger.is-focused{color:#fff;background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 0 0 4px rgba(239,68,68,.22),0 14px 36px rgba(239,68,68,.32)}
.pill.premium{color:#1c1203;border-color:transparent;background:linear-gradient(135deg,#f59e0b,#fcd34d);box-shadow:0 0 0 4px rgba(245,158,11,.18),0 14px 30px rgba(245,158,11,.26)}
.pill .arrow{font-size:.85em;opacity:.9}

/* ---------- Status chip ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500;color:var(--text-2);background:var(--glass-2);border:1px solid var(--stroke)}
.chip.ok{color:var(--green-300);background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.chip.ok .dot{animation:tvd-pulse 1.8s ease-in-out infinite}
@keyframes tvd-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Radial tick ring (the "Super charged" dial) ---------- */
.tick-ring{position:relative;border-radius:50%;aspect-ratio:1}
.tick-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--ring-color,var(--sky-400)) 0 1.4deg,transparent 1.4deg 7.2deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-w,14px)),#000 calc(100% - var(--ring-w,14px) + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-w,14px)),#000 calc(100% - var(--ring-w,14px) + 1px));
  opacity:.85}
.tick-ring.spin::before{animation:tvd-spin 28s linear infinite}
.tick-ring .core{position:absolute;inset:calc(var(--ring-w,14px) + 10px);border-radius:50%;border:1px solid rgba(125,211,252,.35);display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 35%,rgba(14,165,233,.16),rgba(7,16,29,.6) 70%)}
@keyframes tvd-spin{to{transform:rotate(360deg)}}

/* ---------- Glow orb (central product light) ---------- */
.orb-glow{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.45),rgba(14,165,233,.12) 40%,transparent 70%);filter:blur(10px);pointer-events:none}
.orbit{position:absolute;border-radius:50%;border:1px dashed rgba(125,211,252,.22);pointer-events:none}

/* ---------- Callout connector ---------- */
.connector{position:absolute;height:1px;background:linear-gradient(90deg,rgba(125,211,252,.0),rgba(125,211,252,.6));transform-origin:left center;pointer-events:none}
.connector::after{content:"";position:absolute;right:-4px;top:-3.5px;width:8px;height:8px;border-radius:50%;background:var(--bg-1);border:1.5px solid var(--sky-300);box-shadow:0 0 10px var(--sky-400)}

/* ---------- Slide/progress segments ---------- */
.segments{display:flex;gap:6px}
.segments i{display:block;width:34px;height:3px;border-radius:3px;background:rgba(148,190,255,.16)}
.segments i.on{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6)}