/* Emberline FX: the HorizonX "Emberline Fire Hero" scoped to #emberline-fx. */

/* Undo what themes usually put on plain elements; the block's own rules win. */
#emberline-fx :is(div, section, article, aside, nav, header, ul, ol, li, p, h1, h2, h3, a, button, span, label, input, select, table, strong, small, kbd, i) {
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none; float: none;
  text-transform: none; text-shadow: none; text-decoration: none; letter-spacing: normal;
  font-family: inherit; color: inherit; line-height: inherit; min-height: 0; max-width: none;
}
#emberline-fx :is(h1, h2, h3, p, li)::before, #emberline-fx :is(h1, h2, h3)::after { content: none; }
#emberline-fx { position: relative; isolation: isolate; overflow-x: clip; text-align: left; font-size: 16px; }
#emberline-fx.emberline-fx--full { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
#emberline-fx.emberline-fx--theme-font { --font: inherit; }
#emberline-fx canvas { max-width: none; }
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
#emberline-fx {
  --bg: #07080a;
  --surface: rgba(16, 17, 22, 0.78);
  --surface-solid: #101116;
  --surface-2: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --ink: #f4f4f6;
  --ink-2: #b9bcc6;
  --ink-3: #8d919c;
  --accent: #ff5a1f;
  /* Lighter, paler and deeper shades of the accent, for the gradients and glows. */
  --accent-hi: color-mix(in srgb, var(--accent) 78%, #fff);
  --accent-lt: color-mix(in srgb, var(--accent) 45%, #fff);
  --accent-deep: color-mix(in srgb, var(--accent) 88%, #000);
  --accent-ink: #1a0700;
  --good: #4fd18b;
  --focus: #ffb38a;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out-expo: cubic-bezier(.625, .05, 0, 1);   /* hover motion: quick start, long soft settle */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Text sizes chosen in the settings (1 = as designed); phones have their own. */
  --em-title: var(--sv-title-d, 1);
  --em-text: var(--sv-text-d, 1);
  /* Fluid type, rem-anchored so it scales with browser zoom */
  --fs-h1: calc(clamp(2rem, min(1.25rem + 2.5vw, .875rem + 5vh), 3.5rem) * var(--em-title));
  /* Gap between the copy and the dashboard: flame crown + the part of the eclipse above the card */
  --arc-zone: clamp(96px, 17vh, 190px);
  --fs-lead: calc(clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem) * var(--em-text));
}

#emberline-fx *, #emberline-fx *::before, #emberline-fx *::after { box-sizing: border-box; }
#emberline-fx { -webkit-text-size-adjust: 100%; background: var(--bg); }
#emberline-fx {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
#emberline-fx a { color: inherit; text-decoration: none; }
#emberline-fx button { font: inherit; color: inherit; }
#emberline-fx :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
#emberline-fx .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;
}

/* ---------- Stage: everything that sits on top of the fire ---------- */ /* The page is a single screen: no scroll, anything below the fold is cut off */
#emberline-fx .stage {
  position: relative; isolation: isolate;
  height: 100vh; height: 100dvh;
  overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
}
#emberline-fx .em-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#emberline-fx .fx, #emberline-fx .fx-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -2; display: block; pointer-events: none;
}
#emberline-fx .fx-fallback {
  display: none;
  background:
    radial-gradient(120% 70% at 50% var(--arc-y, 78%), transparent 49.6%, var(--accent-lt) 50%, var(--accent) 51.2%, color-mix(in srgb, var(--accent) 35%, transparent) 55%, transparent 64%),
    radial-gradient(60% 45% at 50% 78%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%),
    var(--bg);
}
#emberline-fx.no-webgl .fx { display: none; }
#emberline-fx.no-webgl .fx-fallback { display: block; }
/* Fade the fire into the page below and keep the headline zone dark */
#emberline-fx .stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 34% at 50% 26%, color-mix(in srgb, var(--bg) 72%, transparent), color-mix(in srgb, var(--bg) 0%, transparent) 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent) 0, color-mix(in srgb, var(--bg) 0%, transparent) 18%, color-mix(in srgb, var(--bg) 0%, transparent) 82%, var(--bg) 100%);
}

#emberline-fx .wrap { width: min(1200px, 100% - 2 * clamp(16px, 4vw, 40px)); margin-inline: auto; }
#emberline-fx .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
#emberline-fx .brand svg { color: var(--accent); }
#emberline-fx .brand svg { flex: none; }

#emberline-fx .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer;
  position: relative; isolation: isolate;
  transition: border-color .4s var(--ease-out-expo), color .5s var(--ease-out-expo);
}
#emberline-fx .btn:active { transform: translateY(1px); }
#emberline-fx .btn-primary { color: var(--bg); }
#emberline-fx .btn-primary:has(.arrow) { padding-right: 6px; gap: 12px; }
#emberline-fx .btn-primary::before { /* the fill lives on its own layer so it can tighten on hover while the label keeps its size */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--ink);
  /* Crisp elevation, no glow: a faint bottom bevel and a tight dark contact shadow */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .4);
  transition: transform .6s var(--ease-out-expo), background-color .4s var(--ease-out-expo);
}
#emberline-fx .btn-ghost { background: rgba(255, 255, 255, .04); border-color: var(--line-strong); color: var(--ink); overflow: hidden; }
#emberline-fx .btn-ghost::before { /* light fill that grows from the centre on hover */
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 104%; aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); transform: translate(-50%, -50%) scale(0);
  transition: transform .7s var(--ease-out-expo);
}
#emberline-fx .btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
#emberline-fx .btn-sm.btn-primary:has(.arrow) { padding-right: 5px; gap: 10px; }

/* Rolling label: each letter slides up out of a one-line window while its copy (a text-shadow
   1.3em below) rises into place, staggered 10ms per letter. The arrow does the same sideways. */
#emberline-fx .roll { display: inline-flex; overflow: hidden; line-height: 1.25; }
#emberline-fx .roll > span {
  display: inline-block; white-space: pre; text-shadow: 0 1.3em currentColor;
  transition: transform .6s var(--ease-out-expo) calc(var(--i, 0) * 10ms);
}
/* Arrow in a dark round chip; on hover it leaves to the right while a second arrow, parked 22px to the left, slides in. */
#emberline-fx .btn .arrow {
  position: relative; display: inline-block; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); color: var(--ink); overflow: hidden;
}
#emberline-fx .btn-sm .arrow { width: 30px; height: 30px; }
#emberline-fx .btn .arrow svg { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; transition: transform .6s var(--ease-out-expo); }
#emberline-fx .btn .arrow svg + svg { transform: translateX(-22px); }
#emberline-fx .announce .chev { display: inline-block; transition: transform .6s var(--ease-out-expo); }

/* Hover only where a real pointer hovers, so taps on touch screens do not leave a stuck state.
   Keyboard focus gets the same motion as the pointer. */
@media (hover: hover) and (pointer: fine) {
  #emberline-fx .btn-primary:hover::before { transform: scale(.95); background-color: #fff; }
  #emberline-fx .btn-ghost:hover { color: var(--bg); border-color: var(--ink); }
  #emberline-fx .btn-ghost:hover::before { transform: translate(-50%, -50%) scale(1); }
  #emberline-fx .btn:hover .arrow svg { transform: translateX(22px); }
  #emberline-fx .btn:hover .arrow svg + svg { transform: none; }
  #emberline-fx .announce:hover .chev { transform: translateX(3px); }
}
#emberline-fx .btn-primary:focus-visible::before { transform: scale(.95); background-color: #fff; }
#emberline-fx .btn-ghost:focus-visible { color: var(--bg); border-color: var(--ink); }
#emberline-fx .btn-ghost:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
#emberline-fx .btn:focus-visible .arrow svg { transform: translateX(22px); }
#emberline-fx .btn:focus-visible .arrow svg + svg { transform: none; }

/* ---------- Hero ---------- */
#emberline-fx .hero {
  flex: none;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  /* Gap between the theme's header and the copy: --em-gap from the settings,
     otherwise the template's own (fluid) gap. */
  padding-top: calc(var(--em-gap, clamp(28px, 7vh, 72px)) + var(--sv-header, 0px));
  padding-bottom: var(--arc-zone);
}
#emberline-fx .announce {   /* release note as a quiet text link, no pill */
  display: inline-flex; align-items: center; gap: 9px; padding: 4px 2px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: color .3s ease-out;
}
#emberline-fx .announce:hover { color: var(--ink); }
#emberline-fx .announce .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-hi) 18%, transparent); }
#emberline-fx .announce .chev { color: var(--ink-3); }
#emberline-fx .em-h1 {
  margin: clamp(16px, 2.4vh, 22px) auto 0; max-width: 15ch;
  font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.04em; font-weight: 500;
  text-wrap: balance;
}
/* Two fixed lines once the first one fits on its own row */
@media (min-width: 720px) {
  #emberline-fx .em-h1 { max-width: none; }
  #emberline-fx .em-h1 .l { display: block; white-space: nowrap; }
}
#emberline-fx .em-h1 .glow { display: block; }
/* Each line carries its own gradient, white at the cap height into a very pale red at the baseline.
   clone repeats it per wrapped fragment on narrow screens; the padding is room for descenders,
   because background-clip:text clips to the padding box. */
#emberline-fx .em-h1 .glow .l {
  padding-bottom: .14em; margin-bottom: -.14em;
  background: linear-gradient(180deg, var(--ink) 22%, color-mix(in srgb, var(--accent) 22%, var(--ink)) 100%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#emberline-fx .lead { margin: clamp(12px, 2vh, 16px) auto 0; max-width: 46ch; font-size: var(--fs-lead); font-weight: 400; color: #9da1ab; text-wrap: balance; }
@media (min-width: 720px) { #emberline-fx .lead { max-width: none; white-space: nowrap; } }   /* one line wherever it fits */
#emberline-fx .cta-row { margin-top: clamp(20px, 3.2vh, 30px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Dashboard preview ---------- */
#emberline-fx .preview { position: relative; flex: none; }
#emberline-fx .app {
  position: relative;
  border-radius: var(--radius-l);
  border: 1px solid var(--line-strong);
  padding: 6px;
  background: rgba(10, 11, 14, .86);
  backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--accent-lt) 35%, transparent), 0 -30px 80px -40px color-mix(in srgb, var(--accent) 55%, transparent), 0 40px 120px -40px rgba(0, 0, 0, .9);
  overflow: hidden;
}
#emberline-fx .app::before { /* fire light catching the top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-lt) 90%, transparent) 30%, color-mix(in srgb, var(--accent-lt) 100%, transparent) 50%, color-mix(in srgb, var(--accent-lt) 90%, transparent) 70%, transparent);
}
/* Fire edge glow: a band of heat sits on the centre of the card's top edge, under the fire, and flickers like an ember.
   Built like a border beam: a ring mask on the border, a sharp line plus two blurred copies for the glow.
   Sits after .app without a z-index so plus-lighter adds onto the fire, not onto an isolated group. */
#emberline-fx .rim { --beam: 56%; position: absolute; inset: 0; pointer-events: none; }
#emberline-fx .rim-light { position: absolute; inset: 0; }
#emberline-fx .rim-light--bloom { filter: blur(3px); mix-blend-mode: plus-lighter; }
#emberline-fx .rim-light--bloom .rim-edge { padding: 3px; }
#emberline-fx .rim-light--halo { filter: blur(12px); mix-blend-mode: plus-lighter; }
#emberline-fx .rim-edge {
  position: absolute; inset: 0; padding: 2px; border-radius: var(--radius-l);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#emberline-fx .rim-light--halo .rim-edge { padding: 7px; }
#emberline-fx .rim-run { position: absolute; inset: 0; animation: rim-flicker 4.3s ease-in-out infinite; will-change: opacity, transform; }
/* each layer flickers on its own clock so the light never repeats as one pulse */
#emberline-fx .rim-light--halo .rim-run { animation-duration: 5.7s; }
#emberline-fx .rim-light--bloom .rim-run { animation-duration: 3.1s; animation-delay: -1.2s; }
#emberline-fx .rim-run::before { /* the glow: long and low so it hugs the edge, white-hot centre fading to ember */
  content: ""; position: absolute; left: 50%; top: -45px; width: var(--beam); height: 90px; margin-left: calc(var(--beam) / -2);
  background: radial-gradient(closest-side, #fff6ea 0%, var(--accent-lt) 22%, var(--accent-hi) 48%, color-mix(in srgb, var(--accent) 55%, transparent) 74%, color-mix(in srgb, var(--accent) 0%, transparent) 100%);
}
/* Soft, uneven ember flicker: brightness drifts between ~60% and full and the band breathes a few %.
   About two gentle swells a second at most and never dark, so it reads as fire, not as a flashing light. */
@keyframes rim-flicker {
  0% { opacity: .85; transform: scaleX(1); }
  12% { opacity: 1; }
  19% { opacity: .7; }
  31% { opacity: .95; transform: scaleX(1.04); }
  44% { opacity: .62; }
  52% { opacity: .9; }
  63% { opacity: .74; transform: scaleX(.97); }
  78% { opacity: 1; }
  88% { opacity: .68; }
  100% { opacity: .85; transform: scaleX(1); }
}
/* Shell: a near-black frame holding the sidebar, with the workspace in a lighter inset panel */
#emberline-fx .app-grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
#emberline-fx .app[data-side="rail"] .app-grid { grid-template-columns: 58px minmax(0, 1fr); }

/* ---- Sidebar ---- */
#emberline-fx .side { display: flex; flex-direction: column; gap: 18px; padding: 10px 10px 10px; min-width: 0; }
#emberline-fx .side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 40px; padding: 0 0 0 8px; }
#emberline-fx .side-head .brand { font-size: 15px; gap: 9px; }
#emberline-fx .icon-plain {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 9px;
  background: none; color: var(--ink-3); cursor: pointer; transition: color .2s, background-color .2s;
}
#emberline-fx .icon-plain:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
#emberline-fx .side nav { display: grid; gap: 16px; }
#emberline-fx .side-label {
  display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; padding: 0 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
#emberline-fx .side-label svg { opacity: .7; }
#emberline-fx .side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#emberline-fx .side-item {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; text-align: left;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: color .2s, background-color .2s;
}
#emberline-fx .side-item svg { flex: none; color: var(--ink-3); transition: color .2s; }
#emberline-fx .side-item:hover { color: var(--ink); background: rgba(255, 255, 255, .035); }
#emberline-fx .side-item:hover svg { color: var(--ink-2); }
#emberline-fx .side-item[aria-current="page"] {
  color: var(--ink); border-color: color-mix(in srgb, var(--accent-hi) 24%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 3%, transparent) 75%);
}
#emberline-fx .side-item[aria-current="page"] svg { color: var(--accent-hi); }
#emberline-fx .side-item[aria-current="page"]::before { /* ember marker on the shell edge */
  content: ""; position: absolute; left: -11px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 75%, transparent);
}
#emberline-fx .badge {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 600; line-height: 1; background: rgba(255, 255, 255, .07); color: var(--ink-2);
}
#emberline-fx .badge.new { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-lt); }
#emberline-fx .upgrade {
  position: relative; overflow: hidden; margin-top: auto; padding: 16px; border-radius: 14px; color: var(--accent-ink);
  background: radial-gradient(130% 140% at 100% 0%, var(--accent-lt) 0%, var(--accent-hi) 32%, var(--accent) 64%, var(--accent-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
#emberline-fx .upgrade > :not(.arcs) { position: relative; }
#emberline-fx .upgrade strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#emberline-fx .upgrade p { margin: 4px 0 12px; font-size: 13px; font-weight: 500; line-height: 1.4; }
#emberline-fx .upgrade button {
  height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--accent-ink); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
#emberline-fx .arcs { position: absolute; pointer-events: none; fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
#emberline-fx .upgrade .arcs { right: -64px; top: -64px; width: 170px; height: 170px; opacity: .55; }
/* Collapsed rail: icons only; labels stay in the accessibility tree */
#emberline-fx .app[data-side="rail"] .side { padding-inline: 9px; }
#emberline-fx .app[data-side="rail"] .side-head { flex-direction: column; padding: 0; gap: 8px; }
#emberline-fx .app[data-side="rail"] :is(.side-text, .side-label, .badge, .upgrade) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#emberline-fx .app[data-side="rail"] .side-item { justify-content: center; padding: 0; }
#emberline-fx .app[data-side="rail"] .side-item[aria-current="page"]::before { left: -10px; }

/* ---- Workspace panel ---- */
#emberline-fx .main {
  min-width: 0; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .012) 45%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
#emberline-fx .topbar { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 10px 9px 20px; border-bottom: 1px solid var(--line); }
#emberline-fx .top-brand { display: none; font-size: 14px; gap: 8px; }
#emberline-fx .crumbs ol { display: flex; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--ink-3); }
#emberline-fx .crumbs li { display: inline-flex; align-items: center; gap: 9px; }
#emberline-fx .crumbs li + li::before {
  content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .7;
}
#emberline-fx .crumbs a { display: inline-flex; align-items: center; min-height: 28px; color: var(--ink-3); transition: color .2s; }
#emberline-fx .crumbs a:hover { color: var(--ink); }
#emberline-fx .crumbs [aria-current] { color: var(--ink); font-weight: 500; }
#emberline-fx .top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#emberline-fx .search {
  display: flex; align-items: center; gap: 8px; width: 280px; height: 38px; padding: 0 5px 0 13px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, .28); color: var(--ink-3); cursor: text;
}
#emberline-fx .search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
#emberline-fx .search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; outline: none; font: inherit; font-size: 13px; color: var(--ink); }
#emberline-fx .search input::placeholder { color: var(--ink-3); opacity: 1; }
#emberline-fx .search input::-webkit-search-cancel-button { display: none; }
#emberline-fx .search kbd { font: inherit; font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); }
#emberline-fx .icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); cursor: pointer; color: var(--ink-2);
  transition: color .2s, border-color .2s;
}
#emberline-fx .icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
#emberline-fx .icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #121318; }
#emberline-fx .avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-lt), var(--accent)); color: var(--accent-ink); font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 2px #121318, 0 0 0 3px color-mix(in srgb, var(--accent-hi) 45%, transparent);
}

#emberline-fx .app-body { padding: 20px 22px 22px; display: grid; gap: 16px; }
#emberline-fx .app-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 16px; flex-wrap: wrap; }
#emberline-fx .title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#emberline-fx .app-head h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
#emberline-fx .pill-select {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 12px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .03);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
#emberline-fx .pill-select:hover { color: var(--ink); }
#emberline-fx .live { margin: 5px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
#emberline-fx .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(79, 209, 139, .18); }
#emberline-fx .head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#emberline-fx .dbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color .2s, border-color .2s;
}
#emberline-fx .dbtn svg { flex: none; color: var(--ink-3); }
#emberline-fx .dbtn:hover { background: rgba(255, 255, 255, .07); }
#emberline-fx .dbtn-ember {
  border-color: transparent; color: var(--accent-ink); font-weight: 600;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
#emberline-fx .dbtn-ember svg { color: currentColor; }
#emberline-fx .dbtn-ember:hover { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }

/* ---- Cards ---- */
#emberline-fx .card {
  position: relative; min-width: 0; border-radius: var(--radius-m); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .016));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
#emberline-fx .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#emberline-fx .kpi { padding: 14px 14px 15px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#emberline-fx .kpi-top { display: flex; align-items: center; gap: 10px; }
#emberline-fx .chip-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--accent-hi);
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-hi) 22%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
#emberline-fx .kpi .label { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#emberline-fx .round-btn {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--ink-3); cursor: pointer; transition: color .2s, border-color .2s;
}
#emberline-fx .round-btn:hover { color: var(--ink); border-color: var(--line-strong); }
#emberline-fx .kpi .value { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
#emberline-fx .kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
#emberline-fx .delta {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: #7fe0aa; background: rgba(79, 209, 139, .12); border: 1px solid rgba(79, 209, 139, .18);
}
/* The ember card: the one block that carries the brand colour at full strength */
#emberline-fx .kpi-ember {
  overflow: hidden; color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-lt) 60%, transparent);
  background: radial-gradient(130% 140% at 100% 0%, var(--accent-lt) 0%, var(--accent-hi) 30%, var(--accent) 62%, var(--accent-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 40px -24px color-mix(in srgb, var(--accent) 90%, transparent);
}
#emberline-fx .kpi-ember > :not(.arcs) { position: relative; }
#emberline-fx .kpi-ember .label, #emberline-fx .kpi-ember .kpi-foot { color: var(--accent-ink); }
#emberline-fx .kpi-ember .chip-ico { color: var(--accent-ink); background: rgba(26, 7, 0, .1); border-color: rgba(26, 7, 0, .16); box-shadow: none; }
#emberline-fx .kpi-ember .arcs { right: -70px; bottom: -96px; width: 230px; height: 230px; opacity: .6; }
#emberline-fx .kpi-ember :focus-visible { outline-color: var(--accent-ink); }
#emberline-fx .kpi-ember[data-off="true"] .value { opacity: .5; }
#emberline-fx .switch { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: rgba(26, 7, 0, .25); cursor: pointer; }
#emberline-fx .switch::after { content: ""; position: absolute; inset: -10px 0; }   /* 40px tall touch target */
#emberline-fx .switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .35s var(--ease-out-expo); }
#emberline-fx .switch[aria-checked="true"] { background: var(--accent-ink); }
#emberline-fx .switch[aria-checked="true"] i { transform: translateX(16px); }

#emberline-fx .row-2 { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 12px; }
#emberline-fx .panel { padding: 16px 16px 14px; }
#emberline-fx .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 8px; }
#emberline-fx .panel h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#emberline-fx .panel .sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); }
#emberline-fx .panel .sub strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
#emberline-fx .panel .sub .up { color: #7fe0aa; font-weight: 600; }
#emberline-fx .panel-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#emberline-fx .pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
#emberline-fx .pills button {
  height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--ink-3); transition: color .2s;
}
#emberline-fx .pills button:hover { color: var(--ink); }
#emberline-fx .pills button[aria-pressed="true"] { color: var(--accent-ink); font-weight: 600; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
#emberline-fx .select { position: relative; display: inline-flex; align-items: center; }
#emberline-fx .select select {
  appearance: none; -webkit-appearance: none; height: 36px; padding: 0 32px 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(0, 0, 0, .28); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
#emberline-fx .select option { background: #121318; color: var(--ink); }
#emberline-fx .select svg { position: absolute; right: 12px; pointer-events: none; color: var(--ink-3); }

/* Line chart: one series, glowing ember stroke, a pinned point with its tooltip */
#emberline-fx .chart { position: relative; }
#emberline-fx .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
#emberline-fx .chart .grid line { stroke: rgba(255, 255, 255, .07); stroke-dasharray: 2 5; }
#emberline-fx .chart .axis text { fill: #9ea2ac; font-size: 12px; font-family: var(--font); font-variant-numeric: tabular-nums; }
#emberline-fx .chart .line { fill: none; stroke: var(--accent-hi); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#emberline-fx .chart .line-glow { fill: none; stroke: var(--accent); stroke-width: 7; opacity: .5; }
#emberline-fx .chart .guide { stroke: color-mix(in srgb, var(--accent-lt) 50%, transparent); stroke-dasharray: 3 4; }
#emberline-fx .chart .pt-halo { fill: color-mix(in srgb, var(--accent) 25%, transparent); }
#emberline-fx .chart .pt { fill: #fff; stroke: var(--accent); stroke-width: 3; }
#emberline-fx .chart .hit { fill: transparent; cursor: crosshair; outline: none; }
#emberline-fx .chart .hit:focus-visible { stroke: var(--focus); stroke-width: 2; }
#emberline-fx .tip {
  --ax: 50%;
  position: absolute; pointer-events: none; transform: translate(calc(var(--ax) * -1), calc(-100% - 16px));
  padding: 8px 12px 9px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent-lt) 35%, transparent); background: rgba(24, 17, 15, .94);
  font-size: 12px; color: var(--ink-2); white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8);
  transition: left .3s var(--ease-out-expo), top .3s var(--ease-out-expo);
}
#emberline-fx .tip::after {
  content: ""; position: absolute; left: var(--ax); bottom: -5px; width: 8px; height: 8px; margin-left: -4px;
  background: rgb(24, 17, 15); border: solid color-mix(in srgb, var(--accent-lt) 35%, transparent); border-width: 0 1px 1px 0; transform: rotate(45deg);
}
#emberline-fx .tip strong { display: block; margin-top: 1px; color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
#emberline-fx .tip .up { margin-left: 6px; font-size: 12px; color: #7fe0aa; }

/* Heatmap: events per two-hour slot, last seven days */
#emberline-fx .heat { display: grid; grid-template-columns: 30px repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; margin-top: 6px; }
#emberline-fx .heat span { font-size: 12px; line-height: 1; color: var(--ink-3); }
#emberline-fx .heat .hx { grid-column: span 2; padding-top: 4px; }
#emberline-fx .heat i { display: block; aspect-ratio: 1.3; border-radius: 4px; }
#emberline-fx :is(.heat, .heat-legend) i { background: rgba(255, 255, 255, .045); }
#emberline-fx :is(.heat, .heat-legend) i[data-l="1"] { background: color-mix(in srgb, var(--accent) 20%, transparent); }
#emberline-fx :is(.heat, .heat-legend) i[data-l="2"] { background: color-mix(in srgb, var(--accent) 40%, transparent); }
#emberline-fx :is(.heat, .heat-legend) i[data-l="3"] { background: color-mix(in srgb, var(--accent) 70%, transparent); }
#emberline-fx :is(.heat, .heat-legend) i[data-l="4"] { background: var(--accent-hi); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
#emberline-fx .heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
#emberline-fx .heat-legend span:first-child { margin-right: 4px; }
#emberline-fx .heat-legend span:last-child { margin-left: 4px; }
#emberline-fx .heat-legend i { width: 12px; height: 12px; border-radius: 3px; }

#emberline-fx .src-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
#emberline-fx .src { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
#emberline-fx .src:nth-child(-n+2) { border-top: 0; }
#emberline-fx .src .logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
#emberline-fx .src .name { font-size: 14px; font-weight: 600; }
#emberline-fx .src .meta { font-size: 12px; color: var(--ink-3); }
#emberline-fx .status { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
#emberline-fx .status svg { color: var(--good); }
#emberline-fx .status.syncing svg { color: var(--accent-hi); }



/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  #emberline-fx .row-2 { grid-template-columns: 1fr; }
  #emberline-fx .src-list { grid-template-columns: 1fr; }
  #emberline-fx .src:nth-child(2) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  #emberline-fx .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #emberline-fx .search { width: 210px; }
}
@media (max-width: 760px) {
  #emberline-fx .app .side { display: none; }
  #emberline-fx .app .app-grid, #emberline-fx .app[data-side="rail"] .app-grid { grid-template-columns: minmax(0, 1fr); }
  #emberline-fx .top-brand { display: inline-flex; }
  #emberline-fx .crumbs { display: none; }
}
@media (max-width: 640px) {
  #emberline-fx .rim { --beam: 74%; }
  #emberline-fx .app { padding: 4px; }
  #emberline-fx .main { border-radius: 18px; }
  #emberline-fx .topbar { min-height: 54px; padding: 8px 8px 8px 14px; }
  #emberline-fx .search, #emberline-fx .dbtn-date { display: none; }
  #emberline-fx .app-body { padding: 14px; gap: 12px; }
  #emberline-fx .app-head h2 { font-size: 19px; }
  #emberline-fx .kpis { gap: 10px; }
  #emberline-fx .kpi { padding: 12px; gap: 10px; }
  #emberline-fx .kpi .value { font-size: 20px; }
  #emberline-fx .kpi .round-btn { display: none; }
  #emberline-fx .chip-ico { width: 30px; height: 30px; }
  #emberline-fx .kpi-ember { grid-column: 1 / -1; order: -1; }
  #emberline-fx .kpis > .kpi:nth-child(3) { grid-column: 1 / -1; }
  #emberline-fx .src { grid-template-columns: 36px minmax(0, 1fr); row-gap: 4px; }
  #emberline-fx .src .status { grid-column: 2; }
}
@media (max-width: 380px) { #emberline-fx .kpis { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  #emberline-fx *, #emberline-fx *::before, #emberline-fx *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  #emberline-fx .rim-run { animation: none; }   /* the glow stays lit at the centre of the top edge, steady */
}
@media (forced-colors: active) {
  #emberline-fx .btn-primary { border: 1px solid ButtonText; }
  #emberline-fx .rim { display: none; }
}

/* Phones have their own text sizes (settings). After the block's variables, so it wins. */
@media (max-width: 719px) {
  #emberline-fx { --em-title: var(--sv-title-m, 1); --em-text: var(--sv-text-m, 1); --em-gap: var(--em-gap-m, clamp(28px, 7vh, 72px)); }
}

/* The computer gap from the settings, on wider screens. */
@media (min-width: 720px) {
  #emberline-fx { --em-gap: var(--em-gap-d, clamp(28px, 7vh, 72px)); }
}

/* The site's own logo in the dashboard (settings): as tall as the template's mark. */
#emberline-fx .em-logo { display: block; flex: none; width: auto; max-width: 64px; height: 16px; object-fit: contain; }
#emberline-fx .side-head .em-logo { height: 18px; }