:root {
  color: #20332d;
  background: #f4f5ef;
  font-family: Inter, "Noto Sans SC", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #20332d;
  --muted: #687972;
  --green: #166a4b;
  --green-dark: #0d5038;
  --green-soft: #e7f2eb;
  --cream: #f4f5ef;
  --paper: #fffefb;
  --line: #dce3dc;
  --warning: #9a5b0b;
  --warning-soft: #fff4d8;
  --danger: #b43636;
  --danger-soft: #fceaea;
  --shadow: 0 18px 50px rgb(32 51 45 / 8%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 20rem; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--cream); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
:focus-visible { outline: 3px solid #e5a82d; outline-offset: 3px; }

.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: 0.75rem 1rem; border-radius: 0.5rem; color: white; background: var(--green-dark); }
.skip-link:focus { top: 1rem; }
.global-status { position: fixed; z-index: 90; top: 1rem; right: 1rem; max-width: min(26rem, calc(100vw - 2rem)); padding: 0.9rem 1rem; border: 1px solid #b8cfbf; border-radius: 0.8rem; background: var(--paper); box-shadow: var(--shadow); font-weight: 650; }
.global-status.error { border-color: #efb5b5; color: var(--danger); }

.login-view { display: grid; grid-template-columns: minmax(18rem, 0.8fr) minmax(24rem, 1.2fr); min-height: 100vh; }
.login-brand { display: grid; align-content: center; justify-items: center; gap: 1rem; color: #f5faf6; background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / 14%) 0 1px, transparent 2px) 0 0 / 28px 28px, linear-gradient(145deg, #0e5139, #183f34); }
.login-brand .brand-mark { width: 6rem; height: 6rem; font-size: 2.5rem; }
.login-brand p { margin: 0; font-size: 0.72rem; letter-spacing: 0.28em; opacity: 0.72; }
.login-card { align-self: center; width: min(31rem, calc(100% - 3rem)); margin: 2rem auto; padding: 3rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--paper); box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 0.45rem; color: var(--green); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.login-card h1, .topbar h1 { margin: 0; color: var(--ink); line-height: 1.2; }
.login-card h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.login-intro { margin: 1rem 0 2rem; color: var(--muted); line-height: 1.75; }

.form-stack { display: grid; gap: 1.15rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .wide { grid-column: 1 / -1; }
label { display: grid; gap: 0.45rem; color: var(--ink); font-size: 0.88rem; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 2.75rem; padding: 0.72rem 0.82rem; border: 1px solid #cbd6cd; border-radius: 0.65rem; color: var(--ink); background: white; }
textarea { min-height: 11rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgb(22 106 75 / 10%); }
.button, .icon-button { border: 0; border-radius: 0.65rem; font-weight: 750; transition: transform 120ms ease, background 120ms ease; }
.button { min-height: 2.65rem; padding: 0.7rem 1rem; }
.button:hover:not(:disabled), .icon-button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { color: white; background: var(--green); }
.button.primary:hover:not(:disabled) { background: var(--green-dark); }
.button.subtle { color: var(--ink); background: #eef1ec; }
.button.danger { color: var(--danger); background: var(--danger-soft); }
.button.full { width: 100%; }
.button.small { min-height: 2.15rem; padding: 0.45rem 0.7rem; font-size: 0.78rem; }
.form-error { margin: 0; color: var(--danger); font-size: 0.86rem; font-weight: 650; }
.privacy-note { margin: 1.5rem 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.6; }

.brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 2.65rem; height: 2.65rem; border: 1px solid rgb(255 255 255 / 34%); border-radius: 50%; color: white; background: rgb(255 255 255 / 10%); font-family: "Noto Serif SC", serif; font-weight: 800; }
.app-shell { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 1.5rem 1rem; color: #eef7f1; background: linear-gradient(180deg, #153f33, #0e3028); }
.brand { display: flex; align-items: center; gap: 0.8rem; padding: 0 0.5rem 1.7rem; }
.brand div { display: grid; gap: 0.15rem; }
.brand strong { font-size: 0.95rem; }
.brand span:last-child { color: #a8c2b7; font-size: 0.7rem; }
.side-nav { display: grid; gap: 0.32rem; }
.side-nav button { display: grid; grid-template-columns: 1.4rem 1fr; align-items: center; gap: 0.6rem; width: 100%; padding: 0.72rem 0.8rem; border: 0; border-radius: 0.62rem; color: #bfd0c8; background: transparent; text-align: left; font-size: 0.88rem; font-weight: 650; }
.side-nav button span { text-align: center; font-size: 1rem; }
.side-nav button:hover, .side-nav button[aria-current="page"] { color: white; background: rgb(255 255 255 / 10%); }
.sidebar-foot { display: flex; align-items: center; gap: 0.65rem; margin-top: auto; padding: 1rem 0.55rem 0; border-top: 1px solid rgb(255 255 255 / 11%); }
.sidebar-foot div { display: grid; gap: 0.12rem; }
.sidebar-foot strong { font-size: 0.72rem; }
.sidebar-foot span:last-child { color: #96afa5; font-size: 0.68rem; }
.health-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #79c895; box-shadow: 0 0 0 4px rgb(121 200 149 / 12%); }

.main { min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.6rem clamp(1.2rem, 4vw, 3.2rem); border-bottom: 1px solid var(--line); background: rgb(244 245 239 / 92%); backdrop-filter: blur(10px); }
.topbar h1 { font-size: clamp(1.55rem, 3vw, 2.05rem); }
.topbar-actions { display: flex; align-items: center; gap: 0.7rem; }
.session-expiry { color: var(--muted); font-size: 0.72rem; }
.icon-button { width: 2.65rem; height: 2.65rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); font-size: 1.1rem; }
.page-content { display: grid; gap: 1.2rem; padding: clamp(1.2rem, 4vw, 3.2rem); }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.card, .panel { border: 1px solid var(--line); border-radius: 0.9rem; background: var(--paper); box-shadow: 0 8px 24px rgb(32 51 45 / 4%); }
.card { padding: 1.2rem; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.card-label { color: var(--muted); font-size: 0.78rem; font-weight: 650; }
.card-value { display: block; margin-top: 0.6rem; color: var(--ink); font-family: ui-serif, Georgia, serif; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.card-note { display: block; margin-top: 0.4rem; color: var(--muted); font-size: 0.72rem; }
.metric-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.55rem; color: var(--green); background: var(--green-soft); }
.panel { overflow: hidden; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font-size: 1rem; }
.panel-header p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.55; }
.panel-body { padding: 1.25rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 0.7rem; }
.toolbar label { min-width: 9rem; }
.toolbar-spacer { flex: 1; }
.split { display: grid; grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.25fr); gap: 1.2rem; align-items: start; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th, td { padding: 0.82rem 1rem; border-bottom: 1px solid #edf0eb; text-align: left; vertical-align: middle; }
th { color: var(--muted); background: #fafbf7; font-size: 0.7rem; letter-spacing: 0.04em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.73rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.55rem; border-radius: 999px; color: var(--muted); background: #edf1ed; font-size: 0.68rem; font-weight: 750; white-space: nowrap; }
.badge::before { content: ""; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: currentColor; }
.badge.success { color: var(--green); background: var(--green-soft); }
.badge.warning { color: var(--warning); background: var(--warning-soft); }
.badge.danger { color: var(--danger); background: var(--danger-soft); }
.badge.info { color: #326795; background: #e8f2fb; }
.empty, .loading-state { display: grid; place-items: center; min-height: 12rem; padding: 2rem; color: var(--muted); text-align: center; }
.loading-state::before { content: ""; width: 1.8rem; height: 1.8rem; margin-bottom: 0.7rem; border: 3px solid #d4ded6; border-top-color: var(--green); border-radius: 50%; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.callout { padding: 1rem; border-left: 4px solid var(--green); border-radius: 0.55rem; color: #345048; background: var(--green-soft); font-size: 0.8rem; line-height: 1.65; }
.callout.warning { border-color: #d69625; background: var(--warning-soft); }
.once-codes { display: grid; gap: 0.55rem; margin-top: 1rem; padding: 1rem; border: 1px dashed #9cb8a5; border-radius: 0.7rem; background: #f6fbf7; }
.code-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.code-row code { font-size: 0.92rem; font-weight: 800; letter-spacing: 0.08em; }
.config-detail { max-height: 22rem; overflow: auto; margin: 0; padding: 1rem; border-radius: 0.6rem; background: #182a25; color: #dcebe2; white-space: pre-wrap; word-break: break-word; font-size: 0.72rem; }
.toggle-row { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; }
.toggle-row input { width: 1.1rem; min-height: auto; accent-color: var(--green); }
.help { margin: 0; color: var(--muted); font-size: 0.74rem; line-height: 1.6; }
.danger-text { color: var(--danger); }
.provider-status { display: grid; gap: 0.9rem; }
.provider-status > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }
.provider-status p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.7; }

@media (max-width: 68rem) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .login-view { grid-template-columns: 1fr; }
  .login-brand { min-height: 10rem; align-content: end; padding: 1.5rem; }
  .login-brand .brand-mark { width: 4rem; height: 4rem; font-size: 1.7rem; }
  .login-card { align-self: start; margin-top: -1rem; padding: 1.6rem; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 0.8rem; }
  .brand { padding-bottom: 0.8rem; }
  .side-nav { display: flex; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav button { flex: 0 0 auto; grid-template-columns: 1.1rem auto; width: auto; }
  .sidebar-foot { display: none; }
  .topbar { align-items: flex-start; }
  .session-expiry { display: none; }
  .topbar-actions .button { padding-inline: 0.7rem; }
  .form-grid { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .panel-header { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}