h1,h2,h3,h4{margin:0; font-family:"Big Shoulders Display",system-ui,sans-serif; letter-spacing:.01em; text-wrap:balance;}
  p{margin:0;}
  button{font-family:inherit;}
  ::selection{background:var(--accent); color:var(--accent-ink);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
  .tabular{font-variant-numeric: tabular-nums;}
  .sr-only{position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  [hidden]{display:none !important;}

  /* ============================= LAYOUT ============================= */
  .app{max-width:1180px; margin:0 auto; padding:0 20px 80px;}

  .topbar{
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    padding:18px 0 16px; border-bottom:1px solid var(--line); margin-bottom:22px;
    position:sticky; top:0; background:var(--bg); z-index:40; padding-top:20px;
  }
  .brand{display:flex; align-items:center; gap:14px; margin-right:auto;}
  .brand-logo{height:30px; width:auto; display:block; flex:none;}
  .brand-text{display:flex; flex-direction:column; line-height:1.15; padding-left:14px; border-left:2px solid var(--line-strong);}
  .brand-name{font-family:"Big Shoulders Display"; font-weight:800; font-size:20px; letter-spacing:.03em;}
  .brand-sub{font-size:11.5px; color:var(--ink-mute); letter-spacing:.02em;}

  .auth-brand .brand-logo{height:38px;}
  .auth-brand .brand-text{padding-left:16px;}
  .auth-brand .brand-name{font-size:22px;}

  .role-switch{display:flex; background:var(--surface-2); border-radius:999px; padding:4px; gap:2px; border:1px solid var(--line);}
  .role-btn{
    border:none; background:transparent; color:var(--ink-2); padding:8px 16px; border-radius:999px;
    font-weight:600; font-size:13.5px; cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .role-btn:hover{color:var(--ink);}
  .role-btn.active{background:var(--accent); color:var(--accent-ink);}

  .persona{
    display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2);
    background:var(--surface); border:1px solid var(--line); padding:7px 12px; border-radius:999px;
  }
  .persona b{color:var(--ink); font-weight:600;}
  .persona .dot{width:7px; height:7px; border-radius:50%; background:var(--status-good); flex:none;}
  .signout-link{font-size:11.5px; color:var(--ink-mute); background:none; border:none; cursor:pointer; text-decoration:underline; padding:0;}

  .scope-bar{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    font-size:12px; color:var(--ink-mute); margin:-8px 0 20px;
  }
  .scope-bar .scope-text{display:flex; align-items:center; gap:6px;}
  .scope-bar .scope-text:before{content:"🔒"; font-size:11px;}
  .phase-pill{
    display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--ink-2);
    background:var(--surface-2); border:1px solid var(--line); padding:4px 11px; border-radius:999px;
  }

  .view{display:flex; flex-direction:column; gap:22px;}