:root{
  --space-top:#030b2a; --space-mid:#071744; --space-light:#1b3a82;
  --accent1:#ff9a6c; --accent2:#4dddbb; --accent3:#4db0ff; --accent4:#bf7bff;
  --page-bg:#f5f7ff; --card-border:#e0e5ff; --text-main:#151a33; --text-sub:#54608f;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--page-bg);color:var(--text-main)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1rem;border-bottom:1px solid #e9edff;background:#fff;position:sticky;top:0;z-index:5}
.brand{font-weight:800;letter-spacing:.06em;color:#0b1b4a}
.navlinks{display:flex;gap:.75rem;flex-wrap:wrap}
.navlinks a{font-size:.9rem;color:#2e3a6d;text-decoration:none;padding:.25rem .4rem;border-radius:10px}
.navlinks a:hover{background:#f2f6ff}
.hero{background:radial-gradient(circle at 10% 0%, rgba(255,255,255,0.35) 0, transparent 35%),radial-gradient(circle at 80% 10%, rgba(117,221,255,0.5) 0, transparent 45%),linear-gradient(135deg,var(--space-top),var(--space-mid));color:#f7fbff;padding:22px 0 26px}
.hero-inner{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;padding:4px 10px;border-radius:999px;background:rgba(2,8,32,.8);border:1px solid rgba(111,242,193,.6);color:#c6ffe7;margin-bottom:8px}
.dot{width:7px;height:7px;border-radius:999px;background:radial-gradient(circle,#6ef2c1 0,#27c1ff 50%,transparent 100%)}
.hero h1{margin:0 0 6px;font-size:26px}
.hero p{margin:0;color:#dbe5ff;max-width:560px;font-size:13px}
.orbit{position:relative;width:190px;height:90px}
.ring{position:absolute;inset:14px;border-radius:999px;border:1px dashed rgba(130,206,255,.6);transform:rotate(-16deg)}
.planet{position:absolute;right:8px;top:20px;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 25% 20%,#fff 0,#4db0ff 35%,#02102c 100%);box-shadow:0 0 18px rgba(77,176,255,.9)}
.chip{position:absolute;left:8px;bottom:10px;width:22px;height:22px;border-radius:10px;background:linear-gradient(135deg,#ffcc66,#ff7b7b);box-shadow:0 0 15px rgba(255,160,110,.9)}
.page{max-width:1120px;margin:0 auto;padding:20px 20px 28px}
.grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.1fr);gap:18px}
.card{background:#fff;border-radius:14px;border:1px solid var(--card-border);box-shadow:0 10px 24px rgba(14,22,62,.08);padding:14px 16px 16px}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:10px}
.card-title{font-size:14px;font-weight:700}
.card-sub{font-size:12px;color:var(--text-sub);margin-top:2px}
.pill{font-size:11px;padding:3px 8px;border-radius:999px;background:#f2f6ff;color:#4865ff;border:1px solid #d3ddff;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{display:flex;gap:10px;align-items:flex-start;padding:10px 10px;border-radius:12px;border:1px solid #eef0ff;text-decoration:none;color:inherit;background:#fff;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.tile:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(46,76,156,.15);border-color:#d5ddff}
.ic{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px}
.i-e{background:linear-gradient(135deg,#ff7a7a,#ffb56b)}
.i-b{background:linear-gradient(135deg,#18c08c,#87f7c6)}
.i-fx{background:linear-gradient(135deg,#3c88ff,#76e0ff)}
.i-c{background:linear-gradient(135deg,#ff8b3d,#ffd36b)}
.i-pc{background:linear-gradient(135deg,#7c4dff,#c79cff)}
.i-ca{background:linear-gradient(135deg,#00bcd4,#7ce7ff)}
.i-s{background:linear-gradient(135deg,#ffb84d,#ffe28a)}
.t{font-weight:700;font-size:13px;margin-bottom:2px}
.s{font-size:12px;color:var(--text-sub)}
.form label{display:block;font-size:12px;color:var(--text-sub);margin:10px 0 4px}
.form input,.form select{width:100%;padding:10px;border-radius:10px;border:1px solid #dfe6ff;background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form button{margin-top:12px;width:100%;padding:10px;border-radius:999px;border:none;background:#2f5bff;color:#fff;font-weight:700;cursor:pointer}
.form button:hover{filter:brightness(1.03)}
.hint{font-size:11px;color:var(--text-sub);margin-top:8px}
.out{margin-top:10px;background:#0b1028;color:#dbe5ff;padding:10px;border-radius:12px;overflow:auto;min-height:130px}
.module h1{margin-top:6px}
.callouts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.callout{background:#fff;border:1px solid #e7ecff;border-radius:14px;padding:12px;box-shadow:0 8px 18px rgba(14,22,62,.06)}
.callout-title{font-weight:800;margin-bottom:6px;color:#0b1b4a}
code{background:#f2f6ff;padding:2px 6px;border-radius:8px}


/* UI2 responsive overrides */
/* Better for ultrawide monitors */
.page {
  width: min(92vw, 1400px);
  margin: 0 auto;
  padding: 26px 18px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.navlinks {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.kpi {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== TTSSB_RELATIVE_UI_GOVERNANCE_V1 BEGIN ===== */
/* TTSSB Corp Copyright (c) 2026 */
/* Production-class relative/virtual layout controls. No static fake data. */

:root {
  --tt-fin-page-w: min(96vw, 112rem);
  --tt-fin-freeze-w: 78rem;
  --tt-fin-gap: clamp(0.55rem, 0.85vw, 1.1rem);
  --tt-fin-gap-sm: clamp(0.35rem, 0.55vw, 0.75rem);
  --tt-fin-card-pad: clamp(0.75rem, 1vw, 1.35rem);
  --tt-fin-radius: clamp(0.8rem, 1vw, 1.35rem);
  --tt-fin-left-rail-w: clamp(12rem, 18vw, 19rem);
  --tt-fin-main-w: minmax(0, 1fr);
  --tt-fin-right-rail-w: clamp(14rem, 22vw, 24rem);
  --tt-fin-top-offset: clamp(4.75rem, 8vh, 6.5rem);
}

body {
  min-width: 0;
  overflow-x: hidden;
}

.ttssb-page,
.ttssb-shell,
.ttssb-layout,
.ttssb-main,
.ttssb-dashboard,
.ttssb-content {
  width: var(--tt-fin-page-w);
  max-width: var(--tt-fin-page-w);
  margin-inline: auto;
  box-sizing: border-box;
}

.ttssb-grid,
.ttssb-dashboard-grid,
.ttssb-module-grid,
.ttssb-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--tt-fin-gap);
  align-items: stretch;
}

.ttssb-card,
.card,
.panel,
.module-card,
.metric-card {
  box-sizing: border-box;
  border-radius: var(--tt-fin-radius);
  padding: var(--tt-fin-card-pad);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ttssb-auth-controls {
  position: fixed;
  inset-block-start: var(--tt-fin-top-offset);
  inset-inline-end: max(2vw, var(--tt-fin-gap));
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-fin-gap-sm);
  max-width: min(92vw, 24rem);
}

.ttssb-auth-controls button,
.ttssb-auth-controls a {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

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

@media (max-width: 78rem) {
  .ttssb-page,
  .ttssb-shell,
  .ttssb-layout,
  .ttssb-main,
  .ttssb-dashboard,
  .ttssb-content {
    width: min(96vw, 100%);
  }

  .ttssb-auth-controls {
    position: sticky;
    inset-block-start: var(--tt-fin-gap);
    justify-content: flex-end;
    margin-inline: auto;
    width: min(96vw, 100%);
  }
}

@media (max-width: 48rem) {
  .ttssb-grid,
  .ttssb-dashboard-grid,
  .ttssb-module-grid,
  .ttssb-card-grid {
    grid-template-columns: 1fr;
  }

  .ttssb-auth-controls {
    justify-content: center;
  }
}
/* ===== TTSSB_RELATIVE_UI_GOVERNANCE_V1 END ===== */

/* ===== TTSSB_SAFE_HEADER_AUTH_NO_OVERLAP_V1 BEGIN ===== */
/* TTSSB Corp Copyright (c) 2026 */
/* Minimal recovery-safe fix only: keep auth controls in header top-right without changing DOM grid. */

.ttssb-auth-controls {
  position: fixed !important;
  top: clamp(0.45rem, 1vh, 0.75rem) !important;
  right: clamp(0.8rem, 1.6vw, 1.5rem) !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(0.35rem, 0.55vw, 0.65rem) !important;
  width: auto !important;
  max-width: min(22rem, 32vw) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ttssb-auth-controls button,
.ttssb-auth-controls a {
  white-space: nowrap !important;
  line-height: 1 !important;
}

@media (max-width: 64rem) {
  .ttssb-auth-controls {
    position: static !important;
    justify-content: flex-end !important;
    margin: clamp(0.35rem, 0.8vw, 0.75rem) clamp(0.75rem, 1.5vw, 1rem) 0 auto !important;
    max-width: 100% !important;
  }
}
/* ===== TTSSB_SAFE_HEADER_AUTH_NO_OVERLAP_V1 END ===== */

/* ===== TTSSB_AUTH_HEADER_FLOW_FIX_V1 BEGIN ===== */
/* TTSSB Corp Copyright (c) 2026 */
/* Minimal production fix: auth belongs to header flow, never fixed overlay. */

body > .ttssb-auth-controls {
  position: absolute !important;
  top: clamp(0.45rem, 1vh, 0.75rem) !important;
  right: clamp(0.8rem, 1.5vw, 1.5rem) !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.35rem, 0.55vw, 0.65rem) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body > .ttssb-auth-controls button,
body > .ttssb-auth-controls a {
  border-radius: 999rem !important;
  padding: clamp(0.42rem, 0.65vw, 0.62rem) clamp(0.78rem, 1.05vw, 1rem) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.navlinks {
  padding-right: clamp(11rem, 16vw, 15rem) !important;
  box-sizing: border-box !important;
}

/* keep content close to banner */
.page {
  margin-top: clamp(0.8rem, 1.4vw, 1.5rem) !important;
}

@media (max-width: 72rem) {
  body > .ttssb-auth-controls {
    position: static !important;
    justify-content: flex-end !important;
    margin: clamp(0.35rem, 0.8vw, 0.75rem) clamp(0.8rem, 1.5vw, 1.2rem) 0 auto !important;
  }

  .navlinks {
    padding-right: 0 !important;
    overflow-x: auto !important;
  }
}
/* ===== TTSSB_AUTH_HEADER_FLOW_FIX_V1 END ===== */

/* ===== TTSSB_FX_HYPOTHESIS_WORKSPACE_V1 BEGIN ===== */
/* TTSSB Corp Copyright (c) 2026 */
/* Production-class UI. API-backed only. No fake FX values. */

.tt-fx-page {
  width: min(96vw, 104rem);
  margin-inline: auto;
}

.tt-fx-grid {
  display: grid;
  grid-template-columns: minmax(min(100%, 24rem), 0.85fr) minmax(min(100%, 36rem), 1.15fr);
  gap: clamp(0.9rem, 1.4vw, 1.6rem);
  align-items: start;
}

.tt-fx-card {
  min-width: 0;
}

.tt-fx-label,
.tt-fx-slider-row label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  margin-top: 0.9rem;
}

.tt-fx-slider-row input,
.tt-fx-card select {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.4rem;
}

.tt-fx-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(0.65rem, 1vw, 1rem);
  margin-top: 1rem;
}

.tt-fx-kpi {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1rem;
  padding: 0.8rem;
  background: rgba(255,255,255,0.06);
}

.tt-fx-kpi span {
  display: block;
  font-size: 0.78rem;
  opacity: 0.72;
}

.tt-fx-kpi strong {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(1rem, 1.3vw, 1.35rem);
}

.tt-fx-json {
  margin-top: 1rem;
  max-height: 22rem;
  overflow: auto;
  border-radius: 1rem;
  padding: 1rem;
  background: #08111f;
  color: #d9e6ff;
}

@media (max-width: 72rem) {
  .tt-fx-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== TTSSB_FX_HYPOTHESIS_WORKSPACE_V1 END ===== */