:root {
  --bg: #0f1012;
  --bg-elevated: #17191d;
  --panel: #1d2026;
  --text: #f3f0ec;
  --muted: #b9b4ab;
  --border: #2f343d;
  --ember: #ff7a1f;
  --flame: #ff4d2e;
  --accent-gradient: linear-gradient(135deg, #ff922b 0%, #ff5a36 55%, #d4373a 100%);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top right, rgba(255, 122, 31, 0.08), transparent 40%), var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 12px;
  background: var(--text);
  color: #111;
  border-radius: 8px;
  padding: 0.7rem 1rem;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(15, 16, 18, 0.86);
  backdrop-filter: blur(14px);
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.brand-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 20px rgba(255, 122, 31, 0.6);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 7rem 0 5rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  align-items: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

.eyebrow {
  color: #ffb17d;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-copy,
.section-copy {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 60ch;
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 12px;
  padding: 0.85rem 1.2rem;
  font-weight: 700;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn-primary {
  color: #120f0d;
  background: var(--accent-gradient);
  box-shadow: 0 8px 24px rgba(255, 95, 41, 0.35);
}

.btn-secondary {
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
}

.hero-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.6rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  box-shadow: var(--shadow);
}

.hero-panel h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

.hero-panel ul {
  margin: 0;
  padding-left: 1rem;
  color: var(--muted);
  line-height: 1.8;
}

.hero-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(10px);
  animation: pulse 8s ease-in-out infinite;
}

.hero-glow--one {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 94, 41, 0.26), transparent 70%);
  top: -110px;
  right: -80px;
}

.hero-glow--two {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255, 154, 40, 0.22), transparent 70%);
  bottom: -100px;
  left: -50px;
  animation-delay: 2s;
}

.section {
  padding: 4.5rem 0;
}

.section-title {
  font-size: clamp(1.5rem, 3.1vw, 2.4rem);
  margin: 0.2rem 0 1.1rem;
  letter-spacing: -0.02em;
}

.trust {
  padding: 2rem 0;
  border-block: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.01);
}

.trust-title {
  text-align: center;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.trust-grid span {
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  padding: 0.9rem 0.6rem;
  color: #ddd4c8;
  font-size: 0.86rem;
}

.card-grid,
.solution-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.integrations {
  position: relative;
}

.integrations::before {
  content: "";
  position: absolute;
  inset: 10% 0 auto;
  margin: 0 auto;
  width: min(1120px, 92vw);
  height: 260px;
  background: radial-gradient(circle at center, rgba(255, 98, 44, 0.18), transparent 72%);
  pointer-events: none;
}

.integrations-copy {
  margin-bottom: 1.4rem;
}

.integration-rail {
  display: grid;
  grid-template-columns: repeat(8, minmax(220px, 1fr));
  gap: 1rem;
  overflow-x: auto;
  padding: 0.4rem 0.2rem 0.8rem;
  scroll-snap-type: x mandatory;
}

.integration-card {
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 1.1rem;
  min-height: 188px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.integration-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.02rem;
}

.integration-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.integration-category {
  display: inline-flex;
  border: 1px solid rgba(255, 122, 31, 0.55);
  border-radius: 999px;
  padding: 0.25rem 0.62rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffd4b1;
  margin-bottom: 0.8rem;
}

.card,
.solution {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-radius: 16px;
  padding: 1.3rem;
  min-height: 190px;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.card:hover,
.solution:hover {
  border-color: rgba(255, 143, 53, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.card h3,
.solution h3 {
  margin: 0 0 0.65rem;
  font-size: 1.03rem;
}

.card p,
.solution p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.split-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
}

.point-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.point-list li {
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: #ddd4ca;
  background: rgba(255, 255, 255, 0.02);
}

.cta-box {
  text-align: center;
  border: 1px solid rgba(255, 138, 51, 0.35);
  border-radius: 20px;
  padding: clamp(1.6rem, 4vw, 3.1rem);
  background: linear-gradient(150deg, rgba(255, 122, 31, 0.15), rgba(255, 77, 46, 0.06), rgba(255, 255, 255, 0.03));
}

.cta-box p {
  color: #e5d8cb;
  max-width: 62ch;
  margin: 0 auto;
}

.cta-box .hero-actions {
  justify-content: center;
}

.footer {
  padding: 3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}

.footer h3 {
  margin-top: 0;
  font-size: 0.98rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  display: grid;
  gap: 0.5rem;
}

.footer a {
  color: #ddd4c8;
  text-decoration: none;
}

.footer-copy {
  color: var(--muted);
  max-width: 30ch;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@media (max-width: 980px) {
  .hero-grid,
  .split-layout,
  .footer-grid {
    grid-template-columns: 1fr;
  }

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

  .trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-links {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 5rem;
  }

  .card-grid,
  .solution-grid,
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
    text-align: center;
  }
}

.nav-links a[aria-current="page"] {
  color: var(--text);
}

.integrations-page {
  position: relative;
}

.integrations-intro {
  margin-bottom: 1.5rem;
}

.integration-collage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.integration-tile {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border-radius: 16px;
  padding: 1.2rem;
  min-height: 220px;
  height: 100%;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
}

.integration-tile--more {
  border-color: rgba(255, 138, 51, 0.45);
  background: linear-gradient(155deg, rgba(255, 122, 31, 0.2), rgba(255, 77, 46, 0.1), rgba(255, 255, 255, 0.03));
}

.integration-focus {
  color: #ffd9bb;
  margin-bottom: 0.5rem !important;
}

@media (max-width: 980px) {
  .integration-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .integration-collage {
    grid-template-columns: 1fr;
  }
}

.pricing-page {
  position: relative;
}

.pricing-hero {
  max-width: 76ch;
}

.pricing-section {
  padding-top: 1rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

.pricing-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border-radius: 16px;
  padding: 1.3rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.pricing-panel h2 {
  margin-top: 0;
}

.slider-label {
  display: block;
  margin: 1.4rem 0 0.6rem;
  color: #ddd4c8;
  font-weight: 600;
}

.pricing-slider {
  width: 100%;
  accent-color: #ff7a1f;
}

.slider-marks {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  color: var(--muted);
  font-size: 0.86rem;
}

.slider-marks span:nth-child(2),
.slider-marks span:nth-child(3),
.slider-marks span:nth-child(4) {
  text-align: center;
}

.slider-marks span:last-child {
  text-align: right;
}

.price-output {
  margin: 1.2rem 0 0;
  padding: 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 138, 51, 0.35);
  background: rgba(255, 122, 31, 0.08);
}

.price-label {
  display: block;
  color: #ffd4b1;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.32rem;
}

.price-output strong {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
}

.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.feature-list li {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem;
  color: #e7dfd5;
  background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 980px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.admin-shell { display:grid; grid-template-columns: 240px 1fr; gap:1rem; padding:2rem 0 4rem; }
.admin-sidebar { border:1px solid var(--border); border-radius:16px; padding:1rem; background:var(--bg-elevated); position:sticky; top:92px; height:fit-content; }
.admin-sidebar-copy { font-size: .92rem; margin: 0.4rem 0 0.9rem; }
.tenant-nav { display:grid; gap:.35rem; }
.tenant-nav-item { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; background:transparent; color:var(--muted); padding:.55rem .5rem; border-radius:8px; text-align:left; font:inherit; cursor:pointer; }
.tenant-nav-item.active,.tenant-nav-item:hover { background:rgba(255,122,31,.14); color:var(--text); }
.admin-content { display:grid; gap:1rem; }
.tenant-view { display:none; gap:1rem; }
.tenant-view.is-active { display:grid; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.identity-posture h3 { margin: 0; }
.panel { border:1px solid var(--border); border-radius:16px; padding:1rem; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:.6rem; border-bottom:1px solid var(--border); }
.pill { display:inline-block; border:1px solid var(--border); padding:.15rem .45rem; border-radius:999px; font-size:.75rem; color:#ffd9be; }
.beta-pill { border-color: rgba(255, 122, 31, 0.55); color: #ffb47f; background: rgba(255, 122, 31, 0.12); }
.protocol-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.protocol-grid article { display:grid; gap:.65rem; border:1px solid var(--border); border-radius:12px; padding:.9rem; background: rgba(0, 0, 0, .15); }
.protocol-grid input,.protocol-grid textarea,.protocol-grid select { background:#111; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.65rem; font:inherit; width:100%; }
.audit-toolbar { display:grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap:.5rem; margin:.75rem 0; }
.audit-toolbar input,.audit-toolbar select { background:#111; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.52rem; font:inherit; width:100%; }
.audit-row { cursor:pointer; }
.audit-row:hover { background: rgba(255,122,31,.08); }
#audit-detail { margin-top:.7rem; }
#audit-detail-json { margin:.6rem 0 0; background:#0f1217; border:1px solid var(--border); border-radius:10px; padding:.6rem; max-height:280px; overflow:auto; }
.workflow-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.workflow-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.workflow-layout { display:grid; grid-template-columns: minmax(220px, .85fr) minmax(760px, 2.35fr) minmax(260px, 1fr); gap:.7rem; min-height:72vh; }
.workflow-node-palette, .workflow-properties { resize: horizontal; overflow:auto; min-width:210px; max-width:480px; }
.workflow-canvas-panel { position:relative; overflow:hidden; min-height:72vh; display:grid; grid-template-rows:auto 1fr auto; gap:.6rem; padding:.75rem; }
.workflow-editor-surface { display:grid; grid-template-columns: 1fr; gap:.7rem; align-items:stretch; min-height:65vh; }
.workflow-editor-surface.mode-split { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr); }
.workflow-editor-surface.mode-code { grid-template-columns: minmax(0, 1fr); }
.workflow-editor-surface.mode-code .workflow-viewport { display:none; }
.workflow-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.workflow-toolbar-group { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.workflow-toggle { display:flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.86rem; }
.workflow-view-toggle.is-active { border-color: rgba(255,122,31,.65); color:#ffbe92; }
.workflow-viewport { position:relative; min-height:65vh; border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; background: radial-gradient(circle at 20% 20%, rgba(255,122,31,.09), transparent 48%), #0f1217; cursor:grab; outline:none; }
.workflow-viewport:active { cursor:grabbing; }
.workflow-world { position:absolute; top:0; left:0; width:2800px; height:1800px; transform-origin: top left; }
.workflow-canvas { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:24px 24px; }
.workflow-lines { position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.workflow-line { fill:none; stroke: rgba(255, 122, 31, .74); stroke-width: 2.5px; }
.workflow-line.is-selected { stroke: rgba(118,190,255,.9); stroke-width: 3.2px; }
.workflow-line.is-draft { stroke-dasharray: 8 6; opacity: .75; }
.workflow-line-label { fill: #ffe0c8; font-size: 14px; font-weight: 600; text-anchor: middle; paint-order: stroke; stroke: rgba(15,18,23,.85); stroke-width: 4px; }
.workflow-node { position:absolute; width:220px; min-height:100px; border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:.55rem .65rem; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow: 0 10px 25px rgba(0,0,0,.35); z-index:5; cursor:grab; user-select:none; }
.workflow-node.is-selected { border-color: rgba(255,122,31,.75); box-shadow: 0 0 0 1px rgba(255,122,31,.5), 0 10px 25px rgba(0,0,0,.45); }
.workflow-node header { color:#ffbe92; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.25rem; }
.workflow-node strong { display:block; margin-bottom:.25rem; }
.workflow-node p { margin:0; color:var(--muted); font-size:.82rem; }
.workflow-node-ports { display:flex; justify-content:space-between; gap:.45rem; margin-top:.55rem; }
.workflow-node-port-col { display:grid; gap:.22rem; }
.workflow-port { border:1px solid var(--border); background:#111; color: #ff9b56; border-radius:999px; min-width:3.1rem; height:1.45rem; padding:0 .5rem; display:grid; place-items:center; cursor:pointer; font-size:.68rem; }
.workflow-port:hover { border-color: rgba(255,122,31,.75); }
.workflow-node-palette .btn { width:100%; margin-bottom:.45rem; text-align:left; display:grid; gap:.15rem; }
.workflow-node-palette .btn span { color: var(--muted); font-size:.76rem; font-weight: 500; }
.workflow-palette-category + .workflow-palette-category { margin-top:.75rem; }
.workflow-palette-category { border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(12,16,21,.7); overflow:hidden; }
.workflow-palette-category-toggle { width:100%; border:0; background:transparent; cursor:pointer; padding:.6rem .7rem; display:flex; align-items:center; justify-content:space-between; gap:.45rem; color:#ffbe92; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.workflow-palette-category-toggle::after { content:"+"; font-size:1rem; color:#ffd0ad; transition:transform .15s ease; }
.workflow-palette-category.is-open .workflow-palette-category-toggle::after { content:"−"; }
.workflow-palette-category-content { display:none; padding:.15rem .55rem .55rem; }
.workflow-palette-category.is-open .workflow-palette-category-content { display:block; }
.workflow-palette-count { border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.08rem .45rem; font-size:.68rem; line-height:1.3; color:#ffd9bf; background:rgba(255,255,255,.04); }
.workflow-properties textarea { background:#111; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.72rem; font:inherit; }
.workflow-code-panel { display:none; margin:0; padding:.75rem; }
.workflow-editor-surface.mode-split .workflow-code-panel, .workflow-editor-surface.mode-code .workflow-code-panel { display:grid; grid-template-rows:auto 1fr; gap:.6rem; }
.workflow-code-header { display:flex; align-items:center; justify-content:space-between; gap:.45rem; }
.workflow-code-output { margin:0; background:#0f1217; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:.75rem; overflow:auto; font-size:.75rem; line-height:1.4; max-height:64vh; }
.workflow-link-status { margin:0; min-height:1.4rem; }
.workflow-link-status.is-error { color:#ff8c8c; }
.workflow-definition-notes { margin-top:.85rem; border-top:1px solid var(--border); padding-top:.65rem; }
.workflow-definition-notes h4 { margin:.15rem 0 .45rem; font-size:.85rem; }
.workflow-definition-notes ul { margin:0; padding-left:1.05rem; color:var(--muted); font-size:.82rem; display:grid; gap:.35rem; }
.workflow-minimap { border:1px solid var(--border); border-radius:10px; background:#11161f; overflow:hidden; width:min(280px, 100%); justify-self:end; }
.workflow-minimap svg { display:block; width:100%; height:120px; }
.staff-badge { background:rgba(255,122,31,.2); }
.staff-operator { background:rgba(212,55,58,.22); }
.staff-nav-actions { display:flex; align-items:center; gap:.65rem; }
.staff-account-btn {
  width: 2.5rem;
  min-width: 2.5rem;
  padding: 0.5rem;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
}

.account-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 14, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.account-modal.is-open {
  display: flex;
}

.account-modal__panel {
  width: min(760px, 100%);
  max-height: 85vh;
  overflow: auto;
  background: #13161a;
}

.account-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.account-modal__close {
  width: 2.25rem;
  min-width: 2.25rem;
  padding: 0.45rem;
  border-radius: 999px;
}

.search-input { background:#111; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.7rem; min-width:280px; margin-right:.5rem; }
@media (max-width: 920px) { .admin-shell{grid-template-columns:1fr;} .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .admin-sidebar{position:relative;top:0;} .workflow-layout{grid-template-columns:1fr;} .workflow-node-palette,.workflow-properties{resize:none;max-width:none;} .workflow-minimap{justify-self:stretch;width:100%;} .workflow-editor-surface.mode-split{grid-template-columns:1fr;} }

.auth-page { display:flex; justify-content:center; }
.auth-card { width:min(620px, 100%); }
.auth-form { display:grid; gap:.9rem; margin-top:1rem; }
.auth-form label { display:grid; gap:.4rem; color:#e8e1d7; font-weight:600; }
.auth-form input,.auth-form select { background:#111; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.72rem; font:inherit; }
.auth-form .hidden { display:none; }
.auth-status { min-height: 1.6rem; margin:0; }
.auth-hint ul { margin:.5rem 0 0 1rem; color:var(--muted); }

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.25rem;
  padding: 2rem;
  width: min(1120px, 95vw);
  margin: 0 auto;
  align-items: stretch;
}

.auth-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow);
}

.auth-panel--brand {
  position: relative;
  overflow: hidden;
}

.auth-panel--brand::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 122, 31, 0.25), transparent 70%);
  right: -80px;
  bottom: -120px;
}

.auth-form {
  display: grid;
  gap: 1rem;
}

.auth-form label {
  display: grid;
  gap: 0.5rem;
  color: var(--muted);
  font-weight: 600;
}

.auth-form input,
.inline-form input,
.inline-form select,
select,
.search-input {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.72rem 0.8rem;
  background: #13161a;
  color: var(--text);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.auth-status {
  min-height: 1.25rem;
}


.auth-inline-option {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  font-weight: 500 !important;
  color: var(--muted) !important;
}

.auth-inline-option input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.auth-help-link {
  color: #ffb17d;
  font-size: 0.92rem;
}

.auth-feature-list {
  line-height: 1.8;
  color: var(--muted);
}

.hidden {
  display: none;
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}

.staff-console {
  display: grid;
  gap: 1rem;
}

.staff-hero {
  padding: 1.4rem;
  background: linear-gradient(120deg, rgba(255, 122, 31, 0.12), rgba(255, 255, 255, 0.03));
}

.staff-hero .section-title {
  margin-bottom: 0.6rem;
}

.staff-access {
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.9rem;
}

.staff-access-table-wrap {
  margin-top: 0.8rem;
  overflow-x: auto;
}

.staff-access-table {
  width: 100%;
  border-collapse: collapse;
}

.staff-access-table th,
.staff-access-table td {
  padding: 0.55rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: middle;
}

.staff-access-table th {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffb17d;
}

.staff-access-table code {
  font-size: 0.88rem;
}

.access-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
}

.access-chip.is-granted {
  color: #8af3b8;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.45);
}

.access-chip.is-denied {
  color: #f3a6a6;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.staff-workspace {
  padding: 0.8rem;
}

.staff-tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.staff-tab {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.58rem 0.9rem;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.staff-tab.is-active,
.staff-tab:hover,
.staff-tab:focus-visible {
  color: var(--text);
  border-color: rgba(255, 138, 51, 0.45);
  background: linear-gradient(145deg, rgba(255, 122, 31, 0.2), rgba(255, 255, 255, 0.04));
}

.staff-panel {
  display: none;
}

.staff-panel.is-visible {
  display: block;
}

.staff-panel h3 {
  margin-top: 0;
}

.muted-text {
  color: var(--muted);
}

.role-table {
  display: grid;
  gap: 0.7rem;
}

.role-table-head,
.role-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(220px, 1fr) minmax(200px, 1fr) minmax(220px, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.role-table-head {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.45rem;
}

.role-row {
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.role-title {
  margin: 0 0 0.35rem;
}

.role-rename,
.role-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.role-permissions select {
  min-height: 7.5rem;
  width: 100%;
}

.tenant-toolbar {
  align-items: center;
}

.tenant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

@media (max-width: 980px) {
  .role-table-head {
    display: none;
  }

  .role-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .staff-workspace {
    padding: 0.6rem;
  }

  .staff-tab {
    flex: 1;
    min-width: 42%;
    text-align: center;
  }
}