/* ---------- Ilustrações das telas (scripts/mockups.py) ---------- */
.mk-stage{position:relative;padding:44px 0 44px 44px;border-radius:28px;overflow:hidden;isolation:isolate;min-height:300px;font-family:var(--flye-font);text-align:left}
.mk-tone-a{background:linear-gradient(120deg,#8fb0f2 0%,#a7cdee 55%,#c8e9ee 100%)}
.mk-tone-b{background:linear-gradient(120deg,#b6d4f5 0%,#9fc6f0 45%,#c4e3f2 100%)}
.mk-stage:after{content:'';position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent);z-index:-1}
.mk-glass{padding:14px 0 14px 14px;border-radius:24px 0 0 24px;background:rgba(255,255,255,.35);border:1.5px solid rgba(255,255,255,.75);border-right:0;box-shadow:0 20px 50px -24px rgba(4,30,90,.45)}
.mk-card{padding:24px 26px;border-radius:18px 0 0 18px;background:#fff;min-width:440px}
.mk-title{font-size:17px;font-weight:700;color:#0d2147;margin-bottom:16px;letter-spacing:-.01em}
.mk-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:10px;align-items:center;padding:12px 14px;margin-bottom:8px;border:1px solid #e8edf5;border-radius:12px;font-size:13.5px;color:#3a4a63;white-space:nowrap}
.mk-row>span{overflow:hidden;text-overflow:ellipsis}
.mk-row.has-box{grid-template-columns:22px repeat(var(--cols),minmax(0,1fr))}
.mk-head{border:0;border-bottom:1px solid #eef2f7;border-radius:0;padding-top:0;font-size:12.5px;color:#8a97ab;margin-bottom:10px}
.mk-row.is-sel{border-color:#9cc3ea;box-shadow:0 8px 20px -14px rgba(0,88,254,.5)}
.mk-row.is-fade{opacity:.4}
.mk-box{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;border:1.5px solid #cdd6e3;background:#fff}
.mk-box.is-on{background:#3d8ee0;border-color:#3d8ee0;color:#fff}
.mk-box svg{width:12px;height:12px}
.mk-chip{display:inline-block;padding:4px 10px;border-radius:7px;font-size:12px;font-weight:700;white-space:nowrap}
.mk-ok{background:#dcf5e7;color:#13824a}
.mk-wait{background:#fdefc8;color:#946200}
.mk-info{background:#ddeefb;color:#1661a8}
.mk-bad{background:#fde3e1;color:#b8332a}
.mk-actions{display:flex;justify-content:flex-end;padding-right:6px;margin-top:6px}
.mk-btn{padding:9px 18px;border-radius:999px;background:linear-gradient(90deg,#0a5ad8,#3da2e6);color:#fff;font-size:13px;font-weight:600}
.mk-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.mk-kpis div{padding:12px 14px;border-radius:12px;background:#f5f8fc}
.mk-kpis small{display:block;font-size:11.5px;color:#8a97ab}
.mk-kpis b{display:block;margin-top:2px;font-size:16px;color:#0d2147;letter-spacing:-.02em;white-space:nowrap}
.mk-kpis em{display:inline-block;margin-top:4px;font-style:normal;font-size:11px;font-weight:700;padding:2px 6px;border-radius:5px}
.mk-bars{display:flex;align-items:flex-end;gap:16px;height:120px;padding:0 8px;border-bottom:1px solid #eef2f7}
.mk-bars div{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;height:100%}
.mk-bars i{display:block;width:14px;border-radius:5px 5px 0 0}
.mk-bars .in,.mk-legend .in:before{background:linear-gradient(#3da2e6,#0a5ad8)}
.mk-bars .out,.mk-legend .out:before{background:#cfdcee}
.mk-bars small{position:absolute;bottom:-22px;font-size:11px;color:#8a97ab}
.mk-legend{display:flex;gap:16px;margin-top:30px;font-size:12px;color:#5b6b82}
.mk-legend span:before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mk-lines{display:grid;gap:8px;margin-bottom:14px}
.mk-lines span{display:flex;justify-content:space-between;gap:16px;padding:11px 14px;border:1px solid #e8edf5;border-radius:12px;font-size:13.5px;color:#5b6b82}
.mk-lines b{color:#0d2147;font-weight:600;white-space:nowrap}
.mk-pay{display:flex;gap:8px;margin-bottom:12px}
.mk-pay span{flex:1;text-align:center;padding:10px;border:1px solid #e1e8f2;border-radius:10px;font-size:13px;font-weight:600;color:#5b6b82}
.mk-pay .is-on{border-color:#3d8ee0;background:#eef6ff;color:#0a5ad8}
.mk-steps{list-style:none;display:flex;gap:6px;margin:0 0 16px;padding:0}
.mk-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:#8a97ab;text-align:center}
.mk-steps i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid #d7e0ec;background:#fff}
.mk-steps svg{width:14px;height:14px}
.mk-steps .is-done i{background:#13a35a;border-color:#13a35a;color:#fff}
.mk-steps .is-now i{border-color:#e0a100;box-shadow:0 0 0 4px #fdefc8}
.mk-steps .is-now{color:#946200;font-weight:700}
.mk-tables{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mk-tables span{display:grid;gap:2px;padding:14px 10px;border-radius:12px;border:1px solid #e1e8f2;text-align:center}
.mk-tables b{font-size:16px;color:#0d2147}
.mk-tables small{font-size:11.5px;color:#8a97ab}
.mk-tables .is-busy{background:#eef6ff;border-color:#b9d6f5}
.mk-tables .is-busy small{color:#1661a8;font-weight:700}
.mk-tables .is-bill{background:#fdefc8;border-color:#f2d27a}
.mk-tables .is-bill small{color:#946200;font-weight:700}
.mk-float{position:absolute;z-index:2;width:min(300px,72%);padding:16px 18px;border-radius:16px;background:#fff;border:1.5px solid #b9d6f5;box-shadow:0 24px 50px -20px rgba(4,30,90,.45)}
.mk-float.mk-br{right:22px;bottom:18px}
.mk-float.mk-bl{left:22px;bottom:18px}
.mk-float.mk-tr{right:22px;bottom:18px}
.mk-float-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mk-float-value{font-size:16px;color:#0d2147;white-space:nowrap}
.mk-float p{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px;font-weight:600;color:#0d2147}
.mk-float p svg{flex:none;width:20px;height:20px;color:#3d8ee0;margin-top:1px}
.mk-float small{display:block;font-weight:500;font-size:12.5px;color:#7a889c;margin-top:2px}
.fp-hero-visual .mk-stage{box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.fp-howto-visual .mk-stage{min-height:0}
@media(max-width:720px){
  .mk-stage{padding:28px 0 28px 22px;min-height:0}
  .mk-card{min-width:380px;padding:18px}
  .mk-float{position:relative;inset:auto!important;width:auto;margin:14px 22px 0 0}
}

/* Celular ilustrado (medidas em em: o tamanho acompanha o font-size do contêiner) */
.mk-phone{width:300px;max-width:100%;margin:0 auto;padding:10px;border-radius:44px;background:#0b1220;box-shadow:0 40px 80px -30px rgba(4,13,34,.55),inset 0 0 0 2px #2a3446;font-size:14px}
.mk-phone .mk-screen{border-radius:34px}
.mk-screen{position:relative;overflow:hidden;background:#f5f8fc;padding:0 1.1em 1.3em;font-family:var(--flye-font);color:#0d2147;text-align:left;min-height:38em}
.mk-statusbar{display:flex;justify-content:space-between;align-items:center;padding:1em .4em .6em}
.mk-statusbar b{font-size:.85em}
.mk-statusbar i{width:1.6em;height:.75em;border-radius:.25em;border:1.5px solid #0d2147}
.mk-app-head{padding:.4em .2em 1em}
.mk-app-head small{display:block;font-size:.78em;color:#7a889c}
.mk-app-head b{font-size:1.35em;letter-spacing:-.02em}
.mk-app-item{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.8em .9em;margin-bottom:.55em;border-radius:1em;background:#fff;border:1px solid #e6ecf5}
.mk-app-item.is-on{border-color:#b9d6f5;box-shadow:0 .5em 1.2em -.8em rgba(0,88,254,.45)}
.mk-app-item b{display:block;font-size:.92em}
.mk-app-item small{font-size:.8em;color:#7a889c}
.mk-step{display:flex;align-items:center;gap:.55em}
.mk-step i{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:#eef2f8;color:#5b6b82;font-style:normal;font-weight:700}
.mk-step i.is-plus{background:#0a5ad8;color:#fff}
.mk-step b{min-width:.9em;text-align:center;font-size:.92em}
.mk-app-total{display:flex;justify-content:space-between;align-items:baseline;padding:.9em .3em .7em;font-size:.95em;color:#5b6b82}
.mk-app-total b{font-size:1.25em;color:#0d2147}
.mk-app-btn{padding:.95em;border-radius:999px;background:linear-gradient(90deg,#0a5ad8,#3da2e6);color:#fff;text-align:center;font-weight:700;font-size:.92em}
.mk-app-search{margin-bottom:.9em;padding:.75em 1em;border-radius:.9em;background:#fff;border:1px solid #e6ecf5;font-size:.82em;color:#9aa6b8}
.mk-app-order{display:flex;justify-content:space-between;gap:.6em;padding:.85em .9em;margin-bottom:.55em;border-radius:1em;background:#fff;border:1px solid #e6ecf5}
.mk-app-order small{display:block;font-size:.74em;color:#7a889c}
.mk-app-order b{font-size:.88em}
.mk-app-right{display:flex;flex-direction:column;align-items:flex-end;gap:.35em}
.mk-app-right .mk-chip{font-size:.7em;padding:.25em .6em}
.mk-app-fab{position:absolute;right:1.1em;bottom:1.2em;display:grid;place-items:center;width:2.8em;height:2.8em;border-radius:50%;background:#0a5ad8;color:#fff;font-size:1.3em;box-shadow:0 .6em 1.2em -.5em rgba(10,90,216,.8)}
.mk-app-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.mk-app-tile{display:flex;flex-direction:column;align-items:center;gap:.8em;padding:1.5em .5em 1.3em;border-radius:1em;background:#fff;border:1px solid #e6ecf5;box-shadow:0 .5em 1.2em -.9em rgba(13,33,71,.35);text-align:center}
.mk-app-tile i{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:#0a5ad8;color:#fff;font-style:normal;font-weight:600;font-size:1.25em;line-height:1}
.mk-app-tile b{font-size:.8em;line-height:1.25}
.mk-app-login{display:flex;flex-direction:column;padding:3em .5em 0}
.mk-app-login img{width:62%;height:auto;margin:0 auto 4.2em}
.mk-app-login>b{margin-bottom:1.1em;text-align:center;font-size:1.2em;letter-spacing:-.02em}
.mk-app-login small{margin:0 0 .45em .2em;font-size:.78em;font-weight:700;color:#0d2147}
.mk-app-input{display:block;margin-bottom:1em;padding:.85em 1em;border-radius:.9em;background:#fff;border:1px solid #e6ecf5;font-size:.82em;color:#9aa6b8}
.mk-app-login .mk-app-btn{margin-top:.5em}
/* No passo a passo o celular fica ao lado do título (fixo ao rolar): um pouco menor para caber na tela */
.fp-howto-visual .mk-phone{width:252px;padding:8px;border-radius:38px;font-size:11.8px}
.fp-howto-visual .mk-phone .mk-screen{border-radius:30px}
.fh-phone .mk-screen{font-size:7px;border-radius:22px;min-height:0;aspect-ratio:500/1010}