:root {
  --color-bg: #f4f7fb;
  --color-bg-accent: #eaf1f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-text: #16202a;
  --color-muted: #637083;
  --color-border: #d8e1ea;
  --color-border-strong: #b9c7d5;
  --color-primary: #126b73;
  --color-primary-hover: #0d5960;
  --color-secondary: #334155;
  --color-secondary-hover: #1f2937;
  --color-danger: #b42318;
  --color-danger-hover: #8f1d16;
  --color-warning: #a15c07;
  --color-warning-bg: #fff7ed;
  --color-success: #14714f;
  --color-success-bg: #ecfdf5;
  --color-error-bg: #fff1f2;
  --color-focus: #2b8a9a;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 10px 30px rgba(18, 32, 42, .08);
  --shadow-soft: 0 1px 2px rgba(18, 32, 42, .05);
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 34px;
}

* { box-sizing: border-box; }

html { min-width: 0; }

body {
  min-width: 0;
  margin: 0;
  font: 15px/1.5 "Aptos", "IBM Plex Sans", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(43, 138, 154, .12), transparent 32rem),
    linear-gradient(180deg, var(--color-bg-accent), var(--color-bg) 18rem);
  color: var(--color-text);
}

a { color: var(--color-primary); }

a:hover { color: var(--color-primary-hover); }

main, .page-shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  padding: var(--space-lg) 0 var(--space-xl);
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: 14px 16px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(216, 225, 234, .9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

.brand-block { display: grid; gap: 2px; min-width: 180px; }

.brand {
  color: var(--color-text);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
}

.brand-note { color: var(--color-muted); font-size: 13px; }

nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

nav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-secondary);
  font-weight: 700;
  text-decoration: none;
}

nav a:hover, nav a.active { background: #e7f3f5; color: var(--color-primary-hover); }

.hero, .page-title {
  margin: var(--space-lg) 0;
  display: grid;
  gap: var(--space-xs);
}

.hero h1, .page-title h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0;
}

.compact h1 { font-size: clamp(24px, 3vw, 32px); }

.hero p, .page-title p, .muted { margin: 0; color: var(--color-muted); }

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-sm);
}

.section-title h2 { margin: 0; font-size: 20px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: var(--space-md); }

.card, .panel, .notice, .login, .access, .empty-state {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.card, .panel, .notice, .login, .access, .empty-state { padding: var(--space-lg); }

.card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

.card h2, .panel h2 { margin: 0; font-size: 18px; line-height: 1.25; }

.card p, .panel p { margin: 0; }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.tag, .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
}

.status-pill.success { border-color: #b7e4cf; background: var(--color-success-bg); color: var(--color-success); }
.status-pill.warning { border-color: #fed7aa; background: var(--color-warning-bg); color: var(--color-warning); }
.status-pill.error { border-color: #fecdd3; background: var(--color-error-bg); color: var(--color-danger); }

.button, button, .small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  width: fit-content;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.button:hover, button:hover, .small:hover { background: var(--color-primary-hover); color: #fff; }

.button.secondary, button.secondary, .small {
  background: var(--color-secondary);
}

.button.secondary:hover, button.secondary:hover, .small:hover { background: var(--color-secondary-hover); }

.button.ghost, button.ghost {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-secondary);
}

.button.ghost:hover, button.ghost:hover { background: var(--color-surface-muted); color: var(--color-text); }

.danger {
  background: var(--color-danger);
  color: #fff;
}

.danger:hover { background: var(--color-danger-hover); }

.warning-action {
  background: var(--color-warning);
  color: #fff;
}

.warning-action:hover { background: #844b06; color: #fff; }

button[disabled], .button[aria-disabled="true"] {
  cursor: wait;
  opacity: .68;
}

.panel { margin: var(--space-md) 0; display: grid; gap: var(--space-md); }

.row, .form-grid {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: end;
}

.field {
  display: grid;
  gap: 5px;
  min-width: min(260px, 100%);
}

label {
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 800;
}

.hint { color: var(--color-muted); font-size: 13px; }

input, textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
}

input:invalid:not(:placeholder-shown) { border-color: var(--color-danger); }

:focus-visible {
  outline: 3px solid rgba(43, 138, 154, .25);
  outline-offset: 2px;
}

.notice, .alert {
  display: grid;
  gap: var(--space-sm);
  border-left: 4px solid var(--color-success);
  background: linear-gradient(90deg, var(--color-success-bg), var(--color-surface));
}

.alert.error, .error {
  color: var(--color-danger);
  font-weight: 800;
}

.alert.error {
  border-left-color: var(--color-danger);
  background: linear-gradient(90deg, var(--color-error-bg), var(--color-surface));
}

.warn {
  color: var(--color-warning);
  font-weight: 800;
}

.service-state {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  color: var(--color-muted);
}

.service-state span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.task-status {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-secondary);
  font-weight: 800;
}

.task-status.running {
  border-left-color: var(--color-primary);
}

.task-status.success {
  border-left-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.task-status.error {
  border-left-color: var(--color-danger);
  background: var(--color-error-bg);
  color: var(--color-danger);
}

.copy-row, .actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}

.copy-row code { flex: 1 1 360px; }

.table { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }

.table-head, .item {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.5fr) minmax(220px, auto);
  gap: var(--space-md);
  align-items: center;
  padding: 13px 14px;
}

.table-head {
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
}

.item {
  border-top: 1px solid var(--color-border);
}

.item:first-child { border-top: 0; }

.item strong { min-width: 0; overflow-wrap: anywhere; }
.item span { min-width: 0; overflow-wrap: anywhere; color: var(--color-muted); }
.item .actions { justify-content: flex-end; }

.empty-state {
  display: grid;
  gap: var(--space-xs);
  color: var(--color-muted);
}

.empty-state strong { color: var(--color-text); }

code, pre, textarea { font-family: "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace; }

code {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: #edf3f7;
  padding: 4px 6px;
  border: 1px solid #d9e5ed;
  border-radius: var(--radius-sm);
}

pre {
  max-height: 430px;
  overflow: auto;
  margin: 0;
  background: #111827;
  color: #e5edf5;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

.login {
  width: min(390px, 100%);
  display: grid;
  gap: var(--space-md);
}

.login h1 { margin: 0; font-size: 28px; }

.access {
  max-width: 780px;
  margin: var(--space-xl) auto;
  display: grid;
  gap: var(--space-md);
}

.access h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); }

.qr {
  width: 220px;
  height: 220px;
  padding: var(--space-sm);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

textarea {
  min-height: 240px;
  resize: vertical;
}

ul { margin: 0; padding-left: 20px; }

@media (max-width: 760px) {
  main, .page-shell { width: min(100vw - 24px, 1180px); padding-top: 12px; }
  .top, .row, .form-grid, .copy-row { align-items: stretch; flex-direction: column; }
  nav { justify-content: flex-start; }
  nav a { flex: 1 1 auto; justify-content: center; }
  .section-title { align-items: stretch; flex-direction: column; }
  .table { border: 0; background: transparent; gap: var(--space-sm); overflow: visible; }
  .table-head { display: none; }
  .item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
  }
  .item .actions { justify-content: stretch; }
  .item .actions > * { flex: 1 1 100%; }
  input, button, .button, .small { width: 100%; }
  .qr { width: min(220px, 100%); height: auto; }
}