:root {
  --v17-bg: #070a07;
  --v17-panel: rgba(15, 20, 15, 0.88);
  --v17-panel-solid: #0f140f;
  --v17-panel-raised: #151b15;
  --v17-line: rgba(175, 205, 166, 0.14);
  --v17-line-strong: rgba(150, 224, 126, 0.28);
  --v17-green: #78dc58;
  --v17-green-bright: #a1f184;
  --v17-green-deep: #20351d;
  --v17-blue: #78cbe7;
  --v17-gold: #e8c56c;
  --v17-text: #f2f7f0;
  --v17-muted: #a3aea0;
  --v17-soft: #748071;
  --v17-radius-sm: 10px;
  --v17-radius: 16px;
  --v17-radius-lg: 24px;
  --v17-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --v17-inner: inset 0 1px rgba(255, 255, 255, 0.035);
  --pointer-x: 72%;
  --pointer-y: 18%;
  --page-progress: 0;
}

html { background: var(--v17-bg); }
body,
.guide-body {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(111, 197, 78, 0.075), transparent 31rem),
    radial-gradient(circle at 8% 42%, rgba(96, 175, 204, 0.035), transparent 28rem),
    var(--v17-bg);
  color: var(--v17-text);
}

.ambient-system {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  contain: strict;
}
.ambient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.92; }
.ambient-system::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(162, 208, 148, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(162, 208, 148, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), transparent 96%);
  transform: translate3d(calc(var(--page-progress) * -22px), calc(var(--page-progress) * -34px), 0);
}
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: 0.15; }
.ambient-orb-a { width: 420px; height: 420px; right: -180px; top: 6%; border: 1px solid rgba(128, 226, 91, 0.2); box-shadow: inset 0 0 90px rgba(128, 226, 91, 0.035); animation: ambientOrbit 26s ease-in-out infinite alternate; }
.ambient-orb-b { width: 250px; height: 250px; left: -100px; top: 52%; border: 1px solid rgba(111, 200, 232, 0.16); animation: ambientOrbit 33s ease-in-out infinite alternate-reverse; }
.ambient-orb-c { width: 120px; height: 120px; right: 24%; bottom: 5%; border: 1px dashed rgba(232, 197, 108, 0.24); animation: ambientSpin 34s linear infinite; }
@keyframes ambientOrbit { to { transform: translate3d(-44px, 32px, 0) scale(1.08); } }
@keyframes ambientSpin { to { transform: rotate(360deg); } }

body > header,
body > main,
body > footer,
body > #app,
body > .guide-layout,
body > .toast-host { z-index: 1; }
dialog { z-index: 1000; }

/* Shared chrome */
.topbar,
.guide-topbar,
.legal-topbar,
.admin-header {
  min-height: 76px;
  border-bottom: 1px solid var(--v17-line);
  background: rgba(7, 10, 7, 0.78);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px) saturate(1.25);
}
.topbar,
.guide-topbar,
.legal-topbar,
.admin-header { position: sticky; top: 0; z-index: 100; }
body > .toast-host { position: fixed; z-index: 1100; }
.topbar::after,
.guide-topbar::after,
.legal-topbar::after,
.admin-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: calc(var(--page-progress) * 100%);
  height: 1px;
  background: linear-gradient(90deg, var(--v17-green), var(--v17-blue));
  box-shadow: 0 0 12px rgba(120, 220, 88, 0.65);
}
.topbar { padding-inline: clamp(16px, 3vw, 44px); }
.brand,
.guide-brand,
.legal-brand { gap: 11px; letter-spacing: -0.03em; }
.brand-mark { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(120, 220, 88, 0.2)); }
.release-pill { border-color: rgba(120, 220, 88, 0.24); color: #98cf87; background: rgba(29, 47, 25, 0.65); }
.top-actions { align-items: center; gap: 8px; }
.primary-btn,
.ghost-btn,
.danger-btn,
.secondary-btn,
.form-submit,
.back-button {
  min-height: 42px;
  border-radius: 11px;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.primary-btn,
.form-submit {
  border: 1px solid rgba(184, 255, 159, 0.45);
  background: linear-gradient(135deg, #9bed7d 0%, #69c84c 68%, #5ab341 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.42), 0 10px 28px rgba(87, 181, 59, 0.17);
}
.primary-btn:hover,
.form-submit:hover { transform: translateY(-2px); box-shadow: inset 0 1px rgba(255, 255, 255, 0.45), 0 14px 34px rgba(87, 181, 59, 0.24); }
.ghost-btn,
.secondary-btn,
.back-button { background: rgba(21, 27, 21, 0.8); border-color: var(--v17-line); }
.ghost-btn:hover,
.secondary-btn:hover,
.back-button:hover { background: rgba(28, 37, 27, 0.95); border-color: var(--v17-line-strong); transform: translateY(-1px); }

/* Landing */
.landing { max-width: 1460px; padding: clamp(42px, 6vw, 88px) clamp(18px, 4vw, 58px) 96px; }
.hero { grid-template-columns: minmax(0, 1.04fr) minmax(430px, 0.96fr); gap: clamp(44px, 6vw, 92px); min-height: min(740px, calc(100vh - 76px)); }
.hero-copy-wrap { position: relative; z-index: 2; }
.hero-live-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid rgba(131, 216, 103, 0.22); border-radius: 999px; background: rgba(18, 29, 16, 0.72); color: #b7dbae; font: 700 10px JetBrains Mono, monospace; letter-spacing: 0.08em; }
.hero-live-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v17-green); box-shadow: 0 0 0 5px rgba(120, 220, 88, 0.09), 0 0 16px rgba(120, 220, 88, 0.6); animation: statusPulse 2.8s ease-in-out infinite; }
@keyframes statusPulse { 50% { box-shadow: 0 0 0 8px rgba(120, 220, 88, 0), 0 0 20px rgba(120, 220, 88, 0.75); } }
.hero h1 { margin-top: 20px; padding-bottom: 0.07em; font-size: clamp(50px, 6.3vw, 92px); line-height: 0.98; letter-spacing: -0.065em; text-wrap: balance; }
.hero h1 em { display: inline-block; padding: 0 0.02em 0.08em 0; margin-bottom: -0.08em; color: transparent; line-height: 1.02; background: linear-gradient(105deg, #a8f78c, #6fd451 55%, #78cbe7); background-clip: text; -webkit-background-clip: text; }
.hero-copy { max-width: 740px; color: #aeb9aa; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.72; }
.hero-actions { margin-top: 32px; }
.hero-actions > * { min-height: 50px; padding-inline: 20px; }
.hero-proof { margin-top: 23px; gap: 10px; }
.hero-proof span { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; background: rgba(12, 16, 12, 0.66); font-size: 11px; }
.hero-proof span::before { font-size: 10px; }

.mode-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; max-width: 720px; }
.mode-path { position: relative; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; min-height: 86px; padding: 14px; border: 1px solid var(--v17-line); border-radius: 14px; background: rgba(13, 18, 13, 0.7); color: var(--v17-text); text-align: left; overflow: hidden; }
.mode-path::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(130, 225, 96, 0.055), transparent 70%); transform: translateX(-100%); transition: transform 500ms ease; }
.mode-path:hover { border-color: var(--v17-line-strong); background: rgba(18, 27, 17, 0.86); transform: translateY(-2px); }
.mode-path:hover::after { transform: translateX(100%); }
.mode-path > span:first-child { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(137, 221, 109, 0.24); border-radius: 11px; background: rgba(41, 66, 34, 0.45); color: var(--v17-green-bright); font: 800 15px JetBrains Mono, monospace; }
.mode-path b,
.mode-path small { display: block; }
.mode-path b { margin-bottom: 4px; }
.mode-path small { color: var(--v17-muted); font-size: 10px; line-height: 1.35; }
.mode-path > i { color: #6e7c6b; font-style: normal; font-size: 18px; }

.hero-visual { position: relative; padding: 1px; border-radius: 25px; transform: none; border: 0; background: linear-gradient(145deg, rgba(153, 238, 124, 0.45), rgba(111, 200, 232, 0.14) 42%, rgba(255, 255, 255, 0.05)); box-shadow: 0 36px 110px rgba(0, 0, 0, 0.52); }
.hero-visual::before { content: ""; position: absolute; inset: 12% 0; z-index: -1; border-radius: 50%; background: rgba(84, 181, 56, 0.11); filter: blur(55px); }
.hero-command-center { min-height: 570px; border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 24px; overflow: hidden; background: linear-gradient(155deg, rgba(17, 23, 17, 0.98), rgba(8, 12, 8, 0.97)); }
.command-center-bar { height: 52px; display: flex; align-items: center; gap: 7px; padding: 0 17px; border-bottom: 1px solid var(--v17-line); color: var(--v17-soft); font: 700 9px JetBrains Mono, monospace; letter-spacing: 0.08em; }
.command-center-bar i { width: 7px; height: 7px; border-radius: 50%; background: #334033; }
.command-center-bar span { margin-left: auto; color: #88ba7a; }
.command-center-body { display: grid; grid-template-columns: 126px 1fr; min-height: 518px; }
.command-center-nav { padding: 18px 11px; border-right: 1px solid var(--v17-line); background: rgba(5, 8, 5, 0.4); }
.command-center-nav b { display: block; margin: 2px 8px 14px; color: #697565; font: 700 8px JetBrains Mono, monospace; letter-spacing: 0.1em; }
.command-center-nav span { display: block; height: 34px; margin-bottom: 6px; padding: 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.018); color: #687368; font-size: 9px; }
.command-center-nav span.active { border: 1px solid rgba(127, 215, 99, 0.2); background: rgba(45, 72, 38, 0.4); color: #bce4b1; }
.command-center-main { padding: 20px; min-width: 0; }
.command-center-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.command-center-title small { color: #71806e; font: 700 8px JetBrains Mono, monospace; }
.command-center-title b { font-size: 14px; }
.command-center-title span { padding: 6px 8px; border-radius: 999px; background: rgba(39, 64, 34, 0.55); color: #9fe487; font: 700 8px JetBrains Mono, monospace; }
.visual-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 11px; margin-top: 18px; }
.visual-preview-stage { position: relative; display: grid; place-items: center; min-height: 245px; overflow: hidden; border: 1px solid var(--v17-line); border-radius: 15px; background: radial-gradient(circle, rgba(67, 105, 56, 0.2), transparent 58%), #090d09; }
.visual-preview-stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(138, 186, 126, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 186, 126, 0.035) 1px, transparent 1px); background-size: 22px 22px; }
.visual-preview-stage::after { content: ""; position: absolute; width: 160px; height: 34px; bottom: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); filter: blur(12px); }
.visual-preview-stage img { position: relative; z-index: 2; width: 155px; height: 155px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 25px 18px rgba(0, 0, 0, 0.72)); animation: itemFloat 5.2s ease-in-out infinite; }
@keyframes itemFloat { 50% { transform: translateY(-8px) rotate(1.5deg); } }
.visual-layers { display: grid; gap: 9px; }
.visual-layer { display: grid; place-items: center; min-height: 72px; border: 1px solid var(--v17-line); border-radius: 12px; background: rgba(18, 24, 18, 0.82); color: #697568; font: 700 8px JetBrains Mono, monospace; text-align: center; }
.visual-layer.active { border-color: rgba(125, 219, 94, 0.3); background: linear-gradient(145deg, rgba(37, 59, 32, 0.72), rgba(18, 24, 18, 0.82)); color: #aee89c; }
.visual-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.visual-node { padding: 11px; border: 1px solid var(--v17-line); border-radius: 11px; background: rgba(11, 15, 11, 0.86); }
.visual-node span { display: block; color: #6f7b6d; font: 700 7px JetBrains Mono, monospace; letter-spacing: 0.08em; }
.visual-node b { display: block; margin-top: 6px; font-size: 10px; }
.visual-status { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px 13px; border: 1px solid rgba(117, 213, 88, 0.23); border-radius: 11px; background: rgba(24, 43, 20, 0.48); color: #a8d99a; font-size: 10px; }
.visual-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--v17-green); box-shadow: 0 0 12px rgba(120, 220, 88, 0.7); }

.workflow-section,
.capability-section,
.pricing-section,
.faq-section,
.recent-section { margin-top: clamp(72px, 9vw, 118px); }
.section-kicker { color: #82917e; font: 700 10px JetBrains Mono, monospace; letter-spacing: 0.12em; }
.section-heading-xl { max-width: 780px; margin: 9px 0 0; font-size: clamp(30px, 4.1vw, 52px); letter-spacing: -0.05em; line-height: 1.04; }
.section-copy { max-width: 680px; color: var(--v17-muted); line-height: 1.7; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.workflow-step { position: relative; min-height: 220px; padding: 24px; overflow: hidden; border: 1px solid var(--v17-line); border-radius: var(--v17-radius); background: linear-gradient(145deg, rgba(19, 25, 19, 0.88), rgba(10, 14, 10, 0.82)); box-shadow: var(--v17-inner); }
.workflow-step::after { content: attr(data-step); position: absolute; right: 15px; bottom: -18px; color: rgba(130, 212, 104, 0.055); font: 800 88px JetBrains Mono, monospace; }
.workflow-step > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(127, 216, 99, 0.24); border-radius: 12px; background: rgba(35, 57, 30, 0.5); color: var(--v17-green-bright); font: 800 11px JetBrains Mono, monospace; }
.workflow-step h3 { margin: 23px 0 8px; font-size: 20px; }
.workflow-step p { max-width: 330px; margin: 0; color: var(--v17-muted); font-size: 13px; line-height: 1.65; }
.workflow-step small { display: block; margin-top: 20px; color: #7fad73; font: 700 9px JetBrains Mono, monospace; }

.capability-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.capability-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 28px; }
.capability-card { grid-column: span 4; min-height: 225px; padding: 23px; border: 1px solid var(--v17-line); border-radius: var(--v17-radius); background: rgba(14, 19, 14, 0.83); box-shadow: var(--v17-inner); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.capability-card:nth-child(1),
.capability-card:nth-child(2) { grid-column: span 6; }
.capability-card:nth-child(6) { grid-column: span 12; min-height: 180px; }
.capability-card:nth-child(6) p { max-width: 760px; }
.capability-card:hover { transform: translateY(-4px); border-color: var(--v17-line-strong); background: rgba(19, 27, 18, 0.93); }
.capability-card > span { color: #75a867; font: 700 10px JetBrains Mono, monospace; }
.capability-card h3 { margin: 28px 0 8px; font-size: 21px; }
.capability-card p { margin: 0; color: var(--v17-muted); font-size: 13px; line-height: 1.65; }
.capability-card ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 0; padding: 0; list-style: none; }
.capability-card li { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; color: #8f9b8c; background: rgba(0, 0, 0, 0.15); font-size: 9px; }

.recent-section { padding-top: 36px; border-top: 1px solid var(--v17-line); }
.section-header h2 { font-size: clamp(27px, 3vw, 38px); letter-spacing: -0.045em; }
.project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.project-card { min-height: 285px; padding: 20px; border-radius: var(--v17-radius); border-color: var(--v17-line); background: linear-gradient(145deg, rgba(20, 27, 20, 0.92), rgba(10, 14, 10, 0.87)); box-shadow: var(--v17-inner); }
.project-card:hover { transform: translateY(-5px); border-color: var(--v17-line-strong); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32); }
.project-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 100% 0, rgba(117, 217, 85, 0.09), transparent 42%); pointer-events: none; }
.project-card-top { margin-bottom: 38px; }
.project-card h3 { font-size: 20px; letter-spacing: -0.025em; }
.project-card p { height: auto; min-height: 42px; }
.project-meta { padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.055); }
.project-open-label { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: #94c487; font-size: 11px; font-weight: 800; }
.empty-projects { border-color: rgba(133, 206, 111, 0.22); background: rgba(14, 20, 14, 0.62); }
.site-footer { margin-top: 105px; border: 1px solid var(--v17-line); border-radius: var(--v17-radius-lg); background: rgba(10, 14, 10, 0.66); }
.pricing-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: center; gap: 32px; padding: clamp(24px, 5vw, 52px); border: 1px solid var(--v17-line-strong); border-radius: var(--v17-radius-lg); background: linear-gradient(135deg, rgba(29, 48, 24, 0.84), rgba(10, 15, 10, 0.9)); }
.pricing-card { padding: 24px; border: 1px solid rgba(132, 222, 103, 0.23); border-radius: var(--v17-radius); background: rgba(8, 12, 8, 0.65); }
.pricing-card > span { color: var(--v17-green-bright); font: 800 10px JetBrains Mono, monospace; letter-spacing: 0.12em; }
.pricing-card p { margin: 12px 0 8px; color: var(--v17-muted); }
.pricing-card strong { color: var(--v17-text); font-size: 38px; letter-spacing: -0.05em; }
.pricing-card small { display: block; margin-bottom: 18px; color: var(--v17-muted); line-height: 1.6; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.faq-grid article { padding: 24px; border: 1px solid var(--v17-line); border-radius: var(--v17-radius); background: rgba(14, 19, 14, 0.83); }
.faq-grid h3 { margin: 0 0 10px; font-size: 19px; }
.faq-grid p { margin: 0; color: var(--v17-muted); font-size: 13px; line-height: 1.7; }

/* Creator workspace */
.workspace-shell { grid-template-columns: 276px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.sidebar { top: 76px; height: calc(100vh - 76px); padding: 18px 14px; border-color: var(--v17-line); background: rgba(8, 12, 8, 0.82); backdrop-filter: blur(20px); }
.project-switcher { position: relative; min-height: 96px; padding: 15px; margin-bottom: 15px; border-color: var(--v17-line); border-radius: 14px; background: linear-gradient(145deg, rgba(26, 35, 25, 0.92), rgba(13, 18, 13, 0.9)); color: var(--v17-text); text-align: left; overflow: hidden; }
.project-switcher::after { content: "↙"; position: absolute; right: 13px; top: 11px; color: #5e6b5b; font-size: 13px; }
.project-switcher small { color: #788574; font: 700 8px JetBrains Mono, monospace; }
.project-switcher b { max-width: 190px; margin-top: 8px; font-size: 14px; }
.sidebar-mode-badge { display: inline-flex; margin-top: 10px; }
.sidebar-journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; margin-bottom: 10px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 11px; background: rgba(0, 0, 0, 0.14); }
.sidebar-journey span { height: 3px; border-radius: 99px; background: #293129; }
.sidebar-journey span:first-child { background: var(--v17-green); box-shadow: 0 0 8px rgba(120, 220, 88, 0.35); }
.nav-label { margin: 15px 11px 7px; color: #596557; font-size: 8px; }
.side-link { min-height: 43px; margin: 2px 0; padding: 10px 11px; border: 1px solid transparent; border-radius: 10px; }
.side-link b { display: grid; place-items: center; width: 23px; min-width: 23px; height: 23px; color: #7f8d7c; font-size: 12px; }
.side-link:hover { border-color: rgba(255, 255, 255, 0.05); background: rgba(22, 29, 21, 0.82); }
.side-link.active { border-color: rgba(126, 217, 98, 0.24); background: linear-gradient(90deg, rgba(43, 71, 36, 0.58), rgba(24, 34, 22, 0.65)); color: #e5f4e0; box-shadow: inset 3px 0 var(--v17-green); }
.side-link.active b { color: var(--v17-green-bright); }
.sidebar-bottom { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.workspace-main { max-width: 1560px; width: 100%; margin: 0 auto; padding: 24px clamp(20px, 3vw, 46px) 82px; }
.workspace-utility-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 37px; margin-bottom: 21px; padding-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.055); color: #6f7b6c; font: 700 9px JetBrains Mono, monospace; letter-spacing: 0.06em; }
.workspace-utility-bar > div { display: flex; align-items: center; gap: 8px; }
.workspace-utility-bar i { color: #3d483b; font-style: normal; }
.workspace-utility-bar button { border: 0; background: none; color: #8fbd82; font: inherit; }
.workspace-head { align-items: end; margin-bottom: 25px; }
.workspace-head h1 { max-width: 780px; margin: 4px 0 8px; font-size: clamp(30px, 3.8vw, 49px); letter-spacing: -0.055em; line-height: 1; }
.workspace-head > div:first-child > p:last-child { max-width: 760px; line-height: 1.6; }
.workspace-eyebrow-row { align-items: center; }
.head-actions { flex-wrap: wrap; justify-content: flex-end; }

.next-action-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-bottom: 16px; padding: 22px 24px; overflow: hidden; border: 1px solid rgba(128, 220, 96, 0.24); border-radius: var(--v17-radius); background: linear-gradient(112deg, rgba(30, 49, 26, 0.78), rgba(13, 19, 13, 0.86) 55%, rgba(12, 18, 20, 0.72)); box-shadow: var(--v17-inner); }
.next-action-panel::after { content: ""; position: absolute; width: 310px; height: 310px; right: -170px; top: -170px; border: 1px solid rgba(125, 216, 96, 0.11); border-radius: 50%; }
.next-action-copy { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 15px; align-items: center; }
.next-action-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(148, 231, 121, 0.28); border-radius: 13px; background: rgba(44, 75, 37, 0.5); color: var(--v17-green-bright); font: 800 13px JetBrains Mono, monospace; }
.next-action-copy small { color: #83a77a; font: 700 8px JetBrains Mono, monospace; letter-spacing: 0.1em; }
.next-action-copy h2 { margin: 4px 0 3px; font-size: 19px; }
.next-action-copy p { margin: 0; color: #a9b5a6; font-size: 12px; }
.journey-track { display: flex; gap: 5px; margin-top: 12px; }
.journey-track span { width: 52px; height: 4px; border-radius: 99px; background: #273027; }
.journey-track span.done { background: #4f8f3d; }
.journey-track span.current { background: var(--v17-green); box-shadow: 0 0 10px rgba(120, 220, 88, 0.35); }

.survival-overview-banner,
.survival-export-hero,
.model-state-hero { border-radius: var(--v17-radius); border-color: var(--v17-line-strong); background: linear-gradient(125deg, rgba(28, 47, 24, 0.78), rgba(13, 19, 13, 0.88)); }
.stat-grid { gap: 10px; }
.stat-card { min-height: 118px; padding: 17px; border-color: var(--v17-line); border-radius: 14px; background: linear-gradient(145deg, rgba(19, 25, 19, 0.9), rgba(11, 15, 11, 0.84)); box-shadow: var(--v17-inner); }
.stat-card::before { content: ""; display: block; width: 22px; height: 2px; margin-bottom: 18px; border-radius: 99px; background: linear-gradient(90deg, var(--v17-green), transparent); }
.stat-card span { color: #7f8b7c; }
.stat-card b { font-size: 28px; letter-spacing: -0.04em; }
.panel,
.panel-card,
.admin-panel .panel-card { border-color: var(--v17-line); border-radius: var(--v17-radius); background: rgba(14, 19, 14, 0.87); box-shadow: var(--v17-inner); }
.panel-head { min-height: 67px; padding: 17px 20px; border-color: rgba(255, 255, 255, 0.055); background: rgba(255, 255, 255, 0.01); }
.panel-body { padding: 20px; }
.overview-content-toolbar { border-color: rgba(255, 255, 255, 0.05); background: rgba(7, 10, 7, 0.42); }
.overview-filter-chip { border-radius: 999px; }
.overview-content-search,
.search-box input,
.compact-select { border-color: var(--v17-line); background: rgba(7, 11, 7, 0.8); }
.item-list { gap: 11px; }
.item-card,
.visual-asset-card,
.equipment-card,
.tooltip-card,
.sound-card,
.font-card { border-color: var(--v17-line); border-radius: 14px; background: linear-gradient(145deg, rgba(20, 27, 20, 0.92), rgba(10, 14, 10, 0.88)); box-shadow: var(--v17-inner); }
.item-card:hover,
.visual-asset-card:hover { border-color: var(--v17-line-strong); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28); }
.item-thumb,
.visual-asset-stage,
.item-preview-stage,
.tooltip-preview-stage,
.equipment-preview-stage { border: 1px solid rgba(255, 255, 255, 0.055); background-color: rgba(5, 8, 5, 0.72); }
.validator-row { border-color: rgba(255, 255, 255, 0.065); background: rgba(18, 24, 18, 0.74); }
.command-card,
.command-group { border-color: var(--v17-line); background: rgba(13, 18, 13, 0.84); }

/* Dialogs and complex editors */
.modal,
body dialog { border-color: rgba(138, 220, 111, 0.24); border-radius: 22px; background: rgba(13, 18, 13, 0.97); box-shadow: 0 40px 130px rgba(0, 0, 0, 0.72); }
.modal::backdrop,
body dialog::backdrop { background: rgba(2, 4, 2, 0.78); backdrop-filter: blur(10px) saturate(0.8); }
.modal form { padding: 26px; }
.modal-head { padding-bottom: 19px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.modal-head h2 { font-size: 28px; letter-spacing: -0.04em; }
.modal input,
.modal select,
.modal textarea,
.legal-form input,
.legal-form select,
.legal-form textarea,
body input,
body select {
  border-color: var(--v17-line);
  border-radius: 11px;
  background: rgba(6, 10, 6, 0.86);
}
.modal input:focus,
.modal select:focus,
.modal textarea:focus,
.legal-form input:focus,
.legal-form select:focus,
.legal-form textarea:focus { border-color: rgba(131, 221, 102, 0.58); box-shadow: 0 0 0 3px rgba(120, 220, 88, 0.085); }
.project-wizard-steps,
.item-wizard-steps { border-color: var(--v17-line); background: rgba(5, 8, 5, 0.46); }
.project-wizard-step.active,
.item-wizard-step.active,
.creator-wizard-step.active { background: transparent; }
.project-wizard-step:focus-visible,
.item-wizard-step:focus-visible,
.creator-wizard-step:focus-visible { outline: 2px solid rgba(143, 239, 112, 0.82); outline-offset: 4px; border-radius: 9px; }
.pack-mode-card,
.appearance-mode-card,
.equipment-type-card,
.wizard-tip,
.toggle-row,
.dropzone,
.wizard-advanced { border-color: var(--v17-line); background: rgba(13, 18, 13, 0.78); }
.pack-mode-card:hover,
.appearance-mode-card:hover,
.equipment-type-card:hover,
.dropzone:hover { border-color: var(--v17-line-strong); background: rgba(20, 29, 19, 0.9); }
.pack-mode-card.selected,
.appearance-mode-card.selected,
.equipment-type-card.selected { border-color: rgba(128, 222, 96, 0.46); background: linear-gradient(145deg, rgba(34, 58, 29, 0.74), rgba(15, 22, 14, 0.82)); }
.preview-panel { border-color: var(--v17-line); border-radius: 16px; background: rgba(8, 12, 8, 0.82); }
.sticky-actions { background: linear-gradient(transparent, rgba(13, 18, 13, 0.99) 30%); }
.pricing-card,
.account-plan-card,
.account-cloud-section,
.cloud-library-card { border-color: var(--v17-line); border-radius: var(--v17-radius); background: linear-gradient(145deg, rgba(19, 26, 19, 0.96), rgba(10, 14, 10, 0.94)); }
.pricing-card.pro-card { border-color: rgba(124, 216, 95, 0.32); background: linear-gradient(145deg, rgba(28, 47, 24, 0.95), rgba(11, 16, 11, 0.96)); }

/* Help Center */
.guide-body::before { display: none; }
.guide-layout { max-width: 1580px; }
.guide-sidebar { border-color: var(--v17-line); background: rgba(7, 10, 7, 0.42); }
.guide-sidebar-inner { top: 76px; }
.guide-content { max-width: 1180px; padding-top: 56px; }
.guide-hero { position: relative; overflow: hidden; border-color: var(--v17-line-strong); border-radius: var(--v17-radius-lg); background: linear-gradient(130deg, rgba(27, 46, 23, 0.9), rgba(12, 18, 12, 0.92) 58%, rgba(9, 16, 18, 0.88)); box-shadow: var(--v17-shadow); }
.guide-hero::after { content: ""; position: absolute; width: 330px; height: 330px; right: -170px; top: -190px; border: 1px solid rgba(126, 217, 97, 0.14); border-radius: 50%; }
.guide-task,
.guide-compare article,
.guide-method,
.guide-steps li,
.guide-details-list details,
.guide-fix-list details,
.guide-faq-grid article,
.guide-table-wrap { border-color: var(--v17-line); background: rgba(14, 19, 14, 0.86); box-shadow: var(--v17-inner); }
.guide-task:hover { border-color: var(--v17-line-strong); background: rgba(20, 28, 19, 0.94); }
.guide-section + .guide-section { border-color: var(--v17-line); }
.guide-support-card,
.guide-support-final { border-color: rgba(126, 217, 97, 0.28); background: linear-gradient(145deg, rgba(27, 46, 23, 0.88), rgba(11, 16, 11, 0.88)); }

/* Legal and contact */
.legal-shell { max-width: 1260px; grid-template-columns: 245px minmax(0, 1fr); gap: 34px; }
.legal-sidebar { top: 102px; }
.legal-sidebar a { border-radius: 8px; }
.legal-document { min-width: 0; }
.legal-hero { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 58px); border-color: var(--v17-line-strong); border-radius: var(--v17-radius-lg); background: linear-gradient(132deg, rgba(26, 44, 22, 0.9), rgba(11, 16, 11, 0.93)); box-shadow: var(--v17-shadow); }
.legal-hero::after { content: ""; position: absolute; right: -120px; top: -170px; width: 300px; height: 300px; border: 1px solid rgba(132, 224, 103, 0.12); border-radius: 50%; }
.legal-hero h1 { font-size: clamp(40px, 6vw, 66px); letter-spacing: -0.055em; }
.legal-card { padding: clamp(23px, 3.5vw, 38px); border-color: var(--v17-line); border-radius: var(--v17-radius); background: rgba(13, 18, 13, 0.84); box-shadow: var(--v17-inner); }
.legal-card h2 { letter-spacing: -0.035em; }
.contact-grid article,
.form-check { border-color: var(--v17-line); background: rgba(8, 12, 8, 0.66); }
.legal-footer { border-color: var(--v17-line); background: rgba(7, 10, 7, 0.52); }
.success-card { border: 1px solid var(--v17-line-strong); border-radius: var(--v17-radius-lg); background: rgba(13, 19, 13, 0.9); box-shadow: var(--v17-shadow); }

/* Admin */
.admin-header { height: 76px; }
body > main { position: relative; }
.admin-hero h1 { font-size: clamp(34px, 4vw, 50px); letter-spacing: -0.055em; }
.admin-tabs { position: sticky; top: 88px; z-index: 10; border-color: var(--v17-line); background: rgba(9, 13, 9, 0.84); backdrop-filter: blur(18px); }
.admin-tabs button.active { background: linear-gradient(145deg, rgba(41, 69, 34, 0.66), rgba(24, 34, 23, 0.8)); color: var(--v17-green-bright); }
.gate-card,
.stat-card,
.panel-card { border-color: var(--v17-line); background: rgba(14, 20, 14, 0.88); box-shadow: var(--v17-inner); }
.table-wrap { border-radius: 0 0 var(--v17-radius) var(--v17-radius); }
tbody tr:hover { background: rgba(28, 42, 26, 0.56); }

/* Public sharing */
.public-share { max-width: 1260px; }
.public-share-hero { border-color: var(--v17-line-strong); border-radius: var(--v17-radius-lg); background: linear-gradient(130deg, rgba(26, 44, 22, 0.92), rgba(11, 16, 11, 0.92)); box-shadow: var(--v17-shadow); }
.public-stat,
.public-item-card { border-color: var(--v17-line); background: rgba(14, 20, 14, 0.86); }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy-wrap { max-width: 920px; }
  .hero-visual { max-width: 760px; width: 100%; }
  .capability-card { grid-column: span 6; }
  .capability-card:nth-child(1), .capability-card:nth-child(2), .capability-card:nth-child(6) { grid-column: span 6; }
  .workspace-shell { grid-template-columns: 82px minmax(0, 1fr); }
  .sidebar { padding-inline: 9px; }
  .project-switcher, .sidebar-journey, .nav-label, .side-link span, .side-link .soon { display: none; }
  .side-link { justify-content: center; }
  .side-link b { font-size: 15px; }
}

@media (max-width: 820px) {
  .mode-paths,
  .workflow-grid,
  .capability-grid,
  .pricing-section,
  .faq-grid { grid-template-columns: 1fr; }
  .capability-card,
  .capability-card:nth-child(1),
  .capability-card:nth-child(2),
  .capability-card:nth-child(6) { grid-column: auto; }
  .workflow-step { min-height: 190px; }
  .capability-heading { align-items: start; flex-direction: column; }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .next-action-panel { grid-template-columns: 1fr; }
  .next-action-panel > .primary-btn { justify-self: start; }
  .legal-shell { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .ambient-orb-a { width: 250px; height: 250px; }
  .ambient-orb-a { right: 0; animation: none; }
  .ambient-orb-b { left: 0; animation: none; }
  .topbar { min-height: 68px; padding: 0 12px; }
  body > .toast-host { left: 12px; right: 12px; bottom: 84px; width: auto; }
  .brand > span:nth-child(2), .release-pill { display: none; }
  .top-actions { gap: 6px; }
  .top-actions .pro-upgrade-button { display: inline-flex; }
  .top-actions > .primary-btn { min-width: 42px; padding-inline: 11px; }
  .top-actions > .primary-btn:not(:focus) { font-size: 0; }
  .top-actions > .primary-btn span { font-size: 16px; }
  .landing { padding-top: 42px; }
  .hero { gap: 38px; }
  .hero h1 { font-size: clamp(46px, 14vw, 64px); }
  .hero-actions > * { width: 100%; }
  .mode-paths { grid-template-columns: 1fr; }
  .command-center-body { grid-template-columns: 72px minmax(0, 1fr); }
  .command-center-nav { padding-inline: 7px; }
  .command-center-nav b { display: none; }
  .command-center-nav span { padding-inline: 7px; overflow: hidden; }
  .command-center-main { padding: 14px; }
  .visual-workbench { grid-template-columns: 1fr; }
  .visual-layers { grid-template-columns: repeat(3, 1fr); }
  .visual-layer { min-height: 58px; }
  .hero-command-center { min-height: 0; }
  .project-grid { grid-template-columns: 1fr; }
  .site-footer { margin-top: 76px; }
  .workspace-shell { display: block; }
  .sidebar { top: auto; bottom: 0; width: 100%; height: 72px; padding: 7px 8px; border: 0; border-top: 1px solid var(--v17-line); overflow-x: auto; display: flex; flex-direction: row; background: rgba(7, 10, 7, 0.94); }
  .sidebar > .nav-label, .sidebar > .project-switcher, .sidebar > .sidebar-journey, .sidebar-bottom { display: none; }
  .side-link { flex: 0 0 62px; height: 56px; margin: 0 2px; padding: 7px; }
  .side-link.disabled { display: none; }
  .side-link b { width: auto; height: auto; }
  .workspace-main { padding: 17px 13px 96px; }
  .workspace-utility-bar { margin-bottom: 17px; }
  .workspace-head { align-items: start; }
  .workspace-head h1 { font-size: 36px; }
  .head-actions { justify-content: flex-start; }
  .next-action-panel { padding: 17px; }
  .next-action-copy { grid-template-columns: 38px minmax(0, 1fr); }
  .next-action-icon { width: 38px; height: 38px; }
  .modal form { padding: 18px; }
  .guide-content { padding-inline: 15px; }
  .guide-footer { margin-inline: -15px; padding-inline: 15px; }
  .legal-hero, .legal-card { padding: 22px; }
  .admin-tabs { top: 79px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-orb,
  .hero-live-kicker::before,
  .visual-preview-stage img { animation: none !important; }
  .ambient-system::after { transform: none; }
  .project-card:hover,
  .capability-card:hover,
  .workflow-step:hover,
  .mode-path:hover { transform: none; }
}