:root{
color-scheme:dark;
--bg:#05070b;
--panel:#0b1018;
--panel2:#101824;
--line:#223044;
--text:#f2f6fb;
--muted:#8fa3b8;
--cyan:#70e6ff;
--violet:#ad8cff;
--gold:#e4c56a
}

*{box-sizing:border-box}

html,body{
margin:0;
min-height:100%;
background:
radial-gradient(circle at 10% 0%,rgba(112,230,255,.09),transparent 30%),
radial-gradient(circle at 90% 10%,rgba(173,140,255,.08),transparent 32%),
var(--bg);
color:var(--text);
font-family:Inter,system-ui,sans-serif
}

body{overflow-x:hidden}

a{color:inherit;text-decoration:none}

button,select,textarea{font:inherit}

.top{
height:70px;
padding:12px clamp(15px,4vw,48px);
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
position:sticky;
top:0;
z-index:50;
background:rgba(5,7,11,.9);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--line)
}

.brand{
display:flex;
align-items:center;
gap:11px
}

.star{
font-size:29px;
color:var(--gold)
}

.brand strong{display:block;letter-spacing:.06em}
.brand small{display:block;margin-top:3px}

.online{
display:flex;
align-items:center;
gap:8px;
font-size:11px;
letter-spacing:.12em
}

.online span{
width:8px;
height:8px;
border-radius:50%;
background:var(--cyan);
box-shadow:0 0 14px var(--cyan)
}

.menu{
display:none;
background:var(--panel);
border:1px solid var(--line);
color:var(--text);
border-radius:8px;
padding:8px 11px
}

nav{
padding:8px clamp(15px,4vw,48px);
display:flex;
gap:4px;
overflow-x:auto;
background:#070b11;
border-bottom:1px solid var(--line);
scrollbar-width:none
}

nav::-webkit-scrollbar{display:none}

nav a{
white-space:nowrap;
padding:9px 11px;
font-size:10px;
letter-spacing:.08em;
color:var(--muted);
border-radius:7px
}

nav a:hover{
background:var(--panel2);
color:var(--text)
}

main{
width:min(1500px,100%);
margin:auto
}

.hero{
padding:65px clamp(18px,6vw,85px) 35px
}

.eyebrow{
color:var(--cyan);
font-size:11px;
letter-spacing:.18em
}

.hero h1{
max-width:900px;
margin:12px 0;
font-size:clamp(38px,7vw,82px);
line-height:.96;
letter-spacing:-.045em
}

.hero h1 em{
display:block;
font-style:normal;
color:var(--muted)
}

.lead{
max-width:760px;
color:var(--muted);
line-height:1.7
}

.states{
margin-top:30px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:9px
}

.states article,
.sidecard,
.event,
.feature,
.raw{
background:
linear-gradient(145deg,rgba(255,255,255,.03),transparent 45%),
var(--panel);
border:1px solid var(--line);
border-radius:13px
}

.states article{padding:15px}

small{
color:var(--muted);
font-size:10px;
letter-spacing:.11em
}

.states strong{
display:block;
margin-top:7px;
color:var(--cyan)
}

.shell{
display:grid;
grid-template-columns:240px minmax(0,1fr);
gap:17px;
padding:18px clamp(15px,4vw,48px) 65px
}

aside{
display:flex;
flex-direction:column;
gap:10px
}

.sidecard{padding:16px}

.sidecard p{
color:var(--muted);
font-size:12px;
line-height:1.45
}

.workspace{min-width:0}

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

.workspace-head h2{
margin:5px 0 0;
font-size:clamp(25px,4vw,40px)
}

.controls{display:flex;gap:7px}

select,button,textarea{
border:1px solid var(--line);
background:var(--panel2);
color:var(--text);
border-radius:8px
}

select,button{
min-height:41px;
padding:0 12px
}

button{cursor:pointer}

.notice{
padding:11px 13px;
margin-bottom:11px;
border:1px solid var(--line);
border-radius:8px;
background:#080d14;
color:var(--muted);
font-size:11px
}

.events{display:grid;gap:11px}

.event{padding:17px}

.event>header{
display:flex;
justify-content:space-between;
gap:12px
}

.event h3{margin:6px 0}

.decision{
height:max-content;
padding:6px 9px;
border:1px solid var(--line);
border-radius:7px;
color:var(--gold);
font-size:11px
}

.metrics{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:7px;
margin-top:14px
}

.metrics div{
padding:9px;
min-width:0;
background:#080d14;
border:1px solid #182332;
border-radius:7px
}

.metrics strong{
display:block;
margin-top:5px;
font-size:12px;
overflow-wrap:anywhere
}

.event>footer{
margin-top:11px;
color:var(--muted);
font-size:10px
}

.empty,.feature,.raw{
padding:26px
}

.empty{
border:1px dashed var(--line);
border-radius:13px;
text-align:center;
color:var(--muted)
}

.empty strong{color:var(--text)}
.empty b{color:var(--gold)}

.feature p{
color:var(--muted);
line-height:1.7
}

textarea{
width:100%;
min-height:170px;
padding:12px;
margin:13px 0;
resize:vertical
}

pre{
white-space:pre-wrap;
overflow-wrap:anywhere;
color:var(--muted)
}

.tiers{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:9px
}

.tiers article{
padding:18px;
background:var(--panel);
border:1px solid var(--line);
border-radius:11px
}

.hold{color:var(--gold)}

body>footer{
padding:20px clamp(15px,4vw,48px);
display:flex;
justify-content:space-between;
gap:10px;
border-top:1px solid var(--line);
color:var(--muted);
font-size:11px
}

@media(max-width:900px){
.states{grid-template-columns:repeat(2,1fr)}
.shell{grid-template-columns:1fr}
.metrics{grid-template-columns:repeat(3,1fr)}
.tiers{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
.top{height:64px}
.online{display:none}
.menu{display:block}

nav{
display:none;
position:fixed;
top:64px;
left:0;
right:0;
bottom:0;
z-index:40;
padding:14px;
flex-direction:column;
overflow-y:auto;
background:rgba(5,7,11,.98)
}

nav.open{display:flex}

nav a{
padding:14px;
font-size:12px;
border-bottom:1px solid var(--line)
}

.hero{padding-top:42px}
.hero h1{font-size:43px}

.workspace-head{display:block}

.controls{
margin-top:12px;
width:100%
}

.controls>*{
flex:1;
min-width:0
}

.metrics{grid-template-columns:1fr 1fr}
.tiers{grid-template-columns:1fr}

body>footer{display:block}
body>footer span{display:block;margin-top:6px}
}

@media(max-width:390px){
.brand strong{font-size:12px}
.brand small{font-size:8px}
.hero h1{font-size:37px}
.metrics{grid-template-columns:1fr}
}

/* BLACKSTAR Ω∞⁴ — ACCESSIBILITY / RESILIENCE */

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

button,
a,
input,
select,
textarea {
  min-height: 44px;
}

button,
a {
  touch-action: manipulation;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.status-message,
[role="status"],
[role="alert"] {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }

  main,
  section,
  article,
  .panel,
  .card {
    min-width: 0;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   BLACKSTAR Ω∞⁴ MASTER BRAND AUTHORITY
   ============================================================ */

.blackstar-master-mark {
  display: block;
  width: clamp(58px, 8vw, 86px);
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 0 8px rgba(0, 202, 255, .30))
    drop-shadow(0 0 16px rgba(255, 190, 48, .16));
}


.blackstar-brand-bootstrap {
  position: static !important;
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
}


header .blackstar-master-mark,
.brand .blackstar-master-mark,
.brand-lockup .blackstar-master-mark {
  position: static;
}

:root {
  --blackstar-gold: #f4c653;
  --blackstar-gold-hi: #ffe29a;
  --blackstar-cyan: #54dcff;
  --blackstar-blue: #299cff;
  --blackstar-void: #020711;
  --blackstar-navy: #071120;
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(33,116,187,.18), transparent 33rem),
    radial-gradient(circle at 100% 15%, rgba(78,49,184,.10), transparent 28rem),
    var(--blackstar-void);
}

.blackstar-brand-title,
.brand-title,
.logo-text {
  letter-spacing: .08em;
}

.blackstar-brand-title strong,
.brand-title strong {
  color: var(--blackstar-gold-hi);
}

.market-status[data-market-state="DEGRADED"],
.status-degraded {
  color: #ffd36c;
}

.market-status[data-market-state="FRESH"],
.status-fresh {
  color: #63f4a1;
}

/* Mobile navigation must never expose clipped labels. */
@media (max-width: 768px) {
  nav,
  .nav-links,
  .omega-nav {
    max-width: 100%;
  }

  .nav-links,
  .omega-nav-links {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .nav-links::-webkit-scrollbar,
  .omega-nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a,
  .omega-nav-links a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .blackstar-master-mark {
    width: 62px;
  }
}

/* Never allow global viewport overflow from premium panels. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

main,
section,
article,
header,
footer,
nav,
.card,
.panel {
  box-sizing: border-box;
  max-width: 100%;
}



/* BLACKSTAR FINAL HEADER LOCKUP */

.blackstar-brand-bootstrap {
  position: static !important;
}

.blackstar-master-mark {
  position: static !important;
  flex: 0 0 auto;
}

header,
.brand-lockup,
.brand,
.site-header {
  overflow: visible;
}

@media (max-width: 768px) {
  .blackstar-master-mark {
    width: 74px;
    min-width: 74px;
    max-width: 74px;
  }

  .brand-lockup,
  .brand,
  .site-brand,
  .header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .brand-lockup > *,
  .brand > *,
  .site-brand > *,
  .header-brand > * {
    min-width: 0;
  }

  .brand-title,
  .blackstar-brand-title,
  .logo-text {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

.market-degraded,
[data-market-state="DEGRADED"] {
  color: #ffd36c;
}

.market-stale {
  color: #ffb45c;
}

.market-fresh {
  color: #6df3a3;
}

.market-unknown {
  color: #8ea0b8;
}


/* ============================================================
   BLACKSTAR Ω∞⁴ MASTER BRAND LOCKUP — FINAL ADAPTIVE BINDING
   ============================================================ */

.blackstar-header-lockup,
.blackstar-protected-brandbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  box-sizing: border-box;
}

.blackstar-header-lockup {
  flex: 1 1 auto;
}

.blackstar-protected-brandbar {
  width: 100%;
  position: static !important;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(91, 157, 222, .20);
  background:
    linear-gradient(
      90deg,
      rgba(5, 14, 25, .98),
      rgba(4, 8, 18, .98)
    );
}

.blackstar-header-logo {
  display: block;
  width: 72px;
  height: 72px;
  min-width: 72px;
  max-width: 72px;
  object-fit: contain;
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  flex: 0 0 72px;
  z-index: auto !important;
  filter:
    drop-shadow(0 0 8px rgba(73, 205, 255, .28))
    drop-shadow(0 0 14px rgba(246, 194, 74, .17));
}

.blackstar-header-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: visible;
}

.blackstar-header-title {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  color: #f5f7fb;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: .055em;
  white-space: nowrap;
}

.blackstar-header-title span {
  color: #5ddcff;
}

.blackstar-header-subtitle {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  color: #8795aa;
  font-size: .64rem;
  line-height: 1.2;
  letter-spacing: .17em;
  white-space: nowrap;
}

/*
 * Old emergency/floating logos must never render.
 */
.blackstar-brand-bootstrap,
body > .blackstar-master-mark {
  display: none !important;
  position: static !important;
}

/*
 * If an older generic brand mark exists as a direct header child,
 * hide only the mark itself — not navigation or menu controls.
 */
header > .brand-mark,
header > .brand-icon,
header > .logo-icon {
  display: none !important;
}

@media (max-width: 640px) {
  .blackstar-header-lockup,
  .blackstar-protected-brandbar {
    gap: 8px;
  }

  .blackstar-header-logo {
    width: 58px;
    height: 58px;
    min-width: 58px;
    max-width: 58px;
    flex-basis: 58px;
  }

  .blackstar-header-title {
    font-size: .88rem;
    letter-spacing: .035em;
  }

  .blackstar-header-subtitle {
    font-size: .50rem;
    letter-spacing: .11em;
  }

  .blackstar-protected-brandbar {
    padding: 9px 12px;
  }
}

@media (max-width: 390px) {
  .blackstar-header-logo {
    width: 52px;
    height: 52px;
    min-width: 52px;
    max-width: 52px;
    flex-basis: 52px;
  }

  .blackstar-header-title {
    font-size: .79rem;
  }

  .blackstar-header-subtitle {
    font-size: .46rem;
    letter-spacing: .09em;
  }
}

/* ============================================================
   BLACKSTAR Ω∞⁴ — FINAL PHONE GEOMETRY AUTHORITY
   ============================================================ */

.blackstar-header-lockup {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;

  position: static !important;
  inset: auto !important;

  width: auto !important;
  max-width: calc(100% - 72px) !important;

  margin: 0 !important;
  padding: 8px 0 8px 14px !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

.blackstar-header-logo {
  display: block !important;

  position: static !important;
  inset: auto !important;
  transform: none !important;

  grid-column: 1 !important;

  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  z-index: auto !important;
}

.blackstar-header-copy {
  grid-column: 2 !important;

  position: static !important;
  inset: auto !important;
  transform: none !important;

  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

.blackstar-header-title {
  display: block !important;

  position: static !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(14px, 4vw, 21px) !important;
  line-height: 1.08 !important;
  letter-spacing: .02em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.blackstar-header-subtitle {
  display: block !important;

  position: static !important;

  margin: 5px 0 0 !important;
  padding: 0 !important;

  font-size: 9px !important;
  line-height: 1.15 !important;
  letter-spacing: .10em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
}

.blackstar-brand-bootstrap,
body > .blackstar-master-mark {
  display: none !important;
  position: static !important;
}

/* Nothing carrying the master logo may float over body content. */
main .blackstar-header-logo,
.hero .blackstar-header-logo,
.shell .blackstar-header-logo,
aside .blackstar-header-logo {
  display: none !important;
}

@media (max-width: 430px) {

  .blackstar-header-lockup {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    max-width: calc(100% - 64px) !important;
    padding-left: 10px !important;
  }

  .blackstar-header-logo {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  .blackstar-header-title {
    font-size: clamp(13px, 3.8vw, 17px) !important;
  }

  .blackstar-header-subtitle {
    display: none !important;
  }
}


/* ============================================================
   BLACKSTAR Ω∞⁴ — PAGE-SPECIFIC REAL DATA AUTHORITY
   ============================================================ */

.blackstar-page-authority {
  width: min(100% - 32px, 1200px);
  margin: 30px auto 72px;
}

.authority-heading {
  padding: 26px;
  border:
    1px solid rgba(100,151,202,.22);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(9,18,31,.98),
      rgba(4,10,20,.98)
    );
}

.authority-heading small,
.authority-stat-grid small,
.authority-grid small {
  color: #8392aa;
  letter-spacing: .13em;
}

.authority-heading h2 {
  margin: 10px 0;
  font-size: clamp(1.7rem,5vw,3rem);
}

.authority-heading p {
  color: #9ba9bc;
  line-height: 1.6;
}

.authority-rows {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.authority-row {
  padding: 22px;
  border:
    1px solid rgba(103,150,199,.20);
  border-radius: 22px;
  background: rgba(6,14,25,.96);
}

.authority-event {
  font-size: 1.12rem;
  font-weight: 900;
  margin-bottom: 18px;
}

.authority-grid,
.authority-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap: 12px;
}

.authority-grid > div,
.authority-stat-grid > div {
  padding: 15px;
  border:
    1px solid rgba(101,145,189,.17);
  border-radius: 14px;
  background: rgba(2,8,17,.78);
}

.authority-grid strong,
.authority-stat-grid strong {
  display: block;
  margin-top: 6px;
}

.authority-json {
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  overflow: auto;
  background: rgba(2,8,17,.78);
}

.authority-json pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.truth-warning {
  margin-top: 18px;
  padding: 16px;
  border:
    1px solid rgba(255,202,87,.25);
  border-radius: 14px;
  color: #ffd36c;
}

.blackstar-page-authority .good {
  color: #6df3a3;
}

.blackstar-page-authority .warn {
  color: #ffd36c;
}

.blackstar-page-authority .unknown {
  color: #9aa8bc;
}

@media(max-width:640px) {
  .blackstar-page-authority {
    width: calc(100% - 28px);
  }

  .authority-grid,
  .authority-stat-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


/* BLACKSTAR_CUSTOMER_MOBILE_CONVERGENCE */

.bs-customer-command {
    width: min(100%, 1120px);
    margin: 30px auto 64px;
    padding: 0 22px;
    box-sizing: border-box;
}

.bs-customer-command-head {
    position: static !important;
    display: block;
    margin: 0 0 22px;
    padding: 0;
    transform: none !important;
}

.bs-customer-command-head h2 {
    position: static !important;
    margin: 8px 0 10px;
    font-size: clamp(30px, 6vw, 48px);
    line-height: 1.05;
    transform: none !important;
}

.bs-customer-command-head p {
    margin: 0;
    max-width: 720px;
    line-height: 1.55;
    opacity: .78;
}

.bs-kicker {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}

.bs-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bs-command-card {
    position: static !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 112px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: rgba(255,255,255,.035);
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
    transform: none !important;
}

.bs-command-card strong {
    font-size: 17px;
}

.bs-command-card span {
    font-size: 14px;
    line-height: 1.4;
    opacity: .68;
}

.bs-truth-panel {
    position: static !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    transform: none !important;
}

.bs-customer-logout {
    margin-top: 20px;
}

.bs-customer-logout button {
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    color: inherit;
    font-weight: 900;
}

/*
  Fix the protected-page hero collision visible on
  OWNER and FAMILY_LEGACY phone screenshots.
*/
@media (max-width: 640px) {

    .bs-customer-command {
        padding-left: 16px;
        padding-right: 16px;
        margin-top: 22px;
    }

    .bs-customer-grid {
        grid-template-columns: 1fr;
    }

    .bs-command-card {
        min-height: 94px;
        padding: 18px;
    }

    .bs-truth-panel {
        flex-direction: column;
    }

    /*
      Protected template headings/cards must remain
      in normal document flow on narrow screens.
    */
    body main,
    body main section,
    body main article,
    body main header {
        max-width: 100%;
        box-sizing: border-box;
    }

    body main h1,
    body main h2,
    body main h3 {
        position: static !important;
        transform: none !important;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    body main h1 {
        line-height: 1.03;
        margin-bottom: 14px;
    }
}