@import url("./styles-variant-r3-element.css");

:root {
  color-scheme: dark;
  --bg: #060b0f;
  --bg-2: #0c1820;
  --surface: rgba(12, 24, 31, .72);
  --surface-soft: rgba(18, 35, 43, .76);
  --surface-strong: rgba(23, 45, 54, .86);
  --text: #f2ffff;
  --muted: #9db7bd;
  --line: rgba(88, 234, 218, .18);
  --primary: #00b7b0;
  --primary-2: #78fff0;
  --ok: #78efc7;
  --danger: #ff7c93;
  --shadow: 0 34px 86px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  --radius: 34px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f8f8;
  --bg-2: #dff0f2;
  --surface: rgba(255,255,255,.7);
  --surface-soft: rgba(234,247,247,.78);
  --surface-strong: rgba(255,255,255,.9);
  --text: #0c2026;
  --muted: #526c72;
  --line: rgba(0, 128, 126, .17);
  --primary: #00847f;
  --primary-2: #00bdb3;
  --ok: #148b66;
  --danger: #c93d55;
  --shadow: 0 28px 70px rgba(15, 71, 78, .15), inset 0 1px 0 rgba(255,255,255,.82);
}

body {
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--primary-2) 24%, transparent), transparent 35rem),
    radial-gradient(ellipse at 10% 78%, color-mix(in srgb, var(--primary) 17%, transparent), transparent 31rem),
    radial-gradient(ellipse at 90% 84%, color-mix(in srgb, #4477ff 12%, transparent), transparent 32rem),
    linear-gradient(160deg, var(--bg), var(--bg-2) 58%, #071013);
}
.page-atmosphere__blob { opacity: .5; filter: blur(28px); animation: e2Float 22s ease-in-out infinite; }
.page-atmosphere__noise {
  opacity: .12;
  background-image: radial-gradient(circle at center, color-mix(in srgb, var(--primary-2) 28%, transparent) 1px, transparent 1.6px);
  background-size: 34px 34px;
}

.topbar {
  width: min(1120px, calc(100% - 32px));
  margin-top: 22px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}
.brand-mark { border-radius: 50%; }
.brand-mark::before { border-radius: 999px 999px 999px 6px; }

.hero {
  border-radius: 46px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--primary-2) 12%, transparent), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 90%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
}
.hero::before {
  background:
    radial-gradient(circle at 74% 34%, color-mix(in srgb, var(--primary-2) 22%, transparent), transparent 27%),
    radial-gradient(circle at 30% 80%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%);
}
.hero-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  padding: clamp(34px, 6vw, 82px);
}
.hero-title {
  font-size: clamp(3rem, 7.9vw, 6.8rem);
  letter-spacing: -.09em;
  text-wrap: balance;
}
.hero-title-accent {
  background: linear-gradient(100deg, #ffffff 0%, var(--primary-2) 46%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.subtitle { max-width: 42rem; }

.hero-art {
  min-height: 320px;
  border-radius: 40px;
  transform: perspective(1100px) rotateX(8deg) rotateY(-11deg) translateY(-4px);
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.34), transparent 7%),
    radial-gradient(circle at 64% 62%, color-mix(in srgb, var(--primary-2) 32%, transparent), transparent 31%),
    conic-gradient(from 190deg at 50% 50%, color-mix(in srgb, var(--primary) 18%, #07151a), #112934, color-mix(in srgb, var(--primary-2) 18%, #07151a), #081015);
  box-shadow:
    0 42px 92px rgba(0,0,0,.46),
    26px 24px 60px color-mix(in srgb, var(--primary) 10%, transparent),
    inset 20px 20px 48px rgba(255,255,255,.055),
    inset -28px -28px 68px rgba(0,0,0,.38);
}
.hero-art::before {
  inset: 20px;
  border-radius: 34px;
  border-color: color-mix(in srgb, var(--primary-2) 24%, transparent);
  background: radial-gradient(circle at 50% 50%, transparent 43%, color-mix(in srgb, var(--primary-2) 9%, transparent) 44% 45%, transparent 46%);
}
.hero-art__ring {
  inset: 14%;
  border-width: 18px;
  animation: e2Orbit 8s ease-in-out infinite;
}
.hero-art__core {
  width: 108px;
  height: 108px;
  border-radius: 36px;
  animation: e2Pulse 5.6s ease-in-out infinite;
}

.benefits-head {
  align-items: flex-start;
  padding-top: 10px;
}
.benefits-grid { grid-template-columns: 1.15fr .85fr .85fr 1.15fr; gap: 16px; }
.benefit-card {
  min-height: 220px;
  border-radius: 30px;
  padding: 22px;
}
.benefit-card:nth-child(1), .benefit-card:nth-child(4) { min-height: 250px; }
.benefit-card:hover { transform: translateY(-7px) scale(1.01); }

.card, .instructions-hero { border-radius: 32px; }
.landing-panel { animation: e2Lift .42s cubic-bezier(.16, 1, .3, 1); }
.landing-panel[hidden] { display: none !important; }
.admin-tab-panel[hidden] { display: none !important; }
.download-item {
  min-height: 92px;
  border-radius: 28px;
}
.instructions-grid { gap: 18px; }
.guide-card { gap: 18px; }
.guide-steps { gap: 14px; }
.guide-steps li {
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
}
.guide-figure { border-radius: 24px; }

#loginCard {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#loginCard h2 {
  margin: 0 0 24px;
  padding-bottom: 2px;
  line-height: 1.25;
}
#loginForm {
  display: grid;
  gap: 14px;
}
#loginForm label:first-child {
  margin-top: 0;
}

.admin-tabs { border-radius: 999px; }
.admin-table-wrap { border-radius: 30px; }
.admin-table tbody tr:hover td { background: color-mix(in srgb, var(--primary-2) 8%, transparent); }
.admin-dialog { border-radius: 32px; }

@keyframes e2Lift {
  from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes e2Float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-18px, 20px, 0) scale(1.05); }
}
@keyframes e2Orbit {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(7deg) scale(1.04); }
}
@keyframes e2Pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(.9) rotate(3deg); }
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  body {
    background:
      radial-gradient(ellipse at 50% -10%, rgba(120, 255, 240, 0.14), transparent 35rem),
      radial-gradient(ellipse at 10% 78%, rgba(0, 183, 176, 0.14), transparent 31rem),
      radial-gradient(ellipse at 90% 84%, rgba(68, 119, 255, 0.11), transparent 32rem),
      linear-gradient(160deg, var(--bg), var(--bg-2) 58%, #071013);
  }

  .page-atmosphere__noise {
    background-image: radial-gradient(circle at center, rgba(120, 255, 240, 0.28) 1px, transparent 1.6px);
  }

  .topbar {
    background: rgba(12, 24, 31, 0.84);
  }

  .hero {
    background:
      radial-gradient(circle at 78% 22%, rgba(120, 255, 240, 0.1), transparent 28%),
      linear-gradient(145deg, rgba(23, 45, 54, 0.9), rgba(12, 24, 31, 0.82));
  }

  .hero::before {
    background:
      radial-gradient(circle at 74% 34%, rgba(120, 255, 240, 0.16), transparent 27%),
      radial-gradient(circle at 30% 80%, rgba(0, 183, 176, 0.12), transparent 26%),
      linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%);
  }

  .hero-art {
    background:
      radial-gradient(circle at 36% 28%, rgba(255,255,255,.34), transparent 7%),
      radial-gradient(circle at 64% 62%, rgba(120, 255, 240, 0.22), transparent 31%),
      conic-gradient(from 190deg at 50% 50%, rgba(0, 183, 176, 0.2), #112934, rgba(120, 255, 240, 0.18), #081015);
    box-shadow:
      0 42px 92px rgba(0,0,0,.46),
      26px 24px 60px rgba(0, 183, 176, 0.14),
      inset 20px 20px 48px rgba(255,255,255,.055),
      inset -28px -28px 68px rgba(0,0,0,.38);
  }

  .hero-art::before {
    border-color: rgba(120, 255, 240, 0.24);
    background: radial-gradient(circle at 50% 50%, transparent 43%, rgba(120, 255, 240, 0.08) 44% 45%, transparent 46%);
  }

  .guide-steps li {
    background: rgba(18, 35, 43, 0.86);
  }

  .admin-table tbody tr:hover td {
    background: rgba(120, 255, 240, 0.08);
  }
}

@media (max-width: 1000px) {
  .hero-layout, .benefits-grid { grid-template-columns: 1fr; }
  .hero-art { transform: none; max-width: 360px; }
  .benefit-card, .benefit-card:nth-child(1), .benefit-card:nth-child(4) { min-height: 180px; }
}

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