:root{--studio-navy:#102c40;--studio-blue:#0879e8;--studio-ink:#173245;--studio-muted:#687f8e;--studio-line:#d8e5ed;--studio-soft:#eef6fb;--studio-green:#0ca65a;--studio-shadow:0 22px 60px rgba(24,62,86,.12)}
.designer-page{background:#edf4f8;color:var(--studio-ink)}
.designer-hero{position:relative;overflow:hidden;border-bottom:1px solid #d9e6ee;background:linear-gradient(115deg,#f8fbfd 0,#eef7fd 58%,#dbeaf5 58%,#e9f3f9 100%)}
.designer-hero:before{position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(8,121,232,.12),transparent 27%),linear-gradient(135deg,transparent 42%,rgba(255,255,255,.7) 42%,rgba(255,255,255,.7) 47%,transparent 47%);content:""}
.designer-hero-inner{position:relative;display:flex;align-items:end;justify-content:space-between;gap:40px;max-width:1460px;padding-top:54px;padding-bottom:54px}.designer-breadcrumb{display:flex;gap:8px;align-items:center;margin-bottom:20px;color:#758b99;font-size:.76rem}.designer-breadcrumb a{color:#0b70ae}.designer-kicker{margin:0 0 14px;color:#0c6da4;font-size:.72rem;font-weight:850;letter-spacing:.16em}.designer-hero h1{margin:0;color:#102a3c;font-size:clamp(2.8rem,5.2vw,5.1rem);line-height:.93;letter-spacing:-.06em}.designer-hero h1 em{color:var(--studio-blue);font-style:normal}.designer-hero div>p:last-child{max-width:690px;margin:22px 0 0;color:#526b7a;font-size:1.04rem;line-height:1.65}.hero-proof{display:grid;flex:0 0 290px;gap:10px;padding:18px;border:1px solid rgba(255,255,255,.8);border-radius:16px;background:rgba(255,255,255,.58);box-shadow:0 18px 50px rgba(20,67,95,.08);backdrop-filter:blur(10px)}.hero-proof span{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.72);color:#4b6576;font-size:.76rem}.hero-proof b{min-width:52px;color:#0879e8;font-size:.9rem}
.designer-workspace{padding:38px 20px 70px;background:linear-gradient(180deg,#eef6fb,#f8fafc 70%)}.designer-shell{max-width:1720px;margin:auto;border:1px solid #ccdde7;border-radius:22px;background:#fff;box-shadow:var(--studio-shadow);overflow:hidden}.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid #dce7ed;background:#fbfdfe}.workspace-head>div{display:flex;align-items:center;gap:13px}.workspace-number{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#e5f2ff;color:#0879e8;font-size:.8rem;font-weight:850}.workspace-head p{margin:0;color:#758997;font-size:.66rem;font-weight:800;letter-spacing:.12em}.workspace-head h2{margin:2px 0 0;color:#183245;font-size:1.15rem}.workspace-head>p{display:flex;align-items:center;gap:8px;letter-spacing:0}.status-dot{width:8px;height:8px;border-radius:50%;background:#16b869;box-shadow:0 0 0 5px rgba(22,184,105,.1)}
.designer-grid{display:grid;grid-template-columns:380px minmax(520px,1fr) 300px;min-height:780px}.control-panel{overflow:auto;max-height:calc(100vh - 100px);border-right:1px solid #dce7ed;background:#fbfdfe;scrollbar-width:thin}.control-section{padding:21px 22px;border-bottom:1px solid #e3ebf0}.control-heading{display:flex;align-items:center;gap:11px;margin-bottom:16px}.control-heading>span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#e6f2fd;color:#0879e8;font-size:.72rem;font-weight:850}.control-heading h3{margin:0;color:#183245;font-size:.9rem}.control-heading p{margin:2px 0 0;color:#82939f;font-size:.66rem}.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.model-card{display:flex;min-width:0;gap:9px;align-items:center;padding:9px;border:1px solid #d8e3e9;border-radius:10px;background:#fff;color:#314b5c;text-align:left;cursor:pointer;transition:.18s}.model-card:hover{border-color:#9cc8e8;transform:translateY(-1px)}.model-card.selected{border-color:#0879e8;background:#eff7ff;box-shadow:0 0 0 2px rgba(8,121,232,.08)}.model-card span{display:grid;min-width:0;gap:2px}.model-card b{font-size:.68rem;line-height:1.2}.model-card small{color:#7c909c;font-size:.58rem}.model-icon{display:grid;flex:0 0 37px;place-items:center;width:37px;height:37px;border-radius:8px;background:#152d40;color:#eaf8ff;font:900 1.2rem Arial,sans-serif;font-style:normal;text-shadow:0 0 8px #65d7ff}.model-icon-silver{background:linear-gradient(145deg,#eff3f5,#65717a);color:#fff;text-shadow:0 2px 7px #fff}.model-icon-gold{background:linear-gradient(145deg,#f6db88,#9d6810);color:#fff7cf;text-shadow:0 2px 8px #ffef9d}.model-icon-panel{border:4px solid #20394c;background:#f0f5f7;color:#1e3444;text-shadow:none}.model-icon-box{border:3px solid #ccefff;background:#0e3149;box-shadow:inset 0 0 10px #67d9ff;color:#fff;text-shadow:0 0 8px #fff}.model-icon-flat{background:#e5e9ec;color:#273c4b;text-shadow:none}
.field{display:grid;position:relative;gap:6px;margin-top:11px;color:#385364;font-size:.69rem;font-weight:750}.field input[type=text],.field input[type=number],.field select{width:100%;height:43px;padding:0 11px;border:1px solid #ccdbe4;border-radius:8px;background:#fff;color:#173245;font:650 .78rem Inter,Arial,sans-serif;outline:none}.field input:focus,.field select:focus{border-color:#0879e8;box-shadow:0 0 0 3px rgba(8,121,232,.1)}.field input[type=range]{width:100%;accent-color:#0879e8}.field output{position:absolute;right:2px;top:0;color:#0879e8;font-size:.64rem}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.unit-input{position:relative}.unit-input input{padding-right:40px!important}.unit-input b{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#82939f;font-size:.62rem}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.color-field{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px;border:1px solid #d8e3e9;border-radius:9px;background:#fff;color:#567080;font-size:.6rem}.color-field input{grid-row:1/3;width:32px;height:32px;padding:0;border:0;background:transparent;cursor:pointer}.color-field b{color:#294555;font-size:.6rem}.upload-grid{display:grid;margin-top:12px}.upload-box{display:flex;align-items:center;gap:10px;padding:13px;border:1px dashed #a9c9dc;border-radius:10px;background:#f5faff;color:#2e536b;cursor:pointer}.upload-box:hover{border-color:#0879e8;background:#edf7ff}.upload-box input{position:absolute;width:1px;height:1px;opacity:0}.upload-box>span{display:grid;flex:0 0 35px;place-items:center;width:35px;height:35px;border-radius:9px;background:#dfefff;color:#0879e8;font-size:1.1rem}.upload-box b{font-size:.71rem}.upload-box small{margin-left:auto;color:#7a8e9a;font-size:.56rem}.upload-wide{margin-top:0}.remove-upload{margin:8px 0 0;padding:8px;border:0;border-radius:7px;background:#fff1f1;color:#a63232;font-size:.65rem;font-weight:750;cursor:pointer}.remove-upload[hidden]{display:none}
.layer-workspace{margin-top:15px;padding-top:14px;border-top:1px solid #e2ebf0}.layer-bar{display:flex;align-items:center;justify-content:space-between}.layer-bar strong,.perspective-panel>strong{color:#274657;font-size:.7rem}.layer-bar button,.perspective-presets button,.layer-actions button{padding:7px 7px;border:1px solid #cbdce6;border-radius:7px;background:#fff;color:#356078;font-size:.56rem;font-weight:800;cursor:pointer}.layer-list{display:grid;gap:6px;margin-top:9px}.layer-item{display:grid;grid-template-columns:26px 1fr auto;gap:7px;align-items:center;width:100%;padding:8px;border:1px solid #d9e5eb;border-radius:8px;background:#fff;color:#385364;text-align:left;cursor:pointer}.layer-item.selected{border-color:#0879e8;background:#eff7ff;box-shadow:0 0 0 2px rgba(8,121,232,.07)}.layer-item i{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#e7f2f9;color:#0879e8;font-size:.65rem;font-style:normal;font-weight:900}.layer-item b{overflow:hidden;font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}.layer-item small{color:#80939e;font-size:.52rem}.layer-editor{margin-top:10px;padding:10px;border:1px solid #dbe7ed;border-radius:9px;background:#f8fbfd}.layer-editor.disabled{opacity:.56;pointer-events:none}.layer-style-row{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;align-items:end;margin-top:10px}.layer-style-row>label{display:grid;gap:5px;color:#385364;font-size:.6rem;font-weight:750}.layer-style-row input[type=color]{width:100%;height:34px;padding:2px;border:1px solid #ccdbe4;border-radius:7px;background:#fff}.check-field{display:flex!important;grid-template-columns:17px 1fr!important;align-items:center!important;height:34px;padding:0 8px;border:1px solid #d9e5eb;border-radius:7px;background:#fff}.check-field input{accent-color:#0879e8}.layer-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px}.layer-actions button:last-child{border-color:#f0c8c8;color:#a23838}.perspective-panel{margin-top:13px;padding:12px;border:1px solid #d7e6ee;border-radius:10px;background:#f4f9fc}.perspective-panel p{margin:5px 0 10px;color:#728792;font-size:.59rem;line-height:1.45}.perspective-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.layer-add-actions{display:flex;gap:4px}.layer-add-actions button{white-space:nowrap}.ledbox-upload{padding:13px;border:1px solid #b9d8e9;border-radius:11px;background:#f1f9fd}.ledbox-upload>p{margin:0 0 10px;color:#527081;font-size:.64rem;line-height:1.5}.shape-controls{margin-top:10px;padding:9px;border:1px solid #dce8ee;border-radius:8px;background:#fff}.shape-controls input[type=color]{width:100%;height:38px;padding:2px;border:1px solid #ccdbe4;border-radius:7px;background:#fff}.panel-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid #d6e4eb;border-radius:10px;background:#f5f9fb}.panel-choice>span{color:#314e60;font-size:.66rem;font-weight:800}.panel-choice>div{display:flex;padding:3px;border-radius:8px;background:#e7eff4}.panel-choice button{padding:7px 8px;border:0;border-radius:6px;background:transparent;color:#647d8c;font-size:.57rem;font-weight:800;cursor:pointer}.panel-choice button.active{background:#0879e8;color:#fff;box-shadow:0 3px 10px rgba(8,121,232,.2)}.dimension-help{margin:8px 2px 0;color:#708691;font-size:.58rem;line-height:1.45}.field[hidden],.layer-style-row[hidden],.shape-controls[hidden],.ledbox-upload[hidden],.layer-workspace[hidden],#letter-design-controls[hidden],.panel-choice[hidden],.color-field[hidden]{display:none!important}
.preview-panel{display:flex;min-width:0;flex-direction:column;background:#eaf1f5}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #d5e2e9;background:#fff}.view-switch,.editor-tools{display:flex;padding:3px;border-radius:9px;background:#edf3f6}.view-switch button,.editor-tools button,.preview-actions button{border:0;background:transparent;color:#5a7180;font:700 .62rem Inter,Arial,sans-serif;cursor:pointer}.view-switch button,.editor-tools button{padding:8px 9px;border-radius:7px}.view-switch button.active,.editor-tools button.active{background:#16364b;color:#fff;box-shadow:0 3px 10px rgba(14,45,65,.2)}.preview-actions{display:flex;gap:4px}.preview-actions button{padding:8px;border:1px solid #d8e3e9;border-radius:8px;background:#fff}.preview-actions button.active{border-color:#0879e8;background:#edf7ff;color:#0879e8}.preview-actions button:disabled{opacity:.38;cursor:not-allowed}.canvas-stage{position:relative;display:grid;flex:1;min-height:480px;place-items:center;overflow:hidden;background:#dfe8ed;touch-action:none}.canvas-stage canvas{display:block;width:100%;height:auto;max-height:calc(100vh - 210px);object-fit:contain;cursor:grab}.canvas-stage canvas.dragging{cursor:grabbing}.canvas-stage[data-tool=perspective] canvas{cursor:crosshair}.canvas-tip{position:absolute;bottom:17px;left:50%;padding:8px 12px;border-radius:99px;background:rgba(8,26,39,.76);color:#fff;font-size:.64rem;transform:translateX(-50%);backdrop-filter:blur(8px);transition:.25s;pointer-events:none}.canvas-tip.hide{opacity:0;transform:translate(-50%,10px)}.preview-badge{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:7px;background:rgba(255,255,255,.85);color:#2b4a5c;font-size:.58rem;font-weight:850;letter-spacing:.08em;backdrop-filter:blur(7px)}.preview-badge span{width:7px;height:7px;border-radius:50%;background:#16b869;box-shadow:0 0 0 4px rgba(22,184,105,.13)}.scale-readout{position:absolute;top:14px;right:14px;padding:7px 10px;border-radius:7px;background:rgba(8,26,39,.76);color:#fff;font-size:.62rem;font-weight:750;backdrop-filter:blur(7px)}.preview-note{display:flex;gap:10px;align-items:flex-start;padding:13px 17px;border-top:1px solid #d5e2e9;background:#fff}.preview-note span{display:grid;flex:0 0 22px;place-items:center;width:22px;height:22px;border-radius:50%;background:#e5f2ff;color:#0879e8;font-size:.68rem;font-weight:850}.preview-note p{margin:1px 0 0;color:#708591;font-size:.63rem;line-height:1.5}
.summary-panel{padding:23px 20px;border-left:1px solid #dce7ed;background:#fff}.summary-head{position:relative;padding-bottom:16px;border-bottom:1px solid #e1e9ee}.summary-head p{margin:0 0 4px;color:#0879e8;font-size:.61rem;font-weight:850;letter-spacing:.13em}.summary-head h2{margin:0;color:#173245;font-size:1.25rem}.summary-head>span{position:absolute;right:0;bottom:18px;padding:5px 7px;border-radius:99px;background:#f0f4f6;color:#7a8d98;font-size:.55rem}.summary-head>span.saved{background:#e5f8ee;color:#0a8b4a}.design-summary{margin:14px 0}.design-summary div{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #edf2f5}.design-summary dt{color:#768a96;font-size:.64rem}.design-summary dd{margin:0;color:#243f50;font-size:.66rem;font-weight:800;text-align:right}.design-summary div:first-child dd{color:#0879e8;font-family:Consolas,monospace;letter-spacing:.04em}.estimate-box{display:grid;gap:4px;padding:15px;border:1px solid #cfe3f1;border-radius:12px;background:linear-gradient(135deg,#edf8ff,#f8fcff)}.estimate-box span{color:#567383;font-size:.63rem}.estimate-box strong{color:#0879e8;font-size:1.35rem;letter-spacing:-.02em}.estimate-box small{color:#7a8f9b;font-size:.56rem;line-height:1.4}.quality-list{display:grid;gap:8px;margin:15px 0}.quality-list p{margin:0;color:#526b79;font-size:.66rem}.quality-list span{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:#e6f8ef;color:#0aa058;font-size:.57rem}.primary-action{display:grid;width:100%;grid-template-columns:35px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:13px;border:0;border-radius:10px;background:linear-gradient(135deg,#0879e8,#0865bf);color:#fff;text-align:left;box-shadow:0 10px 24px rgba(8,121,232,.24);cursor:pointer}.primary-action:hover{filter:brightness(1.05)}.primary-action>span{display:grid;grid-row:1/3;place-items:center;width:35px;height:35px;border-radius:8px;background:rgba(255,255,255,.16);font-size:1rem}.primary-action b{font-size:.76rem}.primary-action small{color:#cfe7ff;font-size:.56rem}.pdf-action{margin-top:8px;background:linear-gradient(135deg,#173c55,#102c40);box-shadow:0 10px 24px rgba(16,44,64,.18)}.pdf-action>span{font-size:.58rem;font-weight:900}.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.secondary-actions button{padding:10px;border:1px solid #d2dfe7;border-radius:8px;background:#fff;color:#3a5667;font-size:.63rem;font-weight:750;cursor:pointer}.quote-link{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:12px;border-radius:9px;background:#0aa65a;color:#fff;font-size:.69rem;font-weight:800}.watermark-info{display:flex;gap:7px;margin:12px 0 0;color:#7a8e99;font-size:.57rem;line-height:1.45}.watermark-info span{color:#0879e8}.designer-toast{position:fixed;z-index:1000;right:20px;bottom:20px;max-width:340px;padding:12px 16px;border-radius:10px;background:#102c40;color:#fff;font-size:.72rem;box-shadow:0 15px 40px rgba(0,0,0,.2);opacity:0;transform:translateY(15px);transition:.25s;pointer-events:none}.designer-toast.show{opacity:1;transform:none}
.designer-content{padding:75px 0 90px;background:#fff}.designer-content header{max-width:780px;margin:0 auto 35px;text-align:center}.designer-content header>p{margin:0 0 10px;color:#0879e8;font-size:.69rem;font-weight:850;letter-spacing:.14em}.designer-content h2{margin:0;color:#173245;font-size:clamp(2rem,3vw,3rem);letter-spacing:-.04em}.designer-content header>span{display:block;margin-top:14px;color:#657d8c;line-height:1.65}.designer-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.designer-steps article,.designer-seo-grid article{padding:23px;border:1px solid #dce7ed;border-radius:14px;background:#fbfdfe}.designer-steps b{color:#0879e8;font-size:.7rem}.designer-steps h3,.designer-seo-grid h3{margin:13px 0 8px;color:#1c394b;font-size:.9rem}.designer-steps p,.designer-seo-grid p{margin:0;color:#687f8e;font-size:.73rem;line-height:1.65}.designer-seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:13px}.designer-seo-grid a{display:inline-block;margin-top:13px;color:#0879e8;font-size:.68rem;font-weight:800}
.canvas-stage:fullscreen{background:#0c1f2c}.canvas-stage:fullscreen canvas{max-height:100vh}.canvas-stage:fullscreen .canvas-tip{bottom:24px}
@media(max-width:1280px){.designer-grid{grid-template-columns:340px minmax(480px,1fr) 270px}.model-card{padding:7px}.summary-panel{padding:20px 16px}}
@media(max-width:1050px){.designer-grid{grid-template-columns:340px 1fr}.summary-panel{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;border-top:1px solid #dce7ed;border-left:0}.summary-panel>*{align-self:start}.summary-head,.design-summary{grid-row:span 2}.estimate-box{margin-top:0}.watermark-info{grid-column:2/-1}.control-panel{max-height:none}.canvas-stage canvas{max-height:none}.editor-tools button{font-size:0}.editor-tools button:first-letter{font-size:.72rem}}
@media(max-width:760px){.designer-hero-inner{display:block;padding:36px 20px}.designer-hero h1{font-size:clamp(2.65rem,13vw,3.65rem)}.hero-proof{display:none}.designer-workspace{padding:18px 0 45px}.designer-shell{border-right:0;border-left:0;border-radius:0}.workspace-head{padding:15px 16px}.workspace-head>p{display:none}.designer-grid{display:flex;flex-direction:column}.control-panel{order:2;border-right:0}.preview-panel{order:1;position:sticky;z-index:5;top:0}.summary-panel{order:3;display:block;padding:20px}.canvas-stage{min-height:260px}.preview-toolbar{padding:7px 8px;flex-wrap:wrap}.editor-tools{order:3;width:100%}.editor-tools button{flex:1;font-size:.58rem}.preview-actions span{display:none}.canvas-tip{bottom:10px;max-width:88%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.preview-note{display:none}.control-section{padding:20px 16px}.model-grid{grid-template-columns:repeat(2,1fr)}.upload-box{align-items:flex-start}.upload-box small{display:none}.designer-content{padding:52px 16px 65px}.designer-steps,.designer-seo-grid{grid-template-columns:1fr}.designer-content header{text-align:left}.designer-toast{right:12px;bottom:12px;left:12px;max-width:none}}
@media(max-width:390px){.model-grid{grid-template-columns:1fr}.two-fields,.color-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.model-card,.designer-toast,.canvas-tip{transition:none!important}}