@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --ink: #2B2420;
    --ink-dim: #6B5F58;
    --bg: #FBF7F4;
    --panel: #FFFFFF;
    --panel-2: #F5EFEA;
    --line: #E9DFD7;
    --muted: #9C8F86;
    --accent: #B8556B;
    --accent-dim: #8A3F50;
    --gold: #C9A15A;
    --status-new: #6B7280;
    --status-called: #C9A15A;
    --status-booked: #4C9A6A;
    --status-followup: #5B84B8;
    --status-not: #B0716C;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;background:var(--bg);}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    min-height:100vh;
  }
  .icon{display:inline-block; vertical-align:middle; flex-shrink:0;}

  #app-frame{
    width:100%;
    max-width:440px;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    background:var(--bg);
    position:relative;
    display:flex;
    flex-direction:column;
  }
  #screen{
    flex:1; overflow-y:auto;
    padding:calc(20px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  }

  .display{font-family:'Cormorant Garamond',serif; font-weight:700;}
  .mono{font-variant-numeric:tabular-nums;}

  /* ---------- Top bar ---------- */
  .topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
  .brand{display:flex; align-items:center; gap:9px;}
  .brand-mark{width:32px; height:32px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
  .brand-name{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:22px; letter-spacing:0.3px;}
  .topbar-action{
    width:36px; height:36px; border-radius:50%; background:var(--panel); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--ink-dim); cursor:pointer; flex-shrink:0;
  }
  .topbar-action:hover{border-color:var(--accent);}

  /* ---------- Section headers ---------- */
  .sec-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
  .sec-title{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:20px;}
  .sec-sub{font-size:12.5px; color:var(--muted); margin-top:-8px; margin-bottom:14px;}
  .sec-link{font-size:12.5px; color:var(--accent); font-weight:600; cursor:pointer; background:none; border:none;}

  /* ---------- Buttons ---------- */
  .btn{
    width:100%; padding:14px; border-radius:12px; border:none; font-weight:600; font-size:14.5px;
    cursor:pointer; font-family:'Inter',sans-serif; display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-primary:hover{background:var(--accent-dim);}
  .btn-primary:disabled{background:var(--line); color:var(--muted); cursor:not-allowed;}
  .btn-ghost{background:transparent; color:var(--ink-dim); border:1px solid var(--line);}
  .btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
  .btn-danger{background:transparent; color:var(--status-not); border:1px solid var(--status-not);}
  .fab{
    position:fixed; bottom:calc(86px + env(safe-area-inset-bottom)); right:calc(50% - 220px + 18px);
    width:52px; height:52px; border-radius:50%; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
    box-shadow:0 8px 20px rgba(184,85,107,0.4); z-index:5;
  }
  .fab:hover{background:var(--accent-dim);}
  @media (max-width:476px){ .fab{ right:calc(18px + env(safe-area-inset-right)); } }

  /* ---------- Cards / rows ---------- */
  .card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:14px; margin-bottom:22px;
  }
  .client-row{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:13px 14px; display:flex; align-items:center; gap:12px; margin-bottom:9px; cursor:pointer;
  }
  .client-row:hover{border-color:var(--accent);}
  .client-avatar{
    width:42px; height:42px; border-radius:50%; background:var(--panel-2); color:var(--accent-dim);
    display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:16px; flex-shrink:0;
  }
  .client-body{flex:1; min-width:0;}
  .client-name{font-weight:600; font-size:14.5px; margin-bottom:2px;}
  .client-meta{font-size:11.5px; color:var(--muted); display:flex; gap:6px; align-items:center;}
  .client-call-btn{
    width:36px; height:36px; border-radius:50%; background:var(--panel-2); color:var(--accent);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .client-call-btn:hover{background:var(--accent); color:#fff;}
  .status-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
  .status-new{background:var(--status-new);}
  .status-called{background:var(--status-called);}
  .status-booked{background:var(--status-booked);}
  .status-follow_up{background:var(--status-followup);}
  .status-not_interested{background:var(--status-not);}

  .group-header{display:flex; align-items:center; gap:8px; margin:20px 0 10px;}
  .group-header:first-of-type{margin-top:0;}
  .group-title{font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-dim);}
  .group-count{
    background:var(--panel-2); color:var(--ink-dim); font-size:11px; font-weight:700;
    padding:2px 8px; border-radius:100px;
  }
  .empty-note{font-size:12.5px; color:var(--muted); padding:10px 2px 4px;}

  /* ---------- Status pills / tabs ---------- */
  .status-tabs{display:flex; gap:7px; overflow-x:auto; margin-bottom:16px; padding-bottom:2px;}
  .status-tabs::-webkit-scrollbar{display:none;}
  .status-tab{
    flex-shrink:0; background:var(--panel); border:1px solid var(--line); color:var(--ink-dim);
    font-weight:600; font-size:12px; padding:8px 13px; border-radius:100px; cursor:pointer; white-space:nowrap;
    display:flex; align-items:center; gap:6px;
  }
  .status-tab.active{background:var(--ink); color:#fff; border-color:var(--ink);}

  /* ---------- Search ---------- */
  .search-box{
    display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:10px 13px; margin-bottom:16px; color:var(--muted);
  }
  .search-box input{border:none; background:none; outline:none; flex:1; font-size:14px; color:var(--ink); font-family:'Inter',sans-serif;}

  /* ---------- Forms ---------- */
  .field{margin-bottom:16px;}
  .field-label{font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--ink-dim);}
  .field-input, .field-select, .field-textarea{
    width:100%; padding:12px 14px; border-radius:11px; border:1.5px solid var(--line);
    background:var(--panel); color:var(--ink); font-size:14.5px; font-family:'Inter',sans-serif;
  }
  .field-input:focus, .field-select:focus, .field-textarea:focus{outline:none; border-color:var(--accent);}
  .field-textarea{resize:vertical; min-height:80px;}
  .status-picker{display:flex; flex-wrap:wrap; gap:8px;}
  .status-chip{
    border:1.5px solid var(--line); background:var(--panel); border-radius:100px; padding:9px 14px;
    font-size:12.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:7px;
  }
  .status-chip.selected{border-color:var(--accent); background:rgba(184,85,107,0.08); color:var(--accent-dim);}
  .form-error{
    background:rgba(176,113,108,0.1); border:1px solid var(--status-not); color:var(--status-not);
    font-size:13px; padding:10px 13px; border-radius:10px; margin-bottom:16px;
  }

  /* ---------- Today screen ---------- */
  .today-hero{
    background:linear-gradient(155deg, var(--accent) 0%, var(--accent-dim) 100%);
    border-radius:18px; padding:20px; margin-bottom:22px; color:#fff;
  }
  .today-hero-eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:1.2px; opacity:0.85; font-weight:700; margin-bottom:6px;}
  .today-hero-title{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:26px; margin-bottom:4px;}
  .today-hero-sub{font-size:13px; opacity:0.92;}
  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px;}
  .stat-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:15px;}
  .stat-box .v{font-family:'Inter',sans-serif; font-weight:700; font-size:26px; font-variant-numeric:tabular-nums;}
  .stat-box .l{font-size:11.5px; color:var(--muted); margin-top:2px;}

  /* ---------- Calendar ---------- */
  .cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .cal-nav-btn{background:var(--panel); border:1px solid var(--line); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-dim);}
  .cal-nav-btn:hover{border-color:var(--accent);}
  .cal-month-label{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:19px;}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:20px;}
  .cal-dow{text-align:center; font-size:10.5px; color:var(--muted); font-weight:700; padding-bottom:4px;}
  .cal-day{
    aspect-ratio:1; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-size:13px; cursor:pointer; border:1.5px solid transparent; background:var(--panel-2); color:var(--ink-dim);
  }
  .cal-day.working{background:rgba(76,154,106,0.13); color:var(--status-booked); font-weight:700;}
  .cal-day.off{background:var(--panel-2); color:var(--muted);}
  .cal-day.exception{border-color:var(--gold);}
  .cal-day.today{border-color:var(--accent); border-width:2px;}
  .cal-day.other-month{opacity:0.3;}
  .cal-day-dot{width:4px; height:4px; border-radius:50%; background:currentColor; margin-top:2px;}

  .weekday-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:12px 14px; margin-bottom:9px;
  }
  .weekday-name{font-weight:600; font-size:14px; width:80px; flex-shrink:0;}
  .weekday-toggle{
    width:42px; height:24px; border-radius:100px; background:var(--line); position:relative; cursor:pointer; border:none; flex-shrink:0;
  }
  .weekday-toggle::after{content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s;}
  .weekday-toggle.on{background:var(--status-booked);}
  .weekday-toggle.on::after{transform:translateX(18px);}
  .weekday-times{display:flex; align-items:center; gap:6px; flex:1; justify-content:flex-end;}
  .weekday-times input{
    border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:12.5px; font-family:'Inter',sans-serif;
    background:var(--panel-2); color:var(--ink); width:88px;
  }

  /* ---------- Auth ---------- */
  .auth-wrap{padding-top:60px;}
  .auth-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:6px;}
  .auth-brand-mark{width:56px; height:56px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff;}
  .auth-title{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:26px; text-align:center;}
  .auth-tag{text-align:center; font-size:13px; color:var(--muted); margin-bottom:28px;}

  /* ---------- Bottom nav ---------- */
  #bottomnav{
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:440px; background:var(--panel); border-top:1px solid var(--line);
    display:flex; padding:10px 10px calc(14px + env(safe-area-inset-bottom));
  }
  .nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:none; border:none; color:var(--muted); cursor:pointer; font-size:10.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.4px; padding:4px;
  }
  .nav-item.active{color:var(--accent);}

  ::-webkit-scrollbar{width:0;}