/* ───────────────────────────────────────────────────────────────
   Urban Concept Studio — design system (black & gold)
   Tokens reproduzidos do handoff de design.
   ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --bg:#0a0909; --bg2:#0A0908; --phone1:#110E0C; --phone2:#0A0908;
  --surface:#15120F; --surface2:#19150F; --input:#100D0B;
  --gold1:#E6C878; --gold2:#C49A44; --gold-grad:linear-gradient(135deg,#E6C878,#C49A44);
  --gold-text:#E2C079; --gold-line:#C9A24B; --on-gold:#1A1206;
  --txt:#F2EEE6; --muted:rgba(242,238,230,.45); --muted2:rgba(242,238,230,.5);
  --hair:rgba(201,162,93,.12); --hair-strong:rgba(201,162,93,.5);
  --serif:'Cormorant Garamond',serif; --sans:'Jost',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--sans); color:var(--txt);
  background:radial-gradient(120% 70% at 50% -6%,#1a1510 0%,#0a0909 50%) fixed;
  min-height:100vh;
}

/* App shell — coluna mobile centrada */
.app{
  max-width:440px; margin:0 auto; min-height:100vh;
  background:linear-gradient(180deg,var(--phone1),var(--phone2));
  display:flex; flex-direction:column; position:relative; overflow-x:hidden;
}
.pad{padding:0 22px;}
.scroll{flex:1; overflow-y:auto; padding-bottom:24px;}

/* Tipografia */
.serif{font-family:var(--serif);}
.display{font-family:var(--serif); font-size:33px; line-height:1.08; letter-spacing:.01em;}
.h1{font-family:var(--serif); font-size:27px;}
.h2{font-family:var(--serif); font-size:21px;}
.gold{color:var(--gold-text);}
.muted{color:var(--muted);}
.kicker{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(226,192,121,.85);}
.label{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted2);}

/* Top bar */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:54px 22px 8px;}
.brand{display:flex; align-items:center; gap:11px;}
.uc{width:42px; height:42px; border-radius:12px; border:1px solid rgba(201,162,93,.4);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif);
  font-size:21px; font-weight:700; color:var(--gold-text); background:rgba(201,162,93,.06); flex:none;}
.uc.sm{width:34px; height:34px; font-size:16px; border-radius:10px;}
.wordmark{font-family:var(--serif); font-size:18px; line-height:1; letter-spacing:.03em;}
.wordmark small{display:block; font-family:var(--sans); font-size:9px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--muted); margin-top:3px;}
.notif{width:32px; height:32px; border-radius:50%; border:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center; position:relative;}
.notif::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold-grad);}

/* Surfaces / cards */
.card{background:var(--surface); border:1px solid var(--hair); border-radius:16px;}
.card.sel{border-color:var(--hair-strong);
  background:linear-gradient(135deg,rgba(201,162,93,.16),rgba(201,162,93,.04));}

/* Featured CTA */
.feature{margin:14px 22px 0; padding:22px; border-radius:18px;
  border:1px solid var(--hair-strong);
  background:linear-gradient(135deg,rgba(201,162,93,.14),rgba(201,162,93,.03));}

/* Botões */
.btn{display:block; width:100%; border:none; cursor:pointer; font-family:var(--sans);
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  padding:16px; border-radius:13px; transition:transform .12s, opacity .2s;}
.btn:active{transform:scale(.98);}
.btn.gold{background:var(--gold-grad); color:var(--on-gold); box-shadow:0 8px 24px rgba(201,162,93,.25);}
.btn.gold:disabled{background:#1b1813; color:rgba(242,238,230,.32); box-shadow:none; cursor:not-allowed;}
.btn.outline{background:transparent; color:var(--gold-text); border:1px solid var(--hair-strong);}
.btn.small{padding:11px 16px; font-size:11px; width:auto;}

/* Progress bar 4 segmentos */
.progress{display:flex; gap:6px; margin:14px 0 18px;}
.progress span{flex:1; height:3px; border-radius:2px; background:rgba(242,238,230,.1);}
.progress span.on{background:var(--gold-grad);}

/* Linha de serviço */
.row{display:flex; align-items:center; gap:14px; padding:16px; border-radius:15px;
  background:var(--surface); border:1px solid var(--hair); cursor:pointer; transition:.15s; margin-bottom:11px;}
.row:hover{border-color:rgba(201,162,93,.4);}
.row.sel{border-color:var(--hair-strong);
  background:linear-gradient(135deg,rgba(201,162,93,.16),rgba(201,162,93,.04));}
.row .bar{width:3px; align-self:stretch; border-radius:2px; background:var(--gold-grad);}
.row .grow{flex:1; min-width:0;}
.row .name{font-family:var(--serif); font-size:18px; line-height:1.15;}
.row .desc{font-size:12px; color:var(--muted); margin-top:2px;}
.row .price{font-family:var(--serif); font-size:18px; color:var(--gold-text);}
.row .dur{font-size:11px; color:var(--muted); text-align:right; margin-top:2px;}
.chev{color:var(--muted); font-size:20px;}

/* Avatar */
.avatar{width:50px; height:50px; border-radius:50%; flex:none; display:flex;
  align-items:center; justify-content:center; font-family:var(--serif); font-weight:600;
  font-size:18px; color:var(--gold-text); border:1px solid rgba(201,162,93,.4); background:rgba(201,162,93,.06);}
.avatar.sm{width:38px; height:38px; font-size:14px;}

/* Date chips */
.dates{display:flex; gap:10px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none;}
.dates::-webkit-scrollbar{display:none;}
.datechip{min-width:58px; padding:12px 8px; border-radius:11px; text-align:center; flex:none;
  background:var(--surface); border:1px solid var(--hair); cursor:pointer;}
.datechip .wd{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.datechip .d{font-family:var(--serif); font-size:21px; margin-top:4px;}
.datechip.sel{background:var(--gold-grad); border-color:transparent; color:var(--on-gold);
  box-shadow:0 6px 16px rgba(201,162,93,.3);}
.datechip.sel .wd{color:rgba(26,18,6,.7);}

/* Time chips */
.times{display:grid; grid-template-columns:repeat(4,1fr); gap:9px;}
.timechip{padding:12px 0; text-align:center; border-radius:10px; font-variant-numeric:tabular-nums;
  background:var(--surface); border:1px solid var(--hair); cursor:pointer; font-size:14px; transition:.12s;}
.timechip:hover{border-color:rgba(201,162,93,.4);}
.timechip.sel{background:var(--gold-grad); border-color:transparent; color:var(--on-gold); font-weight:600;
  box-shadow:0 6px 16px rgba(201,162,93,.28);}
.timechip.out{color:rgba(242,238,230,.2); text-decoration:line-through; cursor:not-allowed; background:#0e0c0a;}

/* Status pills */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid;}
.pill.conf{color:var(--gold-line); border-color:rgba(201,162,93,.35);}
.pill.pend{color:rgba(242,238,230,.5); border-color:rgba(242,238,230,.16);}
.badge-new{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-gold);
  background:var(--gold-grad); padding:2px 7px; border-radius:999px;}

/* Inputs */
.field{margin-bottom:14px;}
.field > .label{display:block; margin-bottom:7px;}
input,select,textarea{width:100%; font-family:var(--sans); font-size:14px; color:var(--txt);
  background:var(--input); border:1px solid var(--hair); border-radius:13px; padding:14px 16px;}
input:focus,select,textarea:focus{outline:none; border-color:var(--hair-strong);}
textarea{min-height:64px; resize:vertical;}

/* Toggle */
.toggle{width:46px; height:27px; border-radius:999px; background:var(--input);
  border:1px solid rgba(242,238,230,.16); position:relative; cursor:pointer; flex:none; transition:.2s;}
.toggle::after{content:""; position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%;
  background:rgba(242,238,230,.35); transition:.2s;}
.toggle.on{background:var(--gold-grad); border-color:transparent;}
.toggle.on::after{left:22px; background:var(--on-gold);}

/* Multi-select pills */
.pills{display:flex; flex-wrap:wrap; gap:8px;}
.spill{padding:8px 13px; border-radius:999px; font-size:12px; cursor:pointer;
  background:var(--surface); border:1px solid rgba(201,162,93,.3); color:var(--txt);}
.spill.on{background:var(--gold-grad); border-color:transparent; color:var(--on-gold); font-weight:600;}

/* Section header */
.sec{display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px;}
.sec .h2{font-size:21px;}

/* Bottom sheet */
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  z-index:40; display:none;}
.backdrop.show{display:block;}
.sheet{position:fixed; left:50%; bottom:0; transform:translateX(-50%) translateY(100%);
  width:100%; max-width:440px; background:var(--surface); border-top:1px solid var(--hair-strong);
  border-radius:24px 24px 0 0; padding:14px 22px 30px; z-index:50; transition:transform .3s ease;
  box-shadow:0 -20px 50px rgba(0,0,0,.5);}
.sheet.show{transform:translateX(-50%) translateY(0);}
.handle{width:42px; height:4px; border-radius:2px; background:rgba(242,238,230,.25); margin:0 auto 16px;}

/* Segmented toggle (Dia | Lista) */
.seg{display:flex; background:var(--input); border:1px solid var(--hair); border-radius:12px; padding:3px;}
.seg button{flex:1; border:none; background:transparent; color:var(--muted); font-family:var(--sans);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:9px; border-radius:9px; cursor:pointer;}
.seg button.on{background:var(--gold-grad); color:var(--on-gold); font-weight:600;}

/* Agenda card */
.appt{display:flex; gap:14px; padding:15px; border-radius:15px; background:var(--surface);
  border:1px solid var(--hair); margin-bottom:11px; cursor:pointer;}
.appt.new{border-color:var(--hair-strong);
  background:linear-gradient(135deg,rgba(201,162,93,.14),rgba(201,162,93,.03));}
.appt .gutter{text-align:center; flex:none; width:52px;}
.appt .gutter .t{font-family:var(--serif); font-size:16px; color:var(--gold-text);}
.appt .gutter .e{font-size:10px; color:var(--muted); margin-top:2px;}

/* Stats */
.stats{display:flex; gap:12px; margin:6px 0 16px;}
.stat{flex:1; background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:14px;}
.stat .n{font-family:var(--serif); font-size:23px; color:var(--gold-text);}
.stat .l{font-size:11px; color:var(--muted); margin-top:2px;}

/* Success */
.checkc{width:90px; height:90px; border-radius:50%; background:var(--gold-grad); margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center; animation:pop .45s ease;}
@keyframes pop{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.08);}100%{transform:scale(1);opacity:1;}}

/* helpers */
.center{text-align:center;}
.fab{position:sticky; bottom:0; padding:14px 22px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--phone2) 30%);}
.fade{animation:fadeup .3s ease;}
@keyframes fadeup{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.hide{display:none !important;}
.iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--hair);background:var(--surface);
  color:var(--gold-text);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.nav-back{display:flex;align-items:center;gap:12px;padding:54px 22px 4px;}
.tabbar{display:flex;border-top:1px solid var(--hair);background:var(--phone2);position:sticky;bottom:0;}
.tabbar a{flex:1;text-align:center;padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;}
.tabbar a.on{color:var(--gold-text);}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--surface);
  border:1px solid var(--hair-strong);color:var(--txt);padding:12px 18px;border-radius:12px;
  font-size:13px;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transition:.25s;}
.toast.show{opacity:1;}