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

:root{
  --teal:#171717;
  --teal-dark:#000000;
  --amber:#F2A93B;
  --bg:#FFFFFF;
  --ink:#111111;
  --danger:#D6534B;
  --success:#171717;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}

.wrap{max-width:480px;margin:0 auto;padding:32px 20px;}
.wrap-wide{max-width:680px;margin:0 auto;padding:24px 20px;}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.back-btn{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal-dark);text-decoration:none;}

.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--bg);}
.logo-badge{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));box-shadow:0 10px 25px rgba(0,0,0,.25);}
.hero h1{font-size:2.4rem;margin:0;letter-spacing:-0.02em;}
.hero p{color:rgba(0,0,0,.7);font-size:.95rem;margin-top:8px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:14px;font-weight:600;font-size:.95rem;border:none;cursor:pointer;text-decoration:none;transition:transform .1s ease;width:100%;}
.btn:active{transform:scale(.98);}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--teal),var(--teal-dark));}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid rgba(0,0,0,.2);}
.btn-subtle{background:rgba(0,0,0,.08);color:var(--teal-dark);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-wa{background:var(--teal-dark);color:#fff;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-sm{padding:9px 14px;font-size:.8rem;border-radius:10px;}
.btn-auto{width:auto;}

.card{background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.03);padding:26px;}
.card + .card{margin-top:12px;}

label{display:block;text-align:left;margin-bottom:14px;}
label span{display:block;font-size:.72rem;font-weight:700;color:rgba(0,0,0,.7);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=time],select,textarea{
  width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.2);
  font-size:.95rem;font-family:inherit;outline:none;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,0,0,.12);}

.tabs{display:flex;gap:8px;background:rgba(0,0,0,.08);padding:4px;border-radius:12px;margin-bottom:20px;}
.tabs button{flex:1;padding:9px;border:none;border-radius:9px;background:transparent;font-weight:600;font-size:.85rem;color:rgba(0,0,0,.5);cursor:pointer;}
.tabs button.active{background:#fff;color:var(--teal-dark);box-shadow:0 1px 3px rgba(0,0,0,.08);}

.pill{display:inline-block;padding:4px 11px;border-radius:99px;font-size:.72rem;font-weight:700;}
.pill-ok{background:rgba(0,0,0,.1);color:var(--teal-dark);}
.pill-warn{background:rgba(242,169,59,.2);color:#8A5A0E;}
.pill-bad{background:rgba(214,83,75,.15);color:#A63B34;}
.pill-neutral{background:rgba(0,0,0,.1);color:var(--teal-dark);}

.msg-error{color:var(--danger);font-size:.87rem;margin:8px 0;}
.msg-ok{color:var(--success);font-weight:600;font-size:.87rem;margin:8px 0;text-align:center;}
.muted{color:rgba(0,0,0,.45);font-size:.85rem;}

.list-item{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:14px;padding:14px 16px;margin-bottom:10px;}
.between{display:flex;align-items:center;justify-content:space-between;width:100%;}

.nav-chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.nav-chip{flex-shrink:0;padding:9px 16px;border-radius:99px;font-weight:600;font-size:.85rem;border:none;cursor:pointer;background:rgba(0,0,0,.08);color:var(--teal-dark);}
.nav-chip.active{color:#fff;background:linear-gradient(135deg,var(--teal),var(--teal-dark));}

.topheader{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,0,0,.1);padding:16px 20px;}
.topheader-row{max-width:680px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}

.day-chip{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.08);color:var(--teal-dark);font-weight:700;font-size:.78rem;cursor:pointer;border:2px solid transparent;user-select:none;}
.day-chip.active{background:var(--teal);color:#fff;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}
.switch{position:relative;width:44px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;inset:0;background:rgba(0,0,0,.2);border-radius:99px;transition:.2s;}
.slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
input:checked + .slider{background:var(--teal);}
input:checked + .slider:before{transform:translateX(18px);}