:root{--bg:#f4f3ef;--card:#fff;--ink:#1a1a1a;--muted:#6b6b6b;--line:#e2ded6;--gold:#b8923f;--gold2:#e9d9b4;--ok:#2e7d32;--warn:#c77700;--bad:#b3261e;--blue:#2b5fa8}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;color:var(--ink)}
button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
button.gold{background:var(--gold);color:#fff;border-color:var(--gold)}
button.danger{color:var(--bad);border-color:#efc4c0}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold2);border-color:var(--gold)}
.hidden{display:none!important}
header{position:sticky;top:0;z-index:20;background:#111;color:#fff;display:flex;align-items:center;gap:10px;padding:8px 14px}
header .brand{font-weight:700;letter-spacing:.5px;color:var(--gold2)}
nav{display:flex;gap:4px;margin-left:10px;flex-wrap:wrap}
nav button{background:transparent;color:#ddd;border:0;padding:8px 12px;border-radius:8px}
nav button.active{background:#2a2a2a;color:#fff}
header .spacer{flex:1}header .who{font-size:13px;color:#bbb}
main{padding:14px;max-width:1500px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
h2{margin:0 0 10px;font-size:18px}h3{margin:14px 0 6px;font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.muted{color:var(--muted)}.small{font-size:13px}.right{text-align:right}.b{font-weight:600}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#eee}
.pill.previsto{background:#e8eef9;color:var(--blue)}.pill.entrato{background:#fff0d6;color:var(--warn)}.pill.eseguito{background:#e3f3e4;color:var(--ok)}.pill.cancellato,.pill.no_show{background:#f8dcd9;color:var(--bad)}
table{width:100%;border-collapse:collapse}td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:12px;color:var(--muted);text-transform:uppercase}
tr.click{cursor:pointer}tr.click:hover{background:#faf7f0}
/* login */
.login{max-width:380px;margin:12vh auto}
/* agenda */
.agenda{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(150px,1fr));border:1px solid var(--line);border-radius:14px;overflow:auto;background:#fff;max-height:calc(100vh - 170px)}
.agenda .head{position:sticky;top:0;background:#fafaf7;z-index:5;padding:8px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);font-weight:600;text-align:center}
.agenda .time{border-left:0;font-size:11px;color:var(--muted);text-align:right;padding:0 6px;height:var(--h);border-bottom:1px dotted #eee}
.agenda .col{position:relative;border-left:1px solid var(--line);height:calc(var(--h) * var(--slots))}
.agenda .slot{height:var(--h);border-bottom:1px dotted #eee;cursor:pointer}
.agenda .slot:hover{background:#faf5e8}
.agenda .slot.h{border-bottom:1px solid #e6e2d8}
.ev{position:absolute;left:3px;right:3px;border-radius:8px;padding:4px 7px;font-size:12px;overflow:hidden;cursor:pointer;border-left:4px solid var(--gold);background:#fdf6e6;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ev.entrato{background:#fff0d6}.ev.eseguito{background:#e3f3e4;border-left-color:var(--ok)}.ev.cancellato,.ev.no_show{background:#f3f3f3;color:#999;text-decoration:line-through}
.ev.nota{background:#eef1f6;border-left-color:#8a97b3}.ev.blocco{background:repeating-linear-gradient(45deg,#eee,#eee 6px,#f7f7f7 6px,#f7f7f7 12px);border-left-color:#999}
.ev .t{font-weight:600}
/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:30px 10px;overflow:auto}
.modal{background:#fff;border-radius:16px;padding:18px;width:min(640px,100%);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal.wide{width:min(980px,100%)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
label.f{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.sugg{position:absolute;z-index:60;background:#fff;border:1px solid var(--line);border-radius:10px;max-height:240px;overflow:auto;width:100%;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.sugg div{padding:8px 10px;cursor:pointer}.sugg div:hover{background:#faf5e8}
.rel{position:relative}
/* cassa */
.cassa{display:grid;grid-template-columns:260px 1fr 360px;gap:12px}
@media(max-width:1100px){.cassa{grid-template-columns:1fr}}
.list button{display:block;width:100%;text-align:left;margin-bottom:6px}
.list button.sel{border-color:var(--gold);background:#fdf6e6}
.cat{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cat button{padding:6px 10px;border-radius:999px;font-size:13px}
.cat button.sel{background:var(--ink);color:#fff}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:52vh;overflow:auto}
.tiles button{text-align:left;padding:10px;border-radius:12px}
.tiles .p{color:var(--gold);font-weight:600}
.tot{font-size:26px;font-weight:700}
.pay button{flex:1;padding:12px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:10px;z-index:99}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.kpi .card{text-align:center}.kpi .v{font-size:24px;font-weight:700}