:root {
  --bg: #070912;
  --bg-soft: #0b0e19;
  --panel: rgba(17, 20, 35, .82);
  --panel-solid: #111423;
  --panel-2: #15192b;
  --text: #f5f7ff;
  --muted: #a5abc0;
  --muted-2: #72798f;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --teal: #28f0d5;
  --teal-soft: rgba(40, 240, 213, .12);
  --purple: #8d5cff;
  --orange: #ff7a45;
  --orange-soft: rgba(255, 122, 69, .12);
  --green: #5cf28f;
  --danger: #ff6178;
  --warning: #ffc462;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 30px 80px rgba(0, 0, 0, .34);
  --font-display: "Arial Black", "Segoe UI", system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; color-scheme: dark; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -3; background-image: linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }
code { padding: 3px 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: rgba(0,0,0,.25); color: #bffdf3; font-size: .86em; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -2; }
.ambient span { position: absolute; border-radius: 50%; filter: blur(12px); opacity: .7; }
.ambient span:nth-child(1) { width: 520px; height: 520px; top: -260px; left: -160px; background: radial-gradient(circle, rgba(40,240,213,.16), transparent 68%); }
.ambient span:nth-child(2) { width: 620px; height: 620px; right: -280px; top: 6%; background: radial-gradient(circle, rgba(141,92,255,.14), transparent 68%); }
.ambient span:nth-child(3) { width: 520px; height: 520px; bottom: -300px; left: 32%; background: radial-gradient(circle, rgba(255,122,69,.1), transparent 68%); }

.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand img { flex: 0 0 auto; filter: drop-shadow(0 0 22px rgba(40,240,213,.15)); }
.brand span { display: grid; line-height: 1; }
.brand strong { font-family: var(--font-display); font-size: 17px; letter-spacing: -.04em; }
.brand small { margin-top: 5px; color: var(--teal); font-size: 8px; font-weight: 900; letter-spacing: .22em; }

.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before, .kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.orange-eyebrow, .admin-eyebrow { color: var(--orange); }
.quiet-link { color: #c5cad8; font-size: 13px; font-weight: 800; transition: color .2s; }
.quiet-link:hover { color: #fff; }

.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .01em; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .icon-button:focus-visible, .menu-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button-primary { color: #04110f; background: linear-gradient(135deg, var(--teal), #8bf7d1); box-shadow: 0 14px 32px rgba(40,240,213,.17); }
.button-primary:hover:not(:disabled) { box-shadow: 0 18px 38px rgba(40,240,213,.24); }
.button-secondary { background: rgba(255,255,255,.05); border-color: var(--line-strong); }
.button-secondary:hover:not(:disabled) { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); }
.button-orange { color: #1c0903; background: linear-gradient(135deg, var(--orange), #ffb05f); box-shadow: 0 14px 32px rgba(255,122,69,.18); }
.button-danger { background: rgba(255,97,120,.1); border-color: rgba(255,97,120,.25); color: #ffb6c0; }
.button-block { width: 100%; }
.button-small { min-height: 38px; padding: 0 13px; font-size: 11px; }
.text-button { padding: 4px; border: 0; background: transparent; color: #c2c7d7; cursor: pointer; font-weight: 800; }
.text-button:hover { color: #fff; }

.flash-stack { display: grid; gap: 10px; width: min(100%, 1000px); margin: 0 auto 20px; }
.flash { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(17,20,35,.92); color: #dce0eb; box-shadow: 0 12px 30px rgba(0,0,0,.22); font-size: 13px; }
.flash-pulse { width: 8px; height: 8px; margin-top: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }
.flash-error { border-color: rgba(255,97,120,.28); color: #ffc0c8; }
.flash-error .flash-pulse { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
.flash-warning { border-color: rgba(255,196,98,.28); color: #ffe1ad; }
.flash-warning .flash-pulse { background: var(--warning); box-shadow: 0 0 12px var(--warning); }
.flash-success { border-color: rgba(92,242,143,.25); color: #b7ffcb; }
.flash-success .flash-pulse { background: var(--green); box-shadow: 0 0 12px var(--green); }

.auth-page, .install-page { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
.auth-header, .install-header { width: min(1240px, calc(100% - 40px)); min-height: 86px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.auth-main, .install-main { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 54px 0 70px; display: grid; align-content: center; }
.auth-footer { width: min(1240px, calc(100% - 40px)); min-height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.auth-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .72fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.auth-grid-wide { grid-template-columns: minmax(0, .9fr) minmax(480px, .78fr); }
.auth-story h1 { max-width: 760px; margin: 18px 0 24px; font-family: var(--font-display); font-size: clamp(44px, 6vw, 82px); line-height: .97; letter-spacing: -.07em; text-transform: uppercase; }
.auth-story h1 span { display: block; color: transparent; background: linear-gradient(90deg, var(--teal), #f8f8ff 46%, var(--purple) 76%, var(--orange)); background-clip: text; -webkit-background-clip: text; }
.auth-story p { max-width: 650px; margin: 0; color: #b6bccd; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.8; }
.security-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.security-strip span { padding: 8px 10px; border: 1px solid rgba(40,240,213,.16); border-radius: 999px; background: rgba(40,240,213,.05); color: #b9f8ef; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.orange-strip span { border-color: rgba(255,122,69,.19); background: rgba(255,122,69,.06); color: #ffd2be; }
.feature-list { padding: 0; margin: 30px 0 0; list-style: none; display: grid; gap: 12px; }
.feature-list li { display: flex; align-items: center; gap: 11px; color: #cfd3df; font-size: 13px; }
.feature-list li::before { content: "✓"; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: var(--teal); color: #04110f; font-weight: 950; font-size: 11px; }

.auth-card, .install-card, .panel { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(19,23,39,.92), rgba(10,13,23,.88)); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.auth-card::before, .install-card::before, .panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(40,240,213,.055), transparent 35%, rgba(141,92,255,.035) 68%, transparent); }
.auth-card { padding: clamp(26px, 4vw, 42px); overflow: hidden; }
.auth-card::after { content: "OCS"; position: absolute; right: -10px; bottom: -30px; pointer-events: none; color: rgba(255,255,255,.018); font-family: var(--font-display); font-size: 120px; line-height: 1; letter-spacing: -.1em; }
.admin-auth-card::before { background: linear-gradient(135deg, rgba(255,122,69,.08), transparent 42%, rgba(141,92,255,.03)); }
.card-heading { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.card-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: linear-gradient(135deg, rgba(40,240,213,.19), rgba(141,92,255,.16)); border: 1px solid rgba(40,240,213,.19); color: #fff; font-weight: 950; }
.orange-icon { background: linear-gradient(135deg, rgba(255,122,69,.2), rgba(141,92,255,.15)); border-color: rgba(255,122,69,.23); }
.card-heading small { color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.admin-auth-card .card-heading small { color: var(--orange); }
.card-heading h2 { margin: 2px 0 0; font-size: 25px; letter-spacing: -.04em; }
.form-stack { position: relative; z-index: 1; display: grid; gap: 16px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span { color: #d8dce8; font-size: 11px; font-weight: 850; letter-spacing: .02em; }
.field small { color: var(--muted-2); font-size: 10px; line-height: 1.45; }
.field input, .field select, .field textarea { width: 100%; min-height: 47px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(4,7,13,.64); color: #fff; padding: 12px 13px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.field textarea { min-height: 105px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,.24); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(40,240,213,.58); box-shadow: 0 0 0 4px rgba(40,240,213,.08); background: rgba(4,7,13,.82); }
.admin-page .field input:focus, .admin-page .field select:focus, .admin-page .field textarea:focus, .admin-auth-card .field input:focus { border-color: rgba(255,122,69,.6); box-shadow: 0 0 0 4px rgba(255,122,69,.08); }
.form-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted-2); font-size: 11px; }
.form-between a, .auth-card-foot a { color: #dffefa; font-weight: 850; }
.auth-card-foot { position: relative; z-index: 1; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; }
.admin-entry { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: #aeb4c5; background: rgba(255,255,255,.02); font-size: 11px; font-weight: 800; }
.admin-entry:hover { color: #fff; border-color: var(--line-strong); }
.center-card { width: min(540px, 100%); margin: auto; text-align: center; }
.compact-card h1 { margin: 10px 0 12px; font-size: 34px; letter-spacing: -.05em; }
.compact-card p { color: #b8bed0; }
.signal-mark { width: 72px; height: 72px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(135deg, rgba(40,240,213,.2), rgba(141,92,255,.18)); border: 1px solid rgba(40,240,213,.22); color: var(--teal); font-family: var(--font-display); font-size: 20px; box-shadow: 0 0 40px rgba(40,240,213,.1); }
.signal-mark.warning { color: var(--orange); background: linear-gradient(135deg, rgba(255,122,69,.2), rgba(141,92,255,.18)); border-color: rgba(255,122,69,.23); }
.secondary-form { margin-top: 14px; }
.maintenance-logo { width: 160px; margin: -18px auto -10px; }

.install-header { min-height: 94px; }
.version-pill { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); color: #adb3c5; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.install-main { width: min(980px, calc(100% - 40px)); }
.install-card { padding: clamp(26px, 5vw, 52px); overflow: hidden; }
.install-card-wide { width: min(980px, 100%); }
.install-progress { display: grid; grid-template-columns: 34px 1fr 34px 1fr 34px 1fr 34px; align-items: center; max-width: 560px; margin: 0 auto 36px; }
.install-progress span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: #0b0e19; color: var(--muted-2); font-size: 11px; font-weight: 950; }
.install-progress i { height: 1px; background: var(--line-strong); }
.install-progress span.active { border-color: rgba(40,240,213,.55); background: rgba(40,240,213,.11); color: var(--teal); box-shadow: 0 0 22px rgba(40,240,213,.12); }
.install-progress span.complete { border-color: var(--teal); background: var(--teal); color: #03110f; }
.install-progress i.complete { background: linear-gradient(90deg, var(--teal), rgba(40,240,213,.22)); }
.install-heading { max-width: 720px; margin-bottom: 28px; }
.install-heading h1 { margin: 12px 0 10px; font-family: var(--font-display); font-size: clamp(34px, 5vw, 54px); line-height: 1; letter-spacing: -.06em; text-transform: uppercase; }
.install-heading p { margin: 0; color: #b4bacb; }
.requirements-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.requirement { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.requirement > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-weight: 950; }
.requirement.pass > span { background: rgba(92,242,143,.13); color: var(--green); }
.requirement.fail > span { background: rgba(255,97,120,.13); color: var(--danger); }
.requirement div { display: grid; }
.requirement strong { font-size: 12px; }
.requirement small { color: var(--muted-2); font-size: 10px; }
.install-form { margin-top: 8px; }
.install-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.install-actions > div { display: grid; }
.install-actions strong { font-size: 12px; }
.install-actions small { color: var(--muted-2); font-size: 10px; }
.warning-box, .info-box { padding: 14px 15px; border: 1px solid rgba(255,196,98,.2); border-radius: 12px; background: rgba(255,196,98,.055); color: #ffe1ad; font-size: 11px; }
.info-box { display: grid; gap: 4px; border-color: rgba(40,240,213,.18); background: rgba(40,240,213,.05); color: #c9faf3; }
.info-box span { color: var(--muted); }
.completion-card { width: min(660px, 100%); margin: auto; text-align: center; }
.completion-mark { width: 86px; height: 86px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 28px; background: linear-gradient(135deg, var(--teal), #8bf7d1); color: #04110f; font-family: var(--font-display); font-size: 34px; box-shadow: 0 0 55px rgba(40,240,213,.18); }
.completion-card h1 { margin: 12px 0; font-family: var(--font-display); font-size: clamp(34px, 5vw, 52px); line-height: 1; letter-spacing: -.06em; text-transform: uppercase; }
.completion-card > p { color: #b9bfce; }
.completion-details { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 24px 0; }
.completion-details div { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.completion-details span { color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.completion-details strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }

.portal-page { overflow: hidden; }
.portal-shell { min-height: 100vh; display: grid; grid-template-columns: 266px minmax(0, 1fr); }
.sidebar { position: relative; z-index: 20; height: 100vh; display: flex; flex-direction: column; padding: 20px 16px; border-right: 1px solid var(--line); background: rgba(7,9,18,.94); backdrop-filter: blur(20px); overflow-y: auto; }
.sidebar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(40,240,213,.035), transparent 30%, rgba(141,92,255,.02)); }
.sidebar-brand { position: relative; z-index: 1; padding: 6px 8px 20px; border-bottom: 1px solid var(--line); }
.sidebar-brand strong { font-size: 15px; }
.sidebar-brand small { font-size: 7px; }
.side-nav { position: relative; z-index: 1; display: grid; gap: 5px; padding: 18px 0; }
.nav-label { margin: 13px 10px 5px; color: #626a80; font-size: 8px; font-weight: 950; letter-spacing: .17em; text-transform: uppercase; }
.side-nav a, .nav-disabled { min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 7px 10px; border: 1px solid transparent; border-radius: 11px; color: #aeb4c5; font-size: 12px; font-weight: 800; transition: background .2s, border-color .2s, color .2s; }
.side-nav a:hover { color: #fff; background: rgba(255,255,255,.04); }
.side-nav a.active { color: #fff; border-color: rgba(40,240,213,.16); background: linear-gradient(90deg, rgba(40,240,213,.1), rgba(40,240,213,.025)); box-shadow: inset 3px 0 0 var(--teal); }
.admin-sidebar .side-nav a.active { border-color: rgba(255,122,69,.18); background: linear-gradient(90deg, rgba(255,122,69,.11), rgba(255,122,69,.02)); box-shadow: inset 3px 0 0 var(--orange); }
.nav-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: rgba(255,255,255,.045); color: #d7dbe6; font-size: 9px; font-weight: 950; }
.side-nav a.active .nav-icon { background: rgba(40,240,213,.14); color: var(--teal); }
.admin-sidebar .side-nav a.active .nav-icon { background: rgba(255,122,69,.14); color: var(--orange); }
.nav-disabled { opacity: .42; cursor: not-allowed; }
.sidebar-foot { position: relative; z-index: 1; margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 13px 10px; border-top: 1px solid var(--line); color: #8d94a8; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 13px var(--teal); }
.status-dot.orange { background: var(--orange); box-shadow: 0 0 13px var(--orange); }
.admin-clearance { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 4px 0; padding: 10px 11px; border: 1px solid rgba(255,122,69,.17); border-radius: 10px; background: rgba(255,122,69,.045); }
.admin-clearance span { color: #a99186; font-size: 7px; font-weight: 950; letter-spacing: .14em; }
.admin-clearance strong { color: var(--orange); font-size: 9px; letter-spacing: .1em; }

.portal-stage { min-width: 0; height: 100vh; overflow-y: auto; }
.portal-topbar { position: sticky; top: 0; z-index: 15; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--line); background: rgba(7,9,18,.82); backdrop-filter: blur(22px); }
.portal-topbar > div:nth-child(2) { display: grid; }
.portal-topbar > div:nth-child(2) > strong { font-size: 14px; }
.account-menu { display: flex; align-items: center; gap: 10px; }
.account-menu > span:nth-child(2) { display: grid; line-height: 1.2; }
.account-menu > span:nth-child(2) strong { font-size: 11px; }
.account-menu > span:nth-child(2) small { margin-top: 4px; color: var(--muted-2); font-size: 9px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, rgba(40,240,213,.2), rgba(141,92,255,.19)); border: 1px solid rgba(40,240,213,.2); color: #fff; font-size: 10px; font-weight: 950; }
.admin-avatar { background: linear-gradient(135deg, rgba(255,122,69,.2), rgba(141,92,255,.19)); border-color: rgba(255,122,69,.2); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); color: #aeb4c5; cursor: pointer; }
.icon-button:hover { color: #fff; border-color: var(--line-strong); }
.menu-button { display: none; width: 38px; height: 38px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; }
.menu-button span { display: block; height: 2px; margin: 3px 0; border-radius: 2px; background: #fff; }
.portal-content { width: min(1440px, 100%); margin: 0 auto; padding: clamp(24px, 3.5vw, 44px); }

.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.page-intro h1 { margin: 8px 0 6px; font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 54px); line-height: 1; letter-spacing: -.06em; text-transform: uppercase; }
.page-intro p { max-width: 760px; margin: 0; color: #aeb5c7; font-size: 13px; }
.notice { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); font-size: 12px; }
.warning-notice { border-color: rgba(255,196,98,.2); background: rgba(255,196,98,.055); color: #ffe2af; }
.notice span { color: #c5b48f; }
.notice a { margin-left: auto; color: #fff; font-weight: 900; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.metric-card { position: relative; min-height: 145px; display: grid; align-content: center; gap: 4px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(18,22,37,.86), rgba(9,12,21,.86)); box-shadow: 0 18px 45px rgba(0,0,0,.18); }
.metric-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -42px; top: -45px; border: 1px solid rgba(40,240,213,.1); border-radius: 50%; box-shadow: 0 0 40px rgba(40,240,213,.04); }
.admin-metric::after { border-color: rgba(255,122,69,.11); }
.metric-card > span { color: #788096; font-size: 8px; font-weight: 950; letter-spacing: .16em; }
.metric-card > strong { font-family: var(--font-display); font-size: 38px; line-height: 1; letter-spacing: -.05em; }
.metric-card > small { color: #8f96aa; font-size: 9px; }
.metric-word { font-size: 25px !important; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 16px; }
.panel { min-width: 0; padding: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.panel-large { min-height: 300px; }
.panel-full { grid-column: 1 / -1; }
.narrow-panel { width: min(620px, 100%); }
.panel-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel-heading > div { display: grid; }
.panel-heading h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.035em; }
.panel-heading a { color: #b9f9f0; font-size: 10px; font-weight: 850; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 7px; font-weight: 950; letter-spacing: .12em; white-space: nowrap; }
.status-badge.success { border-color: rgba(92,242,143,.2); background: rgba(92,242,143,.07); color: #aaffc1; }
.status-badge.danger { border-color: rgba(255,97,120,.2); background: rgba(255,97,120,.07); color: #ffb5c0; }
.status-badge.neutral { background: rgba(255,255,255,.035); color: #b9bfce; }

.readiness-list { position: relative; z-index: 1; display: grid; gap: 10px; }
.readiness-list > div { display: flex; align-items: center; gap: 13px; padding: 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 12px; background: rgba(255,255,255,.018); }
.readiness-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; font-weight: 950; font-size: 11px; }
.readiness-icon.complete { background: rgba(92,242,143,.1); color: var(--green); }
.readiness-icon.pending { background: rgba(255,196,98,.1); color: var(--warning); }
.readiness-list div div { display: grid; }
.readiness-list strong { font-size: 11px; }
.readiness-list small { color: #858da2; font-size: 9px; }
.action-list { position: relative; z-index: 1; display: grid; gap: 9px; }
.action-list a, .disabled-action { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.action-list a:hover { border-color: rgba(40,240,213,.2); background: rgba(40,240,213,.035); }
.action-list a > span, .disabled-action > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.05); color: var(--teal); font-size: 9px; font-weight: 950; }
.action-list a div, .disabled-action div { display: grid; }
.action-list strong { font-size: 11px; }
.action-list small { color: #80889d; font-size: 9px; }
.action-list b { margin-left: auto; color: var(--teal); }
.disabled-action { opacity: .45; }
.system-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.system-grid > div { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.system-grid span { color: #747c92; font-size: 8px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.system-grid strong { font-size: 15px; }
.system-grid small { color: #858da2; font-size: 9px; }
.phase-list { position: relative; z-index: 1; display: grid; gap: 9px; }
.phase-list > div { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.phase-list > div > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,122,69,.08); color: var(--orange); font-size: 9px; font-weight: 950; }
.phase-list div div { display: grid; }
.phase-list strong { font-size: 10px; }
.phase-list small { color: #7e869b; font-size: 9px; }
.panel > p { position: relative; z-index: 1; color: #aeb5c7; font-size: 12px; }
.settings-grid { align-items: start; }
.setting-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 8px 0 17px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.setting-row div { display: grid; }
.setting-row strong { font-size: 11px; }
.setting-row small { color: #848ca1; font-size: 9px; }
.switch { position: relative; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { width: 48px; height: 26px; display: block; border: 1px solid var(--line-strong); border-radius: 999px; background: #0a0d17; cursor: pointer; transition: background .2s, border-color .2s; }
.switch span::after { content: ""; width: 18px; height: 18px; position: absolute; left: 4px; top: 4px; border-radius: 50%; background: #7a8296; transition: transform .2s, background .2s; }
.switch input:checked + span { border-color: rgba(255,122,69,.4); background: rgba(255,122,69,.12); }
.switch input:checked + span::after { transform: translateX(22px); background: var(--orange); box-shadow: 0 0 14px rgba(255,122,69,.45); }
.form-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.filter-bar { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(220px,1fr) minmax(170px,.5fr) auto; gap: 12px; align-items: end; margin-bottom: 18px; }

.table-wrap { position: relative; z-index: 1; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px 13px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; white-space: nowrap; font-size: 10px; }
th { background: rgba(255,255,255,.025); color: #788096; font-size: 7px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
td { color: #bdc2d1; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255,255,255,.015); }
.truncate-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.empty-cell { padding: 28px; color: #7e869a; text-align: center; }

@media (max-width: 1100px) {
  .auth-grid, .auth-grid-wide { grid-template-columns: 1fr minmax(400px, .9fr); gap: 42px; }
  .auth-story h1 { font-size: 52px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .panel-full { grid-column: auto; }
}

@media (max-width: 860px) {
  .auth-grid, .auth-grid-wide { grid-template-columns: 1fr; }
  .auth-story { text-align: center; }
  .auth-story h1, .auth-story p { margin-left: auto; margin-right: auto; }
  .security-strip, .feature-list { justify-content: center; }
  .feature-list { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
  .portal-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: 266px; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 20px 0 50px rgba(0,0,0,.45); }
  .sidebar.open { transform: translateX(0); }
  .menu-button { display: block; }
  .portal-topbar { justify-content: flex-start; }
  .portal-topbar .account-menu { margin-left: auto; }
  .portal-stage { height: 100vh; }
}

@media (max-width: 620px) {
  .auth-header, .install-header, .auth-main, .install-main, .auth-footer { width: min(100% - 24px, 1240px); }
  .auth-header .quiet-link { display: none; }
  .auth-main, .install-main { padding: 30px 0 48px; }
  .auth-story h1 { font-size: 40px; }
  .auth-story p { font-size: 15px; }
  .auth-card, .install-card, .panel { border-radius: 17px; }
  .field-grid, .requirements-list, .completion-details, .system-grid { grid-template-columns: 1fr; }
  .install-actions, .page-intro, .notice { align-items: stretch; flex-direction: column; }
  .install-actions .button { width: 100%; }
  .auth-footer { justify-content: center; text-align: center; }
  .auth-footer span:last-child { display: none; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 120px; }
  .portal-topbar { min-height: 68px; padding: 0 14px; }
  .portal-topbar > div:nth-child(2) { display: none; }
  .account-menu > span:nth-child(2) { display: none; }
  .portal-content { padding: 22px 14px 38px; }
  .panel { padding: 17px; }
  .panel-heading { flex-direction: column; }
  .filter-bar { grid-template-columns: 1fr; }
  .form-actions .button { width: 100%; }
  .install-progress { grid-template-columns: 30px 1fr 30px 1fr 30px 1fr 30px; }
  .install-progress span { width: 30px; height: 30px; }
}

/* Portal Phase 2: catalog, carts, checkout, and order review */
.order-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .36fr); align-items: end; gap: 28px; margin-bottom: 24px; }
.order-hero.compact { grid-template-columns: minmax(0, 1fr) 300px; }
.order-hero h1 { max-width: 920px; margin: 10px 0 12px; font-family: var(--font-display); font-size: clamp(38px, 5.6vw, 70px); line-height: .98; letter-spacing: -.065em; text-transform: uppercase; }
.order-hero h1 span { display: block; color: transparent; background: linear-gradient(90deg, var(--teal), #fff 45%, var(--purple) 72%, var(--orange)); background-clip: text; -webkit-background-clip: text; }
.order-hero p { max-width: 780px; margin: 0; color: #adb4c7; }
.order-trust { display: grid; gap: 4px; padding: 18px; border: 1px solid rgba(40,240,213,.16); border-radius: 16px; background: linear-gradient(145deg, rgba(40,240,213,.075), rgba(16,19,32,.86)); box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.order-trust span { color: var(--teal); font-size: 8px; font-weight: 950; letter-spacing: .16em; }
.order-trust strong { font-family: var(--font-display); font-size: 27px; letter-spacing: -.04em; }
.order-trust small { color: #929bad; font-size: 10px; line-height: 1.55; }
.builder-shell { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.builder-form { display: grid; gap: 16px; }
.builder-panel { padding: 22px; }
.resource-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.choice-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 14px 0; }
.choice-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); cursor: pointer; }
.choice-card:hover { border-color: rgba(40,240,213,.2); background: rgba(40,240,213,.03); }
.choice-card input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--teal); flex: 0 0 auto; }
.choice-card > span { display: grid; gap: 3px; }
.choice-card strong { font-size: 11px; }
.choice-card small { color: #858da1; font-size: 9px; line-height: 1.5; }
.choice-card small a { color: #c2fbf3; text-decoration: underline; text-underline-offset: 2px; }
.choice-card.consent { margin-bottom: 10px; }
.field-help { position: relative; z-index: 1; margin: 9px 0 0; color: #8f97aa; font-size: 11px; }
.builder-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.estimate-card { position: sticky; top: 98px; display: grid; gap: 5px; padding: 24px; border: 1px solid rgba(40,240,213,.18); border-radius: 20px; background: linear-gradient(145deg, rgba(19,25,39,.95), rgba(8,11,20,.96)); box-shadow: var(--shadow); }
.estimate-card > strong { margin-top: 8px; font-family: var(--font-display); font-size: 48px; line-height: 1; letter-spacing: -.06em; }
.estimate-card > small { color: #7f879a; font-size: 10px; }
.estimate-card > p { margin: 12px 0 0; color: #7f879a; font-size: 10px; line-height: 1.6; }
.estimate-lines, .price-breakdown { display: grid; gap: 0; margin: 18px 0; border-top: 1px solid var(--line); }
.estimate-lines > div, .price-breakdown > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.estimate-lines span, .price-breakdown span { color: #9098aa; font-size: 10px; }
.estimate-lines b, .price-breakdown strong { font-size: 11px; }
.price-breakdown .total { margin-top: 4px; padding-top: 14px; }
.price-breakdown .total span { color: #d8dce6; font-weight: 900; }
.price-breakdown .total strong { color: var(--teal); font-family: var(--font-display); font-size: 22px; }
.included-stack { display: grid; gap: 5px; padding: 13px; border: 1px solid rgba(40,240,213,.13); border-radius: 11px; background: rgba(40,240,213,.035); }
.included-stack strong { color: #ccfff8; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.included-stack span { color: #8f9caf; font-size: 9px; line-height: 1.55; }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.summary-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.summary-grid > div { display: grid; gap: 3px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.summary-grid span { color: #7d8599; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.summary-grid strong { font-size: 14px; }
.detail-list { position: relative; z-index: 1; display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
.detail-list > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.detail-list span { color: #838b9f; font-size: 9px; }
.detail-list strong { max-width: 65%; text-align: right; font-size: 10px; line-height: 1.6; }
.note-box { position: relative; z-index: 1; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0,0,0,.15); }
.note-box > span { color: #818a9f; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.note-box p { margin: 8px 0 0; color: #c0c6d5; font-size: 11px; }
.notice.warning { align-items: flex-start; border-color: rgba(255,196,98,.22); background: rgba(255,196,98,.055); color: #f7dca9; }
.notice.success { align-items: flex-start; border-color: rgba(92,242,143,.22); background: rgba(92,242,143,.055); color: #bfffd0; }
.notice.compact { margin: 14px 0; padding: 11px; }
.notice > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: rgba(255,255,255,.055); font-weight: 950; }
.notice > div { display: grid; gap: 2px; }
.notice > div strong { font-size: 10px; }
.notice > div p { margin: 0; color: inherit; opacity: .78; font-size: 9px; line-height: 1.55; }
.auth-choice { margin-top: 18px; }
.auth-choice p { color: #8c94a8; font-size: 10px; }
.button-stack { display: grid; gap: 9px; }
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 18px; align-items: start; }
.cart-items, .checkout-side { display: grid; gap: 14px; }
.cart-item { padding: 20px; }
.cart-item-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cart-item-head h2 { margin: 4px 0 0; font-size: 19px; }
.cart-item-head > strong { color: var(--teal); font-family: var(--font-display); font-size: 22px; white-space: nowrap; }
.cart-item-head > strong small { margin-left: 3px; color: #7d8599; font-family: var(--font-body); font-size: 8px; }
.cart-specs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.cart-specs span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); color: #aeb5c6; font-size: 8px; font-weight: 850; }
.cart-item-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); color: #7f879b; font-size: 9px; }
.text-danger { padding: 0; border: 0; background: transparent; color: #ff9cac; cursor: pointer; font-size: 9px; font-weight: 900; }
.cart-summary { position: sticky; top: 98px; padding: 22px; }
.empty-state { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; padding: 32px; }
.empty-state h2 { margin: 4px 0 0; }
.empty-state p { margin: 0 0 12px; }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(40,240,213,.2); border-radius: 18px; background: rgba(40,240,213,.08); color: var(--teal); font-family: var(--font-display); font-size: 22px; }
.checkout-layout > .panel { padding: 22px; }
.checkout-side > .panel { padding: 21px; }
.checkout-line { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.checkout-line > span { display: grid; font-size: 10px; font-weight: 850; }
.checkout-line small { color: #7d8599; font-size: 8px; font-weight: 500; }
.checkout-line strong { color: #dffef9; font-size: 10px; white-space: nowrap; }
.consent-panel { position: sticky; top: 98px; }
.order-item-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 18px; margin-bottom: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.018); }
.order-item-card h3 { margin: 3px 0 0; font-size: 16px; }
.order-item-card > strong { color: var(--teal); font-size: 13px; }
.order-item-card .cart-specs, .order-item-card .summary-grid, .order-item-card .detail-list, .order-item-card .note-box, .order-item-card .notice { grid-column: 1 / -1; }
.timeline { position: relative; z-index: 1; display: grid; }
.timeline > div { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 12px; padding-bottom: 16px; }
.timeline > div > span { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px rgba(40,240,213,.45); }
.timeline > div:not(:last-child) > span::after { content: ""; width: 1px; height: calc(100% + 16px); display: block; margin: 10px auto 0; background: var(--line-strong); }
.timeline > div > div { display: grid; gap: 2px; }
.timeline strong { font-size: 11px; }
.timeline small { color: #737c90; font-size: 8px; }
.timeline p { margin: 5px 0 0; color: #aab1c2; font-size: 9px; }
.migration-list { position: relative; z-index: 1; display: grid; gap: 8px; margin-bottom: 16px; }
.migration-list > div { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.migration-list span { width: 34px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,122,69,.1); color: var(--orange); font-size: 7px; font-weight: 950; }
.migration-list strong { font-size: 10px; overflow-wrap: anywhere; }
.panel-rule { position: relative; z-index: 1; height: 1px; margin: 20px 0; border: 0; background: var(--line); }
.allocation-admin-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.allocation-admin-grid > div { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.allocation-admin-grid > div > strong { color: #d8dce6; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.field-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.admin-order-item { background: linear-gradient(145deg, rgba(255,122,69,.035), rgba(255,255,255,.015)); }
.card-copy { position: relative; z-index: 1; color: #aab2c5; font-size: 12px; }

@media (max-width: 1180px) {
  .builder-shell, .review-grid, .cart-layout, .checkout-layout { grid-template-columns: minmax(0,1fr) 310px; }
  .resource-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .field-grid.three { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .order-hero, .order-hero.compact { grid-template-columns: 1fr; }
  .builder-shell, .review-grid, .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .estimate-card, .cart-summary, .consent-panel { position: relative; top: auto; }
  .order-trust { max-width: 460px; }
}

@media (max-width: 680px) {
  .order-hero h1 { font-size: 39px; }
  .resource-grid, .choice-grid, .summary-grid, .allocation-admin-grid { grid-template-columns: 1fr; }
  .builder-panel, .checkout-layout > .panel, .checkout-side > .panel { padding: 17px; }
  .builder-actions { align-items: stretch; flex-direction: column-reverse; }
  .builder-actions .button { width: 100%; }
  .cart-item-head, .cart-item-foot { align-items: flex-start; flex-direction: column; }
  .detail-list > div { flex-direction: column; gap: 4px; }
  .detail-list strong { max-width: 100%; text-align: left; }
  .order-item-card { grid-template-columns: 1fr; }
  .order-item-card > strong { justify-self: start; }
}

/* Phase 3A billing foundation */
.form-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.form-grid.three { grid-template-columns: minmax(0,2fr) minmax(0,.7fr) minmax(0,.9fr); }
.line-editor { position: relative; z-index: 1; display: grid; gap: 10px; }
.panel-subsection { position: relative; z-index: 1; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.014); }
.muted { color: var(--muted-2); font-size: 11px; }
.check-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #c5ccda; font-size: 11px; font-weight: 700; }
.check-row input { width: 16px; height: 16px; accent-color: var(--orange); }
hr { width: 100%; height: 1px; margin: 18px 0; border: 0; background: var(--line); }
@media (max-width: 760px) { .form-grid, .form-grid.three { grid-template-columns: 1fr; } }