/* Shared desktop and touch layout. Diagram scrolling is isolated to its region. */
@page{size:A4 landscape;margin:0}
@media print{html,body{margin:0!important;padding:0!important;background:#fff!important;color:#111!important}body>header,body>main,body>dialog,body>#toast{display:none!important}body>#printArea{display:block!important;margin:0!important;padding:0!important}.report-page{width:297mm!important;height:210mm!important;margin:0!important;padding:0!important;break-inside:avoid;break-after:page;page-break-after:always;overflow:hidden}.report-page:last-child{break-after:auto;page-break-after:auto}.report-page svg{display:block!important;width:297mm!important;height:210mm!important;max-width:none!important;max-height:none!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}}
.bottom{grid-template-columns:minmax(0,1fr)!important}.bottom>div{min-width:0}#technical{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}#technical p{min-width:0;margin:0;padding:15px 0}#technical b{max-width:64%;text-align:right}.backup-controls{padding:16px 22px;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;background:#152238;border-block:1px solid #3e5475}.backup-controls label{min-width:0;margin:0}.backup-controls p{grid-column:1/-1;color:#bccbe0;font-size:12px;margin:0;line-height:1.6}.backup-summary{padding:12px 22px;color:#e0c3ff;font-size:13px;overflow-wrap:anywhere}.backup-summary:empty{display:none}.backup-controls[hidden],.backup-summary[hidden]{display:none}.toolbar .print-action{grid-column:1/-1;border-color:#748bb3;color:#fff;background:#263b59}.canvas-wrap{cursor:grab;user-select:none}.canvas-wrap.manual:not(.panning) [data-cab]{cursor:pointer}.canvas-wrap.dragging,.canvas-wrap.dragging *{cursor:grabbing!important}.canvas-wrap.panning [data-cab]{cursor:grab}#pan-toggle[aria-pressed="true"]{background:#2b4775;border-color:#91b6ff}.designer{min-width:0}.notice,.canvas-instruction{line-height:1.6}.canvas-instruction{color:#c0ccdf!important}.zoom-controls{color:#d8e4f7}.canvas-wrap [data-cab]:focus-visible rect{stroke:white;stroke-width:3}
@media(max-width:1100px){.backup-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.backup-controls button{grid-column:1/-1}#technical{grid-template-columns:1fr}}
@media(max-width:800px){.backup-controls{padding:16px;gap:12px}.backup-summary{padding:12px 16px}.backup-controls button{min-height:46px}.canvas-wrap{touch-action:pan-x pan-y}.toolbar .print-action{min-height:48px}.zoom-controls #pan-toggle{flex:1}#technical b{max-width:60%}}
header{position:relative;gap:16px;min-height:76px;padding-block:16px}header img{width:174px}.header-actions{align-items:center;flex-wrap:nowrap;gap:10px}
.project-menu{position:relative;margin:0;font-size:13px}.project-menu summary{list-style:none;border:1px solid #363c44;border-radius:7px;background:#22262b;padding:9px 14px;white-space:nowrap}.project-menu summary::-webkit-details-marker{display:none}.project-menu[open] summary{border-color:#7395ef}.project-menu-items{position:absolute;right:0;top:calc(100% + 8px);width:240px;padding:10px;display:grid;gap:7px;border:1px solid #39485f;border-radius:10px;background:#1b222d;box-shadow:0 15px 40px #0008;z-index:20}.project-menu-items button,.project-menu-items label{width:100%;margin:0;text-align:left}.project-menu-items [hidden]{display:none!important}
.toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}.toolbar label,.toolbar label:nth-child(n){width:auto;min-width:0}.toolbar label:nth-child(4){grid-column:span 2}.toolbar #apply{grid-column:span 2}.toolbar button{min-height:42px}.toolbar input,.toolbar select{width:100%}
.zoom-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:12px 22px 0;border-top:1px solid var(--line)}.zoom-controls>span{margin-right:auto;color:#a8b5c9;font-size:11px}.zoom-controls button{min-width:38px;min-height:38px;padding:6px 10px}.zoom-controls output{min-width:48px;text-align:center;color:#bfd0ec;font-size:11px}.canvas-instruction{font-size:11px;color:#93a2b8;padding:0 22px;margin:10px 0 12px}
.canvas-wrap{display:block;min-height:260px;max-height:min(65vh,640px);overflow:auto;padding:18px;overscroll-behavior:contain;scrollbar-color:#55657c #171d26;scrollbar-width:thin;touch-action:pan-x pan-y}.canvas-wrap:focus-visible{outline:2px solid #7ca1ff;outline-offset:-3px}#canvas{min-width:0;max-width:none;flex:none}#canvas svg{width:100%;max-height:min(58vh,580px)}#canvas[data-zoom="detail"] svg{height:100%;max-height:none}.canvas-wrap [data-cab]{touch-action:manipulation}.canvas-footer{flex-wrap:wrap;gap:8px}
.mobile-navigation,.mobile-next{display:none}input,select{font-size:14px}button,.button,summary{-webkit-tap-highlight-color:transparent}button:disabled:hover{background:inherit;border-color:#363c44}dialog{max-width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow-y:auto}#toast{max-width:calc(100vw - 32px);width:max-content;text-align:center;z-index:50}.metric strong{overflow-wrap:anywhere}.metrics{min-width:0}.metric{min-width:0}#technical p{gap:16px}#technical b{overflow-wrap:anywhere}.field-error{overflow-wrap:anywhere}
@media(min-width:801px){.workspace{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}.mapping-controls{align-items:end}.mapping-controls label{flex:1;max-width:300px}.intro{gap:24px}.local{max-width:310px}nav button{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(min-width:801px) and (max-width:1100px){main{padding-inline:24px}header{padding-inline:24px}.workspace{grid-template-columns:260px minmax(0,1fr);gap:16px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom{grid-template-columns:minmax(0,1fr)}.canvas-heading{flex-wrap:wrap;gap:14px}}
@media(max-width:800px){
 body{font-size:14px}header{padding:12px 16px;min-height:64px;flex-wrap:nowrap;gap:10px}header img{width:150px;max-width:38vw}.header-actions{width:auto;margin-left:auto;gap:8px}.header-actions>button,.project-menu summary{min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px 11px;font-size:12px}.project-menu-items{position:fixed;left:16px;right:16px;top:66px;width:auto;max-height:70dvh;overflow:auto}.project-menu-items button,.project-menu-items label{min-height:44px;font-size:14px;display:flex;align-items:center}
 main{padding:22px 16px 0}.intro{margin-bottom:20px}.intro h1{font-size:29px;line-height:1.18;letter-spacing:-.8px}.intro p{font-size:13px;margin-bottom:12px}.eyebrow{font-size:9px;letter-spacing:1.4px}.local{font-size:11px;margin-top:14px}.local small{font-size:10px;margin-top:4px}
 #tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:0 0 8px;margin-bottom:10px;scrollbar-width:thin}#tabs button{flex:0 0 auto;max-width:220px;min-height:44px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:10px 14px}
 .mobile-navigation{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:sticky;top:0;background:#101214f5;padding:10px 0;z-index:5;scroll-margin-top:8px}.mobile-navigation button{min-height:46px;font-size:13px}.mobile-navigation .active{background:#243754;border-color:#6083cf;color:#d6e3ff}.workspace{display:block}.workspace[data-mobile-view="data"] .designer{display:none}.workspace[data-mobile-view="mapping"] aside{display:none}.mobile-next{display:block;padding:18px;border-top:1px solid var(--line)}.mobile-next button{width:100%;min-height:46px}
 aside section{padding:20px}.section-title{margin-bottom:14px}label{font-size:12px}input,select{font-size:16px;min-height:46px;padding:8px 10px}button,.button{min-height:44px}.fields{gap:0 12px}.hint{font-size:12px;line-height:1.6}.section-title h2{font-size:17px}
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:8px}.metric{padding:14px 12px}.metric strong{font-size:20px}.metric small{font-size:9px}.metric span{font-size:10px}.canvas-heading{padding:18px 16px;gap:12px}.canvas-heading h2{font-size:18px;overflow-wrap:anywhere}.segmented{width:100%;display:grid;grid-template-columns:1fr 1fr}.segmented button{font-size:14px;min-height:44px}
 .toolbar{padding:0 16px 16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.toolbar label:nth-child(3),.toolbar label:nth-child(4),.toolbar label:nth-child(5){grid-column:span 2}.toolbar #apply{grid-column:span 1}.toolbar button{min-height:46px}.mapping-help{font-size:12px;padding:14px 16px}.mapping-controls{padding:0 16px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.mapping-controls label{grid-column:span 2;min-width:0}.mapping-controls button{height:auto;min-height:44px;font-size:12px}
 .zoom-controls{padding:12px 14px 0;gap:6px}.zoom-controls>span{width:100%;margin:0 0 4px}.zoom-controls button{min-height:44px;min-width:44px;padding:7px 10px;font-size:12px}.zoom-controls output{min-width:44px}.canvas-instruction{padding:0 16px;font-size:11px;line-height:1.5}.canvas-wrap{padding:12px;min-height:220px;max-height:60dvh}.canvas-footer{padding:12px 16px;font-size:11px}.notice{padding:12px 16px}.bottom{padding:22px 0;gap:22px}.bottom h2{font-size:17px}#technical{grid-template-columns:1fr}#technical p{font-size:13px;align-items:baseline}#technical b{max-width:62%}.export-card{padding:20px}.export-card button{width:100%;text-align:center;min-height:46px}.export-card p{font-size:13px}footer{padding:18px 0}footer img{width:54px;height:54px}
 dialog{padding:22px}.dialog-actions button{min-width:100px}#toast{font-size:12px;bottom:18px}.empty-canvas{padding:40px 10px}.empty-canvas b{font-size:16px}
}
@media(max-width:360px){header img{width:112px}.header-actions>button,.project-menu summary{padding-inline:9px;font-size:11px}main{padding-inline:12px}.intro h1{font-size:26px}.metrics .metric strong{font-size:18px}.toolbar{padding-inline:12px}.zoom-controls{gap:4px}.zoom-controls button{padding:6px 8px}}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*{scroll-behavior:auto!important}}

.logo-preview-wrap{height:150px;display:flex;align-items:center;justify-content:center;background:white;border:1px solid #4b5b74;border-radius:10px;margin:20px 0 12px;padding:16px}.logo-preview-wrap img{max-width:100%;max-height:100%;object-fit:contain}#logo-name{overflow-wrap:anywhere;color:#cbd7e9;font-size:13px}#logo-upload{cursor:pointer;min-height:44px}.busy{opacity:.5;pointer-events:none}#logo-status:empty{display:none}#logo-dialog .dialog-actions{flex-wrap:wrap}#logo-settings{white-space:nowrap}@media(max-width:600px){header{flex-wrap:wrap}header img{width:140px;max-width:50vw}.header-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:0}.header-actions>button,.project-menu summary{padding-inline:6px;font-size:12px;min-width:0}.project-menu-items{top:116px}}

/* Watermark belongs only to the editor; exports retain clean pixel content. */
.canvas-wrap{position:relative;isolation:isolate}.canvas-wrap::before{content:"";position:absolute;inset:0;background:url('assets/ml-logo.png') center/ min(64%,360px) auto no-repeat;opacity:.075;pointer-events:none;z-index:0}#canvas{position:relative;z-index:1}
.media-studio{margin-top:24px;border:1px solid #3d4e6a;border-radius:12px;background:linear-gradient(130deg,#19273b,#191c20 65%);min-width:0}.media-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.media-heading h2{font-size:21px;margin-top:8px}.media-heading output{color:#d2e3ff;font-size:13px;font-weight:600;border:1px solid #526c95;background:#152238;border-radius:7px;padding:8px 12px;white-space:nowrap}.media-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}.media-settings label{min-width:0;margin:0 0 14px}.media-settings input[type=color]{padding:4px;height:42px;cursor:pointer}.media-settings p{font-size:12px;color:#becce1;grid-column:span 2;margin:0 0 14px}.media-settings[hidden],.media-actions [hidden],#media-color-b[hidden]{display:none}.media-preview{display:flex;align-items:center;justify-content:center;min-height:170px;max-height:380px;overflow:hidden;background:#0c1017;border:1px solid #3e4a5e;border-radius:8px;padding:12px}.media-preview svg{width:100%;height:auto;max-height:350px}.media-preview p{text-align:center;font-size:13px;padding:24px;color:#bccce3}.media-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}.media-actions button{min-height:44px}.media-note,#media-status{font-size:12px;line-height:1.6;color:#becce1;overflow-wrap:anywhere}.media-note{margin-bottom:0;font-size:11px;color:#96a7c1}
@media(max-width:800px){.media-studio{padding:18px 16px}.media-heading{display:block}.media-heading h2{font-size:19px}.media-heading output{display:inline-block;margin-top:12px}.media-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.media-settings label:first-child{grid-column:1/-1}.media-settings p{grid-column:1/-1}.media-preview{min-height:150px;padding:6px}.media-actions{display:grid;grid-template-columns:1fr 1fr}.media-actions #media-motion{grid-column:1/-1}.media-actions button{font-size:12px;padding-inline:8px}.media-settings input[type=color]{height:46px}}
.media-settings:has(#media-color-b[hidden]),#media-mapping-options{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(prefers-reduced-motion:reduce){.media-preview{scroll-behavior:auto}}

footer{align-items:center;gap:16px}footer img{width:clamp(120px,20vw,190px);height:auto;max-width:48%;object-fit:contain}footer span{font-size:12px;color:#b8c5d9;white-space:nowrap}

/* A larger editing viewport keeps zoomed diagrams scrollable in both directions. */
@media screen{
 .canvas-wrap{height:clamp(460px,65vh,760px);min-height:0;max-height:none;display:flex;align-items:safe center;justify-content:safe center}
 #canvas svg{max-height:none}
 #canvas:has(.empty-canvas){height:100%}
 .empty-canvas{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:32px 16px}
}
@media screen and (max-width:800px){.canvas-wrap{height:clamp(340px,58dvh,560px)}}
.backup-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.backup-controls button{grid-column:auto}.backup-summary p{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}.backup-summary button{flex:none;min-height:44px}#backup-status:empty{display:none}
@media(max-width:800px){.backup-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.backup-controls label:first-child{grid-column:1/-1}.backup-summary p{align-items:flex-start;font-size:12px}}