/* SkyStack dark UI, matched to Gemini's mockup (Oct 29 2026): a navy page with soft teal and blue glows, glass cards, a
   line-drawn cloud mark and white calls to action. Plain CSS: no framework or CDN, since the console's CSP only allows its own
   files. Loaded after app.css. Tokens and components sit under :root[data-theme=dark] (the default). The top bar and the public
   pages apply in either theme. */
@font-face { font-family: 'Inter'; src: url('/public/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/public/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --ss-bg: #0f172a; --ss-glass: rgba(30, 41, 59, .55); --ss-border: rgba(71, 85, 105, .45); --ss-border-2: rgba(100, 116, 139, .4);
  --ss-ink: #f1f5f9; --ss-ink2: #cbd5e1; --ss-muted: #94a3b8;
  --ss-faint: #8492a6; /* slate-500, lifted for 4.5:1 on the navy page and on glass */
  --ss-cyan: #22d3ee; --ss-cyan-2: #67e8f9; --ss-teal: #2dd4bf;
  --ss-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ss-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
}

/* ---------- Tokens ---------- */
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #0f172a; --surface: rgba(30, 41, 59, .55); --card: rgba(30, 41, 59, .55); --soft: rgba(51, 65, 85, .4); --chip: rgba(51, 65, 85, .6);
  --line: #283346; --line2: #1f2a3d; --line-strong: #475569;
  --ink: #f1f5f9; --ink2: #cbd5e1; --muted: #94a3b8;
  --accent: #22d3ee; --accent-hover: #67e8f9; --accent-soft: rgba(34, 211, 238, .12); --accent-ink: #67e8f9; --on-accent: #04111a;
  --signal: #22d3ee; --signal-ink: #67e8f9; --on-dark: #67e8f9; --focus: #67e8f9;
  --dark: #0f172a; --dark2: rgba(30, 41, 59, .8); --side-ink: #94a3b8;
  --ok: #34d399; --ok-bg: rgba(16, 185, 129, .15); --warn: #fbbf24; --warn-bg: rgba(245, 158, 11, .12); --bad: #fb7185; --bad-bg: rgba(244, 63, 94, .12);
  --info: #7dd3fc; --info-bg: rgba(14, 165, 233, .14); --bad-soft: rgba(244, 63, 94, .12); --ok-soft: rgba(16, 185, 129, .15); --bad-ink: #fb7185; --ok-ink: #34d399;
  --e1: none; --e2: 0 24px 48px -20px rgba(2, 6, 23, .6);
  --display: var(--ss-sans); --body: var(--ss-sans); --mono: var(--ss-mono);
  --brand: #22d3ee;
}
:root[data-theme=dark] ::selection { background: rgba(6, 182, 212, .3); color: #a5f3fc; }

/* ---------- Page: navy, a teal glow at the top right and a blue one at the bottom left (the mockup's) ---------- */
:root[data-theme=dark] body, body:has(.ss-page) { background: #0f172a; color: var(--ss-ink); font-family: var(--ss-sans); -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; }
:root[data-theme=dark] body::before, :root[data-theme=dark] body::after, body:has(.ss-page)::before, body:has(.ss-page)::after { content: ''; position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; }
:root[data-theme=dark] body::before, body:has(.ss-page)::before { top: -260px; right: -220px; width: 720px; height: 720px; background: rgba(13, 148, 136, .16); filter: blur(150px); }
:root[data-theme=dark] body::after, body:has(.ss-page)::after { bottom: -300px; left: -260px; width: 760px; height: 760px; background: rgba(37, 99, 235, .18); filter: blur(160px); }
body:has(.ss-landing)::before { background: rgba(13, 148, 136, .26); top: -120px; right: -160px; }
body:has(.ss-landing)::after { background: rgba(37, 99, 235, .26); }
.app, .bare, .ptop, .ptabs, .pmain, .ss-page { position: relative; z-index: 1; }

/* ---------- Simulated Azure bar ---------- */
:root .simbar, :root[data-theme] .simbar { position: relative; z-index: 20; background: linear-gradient(rgba(245, 158, 11, .10), rgba(245, 158, 11, .10)), #0f172a; border-bottom: 1px solid rgba(245, 158, 11, .2); padding: 10px 16px; font-size: 12px; font-weight: 400; color: rgba(253, 230, 138, .9); text-align: center; white-space: normal; overflow: visible; } /* wraps on phones */
.simbar-in { max-width: 80rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.simbar-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #fcd34d; }
.simbar-dot { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; animation: ss-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes ss-pulse { 50% { opacity: .5; } }
.simbar code { font-family: var(--ss-mono); font-size: 11px; background: rgba(69, 26, 3, .8); color: #fcd34d; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(245, 158, 11, .3); }

/* ---------- Type and the mark ---------- */
:root[data-theme=dark] h1 { font-weight: 800; letter-spacing: -.025em; }
:root[data-theme=dark] h2 { font-weight: 700; }
:root[data-theme=dark] .mono, :root[data-theme=dark] .stat, :root[data-theme=dark] .num { font-family: var(--ss-mono); }
:root[data-theme=dark] .code { background: rgba(2, 6, 23, .5); border-color: var(--line); color: #a5f3fc; }
:root[data-theme=dark] .log { background: rgba(2, 6, 23, .55); border: 1px solid var(--line); }
.wm { font-family: var(--ss-sans); letter-spacing: -.02em; font-weight: 700; white-space: nowrap; }
.wm b { font-weight: inherit; }
.logo-mark { display: inline-flex; flex: none; filter: drop-shadow(0 0 10px rgba(103, 232, 249, .28)); }
.logo-mark svg { display: block; }

/* ---------- Console top bar. The nav keeps class and id "side" for the scripts and tests. ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(15, 23, 42, .78); border-bottom: 1px solid rgba(51, 65, 85, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #e2e8f0; font-family: var(--ss-sans); }
.topbar-in { max-width: 80rem; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; }
.topbar .brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: none; min-width: 0; }
.topbar .brand:hover { text-decoration: none; }
.topbar .brand .wm { font-size: 20px; line-height: 28px; color: #fff; }
.topbar .brand-name { font-weight: 700; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.topbar .brand-logo { height: 28px; width: auto; }
.topbar .powered { font-size: 11px; color: #94a3b8; white-space: nowrap; flex: none; }
.topbar nav.side { position: static; height: auto; display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 0; margin: 0; background: none; border: 0; overflow: visible; flex: 1 1 auto; min-width: 0; box-shadow: none; }
.topbar nav.side > a, .topbar nav.side > details > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; color: #cbd5e1; font: 400 14px/20px var(--ss-sans); text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; background: none; box-shadow: none; transition: color .15s, background .15s; }
.topbar nav.side > a:hover, .topbar nav.side > details > summary:hover { color: #fff; background: none; text-decoration: none; }
.topbar nav.side > a.on, .topbar nav.side > details.on > summary, .topbar nav.side > details[open] > summary { color: #fff; font-weight: 500; background: rgba(51, 65, 85, .6); box-shadow: none; }
.topbar summary::-webkit-details-marker { display: none; }
.topbar nav.side > details > summary::after { content: ''; width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.topbar details { position: relative; }
.ng-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 50; min-width: 232px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: rgba(15, 23, 42, .97); border: 1px solid rgba(71, 85, 105, .5); border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(2, 6, 23, .7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.ng-menu.right { left: auto; right: 0; }
.topbar .ng-menu a, .topbar .ng-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 12px; border-radius: 8px; border: 0; background: none; box-shadow: none; color: #cbd5e1; font: 400 14px/20px var(--ss-sans); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.topbar .ng-menu a:hover, .topbar .ng-item:hover { background: rgba(51, 65, 85, .5); color: #fff; text-decoration: none; }
.topbar .ng-menu a.on { background: rgba(51, 65, 85, .65); color: #fff; font-weight: 500; box-shadow: none; }
.topbar .ng-menu .nav-ic { display: inline-block; margin: 0; opacity: .75; flex: none; }
.topbar .ng-menu a.on .nav-ic { opacity: 1; color: #22d3ee; }
.topbar .ng-menu form { margin: 0; }
.who-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(71, 85, 105, .5); }
.who-card strong { color: #fff; font-size: 14px; font-weight: 600; }
.who-card span { color: #94a3b8; font-size: 12px; word-break: break-all; }
.topbar-end { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.topbar .kbar-open { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; padding: 6px 10px 6px 12px; border-radius: 8px; background: rgba(51, 65, 85, .5); border: 1px solid rgba(100, 116, 139, .4); color: #cbd5e1; font: 500 12px/20px var(--ss-sans); cursor: pointer; order: 0; }
.topbar .kbar-open:hover { background: rgba(71, 85, 105, .55); color: #fff; }
.topbar .kbar-open kbd { font-family: var(--ss-mono); font-size: 11px; color: #94a3b8; border: 1px solid #475569; border-radius: 4px; padding: 0 5px; background: rgba(15, 23, 42, .6); }
.topbar .ng.user > summary { display: inline-flex; padding: 0; border-radius: 50%; cursor: pointer; list-style: none; }
.topbar .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #0e7490, #1d4ed8); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .15); }
.topbar .nav-toggle { display: none; order: 0; }
.app > .main { width: 100%; max-width: 80rem; margin: 0 auto; padding: 32px 24px 64px; flex: 1 0 auto; }
.app .live { top: 84px; } /* the wizard's sticky price panel clears the top bar */
.app-foot { text-align: center; font-size: 12px; color: var(--muted); padding: 16px 24px 28px; }
:root[data-theme=dark] .app-foot { color: var(--ss-faint); }
/* The light theme (from the toggle) has a light page under the bar, so the bar is solid there. */
:root:not([data-theme=dark]) .topbar { background: #0f172a; }
@media (max-width: 1150px) { .topbar .kbar-open > span, .topbar .kbar-open kbd { display: none; } .topbar .kbar-open { padding: 6px 8px; } .topbar .powered { display: none; } }
@media (max-width: 900px) {
  .topbar-in { flex-wrap: wrap; gap: 12px; padding: 10px 16px; }
  .topbar .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 8px; background: rgba(51, 65, 85, .5); border: 1px solid rgba(100, 116, 139, .4); color: #e2e8f0; cursor: pointer; }
  .topbar nav.side { display: none; order: 5; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 4px; border-top: 1px solid rgba(51, 65, 85, .55); }
  .topbar nav.side.open { display: flex; }
  .topbar nav.side > a, .topbar nav.side > details > summary { display: flex; }
  .topbar nav.side > details > .ng-menu { position: static; min-width: 0; margin: 2px 0 6px 12px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .app > .main { padding: 20px 16px 48px; }
}

/* ---------- Cards and panels: the mockup's glass ---------- */
.card { padding: 24px; }
:root[data-theme=dark] .card { background: rgba(30, 41, 59, .5); border: 1px solid rgba(71, 85, 105, .45); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -24px rgba(2, 6, 23, .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
:root[data-theme=dark] .card.dark { background: linear-gradient(135deg, rgba(13, 148, 136, .16), rgba(30, 41, 59, .6)); border-color: rgba(45, 212, 191, .3); color: var(--ink); }
:root[data-theme=dark] fieldset { background: rgba(15, 23, 42, .4); border-color: rgba(71, 85, 105, .45); border-radius: 14px; }
:root[data-theme=dark] .opt { border-color: rgba(71, 85, 105, .5); background: rgba(15, 23, 42, .35); }
:root[data-theme=dark] .opt:has(input:checked) { border-color: rgba(34, 211, 238, .6); background: rgba(8, 145, 178, .14); box-shadow: none; }
:root[data-theme=dark] .flash { background: rgba(16, 185, 129, .15); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, .3); }

/* ---------- Buttons: the mockup's white call to action, and slate for secondary actions ---------- */
:root[data-theme=dark] .btn, :root[data-theme=dark] .pmain .btn:not(.ghost) { background: #fff; color: #0f172a; border: 1px solid #fff; border-radius: 8px; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(2, 6, 23, .6); filter: none; transition: background .15s, border-color .15s; }
:root[data-theme=dark] .btn:hover, :root[data-theme=dark] .pmain .btn:not(.ghost):hover { background: #e2e8f0; border-color: #e2e8f0; color: #0f172a; filter: none; }
:root[data-theme=dark] .btn.ghost, :root[data-theme=dark] .pmain .btn.ghost { background: rgba(51, 65, 85, .55); color: #f1f5f9; border: 1px solid rgba(100, 116, 139, .45); border-radius: 8px; font-weight: 500; box-shadow: none; }
:root[data-theme=dark] .btn.ghost:hover, :root[data-theme=dark] .pmain .btn.ghost:hover { background: rgba(71, 85, 105, .6); color: #fff; border-color: rgba(148, 163, 184, .5); }
:root[data-theme=dark] .btn.danger, :root[data-theme=dark] .btn.danger:hover, :root[data-theme=dark] .pmain .btn.danger, :root[data-theme=dark] .pmain .btn.danger:hover { background: #be123c; border-color: #be123c; color: #fff; box-shadow: none; }
:root[data-theme=dark] .btn:disabled, :root[data-theme=dark] .pmain .btn:disabled { background: rgba(51, 65, 85, .45); color: #94a3b8; border-color: transparent; box-shadow: none; cursor: not-allowed; }

/* ---------- Forms ---------- */
:root[data-theme=dark] input[type=text], :root[data-theme=dark] input[type=number], :root[data-theme=dark] input[type=email], :root[data-theme=dark] input[type=date], :root[data-theme=dark] input[type=password], :root[data-theme=dark] input[type=url], :root[data-theme=dark] select, :root[data-theme=dark] textarea {
  background: rgba(15, 23, 42, .6); border: 1px solid rgba(100, 116, 139, .45); color: var(--ss-ink); border-radius: 8px; }
:root[data-theme=dark] input:focus, :root[data-theme=dark] select:focus, :root[data-theme=dark] textarea:focus { outline: 2px solid #67e8f9; outline-offset: 1px; border-color: transparent; }

/* ---------- Tables (mono header, slate rows). Report paper (.slide, .cs-report, .cr-rep) keeps its own light styling. ---------- */
:root[data-theme=dark] .table-card { border-radius: 12px; border: 1px solid rgba(71, 85, 105, .45); background: rgba(30, 41, 59, .4); box-shadow: none; overflow: hidden; }
:root[data-theme=dark] th:not(.slide th, .cs-report th, .cr-rep th) { background: rgba(15, 23, 42, .55); font-family: var(--ss-mono); font-size: 12px; font-weight: 500; letter-spacing: .05em; color: #94a3b8; border-bottom: 1px solid rgba(71, 85, 105, .45); }
:root[data-theme=dark] td:not(.slide td, .cs-report td, .cr-rep td) { border-bottom: 1px solid rgba(51, 65, 85, .5); color: #e2e8f0; font-size: 14px; }
:root[data-theme=dark] tr:not(.slide tr, .cs-report tr, .cr-rep tr):hover > td { background: rgba(51, 65, 85, .3); }
:root[data-theme=dark] .cr-rep th { background: #f9fafb; color: #374151; }

/* ---------- Status and technical badges ---------- */
:root[data-theme=dark] .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ss-sans); font-size: 12px; font-weight: 600; line-height: 1.4; padding: 3px 10px; border-radius: 999px; background: rgba(51, 65, 85, .55); color: #cbd5e1; border: 1px solid rgba(100, 116, 139, .4); }
:root[data-theme=dark] .chip.ok { background: rgba(16, 185, 129, .15); color: #6ee7b7; border-color: rgba(16, 185, 129, .3); }
:root[data-theme=dark] .chip.warn { background: rgba(245, 158, 11, .1); color: #fcd34d; border-color: rgba(245, 158, 11, .25); }
:root[data-theme=dark] .chip.bad { background: rgba(244, 63, 94, .12); color: #fda4af; border-color: rgba(244, 63, 94, .3); }
:root[data-theme=dark] .chip.info { background: rgba(6, 182, 212, .1); color: #67e8f9; border-color: rgba(6, 182, 212, .25); }
:root[data-theme=dark] :is(.chip.ok, .chip.warn, .chip.bad, .chip.info)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
:root[data-theme=dark] .chip.dark, :root[data-theme=dark] .chip.sel { background: rgba(8, 145, 178, .2); color: #a5f3fc; border-color: rgba(34, 211, 238, .35); box-shadow: none; }
:root[data-theme=dark] .bar { background: rgba(51, 65, 85, .7); }
:root[data-theme=dark] .bar > i { background: linear-gradient(90deg, #22d3ee, #3b82f6); }

/* ---------- Customer portal: header and tabs in the top bar's style ---------- */
:root[data-theme=dark] .ptop { background: rgba(15, 23, 42, .78); border-bottom: 1px solid rgba(51, 65, 85, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root[data-theme=dark] .ptabs { background: rgba(15, 23, 42, .45); border-bottom: 1px solid rgba(51, 65, 85, .55); padding-top: 8px; padding-bottom: 8px; gap: 4px; }
:root[data-theme=dark] .ptabs a { padding: 6px 12px; border-radius: 8px; color: #cbd5e1; font-weight: 400; box-shadow: none; }
:root[data-theme=dark] .ptabs a:hover { color: #fff; }
:root[data-theme=dark] .ptabs a.on { color: #fff; font-weight: 500; background: rgba(51, 65, 85, .6); box-shadow: none; }
:root[data-theme=dark] .ptabs .count { background: #0e7490; color: #fff; }
:root[data-theme=dark] .pmark { background: linear-gradient(135deg, #0e7490, #1d4ed8); color: #fff; }
:root[data-theme=dark] .plogo { background: #fff; padding: 4px 8px; border-radius: 8px; box-sizing: content-box; height: 36px; }

/* ---------- Public pages (sign-in, portal sign-in, trust): always dark ---------- */
.ss-page { min-height: 100vh; display: flex; flex-direction: column; color: var(--ss-ink); font-family: var(--ss-sans); -webkit-font-smoothing: antialiased; }
.ss-page h1, .ss-page h2 { font-family: var(--ss-sans); }
:root .ss-page a { color: inherit; }
.ss-page :focus-visible { outline: 2px solid var(--ss-cyan-2); outline-offset: 2px; }
/* The landing page's flowing lines, on the right as in the mockup. */
.ss-landing::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' fill='none' stroke='%235eead4' stroke-width='1.2'%3E%3Cpath d='M-60 90C-32 103 50 152 105 171C160 190 215 203 270 204C325 205 380 186 435 176C490 166 545 150 600 143C655 137 710 140 765 137C820 133 875 132 930 120C985 109 1040 83 1095 67C1150 51 1232 31 1260 24' stroke-opacity='0.05'/%3E%3Cpath d='M-60 152C-32 165 50 217 105 234C160 252 215 258 270 256C325 254 380 232 435 221C490 210 545 196 600 189C655 181 710 185 765 178C820 171 875 163 930 149C985 134 1040 104 1095 89C1150 74 1232 63 1260 58' stroke-opacity='0.07'/%3E%3Cpath d='M-60 217C-32 231 50 282 105 297C160 312 215 312 270 306C325 301 380 277 435 264C490 252 545 240 600 232C655 224 710 225 765 215C820 205 875 191 930 173C985 156 1040 125 1095 112C1150 99 1232 100 1260 97' stroke-opacity='0.09'/%3E%3Cpath d='M-60 286C-32 298 50 347 105 358C160 370 215 362 270 353C325 344 380 319 435 306C490 292 545 282 600 273C655 263 710 261 765 248C820 235 875 215 930 196C985 178 1040 147 1095 138C1150 129 1232 142 1260 143' stroke-opacity='0.10'/%3E%3Cpath d='M-60 355C-32 365 50 409 105 416C160 423 215 408 270 396C325 384 380 359 435 345C490 330 545 322 600 311C655 300 710 294 765 278C820 263 875 237 930 219C985 200 1040 173 1095 169C1150 165 1232 190 1260 195' stroke-opacity='0.12'/%3E%3Cpath d='M-60 424C-32 431 50 467 105 469C160 471 215 450 270 435C325 421 380 396 435 381C490 366 545 359 600 346C655 334 710 323 765 306C820 289 875 259 930 243C985 226 1040 204 1095 206C1150 208 1232 245 1260 253' stroke-opacity='0.13'/%3E%3Cpath d='M-60 489C-32 494 50 520 105 517C160 513 215 487 270 470C325 454 380 431 435 415C490 400 545 393 600 380C655 366 710 351 765 333C820 315 875 284 930 270C985 256 1040 242 1095 250C1150 258 1232 306 1260 318' stroke-opacity='0.14'/%3E%3Cpath d='M-60 550C-32 552 50 566 105 558C160 550 215 520 270 502C325 484 380 463 435 448C490 433 545 426 600 412C655 397 710 378 765 360C820 342 875 312 930 302C985 292 1040 287 1095 301C1150 315 1232 372 1260 386' stroke-opacity='0.14'/%3E%3Cpath d='M-60 606C-32 604 50 606 105 594C160 581 215 550 270 531C325 512 380 495 435 481C490 466 545 459 600 444C655 428 710 407 765 389C820 372 875 344 930 339C985 334 1040 339 1095 358C1150 378 1232 440 1260 457' stroke-opacity='0.14'/%3E%3Cpath d='M-60 654C-32 649 50 640 105 624C160 608 215 577 270 559C325 540 380 527 435 513C490 499 545 492 600 476C655 461 710 437 765 421C820 406 875 383 930 383C985 383 1040 397 1095 421C1150 445 1232 510 1260 528' stroke-opacity='0.14'/%3E%3Cpath d='M-60 696C-32 688 50 669 105 650C160 632 215 603 270 586C325 569 380 559 435 547C490 534 545 526 600 511C655 496 710 470 765 457C820 444 875 427 930 432C985 437 1040 461 1095 488C1150 516 1232 579 1260 597' stroke-opacity='0.13'/%3E%3Cpath d='M-60 730C-32 721 50 693 105 674C160 655 215 630 270 614C325 599 380 594 435 583C490 572 545 561 600 547C655 533 710 508 765 498C820 488 875 477 930 487C985 497 1040 529 1095 558C1150 587 1232 645 1260 662' stroke-opacity='0.12'/%3E%3Cpath d='M-60 759C-32 749 50 715 105 696C160 677 215 658 270 645C325 633 380 631 435 621C490 611 545 600 600 586C655 573 710 549 765 542C820 535 875 532 930 547C985 561 1040 598 1095 627C1150 657 1232 707 1260 723' stroke-opacity='0.10'/%3E%3Cpath d='M-60 784C-32 773 50 737 105 720C160 702 215 689 270 680C325 670 380 671 435 662C490 654 545 640 600 628C655 616 710 594 765 590C820 587 875 592 930 609C985 627 1040 668 1095 696C1150 724 1232 763 1260 777' stroke-opacity='0.09'/%3E%3Cpath d='M-60 806C-32 795 50 760 105 745C160 731 215 725 270 718C325 712 380 714 435 706C490 698 545 683 600 672C655 662 710 642 765 642C820 642 875 654 930 674C985 693 1040 735 1095 761C1150 786 1232 814 1260 825' stroke-opacity='0.07'/%3E%3Cpath d='M-60 827C-32 818 50 786 105 775C160 764 215 764 270 760C325 756 380 759 435 752C490 745 545 727 600 718C655 709 710 693 765 696C820 699 875 717 930 738C985 759 1040 800 1095 821C1150 842 1232 859 1260 866' stroke-opacity='0.05'/%3E%3C/svg%3E") no-repeat 100% 30% / max(1100px, 75vw) auto; -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 65%); mask-image: linear-gradient(90deg, transparent 15%, #000 65%); }
.ss-top { border-bottom: 1px solid rgba(51, 65, 85, .55); }
.ss-head { width: 100%; max-width: 72rem; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
:root .ss-page .brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.ss-head .wm { font-size: 21px; color: #fff; }
.ss-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
:root .ss-page .ss-nav a { color: #cbd5e1; text-decoration: none; transition: color .15s; }
:root .ss-page .ss-nav a:hover { color: #fff; }
:root .ss-page .ss-nav .pill { padding: 8px 16px; border-radius: 8px; background: rgba(51, 65, 85, .55); border: 1px solid rgba(100, 116, 139, .45); color: #f8fafc; font-weight: 600; transition: background .15s; }
:root .ss-page .ss-nav .pill:hover { background: rgba(71, 85, 105, .6); color: #fff; }
.ss-main { flex: 1; display: flex; align-items: center; padding: 56px 24px 40px; }
.ss-grid { width: 100%; max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }

/* Hero: blue pill, big headline with a glowing cyan-to-teal "Ship it.", the email box and the terminal. */
.ss-eyebrow { display: inline-block; margin: 0 0 20px; padding: 6px 12px; border-radius: 999px; background: rgba(59, 130, 246, .14); border: 1px solid rgba(96, 165, 250, .35); color: #93c5fd; font: 600 12px/1.2 var(--ss-sans); letter-spacing: .04em; text-transform: uppercase; }
.ss-hero h1 { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.04; color: #f8fafc; margin: 0 0 20px; }
.ss-hero h1 em { font-style: normal; background: linear-gradient(90deg, #38bdf8, #2dd4bf 60%, #5eead4); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(45, 212, 191, .6)); }
.ss-hero .lede { font-size: 18px; line-height: 1.6; color: #cbd5e1; max-width: 36rem; margin: 0 0 28px; }
:root .ss-page .ss-start, :root .ss-page .ss-group { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 10px; background: rgba(30, 41, 59, .7); border: 1px solid rgba(100, 116, 139, .4); transition: border-color .15s, box-shadow .15s; }
:root .ss-page .ss-start { max-width: 30rem; }
:root .ss-page :is(.ss-start, .ss-group):focus-within { border-color: rgba(103, 232, 249, .6); box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
:root .ss-page :is(.ss-start, .ss-group) input[type=email] { flex: 1; min-width: 0; width: auto; margin: 0; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; color: #f1f5f9; font: 400 15px/1.4 var(--ss-sans); box-shadow: none; }
:root .ss-page :is(.ss-start, .ss-group) input[type=email]::placeholder { color: #94a3b8; opacity: 1; }
:root .ss-page :is(.ss-start, .ss-group) input[type=email]:focus { outline: none; }
:root .ss-page :is(.ss-start, .ss-group) button { flex: none; width: auto; margin: 0; padding: 10px 18px; border-radius: 7px; font: 600 14px/1.2 var(--ss-sans); cursor: pointer; box-shadow: none; transition: background .15s; }
:root .ss-page .ss-start button { border: 1px solid #fff; background: #fff; color: #0f172a; }
:root .ss-page .ss-start button:hover { background: #e2e8f0; border-color: #e2e8f0; }
.ss-start-note { margin: 12px 0 0; font-size: 13px; color: #94a3b8; }
.term { margin-top: 44px; max-width: 34rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(100, 116, 139, .35); background: rgba(15, 23, 42, .7); box-shadow: 0 30px 60px -24px rgba(2, 6, 23, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.term-bar { display: flex; align-items: flex-end; gap: 16px; padding: 10px 12px 0; background: rgba(51, 65, 85, .55); }
.term-bar .lights { display: flex; gap: 7px; padding-bottom: 12px; }
.term-bar .lights i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #64748b; }
.term-tab { display: inline-flex; align-items: center; gap: 18px; padding: 9px 14px; border-radius: 8px 8px 0 0; background: rgba(15, 23, 42, .85); color: #e2e8f0; font: 500 13px/1.2 var(--ss-sans); }
.term-tab .x { color: #94a3b8; font-size: 15px; line-height: 1; }
.term-body { padding: 14px 18px 22px; font: 400 13.5px/1.85 var(--ss-mono); color: #e2e8f0; background: linear-gradient(160deg, rgba(15, 23, 42, .85), rgba(17, 94, 89, .22)); }
.term-body .ok { color: #4ade80; }

/* The sign-in card, on the teal glow. */
.ss-side { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; }
.ss-side::before { content: ''; position: absolute; inset: -80px -50px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 184, 166, .3), transparent); pointer-events: none; }
.ss-card { position: relative; border-radius: 16px; background: rgba(30, 41, 59, .62); border: 1px solid rgba(148, 163, 184, .22); padding: 32px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -24px rgba(2, 6, 23, .7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 24px; }
.ss-card.ss-signin { width: 100%; max-width: 27rem; gap: 16px; border-color: rgba(153, 200, 220, .3); }
.ss-signin-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ss-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0; }
.ss-card p { margin: 0; font-size: 14px; line-height: 1.625; color: #94a3b8; }
.ss-devtag { font-family: var(--ss-mono); font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(245, 158, 11, .1); color: #fcd34d; border: 1px solid rgba(245, 158, 11, .2); }
:root .ss-page .ss-ms { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; border-radius: 8px; background: #fff; color: #0f172a; font-weight: 500; font-size: 15px; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(2, 6, 23, .6); transition: background .15s; }
:root .ss-page .ss-ms:hover { background: #e2e8f0; }
.ss-card .ss-caption { margin-top: -4px; text-align: center; font-size: 13px; }
.ss-or { display: flex; align-items: center; gap: 12px; color: #94a3b8; font-size: 13px; }
.ss-or::before, .ss-or::after { content: ''; flex: 1; height: 1px; background: rgba(100, 116, 139, .4); }
.ss-email label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #e2e8f0; }
:root .ss-page .ss-group button { border: 1px solid rgba(100, 116, 139, .45); background: rgba(71, 85, 105, .6); color: #f8fafc; }
:root .ss-page .ss-group button:hover { background: rgba(100, 116, 139, .65); }
.ss-badges { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(100, 116, 139, .3); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ss-badges li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1.3; color: #94a3b8; }
.ss-badges svg { flex: none; color: #60a5fa; }
.ss-badges b { flex: none; font-size: 15px; font-weight: 800; letter-spacing: .02em; color: #e2e8f0; }
:root .ss-page .ss-trustlink { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 12px; line-height: 1.35; color: #94a3b8; text-decoration: none; transition: color .15s; }
:root .ss-page .ss-trustlink:hover { color: #e2e8f0; }

/* Links row (customer portal sign-in). */
.ss-links { padding-top: 16px; border-top: 1px solid rgba(100, 116, 139, .3); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #94a3b8; }
:root .ss-page .ss-links a { color: #94a3b8; text-decoration: none; transition: color .15s; }
:root .ss-page .ss-links a:hover { color: #22d3ee; }

.ss-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.ss-center .ss-card { max-width: 28rem; width: 100%; }
.ss-portal-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ss-portal-head h1 { font-size: 24px; font-weight: 700; letter-spacing: normal; color: #fff; margin: 0; padding-top: 8px; }
.ss-pill-blue { font-family: var(--ss-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; background: rgba(59, 130, 246, .14); color: #93c5fd; border: 1px solid rgba(96, 165, 250, .35); }

.trust { width: 100%; max-width: 64rem; margin: 0 auto; padding: 48px 24px; display: flex; flex-direction: column; gap: 40px; }
.trust-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
:root .ss-page .ss-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ss-mono); font-size: 12px; color: #22d3ee; text-decoration: none; }
:root .ss-page .ss-back:hover { color: #67e8f9; }
.trust-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: #fff; margin: 0; }
.trust-lede { font-size: 18px; line-height: 1.75; color: #cbd5e1; max-width: 48rem; margin: 0; }
.trust-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.tcard { padding: 24px; border-radius: 16px; background: rgba(30, 41, 59, .5); border: 1px solid rgba(71, 85, 105, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ttag { font-family: var(--ss-mono); font-size: 12px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; border: 1px solid; }
.ttag.cyan { background: rgba(6, 182, 212, .1); color: #67e8f9; border-color: rgba(6, 182, 212, .25); }
.ttag.ok { background: rgba(16, 185, 129, .1); color: #6ee7b7; border-color: rgba(16, 185, 129, .25); }
.ttag.blue { background: rgba(59, 130, 246, .12); color: #93c5fd; border-color: rgba(59, 130, 246, .3); }
.tcard h2, :root .ss-page .trust-body h2 { font-size: 18px; font-weight: 700; color: #fff; margin: 0; }
.tcard p { margin: 0; font-size: 14px; line-height: 1.625; color: #94a3b8; }
.trust-body { display: flex; flex-direction: column; gap: 24px; }
:root .ss-page .trust-body .card { margin: 0 !important; padding: 24px; border-radius: 16px; background: rgba(30, 41, 59, .5); border: 1px solid rgba(71, 85, 105, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); color: #cbd5e1; backdrop-filter: none; }
:root .ss-page .trust-body .card h2 { margin-bottom: 12px; }
:root .ss-page .trust-body p, :root .ss-page .trust-body li { font-size: 14px; line-height: 1.625; color: #94a3b8; }
:root .ss-page .trust-body strong { color: #e2e8f0; }
:root .ss-page .trust-body a { color: #67e8f9; }
.ss-page .scope-diagram { --line-strong: #475569; --ink: #f1f5f9; --ink2: #cbd5e1; --muted: #94a3b8; --surface: #0f172a; --accent: #22d3ee; width: 100%; height: auto; }
.ss-page .legal-foot { color: var(--ss-faint); font-size: 12px; text-align: center; padding: 8px 24px 32px; }

@media (min-width: 640px) {
  .ss-hero h1 { font-size: 60px; } .ss-hero .lede { font-size: 20px; }
  .ss-card { padding: 40px; } .ss-card.ss-signin { padding: 32px 36px; }
  .trust-head h1 { font-size: 48px; line-height: 1; }
}
@media (min-width: 768px) { .trust-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ss-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } .ss-hero h1 { font-size: 66px; } }
@media (max-width: 639px) {
  .ss-head { padding: 14px 16px; } .ss-nav { gap: 16px; } .ss-head .wm { font-size: 19px; }
  .ss-main { padding: 32px 16px; }
  :root .ss-page :is(.ss-start, .ss-group) button { padding: 10px 12px; }
  .term-body { font-size: 12px; padding: 12px 14px 18px; }
  .ss-badges { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }