:root{
--bg:#090e1b;--bg2:#0e1426;--panel:#121a30;--panel2:#0d1426;--line:#24304f;
--text:#f2f5ff;--muted:#98a5c4;--accent:#7c5cff;--accent2:#22c7a5;--danger:#ff6b7a;
--radius:18px;--shadow:0 20px 55px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:
radial-gradient(circle at 10% 0,#17234b 0,transparent 30%),
linear-gradient(160deg,var(--bg),#070b14 65%);color:var(--text);min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.app-shell{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:22px 17px;border-right:1px solid var(--line);background:rgba(8,13,26,.9);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--accent),#a65cff);font-weight:900;box-shadow:0 12px 30px rgba(124,92,255,.3)}
.brand strong{display:block;font-size:15px}.brand small{color:var(--muted);font-size:11px}
.nav{display:grid;gap:6px}.nav a{padding:11px 13px;border-radius:11px;color:var(--muted);font-size:13px}
.nav a:hover,.nav a.active{background:#18213b;color:#fff}
.sidebar-card{position:absolute;bottom:18px;left:17px;right:17px;padding:14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#131c32,#0d1426)}
.sidebar-card strong{display:block;font-size:12px;margin-bottom:6px}.sidebar-card span{color:var(--muted);font-size:11px;line-height:1.5}
.main{padding:26px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}
.topbar h1{margin:0;font-size:25px}.topbar p{margin:6px 0 0;color:var(--muted);font-size:13px}
.actions{display:flex;gap:9px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:#141d34;color:#fff;padding:10px 14px;border-radius:11px;cursor:pointer;font-weight:750;font-size:12px}
.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--accent),#9a5cff);border-color:transparent}.btn.danger{background:rgba(255,107,122,.1);color:#ffb3bc;border-color:rgba(255,107,122,.28)}
.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))}
.panel{background:linear-gradient(180deg,rgba(19,27,49,.96),rgba(13,20,38,.96));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel-head{padding:17px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-head h2,.panel-head h3{margin:0;font-size:14px}.panel-head span,.panel-head p{color:var(--muted);font-size:11px;margin:0}
.panel-body{padding:19px}.stat-card{padding:18px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,#121b31,#0c1426)}
.stat-card span{color:var(--muted);font-size:11px}.stat-card strong{display:block;font-size:27px;margin-top:7px}.stat-card small{color:#b8c3df;font-size:11px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid rgba(36,48,79,.7)}th{color:#a8b4d2;font-size:10px;text-transform:uppercase;letter-spacing:.08em}td{color:#dce4f8}
.badge{display:inline-flex;padding:5px 8px;border-radius:999px;border:1px solid var(--line);background:#0d1528;color:#bec8e2;font-size:10px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}
label{font-size:11px;color:#c9d2e9;font-weight:750}input,select,textarea{width:100%;border:1px solid var(--line);background:#0b1324;color:#fff;border-radius:10px;padding:10px 11px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}textarea{resize:vertical;min-height:88px}
input[type=color]{height:43px;padding:4px}
.section-label{margin:21px 0 11px;font-size:10px;color:#7f8cad;text-transform:uppercase;letter-spacing:.14em}
.builder-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);gap:18px;align-items:start}
.sticky-col{position:sticky;top:20px;display:grid;gap:18px}
.preset-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.preset-card{padding:11px;border:1px solid var(--line);border-radius:12px;background:#0d1528;cursor:pointer}.preset-card:hover{border-color:#6f5cff}.preset-card strong{font-size:11px;display:block}.preset-card span{color:var(--muted);font-size:10px}
.chips{display:flex;flex-wrap:wrap;gap:7px}.chip{border:1px solid var(--line);background:#0d1528;color:var(--muted);padding:7px 9px;border-radius:999px;font-size:10px;cursor:pointer}.chip.active{border-color:var(--accent);background:rgba(124,92,255,.15);color:#e2dcff}
.blueprint-wrap{display:grid;place-items:center;min-height:390px;padding:18px;background:linear-gradient(145deg,#111b32,#0a1020)}
.artboard{position:relative;width:min(310px,100%);aspect-ratio:9/16;border-radius:15px;overflow:hidden;background:#efe8dc;color:#172033;box-shadow:0 24px 55px rgba(0,0,0,.35);transition:.2s}
.artboard[data-ratio="1:1"]{aspect-ratio:1/1}.artboard[data-ratio="4:5"]{aspect-ratio:4/5}.artboard[data-ratio="16:9"]{aspect-ratio:16/9;width:min(520px,100%)}
.artboard::after{content:"";position:absolute;inset:6%;border:1px dashed rgba(23,32,51,.25);border-radius:10px;pointer-events:none}
.bp-tag{position:absolute;top:8%;left:9%;font-size:7px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.bp-title{position:absolute;left:9%;top:17%;width:72%;font-family:Georgia,serif;font-size:26px;line-height:1.02;font-weight:700;z-index:2}
.bp-image{position:absolute;left:15%;right:8%;top:39%;height:35%;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.35),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:9px;letter-spacing:.12em;text-transform:uppercase;overflow:hidden}
.bp-image img{width:100%;height:100%;object-fit:cover}
.bp-cta{position:absolute;left:9%;bottom:9%;font-size:8px;font-weight:800;border-bottom:1px solid currentColor;padding-bottom:3px}
.bp-logo{position:absolute;right:9%;bottom:9%;font-size:8px;font-weight:900}.bp-logo img{display:block;max-width:52px;max-height:24px;object-fit:contain}
.prompt-box{white-space:pre-wrap;background:#080f1e;border:1px solid var(--line);border-radius:12px;padding:14px;min-height:245px;max-height:390px;overflow:auto;color:#d9e1f8;font:11px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}.kpi{padding:10px;border:1px solid var(--line);border-radius:11px;background:#0d1528}.kpi strong{display:block;font-size:17px}.kpi span{color:var(--muted);font-size:9px}
.range-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.range-row output{min-width:46px;text-align:center;padding:7px;border-radius:9px;background:#0d1528;border:1px solid var(--line);font-size:11px}
.color-dot{width:20px;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.18);display:inline-block;vertical-align:middle;margin-right:7px}
.flash{padding:12px 14px;margin-bottom:16px;border-radius:12px;border:1px solid var(--line);font-size:12px}.flash.success{background:rgba(34,199,165,.09);color:#a9f1df;border-color:rgba(34,199,165,.24)}.flash.error{background:rgba(255,107,122,.08);color:#ffc0c7;border-color:rgba(255,107,122,.22)}
.empty{padding:28px;text-align:center;color:var(--muted);font-size:12px}.muted{color:var(--muted)}.small{font-size:11px}
.cards-list{display:grid;gap:10px}.list-card{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:13px;background:#0d1528}.list-card h3{margin:0 0 4px;font-size:12px}.list-card p{margin:0;color:var(--muted);font-size:10px}
.logo-preview{width:56px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden}.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.hero{padding:24px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(135deg,rgba(124,92,255,.15),rgba(34,199,165,.08));margin-bottom:18px}
.hero h2{font-size:22px;margin:0 0 8px}.hero p{max-width:740px;color:#b6c0db;font-size:12px;line-height:1.6;margin:0}
@media(max-width:1050px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.builder-grid{grid-template-columns:1fr}.sticky-col{position:static}.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.main{padding:15px}.topbar{align-items:flex-start;flex-direction:column}.form-grid,.grid.cols-2,.grid.cols-3,.grid.cols-4,.preset-row{grid-template-columns:1fr}.field.full{grid-column:auto}.artboard{width:min(280px,100%)}}


/* ===== V2 UX Layer ===== */
.mode-switch{display:inline-flex;padding:4px;background:#0c1426;border:1px solid var(--line);border-radius:12px;gap:4px}
.mode-switch button{border:0;background:transparent;color:var(--muted);padding:8px 11px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:800}
.mode-switch button.active{background:#202b4b;color:#fff}
.quick-builder{display:grid;gap:16px}
.step-card{border:1px solid var(--line);background:linear-gradient(180deg,#111a30,#0d1528);border-radius:16px;overflow:hidden}
.step-head{display:flex;gap:12px;align-items:flex-start;padding:16px 17px;border-bottom:1px solid rgba(36,48,79,.7)}
.step-num{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:rgba(124,92,255,.16);color:#d8d0ff;font-size:11px;font-weight:900;flex:0 0 auto}
.step-head h3{font-size:13px;margin:1px 0 4px}.step-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.45}
.step-body{padding:16px 17px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.choice-card{border:1px solid var(--line);background:#0b1324;border-radius:13px;padding:12px;cursor:pointer;text-align:left;color:#dfe6fa;transition:.15s}
.choice-card:hover{border-color:#5f54b7;transform:translateY(-1px)}
.choice-card.active{border-color:var(--accent);background:rgba(124,92,255,.12);box-shadow:inset 0 0 0 1px rgba(124,92,255,.12)}
.choice-card strong{font-size:11px;display:block}.choice-card span{font-size:9px;color:var(--muted);display:block;margin-top:4px;line-height:1.35}
.template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.template-card{position:relative;min-height:112px;border-radius:14px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:#121a30}
.template-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(5,9,18,.86) 100%)}
.template-card .template-copy{position:absolute;left:11px;right:11px;bottom:10px;z-index:2}
.template-card strong{display:block;font-size:10px}.template-card span{display:block;color:#bdc8e2;font-size:8px;margin-top:3px}
.template-card[data-template="wedding"]{background:linear-gradient(145deg,#f0e7da,#40533d)}
.template-card[data-template="coffee"]{background:linear-gradient(145deg,#f4ddc4,#6f2d23)}
.template-card[data-template="street"]{background:linear-gradient(145deg,#111,#8b1220)}
.template-card[data-template="corporate"]{background:linear-gradient(145deg,#eaf3fb,#173f6d)}
.advanced-wrap{display:none}.advanced-wrap.open{display:block}
.advanced-toggle{width:100%;justify-content:space-between}
.tip{display:flex;gap:8px;padding:10px 11px;border:1px solid rgba(34,199,165,.22);background:rgba(34,199,165,.06);border-radius:11px;color:#bfeade;font-size:10px;line-height:1.5}
.autosave{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}
.autosave i{width:7px;height:7px;border-radius:50%;background:#5c6883}
.autosave.saved i{background:var(--accent2)}
.builder-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.preview-meta{display:flex;justify-content:space-between;gap:10px;padding:10px 13px;border-top:1px solid var(--line);font-size:9px;color:var(--muted)}
.primary-action{padding:13px 16px;font-size:12px}
.simple-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.simple-summary div{padding:10px;border-radius:11px;border:1px solid var(--line);background:#0c1426}
.simple-summary strong{display:block;font-size:10px}.simple-summary span{display:block;color:var(--muted);font-size:9px;margin-top:3px}
#simpleModeView{display:block}#advancedModeView{display:none}
body.advanced-mode #simpleModeView{display:none}
body.advanced-mode #advancedModeView{display:block}
body.advanced-mode .advanced-wrap{display:block}
.mini-label{font-size:9px;color:#7f8cad;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
@media(max-width:850px){.template-grid{grid-template-columns:repeat(2,1fr)}.choice-grid{grid-template-columns:1fr}.simple-summary{grid-template-columns:1fr}}


/* ===== V3 Visual Composer ===== */
.v3-shell{display:grid;grid-template-columns:minmax(320px,.78fr) minmax(460px,1.22fr);gap:18px;align-items:start}
.editor-stage{background:
linear-gradient(45deg,#0b1222 25%,transparent 25%),
linear-gradient(-45deg,#0b1222 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,#0b1222 75%),
linear-gradient(-45deg,transparent 75%,#0b1222 75%);
background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;
min-height:560px;padding:28px;display:grid;place-items:center}
.editor-artboard{position:relative;width:min(360px,100%);aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#efe8dc;color:#172033;box-shadow:0 28px 70px rgba(0,0,0,.42);user-select:none;touch-action:none}
.editor-artboard[data-ratio="1:1"]{aspect-ratio:1/1;width:min(460px,100%)}
.editor-artboard[data-ratio="4:5"]{aspect-ratio:4/5;width:min(410px,100%)}
.editor-artboard[data-ratio="16:9"]{aspect-ratio:16/9;width:min(680px,100%)}
.safe-area{position:absolute;inset:5%;border:1px dashed rgba(23,32,51,.22);border-radius:9px;pointer-events:none;z-index:50}
.design-el{position:absolute;cursor:grab;border:1px solid transparent;touch-action:none}
.design-el:hover{border-color:rgba(124,92,255,.55)}
.design-el.selected{border-color:#7c5cff;box-shadow:0 0 0 2px rgba(124,92,255,.18)}
.design-el.dragging{cursor:grabbing}
.design-headline{font-family:Georgia,serif;font-weight:800;line-height:1.02;white-space:pre-wrap;overflow:hidden}
.design-image{border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.10));border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;overflow:hidden;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.design-image img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.design-cta{font-weight:850;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:3px}
.design-logo{font-weight:900;display:flex;justify-content:flex-end;align-items:center;white-space:nowrap;overflow:hidden}
.design-logo img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
.selection-tag{position:absolute;left:0;top:-22px;background:#7c5cff;color:#fff;padding:4px 6px;border-radius:5px;font-size:8px;display:none}
.design-el.selected .selection-tag{display:block}
.editor-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line);background:#0d1528}
.editor-toolbar .left,.editor-toolbar .right{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.tool-btn{border:1px solid var(--line);background:#111a30;color:#cbd5ef;border-radius:9px;padding:7px 9px;font-size:9px;cursor:pointer}
.tool-btn:hover,.tool-btn.active{border-color:#6b5bea;color:#fff;background:rgba(124,92,255,.12)}
.zoom-label{font-size:9px;color:var(--muted);min-width:40px;text-align:center}
.inspector{display:grid;gap:12px}
.inspector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.inspector-box{border:1px solid var(--line);background:#0c1426;border-radius:12px;padding:11px}
.inspector-box label{display:block;margin-bottom:5px}.inspector-box input{padding:8px 9px}
.lock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.lock-card{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#0d1528;border-radius:11px;padding:10px;cursor:pointer}
.lock-card input{width:auto}.lock-card strong{font-size:10px}.lock-card span{font-size:8px;color:var(--muted);display:block;margin-top:2px}
.platform-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.platform-card{border:1px solid var(--line);background:#0d1528;color:#aeb9d5;border-radius:10px;padding:9px 7px;font-size:9px;font-weight:800;cursor:pointer}
.platform-card.active{border-color:var(--accent);background:rgba(124,92,255,.13);color:#fff}
.ref-purpose{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.status-line{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:9px;padding:8px 12px;border-top:1px solid var(--line)}
.layer-list{display:grid;gap:6px}.layer-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:#0d1528;font-size:9px;cursor:pointer}.layer-item.active{border-color:#6f5cff;color:#fff}
.layer-item span:last-child{color:var(--muted)}
.generate-bar{display:grid;grid-template-columns:1fr auto auto;gap:8px}
.prompt-platform-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.3);font-size:9px;color:#dcd6ff}
@media(max-width:1150px){.v3-shell{grid-template-columns:1fr}.editor-stage{min-height:500px}.platform-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.editor-stage{padding:14px;min-height:420px}.platform-grid{grid-template-columns:repeat(2,1fr)}.inspector-grid,.lock-grid,.ref-purpose{grid-template-columns:1fr}.generate-bar{grid-template-columns:1fr}}