:root {
  --hub-bg: #0f172a;
  --hub-panel: #111827;
  --hub-card: #ffffff;
  --hub-muted: #64748b;
  --hub-border: #d7dee8;
  --hub-primary: #2563eb;
  --hub-danger: #dc2626;
  --hub-ok: #16a34a;
  --hub-text: #0f172a;
  --hub-soft: #f4f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--hub-soft); color: var(--hub-text); }
.auth-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #0f172a, #1d4ed8); }
.auth-card { width: min(420px, calc(100vw - 32px)); padding: 32px; border-radius: 24px; background: #fff; box-shadow: 0 24px 80px rgba(15, 23, 42, .35); }
.auth-card h1 { margin: 0 0 8px; }
.auth-card label, .field label { display: grid; gap: 6px; margin: 12px 0; font-weight: 700; }
.auth-card input, .field input, .field select, textarea { width: 100%; border: 1px solid var(--hub-border); border-radius: 12px; padding: 12px; font: inherit; }
button, .button { border: 0; border-radius: 12px; padding: 11px 16px; font: inherit; font-weight: 800; cursor: pointer; background: var(--hub-primary); color: white; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
button.secondary { background: #e2e8f0; color: #0f172a; }
button.danger { background: var(--hub-danger); }
button:disabled { opacity: .55; cursor: not-allowed; }
.auth-error, .alert.error { color: #991b1b; background: #fee2e2; border: 1px solid #fecaca; padding: 12px; border-radius: 12px; }
.alert.success { color: #14532d; background: #dcfce7; border: 1px solid #bbf7d0; padding: 12px; border-radius: 12px; }
.hub-shell { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
.sidebar { background: var(--hub-bg); color: white; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.brand { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; }
.nav { display: grid; gap: 8px; }
.nav button { justify-content: flex-start; background: transparent; color: #cbd5e1; border: 1px solid transparent; }
.nav button.active, .nav button:hover { color: white; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.main { padding: 28px; display: grid; gap: 20px; align-content: start; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.card { background: var(--hub-card); border: 1px solid var(--hub-border); border-radius: 20px; padding: 20px; box-shadow: 0 8px 22px rgba(15, 23, 42, .06); }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.installation-switcher { min-width: min(460px, 100%); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px; border-bottom: 1px solid var(--hub-border); text-align: left; vertical-align: top; }
.badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #dbeafe; color: #1e40af; font-size: .82rem; font-weight: 800; }
.remote-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
.remote-nav { display: grid; gap: 8px; align-content: start; }
.remote-nav button { background: #eff6ff; color: #1e3a8a; justify-content: flex-start; }
.remote-nav button.active { background: var(--hub-primary); color: white; }
.remote-panel pre { white-space: pre-wrap; word-break: break-word; background: #0b1020; color: #dbeafe; padding: 16px; border-radius: 16px; max-height: 58vh; overflow: auto; }
.empty { color: var(--hub-muted); }
@media (max-width: 900px) { .hub-shell { grid-template-columns: 1fr; } .sidebar { position: static; } .grid.two, .remote-layout { grid-template-columns: 1fr; } .topbar { align-items: stretch; flex-direction: column; } }
.is-hidden { display: none; }
.remote-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 16px; }
.remote-heading h2 { margin: 8px 0 0; }
.asset-notice { border: 1px dashed var(--hub-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; background: #f8fafc; color: #334155; }
.asset-notice ul { margin: 8px 0 0; padding-left: 18px; }
.remote-dto { display: grid; gap: 16px; }
.remote-table-wrap { overflow: auto; border: 1px solid var(--hub-border); border-radius: 16px; }
.remote-data-table { min-width: 760px; }
.remote-kv { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: 0; border: 1px solid var(--hub-border); border-radius: 16px; overflow: hidden; }
.remote-kv dt, .remote-kv dd { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--hub-border); }
.remote-kv dt { background: #f8fafc; font-weight: 800; color: #334155; }
.remote-kv dd { min-width: 0; word-break: break-word; }
.remote-kv dt:last-of-type, .remote-kv dd:last-of-type { border-bottom: 0; }
.remote-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.remote-list.compact { gap: 2px; }
.remote-media { margin: 0; display: grid; gap: 6px; }
.remote-media img { max-width: 220px; max-height: 160px; object-fit: contain; border: 1px solid var(--hub-border); border-radius: 12px; background: #fff; }
.remote-media figcaption { color: var(--hub-muted); font-size: .85rem; }
.remote-actions { margin-top: 24px; display: grid; gap: 14px; }
.remote-actions h3 { margin: 0; }
.remote-action-form { display: grid; gap: 12px; border: 1px solid var(--hub-border); border-radius: 16px; padding: 14px; background: #f8fafc; }
.remote-action-form p { margin: 4px 0 0; }
.remote-action-form textarea { min-height: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
@media (max-width: 900px) { .remote-heading { flex-direction: column; } .remote-kv { grid-template-columns: 1fr; } .remote-kv dt { border-bottom: 0; } .remote-data-table { min-width: 620px; } }
.control-center-view { gap: 18px; }
.remote-admin-panel { display: grid; gap: 14px; padding: 16px; }
.remote-admin-panel h3 { margin: 0; }
.remote-row-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 180px; }
.remote-row-actions button { padding: 8px 10px; border-radius: 10px; font-size: .9rem; }
.remote-action-form--fields { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.remote-action-form--fields label { display: grid; gap: 6px; font-weight: 700; }
.remote-action-form--fields input { border: 1px solid var(--hub-border); border-radius: 10px; padding: 10px; font: inherit; }
.remote-action-form--fields button { align-self: end; }