:root{
  --blue:#006AFF; --ink:#141414; --dim:#6b6b6b; --line:#e6e2da; --bg:#faf8f5;
  --card:#fff; --gold:#c9a24b; --red:#e5484d; --grey-block:#d9d9d9;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); font-size:15px}
button{font:inherit; cursor:pointer}
input,select,textarea{font:inherit; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; width:100%}
label{font-size:12px; color:var(--dim); display:block; margin:10px 0 4px}
.btn{background:var(--blue); color:#fff; border:0; border-radius:10px; padding:11px 16px; font-weight:600}
.btn.secondary{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn.gold{background:var(--gold)}
.btn.danger{background:var(--red)}
.btn.small{padding:7px 12px; border-radius:8px; font-size:13px}
.btn:disabled{opacity:.5}

/* locked / PIN */
.locked{min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; background:#111; color:#f5efe4}
.locked .logo{font-family:Georgia,serif; font-size:34px; color:var(--gold); letter-spacing:1px}
.locked p{color:#bdb4a2; max-width:300px}
.locked input{max-width:220px; text-align:center; font-size:22px; letter-spacing:6px; background:#1d1d1d; color:#fff; border-color:#333}
.locked .err{color:#ff9c9c; min-height:20px; font-size:13px}

/* shell */
header.top{position:sticky; top:0; z-index:20; background:#111; color:#fff; display:flex; align-items:center; gap:10px; padding:10px 14px}
header.top .brand{font-family:Georgia,serif; color:var(--gold); font-size:19px}
header.top .spacer{flex:1}
.bell{position:relative; background:none; border:0; color:#fff; font-size:20px; padding:4px}
.bell .badge{position:absolute; top:-2px; right:-4px; background:var(--red); color:#fff; font-size:10px; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px}
main{padding:12px 12px 92px; max-width:860px; margin:0 auto}
nav.bottom{position:fixed; left:0; right:0; bottom:0; z-index:20; background:#fff; border-top:1px solid var(--line); display:flex; padding-bottom:env(safe-area-inset-bottom)}
nav.bottom button{flex:1; background:none; border:0; padding:8px 2px 10px; font-size:11px; color:var(--dim); position:relative}
nav.bottom button .ic{display:block; font-size:20px; line-height:1.2}
nav.bottom button.active{color:var(--blue); font-weight:700}
nav.bottom .badge{position:absolute; top:2px; right:calc(50% - 20px); background:var(--red); color:#fff; font-size:10px; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center}

.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px}
.row{display:flex; align-items:center; gap:10px}
.row .grow{flex:1}
.muted{color:var(--dim); font-size:13px}
.money{font-weight:700}
h2{font-size:18px; margin:6px 0 10px}
h3{font-size:15px; margin:14px 0 8px}
.pill{display:inline-block; font-size:11px; padding:2px 8px; border-radius:99px; background:#eef3ff; color:var(--blue); font-weight:600}
.pill.grey{background:#eee; color:var(--dim)} .pill.red{background:#fdecec; color:var(--red)} .pill.green{background:#e7f6ec; color:#1c7c3c}

/* calendar */
.cal-head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.cal-head select{width:auto}
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.daycol{background:#fff; border:1px solid var(--line); border-radius:10px; min-height:120px; position:relative; overflow:hidden}
.daycol .dhead{text-align:center; font-size:11px; padding:5px 0; color:var(--dim); border-bottom:1px solid var(--line)}
.daycol.today .dhead{color:var(--blue); font-weight:800}
.appt-block{position:absolute; left:3px; right:3px; background:var(--blue); color:#fff; border-radius:6px; font-size:10px; line-height:1.25; padding:3px 5px; overflow:hidden; cursor:pointer}
.appt-block.done{background:#9db8d9}
.appt-block.noshow{background:var(--red)}
.block-block{position:absolute; left:3px; right:3px; background:var(--grey-block); color:#555; border-radius:6px; font-size:10px; padding:3px 5px; overflow:hidden}
.nowline{position:absolute; left:0; right:0; height:2px; background:var(--red); z-index:3}
.hourgrid{position:relative}
.hourlbl{position:absolute; left:0; font-size:9px; color:#aaa; transform:translateY(-50%)}

/* messages */
.bubble{max-width:82%; padding:9px 12px; border-radius:14px; margin:5px 0; white-space:pre-wrap; word-wrap:break-word}
.bubble.client{background:#fff; border:1px solid var(--line); margin-right:auto}
.bubble.owner{background:var(--blue); color:#fff; margin-left:auto}
.thread-row{display:flex; gap:10px; align-items:center; padding:12px; background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; cursor:pointer}
.unread-dot{background:var(--red); color:#fff; font-size:10px; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px}

/* modal */
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; align-items:flex-end; justify-content:center}
.modal{background:#fff; width:100%; max-width:560px; border-radius:18px 18px 0 0; padding:18px; max-height:92dvh; overflow:auto}
.sig-wrap{border:1px solid var(--line); border-radius:10px; overflow:hidden}
.sig-wrap img{width:100%; display:block; background:#fff}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:96px; background:#111; color:#fff; padding:10px 16px; border-radius:99px; z-index:99; font-size:14px}
.menu-item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:8px; font-weight:600}