:root {
  color-scheme: dark;
  --bg: #0b1016;
  --surface: #121a23;
  --surface-2: #17222d;
  --border: #263544;
  --text: #e7edf3;
  --muted: #8fa1b3;
  --accent: #4fd1a5;
  --accent-dark: #173d34;
  --blue: #76a9ff;
  --blue-dark: #172d4d;
  --danger: #ff6b6b;
  --warning: #f0ba56;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #172534 0, var(--bg) 38rem); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: "SFMono-Regular", Consolas, monospace; color: #b8f2df; }
small, .muted { color: var(--muted); }
h1 { margin: .25rem 0 1.5rem; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.045em; }
h2 { margin: 0 0 1rem; font-size: 1.15rem; }
p { color: #bdc8d2; line-height: 1.6; }

.site-header { position: relative; z-index: 10; min-height: 68px; padding: 0 max(1.25rem, calc((100vw - 1120px) / 2)); border-bottom: 1px solid var(--border); background: rgb(11 16 22 / 88%); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { color: var(--text); font-weight: 800; letter-spacing: -.03em; }
.brand span { color: var(--accent); }
.site-header nav { display: flex; align-items: center; gap: 1.1rem; color: var(--muted); font-size: .9rem; }
.site-header-actions { display: flex; align-items: center; gap: 1rem; }
.site-header .nav-register { padding: .5rem .8rem; color: #062019; }
.site-header .nav-login { color: var(--text); }
.language-control select { width: auto; min-width: 105px; padding: .42rem 1.8rem .42rem .6rem; border-color: var(--border); background: var(--surface); font-size: .8rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.inline-form { display: inline; }
.link-button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; }

.container { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 6rem; }
footer { border-top: 1px solid var(--border); padding: 1.5rem; color: var(--muted); text-align: center; font-size: .8rem; }
.card { border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, rgb(23 34 45 / 94%), rgb(16 24 33 / 96%)); box-shadow: 0 18px 50px rgb(0 0 0 / 18%); padding: 1.4rem; }
.auth-card { width: min(460px, 100%); margin: 3vh auto 0; padding: clamp(1.5rem, 5vw, 2.5rem); }
.eyebrow { margin: 0; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.stack { display: grid; gap: 1rem; }
label { display: grid; gap: .45rem; color: #cbd5df; font-size: .87rem; font-weight: 650; }
input { width: 100%; border: 1px solid #354657; border-radius: 8px; background: #0b1219; color: var(--text); padding: .78rem .85rem; font: inherit; outline: none; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(79 209 165 / 12%); }
button, .button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #062019; padding: .72rem 1rem; font: inherit; font-weight: 750; cursor: pointer; }
button:hover, .button:hover { filter: brightness(1.08); text-decoration: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary, .button.secondary { border-color: #41566a; background: #1a2936; color: var(--text); }
button.danger { border-color: #704143; background: #3a2024; color: #ffd7d7; }
button:focus-visible, .button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgb(79 209 165 / 42%); outline-offset: 3px; }
.auth-links { margin-top: 1.5rem; display: flex; justify-content: space-between; font-size: .9rem; }

.alert { border: 1px solid; border-radius: 9px; margin: 0 0 1.25rem; padding: .85rem 1rem; line-height: 1.5; }
.alert.error { border-color: #743d42; background: #361f23; color: #ffc7cb; }
.alert.success { border-color: #28634f; background: #14372d; color: #bcf5e1; }
.alert.warning { border-color: #725b2b; background: #342a17; color: #f8dfa8; }
.page-heading { margin-bottom: 2rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.page-heading h1 { margin-bottom: 0; }
.pill { display: inline-flex; align-items: center; width: max-content; border: 1px solid; border-radius: 999px; padding: .35rem .65rem; font-size: .75rem; font-weight: 750; }
.pill.online { border-color: #28634f; background: var(--accent-dark); color: #a9efd7; }
.pill.offline { border-color: #624249; background: #302126; color: #eab3ba; }
.add-observer { margin-bottom: 2.5rem; }
.observer-form { display: flex; align-items: end; gap: .8rem; }
.observer-form .grow { flex: 1; }
.observer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.observer-card { display: block; color: var(--text); transition: transform .16s ease, border-color .16s ease; }
.observer-card:hover { border-color: #486174; transform: translateY(-2px); text-decoration: none; }
.card-title { margin-bottom: .7rem; display: flex; justify-content: space-between; align-items: center; }
.dot { width: .65rem; height: .65rem; border-radius: 50%; }
.dot.online { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.dot.offline { background: var(--danger); box-shadow: 0 0 12px rgb(255 107 107 / 55%); }
dl { margin: 1.25rem 0 0; }
dl > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); padding: .75rem 0; }
dt { color: var(--muted); font-size: .8rem; }
dd { margin: 0; text-align: right; }
.count { color: var(--muted); font-size: .9rem; }
.empty { text-align: center; }

.credential-card { width: min(760px, 100%); margin: 0 auto; padding: clamp(1.5rem, 5vw, 2.5rem); }
.credentials > div { display: grid; grid-template-columns: 150px 1fr; }
.credentials dd { text-align: left; }
.secret { display: block; border: 1px dashed var(--warning); border-radius: 6px; background: #0c1218; color: #ffe2a3; padding: .7rem; }
.credential-help { margin: 1.5rem 0; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.credential-help details, .observer-firmware details { margin-top: .75rem; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.credential-help summary, .observer-firmware summary { cursor: pointer; padding: .85rem 1rem; font-weight: 700; }
.credential-guide { border-top: 1px solid var(--border); padding: 1rem; }
.credential-guide ol { margin: 0 0 1rem; padding-left: 1.25rem; color: #bdc8d2; }
.credential-guide li + li { margin-top: .4rem; }
.credential-guide p { margin: .75rem 0; }
.credential-guide pre { margin: .75rem 0; border: 1px solid #354657; border-radius: 8px; background: #0b1219; padding: 1rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.credential-guide pre code { color: #b8f2df; }
.wrap { overflow-wrap: anywhere; }
.back { display: inline-block; margin-bottom: 1rem; color: var(--muted); }
.details, .actions, .observer-metadata, .status-packet { margin-bottom: 1rem; }
.observer-metadata { margin-top: 1rem; }
.observer-firmware { margin: 1rem 0; }
.observer-metadata dl { margin: 0; }
.observer-metadata dd { max-width: 70%; overflow-wrap: anywhere; }
.status-packet pre { margin: 0; border: 1px solid #354657; border-radius: 8px; background: #0b1219; padding: 1rem; overflow: auto; max-height: 28rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.status-packet pre code { color: #b8f2df; }
.account-summary, .account-alerts, .account-password { width: min(720px, 100%); margin-bottom: 1rem; }
.account-summary dl { margin: 0; }
.account-alerts select { width: 100%; border: 1px solid #354657; border-radius: 8px; background: #0b1219; color: var(--text); padding: .78rem .85rem; font: inherit; }
.checkbox-label { display: flex; align-items: center; gap: .7rem; }
.checkbox-label input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.details dl { margin: 0; }
.connections { margin: 0; padding: 0; list-style: none; }
.connections li { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding: .75rem 0; }
.connections span { color: var(--muted); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { border-bottom: 1px solid var(--border); padding: .8rem; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.error-page { text-align: center; }

/* Public landing page */
.landing-page { padding-top: clamp(3.75rem, 8vw, 7rem); }
.landing-page h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.035em; }
.landing-page h3 { margin: 0; font-size: 1.28rem; letter-spacing: -.02em; }
.button-large { min-height: 48px; padding: .78rem 1.15rem; }

.hardware-section { padding-top: clamp(4.5rem, 8vw, 7rem); scroll-margin-top: 2rem; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); align-items: end; gap: 2rem; margin-bottom: 2.2rem; }
.section-heading h2 { max-width: 690px; margin: .45rem 0 0; }
.section-heading > p { margin: 0; }
.stats-heading { align-items: center; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 16px; background: rgb(16 24 33 / 75%); overflow: hidden; box-shadow: 0 20px 60px rgb(0 0 0 / 13%); }
.stat-card { min-width: 0; padding: 1.45rem; }
.stat-card + .stat-card { border-left: 1px solid var(--border); }
.stat-icon { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 1.35rem; border: 1px solid #315649; border-radius: 8px; background: var(--accent-dark); color: var(--accent); }
.stat-icon svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stat-card strong { display: block; overflow: hidden; color: var(--text); font-size: clamp(1.75rem, 4vw, 2.35rem); line-height: 1; letter-spacing: -.05em; text-overflow: ellipsis; }
.stat-card > span:last-child { display: block; margin-top: .55rem; color: var(--muted); font-size: .76rem; line-height: 1.35; }

.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.setup-card { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: clamp(1.4rem, 3vw, 2rem); background: linear-gradient(145deg, rgb(21 32 42 / 98%), rgb(13 20 28 / 98%)); }
.setup-card-top { display: flex; align-items: center; justify-content: space-between; }
.setup-number { color: #607487; font: 700 .74rem "SFMono-Regular", Consolas, monospace; }
.setup-badge { border: 1px solid #315649; border-radius: 999px; background: var(--accent-dark); color: #a9efd7; padding: .28rem .55rem; font-size: .65rem; font-weight: 750; }
.setup-badge-blue { border-color: #334b70; background: var(--blue-dark); color: #c9dcff; }
.setup-icon { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; margin: 2.1rem 0 1.5rem; border: 1px solid; border-radius: 17px; }
.setup-icon svg { width: 2.7rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.setup-icon-wifi { border-color: #315649; background: var(--accent-dark); color: var(--accent); }
.setup-icon-serial { border-color: #334b70; background: var(--blue-dark); color: var(--blue); }
.setup-kicker { margin: 0 0 .35rem; color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.setup-card:nth-child(2) .setup-kicker { color: var(--blue); }
.setup-description { min-height: 4.8rem; margin: .7rem 0 1.6rem; font-size: .9rem; }
.setup-card h4 { margin: 0 0 .85rem; color: #d8e0e7; font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }
.check-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 1.65rem; color: #b8c5d0; font-size: .85rem; line-height: 1.5; }
.check-list li::before { position: absolute; left: 0; top: .08rem; display: grid; place-items: center; width: 1rem; height: 1rem; border: 1px solid #315649; border-radius: 50%; color: var(--accent); font-size: .62rem; font-weight: 900; content: "✓"; }
.modes-title { margin-top: 1.7rem !important; }
.mode-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; }
.mode-list span { border: 1px solid #33475a; border-radius: 999px; background: #111c26; color: #afc2d3; padding: .38rem .6rem; font-size: .68rem; }
.setup-flow { display: flex; align-items: center; gap: .6rem; margin-top: auto; border-top: 1px solid var(--border); padding-top: 1.2rem; color: var(--muted); font-size: .69rem; font-weight: 700; }
.setup-flow span { border-radius: 5px; background: #0a1219; padding: .38rem .48rem; }
.setup-flow i { color: #5b7184; font-style: normal; }
.hardware-tip { display: flex; align-items: center; gap: .85rem; margin-top: 1rem; border: 1px dashed #35495b; border-radius: 12px; padding: .9rem 1rem; }
.hardware-tip p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.hardware-tip strong { color: #cbd5df; }
.tip-icon { display: grid; place-items: center; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border: 1px solid #456176; border-radius: 50%; color: #afc2d3; font: 700 .7rem serif; }

.landing-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(6rem, 11vw, 9rem); padding: clamp(1.6rem, 4vw, 2.6rem); border-color: #315649; background: radial-gradient(circle at 15% 0%, rgb(79 209 165 / 13%), transparent 35%), linear-gradient(145deg, rgb(20 34 40 / 98%), rgb(13 21 28 / 98%)); }
.landing-cta h2 { margin: .45rem 0 .5rem; }
.landing-cta p:last-child { max-width: 680px; margin: 0; }
.cta-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; }

@media (max-width: 940px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(3) { border-top: 1px solid var(--border); border-left: 0; }
  .stat-card:nth-child(4) { border-top: 1px solid var(--border); }
  .section-heading { grid-template-columns: 1fr; gap: .75rem; }
  .section-heading > p { max-width: 650px; }
  .landing-cta { align-items: flex-start; flex-direction: column; }
  .cta-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .site-header nav > span { display: none; }
  .container { padding-top: 2rem; }
  .observer-form { display: grid; }
  .page-heading { align-items: start; flex-direction: column; }
  .credentials > div { grid-template-columns: 1fr; }
  dd { text-align: left; }
  .landing-page { padding-top: 3.5rem; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-description { min-height: 0; }
  .landing-cta { margin-top: 6rem; }
}

@media (max-width: 560px) {
  .site-header { padding-block: .65rem; }
  .brand span, .nav-register { display: none; }
  .site-header-actions { gap: .6rem; }
  .site-header nav { gap: .7rem; }
  .language-control select { min-width: 76px; max-width: 82px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 1.1rem; }
  .setup-flow { gap: .35rem; }
  .setup-flow span { padding-inline: .35rem; }
  .cta-actions { width: 100%; }
  .cta-actions .button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}