*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  line-height: 1.55;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(217,168,76,.12), transparent),
    radial-gradient(ellipse 40% 30% at 100% 0%, rgba(40,50,120,.25), transparent);
}
a { color: var(--gold-tx); text-decoration: none; }
a:hover { color: var(--gold-hi); }
h1,h2,h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.mono { font-family: var(--mono); font-size: .9em; }

.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
@media (max-width: 860px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: sticky; top: 0; z-index: 10; } }

.sidebar {
  background: var(--navy-1);
  border-right: 1px solid var(--line);
  padding: 1.25rem 1rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.brand { display: flex; align-items: center; gap: .75rem; padding: .25rem .5rem; }
.brand img { height: 36px; width: auto; }
.brand-text { font-family: var(--serif); font-size: 1rem; color: var(--gold-hi); }
.nav { display: flex; flex-direction: column; gap: .25rem; }
.nav a {
  display: block; padding: .55rem .75rem; border-radius: var(--r);
  color: var(--muted); border: 1px solid transparent;
}
.nav a:hover, .nav a.active {
  color: var(--fg); background: var(--surface-2); border-color: var(--line);
}
.nav a.active { color: var(--gold-hi); box-shadow: inset 2px 0 0 var(--gold); }

.main { padding: var(--pad); max-width: var(--maxw); }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.card h2, .card h3 { color: var(--gold-hi); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: .6rem 1rem; border-radius: var(--r); border: 1px solid var(--line-2);
  background: transparent; color: var(--fg); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--navy-0); border-color: var(--gold-lo);
}
.btn-primary:hover { filter: brightness(1.05); color: var(--navy-0); }
.btn-danger { border-color: rgba(255,141,118,.4); color: var(--danger); }

label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
input, textarea, select {
  width: 100%; padding: .65rem .75rem; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--navy-2); color: var(--fg);
  font-family: var(--sans); font-size: 1rem; margin-bottom: .9rem;
}
input:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,168,76,.15); }
textarea { min-height: 120px; resize: vertical; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--subtle); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; border: 1px solid var(--line-2); color: var(--gold-tx);
}
.badge-success { color: var(--success); border-color: rgba(127,211,154,.35); }
.badge-danger { color: var(--danger); border-color: rgba(255,141,118,.35); }

.alert {
  padding: .75rem 1rem; border-radius: var(--r); margin-bottom: 1rem;
  border: 1px solid var(--line-2); background: var(--surface-2);
}
.alert-error { border-color: rgba(255,141,118,.4); color: var(--danger); }
.alert-success { border-color: rgba(127,211,154,.4); color: var(--success); }

.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem;
}
.auth-card {
  width: min(420px, 100%);
  background: var(--glass); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--glow);
  backdrop-filter: blur(12px);
}
.auth-card .logo { display: block; margin: 0 auto 1.25rem; height: 48px; }
.auth-card h1 { text-align: center; color: var(--gold-hi); }
.auth-card p.lead { text-align: center; color: var(--muted); margin-top: 0; }

.prose { color: var(--fg); }
.prose h2 { color: var(--gold-hi); }
.prose ul { padding-left: 1.2rem; color: var(--muted); }

.footer-note { margin-top: auto; font-size: .75rem; color: var(--subtle); padding: .5rem; }
.empty { color: var(--subtle); font-style: italic; padding: .5rem 0; }

/* ——— Luxury command surfaces (client + owner) ——— */
.hero {
  position: relative;
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: calc(var(--r-lg) + 4px);
  border: 1px solid var(--line-2);
  background:
    linear-gradient(135deg, rgba(217,168,76,.10), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: var(--glow);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: auto -20% -60% auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(217,168,76,.18), transparent 70%);
  pointer-events: none;
}
.hero-kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem;
}
.hero h1 { margin-bottom: .35rem; color: var(--fg); }
.hero .lede { color: var(--muted); max-width: 42rem; margin: 0; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.15rem; }
.hero-meta span { font-size: .85rem; color: var(--subtle); }
.hero-meta strong { color: var(--gold-hi); font-weight: 600; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .85rem;
  margin-bottom: 1.5rem;
}
.kpi {
  padding: 1rem 1.1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(10px);
}
.kpi .label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--subtle); margin-bottom: .35rem;
}
.kpi .value {
  font-family: var(--serif); font-size: 1.65rem; color: var(--gold-hi);
  letter-spacing: -0.02em; line-height: 1.1;
}
.kpi .hint { font-size: .8rem; color: var(--muted); margin-top: .25rem; }

.progress {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,.06);
  overflow: hidden; border: 1px solid var(--line); margin-top: .65rem;
}
.progress > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  box-shadow: 0 0 12px rgba(217,168,76,.45);
}

.glass {
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.card.glass { padding: 1.35rem 1.4rem; }
.card .card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .85rem;
}
.card .card-head h2 { margin: 0; font-size: 1.15rem; }
.card .card-head a { font-size: .85rem; font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 1rem 1.15rem;
  border-left: 1px solid var(--line-2);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: .35rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--navy-2); border: 2px solid var(--gold);
}
.timeline .t-title { font-weight: 600; color: var(--fg); }
.timeline .t-meta { font-size: .8rem; color: var(--subtle); }

.stack-list { list-style: none; margin: 0; padding: 0; }
.stack-list li {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid var(--line);
}
.stack-list li:last-child { border-bottom: 0; }
.stack-list .primary { font-weight: 600; color: var(--fg); }
.stack-list .secondary { font-size: .8rem; color: var(--subtle); }

.next-action {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
  border-radius: var(--r-lg); border: 1px solid var(--line-3);
  background: linear-gradient(90deg, rgba(217,168,76,.12), rgba(217,168,76,.03));
}
.next-action .na-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .2rem;
}
.next-action .na-body { font-family: var(--serif); font-size: 1.2rem; color: var(--fg); }

.impersonation-banner {
  background: rgba(217,168,76,.15); border-bottom: 1px solid var(--line-3);
  padding: .55rem 1rem; font-size: .85rem; color: var(--gold-hi);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}

.owner-shell .main { max-width: 96rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.btn-sm { padding: .35rem .65rem; font-size: .8rem; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--subtle); margin-right: .4rem; vertical-align: middle;
}
.status-dot.on { background: var(--success); box-shadow: 0 0 8px rgba(127,211,154,.5); }
.status-dot.warn { background: var(--gold); }
.status-dot.off { background: var(--danger); }

.grid-dash {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
}
@media (max-width: 980px) { .grid-dash { grid-template-columns: 1fr; } }

.empty-lux {
  text-align: center; padding: 1.75rem 1rem; color: var(--subtle);
  border: 1px dashed var(--line); border-radius: var(--r); margin: .25rem 0;
}
.empty-lux strong { display: block; color: var(--muted); font-family: var(--serif);
  font-size: 1.05rem; font-weight: 500; margin-bottom: .25rem; }