/* ============================================================================
   7Media Panel — AURORA STUDIO THEME
   Dark, vibrant, alive. Loads AFTER app.css and overrides the look while
   keeping every existing class name. Pure CSS — no markup changes required.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS (dark)
   --------------------------------------------------------------------------- */
:root {
  /* Vibrant accents — the "life" */
  --c-cyan:    #22d3ee;   --c-cyan-d:   #06b6d4;
  --c-violet:  #a855f7;   --c-violet-d: #7c3aed;
  --c-pink:    #f472b6;   --c-pink-d:   #ec4899;
  --c-lime:    #a3e635;   --c-green:    #34d399;
  --c-amber:   #fbbf24;
  --c-rose:    #fb7185;   --c-red:      #ef4444;
  --c-blue:    #60a5fa;

  --color-primary:        #22d3ee;
  --color-primary-dark:   #06b6d4;
  --color-primary-light:  #67e8f9;
  --color-accent-purple:  #a855f7;
  --color-accent-purple-deep: #7c3aed;
  --color-accent-blue:    #60a5fa;
  --color-accent-pink:    #f472b6;

  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger:  #fb7185;
  --color-info:    #60a5fa;

  /* Surfaces — deep indigo-black */
  --color-bg-dark:    #0a0c18;
  --color-bg-darker:  #06070f;
  --color-bg-card:    rgba(20, 24, 42, 0.72);
  --color-bg-input:   rgba(12, 15, 28, 0.85);
  --color-bg-hover:   rgba(45, 52, 82, 0.55);

  --color-text-main:      #f3f5fb;
  --color-text-secondary: #c4ccde;
  --color-text-muted:     #8b95ad;
  --color-border:         rgba(160, 180, 255, 0.12);
  --color-border-light:   rgba(160, 180, 255, 0.22);

  /* Signature gradients */
  --grad-brand:  linear-gradient(135deg, #22d3ee 0%, #6366f1 45%, #d946ef 100%);
  --grad-cyan:   linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%);
  --grad-violet: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  --grad-pink:   linear-gradient(135deg, #f472b6 0%, #fb7185 100%);
  --grad-lime:   linear-gradient(135deg, #a3e635 0%, #22c55e 100%);
  --grad-aurora: linear-gradient(120deg,#22d3ee 0%,#818cf8 30%,#c084fc 55%,#f472b6 80%,#fbbf24 100%);
  --grad-line:   linear-gradient(90deg,#22d3ee 0%,#818cf8 50%,#c084fc 100%);

  /* Glows */
  --glow-cyan:   0 0 0 1px rgba(34,211,238,.45), 0 10px 38px rgba(34,211,238,.18);
  --glow-violet: 0 0 0 1px rgba(168,85,247,.45), 0 10px 38px rgba(168,85,247,.20);
  --glow-pink:   0 0 0 1px rgba(244,114,182,.45), 0 10px 38px rgba(244,114,182,.18);

  --shadow-sm: 0 2px 10px rgba(0,0,0,.40);
  --shadow-md: 0 10px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
  --shadow-xl: 0 28px 70px rgba(0,0,0,.65);

  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;  --radius-xl: 22px;
  --radius: 14px;

  --bg-main: var(--color-bg-dark);
  --bg-panel: var(--color-bg-card);
  --bg-glass: var(--color-bg-card);
  --border-soft: var(--color-border);
  --text-main: var(--color-text-main);
  --text-muted: var(--color-text-muted);

  --mp-bg-body:    var(--color-bg-dark);
  --mp-bg-card:    var(--color-bg-card);
  --mp-bg-sidebar: rgba(8, 10, 20, 0.78);
  --mp-border-subtle: var(--color-border);
  --mp-text-main:  var(--color-text-main);
  --mp-text-soft:  var(--color-text-muted);

  --font-display: 'Sora', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
}

/* ---------------------------------------------------------------------------
   2. CANVAS — living aurora background
   --------------------------------------------------------------------------- */
@keyframes mp-aurora-drift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1);   }
  50%  { transform: translate3d( 4%,  3%, 0) scale(1.15);}
  100% { transform: translate3d(-4%, -2%, 0) scale(1);   }
}
@keyframes mp-hue { 0%{filter:hue-rotate(0deg);} 100%{filter:hue-rotate(360deg);} }
@keyframes mp-pan { 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
@keyframes mp-pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%     { box-shadow: 0 0 0 6px transparent; opacity: .65; }
}
@keyframes mp-rise { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
@keyframes mp-shimmer { 0%{background-position:-700px 0;} 100%{background-position:700px 0;} }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body) !important;
  color: var(--color-text-main) !important;
  background-color: var(--color-bg-darker) !important;
  background-image: none !important;
  letter-spacing: .005em;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42vmax 42vmax at 6% -4%,  rgba(34,211,238,.15), transparent 60%),
    radial-gradient(46vmax 46vmax at 98% 6%,  rgba(168,85,247,.12), transparent 62%),
    radial-gradient(44vmax 44vmax at 96% 102%, rgba(244,114,182,.10), transparent 60%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,7,15,.62) 0%, rgba(6,7,15,.86) 100%);
}
/* keep login canvas equally alive */
body.is-login { background-color: var(--color-bg-darker) !important; }

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, .mp-topbar-page-title, .auth-title, .card-header > *:first-child {
  font-family: var(--font-display) !important;
  letter-spacing: -.01em !important;
}
h1, h2 { font-weight: 800 !important; }
h3, h4 { font-weight: 700 !important; color: var(--color-text-main) !important; }

/* gradient-text on the big headings only — readable, lively */
h1,
.auth-title,
.overview-hero-head h1,
.mp-topbar-page-title {
  background: var(--grad-aurora);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  animation: mp-pan 9s linear infinite;
}
.mp-topbar-page-title { animation-duration: 14s; }

a, a:visited { color: var(--c-cyan) !important; transition: color .15s ease, text-shadow .15s ease; }
a:hover { color: var(--color-primary-light) !important; text-shadow: 0 0 14px rgba(34,211,238,.45); }

code, kbd, pre { font-family: var(--font-mono) !important; }
.subtle, .text-muted, .muted { color: var(--color-text-muted) !important; }

::selection { background: rgba(34,211,238,.30); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(6,7,15,.6); }
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: linear-gradient(180deg, var(--c-cyan), var(--c-violet));
  border: 2px solid rgba(6,7,15,.6);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--c-violet), var(--c-pink)); }

/* ---------------------------------------------------------------------------
   4. APP SHELL — sidebar
   --------------------------------------------------------------------------- */
.sidebar, .mp-sidebar, aside.sidebar {
  background:
    linear-gradient(180deg, rgba(34,211,238,.07), transparent 22%),
    linear-gradient(180deg, rgba(168,85,247,.06), transparent 40%),
    var(--mp-bg-sidebar) !important;
  border-right: 1px solid var(--color-border) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 1px 0 0 rgba(255,255,255,.03), 18px 0 60px rgba(0,0,0,.35) !important;
}
.sidebar-logo-image, .auth-logo-image, .sidebar .logo img { filter: drop-shadow(0 4px 18px rgba(34,211,238,.35)); }

.nav-section-title, .sidebar .nav-section-title {
  color: var(--color-text-muted) !important;
  text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700;
  opacity: .8;
}
.nav-link, .sidebar a, .mp-sidebar a, .sidebar nav:not(.nav) a {
  color: var(--color-text-secondary) !important;
  border-radius: 11px !important;
  position: relative;
  transition: color .16s ease, background .16s ease, transform .12s ease, box-shadow .16s ease;
}
.nav-link .nav-ico, .nav-link .nav-label { position: relative; z-index: 1; }
.nav-link:hover, .sidebar a:hover, .mp-sidebar a:hover, .sidebar nav:not(.nav) a:hover {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(168,85,247,.12)) !important;
}
.nav-link:hover .nav-ico { color: var(--c-cyan) !important; }
.nav-link.is-active, .nav-link.active, .sidebar a.active, .mp-sidebar a.active, .sidebar nav:not(.nav) a.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(168,85,247,.20)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 22px rgba(34,211,238,.18) !important;
  font-weight: 700 !important;
}
.nav-link.is-active::before, .nav-link.active::before {
  content: ''; position: absolute; left: 0; top: 16%; bottom: 16%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--grad-line);
  box-shadow: 0 0 10px rgba(34,211,238,.45);
}
.nav-link.is-active .nav-ico, .nav-link.active .nav-ico { color: var(--c-cyan) !important; }

/* ---------------------------------------------------------------------------
   5. APP SHELL — topbar
   --------------------------------------------------------------------------- */
/* NOTE: do NOT touch `position` here — the panel's .mp-topbar is position:fixed
   and there is a `body:not(.is-login) .mp-topbar { left: var(--mp-sidebar-width) }`
   rule; switching it to position:relative makes that `left` shove the bar offscreen. */
.mp-topbar {
  background: linear-gradient(180deg, rgba(16,19,34,.86), rgba(10,12,22,.78)) !important;
  border-bottom: 1px solid var(--color-border) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 40px rgba(0,0,0,.30) !important;
}
.mp-topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad-line); opacity: .5; pointer-events: none;
}
.mp-topbar-menu, .mp-topbar-userchip {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--color-border-light) !important;
  color: var(--color-text-secondary) !important;
  border-radius: 11px !important;
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.mp-topbar-menu:hover, .mp-topbar-userchip:hover {
  background: rgba(34,211,238,.12) !important;
  box-shadow: 0 4px 18px rgba(34,211,238,.18) !important;
  transform: translateY(-1px);
}
.mp-topbar-avatar { background: var(--grad-brand) !important; color: #07121a !important; box-shadow: 0 4px 16px rgba(34,211,238,.35); }
.mp-topbar-dropdown {
  background: linear-gradient(160deg, rgba(18,21,38,.97), rgba(10,12,22,.97)) !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(99,102,241,.18) !important;
  border-radius: var(--radius-md) !important;
  backdrop-filter: blur(20px);
}
.mp-topbar-dd-item { color: var(--color-text-secondary) !important; border-radius: 9px !important; transition: background .14s ease, color .14s ease, transform .12s ease; }
.mp-topbar-dd-item:hover { background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(168,85,247,.18)) !important; color: #fff !important; transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   6. BADGES, PILLS, LIVE DOTS
   --------------------------------------------------------------------------- */
.badge, .pill, .status, .tag, .chip, [class*="badge"]:not([class*="badge-icon"]), [class*="status-"] {
  font-weight: 700 !important; letter-spacing: 0; text-transform: uppercase;
  font-size: 9px !important; padding: 2px 6px !important; border-radius: 999px !important;
  border: 1px solid var(--color-border-light);
  background: rgba(255,255,255,.05);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.badge.info, .badge-info, .status-info { background: rgba(96,165,250,.16) !important; color: #93c5fd !important; border-color: rgba(96,165,250,.4) !important; }
.badge.ok, .badge-success, .badge.success, .status-success, .status-active, .status-running, .status-ok {
  background: rgba(52,211,153,.16) !important; color: #6ee7b7 !important; border-color: rgba(52,211,153,.4) !important; }
.badge.warn, .badge.warning, .badge-warning, .status-warning, .status-pending {
  background: rgba(251,191,36,.16) !important; color: #fcd34d !important; border-color: rgba(251,191,36,.4) !important; }
.badge.err, .badge.error, .badge-danger, .badge-error, .status-error, .status-failed, .status-stopped, .status-down {
  background: rgba(251,113,133,.16) !important; color: #fda4af !important; border-color: rgba(251,113,133,.4) !important; }
.badge.accent, .badge-primary, .badge.primary {
  background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(168,85,247,.2)) !important; color: #a5f3fc !important; border-color: rgba(34,211,238,.45) !important; }

.mono, [class*="mono"] {
  background: rgba(255,255,255,.05) !important;
  color: var(--c-cyan) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
  font-size: 11px;
  font-family: ui-monospace, 'Consolas', 'SFMono-Regular', monospace !important;
  white-space: nowrap;
}

.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-text-muted);
}
.live-dot--up    { color: #34d399; background: #34d399 !important; box-shadow: 0 0 10px #34d399; animation: mp-pulse-dot 1.8s ease-in-out infinite; }
.live-dot--down  { color: #fb7185; background: #fb7185 !important; box-shadow: 0 0 10px #fb7185; animation: mp-pulse-dot 1.1s ease-in-out infinite; }
.live-dot--stopped { color: #64748b; background: #475569 !important; box-shadow: 0 0 6px rgba(100,116,139,.5); }

/* ---------------------------------------------------------------------------
   7. CARDS / PANELS / SURFACES
   --------------------------------------------------------------------------- */
.card, .mp-card, .panel, .dashboard-card, .mp-glass-card, .mp-glass-panel, .mp-server-card, .mp-page,
[class*="-card"]:not(.card-icon):not(.cards-grid):not(.card-header):not(.overview-kpi):not([class*="kpi"]):not([class*="encoding-poster"]) {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  position: relative;
  transition: border-color .2s ease, box-shadow .25s ease, transform .18s ease;
}
/* thin gradient hairline at the top of cards */
.card::before, .mp-card::before, .mp-glass-card::before, .panel::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.55), rgba(168,85,247,.45), transparent);
}
.card:hover, .mp-card:hover, .panel:hover, .dashboard-card:hover, .mp-glass-card:hover, .mp-server-card:hover {
  border-color: rgba(34,211,238,.34) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(34,211,238,.18), 0 18px 50px rgba(34,211,238,.12) !important;
  transform: translateY(-2px);
}
.card-header, .mp-card-header {
  border-bottom: 1px solid var(--color-border) !important;
  font-family: var(--font-display) !important; font-weight: 700 !important;
  color: var(--color-text-main) !important;
}
.mp-glass-card, .mp-glass-panel { background: linear-gradient(155deg, rgba(30,35,60,.6), rgba(14,17,30,.55)) !important; }

/* ---------------------------------------------------------------------------
   8. KPI / STAT / GAUGE / METER / PROGRESS
   --------------------------------------------------------------------------- */
/* KPI cards: dark glass + a bold colored accent bar + colored value — readable AND lively */
.overview-kpi, .kpi-teal, .kpi-lavender, .kpi-orange, .kpi-light, .kpi-green,
.stat-card-teal, .stat-card-purple, .stat-card-pink, .stat-card-blue, .stat-card-success, .stat-card-warning {
  background: linear-gradient(160deg, rgba(26,31,54,.82), rgba(13,16,28,.80)) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--color-text-main) !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.overview-kpi:hover, .kpi-teal:hover, .kpi-lavender:hover, .kpi-orange:hover, .kpi-green:hover,
.stat-card-teal:hover, .stat-card-purple:hover, .stat-card-pink:hover, .stat-card-blue:hover {
  transform: translateY(-3px); border-color: rgba(34,211,238,.30) !important;
}
/* default accent bar + corner glow (cyan) */
.overview-kpi::before, .kpi-teal::before, .kpi-lavender::before, .kpi-orange::before, .kpi-green::before, .kpi-light::before,
.stat-card-teal::before, .stat-card-purple::before, .stat-card-pink::before, .stat-card-blue::before {
  content:''; position:absolute; left:0; right:0; top:0; height:3px; background: linear-gradient(90deg,#22d3ee,#0ea5e9); box-shadow: 0 0 16px rgba(34,211,238,.55);
}
.overview-kpi::after, .kpi-teal::after, .kpi-lavender::after, .kpi-orange::after, .kpi-green::after,
.stat-card-teal::after, .stat-card-purple::after, .stat-card-pink::after, .stat-card-blue::after {
  content:''; position:absolute; right:-15%; top:-55%; width:55%; height:170%; pointer-events:none;
  background: radial-gradient(closest-side, rgba(34,211,238,.16), transparent);
}
.overview-kpi-title, .overview-mini-title { color: var(--color-text-muted) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
.overview-kpi-value, .overview-gauge-value, .overview-kpi-value-sm, .stat-card .value {
  font-family: var(--font-display) !important; font-weight: 800 !important; color: #fff !important;
}
/* per-variant: bar colour + corner-glow colour + value tint */
.overview-kpi--purple::before, .kpi-lavender::before, .stat-card-purple::before { background: linear-gradient(90deg,#a855f7,#6366f1) !important; box-shadow: 0 0 16px rgba(168,85,247,.55); }
.overview-kpi--purple::after,  .kpi-lavender::after,  .stat-card-purple::after  { background: radial-gradient(closest-side, rgba(168,85,247,.16), transparent) !important; }
.overview-kpi--purple .overview-kpi-value, .kpi-lavender .overview-kpi-value { color:#c4b5fd !important; }
.overview-kpi--pink::before, .stat-card-pink::before { background: linear-gradient(90deg,#f472b6,#fb7185) !important; box-shadow: 0 0 16px rgba(244,114,182,.55); }
.overview-kpi--pink::after,  .stat-card-pink::after  { background: radial-gradient(closest-side, rgba(244,114,182,.16), transparent) !important; }
.overview-kpi--pink .overview-kpi-value { color:#f9a8d4 !important; }
.overview-kpi--blue::before, .stat-card-blue::before { background: linear-gradient(90deg,#60a5fa,#6366f1) !important; box-shadow: 0 0 16px rgba(96,165,250,.55); }
.overview-kpi--blue::after,  .stat-card-blue::after  { background: radial-gradient(closest-side, rgba(96,165,250,.16), transparent) !important; }
.overview-kpi--blue .overview-kpi-value { color:#93c5fd !important; }
.overview-kpi--green::before, .kpi-green::before, .stat-card-success::before { background: linear-gradient(90deg,#34d399,#22c55e) !important; box-shadow: 0 0 16px rgba(52,211,153,.55); }
.overview-kpi--green .overview-kpi-value, .kpi-green .overview-kpi-value { color:#6ee7b7 !important; }
.kpi-orange::before, .stat-card-warning::before { background: linear-gradient(90deg,#fbbf24,#f97316) !important; box-shadow: 0 0 16px rgba(251,146,60,.55); }
.kpi-orange .overview-kpi-value { color:#fcd34d !important; }
.kpi-light::before { background: linear-gradient(90deg,#cbd5e1,#94a3b8) !important; box-shadow:none; }

.overview-gauge, .overview-hero, .overview-hero-block {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-border) !important;
  background: linear-gradient(150deg, rgba(30,35,60,.6), rgba(12,15,28,.55)) !important;
  box-shadow: var(--shadow-md);
}
.overview-hero { background:
  radial-gradient(60% 120% at 0% 0%, rgba(34,211,238,.14), transparent 60%),
  radial-gradient(60% 120% at 100% 100%, rgba(168,85,247,.14), transparent 60%),
  linear-gradient(150deg, rgba(26,30,52,.7), rgba(10,12,22,.7)) !important; }

/* meters & progress bars — gradient fill with glow */
.meter, .progress, .progress-bar, [role="progressbar"], .overview-encoding-bar-track, progress {
  background: rgba(255,255,255,.07) !important;
  border-radius: 999px !important; overflow: hidden;
  border: 1px solid var(--color-border);
}
.meter-fill, .progress-fill, .overview-encoding-bar-fill, .progress > div, .progress-bar > div,
progress::-webkit-progress-value {
  background: linear-gradient(90deg, #22d3ee, #818cf8 45%, #d946ef 80%, #fbbf24) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 16px rgba(129,140,248,.5);
  animation: mp-pan 6s linear infinite;
}
progress::-moz-progress-bar { background: linear-gradient(90deg,#22d3ee,#d946ef) !important; }
progress { -webkit-appearance: none; appearance: none; height: 10px; }
progress::-webkit-progress-bar { background: rgba(255,255,255,.07); border-radius: 999px; }

/* ---------------------------------------------------------------------------
   9. BUTTONS
   --------------------------------------------------------------------------- */
.btn, .mp-btn, button:not(.btn-link):not(.mp-topbar-menu):not(.mp-topbar-userchip):not(.mp-explainer-close):not(.mp-sidebar-toggle):not([class*="topbar"]),
input[type="submit"], input[type="button"], .auth-submit {
  font-family: var(--font-display) !important;
  font-weight: 700 !important; letter-spacing: .01em;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
/* default / primary => brand gradient */
.btn, .mp-btn, .btn-primary, .btn.primary, .mp-btn-primary, input[type="submit"], .auth-submit {
  background: var(--grad-brand) !important;
  background-size: 180% auto !important;
  color: #07121a !important;
  box-shadow: 0 8px 24px rgba(34,211,238,.28), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.btn:hover, .mp-btn:hover, .btn-primary:hover, .mp-btn-primary:hover, input[type="submit"]:hover, .auth-submit:hover {
  transform: translateY(-2px);
  background-position: right center !important;
  box-shadow: 0 14px 36px rgba(99,102,241,.40), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.btn:active, .mp-btn:active { transform: translateY(0); filter: brightness(.96); }

.btn-secondary, .btn.secondary, .mp-btn-secondary, .btn-ghost {
  background: rgba(255,255,255,.06) !important;
  color: var(--color-text-main) !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .btn.secondary:hover, .mp-btn-secondary:hover, .btn-ghost:hover {
  background: rgba(34,211,238,.12) !important;
  border-color: rgba(34,211,238,.45) !important;
  color: #fff !important;
}
.btn-success, .btn.success, .mp-btn-success { background: var(--grad-lime) !important; color: #06250f !important; box-shadow: 0 8px 24px rgba(52,211,153,.30) !important; }
.btn-danger, .btn.danger, .mp-btn-danger    { background: linear-gradient(135deg,#fb7185,#e11d48) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(244,63,94,.30) !important; }
.btn-warning, .btn.warning, .mp-btn-warning { background: linear-gradient(135deg,#fbbf24,#f97316) !important; color: #2a1500 !important; box-shadow: 0 8px 24px rgba(251,146,60,.30) !important; }
.btn-info, .btn.info, .mp-btn-info          { background: linear-gradient(135deg,#60a5fa,#6366f1) !important; color: #07121a !important; box-shadow: 0 8px 24px rgba(96,165,250,.30) !important; }
.btn-sm, .btn-xs, .mp-btn-xs, .mp-btn-icon  { border-radius: 9px !important; }
.btn[disabled], .mp-btn[disabled], button[disabled] { filter: grayscale(.5) opacity(.55); cursor: not-allowed; transform: none !important; }
.btn-link, a.btn-link { background: none !important; color: var(--c-cyan) !important; box-shadow: none !important; border: 0 !important; }

/* ---------------------------------------------------------------------------
   10. FORMS
   --------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], input[type="date"],
input[type="time"], input[type="datetime-local"], textarea, select, .input, .auth-input {
  background: var(--color-bg-input) !important;
  color: var(--color-text-main) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: 11px !important;
  font-family: var(--font-body) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.2) !important;
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted) !important; opacity: .8; }
input:focus, textarea:focus, select:focus, .input:focus {
  outline: none !important;
  border-color: var(--c-cyan) !important;
  background: rgba(12,15,28,.95) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.20), 0 0 22px rgba(34,211,238,.15) !important;
}
label, .auth-label, .form-label { color: var(--color-text-secondary) !important; font-weight: 600; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--c-cyan); }
input[type="range"] { accent-color: var(--c-violet); }

/* ---------------------------------------------------------------------------
   11. TABLES
   --------------------------------------------------------------------------- */
table { background: transparent !important; border-collapse: separate !important; border-spacing: 0; width: 100%; }
thead th, table thead th {
  background: rgba(255,255,255,.04) !important;
  color: var(--color-text-muted) !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px !important; font-weight: 700 !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}
tbody tr { border-bottom: 1px solid var(--color-border) !important; transition: background .14s ease, box-shadow .14s ease; }
tbody tr:hover { background: linear-gradient(90deg, rgba(34,211,238,.07), rgba(168,85,247,.05)) !important; box-shadow: inset 2px 0 0 var(--c-cyan); }
tbody td, tbody th { color: var(--color-text-secondary); }
table.striped tbody tr:nth-child(odd), .table-striped tbody tr:nth-child(odd) { background: rgba(255,255,255,.025); }

/* ---------------------------------------------------------------------------
   12. ALERTS / NOTICES / MODALS
   --------------------------------------------------------------------------- */
.alert, .notice, .flash {
  border-radius: 12px !important;
  border: 1px solid var(--color-border-light) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--color-text-secondary) !important;
  backdrop-filter: blur(8px);
}
.alert.info, .alert-info       { background: rgba(96,165,250,.10) !important; border-color: rgba(96,165,250,.4) !important; color:#bfdbfe !important; }
.alert.ok, .alert-success, .alert.success { background: rgba(52,211,153,.10) !important; border-color: rgba(52,211,153,.4) !important; color:#a7f3d0 !important; }
.alert.warn, .alert-warning, .alert.warning { background: rgba(251,191,36,.10) !important; border-color: rgba(251,191,36,.4) !important; color:#fde68a !important; }
.alert.err, .alert-error, .alert-danger, .alert.error { background: rgba(251,113,133,.10) !important; border-color: rgba(251,113,133,.4) !important; color:#fecaca !important; }

.mp-explainer-overlay, .mp-sidebar-overlay, .modal-overlay, [class*="overlay"] {
  background: rgba(5,6,14,.66) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.mp-explainer-modal, .modal, .modal-content {
  background: linear-gradient(160deg, rgba(20,24,42,.97), rgba(10,12,22,.97)) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(99,102,241,.18) !important;
}
.mp-explainer-header, .modal-header { border-bottom: 1px solid var(--color-border) !important; }
.mp-explainer-footer, .modal-footer { border-top: 1px solid var(--color-border) !important; }
.mp-explainer-title, .modal-title { font-family: var(--font-display) !important; }
.mp-explainer-icon-lg { color: var(--c-cyan) !important; }
.mp-explainer-close { color: var(--color-text-muted) !important; transition: color .15s, transform .15s; }
.mp-explainer-close:hover { color: var(--c-pink) !important; transform: rotate(90deg); }
kbd { background: rgba(255,255,255,.08) !important; border: 1px solid var(--color-border-light) !important; border-radius: 6px; padding: 1px 6px; font-family: var(--font-mono) !important; }

/* ---------------------------------------------------------------------------
   13. SIDEBAR FOOTER ACTIONS (keep layout from app-vibrant legacy)
   --------------------------------------------------------------------------- */
.mp-sidebar-footer { display:flex !important; flex-direction:row !important; gap:7px !important; padding:11px !important; border-top:1px solid var(--color-border) !important; }
.mp-sidebar-footer .mp-page-explainer-btn, .mp-sidebar-footer .mp-sidebar-action-btn {
  flex:1 1 0 !important; min-width:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important;
  height:36px !important; padding:8px 10px !important;
  font-family: var(--font-display) !important; font-size:12px !important; font-weight:700 !important;
  border-radius:10px !important; border:1px solid transparent !important;
  cursor:pointer !important; text-decoration:none !important; white-space:nowrap !important;
  overflow:hidden !important; text-overflow:ellipsis !important; line-height:1 !important;
  transition: filter .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.mp-sidebar-footer .mp-page-explainer-btn {
  background: rgba(255,255,255,.06) !important; color: var(--color-text-secondary) !important; border:1px solid var(--color-border-light) !important;
}
.mp-sidebar-footer .mp-page-explainer-btn:hover { background: rgba(34,211,238,.12) !important; color:#fff !important; border-color: rgba(34,211,238,.4) !important; }
.mp-sidebar-footer .mp-sidebar-action-btn, .mp-sidebar-footer .mp-action-upload {
  background: var(--grad-brand) !important; background-size:180% auto !important; color:#07121a !important;
  box-shadow: 0 6px 20px rgba(34,211,238,.28) !important;
}
.mp-sidebar-footer .mp-sidebar-action-btn:hover { transform: translateY(-1px); background-position: right center !important; box-shadow: 0 10px 26px rgba(99,102,241,.38) !important; }
.mp-action-icon, .mp-page-explainer-icon { flex:none !important; font-size:14px !important; line-height:1 !important; display:inline-flex !important; align-items:center !important; }
.mp-action-label, .mp-page-explainer-label { font-size:12px !important; font-weight:700 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }

/* ---------------------------------------------------------------------------
   14. LOGIN / AUTH
   --------------------------------------------------------------------------- */
.auth-card, .login-container, .auth-container, .login-box {
  background: linear-gradient(160deg, rgba(22,26,46,.85), rgba(10,12,22,.82)) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(99,102,241,.18), 0 0 60px rgba(34,211,238,.12) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  position: relative; overflow: hidden;
  animation: mp-rise .6s ease both;
}
.auth-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(80% 50% at 50% 0%, rgba(34,211,238,.16), transparent 60%);
}
.auth-video { border-radius: var(--radius-xl) !important; border:1px solid var(--color-border-light) !important; box-shadow: var(--shadow-lg), 0 0 60px rgba(168,85,247,.12); }
.auth-title { margin-bottom: 4px; }
.auth-hint, .auth-hint-small { color: var(--color-text-muted) !important; }
.auth-human-q { color: var(--color-text-secondary) !important; font-family: var(--font-mono) !important; }
.auth-submit { width: 100%; }

/* ---------------------------------------------------------------------------
   15. MISC POLISH
   --------------------------------------------------------------------------- */
hr, .divider, .overview-hero-divider { border: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent, var(--color-border-light), transparent) !important; }
.loading, .skeleton, [class*="skeleton"] {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%) !important;
  background-size: 700px 100% !important; animation: mp-shimmer 1.6s linear infinite;
}
::placeholder { letter-spacing: normal; }
.main, .mp-page, .overview-page { animation: mp-rise .4s ease both; }
.tabs .tab.is-active, .tab-link.active, [role="tab"][aria-selected="true"] {
  color: #fff !important;
  border-bottom: 2px solid transparent !important;
  background-image: linear-gradient(var(--color-bg-dark),var(--color-bg-dark)), var(--grad-aurora) !important;
  background-origin: border-box !important; background-clip: padding-box, border-box !important;
}
.overview-encoding-poster, .overview-encoding-poster-placeholder { border-radius: var(--radius-md) !important; border: 1px solid var(--color-border-light) !important; box-shadow: var(--shadow-md); }
.overview-net-row, .overview-kv, .overview-hero-kv-item { border-color: var(--color-border) !important; }

/* ===========================================================================
   16. LIGHT THEME — still colorful, on a soft light canvas
   =========================================================================== */
body.mp-theme-light {
  --color-bg-dark:   #eef1f8;
  --color-bg-darker: #e4e8f2;
  --color-bg-card:   rgba(255,255,255,.78);
  --color-bg-input:  rgba(255,255,255,.92);
  --color-bg-hover:  rgba(99,102,241,.08);
  --color-text-main: #161a2b;
  --color-text-secondary: #38415a;
  --color-text-muted: #6b7488;
  --color-border:       rgba(30,40,90,.12);
  --color-border-light: rgba(30,40,90,.20);
  --mp-bg-sidebar: rgba(255,255,255,.72);
  --shadow-sm: 0 2px 8px rgba(40,50,90,.10);
  --shadow-md: 0 10px 26px rgba(40,50,90,.12);
  --shadow-lg: 0 18px 44px rgba(40,50,90,.16);
  --shadow-xl: 0 26px 64px rgba(40,50,90,.20);
  background-color: var(--color-bg-darker) !important;
}
body.mp-theme-light::before {
  background:
    radial-gradient(38vmax 38vmax at 12% 6%,  rgba(34,211,238,.20), transparent 60%),
    radial-gradient(42vmax 42vmax at 88% 14%, rgba(168,85,247,.16), transparent 62%),
    radial-gradient(40vmax 40vmax at 78% 92%, rgba(244,114,182,.14), transparent 60%);
  opacity: .9;
}
body.mp-theme-light::after { background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(238,241,248,.7)); }
body.mp-theme-light h1, body.mp-theme-light .auth-title, body.mp-theme-light .mp-topbar-page-title { animation: mp-pan 9s linear infinite; }
body.mp-theme-light .mp-topbar { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(244,246,251,.78)) !important; }
body.mp-theme-light .sidebar { background: linear-gradient(180deg, rgba(34,211,238,.06), transparent 22%), var(--mp-bg-sidebar) !important; }
body.mp-theme-light .nav-link, body.mp-theme-light .sidebar a { color: #38415a !important; }
body.mp-theme-light .nav-link:hover { color:#0f172a !important; }
body.mp-theme-light .nav-link.is-active, body.mp-theme-light .nav-link.active { color:#0f172a !important; }
body.mp-theme-light thead th { background: rgba(99,102,241,.06) !important; color:#6b7488 !important; }
body.mp-theme-light tbody tr:hover { background: linear-gradient(90deg, rgba(34,211,238,.08), rgba(168,85,247,.06)) !important; }
body.mp-theme-light .mono { background: rgba(99,102,241,.08) !important; color:#0e7490 !important; }
body.mp-theme-light a, body.mp-theme-light a:visited { color:#0891b2 !important; }
body.mp-theme-light .btn-secondary, body.mp-theme-light .btn.secondary, body.mp-theme-light .mp-btn-secondary {
  background: rgba(99,102,241,.08) !important; color:#161a2b !important; border-color: rgba(30,40,90,.2) !important;
}
body.mp-theme-light input, body.mp-theme-light textarea, body.mp-theme-light select {
  background:#ffffff !important; color:#161a2b !important; border-color: rgba(30,40,90,.2) !important; box-shadow:none !important;
}
body.mp-theme-light .card-header { color:#161a2b !important; }
body.mp-theme-light .badge, body.mp-theme-light .pill { color:#38415a; background: rgba(99,102,241,.08); }

/* customer build: hide developer hint blocks (kept from base) */
.mp-help, .mp-dev-note, .mp-debug { display: none !important; }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body::before, .mp-topbar::after, .nav-link.is-active::before, h1, .auth-title, .mp-topbar-page-title,
  .meter-fill, .progress-fill, .overview-encoding-bar-fill, .btn, .live-dot--up, .live-dot--down,
  .loading, .skeleton, .main, .mp-page { animation: none !important; }
}