:root{
 --ink:#22243b;--muted:#6a6d85;--accent:#5b50e6;--accent-dark:#4238bb;
 --wash:#f4f2ff;--line:#e8e8f2;--paper:#fff;--canvas:#fff;
 background:#fff;
}
body{background:#fff}
header{background:#fff;border-bottom-color:#eeeef6}
.brand-icon{background:linear-gradient(135deg,#4869f7,#a04fea);box-shadow:0 5px 14px #6256ee22}
.brand{color:var(--ink)}
nav a:hover,footer a:hover{color:var(--accent)}
nav .pill{background:#f4f1ff;color:#6550c9;border-color:#e6dfff}
.hero{
 background:radial-gradient(ellipse at 95% 12%,#fff2e9 0,transparent 36%),
 radial-gradient(ellipse at 60% 0,#f0edff 0,transparent 46%),#fff;
}
.eyebrow{color:#6153cf}
.eyebrow .dot{background:#ff926c;box-shadow:0 0 0 4px #fff0e9}
h1{color:#22243b}
h1 em{
 color:#6550de;background:linear-gradient(100deg,#4274ec 0%,#8455de 55%,#e96b92 100%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.privacy-note{color:#70728a}
.workspace>.panel{background:#fff;border-color:#e8e8f2;box-shadow:0 8px 30px #30386b07;position:relative}
.workspace>.panel:before{
 content:"";position:absolute;left:24px;right:24px;top:0;height:4px;border-radius:0 0 5px 5px;
 background:linear-gradient(90deg,#ffad79,#ed7b9a);
}
.workspace>.panel:nth-child(2):before{background:linear-gradient(90deg,#4f83f4,#8e65ec)}
.workspace>.panel:nth-child(3):before{background:linear-gradient(90deg,#a56be4,#ef84b4)}
.step{color:#756c9a}
.workspace>.panel:first-child .step{color:#b85e35}
.workspace>.panel:nth-child(2) .step{color:#5267c6}
.workspace>.panel:last-child .step{color:#9550aa}
.type-button{background:#fff;border-color:#e6e8f4}
.type-button span{color:#6178ce}
.type-button:nth-child(3n+2) span{color:#a765cb}
.type-button:nth-child(3n) span{color:#d47b5f}
.type-button.active{background:#f2f0ff;border-color:#7c70ed;box-shadow:0 0 0 1px #7c70ed}
.type-button:hover{background:#f8f7ff}
.preview-panel{background:#fff!important}
.preview-top .pill{background:#eef4ff;color:#5a72b6;border-color:#e0e9fb}
.preview-surface{
 background-color:#fafbff;
 background-image:linear-gradient(45deg,#eef0f8 25%,transparent 25%),
 linear-gradient(-45deg,#eef0f8 25%,transparent 25%),
 linear-gradient(45deg,transparent 75%,#eef0f8 75%),
 linear-gradient(-45deg,transparent 75%,#eef0f8 75%);
 border-color:#e8ebf6;
}
input,textarea,select{background:#fcfcff;border-color:#e6e7f1;color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:#8a7de8;outline-color:#e9e4ff}
input[type=checkbox],input[type=range]{accent-color:#7360e3}
.button{background:linear-gradient(110deg,#586ded,#8660df);color:#fff;border-color:transparent;box-shadow:0 4px 12px #655be51c}
.button:hover{background:linear-gradient(110deg,#435bdb,#754bd2)}
.button.secondary{background:#f0edff;color:#6450c4;border-color:#e5dfff;box-shadow:none}
.button.ghost{background:#fff;color:#615489;border-color:#e7e2f4;box-shadow:none}
.button.ghost:hover,.button.secondary:hover{background:#f4f1ff}
.status{color:#4f57ab}
.status.warn{color:#99681d}.status.error{color:#bd435f}
.preset{background:#fff;border-color:#e7e7f1;transition:transform .15s,box-shadow .15s}
.preset:hover{transform:translateY(-2px);box-shadow:0 5px 12px #48457512}
.preset.active{background:#f7f4ff;border-color:#9981e8;box-shadow:0 0 0 1px #9981e8}
.preset i{box-shadow:0 3px 8px #20243b16}
.divider{border-color:#ededf5}
.cards .card{border-color:#e9e7f3;background:#fff;box-shadow:0 5px 22px #403d6e05;border-top:3px solid #c0b3f2}
.cards .card:nth-child(3n+2){border-top-color:#a6c2fa}
.cards .card:nth-child(3n){border-top-color:#fac4ad}
.card .number{color:#7c66b6}
footer{border-color:#ededf5}
.article p,.article li{color:#53576e}.article pre{background:#f5f2ff}
@media(prefers-reduced-motion:reduce){.preset{transition:none}.preset:hover{transform:none}}

.dropzone{background:linear-gradient(125deg,#fff5ed,#faf2ff);border-color:#d6bae9}
.dropzone:hover,.dropzone.dragging{border-color:#9b69d4;background:#f7edff}
.dropzone strong{color:#8154b6}.photo-thumb.active{border-color:#9974e3}
.layout{background:#fff;border-color:#e8e3f1}.layout.active{background:#f7f1ff;border-color:#a582e6;box-shadow:0 0 0 1px #a582e6}
.canvas-wrap{background:#f9f7fe;border-color:#e8e2f2}
.template-section{padding-top:8px;padding-bottom:28px}
.template-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}
.template-heading h2{font-size:25px;letter-spacing:-.8px;margin:10px 0 0}
.template-heading .hint{margin:0;max-width:285px}
.social-templates{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.social-template{padding:0 0 13px;text-align:left;border:1px solid #ebe4f4;border-radius:14px;background:#fff;overflow:hidden;min-width:0;transition:transform .15s,box-shadow .15s}
.social-template:hover{transform:translateY(-3px);box-shadow:0 7px 20px #705c9514}
.social-template.active{border-color:#9b73dc;box-shadow:0 0 0 2px #9b73dc}
.template-art{display:block;background:#faf5ff;border-bottom:1px solid #f0eafa}
.social-template:nth-child(3n+2) .template-art{background:#f1f6ff}.social-template:nth-child(3n) .template-art{background:#fff4ec}
.template-art svg{width:100%;display:block;height:auto}
.template-tag{font-size:8px;letter-spacing:.045em;font-weight:700;color:#9c78b2;display:block;margin:12px 10px 6px}
.social-template strong{font-size:12px;color:#423852;display:block;margin:0 10px 4px}
.template-dimensions{font-size:10px;color:#8a829a;display:block;margin:0 10px}
#template-status{margin-top:14px}
@media(max-width:1150px){.social-templates{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.template-heading{display:block}.template-heading .hint{margin-top:12px}.social-templates{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.template-heading h2{font-size:23px}.template-art svg{max-height:120px}.template-tag{font-size:9px}.social-template strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.social-template{transition:none}.social-template:hover{transform:none}}