/* Fokisen Streaming Panel Redesign v3 — 2026-09-14
   Frontend-only visual system. No media/streaming behavior is changed. */

:root{
  --fok-bg:#0B0F17;
  --fok-bg-2:#080C13;
  --fok-panel:#101722;
  --fok-panel-2:#0D141E;
  --fok-panel-3:#141D2A;
  --fok-line:#223044;
  --fok-line-soft:#1A2636;
  --fok-text:#F5F8FC;
  --fok-muted:#8C9CB2;
  --fok-blue:#2D8CFF;
  --fok-blue-2:#176BDA;
  --fok-green:#22C55E;
  --fok-pink:#FF2D72;
  --fok-amber:#FFC107;
  --fok-red:#F04444;
  --fok-purple:#8B5CF6;
  --fok-radius:16px;
  --fok-radius-sm:11px;
  --fok-shadow:0 18px 48px rgba(0,0,0,.28);
}

html{background:var(--fok-bg)!important;color-scheme:dark}
body.fokisen-redesign-v3,
body:has(> .topbar + .tabs){
  background:
    radial-gradient(1100px 620px at 88% -10%,rgba(45,140,255,.12),transparent 62%),
    radial-gradient(800px 500px at -8% 0,rgba(139,92,246,.07),transparent 58%),
    var(--fok-bg)!important;
  color:var(--fok-text)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

/* ---------- Shared shell ---------- */
.fokisen-redesign-v3 .app-shell{background:transparent!important}
.fokisen-redesign-v3 .sidebar{
  background:linear-gradient(180deg,#0A1019 0%,#080D14 100%)!important;
  border-right:1px solid var(--fok-line-soft)!important;
  box-shadow:10px 0 40px rgba(0,0,0,.18);
}
.fokisen-redesign-v3 .sidebar-head{
  min-height:82px;
  border-bottom:1px solid var(--fok-line-soft)!important;
  padding:18px 16px!important;
}
.fokisen-redesign-v3 .sidebar-brand-logo{max-height:30px!important;object-fit:contain}
.fokisen-redesign-v3 #workspaceBrandLabel{
  color:#6F8299!important;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10px!important;
  font-weight:800;
}
.fokisen-redesign-v3 .nav-group-label{
  color:#53667D!important;
  font-size:10px!important;
  letter-spacing:.14em!important;
  font-weight:900!important;
  text-transform:uppercase;
  margin:16px 12px 7px!important;
}
.fokisen-redesign-v3 .nav-item{
  min-height:42px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  color:#A8B6C7!important;
  margin:2px 8px!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
}
.fokisen-redesign-v3 .nav-item:hover{
  color:#fff!important;
  background:#101B29!important;
  border-color:#1A314C!important;
  transform:translateX(1px);
}
.fokisen-redesign-v3 .nav-item.active,
.fokisen-redesign-v3 .nav-item[aria-current="page"]{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(45,140,255,.26),rgba(45,140,255,.08))!important;
  border-color:rgba(45,140,255,.45)!important;
  box-shadow:inset 3px 0 0 var(--fok-blue),0 6px 20px rgba(45,140,255,.08)!important;
}
.fokisen-redesign-v3 .nav-glyph{
  color:#7AAFFC!important;
  width:25px!important;
  font-weight:900!important;
}
.fokisen-redesign-v3 .sidebar-footer{
  border-top:1px solid var(--fok-line-soft)!important;
  background:#080D14!important;
  padding:14px!important;
}
.fokisen-redesign-v3 .sidebar-footer strong{color:#F6FAFF!important}
.fokisen-redesign-v3 .sidebar-footer span{color:#71839A!important}

.fokisen-redesign-v3 .workspace-main{background:transparent!important}
.fokisen-redesign-v3 .topbar{
  min-height:78px!important;
  background:rgba(9,14,22,.88)!important;
  border-bottom:1px solid var(--fok-line-soft)!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 35px rgba(0,0,0,.14)!important;
}
.fokisen-redesign-v3 .topbar-current-page h1{
  color:var(--fok-text)!important;
  font-size:20px!important;
  letter-spacing:-.02em;
}
.fokisen-redesign-v3 .topbar-current-page p{color:#71839A!important;font-size:11px!important}
.fokisen-redesign-v3 .global-search{
  background:#0C1420!important;
  border:1px solid #203149!important;
  border-radius:11px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.fokisen-redesign-v3 .global-search:focus-within{border-color:rgba(45,140,255,.65)!important;box-shadow:0 0 0 3px rgba(45,140,255,.09)!important}
.fokisen-redesign-v3 .global-search input{background:transparent!important;border:0!important;color:#EAF2FC!important}
.fokisen-redesign-v3 .global-search input::placeholder{color:#667A92!important}
.fokisen-redesign-v3 .system-health{
  background:#0D1D17!important;
  border:1px solid #1E4A35!important;
  color:#A8EBC2!important;
  border-radius:999px!important;
  padding:7px 10px!important;
  font-size:11px!important;
  font-weight:800!important;
}
.fokisen-redesign-v3 .system-health i{background:var(--fok-green)!important;box-shadow:0 0 0 4px rgba(34,197,94,.12),0 0 14px rgba(34,197,94,.35)!important}
.fokisen-redesign-v3 #devUser,
.fokisen-redesign-v3 .profile-chip{
  background:#0C1420!important;
  border:1px solid #203149!important;
  color:#E7EEF8!important;
  border-radius:11px!important;
}
.fokisen-redesign-v3 .profile-avatar{background:linear-gradient(135deg,var(--fok-blue),var(--fok-purple))!important;color:#fff!important}

/* ---------- Controls ---------- */
.fokisen-redesign-v3 button,
body:has(> .topbar + .tabs) button{
  border-radius:10px!important;
  font-weight:800!important;
  letter-spacing:.005em;
  transition:transform .16s ease,filter .16s ease,border-color .16s ease,background .16s ease!important;
}
.fokisen-redesign-v3 button:hover,
body:has(> .topbar + .tabs) button:hover{transform:translateY(-1px);filter:brightness(1.06)}
.fokisen-redesign-v3 button.primary,
body:has(> .topbar + .tabs) button.primary{
  background:linear-gradient(135deg,var(--fok-blue),var(--fok-blue-2))!important;
  border-color:#3B92FF!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(45,140,255,.20)!important;
}
.fokisen-redesign-v3 button.secondary,
body:has(> .topbar + .tabs) button.secondary{
  background:#111A27!important;
  border-color:#27374B!important;
  color:#D8E2EF!important;
}
.fokisen-redesign-v3 button.danger,
.fokisen-redesign-v3 .danger{
  background:rgba(240,68,68,.14)!important;
  border-color:rgba(240,68,68,.42)!important;
  color:#FF8E8E!important;
}
.fokisen-redesign-v3 .go-live{
  background:linear-gradient(135deg,#F04444,#D92F4F)!important;
  border-color:#FF5966!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(240,68,68,.22)!important;
}
.fokisen-redesign-v3 input,
.fokisen-redesign-v3 select,
.fokisen-redesign-v3 textarea,
body:has(> .topbar + .tabs) input,
body:has(> .topbar + .tabs) select,
body:has(> .topbar + .tabs) textarea{
  background:#0A111B!important;
  border:1px solid #26374D!important;
  color:#EDF3FA!important;
  border-radius:9px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}
.fokisen-redesign-v3 input:focus,
.fokisen-redesign-v3 select:focus,
.fokisen-redesign-v3 textarea:focus,
body:has(> .topbar + .tabs) input:focus,
body:has(> .topbar + .tabs) select:focus,
body:has(> .topbar + .tabs) textarea:focus{
  outline:none!important;
  border-color:rgba(45,140,255,.7)!important;
  box-shadow:0 0 0 3px rgba(45,140,255,.10)!important;
}

/* ---------- Global page surfaces ---------- */
.fokisen-redesign-v3 .section{padding-bottom:34px}
.fokisen-redesign-v3 .panel,
.fokisen-redesign-v3 .card,
.fokisen-redesign-v3 [class*="-card"]{
  border-color:var(--fok-line)!important;
}
.fokisen-redesign-v3 .panel,
.fokisen-redesign-v3 .card{
  background:linear-gradient(180deg,rgba(16,23,34,.98),rgba(12,18,28,.98))!important;
  border:1px solid var(--fok-line)!important;
  border-radius:var(--fok-radius)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.13)!important;
}
.fokisen-redesign-v3 .panel-head{border-color:var(--fok-line-soft)!important}
.fokisen-redesign-v3 h1,
.fokisen-redesign-v3 h2,
.fokisen-redesign-v3 h3{color:var(--fok-text)!important;letter-spacing:-.02em}
.fokisen-redesign-v3 p,
.fokisen-redesign-v3 .muted,
.fokisen-redesign-v3 small{color:var(--fok-muted)}
.fokisen-redesign-v3 .eyebrow{color:#6CAEFF!important;letter-spacing:.15em!important;font-weight:900!important;text-transform:uppercase}
.fokisen-redesign-v3 .badge{
  border:1px solid #2B3E56!important;
  background:#111C2A!important;
  color:#C9D8EA!important;
  border-radius:999px!important;
}
.fokisen-redesign-v3 .empty{
  background:#0B121C!important;
  border:1px dashed #2B3A4F!important;
  color:#72859D!important;
  border-radius:12px!important;
}
.fokisen-redesign-v3 .credentials,
.fokisen-redesign-v3 code{
  background:#08101A!important;
  border-color:#20334B!important;
  color:#BFD8F8!important;
}

/* Inserted headers for legacy/utility pages */
.fok-v3-pagehead{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  margin:2px 0 22px;
}
.fok-v3-pagehead-main{display:flex;align-items:flex-start;gap:14px;min-width:0}
.fok-v3-page-number{
  width:42px;height:42px;min-width:42px;
  display:grid;place-items:center;
  border:1px solid rgba(45,140,255,.42);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(45,140,255,.20),rgba(45,140,255,.06));
  color:#9FCBFF;
  font-size:12px;
  font-weight:950;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.fok-v3-pagehead h2{font-size:clamp(26px,3vw,38px)!important;margin:2px 0 4px!important}
.fok-v3-pagehead p{margin:0!important;max-width:820px;line-height:1.55}
.fok-v3-pagehead .eyebrow{display:block;font-size:10px!important}
.fok-v3-pagehead-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid #26384F;
  background:#0E1723;
  color:#9BB0C7;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}
.fok-v3-pagehead-chip i{width:7px;height:7px;border-radius:999px;background:var(--fok-green);box-shadow:0 0 12px rgba(34,197,94,.45)}

/* ---------- Dashboard ---------- */
.fokisen-redesign-v3 .dashboard-v2-card{
  background:linear-gradient(180deg,#111A27,#0C131D)!important;
  border:1px solid #223249!important;
  box-shadow:var(--fok-shadow)!important;
}
.fokisen-redesign-v3 .dashboard-page-number,
.fokisen-redesign-v3 .radio-ui06-page-number,
.fokisen-redesign-v3 .apps-ui14-number{
  color:#A8D1FF!important;
  border-color:rgba(45,140,255,.46)!important;
  background:rgba(45,140,255,.12)!important;
}
.fokisen-redesign-v3 .dashboard-live-pill{background:rgba(255,45,114,.13)!important;border-color:rgba(255,45,114,.35)!important;color:#FF7DA6!important}
.fokisen-redesign-v3 .dashboard-health-pill{background:rgba(34,197,94,.11)!important;border-color:rgba(34,197,94,.30)!important;color:#7FE3A4!important}
.fokisen-redesign-v3 .dashboard-feature-art,
.fokisen-redesign-v3 .dashboard-program-stage{
  background:linear-gradient(145deg,#0A1625,#08101A)!important;
  border:1px solid #1D3048!important;
}
.fokisen-redesign-v3 .dashboard-watch-button{background:linear-gradient(135deg,var(--fok-blue),#176BD9)!important;color:#fff!important}

/* ---------- Live Studio: approved control-room look ---------- */
.fokisen-redesign-v3 #livestudio{--studio-line:#253750;--studio-card:#0E1622}
.fokisen-redesign-v3 #livestudio .studio-v2-header{
  background:linear-gradient(180deg,#101926,#0C131D)!important;
  border:1px solid var(--studio-line)!important;
  border-radius:16px!important;
  box-shadow:var(--fok-shadow)!important;
}
.fokisen-redesign-v3 #livestudio .studio-v2-head-stat{
  background:#0B131E!important;
  border:1px solid #1E3148!important;
  border-radius:11px!important;
}
.fokisen-redesign-v3 #livestudio .studio-v2-head-stat span{color:#6F829A!important;letter-spacing:.11em!important}
.fokisen-redesign-v3 #livestudio .studio-v2-head-stat strong{color:#F5F9FE!important}
.fokisen-redesign-v3 #livestudio .studio-status-live,
.fokisen-redesign-v3 #livestudio .studio-v2-monitor-head i:not(#studioProgramLiveBadge){color:#7DE1A1!important}
.fokisen-redesign-v3 #livestudio .studio-v2-channel-selector{background:#0B121C!important}
.fokisen-redesign-v3 #livestudio .studio-v2-production-grid{gap:14px!important}
.fokisen-redesign-v3 #livestudio .studio-v2-sources-panel,
.fokisen-redesign-v3 #livestudio .studio-v2-right-rail > .panel,
.fokisen-redesign-v3 #livestudio .studio-v2-tools-row > .panel{
  background:linear-gradient(180deg,#0F1824,#0B121C)!important;
  border-color:#22344B!important;
}
.fokisen-redesign-v3 #livestudio .studio-v2-source-card{
  background:#0A121D!important;
  border:1px solid #22354E!important;
  border-radius:12px!important;
  overflow:hidden;
}
.fokisen-redesign-v3 #livestudio .studio-source-tile{background:#09111B!important;border:0!important;border-radius:0!important}
.fokisen-redesign-v3 #livestudio .studio-source-tile.active{
  box-shadow:inset 0 0 0 2px var(--fok-blue),0 0 22px rgba(45,140,255,.12)!important;
  background:rgba(45,140,255,.07)!important;
}
.fokisen-redesign-v3 #livestudio .studio-v2-source-top b{background:var(--fok-blue)!important;color:#fff!important}
.fokisen-redesign-v3 #livestudio .studio-v2-source-top i{color:#7DE1A1!important}
.fokisen-redesign-v3 #livestudio .studio-v2-source-thumb{background:#060A10!important;border-top:1px solid #1D2C40!important;border-bottom:1px solid #1D2C40!important}
.fokisen-redesign-v3 #livestudio .studio-v2-monitor{
  background:#0A111A!important;
  border:1px solid #2A3A4E!important;
  box-shadow:0 16px 40px rgba(0,0,0,.25)!important;
}
.fokisen-redesign-v3 #livestudio .preview-monitor{border-top:3px solid var(--fok-blue)!important}
.fokisen-redesign-v3 #livestudio .program-v2-monitor{border-top:3px solid var(--fok-red)!important}
.fokisen-redesign-v3 #livestudio .studio-v2-monitor-head{background:#0B121C!important;border-bottom:1px solid #223147!important}
.fokisen-redesign-v3 #livestudio .studio-v2-monitor-head > div > span{letter-spacing:.14em!important;font-size:10px!important}
.fokisen-redesign-v3 #livestudio .program-v2-monitor .studio-v2-monitor-head > div > span{color:#FF7979!important}
.fokisen-redesign-v3 #livestudio .studio-v2-video-stage{background:#020407!important}
.fokisen-redesign-v3 #livestudio .studio-v2-transition-rail{
  background:#0B131D!important;
  border:1px solid #22344A!important;
  border-radius:12px!important;
  padding:9px!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.fokisen-redesign-v3 #livestudio .studio-v2-take-main,
.fokisen-redesign-v3 #livestudio .studio-v2-take-mini{background:linear-gradient(135deg,var(--fok-blue),#176DDE)!important;color:#fff!important;border-color:#3A94FF!important}
.fokisen-redesign-v3 #livestudio #studioEndLive{background:linear-gradient(135deg,#B92F3D,#8E2330)!important;color:#fff!important}
.fokisen-redesign-v3 #livestudio .studio-v2-audio-panel{border-top:2px solid rgba(139,92,246,.55)!important}
.fokisen-redesign-v3 #livestudio .meter span{background:linear-gradient(90deg,var(--fok-green),var(--fok-amber),var(--fok-red))!important}
.fokisen-redesign-v3 #livestudio .studio-pro16{border-color:#26384E!important;background:#0A111A!important;border-radius:16px!important}
.fokisen-redesign-v3 #livestudio .studio-pro-card{background:#0E1722!important;border-color:#23364E!important}

/* ---------- Live TV ---------- */
.fokisen-redesign-v3 #video .tv-ui03-card{
  background:linear-gradient(180deg,#101925,#0C131D)!important;
  border:1px solid #22344B!important;
  box-shadow:0 15px 38px rgba(0,0,0,.18)!important;
}
.fokisen-redesign-v3 #video .tv-ui03-player-shell{background:#020407!important;border-color:#253A54!important}
.fokisen-redesign-v3 #video .tv-ui03-live-badge{background:rgba(240,68,68,.13)!important;border-color:rgba(240,68,68,.34)!important;color:#FF8D8D!important}
.fokisen-redesign-v3 #video .tv-ui03-health{background:rgba(34,197,94,.10)!important;color:#7EE2A4!important;border-color:rgba(34,197,94,.28)!important}
.fokisen-redesign-v3 #video .tv-ui03-quick-actions button{background:#0C1520!important;border-color:#23364D!important;color:#DDE7F2!important}
.fokisen-redesign-v3 #video .tv-ui03-quick-actions button:hover{border-color:#356AA7!important;background:#101E2D!important}
.fokisen-redesign-v3 #video .tv-ui03-operations{background:#0B121B!important;border:1px solid #223249!important;border-radius:14px!important}
.fokisen-redesign-v3 #video .tv-ui03-operations > summary{background:#0E1722!important;border-radius:14px!important}

/* ---------- TV Guide / Programming ---------- */
.fokisen-redesign-v3 #tvguide .tv-guide-v4-card,
.fokisen-redesign-v3 #playlists [class*="card"],
.fokisen-redesign-v3 #schedules [class*="card"]{
  background:linear-gradient(180deg,#0F1824,#0B121C)!important;
  border-color:#22344B!important;
}
.fokisen-redesign-v3 #tvguide .tv-guide-v4-toolbar,
.fokisen-redesign-v3 #playlists .playlist-ui08-toolbar,
.fokisen-redesign-v3 #schedules .schedule-ui09-toolbar{
  background:#0C141F!important;
  border:1px solid #22344B!important;
  border-radius:13px!important;
}

/* ---------- Content / Radio / Analytics ---------- */
.fokisen-redesign-v3 #radio .radio-ui06-card,
.fokisen-redesign-v3 #mediacloud .media-ui07-catalog,
.fokisen-redesign-v3 #mediacloud .media-ui07-inspector,
.fokisen-redesign-v3 #analytics .analytics-ui10-card{
  background:linear-gradient(180deg,#101925,#0C131D)!important;
  border:1px solid #22344B!important;
  box-shadow:0 14px 34px rgba(0,0,0,.15)!important;
}
.fokisen-redesign-v3 #radio .radio-ui06-live-pill{background:rgba(255,45,114,.12)!important;color:#FF7EA7!important;border-color:rgba(255,45,114,.34)!important}
.fokisen-redesign-v3 #radio .radio-ui06-health{background:rgba(34,197,94,.10)!important;color:#7FE1A3!important;border-color:rgba(34,197,94,.28)!important}
.fokisen-redesign-v3 #analytics .analytics-ui10-kpis article,
.fokisen-redesign-v3 #mediacloud .media-ui07-summary article,
.fokisen-redesign-v3 #radio .radio-ui06-summary article,
.fokisen-redesign-v3 #team .users-ui12-summary article,
.fokisen-redesign-v3 #states-ui17 .states-ui17-summary article,
.fokisen-redesign-v3 .states-ui17-summary article{
  background:linear-gradient(180deg,#101925,#0C131D)!important;
  border-color:#22344B!important;
}

/* ---------- Legacy sections brought into the approved design system ---------- */
.fokisen-redesign-v3 #services > .panel,
.fokisen-redesign-v3 #stationmgr > .panel,
.fokisen-redesign-v3 #vod > .panel,
.fokisen-redesign-v3 #interactive > .panel,
.fokisen-redesign-v3 #monetization > .panel,
.fokisen-redesign-v3 #ailocaldesk > .panel,
.fokisen-redesign-v3 #nodes > .panel,
.fokisen-redesign-v3 #commercial > .panel,
.fokisen-redesign-v3 #resellers > .panel,
.fokisen-redesign-v3 #customers > .panel,
.fokisen-redesign-v3 #account > .panel{
  background:linear-gradient(180deg,#101925,#0C131D)!important;
  border:1px solid #22344B!important;
  box-shadow:0 14px 36px rgba(0,0,0,.15)!important;
}
.fokisen-redesign-v3 #services .service-list,
.fokisen-redesign-v3 #resellers .mini-list,
.fokisen-redesign-v3 #customers .mini-list,
.fokisen-redesign-v3 #nodes .mini-list{
  display:grid;
  gap:10px;
}
.fokisen-redesign-v3 #services .service-list > *,
.fokisen-redesign-v3 #resellers .mini-list > *,
.fokisen-redesign-v3 #customers .mini-list > *,
.fokisen-redesign-v3 #nodes .mini-list > *{
  background:#0A121C!important;
  border:1px solid #203249!important;
  border-radius:12px!important;
}
.fokisen-redesign-v3 #ailocaldesk .ai-desk-shell{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.fokisen-redesign-v3 #ailocaldesk .ai-desk-grid > .card,
.fokisen-redesign-v3 #ailocaldesk .ai-desk-generate,
.fokisen-redesign-v3 #ailocaldesk .ai-desk-results > .card{
  background:linear-gradient(180deg,#101925,#0C131D)!important;
  border:1px solid #22344B!important;
}

/* ---------- Settings / admin sections ---------- */
.fokisen-redesign-v3 #team .users-ui12-members-panel,
.fokisen-redesign-v3 #team .users-ui12-role-card,
.fokisen-redesign-v3 #team .users-ui12-invites-card,
.fokisen-redesign-v3 #account [class*="card"],
.fokisen-redesign-v3 #nodes [class*="card"],
.fokisen-redesign-v3 #commercial [class*="card"],
.fokisen-redesign-v3 #resellers [class*="card"],
.fokisen-redesign-v3 #customers [class*="card"]{
  background:linear-gradient(180deg,#101925,#0C131D)!important;
  border:1px solid #22344B!important;
  border-radius:15px!important;
}
.fokisen-redesign-v3 table{border-collapse:separate!important;border-spacing:0!important}
.fokisen-redesign-v3 th{color:#71839A!important;background:#0B131E!important;border-color:#1F3044!important;font-size:10px!important;letter-spacing:.09em!important;text-transform:uppercase}
.fokisen-redesign-v3 td{border-color:#1E2D40!important;color:#D8E4F1!important;background:#0D151F!important}
.fokisen-redesign-v3 tbody tr:hover td{background:#111C29!important}

/* ---------- Separate Platform Admin ---------- */
body:has(> .topbar + .tabs) .topbar{
  background:rgba(8,13,21,.92)!important;
  border-bottom:1px solid var(--fok-line-soft)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.16)!important;
}
body:has(> .topbar + .tabs) .topbar h1{font-size:clamp(28px,3vw,40px)!important;letter-spacing:-.035em!important}
body:has(> .topbar + .tabs) .eyebrow{color:#67AAFF!important}
body:has(> .topbar + .tabs) .who{background:#0C1420!important;border-color:#21344C!important;border-radius:11px!important}
body:has(> .topbar + .tabs) .tabs{
  gap:6px!important;
  background:linear-gradient(180deg,#090E16 78%,rgba(9,14,22,.72))!important;
  border-bottom:1px solid #151F2D;
  padding-bottom:12px!important;
}
body:has(> .topbar + .tabs) .tabs button{border-color:#223249!important;background:#0E1722!important;color:#98A9BD!important}
body:has(> .topbar + .tabs) .tabs button.active{background:linear-gradient(135deg,rgba(45,140,255,.28),rgba(45,140,255,.12))!important;border-color:rgba(45,140,255,.55)!important;color:#fff!important}
body:has(> .topbar + .tabs) main{max-width:1680px;margin:0 auto!important}
body:has(> .topbar + .tabs) .metric-grid article,
body:has(> .topbar + .tabs) .card{
  background:linear-gradient(180deg,#101925,#0C131D)!important;
  border:1px solid #22344B!important;
  border-radius:16px!important;
  box-shadow:0 14px 36px rgba(0,0,0,.16)!important;
}
body:has(> .topbar + .tabs) .metric-grid article{position:relative;overflow:hidden}
body:has(> .topbar + .tabs) .metric-grid article::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--fok-blue),var(--fok-purple));opacity:.75}
body:has(> .topbar + .tabs) .metric-grid span{color:#75879E!important;letter-spacing:.06em;text-transform:uppercase;font-size:10px!important;font-weight:850}
body:has(> .topbar + .tabs) .metric-grid strong{color:#F4F8FD!important;font-size:26px!important}
body:has(> .topbar + .tabs) .profile,
body:has(> .topbar + .tabs) .service,
body:has(> .topbar + .tabs) .server-card,
body:has(> .topbar + .tabs) .inner-panel{
  background:#0A121D!important;
  border-color:#20334B!important;
  border-radius:12px!important;
}
body:has(> .topbar + .tabs) .progress{background:#172335!important}
body:has(> .topbar + .tabs) .progress i{background:linear-gradient(90deg,var(--fok-blue),#6AB5FF)!important}
body:has(> .topbar + .tabs) th{background:#0A121C!important;color:#6F8299!important;border-color:#1E2E42!important}
body:has(> .topbar + .tabs) td{background:#0D151F!important;color:#DCE6F1!important;border-color:#1E2E42!important}
body:has(> .topbar + .tabs) dialog{background:#0C141E!important;border-color:#2A3D56!important;border-radius:17px!important;box-shadow:0 28px 100px rgba(0,0,0,.65)!important}

/* ---------- Standalone admin/operations pages ---------- */
body:not(.fokisen-redesign-v3) .card,
body:not(.fokisen-redesign-v3) .panel{
  border-radius:15px;
}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .fokisen-redesign-v3 #livestudio .studio-v2-production-grid{grid-template-columns:1fr!important}
  .fokisen-redesign-v3 #livestudio .studio-v2-right-rail{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
}
@media(max-width:900px){
  .fok-v3-pagehead{align-items:flex-start;flex-direction:column}
  .fokisen-redesign-v3 .topbar{min-height:64px!important}
  .fokisen-redesign-v3 #livestudio .studio-v2-right-rail{grid-template-columns:1fr!important}
}
@media(max-width:720px){
  .fok-v3-pagehead-main{gap:10px}
  .fok-v3-page-number{width:36px;height:36px;min-width:36px;border-radius:10px}
  .fok-v3-pagehead h2{font-size:27px!important}
  .fokisen-redesign-v3 .section{padding-bottom:24px}
  .fokisen-redesign-v3 .dashboard-v2-card,
  .fokisen-redesign-v3 .panel,
  .fokisen-redesign-v3 .card{border-radius:13px!important}
}

@media(prefers-reduced-motion:reduce){
  .fokisen-redesign-v3 *,body:has(> .topbar + .tabs) *{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}