:root {
  color-scheme: dark;
  --bg: #080a0d;
  --bg-soft: #10141a;
  --panel: rgba(20, 24, 30, .88);
  --panel-strong: #151a21;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(218,181,104,.32);
  --text: #f6f3ec;
  --muted: #9ba6b5;
  --gold: #d7b36a;
  --gold-strong: #f0cc7e;
  --green: #68d7a2;
  --red: #ff8e8e;
  --blue: #78aef8;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0,0,0,.32);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background:
  radial-gradient(circle at 8% -12%, rgba(214,177,105,.14), transparent 28rem),
  radial-gradient(circle at 100% 15%, rgba(60,111,184,.12), transparent 34rem), var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.shell { width: min(1440px, calc(100% - 32px)); margin: 0 auto; }
.topbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(8,10,13,.8); backdrop-filter: blur(18px); }
.topbar-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: #111; background: linear-gradient(145deg, var(--gold-strong), #a67b31); box-shadow: 0 10px 35px rgba(215,179,106,.2); }
.brand small { display:block; color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.nav-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn { appearance:none; border:1px solid var(--line); border-radius:12px; padding:10px 15px; color:var(--text); background:#171c23; transition:.18s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; }
.btn:hover { transform: translateY(-1px); border-color:var(--line-strong); }
.btn.primary { color:#15110a; font-weight:800; border-color:transparent; background:linear-gradient(145deg,var(--gold-strong),#b78a3e); }
.btn.danger { color:#ffd8d8; border-color:rgba(255,142,142,.35); background:rgba(255,90,90,.08); }
.btn.success { color:#d7ffe9; border-color:rgba(104,215,162,.35); background:rgba(104,215,162,.08); }
.btn.ghost { background:transparent; }
.btn.sm { min-height:34px; padding:7px 10px; border-radius:10px; font-size:13px; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.hero { padding: 72px 0 40px; display:grid; grid-template-columns:1.25fr .75fr; gap:42px; align-items:center; }
.eyebrow { color:var(--gold-strong); font-weight:800; text-transform:uppercase; letter-spacing:.18em; font-size:12px; }
h1 { font-size:clamp(42px,6vw,78px); line-height:1.02; letter-spacing:-.055em; margin:18px 0; max-width:950px; }
h2 { font-size:clamp(26px,3vw,42px); letter-spacing:-.035em; margin:0; }
h3 { margin:0; letter-spacing:-.02em; }
.lead { color:#bec6d2; font-size:clamp(17px,2vw,21px); line-height:1.75; max-width:820px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hero-card { padding:25px; border:1px solid var(--line-strong); border-radius:26px; background:linear-gradient(160deg,rgba(35,31,24,.96),rgba(15,19,24,.9)); box-shadow:var(--shadow); }
.flow { display:grid; gap:10px; margin-top:18px; }
.flow-row { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.flow-num { flex:0 0 30px; height:30px; display:grid; place-items:center; border-radius:10px; color:#17130a; font-weight:900; background:var(--gold); }
.section { padding:50px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.section-head p { margin:8px 0 0; color:var(--muted); line-height:1.65; }
.grid { display:grid; gap:18px; }
.grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:0 14px 45px rgba(0,0,0,.16); padding:20px; }
.card.gold { border-color:var(--line-strong); background:linear-gradient(150deg,rgba(45,36,23,.92),rgba(19,23,29,.92)); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.card p { color:var(--muted); line-height:1.65; }
.metric { min-height:128px; }
.metric small { color:var(--muted); }
.metric strong { display:block; font-size:34px; letter-spacing:-.04em; margin:14px 0 4px; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; border:1px solid var(--line); font-size:12px; color:var(--muted); background:rgba(255,255,255,.03); }
.badge.gold { color:var(--gold-strong); border-color:var(--line-strong); }
.badge.green { color:var(--green); border-color:rgba(104,215,162,.25); }
.badge.red { color:var(--red); border-color:rgba(255,142,142,.25); }
.status-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.form-grid .full { grid-column:1/-1; }
label { display:grid; gap:7px; color:#d8dee8; font-size:13px; }
label > span { color:var(--muted); font-size:12px; }
input,select,textarea { width:100%; color:var(--text); border:1px solid var(--line); border-radius:11px; padding:11px 12px; outline:none; background:#0d1116; }
input:focus,select:focus,textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(215,179,106,.1); }
textarea { min-height:112px; resize:vertical; line-height:1.55; }
input[type=color] { min-height:44px; padding:5px; }
input[type=checkbox] { width:auto; accent-color:var(--gold); }
.check { display:flex; align-items:center; gap:9px; min-height:42px; }
.form-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.notice { padding:13px 15px; border:1px solid rgba(120,174,248,.25); background:rgba(120,174,248,.08); border-radius:12px; color:#dceaff; line-height:1.55; }
.notice.warn { border-color:rgba(215,179,106,.3); background:rgba(215,179,106,.08); color:#f8e6bd; }
.notice.error { border-color:rgba(255,142,142,.3); background:rgba(255,142,142,.08); color:#ffdcdc; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th,td { text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th { position:sticky; top:0; z-index:1; color:var(--muted); background:#11161c; font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
td { font-size:14px; }
tr:last-child td { border-bottom:0; }
.empty { padding:32px; text-align:center; color:var(--muted); }
.layout { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:calc(100vh - 69px); }
.sidebar { position:sticky; top:69px; align-self:start; height:calc(100vh - 69px); padding:20px 14px; border-right:1px solid var(--line); overflow:auto; background:rgba(10,13,17,.62); }
.sidebar nav { display:grid; gap:6px; }
.nav-link { text-align:left; border:0; border-radius:12px; color:#aab5c2; background:transparent; padding:11px 12px; }
.nav-link:hover,.nav-link.active { color:var(--text); background:rgba(215,179,106,.1); }
.nav-link.active { box-shadow:inset 3px 0 var(--gold); }
.main { min-width:0; padding:30px; }
.page { display:none; animation:fade .2s ease; }
.page.active { display:block; }
@keyframes fade { from { opacity:.25; transform:translateY(3px) } to { opacity:1; transform:none } }
.page-title { margin-bottom:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.page-title p { margin:8px 0 0; color:var(--muted); }
.steps { display:grid; gap:10px; }
.step { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; padding:12px; }
.step-index { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#202731; color:var(--muted); font-weight:800; }
.step.done .step-index { color:#092416; background:var(--green); }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tab { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:8px 12px; }
.tab.active { color:#161109; background:var(--gold); border-color:var(--gold); font-weight:800; }
.list { display:grid; gap:10px; }
.list-item { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px; border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.list-item .meta { min-width:0; }
.list-item .meta b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item .meta small { color:var(--muted); }
.actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.phone-builder { display:grid; grid-template-columns:260px minmax(310px,390px) minmax(300px,1fr); gap:18px; align-items:start; }
.palette,.inspector { display:grid; gap:10px; }
.palette button { width:100%; text-align:left; }
.phone { width:100%; min-height:680px; border:10px solid #08090b; border-radius:38px; overflow:hidden; background:#f4f4f4; color:#191919; box-shadow:0 25px 70px rgba(0,0,0,.45); }
.phone-bar { height:31px; background:#101010; border-radius:22px 22px 0 0; }
.phone-head { padding:15px; font-weight:800; text-align:center; background:#fff; border-bottom:1px solid #ddd; }
.phone-body { min-height:590px; padding:12px; display:grid; align-content:start; gap:10px; }
.phone-block { border:2px solid transparent; border-radius:11px; background:#fff; padding:13px; box-shadow:0 2px 10px rgba(0,0,0,.07); cursor:pointer; }
.phone-block.selected { border-color:#c49b4e; }
.phone-block.hero-block { min-height:130px; color:#fff; background:linear-gradient(145deg,#2b2418,#ad813b); display:grid; align-content:end; }
.phone-block.products { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.phone-block.products span { background:#f1eee8; padding:15px 5px; border-radius:7px; text-align:center; }
.component-list { display:grid; gap:8px; }
.component-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:11px; }
.component-row.active { border-color:var(--gold); background:rgba(215,179,106,.06); }
.code { white-space:pre-wrap; word-break:break-word; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; color:#dce5ee; background:#090d11; border:1px solid var(--line); border-radius:12px; padding:14px; }
.auth-wrap { min-height:calc(100vh - 69px); display:grid; place-items:center; padding:50px 16px; }
.auth-card { width:min(560px,100%); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:5px; border-radius:13px; background:#0c1014; margin-bottom:20px; }
.auth-tabs button { border:0; border-radius:9px; padding:10px; color:var(--muted); background:transparent; }
.auth-tabs button.active { color:var(--text); background:#1b222b; }
.plan { display:grid; min-height:340px; align-content:start; }
.plan .price { font-size:42px; letter-spacing:-.05em; margin:18px 0; }
.plan ul { color:var(--muted); line-height:1.8; padding-left:20px; }
.plan .btn { margin-top:auto; }
.toast { position:fixed; right:20px; bottom:20px; z-index:100; max-width:min(420px,calc(100% - 40px)); padding:13px 16px; border-radius:12px; background:#edf2f6; color:#18202a; box-shadow:0 20px 60px rgba(0,0,0,.35); transform:translateY(120px); opacity:0; transition:.2s; }
.toast.show { transform:none; opacity:1; }
.toast.error { background:#ffe0e0; color:#581d1d; }
.loader { width:18px; height:18px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--gold); border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg) } }
dialog { width:min(760px,calc(100% - 24px)); color:var(--text); border:1px solid var(--line-strong); border-radius:20px; background:#11161c; box-shadow:var(--shadow); padding:0; }
dialog::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(3px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.dialog-body { padding:20px; max-height:70vh; overflow:auto; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--line); }
footer { border-top:1px solid var(--line); padding:30px 0 50px; color:var(--muted); }
@media (max-width:1100px) {
  .grid.cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phone-builder { grid-template-columns:220px minmax(300px,380px); }
  .inspector { grid-column:1/-1; }
}
@media (max-width:840px) {
  .hero,.grid.cols-2,.grid.cols-3,.form-grid { grid-template-columns:1fr; }
  .layout { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); overflow:auto; }
  .sidebar nav { grid-auto-flow:column; grid-auto-columns:max-content; overflow:auto; }
  .main { padding:22px 16px; }
  .phone-builder { grid-template-columns:1fr; }
  .phone { max-width:390px; margin:0 auto; }
  .form-grid .full { grid-column:auto; }
}
@media (max-width:560px) {
  .shell { width:min(100% - 22px,1440px); }
  .topbar-inner { min-height:60px; }
  .brand small { display:none; }
  .hero { padding-top:42px; }
  h1 { font-size:42px; }
  .grid.cols-4 { grid-template-columns:1fr; }
  .section-head,.page-title { align-items:flex-start; flex-direction:column; }
  .card { padding:16px; }
  .main { padding:18px 11px; }
  .nav-actions .hide-mobile { display:none; }
}