/* 7Z Content Engine — Clean Unified Shell */
:root{
  --z7-bg:#080b0e;--z7-surface:#10161c;--z7-surface-2:#151c23;--z7-surface-3:#1a222b;
  --z7-border:#29343f;--z7-border-2:#384653;--z7-text:#f5f7f9;--z7-muted:#8996a3;
  --z7-accent:#63dca8;--z7-good:#63dca8;--z7-warn:#e3c45d;--z7-bad:#ff7d88;
  --z7-shadow:0 18px 48px rgba(0,0,0,.22);--z7-radius:16px;color-scheme:dark;
  --bg:var(--z7-bg);--panel:var(--z7-surface);--panel2:var(--z7-surface-2);--surface:var(--z7-surface);--surface2:var(--z7-surface-2);
  --line:var(--z7-border);--line2:var(--z7-border-2);--text:var(--z7-text);--muted:var(--z7-muted);--good:var(--z7-good);--warn:var(--z7-warn);--bad:var(--z7-bad);
  --s:var(--z7-surface);--l:var(--z7-border);--t:var(--z7-text);--m:var(--z7-muted);--ok:var(--z7-good);--w:var(--z7-warn);
}
html[data-z7-theme="light"]{
  --z7-bg:#f4f6f8;--z7-surface:#ffffff;--z7-surface-2:#eef2f5;--z7-surface-3:#e6ebef;
  --z7-border:#cbd5df;--z7-border-2:#b8c4cf;--z7-text:#12171c;--z7-muted:#5f6c78;
  --z7-accent:#087f5b;--z7-good:#087f5b;--z7-warn:#8a6500;--z7-bad:#b42331;
  --z7-shadow:0 14px 36px rgba(22,34,46,.09);color-scheme:light;
  --bg:var(--z7-bg);--panel:var(--z7-surface);--panel2:var(--z7-surface-2);--surface:var(--z7-surface);--surface2:var(--z7-surface-2);
  --line:var(--z7-border);--line2:var(--z7-border-2);--text:var(--z7-text);--muted:var(--z7-muted);--good:var(--z7-good);--warn:var(--z7-warn);--bad:var(--z7-bad);
  --s:var(--z7-surface);--l:var(--z7-border);--t:var(--z7-text);--m:var(--z7-muted);--ok:var(--z7-good);--w:var(--z7-warn);
}
*{box-sizing:border-box}
html,body{background:var(--z7-bg)!important;color:var(--z7-text)!important}
body{margin:0}
/* ===== 7Z CONTENT ENGINE HEADER V12.1 / CLEAN REBUILD ===== */
.z7-global-header{
  position:sticky;
  top:10px;
  z-index:9000;

  width:calc(100% - 24px);
  min-height:66px;
  margin:10px 12px 0;
  padding:8px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border:1px solid color-mix(in srgb,var(--z7-border-2) 72%,transparent);
  border-radius:20px;

  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--z7-surface) 91%,transparent),
      color-mix(in srgb,var(--z7-bg) 91%,transparent))!important;

  box-shadow:
    0 20px 48px rgba(0,0,0,.20),
    inset 0 1px 0 color-mix(in srgb,var(--z7-text) 6%,transparent);

  backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
  isolation:isolate;
}

.z7-global-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(560px 90px at 8% -25%,
      color-mix(in srgb,var(--z7-accent) 10%,transparent),
      transparent 68%);
  opacity:.72;
}

.z7-global-brand{
  min-width:232px;
  min-height:48px;
  padding:5px 12px 5px 5px;

  display:flex;
  align-items:center;
  gap:11px;

  border:1px solid color-mix(in srgb,var(--z7-border) 74%,transparent);
  border-radius:14px;

  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--z7-surface-2) 88%,transparent),
      color-mix(in srgb,var(--z7-surface) 88%,transparent));

  color:var(--z7-text);
  text-decoration:none;

  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--z7-text) 5%,transparent);

  transition:
    transform .18s cubic-bezier(.22,.61,.36,1),
    border-color .18s ease,
    background-color .18s ease;
}

.z7-global-brand:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--z7-accent) 26%,var(--z7-border-2));
}

.z7-global-brand .z7-logo-tile{
  width:38px;
  height:38px;
  flex:0 0 38px;

  display:grid;
  place-items:center;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.11);
  border-radius:11px;

  background:
    radial-gradient(circle at 32% 18%,#202831,#080b0e 72%);

  box-shadow:
    0 9px 22px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.z7-global-brand img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.24));
}

.z7-global-brand strong{
  display:block;
  margin:0;
  color:var(--z7-text);
  font:780 12.5px/1.08 Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  letter-spacing:-.022em;
}

.z7-global-brand small{
  display:block;
  margin-top:5px;
  color:var(--z7-muted);
  font:650 7.4px/1 Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.z7-global-nav{
  min-width:0;
  min-height:48px;
  padding:5px;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;

  border:1px solid color-mix(in srgb,var(--z7-border) 78%,transparent);
  border-radius:14px;

  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--z7-surface-2) 84%,transparent),
      color-mix(in srgb,var(--z7-surface) 84%,transparent));

  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--z7-text) 5%,transparent);
}

.z7-global-nav a,
.z7-global-nav button{
  position:relative;

  min-height:36px;
  padding:0 12px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid transparent;
  border-radius:10px;

  background:transparent;

  color:var(--z7-muted);
  text-decoration:none;
  white-space:nowrap;

  font:720 8.7px/1 Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  letter-spacing:.012em;

  cursor:pointer;

  transition:
    color .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    transform .16s cubic-bezier(.22,.61,.36,1),
    box-shadow .16s ease;
}

.z7-global-nav a:hover,
.z7-global-nav button:hover{
  color:var(--z7-text);
  background:color-mix(in srgb,var(--z7-surface-3) 80%,transparent);
  border-color:color-mix(in srgb,var(--z7-border-2) 62%,transparent);
  transform:translateY(-1px);
}

.z7-global-nav a[aria-current="page"]{
  color:var(--z7-accent);

  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--z7-accent) 13%,var(--z7-surface-2)),
      color-mix(in srgb,var(--z7-accent) 7%,var(--z7-surface)));

  border-color:
    color-mix(in srgb,var(--z7-accent) 38%,var(--z7-border));

  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--z7-text) 5%,transparent),
    0 7px 18px color-mix(in srgb,var(--z7-accent) 8%,transparent);
}

.z7-global-nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:14px;
  height:2px;
  border-radius:999px;
  background:var(--z7-accent);
  transform:translateX(-50%);
}

.z7-global-nav a[data-z7-path="/portal"]{
  margin-left:2px;
  border-color:color-mix(in srgb,var(--z7-accent) 18%,var(--z7-border));
}

.z7-global-nav a[data-z7-path="/portal"]:not([aria-current="page"]){
  color:color-mix(in srgb,var(--z7-text) 78%,var(--z7-accent) 22%);
}

.z7-global-nav .z7-theme-toggle{
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;

  margin-left:2px;
  padding:0;

  border:1px solid color-mix(in srgb,var(--z7-border-2) 80%,transparent);
  border-radius:10px;

  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--z7-surface-3) 92%,transparent),
      color-mix(in srgb,var(--z7-surface-2) 92%,transparent));

  color:var(--z7-text);
  font-size:13px;
}

/* Light mode */
html[data-z7-theme="light"] .z7-global-header{
  border-color:#d6dee6;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.94),
      rgba(245,247,249,.92))!important;

  box-shadow:
    0 18px 42px rgba(24,35,47,.10),
    inset 0 1px 0 rgba(255,255,255,.96);
}

html[data-z7-theme="light"] .z7-global-header::before{
  background:
    radial-gradient(560px 90px at 8% -25%,
      rgba(8,127,91,.08),
      transparent 68%);
}

html[data-z7-theme="light"] .z7-global-brand,
html[data-z7-theme="light"] .z7-global-nav{
  border-color:#d8e0e7;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92),
      rgba(239,243,246,.92));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96);
}

html[data-z7-theme="light"] .z7-global-nav a,
html[data-z7-theme="light"] .z7-global-nav button{
  background:transparent!important;
  border-color:transparent!important;
  color:#61707e!important;
}

html[data-z7-theme="light"] .z7-global-nav a:hover,
html[data-z7-theme="light"] .z7-global-nav button:hover{
  background:#e8edf1!important;
  border-color:#d1dae2!important;
  color:#11171d!important;
}

html[data-z7-theme="light"] .z7-global-nav a[aria-current="page"]{
  background:linear-gradient(180deg,#ffffff,#edf6f2)!important;
  border-color:color-mix(in srgb,var(--z7-accent) 36%,#cbd5df)!important;
  color:#087f5b!important;
  box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(8,127,91,.08)!important;
}

html[data-z7-theme="light"] .z7-global-nav a[data-z7-path="/portal"]:not([aria-current="page"]){
  color:#316a57!important;
  border-color:rgba(8,127,91,.14)!important;
}

html[data-z7-theme="light"] .z7-global-nav .z7-theme-toggle{
  border-color:#ced8e0!important;
  background:linear-gradient(180deg,#ffffff,#eaf0f4)!important;
  color:#11171d!important;
}

/* Flow safety */
body[data-z7-page="flow"] .z7-global-header{
  position:relative;
  top:auto;
}

/* Responsive */
@media(max-width:920px){
  .z7-global-header{
    top:6px;
    width:calc(100% - 16px);
    margin:8px 8px 0;
    padding:7px;

    align-items:stretch;
    flex-direction:column;
    gap:7px;

    border-radius:18px;
  }

  .z7-global-brand{
    width:100%;
    min-width:0;
  }

  .z7-global-nav{
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }

  .z7-global-nav::-webkit-scrollbar{
    display:none;
  }

  .z7-global-nav > *{
    flex:0 0 auto;
  }
}

@media(max-width:560px){
  .z7-global-header{
    width:calc(100% - 12px);
    margin:6px 6px 0;
    padding:6px;
    border-radius:16px;
  }

  .z7-global-brand{
    min-height:44px;
    padding:4px 9px 4px 4px;
    border-radius:12px;
  }

  .z7-global-brand .z7-logo-tile{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .z7-global-brand strong{
    font-size:11.5px;
  }

  .z7-global-brand small{
    display:none;
  }

  .z7-global-nav{
    min-height:44px;
    padding:4px;
    border-radius:12px;
  }

  .z7-global-nav a,
  .z7-global-nav button{
    min-height:34px;
    padding:0 10px;
    font-size:8.2px;
  }

  .z7-global-nav .z7-theme-toggle{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
  }
}
/* ===== END HEADER V12.1 ===== */
.z7-native-actions{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:8px!important;margin:14px 0!important;min-height:38px}
.z7-native-actions .actions{justify-content:flex-end;margin-left:auto}
body[data-z7-page="admin"] .header.z7-native-actions .brand,
body[data-z7-page="product"] .top.z7-native-actions .brand,
body[data-z7-page="providers"] .top.z7-native-actions .brand,
body[data-z7-page="portal"] #appView .top.z7-native-actions .brand{display:none!important}
body[data-z7-page="portal"] .login-wrap{min-height:calc(100vh - 58px)}
body[data-z7-page="portal"] #appView .top.z7-native-actions{justify-content:flex-end!important}
body[data-z7-page="flow"] .app{height:100vh}
body[data-z7-page="flow"] .z7-global-header{position:relative;min-height:58px}


body[data-z7-page="portal"] .z7-global-nav [data-z7-admin-nav]{display:none}
body[data-z7-page="portal"].z7-super-admin .z7-global-nav [data-z7-admin-nav]{display:inline-flex}
/* Light theme: remove the old dark islands without flattening the visual hierarchy. */
html[data-z7-theme="light"] body :is(.card,.report,.workspace-card,.table-wrap,.dialog,.login,.detail,.lane,.node,.drawer){
  background:var(--z7-surface)!important;color:var(--z7-text)!important;border-color:var(--z7-border)!important;box-shadow:var(--z7-shadow)
}
html[data-z7-theme="light"] body :is(.hero,.hero>div){
  background:linear-gradient(180deg,#ffffff,#f3f6f8)!important;color:var(--z7-text)!important;border-color:var(--z7-border)!important
}
html[data-z7-theme="light"] body :is(th){background:var(--z7-surface-2)!important;color:var(--z7-muted)!important;border-color:var(--z7-border)!important}
html[data-z7-theme="light"] body :is(td,tr,table){border-color:var(--z7-border)!important;color:var(--z7-text)!important}
html[data-z7-theme="light"] body :is(input,select,textarea,button:not(.primary),.tab:not(.active)){
  background:var(--z7-surface-2)!important;color:var(--z7-text)!important;border-color:var(--z7-border)!important
}
html[data-z7-theme="light"] body :is(.primary,.tab.active){background:#12171c!important;color:#fff!important;border-color:#12171c!important}
html[data-z7-theme="light"] body :is(.logo,.mark){background:#0b0f12!important;border-color:#27313a!important;color:#fff!important}
html[data-z7-theme="light"] body :is(.muted,.purpose,.brand p,.brand span,.hero p,.stat span,.row,.state,.lane p,.lane h3){color:var(--z7-muted)!important}
html[data-z7-theme="light"] body .health{background:rgba(255,255,255,.72)!important;border-color:var(--z7-border)!important;color:var(--z7-text)!important}

/* Flow-specific contrast in Light mode. The graph remains structurally untouched. */
html[data-z7-theme="light"] body[data-z7-page="flow"] .viewport{
  background-color:var(--z7-bg)!important;
  background-image:radial-gradient(circle at 1px 1px,#cbd5df 1px,transparent 0)!important
}
html[data-z7-theme="light"] body[data-z7-page="flow"] .lane{background:rgba(255,255,255,.82)!important}
html[data-z7-theme="light"] body[data-z7-page="flow"] .node{background:linear-gradient(180deg,#ffffff,#eef2f5)!important;box-shadow:0 10px 24px rgba(26,38,50,.10)!important}
html[data-z7-theme="light"] body[data-z7-page="flow"] .edge{stroke:#8493a2!important;opacity:.95}
html[data-z7-theme="light"] body[data-z7-page="flow"] .edge.retry{stroke:var(--purple)!important}
html[data-z7-theme="light"] body[data-z7-page="flow"] .minimap{background:rgba(255,255,255,.94)!important;border-color:var(--z7-border)!important}
html[data-z7-theme="light"] body[data-z7-page="flow"] .drawer{background:#fff!important}

/* No old floating shortcuts. */
a[data-phase8-product-link],a[data-phase9-portal-link]{display:none!important}

/* Native, same-origin cross-document cinematic transitions. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:z7-page-out .16s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:z7-page-in .24s cubic-bezier(.22,.61,.36,1) both}
@keyframes z7-page-out{to{opacity:0;filter:blur(4px);transform:scale(.998)}}
@keyframes z7-page-in{from{opacity:0;filter:blur(5px);transform:scale(1.002)}to{opacity:1;filter:blur(0);transform:scale(1)}}
html.z7-theme-transition::view-transition-old(root){animation:z7-theme-old .13s ease both}
html.z7-theme-transition::view-transition-new(root){animation:z7-theme-new .20s ease both}
@keyframes z7-theme-old{to{opacity:.15;filter:blur(3px)}}
@keyframes z7-theme-new{from{opacity:.12;filter:blur(3px)}to{opacity:1;filter:blur(0)}}

@media(max-width:920px){
  .z7-global-header{align-items:flex-start;flex-direction:column;padding:9px 10px}
  .z7-global-nav{width:100%;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .z7-global-nav::-webkit-scrollbar{display:none}.z7-global-nav>*{flex:0 0 auto}
  .z7-native-actions{padding:0 10px;overflow-x:auto;justify-content:flex-start!important}
}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms!important}}