@import url('/assets/css/compicme-local-fonts.css?v=20260712-2');

:root {
  color-scheme: light;
  --font-normal: 'Noto Sans', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-bold: 'Nunito Sans', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --bg-main: #f7f8fc;
  --bg-deep: #eef2fa;
  --text-main: #141827;
  --text-soft: rgba(20, 24, 39, .66);
  --text-faint: rgba(20, 24, 39, .48);
  --panel: rgba(255, 255, 255, .76);
  --panel-strong: rgba(255, 255, 255, .94);
  --line: rgba(73, 64, 110, .12);
  --line-strong: rgba(102, 77, 186, .22);
  --shadow: 0 28px 90px rgba(54, 48, 90, .13);
  --shadow-hover: 0 36px 110px rgba(68, 53, 132, .20);
  --purple: #7448ff;
  --blue: #2479ff;
  --cyan: #0bc8da;
  --pink: #e63cff;
  --green: #1dad72;
  --danger: #d84d6d;
  --creator-gradient: linear-gradient(135deg, #8254ff 0%, #4e6fff 52%, #19a9ff 100%);
  --saas-gradient: linear-gradient(135deg, #06c9c0 0%, #168fff 54%, #6a55ff 100%);
  --footer-bg: rgba(255, 255, 255, .54);
  --menu-bg: rgba(255, 255, 255, .94);
  --pointer-x: 50vw;
  --pointer-y: 35vh;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-main);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-main);
  font-family: var(--font-normal);
  background:
    radial-gradient(circle at 50% 3%, rgba(116, 72, 255, .09), transparent 30%),
    linear-gradient(180deg, var(--bg-main) 0%, var(--bg-deep) 100%);
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}

body.theme-night {
  color-scheme: dark;
  --bg-main: #030711;
  --bg-deep: #071020;
  --text-main: #f7f9ff;
  --text-soft: rgba(238, 243, 255, .70);
  --text-faint: rgba(238, 243, 255, .48);
  --panel: rgba(8, 15, 31, .62);
  --panel-strong: rgba(10, 18, 36, .88);
  --line: rgba(133, 178, 255, .16);
  --line-strong: rgba(77, 212, 255, .28);
  --shadow: 0 30px 110px rgba(0, 0, 0, .50);
  --shadow-hover: 0 38px 125px rgba(0, 0, 0, .64);
  --footer-bg: rgba(3, 8, 19, .64);
  --menu-bg: rgba(8, 15, 31, .96);
  background:
    radial-gradient(circle at 50% 5%, rgba(124, 75, 255, .20), transparent 30%),
    radial-gradient(circle at 14% 48%, rgba(0, 188, 255, .12), transparent 32%),
    radial-gradient(circle at 84% 38%, rgba(232, 60, 255, .10), transparent 31%),
    linear-gradient(180deg, #020611 0%, #050b19 53%, #02050d 100%);
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

.shell {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
}

.ambient-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.ambient-orb {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(2px);
  opacity: .58;
  will-change: transform;
}

.ambient-orb-a {
  width: 520px;
  height: 520px;
  top: -240px;
  left: -130px;
  background: radial-gradient(circle, rgba(125, 79, 255, .24), rgba(125, 79, 255, 0) 70%);
  animation: studioFloatA 14s ease-in-out infinite alternate;
}

.ambient-orb-b {
  width: 560px;
  height: 560px;
  right: -220px;
  top: 50px;
  background: radial-gradient(circle, rgba(0, 198, 228, .19), rgba(0, 198, 228, 0) 70%);
  animation: studioFloatB 17s ease-in-out infinite alternate;
}

.ambient-orb-c {
  width: 460px;
  height: 460px;
  left: 34%;
  bottom: -300px;
  background: radial-gradient(circle, rgba(231, 61, 255, .13), rgba(231, 61, 255, 0) 72%);
  animation: studioFloatC 19s ease-in-out infinite alternate;
}

.ambient-grid {
  position: absolute;
  inset: 0;
  opacity: .20;
  background-image:
    linear-gradient(rgba(76, 72, 110, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 72, 110, .06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%);
}

body.theme-night .ambient-grid {
  opacity: .13;
  background-image:
    linear-gradient(rgba(110, 194, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 194, 255, .09) 1px, transparent 1px);
}

.ambient-pointer {
  position: absolute;
  width: 540px;
  height: 540px;
  left: calc(var(--pointer-x) - 270px);
  top: calc(var(--pointer-y) - 270px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(120, 73, 255, .10), transparent 68%);
  transition: left .10s linear, top .10s linear;
}

body.theme-night .ambient-pointer {
  background: radial-gradient(circle, rgba(0, 215, 255, .10), transparent 66%);
}

@keyframes studioFloatA {
  from { transform: translate3d(-20px, -12px, 0) scale(.96); }
  to { transform: translate3d(80px, 65px, 0) scale(1.08); }
}

@keyframes studioFloatB {
  from { transform: translate3d(12px, -20px, 0) scale(.94); }
  to { transform: translate3d(-95px, 75px, 0) scale(1.07); }
}

@keyframes studioFloatC {
  from { transform: translate3d(-40px, 20px, 0) scale(.95); }
  to { transform: translate3d(80px, -70px, 0) scale(1.10); }
}

.topbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 80;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: white;
  font-family: var(--font-bold);
  font-size: 19px;
  font-weight: 950;
  background:
    conic-gradient(
      from 220deg,
      #ff4f72,
      #ffb23f,
      #55d486,
      #15c5ec,
      #4f78ff,
      #945cff,
      #ff4f72
    );
  box-shadow:
    0 10px 26px rgba(115, 72, 255, .24),
    inset 0 1px 0 rgba(255,255,255,.38);
  transition: transform .22s ease, box-shadow .22s ease;
}

.brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.06);
  box-shadow:
    0 14px 34px rgba(115, 72, 255, .32),
    inset 0 1px 0 rgba(255,255,255,.42);
}

.brand-copy strong {
  display: block;
  font-family: var(--font-bold);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.brand-copy small {
  display: block;
  margin-top: 1px;
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creator-studio-link {
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(50, 46, 86, .07);
  text-decoration: none;
  font-family: var(--font-bold);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(18px);
  transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.creator-studio-link:hover {
  color: var(--purple);
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 34px rgba(70, 48, 140, .13);
}

body.theme-night .creator-studio-link:hover {
  color: #78e7ff;
}

.settings-wrap {
  position: relative;
}

.settings-button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(50, 46, 86, .07);
  cursor: pointer;
  backdrop-filter: blur(18px);
  transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.settings-button svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.1;
}

.settings-button:hover,
.settings-button[aria-expanded="true"] {
  color: var(--purple);
  transform: translateY(-1px) rotate(8deg);
  border-color: var(--line-strong);
  box-shadow:
    0 14px 34px rgba(70, 48, 140, .13),
    0 0 0 4px rgba(116, 72, 255, .05);
}

body.theme-night .settings-button:hover,
body.theme-night .settings-button[aria-expanded="true"] {
  color: #78e7ff;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .35),
    0 0 0 4px rgba(0, 205, 255, .06);
}

.settings-menu {
  position: absolute;
  top: 48px;
  right: 0;
  width: 210px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--menu-bg);
  box-shadow: 0 24px 80px rgba(41, 35, 80, .18);
  backdrop-filter: blur(26px);
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .17s ease, transform .17s ease;
}

.settings-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.settings-title {
  padding: 7px 9px 6px;
  color: var(--text-faint);
  font-family: var(--font-bold);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.theme-option {
  width: 100%;
  min-height: 39px;
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  color: var(--text-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.theme-option:hover {
  color: var(--purple);
  background: rgba(116, 72, 255, .07);
  transform: translateX(1px);
}

body.theme-night .theme-option:hover {
  color: #7cecff;
  background: rgba(0, 203, 255, .08);
}

.theme-swatch {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.light-swatch {
  background: #ffffff;
  box-shadow: inset 0 0 0 3px #f0f2f8;
}

.night-swatch {
  background: #071020;
  box-shadow: inset 0 0 0 3px #182342;
}

.theme-check {
  opacity: 0;
  color: var(--green);
  font-weight: 900;
}

.theme-option.is-active .theme-check {
  opacity: 1;
}

.studio-main {
  min-height: calc(100vh - 180px);
}

.hero {
  padding: 62px 0 30px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 12px;
  border: 1px solid rgba(116, 72, 255, .17);
  border-radius: 999px;
  color: #6541da;
  background: rgba(116, 72, 255, .07);
  font-family: var(--font-bold);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50);
}

body.theme-night .eyebrow {
  color: #87eaff;
  border-color: rgba(0, 208, 255, .18);
  background: rgba(0, 200, 255, .07);
}

.hero h1 {
  max-width: 840px;
  margin: 23px auto 16px;
  font-family: var(--font-bold);
  font-size: clamp(43px, 6.2vw, 76px);
  line-height: .98;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.hero p {
  max-width: 790px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: clamp(16px, 1.75vw, 19px);
  line-height: 1.65;
  text-wrap: balance;
}

.hero-trust {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}

.hero-trust span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-faint);
  background: rgba(255,255,255,.28);
  font-size: 11px;
  font-weight: 700;
}

body.theme-night .hero-trust span {
  background: rgba(8, 18, 38, .44);
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 28px 0 78px;
  perspective: 1200px;
}

.access-card,
.login-copy,
.login-card {
  --card-x: 50%;
  --card-y: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.22), transparent 46%),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.interactive-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      380px circle at var(--card-x) var(--card-y),
      rgba(255,255,255,.32),
      transparent 45%
    );
  transition: opacity .20s ease;
}

body.theme-night .interactive-card::before {
  background:
    radial-gradient(
      380px circle at var(--card-x) var(--card-y),
      rgba(70, 212, 255, .13),
      transparent 47%
    );
}

.interactive-card:hover::before {
  opacity: 1;
}

.interactive-card:hover {
  transform: translateY(-8px) rotateX(1.2deg);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hover);
}

.card-glow {
  position: absolute;
  width: 250px;
  height: 250px;
  right: -110px;
  bottom: -130px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(117, 75, 255, .24), transparent 68%);
  transition: transform .30s ease, opacity .30s ease;
}

.saas-card .card-glow {
  background: radial-gradient(circle, rgba(0, 202, 217, .24), transparent 68%);
}

.interactive-card:hover .card-glow {
  transform: translate(-26px, -24px) scale(1.12);
}

.access-card {
  min-height: 398px;
  padding: 30px;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.access-icon {
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: white;
  font-family: var(--font-bold);
  font-size: 22px;
  font-weight: 950;
  box-shadow:
    0 13px 30px rgba(75, 74, 190, .22),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .22s ease, box-shadow .22s ease;
}

.interactive-card:hover .access-icon {
  transform: translateY(-2px) rotate(-4deg) scale(1.05);
}

.creator-icon {
  background: var(--creator-gradient);
}

.saas-icon {
  background: var(--saas-gradient);
}

.access-tag {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-faint);
  background: rgba(255,255,255,.28);
  font-size: 10.5px;
  font-weight: 750;
}

body.theme-night .access-tag {
  background: rgba(8,18,38,.42);
}

.access-card h2,
.login-card h1 {
  margin: 24px 0 9px;
  font-family: var(--font-bold);
  font-size: 31px;
  line-height: 1.06;
  letter-spacing: -.038em;
}

.access-card p,
.login-copy p,
.login-card p {
  color: var(--text-soft);
  line-height: 1.62;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 28px;
  padding: 0;
  list-style: none;
}

.feature-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.46;
}

.feature-list li::before {
  content: "✓";
  color: var(--green);
  font-weight: 950;
}

.studio-button {
  position: relative;
  overflow: hidden;
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 14px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-bold);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(68, 80, 210, .22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.studio-button::before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -55%;
  width: 36%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.60), transparent);
  transition: left .48s ease;
}

.studio-button:hover::before {
  left: 125%;
}

.studio-button:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 19px 42px rgba(68, 80, 210, .30);
}

.studio-button:active {
  transform: translateY(0);
}

.studio-button svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.15;
  transition: transform .18s ease;
}

.studio-button:hover svg {
  transform: translateX(3px);
}

.creator-button {
  background: var(--creator-gradient);
}

.saas-button {
  background: var(--saas-gradient);
}

.login-layout {
  min-height: calc(100vh - 180px);
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr);
  gap: 28px;
  align-items: stretch;
  padding: 48px 0 76px;
}

.login-copy,
.login-card {
  padding: 34px;
}

.login-copy h1 {
  margin: 20px 0 13px;
  font-family: var(--font-bold);
  font-size: clamp(38px, 5.2vw, 57px);
  line-height: 1;
  letter-spacing: -.052em;
}

.login-card h1 {
  font-size: 42px;
}

.form-row {
  margin-top: 18px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 850;
}

input {
  width: 100%;
  min-height: 49px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  color: var(--text-main);
  background: var(--panel-strong);
  transition: border-color .17s ease, box-shadow .17s ease, background .17s ease;
}

input:focus {
  border-color: rgba(116, 72, 255, .52);
  box-shadow: 0 0 0 4px rgba(116, 72, 255, .08);
}

body.theme-night input:focus {
  border-color: rgba(0, 210, 255, .52);
  box-shadow: 0 0 0 4px rgba(0, 210, 255, .07);
}

.form-actions {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.back-link {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 750;
}

.back-link:hover {
  color: var(--purple);
}

.notice {
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid rgba(216, 77, 109, .18);
  border-radius: 14px;
  color: #a62f50;
  background: rgba(216, 77, 109, .07);
  font-size: 13px;
  line-height: 1.5;
}

body.theme-night .notice {
  color: #ff8ea8;
}

.info-note {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid rgba(29, 173, 114, .15);
  border-radius: 14px;
  color: #176d4a;
  background: rgba(29, 173, 114, .07);
  font-size: 12.5px;
  line-height: 1.56;
}

body.theme-night .info-note {
  color: #79ddb1;
}

.studio-footer {
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--line);
  background: var(--footer-bg);
  backdrop-filter: blur(22px);
}

.footer-inner {
  min-height: 112px;
  padding: 22px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.footer-brand strong,
.footer-brand span {
  display: block;
}

.footer-brand strong {
  font-family: var(--font-bold);
  font-size: 13px;
  font-weight: 900;
}

.footer-brand span {
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 10.5px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 700;
  transition: color .16s ease, transform .16s ease;
}

.footer-links a:hover {
  color: var(--purple);
  transform: translateY(-1px);
}

body.theme-night .footer-links a:hover {
  color: #79e7ff;
}

.footer-privacy {
  max-width: 230px;
  color: var(--text-faint);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: right;
}

.check-card,
.dashboard-card,
.dash-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.check-card {
  width: min(980px, calc(100% - 32px));
  margin: 24px auto;
  padding: 24px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.check-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
}

.check-item span {
  display: block;
  color: var(--text-soft);
  font-size: 11px;
}

.check-item strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
}

.pass { color: var(--green); }
.fail { color: var(--danger); }

@media (max-width: 900px) {
  .access-grid,
  .login-layout {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-privacy {
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 650px) {
  .shell {
    width: min(100% - 20px, 1180px);
  }

  .topbar {
    min-height: 70px;
  }

  .creator-studio-link {
    display: none;
  }

  .hero {
    padding-top: 38px;
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 60px);
  }

  .access-card,
  .login-copy,
  .login-card {
    padding: 22px;
    border-radius: 22px;
  }

  .access-grid {
    padding-bottom: 52px;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-button {
    width: 100%;
  }

  .settings-menu {
    right: -2px;
  }
}

@media (hover: none) {
  .interactive-card:hover {
    transform: none;
  }

  .interactive-card::before {
    display: none;
  }
}

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

  .ambient-pointer {
    display: none;
  }
}