:root {
    --bg-cream: #F1F8F7;
    --bg-card: #FFFFFF;
    --bg-slate: #051F22;
    --bg-indigo: #072A2D;
    --ink: #0F292C;
    --ink-muted: #436468;
    --terracotta: #0D9488;
    --terracotta-dark: #0F766E;
    --emerald: #0D6E52;
    --emerald-bg: #ECFDF5;
    --amber: #B45309;
    --amber-bg: #FFFBEB;
    --crimson: #B91C1C;
    --crimson-bg: #FEF2F2;
    --indigo: #0B3B40;
    --indigo-bg: #E6FFFA;
    --border: #BCE3DF;
    --gold: #D4AF37;
    --radius: 14px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  .frame-canvas {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #041719;
    color: var(--ink);
    line-height: 1.45;
  }
  /* Top Global Studio Bar — Distinct Deep Sovereign Teal Theme for test.hop.harleys.com */
  .studio-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(180deg, #051F22 0%, #072A2D 100%);
    color: #E6FFFA;
    border-bottom: 2.5px solid var(--gold);
    padding: 8px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .studio-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 13px;
    color: #FDE68A;
  }
  .nav-pills, .screen-tabs, .vp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
  }
  .pill-link {
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 7px;
    border: 1px solid #374151;
    color: #E5E7EB;
    background: #1F2937;
  }
  .pill-link.active {
    background: var(--terracotta);
    color: #FFF;
    border-color: #F59E0B;
  }
  .screen-btn, .vp-btn {
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid #374151;
    background: #1E293B;
    color: #E2E8F0;
  }
  .screen-btn.active {
    background: #F59E0B;
    color: #111827;
    border-color: #FDE68A;
  }
  .vp-btn.active {
    background: #0D6E52;
    color: #FFF;
    border-color: #34D399;
  }
  /* Guided Walkthrough Strip */
  .walkthrough-strip {
    background: #1E1B4B;
    color: #E0E7FF;
    padding: 8px 16px;
    border-bottom: 1px solid #3730A3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
  }
  .wt-step-badge {
    background: #4338CA;
    color: #FFF;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    margin-right: 6px;
  }
  .wt-controls {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .wt-nav-btn {
    cursor: pointer;
    background: #312E81;
    color: #FFF;
    border: 1px solid #6366F1;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
  }
  .wt-nav-btn.primary {
    background: #10B981;
    color: #064E3B;
    border-color: #34D399;
  }
  /* Viewport Container */
  .stage-wrap {
    padding: 16px;
    display: flex;
    justify-content: center;
  }
  .viewport-frame {
    width: 100%;
    max-width: 1420px;
    background: var(--bg-cream);
    border-radius: 16px;
    border: 2px solid #374151;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    transition: max-width 0.2s ease;
  }
  .viewport-frame.tablet { max-width: 1024px; }
  .viewport-frame.mobile { max-width: 390px; }

  /* Authenticated Top App Shell with Plane Switcher */
  .app-shell-header {
    background: #0F172A;
    color: #F8FAFC;
    padding: 12px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 3px solid var(--gold);
  }
  .shell-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .brand-logo {
    background: var(--terracotta);
    color: #FFF;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 0.4px;
  }
  .plane-switcher {
    display: inline-flex;
    background: #1E293B;
    padding: 3px;
    border-radius: 9px;
    border: 1px solid #475569;
    gap: 3px;
    flex-wrap: wrap;
  }
  .plane-pill {
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #CBD5E1;
  }
  .plane-pill.active-hop {
    background: #4338CA;
    color: #FFF;
  }
  .plane-pill.active-operations {
    background: var(--terracotta);
    color: #FFF;
  }
  .plane-pill.active-hearth {
    background: #0D6E52;
    color: #FFF;
  }
  .shell-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
  }
  .role-badge {
    background: #312E81;
    color: #E0E7FF;
    border: 1px solid #6366F1;
    padding: 4px 9px;
    border-radius: 999px;
    font-weight: 700;
  }
  .rev-badge {
    background: #064E3B;
    color: #A7F3D0;
    border: 1px solid #10B981;
    padding: 4px 9px;
    border-radius: 999px;
    font-weight: 700;
  }

  /* Screen Panels */
  .screen-pane { display: none; padding: 18px; }
  .screen-pane.active { display: block; }

  .sec-banner {
    background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%);
    color: #FFF;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-left: 5px solid var(--gold);
  }
  .sec-banner.operations-theme {
    background: linear-gradient(135deg, #7C2D12 0%, #431407 100%);
    border-left-color: #FBBF24;
  }
  .sec-banner.hearth-theme {
    background: linear-gradient(135deg, #064E3B 0%, #022C22 100%);
    border-left-color: #34D399;
  }
  .sec-banner h2 { font-size: 17px; font-weight: 800; margin-bottom: 3px; }
  .sec-banner p { font-size: 12px; color: #E2E8F0; }

  /* Grids & Cards */
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
  .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 14px; }

  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  }
  .card-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .card-sub {
    font-size: 11.5px;
    color: var(--ink-muted);
    margin-bottom: 8px;
  }
  .tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
  }
  .tag-hearth { background: #ECFDF5; color: #065F46; border: 1px solid #6EE7B7; }
  .tag-hop { background: #EEF2FF; color: #3730A3; border: 1px solid #A5B4FC; }
  .tag-operations { background: #FFF7ED; color: #9A3412; border: 1px solid #FDBA74; }
  .tag-ods { background: #F0F9FF; color: #075985; border: 1px solid #7DD3FC; }
  .tag-lock { background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5; }

  /* Tables */
  .table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); background: #FFF; margin-bottom: 12px; }
  table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  th { background: #F5EFE6; color: #1C1917; text-align: left; padding: 8px 10px; font-weight: 800; border-bottom: 2px solid var(--border); }
  td { padding: 7px 10px; border-bottom: 1px solid #F0EAE1; vertical-align: top; }
  tr:hover td { background: #FAF7F2; }

  /* Buttons & Interactive Controls */
  .btn {
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 800;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .btn-primary { background: var(--terracotta); color: #FFF; }
  .btn-indigo { background: #3730A3; color: #FFF; }
  .btn-emerald { background: #0D6E52; color: #FFF; }
  .btn-outline { background: #FFF; color: var(--ink); border-color: #D6D3D1; }
  .btn-outline.active { background: #1E1B4B; color: #FFF; border-color: #1E1B4B; }

  /* State Machine Interactive Nodes */
  .state-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .state-node {
    cursor: pointer;
    border: 2px solid #CBD5E1;
    background: #F8FAFC;
    border-radius: 10px;
    padding: 9px 11px;
    transition: all 0.15s ease;
  }
  .state-node.selected {
    border-color: #3730A3;
    background: #EEF2FF;
    box-shadow: 0 0 0 3px rgba(55,48,163,0.18);
  }
  .state-node.warn { border-left: 5px solid #D97706; }
  .state-node.danger { border-left: 5px solid #DC2626; }
  .state-node.pass { border-left: 5px solid #059669; }
  .state-code { font-family: monospace; font-weight: 900; font-size: 11.5px; color: #1E293B; }

  /* Building Block Cards */
  .bb-card {
    background: #FFFBF7;
    border: 1.5px solid #E7D8C9;
    border-radius: 10px;
    padding: 9px;
  }
  .bb-num { font-size: 10px; font-weight: 900; color: var(--terracotta); text-transform: uppercase; }
  .bb-name { font-size: 12px; font-weight: 800; color: var(--ink); margin: 2px 0 4px; }
  .bb-val { font-size: 11px; color: #44403C; background: #FFF; padding: 5px 7px; border-radius: 6px; border: 1px solid #E7E5E4; }

  /* Escalation Ladder Nodes */
  .ladder-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
  }
  .ladder-step {
    border-radius: 10px;
    padding: 10px;
    border: 1.5px solid var(--border);
    background: #FFF;
    position: relative;
  }
  .ladder-time { font-weight: 900; font-size: 13px; margin-bottom: 3px; }

  /* Mobile 390px Overrides */
  .viewport-frame.mobile .app-shell-header { padding: 10px 12px; }
  .viewport-frame.mobile .screen-pane { padding: 10px; }
  .viewport-frame.mobile .grid-2,
  .viewport-frame.mobile .grid-3,
  .viewport-frame.mobile .grid-4,
  .viewport-frame.mobile .grid-6,
  .viewport-frame.mobile .state-flow,
  .viewport-frame.mobile .ladder-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .viewport-frame.mobile .sec-banner { padding: 10px 12px; }
  .viewport-frame.mobile .sec-banner h2 { font-size: 14px; }
  .viewport-frame.mobile table { font-size: 10.5px; }
  .viewport-frame.mobile th, .viewport-frame.mobile td { padding: 5px 6px; }