:root {
  --bg:#050a18;
  --surface:#0c1630;
  --surface2:#101d3b;
  --text:#f7faff;
  --muted:#91a1bd;
  --blue:#3977ff;
  --blue2:#1555f5;
  --cyan:#21d7ff;
  --green:#39e79b;
  --red:#ff667e;
}

body {
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,
    "Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(ellipse at 15% 0,#10296380,transparent 40%),
    radial-gradient(ellipse at 100% 16%,#008ea42a,transparent 40%),
    var(--bg);
}

.brand img,
.hero-identity img,
.subscription-card img,
.app-tile img,
.mock-bottom img,
dialog img {
  object-fit:contain!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  animation:none!important;
}
.hero-identity img {
  width:290px;
  height:290px;
  filter:drop-shadow(0 20px 32px #009bff35);
}
.brand img { width:38px;height:38px; }
.app-tile img { width:110px;height:110px; }

.sp-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.085em;
  color:#59d5ff;
}
.sp-eyebrow::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px #21d7ff90;
  flex-shrink:0;
}

.subpage-preview.cabinet-preview {
  padding:26px;
  border-radius:24px;
  background:linear-gradient(145deg,#0d1b37,#080f21);
  border:1px solid #2b4770;
  box-shadow:
    0 38px 75px -18px #000d,
    0 0 0 7px #264c770e,
    0 0 80px -30px #16baff48;
  transform:none!important;
}
.subpage-preview .preview-header { margin-bottom:28px; }
.subpage-preview .brand { font-size:20px; }
.sp-preview-intro h3 {
  font-size:clamp(25px,2.5vw,36px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.055em;
  margin:16px 0 25px;
}
.sp-preview-intro h3 span,
.sp-account-intro h1 span,
.help-heading h2 span {
  background:linear-gradient(100deg,#568cff,#3bd5f3);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}

.sp-card {
  background:linear-gradient(135deg,#101b38,#0d1b36);
  border:1px solid #263e64;
  border-radius:24px;
  padding:25px;
  box-shadow:0 20px 45px -25px #000b,inset 0 1px #ffffff05;
}
.sp-user-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:23px;
  margin-bottom:18px;
  border-bottom:1px solid #233553;
}
.sp-label {
  display:block;
  color:#8498ba;
  font-size:10px;
  font-weight:600;
  letter-spacing:.075em;
}
.sp-username {
  display:block;
  font-size:25px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.04em;
  margin-top:7px;
  overflow-wrap:anywhere;
}
.sp-active,
.sp-pending {
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
  border:1px solid #1d676440;
  border-radius:10px;
  padding:9px 12px;
  color:#58e6b5;
  font-size:10px;
  font-weight:800;
  background:#0b706020;
}
.sp-active i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#39e79b;
  box-shadow:0 0 9px #39e79b70;
}
.sp-pending {
  color:#9ab3d5;
  border-color:#2b4267;
  background:#13223b;
}

.sp-stats,
.sp-stats.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 18px;
}
.sp-stat,
.sp-stats.metrics .sp-stat {
  display:block;
  padding:17px 14px;
  background:linear-gradient(135deg,#122243,#0e1b34);
  border:1px solid #233c62;
  border-radius:17px;
  box-shadow:none;
  min-width:0;
}
.sp-stat>span {
  display:block;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  color:#8499bc;
}
.sp-stat>strong {
  display:block;
  font-size:17px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.055em;
  margin:8px 0 4px;
  color:#f5f8ff;
  white-space:nowrap;
}
.sp-stat>small {
  display:block;
  font-size:9px;
  line-height:1.6;
  color:#8095b7;
}
.sp-actions {
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:10px;
}
.sp-actions .button {
  border-radius:14px;
  min-height:52px;
  padding:14px 12px;
  font-size:12px;
  font-weight:800;
  gap:12px;
}
.sp-primary {
  background:linear-gradient(110deg,#287af4,#15bddd)!important;
  border:1px solid #57b2ff80!important;
  box-shadow:0 10px 25px -10px #087ff080!important;
  color:white!important;
}
.sp-secondary {
  background:linear-gradient(120deg,#15294c,#122744)!important;
  border:1px solid #2a4873!important;
  color:#bfd4f2!important;
  box-shadow:none!important;
}
.sp-button-symbol {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:27px;
  height:27px;
  border:1px solid #ffffff35;
  border-radius:9px;
  background:#ffffff15;
  font-size:19px;
}
.sp-demo-note {
  font-size:11px;
  line-height:1.7;
  color:#8197b8;
  margin:18px 4px 0;
}

#account .account-layout {
  display:block;
  max-width:720px;
  margin:0 auto;
  padding:0 20px 90px;
}
#account .account-content { padding:25px 0 0; }
#account .account-heading { display:none; }
#account .sidebar {
  padding:22px 0 0;
  background:transparent;
  border:0;
  gap:0;
}
#account .sidebar>.eyebrow,
#account .sidebar>.support-link { display:none; }
#account .sidebar nav {
  flex-direction:row;
  flex-wrap:wrap;
  gap:5px;
  padding:5px;
  border:1px solid #213856;
  border-radius:15px;
  background:#0a142b;
}
#account .sidebar nav button {
  flex:1;
  white-space:nowrap;
  text-align:center;
  padding:12px 8px;
  font-size:12px;
}
#account .sidebar nav button.active {
  border:0;
  border-radius:11px;
  background:#163860;
  color:#6ed7ff;
}
.sp-account-intro { padding:35px 0 30px; }
.sp-account-intro h1 {
  font-size:clamp(36px,6vw,60px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.06em;
  margin:22px 0 23px;
}
.sp-account-intro p {
  color:#94a6c4;
  font-size:14px;
  font-weight:500;
  line-height:1.8;
  max-width:570px;
  margin-bottom:0;
}
.sp-live-card { padding:25px; }
.sp-live-card .sp-stat>strong { font-size:20px; }
.sp-live-card .sp-stat>span,
.sp-live-card .sp-stat>small { font-size:10px; }
.sp-card-note {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:17px;
  font-size:11px;
  color:#91a1bd;
  line-height:1.6;
}
.sp-note-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#6886b3;
  flex-shrink:0;
}
.sp-quick-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:20px;
}
.sp-quick-grid .surface {
  background:linear-gradient(135deg,#101d3b,#0c1630);
  border:1px solid #263c60;
  padding:24px;
  border-radius:21px;
}
.sp-quick-grid h3 {
  font-size:23px;
  font-weight:800;
  line-height:1.25;
  margin:18px 0 15px;
}
.sp-quick-grid p { font-size:13px;line-height:1.8; }
.sp-quick-grid .text-link { font-size:12px; }

.designer-help.faq {
  max-width:1280px;
  padding-top:80px;
  padding-bottom:110px;
}
.help-heading { margin-bottom:38px; }
.help-heading h2 {
  font-size:clamp(33px,4.5vw,57px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.055em;
  margin:20px 0 18px;
}
.help-heading>p {
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}
.help-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.help-card {
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:32px;
  border:1px solid #283d62;
  border-radius:25px;
  background:linear-gradient(135deg,#101d3b,#0b152d);
  box-shadow:0 18px 42px -25px #000a;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.help-card:hover {
  transform:translateY(-5px);
  border-color:#4076ae;
  box-shadow:0 25px 50px -25px #000c,0 0 35px -20px #21d7ff40;
}
.help-card-top {
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:24px;
}
.help-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid #3668a1;
  border-radius:14px;
  background:linear-gradient(145deg,#17396a,#102343);
  color:#6ed8ff;
  font-size:13px;
  font-weight:800;
}
.help-category {
  color:#8cadd3;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.help-card h3 {
  font-size:30px;
  line-height:1.22;
  letter-spacing:-.04em;
  font-weight:800;
  margin:0 0 18px;
}
.help-card>p {
  color:#93a7c7;
  font-size:14px;
  line-height:1.85;
  margin:0 0 24px;
  max-width:420px;
}
.help-link {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  border:0;
  border-bottom:1px solid #58cfff50;
  background:none;
  color:#63d4fa;
  font:inherit;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  padding:7px 0;
  margin-top:auto;
  cursor:pointer;
}
.help-link:hover { color:#b0efff;border-color:#b0efff; }
.help-card-accent {
  background:
    radial-gradient(ellipse at 100% 0,#03a9d421,transparent 75%),
    linear-gradient(135deg,#102247,#0b1b32);
}

@media(max-width:1100px) {
  .sp-preview-card .sp-stats { grid-template-columns:1fr 1fr; }
  .sp-preview-card .sp-stat>strong { font-size:18px; }
}
@media(max-width:900px) {
  .sp-preview-card .sp-stats { grid-template-columns:repeat(4,1fr); }
}
@media(max-width:600px) {
  .hero-identity img { width:200px;height:200px; }
  .subpage-preview.cabinet-preview { padding:20px;border-radius:23px; }
  .sp-preview-intro h3 { font-size:30px; }
  .sp-card { padding:20px;border-radius:22px; }
  .sp-username { font-size:23px; }
  .sp-user-row { flex-wrap:wrap;gap:12px; }
  .sp-stats,
  .sp-stats.metrics,
  .sp-preview-card .sp-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .sp-stats.metrics .sp-stat:last-child { grid-column:auto; }
  .sp-stat,
  .sp-stats.metrics .sp-stat { padding:17px 14px; }
  .sp-stat>strong { font-size:19px; }
  .sp-stat>span,.sp-stat>small { font-size:10px; }
  .sp-actions { grid-template-columns:1fr; }
  .sp-actions .button { min-height:51px;font-size:12px; }
  #account .account-layout { padding:0 18px 115px; }
  #account .account-content { padding-top:0; }
  #account .sidebar { display:none; }
  .sp-account-intro { padding:35px 0 28px; }
  .sp-account-intro h1 { font-size:clamp(33px,9vw,48px); }
  .sp-account-intro p { font-size:13px; }
  .sp-quick-grid { grid-template-columns:1fr; }
  .help-grid { grid-template-columns:1fr;gap:16px; }
  .help-card { padding:27px;border-radius:23px; }
  .help-card h3 { font-size:29px; }
  .designer-help.faq { padding-top:60px;padding-bottom:75px; }
}
@media(prefers-reduced-motion:reduce) {
  .help-card { transition:none; }
  .help-card:hover { transform:none; }
}
body.reduced-motion .help-card { transition:none; }
body.reduced-motion .help-card:hover { transform:none; }