:root {
  --o-bg: #06070b;
  --o-panel: rgba(13, 16, 24, 0.88);
  --o-panel-2: rgba(17, 20, 30, 0.96);
  --o-soft: rgba(255,255,255,0.05);
  --o-line: rgba(255,255,255,0.09);
  --o-text: #f8fafc;
  --o-muted: #9aa4bf;
  --o-muted-2: #6b7280;
  --o-brand: #8b5cf6;
  --o-brand-2: #22d3ee;
  --o-pink: #ec4899;
  --o-green: #34d399;
  --o-yellow: #fbbf24;
  --o-red: #fb7185;
  --o-shadow: 0 28px 72px -38px rgba(0,0,0,0.88);
  --o-shadow-brand: 0 28px 60px -34px rgba(139,92,246,0.55);
  --o-radius: 24px;
  --o-radius-md: 18px;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.docs-page,
body.guide-page,
body.login-page-shell,
body.download-page,
body.freekey-page,
body.redeem-page,
body.reset-page,
body.user-page,
body.dashboard-page {
  background:
    radial-gradient(circle at top left, rgba(139,92,246,0.18), transparent 24%),
    radial-gradient(circle at top right, rgba(34,211,238,0.10), transparent 26%),
    linear-gradient(180deg, #080a10 0%, #070910 45%, #05060b 100%);
  color: var(--o-text);
}

body.docs-page::before,
body.guide-page::before,
body.login-page-shell::before,
body.download-page::before,
body.freekey-page::before,
body.redeem-page::before,
body.reset-page::before,
body.user-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 38%, transparent 85%);
  opacity: .34;
}

body.docs-page,
body.guide-page,
body.login-page-shell,
body.download-page,
body.freekey-page,
body.redeem-page,
body.reset-page,
body.user-page {
  min-height: 100vh;
}

body.docs-page *,
body.guide-page *,
body.login-page-shell *,
body.download-page *,
body.freekey-page *,
body.redeem-page *,
body.reset-page *,
body.user-page * {
  box-sizing: border-box;
}

body.docs-page a,
body.guide-page a,
body.login-page-shell a,
body.download-page a,
body.freekey-page a,
body.redeem-page a,
body.reset-page a,
body.user-page a {
  transition: all .2s ease;
}

body.docs-page .glass,
body.guide-page .glass,
body.download-page .card,
body.freekey-page .card,
body.redeem-page .macos-window,
body.reset-page .macos-window,
body.user-page .login-card,
body.user-page .dash-container,
body.user-page .key-card,
body.user-page .feature-card,
body.user-page .modal-content,
body.login-page-shell .card,
body.docs-page pre,
body.guide-page pre {
  background: linear-gradient(180deg, rgba(17,20,30,0.92), rgba(9,12,18,0.96));
  border: 1px solid var(--o-line);
  box-shadow: var(--o-shadow);
}

body.docs-page aside,
body.guide-page aside {
  background: linear-gradient(180deg, rgba(11,13,21,0.94), rgba(8,10,16,0.96)) !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.docs-page main,
body.guide-page main {
  position: relative;
}

body.docs-page section,
body.guide-page section {
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 26px;
  padding: 1.5rem;
  box-shadow: 0 22px 48px -38px rgba(0,0,0,0.9);
}

body.docs-page section h1,
body.guide-page section h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
}

body.docs-page table,
body.guide-page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
}

body.docs-page th,
body.guide-page th {
  background: rgba(255,255,255,0.04);
  color: #c7d2fe;
}

body.docs-page th,
body.docs-page td,
body.guide-page th,
body.guide-page td {
  padding: .8rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

body.docs-page .sidebar-link,
body.guide-page .sidebar-link {
  border-radius: 14px;
  color: #a6b0ca !important;
}

body.docs-page .sidebar-link:hover,
body.docs-page .sidebar-link.active,
body.guide-page .sidebar-link:hover,
body.guide-page .sidebar-link.active {
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(34,211,238,.12)) !important;
  color: #fff !important;
  border-left-color: transparent !important;
  transform: translateX(2px);
}

body.docs-page .copy-btn,
body.guide-page .kbd,
body.docs-page .endpoint {
  border-radius: 14px;
}

body.docs-page pre,
body.guide-page pre,
body.docs-page code,
body.guide-page code {
  color: #e2e8f0;
}

body.login-page-shell .card {
  border-radius: 28px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.login-page-shell .card::before,
body.download-page .card::before,
body.freekey-page .card::before,
body.redeem-page .macos-window::before,
body.reset-page .macos-window::before,
body.user-page .login-card::before,
body.user-page .dash-container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 24%, transparent 72%, rgba(34,211,238,0.06));
}

body.login-page-shell .card,
body.download-page .card,
body.freekey-page .card,
body.redeem-page .macos-window,
body.reset-page .macos-window,
body.user-page .login-card,
body.user-page .dash-container {
  position: relative;
  overflow: hidden;
}

body.login-page-shell .input-field,
body.redeem-page .form-group input,
body.reset-page .form-group input,
body.freekey-page input,
body.freekey-page textarea,
body.user-page input,
body.user-page textarea,
body.user-page select {
  background: rgba(5,8,15,.72) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #f8fafc !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

body.login-page-shell .input-field:focus,
body.redeem-page .form-group input:focus,
body.reset-page .form-group input:focus,
body.freekey-page input:focus,
body.freekey-page textarea:focus,
body.user-page input:focus,
body.user-page textarea:focus,
body.user-page select:focus {
  outline: none;
  border-color: rgba(139,92,246,0.56) !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.10), 0 10px 26px -18px rgba(139,92,246,0.8) !important;
}

body.login-page-shell button,
body.download-page .btn,
body.freekey-page .btn,
body.redeem-page .submit-btn,
body.reset-page .submit-btn,
body.user-page .btn,
body.user-page .btn-copy,
body.user-page .btn-logout,
body.redeem-page .tab-link,
body.reset-page .tab-link,
body.docs-page button,
body.guide-page button {
  border-radius: 16px !important;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

body.login-page-shell button:hover,
body.download-page .btn:hover,
body.freekey-page .btn:hover,
body.redeem-page .submit-btn:hover,
body.reset-page .submit-btn:hover,
body.user-page .btn:hover,
body.user-page .btn-copy:hover,
body.user-page .btn-logout:hover,
body.redeem-page .tab-link:hover,
body.reset-page .tab-link:hover,
body.docs-page button:hover,
body.guide-page button:hover {
  transform: translateY(-1px);
}

body.download-page .container,
body.freekey-page .container,
body.redeem-page .macos-window,
body.reset-page .macos-window,
body.user-page .dash-container,
body.user-page .login-card {
  width: min(100%, 460px);
}

body.download-page .card,
body.freekey-page .card,
body.redeem-page .macos-window,
body.reset-page .macos-window,
body.user-page .login-card,
body.user-page .dash-container {
  border-radius: 28px !important;
}

body.download-page .card-header,
body.freekey-page .card-header {
  padding: 2rem 1.6rem 1.4rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

body.download-page .card-body,
body.freekey-page .card-body,
body.redeem-page .window-content,
body.reset-page .window-content,
body.user-page .dash-container,
body.user-page .login-card {
  background: linear-gradient(180deg, rgba(16,19,28,.97), rgba(10,12,19,.98));
}

body.download-page .app-icon,
body.freekey-page .icon-box,
body.redeem-page .header-icon,
body.reset-page .header-icon,
body.user-page .key-card-icon {
  box-shadow: var(--o-shadow-brand);
}

body.download-page .app-version,
body.freekey-page .step-number,
body.redeem-page .tab-link,
body.reset-page .tab-link,
body.user-page .btn-copy {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

body.download-page .info-item,
body.freekey-page .step,
body.user-page .feature-card,
body.user-page .key-card,
body.reset-page .helper-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 18px !important;
}

body.download-page .requirements,
body.freekey-page .telegram-box,
body.freekey-page .info-box,
body.redeem-page .status-box,
body.reset-page .status-box,
body.user-page .status-box {
  background: rgba(139,92,246,0.08) !important;
  border: 1px solid rgba(139,92,246,0.16) !important;
  border-radius: 16px !important;
}

body.download-page .btn-primary,
body.freekey-page .btn-primary,
body.redeem-page .submit-btn,
body.reset-page .submit-btn,
body.user-page .btn-primary,
body.login-page-shell .login-btn {
  background: linear-gradient(135deg, var(--o-brand), var(--o-brand-2)) !important;
  border: 0 !important;
  color: white !important;
  box-shadow: var(--o-shadow-brand);
}

body.download-page .btn-primary:hover,
body.freekey-page .btn-primary:hover,
body.redeem-page .submit-btn:hover,
body.reset-page .submit-btn:hover,
body.user-page .btn-primary:hover,
body.login-page-shell .login-btn:hover {
  box-shadow: 0 24px 40px -24px rgba(139,92,246,.75) !important;
}

body.redeem-page .macos-window,
body.reset-page .macos-window {
  box-shadow: var(--o-shadow), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

body.redeem-page .titlebar,
body.reset-page .titlebar {
  background: linear-gradient(180deg, rgba(42,45,58,0.95), rgba(22,24,32,0.98)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

body.redeem-page .window-title,
body.reset-page .window-title {
  color: #d1d5db !important;
}

body.redeem-page .tab-link.active,
body.reset-page .tab-link.active,
body.user-page .feature-card:hover,
body.user-page .btn-copy:hover {
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(34,211,238,.14)) !important;
  border-color: rgba(139,92,246,0.24) !important;
}

body.user-page .dash-container,
body.user-page .login-card {
  padding: 1.25rem !important;
}

body.user-page .feature-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.user-page .modal {
  background: rgba(5,7,12,0.74) !important;
  backdrop-filter: blur(12px);
}

body.user-page .modal-content {
  border-radius: 26px !important;
}

body.docs-page ::-webkit-scrollbar,
body.guide-page ::-webkit-scrollbar,
body.login-page-shell ::-webkit-scrollbar,
body.download-page ::-webkit-scrollbar,
body.freekey-page ::-webkit-scrollbar,
body.redeem-page ::-webkit-scrollbar,
body.reset-page ::-webkit-scrollbar,
body.user-page ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.docs-page ::-webkit-scrollbar-thumb,
body.guide-page ::-webkit-scrollbar-thumb,
body.login-page-shell ::-webkit-scrollbar-thumb,
body.download-page ::-webkit-scrollbar-thumb,
body.freekey-page ::-webkit-scrollbar-thumb,
body.redeem-page ::-webkit-scrollbar-thumb,
body.reset-page ::-webkit-scrollbar-thumb,
body.user-page ::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.28);
  border-radius: 999px;
}

@media (max-width: 1024px) {
  body.docs-page aside,
  body.guide-page aside {
    width: min(86vw, 330px) !important;
  }
}

@media (max-width: 768px) {
  body.docs-page,
  body.guide-page,
  body.login-page-shell,
  body.download-page,
  body.freekey-page,
  body.redeem-page,
  body.reset-page,
  body.user-page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.docs-page section,
  body.guide-page section {
    padding: 1rem;
    border-radius: 22px;
  }

  body.docs-page main,
  body.guide-page main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.download-page .container,
  body.freekey-page .container,
  body.redeem-page .macos-window,
  body.reset-page .macos-window,
  body.user-page .dash-container,
  body.user-page .login-card {
    width: 100%;
    max-width: 100%;
  }

  body.redeem-page .window-content,
  body.reset-page .window-content,
  body.download-page .card-body,
  body.freekey-page .card-body {
    padding: 1.1rem !important;
  }

  body.download-page .info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  body.docs-page .flex,
  body.guide-page .flex {
    flex-direction: column;
  }

  body.docs-page aside {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    border-radius: 20px;
    margin-bottom: 1rem;
  }

  body.docs-page main {
    max-width: 100% !important;
    width: 100%;
  }

  body.docs-page table,
  body.guide-page table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}