:root {
  --bg: #0f172a;
  --panel: #111827;
  --panel-2: #172033;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --line: #263244;
  --brand: #38bdf8;
  --ok: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
input, select, textarea, button {
  font: inherit;
}
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}
.auth-card {
  width: min(440px, 100%);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.logo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), #22c55e);
}
.brand b { display: block; }
.brand span, .muted { color: var(--muted); }
h1, h2, h3 { margin: 0 0 8px; letter-spacing: 0; }
p { color: var(--muted); }
label {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  color: var(--muted);
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1220;
  color: var(--text);
  padding: 10px 12px;
}
button, .btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button.primary, .btn.primary {
  border-color: transparent;
  background: var(--brand);
  color: #062033;
  font-weight: 700;
}
button.danger, .btn.danger { border-color: #7f1d1d; color: #fecaca; }
.full { width: 100%; }
.msg { min-height: 22px; margin-top: 12px; color: var(--muted); }
.msg.error { color: #fecaca; }
.msg.ok { color: #bbf7d0; }
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
}
.sidebar {
  border-right: 1px solid var(--line);
  background: #0b1220;
  padding: 20px;
}
.nav {
  display: grid;
  gap: 6px;
}
.nav a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--muted);
}
.nav a.active, .nav a:hover {
  background: var(--panel-2);
  color: var(--text);
}
.main {
  padding: 24px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.section-head p {
  margin: 0;
}
.software-section {
  margin-bottom: 18px;
}
.software-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.software-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.software-card.is-online {
  border-color: #15803d;
}
.software-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.software-title h3 {
  margin: 0;
}
.software-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}
.software-meta b {
  color: var(--text);
  font-weight: 600;
}
.software-badges, .software-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.software-preview {
  position: relative;
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, .16), rgba(34, 197, 94, .10)),
    #0b1220;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}
.software-preview:hover {
  border-color: var(--brand);
}
.software-preview.is-loading {
  opacity: .72;
}
.software-preview.has-snapshot {
  background: #020617;
  padding: 0;
}
.software-preview.snapshot-error {
  border-color: #7f1d1d;
}
.software-snapshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.software-preview-text {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.software-preview b, .software-preview span {
  display: block;
}
.software-preview span, .software-seen {
  color: var(--muted);
  font-size: 13px;
}
.software-preview strong {
  color: var(--brand);
  white-space: nowrap;
}
.software-seen {
  margin: 0;
}
.btn.disabled {
  opacity: .45;
  pointer-events: none;
}
.monitor-grid {
  margin-bottom: 14px;
}
.kpi b {
  display: block;
  font-size: 28px;
  margin-top: 8px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { color: var(--muted); font-weight: 600; }
.status {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  border: 1px solid var(--line);
}
.status.ok { color: #bbf7d0; border-color: #166534; }
.status.warn { color: #fde68a; border-color: #92400e; }
.status.bad { color: #fecaca; border-color: #7f1d1d; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.inline-toggle {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 12px;
}
.inline-toggle input {
  width: auto;
  margin: 0;
}
.split {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}
.pre {
  white-space: pre-wrap;
  background: #0b1220;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  max-height: 360px;
  overflow: auto;
}
.live-panel {
  margin-bottom: 14px;
}
.live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.live-head p {
  margin: 0;
}
.live-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #030712;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
#liveVideo {
  width: 100%;
  height: 100%;
  display: block;
  background: #030712;
  object-fit: contain;
}
.live-stage.mirror-video #liveVideo {
  transform: scaleX(-1);
}
#trackingOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#clientRenderedOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
#trackingOverlay {
  z-index: 3;
}
.telemetry-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1220;
  padding: 14px;
}
.telemetry-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.telemetry-head h3 {
  margin: 0;
}
.telemetry-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
  color: var(--muted);
}
.telemetry-kpis span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel);
}
.telemetry-kpis b {
  color: var(--text);
}
.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.identity-card {
  border-radius: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(20, 29, 43, .96), rgba(16, 23, 35, .96));
  border: 1px solid rgba(103, 232, 249, .14);
  min-height: 138px;
}
.identity-card.cached {
  opacity: .9;
  border-color: rgba(255, 209, 102, .25);
}
.identity-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.identity-id {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
}
.focus-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-flex;
  box-shadow: 0 0 12px currentColor;
}
.identity-state {
  font-size: 12px;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  text-transform: uppercase;
}
.identity-main {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: stretch;
}
.identity-shot-wrap {
  width: 110px;
  height: 78px;
  border-radius: 8px;
  overflow: hidden;
  background: #0b0f16;
  border: 1px solid rgba(255,255,255,.08);
}
.identity-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.identity-shot.placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.identity-attr-box {
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(28, 38, 58, .9);
  border-left: 4px solid rgba(158, 255, 143, .9);
  line-height: 1.55;
  font-size: 14px;
}
.commands-card {
  margin-top: 14px;
}
.software-update-panel {
  margin-top: 18px;
}
.software-update-current {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.software-update-current > div,
.software-update-result,
.software-update-safe,
.software-update-rollback,
.software-update-row,
.software-update-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1220;
  padding: 12px;
}
.software-update-current small,
.software-update-row small,
.software-update-result small {
  display: block;
  color: var(--muted);
  margin-bottom: 5px;
}
.software-update-current b,
.software-update-result b {
  display: block;
}
code {
  color: #bae6fd;
  overflow-wrap: anywhere;
}
.software-update-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.software-update-safe {
  margin: 14px 0;
}
.software-update-safe p {
  margin-bottom: 0;
}
.software-update-rollback {
  margin: 14px 0;
}
.software-update-history {
  display: grid;
  gap: 10px;
}
.software-update-history.is-scrollable {
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
}
.software-update-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr auto;
  gap: 12px;
  align-items: center;
}
.software-update-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.profile-panel {
  max-width: 980px;
}
.profile-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.profile-pending-email {
  border: 1px solid #92400e;
  border-radius: 8px;
  background: rgba(245, 158, 11, .12);
  padding: 10px 12px;
}
.profile-password-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 23, .72);
}
.profile-password-window {
  width: min(560px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .35);
}
.profile-password-body {
  display: grid;
  gap: 8px;
}
.mail-template-panel {
  margin-top: 18px;
}
.mail-template-placeholders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.mail-template-placeholders span {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #bae6fd;
  background: #0b1220;
  padding: 5px 9px;
  font-size: 12px;
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .grid, .grid.two, .split { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .live-head { flex-direction: column; }
  .software-update-current, .software-update-result-grid, .software-update-row, .profile-fields-grid { grid-template-columns: 1fr; }
  .software-update-row-actions { justify-content: flex-start; }
}

/* Booking-inspired shell theme */
:root {
  --bg: #050816;
  --bg2: #0b1224;
  --panel: rgba(16, 24, 45, .74);
  --panel-2: rgba(34, 20, 57, .72);
  --text: #fff;
  --muted: #aeb9d4;
  --line: rgba(158, 178, 255, .18);
  --brand: #37c7ff;
  --cyan: #37c7ff;
  --violet: #8b5cf6;
  --pink: #ec4899;
  --green: #21d07a;
  --yellow: #ffd84d;
  --red: #ff3b66;
  --ok: #21d07a;
  --warn: #ffd84d;
  --bad: #ff3b66;
  --radius: 24px;
  --glow: 0 0 46px rgba(139, 92, 246, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body {
  background:
    radial-gradient(circle at 15% 10%, rgba(139, 92, 246, .35), transparent 26%),
    radial-gradient(circle at 86% 10%, rgba(55, 199, 255, .22), transparent 30%),
    linear-gradient(135deg, #060915, #080a1a 55%, #180d2d);
  min-height: 100vh;
}

.app {
  grid-template-columns: 310px 1fr;
}

.sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 18px;
  background: linear-gradient(180deg, rgba(35, 24, 78, .78), rgba(6, 9, 24, .94));
}

.brand {
  gap: 14px;
  margin-bottom: 30px;
}

.logo {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--cyan), var(--violet), var(--pink));
  box-shadow: 0 0 28px rgba(139, 92, 246, .50);
}

.brand b {
  font-size: 18px;
}

.brand span {
  display: block;
  font-size: 13px;
}

.nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  gap: 7px;
  padding-right: 8px;
}

.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 99px; }
.nav::-webkit-scrollbar-thumb { background: linear-gradient(var(--cyan), var(--violet)); border-radius: 99px; }

.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 13px 15px;
  margin: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  color: #c9d2ed;
  font-weight: 800;
}

.nav a.active,
.nav a:hover {
  background: linear-gradient(90deg, rgba(55, 199, 255, .28), rgba(139, 92, 246, .44));
  box-shadow: 0 0 22px rgba(139, 92, 246, .25);
  color: #fff;
}

.rolebox {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.rolebox-profile {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.rolebox-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  border: 1px solid rgba(55, 199, 255, .55);
  background: linear-gradient(135deg, rgba(55, 199, 255, .26), rgba(139, 92, 246, .30), rgba(236, 72, 153, .24));
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 0 24px rgba(139, 92, 246, .30);
}

.rolebox-profile b,
.rolebox-profile span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rolebox-profile span {
  margin-top: 3px;
  color: #d7dff8;
  font-size: 13px;
}

.rolebox-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rolebox-system-state {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 14px;
  border: 1px solid rgba(33, 208, 122, .36);
  background: rgba(33, 208, 122, .12);
  color: #d7ffe9;
  font-weight: 1000;
  font-size: 12px;
}

.rolebox-system-state span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(33, 208, 122, .80);
}

.rolebox-version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(55, 199, 255, .36);
  background: linear-gradient(135deg, rgba(55, 199, 255, .16), rgba(139, 92, 246, .18));
  color: #dff7ff;
  font-weight: 1000;
  font-size: 11px;
  white-space: nowrap;
}

.rolebox-profile-link,
.logout-btn {
  width: 100%;
  min-height: 38px;
  font-weight: 1000;
}

.logout-btn {
  margin-top: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 59, 102, .18);
  color: #fff;
}

.main {
  padding: 32px;
  min-width: 0;
}

.topbar {
  margin-bottom: 24px;
}

.topbar h1 {
  font-size: clamp(30px, 3vw, 44px);
}

.auth-card,
.card,
.software-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(13, 28, 52, .76), rgba(40, 20, 59, .70));
  box-shadow: var(--glow);
}

input,
select,
textarea {
  border-color: rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(8, 13, 31, .72);
  color: #fff;
}

button,
.btn {
  border-color: rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 800;
}

button.primary,
.btn.primary {
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color: #fff;
}

button.danger,
.btn.danger {
  border-color: rgba(255, 59, 102, .35);
  background: rgba(255, 59, 102, .18);
  color: #fff;
}

.kpi b {
  font-size: 34px;
}

table th {
  color: #b9c7ef;
}

.status.ok {
  border-color: rgba(33, 208, 122, .40);
  background: rgba(33, 208, 122, .13);
  color: #d7ffe9;
}

.status.bad {
  border-color: rgba(255, 59, 102, .42);
  background: rgba(255, 59, 102, .12);
  color: #ffd4dd;
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
  }
}