:root {
      color-scheme: dark;
      --bg: #020617;
      --text: #e5e7eb;
      --panel:#0f1422;
      --panel-soft:#141a2a;
      --accent:#43b5ff;
      --accent-soft:rgba(67,181,255,0.18);
      --accent-strong:rgba(67,181,255,0.35);
      --muted:#a9b5c7;
      --danger:#ff6b6b;
      --good:#9fe870;
      --rad:16px;
      --rad-lg:20px;
      --shadow:0 14px 40px rgba(0,0,0,0.45);

      /* extra tokens to align with BB theme */
      --surface:var(--panel);
      --surface-soft:var(--panel-soft);
      --edge:#1b243b;
      --edge-soft:#26314d;
      --fg:var(--text);
	  
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      background: radial-gradient(circle at top, #0f172a 0, #020617 55%, #000 100%);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
    }
	
.app-shell {
	width: 100%;
	max-width: 1200px;
	background: var(--surface);
	border-radius: var(--rad-lg);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--edge);
}


    header.app-header{
      padding:10px 16px;
      border-bottom:1px solid var(--edge);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      background:
        linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01)),
        linear-gradient(90deg,#101629,#101629 45%,#111b35);
    }

    .app-title{
      font-size:18px;
      font-weight:700;
      letter-spacing:0.06em;
      text-transform:uppercase;
      display:flex;
      align-items:baseline;
      gap:10px;
    }
    .app-title span.sub{
      font-size:12px;
      font-weight:500;
      color:var(--muted);
      text-transform:none;
      letter-spacing:0.02em;
    }

    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:13px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .pill{
      padding:4px 10px;
      border-radius:999px;
      background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
      border:1px solid var(--edge-soft);
      color:var(--accent);
      font-size:11px;
      letter-spacing:0.08em;
      text-transform:uppercase;
      white-space:nowrap;
      font-weight:700;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .status-pill{
      padding:4px 10px;
      border-radius:999px;
      font-size:11px;
      letter-spacing:0.08em;
      text-transform:uppercase;
      border:1px solid var(--edge-soft);
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:rgba(255,255,255,0.02);
      font-weight:700;
    }
    .status-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      box-shadow:0 0 0 1px rgba(0,0,0,0.8);
      background:#9aa3b2;
    }
    .status-pill--dim{
      color:var(--muted);
      background:rgba(255,255,255,0.02);
    }
    .status-pill--ok{
      color:var(--good);
      background:rgba(159,232,112,0.08);
      border-color:rgba(159,232,112,0.42);
    }
    .status-pill--ok .status-dot{
      background:#00ff0f;
      box-shadow:0 0 0 1px rgba(0,0,0,0.9),0 0 10px rgba(102,224,141,0.55);
    }
    .status-pill--bad{
      color:var(--danger);
      background:rgba(255,107,107,0.08);
      border-color:rgba(255,107,107,0.7);
    }
    .status-pill--bad .status-dot{
      background:#ff6b6b;
      box-shadow:0 0 0 1px rgba(0,0,0,0.9),0 0 10px rgba(255,107,107,0.55);
    }

    .mode-toggle{
      display:inline-flex;
      align-items:center;
      gap:0;
      border-radius:999px;
      border:1px solid var(--edge-soft);
      overflow:hidden;
      background:rgba(255,255,255,0.03);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .mode-btn{
      border:none;
      background:transparent;
      color:var(--muted);
      font-size:11px;
      letter-spacing:0.08em;
      text-transform:uppercase;
      padding:5px 10px;
      cursor:pointer;
      white-space:nowrap;
      transition:background 0.12s ease,color 0.12s ease,transform 0.04s ease;
      font-weight:700;
    }
    .mode-btn.is-active{
      background:linear-gradient(180deg,var(--accent),#2e6fff);
      color:#eaf4ff;
      box-shadow:0 8px 18px rgba(46,111,255,0.35),inset 0 1px 0 rgba(255,255,255,0.3);
    }
    .mode-btn:first-child{
      border-right:1px solid rgba(0,0,0,0.65);
    }
    .mode-btn:nth-child(2){
      border-right:1px solid rgba(0,0,0,0.65);
    }
    .mode-btn:active{
      transform:translateY(1px);
    }