:root {
  color-scheme: dark;
  --bg: #050817;
  --panel: rgba(10, 16, 39, .84);
  --panel-strong: #0c1430;
  --line: rgba(89, 164, 255, .24);
  --blue: #18b7ff;
  --blue-soft: #65d1ff;
  --lime: #9cff38;
  --yellow: #ffd84d;
  --red: #ff557b;
  --text: #f6fbff;
  --muted: #99a9c5;
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 50% -20%, #173a72 0, #071128 32%, var(--bg) 68%); overflow-x: hidden; }
button, input, select { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.hidden { display: none !important; }

.ambient { position: fixed; z-index: -1; width: 430px; height: 430px; border-radius: 50%; filter: blur(100px); opacity: .13; pointer-events: none; }
.ambient-one { left: -180px; top: 22%; background: var(--blue); }
.ambient-two { right: -200px; top: 48%; background: var(--lime); }

.site-header { width: min(1180px, calc(100% - 36px)); margin: 0 auto; min-height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 12px; letter-spacing: .08em; }
.brand img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(24,183,255,.45)); }
.brand span { display: grid; line-height: 1; }
.brand b { font-size: 17px; }
.brand small { color: var(--lime); margin-top: 5px; font-size: 10px; letter-spacing: .34em; }
.header-status { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); }

main { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding-bottom: 80px; }
.hero { min-height: 240px; display: grid; grid-template-columns: 1fr 210px; align-items: center; gap: 32px; }
.eyebrow { color: var(--blue-soft); font-weight: 800; font-size: 11px; letter-spacing: .28em; margin: 0 0 12px; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(43px, 7vw, 82px); line-height: .96; letter-spacing: -.055em; }
h1 span { color: transparent; background: linear-gradient(92deg, var(--blue-soft), var(--lime)); background-clip: text; -webkit-background-clip: text; }
.hero-copy { max-width: 720px; color: var(--muted); line-height: 1.5; font-size: 16px; margin: 0; }
.hero-orbit { width: 190px; height: 190px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; box-shadow: inset 0 0 80px rgba(24,183,255,.08), 0 0 60px rgba(24,183,255,.08); }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; inset: 26px; }
.hero-orbit::after { inset: 56px; border-color: rgba(156,255,56,.26); }
.hero-orbit img { width: 100px; z-index: 2; filter: drop-shadow(0 0 24px rgba(24,183,255,.5)); }
.hero-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 15px var(--lime); animation: orbit 7s linear infinite; }
.hero-orbit i:nth-child(2) { animation-delay: -2.3s; }.hero-orbit i:nth-child(3) { animation-delay: -4.6s; }
@keyframes orbit { from { transform: rotate(0deg) translateX(94px) rotate(0); } to { transform: rotate(360deg) translateX(94px) rotate(-360deg); } }

.notice { border: 1px solid rgba(255,216,77,.42); background: rgba(255,216,77,.08); color: #ffed9e; padding: 16px 18px; border-radius: 14px; margin-bottom: 24px; line-height: 1.5; }
.stepper { position: sticky; top: 12px; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 7px; border: 1px solid var(--line); background: rgba(5,8,23,.86); backdrop-filter: blur(18px); border-radius: 16px; margin-bottom: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.24); }
.step { appearance: none; border: 0; background: transparent; min-height: 51px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #71819e; cursor: pointer; }
.step b { width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 8px; display: grid; place-items: center; font-size: 11px; }
.step.active { background: rgba(24,183,255,.13); color: var(--blue-soft); }
.step.done { color: var(--lime); }.step:disabled { cursor: not-allowed; opacity: .48; }

.panel { display: none; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, rgba(14,23,52,.94), rgba(6,11,29,.96)); box-shadow: 0 25px 80px rgba(0,0,0,.28); padding: clamp(20px, 4vw, 42px); min-height: 400px; }
.panel.active { display: block; animation: panel-in .28s ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(9px); } }
.panel-heading { display: grid; grid-template-columns: 1fr minmax(260px, 480px); align-items: end; gap: 32px; padding-bottom: 26px; }
.panel-heading h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.04em; }
.panel-heading > p { color: var(--muted); line-height: 1.6; margin: 0; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.device-card, .profile-card { border: 1px solid var(--line); background: rgba(8,14,34,.78); border-radius: 17px; padding: 20px; min-height: 183px; text-align: left; cursor: pointer; transition: .18s ease; position: relative; overflow: hidden; }
.device-card::after, .profile-card::after { content: ""; position: absolute; right: -42px; bottom: -55px; width: 130px; height: 130px; border-radius: 50%; background: var(--blue); filter: blur(55px); opacity: .08; transition: opacity .18s; }
.device-card:hover, .profile-card:hover { transform: translateY(-2px); border-color: rgba(101,209,255,.58); }
.device-card.selected, .profile-card.selected { border-color: var(--lime); box-shadow: inset 0 0 0 1px rgba(156,255,56,.24), 0 0 22px rgba(156,255,56,.09); }
.device-card.selected::after, .profile-card.selected::after { background: var(--lime); opacity: .18; }
.card-kicker { color: var(--lime); text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.device-card h3, .profile-card h3 { font-size: 20px; margin: 13px 0 8px; }
.device-card p, .profile-card p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag { border: 1px solid rgba(101,209,255,.23); border-radius: 99px; color: #b8d7ed; font-size: 10px; padding: 5px 8px; }

.install-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.choice { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 15px; padding: 16px; cursor: pointer; background: rgba(4,9,24,.52); }
.choice:has(input:checked) { border-color: var(--blue); background: rgba(24,183,255,.08); }
.choice input { accent-color: var(--blue); margin-top: 3px; }
.choice span { display: grid; gap: 5px; }.choice small { color: var(--muted); line-height: 1.45; }
.confirm-box { margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(255,216,77,.35); background: rgba(255,216,77,.07); border-radius: 13px; color: #ffe894; }
.confirm-box input { accent-color: var(--yellow); }

.actions { display: flex; justify-content: flex-end; margin-top: 26px; gap: 10px; }.actions.split { justify-content: space-between; }
button.primary, button.secondary { min-height: 48px; border-radius: 13px; padding: 0 19px; border: 1px solid transparent; cursor: pointer; font-weight: 750; transition: .18s; }
button.primary { color: #03101a; background: linear-gradient(105deg, var(--blue-soft), var(--lime)); box-shadow: 0 8px 24px rgba(24,183,255,.18); }
button.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 11px 32px rgba(24,183,255,.28); }
button.primary:disabled { filter: grayscale(.7); opacity: .4; cursor: not-allowed; }
button.secondary { color: var(--text); background: rgba(15,26,57,.82); border-color: var(--line); }
button.secondary:hover:not(:disabled) { border-color: var(--blue); }
button.secondary:disabled { opacity: .4; cursor: not-allowed; }

.summary-card { border: 1px solid var(--line); border-radius: 17px; background: rgba(4,9,24,.55); padding: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.summary-card div { display: grid; gap: 4px; }.summary-card small { color: var(--muted); }.summary-card b { font-size: 14px; }
.safety-strip { display: grid; grid-template-columns: 140px 1fr; gap: 15px; padding: 15px 18px; margin: 14px 0; border-radius: 13px; background: rgba(156,255,56,.07); border: 1px solid rgba(156,255,56,.23); }
.safety-strip b { color: var(--lime); }.safety-strip span { color: #cad8e7; }
.progress-wrap { margin: 19px 0; }.progress-label { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 8px; font-size: 13px; }
progress { width: 100%; height: 8px; appearance: none; border: 0; background: #111a33; border-radius: 99px; overflow: hidden; }
progress::-webkit-progress-bar { background: #111a33; } progress::-webkit-progress-value { background: linear-gradient(90deg, var(--blue), var(--lime)); } progress::-moz-progress-bar { background: linear-gradient(90deg, var(--blue), var(--lime)); }
.terminal { min-height: 180px; max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: #02050e; border: 1px solid rgba(101,209,255,.2); color: #b9f5ff; border-radius: 13px; padding: 15px; font: 12px/1.55 "Cascadia Mono", Consolas, monospace; }

.restart-list { list-style: none; padding: 0; counter-reset: steps; display: grid; gap: 12px; }
.restart-list li { counter-increment: steps; display: grid; grid-template-columns: 42px 1fr; align-items: center; min-height: 64px; border: 1px solid var(--line); border-radius: 15px; padding: 12px 17px; color: var(--muted); }
.restart-list li::before { content: counter(steps); width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(24,183,255,.13); color: var(--blue-soft); font-weight: 800; }
.restart-list li b { color: var(--text); }

.onboarding { border: 1px solid var(--line); border-radius: 18px; background: rgba(4,9,24,.45); padding: clamp(18px, 3vw, 28px); }
#companion-onboarding { text-align: center; max-width: 720px; margin: auto; }
.success-mark { margin: auto; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: #07140a; background: var(--lime); box-shadow: 0 0 35px rgba(156,255,56,.24); font-size: 30px; font-weight: 900; }
.onboarding h3 { font-size: 24px; margin: 18px 0 8px; }.onboarding > p { color: var(--muted); line-height: 1.65; }
.checklist { display: grid; gap: 10px; text-align: left; margin-top: 22px; }.checklist label { border: 1px solid var(--line); border-radius: 12px; padding: 13px; }.checklist input { accent-color: var(--lime); }
.form-section + .form-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-section h3 { margin: 0 0 16px; font-size: 18px; }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field-grid label { display: grid; gap: 7px; color: #c6d3e5; font-size: 12px; font-weight: 700; }
input, select { width: 100%; min-height: 45px; border: 1px solid var(--line); background: #080e22; color: var(--text); border-radius: 11px; padding: 0 12px; outline: none; }
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,183,255,.1); }
.form-note { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.console-drawer { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }.console-drawer summary { cursor: pointer; color: var(--blue-soft); font-weight: 700; }.console-drawer .terminal { margin-top: 14px; }
.console-input { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.console-input button { min-width: 90px; }
.completion { margin-top: 18px; border: 1px solid rgba(156,255,56,.35); background: rgba(156,255,56,.08); border-radius: 14px; padding: 18px; display: grid; gap: 4px; }.completion b { color: var(--lime); font-size: 18px; }.completion span { color: #cde3c1; }

footer { width: min(1180px, calc(100% - 36px)); margin: 0 auto; min-height: 90px; border-top: 1px solid var(--line); display: flex; gap: 20px; align-items: center; color: var(--muted); font-size: 12px; }
footer span { margin-right: auto; } footer a { color: var(--blue-soft); text-decoration: none; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; min-height: 150px; padding: 32px 0 20px; }.hero-orbit { display: none; }
  .panel-heading { grid-template-columns: 1fr; gap: 13px; }.card-grid { grid-template-columns: 1fr 1fr; }.summary-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .site-header, main, footer { width: min(100% - 22px, 1180px); }.header-status { display: none; }.hero { min-height: 130px; }.hero-copy { font-size: 14px; }
  .stepper { top: 6px; }.step { gap: 0; }.step span { display: none; }.step b { width: 29px; height: 29px; }
  .panel { padding: 18px; border-radius: 17px; }.card-grid, .install-mode, .field-grid, .summary-card { grid-template-columns: 1fr; }.device-card, .profile-card { min-height: auto; }
  .safety-strip { grid-template-columns: 1fr; }.actions.split { flex-wrap: wrap; }.actions.split button { flex: 1; }
  .console-input { grid-template-columns: 1fr; } footer { flex-wrap: wrap; padding: 25px 0; } footer span { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; scroll-behavior: auto !important; } }