:root{
  --paper:#FAF9F5; --ink:#14161A; --cobalt:#1F3BE8; --graphite:#5A6068;
  --hair:#DDD9CF; --wash:#EEF0FE; --ok:#1a7f4b; --bad:#c0392b; --radius:10px;
}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html,body{margin:0;height:100%}
body{font:15px/1.5 Inter,system-ui,Arial,sans-serif;color:var(--ink);background:var(--paper)}
.hidden{display:none!important}
.muted{color:var(--graphite)}
.msg{min-height:1.2em;margin:.4rem 0 0;font-size:.9em}
.msg.bad{color:var(--bad)} .msg.ok{color:var(--ok)}
button{font:inherit;cursor:pointer}
.primary{background:var(--cobalt);color:#fff;border:0;border-radius:var(--radius);padding:.7rem 1.1rem;font-weight:600}
.primary:hover{filter:brightness(1.08)}
.link{background:none;border:0;color:var(--cobalt);text-decoration:underline;padding:.3rem 0}
.ghost{background:#fff;border:1px solid var(--hair);border-radius:8px;padding:.5rem .8rem}
.ghost:hover{border-color:var(--cobalt)}

/* centred auth screens (config, login) — Aeris Facades brand (dark, louver mark,
   square edges) to match the public site gate. .card is used ONLY here. */
.screen.center{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:2rem 1.5rem 8rem;background:var(--ink)}
.card{background:#181b21;border:1px solid #2a2d33;border-radius:0;padding:2.4rem 2.2rem;
  max-width:400px;width:100%;color:var(--paper);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.card::before{content:"";display:block;width:60px;height:46px;margin:0 auto 22px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cg stroke='%231F3BE8' stroke-width='4' stroke-linecap='square'%3E%3Cline x1='6' y1='9' x2='58' y2='5'/%3E%3Cline x1='6' y1='21' x2='58' y2='17'/%3E%3Cline x1='6' y1='33' x2='58' y2='29'/%3E%3Cline x1='6' y1='45' x2='58' y2='41'/%3E%3C/g%3E%3C/svg%3E")}
.card h1{margin:0;text-align:center;font-size:1.3rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper)}
.card .muted{text-align:center;color:#8b9097;font-size:.82rem;margin:.55rem 0 0;letter-spacing:.02em}
#screen-login .muted{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem}
.card label{display:block;margin:1.25rem 0 .3rem;font-weight:600;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:#8b9097}
.card input{width:100%;margin-top:.3rem;padding:.75rem .8rem;border:1px solid #2a2d33;
  border-radius:0;font:inherit;background:#23272e;color:var(--paper)}
.card input::placeholder{color:#5A6068}
.card input:focus{outline:none;border-color:var(--cobalt)}
.card .primary{width:100%;margin-top:1.5rem;background:var(--cobalt);color:#fff;
  border:1px solid var(--cobalt);border-radius:0;padding:.85rem;font-weight:600;
  letter-spacing:.02em;transition:.15s}
.card .primary:hover{background:var(--paper);color:var(--ink);filter:none}
.card .link{display:block;width:100%;text-align:center;margin-top:1.1rem;color:#6e747c;
  text-decoration:none;font-size:.8rem;letter-spacing:.04em}
.card .link:hover{color:var(--paper);text-decoration:underline}
.card .msg{text-align:center}
.card .msg.bad{color:#ff8a8a}
.card .msg.ok{color:#7fd6a3}

/* app shell */
#screen-app{display:flex;height:100%}
.side{width:230px;flex:0 0 230px;background:#fff;border-right:1px solid var(--hair);display:flex;flex-direction:column;padding:1.1rem}
.brand{font-weight:800;letter-spacing:.02em;font-size:1.2rem}
.brand span{color:var(--cobalt)}
.brand small{display:block;font-weight:600;letter-spacing:.16em;font-size:.6rem;color:var(--graphite);margin-top:.2rem}
#nav{margin-top:1.4rem;display:flex;flex-direction:column;gap:2px;flex:1}
#nav button{text-align:left;background:none;border:0;border-radius:8px;padding:.55rem .7rem;color:var(--ink);font-weight:500}
#nav button:hover{background:var(--paper)}
#nav button.on{background:var(--wash);color:var(--cobalt);font-weight:700}
.side-foot{border-top:1px solid var(--hair);padding-top:.8rem;font-size:.85em;display:flex;flex-direction:column;gap:.2rem}
main{flex:1;overflow:auto;padding:2rem 2.4rem 140px}

/* list view */
.head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.head h2{margin:0;font-size:1.5rem}
.list{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:#fff}
.row{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border-bottom:1px solid var(--hair)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--paper)}
.row .thumb{width:46px;height:34px;object-fit:cover;border-radius:5px;background:var(--hair);flex:0 0 auto}
.row .rtitle{font-weight:600}
.row .rsub{color:var(--graphite);font-size:.85em}
.row .grow{flex:1;min-width:0}
.row .grow>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:.18rem .5rem;border:0;border-radius:99px;background:var(--wash);color:var(--cobalt);cursor:pointer}
.pill:hover{filter:brightness(.97)}
.pill.off{background:#f0eee8;color:var(--graphite)}
.pill.feat{display:inline-flex;align-items:center;gap:.15rem}
.pill.feat.on{background:#fbeccd;color:#8a5a00}
.pill.feat.off{background:#f0eee8;color:var(--graphite)}
.rowbtns{display:flex;gap:.4rem;flex:0 0 auto}

/* drag-to-reorder handle (replaces the old up/down arrows) */
.grip{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:22px;height:30px;padding:0;border:0;background:none;color:#b8b3a6;border-radius:6px;cursor:grab;touch-action:none}
.grip:hover{background:var(--paper);color:var(--ink)}
.grip:active{cursor:grabbing}
.grip:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px}
.row.dragging{opacity:.4}
.row.drop-before{box-shadow:inset 0 2px 0 0 var(--cobalt)}
.row.drop-after{box-shadow:inset 0 -2px 0 0 var(--cobalt)}

/* search toolbar above each list */
.toolbar{display:flex;align-items:center;gap:.8rem;margin:-.3rem 0 1rem}
.search{flex:0 0 340px;max-width:60%;padding:.55rem .8rem;border:1px solid var(--hair);border-radius:8px;font:inherit;background:#fff}
.search:focus{outline:2px solid var(--cobalt);border-color:transparent}
.toolbar .note{color:var(--graphite);font-size:.82em}

/* editor */
.form{max-width:720px}
.form .field{margin:0 0 1.1rem}
.form label{display:block;font-weight:600;font-size:.9em;margin-bottom:.3rem}
.form input[type=text],.form input[type=url],.form textarea,.form select{
  width:100%;padding:.6rem .7rem;border:1px solid var(--hair);border-radius:8px;font:inherit;background:#fff}
.form textarea{resize:vertical;min-height:70px}
.form textarea.lg{min-height:150px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--cobalt);border-color:transparent}
.checks{display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.checks label{font-weight:500;display:flex;align-items:center;gap:.35rem;margin:0}
.switch{display:flex;align-items:center;gap:.5rem;font-weight:500}
.formbar{position:sticky;top:0;z-index:5;background:linear-gradient(var(--paper) 72%,rgba(250,249,245,0));padding:.9rem 0 1.1rem;display:flex;gap:.7rem;align-items:center;margin-bottom:.4rem}
.hintbox{background:var(--wash);border:1px solid #d7dcfb;border-radius:8px;padding:.6rem .8rem;font-size:.85em;color:#33408a;margin-bottom:1rem}

/* photos */
.photos{display:flex;flex-wrap:wrap;gap:.7rem}
.photo{position:relative;width:120px}
.photo img{width:120px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--hair);display:block}
.photo .pbtns{display:flex;justify-content:space-between;margin-top:.2rem}
.photo .pbtns button{border:1px solid var(--hair);background:#fff;border-radius:5px;font-size:.7rem;padding:.1rem .35rem}
.addphoto{width:120px;height:84px;border:2px dashed var(--hair);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--graphite);background:#fff}
.addphoto:hover{border-color:var(--cobalt);color:var(--cobalt)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:50;max-width:90vw}
.toast.bad{background:var(--bad)} .toast.ok{background:var(--ok)}
.empty{padding:2.5rem;text-align:center;color:var(--graphite)}
.spin{padding:2.5rem;text-align:center;color:var(--graphite)}

/* case-study page builder */
.modwrap{display:flex;flex-direction:column;gap:.8rem;border:1px solid var(--hair);border-radius:10px;padding:.9rem;background:#fff}
.modcard{border:1px solid var(--hair);border-radius:10px;padding:.8rem .9rem;background:var(--paper)}
.modhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.modbtns{display:flex;gap:.3rem}
.modbtns button{border:1px solid var(--hair);background:#fff;border-radius:6px;width:28px;height:26px;font-size:.75rem;cursor:pointer}
.modbtns button:disabled{opacity:.3;cursor:default}
.modimg{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.6rem}
.modthumb{position:relative}
.modthumb img{width:150px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--hair);display:block}
.modthumb button{position:absolute;top:5px;right:5px;border:0;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:20px;height:20px;font-size:.7rem;cursor:pointer}
.modfield{margin-bottom:.55rem}
.modfield>label{display:block;font-size:.85em;font-weight:600;margin-bottom:.2rem}
.modfield input[type=text],.modfield textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--hair);border-radius:7px;font:inherit;background:#fff}
.modfield textarea{min-height:70px;resize:vertical}
.modadd{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}

/* page editor with live preview */
.pageedit{display:flex;gap:1.4rem;align-items:flex-start}
.pageedit-form{flex:1 1 46%;min-width:0}
.pageedit-preview{flex:1 1 54%;position:sticky;top:0;height:calc(100vh - 120px);border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(20,22,26,.06)}
.pvlabel{flex:none;font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--graphite);padding:.5rem .75rem;border-bottom:1px solid var(--hair);background:var(--paper)}
.pageedit-preview iframe{flex:1;width:100%;border:0;display:block;background:#fff}
@media(max-width:1080px){.pageedit{flex-direction:column}.pageedit-preview{position:static;width:100%;height:70vh}}

/* split editor (project editor): left form and right preview each get their OWN scrollbar;
   the page itself does not scroll. desktop only — narrow screens fall back to normal flow above. */
@media(min-width:1081px){
  main.split-view{overflow:hidden;display:flex;flex-direction:column;padding-bottom:1.4rem}
  main.split-view .head{flex:0 0 auto}
  main.split-view .pageedit{flex:1 1 auto;min-height:0;align-items:stretch}
  main.split-view .pageedit-form{overflow-y:auto;min-height:0;padding-right:.7rem;padding-bottom:120px}
  main.split-view .pageedit-preview{position:static;height:auto;min-height:0}
}

/* ---- collapsible page-builder sections + per-device visibility pills ---- */
.modhead{gap:.5rem;margin-bottom:0}
.modtoggle{display:flex;align-items:center;gap:.45rem;flex:1 1 auto;min-width:0;background:none;border:0;padding:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.modtoggle b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modtoggle:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px}
.modcaret{flex:0 0 auto;font-size:.7rem;color:var(--graphite);transition:transform .15s ease}
.modcard.open .modcaret{transform:rotate(90deg)}
.modcard:not(.open) .modbody{display:none}
.modbody{margin-top:.7rem}
.modvis{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;margin-top:.5rem}
.modvis-lbl{font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite);margin-right:.15rem}
.vpill{font-size:.62rem;font-weight:700;letter-spacing:.03em;padding:.22rem .5rem;border:0;border-radius:0;background:#e7e4dc;color:var(--graphite);cursor:pointer}
.vpill:hover{filter:brightness(.97)}
.vpill.on{background:var(--cobalt);color:#fff}

/* ---- preview header bar + Desktop/Tablet/Mobile device toggle ---- */
.pvbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.4rem .55rem .4rem .75rem;border-bottom:1px solid var(--hair);background:var(--paper)}
.pvbar .pvlabel{flex:1 1 auto;min-width:0;padding:0;border:0;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvdevices{display:flex;gap:.25rem;flex:0 0 auto}
.pvdev{font-size:.66rem;font-weight:700;letter-spacing:.04em;padding:.28rem .6rem;border:0;border-radius:0;background:#e7e4dc;color:var(--graphite);cursor:pointer}
.pvdev:hover{filter:brightness(.97)}
.pvdev.on{background:var(--cobalt);color:#fff}

/* ---- scaled responsive preview stage (the iframe is rendered at a true device
        width, then transform-scaled to fit the pane) ---- */
.pvstage{flex:1;min-height:0;overflow:auto;background:#e9e7e1;display:flex;justify-content:center;align-items:flex-start;padding:12px}
.pvsizer{flex:0 0 auto;margin:0 auto}
.pvscaler{transform-origin:top left;background:#fff;box-shadow:0 6px 24px rgba(20,22,26,.14);overflow:hidden}
.pvscaler iframe{display:block;width:100%;height:100%;border:0;background:#fff}