/* SMMFlow Liquid Spatial skin — visual-only, no workflow/data overrides.
   The demo HTML is a design reference, NOT a replacement application. */
:root{
  --liquid-spring:cubic-bezier(.34,1.45,.64,1);
  --liquid-ease:cubic-bezier(.22,1,.36,1);
  --liquid-bg:#eef3fb;
  --liquid-text:#142139;
  --liquid-muted:#63738d;
  --liquid-card:rgba(255,255,255,.74);
  --liquid-subtle:rgba(241,246,255,.68);
  --liquid-border:rgba(255,255,255,.9);
  --liquid-line:rgba(92,137,190,.17);
  --liquid-glow:rgba(59,130,246,.11);
  --liquid-shadow:rgba(41,71,115,.11);
  --liquid-focus:#2b87fb;
  --liquid-nav:#081727;
}
html[data-liquid-theme="dark"]{
  color-scheme:dark;
  --liquid-bg:#060911;
  --liquid-text:#f3f7ff;
  --liquid-muted:#a0b2ce;
  --liquid-card:rgba(15,25,45,.73);
  --liquid-subtle:rgba(22,36,60,.66);
  --liquid-border:rgba(146,196,245,.17);
  --liquid-line:rgba(148,185,225,.18);
  --liquid-glow:rgba(57,201,244,.17);
  --liquid-shadow:rgba(0,4,20,.55);
  --liquid-focus:#67d8fa;
  --liquid-nav:#07111d;
}
body.spatial-workspace{
  background:var(--liquid-bg)!important;
  color:var(--liquid-text);
  transition:background-color .55s ease,color .4s ease;
  font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.spatial-workspace .app-shell{
  position:relative;
  isolation:isolate;
  background:transparent!important;
  color:var(--liquid-text);
  min-height:100vh;
}
body.spatial-workspace .app-shell .main,
body.spatial-workspace .app-shell .page{
  background:transparent!important;
  min-width:0;
}
/* Ambient layers sit behind ALL controls and never capture pointer events. */
.liquid-ambient{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  contain:strict;
}
.liquid-ambient .liquid-orb{
  position:absolute;
  width:clamp(350px,47vw,850px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(96px);
  opacity:.52;
  will-change:transform;
}
.liquid-orb.one{
  top:-23%;left:-11%;
  background:radial-gradient(circle,rgba(52,198,253,.40),rgba(39,108,240,.15) 50%,transparent 75%);
  animation:liquid-breathe-one 23s ease-in-out infinite alternate;
}
.liquid-orb.two{
  right:-16%;top:18%;
  background:radial-gradient(circle,rgba(98,80,237,.34),rgba(194,80,229,.13) 51%,transparent 73%);
  animation:liquid-breathe-two 28s ease-in-out infinite alternate;
}
.liquid-orb.three{
  bottom:-40%;left:22%;
  background:radial-gradient(circle,rgba(14,200,160,.28),rgba(12,131,209,.11) 54%,transparent 76%);
  animation:liquid-breathe-three 20s ease-in-out infinite alternate;
}
html[data-liquid-theme="light"] .liquid-orb{opacity:.46}
html[data-liquid-theme="dark"] .liquid-orb{opacity:.87}
.liquid-ambient:after{
  content:"";position:absolute;inset:0;opacity:.11;
  background-image:radial-gradient(circle at 1px 1px,var(--liquid-muted) 1px,transparent 0);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,transparent,black 23%,black 85%,transparent);
}
@keyframes liquid-breathe-one{to{transform:translate(9vw,7vh) scale(1.16) rotate(9deg)}}
@keyframes liquid-breathe-two{to{transform:translate(-8vw,-7vh) scale(.88) rotate(-14deg)}}
@keyframes liquid-breathe-three{to{transform:translate(4vw,-5vh) scale(1.21)}}
/* Shared true glass surfaces: preserve content semantics and click handlers. */
body.spatial-workspace .app-shell .page :is(.section,.card,.stat,.stat-card,.platform-card,.job,.calendar-day,.settings-slider-card){
  background:var(--liquid-card)!important;
  border:1px solid var(--liquid-border)!important;
  box-shadow:0 13px 36px -13px var(--liquid-shadow),inset 0 1px rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:blur(18px) saturate(165%);
  backdrop-filter:blur(18px) saturate(165%);
  color:var(--liquid-text);
  border-radius:22px;
  transition:border-color .3s ease,box-shadow .35s ease,background-color .35s ease,transform .38s var(--liquid-spring);
}
body.spatial-workspace .app-shell .page :is(.stat,.stat-card,.settings-slider-card){
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
body.spatial-workspace .app-shell .page :is(.stat,.stat-card,.settings-slider-card):hover{
  transform:translateY(-3px) scale(1.007);
  border-color:var(--liquid-focus)!important;
  box-shadow:0 24px 46px -19px var(--liquid-shadow),0 0 25px -9px var(--liquid-glow)!important;
}
body.spatial-workspace .app-shell .page :is(.section,.stat,.stat-card,.card,.settings-slider-card,.job,.platform-card){
  --liquid-pointer-x:-500px;
  --liquid-pointer-y:-500px;
}
body.spatial-workspace .app-shell .page :is(.stat,.stat-card,.settings-slider-card,.platform-card)::before{
  content:"";
  position:absolute;inset:0;
  z-index:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--liquid-pointer-x) var(--liquid-pointer-y),var(--liquid-glow),transparent 55%);
  opacity:0;
  transition:opacity .4s ease;
}
body.spatial-workspace .app-shell .page :is(.stat,.stat-card,.settings-slider-card,.platform-card):hover::before{opacity:1}
body.spatial-workspace .app-shell .page :is(.section,.job) {overflow:visible}
body.spatial-workspace .app-shell .page .section-head{
  background:var(--liquid-subtle)!important;
  border-bottom:1px solid var(--liquid-line)!important;
  border-radius:22px 22px 0 0;
}
body.spatial-workspace .app-shell .page .section-title,
body.spatial-workspace .app-shell .page .stat-value,
body.spatial-workspace .app-shell .page .number,
body.spatial-workspace .app-shell .page .stat-label{
  color:var(--liquid-text);
}
body.spatial-workspace .app-shell .page :is(.section-sub,.meta,.stat-label,.detail-label,.topbar-sub,.calendar-date,.muted,.settings-slider-sub){
  color:var(--liquid-muted)!important;
}
body.spatial-workspace .app-shell .hero{
  position:relative;
  background:linear-gradient(112deg,rgba(30,110,218,.90),rgba(53,94,206,.82),rgba(88,66,191,.85))!important;
  border:1px solid rgba(171,211,255,.25)!important;
  border-radius:28px!important;
  box-shadow:0 19px 48px -16px rgba(25,82,195,.32)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .hero{
  background:linear-gradient(110deg,rgba(16,55,109,.85),rgba(34,40,103,.83),rgba(54,31,94,.86))!important;
  border-color:rgba(104,204,255,.20)!important;
}
body.spatial-workspace .app-shell .hero h1,
body.spatial-workspace .app-shell .hero .hero-kicker{color:#fff!important}
body.spatial-workspace .app-shell .hero p{color:rgba(238,249,255,.86)!important}
/* Dashboard cards: use live real numbers, gently animated SVG background. */
body.spatial-workspace .app-shell .page :is(.stat,.stat-card){
  --liquid-wave-color:#38bdf8;
  min-height:146px;
}
body.spatial-workspace .app-shell .page :is(.stat.orange,.stat-card.tone-orange){--liquid-wave-color:#fbbf24}
body.spatial-workspace .app-shell .page :is(.stat.red,.stat-card.tone-red){--liquid-wave-color:#fb7185}
body.spatial-workspace .app-shell .page :is(.stat.green,.stat-card.tone-green){--liquid-wave-color:#34d399}
body.spatial-workspace .app-shell .page :is(.stat.purple,.stat-card.tone-purple){--liquid-wave-color:#a78bfa}
.liquid-wave-wrap{
  pointer-events:none;
  position:absolute;
  inset:auto 0 0;
  display:block;
  width:100%;
  height:56px;
  overflow:hidden;
  opacity:.19;
  z-index:0;
  border-radius:0 0 22px 22px;
}
.liquid-wave-wrap svg{width:200%;height:100%;display:block;animation:liquid-wave-flow 9s ease-in-out infinite alternate;fill:var(--liquid-wave-color)}
@keyframes liquid-wave-flow{to{transform:translateX(-38%)}}
body.spatial-workspace .app-shell .page :is(.stat,.stat-card):hover .liquid-wave-wrap{opacity:.34}
body.spatial-workspace .app-shell .page .stat-card-content,
body.spatial-workspace .app-shell .page .stat-top,
body.spatial-workspace .app-shell .page .stat-value,
body.spatial-workspace .app-shell .page .stat-label,
body.spatial-workspace .app-shell .page .number{position:relative;z-index:1}
/* Bento toggler is strictly a view: one real dataset, no duplicated rows. */
.liquid-view-toggle{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px;border:1px solid var(--liquid-line);
  border-radius:15px;background:var(--liquid-subtle);
  flex-wrap:wrap;
}
.liquid-view-toggle button{
  border:0;border-radius:11px;background:transparent;
  color:var(--liquid-muted);padding:8px 11px;
  font-size:11px;font-weight:780;white-space:nowrap;
  transition:background .28s ease,color .28s ease,box-shadow .3s ease;
}
.liquid-view-toggle button[aria-pressed="true"]{
  background:linear-gradient(115deg,#1f73e2,#12b9de);
  box-shadow:0 6px 22px rgba(36,135,237,.27);
  color:#fff;
}
.liquid-staff-bento .tablewrap{overflow:visible}
.liquid-staff-bento table,.liquid-staff-bento .table{display:block;width:100%}
.liquid-staff-bento thead{display:none}
.liquid-staff-bento tbody{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,295px),1fr));gap:14px;
}
.liquid-staff-bento tbody tr{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  background:var(--liquid-subtle)!important;
  border:1px solid var(--liquid-line)!important;
  border-radius:20px;
  padding:16px;
  min-width:0;
}
.liquid-staff-bento tbody td{
  display:flex;flex-direction:column;gap:4px;
  min-width:0;padding:5px!important;
  background:transparent!important;border:0!important;
  color:var(--liquid-text);
  overflow-wrap:anywhere;
}
.liquid-staff-bento tbody td:first-child{
  grid-column:1/-1;font-size:14px;font-weight:850;
  padding-bottom:10px!important;
  border-bottom:1px solid var(--liquid-line)!important;
}
.liquid-staff-bento tbody td:before{
  content:attr(data-liquid-label);
  color:var(--liquid-muted);
  font-size:9px;font-weight:700;
  letter-spacing:.02em;
}
/* Day and night mode: forms and text must remain usable. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell{
  --text:var(--liquid-text);--muted:var(--liquid-muted);
  --border:var(--liquid-line);--white:#12203a;--bg:var(--liquid-bg);
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
  .section-body,.tablewrap,.job-body,.job-top,.detail-grid,.detail-item,
  .mini-metric,.platform-metrics,.quick-edit,.settings-slider-shell,.settings-slider-track
){
  background-color:transparent!important;
  color:var(--liquid-text);
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
  table,tbody,thead,tr,th,td,.detail-value,.job-title,.section-title,.section-sub,
  .stat-label,.settings-slider-title,.settings-slider-sub,.card,.job,.field label
){color:var(--liquid-text)}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page table th{
  background:rgba(45,71,103,.25)!important;
  color:var(--liquid-muted)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page table td{
  border-color:var(--liquid-line)!important;
  background:transparent;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,textarea,.form-control
){
  color:var(--liquid-text)!important;
  background:rgba(10,20,37,.77)!important;
  border-color:rgba(148,185,225,.27)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(input,textarea)::placeholder{color:#93a6c1}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(.settings-slider-card,.card,.detail-item,.job-top,.mini-metric){
  background:var(--liquid-subtle)!important;
  border-color:var(--liquid-line)!important;
}
/* Keep existing semantic danger/warning/success button colors intact. */
body.spatial-workspace .app-shell .page :is(.primary-btn,.btn.primary,.login-button){
  border-radius:13px;
  box-shadow:0 8px 24px rgba(32,116,229,.19);
}
body.spatial-workspace .app-shell .page :is(button,a,input,select,textarea):focus-visible,
.liquid-theme-button:focus-visible{
  outline:2px solid var(--liquid-focus)!important;
  outline-offset:3px!important;
}
body.spatial-workspace .app-shell .page :is(input[type="range"]){
  accent-color:#3cb8f0;
}
/* Quiet, persistent header for the legacy workspace, with real theme switch. */
/* Non-sticky toolbar: it belongs to the content column, scrolls away with
   the page, and never floats above cards or across the expanding sidebar. */
body.spatial-workspace #app .main > .liquid-workspace-toolbar{
  position:relative;
  top:auto;
  left:auto;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:8px clamp(15px,2.3vw,37px) 4px;
  min-height:54px;
  width:100%;
  box-sizing:border-box;
  pointer-events:none;
}
body.spatial-workspace #app .main > .liquid-workspace-toolbar .liquid-theme-button{
  pointer-events:auto;
}
/* Any previous live-status label is intentionally hidden. */
body.spatial-workspace #app .liquid-workspace-mark{display:none!important}
.liquid-theme-button{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:40px;padding:9px 14px;
  border:1px solid var(--liquid-border);
  background:var(--liquid-card);
  color:var(--liquid-text);
  border-radius:14px;
  font-size:11px;font-weight:800;white-space:nowrap;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 9px 24px -10px var(--liquid-shadow);
  cursor:pointer;pointer-events:auto;
  transition:transform .35s var(--liquid-spring),border-color .2s ease,background .3s ease,box-shadow .3s ease;
}
.liquid-theme-button:hover{
  transform:translateY(-2px);
  border-color:var(--liquid-focus);
  box-shadow:0 13px 32px -11px var(--liquid-shadow),0 0 24px -12px var(--liquid-glow);
}
.liquid-theme-button .liquid-mood-icon{font-size:16px;line-height:1}
body.spatial-workspace .app-shell:not(#app) .topbar{
  margin:15px 18px 0;
  border:1px solid var(--liquid-border);
  border-radius:24px;
  background:var(--liquid-card);
  color:var(--liquid-text);
  box-shadow:0 15px 40px -18px var(--liquid-shadow);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
body.spatial-workspace .app-shell:not(#app) .topbar-title{color:var(--liquid-text)}
body.spatial-workspace .app-shell:not(#app) .topbar-sub{color:var(--liquid-muted)}
body.spatial-workspace .app-shell:not(#app) .topbar-actions .liquid-theme-button{margin-right:5px}
/* Spring dock for legacy: the same navigation and click targets, only a new skin. */
#app .workspace-rail,
#app .sidebar{
  background:linear-gradient(162deg,rgba(8,20,39,.94),rgba(16,38,65,.87))!important;
  border:1px solid rgba(139,199,253,.18)!important;
  -webkit-backdrop-filter:blur(25px) saturate(160%);
  backdrop-filter:blur(25px) saturate(160%);
  box-shadow:0 24px 60px -20px rgba(3,18,39,.62),inset 0 1px rgba(255,255,255,.10)!important;
  border-radius:26px!important;
}
#app .workspace-rail{transition:width .52s var(--liquid-spring),box-shadow .4s ease,opacity .2s ease,visibility .2s ease!important;overflow:hidden}
#app .workspace-rail-nav{position:relative}
#app .workspace-rail-btn{z-index:1;transition:background .28s ease,color .22s ease,transform .34s var(--liquid-spring)}
#app .workspace-rail-btn:hover{transform:translateX(2px)}
#app .sidebar{transition:transform .45s var(--liquid-spring),box-shadow .35s ease!important}
#app .module-btn.active,
#app .sidebar-settings-child.active,
#app .workspace-rail-btn.menu-open{
  background:linear-gradient(105deg,rgba(42,122,255,.36),rgba(52,213,247,.15))!important;
  border:1px solid rgba(78,205,254,.30)!important;
  box-shadow:0 7px 22px rgba(5,131,220,.14),inset 3px 0 #49d8f2!important;
  color:#fff!important;
}
#app .sidebar-settings-children .sidebar-settings-child{border-radius:11px}
#app .settings-slider-card.active{
  background:linear-gradient(105deg,rgba(60,142,241,.19),rgba(58,209,242,.08))!important;
  border-color:rgba(43,153,239,.40)!important;
  box-shadow:inset 3px 0 #38bdf8,0 8px 22px rgba(42,129,227,.09)!important;
}
/* The rail hover expansion is overlay-only; the application grid remains stable. */
@media (min-width:851px) and (hover:hover){
  #app .workspace-rail:hover{width:238px!important;align-items:stretch!important}
  #app .workspace-rail-nav{align-items:stretch}
  #app .workspace-rail-btn{
    width:100%!important;min-height:46px;
    display:flex;align-items:center;justify-content:flex-start;gap:13px;
    padding:0 9px;text-align:left;white-space:nowrap;
  }
  #app .workspace-rail-btn .workspace-rail-icon{flex:0 0 28px}
  #app .workspace-rail-btn .workspace-rail-tooltip{
    position:static!important;left:auto!important;top:auto!important;
    padding:0!important;margin:0!important;
    transform:translateX(-9px)!important;
    background:transparent!important;box-shadow:none!important;
    border:0!important;opacity:0!important;visibility:hidden!important;
    color:#eef8ff!important;white-space:nowrap;font-size:12px;
    transition:opacity .27s ease,transform .4s var(--liquid-spring)!important;
  }
  #app .workspace-rail-btn .workspace-rail-tooltip::before{display:none!important}
  #app .workspace-rail:hover .workspace-rail-btn .workspace-rail-tooltip{
    opacity:1!important;visibility:visible!important;transform:translateX(0)!important;
  }
}
.liquid-rail-indicator{
  position:absolute;z-index:0;left:0;top:0;
  width:46px;height:46px;
  border-radius:15px;
  border:1px solid rgba(69,210,251,.34);
  background:linear-gradient(100deg,rgba(51,122,244,.34),rgba(32,210,236,.13));
  box-shadow:0 0 23px rgba(14,165,233,.17),inset 3px 0 #38d9f7;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,0,0);
  transition:transform .52s var(--liquid-spring),width .42s var(--liquid-ease),opacity .2s ease;
}
.liquid-rail-indicator.is-visible{opacity:1}
#app .workspace-rail-btn.menu-open{background:transparent!important;box-shadow:none!important}
#app .workspace-rail-btn{border-color:transparent!important}
/* Next-shell dock: collapsed icons expand with the same spring motion. */
@media(min-width:821px){
  body.spatial-workspace .app-shell:not(#app){
    display:grid;grid-template-columns:78px minmax(0,1fr);
    gap:12px;padding:14px;
    transition:grid-template-columns .5s var(--liquid-spring);
  }
  body.spatial-workspace .app-shell:not(#app):has(.sidebar:hover),
  body.spatial-workspace .app-shell:not(#app):has(.sidebar:focus-within){
    grid-template-columns:242px minmax(0,1fr);
  }
  body.spatial-workspace .app-shell:not(#app) .sidebar{
    top:14px;height:calc(100vh - 28px);
    border-radius:26px;padding:18px 12px;
    overflow:hidden;white-space:nowrap;
    background:linear-gradient(155deg,rgba(8,22,43,.94),rgba(13,39,66,.89));
    border:1px solid rgba(132,195,255,.18);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:0 20px 54px rgba(3,15,39,.24);
    transition:box-shadow .35s ease;
  }
  body.spatial-workspace .app-shell:not(#app) .sidebar :is(
    .sidebar-brand-name,.sidebar-brand-small,.nav-label,.module-btn>span:last-child,.sidebar-user-wrap>div:last-child
  ){opacity:0;transition:opacity .22s ease;}
  body.spatial-workspace .app-shell:not(#app) .sidebar:hover :is(
    .sidebar-brand-name,.sidebar-brand-small,.nav-label,.module-btn>span:last-child,.sidebar-user-wrap>div:last-child
  ),
  body.spatial-workspace .app-shell:not(#app) .sidebar:focus-within :is(
    .sidebar-brand-name,.sidebar-brand-small,.nav-label,.module-btn>span:last-child,.sidebar-user-wrap>div:last-child
  ){opacity:1;transition-delay:.10s}
  body.spatial-workspace .app-shell:not(#app) .sidebar .module-btn{
    gap:14px;padding:8px 10px;overflow:hidden;white-space:nowrap;
  }
  body.spatial-workspace .app-shell:not(#app) .sidebar-brand{padding:8px 6px 18px}
  body.spatial-workspace .app-shell:not(#app) .sidebar-brand-name{font-size:19px}
  body.spatial-workspace .app-shell:not(#app) .sidebar-footer{padding:12px 2px 4px}
  body.spatial-workspace .app-shell:not(#app) .sidebar-nav{position:relative}
}
body.spatial-workspace .app-shell:not(#app) .sidebar .module-btn.active{
  background:linear-gradient(100deg,rgba(42,119,234,.38),rgba(40,203,230,.20));
  border-color:rgba(94,216,249,.27);
  box-shadow:inset 3px 0 #3de2f4,0 7px 18px rgba(7,94,205,.16);
}
body.spatial-workspace .app-shell:not(#app) .sidebar .module-btn:hover{background:rgba(75,167,252,.15)}
body.spatial-workspace .app-shell:not(#app) .page{max-width:none;width:100%}
/* PR181 desktop Settings: left spatial glass nav, live module content on right. */
@media(min-width:861px){
  #app #content:has(> .settings-slider-shell)>.settings-slider-shell{
    background:var(--liquid-card)!important;
    border:1px solid var(--liquid-border)!important;
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:0 18px 44px -20px var(--liquid-shadow)!important;
    border-radius:24px!important;
    padding:12px!important;
    max-height:calc(100vh - 98px);
    overflow-y:auto;
  }
  #app #content:has(> .settings-slider-shell)>.settings-slider-shell .settings-slider-track{
    flex-direction:column!important;overflow:visible!important;gap:5px!important;scroll-snap-type:none!important;
  }
  #app #content:has(> .settings-slider-shell)>.settings-slider-shell .settings-slider-card{
    flex:none!important;max-width:none!important;min-width:0!important;width:100%!important;
    padding:13px 14px!important;border-radius:13px!important;box-shadow:none!important;
  }
}
/* Mobile: keep existing bottom dock and all native functionality accessible. */
@media(max-width:860px){
  .liquid-workspace-toolbar{min-height:54px;padding:8px 13px 2px}
  .liquid-workspace-mark{font-size:9px}
  .liquid-theme-button{padding:8px 10px;min-height:36px}
  body.spatial-workspace .app-shell .page :is(.section,.stat,.stat-card,.card){border-radius:16px}
  #app .workspace-rail:hover{width:auto}
}
@media(max-width:560px){
  .liquid-workspace-mark{letter-spacing:.03em;font-size:8px}
  .liquid-theme-button .liquid-mood-label{font-size:10px}
  .liquid-view-toggle{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){
  .liquid-ambient .liquid-orb,.liquid-wave-wrap svg{animation:none!important}
  body.spatial-workspace .app-shell *,
  body.spatial-workspace .app-shell *:before,
  body.spatial-workspace .app-shell *:after{
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* PR181 dark-mode audit: real legacy surfaces, inline cards, portals, controls.
   Dark-only; all existing click handlers, permissions and data stay untouched. */
html[data-liquid-theme="dark"] body.spatial-workspace{
 color-scheme:dark;--bg:#060911;--text:#f3f7ff;--ink:#f3f7ff;
 --white:#101d32;--card:#14233b;--muted:#a9bad2;
 --line:rgba(151,193,239,.22);--border:rgba(151,193,239,.22);
 --app-surface:#101d32;--app-border:rgba(151,193,239,.23);
 --app-text:#f0f6ff;--app-secondary:#b3c5dd;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page{color:var(--app-text)}
/* Existing bright components missed by the initial glassmorphism skin */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .profile-card,.workflow-item,.report-mini-card,.posting-calendar,
 .calendar-day,.calendar-day.outside,.calendar-platform,.calendar-weekday,
 .staff-metric,.staff-total,.staff-card,.raw-file-row,.multi-select-toggle,
 .multi-select-menu,.tab.active,.tabs,.editor-upload-zone,
 .creator-inline-upload-zone,.cf-workflow-panel,.cf-settings-row,.cf-readonly,
 .compact-work-row,.compact-work-chip,.creator-planned-script,
 .creator-export-status-toggle,.creator-export-status-menu,
 .settings-slider-shell,.calendar-controls button,.detail-info,
 .settings-slider-arrow,.period-filter select,.period-filter input){
 background:var(--liquid-card)!important;color:var(--app-text)!important;
 border-color:var(--app-border)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .staff-metric,.staff-total,.calendar-platform,.calendar-weekday,
 .compact-work-chip,.cf-settings-row,.cf-readonly,.detail-info){
 background:var(--liquid-subtle)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .staff-metric span,.workflow-label,.raw-file-status,.calendar-target,
 .calendar-sub,.calendar-date,.detail-label,.section-sub,
 .compact-work-excerpt,.settings-slider-sub,.cf-workflow-hint){
 color:var(--app-secondary)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .staff-metric strong,.workflow-count,.raw-file-name,.cf-workflow-title,
 .compact-work-heading,.calendar-title,.job-title,.tab.active,
 .settings-slider-title){color:var(--app-text)!important}
/* White secondary actions should be real frosted dark actions. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .secondary-btn,.crew-mini-btn,.edit-mode-btn,.raw-file-remove,
 .creator-drop-actions button,.editor-upload-actions button,
 .calendar-controls button,.settings-slider-arrow,
 .compact-work-view-script,.compact-preview-close,
 .creator-export-status-toggle,.creator-export-status-menu){
 background:var(--liquid-subtle)!important;color:var(--app-text)!important;
 border-color:var(--app-border)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .secondary-btn,.crew-mini-btn,.edit-mode-btn,.creator-drop-actions button,
 .editor-upload-actions button,.compact-preview-close):hover:not(:disabled){
 background:rgba(57,134,214,.27)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .settings-slider-card:hover,.multi-select-option:hover,
 .compact-work-summary:hover,.tab:hover,.calendar-day:hover){
 background:rgba(42,88,145,.30)!important;
}
/* Shared accessible form controls including those outside .page */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell :is(
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
 select,textarea,[contenteditable="true"]){
 background:#0f2039!important;color:#f3f8ff!important;
 border-color:rgba(150,191,235,.32)!important;caret-color:#bde9ff;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell :is(input,textarea)::placeholder{
 color:#aabbd4!important;opacity:1;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(select,option,optgroup){color-scheme:dark}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell :is(
 input,select,textarea,[contenteditable="true"]):focus-visible{
 outline:2px solid #67d8fa!important;outline-offset:1px!important;
 box-shadow:0 0 0 4px rgba(51,174,228,.15)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell :is(
 input,select,textarea):disabled{opacity:.66}
/* Specific pale inline structural surfaces. Do not recolor images or badge/status. */
html[data-liquid-theme="dark"] body.spatial-workspace #app .page :is(
 div,section,article,details,summary,thead,tr,th,td
):not(.status):not(.badge):not(.status-pill):not(.calendar-chip):not(.stat-icon):is(
 [style*="background:#fff;"],[style*="background: #fff;"],
 [style*="background:white;"],[style*="background: white;"],
 [style*="background:#ffffff;"],[style*="background:#f8fafc;"],
 [style*="background:#f8fbff;"],[style*="background:#fbfdff;"],
 [style*="background:#f1f5f9;"],[style*="background:#f7f9fc;"],
 [style*="background:#fafcff;"],[style*="background:#f4f7fb;"]){
 background:var(--liquid-subtle)!important;
 color:var(--app-text);border-color:var(--app-border)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .page :is(
 thead,tr,th,td):is(
 [style*="background:white"],[style*="background:#fff"],
 [style*="background:#f8fafc"]){
 background:#172942!important;color:var(--app-text)!important;
}
/* Inline dark typography hidden against liquid cards; semantic colors retained. */
html[data-liquid-theme="dark"] body.spatial-workspace #app .page :is(
 div,span,p,strong,b,label,small,h1,h2,h3,h4,h5,h6,th,td,code
):is(
 [style*="color:#0f172a"],[style*="color:#172033"],
 [style*="color:#182230"],[style*="color:#1c344e"],
 [style*="color:#334155"],[style*="color:#344054"],
 [style*="color:#24364b"],[style*="color:#1d3552"],
 [style*="color:#1c3856"],[style*="color:#475569"],
 [style*="color:#526079"]){color:var(--app-text)!important}
html[data-liquid-theme="dark"] body.spatial-workspace #app .page :is(
 div,span,p,small,label,td):is(
 [style*="color:#64748b"],[style*="color:#667085"],
 [style*="color:#7b8797"],[style*="color:#8a95a4"]){
 color:var(--app-secondary)!important;
}
/* Sticky wide tables */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 table,tbody,thead,tr,.tablewrap,.job-top,.creator-calendar){
 border-color:var(--app-border);color:var(--app-text);
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page table :is(th,td){
 border-color:var(--app-border)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page table tr:hover :is(th,td){
 background:rgba(47,96,150,.24)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .page :is(
 th,td)[style*="position:sticky"]{
 background:#172942!important;color:var(--app-text)!important;
}
/* Legible semantic status treatments on dark surfaces. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .status.pending,.badge.orange){color:#ffd184!important;background:rgba(180,112,11,.24)!important}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .status.editing,.status.scheduled,.badge.blue){color:#a9d5ff!important;background:rgba(34,114,205,.23)!important}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .status.edited,.status.posted,.status.shot,.badge.green){color:#90f2c1!important;background:rgba(18,128,89,.25)!important}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .status.hold,.badge.red){color:#ffb4b4!important;background:rgba(191,55,71,.24)!important}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .status.planned,.badge.purple){color:#d2c0ff!important;background:rgba(119,73,190,.24)!important}
/* Portaled dialogs and dropdowns live outside #app: scope by authenticated body. */
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 .detail-modal-card,.app-confirm-box,.hero-account-menu,
 .compact-preview-dialog,.creator-export-dialog,
 .creator-export-status-menu,.multi-select-menu,
 .account-settings-menu,.modal-card,.dialog-card,.modal-content,
 [role="dialog"][style*="background:#fff"],
 [role="dialog"][style*="background:white"]){
 background:rgba(17,30,51,.97)!important;color:var(--app-text)!important;
 border:1px solid var(--app-border)!important;
 box-shadow:0 24px 72px rgba(0,3,15,.55)!important;
 -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 .detail-modal-head,.compact-preview-head,.compact-preview-actions,
 .app-confirm-title,.creator-export-footer){
 background:#182a44!important;color:var(--app-text)!important;
 border-color:var(--app-border)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 .detail-modal-card,.app-confirm-box,.hero-account-menu,
 .compact-preview-dialog,.creator-export-dialog,.creator-export-status-menu,
 .multi-select-menu,[role="dialog"]
) :is(.meta,.detail-modal-subtitle,.detail-label,.compact-preview-help,.hint){
 color:var(--app-secondary)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 .detail-modal-card,.app-confirm-box,.hero-account-menu,
 .compact-preview-dialog,.creator-export-dialog,[role="dialog"]
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){
 background:#0b1c32!important;color:var(--app-text)!important;
 border-color:var(--app-border)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 .detail-modal-card,.app-confirm-box,.hero-account-menu,
 .compact-preview-dialog,.creator-export-dialog,[role="dialog"]
) :is(div,span,p,strong,b,h1,h2,h3,h4,label,small):is(
 [style*="color:#0f172a"],[style*="color:#172033"],
 [style*="color:#334155"],[style*="color:#475569"],
 [style*="color:#24364b"],[style*="color:#1c3856"]){
 color:var(--app-text)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .hero :is(
 .hero-account-menu,.hero-account-menu button){
 background:#152640!important;color:var(--app-text)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .hero .hero-account-menu button:hover{
 background:#203a5b!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .hero .hero-account-menu .danger{
 color:#ffb4b4!important;background:rgba(159,46,59,.23)!important;
}
/* Real preview media is never modified by the theme. */
html[data-liquid-theme="dark"] body.spatial-workspace :is(video,img,canvas,iframe){filter:none}

/* Generated modal shells with no stable class: override only pale structural
   nodes inside a named overlay, never the dark translucent backdrop. */
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 [id$="Overlay_"],[id$="Overlay"],[id$="Modal_"],[id$="Modal"],
 .app-confirm-overlay,.detail-modal
) :is(div,section,article,details,summary,header,footer)[style*="background:#fff"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 [id$="Overlay_"],[id$="Overlay"],[id$="Modal_"],[id$="Modal"]
) :is(div,section,article,details,summary,header,footer)[style*="background:white"]{
 background:#14243c!important;color:#f0f6ff!important;
 border-color:rgba(151,193,239,.22)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 [id$="Overlay_"],[id$="Overlay"],[id$="Modal_"],[id$="Modal"]
) :is(div,section,article,details,summary,header,footer)[style*="background:#f8fbff"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 [id$="Overlay_"],[id$="Overlay"],[id$="Modal_"],[id$="Modal"]
) :is(div,section,article,details,summary,header,footer)[style*="background:#f8fafc"]{
 background:#1a2e4a!important;color:#f0f6ff!important;
 border-color:rgba(151,193,239,.22)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 [id$="Overlay_"],[id$="Overlay"],[id$="Modal_"],[id$="Modal"]
) :is(div,span,p,strong,b,h1,h2,h3,h4,label,small)[style*="color:#172033"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 [id$="Overlay_"],[id$="Overlay"],[id$="Modal_"],[id$="Modal"]
) :is(div,span,p,strong,b,h1,h2,h3,h4,label,small)[style*="color:#0f172a"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 [id$="Overlay_"],[id$="Overlay"],[id$="Modal_"],[id$="Modal"]
) :is(div,span,p,strong,b,h1,h2,h3,h4,label,small)[style*="color:#334155"]{
 color:#f0f6ff!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 [id$="Overlay_"],[id$="Overlay"],[id$="Modal_"],[id$="Modal"]
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){
 background:#0b1c32!important;color:#f3f8ff!important;
 border-color:rgba(151,193,239,.27)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 [id$="Overlay_"],[id$="Overlay"],[id$="Modal_"],[id$="Modal"]
) :is(input,textarea)::placeholder{color:#acbfd9!important;opacity:1}

/* Next.js operational pages: old global.css gradients/white action surfaces. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .job-top,.detail-item,.mini-metric,.job-code,.calendar-day.outside,
 .calendar-weekday,.empty
){
 background:var(--liquid-subtle)!important;
 color:var(--app-text)!important;
 border-color:var(--app-border)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .job-code,.detail-label,.mini-metric span,.empty,
 .field label,.formgrid label,.muted
){color:var(--app-secondary)!important}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .btn:not(.primary):not(.danger),.link-btn,.logout-btn
){
 background:var(--liquid-subtle)!important;
 border-color:var(--app-border)!important;
 color:#d6eaff!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page .btn.danger{
 background:rgba(181,53,74,.22)!important;
 color:#ffc2c2!important;border-color:rgba(251,113,133,.35)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell:not(#app) .topbar .user-pill{
 background:rgba(27,54,83,.87)!important;
 color:#d7ebff!important;border-color:var(--app-border)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page .table th{
 background:#1a2b44!important;color:var(--app-secondary)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page .table td{
 background:transparent;color:var(--app-text);
}
/* Do not let decorative SVG glow obscure text or clicks. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .stat-card,.platform-card,.stat,.settings-slider-card
)::before{pointer-events:none}
/* Consistent input range tracks while retaining native value and listeners. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page input[type="range"]{
 accent-color:#5dd7fc;
}

/* Legacy form labels and modal headings were still coded for white backgrounds. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .form-label,.label,.detail-value,.job-code,.staff-name,.staff-role,
 .staff-label,.calendar-count,.workflow-title,.profile-title,
 .compact-work-heading,.creator-page-title
){color:var(--app-text)!important}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
 .form-help,.field-hint,.meta,.stat-desc,.staff-role,
 .section-sub,.calendar-sub,.job-code
){color:var(--app-secondary)!important}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 .detail-modal-title,.app-confirm-title,.compact-preview-head,
 .creator-export-heading,.modal-title
){color:var(--app-text)!important}


/* Lottie-backed metric cards previously had no wave. The wave must sit
   above the animation (z-index:0), but below the real metric text (z-index:2).
   Keep the SVG layer decorative, including when a metric has value 0. */
body.spatial-workspace .app-shell .page .stat.has-card-lottie > .liquid-wave-wrap{
  z-index:1;
  opacity:.20;
}
body.spatial-workspace .app-shell .page .stat.has-card-lottie:hover > .liquid-wave-wrap{
  opacity:.34;
}


/* PR181: ONLY the existing rail brand changes between collapsed/hover states.
   Keep rail width, spring physics, navigation, role filtering and layout untouched. */
@media (min-width:851px) and (hover:hover){
  #app .workspace-rail-brand{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:44px;
    height:44px;
    min-height:44px;
    flex:0 0 44px;
    box-sizing:border-box;
    padding:0;
    overflow:hidden;
    white-space:nowrap;
    transition:width .48s var(--liquid-spring),
      border-color .28s ease,background .28s ease;
  }
  #app .workspace-rail-brand > img{
    display:block;
    flex:0 0 25px;
    width:25px;height:29px;
    margin-left:9px;
    object-fit:contain;
  }
  #app .workspace-rail-brand-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    min-width:0;
    max-width:0;
    opacity:0;
    overflow:hidden;
    transform:translateX(-6px);
    transition:opacity .25s ease,max-width .48s var(--liquid-ease),
      transform .48s var(--liquid-spring);
  }
  #app .workspace-rail-brand-copy strong{
    color:#f4faff;
    font-size:16px;
    line-height:1.16;
    font-weight:850;
    letter-spacing:-.03em;
  }
  #app #workspaceRailCompanyName_{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#a9bed8;
    font-size:9px;
    line-height:1.25;
    font-weight:680;
  }
  #app .workspace-rail:hover .workspace-rail-brand{
    width:calc(100% - 8px);
    background:rgba(74,139,229,.13);
    border-color:rgba(138,202,255,.20);
  }
  #app .workspace-rail:hover .workspace-rail-brand-copy{
    max-width:190px;
    opacity:1;
    transform:translateX(0);
  }
}


/* Workspace scale-up: compact staff, search and progressive lists.
   Only visible rows render; this does not change underlying data/authorization. */
body.spatial-workspace .workspace-list-shell{min-width:0}
body.spatial-workspace .workspace-list-toolbar{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:12px;padding:12px 14px;margin:10px 0 14px;
  border:1px solid var(--liquid-border);border-radius:17px;
  background:var(--liquid-card);backdrop-filter:blur(14px);
}
body.spatial-workspace .workspace-search-label{
  display:flex;flex-direction:column;gap:6px;
  flex:1 1 300px;min-width:0;
  color:var(--liquid-muted);font-size:11px;font-weight:760;
}
body.spatial-workspace .workspace-search-label input{
  width:100%;max-width:520px;min-width:0;box-sizing:border-box;
  border-radius:12px;border:1px solid var(--liquid-line);
  background:var(--liquid-subtle);color:var(--liquid-text);
  padding:11px 14px;font:inherit;font-size:12px;
}
body.spatial-workspace .workspace-page-label{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:650;color:var(--liquid-muted);
}
body.spatial-workspace .workspace-page-label select{
  border:1px solid var(--liquid-line);background:var(--liquid-subtle);
  color:var(--liquid-text);border-radius:11px;
  padding:9px 12px;min-width:70px;
}
body.spatial-workspace .workspace-list-result{
  margin:0 0 11px;padding:0 4px;
  font-size:11px;font-weight:700;color:var(--liquid-muted);
}
body.spatial-workspace .workspace-list-more{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:12px;padding:19px 12px 7px;
  color:var(--liquid-muted);font-size:11px;
}
body.spatial-workspace .workspace-list-more button{
  border:1px solid var(--liquid-border)!important;
  background:var(--liquid-subtle)!important;
  color:var(--liquid-text)!important;
  border-radius:13px!important;
  min-height:40px;padding:9px 21px!important;
  cursor:pointer;
}
body.spatial-workspace .workspace-list-more button:hover{
  border-color:var(--liquid-focus)!important;
  box-shadow:0 6px 23px var(--liquid-glow);
}
body.spatial-workspace .staff-performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.spatial-workspace .staff-performance-grid .staff-compact-card{
  min-width:0;padding:0!important;overflow:hidden;
  background:var(--liquid-card)!important;
  border:1px solid var(--liquid-border)!important;
  border-radius:18px;
}
body.spatial-workspace .staff-compact-card .staff-card-head{
  display:flex;align-items:center;gap:10px;
  list-style:none;cursor:pointer;
  padding:13px 15px;
}
body.spatial-workspace .staff-compact-card .staff-card-head::-webkit-details-marker{display:none}
body.spatial-workspace .staff-compact-card .staff-avatar{
  height:38px;width:38px;flex:0 0 38px;
  border-radius:12px;
}
body.spatial-workspace .staff-compact-card .staff-total{
  margin-left:auto;white-space:nowrap;
  color:var(--liquid-muted);background:var(--liquid-subtle)!important;
}
body.spatial-workspace .staff-compact-card .staff-expand-cue{
  font-size:10px;font-weight:800;color:var(--liquid-muted);white-space:nowrap;
}
body.spatial-workspace .staff-compact-card[open] .staff-expand-cue{color:var(--liquid-focus)}
body.spatial-workspace .staff-compact-card .staff-metrics{
  margin:0 13px 8px;padding:11px 0 0;
  border-top:1px solid var(--liquid-line);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
body.spatial-workspace .staff-compact-card .staff-metric{
  padding:10px 8px;min-width:0;background:var(--liquid-subtle)!important;
}
body.spatial-workspace .staff-compact-card .staff-post-breakdown{padding:2px 13px 14px}
@media(max-width:680px){
  body.spatial-workspace .staff-performance-grid{grid-template-columns:1fr}
  body.spatial-workspace .staff-compact-card .staff-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.spatial-workspace .workspace-list-toolbar{padding:10px}
}


/* Theme visibility regression: Creator calendar used pastel tiles with dark-mode
   global white text, leaving dates visible but item titles nearly invisible. */
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day > button{
  background:#1a3556!important;border-color:#4b7ca8!important;color:#eef7ff!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day > button[style*="background:#dcfce7"]{
  background:#134a3e!important;border-color:#3b9676!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day > button[style*="background:#fff3cc"]{
  background:#533c20!important;border-color:#b08a45!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day > button :is(div,span){
  color:#f3f8ff!important;text-shadow:none!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day > button[style*="background:#dcfce7"] span:last-child{color:#8ff5c0!important}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day > button[style*="background:#fff3cc"] span:last-child{color:#f8d38a!important}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day :is(.calendar-date,.creator-calendar-more){color:#cee2ff!important}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day > div[style*="flex-wrap"] span[style*="color:#047857"]{color:#7bf1b9!important}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day > div[style*="flex-wrap"] span[style*="color:#64748b"]{color:#bfcee3!important}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day > div[style*="color:#64748b"]{color:#b7cce6!important}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day[style*="background:#f8fafc"],
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-calendar-day[style*="background:#fffaf0"]{background:rgba(31,45,67,.9)!important}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar .creator-holiday-label{
 background:#614521!important;color:#ffdea0!important;border:1px solid #a67c36!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #app .creator-calendar :is(.calendar-weekday,.calendar-legend,.calendar-month-label){color:#e5efff!important}
/* Portaled modal controls: force readable glyph and button contrast. */
html[data-liquid-theme="dark"] body.spatial-workspace :is(
 #completeWorkflowModal_,#identityCheckOverlay_,#companyManagerOverlay_,
 #creatorCalendarDayOverlay_,#creatorQuickAddOverlay_,#scriptTextOverlay_
) button[aria-label^="Close"]{
 background:#243c5c!important;color:#eff8ff!important;border:1px solid #59769b!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #completeWorkflowModal_ .complete-workflow-modal-panel{
 background:#101e33!important;color:#f3f7ff!important;border:1px solid rgba(142,190,240,.25)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #completeWorkflowModal_ .complete-workflow-modal-head{
 background:#182b46!important;border-color:rgba(142,190,240,.23)!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #completeWorkflowModal_ .complete-workflow-modal-head div[style*="color:#172033"],
html[data-liquid-theme="dark"] body.spatial-workspace #completeWorkflowModal_ .complete-workflow-modal-head div[style*="color:#667085"]{
 color:#f0f7ff!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #completeWorkflowModal_ .complete-workflow-modal-panel > div:last-child > div[style*="background:#f8fafc"]{
 background:#1c314d!important;color:#e4eefb!important;border-color:#446083!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #completeWorkflowModal_ .complete-workflow-modal-close{
 background:#294565!important;color:#fff!important;border:1px solid #6781a0!important;
}
/* Both existing brand panels navigate home with mouse or keyboard. */
#app :is(.workspace-rail-brand,.sidebar-brand)[role="button"]{cursor:pointer}
#app :is(.workspace-rail-brand,.sidebar-brand)[role="button"]:focus-visible{
 outline:2px solid #82e6ff!important;outline-offset:3px!important;
}


/*
 * Night-mode dialog parity (PR188 follow-up).
 * These overlays are created dynamically in legacy.html, outside the app's
 * .page tree. The old rules recolored inputs but left several parent dialogs,
 * their headers and reviewer-choice labels bright white. Scope every rule to
 * known modal IDs; do not style the backdrop, photos or semantic status pills.
 */
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #appTextInputOverlay_,
  #centralRawPickerOverlay_,
  #smmflowMissingOverlay_,
  #smmflowMediaModal_,
  #accountRecoveryOverlay_,
  #deletionScheduledOverlay_,
  #clientManagerOverlay_,
  #completeWorkflowModal_,
  #identityCheckOverlay_,
  #companyManagerOverlay,
  #companyWorkflowResetOverlay_,
  #permanentDeleteCompanyOverlay_,
  #deleteAccountOverlay_,
  #managedUserOverlay,
  #creatorCalendarItemOverlay_,
  #shooterCalendarDayOverlay_,
  #moveCreatorPlanOverlay_,
  #creatorQuickAddOverlay_,
  #scriptTextOverlay_,
  #creatorScriptEditOverlay_,
  #pcMultiSelectOverlay_
) > :is(div,section,article,[role="dialog"]){
  background:#14243c!important;
  color:#eff6ff!important;
  border-color:rgba(151,193,239,.28)!important;
  color-scheme:dark;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #appTextInputOverlay_,
  #centralRawPickerOverlay_,
  #smmflowMissingOverlay_,
  #smmflowMediaModal_,
  #accountRecoveryOverlay_,
  #deletionScheduledOverlay_,
  #clientManagerOverlay_,
  #completeWorkflowModal_,
  #identityCheckOverlay_,
  #companyManagerOverlay,
  #companyWorkflowResetOverlay_,
  #permanentDeleteCompanyOverlay_,
  #deleteAccountOverlay_,
  #managedUserOverlay,
  #creatorCalendarItemOverlay_,
  #shooterCalendarDayOverlay_,
  #moveCreatorPlanOverlay_,
  #creatorQuickAddOverlay_,
  #scriptTextOverlay_,
  #creatorScriptEditOverlay_,
  #pcMultiSelectOverlay_
) :is(div,section,article,header,footer)[style*="background:#f1f5f9"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #appTextInputOverlay_,
  #centralRawPickerOverlay_,
  #smmflowMissingOverlay_,
  #smmflowMediaModal_,
  #accountRecoveryOverlay_,
  #deletionScheduledOverlay_,
  #clientManagerOverlay_,
  #completeWorkflowModal_,
  #identityCheckOverlay_,
  #companyManagerOverlay,
  #companyWorkflowResetOverlay_,
  #permanentDeleteCompanyOverlay_,
  #deleteAccountOverlay_,
  #managedUserOverlay,
  #creatorCalendarItemOverlay_,
  #shooterCalendarDayOverlay_,
  #moveCreatorPlanOverlay_,
  #creatorQuickAddOverlay_,
  #scriptTextOverlay_,
  #creatorScriptEditOverlay_,
  #pcMultiSelectOverlay_
) :is(div,section,article,header,footer)[style*="background:#f1f8ff"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #appTextInputOverlay_,
  #centralRawPickerOverlay_,
  #smmflowMissingOverlay_,
  #smmflowMediaModal_,
  #accountRecoveryOverlay_,
  #deletionScheduledOverlay_,
  #clientManagerOverlay_,
  #completeWorkflowModal_,
  #identityCheckOverlay_,
  #companyManagerOverlay,
  #companyWorkflowResetOverlay_,
  #permanentDeleteCompanyOverlay_,
  #deleteAccountOverlay_,
  #managedUserOverlay,
  #creatorCalendarItemOverlay_,
  #shooterCalendarDayOverlay_,
  #moveCreatorPlanOverlay_,
  #creatorQuickAddOverlay_,
  #scriptTextOverlay_,
  #creatorScriptEditOverlay_,
  #pcMultiSelectOverlay_
) :is(div,section,article,header,footer)[style*="background:#fff7f7"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #appTextInputOverlay_,
  #centralRawPickerOverlay_,
  #smmflowMissingOverlay_,
  #smmflowMediaModal_,
  #accountRecoveryOverlay_,
  #deletionScheduledOverlay_,
  #clientManagerOverlay_,
  #completeWorkflowModal_,
  #identityCheckOverlay_,
  #companyManagerOverlay,
  #companyWorkflowResetOverlay_,
  #permanentDeleteCompanyOverlay_,
  #deleteAccountOverlay_,
  #managedUserOverlay,
  #creatorCalendarItemOverlay_,
  #shooterCalendarDayOverlay_,
  #moveCreatorPlanOverlay_,
  #creatorQuickAddOverlay_,
  #scriptTextOverlay_,
  #creatorScriptEditOverlay_,
  #pcMultiSelectOverlay_
) :is(div,section,article,header,footer)[style*="background:#eef6ff"]{
  background:#1d334f!important;
  color:#eaf4ff!important;
  border-color:rgba(151,193,239,.3)!important;
}
/* White/transparent panel titles, labels and user instructions. */
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay :is(
  h2,h3,h4,.field > span,#approvalChoose > strong,#approvalMethodRow > strong
){color:#eef6ff!important}
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay > div > div:first-child div[style*="color:#64748b"]{
  color:#b7cbe3!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay :is(
  #approvalChoose,#approvalStageList,#approvalEmailFields
){
  background:#1b334e!important;
  color:#edf6ff!important;
  border-color:#526e90!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay :is(
  .approval-choice-row label,#approvalMethodRow .approval-choice-row label
){
  background:#223c5a!important;
  color:#f1f7ff!important;
  border-color:#597a9d!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay .approval-choice-row label:has(input:checked){
  background:#164977!important;
  border-color:#63c7ff!important;
  box-shadow:inset 3px 0 #66e5ff;
}
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay :is(
  .approval-sticky-footer,#approvalDashboardFields > section,#approvalDashboardFields > p
)[style*="background:"],
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay .approval-sticky-footer{
  background:#14243c!important;
  border-color:#44617f!important;
  color:#eaf4ff!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay :is(
  .approval-choice-row input[type="radio"],input[type="checkbox"]
){accent-color:#60d7ff; color-scheme:dark}
/* Forced foreground on circular X controls: their pale fill was being darkened
 * separately from their text in several workflows. */
body.spatial-workspace #managedUserOverlay button[aria-label="Close user dialog"]{
  color:#233a56!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay button[aria-label="Close user dialog"]{
  background:#284968!important;
  color:#f9fcff!important;
  border:1px solid #6589ac!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #appTextInputOverlay_,
  #centralRawPickerOverlay_,
  #smmflowMissingOverlay_,
  #smmflowMediaModal_,
  #accountRecoveryOverlay_,
  #deletionScheduledOverlay_,
  #clientManagerOverlay_,
  #completeWorkflowModal_,
  #identityCheckOverlay_,
  #companyManagerOverlay,
  #companyWorkflowResetOverlay_,
  #permanentDeleteCompanyOverlay_,
  #deleteAccountOverlay_,
  #managedUserOverlay,
  #creatorCalendarItemOverlay_,
  #shooterCalendarDayOverlay_,
  #moveCreatorPlanOverlay_,
  #creatorQuickAddOverlay_,
  #scriptTextOverlay_,
  #creatorScriptEditOverlay_,
  #pcMultiSelectOverlay_
) button[style*="background:#f1f5f9"]:not(.primary-btn),
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #appTextInputOverlay_,
  #centralRawPickerOverlay_,
  #smmflowMissingOverlay_,
  #smmflowMediaModal_,
  #accountRecoveryOverlay_,
  #deletionScheduledOverlay_,
  #clientManagerOverlay_,
  #completeWorkflowModal_,
  #identityCheckOverlay_,
  #companyManagerOverlay,
  #companyWorkflowResetOverlay_,
  #permanentDeleteCompanyOverlay_,
  #deleteAccountOverlay_,
  #managedUserOverlay,
  #creatorCalendarItemOverlay_,
  #shooterCalendarDayOverlay_,
  #moveCreatorPlanOverlay_,
  #creatorQuickAddOverlay_,
  #scriptTextOverlay_,
  #creatorScriptEditOverlay_,
  #pcMultiSelectOverlay_
) button[style*="background:#f8fafc"]:not(.primary-btn){
  background:#294563!important;
  color:#f3f9ff!important;
  border:1px solid #5c7898!important;
}
/* These were generated by approval-only-user-ui.js after the main stylesheet:
 * keep its light-mode styles unchanged while correcting both night surfaces. */
html[data-liquid-theme="dark"] body.spatial-workspace #managedUserOverlay .approval-choice-row label:focus-within{
  outline:2px solid #79d9ff;
  outline-offset:2px;
}
@media (max-width:650px){
  #managedUserOverlay .approval-choice-row label{min-width:0}
}


/* PR188: Creator draft planner and company-admin drilldown parity.
   Explicit scope prevents white inline backgrounds from surviving dark mode;
   do not recolor translucent modal backdrops or status badges. */
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,
  #adminDetailModal,#companyManagerOverlay
) :is(.detail-modal-card,.detail-modal-head,.detail-body,.detail-item,.detail-info,
  [id^="cq"],[id^="companyManager"]) {
  color-scheme:dark;
}
html[data-liquid-theme="dark"] body.spatial-workspace #adminDetailModal :is(
  .detail-modal-card,.detail-body,.detail-item){
  background:#14243c!important;
  color:#f0f7ff!important;
  border-color:#38536f!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #adminDetailModal :is(
  .detail-modal-head,.detail-info){
  background:#1b304b!important;
  color:#f0f7ff!important;
  border-color:#38536f!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace #adminDetailModal :is(
  .detail-modal-title,.detail-topic,.detail-info-value){color:#f2f8ff!important}
html[data-liquid-theme="dark"] body.spatial-workspace #adminDetailModal :is(
  .detail-modal-subtitle,.detail-id,.detail-info-label,.detail-empty){color:#b5cbe2!important}
html[data-liquid-theme="dark"] body.spatial-workspace #adminDetailModal .detail-close{
  background:#284765!important;color:#fff!important;
  border:1px solid #7894b2!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay
) > div{
  background:#14243c!important;
  color:#f0f7ff!important;
  border:1px solid #38536f!important;
  color-scheme:dark;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay
) :is(div,section,article,header,footer)[style*="background:#fafcff"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay
) :is(div,section,article,header,footer)[style*="background:#fff"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay
) :is(div,section,article,header,footer)[style*="background:#f8fafc"]{
  background:#1b304b!important;
  color:#f0f7ff!important;
  border-color:#38536f!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay
) :is(label,strong,b,h1,h2,h3,h4,div,span,p,pre)[style*="color:#172033"],
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay
) :is(label,strong,b,h1,h2,h3,h4,div,span,p,pre)[style*="color:#1e293b"]{
  color:#f0f7ff!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay
) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,pre){
  background:#0e2138!important;
  color:#f0f7ff!important;
  border-color:#4c6987!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay
) :is(input,textarea)::placeholder{color:#b2c6dc!important;opacity:1}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay
) button[aria-label^="Close"],
html[data-liquid-theme="dark"] body.spatial-workspace #adminDetailModal button.detail-close{
  background:#284765!important;
  color:#fff!important;
  border:1px solid #7894b2!important;
  opacity:1!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace :is(
  #creatorQuickAddOverlay_,#scriptTextOverlay_,#creatorScriptEditOverlay_,#companyManagerOverlay,#adminDetailModal
) button[aria-label^="Close"]:focus-visible,
html[data-liquid-theme="dark"] body.spatial-workspace #adminDetailModal .detail-close:focus-visible{
  outline:2px solid #7cdeff!important;outline-offset:2px!important;
}


/* PR188 follow-up: Creator, Editor and Posting work-strip foregrounds.
   The expanded/card data was present, but its headings inherited legacy
   navy ink over Midnight Aurora panels. Keep status/badge colors semantic. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page :is(
  .job,.creator-planned-job
) :is(.job-title,.compact-work-heading,.compact-work-title,.job-topic),
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  .job .job-top > div:first-child > :is(div,h2,h3,h4,strong):not(.meta):not(.status):not(.badge){
  color:#f1f7ff!important;
  opacity:1!important;
  -webkit-text-fill-color:#f1f7ff!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page .job :is(
  .meta,.job-code,.compact-work-excerpt,.compact-work-subtitle
){
  color:#b4c8e1!important;
  -webkit-text-fill-color:#b4c8e1!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page .job :is(
  .job-title,.job-topic,.compact-work-heading,.compact-work-title
) :is(a,span,strong,b):not(.badge):not(.status){
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}

/* Dark work cards (Creator, Editor, Graphic and Posting): primary information.
 * Do not use inherited navy ink or browser text fill over a glass surface.
 * Applied after previous PR188 rules; semantic badges and state chips retain
 * their own palette. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  .job .job-top .job-title,
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  .job .job-title,
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  .job .job-top .job-topic{
  color:#f3f8ff!important;
  -webkit-text-fill-color:#f3f8ff!important;
  opacity:1!important;
  text-shadow:none!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  .job .job-top .meta,
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  .job .job-code{
  color:#b7c9e0!important;
  -webkit-text-fill-color:#b7c9e0!important;
  opacity:1!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  .job .job-top .job-title :is(a,span,strong,b){
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
  opacity:1!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  .job .job-top .job-title a:focus-visible{
  outline:2px solid #79d9ff;outline-offset:3px;
}
/* All modal shells and close controls from the two reported workflows. */
html[data-liquid-theme="dark"] body.spatial-workspace
  :is(#creatorQuickAddOverlay_,#creatorScriptEditOverlay_,#scriptTextOverlay_,#companyManagerOverlay)
  > div > div[style*="background:#fff"]{
  background:#1b304b!important;
  color:#f3f8ff!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace
  :is(#creatorQuickAddOverlay_,#creatorScriptEditOverlay_,#scriptTextOverlay_,#companyManagerOverlay)
  button[aria-label^="Close"]{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:#294966!important;
  border:1px solid #7899bd!important;
}


/* PR190 exact DOM fix: collapsed work-list rows are <details>, not .job.
 * The title is .compact-work-topic (hardcoded navy in legacy.html), while
 * the video identifier is .compact-work-id. Target these actual descendants
 * for Creator, Editor, Graphic and Posting without altering badge colors. */
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  details.compact-work-row > summary.compact-work-summary
  .compact-work-heading .compact-work-topic{
  color:#f3f8ff!important;
  -webkit-text-fill-color:#f3f8ff!important;
  opacity:1!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  details.compact-work-row > summary.compact-work-summary
  .compact-work-heading .compact-work-id{
  color:#b7c9e0!important;
  -webkit-text-fill-color:#b7c9e0!important;
  opacity:1!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  details.compact-work-row > summary.compact-work-summary
  .compact-work-excerpt strong{
  color:#d5e6fa!important;
  -webkit-text-fill-color:#d5e6fa!important;
}
html[data-liquid-theme="dark"] body.spatial-workspace .app-shell .page
  details.compact-work-row > summary.compact-work-summary:focus-visible{
  outline:2px solid #79d9ff!important;
  outline-offset:3px;
}