:root {
  color-scheme: dark;
  --bg: #080d18;
  --bg-soft: #0c1322;
  --surface: #111a2b;
  --surface-raised: #162238;
  --surface-hover: #1b2942;
  --border: #263651;
  --border-soft: #1d2a41;
  --text: #eef3fb;
  --muted: #8fa0b8;
  --accent: #34d399;
  --accent-strong: #10b981;
  --accent-soft: rgb(52 211 153 / 12%);
  --blue: #60a5fa;
  --danger: #fb7185;
  --danger-soft: rgb(251 113 133 / 12%);
  --warning: #fbbf24;
  --shadow: 0 22px 60px rgb(0 0 0 / 22%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 78% -10%, rgb(37 99 235 / 10%), transparent 36rem),
    var(--bg);
  color: var(--text);
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .45rem; font-size: clamp(1.8rem, 3vw, 2.45rem); letter-spacing: -.04em; }
h2 { margin-bottom: .25rem; font-size: 1.02rem; }
h3 { margin-bottom: .3rem; font-size: 1rem; }
p { color: var(--muted); }
small { display: block; color: var(--muted); }
code, pre { font-family: "SFMono-Regular", Consolas, monospace; }
code { color: #b9d6ff; overflow-wrap: anywhere; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 0, rgb(52 211 153 / 10%), transparent 28rem),
    linear-gradient(145deg, #080d18, #0b1423);
}

.login-card {
  width: min(28rem, 100%);
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: rgb(17 26 43 / 94%);
  box-shadow: var(--shadow);
}
.loading-card { text-align: center; }

.brand-row { display: flex; align-items: center; gap: .9rem; margin-bottom: 2rem; }
.brand-row h1 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.brand-row p { margin: .2rem 0 0; font-size: .85rem; }
.brand-mark {
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgb(52 211 153 / 38%);
  border-radius: .8rem;
  background: linear-gradient(145deg, rgb(52 211 153 / 20%), rgb(16 185 129 / 5%));
  color: var(--accent);
  font-weight: 800;
  letter-spacing: -.06em;
}

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1rem;
  border-right: 1px solid var(--border-soft);
  background: rgb(10 16 29 / 88%);
  backdrop-filter: blur(18px);
}
.sidebar-brand { padding: 0 .5rem; margin-bottom: 2.2rem; }
.sidebar-brand strong { display: block; font-size: .93rem; }
.sidebar-brand small { margin-top: .18rem; font-size: .69rem; text-transform: uppercase; letter-spacing: .08em; }
.navigation { display: grid; gap: .35rem; }
.nav-link {
  padding: .72rem .8rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  color: var(--muted);
  font-size: .9rem;
  text-decoration: none;
  transition: 150ms ease;
}
.nav-link:hover { background: var(--surface); color: var(--text); }
.nav-link.active { border-color: rgb(52 211 153 / 22%); background: var(--accent-soft); color: var(--accent); }
.sidebar-footer { margin-top: auto; padding: 1rem .5rem 0; border-top: 1px solid var(--border-soft); }
.sidebar-footer small { margin-bottom: .65rem; overflow-wrap: anywhere; }
.sidebar-footer .button { display: block; width: 100%; margin-top: .45rem; text-align: center; text-decoration: none; }

.content-shell { min-width: 0; }
.topbar {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.1rem;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--border-soft);
  background: rgb(8 13 24 / 68%);
  backdrop-filter: blur(18px);
}
.topbar > div { text-align: right; }
.topbar strong { display: block; font-size: .84rem; }
.eyebrow { display: block; margin-bottom: .35rem; color: var(--accent); font-size: .68rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.expert-select { min-width: min(18rem, 48vw); }
.content { width: min(100%, 96rem); margin: 0 auto; padding: 2.2rem clamp(1.25rem, 4vw, 3.5rem) 4rem; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.page-heading p { margin-bottom: 0; }

input, select {
  width: 100%;
  min-height: 2.7rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: .58rem;
  outline: none;
  background: var(--bg-soft);
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
input:focus, select:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgb(52 211 153 / 10%); }
input[type="checkbox"] { width: 1rem; min-height: 1rem; accent-color: var(--accent-strong); }
label { color: #cbd6e5; font-size: .78rem; font-weight: 650; }

.button {
  min-height: 2.65rem;
  padding: .65rem 1rem;
  border: 1px solid transparent;
  border-radius: .58rem;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  font-size: .82rem;
  transition: 150ms ease;
}
.button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.button.primary { background: var(--accent-strong); color: #03271c; }
.button.secondary { border-color: rgb(96 165 250 / 28%); background: rgb(96 165 250 / 12%); color: #bfdbfe; }
.button.ghost { border-color: var(--border); background: transparent; color: var(--muted); }
.button.danger { border-color: rgb(251 113 133 / 28%); background: var(--danger-soft); color: #fda4af; }
.button.compact { min-height: 2rem; padding: .38rem .65rem; font-size: .72rem; }

.feedback { margin-bottom: 1rem; padding: .7rem .85rem; border-radius: .58rem; font-size: .82rem; }
.feedback:empty { display: none; }
.feedback.error { border: 1px solid rgb(251 113 133 / 25%); background: var(--danger-soft); color: #fda4af; }
.feedback.success { border: 1px solid rgb(52 211 153 / 24%); background: var(--accent-soft); color: #6ee7b7; }
.feedback.loading { border: 1px solid var(--border); background: var(--surface); color: var(--muted); }

.stack-form { display: grid; gap: .7rem; }
.stack-form label:not(:first-child) { margin-top: .25rem; }
.check-row { display: flex; align-items: center; gap: .55rem; margin: .45rem 0; }
.form-actions, .inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.form-actions { margin-top: .75rem; }
.field-help, .timezone-note { margin: .65rem 0 0; font-size: .75rem; }
.timezone-note { text-align: center; }

.period-controls, .custom-period { display: flex; align-items: center; gap: .55rem; }
.period-controls > select { width: 12rem; }
.custom-period input { width: 9rem; }
.period-caption { margin: -1rem 0 1.25rem; color: var(--muted); font-size: .75rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.metric-card {
  min-height: 8.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.05rem;
  border: 1px solid var(--border-soft);
  border-radius: .85rem;
  background: linear-gradient(145deg, var(--surface), #0e1727);
}
.metric-card > span { color: var(--muted); font-size: .75rem; }
.metric-card strong { font-size: 1.85rem; letter-spacing: -.04em; }
.metric-card small { font-size: .7rem; }

.panel-section, .editor-panel {
  margin-top: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--border-soft);
  border-radius: .85rem;
  background: var(--surface);
}
.editor-panel { align-self: start; margin-top: 0; background: var(--surface-raised); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-title h2 { margin: 0; }
.section-title span { color: var(--muted); font-size: .72rem; }
.funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.funnel-step { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; padding: .8rem; border: 1px solid var(--border); border-radius: .68rem; background: var(--bg-soft); }
.funnel-step > b { grid-column: 2; font-size: 1.25rem; }
.funnel-step strong { font-size: .78rem; }
.funnel-step small { margin-top: .18rem; font-size: .62rem; }
.step-number { color: var(--accent); font-size: .68rem; font-weight: 800; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .78rem; }
th { padding: .65rem .7rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .65rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
td { padding: .8rem .7rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td strong, td small { display: block; }
td small { margin-top: .25rem; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.empty-state { padding: 2rem; color: var(--muted); text-align: center; }
.empty-panel { padding: 3rem; border: 1px dashed var(--border); border-radius: .85rem; color: var(--muted); text-align: center; }

.management-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(20rem, .8fr); gap: 1rem; }
.cards-list, .rows-list { display: grid; gap: .75rem; }
.expert-card, .link-row { padding: 1rem; border: 1px solid var(--border-soft); border-radius: .8rem; background: var(--surface); }
.card-heading, .link-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card-heading code { font-size: .72rem; }
.detail-list { display: grid; grid-template-columns: 7rem 1fr; margin: 1rem 0; font-size: .75rem; }
.detail-list dt, .detail-list dd { padding: .38rem 0; border-bottom: 1px solid var(--border-soft); }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.card-actions { display: flex; gap: .5rem; }
.status-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .48rem; border-radius: 99px; background: var(--accent-soft); color: #6ee7b7; font-size: .66rem; font-weight: 750; white-space: nowrap; }
.status-badge.muted { background: rgb(143 160 184 / 10%); color: var(--muted); }
.status-badge.failed { background: var(--danger-soft); color: #fda4af; }
.status-dot { width: .38rem; height: .38rem; border-radius: 50%; background: var(--accent); }
.status-dot.inactive { background: var(--muted); }
.secret-box { display: grid; gap: .55rem; margin-top: .5rem; padding: .8rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--bg-soft); }
.secret-box code { max-height: 4rem; overflow: auto; font-size: .7rem; }

.link-management { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(19rem, .7fr); gap: 1rem; align-items: start; }
.link-management > :nth-child(-n+2) { margin-top: 0; }
.link-main strong, .link-main code { display: block; }
.link-main code { margin-top: .4rem; font-size: .72rem; }
.link-meta { margin: .8rem 0; color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.two-column-form { grid-template-columns: 7rem minmax(0, 1fr); align-items: center; }
.two-column-form label { margin: 0 !important; }
.span-all { grid-column: 1 / -1; }
.admin-management { margin-bottom: 1rem; }
.password-panel { scroll-margin-top: 1rem; }
.password-form { max-width: 34rem; }

details { margin-bottom: .35rem; }
summary { cursor: pointer; color: var(--blue); font-size: .72rem; }
pre { max-width: 32rem; max-height: 16rem; overflow: auto; padding: .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--bg); color: #c9d7ea; font-size: .68rem; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .management-grid, .link-management { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: .8rem 1rem; border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .sidebar-brand { margin-bottom: .75rem; }
  .navigation { display: flex; overflow-x: auto; }
  .nav-link { white-space: nowrap; }
  .sidebar-footer { display: none; }
  .topbar { height: auto; padding: .8rem 1rem; }
  .content { padding: 1.4rem 1rem 3rem; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .period-controls, .custom-period { width: 100%; flex-wrap: wrap; }
  .period-controls > select { width: 100%; }
  .metric-grid, .split-grid, .funnel { grid-template-columns: 1fr; }
  .metric-card { min-height: 7rem; }
  .detail-list { grid-template-columns: 5.5rem 1fr; }
}