:root{--ink:#23272e;--red:#be1427;--blue:#1769b5;--line:#e3e5e9;--grey:#66707c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#f5f6f8;color:var(--ink);font:15px/1.5 Arial,Helvetica,sans-serif;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:#a4122b}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #315d88;outline-offset:3px}.app-header{background:#151515;min-height:69px;display:flex;align-items:center;justify-content:space-between;padding:10px max(18px,calc((100vw - 1450px)/2));gap:15px}.brand{text-decoration:none;color:#fff;font-weight:900;font-style:italic;font-size:27px;white-space:nowrap;letter-spacing:-1px}.brand strong{color:#e6263a}.brand small{font-size:17px;font-style:normal}.app-header nav{display:flex;gap:20px}.app-header nav a{color:#f4f4f4;font-size:12px;font-weight:800;text-decoration:none}.app-header nav a:hover{color:#ff7b88}.banner-head{max-width:1470px;margin:0 auto;background:linear-gradient(100deg,#9e1220,#cf2031);color:white;border-radius:0 0 15px 15px;padding:27px 38px;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.banner-head .micro{letter-spacing:.14em;font-size:12px;font-weight:bold;color:#ffdee0}.banner-head h1{font-size:clamp(24px,3vw,44px);line-height:1.11;margin:9px 0}.banner-head h1 span{color:#ffe08a}.banner-head p{margin:0;color:#fff4f3;font-size:clamp(12px,1.4vw,17px)}.banner-dots{font-size:115px;color:#ffd0d6;opacity:.45}.layout{max-width:1470px;margin:0 auto;padding:18px 25px}.start h2{font-size:25px;margin:16px 0}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mode{border:2px solid #e0e4e9;background:#fff;text-align:left;border-radius:12px;padding:17px 20px;display:grid;grid-template-columns:50px 1fr;grid-template-rows:auto auto;column-gap:13px;box-shadow:0 4px 13px #1e31420c;color:#222}.mode.active{border-color:#d5162a;box-shadow:0 0 0 3px #f4d8dc}.mode-icon{font-size:35px;grid-row:span 2;color:#b41825;align-self:center}.mode strong{font-size:19px}.mode small{font-size:13px;color:#68737f}.workspace{display:grid;grid-template-columns:minmax(290px,410px) minmax(0,1fr);gap:18px;margin-top:18px;align-items:start}.editor-controls,.design-preview{border:1px solid #e4e5e7;border-radius:14px;background:#fff;box-shadow:0 6px 25px #1220350c;overflow:hidden}.editor-controls{padding:22px}.editor-controls h2,.send-design h2{font-size:17px;margin:3px 0 17px;color:#252c36}.editor-controls h2:not(:first-child){padding-top:15px;border-top:1px solid #e8e8e8}.editor-controls label{display:block;font-size:13px;font-weight:800;margin:12px 0 6px}.editor-controls input:not([type=color]):not([type=file]),.editor-controls textarea,.editor-controls select{display:block;width:100%;padding:11px;border:1px solid #cbd1d8;border-radius:8px;background:#fff;color:#222}.editor-controls textarea{resize:vertical}.editor-controls input[type=file]{width:100%;font-size:12px;max-width:100%}.controls-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.controls-pair input{display:block;width:100%;height:48px;border:1px solid #cbd1d8;border-radius:6px;cursor:pointer}.hint{font-size:12px;line-height:1.5;color:#66717c;margin:7px 0}.primary{background:#c91629;color:white;border:0;border-radius:8px;padding:12px 15px;font-weight:850;font-size:13px;min-height:45px}.primary:hover{background:#a90b20}.ai-button{width:100%;margin:8px 0}.secondary{background:#26384d;color:#fff;border:0;border-radius:8px;padding:12px 10px;font-size:12px;font-weight:750}.secondary:hover{background:#17283a}.export-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.status{font-size:13px;line-height:1.45;color:#265a3c;font-weight:700;min-height:0}.status.error{color:#a51927}.warning{background:#fff8e7;color:#725b24;padding:10px;font-size:12px;border:1px solid #f0e5c4;border-radius:8px}.preview-heading{padding:17px 20px;border-bottom:1px solid #ebedef;display:flex;align-items:center;justify-content:space-between}.preview-heading strong{display:block;font-size:17px}.preview-heading span:not(.live-pulse){color:#727d88;font-size:12px}.live-pulse{color:#1d9d65}.stage{padding:25px;min-height:390px;background:radial-gradient(circle at 55% 5%,#fff 0%,#f3f5f7 95%);display:flex;align-items:center;justify-content:center}.svg-container{width:min(760px,100%);max-height:480px;display:flex;justify-content:center;align-items:center}.svg-container svg{max-width:100%;max-height:470px;height:auto;box-shadow:0 10px 32px #17273e32;background:white}.size-indicator{text-align:center;color:#606c77;font-size:13px;padding:9px 10px}.preview-note{padding:0 18px 16px;font-size:12px;color:#70757c;margin:0;text-align:center}.send-design{border-top:1px solid #e5e8ea;padding:24px 23px 25px;background:#fdfdfd}.send-design p{color:#5e6874}.send-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.send-grid label{font-size:12px;color:#313a45;font-weight:800}.send-grid input{display:block;width:100%;margin-top:5px;border:1px solid #ccd3d9;border-radius:7px;padding:10px;font-weight:400}.privacy-label{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:#42464d;line-height:1.45;margin:17px 0}.privacy-label input{margin:2px 0;flex:0 0 auto}.send-design .primary{width:100%}.trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px}.editor-seo,.privacy{max-width:1100px;margin:28px auto;padding:0 16px;color:#536070}.editor-seo h2,.privacy h2{color:#2b3641;font-size:20px;margin:0 0 8px}.editor-seo p,.privacy p{font-size:14px}.privacy{padding-bottom:20px}.footer{background:#1b2027;color:white;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:24px max(20px,calc((100vw - 1400px)/2));gap:15px;font-size:13px}.footer a{color:#fff;text-decoration:none}.footer a:hover{text-decoration:underline}@media(max-width:950px){.workspace{grid-template-columns:1fr}.mode strong{font-size:15px}.banner-dots{display:none}}@media(max-width:580px){.app-header{padding:13px}.app-header nav{gap:10px}.app-header nav a{font-size:10px}.brand{font-size:22px}.brand small{font-size:12px}.banner-head{padding:21px 17px;border-radius:0}.banner-head h1{font-size:27px}.layout{padding:10px}.start h2{font-size:21px}.mode-switch{gap:7px}.mode{padding:11px 8px;grid-template-columns:1fr;gap:3px}.mode-icon{grid-row:auto;font-size:25px}.mode strong{font-size:12px}.mode small{font-size:10px}.editor-controls{padding:15px}.stage{min-height:260px;padding:15px}.send-design{padding:16px}.send-grid{grid-template-columns:1fr}.svg-container svg{max-height:330px}.footer{flex-direction:column;text-align:center}}
