:root {
  --bg:#070707; --bg2:#0c0c0c; --card:#111; --card2:#151515; --line:#1d1d1d; --line2:#2a2a2a;
  --text:#f4f1ea; --soft:#cfcac1; --mute:#8d8a84; --dim:#5f5c57;
  --gold:#c9a45c; --gold2:#e2c88f; --ok:#7fb08a; --warn:#d9b26a; --bad:#d97a6c;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:Inter,system-ui,-apple-system,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { background:var(--bg); color:var(--text); }
body { font-family:var(--sans); font-variant-numeric:lining-nums; -webkit-font-smoothing:antialiased; min-height:100vh; overscroll-behavior-y:none; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); z-index:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, select, textarea { font:inherit; color:var(--text); }
.serif { font-family:var(--serif); font-weight:500; }
.num { font-family:var(--sans); font-variant-numeric:lining-nums tabular-nums; }
.kick { font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--soft); }
.mute { color:var(--mute); } .dim { color:var(--dim); }

/* layout */
.app { position:relative; z-index:1; min-height:100vh; }
.main { max-width:560px; margin:0 auto; padding:calc(18px + var(--safe-t)) 18px calc(110px + var(--safe-b)); }
.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.top h1 { font-family:var(--serif); font-weight:500; font-size:32px; line-height:1.05; }
.back { display:inline-flex; align-items:center; gap:6px; color:var(--mute); font-size:13px; margin-bottom:14px; }
.sec { margin-top:28px; }
.sec-h { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.sec-h h2 { font-family:var(--serif); font-weight:500; font-size:23px; }
.sec-h a, .sec-h button { font-size:12.5px; color:var(--mute); }

/* tab bar (celular) / lateral (computador) */
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; justify-content:space-around; align-items:flex-end; padding:8px 8px calc(8px + var(--safe-b)); background:rgba(8,8,8,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid #161616; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; width:64px; font-size:10.5px; color:var(--dim); padding:4px 0; }
.tab svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; }
.tab.on { color:var(--text); } .tab.on svg { stroke:var(--gold); }
.tab-rec { width:62px; height:62px; margin-top:-26px; border-radius:50%; background:var(--gold); color:#000; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 26px rgba(201,164,92,.28), 0 0 0 6px var(--bg); }
.tab-rec svg { width:26px; height:26px; stroke:#000; fill:none; stroke-width:1.8; }
@media (min-width:900px) {
  .tabs { top:0; bottom:0; right:auto; width:230px; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:2px; padding:28px 14px; border-top:0; border-right:1px solid #161616; }
  .tabs:before { content:"MeuBarbeiro"; order:-2; font-family:var(--serif); font-size:24px; color:var(--text); padding:0 12px 22px; }
  .tab { flex-direction:row; width:auto; gap:12px; font-size:14px; padding:10px 12px; border-radius:8px; color:var(--mute); }
  .tab.on, .tab:hover { background:#141414; }
  .tab-rec { order:-1; width:auto; height:auto; margin:0 0 18px; border-radius:10px; box-shadow:none; padding:12px; gap:10px; font-weight:600; font-size:14px; }
  .tab-rec:after { content:"Novo atendimento"; }
  .main { margin-left:230px; max-width:none; padding:36px clamp(24px,4vw,56px) 60px; }
  .main > * { max-width:980px; margin-left:auto; margin-right:auto; }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .cards { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important; }
}

/* cartões */
.card { background:linear-gradient(160deg,var(--card2),var(--bg2)); border:1px solid var(--line); border-radius:14px; padding:16px; }
.hero { position:relative; overflow:hidden; border-radius:18px; border:1px solid #1d1a14; background:radial-gradient(ellipse at 20% 0%,#1d1912,#0b0b0b 65%); padding:22px 20px; }
.hero .big { font-size:38px; font-weight:600; letter-spacing:-.02em; margin:6px 0 2px; }
.hero .sub { color:var(--mute); font-size:13px; }
.goal { margin-top:16px; }
.goal .bar, .card .bar { height:5px; background:#222; border-radius:5px; overflow:hidden; margin-top:8px; } .goal .bar i, .card .bar i { display:block; height:100%; background:var(--gold); border-radius:5px; }
.goal .row { display:flex; justify-content:space-between; font-size:12px; color:var(--mute); }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.metric { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 14px; }
.metric b { display:block; font-size:21px; font-weight:600; margin-top:6px; letter-spacing:-.01em; }
.metric span { font-size:11px; color:var(--mute); }

/* clientes */
.search { position:relative; margin-bottom:12px; }
.search input { width:100%; background:#0f0f0f; border:1px solid var(--line2); border-radius:12px; padding:13px 14px 13px 40px; font-size:15px; outline:none; }
.search input:focus { border-color:#4a4030; }
.search svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:var(--mute); fill:none; stroke-width:1.7; }
.chips { display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; scrollbar-width:none; } .chips::-webkit-scrollbar { display:none; }
.chip { flex:none; padding:7px 12px; border-radius:20px; border:1px solid var(--line2); font-size:12.5px; color:var(--mute); white-space:nowrap; }
.chip.on { border-color:var(--gold); color:var(--text); background:#17140e; }
.chip b { font-weight:600; color:var(--text); margin-left:4px; }
.cards { display:grid; gap:10px; }
.ccard { display:flex; gap:13px; align-items:center; padding:13px; border-radius:14px; border:1px solid var(--line); background:linear-gradient(160deg,#131313,#0c0c0c); transition:border-color .2s; }
.ccard:active, .ccard:hover { border-color:#3a3226; }
.av { flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 25%,#2a2620,#121110); border:1px solid #2a2620; font-family:var(--serif); font-size:19px; color:var(--text); }
.av.lg { width:68px; height:68px; font-size:28px; }
.ccard .info { flex:1; min-width:0; }
.ccard .nm { font-family:var(--serif); font-size:19px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ccard .ln { font-size:12px; color:var(--mute); margin-top:3px; }
.ccard .rt { text-align:right; flex:none; }
.badge { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; letter-spacing:.04em; padding:3px 8px; border-radius:20px; border:1px solid var(--line2); color:var(--soft); }
.badge:before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.em_dia { color:var(--ok); } .badge.perto { color:var(--warn); } .badge.sumido { color:var(--bad); } .badge.novo { color:var(--soft); }
.ccard .days { font-size:11px; color:var(--dim); margin-top:6px; }

/* ficha */
.phead { display:flex; gap:16px; align-items:center; }
.phead h1 { font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.05; }
.phead .ln { color:var(--mute); font-size:13px; margin-top:4px; }
.actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.act { display:flex; flex-direction:column; align-items:center; gap:6px; padding:11px 6px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:11.5px; color:var(--soft); }
.act svg { width:19px; height:19px; stroke:var(--text); fill:none; stroke-width:1.6; }
.act.gold { background:var(--gold); border-color:var(--gold); color:#000; } .act.gold svg { stroke:#000; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:16px; }
.stats div { background:var(--bg2); padding:11px 8px; text-align:center; }
.stats b { display:block; font-size:16px; font-weight:600; } .stats span { font-size:10px; color:var(--mute); }
.ai { margin-top:16px; border:1px solid #2a2418; background:linear-gradient(160deg,#15120c,#0b0b0b); border-radius:14px; padding:15px; }
.ai p { font-size:13.5px; color:#d6d1c6; line-height:1.6; margin-top:8px; }
.ai ul { margin:8px 0 0 16px; font-size:13px; color:#c9c4ba; line-height:1.6; }
.tl { position:relative; margin-top:6px; }
.tl:before { content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--line2); }
.tli { position:relative; padding:0 0 18px 26px; }
.tli:before { content:""; position:absolute; left:2px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1.5px solid var(--gold); }
.tli .d { font-size:11.5px; color:var(--mute); display:flex; justify-content:space-between; }
.tli .t { font-family:var(--serif); font-size:18px; margin:3px 0 4px; }
.tli p { font-size:13px; color:#c9c4ba; line-height:1.55; }
.tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.tag { font-size:11px; padding:3px 8px; border-radius:6px; background:#161616; border:1px solid var(--line); color:var(--soft); }

/* gravar */
.rec-wrap { min-height:calc(100vh - 180px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.rec-btn { width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#d9b878,#b58d44); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 10px rgba(201,164,92,.08), 0 0 0 22px rgba(201,164,92,.04); transition:transform .15s; }
.rec-btn svg { width:52px; height:52px; stroke:#000; fill:none; stroke-width:1.6; }
.rec-btn.on { animation:pulse 1.4s infinite; background:radial-gradient(circle at 35% 30%,#e08a7c,#b0574a); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(217,122,108,.35)} 70%{box-shadow:0 0 0 26px rgba(217,122,108,0)} 100%{box-shadow:0 0 0 0 rgba(217,122,108,0)} }
.rec-time { font-size:30px; font-weight:600; margin-top:26px; } .rec-hint { color:var(--mute); font-size:13.5px; margin-top:8px; max-width:320px; line-height:1.55; }
.wave { display:flex; gap:3px; height:28px; align-items:center; margin-top:18px; } .wave i { width:3px; background:var(--gold); border-radius:3px; height:6px; transition:height .1s; }
.steps { margin-top:24px; text-align:left; display:grid; gap:10px; }
.steps div { display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--mute); } .steps div.on { color:var(--text); } .steps div.ok { color:var(--ok); }
.spin { width:16px; height:16px; border:2px solid #333; border-top-color:var(--gold); border-radius:50%; animation:sp 1s linear infinite; } @keyframes sp { to { transform:rotate(360deg); } }

/* formulários */
.field { margin-bottom:12px; } .field label { display:block; font-size:11.5px; color:var(--mute); margin-bottom:6px; letter-spacing:.02em; }
.in { width:100%; background:#0f0f0f; border:1px solid var(--line2); border-radius:10px; padding:12px 13px; font-size:15px; outline:none; }
.in:focus { border-color:#4a4030; }
textarea.in { min-height:84px; resize:vertical; line-height:1.5; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--gold); color:#000; border-radius:10px; padding:13px 18px; font-weight:600; font-size:14.5px; }
.btn.block { width:100%; } .btn.ghost { background:transparent; color:var(--text); border:1px solid #333; } .btn.sm { padding:8px 12px; font-size:12.5px; border-radius:8px; }
.btn[disabled] { opacity:.45; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.items .it { display:grid; grid-template-columns:1fr 64px 86px 28px; gap:6px; align-items:center; margin-bottom:6px; }
.items .it .in { padding:10px; font-size:14px; }
.x { color:var(--dim); font-size:20px; }
.tot { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line); margin-top:8px; font-size:14px; }
.tot b { font-weight:600; }

/* lista de lançamentos */
.lst .li { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #151515; gap:10px; }
.lst .li .l b { display:block; font-weight:500; font-size:14px; } .lst .li .l span { font-size:11.5px; color:var(--mute); }
.lst .li .r { text-align:right; font-size:14px; font-weight:600; } .lst .li .r span { display:block; font-size:11px; font-weight:400; color:var(--mute); }
.day { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin:18px 0 2px; }
.seg { display:grid; grid-template-columns:repeat(3,1fr); background:#0f0f0f; border:1px solid var(--line); border-radius:10px; padding:3px; margin-bottom:14px; }
.seg button { padding:8px; border-radius:8px; font-size:13px; color:var(--mute); } .seg button.on { background:#1b1b1b; color:var(--text); }
.bars { display:flex; align-items:flex-end; gap:3px; height:96px; margin-top:12px; }
.bars i { flex:1; background:#262626; border-radius:3px 3px 0 0; min-height:2px; } .bars i.hi { background:var(--gold); }
.insight { display:flex; gap:12px; padding:14px; border-radius:12px; border:1px solid #2a2418; background:#100e0a; margin-bottom:8px; font-size:13.5px; line-height:1.5; color:#d6d1c6; }
.insight svg { flex:none; width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.6; margin-top:2px; }

/* follow-up */
.fu { padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card); margin-bottom:10px; }
.fu .h { display:flex; gap:10px; align-items:center; }
.fu .msg { white-space:pre-line; font-size:13.5px; line-height:1.55; color:#d6d1c6; background:#0b0b0b; border:1px solid var(--line); border-radius:10px; padding:12px; margin:12px 0; }
.wa { background:#25d366; color:#04210f; }

/* vazio, sheet, toast, login */
.empty { text-align:center; padding:34px 18px; border:1px dashed #262626; border-radius:14px; color:var(--mute); font-size:13.5px; line-height:1.6; }
.empty .serif { font-size:22px; color:var(--text); margin-bottom:6px; }
.sheet { position:fixed; inset:0; z-index:50; } .sheet-bg { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.sheet-card { position:absolute; left:0; right:0; bottom:0; max-height:88vh; overflow:auto; background:#0e0e0e; border-top:1px solid var(--line2); border-radius:18px 18px 0 0; padding:10px 18px calc(22px + var(--safe-b)); animation:up .22s ease; }
.sheet-card:before { content:""; display:block; width:38px; height:4px; border-radius:4px; background:#333; margin:0 auto 16px; }
@media (min-width:900px) { .sheet-card { left:50%; right:auto; width:520px; transform:translateX(-50%); bottom:auto; top:8vh; border-radius:16px; border:1px solid var(--line2); } }
@keyframes up { from { transform:translateY(30px); opacity:0; } }
.sheet h3 { font-family:var(--serif); font-weight:500; font-size:24px; margin-bottom:12px; }
.toast { position:fixed; left:50%; bottom:calc(100px + var(--safe-b)); transform:translateX(-50%); z-index:60; background:#1c1c1c; border:1px solid #333; padding:11px 16px; border-radius:10px; font-size:13.5px; }
.login { min-height:100vh; display:flex; flex-direction:column; justify-content:center; max-width:420px; margin:0 auto; padding:30px 22px; position:relative; z-index:1; }
.login .mark { width:56px; height:56px; border-radius:14px; background:#000; border:1px solid #222; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:24px; margin-bottom:26px; }
.login h1 { font-family:var(--serif); font-weight:500; font-size:40px; line-height:1.05; margin-bottom:10px; }
.login p { color:var(--mute); line-height:1.6; margin-bottom:24px; font-size:14.5px; }
.codein { letter-spacing:.5em; text-align:center; font-size:22px; }
.err { color:var(--bad); font-size:13px; min-height:18px; margin-top:8px; }
.demo-bar { position:fixed; top:0; left:0; right:0; z-index:30; background:#1a160d; color:var(--gold2); font-size:11px; text-align:center; padding:4px calc(8px) ; letter-spacing:.06em; }
.install svg { flex:none; width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.6; }
.install { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; border:1px solid #2a2418; background:#100e0a; font-size:12.5px; color:var(--soft); margin-bottom:16px; }

/* iPhone: campos com fonte menor que 16px fazem o Safari dar zoom ao tocar. Tudo em 16px. */
input, select, textarea, .in, .search input, .items .it .in { font-size:16px !important; }
html { -webkit-text-size-adjust:100%; touch-action:manipulation; }

.misses { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.miss { font-size:11px; color:#e07a6c; border:1px solid rgba(217,122,108,.35); background:rgba(217,122,108,.08); border-radius:20px; padding:4px 10px; }
.miss:before { content:"! "; font-weight:600; }
.mdot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#d97a6c; margin-left:7px; vertical-align:middle; }

.phgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.phi { position:relative; padding:0; border:0; background:#111; border-radius:10px; overflow:hidden; aspect-ratio:1; cursor:pointer; }
.phi img { width:100%; height:100%; object-fit:cover; display:block; }
.phi span { position:absolute; left:6px; bottom:5px; font-size:10px; color:#fff; text-shadow:0 1px 3px #000; }