:root{
  --bg:#eef1f5;--panel:#fff;--ink:#151820;--muted:#6f7684;--line:#dfe3e9;
  --brand:#ff5a1f;--brand2:#ff7a00;--dark:#101217;--good:#21a366;--warn:#e69b00;--bad:#d64545;
  --shadow:0 16px 40px rgba(16,18,23,.10);--radius:16px;--top:68px;--left:78px;--tool:318px;--right:298px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);overflow:hidden}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app-shell{height:100%;display:grid;grid-template-columns:var(--left) var(--tool) 1fr var(--right);grid-template-rows:var(--top) 1fr;grid-template-areas:"top top top top" "rail tools work right"}
.topbar{grid-area:top;background:var(--dark);color:#fff;display:grid;grid-template-columns:260px 1fr auto;align-items:center;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);z-index:20}
.brand{display:flex;align-items:baseline;gap:10px}.brand-mark{font-size:24px;font-weight:950;letter-spacing:-1.7px}.brand-mark span{color:var(--brand)}.brand-sub{font-size:10px;letter-spacing:3px;color:#a8afb9;font-weight:800}
.topbar-center{justify-self:center;display:flex;align-items:center;gap:5px}.topbar-actions{display:flex;align-items:center;gap:10px}.save-state{font-size:12px;color:#aab0ba;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.zoom-label{font-size:11px;color:#c6cbd4;width:50px;text-align:center}
.icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:800}.topbar .icon-btn{background:#1b1f28;border-color:#303642;color:#fff}.icon-btn:hover{transform:translateY(-1px)}.icon-btn.danger{color:var(--bad)}
.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:800;background:#eceff3;color:var(--ink);transition:.15s}.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;box-shadow:0 8px 18px rgba(255,90,31,.25)}.btn-ghost{background:transparent;color:#fff;border:1px solid #3b414d}.btn-wide{width:100%;padding:12px 15px}
.left-rail{grid-area:rail;background:#181b22;border-right:1px solid #282d36;display:flex;flex-direction:column;align-items:center;padding:10px 7px;gap:7px;z-index:10}.rail-btn{width:64px;min-height:60px;border:0;background:transparent;color:#8f97a5;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.rail-btn span{font-size:20px;font-weight:900}.rail-btn small{font-size:10px}.rail-btn:hover,.rail-btn.active{background:#272c36;color:#fff}.rail-btn.active{box-shadow:inset 3px 0 0 var(--brand)}
.tool-panel{grid-area:tools;background:var(--panel);border-right:1px solid var(--line);overflow:auto;position:relative;z-index:9}.tool-section{display:none;padding:22px 20px 30px}.tool-section.active{display:block}.panel-heading{display:flex;justify-content:space-between;align-items:start;margin-bottom:18px}.panel-heading h2{margin:2px 0 0;font-size:21px;letter-spacing:-.5px}.eyebrow{text-transform:uppercase;letter-spacing:1.6px;font-size:9px;font-weight:900;color:var(--brand)}.panel-copy{font-size:13px;line-height:1.55;color:var(--muted);margin:-6px 0 18px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.field>span,.palette-row label>span{font-size:11px;font-weight:800;color:#565d69}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 11px;outline:none;color:var(--ink)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,90,31,.10)}.field input:disabled{background:#f3f4f6;color:#9aa0aa}.size-grid,.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.size-grid .field,.form-grid .field{margin-bottom:8px}
.product-summary{background:#f6f7f9;border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:14px}.product-summary b{display:block;font-size:14px}.product-summary span{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:4px}.product-summary em{display:inline-block;margin-top:8px;font-size:10px;font-style:normal;padding:4px 7px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.switch-row{display:flex;gap:10px;align-items:flex-start;margin:10px 0 16px;cursor:pointer}.switch-row input{margin-top:3px}.switch-row span{display:flex;flex-direction:column;gap:2px}.switch-row b{font-size:12px}.switch-row small{font-size:10px;color:var(--muted);line-height:1.35}
.palette-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.palette-row label{display:flex;flex-direction:column;gap:6px}.palette-row input{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;padding:4px;background:white}.layout-choices{display:grid;gap:8px;margin-top:12px}.layout-choice{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px;text-align:left}.layout-choice b{display:block;font-size:12px}.layout-choice span{font-size:10px;color:var(--muted)}
.text-preset{width:100%;border:1px solid var(--line);background:white;border-radius:11px;text-align:left;padding:12px;margin-bottom:8px}.text-preset:hover{border-color:var(--brand)}.text-preset.hero{font-size:19px;font-weight:950}.text-preset.sub{font-size:15px;font-weight:800}.text-preset.body{font-size:12px}.text-preset.badge{font-size:12px;font-weight:900;color:var(--brand)}hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.upload-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px dashed #cdd2da;border-radius:14px;min-height:150px;background:#fafbfc;cursor:pointer;padding:20px}.upload-drop.drag{border-color:var(--brand);background:#fff5ef}.upload-drop input{display:none}.upload-drop strong{font-size:13px}.upload-drop span{font-size:10px;color:var(--muted);margin-top:6px}.upload-progress{height:6px;border-radius:999px;background:#eceef2;margin:10px 0;overflow:hidden}.upload-progress span{display:block;height:100%;width:35%;background:var(--brand);animation:progress 1.2s infinite}@keyframes progress{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.asset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.asset{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;position:relative}.asset button{border:0;background:transparent;width:100%;padding:0}.asset-preview{height:82px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;overflow:hidden}.asset-preview img{max-width:100%;max-height:100%;object-fit:contain}.asset-meta{padding:7px;text-align:left}.asset-meta b{font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-meta span{font-size:9px;color:var(--muted)}.fineprint{font-size:10px;line-height:1.45;color:var(--muted)}
.element-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.element-grid button{min-height:72px;border:1px solid var(--line);background:#fff;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:11px}.element-grid button:hover{border-color:var(--brand)}.shape{display:block}.shape.rect{width:26px;height:18px;background:#1d2027}.shape.circle{width:22px;height:22px;background:#1d2027;border-radius:50%}.shape.line{width:28px;height:3px;background:#1d2027;transform:rotate(-18deg)}.shape.star,.shape.arrow,.shape.qr{font-size:23px}.qr-box{margin-top:12px;padding:12px;border-radius:12px;background:#f6f7f9}
.selection-editor{font-size:12px}.muted-box{color:var(--muted);background:#f6f7f9;border-radius:11px;padding:13px;line-height:1.5}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.editor-grid .field{margin-bottom:6px}.editor-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.mini-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 9px;font-size:10px;font-weight:800}.color-line{display:flex;gap:8px;align-items:center}.color-line input[type=color]{width:44px;height:38px;padding:3px}.range-row{display:grid;grid-template-columns:1fr 50px;align-items:center;gap:8px}
.layer-actions{display:flex;gap:6px;margin-bottom:12px}.layer-list{display:flex;flex-direction:column;gap:6px}.layer-item{display:grid;grid-template-columns:28px 1fr 26px;gap:8px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px;cursor:pointer}.layer-item.active{border-color:var(--brand);background:#fff7f2}.layer-thumb{width:26px;height:26px;border-radius:6px;background:#eceff3;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900}.layer-info b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-info span{font-size:9px;color:var(--muted)}.layer-eye{border:0;background:transparent;color:#666}
.workspace{grid-area:work;min-width:0;display:flex;flex-direction:column}.workspace-top{height:60px;background:#f8f9fb;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px}.document-title{display:flex;flex-direction:column}.document-title input{border:0;background:transparent;font-weight:850;font-size:14px;outline:none;padding:0}.document-title span{font-size:10px;color:var(--muted);margin-top:3px}.quality-pill{display:grid;grid-template-columns:10px auto;column-gap:7px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 11px}.quality-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--good);grid-row:1/3}.quality-pill b{font-size:10px}.quality-pill small{font-size:8px;color:var(--muted)}.quality-pill.warn .dot{background:var(--warn)}.quality-pill.bad .dot{background:var(--bad)}
.canvas-stage{position:relative;flex:1;overflow:hidden;background-image:linear-gradient(45deg,#e8ebef 25%,transparent 25%),linear-gradient(-45deg,#e8ebef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8ebef 75%),linear-gradient(-45deg,transparent 75%,#e8ebef 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.canvas-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 22px 55px rgba(17,20,27,.22);background:#fff}.canvas-wrap canvas{display:block}.stage-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(16,18,23,.82);color:#fff;font-size:9px;padding:7px 11px;border-radius:999px;white-space:nowrap}.ruler{position:absolute;background:#f7f8fa;color:#8b919c;font-size:8px;z-index:5;pointer-events:none}.ruler-x{height:20px;left:20px;right:0;top:0;border-bottom:1px solid var(--line)}.ruler-y{width:20px;left:0;top:20px;bottom:0;border-right:1px solid var(--line)}
.right-panel{grid-area:right;background:#f8f9fb;border-left:1px solid var(--line);padding:16px;overflow:auto}.price-card,.check-card,.help-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}.price-main{display:flex;align-items:flex-end;gap:3px;margin:7px 0 14px}.price-main span{font-size:16px;font-weight:900;margin-bottom:7px}.price-main strong{font-size:37px;letter-spacing:-2px;line-height:1}.price-main small{font-size:9px;color:var(--muted);margin:0 0 6px 4px}.price-row{display:flex;justify-content:space-between;font-size:11px;padding:7px 0;border-top:1px solid #eef0f3}.price-row.total{font-size:13px}.price-details{font-size:9px;color:var(--muted);line-height:1.5;border-top:1px solid #eef0f3;padding:9px 0}.price-notice{font-size:9px;line-height:1.4;color:#9b6410;background:#fff8e7;border:1px solid #f4dfac;border-radius:8px;padding:8px}.card-title{display:flex;justify-content:space-between;align-items:center}.card-title h3,.help-card h3{font-size:13px;margin:0}.card-title span{font-size:10px;color:var(--muted)}.check-list{margin-top:10px;display:flex;flex-direction:column;gap:7px}.check-item{display:grid;grid-template-columns:16px 1fr;gap:7px;font-size:10px;line-height:1.35}.check-icon{width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;background:var(--good)}.check-item.warn .check-icon{background:var(--warn)}.check-item.bad .check-icon{background:var(--bad)}.check-item b{display:block}.check-item span{color:var(--muted)}.help-card p{font-size:10px;color:var(--muted);line-height:1.5}.link-btn{border:0;background:transparent;color:var(--brand);font-size:10px;font-weight:800;padding:0}
.mobile-bottom{display:none}.modal{position:fixed;inset:0;background:rgba(7,9,13,.66);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.modal-card{position:relative;width:min(670px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:27px;box-shadow:var(--shadow)}.modal-card h2{margin:3px 0 8px;font-size:25px}.modal-card>p{color:var(--muted);font-size:12px;line-height:1.55}.modal-close{position:absolute;right:13px;top:13px;width:34px;height:34px;border:0;border-radius:50%;background:#f0f2f5;font-size:21px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.export-grid button{border:1px solid var(--line);background:#fff;border-radius:13px;text-align:left;padding:15px}.export-grid button:hover{border-color:var(--brand);background:#fff8f4}.export-grid b{display:block;font-size:13px}.export-grid span{display:block;font-size:10px;color:var(--muted);margin-top:4px;line-height:1.4}.export-warning{margin-top:13px;font-size:10px;color:#8a5f16;background:#fff8e8;border-radius:9px;padding:10px}.consent{display:flex;gap:8px;font-size:10px;color:var(--muted);line-height:1.4;margin:10px 0 16px}.form-status{font-size:11px;margin-top:10px}.toast-stack{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px}.toast{min-width:240px;max-width:350px;background:#171a21;color:#fff;border-radius:11px;padding:11px 13px;box-shadow:var(--shadow);font-size:11px;animation:toastIn .2s ease}.toast.good{border-left:4px solid var(--good)}.toast.bad{border-left:4px solid var(--bad)}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1180px){:root{--right:260px;--tool:290px}.topbar{grid-template-columns:210px 1fr auto}.save-state{display:none}.right-panel{padding:10px}}
@media(max-width:980px){body{overflow:auto}.app-shell{height:100dvh;grid-template-columns:66px 290px 1fr;grid-template-areas:"top top top" "rail tools work"}.right-panel{position:fixed;right:10px;top:80px;width:270px;z-index:30;box-shadow:var(--shadow);border-radius:14px;max-height:calc(100vh - 100px);transform:translateX(calc(100% + 20px));transition:.2s}.right-panel.open{transform:none}.topbar{grid-template-columns:180px 1fr auto}.topbar-actions .btn-ghost{display:none}}
@media(max-width:760px){:root{--top:58px}.app-shell{grid-template-columns:1fr;grid-template-rows:var(--top) 1fr 58px;grid-template-areas:"top" "work" "mobile"}.topbar{grid-template-columns:1fr auto;padding:0 12px}.topbar-center,.save-state,.topbar-actions .btn-ghost{display:none}.brand-sub{display:none}.topbar-actions .btn-primary{padding:8px 11px}.left-rail{display:none}.tool-panel{position:fixed;left:0;right:0;bottom:58px;top:58px;z-index:70;transform:translateY(110%);transition:.25s;border:0}.tool-panel.open{transform:none}.tool-section{padding:18px 16px 28px}.workspace-top{height:52px;padding:0 12px}.quality-pill{display:none}.canvas-stage{min-height:0}.stage-hint{display:none}.right-panel{display:none}.mobile-bottom{grid-area:mobile;display:grid;grid-template-columns:repeat(5,1fr);background:#151820;border-top:1px solid #2a2e37;z-index:80}.mobile-bottom button{border:0;background:transparent;color:#b8bec8;font-size:10px}.mobile-bottom button:last-child{background:var(--brand);color:#fff;font-weight:900}.modal{padding:10px}.modal-card{padding:22px 16px}.export-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.canvas-wrap{max-width:none}.ruler{display:none}}

/* ABDEX Studio 2 production additions */
.template-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:18px 0 9px}.template-heading b{font-size:12px}.template-heading span{font-size:9px;color:var(--muted)}
.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.template-grid button{border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px;text-align:left;min-height:62px}.template-grid button:hover{border-color:var(--brand);background:#fff8f4}.template-grid b{display:block;font-size:11px}.template-grid span{display:block;font-size:9px;color:var(--muted);margin-top:4px}
.production-spec{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;margin-bottom:12px}.production-spec .spec-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.production-spec .spec-head b{font-size:12px}.production-spec .status{font-size:8px;text-transform:uppercase;letter-spacing:.6px;padding:4px 7px;border-radius:999px;background:#e7f7ef;color:#167047;font-weight:900}.production-spec .status.reference{background:#fff4dc;color:#895d11}.production-spec dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0}.production-spec div{min-width:0}.production-spec dt{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.production-spec dd{font-size:10px;font-weight:800;margin:3px 0 0}.production-spec ul{padding-left:16px;margin:10px 0 0;color:var(--muted);font-size:9px;line-height:1.45}
.export-grid button.featured{grid-column:1/-1;border-color:var(--brand);background:linear-gradient(135deg,#fff7f2,#fff)}.export-grid button.featured b{color:var(--brand)}
.layer-lock{border:0;background:transparent;color:#777;font-size:12px;padding:0}.layer-item{grid-template-columns:28px 1fr 24px 24px}.layer-item.locked{background:#f4f5f7}.layer-item.locked .layer-info{opacity:.65}
.check-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:9px}.check-summary div{border-radius:8px;padding:7px;text-align:center;background:#f4f6f8}.check-summary b{display:block;font-size:13px}.check-summary span{display:block;font-size:8px;color:var(--muted)}
.production-progress{margin-top:12px;border-radius:10px;background:#f1f3f6;padding:10px;font-size:10px;line-height:1.5}.production-progress b{display:block;margin-bottom:3px}.production-progress.good{background:#eaf8f1;color:#176744}.production-progress.bad{background:#ffeded;color:#962f2f}
.badge-inline{display:inline-flex;align-items:center;border-radius:999px;padding:3px 6px;background:#eef1f4;font-size:8px;font-weight:900;color:#656d78}
.editor-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.editor-size-grid .field{margin-bottom:6px}.editor-actions.align{display:grid;grid-template-columns:repeat(3,1fr)}.editor-actions.align .mini-btn{padding:7px 4px}
@media(max-width:760px){.template-grid{grid-template-columns:1fr 1fr}.production-spec dl{grid-template-columns:1fr 1fr}}
.left-rail{overflow-y:auto;overflow-x:hidden}.left-rail::-webkit-scrollbar{width:0}