:root {
  color-scheme: light;
  --color-canvas: #f4f7f5;
  --color-surface: #ffffff;
  --color-surface-subtle: #f0f4f1;
  --color-text: #17211b;
  --color-text-muted: #5f6d65;
  --color-text-disabled: #8e9992;
  --color-border: #dce4df;
  --color-border-strong: #bcc9c1;
  --color-primary-50: #e7f4ed;
  --color-primary-100: #cfe9dc;
  --color-primary-200: #a6d7bf;
  --color-primary-500: #0d8f68;
  --color-primary-600: #087657;
  --color-primary-700: #075c47;
  --color-primary-800: #064a3a;
  --color-primary-900: #07362d;
  --color-success: #137a4b;
  --color-success-subtle: #e8f5ed;
  --color-info: #2563a6;
  --color-info-subtle: #eaf2fb;
  --color-warning: #9a6700;
  --color-warning-subtle: #fff4d6;
  --color-danger: #b42318;
  --color-danger-subtle: #fdecea;
  --color-border: #dce4df;
  --color-border-strong: #bcc9c1;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-raised: 0 1px 2px rgb(23 33 27 / 8%);
  --focus-ring: 0 0 0 3px rgb(26 143 99 / 24%);
  --content-width: 1120px;
  --form-width: 640px;
  --auth-width: 480px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--color-canvas); }
body { margin: 0; color: var(--color-text); background: var(--color-canvas); font-size: 15px; line-height: 1.533; }
button, input { font: inherit; }
a { color: var(--color-primary-700); }
a:hover { color: var(--color-primary-900); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.skip-link { position: fixed; z-index: 10; top: -48px; left: var(--space-4); padding: var(--space-2) var(--space-3); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-primary-600); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-3); }
.site-header { min-height: 72px; background: rgb(255 255 255 / 88%); border-bottom: 1px solid var(--color-border); }
.site-header__content { display: flex; align-items: center; gap: var(--space-7); width: min(100% - 32px, var(--content-width)); min-height: 64px; margin: 0 auto; }
.site-header__content--narrow { width: min(100% - 32px, var(--form-width)); }
.site-header__content--auth { width: min(100% - 32px, var(--auth-width)); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--color-text); }
.brand__mark { position: relative; display: grid; width: 32px; height: 32px; place-items: center; color: white; background: var(--color-primary-700); border-radius: 10px; box-shadow: 0 4px 12px rgb(7 92 71 / 18%); }
.brand__mark::before, .brand__mark::after, .brand__mark-pulse { position: absolute; width: 5px; height: 5px; content: ""; background: #b9f4d4; border-radius: 50%; }
.brand__mark::before { top: 8px; left: 8px; }
.brand__mark::after { right: 8px; bottom: 8px; }
.brand__mark-pulse { top: 13px; left: 13px; width: 6px; height: 6px; background: white; }
.nav { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--space-5); min-width: 0; }
.nav__links { display: flex; align-items: center; gap: var(--space-3); }
.nav__link { padding: 8px 4px; color: var(--color-text-muted); font-weight: 500; text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--color-text); border-bottom: 2px solid var(--color-primary-600); }
.account-menu { position: relative; flex: 0 0 auto; }
.account-menu__trigger { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 4px 8px; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-md); font-size: 14px; list-style: none; }
.account-menu__trigger::-webkit-details-marker { display: none; }
.account-menu__trigger:hover, .account-menu[open] .account-menu__trigger { color: var(--color-text); background: var(--color-surface-subtle); }
.account-menu__trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.account-menu__avatar { display: grid; width: 28px; height: 28px; place-items: center; color: var(--color-primary-900); background: var(--color-primary-50); border-radius: 50%; font-size: 13px; font-weight: 600; text-transform: uppercase; }
.account-menu__address { overflow: hidden; max-width: 240px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--color-text-muted); transform: translateY(-2px) rotate(45deg); }
.account-menu__panel { position: absolute; z-index: 2; top: calc(100% + var(--space-2)); right: 0; width: 208px; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }
.account-menu__panel .button { width: 100%; justify-content: flex-start; padding: 0 var(--space-3); }

.page { width: min(100% - 64px, var(--content-width)); margin: 0 auto; padding: var(--space-7) 0 var(--space-8); }
.page--narrow { width: min(100% - 32px, var(--form-width)); padding: var(--space-7) 0; }
.page--auth { width: min(100% - 32px, var(--auth-width)); }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: 13px; font-weight: 500; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: var(--space-2); font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.015em; }
h2 { margin-bottom: var(--space-3); font-size: 18px; font-weight: 600; line-height: 26px; }
h3 { margin-bottom: var(--space-2); font-size: 16px; font-weight: 600; line-height: 24px; }
.lead { max-width: 70ch; margin-bottom: 0; color: var(--color-text-muted); }
.muted { color: var(--color-text-muted); }
.small { font-size: 13px; line-height: 19px; }

.card { padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.card--compact { padding: 20px; }
.section { margin-top: var(--space-6); }
.page-heading + .section { margin-top: 0; }
.section + .section { margin-top: var(--space-6); }
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label, legend { font-size: 14px; font-weight: 500; line-height: 20px; }
.field input { width: 100%; height: 42px; padding: 0 12px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.password-field { position: relative; }
.password-field input { padding-right: 84px; }
.password-toggle { position: absolute; top: 1px; right: 1px; min-width: 76px; height: 40px; padding: 0 var(--space-2); color: var(--color-primary-700); background: transparent; border: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; cursor: pointer; font-size: 13px; font-weight: 500; }
.password-toggle:hover { color: var(--color-primary-900); background: var(--color-primary-50); }
.field input::placeholder { color: var(--color-text-disabled); }
.field input:focus { border-color: var(--color-primary-600); }
.form-help { margin: -4px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 19px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.actions--center { justify-content: center; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; font-size: 15px; font-weight: 500; line-height: 20px; text-decoration: none; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; }
.button:hover { color: var(--color-text); background: var(--color-surface-subtle); border-color: var(--color-text-muted); }
.button:active { transform: translateY(1px); }
.button--primary { color: white; background: var(--color-primary-600); border-color: var(--color-primary-600); }
.button--primary:hover { color: white; background: var(--color-primary-700); border-color: var(--color-primary-700); }
.button--primary:active { background: var(--color-primary-800); border-color: var(--color-primary-800); }
.button--danger { color: var(--color-danger); background: var(--color-surface); border-color: var(--color-danger); }
.button--danger:hover { color: white; background: var(--color-danger); border-color: var(--color-danger); }
.button--ghost { padding-right: 4px; padding-left: 4px; color: var(--color-text-muted); background: transparent; border-color: transparent; }
.button--ghost:hover { color: var(--color-text); background: var(--color-surface-subtle); border-color: transparent; }
.button--danger-link { color: var(--color-danger); }
.button--danger-link:hover { color: var(--color-danger); background: var(--color-danger-subtle); }

.alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-left: 3px solid currentColor; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.alert p { margin: 0; }
.alert--error { color: var(--color-danger); background: var(--color-danger-subtle); }
.alert--success { color: var(--color-success); background: var(--color-success-subtle); }
.alert--info { color: var(--color-info); background: var(--color-info-subtle); }
.alert--warning { color: var(--color-warning); background: var(--color-warning-subtle); }
.alert__icon { flex: 0 0 auto; font-weight: 600; }
.status { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; color: var(--color-success); background: var(--color-success-subtle); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; line-height: 19px; }
.status__icon { margin-right: 5px; font-weight: 600; }
.status--warning { color: var(--color-warning); background: var(--color-warning-subtle); }

.connections-list { max-width: 800px; }
.connection-card { display: grid; gap: var(--space-5); }
.connection-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.provider { display: flex; align-items: center; gap: var(--space-3); }
.provider__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.provider__title-row h2 { margin-bottom: 0; }
.provider__mark { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; background: #fff4ef; border: 1px solid #ffd9c8; border-radius: var(--radius-md); }
.provider__mark img { display: block; max-width: 26px; max-height: 26px; width: auto; height: auto; }
.sync-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4) var(--space-5); margin: var(--space-4) 0 0; }
.sync-kpis div { min-width: 0; }
.sync-kpis dt { color: var(--color-text-muted); font-size: 13px; font-weight: 500; line-height: 19px; }
.sync-kpis dd { margin: 2px 0 0; color: var(--color-text); font-size: 16px; font-weight: 600; line-height: 24px; }
.metadata { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 19px; }
.metadata strong { color: var(--color-text); font-weight: 500; }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--color-text-muted); font-size: 13px; line-height: 19px; }
.auth-divider::before, .auth-divider::after { width: 100%; height: 1px; content: ""; background: var(--color-border); }
.provider-button { gap: var(--space-2); }
.provider-button img { width: 18px; height: 18px; }
.auth-footer-link { margin: var(--space-5) 0 0; font-size: 13px; line-height: 19px; }
.oauth-permissions { padding: 0; margin: var(--space-4) 0; list-style: none; border-top: 1px solid var(--color-border); }
.oauth-permissions li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.result { text-align: center; }
.result__mark { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto var(--space-4); color: var(--color-success); background: var(--color-success-subtle); border-radius: 50%; font-weight: 600; }
.result__mark--error { color: var(--color-danger); background: var(--color-danger-subtle); }
.admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.admin-stat { display: flex; flex-direction: column; gap: 4px; }
.admin-stat strong { font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.admin-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.admin-table th { color: var(--color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.admin-table code { font-size: 12px; overflow-wrap: anywhere; }

.site-footer { padding: 24px 0 32px; color: var(--color-text-muted); font-size: 13px; line-height: 19px; }
.site-footer__content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; width: min(100% - 64px, var(--content-width)); margin: 0 auto; padding-top: 20px; border-top: 1px solid var(--color-border); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__locale { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__locale span { color: var(--color-text-disabled); }
.site-footer__locale a { padding: 6px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-decoration: none; }
.site-footer__locale a[aria-current="true"] { color: var(--color-primary-900); text-decoration: underline; text-underline-offset: 4px; }
.site-footer a { color: var(--color-text-muted); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--color-text); }

.home-page { padding-top: 0; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: end; gap: clamp(32px, 7vw, 96px); min-height: 480px; padding: 76px 0 72px; }
.home-hero__copy { max-width: 700px; }
.home-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 24px; color: var(--color-primary-700); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.home-kicker::before { width: 8px; height: 8px; content: ""; background: #25b879; border-radius: 50%; box-shadow: 0 0 0 5px var(--color-primary-100); }
.home-hero h1 { max-width: 660px; margin-bottom: 22px; color: var(--color-primary-900); font-size: clamp(44px, 6vw, 76px); font-weight: 650; line-height: .98; letter-spacing: -.055em; }
.home-hero .lead { max-width: 590px; font-size: clamp(18px, 2vw, 21px); line-height: 1.55; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.home-hero__note { margin: 18px 0 0; color: var(--color-text-muted); font-size: 14px; }
.home-signal { position: relative; min-height: 300px; padding: 28px; overflow: hidden; background: var(--color-primary-900); border-radius: 24px; box-shadow: 0 20px 45px rgb(7 54 45 / 16%); }
.home-signal::before { position: absolute; top: -80px; right: -60px; width: 250px; height: 250px; content: ""; background: radial-gradient(circle, rgb(94 230 168 / 48%) 0, rgb(94 230 168 / 0%) 68%); }
.home-signal__label { position: relative; margin: 0 0 42px; color: #b9f4d4; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.home-signal__metric { position: relative; margin: 0; color: white; font-size: clamp(48px, 6vw, 72px); font-weight: 650; line-height: 1; letter-spacing: -.06em; }
.home-signal__caption { position: relative; max-width: 220px; margin: 10px 0 0; color: #d0e8dc; font-size: 15px; line-height: 1.5; }
.home-signal__line { position: absolute; right: 28px; bottom: 40px; left: 28px; height: 58px; border-bottom: 2px solid #5ee6a8; clip-path: polygon(0 70%, 8% 62%, 15% 74%, 25% 38%, 35% 55%, 43% 18%, 53% 44%, 62% 30%, 72% 48%, 82% 10%, 92% 26%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(135deg, rgb(94 230 168 / 0%) 0 10%, rgb(94 230 168 / 8%) 10% 100%); }
.home-section { padding: 40px 0 16px; border-top: 1px solid var(--color-border); }
.home-section__heading { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1fr); gap: 24px; margin-bottom: 28px; }
.home-section__heading h2 { margin-bottom: 0; color: var(--color-primary-900); font-size: 28px; line-height: 1.15; letter-spacing: -.03em; }
.home-section__heading p { max-width: 52ch; margin: 0; color: var(--color-text-muted); font-size: 17px; }
.home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-card { min-height: 164px; padding: 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.home-card__index { display: block; margin-bottom: 28px; color: var(--color-primary-600); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.home-card h3 { margin-bottom: 8px; font-size: 18px; }
.home-card p { margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.55; }
.home-status { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 18px 20px; background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: var(--radius-lg); }
.home-status p { margin: 0; color: var(--color-primary-900); }
.home-status strong { font-weight: 650; }
.home-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.home-contact p { margin: 0; color: var(--color-text-muted); }
.home-contact strong { display: block; margin-bottom: 4px; color: var(--color-text); font-size: 17px; }

.legal-page { max-width: 820px; }
.legal-page .page-heading { margin-bottom: 40px; }
.legal-page h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; }
.legal-page h2 { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-border); font-size: 21px; }
.legal-page p, .legal-page li { max-width: 72ch; color: var(--color-text-muted); font-size: 16px; line-height: 1.7; }
.legal-page ul { padding-left: 24px; }
.legal-page li + li { margin-top: 8px; }
.legal-note { padding: 18px 20px; color: var(--color-primary-900); background: var(--color-primary-50); border-left: 3px solid var(--color-primary-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.legal-note p { margin: 0; color: inherit; }

@media (max-width: 640px) {
  .site-header__content { width: min(100% - 32px, var(--content-width)); }
  .site-header__content { gap: var(--space-3); }
  .nav { justify-content: flex-end; }
  .nav__links { display: none; }
  .account-menu__address, .account-menu__caret { display: none; }
  .account-menu__trigger { padding: 4px; }
  .page { width: min(100% - 32px, var(--content-width)); padding: var(--space-6) 0; }
  .page-heading { flex-direction: column; gap: var(--space-4); }
  .connection-card { grid-template-columns: 1fr; gap: var(--space-4); }
  .connection-card__footer { align-items: stretch; }
  .connection-card__footer .button { width: 100%; min-height: 44px; }
  .page-heading .button { width: 100%; }
  .card { padding: 20px; }
  .actions { align-items: stretch; }
  .actions .button { width: 100%; min-height: 44px; }
  .admin-grid, .admin-columns { grid-template-columns: 1fr; }
  .admin-table { min-width: 560px; }
  .site-footer__content { width: min(100% - 32px, var(--content-width)); }
  .home-page { width: min(100% - 32px, var(--content-width)); }
  .home-hero { grid-template-columns: 1fr; min-height: 0; padding: 52px 0 56px; }
  .home-hero h1 { font-size: clamp(42px, 14vw, 60px); }
  .home-signal { min-height: 250px; }
  .home-section__heading, .home-cards { grid-template-columns: 1fr; }
  .home-section__heading { gap: 12px; }
  .home-status { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }