/* ================================================================== */
/*  Mosaic CRM — Futuristic Modern Design System & Micro-Animations   */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*  Command deck                                                      */
/*                                                                    */
/*  Dark instrument panel rather than paper: light is emitted by the   */
/*  data, not reflected off a page. Surfaces are near-black glass, the */
/*  only saturated colour belongs to a figure that means something,    */
/*  and everything structural is a low-alpha cyan so the eye goes to   */
/*  the numbers instead of the chrome.                                 */
/* ------------------------------------------------------------------ */
:root {
  --ink: #dff0ff;
  --ink-muted: #a8c2e0;
  --muted: #7391b5;
  --line: rgba(103, 183, 232, 0.16);
  --paper: #04070f;
  --panel-bg: rgba(10, 19, 36, 0.72);

  /* Emissive palette. --leaf keeps its name so every existing reference
     re-points at the new accent without a sweep through the file. */
  --leaf: #22d3ee;
  --leaf-glow: rgba(34, 211, 238, 0.45);
  --mint: rgba(34, 211, 238, 0.08);
  --mint-accent: #67e8f9;
  --sun: #fbbf24;
  --coral: #fb7185;
  --navy: #04070f;
  --navy-surface: #0a1424;
  --navy-border: rgba(103, 183, 232, 0.2);
  --cyan-glow: rgba(56, 189, 248, 0.45);
  --violet: #a78bfa;
  
  /* Easing curves & Radius */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
}

* {
  box-sizing: border-box;
}

/* Two nebulae bleeding in from the corners over near-black, plus a faint
   engineering grid. The grid is what sells the scene: it gives the eye a
   sense of a surface receding behind the instruments instead of a flat
   colour, and at 1px / 0.05 alpha it never competes with the data. */
body {
  margin: 0;
  background:
    linear-gradient(rgba(103, 183, 232, 0.045) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(103, 183, 232, 0.045) 1px, transparent 1px) 0 0 / 44px 100%,
    radial-gradient(1100px 700px at 12% -8%, rgba(34, 211, 238, 0.16), transparent 62%),
    radial-gradient(950px 620px at 92% 6%, rgba(167, 139, 250, 0.14), transparent 60%),
    radial-gradient(900px 700px at 60% 108%, rgba(56, 189, 248, 0.10), transparent 62%),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------ */
/*  Futuristic Keyframe Animations                                    */
/* ------------------------------------------------------------------ */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 12px var(--leaf-glow); }
  50% { box-shadow: 0 0 24px var(--leaf-glow), 0 0 8px rgba(52, 211, 153, 0.5); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes knobRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ------------------------------------------------------------------ */
/*  Login Screen                                                      */
/* ------------------------------------------------------------------ */
.login-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: var(--paper);
}

.login-aside {
  background: linear-gradient(135deg, #0b1329 0%, #172d47 100%);
  color: white;
  padding: 52px 8vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}

.login-aside::before {
  content: '';
  width: 580px;
  height: 580px;
  position: absolute;
  border-radius: 50%;
  right: -240px;
  top: 5%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.15) 0%, rgba(30, 58, 138, 0) 70%);
  filter: blur(40px);
  pointer-events: none;
}

.brand {
  font-weight: 800;
  letter-spacing: -0.5px;
  font-size: 21px;
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  user-select: none;
}

.mark {
  display: inline-grid;
  grid-template-columns: repeat(2, 9px);
  gap: 3px;
}

.mark i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #34d399;
  transition: transform 0.3s var(--ease-bounce), background 0.3s ease;
}

.brand:hover .mark i:nth-child(1) { transform: scale(1.25) rotate(45deg); background: #38bdf8; }
.brand:hover .mark i:nth-child(4) { transform: scale(1.25) rotate(-45deg); background: var(--sun); }

.mark i:nth-child(2), .mark i:nth-child(3) {
  background: var(--sun);
}

.login-aside h1 {
  font-size: clamp(38px, 4vw, 60px);
  max-width: 620px;
  line-height: 1.08;
  letter-spacing: -2.5px;
  position: relative;
  margin: 0;
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-aside p {
  font-size: 15px;
  max-width: 460px;
  line-height: 1.7;
  color: #94a3b8;
  position: relative;
}

.login-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: scaleUp 0.4s var(--ease-smooth);
}

.auth {
  width: min(400px, 100%);
}

.eyebrow {
  color: var(--leaf);
  font: 600 11px 'DM Mono', monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.auth h2 {
  font-size: 32px;
  letter-spacing: -1.5px;
  margin: 12px 0 8px;
  font-weight: 800;
}

.auth p {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

/* ------------------------------------------------------------------ */
/*  Form Inputs & Knobs                                               */
/* ------------------------------------------------------------------ */
.field {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.field label {
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.2px;
}

.field input, .control, select.control {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font: inherit;
  background: var(--panel-bg);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.field input:focus, .control:focus {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px var(--leaf-glow);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------ */
/*  Buttons & Interactive Micro-Animations                             */
/* ------------------------------------------------------------------ */
.primary {
  border: 0;
  /* Last of the old green. Dark text on the cyan rather than white: the
     accent is bright enough that white on it measures under 3:1. */
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  color: #04121a;
  border-radius: var(--radius-md);
  padding: 13px 20px;
  font: 700 13px 'Manrope', sans-serif;
  cursor: pointer;
  width: 100%;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
  transition: transform 0.2s var(--ease-bounce), box-shadow 0.2s ease, background 0.3s ease;
}

.primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.6s ease;
}

.primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45);
}

.primary:hover::before {
  left: 100%;
}

.primary:active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.secondary {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  font: 600 12px 'Manrope', sans-serif;
  /* Was #334155 — dark slate on dark glass measured 1.79:1, which made every
     secondary button in the app effectively invisible after the theme flip. */
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease-bounce);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.secondary:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.45);
  color: var(--mint-accent);
  transform: translateY(-1.5px);
  box-shadow: 0 0 18px -4px rgba(34, 211, 238, 0.4);
}

.secondary:active {
  transform: translateY(0px) scale(0.97);
}

.hint {
  font-size: 11px !important;
  margin-top: 18px !important;
  color: var(--muted);
}

/* ------------------------------------------------------------------ */
/*  App Shell & Sidebar                                               */
/* ------------------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

/* Pinned to the viewport so every destination — and the sign-out control in
   the footer — stays reachable no matter how far the page scrolls. Grid
   items stretch to the row height by default, which would defeat the sticky
   positioning, hence align-self: start alongside the explicit 100vh. If the
   nav ever outgrows the viewport it scrolls inside itself rather than
   pushing the footer out of reach. */
.sidebar {
  background: linear-gradient(180deg, #0b1329 0%, #1e293b 100%);
  color: white;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Keeps the footer pinned to the bottom on tall screens without letting it be
   compressed away when the nav list is long. */
.sidebar .nav {
  flex: 0 0 auto;
}

.sidebar .brand {
  margin: 0 8px 38px;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav button {
  border: 0;
  background: transparent;
  color: #94a3b8;
  text-align: left;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font: 600 13px 'Manrope', sans-serif;
  cursor: pointer;
  position: relative;
  transition: all 0.25s var(--ease-smooth);
}

.nav button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  transform: translateX(4px);
}

.nav button.active {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.3) 0%, rgba(5, 150, 105, 0.15) 100%);
  color: #34d399;
  font-weight: 700;
  border-left: 3px solid #34d399;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.2);
}

.nav small {
  font: 600 10px 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #64748b;
  margin: 26px 12px 8px;
}

.user {
  margin-top: auto;
  padding: 15px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  font-size: 12px;
}

.user strong {
  display: block;
  color: white;
  margin-bottom: 3px;
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/*  Main View & Topbar                                                */
/* ------------------------------------------------------------------ */
.main {
  padding: 36px 4.5vw 60px;
  max-width: 1540px;
  width: 100%;
  margin: auto;
  animation: scaleUp 0.35s var(--ease-smooth);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  gap: 20px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/*  Revenue split pie (admin overview header)                         */
/* ------------------------------------------------------------------ */
/* Profile chip and pie share a right-hand column. Laid out as three siblings
   in the topbar the profile wraps to its own row somewhere around 1150px —
   a width plenty of laptops sit at — so they are grouped instead. */
.topbar-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-left: auto;
  flex: none;
}

.pie-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* The flat-pie rules that lived here are gone with the flat pie; the solid's
   styling is in the 3D charts section. The hard-won constraint carries over:
   hover may change paint but never geometry, or the shape moves out from
   under the pointer and oscillates. */

/* Fixed, not min-width: the readout swaps between a segment figure and the
   total, and letting the panel resize to fit reflowed the topbar and slid
   the pie out from under the cursor. */
.pie-side {
  width: 186px;
  flex: none;
}

/* Fixed height, and every line clipped rather than wrapped: swapping between
   a segment figure and the total must not change this block's size, or the
   panel resizes and drags the pie out from under the pointer. */
.pie-readout {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 8px;
  height: 56px;
  overflow: hidden;
}

.pie-readout b {
  display: block;
  font: 800 16px 'Manrope', sans-serif;
  letter-spacing: -0.6px;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
}

.pie-readout-label,
.pie-readout-note {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pie-readout-label {
  font-size: 11px;
  color: var(--ink);
  margin-top: 1px;
}

.pie-readout-note {
  font-size: 10px;
  color: var(--muted);
}

.pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.pie-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pie-legend li:hover,
.pie-legend li.is-active {
  background: rgba(5, 150, 105, 0.07);
  color: var(--ink);
}

/* The shared .dot carries its own right margin for the donut legend; here the
   flex gap already provides the spacing. */
.pie-legend .dot {
  margin-right: 0;
  flex: none;
}

.pie-legend-label {
  flex: 1;
  white-space: nowrap;
}

.pie-legend-pct {
  font: 700 10.5px 'DM Mono', monospace;
  color: var(--ink);
}

.topbar h1 {
  font-size: 30px;
  letter-spacing: -1.4px;
  margin: 6px 0;
  font-weight: 800;
}

/* ------------------------------------------------------------------ */
/*  Extruded headings                                                 */
/*                                                                    */
/*  Two stacked copies of the same string. The face is a gradient      */
/*  clipped to the glyphs, which requires transparent fill — so a      */
/*  text-shadow applied to it would be visible straight through the    */
/*  letters instead of behind them. The ::before duplicate, fed by     */
/*  attr(data-text), carries the extrusion underneath.                 */
/* ------------------------------------------------------------------ */
/* The element's own glyphs go transparent and serve only to size the box and
   stay selectable/readable to assistive tech. Both visible layers are
   pseudo-elements, because paint order decides this: a background-clip:text
   face paints with the element's BACKGROUND, which comes before a
   z-index:-1 child — so an extruded ::before behind a clipped face on the
   same element covers the face instead of sitting under it. Two absolutely
   positioned pseudo-elements with no z-index paint in DOM order, so ::after
   reliably lands on top of ::before. */
.main h1[data-text],
.panel h3[data-text] {
  position: relative;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.main h1[data-text]::before,
.main h1[data-text]::after,
.panel h3[data-text]::before,
.panel h3[data-text]::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
}

/* Layer 1 — the extruded body. Stacked offsets build the side wall; the last
   two are the contact shadow and the cyan bounce the rest of the page is
   lit by. */
.main h1[data-text]::before {
  -webkit-text-fill-color: #0a1526;
  color: #0a1526;
  text-shadow:
    0 1px 0 #0e1c31,
    0 2px 0 #0d1a2e,
    0 3px 0 #0b172a,
    0 4px 0 #0a1526,
    0 5px 0 #091322,
    0 6px 0 #07101c,
    0 9px 16px rgba(0, 0, 0, 0.85),
    0 0 34px rgba(34, 211, 238, 0.34);
}

/* Panel headings are smaller, so the wall is shallower — the same six-layer
   stack on 14px text turns into an unreadable smear. */
.panel h3[data-text]::before {
  -webkit-text-fill-color: #0a1526;
  color: #0a1526;
  text-shadow:
    0 1px 0 #0d1a2e,
    0 2px 0 #0b172a,
    0 3px 0 #091322,
    0 5px 10px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(34, 211, 238, 0.26);
}

/* Layer 2 — the polished face, clipped to the glyphs and sitting on top of
   the extrusion. Every stop stays bright: on a near-black ground a ramp that
   darkens toward the baseline makes the bottom of each glyph vanish, so the
   gloss has to come from the tonal break rather than from going dark. */
.main h1[data-text]::after,
.panel h3[data-text]::after {
  background-image: linear-gradient(
    177deg,
    #ffffff 0%,
    #f4fdff 26%,
    #d2f5fe 45%,
    /* The hard step is the whole trick: a smooth ramp reads as a tinted
       heading, an abrupt tonal break reads as light bending across a
       polished surface. */
    #9ee6f8 50%,
    #5fd0ea 53%,
    #46c9e5 76%,
    #38bfdf 100%
  );
  background-size: 100% 200%;
  background-position: 0 22%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The highlight slides into place once as the heading arrives, then stops.
   A looping sweep on every heading would be movement in the corner of the
   eye for the whole session. */
@media (prefers-reduced-motion: no-preference) {
  .main h1[data-text]::after {
    animation: heading-sheen 1.15s var(--ease-smooth) 1;
  }
}

@keyframes heading-sheen {
  from { background-position: 0 88%; }
  to   { background-position: 0 22%; }
}

.topbar p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.profile {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.avatar {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.profile span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

/* ------------------------------------------------------------------ */
/*  Control Bar & Dial Dropdowns                                      */
/* ------------------------------------------------------------------ */
.controls {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  align-items: center;
}

.control {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font: 600 12.5px 'Manrope', sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
}

.control:hover {
  border-color: var(--leaf);
  transform: translateY(-1px);
  box-shadow: 0 0 14px -3px rgba(34, 211, 238, 0.35);
}

/* ------------------------------------------------------------------ */
/*  KPI Cards & Micro-Interactions                                    */
/* ------------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

/* Cards sit on the page as physical objects: a glazed top third, a specular
   inner highlight along the top edge, a soft ambient shadow and a tighter
   contact shadow. Together they read as a polished surface catching light
   rather than a rectangle with a border. */
.card {
  /* Background layers, not a pseudo-element: an absolutely-positioned ::before
     paints above the card's static children and would haze the figure. The
     sweep is angled from the upper left to match the direction the 3D solids
     are lit from, so the whole page agrees where the light is. */
  background:
    radial-gradient(130% 100% at 8% -25%, rgba(103, 232, 249, 0.14) 0%, rgba(103, 232, 249, 0) 55%),
    linear-gradient(168deg, rgba(24, 41, 68, 0.86) 0%, rgba(10, 19, 36, 0.82) 46%, rgba(6, 12, 24, 0.9) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  /* A lit top edge, a cyan halo bleeding outward, and a deep drop. On a dark
     ground the halo is what reads as depth — a shadow alone is invisible
     against near-black. */
  box-shadow:
    inset 0 1px 0 rgba(160, 230, 255, 0.22),
    inset 0 0 22px rgba(34, 211, 238, 0.05),
    0 0 0 1px rgba(103, 183, 232, 0.05),
    0 18px 38px -20px rgba(0, 0, 0, 0.9);
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s ease, border-color 0.25s ease;
}


/* Staggered entrance. The delay is capped so a long row never leaves the
   last card visibly lagging. */
@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: card-in 0.42s var(--ease-smooth) backwards;
  }
  .cards .card:nth-child(1) { animation-delay: 0.02s; }
  .cards .card:nth-child(2) { animation-delay: 0.05s; }
  .cards .card:nth-child(3) { animation-delay: 0.08s; }
  .cards .card:nth-child(4) { animation-delay: 0.11s; }
  .cards .card:nth-child(5) { animation-delay: 0.14s; }
  .cards .card:nth-child(6) { animation-delay: 0.17s; }
  .cards .card:nth-child(7) { animation-delay: 0.20s; }
  .cards .card:nth-child(8) { animation-delay: 0.23s; }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--leaf), var(--mint-accent));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(190, 240, 255, 0.4),
    inset 0 0 30px rgba(34, 211, 238, 0.1),
    0 0 0 1px rgba(34, 211, 238, 0.35),
    0 0 30px -4px rgba(34, 211, 238, 0.3),
    0 26px 48px -20px rgba(0, 0, 0, 0.95);
  border-color: rgba(34, 211, 238, 0.5);
}

/* The KPI figure emits rather than merely sits there — the one place a glow
   on text is warranted, because the number is the payload of the card. */
.card .value {
  text-shadow: 0 0 22px rgba(34, 211, 238, 0.35);
}

/* The KPI figure is the thing being read, so it gets the tightest tracking
   and a tabular figure set — count-up would otherwise make the number jitter
   sideways as digit widths change mid-animation. */
.card .value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.card:hover::after {
  opacity: 1;
}

.card .label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.card .value {
  font-size: 26px;
  letter-spacing: -1.4px;
  font-weight: 800;
  margin: 10px 0 6px;
  color: var(--ink);
}

.delta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--leaf);
  display: flex;
  align-items: center;
  gap: 4px;
}

.delta.down {
  color: var(--coral);
}

/* Descriptive caption rather than a measured change — muted so a real delta
   never gets confused with static explanatory text. */
.delta.flat {
  color: var(--muted);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/*  Sortable table headers                                            */
/* ------------------------------------------------------------------ */
.sortable {
  transition: color 0.15s ease, background 0.15s ease;
}

.sortable:hover {
  color: var(--leaf);
  background: rgba(5, 150, 105, 0.06);
}

.sortable.sorted {
  color: var(--leaf);
}

.sortable:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/*  Revenue Waterfall Panel                                           */
/* ------------------------------------------------------------------ */
.waterfall {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.wf-row {
  display: grid;
  grid-template-columns: 220px 1fr 130px;
  gap: 16px;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.wf-row:hover {
  background: rgba(5, 150, 105, 0.04);
}

.wf-label {
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
}

.wf-label b {
  color: var(--ink);
  font-weight: 700;
}

.wf-label .sub {
  margin: 2px 0 0;
  font-size: 10.5px;
  color: var(--muted);
}

.wf-bar-wrap {
  background: #f1f5f9;
  border-radius: 6px;
  height: 24px;
  overflow: hidden;
  position: relative;
}

.wf-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.wf-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  animation: shimmer 2.5s infinite;
}

.wf-amount {
  text-align: right;
  font: 700 13.5px 'DM Mono', monospace;
  color: var(--ink);
}

/* ------------------------------------------------------------------ */
/*  Grid & Panels                                                     */
/* ------------------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 20px;
}

.panel {
  background:
    radial-gradient(120% 80% at 6% -10%, rgba(103, 232, 249, 0.09) 0%, rgba(103, 232, 249, 0) 52%),
    linear-gradient(170deg, rgba(20, 35, 60, 0.8) 0%, rgba(8, 16, 31, 0.86) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow:
    inset 0 1px 0 rgba(160, 230, 255, 0.16),
    0 20px 44px -24px rgba(0, 0, 0, 0.95);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.panel:hover {
  border-color: rgba(34, 211, 238, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(190, 240, 255, 0.26),
    0 0 26px -6px rgba(34, 211, 238, 0.18),
    0 20px 44px -24px rgba(0, 0, 0, 0.95);
}

.panel:hover {
  border-color: #cbd5e1;
}

.panel h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.5px;
  font-weight: 800;
}

.sub {
  font-size: 11.5px;
  color: var(--muted);
  margin: 4px 0 18px;
}

/* ------------------------------------------------------------------ */
/*  3D charts                                                         */
/*                                                                    */
/*  Every chart is SVG, so it is resolved by the renderer at whatever  */
/*  the display's pixel ratio happens to be — the same markup is sharp */
/*  on a 1x laptop panel and on a 4K monitor, with no raster assets    */
/*  and no canvas rescaling. Depth is projected geometry drawn back-   */
/*  to-front, lit from one fixed direction shared by every solid.      */
/* ------------------------------------------------------------------ */

.chart3d {
  display: block;
  width: 100%;
  height: auto;
  /* Sub-pixel geometry should stay smooth rather than snap to the pixel
     grid — these are continuous surfaces, not icons. */
  shape-rendering: geometricPrecision;
}

.c3d-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.c3d-grid-depth {
  stroke-dasharray: 2 3;
  opacity: 0.7;
}

.c3d-grid text {
  font: 600 10px 'DM Mono', monospace;
  fill: var(--muted);
}

.c3d-month {
  font: 700 10.5px 'Manrope', sans-serif;
  fill: var(--muted);
}

/* The deck the columns stand on: a dark slab with a lit leading edge, so the
   bars read as standing on a surface rather than floating in the panel. */
.c3d-floor {
  fill: rgba(34, 211, 238, 0.07);
  stroke: rgba(34, 211, 238, 0.3);
  stroke-width: 1;
}

.c3d-empty {
  fill: rgba(103, 183, 232, 0.14);
}

/* Columns lift toward the viewer on hover. The transform is on the group and
   moves along the projection's own depth vector, so the solid reads as
   sliding forward rather than being scaled. */
.c3d-bar {
  cursor: pointer;
  transform-box: fill-box;
  transition: transform 0.22s var(--ease-smooth), filter 0.22s ease;
}

/* Columns emit. drop-shadow rather than an SVG feGaussianBlur filter: it is
   GPU-composited, so twelve of them stay cheap where twelve filter graphs
   would not. */
.c3d-bar:not(.is-empty) {
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.4));
}

.c3d-bar:not(.is-empty):hover {
  transform: translate(2px, -3px);
  filter: brightness(1.14) drop-shadow(0 0 14px rgba(34, 211, 238, 0.75));
}

.c3d-bar.is-empty {
  cursor: default;
}

/* Columns grow out of the floor on first paint. Transform-origin sits at the
   bottom of each group's own box so they rise rather than expand about their
   middles. */
@media (prefers-reduced-motion: no-preference) {
  .c3d-bar {
    animation: bar-rise 0.5s var(--ease-smooth) backwards;
    transform-origin: 50% 100%;
  }
}

@keyframes bar-rise {
  from { transform: scaleY(0.02); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ---------------------------- Pie solids ---------------------------- */

.pie3d {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

/* Paint-only state changes. Anything that moves a face would shift the hit
   area out from under the pointer, fire mouseleave, snap back, and oscillate. */
.pie3d-part {
  transition: opacity 0.16s ease, filter 0.16s ease;
}

.pie3d-top.is-interactive {
  cursor: pointer;
}

.pie3d-part.is-active {
  filter: brightness(1.12) saturate(1.05);
}

.pie3d-part.is-dimmed {
  opacity: 0.3;
}

/* A hairline between wedges so adjacent slices of similar value stay
   distinguishable without a heavy stroke flattening the shading. */
.pie3d-top {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1;
  pointer-events: all;
}

.pie3d-wall {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 0.6;
  pointer-events: none;
}

/* Highlight layers sit above the lit body and must never take the pointer,
   or the wedge beneath them stops receiving hover. */
.pie3d-sheen {
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Silhouette highlights. Catching light on the edges is most of what
   separates a glossy surface from a merely bright one. */
.pie3d-rim {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.1;
  pointer-events: none;
}

.pie3d-rim-base {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
  pointer-events: none;
}

/* Bar sheen layers, same rule: paint only, no pointer. */
.c3d-gloss,
.c3d-edge {
  pointer-events: none;
}

.c3d-edge {
  stroke: rgba(207, 250, 254, 0.75);
  stroke-width: 1;
}

/* Halo around the solids. Kept on the SVG rather than each path so the glow
   wraps the silhouette instead of every internal seam. */
.pie3d {
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.28));
}

.pie3d-rim {
  stroke: rgba(207, 250, 254, 0.8);
  stroke-width: 1.2;
}

.pie3d-rim-base {
  stroke: rgba(103, 232, 249, 0.4);
}

/* Wedge seams glow rather than being cut by white gaps, which on a dark
   ground would read as cracks in the solid. */
.pie3d-top {
  stroke: rgba(4, 7, 15, 0.55);
  stroke-width: 1;
}

.c3d-grid line {
  stroke: rgba(103, 183, 232, 0.16);
}

.c3d-grid text,
.c3d-month {
  fill: var(--muted);
}

.pie-stage,
.donut-stage {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pie-stage {
  width: 216px;
}

@media (prefers-reduced-motion: no-preference) {
  .pie3d {
    animation: solid-in 0.55s var(--ease-smooth) backwards;
  }
}

@keyframes solid-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------- Network panel -------------------------- */

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 220px;
}

.donut-stage {
  width: 250px;
  max-width: 58%;
}

.donut-empty {
  width: 146px;
  height: 146px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--muted);
  flex: none;
}

.legend-pct {
  margin-left: 6px;
  font: 700 10.5px 'DM Mono', monospace;
  color: var(--muted);
}

.legend-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.legend-empty {
  font-size: 12px;
  color: var(--muted);
}

/* Status pills. Replaces per-element inline colours that were written for the
   old light theme and rendered as dark text on dark once it was inverted. */
.pill-warn {
  background: rgba(251, 191, 36, 0.14);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.pill-super {
  background: rgba(167, 139, 250, 0.16);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.35);
}

.pill-danger {
  background: rgba(251, 113, 133, 0.14);
  color: #fda4af;
  border: 1px solid rgba(251, 113, 133, 0.3);
}

/* ------------------------------------------------------------------ */
/*  Catalog snapshot                                                  */
/*                                                                    */
/*  Fills the dead space beside the header pie. Describes the shape of */
/*  the filtered data — counts, coverage, density — rather than more   */
/*  currency, which the cards and the pie already carry.               */
/* ------------------------------------------------------------------ */
.topbar-lead {
  flex: 1 1 420px;
  min-width: 0;
}

.snapshot {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 90% at 4% -20%, rgba(103, 232, 249, 0.08) 0%, rgba(103, 232, 249, 0) 55%),
    linear-gradient(170deg, rgba(18, 32, 56, 0.72) 0%, rgba(8, 16, 31, 0.8) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(160, 230, 255, 0.12);
  max-width: 640px;
}

.snap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.snap-scope {
  font: 700 10.5px 'DM Mono', monospace;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* auto-fit so the row reflows to however many tiles the role gets — admins
   see one more than clients — without a hard-coded column count. */
.snap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.snap-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: rgba(103, 183, 232, 0.05);
  text-align: left;
  font: inherit;
  color: inherit;
}

.snap-tile.is-clickable {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.snap-tile.is-clickable:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.4);
  transform: translateY(-2px);
}

.snap-value {
  font: 800 19px 'Manrope', sans-serif;
  letter-spacing: -0.8px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.snap-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.snap-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.snap-nets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.snap-foot-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Doubles as the network filter — quicker than the dropdown, and the share
   makes the split readable without decoding the pie. */
.net-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(103, 183, 232, 0.06);
  color: var(--ink-muted);
  font: 700 11px 'Manrope', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.net-chip b {
  font: 700 10.5px 'DM Mono', monospace;
  color: var(--muted);
}

.net-chip:hover {
  border-color: rgba(34, 211, 238, 0.45);
  color: var(--ink);
}

.net-chip.is-active {
  border-color: rgba(34, 211, 238, 0.6);
  background: rgba(34, 211, 238, 0.12);
  color: var(--ink);
}

.net-chip.is-active b { color: var(--leaf); }

.net-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.snap-derived {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}

.snap-derived b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.snapshot-empty {
  max-width: 460px;
}

@media (max-width: 900px) {
  .snapshot { max-width: none; }
}

/* ------------------------------------------------------------------ */
/*  Song table: row numbers, totals, re-assign control                */
/* ------------------------------------------------------------------ */

/* Narrow and tabular so the numbers form a straight column rather than
   drifting as they gain digits. */
.col-num {
  width: 44px;
  text-align: right;
  padding-right: 14px !important;
  color: var(--muted);
  font: 600 11px 'DM Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* Deliberately not position:sticky. Pinning it to the viewport bottom keeps
   the total on screen for a long table, but it then floats over the last
   visible rows — hiding figures in a revenue report to save a scroll is the
   wrong trade. A lit top border separates it from the rows it sums. */
.totals-row td {
  background: rgba(34, 211, 238, 0.06);
  border-top: 1px solid rgba(34, 211, 238, 0.35);
  border-bottom: 0;
  padding-top: 14px;
  padding-bottom: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Column tally — reads as a quantity attached to the heading rather than part
   of the heading's name, so "Song 688" cannot be misread as a column titled
   "Song 688". */
.th-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: var(--leaf);
  font: 700 9.5px 'DM Mono', monospace;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* A quiet affordance next to the label — visible enough to find, muted
   enough not to compete with the label text it qualifies. */
.linkish {
  border: 0;
  background: none;
  padding: 0;
  margin-left: 8px;
  font: 700 10.5px 'Manrope', sans-serif;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.linkish:hover {
  color: var(--leaf);
}

/* ------------------------------------------------------------------ */
/*  Modal                                                             */
/* ------------------------------------------------------------------ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 5, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modal-in 0.18s var(--ease-smooth);
}

.modal-card {
  width: min(460px, 100%);
  max-height: 86vh;
  overflow-y: auto;
}

@keyframes modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/*  Duplicate-label review                                            */
/*                                                                    */
/*  Sits above the figures on the overview because a split supplier    */
/*  makes those figures wrong — the amber rim marks it as something    */
/*  awaiting a decision rather than an error.                          */
/* ------------------------------------------------------------------ */
.merge-review {
  border-color: rgba(251, 191, 36, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 170, 0.2),
    0 0 26px -8px rgba(251, 191, 36, 0.3),
    0 20px 44px -24px rgba(0, 0, 0, 0.95);
  margin-bottom: 22px;
}

.merge-review .pill {
  background: rgba(251, 191, 36, 0.14);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.legend {
  display: grid;
  gap: 12px;
  font-size: 11.5px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

/* ------------------------------------------------------------------ */
/*  Tables & Status Pills                                             */
/* ------------------------------------------------------------------ */
.table-panel {
  margin-top: 20px;
}

.table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}

th {
  text-align: left;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 14px 10px;
  border-bottom: 1px solid rgba(103, 183, 232, 0.09);
  transition: background 0.15s ease;
}

tr:hover td {
  background: #f8fafc;
}

td:last-child, th:last-child {
  text-align: right;
}

.pill {
  font: 700 10.5px 'DM Mono', monospace;
  background: var(--mint);
  color: var(--leaf);
  border-radius: 20px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(5, 150, 105, 0.15);
}

/* ------------------------------------------------------------------ */
/*  Upload Zone & Drop Area                                           */
/* ------------------------------------------------------------------ */
.upload-zone {
  border: 2px dashed #cbd5e1;
  border-radius: var(--radius-md);
  background: #f8fafc;
  padding: 44px 28px;
  text-align: center;
  transition: all 0.25s var(--ease-bounce);
  cursor: pointer;
}

.upload-zone:hover {
  border-color: var(--leaf);
  background: var(--mint);
  transform: scale(1.01);
}

.upload-zone input {
  display: none;
}

.upload-zone label {
  display: inline-block;
  color: white;
  background: var(--leaf);
  font-weight: 800;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-top: 12px;
  transition: transform 0.2s var(--ease-bounce), box-shadow 0.2s ease;
}

.upload-zone label:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--leaf-glow);
}

.upload-zone p {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 6px;
}

/* Upload Progress Rows */
.up-list {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.up-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  animation: scaleUp 0.25s var(--ease-smooth);
}

.up-name {
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}

.up-status {
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
}

.up-status.ok {
  color: var(--leaf);
}

.up-status.err {
  color: var(--coral);
}

/* Inline Pie Charts */
.pie-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pie-pct {
  font: 700 11px 'DM Mono', monospace;
  color: var(--ink);
}

.notice {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: #ecfdf5;
  border: 1px solid rgba(5, 150, 105, 0.2);
  color: #047857;
  font-size: 12.5px;
  display: none;
  animation: scaleUp 0.3s ease;
}

/* ------------------------------------------------------------------ */
/*  Account Rows & Lists                                              */
/* ------------------------------------------------------------------ */
.account-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.account-row {
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  align-items: center;
  transition: transform 0.2s var(--ease-smooth), border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-row:hover {
  transform: translateY(-2px);
  border-color: var(--leaf);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.account-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

.empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-weight: 500;
}

/* ------------------------------------------------------------------ */
/*  Responsive Breakpoints                                            */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-aside { min-height: 340px; }
  .shell { grid-template-columns: 1fr; }

  /* Was display:none, which left phone and tablet users with no navigation at
     all — every destination and the sign-out control were unreachable. It now
     becomes a horizontal bar pinned to the top of the viewport; the nav row
     scrolls sideways when the buttons outrun the screen width, so nothing is
     dropped, only deferred. */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    max-height: none;
    overflow-y: visible;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .sidebar .brand { margin: 0; font-size: 17px; flex: none; }

  /* Section captions ("Administration", "Management") organise a vertical
     list; laid out horizontally they read as dead buttons. The destinations
     they group are all still present. */
  .nav small { display: none; }

  .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav::-webkit-scrollbar { height: 6px; }
  .nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }

  .nav button {
    white-space: nowrap;
    padding: 9px 13px;
    flex: none;
  }

  /* Sideways nudge on hover belongs to the vertical list; horizontally it
     shifts buttons under the pointer. */
  .nav button:hover { transform: none; }

  .user {
    margin-top: 0;
    margin-left: auto;
    flex: none;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 11px;
  }

  .user strong { font-size: 12px; margin-bottom: 1px; }

  .cards { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .main { padding: 24px; }
  .topbar { display: block; }
  .profile { margin-top: 12px; }

  /* The header stacks here, so the aside becomes a full-width block rather
     than something floated to the right of a heading that no longer has a
     right edge to sit beside. */
  .topbar-aside { align-items: stretch; margin: 14px 0 0; }
  .pie-panel { justify-content: flex-start; }
  .wf-row { grid-template-columns: 1fr; gap: 4px; }
  .wf-amount { text-align: left; }
}

@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .main { padding: 20px; }
  .login-aside { padding: 36px; }
  .login-box { padding: 24px; }
  .chart { gap: 8px; }
}

/* ------------------------------------------------------------------ */
/*  Privilege tiers & approvals                                       */
/* ------------------------------------------------------------------ */
.pill-contrib {
  background: rgba(103, 183, 232, 0.12);
  color: #9dc4e8;
  border: 1px solid rgba(103, 183, 232, 0.3);
}

/* Count of changes waiting on the Super Admin. Amber rather than the accent
   cyan: it is a queue that needs clearing, not a feature to explore. */
.nav-badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fcd34d;
  font: 700 10px 'DM Mono', monospace;
  text-align: center;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/*  Password reveal                                                   */
/* ------------------------------------------------------------------ */
.pw-wrap {
  position: relative;
  display: block;
}

/* Right padding reserves room for the toggle so a long password never runs
   underneath it. */
.pw-wrap input {
  width: 100%;
  padding-right: 64px;
}

.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  background: rgba(103, 183, 232, 0.08);
  color: var(--ink-muted);
  border-radius: 7px;
  padding: 5px 10px;
  font: 700 10.5px 'Manrope', sans-serif;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.pw-toggle:hover {
  color: var(--leaf);
  border-color: rgba(34, 211, 238, 0.45);
  background: rgba(34, 211, 238, 0.1);
}

/* Generate sits beside the field, not inside it: the Show toggle already
   occupies the inner right edge, and two stacked controls there would leave
   no room for the password itself. */
.pw-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pw-row .pw-wrap {
  flex: 1;
  min-width: 0;
}

.pw-gen {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pw-toggle:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 1px;
}

/* Inside a .controls row the wrapper has to size itself rather than fill the
   row, or it pushes the neighbouring inputs out of line. */
.controls .pw-wrap {
  display: inline-block;
  flex: 0 1 auto;
}

/* ---- Data table (activity log) ------------------------------------ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.data-table th,
.data-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table th {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.02);
  position: sticky;
  top: 0;
}
.data-table tbody tr:hover { background: rgba(103, 183, 232, 0.05); }
.data-table .mono, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---- Ticket thread ------------------------------------------------- */
.ticket-msg {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
}
.ticket-msg.from-admin {
  background: rgba(34, 211, 238, 0.06);
  border-color: rgba(34, 211, 238, 0.28);
}
.ticket-msg.from-user {
  background: rgba(103, 183, 232, 0.04);
}
.ticket-msg.is-internal {
  background: rgba(245, 196, 81, 0.09);
  border-color: rgba(245, 196, 81, 0.35);
  border-left-width: 3px;
}
.ticket-msg-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.ticket-msg-head .sub { color: var(--ink-muted); font-size: 11.5px; }
.ticket-msg-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ticket-reply {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.ticket-reply textarea {
  width: 100%;
  min-height: 80px;
  font-family: inherit;
  resize: vertical;
}

/* ---- Team chat ---------------------------------------------------- */
.chat-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  height: 640px;
  min-height: 480px;
}
@media (max-width: 900px) { .chat-shell { grid-template-columns: 1fr; height: auto; } }

.chat-rail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-rail-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.chat-rail-item:hover { background: rgba(103, 183, 232, 0.05); }
.chat-rail-item.is-active {
  background: rgba(34, 211, 238, 0.10);
  border-color: rgba(34, 211, 238, 0.35);
}
.chat-rail-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
  font-size: 13.5px;
}
.chat-rail-kind { font-size: 15px; }
.chat-rail-preview {
  color: var(--ink-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 480px;
}
.chat-empty {
  display: flex; align-items: center; justify-content: center;
  flex: 1;
  color: var(--ink-muted);
}
.chat-thread-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.01);
}
.chat-msg {
  max-width: 72%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; }
.chat-msg-author {
  font-size: 11px;
  color: var(--ink-muted);
  padding: 0 8px;
}
.chat-msg-bubble {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;
  border: 1px solid var(--line);
  background: rgba(103, 183, 232, 0.05);
}
.chat-msg.mine .chat-msg-bubble {
  background: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.35);
}
.chat-msg-time {
  font-size: 10.5px;
  color: var(--ink-muted);
  padding: 0 8px;
}
.chat-compose {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.chat-compose textarea {
  flex: 1;
  resize: none;
  min-height: 44px;
  font-family: inherit;
}
.chat-compose button { flex: 0 0 auto; }

.chat-picker { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.chat-picker-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.chat-picker-row:hover { background: rgba(103, 183, 232, 0.05); }

/* ---- Textarea styling ------------------------------------------------
   .control was designed for single-line inputs and buttons — applying it to
   a <textarea> collapses its height in some browsers and hides the field.
   Textareas use this class instead. */
.ta {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 10px 12px;
  font: 500 13px 'Manrope', system-ui, sans-serif;
  color: var(--ink);
  background: var(--panel-bg, var(--panel, #0a1424));
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ta:focus {
  outline: none;
  border-color: var(--leaf, #22d3ee);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}
.ta::placeholder { color: var(--ink-muted, #7391b5); }

/* Chat compose stays flex-friendly. */
.chat-compose .ta {
  flex: 1 1 auto;
  min-height: 60px;
  resize: none;
}

/* ---- Chat compose bar (emoji + attach) --------------------------------- */
.chat-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.chat-compose-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chat-compose-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-icon-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-icon-btn:hover { border-color: var(--leaf); background: rgba(34,211,238,0.06); }
.chat-icon-btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }

.chat-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34,211,238,0.12);
  border: 1px solid rgba(34,211,238,0.35);
  color: var(--ink);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.chat-attach-chip:hover { background: rgba(246,131,124,0.15); border-color: rgba(246,131,124,0.4); }

.chat-emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
}
.chat-emoji {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.chat-emoji:hover { background: rgba(34,211,238,0.12); }

/* ---- Attachments inside a message ------------------------------------- */
.chat-attach-img {
  display: block;
  margin-top: 6px;
  max-width: 260px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
}
.chat-attach-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
}
.chat-attach-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(103,183,232,0.08);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12.5px;
  max-width: 100%;
}
.chat-attach-file:hover { border-color: var(--leaf); background: rgba(34,211,238,0.08); }
.chat-attach-icon { font-size: 16px; }
.chat-attach-name { font-weight: 600; word-break: break-all; }
.chat-attach-size { margin-left: auto; white-space: nowrap; }