:root{
  --paper:#f3efe9;--paper-2:#ebe5de;--card:#fdfbf8;--card-soft:#f3eee8;
  --ink:#282421;--muted:#837b73;--line:#d9d1c8;--dark:#332f2b;
  --success:#5d6758;--success-bg:#e3e8df;--warning:#88715e;--warning-bg:#efe6dc;
  --danger:#89625b;--danger-bg:#efe1de;--shadow:0 18px 48px rgba(53,45,39,.07)
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{width:min(100%,590px);min-height:100vh;margin:auto;padding:24px 18px 112px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.brand-kicker{font-size:8px;letter-spacing:.25em;color:var(--muted);font-weight:650}
.brand{margin-top:3px;font:39px Georgia,serif;line-height:1;letter-spacing:-.04em}
.brand-subtitle{margin-top:7px;font-size:8px;letter-spacing:.25em;color:var(--muted)}
.brand-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(253,251,248,.72);border:1px solid var(--line);font:18px Georgia,serif}

.hero{background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.5),transparent 34%),linear-gradient(145deg,#e8e1da,#d9d0c7);border-radius:33px;padding:28px;box-shadow:var(--shadow)}
.hero-label{font-size:8px;letter-spacing:.22em;color:var(--muted);font-weight:650}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin-top:18px}
.hero-number{font:54px Georgia,serif;line-height:1}.hero-caption{color:var(--muted);font-size:12px;margin-top:8px}
.hero-panel{background:rgba(253,251,248,.72);border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:15px}
.hero-panel strong{display:block;font:22px Georgia,serif}.hero-panel small{display:block;color:var(--muted);margin-top:5px;font-size:9px}
.hero-mini{margin-top:10px;padding-top:10px;border-top:1px solid rgba(112,100,90,.12);font-size:9px;color:var(--muted);line-height:1.6}

.section{margin-top:30px}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:11px}
.section-title{margin-top:3px;font:24px Georgia,serif}
.muted{color:var(--muted);font-size:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:25px;padding:18px;box-shadow:0 8px 28px rgba(58,50,44,.025)}

.dashboard-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.dashboard-stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:13px}
.dashboard-stat span{display:block;color:var(--muted);font-size:8px}
.dashboard-stat strong{display:block;margin-top:5px;font:19px Georgia,serif}
.dashboard-stat small{display:block;margin-top:4px;color:var(--muted);font-size:8px}

.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.quick-action{border:1px solid var(--line);background:var(--card);border-radius:19px;padding:14px;text-align:left;color:var(--ink)}
.quick-action strong{display:block;font:18px Georgia,serif;font-weight:400}
.quick-action small{display:block;color:var(--muted);margin-top:5px;font-size:9px;line-height:1.4}

.appointment-card{width:100%;display:grid;grid-template-columns:58px 1fr auto;gap:13px;padding:16px 0;border:0;border-bottom:1px solid #e9e3dc;background:transparent;text-align:left;color:var(--ink)}
.appointment-card:first-child{padding-top:0}.appointment-card:last-child{padding-bottom:0;border-bottom:0}
.appointment-time{font-size:12px;font-weight:650}.appointment-client{font-size:13px;font-weight:650}
.appointment-service{margin-top:4px;color:var(--muted);font-size:11px}.appointment-price{font:18px Georgia,serif;text-align:right}
.badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.status,.payment-badge,.location-tag,.stock-badge,.type-badge,.availability-pill,.block-badge,.mini-badge{
  display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:8px
}
.status-booked{background:var(--card-soft);color:var(--muted)}.status-confirmed{background:#e7e3dd;color:#5e5851}
.status-completed{background:var(--success-bg);color:var(--success)}.status-cancelled{background:var(--danger-bg);color:var(--danger)}
.status-no_show{background:var(--warning-bg);color:var(--warning)}.payment-badge{background:#f2ede8;color:var(--muted)}
.payment-paid{background:var(--success-bg);color:var(--success)}.location-tag{background:#f0ebe5;color:var(--muted)}
.stock-badge{background:var(--success-bg);color:var(--success)}.type-badge{background:#ece7e1;color:#605951}
.block-badge{background:#eee7df;color:#6a6159}.mini-badge{background:var(--paper-2);color:var(--muted)}

.filter-row{display:flex;gap:8px;overflow:auto;margin:14px 0;padding-bottom:2px}
.filter-button{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;padding:8px 11px;font-size:10px}
.filter-button.active{background:var(--dark);border-color:var(--dark);color:#fbf7f0}

.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;margin:12px 0 14px}
.calendar-toolbar button{border:1px solid var(--line);background:var(--card);border-radius:999px;width:34px;height:34px;color:var(--ink)}
.calendar-month{font:22px Georgia,serif}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar-weekday{text-align:center;color:var(--muted);font-size:8px;padding:5px 0}
.calendar-day{min-height:72px;border:1px solid var(--line);background:var(--card);border-radius:15px;padding:7px 5px;text-align:left;color:var(--ink);position:relative}
.calendar-day.outside{opacity:.3}.calendar-day.today-cell{border-color:#a99e94}.calendar-day.selected{background:var(--dark);color:#fff;border-color:var(--dark)}
.calendar-number{font-size:10px;font-weight:650}.calendar-count{font-size:8px;margin-top:7px;color:var(--muted)}
.calendar-day.selected .calendar-count{color:#ddd5cc}.calendar-dot{position:absolute;right:6px;top:7px;width:5px;height:5px;border-radius:50%;background:#81776d}
.calendar-full{font-size:7px;margin-top:5px;color:var(--danger)}.calendar-day.selected .calendar-full{color:#f0d8d3}

.day-agenda{margin-top:12px}
.agenda-row{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid #e9e3dc}
.agenda-row:last-child{border-bottom:0}
.agenda-time{font-size:10px;color:var(--muted)}
.agenda-main strong{display:block;font-size:12px}.agenda-main small{display:block;color:var(--muted);font-size:9px;margin-top:4px}
.agenda-block{background:var(--paper-2);border-radius:14px;padding:10px 12px}

.day-availability{margin-top:9px;padding:10px 11px;border-radius:13px;background:var(--card-soft);font-size:9px;line-height:1.5;color:var(--muted)}
.day-availability.full{background:var(--danger-bg);color:var(--danger)}

.availability-box{margin:4px 0 14px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card-soft)}
.availability-box.clash{background:var(--danger-bg);border-color:#ddc7c2}.availability-box.good{background:var(--success-bg);border-color:#cbd5c6}
.availability-title{font-size:9px;letter-spacing:.1em;font-weight:700;margin-bottom:4px}
.availability-slots{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}.availability-pill{background:var(--card);border:1px solid var(--line);color:var(--muted)}
.availability-pill.full{background:var(--danger-bg);border-color:transparent;color:var(--danger)}

.slot-results{margin:10px 0 16px}
.slot-card{width:100%;border:1px solid var(--line);background:var(--card);border-radius:17px;padding:13px 14px;margin-top:9px;text-align:left;color:var(--ink)}
.slot-card strong{display:block;font:17px Georgia,serif}.slot-card small{display:block;color:var(--muted);margin-top:4px;font-size:9px}

.detail-hero{background:var(--card);border:1px solid var(--line);border-radius:29px;padding:23px}
.detail-title{font:30px Georgia,serif;margin-top:10px}.detail-service{margin-top:6px;color:var(--muted);font-size:12px}
.detail-grid{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.detail-box{background:var(--card-soft);border-radius:17px;padding:14px}.detail-box span{display:block;color:var(--muted);font-size:8px;letter-spacing:.08em}
.detail-box strong{display:block;margin-top:5px;font-size:12px}
.detail-section{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:21px;padding:18px}
.detail-section-title{margin-bottom:9px;font-size:8px;letter-spacing:.18em;color:var(--muted);font-weight:650}
.detail-section p{margin:0;line-height:1.6;font-size:12px}

.timeline{position:relative;margin-top:10px;padding-left:22px}
.timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line)}
.timeline-item{position:relative;padding:0 0 14px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item:before{content:"";position:absolute;left:-19px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--dark)}
.timeline-time{font-size:9px;color:var(--muted)}
.timeline-name{font-size:12px;font-weight:650;margin-top:2px}
.timeline-note{font-size:9px;color:var(--muted);margin-top:3px}

.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.action-button{border:1px solid var(--line);background:var(--card);border-radius:15px;padding:13px 10px;color:var(--ink);font-size:10px}
.action-button.primary{background:var(--dark);border-color:var(--dark);color:#fbf7f0}
.action-button.success{background:var(--success-bg);border-color:transparent;color:var(--success)}
.action-button.warning{background:var(--warning-bg);border-color:transparent;color:var(--warning)}
.action-button.danger{color:var(--danger)}
.back-button{margin-bottom:14px;border:0;background:transparent;color:var(--muted);padding:0;font-size:11px}

.shopping-group{margin-top:18px}.shopping-group-title{font:19px Georgia,serif;margin-bottom:8px}
.shopping-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid #e9e3dc}
.shopping-item:last-child{border-bottom:0}.shopping-item input{width:auto;margin-top:2px}.shopping-item strong{display:block;font-size:12px}
.shopping-item small{display:block;margin-top:4px;color:var(--muted);font-size:9px}.shopping-item.bought{opacity:.42;text-decoration:line-through}

.menu-card{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;padding:16px 0;border-bottom:1px solid #e9e3dc;color:var(--ink);text-align:left}
.menu-card:last-child{border-bottom:0}.menu-card strong{display:block;font-size:12px}.menu-card small{display:block;margin-top:4px;color:var(--muted)}
.profile-head{display:flex;gap:13px;align-items:center}.profile-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);font:20px Georgia,serif}
.profile-name{font:25px Georgia,serif}.profile-meta{margin-top:3px;color:var(--muted);font-size:10px}
.profile-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.profile-stat{background:var(--card-soft);border-radius:15px;padding:11px}
.profile-stat span{display:block;color:var(--muted);font-size:8px}.profile-stat strong{display:block;margin-top:4px;font:18px Georgia,serif}

.stock-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stock-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:15px}
.stock-card strong{display:block;font-size:12px}.stock-card small{display:block;color:var(--muted);font-size:9px;margin-top:4px;line-height:1.5}
.stock-card .stock-price{font:18px Georgia,serif;margin-top:10px}
.stock-status{display:inline-block;margin-top:8px;padding:5px 8px;border-radius:999px;font-size:8px;background:var(--card-soft);color:var(--muted)}
.stock-status.in_stock{background:var(--success-bg);color:var(--success)}
.stock-status.ordered{background:var(--warning-bg);color:var(--warning)}
.stock-status.used{background:var(--paper-2);color:var(--muted)}

.list-price{font:17px Georgia,serif;text-align:right}
.service-row,.block-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #e9e3dc}
.service-row:last-child,.block-row:last-child{border-bottom:0}
.service-row strong,.block-row strong{display:block;font-size:12px}
.service-row small,.block-row small{display:block;margin-top:4px;color:var(--muted);font-size:9px}
.service-price{font:18px Georgia,serif;text-align:right}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px}
.stat-card span{display:block;margin-bottom:8px;color:var(--muted);font-size:9px}
.stat-card strong{font:24px Georgia,serif}
.money-list{margin-top:12px}
.money-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e9e3dc}
.money-row:last-child{border-bottom:0}.money-row strong{font-size:11px}.money-row small{display:block;color:var(--muted);font-size:9px;margin-top:3px}

.settings-location{margin-bottom:16px;padding:14px;border:1px solid var(--line);border-radius:17px;background:var(--card-soft)}
.bottom-nav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(calc(100% - 24px),556px);display:grid;grid-template-columns:1fr 1fr 60px 1fr 1fr;align-items:center;padding:8px;background:rgba(253,251,248,.96);border:1px solid var(--line);border-radius:28px;box-shadow:0 15px 44px rgba(49,42,37,.15);backdrop-filter:blur(14px);z-index:30}
.nav-item{border:0;background:transparent;color:#918980;display:grid;place-items:center;gap:2px;padding:6px 1px}
.nav-item small{font-size:8px}.nav-item.active{color:var(--ink)}
.nav-icon{height:18px;display:grid;place-items:center;font-size:17px;line-height:1}.nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.add-button{width:50px;height:50px;justify-self:center;border:0;border-radius:50%;background:var(--dark);color:white;font-size:27px}

dialog{border:0;padding:0;width:min(100%,590px);max-width:none;background:transparent;margin:auto 0 0}
dialog::backdrop{background:rgba(35,31,27,.48);backdrop-filter:blur(3px)}
.sheet{max-height:91vh;overflow:auto;background:var(--paper);border-radius:30px 30px 0 0;padding:10px 20px 28px}
.sheet-handle{width:42px;height:4px;margin:3px auto 18px;border-radius:999px;background:#c8c0b8}
.sheet-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
h2{margin:4px 0 0;font:28px Georgia,serif}
.text-button{border:0;background:transparent;color:var(--muted);padding:7px}
label{display:block;margin-bottom:13px;font-size:9px;color:var(--muted)}
input,select,textarea{width:100%;margin-top:6px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);outline:none}
textarea{resize:vertical}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.primary-button{width:100%;margin-top:5px;border:0;border-radius:16px;padding:15px;background:var(--dark);color:#fbf7f0;font-weight:650}
.primary-button:disabled{opacity:.45;cursor:not-allowed}
.special-panel{margin:15px 0;padding:15px;background:var(--paper-2);border-radius:18px;border:1px solid var(--line)}
.panel-title{font:18px Georgia,serif;margin-bottom:12px}
.toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-20px);opacity:0;pointer-events:none;z-index:100;background:var(--dark);color:#fff;padding:11px 15px;border-radius:999px;font-size:11px;transition:.22s ease;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:390px){
  .hero-grid{grid-template-columns:1fr}
  .dashboard-strip{grid-template-columns:1fr}
  .stock-grid{grid-template-columns:1fr}
}
@media(min-width:700px){
  body{padding:25px 0}
  .app-shell{border:1px solid var(--line);border-radius:34px;background:var(--paper)}
}

.shopping-item .delete-shopping{
  margin-left:auto;
  align-self:center;
}


/* Supabase / account */
.login-screen{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  overflow:auto;
  padding:32px 20px;
  background:
    radial-gradient(circle at 20% 5%,rgba(255,255,255,.72),transparent 30%),
    linear-gradient(150deg,#f4f0eb,#e7dfd7);
}
.login-card{
  width:min(100%,430px);
  margin:6vh auto;
  padding:34px 26px 28px;
  background:rgba(253,251,248,.92);
  border:1px solid var(--line);
  border-radius:32px;
  box-shadow:0 28px 70px rgba(53,45,39,.12);
}
.login-monogram{
  width:52px;height:52px;
  display:grid;place-items:center;
  margin-bottom:25px;
  border:1px solid var(--line);
  border-radius:50%;
  font:20px Georgia,serif;
}
.login-brand{
  margin-top:5px;
  font:46px Georgia,serif;
  letter-spacing:-.045em;
}
.login-copy{
  margin:24px 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}
.secondary-button{
  width:100%;
  margin-top:9px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:transparent;
  color:var(--ink);
  font-weight:600;
}
.login-message{
  min-height:18px;
  margin-top:13px;
  color:var(--danger);
  font-size:10px;
  line-height:1.5;
}
.account-card{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card-soft);
}
.account-card strong{display:block;font-size:11px}
.account-card small{display:block;margin-top:4px;color:var(--muted);font-size:9px}
.sync-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:6px;background:var(--success);
}