:root{
  --bg:#fafafa;
  --bg-soft:#f3f3f5;
  --surface:#ffffff;
  --surface2:#f6f6f8;
  --line:#e7e7ea;
  --line-strong:#d8d8dd;
  --ink:#131316;
  --ink2:#57575f;
  --ink3:#9c9ca4;
  --black:#0c0c0e;
  --white:#ffffff;
  --green:#1fa855;
  --amber:#c98a1a;
  --red:#d64545;
  --shadow-sm:0 1px 3px rgba(18,18,22,.06);
  --shadow-md:0 14px 34px rgba(18,18,22,.08);
  --shadow-lg:0 34px 80px rgba(18,18,22,.13);
  --radius:16px;
  --radius-lg:22px;
  --ease:cubic-bezier(.16,.84,.24,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);line-height:1.6;
  background:var(--bg);min-height:100vh;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none;}
img{max-width:100%;display:block;}
input,select,textarea{font-family:inherit;}

.container{width:100%;max-width:1160px;margin:0 auto;padding:0 24px;}

/* DEMO HEADER — shared across all demo pages */
.demo-topbar{position:sticky;top:0;z-index:50;background:rgba(250,250,250,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.demo-topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1160px;margin:0 auto;gap:16px;flex-wrap:wrap;}
.demo-brand{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:700;}
.demo-brand .logo{font-weight:800;letter-spacing:-.02em;}
.demo-brand .logo span{color:var(--ink3);}
.demo-brand .sep{color:var(--line-strong);}
.demo-brand .label{color:var(--ink2);font-weight:600;}
.demo-tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--surface2);border:1px solid var(--line-strong);color:var(--ink2);padding:4px 10px;border-radius:20px;}
.demo-cta{display:inline-flex;align-items:center;gap:8px;background:var(--black);color:#fff;padding:9px 18px;border-radius:50px;font-size:.82rem;font-weight:600;transition:transform .2s,box-shadow .2s;}
.demo-cta:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.demo-back{font-size:.82rem;color:var(--ink2);font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.demo-back:hover{color:var(--ink);}

.demo-banner{background:var(--surface2);border-bottom:1px solid var(--line);padding:10px 24px;text-align:center;font-size:.82rem;color:var(--ink2);}
.demo-banner strong{color:var(--ink);}

.demo-shell{max-width:1160px;margin:0 auto;padding:32px 24px 80px;}
.demo-page-head{margin-bottom:28px;}
.demo-page-head h1{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;margin-bottom:6px;}
.demo-page-head p{color:var(--ink2);font-size:.95rem;}

/* Shared components */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:50px;font-size:.88rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;}
.btn-primary{background:var(--black);color:#fff;}
.btn-primary:hover{box-shadow:var(--shadow-md);}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink3);}
.btn-sm{padding:7px 14px;font-size:.78rem;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;}
.badge-green{background:rgba(31,168,85,.12);color:var(--green);}
.badge-amber{background:rgba(201,138,26,.12);color:var(--amber);}
.badge-red{background:rgba(214,69,69,.12);color:var(--red);}
.badge-gray{background:var(--surface2);color:var(--ink2);border:1px solid var(--line-strong);}

.empty-state{text-align:center;padding:60px 20px;color:var(--ink3);}

/* Owner alert toast — simulates a WhatsApp notification pushed to the business owner's phone */
.owner-alert{position:fixed;top:20px;right:20px;z-index:999;display:flex;align-items:flex-start;gap:12px;background:var(--black);color:#fff;padding:14px 16px;border-radius:16px;box-shadow:var(--shadow-lg);max-width:320px;transform:translateX(140%);transition:transform .4s var(--ease);}
.owner-alert.show{transform:translateX(0);}
.owner-alert-icon{font-size:1.05rem;flex-shrink:0;line-height:1.3;}
.owner-alert-title{font-size:.76rem;font-weight:700;margin-bottom:3px;}
.owner-alert-text{font-size:.79rem;color:rgba(255,255,255,.7);line-height:1.45;}
@media(max-width:700px){ .owner-alert{left:16px;right:16px;max-width:none;top:14px;} }

@media(max-width:700px){
  .demo-topbar-inner{padding:12px 16px;}
  .demo-shell{padding:24px 16px 64px;}
}