/* OpenGate v2 visual candidate. Public logo is verbatim; cabinet layout is an
   adaptation for this app's existing contracts, not a complete parity claim. */
:root {
  --bg:#efeff4;
  --surface:#fffffff2;
  --solid:#fff;
  --text:#17171c;
  --muted:#62626e;
  --line:#e1e1e9;
  --control-line:#85858f;
  --accent:#7138e3;
  --accent-text:#fff;
  --soft:#eeE7fc;
  --shadow:0 4px 20px #24203404;
  --focus:#7138e3;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    --bg:#000;
    --surface:#1c1c1ef2;
    --solid:#1c1c1e;
    --text:#f5f5f7;
    --muted:#b1b1bd;
    --line:#36363b;
    --control-line:#9696a3;
    --accent:#bb98ff;
    --accent-text:#1a0936;
    --soft:#30213e;
    --shadow:none;
    --focus:#bb98ff;
  }
}
:root[data-theme=dark] {
  --bg:#000;
  --surface:#1c1c1ef2;
  --solid:#1c1c1e;
  --text:#f5f5f7;
  --muted:#b1b1bd;
  --line:#36363b;
  --control-line:#9696a3;
  --accent:#bb98ff;
  --accent-text:#1a0936;
  --soft:#30213e;
  --shadow:none;
  --focus:#bb98ff;
}
.orb { display:none; }
.shell { max-width:1300px; gap:36px; grid-template-columns:236px minmax(0,1fr); }
.glass { border-radius:24px; }
.sidebar { padding:26px 16px; border-radius:28px; }
.brand { font-size:22px; font-weight:650; letter-spacing:-.6px; gap:12px; min-height:48px; }
.brand img { width:42px; height:42px; flex:none; }
.brand small { margin-top:3px; font-size:11px; }
.topbar { padding:14px 0 26px; }
h1 { font-size:clamp(1.7rem,3vw,2.15rem); letter-spacing:-.035em; font-weight:700; }
h2 { letter-spacing:-.025em; font-weight:650; }
.eyebrow { letter-spacing:.12em; font-size:.6rem; }
.panel { padding:28px; }
.stack { gap:18px; }
.button { border-radius:999px; min-height:48px; padding:12px 21px; font-weight:600; }
.button.quiet { background:var(--solid); border-color:var(--line); color:var(--text); }
.button.nav-item { border-radius:18px; min-height:50px; }
.button.nav-item[aria-current=page] { background:var(--bg); color:var(--accent); }
.button.nav-item span:last-child { color:var(--text); }
.nav-icon { width:24px; height:24px; flex:none; display:block; background:currentColor; mask:center/24px 24px no-repeat; -webkit-mask:center/24px 24px no-repeat; }
.nav-home { mask-image:url('/assets/icon-home.svg'); -webkit-mask-image:url('/assets/icon-home.svg'); }
.nav-install { mask-image:url('/assets/icon-install.svg'); -webkit-mask-image:url('/assets/icon-install.svg'); }
.nav-account { mask-image:url('/assets/icon-account.svg'); -webkit-mask-image:url('/assets/icon-account.svg'); }
.nav-help { mask-image:url('/assets/icon-support.svg'); -webkit-mask-image:url('/assets/icon-support.svg'); }
.welcome-card { background:var(--surface); min-height:auto; padding:28px; }
.welcome-card h2 { max-width:none; font-size:1.6rem; margin-bottom:6px; }
.welcome-card p { margin-bottom:0; }
.account-summary { padding:18px 24px; }
.account-summary h2 { font-size:1rem; margin:0; }
.no-subscriptions { border:1px dashed var(--control-line); background:transparent; box-shadow:none; padding-block:32px; text-align:center; }
.no-subscriptions::before { content:''; display:block; width:56px; height:56px; margin:0 auto 22px; background:var(--muted); opacity:.35; mask:url('/assets/mark.svg') center/contain no-repeat; -webkit-mask:url('/assets/mark.svg') center/contain no-repeat; }
.no-subscriptions h2 { font-size:1.2rem; }
.metadata { gap:24px; margin-bottom:22px; }
.badge { padding:5px 10px; }
.cards-grid { gap:18px; }
.account-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px; }
.account-links .button { justify-content:flex-start; text-align:left; border-radius:14px; }
.account-links .button::after { content:'›'; color:var(--muted); margin-left:auto; font-size:1.3rem; }
.auth-layout { max-width:520px; margin:12px auto 32px; }
.login-intro { display:flex; flex-direction:column; align-items:center; text-align:center; background:transparent; border:0; box-shadow:none; padding:20px 8px 8px; backdrop-filter:none; }
.login-intro h2 { font-size:28px; margin-top:22px; }
.login-intro p { max-width:420px; font-size:15px; }
.login-mark { order:-1; display:block; width:56px; height:56px; }
.login-intro>.button { margin-top:8px; width:100%; }
.auth-layout form .button { width:100%; }
.auth-layout .field { margin-top:8px; }
.auth-layout .panel:not(.login-intro)>h2 { font-size:1.05rem; }
.auth-layout .panel:not(.login-intro)>p { font-size:.875rem; }
.footer { padding:30px 4px 8px; }
@media(max-width:850px) {
  .shell { grid-template-columns:1fr; gap:14px; padding-bottom:max(112px,calc(96px + env(safe-area-inset-bottom))); }
  .sidebar { padding:0; border-radius:0; }
  .brand { font-size:21px; gap:10px; }
  .brand img { width:36px; height:36px; }
  .topbar { padding:8px 0 22px; }
  .panel { padding:22px; }
  .welcome-card { padding:24px; }
  #navigation { max-width:520px; margin-inline:auto; border-radius:999px; padding:7px; background:var(--surface); box-shadow:0 8px 30px #00000014; gap:3px; }
  .button.nav-item { border-radius:999px; min-height:60px; padding:7px 4px; gap:3px; font-size:.69rem; }
  .nav-icon { width:23px; height:23px; mask-size:23px; -webkit-mask-size:23px; }
  .account-links { grid-template-columns:1fr; }
  .auth-layout { margin-top:0; }
  .login-intro { padding:16px 4px 8px; }
  .footer { flex-wrap:wrap; gap:8px; }
}
@media(max-width:360px) {
  .brand { font-size:19px; gap:7px; }
  .brand img { width:32px; height:32px; }
  .panel { padding:18px; }
  .button.nav-item { font-size:.63rem; }
}
@media(max-height:500px) and (max-width:850px) {
  #navigation { border-radius:24px; width:100%; }
  .shell { padding-bottom:max(20px,env(safe-area-inset-bottom)); }
}