:root{
  --ink:#111;
  --paper:oklch(0.96 0.006 95);
  --accent:oklch(0.5 0.21 264);
  --accent-soft:oklch(0.8 0.12 264);
  --row-hover:oklch(0.93 0.02 264);
  --row-sel:oklch(0.9 0.045 264);
  --muted:rgba(17,17,17,0.55);
  --err:oklch(0.55 0.2 29);
}
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:hidden}
body{background:var(--paper);font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;color:var(--ink);min-width:0;overflow-x:hidden;-webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom,0px)}
::selection{background:var(--accent);color:#fff}
img,svg{max-width:100%;height:auto}
.tab-short{display:none}
.screen-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ============ TOPBAR ============ */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 30px;border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:40;padding-top:calc(18px + env(safe-area-inset-top,0px))}
.brand{display:flex;align-items:baseline;gap:6px;min-width:0}
.logo{font-size:26px;font-weight:700;letter-spacing:-0.03em}
.logo-star{font-size:26px;font-weight:700;color:var(--accent)}
.logo-sub{font-size:11px;font-weight:600;letter-spacing:0.1em;color:var(--muted);margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:8px;min-width:0}
.tab{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:0.06em;padding:8px 14px;border:2px solid var(--ink);background:transparent;color:var(--ink);user-select:none;white-space:nowrap;flex:none}
.tab:hover{opacity:0.8}
.tab.on{background:var(--ink);color:#fff}
.tb-right{display:flex;align-items:center;gap:10px;flex:none}
.tb-date{font-size:12px;font-weight:700;letter-spacing:0.08em;white-space:nowrap}
.avatar{width:34px;height:34px;border:2px solid var(--ink);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;cursor:pointer;user-select:none}
.avatar:hover{opacity:0.85}

/* ============ BUTTONS / CHIPS ============ */
.btn{display:inline-block;cursor:pointer;font-size:12.5px;font-weight:700;letter-spacing:0.02em;border:2px solid var(--ink);padding:8px 14px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink);user-select:none;font-family:inherit}
.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.btn-accent{background:var(--accent);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-flat{box-shadow:none}
.btn-flat:hover{transform:none;box-shadow:none;opacity:0.85}
.btn-danger{background:#fff;color:var(--err);border-color:var(--err);box-shadow:3px 3px 0 var(--err)}
.btn-danger:hover{box-shadow:2px 2px 0 var(--err)}
.btn[disabled]{opacity:0.4;pointer-events:none}
.chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.08em;border:1.5px solid var(--ink);padding:3px 8px}
.chip-solid{background:var(--ink);color:#fff}
.chip-accentbg{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip-dashed{border-style:dashed}
.chip-ghost{background:rgba(17,17,17,0.07);color:rgba(17,17,17,0.75);border-color:transparent}
.badge{font-size:12px;font-weight:700;background:var(--accent);color:#fff;padding:3px 8px}
.badge-dark{background:var(--ink)}

/* ============ SCREEN SCAFFOLD ============ */
.screen{padding:24px 30px 34px}
.screen-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.screen-title{font-size:20px;font-weight:700;letter-spacing:0.01em}
.screen-sub{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:3px}

/* ============ DASHBOARD ============ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:2px solid var(--ink)}
.kpi{padding:22px 30px;border-right:2px solid var(--ink)}
.kpi:last-child{border-right:none}
.kpi-label{font-size:11px;font-weight:700;letter-spacing:0.12em;color:var(--muted)}
.kpi-row{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.kpi-val{font-size:42px;font-weight:700;letter-spacing:-0.03em}
.kpi-val.off{color:rgba(17,17,17,0.25)}
.kpi-sub{font-size:12px;font-weight:600;color:rgba(17,17,17,0.6)}
.dash-body{padding:24px 30px 30px}
.dash-boardhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.dash-boardtitle{font-size:16px;font-weight:700;letter-spacing:0.02em}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.colhead{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--ink);background:var(--ink);color:#fff;padding:8px 12px}
.colhead-name{font-size:12.5px;font-weight:700;letter-spacing:0.04em}
.colhead-count{font-size:11px;font-weight:600;color:var(--accent-soft)}
.apptcard{border:2px solid var(--ink);background:#fff;padding:10px 12px;margin-top:10px;cursor:pointer}
.apptcard:hover{background:var(--row-hover)}
.apptcard.hl{box-shadow:3px 3px 0 rgba(17,17,17,0.9)}
.apptcard.live{background:var(--accent);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.apptcard.live:hover{background:var(--accent);opacity:0.93}
.apptcard-time{font-size:11px;font-weight:700;color:var(--accent)}
.apptcard.live .apptcard-time{color:#fff}
.apptcard-name{font-size:14px;font-weight:700;margin-top:3px}
.apptcard-meta{font-size:11.5px;color:rgba(17,17,17,0.6);margin-top:2px}
.apptcard.live .apptcard-meta{color:rgba(255,255,255,0.75)}
.slotfree{border:2px dashed rgba(17,17,17,0.35);padding:10px 12px;margin-top:10px;color:rgba(17,17,17,0.5);cursor:pointer}
.slotfree:hover{border-color:var(--ink);color:var(--ink)}
.slotfree-time{font-size:11px;font-weight:700}
.slotfree-label{font-size:12px;font-weight:600;margin-top:3px}
.banner{display:flex;align-items:center;justify-content:space-between;margin-top:20px;border:2px solid var(--ink);background:var(--accent);color:#fff;padding:16px 22px;box-shadow:4px 4px 0 var(--ink)}
.banner-title{font-size:15px;font-weight:700;letter-spacing:0.02em}
.banner-sub{font-size:12px;opacity:0.8;margin-top:3px}
.banner .btn{box-shadow:none}
.banner .btn:hover{transform:none;opacity:0.9}
.closedbox{margin-top:20px;border:2px dashed rgba(17,17,17,0.4);padding:60px 0;text-align:center;color:rgba(17,17,17,0.5)}
.closedbox-title{font-size:22px;font-weight:700;letter-spacing:0.08em}
.closedbox-sub{font-size:13px;font-weight:600;margin-top:6px}

/* ============ CALENDARIO ============ */
.cal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cal-week{display:flex;gap:6px;align-items:stretch}
.weeknav{cursor:pointer;border:2px solid var(--ink);background:#fff;width:34px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;user-select:none}
.weeknav:hover{background:var(--ink);color:#fff}
.daychip{cursor:pointer;text-align:center;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:7px 0;width:58px;user-select:none}
.daychip:hover{opacity:0.8}
.daychip.on{background:var(--ink);color:#fff}
.daychip.closed{border-style:dashed;border-color:rgba(17,17,17,0.35);background:transparent;color:rgba(17,17,17,0.4)}
.daychip.today{border-color:var(--accent);border-style:solid}
.daychip.on.today{border-color:var(--ink)}
.daychip-w{font-size:10px;font-weight:700;letter-spacing:0.1em;opacity:0.7}
.daychip-n{font-size:16px;font-weight:700;margin-top:1px}
.cal-grid{display:flex;gap:14px;margin-top:20px}
.cal-hours{width:52px;flex:none;position:relative;margin-top:38px;height:840px}
.cal-hour{position:absolute;right:8px;transform:translateY(-6px);font-size:10.5px;font-weight:700;color:rgba(17,17,17,0.45);letter-spacing:0.04em}
.cal-col{flex:1;min-width:0}
.cal-colhead{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--ink);background:var(--ink);color:#fff;padding:8px 12px;height:38px}
.cal-colbody{position:relative;height:840px;border:2px solid var(--ink);border-top:none;background:#fff;overflow:hidden;cursor:copy}
.cal-line{position:absolute;left:0;right:0;pointer-events:none}
.cal-appt{position:absolute;left:6px;right:6px;border:2px solid var(--ink);background:#fff;color:var(--ink);overflow:hidden;cursor:pointer}
.cal-appt:hover{filter:brightness(0.96)}
.cal-appt .l1{line-height:1.2;font-weight:700;color:var(--accent);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.cal-appt .l2{line-height:1.2;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.cal-appt .l3{font-size:11px;line-height:1.2;margin-top:1px;color:rgba(17,17,17,0.6);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.cal-appt.done{border-color:rgba(17,17,17,0.3);color:rgba(17,17,17,0.4)}
.cal-appt.done .l1{color:rgba(17,17,17,0.4)}
.cal-appt.done .l3{color:rgba(17,17,17,0.35)}
.cal-appt.live{background:var(--accent);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.cal-appt.live .l1{color:#fff}
.cal-appt.live .l3{color:rgba(255,255,255,0.75)}
.cal-appt.wait{border-style:dashed}

/* ============ CLIENTI ============ */
.cli-search{border:2px solid var(--ink);background:#fff;padding:10px 14px;font-family:inherit;font-size:13px;font-weight:500;width:260px;outline:none;color:var(--ink)}
.cli-search:focus{border-color:var(--accent)}
.cli-layout{display:flex;gap:20px;margin-top:18px;align-items:flex-start}
.cli-table{flex:1;min-width:0;border:2px solid var(--ink);background:#fff}
.cli-thead{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:2px solid var(--ink);font-size:10.5px;font-weight:700;letter-spacing:0.12em;color:var(--muted)}
.cli-row{cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(17,17,17,0.12);background:#fff}
.cli-row:hover{background:var(--row-hover)}
.cli-row.sel{background:var(--row-sel)}
.cli-row:last-child{border-bottom:none}
.cell-name{flex:1.5;display:flex;align-items:center;gap:10px;min-width:0}
.cell-phone{width:120px;font-size:12.5px;font-weight:500;color:rgba(17,17,17,0.7)}
.cell-last{width:100px;font-size:12.5px;font-weight:600}
.cell-visits{width:56px;text-align:right;font-size:13px;font-weight:700}
.cell-spend{width:76px;text-align:right;font-size:13px;font-weight:700}
.cell-tag{width:100px;text-align:center}
.cli-av{width:30px;height:30px;flex:none;border:2px solid var(--ink);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
.cli-row.sel .cli-av{background:var(--accent);color:#fff}
.cli-nm{font-size:13.5px;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.cli-empty{padding:26px 16px;text-align:center;font-size:13px;font-weight:600;color:var(--muted)}
.panel{width:350px;flex:none;border:2px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink)}
.panel-head{padding:18px 20px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:14px}
.panel-av{width:48px;height:48px;flex:none;border:2px solid var(--ink);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.panel-name{font-size:17px;font-weight:700;line-height:1.15}
.panel-sub{font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.panel-edit{margin-left:auto;flex:none;cursor:pointer;border:2px solid var(--ink);background:#fff;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px}
.panel-edit:hover{background:var(--ink);color:#fff}
.panel-stats{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:2px solid var(--ink)}
.panel-stat{padding:12px 14px;border-right:1px solid rgba(17,17,17,0.15)}
.panel-stat:last-child{border-right:none}
.panel-statlabel{font-size:9.5px;font-weight:700;letter-spacing:0.1em;color:rgba(17,17,17,0.5)}
.panel-statval{font-size:20px;font-weight:700;margin-top:2px}
.panel-sec{padding:14px 20px;border-bottom:1px solid rgba(17,17,17,0.15)}
.panel-seclabel{font-size:10px;font-weight:700;letter-spacing:0.12em;color:rgba(17,17,17,0.5)}
.panel-note{font-size:12.5px;font-weight:500;line-height:1.5;margin-top:6px}
.panel-hist{padding:14px 20px 8px}
.hist-row{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(17,17,17,0.15)}
.hist-when{width:52px;flex:none;font-size:11px;font-weight:700;color:var(--accent)}
.hist-what{flex:1;font-size:12.5px;font-weight:600}
.hist-who{font-size:11px;font-weight:500;color:var(--muted)}
.hist-price{width:38px;text-align:right;font-size:12px;font-weight:700}
.panel-actions{display:flex;gap:10px;padding:16px 20px 20px}
.pa-btn{cursor:pointer;flex:1;text-align:center;border:2px solid var(--ink);padding:10px 0;font-size:12px;font-weight:700;letter-spacing:0.06em;user-select:none}
.pa-dark{background:var(--ink);color:#fff}
.pa-dark:hover{opacity:0.85}
.pa-light{background:#fff;color:var(--ink)}
.pa-light:hover{background:rgba(17,17,17,0.06)}

/* ============ SERVIZI / STAFF ============ */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.svc-card{border:2px solid var(--ink);background:#fff;padding:16px 18px;cursor:pointer}
.svc-card:hover{box-shadow:3px 3px 0 var(--ink)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start}
.svc-dur{font-size:11px;font-weight:600;color:rgba(17,17,17,0.5)}
.svc-name{font-size:17px;font-weight:700;margin-top:12px}
.svc-price{font-size:30px;font-weight:700;letter-spacing:-0.02em;margin-top:4px}
.svc-count{font-size:11px;font-weight:600;color:var(--muted);margin-top:10px}
.meter{height:6px;border:1.5px solid var(--ink);margin-top:6px}
.meter > div{height:100%;background:var(--accent)}
.meter.dark > div{background:var(--ink)}
.stf-card{border:2px solid var(--ink);background:#fff;cursor:pointer}
.stf-card:hover{box-shadow:3px 3px 0 var(--ink)}
.stf-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:2px solid var(--ink)}
.stf-av{width:44px;height:44px;flex:none;border:2px solid var(--ink);background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.stf-av.owner{background:var(--accent)}
.stf-name{font-size:15px;font-weight:700}
.stf-role{font-size:11px;font-weight:700;letter-spacing:0.08em;color:var(--muted);margin-top:2px}
.stf-role.owner{color:var(--accent)}
.stf-body{padding:14px 18px}
.stf-skills{display:flex;flex-wrap:wrap;gap:6px}
.skill{font-size:10px;font-weight:700;letter-spacing:0.06em;border:1.5px solid var(--ink);padding:3px 8px}
.stf-meterrow{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin-top:14px}
.stf-meterlabel{letter-spacing:0.08em;color:var(--muted)}
.stf-money{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.stf-moneylabel{font-size:11px;font-weight:700;letter-spacing:0.08em;color:var(--muted)}
.stf-moneyval{font-size:18px;font-weight:700}
.stf-note{font-size:11px;font-weight:600;color:var(--muted);margin-top:10px;border-top:1px dashed rgba(17,17,17,0.2);padding-top:10px}

/* ============ MARKETING ============ */
.mkt-layout{display:grid;grid-template-columns:1fr 350px;gap:20px;margin-top:18px;align-items:start}
.seg-card{border:2px solid var(--ink);background:#fff;padding:14px 16px}
.seg-card.dark{background:var(--ink);color:#fff}
.seg-label{font-size:10px;font-weight:700;letter-spacing:0.1em;color:var(--muted)}
.seg-card.dark .seg-label{color:var(--accent-soft)}
.seg-val{font-size:34px;font-weight:700;margin-top:4px}
.seg-sub{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px}
.seg-card.dark .seg-sub{color:rgba(255,255,255,0.7)}
.camp-box{border:2px solid var(--ink);background:#fff;margin-top:16px}
.camp-boxhead{padding:12px 18px;border-bottom:2px solid var(--ink);font-size:12px;font-weight:700;letter-spacing:0.08em}
.camp-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid rgba(17,17,17,0.12)}
.camp-row:last-child{border-bottom:none}
.camp-row.clickable{cursor:pointer}
.camp-row.clickable:hover{background:var(--row-hover)}
.camp-name{font-size:14px;font-weight:700}
.camp-sub{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
.camp-sent{font-size:12px;font-weight:600;color:rgba(17,17,17,0.7)}
.camp-result{font-size:12px;font-weight:700;color:var(--accent)}
.camp-rev{font-size:12px;font-weight:700}
.sms-panel{border:2px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink)}
.sms-panelhead{padding:12px 18px;border-bottom:2px solid var(--ink);font-size:12px;font-weight:700;letter-spacing:0.08em}
.sms-panelbody{padding:18px}
.sms-bubble{width:100%;background:var(--paper);border:2px solid var(--ink);padding:14px 16px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.55;resize:vertical;min-height:96px;outline:none;color:var(--ink)}
.sms-bubble:focus{border-color:var(--accent)}
.sms-meta{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--muted);margin-top:8px}
.sms-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.sms-row.first{margin-top:16px;border-top:1px dashed rgba(17,17,17,0.2);padding-top:14px}
.sms-rowlabel{font-size:11px;font-weight:700;letter-spacing:0.08em;color:var(--muted)}
.sms-rowval{font-size:15px;font-weight:700}
.sms-send{cursor:pointer;margin-top:16px;text-align:center;background:var(--ink);color:#fff;border:2px solid var(--ink);padding:11px 0;font-size:12px;font-weight:700;letter-spacing:0.08em;user-select:none}
.sms-send:hover{opacity:0.85}

/* ============ MODALS ============ */
.overlay{position:fixed;inset:0;background:rgba(17,17,17,0.45);display:none;align-items:flex-start;justify-content:center;z-index:50;overflow:auto;padding:56px 20px}
.overlay.on{display:flex}
.modal{background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);width:470px;max-width:96vw}
.modal-head{padding:14px 18px;border-bottom:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-title{font-size:14px;font-weight:700;letter-spacing:0.06em}
.modal-x{cursor:pointer;border:2px solid var(--ink);background:#fff;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;user-select:none}
.modal-x:hover{background:var(--ink);color:#fff}
.modal-body{padding:18px}
.field{margin-bottom:13px}
.f-label{font-size:10px;font-weight:700;letter-spacing:0.12em;color:var(--muted);margin-bottom:5px}
.f-input,.f-select,.f-textarea{width:100%;border:2px solid var(--ink);background:#fff;padding:9px 12px;font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);outline:none}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--accent)}
.f-textarea{resize:vertical;min-height:70px;line-height:1.5}
.f-hint{font-size:11px;font-weight:600;color:var(--muted);margin-top:5px}
.f-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-err{display:none;border:2px solid var(--err);background:var(--err);color:#fff;padding:9px 12px;font-size:12px;font-weight:700;margin-bottom:13px}
.form-err.on{display:block}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
.modal-actions .left{margin-right:auto;display:flex;gap:10px}
.seg-toggle{display:flex;gap:0}
.seg-toggle label{flex:1;text-align:center;cursor:pointer;border:2px solid var(--ink);border-left-width:0;background:#fff;font-size:12px;font-weight:700;letter-spacing:0.04em;user-select:none}
.seg-toggle label:first-child{border-left-width:2px}
.seg-toggle input{display:none}
.seg-toggle span{display:block;padding:9px 0}
.seg-toggle input:checked + span{background:var(--ink);color:#fff}
.check-row{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--ink);background:#fff;padding:11px 14px;cursor:pointer;user-select:none}
.check-row .cr-label{font-size:12.5px;font-weight:700;letter-spacing:0.03em}
.check-row .cr-sub{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px}
.check-box{width:22px;height:22px;flex:none;border:2px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.check-row.on .check-box{background:var(--accent)}
.confirm-text{font-size:13px;font-weight:500;line-height:1.55;margin-bottom:16px}

/* ============ TOASTS ============ */
#toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:70}
.toast{background:var(--ink);color:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--accent);padding:11px 16px;font-size:12.5px;font-weight:700;letter-spacing:0.03em;animation:toastin .16s ease-out}
@keyframes toastin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ============ PWA INSTALL BANNER ============ */
.install-banner{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;background:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:14px 16px;display:flex;gap:14px;align-items:flex-start;animation:toastin .2s ease-out}
.install-banner[hidden]{display:none!important}
.install-banner-icon{width:44px;height:44px;flex:none;border:2px solid var(--ink);background:var(--paper);object-fit:cover}
.install-banner-body{flex:1;min-width:0}
.install-banner-title{font-size:14px;font-weight:700;letter-spacing:0.02em}
.install-banner-text{font-size:12px;font-weight:500;color:var(--muted);margin-top:4px;line-height:1.45}
.install-banner-text b{color:var(--ink);font-weight:700}
.install-share{display:inline-block;vertical-align:-2px;margin:0 2px}
.install-banner-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.install-banner-x{flex:none;width:28px;height:28px;border:2px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;user-select:none;line-height:1}
.install-banner-x:hover{background:var(--row-hover)}
@media (min-width:900px){
  .install-banner{left:auto;right:20px;bottom:20px;width:360px}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1200px){
  .topbar{padding:14px 18px;gap:12px}
  .tabs{gap:6px}
  .tab{padding:7px 10px;font-size:11px;letter-spacing:0.04em}
  .logo-sub{display:none}
  .screen,.dash-body{padding:20px 18px 28px}
  .kpi{padding:18px}
  .kpi-val{font-size:34px}
  .board,.grid4{grid-template-columns:repeat(2,1fr)}
  .mkt-layout{grid-template-columns:1fr 300px}
  .panel{width:300px}
}

@media (max-width:980px){
  .topbar{flex-wrap:wrap;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 0;gap:10px;align-items:center}
  .brand{order:1}
  .tb-right{order:2;margin-left:auto}
  .tb-date{display:none}
  .tabs{order:3;width:calc(100% + 28px);margin:0 -14px;padding:0 14px 12px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:1px solid rgba(17,17,17,0.12);padding-top:10px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:9px 12px}
  .tab-full{display:none}
  .tab-short{display:inline}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi{border-bottom:2px solid var(--ink)}
  .kpi:nth-child(2n){border-right:none}
  .kpi:nth-last-child(-n+2){border-bottom:none}
  .screen-head,.dash-boardhead,.cal-head{flex-direction:column;align-items:stretch;gap:12px}
  .screen-actions{width:100%}
  .cli-search{flex:1;width:auto;min-width:0}
  .banner{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px}
  .cal-week{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .cal-week::-webkit-scrollbar{display:none}
  .daychip{width:48px;flex:none}
  .cal-grid{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .cal-hours{position:sticky;left:0;z-index:2;background:var(--paper)}
  .cal-col{min-width:150px;flex:1 0 150px}
  .cli-layout{flex-direction:column}
  .panel{width:100%}
  .cli-thead > div:nth-child(2),
  .cli-thead > div:nth-child(4),
  .cell-phone,.cell-visits{display:none}
  .mkt-layout{grid-template-columns:1fr}
  .camp-row{flex-wrap:wrap}
  .camp-sent,.camp-result,.camp-rev{width:100%;margin-top:2px}
  #toasts{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .toast{box-shadow:3px 3px 0 var(--accent)}
}

@media (max-width:700px){
  .logo{font-size:22px}
  .logo-star{font-size:22px}
  .screen,.dash-body{padding:16px 14px 24px}
  .screen-title{font-size:18px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:14px}
  .kpi-label{font-size:10px;letter-spacing:0.08em}
  .kpi-val{font-size:28px}
  .board,.grid4{grid-template-columns:1fr;gap:12px}
  .mkt-layout .grid4{grid-template-columns:repeat(2,1fr)}
  .cal-new{width:100%;text-align:center}
  .dash-boardhead .btn,.banner .btn,.screen-head > .btn{width:100%;text-align:center}
  .screen-actions{flex-direction:column;align-items:stretch}
  .screen-actions .btn,.screen-actions .cli-search{width:100%}
  .dash-boardtitle{font-size:14px}
  .btn{padding:10px 12px;font-size:12px}
  .cli-thead > div:nth-child(3),
  .cli-thead > div:nth-child(5),
  .cell-last,.cell-spend{display:none}
  .cli-thead{padding:10px 12px}
  .cli-row{padding:12px}
  .cell-tag{width:auto;margin-left:auto}
  .f-2col{grid-template-columns:1fr}
  .overlay{padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));align-items:flex-end}
  .modal{width:100%;max-width:100%;box-shadow:4px 4px 0 var(--ink);margin-bottom:0}
  .modal-actions{gap:8px}
  .modal-actions .left{width:100%;margin-right:0;order:-1}
  .seg-card .seg-val{font-size:28px}
  .closedbox{padding:40px 16px}
  .closedbox-title{font-size:18px}
  .install-banner{padding:12px}
  .cal-hours{width:40px}
  .cal-hour{right:4px;font-size:9.5px}
  .cal-col{min-width:132px;flex-basis:132px}
  .weeknav{min-height:44px}
  .daychip{min-height:44px;display:flex;flex-direction:column;justify-content:center}
}

@media (min-width:701px) and (max-width:980px){
  .tab-full{display:inline}
  .tab-short{display:none}
  .board,.grid4{grid-template-columns:repeat(2,1fr)}
  .dash-boardhead .btn,.banner .btn{width:auto}
  .screen-head > .btn{width:auto}
  .screen-actions{flex-direction:row;align-items:center}
  .screen-actions .btn{width:auto}
  .screen-actions .cli-search{width:auto;flex:1}
}