body.app{background:#f4f1ea}
.top{display:flex;align-items:center;gap:14px;background:#fff;border-bottom:3px solid var(--ink);padding:6px 18px;position:sticky;top:0;z-index:20}
.top img{height:44px}.top .sp{flex:1}.top b{font-family:'Bricolage Grotesque';font-size:1.1rem}
.shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100vh - 58px)}
#side{background:var(--forest);padding:16px;display:flex;flex-direction:column;gap:6px}
#side button{text-align:left;padding:10px 14px;border-radius:12px;border:0;background:transparent;color:#fff;font:600 1rem Figtree,sans-serif;cursor:pointer}
#side button:hover{background:rgba(255,255,255,.12)}#side button[aria-current=true]{background:var(--lamp);color:var(--ink)}
#main{padding:28px;min-width:0}#main h1{font-size:2.4rem;margin-bottom:20px}#main h2{font-size:1.5rem;margin:28px 0 12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:var(--bg,#fff);border:3px solid var(--ink);border-radius:20px;padding:16px}.kpi span{font-weight:600}.kpi b{display:block;font:800 2rem 'Bricolage Grotesque'}
.box{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:18px;margin-bottom:14px}.box h2{margin-top:0!important}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.row label{font-size:.9rem}
select{font:inherit;padding:10px;border:3px solid var(--ink);border-radius:14px;background:var(--paper)}
.card select,.card input{padding:6px;border-width:2px;border-radius:10px;width:100%;font-size:.88rem}.card label{display:block;margin-top:6px;font-size:.82rem}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:3px solid var(--ink);border-radius:16px;overflow:hidden;font-size:.95rem;margin-bottom:16px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid #e3e0d6}.tbl th{background:var(--sage)}
.board{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px}.col{min-width:235px;flex:0 0 235px;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:12px}.col h3{font-size:1.1rem}
.card{border:2px solid var(--ink);border-radius:12px;padding:10px;margin-top:10px;background:var(--paper);font-size:.92rem}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;border:2px solid var(--ink);font-size:.8rem;font-weight:600}
.tag.ok{background:var(--sage)}.tag.mid{background:var(--lamp)}.tag.bad{background:var(--blush)}.tag.up{background:#fff}
.bar{display:flex;align-items:center;gap:10px;margin:7px 0}.bar span{min-width:120px}.bar i{display:block;height:18px;background:var(--forest);border-radius:6px}
a.pill{text-decoration:none;display:inline-block;color:var(--ink)}
dialog{border:3px solid var(--ink);border-radius:22px;padding:24px;max-width:600px;width:calc(100% - 32px)}dialog::backdrop{background:rgba(15,42,28,.55)}
.auth-card{background:#fff;border:3px solid var(--ink);border-radius:28px;padding:30px;max-width:460px;margin:0 auto}.auth-card h1{font-size:2.4rem;margin-bottom:16px}
.roles{display:flex;gap:8px;margin-bottom:16px}.hint{background:var(--lamp);border:2px solid var(--ink);border-radius:14px;padding:10px 14px;margin-top:14px;font-size:.92rem}
#err{color:#b3261e;font-weight:600;min-height:1.4em}
.lg{background:var(--ink);color:#fff!important}
@media(max-width:820px){.shell{grid-template-columns:1fr}#side{flex-direction:row;overflow-x:auto}.two{grid-template-columns:1fr}#main{padding:18px}}
@media print{body *{visibility:hidden}.receipt,.receipt *{visibility:visible}.receipt{position:absolute;left:0;top:0;width:100%}}
dialog.wide{max-width:960px}
.af .afs{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:20px 22px;margin-bottom:16px}.af h3{font-size:1.4rem;margin-bottom:12px}.af h4{margin:16px 0 8px}.af form,form.af{border:0;padding:0;background:none;display:block}
.af .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.af .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.af label{margin-bottom:10px}
.afg{display:grid;grid-template-columns:1fr 190px;gap:20px;align-items:start}.ph{border:3px dashed var(--ink);border-radius:16px;padding:10px;text-align:center;display:grid;gap:8px;justify-items:center}.ph img{width:150px;height:190px;object-fit:cover;border-radius:10px}
.tw{overflow-x:auto}.af .tbl td{padding:4px}.af .tbl input{min-width:100px;padding:7px;border-width:2px;border-radius:10px;width:100%}
.inl{display:inline-flex!important;grid-template-columns:none;align-items:center;gap:8px;margin-right:16px}.inl input{width:auto;accent-color:var(--forest)}
.req{color:#c0392b}#afm{color:#b3261e;font-weight:600;min-height:1.4em;margin:6px 0}.af details{margin-bottom:14px}.af ol{padding-left:22px}.office{background:var(--lamp)!important}
.appview h2{font-size:1.6rem}.appview h3{font-size:1.1rem;margin:14px 0 6px}.ahd{text-align:center;line-height:1.3}.atop{display:grid;grid-template-columns:1fr 170px;gap:16px;align-items:start}.appview .tbl{font-size:.85rem;margin-bottom:8px}.appview .tbl th{width:34%}
@media(max-width:700px){.af .g2,.af .g3,.afg,.atop{grid-template-columns:1fr}}
@media print{dialog,dialog.wide{position:static!important;max-width:none;max-height:none!important;overflow:visible!important;border:0}.appview{width:100%}}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.mlist{max-height:360px;overflow:auto;border:2px solid var(--ink);border-radius:14px;background:#fff}
.mrow{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid #e3e0d6;margin:0;font-weight:400}.mrow input[type=checkbox]{width:20px;height:20px;accent-color:var(--forest)}.mrow.dis{opacity:.5}.mrow>span:nth-child(2){flex:1}.num{font-weight:600;font-size:.9rem}
.prev{background:#dcf8c6;border:2px solid var(--ink);border-radius:16px;padding:14px;white-space:pre-wrap;margin-top:6px;max-height:300px;overflow:auto}.warn{color:#b3261e;font-weight:600;min-height:1.2em;margin:6px 0}
.mgrid .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mgrid textarea{width:100%}
@media(max-width:900px){.mgrid{grid-template-columns:1fr}}