@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;
  --ui-font-sans: "Poppins", "Segoe UI", sans-serif;
  --ui-font-mono: "Consolas", "SFMono-Regular", monospace;
  --ui-radius-xs: 10px;
  --ui-radius-sm: 14px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 24px;
  --ui-radius-xl: 30px;
  --ui-shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.08);
  --ui-shadow-md: 0 24px 70px rgba(15, 23, 42, 0.14);
  --ui-shadow-lg: 0 30px 90px rgba(15, 23, 42, 0.18);
  --ui-bg: #eef4fb;
  --ui-bg-strong: #f7fbff;
  --ui-panel: rgba(255, 255, 255, 0.82);
  --ui-panel-strong: #ffffff;
  --ui-panel-soft: rgba(248, 251, 255, 0.72);
  --ui-line: rgba(138, 160, 188, 0.26);
  --ui-line-strong: rgba(108, 130, 158, 0.34);
  --ui-text: #13263a;
  --ui-text-muted: #667b91;
  --ui-primary: #7ba61a;
  --ui-primary-strong: #6f9715;
  --ui-primary-soft: rgba(123, 166, 26, 0.14);
  --ui-secondary: #4f8ef7;
  --ui-secondary-soft: rgba(79, 142, 247, 0.14);
  --ui-danger: #d75a68;
  --ui-warn: #c9852d;
  --ui-ok: #25986c;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ui-bg: #07111d;
    --ui-bg-strong: #0a1624;
    --ui-panel: rgba(12, 25, 40, 0.82);
    --ui-panel-strong: #0d1929;
    --ui-panel-soft: rgba(15, 28, 44, 0.72);
    --ui-line: rgba(155, 186, 220, 0.18);
    --ui-line-strong: rgba(174, 203, 234, 0.26);
    --ui-text: #edf5ff;
    --ui-text-muted: #9eb5ca;
    --ui-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.24);
    --ui-shadow-md: 0 24px 70px rgba(0, 0, 0, 0.34);
    --ui-shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.42);
    --ui-primary-soft: rgba(123, 166, 26, 0.18);
    --ui-secondary-soft: rgba(79, 142, 247, 0.18);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
input,
textarea,
select,
button {
  font-family: var(--ui-font-sans);
}

body.auth-page,
body.hub-page,
body.seo-page,
body.sekorix-workspace {
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(79, 142, 247, 0.16), transparent 52%),
    radial-gradient(900px 420px at 92% 0%, rgba(123, 166, 26, 0.12), transparent 48%),
    linear-gradient(180deg, var(--ui-bg-strong) 0%, var(--ui-bg) 52%, var(--ui-bg) 100%);
  color: var(--ui-text);
}

body.auth-page::before,
body.hub-page::before,
body.seo-page::before,
body.sekorix-workspace::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.04)),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 26%);
  opacity: 0.8;
  z-index: 0;
}

body.auth-page > :not(.modal),
body.hub-page > :not(.modal),
body.seo-page > :not(.modal),
body.sekorix-workspace > :not(.modal) {
  position: relative;
  z-index: 1;
}

body.auth-page .card,
body.hub-page .card {
  border-radius: var(--ui-radius-xl);
  border: 1px solid var(--ui-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 251, 255, 0.88));
  box-shadow: var(--ui-shadow-lg);
  backdrop-filter: blur(18px) saturate(140%);
}

body.auth-page .card {
  width: min(760px, 96vw);
  padding: 34px 34px 26px;
}

body.auth-page h1,
body.hub-page h1 {
  letter-spacing: -0.04em;
}

body.auth-page .sub,
body.hub-page .sub {
  color: var(--ui-text-muted);
}

body.auth-page label,
body.hub-page label {
  color: var(--ui-text-muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.auth-page input,
body.auth-page select,
body.auth-page textarea,
body.hub-page input,
body.hub-page select,
body.hub-page textarea {
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-line);
  background: rgba(247, 251, 255, 0.78);
  color: var(--ui-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.auth-page input:focus,
body.auth-page select:focus,
body.auth-page textarea:focus,
body.hub-page input:focus,
body.hub-page select:focus,
body.hub-page textarea:focus {
  border-color: rgba(79, 142, 247, 0.5);
  box-shadow:
    0 0 0 4px rgba(79, 142, 247, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.auth-page .btn,
body.hub-page .btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-line);
  background: rgba(248, 251, 255, 0.88);
  color: var(--ui-text);
  font-weight: 700;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

body.auth-page .btn:hover:not([disabled]),
body.hub-page .btn:hover:not([disabled]) {
  transform: translateY(-1px);
  border-color: rgba(79, 142, 247, 0.28);
  box-shadow: var(--ui-shadow-sm);
}

body.auth-page .btn.primary,
body.hub-page .btn.primary {
  background: linear-gradient(180deg, #89b91f 0%, #769f19 100%);
  border-color: rgba(123, 166, 26, 0.46);
  color: #f6fbe8;
}

body.auth-page .msg,
body.hub-page .msg,
body.auth-page .hint,
body.hub-page .hint {
  border-radius: var(--ui-radius-sm);
}

body.hub-page .card {
  width: min(1220px, 96vw);
  padding: 32px;
}

body.hub-page .grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 22px;
}

body.hub-page .panel {
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-line);
  background: rgba(248, 251, 255, 0.74);
  box-shadow: var(--ui-shadow-sm);
  padding: 20px;
}

body.hub-page .panel h2 {
  font-size: 20px;
  letter-spacing: -0.02em;
}

body.hub-page .footer {
  border-top: 1px solid var(--ui-line);
  padding-top: 18px;
  margin-top: 22px;
}

body.seo-page .page-shell {
  width: min(1280px, calc(100vw - 36px));
  padding: 38px 0 72px;
}

body.seo-page .hero-copy,
body.seo-page .form-card,
body.seo-page .panel {
  border-radius: var(--ui-radius-xl);
  border: 1px solid var(--ui-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(247, 251, 255, 0.88));
  box-shadow: var(--ui-shadow-md);
}

body.seo-page .hero-copy {
  padding: 46px;
}

body.seo-page .form-card,
body.seo-page .panel {
  padding: 30px;
}

body.seo-page .hero h1 {
  max-width: 12ch;
}

body.seo-page .btn-primary {
  background: linear-gradient(180deg, #4f8ef7 0%, #3978e6 100%);
  border-color: rgba(79, 142, 247, 0.38);
  box-shadow: 0 14px 34px rgba(79, 142, 247, 0.22);
}

body.seo-page .btn-secondary {
  background: rgba(248, 251, 255, 0.74);
}

body.seo-page .url-input {
  background: rgba(255, 255, 255, 0.82);
}

body.sekorix-workspace .workspace-wrap {
  max-width: 1720px;
  padding: 26px;
  gap: 22px;
}

body.sekorix-workspace .workspace-sidebar,
body.sekorix-workspace .workspace-main .offer-card {
  backdrop-filter: blur(18px) saturate(135%);
}

body.sekorix-workspace .workspace-sidebar-head {
  display: grid;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ui-line);
}

body.sekorix-workspace .sidebar-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  width: fit-content;
  border-radius: 999px;
  background: var(--ui-secondary-soft);
  color: var(--ui-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.sekorix-workspace .workspace-sidebar-meta {
  display: grid;
  gap: 4px;
}

@media (prefers-color-scheme: dark) {
  body.auth-page .card,
  body.hub-page .card,
  body.seo-page .hero-copy,
  body.seo-page .form-card,
  body.seo-page .panel {
    background: linear-gradient(180deg, rgba(12, 25, 40, 0.84), rgba(13, 24, 38, 0.94));
  }

  body.auth-page input,
  body.auth-page select,
  body.auth-page textarea,
  body.hub-page input,
  body.hub-page select,
  body.hub-page textarea,
  body.seo-page .url-input {
    background: rgba(9, 19, 31, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  body.auth-page .btn,
  body.hub-page .btn {
    background: rgba(14, 27, 44, 0.82);
  }

  body.hub-page .panel {
    background: linear-gradient(180deg, rgba(12, 24, 39, 0.8), rgba(14, 28, 46, 0.88));
  }
}

@media (max-width: 980px) {
  body.hub-page .grid,
  body.seo-page .hero,
  body.seo-page .content-grid {
    grid-template-columns: 1fr;
  }

  body.sekorix-workspace .workspace-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.auth-page .card,
  body.hub-page .card {
    padding: 22px;
    border-radius: 24px;
  }

  body.seo-page .hero-copy,
  body.seo-page .form-card,
  body.seo-page .panel {
    padding: 22px;
    border-radius: 24px;
  }
}