:root{--ink:#182b3a;--muted:#617381;--blue:#244f72;--paper:#f6f8fa;--line:#dbe3e9;--green:#23705c}*{box-sizing:border-box}body{margin:0;font:15px/1.55 Arial,sans-serif;color:var(--ink);background:var(--paper)}header{height:78px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 34px;gap:32px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand>b{background:var(--blue);color:white;border-radius:12px;padding:4px 13px;font-size:25px}.brand span{display:flex;flex-direction:column;line-height:1.2}.brand strong{font-size:17px}.local{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:25px}#account{margin-left:auto;color:var(--muted);font-size:13px}h1{font-size:36px;line-height:1.2;margin:10px 0 14px;letter-spacing:-1px}h2{font-size:21px;margin:0 0 6px}h3{font-size:15px;margin:0 0 10px}p{color:var(--muted);margin:0 0 22px}.eyebrow{letter-spacing:2px;font-size:11px;font-weight:bold;color:var(--blue)}button{font:inherit;border:1px solid var(--blue);border-radius:7px;padding:10px 16px;background:var(--blue);color:white;cursor:pointer}button.secondary{background:white;color:var(--blue);border-color:var(--line)}button:hover{filter:brightness(.96)}button:disabled{opacity:.5;cursor:wait}input,textarea,select{font:inherit;border:1px solid #cbd6df;border-radius:6px;padding:10px 12px;width:100%;background:white;color:var(--ink)}label{display:block;font-size:13px;font-weight:bold;margin-bottom:18px}label input,label select,label textarea{display:block;margin-top:7px;font-weight:normal}small,.hint{font-size:12px;color:var(--muted)}.login{max-width:650px;margin:76px auto;padding:36px}.login form{max-width:380px;margin:30px 0 18px}.login button{width:100%}#workspace{display:flex;min-height:calc(100vh - 78px)}#workspace[hidden]{display:none}nav{width:230px;flex-shrink:0;border-right:1px solid var(--line);background:white;padding:30px 16px;display:flex;flex-direction:column;gap:8px}nav button{background:none;border:none;color:var(--muted);text-align:left;padding:13px 16px}nav .active{background:#eaf0f5;color:var(--blue);font-weight:bold}nav a{color:var(--muted);font-size:13px;text-decoration:none;margin:30px 16px}main{flex:1;min-width:0;padding:38px;max-width:1800px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px}.card{background:white;border:1px solid var(--line);border-radius:10px;padding:22px;cursor:pointer}.card:hover,.card.selected{border-color:var(--blue);box-shadow:0 4px 14px #244f720b}.badge{font-size:11px;font-weight:bold;letter-spacing:1px;background:#edf3f8;color:var(--blue);padding:5px 8px;border-radius:4px}.card h3{margin:17px 0 8px}.card small{display:block}.editorbar{background:white;border:1px solid var(--line);padding:18px 22px;border-radius:10px 10px 0 0;display:flex;justify-content:space-between;gap:12px;align-items:center}.editorbar>div:last-child{display:flex;gap:8px;align-items:center}.editorbar select{width:150px}.editorgrid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px}.editorgrid aside{padding:24px 8px 24px 0}.field{display:inline-block;cursor:grab;margin:0 6px 7px 0;background:white;border:1px solid #cad8e2;padding:6px 9px;border-radius:5px;font-size:12px}.unlock{font-size:12px;margin-top:20px;font-weight:normal}.unlock input{display:inline;width:auto}.previewhint{font-size:12px;color:var(--muted);padding:15px 0}.preview{background:#e7ecf0;padding:20px;max-height:900px;overflow:auto}.page{position:relative;margin:0 auto 20px;max-width:1000px;user-select:none}.page img{display:block;width:100%;box-shadow:0 2px 8px #243c4f26}.zone{position:absolute;min-height:18px;border:1px solid #3e82b4;background:#4c94d515;cursor:pointer}.zone.mapped{border-color:var(--green);background:#28826519}.zone.locked{border-color:#8e9ba5;background:#78818b18;cursor:not-allowed}.zone.selected{outline:2px solid #cc861d;z-index:3}.zone span{position:absolute;left:0;top:-15px;max-width:200px;white-space:nowrap;overflow:hidden;font-size:10px;background:var(--blue);color:white;padding:0 4px;line-height:14px}.zone.locked span{background:#77848d}.zone.mapped span{background:var(--green)}.selectionbox{position:absolute;border:2px dashed #cc861d;background:#e8b55222;pointer-events:none}.preview+details{margin-top:14px}summary{cursor:pointer;color:var(--blue);font-size:13px;margin-bottom:12px}.slot{border-bottom:1px solid var(--line);padding:9px;font-size:12px;cursor:pointer}.slot:hover{background:#eaf0f5}#selection{background:white;padding:14px;border:1px solid var(--line);margin-top:20px;border-radius:6px}#original{font-size:12px;max-height:140px;overflow:auto;white-space:pre-wrap}#selection button{font-size:12px;margin-top:9px;width:100%}.generation{display:grid;grid-template-columns:minmax(320px,620px) minmax(240px,400px);gap:44px;margin-top:30px}.generation form{background:white;border:1px solid var(--line);border-radius:10px;padding:28px}.generation form button{margin-top:18px;width:100%}.sourcepanel{padding:22px 0}.sourcepanel p{margin-top:20px}.job{background:white;border:1px solid var(--line);border-radius:10px;padding:22px;margin:20px 0}.jobtop{display:flex;gap:20px;justify-content:space-between}.job a{color:var(--blue)}.job p{white-space:pre-wrap;margin-top:15px}.job .preview{max-height:700px;margin-top:20px}.job details{margin-top:15px}#toast{position:fixed;bottom:24px;right:24px;background:#18374c;color:white;border-radius:8px;padding:14px 20px;display:none;z-index:20;max-width:600px}#busy{position:fixed;inset:0;background:#f6f8fae8;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;gap:18px}#busy[hidden]{display:none}.spinner{width:34px;height:34px;border:3px solid #dbe3e9;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1000px){nav{width:175px}main{padding:24px}.editorgrid{grid-template-columns:200px 1fr}.editorbar{display:block}.editorbar>div:last-child{margin-top:14px}.generation{grid-template-columns:1fr}.local{display:none}}@media(max-width:700px){nav{width:130px;padding:15px 4px}nav button{font-size:12px;padding:10px 7px}main{padding:18px}.heading{display:block}.editorgrid{grid-template-columns:1fr}.editorbar>div:last-child{flex-wrap:wrap}.editorgrid aside{padding:18px 0}h1{font-size:28px}}

body{font-family:'Open Sans',Arial,sans-serif;font-size:15px;background:#edf3fb}header{height:96px;background:#f7faff}.brand{gap:18px}.brand img{width:150px;height:36px;object-fit:contain}.brand strong{font-size:14px;font-weight:600}.brand span{border-left:1px solid var(--line);padding-left:18px;max-width:190px}button,input,textarea,select{border-radius:3px}button{font-size:14px;font-weight:600}.card,.job,.generation form,.editorbar{border-radius:4px}.card:hover{box-shadow:none}nav{background:#f7faff}main{max-width:1660px}h1,h2,h3{font-weight:600}.zone span{display:none}.zone:hover span,.zone.selected span{display:block}.zone{min-height:14px}.field{font-size:11px;max-width:100%;overflow-wrap:anywhere}.brandform{max-width:600px;background:#f7faff;padding:28px;border:1px solid var(--line);margin-top:28px}.brandform img{display:block;max-height:100px;object-fit:contain;margin:20px 0 30px}.brandform input[type=color]{max-width:110px;height:48px;padding:4px}.zoomtools{margin-top:15px;display:flex;justify-content:flex-end}.zoomtools label{display:flex;align-items:center;gap:12px;font-weight:normal;margin:0}.zoomtools select{width:140px;min-height:38px}.generation form{min-width:0}.preview{overflow:auto}button:focus-visible,a:focus-visible,.field:focus-visible{outline:3px solid #205bc7;outline-offset:3px}a{overflow-wrap:anywhere}details,main>section{min-width:0}#account{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:900px){header{height:84px;padding:0 20px}.brand img{width:120px;height:30px}.brand span{padding-left:12px}.editorbar>div:last-child{flex-wrap:wrap}.local{display:none}}@media(max-width:650px){header{gap:12px}.brand{gap:10px}.brand img{width:105px}.brand strong{font-size:12px}#account{font-size:10px;max-width:100px}#workspace{display:block}nav{width:100%;border-right:0;border-bottom:1px solid var(--line);padding:8px;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px}nav button{padding:8px 10px;min-height:40px;font-size:11px}nav a{margin:10px;font-size:11px}main{padding:20px}.cards{grid-template-columns:1fr}.editorgrid{grid-template-columns:1fr}.editorgrid aside{padding:18px 0}.heading{display:block}.heading>button{margin-top:15px}.generation{grid-template-columns:minmax(0,1fr);gap:18px}.generation form{padding:18px}.editorbar{padding:16px}.editorbar select{width:100%}.editorbar>div:last-child>*{max-width:100%}.jobtop{display:block}.brandform{padding:18px}.login{padding:20px;margin:40px auto}h1{font-size:32px}.preview{padding:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

@media(max-width:390px){.brand span{display:none}header{padding:0 20px}#account{max-width:130px}.editorbar button{width:100%}}

.field{touch-action:none;user-select:none}.dragghost{position:fixed;z-index:200;pointer-events:none;background:#205bc7;color:white;border-radius:3px;padding:7px 12px;font-size:12px;box-shadow:0 3px 10px #15283f33}
/* Mikis application layout: calm surfaces, clear actions, comfortable touch targets. */
:root{--ink:#15283f;--muted:#52657c;--line:#c7d5e5;--paper:#edf3fb;--blue:#205bc7}
body{font-size:15px;line-height:1.65}header{position:relative;gap:24px;border-bottom-color:#dce5f0}header .compact{font-size:12px;min-height:40px;padding:8px 12px}#workspace{min-height:calc(100vh - 96px)}nav{padding-top:30px;width:220px}nav button{min-height:48px;font-size:14px;border-radius:3px}nav .active{background:#e1eaf8;color:#164aab;border-left:3px solid var(--blue)}nav a{margin-top:24px}main{padding:44px clamp(24px,4vw,72px) 70px;width:100%}h1{font-size:clamp(32px,3.2vw,48px);line-height:1.15;letter-spacing:-.045em;max-width:850px;margin:12px 0 18px}.lead{font-size:18px;margin-bottom:28px}h2{font-size:22px;letter-spacing:-.025em}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em}button{min-height:44px}input,select,textarea{min-height:46px;max-width:100%}textarea{resize:vertical}button:focus-visible,a:focus-visible,.zone:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #205bc7;outline-offset:3px}button.card{text-align:left;font-weight:400;line-height:1.6;color:var(--ink);padding:24px;background:#f7faff;min-width:0;transition:background .15s,border-color .15s}button.card:hover{background:white}button.card.selected{box-shadow:inset 0 3px var(--blue)}.card h3{font-size:18px;line-height:1.35;margin-top:20px}.card small{font-size:12px}.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px}.heading{align-items:flex-start}.heading button{flex-shrink:0}.chatentry{display:flex;align-items:center;gap:18px;padding:20px 24px;background:#e1eaf8;border:1px solid #c7d8f1;max-width:1100px;margin:26px 0 34px}.chatentry p{margin:3px 0 0;font-size:13px;max-width:620px}.chatentry strong{font-weight:600;font-size:15px}.stepicon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;background:#205bc7;color:white;font-size:24px}.textlink{color:#174da9;font-size:14px;font-weight:600;text-underline-offset:4px;margin-left:auto;white-space:nowrap}.generation{grid-template-columns:minmax(0,650px) minmax(0,330px);gap:clamp(24px,4vw,60px);margin-top:0}.generation form{padding:30px;background:#f7faff}.generation form label{font-size:13px;font-weight:600}.generation form button{min-height:50px;display:flex;align-items:center;justify-content:space-between}.sourcepanel{padding:14px 0;min-width:0}.sourcepanel h2{margin:12px 0 24px}.steps{list-style:none;counter-reset:steps;padding:0;margin:0 0 32px}.steps li{counter-increment:steps;position:relative;padding:0 0 24px 42px;margin-bottom:20px;border-bottom:1px solid var(--line)}.steps li:before{content:counter(steps);position:absolute;left:0;top:0;width:28px;height:28px;background:#e1eaf8;color:#205bc7;text-align:center;font-size:13px;font-weight:600;line-height:28px}.steps strong,.steps span{display:block}.steps strong{font-size:14px;font-weight:600}.steps span{font-size:13px;color:var(--muted);margin-top:5px}.sourcepanel details p{font-size:13px}.slot{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;white-space:normal;overflow-wrap:anywhere}.slot:hover{filter:none;background:#e1eaf8}.jobtop a{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:44px;padding:10px 16px;background:var(--blue);color:white;text-decoration:none;font-size:13px;font-weight:600;border-radius:3px}.jobtop h2{margin-top:12px}.jobtop>div{min-width:0}.jobtop a{flex-shrink:0}.job{padding:28px}.job p{max-width:85ch;font-size:14px}.zone:focus-visible{z-index:10}#errorbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(600px,calc(100% - 32px));background:#fff3ee;border:1px solid #c57c62;color:#74391e;padding:16px 20px;z-index:60;box-shadow:0 6px 24px #15283f16}#toast{max-width:calc(100% - 32px);font-size:14px;border-radius:3px}#busytext{max-width:calc(100% - 48px);text-align:center}#editor{scroll-margin-top:24px}.brandform{background:#f7faff}.editorgrid>*{min-width:0}#fieldselect{width:100%}.preview{overscroll-behavior:contain}.preview img{height:auto}.login h1{font-size:42px}.login{margin-top:60px}#logoutbtn[hidden]{display:none}
@media(min-width:1600px){main{padding-top:58px}.generation{grid-template-columns:minmax(0,700px) minmax(0,350px);gap:64px}}
@media(max-width:1100px){nav{width:180px;padding-inline:12px}main{padding:32px 24px}.generation{grid-template-columns:minmax(0,1fr)}.sourcepanel{max-width:650px}.chatentry{flex-wrap:wrap}.chatentry .textlink{margin-left:60px}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.steps li{padding:40px 0 16px;margin:0}.sourcepanel details{margin-top:24px}}
@media(max-width:768px){header{gap:14px;padding-inline:20px}header .brand span{display:none}#account{font-size:11px;max-width:110px}nav{width:156px;padding-inline:8px}nav button{font-size:12px;padding-inline:12px}main{padding:28px 20px}.editorgrid{grid-template-columns:minmax(0,1fr)}.editorbar>div:last-child{flex-wrap:wrap}.editorbar{display:block}.generation form{padding:24px}.chatentry{padding:18px;gap:14px}.chatentry>div{flex:1;min-width:0}.chatentry .textlink{margin-left:56px}.steps{display:block}.steps li{padding:0 0 20px 42px;margin-bottom:20px}.sourcepanel{padding-top:6px}}
@media(max-width:650px){#workspace{min-height:calc(100vh - 84px)}nav{position:relative;display:flex;flex-direction:row;width:100%;padding:8px 14px;gap:4px}nav button{min-height:44px;font-size:12px;padding:8px 12px}nav .active{border-left:0;box-shadow:inset 0 -2px var(--blue)}nav a{margin:8px 10px;min-height:32px;display:flex;align-items:center}main{padding:28px 20px 56px}h1{font-size:34px}.lead{font-size:16px}.chatentry{margin:24px 0}.generation form{padding:20px}.job{padding:20px}.jobtop a{margin-top:18px;width:100%}.brandform{padding:20px}.heading>button{width:100%}.cards{gap:12px}.card h3{font-size:19px}.editorbar select{width:100%}.editorbar button{width:100%}header .compact{padding-inline:9px;font-size:11px}.brand img{width:100px;height:28px}.login{margin-top:26px}.login h1{font-size:34px}.chatentry .stepicon{display:none}.chatentry .textlink{margin-left:0}.chatentry>div{flex-basis:100%}.sourcepanel h2{font-size:23px}}
@media(max-width:350px){header{gap:8px;padding-inline:16px}#account{max-width:65px}header .brand img{width:85px}main{padding-inline:16px}nav{padding-inline:8px}nav button{padding-inline:9px;font-size:11px}h1{font-size:30px}.generation form{padding:16px}.job{padding:16px}}
#fieldpalette>summary{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:14px;min-height:30px}#fieldpalette{margin-bottom:16px}
h1,h2,h3,.brand strong,.job p{overflow-wrap:anywhere}.jobtop{min-width:0}#account{min-width:0}
.unlock{display:flex;align-items:center;gap:10px;min-height:44px;margin:16px 0;line-height:1.4}.unlock input{display:inline-block;width:18px;height:18px;min-height:0;margin:0;flex-shrink:0}
.jobfilters{display:flex;gap:20px;max-width:760px;margin-top:28px}.jobfilters>label:first-child{flex:1}.jobfilters>label{min-width:0}.jobfilters select{min-width:150px}@media(max-width:650px){.jobfilters{display:block}.jobfilters label{margin-bottom:12px}}
