:root{--navy:#071322;--card:#102237;--card2:#12263b;--line:#284158;--text:#ecf5fd;--muted:#a2b6c9;--teal:#64dfbe;--blue:#75c7ed;--danger:#ff9e9e;--shadow:0 22px 70px #0004;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--navy)}body{color:var(--text);font:15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse 60% 380px at 65% 0,#153b56 0%,transparent 83%),var(--navy)}button,textarea,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--teal)}[hidden]{display:none!important}.page-width{max-width:1230px;margin:0 auto;padding:0 24px}.topbar{height:75px;border-bottom:1px solid #244157;background:#091726d9}.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff;font-size:21px;letter-spacing:-.04em}.brand b{color:var(--teal)}.brand-symbol{display:grid;place-items:center;width:39px;height:39px;background:linear-gradient(135deg,#5bd4c3,#95ceeb);color:#0a2631;border-radius:11px;font-size:26px;font-weight:900;line-height:1}.header-note{color:#9cb4cb;font-size:12px;display:flex;gap:8px;align-items:center}.sep{opacity:.4}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 9px #57f4b85e}.intro{padding:40px 0 31px}.eyebrow{color:var(--teal);letter-spacing:.17em;font-size:11px;font-weight:800;display:flex;align-items:center;gap:9px}.eyebrow.small{font-size:10px;letter-spacing:.14em}.eyebrow-line{display:inline-block;background:#42716c;width:22px;height:1px}.intro h1{font-size:clamp(34px,4.1vw,52px);font-weight:760;margin:10px 0 8px;line-height:1.13;letter-spacing:-.05em}.intro h1 span{color:var(--teal)}.intro p{margin:0;color:var(--muted);max-width:730px;font-size:16px}.workspace{display:grid;grid-template-columns:minmax(0,1.11fr) minmax(345px,.89fr);gap:22px;align-items:start;padding-bottom:45px}.editor{display:grid;gap:20px}.panel,.preview-panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#102539,#0d1d2f);box-shadow:var(--shadow)}.panel{padding:24px 26px}.panel-title{display:flex;gap:13px;align-items:center;margin-bottom:23px}.panel-title h2,.preview-top h2{font-size:19px;letter-spacing:-.025em;font-weight:740;margin:0}.panel-title p{margin:2px 0 0;color:var(--muted);font-size:12px}.step{height:36px;width:36px;border:1px solid #3d6177;background:#1a3649;border-radius:10px;display:grid;place-items:center;color:#7ce9ca;font-weight:750;font-size:12px}.field{margin-bottom:16px}.field:last-child{margin-bottom:0}label:not(.checklabel,.filedrop),.mini-heading{display:block;font-weight:660;font-size:12px;color:#d3e5f4;margin:0 0 7px}.mini-heading{font-size:11px!important;letter-spacing:.09em;color:#afc5d7!important}.section-gap{margin-top:20px!important}input:not([type=color]):not([type=range]):not([type=file]):not([type=checkbox]),textarea,select{display:block;width:100%;outline:none;border:1px solid #3a566d;border-radius:10px;padding:11px 12px;color:#e9f6ff;background:#0a1929}input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid #6cdbce;outline-offset:2px}textarea{min-height:106px;resize:vertical}.content-fields>label{display:block;font-weight:660;font-size:12px;color:#d3e5f4;margin-bottom:7px}.split{display:grid;grid-template-columns:1fr 1fr;gap:13px}.top-space{margin-top:14px}.checklabel{color:var(--muted);display:flex;align-items:center;gap:8px;font-size:13px}.checklabel input{accent-color:#75dfbe}.choice-set{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.choice{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:1px solid #375067;color:#d7e7f5;background:#0a192a;border-radius:11px;padding:14px 6px 11px;font-size:12px;font-weight:680}.choice.selected{border-color:var(--teal);background:#163d45;color:#b9ffeb}.dot-visual{display:grid;grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px);gap:2px}.dot-visual i{display:block;background:#8ee6cf}.dot-round i{border-radius:3px}.dot-dots i{border-radius:50%}.shape-choice{grid-template-columns:repeat(2,1fr)}.shape-icon{width:24px;height:24px;border:3px solid #84eacb}.icon-square{border-radius:3px}.icon-circle{border-radius:50%}.colors{margin-top:21px;align-items:end}.color-row{height:46px;display:flex;align-items:center;border:1px solid #39566e;background:#0a1929;border-radius:9px;padding:6px 7px;gap:10px}.color-row input[type=color]{width:37px;height:32px;padding:0;border:0;background:transparent;cursor:pointer}.color-row span{font-size:12px;color:#cce1f3;font-family:ui-monospace,Consolas,monospace}.palette{display:flex;gap:10px;margin-top:1px}.swatch{height:25px;width:25px;border:3px solid #fff7;border-radius:50%;background:var(--swatch)}.swatch.active{outline:2px solid var(--teal);outline-offset:3px}.footnote{color:#9cb1c2;font-size:12px;line-height:1.5;margin:10px 0 0}.filedrop{display:flex;align-items:center;gap:15px;border:1px dashed #5a7a8c;border-radius:11px;padding:15px;cursor:pointer;background:#0b1c2b}.filedrop:hover{border-color:var(--teal)}.filedrop strong{display:block;font-size:14px;color:#e5f6fa}.filedrop small{display:block;color:#9cb1c2;font-size:12px}.filedrop input{display:none}.upload-icon{display:grid;place-items:center;background:#1b4150;color:#9aefdb;width:39px;height:39px;border-radius:8px;font-size:27px}.logo-tools{margin-top:15px}.range-line{display:flex;align-items:center;justify-content:space-between}.range-line label{margin:0}.range-line b{color:var(--teal)}.link-button{padding:4px;background:none;border:0;color:#80c9eb;font-size:12px}.logo-tools input[type=range]{width:100%;accent-color:var(--teal);margin:11px 0}.settings-line{margin-top:20px}.preview-panel{padding:24px;position:sticky;top:20px}.preview-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.preview-top h2{margin-top:5px}.live-chip{display:flex;align-items:center;gap:7px;color:#b0dbc9;border:1px solid #315e58;border-radius:99px;padding:5px 10px;font-size:11px;background:#123c3d}.canvas-frame{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;width:100%;max-width:490px;margin:24px auto 17px;background:repeating-conic-gradient(#f6f8fb 0 25%,#e6ebf0 0 50%) 50% / 28px 28px;border-radius:16px;overflow:hidden;padding:14px}.canvas-frame canvas{display:block;width:100%;aspect-ratio:1;object-fit:contain}.meta-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}.meta-row strong{font-size:13px;display:block}.meta-row span:not(.check-glyph){color:var(--muted);display:block;font-size:11px;margin-top:4px}.check-glyph{display:grid;place-items:center;border:1px solid #36786c;background:#0d443d;border-radius:50%;height:30px;width:30px;color:#8cf0d7}.status{min-height:20px;color:#85e6c7;font-size:12px;margin-bottom:13px}.status.error{color:var(--danger)}.button{border:1px solid transparent;border-radius:10px;padding:11px 14px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:750;font-size:13px;min-height:45px}.button.primary{background:linear-gradient(105deg,#65dfbf,#77cdeb);color:#062838}.button.outline{background:#1a3446;border-color:#3c6379;color:#dfedf6}.button.full{width:100%}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}.button.text-button{border:0;background:none;color:#9fc7db;margin:10px auto 0;width:100%;font-size:12px;min-height:29px}.safety-note{border-top:1px solid #2b4458;padding-top:15px;color:#93acbc;font-size:11px;line-height:1.65;margin:14px 0 0}.email-panel{margin-top:15px;border:1px solid #365c6f;background:#0a1b2b;padding:16px;border-radius:11px}.email-panel h3{font-size:15px;margin:0 0 3px}.email-panel>p:first-of-type{font-size:12px;color:var(--muted);margin:0 0 15px}.email-panel textarea{min-height:76px}.email-panel .footnote{min-height:18px}.status+.button{margin-top:0}footer{border-top:1px solid #233b4d;color:#8ca7bb;font-size:12px;padding:21px 0 28px}.footer-inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}@media(max-width:880px){.workspace{grid-template-columns:1fr}.preview-panel{position:static}.canvas-frame{max-width:390px}.header-note{font-size:11px}}@media(max-width:490px){.page-width{padding:0 15px}.topbar{height:64px}.header-note{display:none}.intro{padding:27px 0 24px}.intro p{font-size:14px}.panel,.preview-panel{padding:17px}.split{grid-template-columns:1fr;gap:0}.colors{grid-template-columns:1fr 1fr;gap:9px}.button-row{gap:7px}.button{font-size:12px;padding:9px}.choice{font-size:11px}}
