:root{color-scheme:light;--blue:#007aff;--ink:#1d1d1f;--muted:#737378;--line:#dcdcdf;--panel:#f5f5f7;--paper:#fff;
  /* rail widths: standalone keeps the original compact layout; platform mode switches to Atomm's 320px rails */
  --rail-left:250px;--rail-right:286px;--r-control:7px;--r-card:8px;--r-dialog:16px}
*{box-sizing:border-box}html{font-size:14px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC",sans-serif;color:var(--ink);background:#ececee;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid #d5d5d9;border-radius:var(--r-control);padding:7px 12px;background:linear-gradient(#fff,#fafafa);color:var(--ink);box-shadow:0 1px 2px #00000008;transition:background .15s,box-shadow .15s}
button:hover{background:#f0f0f2}button:active{background:#e5e5e9;box-shadow:none}button:disabled{opacity:.4;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #007aff60;outline-offset:2px}
.primary{background:var(--blue);color:#fff;border-color:transparent;font-weight:500;box-shadow:none}.primary:hover{background:#0671e6}.primary:active{background:#0063d0}

/* ---------- header ---------- */
header{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 22px;background:linear-gradient(#fafafa,#f1f1f3);border-bottom:1px solid #d3d3d7;position:relative}
.brand{display:flex;gap:10px;align-items:center;white-space:nowrap}.mark{width:29px;height:32px;color:#606066}.mark svg{width:100%;height:100%}
.brand strong{font-size:19px;letter-spacing:2px;font-weight:600}.brand-sub{display:none}
.document-title{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
#project-name{font-size:15px;font-weight:600;letter-spacing:.1px;text-align:center;border:0;background:transparent;outline-offset:1px;width:240px;padding:2px;color:#29292c}
.pill{font-size:11px;color:#8c7652;line-height:15px}.pill.done{color:#43846c}
.header-actions{display:flex;gap:8px;align-items:center}.header-actions button{font-size:13px;min-height:31px}
.header-actions #help{border:1px solid #c7c7cc;border-radius:50%;padding:0;width:24px;min-height:24px;color:#68686e;margin-right:8px;font-size:15px}
.header-actions #export{padding-left:20px;padding-right:20px}#save-status{font-size:11px;color:#848489;margin-right:12px}
.lang-switch{min-height:31px;border:1px solid #d5d5d9;border-radius:var(--r-control);background:#fff;color:#55555d;font-size:12px;padding:4px 8px;margin-right:4px}

/* ---------- layout ---------- */
main{display:grid;grid-template-columns:var(--rail-left) minmax(300px,1fr) var(--rail-right);height:calc(100dvh - 97px);min-height:520px}
.left,.right{overflow:auto;scrollbar-width:thin;height:100%;background:#f5f5f7}
.left{border-right:1px solid #d5d5d9}
.right{border-left:1px solid #d5d5d9;background:#fafafa;display:flex;flex-direction:column;overflow:hidden}
.right-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
section{padding:20px;border-bottom:1px solid #e0e0e3}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:10px}
.section-heading h2{margin:0;font-size:14px;font-weight:600}.section-heading>span{font-size:11px;color:#85858b}
.panel-tabs,.inspector-tabs{height:53px;display:flex;align-items:center;gap:2px;padding:10px 16px;border-bottom:1px solid #dbdbdf;position:sticky;top:0;background:#f5f5f7f2;backdrop-filter:blur(12px);z-index:2;flex-shrink:0}
.panel-tabs button,.inspector-tabs button{flex:1;box-shadow:none;border:0;padding:7px 5px;font-size:13px;border-radius:6px;background:transparent;color:#727278}
.panel-tabs .active,.inspector-tabs .active{background:#fff;color:#262629;box-shadow:0 1px 4px #00000018}
.left section{display:none}
body[data-sidebar=assets] .left section:nth-of-type(3){display:block}
body[data-sidebar=layers] .left section:nth-of-type(2){display:block}
body[data-sidebar=template] .left section:nth-of-type(1),body[data-sidebar=template] .left section:nth-of-type(2),body[data-sidebar=template] .left section:nth-of-type(4){display:block}
body[data-inspector=design] .right-scroll section:not(:first-of-type){display:none}
body[data-inspector=print] .right-scroll section:first-of-type{display:none}
body:not([data-tool=template]) #key-fields{display:none}
body[data-tool=template] #image-fields,body[data-tool=template] #image-quality{display:none}
body:not([data-tool=template]) .add-row,body:not([data-tool=template]) #add-key{display:none}

/* ---------- workspace ---------- */
.workspace{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;background:#e5e5e8}
.toolbar{height:53px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;background:#f5f5f7;border-bottom:1px solid #d6d6db}
.segmented{display:flex;gap:1px;padding:2px;background:#e7e7eb;border-radius:var(--r-control)}
.segmented button{border:0;background:transparent;box-shadow:none;color:#65656b;border-radius:5px;padding:5px 12px;font-size:12px;white-space:nowrap}
.segmented button.active{background:#fff;color:#29292d;box-shadow:0 1px 3px #00000020}
.history{display:flex;align-items:center;gap:3px}.history button{border:0;background:transparent;box-shadow:none;padding:3px 7px;font-size:21px;color:#68686e}.history svg{width:19px;height:19px;display:block}
.edit-tools{position:absolute;z-index:3;bottom:61px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:6px;background:#fbfbfcf0;border:1px solid #ffffffd9;box-shadow:0 4px 18px #00000015,0 0 0 1px #00000006;border-radius:12px;backdrop-filter:blur(16px);white-space:nowrap}
.tool-group{display:flex;gap:3px}
.tool-group button,#focus-selection{font-size:12px;border:0;background:transparent;box-shadow:none;padding:9px 12px;color:#67676d}
.tool-group button.active{color:#007aff;background:#e9f1fb}.tool-group kbd{display:none}
#focus-selection{border-left:1px solid #dcdce0;border-radius:0;font-size:12px;padding-left:15px}
.canvas-area{flex:1;min-height:0;overflow:auto;position:relative;padding:55px 35px 95px;background:radial-gradient(ellipse at 50% 35%,#eeeef0,#e3e3e7);scrollbar-width:thin}
.canvas-caption{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#929297;margin-top:-35px;margin-bottom:24px;pointer-events:none}
.resolution-chip{display:none}.artboard{width:max-content;margin:0 auto}
canvas{display:block;touch-action:none;filter:drop-shadow(0 10px 15px #00000014)}
.canvas-hint{font-size:11px;line-height:1.8;color:#939399;margin-top:21px;text-align:center;white-space:nowrap}
.workspace-bottom{height:41px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:#f5f5f7;border-top:1px solid #d5d5da;font-size:11px;color:#828289;gap:8px}
.workspace-bottom>div{display:flex;gap:5px;align-items:center}.workspace-bottom button{border:0;box-shadow:none;background:transparent;font-size:12px;padding:4px 7px}
.swatch{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 4px 0 8px}.blue{background:#5e9bf1}.red{background:#e67e88}

/* ---------- forms ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:15px 0}
label{display:block;font-size:12px;line-height:1.5;color:#6c6c72}
input[type=number],input[type=text],select{display:block;width:100%;border:1px solid #d9d9de;border-radius:6px;background:white;min-height:32px;padding:6px 8px;margin-top:5px;color:#303035;font-size:14px;box-shadow:inset 0 1px 2px #00000003}
select{margin-top:0;font-size:13px}label>select{margin-top:5px}
input[type=number]:hover,input[type=text]:hover{border-color:#b2b2ba}
input[type=color]{margin-top:8px;width:100%;height:33px;border:1px solid #dadade;background:white;border-radius:6px;padding:3px}
input[type=range]{accent-color:var(--blue);width:100%;height:6px}input[type=checkbox]{accent-color:var(--blue)}
.check{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:12px}
.note{font-size:12px;color:#85858c;line-height:1.75;margin:12px 0 0}
.wide{width:100%;margin-top:12px;font-size:13px}
.text-button{border:0;background:transparent;box-shadow:none;color:var(--blue);padding:6px 0;font-size:12px}
.icon{border:0;box-shadow:none;background:transparent;padding:0;width:24px;font-size:21px;color:#7a7a81}

/* ---------- layers / assets ---------- */
.layer{display:flex;align-items:center;gap:8px;min-height:41px;padding:9px 10px;border-radius:6px;border:1px solid transparent;cursor:pointer;margin-bottom:3px;outline-offset:1px}
.layer:hover{background:#ededf0}.layer.active{background:#dceafa;color:#1763ba}
.layer .glyph{width:22px;text-align:center;font-size:19px;color:#7b8390}.layer .layer-name{font-size:13px;flex:1}.layer small{font-size:10px;color:#8d8d93}
.add-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:16px}.add-row button{font-size:11px;padding:6px}
.upload{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px dashed #c8c8cf;border-radius:10px;padding:22px 10px;box-shadow:none}
.upload>span{font-size:27px;font-weight:300;color:#888890;line-height:28px}.upload strong{font-size:14px;font-weight:500}.upload small{font-size:10px;color:#98989e}
.assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.asset{position:relative;height:130px;background:repeating-conic-gradient(#eeeef0 0% 25%,#fff 0% 50%) 0/12px 12px;border:1px solid #dedee3;box-shadow:none;border-radius:8px;padding:10px 10px 27px;overflow:hidden}
.asset img{width:100%;height:100%;object-fit:contain}
.asset span{position:absolute;left:0;right:0;bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:10px;background:#f8f8fa;padding:6px;color:#818189}
.asset.chosen{outline:2px solid #007aff;outline-offset:2px;border-color:#d4d4dc}
.asset-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.asset-card .asset{width:100%;border:0;border-radius:8px 8px 0 0}
.asset-actions{display:flex;align-items:center;justify-content:space-between;gap:2px;padding:2px 5px 5px}
.asset-actions small{font-size:12px;color:#737378}
.asset-delete{min-height:34px;padding:5px 7px;border:0;background:transparent;box-shadow:none;color:#b3261e;font-size:14px}.asset-delete:hover{background:#fff0ef}
.asset-empty{grid-column:1/-1;color:#737378;font-size:14px;line-height:1.6}
.samples-heading{margin-top:26px;padding-top:18px;border-top:1px solid #e2e2e6}
.samples{display:grid;gap:12px}
.sample-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sample-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#eef0f5}
.sample-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px}
.sample-meta span{font-size:12px;color:#55555d;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sample-meta button{font-size:12px;padding:5px 12px;flex-shrink:0}
.selected-image{position:relative;width:100%;height:190px;display:flex;align-items:center;justify-content:center;padding:14px;border:1px solid #dfdfe4;border-radius:8px;box-shadow:none;background:repeating-conic-gradient(#eeeef0 0% 25%,#fff 0% 50%) 0/14px 14px;cursor:zoom-in;margin-top:12px}
.selected-image img{max-width:100%;height:160px;object-fit:contain}
.selected-image span{position:absolute;bottom:8px;right:8px;background:#ffffffea;border:1px solid #d6d6dd;border-radius:5px;padding:4px 7px;font-size:10px;color:#747480}
.fit-row{display:flex;gap:6px;margin-top:16px}.fit-row button{flex:1;font-size:12px}.fit-row button.active{background:#eaf3fe;border-color:#a4cafa;color:#196cc4}
.live-slider{margin-top:24px;font-size:13px}.live-slider output{float:right;color:#55555d;font-size:12px;font-variant-numeric:tabular-nums}.live-slider input{display:block;margin-top:13px}
.row{display:flex;gap:8px;margin-top:19px}.row button{flex:1;font-size:12px}
.fine-controls{margin-top:23px;border-top:1px solid #e2e2e6;padding-top:16px}.fine-controls summary{font-size:12px;color:#7e7e85;cursor:pointer}
.quality-meter{margin-top:22px;padding-top:16px;border-top:1px solid #e2e2e6}
.quality-meter>span{display:flex;justify-content:space-between;font-size:12px;color:#73737b}.quality-meter b{font-size:12px;font-weight:500;color:#53535a}
.quality-meter small{display:block;margin-top:7px;font-size:11px;color:#9999a0}.quality-meter p{font-size:11px;line-height:1.7;color:#96969d;margin:8px 0 0}.quality-meter.low b{color:#aa792e}
.quality{background:transparent}.quality>span{font-size:13px;font-weight:500}.quality p{font-size:12px;line-height:1.8;color:#85858d}
.tag{font-size:11px;color:#929298}
.gap-diagram{display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid #e0e0e5;background:#f4f4f6;border-radius:7px;height:58px;margin-top:20px;font-size:12px;color:#68686f}
.gap-diagram i{height:25px;width:3px;background:#e8a4aa}.gap-diagram b{font-size:11px;font-weight:400;color:#c16f78}
.export-size{font-family:ui-monospace,monospace;font-size:12px;color:#686872;margin-top:15px}
.danger{color:#c55151}
.drop-ready{outline:3px dashed #007aff!important;outline-offset:-5px;background-color:#e8f2ff!important}
.focus-canvas main{grid-template-columns:1fr}.focus-canvas .left,.focus-canvas .right{display:none}
footer{height:27px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#96969d;padding:0 18px;border-top:1px solid #d8d8dd;background:#f3f3f5}

/* ---------- dialogs / toast ---------- */
dialog{width:470px;max-width:calc(100vw - 24px);max-height:90vh;overflow:auto;border:1px solid #ffffffb3;border-radius:var(--r-dialog);padding:30px;background:#f9f9fb;color:var(--ink);box-shadow:0 25px 90px #00000030}
dialog::backdrop{background:#20202b40;backdrop-filter:blur(5px)}
dialog .close{position:absolute;right:14px;top:12px;font-size:23px;padding:0 6px;border:0;background:transparent;box-shadow:none;color:#81818a}
dialog h2{font-size:23px;font-weight:600;margin:14px 0 18px;letter-spacing:-.4px}dialog p,dialog li{font-size:14px;line-height:1.8;color:#72727b}
.eyebrow{font-size:10px;letter-spacing:1.8px;color:#94949b}dialog ol{padding-left:20px}dialog li{margin:16px 0}dialog li p{font-size:13px;margin:5px 0}
.notice{background:#eeeef2;border-radius:8px;padding:14px;font-size:12px;line-height:1.8;color:#777781;margin:20px 0;white-space:pre-line}
.export-options{display:grid;gap:12px}.export-options label{font-size:14px;display:flex;align-items:center;gap:6px}
#image-dialog{width:min(1100px,94vw);padding:24px}#image-dialog h2{font-size:17px;padding-right:30px;overflow-wrap:anywhere}
.original-tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:17px}.original-tools span{flex:1;font-size:12px;color:#82828a}.original-tools button{font-size:12px}
.original-viewport{height:65vh;overflow:auto;background:repeating-conic-gradient(#e8e8eb 0% 25%,#fff 0% 50%) 0/18px 18px;border:1px solid #d8d8df;border-radius:9px;padding:15px;text-align:center}
.original-viewport img{max-width:100%;max-height:100%;object-fit:contain}.original-viewport.actual{text-align:left}.original-viewport.actual img{display:block;max-width:none;max-height:none}
#toast{position:fixed;z-index:100;bottom:40px;left:50%;transform:translateX(-50%) translateY(8px);padding:12px 20px;border-radius:10px;border:1px solid #fff7;background:#fdfdfff2;color:#484851;box-shadow:0 8px 30px #00000022;opacity:0;pointer-events:none;transition:.2s;max-width:90%;font-size:13px}
#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Atomm platform mode ----------
   Enabled when the SDK injects `atomm` (body.in-atomm). Follows dev.atomm.com design rules:
   320px rails, platform draws the top bar (ours is folded into the left rail), export via the SDK button
   docked at the bottom of the parameters rail, control heights 28/32/40, radii 6/8/12. */
.platform-only{display:none}
.in-atomm .platform-only{display:block}
.in-atomm .standalone-only{display:none!important}
.in-atomm{--rail-left:320px;--rail-right:320px;--r-control:6px;--r-card:8px;--r-dialog:12px}
.in-atomm header{display:none}
.in-atomm main{height:100dvh}
.in-atomm footer{display:none}
.rail-head{display:none}
.in-atomm .rail-head{display:flex;flex-direction:column;gap:8px;padding:14px 16px 10px;border-bottom:1px solid #dbdbdf;background:#f5f5f7}
.in-atomm .rail-head .document-title{position:static;transform:none;align-items:flex-start}
.in-atomm .rail-head #project-name{text-align:left;width:100%;font-size:14px}
.in-atomm .rail-head .rail-actions{display:flex;gap:6px;align-items:center}
.in-atomm .rail-head .rail-actions button{min-height:32px;font-size:12px;flex:1}
.in-atomm .rail-head #help{flex:0 0 32px;width:32px;border-radius:50%}
.in-atomm .rail-head #save-status{font-size:11px;color:#848489}
.in-atomm input[type=number],.in-atomm input[type=text],.in-atomm select{min-height:28px;padding:3px 8px;font-size:12px;border-radius:6px}
.in-atomm button{min-height:32px;border-radius:6px}
.in-atomm .primary{min-height:40px}
.in-atomm .panel-tabs button,.in-atomm .inspector-tabs button,.in-atomm .segmented button,.in-atomm .tool-group button,.in-atomm #focus-selection,.in-atomm .history button,.in-atomm .workspace-bottom button,.in-atomm .text-button,.in-atomm .icon,.in-atomm .asset-delete{min-height:0}
.in-atomm label,.in-atomm .note,.in-atomm .check{font-size:12px}
.in-atomm .edit-tools{border-radius:8px}
.export-dock{flex-shrink:0;padding:14px 16px;border-top:1px solid #dbdbdf;background:#f5f5f7}
.export-dock .note{margin-top:8px;font-size:11px}
[data-atomm-export-button]{--atomm-export-width:100%;--atomm-export-height:40px;--atomm-export-radius:6px}

/* ---------- responsive ---------- */
@media(min-width:1550px){body:not(.in-atomm) main{grid-template-columns:268px minmax(400px,1fr) 304px}section{padding:23px}.asset{height:145px}}
@media(max-width:1200px){body:not(.in-atomm) main{grid-template-columns:220px minmax(290px,1fr) 254px}header{padding:0 16px}.document-title{left:43%}#save-status{display:none}.toolbar{padding:0 10px;gap:7px}.segmented button{font-size:11px;padding:6px 9px}.history button{font-size:19px;padding:3px 5px}section{padding:17px}.asset{height:118px}.workspace-bottom #coords{display:none}.selected-image{height:163px}.selected-image img{height:137px}}
@media(max-width:960px){.in-atomm main{display:flex;flex-direction:column;height:auto;min-height:0}.in-atomm .workspace{order:0;height:70vh;min-height:420px}.in-atomm .left,.in-atomm .right{order:1;width:100%;height:auto;max-height:60vh}}
@media(max-width:850px){header{height:98px;align-items:flex-start;padding-top:12px}.document-title{top:58px;left:50%;width:100%;flex-direction:row;justify-content:center;gap:12px}#project-name{font-size:14px;width:185px;text-align:left}.header-actions{gap:6px}.header-actions button{font-size:12px}.header-actions #help{margin-right:0}.brand strong{font-size:17px}body:not(.in-atomm) main{display:flex;flex-wrap:wrap;height:auto;min-height:0}body:not(.in-atomm) .workspace{order:0;width:100%;height:620px}body:not(.in-atomm) .left,body:not(.in-atomm) .right{order:1;width:50%;height:650px;border-top:1px solid var(--line)}body:not(.in-atomm) .right{order:2}.panel-tabs,.inspector-tabs{height:52px}.edit-tools{bottom:57px}.toolbar{height:51px}.canvas-area{padding:52px 22px 90px}.workspace-bottom{height:40px}.workspace-bottom>span:first-child{display:none}.focus-canvas .workspace{height:calc(100dvh - 125px);min-height:450px}.focus-canvas main{display:block}.asset{height:140px}footer{height:auto;min-height:27px;gap:15px;line-height:1.7;padding:8px 12px}footer>span:last-child{display:none}}
@media(max-width:440px){section{padding:13px}.grid2{gap:8px}.tool-group button,#focus-selection{padding:9px;font-size:11px}.edit-tools{gap:5px}.history #undo,.history #redo{display:none}.asset{height:110px}.assets{gap:10px}.selected-image{height:155px}.selected-image img{height:127px}.panel-tabs,.inspector-tabs{padding:10px}.panel-tabs button{font-size:12px}.canvas-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}