:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #04091d;
  --surface: rgba(15, 24, 56, 0.86);
  --surface-solid: #101a3a;
  --line: rgba(135, 155, 211, 0.16);
  --text: #f8faff;
  --muted: #99a6c7;
  --cyan: #18d4f4;
  --coral: #ff5c57;
  --success: #36d697;
  --danger: #ff7676;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(18, 64, 139, .23), transparent 33%),
    linear-gradient(155deg, #060d29 0%, var(--bg) 52%, #070b1b 100%);
}

button, input, textarea, select { font: inherit; }

button {
  border: 0;
  border-radius: 13px;
  padding: 13px 19px;
  color: #061027;
  background: linear-gradient(135deg, var(--cyan), #63e4f8);
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

button:hover { transform: translateY(-1px); filter: brightness(1.07); }
button:disabled { opacity: .55; cursor: wait; }

.ghost {
  color: var(--text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
}

.ambient {
  position: fixed;
  border-radius: 999px;
  filter: blur(100px);
  opacity: .13;
  pointer-events: none;
}

.ambient-one { width: 380px; height: 380px; background: var(--cyan); right: -140px; top: -90px; }
.ambient-two { width: 280px; height: 280px; background: var(--coral); left: -130px; bottom: -100px; }

main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hidden { display: none !important; }

.login-shell { min-height: 100vh; display: grid; place-content: center; gap: 36px; }
.brand { display: flex; align-items: center; gap: 18px; }
.brand img { width: 96px; height: 96px; object-fit: cover; border-radius: 24px; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.brand h1, h1, h2, h3, h4, p { margin: 0; }
.brand h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.brand.compact img { width: 58px; height: 58px; border-radius: 16px; }
.brand.compact h1 { font-size: 1.25rem; }

.eyebrow, .kicker {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 850;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}

.login-card {
  width: min(460px, calc(100vw - 40px));
  padding: 32px;
  border-radius: 25px;
  display: grid;
  gap: 20px;
}

.login-card h2 { margin-top: 7px; margin-bottom: 8px; }
.muted { color: var(--muted); line-height: 1.55; }

label { display: grid; gap: 8px; color: #dfe6fb; font-size: .9rem; font-weight: 650; }
input, textarea, select {
  width: 100%;
  padding: 14px 15px;
  color: var(--text);
  background: rgba(3, 8, 26, .72);
  border: 1px solid rgba(139, 161, 220, .22);
  border-radius: 12px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(24, 212, 244, .1); }
textarea { resize: vertical; }
select { appearance: none; }
small { color: var(--muted); font-weight: 400; }
.error { min-height: 1.3em; color: var(--danger); font-size: .86rem; }
.warning { color: #ffd479; font-size: .86rem; }

.dashboard { padding: 24px 0 70px; }
header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 28px; }
.hero {
  min-height: 225px;
  padding: 42px;
  border-radius: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  background:
    linear-gradient(110deg, rgba(12, 27, 70, .96), rgba(14, 30, 69, .63)),
    radial-gradient(circle at 80% 20%, rgba(24, 212, 244, .5), transparent 34%);
  border: 1px solid rgba(77, 139, 220, .18);
}
.hero h2 { max-width: 720px; margin: 10px 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.02; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0; }
.metric { padding: 22px; border-radius: 18px; display: flex; justify-content: space-between; align-items: center; }
.metric span { color: var(--muted); font-weight: 650; }
.metric strong { font-size: 2rem; }
.devices-card { padding: 28px; border-radius: 22px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-title h3 { margin-top: 6px; font-size: 1.4rem; }
.devices-list { display: grid; gap: 10px; }
.device {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto auto auto;
  gap: 18px;
  align-items: center;
  padding: 17px;
  background: rgba(4, 10, 31, .48);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.device-name { font-weight: 800; }
.device-code { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.status { padding: 6px 10px; border-radius: 99px; color: var(--success); background: rgba(54,214,151,.1); font-size: .75rem; font-weight: 800; }
.delete { color: var(--danger); background: transparent; padding: 8px; }
.compact-button { padding: 8px 11px; }
.toolbar, .hero-actions, .tabs { display: flex; gap: 12px; align-items: center; }
.toolbar input { min-width: 310px; }
.tabs { margin: 18px 0; }
.tabs button.active { color: #061027; background: linear-gradient(135deg, var(--cyan), #63e4f8); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.users-list { display: grid; gap: 10px; }
.user-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto auto auto;
  gap: 18px;
  align-items: center;
  padding: 17px;
  background: rgba(4, 10, 31, .48);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.user-row strong { display: block; }
.user-row code { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.inline-check {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inline-check input {
  width: auto;
  accent-color: var(--cyan);
}
.empty { text-align: center; padding: 55px 20px; color: var(--muted); }
.empty span { display: inline-grid; place-content: center; width: 62px; height: 48px; margin-bottom: 15px; border: 2px solid #2c477a; border-radius: 10px; color: var(--cyan); font-weight: 900; }
.empty h4 { color: var(--text); margin-bottom: 7px; }

dialog {
  width: min(580px, calc(100% - 32px));
  color: var(--text);
  background: #0c1533;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 35px 120px rgba(0,0,0,.62);
}
dialog::backdrop { background: rgba(1, 4, 16, .77); backdrop-filter: blur(8px); }
dialog form { padding: 28px; display: grid; gap: 19px; }
.dialog-title, .dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-title h2 { margin-top: 6px; }
.icon-button { padding: 7px 12px; font-size: 1.6rem; color: var(--muted); background: transparent; }

@media (max-width: 700px) {
  main { width: min(100% - 24px, 1180px); }
  .hero { padding: 28px; align-items: stretch; flex-direction: column; }
  .summary-grid { grid-template-columns: 1fr; }
  .device { grid-template-columns: 1fr auto; }
  .device-code { grid-column: 1; }
  .user-row { grid-template-columns: 1fr auto; }
  .user-row code { grid-column: 1 / -1; }
}