:root {
  --pro-ink: #0d1b2a;
  --pro-muted: #5c6b7a;
  --pro-line: rgba(13, 27, 42, 0.12);
  --pro-surface: rgba(255, 255, 255, 0.94);
  --pro-brand: #0b766f;
  --pro-brand-deep: #075f5a;
  --pro-accent: #d9903d;
  --pro-danger: #c23d4b;
  --pro-radius: 18px;
  --pro-shadow: 0 18px 55px rgba(25, 43, 57, 0.10);
}

html { color-scheme: light; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  color: var(--pro-ink);
  background: radial-gradient(circle at 8% 0%, rgba(11, 118, 111, 0.11), transparent 32rem), radial-gradient(circle at 95% 8%, rgba(217, 144, 61, 0.10), transparent 28rem), #f6f8f8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before { content: ""; position: fixed; inset: 0 0 auto; height: 4px; z-index: 9999; background: linear-gradient(90deg, var(--pro-brand), #21a69d 65%, var(--pro-accent)); }
::selection { background: rgba(11, 118, 111, 0.2); }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(11, 118, 111, 0.33); outline-offset: 3px; }
.container, .container-wide { width: min(1120px, calc(100% - 32px)); max-width: 1120px; margin-inline: auto; }

.site-header, .topbar { border: 1px solid rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.88); color: var(--pro-ink); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 14px 40px rgba(25, 43, 57, 0.08); }
.site-header { border-width: 0 0 1px; }
.site-nav a { color: var(--pro-muted); font-weight: 700; }
.site-nav a:hover { color: var(--pro-brand); }
.site-brand { color: var(--pro-ink); font-weight: 850; letter-spacing: -0.02em; }

h1, h2, h3, .page-title { color: inherit; letter-spacing: -0.025em; text-wrap: balance; }
h1 { line-height: 1.06; }
.subtitle, .muted { color: var(--pro-muted); }

.card, .panel, .checkout, .portal-entry, main.card { border: 1px solid var(--pro-line); border-radius: var(--pro-radius); background: var(--pro-surface); color: var(--pro-ink); box-shadow: var(--pro-shadow); }
.card { padding: clamp(18px, 3vw, 28px); }

input, select, textarea { min-height: 46px; border: 1px solid rgba(13, 27, 42, 0.18); border-radius: 12px; background: #fff; color: var(--pro-ink); padding: 10px 12px; font: inherit; transition: border-color .16s ease, box-shadow .16s ease; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--pro-brand); outline: none; box-shadow: 0 0 0 4px rgba(11, 118, 111, 0.11); }

button, .btn, .button-link { min-height: 44px; border: 1px solid transparent; border-radius: 12px; background: var(--pro-brand); color: #fff; padding: 0 17px; font: inherit; font-weight: 800; box-shadow: 0 8px 20px rgba(11, 118, 111, 0.16); transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
button:hover:not(:disabled), .btn:hover, .button-link:hover { transform: translateY(-1px); background: var(--pro-brand-deep); box-shadow: 0 12px 26px rgba(11, 118, 111, 0.22); }
button.secondary, .btn.secondary { border-color: var(--pro-line); background: #fff; color: var(--pro-ink); box-shadow: none; }
button.secondary:hover, .btn.secondary:hover { background: #edf5f4; color: var(--pro-ink); }

table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--pro-line); border-radius: 14px; background: #fff; }
th { background: #edf5f4; color: #30434a; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--pro-line); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(11, 118, 111, 0.035); }

pre, .device, .device-identity, .pair-assist-recovery { border: 1px solid var(--pro-line); border-radius: 12px; background: #f2f6f5; color: var(--pro-ink); }
.status-green { color: #087a55; }
.status-red { color: var(--pro-danger); }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .topbar, .site-nav { align-items: flex-start; }
  .topbar { position: static; }
  .nav { width: 100%; justify-content: flex-start; }
  .nav a { flex: 1 1 auto; justify-content: center; }
  table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }