:root{--ink:#172033;--muted:#64748b;--line:#e2e8f0;--paper:#fff;--wash:#f6f8fb;--accent:#245bca;--accent-light:#edf3ff;--soft:#eff5ff;--error:#b45332;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;color:var(--ink);background:var(--wash);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.48}
button{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #93b5f8;outline-offset:3px}
a{color:var(--accent)}
button svg,.btn svg{width:17px;height:17px;flex-shrink:0}
h1,h2,h3,p{margin:0}
a{text-underline-offset:3px}
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;background:white;padding:12px}
.skip-link:focus{top:16px}
.sidebar{width:218px;background:#ffffff;color:#475569;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:34px 18px 20px;z-index:20}
.brand{display:flex;gap:11px;align-items:center;padding:0 12px 37px}
.brand-mark{display:grid;grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px);gap:4px}
.brand-mark b{border:3px solid var(--accent-light);border-radius:2px}
.brand-mark b:last-child{background:var(--accent-light);width:6px;height:6px;align-self:end;justify-self:end}
.brand-name{font-weight:750;letter-spacing:2.1px;font-size:17px;color:#fff}
.brand-sub{font-size:11px;color:#64748b;letter-spacing:1.7px;margin-top:4px}
.space-label{font-size:10px;letter-spacing:1.8px;color:#64748b;font-weight:650;margin:0 14px 14px}
.nav{display:flex;flex-direction:column;gap:7px}
.nav button{border:0;display:flex;align-items:center;gap:12px;padding:13px 15px;background:transparent;color:#475569;text-align:left;border-radius:7px;font-size:13px;font-weight:550}
.nav button svg{width:18px;height:18px}
.nav button.active{background:var(--accent-light);color:#245bca}
.nav button:hover:not(.active){background:#f1f5f9;color:#fff}
.nav .counter{margin-left:auto;background:#ffffff16;font-size:10px;border-radius:5px;min-width:20px;text-align:center;padding:2px}
.nav .active .counter{background:#245bca15}
.side-bottom{margin-top:auto}
.forever-card{margin:32px 9px 25px;padding:17px 13px;border:1px solid #e2e8f0;border-radius:9px}
.forever-card svg{width:26px;color:var(--accent-light);margin-bottom:12px}
.forever-card strong{display:block;color:#334155;font-size:12px;margin-bottom:6px}
.forever-card p{font-size:11px;color:#64748b;line-height:1.7}
.workspace{display:flex;gap:9px;align-items:center;border-top:1px solid #e2e8f0;padding:19px 10px 0}
.avatar{width:30px;height:30px;border-radius:50%;background:#f0f4fa;color:#506280;display:grid;place-items:center;font-size:11px;font-weight:700}
.workspace strong{display:block;font-size:11px;color:#334155}
.workspace small{font-size:10px;color:#64748b}
.shell{margin-left:218px}
.topbar{height:72px;background:#ffffffb8;border-bottom:1px solid var(--line);padding:0 35px;display:flex;justify-content:space-between;align-items:center;gap:15px}
.breadcrumbs{display:flex;align-items:center;gap:12px;font-size:12px;color:#7c7f83}
.breadcrumbs span:last-child{color:#40454d;font-weight:550}
.breadcrumbs svg{width:13px}
.topright{display:flex;align-items:center;gap:20px}
.private{display:flex;align-items:center;gap:6px;font-size:11px;color:#6e7177}
.private svg{width:13px}
.top-avatar{background:#f0f4fa;width:29px;height:29px;font-size:10px}
.mobile-toggle{display:none;background:none;border:0}
.main{max-width:1550px;margin:auto;padding:35px 35px 28px}
.intro{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:28px}
.eyebrow{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:1.6px;color:#506587;font-weight:700;margin-bottom:10px}
.eyebrow:before{content:'';width:5px;height:5px;background:#5273af;border-radius:50%}
h1{font-size:31px;line-height:1.2;letter-spacing:-1.2px;font-weight:620}
.subtitle{color:var(--muted);font-size:12px;line-height:1.7;margin-top:10px}
.intro .btn{white-space:nowrap}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px;padding:10px 14px;background:white;color:#334155;font-size:12px;font-weight:600;text-decoration:none;line-height:1.4}
.btn:hover{background:#eef0f4}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:#1d4fae}
.btn.soft{background:var(--soft);color:var(--accent);border-color:#d4e1f7}
.btn.danger{color:#b04835}
.btn.icon{padding:8px}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 338px;gap:24px;align-items:start}
.editor{min-width:0}
.card{border:1px solid var(--line);background:white;border-radius:12px;box-shadow:0 2px 3px #232a3702}
.editor-card{padding:23px 25px;margin-bottom:19px}
.section-title{display:flex;gap:10px;align-items:center;margin-bottom:20px}
.section-title h2{font-size:15px;font-weight:650;letter-spacing:-.2px}
.step{width:24px;height:24px;border-radius:6px;background:#eeeff2;color:#616a7a;font-size:10px;font-weight:700;display:grid;place-items:center}
.section-title .caption{margin-left:auto;font-size:10px;color:var(--muted)}
.type-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.type-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:8px;background:#fff;min-height:66px;font-size:10px;color:#75787d;font-weight:550;padding:10px 3px;transition:.15s}
.type-option svg{width:18px;height:18px;stroke-width:1.5}
.type-option:hover{background:#f6f7f9;border-color:#bac0cb}
.type-option.active{border:1.5px solid #4f73bc;background:#f1f5ff;color:#245bca}
.more-types{display:flex;justify-content:center;margin:12px auto 18px;border:0;background:none;color:#7c8087;font-size:10px;gap:5px;align-items:center}
.more-types svg{width:12px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px;min-width:0}
.field:last-child{margin-bottom:0}
.field.full{grid-column:1/-1}
.field label{font-size:11px;font-weight:600;color:#4c5159}
.field input:not([type=checkbox]):not([type=color]):not([type=range]),.field select,.field textarea,.search{width:100%;height:43px;border:1px solid #dddfe3;border-radius:7px;padding:11px 12px;color:#363c46;background:#fff;outline:none;font-size:12px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#628be0;box-shadow:0 0 0 3px #628be020}
.field textarea{height:86px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#9ea1a5}
.input-wrap{position:relative}
.input-wrap input{padding-left:36px!important}
.input-wrap>svg{position:absolute;left:12px;top:13px;width:16px;height:16px;color:#8e9197}
.field-hint{font-size:10px;color:#8c8f94;line-height:1.6}
.form-note{display:flex;align-items:start;gap:6px;font-size:10px;color:#83878e;margin-top:13px;line-height:1.7}
.form-note svg{width:13px;height:13px;margin-top:2px;flex-shrink:0}
.name-field{margin-top:18px;border-top:1px solid #edeef0;padding-top:16px}
.inline-name{display:flex;align-items:center;gap:9px}
.inline-name label{white-space:nowrap;font-size:10px;color:#818488}
.inline-name input{width:100%;border:0;outline:0;border-bottom:1px dashed #dbdee2;padding:5px 0;color:#535964;font-size:11px;background:transparent}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs button{border:0;background:none;padding:0 0 12px;color:#8c8e92;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:550;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button svg{width:14px;height:14px}
.tabs button.active{color:#245bca;border-color:#245bca}
.control-group+.control-group{margin-top:21px}
.control-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;font-weight:600}
.control-title span:last-child{font-size:10px;color:#92969d;font-weight:400}
.shape-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.shape-btn{display:grid;place-items:center;min-width:0;height:46px;border:1px solid #e0e2e6;background:#fff;border-radius:7px;position:relative;padding:8px;color:#40444d}
.shape-btn.active{background:#f0f5ff;border:1.5px solid #4f73bc}
.shape-btn:hover{border-color:#8aa6d9}
.shape-btn svg{width:100%;max-width:34px;height:28px}
.shape-caption{font-size:10px;color:#8d9095;margin-top:8px;line-height:1.6}
.design-tip{border-top:1px solid #ecedef;display:flex;gap:7px;margin-top:23px;padding-top:14px;color:#80858d;font-size:10px;line-height:1.65}
.design-tip svg{width:14px;height:14px;flex-shrink:0}
.preview-column{position:sticky;top:24px}
.preview-card{overflow:hidden;padding:21px 22px 22px}
.preview-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.preview-top h2{font-size:13px;font-weight:650}
.badge{display:inline-flex;gap:5px;align-items:center;padding:5px 7px;border-radius:5px;font-size:9px;letter-spacing:.2px;background:#f2f5f9;color:#52647f;font-weight:600}
.badge svg{width:11px;height:11px}
.preview-mat{min-height:288px;display:flex;justify-content:center;align-items:center;background:#f5f7fa;border-radius:9px;padding:26px;position:relative}
.qr-wrap{width:100%;max-width:264px;filter:drop-shadow(0 8px 9px #373e4b0b);display:flex;justify-content:center;align-items:center}
.qr-wrap svg{width:100%;height:auto;max-height:340px}
.preview-mat.transparent{background-color:white;background-image:linear-gradient(45deg,#e6e7ea 25%,transparent 25%),linear-gradient(-45deg,#e6e7ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e7ea 75%),linear-gradient(-45deg,transparent 75%,#e6e7ea 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.qr-placeholder{text-align:center;color:#848991;font-size:11px;line-height:1.8;padding:24px}
.qr-placeholder svg{width:50px;height:50px;opacity:.5;margin-bottom:15px}
.preview-info{text-align:center;padding:16px 0;border-bottom:1px solid #eaecef}
.preview-info strong{display:block;font-size:12px;font-weight:600;margin-bottom:5px;overflow-wrap:anywhere}
.preview-info span{color:#92969d;font-size:10px}
.quality{display:flex;align-items:center;gap:7px;font-size:10px;color:#345a87;padding:14px 0 6px}
.quality svg{width:14px;height:14px;flex-shrink:0}
.quality.error{color:var(--error)}
.quality.pending{color:#64748b}
.quality-note{font-size:9px;color:#8b8f95;line-height:1.6;margin-bottom:16px}
.download-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}
.download-options .field{margin:0}
.download-options .field select{height:37px;font-size:10px;padding:6px 9px}
.fullwidth{width:100%}
.download-button{height:43px;font-size:12px;margin-bottom:9px}
.save-button{height:39px;font-size:11px}
.preview-foot{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;font-size:9px;color:#9da0a6;margin-top:15px}
.preview-foot span{display:flex;align-items:center;gap:4px}
.preview-foot svg{width:10px;height:10px}
.enduring{padding:17px 7px;display:flex;gap:10px;align-items:flex-start}
.enduring>svg{width:19px;height:19px;color:#7c8390;flex-shrink:0}
.enduring strong{font-size:11px;font-weight:600;color:#5a616e}
.enduring p{font-size:10px;line-height:1.75;color:#92969d;margin-top:5px}
.payload-details{margin-top:8px;border-top:1px solid var(--line);padding:12px 0 0}
.payload-details summary{font-size:10px;cursor:pointer;color:#757c87}
.payload-details pre{font-size:10px;line-height:1.5;background:#f0f2f5;padding:10px;border-radius:6px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:auto}
.page-footer{font-size:9px;display:flex;justify-content:space-between;gap:10px;color:#969aa0;margin-top:22px;border-top:1px solid #e1e3e6;padding-top:17px}
.footer-status{display:flex;gap:6px;align-items:center}
.status-dot{width:5px;height:5px;border-radius:50%;background:#7c879a}
.swatches{display:flex;gap:8px;margin-bottom:18px}
.swatch{width:27px;height:27px;border-radius:50%;border:3px solid white;outline:1px solid #e0e2e5}
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.color-control{display:flex;align-items:center;border:1px solid var(--line);padding:5px;border-radius:7px;gap:8px}
.color-control input[type=color]{border:0;background:none;width:30px;height:30px;padding:0;cursor:pointer}
.color-control input[type=text]{border:0!important;height:30px!important;padding:4px!important;font-size:11px!important;min-width:0}
.toggle{display:flex;align-items:center;gap:8px;font-size:11px;color:#626770;margin-top:14px}
.toggle input{accent-color:#245bca;width:15px;height:15px}
.warning{background:#fff7ed;border:1px solid #f3dfc2;color:#95612e;padding:10px 12px;border-radius:7px;font-size:10px;line-height:1.6;margin-top:12px}
.frame-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.frame-btn{padding:10px 5px 8px;border:1px solid var(--line);border-radius:7px;background:white;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9px;color:#6b717b}
.frame-btn.active{border:1.5px solid #4f73bc;background:#f0f5ff}
.frame-btn>svg{height:64px;width:64px}
.upload-box{border:1px dashed #bacce7;background:#f8faff;border-radius:8px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;gap:9px;cursor:pointer;font-size:11px}
.upload-box svg{width:24px;height:24px;color:#5274a5}
.upload-box small{font-size:10px;color:#92979f}
.upload-box input{width:100%;font-size:10px;margin-top:6px}
.logo-preview{display:flex;align-items:center;gap:16px;padding:15px;background:#f7f9fc;border-radius:8px}
.logo-preview img{width:55px;height:55px;object-fit:contain}
.logo-preview .btn{margin-left:auto}
.logo-presets{display:flex;gap:8px;margin-top:12px}
.logo-presets button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:9px}
.logo-presets button svg{width:21px;height:21px}
.range{width:100%;accent-color:#245bca}
.section-toolbar{display:flex;justify-content:space-between;gap:15px;margin-bottom:22px;align-items:center}
.section-toolbar .actions{display:flex;gap:8px;flex-wrap:wrap}
.search{max-width:290px;background:white}
.library-grid,.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.library-card,.template-card{padding:20px}
.mini-preview{height:200px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#eff1f5;padding:18px;margin-bottom:18px}
.mini-preview svg{max-width:175px;height:100%;width:auto}
.library-card h3,.template-card h3{font-size:14px;margin-bottom:6px;overflow-wrap:anywhere}
.card-meta{font-size:10px;color:#848a93;margin-bottom:17px}
.card-actions{display:flex;gap:6px;justify-content:space-between}
.card-actions .btn{font-size:10px}
.empty{padding:70px 24px;text-align:center;max-width:700px;margin:35px auto}
.empty>svg{width:45px;height:45px;color:#7d8798;margin-bottom:18px}
.empty h2{font-size:21px;margin-bottom:11px}
.empty p{font-size:12px;color:#898e96;line-height:1.8;margin-bottom:24px}
.notice{padding:14px 18px;border-radius:8px;background:#f1f5fc;color:#536782;font-size:11px;line-height:1.7;margin-bottom:22px;display:flex;gap:10px;align-items:flex-start}
.notice svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.guide-card{padding:26px}
.guide-card h2{font-size:17px;letter-spacing:-.3px;margin-bottom:14px}
.guide-card p,.guide-card li{font-size:12px;color:#767b83;line-height:1.9}
.guide-card ul,.guide-card ol{padding-left:19px}
.guide-card.wide{grid-column:1/-1}
.guide-card table{border-collapse:collapse;width:100%;font-size:11px;line-height:1.7}
.guide-card th,.guide-card td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}
.guide-card th{color:#334155;font-weight:600;background:#f7f9fc}
.guide-card td{color:#72767e}
.guide-card .btn{margin-top:15px}
.guide-card .source-list{font-size:11px}
.guide-card code{font-size:10px;background:#f1f5f9;padding:2px 5px}
.help-actions{display:flex;gap:10px;flex-wrap:wrap}
#toast{position:fixed;bottom:24px;left:calc(50% + 100px);transform:translate(-50%,20px);z-index:90;background:#26364e;color:#ffffff;border-radius:10px;padding:12px 20px;box-shadow:0 8px 30px #171c2420;max-width:90vw;font-size:12px;opacity:0;pointer-events:none;transition:.2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
dialog{border:1px solid var(--line);border-radius:14px;padding:28px;max-width:450px;width:90%;color:var(--ink);box-shadow:0 25px 100px #171c2430}
dialog::backdrop{background:#171c2555;backdrop-filter:blur(3px)}
dialog h2{font-size:20px;margin-bottom:13px}
dialog p{font-size:12px;color:#7b7f86;line-height:1.8;margin-bottom:20px}
dialog .actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.busy{cursor:progress}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:1500px){.editor-layout{grid-template-columns:minmax(0,1fr) 380px}
.preview-mat{min-height:330px}
.main{padding:42px 45px}
.editor-card{padding:26px 30px}
.shape-btn{height:54px}
.type-option{min-height:74px}
}

@media(max-width:1200px){.sidebar{width:190px;padding-left:12px;padding-right:12px}
.shell{margin-left:190px}
.main{padding:28px 24px}
.topbar{padding:0 24px}
.editor-layout{grid-template-columns:minmax(0,1fr) 300px;gap:18px}
.editor-card{padding:20px}
.preview-card{padding:18px}
.preview-mat{min-height:255px;padding:22px}
.shape-grid{gap:5px}
.shape-btn{height:41px;padding:5px}
.tabs{gap:17px}
.library-grid,.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
h1{font-size:29px}
}

@media(max-width:1000px){.sidebar{width:172px;padding-left:8px;padding-right:8px}
.shell{margin-left:172px}
.brand{padding-left:10px;gap:8px}
.brand-name{font-size:14px}
.brand-sub{font-size:9px}
.nav button{font-size:11px;padding:12px 10px}
.editor-layout{grid-template-columns:minmax(0,1fr) 280px;gap:16px}
.main{padding:26px 20px}
.editor-card{padding:18px 16px}
.type-grid{gap:5px}
.type-option{font-size:9px}
.tabs{gap:14px}
.tabs button{font-size:10px}
.shape-grid{grid-template-columns:repeat(4,1fr)}
.shape-btn{height:42px}
.forever-card{padding:15px 10px}
.preview-mat{min-height:240px}
.intro .btn{font-size:10px}
.guide-grid{grid-template-columns:1fr}
.guide-card.wide{grid-column:auto}
}

@media(max-width:820px){.sidebar{transform:translateX(-100%);transition:.2s;width:218px;box-shadow:10px 0 50px #181d2633}
.sidebar.open{transform:translateX(0)}
.shell{margin-left:0}
.mobile-toggle{display:inline-flex;align-items:center;margin-right:8px;padding:4px}
.topbar{height:59px;padding:0 20px}
.breadcrumbs{gap:6px}
.private{font-size:10px}
.topright{gap:10px}
.main{padding:26px 20px}
.editor-layout{grid-template-columns:minmax(0,1fr) 290px;gap:17px}
.shape-grid{grid-template-columns:repeat(8,1fr)}
.shape-btn{height:39px}
#toast{left:50%}
.intro{gap:14px}
h1{font-size:28px}
.editor-card{padding:20px}
.section-title .caption{display:none}
.shape-grid{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:650px){.topbar{padding:0 16px}
.breadcrumbs>span:first-of-type{display:none}
.breadcrumbs>svg{display:none}
.private{font-size:9px}
.main{padding:24px 16px}
.intro{align-items:flex-start;flex-direction:column;margin-bottom:23px;gap:15px}
.intro>.btn{position:absolute;right:16px;top:84px;padding:7px 9px;font-size:10px}
.intro .subtitle{max-width:85%;font-size:11px}
.eyebrow{font-size:8px;margin-bottom:13px}
h1{font-size:28px;letter-spacing:-1px;max-width:310px}
.editor-layout{grid-template-columns:1fr}
.preview-column{position:static}
.editor-card{padding:20px;margin-bottom:16px}
.section-title{margin-bottom:18px}
.type-option{font-size:9px;min-height:64px}
.more-types{font-size:10px}
.shape-grid{grid-template-columns:repeat(8,1fr)}
.shape-btn{height:41px;padding:5px}
.tabs{justify-content:space-between;gap:8px}
.tabs button{font-size:11px}
.preview-card{padding:23px}
.preview-mat{min-height:290px;padding:25px}
.qr-wrap{max-width:245px}
.library-grid,.template-grid{grid-template-columns:1fr}
.section-toolbar{align-items:stretch;flex-direction:column}
.section-toolbar .search{max-width:100%}
.library-card,.template-card{padding:23px}
.guide-card{padding:21px}
.guide-card.wide{overflow:auto}
.guide-card table{font-size:10px;min-width:400px}
.page-footer{flex-direction:column;line-height:1.7;margin-top:10px}
.field-grid{gap:10px}
.preview-info{padding:18px 0}
.guide-grid{gap:16px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}


.download-ready{position:fixed;right:24px;bottom:24px;width:250px;padding:18px;border:1px solid #d8e1ef;border-radius:10px;background:white;box-shadow:0 8px 35px #1d232d22;z-index:80}
.download-ready[hidden]{display:none}
.download-ready strong{font-size:12px;display:block;margin-bottom:6px}
.download-ready span{font-size:10px;color:#7c828c;overflow-wrap:anywhere;display:block;padding-right:15px}
.download-ready a{display:flex;align-items:center;justify-content:center;gap:7px;background:#245bca;color:white;border-radius:6px;text-decoration:none;padding:10px;margin-top:14px;font-size:12px}
.download-ready a svg{width:15px;height:15px}
.close-download{position:absolute;right:9px;top:9px;border:0;background:none;padding:3px;color:#8b919b}
.close-download svg{width:14px;height:14px}
@media(max-width:650px){.download-ready{bottom:18px;right:16px;max-width:calc(100% - 32px)}
}


/* White surfaces, restrained blue actions, and readable control states. */
.sidebar{border-right:1px solid var(--line);background:#fff;color:#475569}
.brand-name{color:#1e293b}
.brand-mark b{border-color:var(--accent)}
.brand-mark b:last-child{background:var(--accent)}
.nav button:hover:not(.active){background:#f3f6fa;color:#1e293b}
.nav .counter{background:#edf1f6;color:#52647e}
.nav .active .counter{background:#dce8ff;color:#245bca}
.forever-card{background:#f8fafc}
.workspace strong{color:#334155}
.topbar{background:#fff}
.breadcrumbs,.private,.brand-sub,.space-label{color:#64748b}
.breadcrumbs span:last-child{color:#334155}
.btn,.nav button,.tabs button,.more-types,.logo-presets button{min-height:44px}
.btn.icon,.mobile-toggle,.logo-presets button{min-width:44px;min-height:44px}
.btn.icon{flex-shrink:0}
.btn:hover{background:#f5f7fb}
.btn.primary:hover{background:#1d4fae}
.btn.soft:hover{background:#e6efff}
.field label,.control-title{font-size:12px;color:#334155}
.field-hint,.form-note,.shape-caption,.design-tip,.quality-note,.card-meta,.inline-name label,.preview-info span,.preview-foot,.page-footer,.enduring p{font-size:11px;color:#64748b;line-height:1.7}
.section-title .caption,.control-title span:last-child{font-size:11px;color:#64748b}
.field input:not([type=checkbox]):not([type=color]):not([type=range]),.field select,.field textarea,.search{min-height:44px;color:#334155;border-color:#d8e0eb}
.field input::placeholder,.field textarea::placeholder{color:#7b8799}
.input-wrap>svg{color:#74839b}
.inline-name input{color:#475569;min-height:36px}
.inline-name input:focus-visible{outline:2px solid #93b5f8;outline-offset:3px;border-radius:3px}
.tabs button{font-size:12px;color:#64748b}
.tabs button.active{color:#245bca;border-color:#245bca}
.type-option{min-width:0;font-size:11px;color:#526174}
.type-option span{white-space:nowrap}
.more-types{font-size:11px;color:#64748b;margin:8px auto 14px}
.shape-btn{min-height:44px;color:#334155}
.shape-btn.active{background:#f0f5ff;border-color:#4f73bc}
.shape-grid{gap:8px}
.step{color:#426695;background:#f0f5ff}
.preview-mat,.mini-preview{background:#f5f7fa}
.preview-mat.transparent{background-color:#fff;background-image:linear-gradient(45deg,#e7eaf0 25%,transparent 25%),linear-gradient(-45deg,#e7eaf0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7eaf0 75%),linear-gradient(-45deg,transparent 75%,#e7eaf0 75%)}
.preview-info strong{font-size:13px}
.quality{font-size:12px;line-height:1.55;color:#345a87;align-items:flex-start}
.quality svg{margin-top:2px}
.quality-note{margin-bottom:15px}
.quality-actions{display:grid;gap:8px;margin:12px 0 16px}
.quality-actions[hidden]{display:none}
.quality-actions .btn{white-space:normal}
.optimization-note{margin:10px 0;padding:10px 12px;border-left:3px solid #7197db;background:#f2f6fd;border-radius:5px;font-size:11px;line-height:1.7;color:#475569}
.download-options .field select{height:44px;font-size:11px}
.download-button,.save-button{min-height:44px}
.preview-foot svg{color:#74839b}
.enduring strong{color:#52647f}
.enduring>svg{color:#6b83a8}
.payload-details summary{font-size:11px;color:#52647f;min-height:32px}
.payload-details pre{background:#f3f6fa;color:#475569}
.swatches{gap:9px;flex-wrap:wrap}
.swatch{width:36px;height:36px;border-width:5px}
.color-control input[type=color]{width:36px;height:36px}
.toggle{min-height:38px;color:#526174;font-size:12px}
.toggle input{accent-color:var(--accent);width:17px;height:17px}
.range{min-height:36px;accent-color:var(--accent)}
.warning{font-size:11px;color:#8b5b25}
.frame-btn{font-size:11px;color:#526174}
.upload-box{font-size:12px;color:#334155}
.upload-box small,.upload-box input{font-size:11px;color:#64748b}
.card-actions .btn{font-size:11px}
.empty p,.guide-card p,.guide-card li,.guide-card td,dialog p{color:#64748b}
.notice{font-size:12px}
.download-ready{border-color:#d8e1ef;box-shadow:0 8px 35px #182b4920;width:280px}
.download-ready strong{font-size:13px}
.download-ready span{font-size:11px;color:#64748b}
.download-ready a{min-height:44px;background:#245bca}
.close-download{min-width:36px;min-height:36px;color:#64748b}
@media(max-width:1100px){.type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.type-option{font-size:11px;min-height:68px}}
@media(max-width:820px){.shape-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.topbar{min-height:64px}.mobile-toggle{padding:10px;margin-left:-10px}.breadcrumbs{min-width:0}.private{font-size:10px}}
@media(max-width:650px){
 .intro>.btn{position:static;padding:10px 14px;font-size:12px}
 .intro .subtitle{max-width:100%;font-size:12px}
 .eyebrow{font-size:10px}
 .type-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .type-option{font-size:12px;min-height:70px}
 .shape-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
 .shape-btn{height:48px}
 .tabs{gap:6px}.tabs button{font-size:12px;gap:5px}
 .private{font-size:10px}.topright{gap:6px}
 .field input:not([type=checkbox]):not([type=color]):not([type=range]),.field select,.field textarea,.search{font-size:16px}
 .download-options .field select{font-size:12px}
 .color-control input[type=text]{font-size:14px!important}
 .field-grid{grid-template-columns:1fr}
 .swatch{width:38px;height:38px}
 .section-title h2{font-size:15px}
 .preview-foot{font-size:11px}
 .page-footer{font-size:10px}
 .guide-card table{font-size:11px}
}
.forever-card svg{color:#5276b0}
.quality.pending{color:#64748b}