body { overflow: hidden; }
.ambient { position: fixed; inset: 0; pointer-events: none; opacity: .78; background: radial-gradient(circle at 72% -15%, rgb(71 132 111 / 22%), transparent 38%), repeating-linear-gradient(115deg, transparent 0 19px, rgb(216 255 224 / .7%) 19px 20px); }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; }
.auth-card { width: min(600px, 100%); padding: 58px; border: 1px solid var(--line); border-radius: 30px; background: rgb(11 21 20 / 88%); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.auth-card h1 { margin: 0; font-size: clamp(42px, 7vw, 70px); line-height: .96; letter-spacing: -.065em; }
.auth-card .lede { margin: 24px 0 34px; color: var(--muted); font-size: 18px; }
.xfde-mark { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 34px; border-radius: 18px; background: linear-gradient(145deg, var(--accent), #81d982); color: #10200d; box-shadow: 0 0 52px rgb(198 245 107 / 22%); font: 900 37px/1 var(--sans); }
.xfde-mark span { transform: translateY(-2px); }
.xfde-mark.compact { width: 36px; height: 36px; margin: 0; border-radius: 11px; font-size: 22px; }
.platform { min-height: 100vh; display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); position: relative; }
.platform-rail { height: 100vh; padding: 18px 12px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); display: flex; flex-direction: column; }
.platform-brand { display: grid; justify-items: center; gap: 7px; padding-bottom: 24px; font-size: 12px; letter-spacing: .08em; }
.product-nav { display: grid; gap: 8px; }
.product-button { display: grid; justify-items: center; gap: 7px; width: 100%; padding: 12px 7px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--muted); text-decoration: none; cursor: pointer; font-size: 10px; font-weight: 750; transition: color var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out); }
.product-button:hover { color: var(--text); background: var(--panel); transform: translateY(-1px); }
.product-button.active { color: var(--text); border-color: var(--line); background: var(--panel-2); box-shadow: inset 3px 0 var(--accent), inset 0 0 0 1px var(--line); }
.product-glyph { font: 700 24px/1 var(--mono); color: var(--accent-2); }
.platform-docs { margin-top: auto; }
.platform-stage { min-width: 0; height: 100vh; display: grid; grid-template-rows: 70px minmax(0, 1fr); }
.platform-topbar { display: flex; justify-content: space-between; align-items: center; padding: 0 25px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-elevated) 84%, transparent); backdrop-filter: blur(14px); }
.platform-topbar h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; }
.platform-identity { display: flex; align-items: center; gap: 10px; }
.platform-identity > span:not(.avatar):not(.role-pill) { display: flex; flex-direction: column; min-width: 0; }
.platform-identity strong, .platform-identity small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-identity small { color: var(--muted); }
.role-pill { padding: 4px 8px; border: 1px solid var(--line-bright); border-radius: 99px; color: var(--accent-2); font: 700 9px var(--mono); text-transform: uppercase; }
.product-host { container-type: inline-size; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0; grid-column: auto; width: auto; justify-self: stretch; }
.proxy-product.app { min-height: 100%; grid-template-columns: 230px minmax(0, 1fr); }
.proxy-product .sidebar { position: sticky; top: 0; width: 230px; height: calc(100vh - 70px); }
.proxy-product > main { grid-column: 2; width: 100%; max-width: 1500px; padding: 30px 34px 64px; }
.looper-product .shell { min-height: calc(100vh - 112px); }
@media (max-width: 800px) {
  :root { --rail-width: 76px; }
  .platform-brand strong, .product-button > span:last-child { display: none; }
  .platform-topbar { padding: 0 14px; }
  .platform-topbar h2 { max-width: 180px; font-size: 18px; }
  .platform-identity #platform-user-email, .role-pill { display: none; }
  .proxy-product .sidebar { width: 100%; height: auto; position: static; }
  .proxy-product.app { display: block; }
  .proxy-product > main { padding: 22px 15px 50px; }
}