
:root{
  --dark:#002922; --green:#00795A; --orange:#F15A24; --bg:#F4F7F5;
  --white:#fff; --text:#17241f; --muted:#6f7f78; --line:#dbe5e0;
  --red:#b42318; --yellow:#d98e04; --shadow:0 12px 34px rgba(0,41,34,.12);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.topbar{background:var(--dark);color:white;padding:calc(20px + env(safe-area-inset-top)) 18px 26px;border-radius:0 0 28px 28px;display:flex;justify-content:space-between;align-items:flex-start}
.topbar h1{margin:0;font-size:31px}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:900;color:#7dd4bc;margin:0 0 5px}
.eyebrow.dark{color:var(--green)}
.sub{margin:6px 0 0;color:#cee4dc}
.top-actions{display:flex;gap:8px}
.ghost{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:white;padding:9px 12px;border-radius:12px;font-weight:700}
main{max-width:900px;margin:auto;padding:16px}
.month-card,.day-card{background:white;border-radius:22px;box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.month-nav{display:grid;grid-template-columns:45px 1fr 45px;align-items:center;text-align:center;margin-bottom:12px}
.month-nav button{border:0;background:#eef3f0;border-radius:12px;height:42px;font-size:30px;color:var(--green)}
.month-nav strong{font-size:19px;text-transform:capitalize}
.weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.weekdays span{text-align:center;color:var(--muted);font-weight:800;font-size:12px;padding:6px 0}
.day-cell{aspect-ratio:1/1;border:1px solid #e6ece9;background:#fbfcfb;border-radius:13px;position:relative;padding:7px;text-align:left}
.day-cell.other{opacity:.28}
.day-cell.selected{outline:3px solid var(--green);background:#eaf6f2}
.day-cell.today::after{content:"";position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.day-num{font-weight:850}
.count{position:absolute;bottom:6px;left:7px;font-size:11px;color:var(--muted)}
.load{position:absolute;bottom:7px;right:7px;width:9px;height:9px;border-radius:50%}
.load.free,.dot.free{background:#39a96b}
.load.medium,.dot.medium{background:#e5a62b}
.load.full,.dot.full{background:#d94841}
.legend{display:flex;gap:13px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:12px}
.legend span{display:flex;align-items:center;gap:5px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.day-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.day-head h2{margin:0 0 14px;font-size:24px;text-transform:capitalize}
.voice-btn{border:0;background:var(--orange);color:white;border-radius:13px;padding:11px 13px;font-weight:850}
.timeline{display:grid;gap:4px}
.appointment{display:grid;grid-template-columns:64px 22px 1fr;gap:4px;min-height:118px}
.time-col{padding-top:4px;text-align:right}
.time-col strong{display:block;font-size:16px}
.time-col span{font-size:12px;color:var(--muted)}
.line-col{position:relative}
.line-col::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:#dce7e2}
.line-col span{position:absolute;left:4px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--green);border:3px solid #dff1eb}
.appt-body{border:1px solid #e3ebe7;border-radius:16px;padding:13px;margin-bottom:10px;background:#fbfdfc}
.appt-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.appt-top h3{margin:0;font-size:18px}
.appt-type{font-size:11px;font-weight:850;background:#e8f4f0;color:var(--green);padding:5px 8px;border-radius:999px}
.appt-address,.appt-notes{margin:7px 0 0;color:var(--muted);font-size:14px}
.appt-notes{font-size:13px}
.appt-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.appt-actions button{border:0;border-radius:9px;padding:8px 10px;font-size:12px;font-weight:800;background:#edf2ef;color:var(--text)}
.appt-actions .maps-btn{background:#e7f4ef;color:var(--green)}
.wide{width:100%;margin-top:12px}
.primary{border:0;background:var(--green);color:white;padding:14px 18px;border-radius:13px;font-weight:900}
.conflict{background:#fff1ef;border:1px solid #ffc7c2;color:#8f1d14;padding:11px 13px;border-radius:12px;margin:10px 0;font-weight:700;font-size:14px}
dialog{width:min(94vw,560px);max-height:92vh;border:0;border-radius:24px;padding:0;box-shadow:0 28px 90px rgba(0,0,0,.32)}
dialog::backdrop{background:rgba(0,31,26,.65);backdrop-filter:blur(3px)}
form{padding:21px;overflow:auto;max-height:92vh}
.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}
.dialog-head h2{margin:0 0 18px}
.close{border:0;background:#edf2ef;border-radius:50%;width:36px;height:36px;font-size:24px}
label{display:block;font-size:12px;font-weight:850;color:var(--muted);margin-bottom:13px}
input,select,textarea{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:12px;padding:12px;background:white;color:var(--text)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-review{border-top:1px solid var(--line);padding-top:13px;margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.quick-review span{font-size:13px;font-weight:800;color:var(--muted);width:100%}
.quick-review button{border:1px solid var(--line);background:white;color:var(--green);border-radius:999px;padding:8px 10px;font-weight:800}
.dialog-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.danger{border:0;background:#feeceb;color:var(--red);padding:14px;border-radius:13px;font-weight:850}
.pin-screen{position:fixed;inset:0;background:var(--dark);z-index:1000;display:grid;place-items:center;padding:22px}
.pin-card{width:min(92vw,380px);background:white;border-radius:25px;padding:28px;text-align:center}
.brand-mark{display:inline-block;background:var(--green);color:white;border-radius:14px;padding:11px 14px;font-weight:950;letter-spacing:.1em}
.pin-card h1{margin:15px 0 7px}
.pin-card p{color:var(--muted)}
.pin-card input{text-align:center;font-size:28px;letter-spacing:.25em}
.pin-card .primary{width:100%;margin-top:12px}
.link-btn{border:0;background:transparent;color:var(--red);margin-top:12px}
.pin-card input{font-size:16px;letter-spacing:normal}
#pastePhoneBtn{color:var(--green);padding:7px 0;margin-top:4px}
.empty{text-align:center;color:var(--muted);padding:30px 10px}
@media(max-width:460px){
  .top-actions{flex-wrap:wrap;justify-content:flex-end}
  .grid2{grid-template-columns:1fr}
  .day-head{display:block}
  .voice-btn{width:100%;margin-bottom:12px}
  .appointment{grid-template-columns:55px 18px 1fr}
  .day-cell{padding:5px;border-radius:10px}
  .count{font-size:9px}
}
