/* VisiGas v1 Visual Prototype — design system
   Ported from docs/design_tokens.md (teal). Static HTML/CSS only. */

:root {
  /* Brand teal */
  --teal-50:#F0FDFA; --teal-100:#CCFBF1; --teal-200:#99F6E4; --teal-400:#2DD4BF;
  --teal-500:#14B8A6; --teal-600:#0D9488; --teal-700:#0F766E; --teal-900:#134E4A;
  /* Cyan accent */
  --cyan-300:#67E8F9; --cyan-400:#22D3EE; --cyan-600:#0891B2;
  /* Slate neutrals */
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1;
  --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1E293B; --slate-900:#0F172A;
  /* Status */
  --red-50:#FEF2F2; --red-100:#FEE2E2; --red-500:#EF4444; --red-600:#DC2626; --red-700:#B91C1C;
  --blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-600:#2563EB; --green-500:#22C55E; --amber-500:#F59E0B;
  /* Radii */
  --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-3xl:24px; --r-full:9999px;
  /* Shadows */
  --sh-sm:0 1px 2px rgba(15,23,42,.06);
  --sh-md:0 4px 6px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.05);
  --sh-lg:0 10px 20px rgba(15,23,42,.08);
  --sh-teal:0 10px 22px rgba(13,148,136,.28);
  --sh-slate:0 12px 24px rgba(15,23,42,.18);
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; }
body {
  font-family:inherit; color:var(--slate-800);
  background:#0b1220; /* desktop backdrop */
  font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* ---------- Animations (ported verbatim from reference index.html) ---------- */
@keyframes slideUpFade{ from{ opacity:0; transform:translateY(20px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes scaleIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } }
.animate-enter{ animation:slideUpFade .5s cubic-bezier(.16,1,.3,1) forwards; }
.animate-fade-in{ animation:fadeIn .4s ease-out forwards; }
.animate-scale-in{ animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1) forwards; }
.delay-100{ animation-delay:.1s; opacity:0; animation-fill-mode:forwards; }
.delay-200{ animation-delay:.2s; opacity:0; animation-fill-mode:forwards; }
.delay-300{ animation-delay:.3s; opacity:0; animation-fill-mode:forwards; }
.tap-active:active{ transform:scale(.96); transition:transform .1s; }
/* glass-panel: exact reference name/values (alias of .glass) */
.glass-panel{ background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.5); }

/* ---------- App frame (phone-width column centered on desktop, full-width on mobile) ---------- */
.device {
  position:relative; width:100%; max-width:440px; min-height:100vh; margin:0 auto;
  background:var(--teal-50); display:flex; flex-direction:column;
  box-shadow:0 0 60px rgba(0,0,0,.45);
}
@media (min-width:480px){ .device{ min-height:780px; margin:24px auto; border-radius:36px; overflow:hidden; } }
.device.dark { background:var(--slate-900); color:#fff; }
/* Dashboard subtle gradient */
.device.dash { background:linear-gradient(160deg,var(--slate-50),rgba(240,253,250,.5)); }

/* ---------- Typography ---------- */
.t-hero{ font-size:30px; font-weight:900; letter-spacing:-.5px; color:var(--teal-900); }
.t-hero-dark{ font-size:30px; font-weight:900; letter-spacing:-.5px; color:var(--slate-800); }
.t-display{ font-size:36px; font-weight:900; letter-spacing:-.5px; }
.t-title{ font-size:20px; font-weight:700; }
.t-subtitle{ font-size:18px; font-weight:700; }
.t-body{ font-size:16px; font-weight:500; }
.t-bodysm{ font-size:14px; font-weight:500; color:var(--slate-500); }
.t-label{ font-size:12px; font-weight:700; }
.t-caps{ font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--slate-400); }
.t-mini{ font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--slate-400); }
.muted{ color:var(--slate-500); } .muted2{ color:var(--slate-400); }

/* ---------- Top bar ---------- */
.topbar{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background:#fff; box-shadow:var(--sh-sm); position:sticky; top:0; z-index:20; }
.topbar.clear{ background:transparent; box-shadow:none; }
.topbar h1{ font-size:18px; font-weight:700; color:var(--slate-800); }
.topbar .left{ display:flex; align-items:center; gap:8px; }
.topbar .status{ display:flex; align-items:center; gap:12px; color:var(--slate-500); }
.topbar .status .battery{ display:flex; align-items:center; gap:4px; font-size:12px; font-weight:600; }
.iconbtn{ width:40px; height:40px; border-radius:var(--r-full); display:grid; place-items:center; color:var(--slate-600); }
.iconbtn:hover{ background:var(--slate-100); }
.dark .topbar{ background:transparent; box-shadow:none; } .dark .topbar h1{ color:#fff; }

/* ---------- Page body ---------- */
.body{ flex:1; padding:24px 20px 96px; overflow-y:auto; }
.body.center{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.section-gap{ height:24px; }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1px solid var(--slate-100); border-radius:var(--r-3xl); box-shadow:var(--sh-sm); padding:24px; }
.card + .card{ margin-top:24px; }
.glass{ background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6); border-radius:var(--r-3xl); box-shadow:var(--sh-lg); padding:20px; }
.card-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.badge{ width:48px; height:48px; border-radius:var(--r-2xl); display:grid; place-items:center; flex:none; }
.badge.teal{ background:var(--teal-50); color:var(--teal-600); }
.badge.cyan{ background:var(--teal-50); color:var(--cyan-600); }
.badge.slate{ background:var(--slate-100); color:var(--slate-600); }
.badge.blue{ background:var(--blue-100); color:var(--blue-600); }
.badge.red{ background:var(--red-100); color:var(--red-600); }
.card-head .sub{ font-size:12px; color:var(--slate-400); font-weight:600; margin-top:2px; }
.divider{ height:1px; background:var(--slate-100); margin:18px 0; border:0; }

/* ---------- Buttons ---------- */
.btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:18px; border-radius:var(--r-2xl); font-size:16px; font-weight:700; transition:transform .1s, background .15s; }
.btn:active{ transform:scale(.97); }
.btn-teal{ background:var(--teal-600); color:#fff; box-shadow:var(--sh-teal); }
.btn-teal:hover{ background:var(--teal-700); }
.btn-dark{ background:linear-gradient(90deg,var(--slate-800),var(--slate-900)); color:#fff; box-shadow:var(--sh-slate); }
.btn-dark:hover{ filter:brightness(1.08); }
.btn-destructive{ background:var(--red-50); color:var(--red-600); border:1px solid var(--red-100); }
.btn-destructive:hover{ background:var(--red-100); }
.btn-secondary{ background:#fff; color:var(--slate-700); border:1px solid var(--slate-200); }
.btn-ghost{ background:transparent; color:var(--slate-500); }
.btn-white{ background:#fff; color:var(--slate-900); border-radius:var(--r-xl); padding:12px 24px; width:auto; box-shadow:var(--sh-lg); }
.btn-row{ display:flex; gap:16px; } .btn-row .btn{ }
.link{ color:var(--teal-600); font-weight:600; }
.stack > * + *{ margin-top:16px; }

/* ---------- Inputs ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--slate-500); margin-bottom:8px; }
.input{ width:100%; padding:16px; font-size:16px; font-weight:600; color:var(--slate-800);
  background:#fff; border:2px solid var(--slate-200); border-radius:var(--r-2xl); outline:none; transition:border .15s, box-shadow .15s; }
.input::placeholder{ color:var(--slate-300); }
.input:focus{ border-color:var(--teal-500); box-shadow:0 0 0 4px rgba(20,184,166,.12); }
.input-suffix{ position:relative; } .input-suffix .suffix{ position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--slate-400); font-weight:700; }

/* ---------- Chips / segmented ---------- */
.chips{ display:flex; gap:12px; } .chips.grid3{ display:grid; grid-template-columns:repeat(3,1fr); }
.chip{ padding:14px 8px; text-align:center; border-radius:var(--r-2xl); border:2px solid #fff; background:#fff;
  box-shadow:var(--sh-sm); font-weight:700; color:var(--slate-400); }
.chip.sel{ border-color:var(--teal-500); background:var(--teal-50); color:var(--teal-700); box-shadow:var(--sh-md); }
.segmented{ display:flex; background:rgba(226,232,240,.6); padding:6px; border-radius:var(--r-2xl); gap:4px; }
.segmented button{ flex:1; padding:9px 6px; font-size:12px; font-weight:700; border-radius:var(--r-xl); color:var(--slate-400); }
.segmented button.sel{ background:#fff; color:var(--teal-700); box-shadow:var(--sh-sm); }

/* ---------- Pills ---------- */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-full); font-size:13px; font-weight:600; }
.pill.safe{ background:rgba(204,251,241,.6); color:var(--teal-700); }
.pill.low{ background:var(--red-100); color:var(--red-600); }
.pill.teal{ background:var(--teal-100); color:var(--teal-700); font-weight:800; }
.pill.pending{ background:var(--amber-500); color:#fff; }
.pill.linked{ background:var(--teal-600); color:#fff; }

/* ---------- Rows / list ---------- */
.row{ display:flex; align-items:center; gap:14px; padding:14px 0; }
.row .grow{ flex:1; } .row .right{ margin-left:auto; }
.tappable{ cursor:pointer; } .tappable:hover{ opacity:.85; }
.list-item{ display:flex; align-items:center; gap:14px; padding:16px; background:#fff; border:1px solid var(--slate-100); border-radius:var(--r-2xl); box-shadow:var(--sh-sm); }
.list-item + .list-item{ margin-top:12px; }

/* ---------- Toggle / slider ---------- */
.toggle{ width:48px; height:28px; border-radius:var(--r-full); background:var(--slate-300); position:relative; flex:none; }
.toggle.on{ background:var(--teal-600); } .toggle::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:var(--sh-sm); transition:left .15s; }
.toggle.on::after{ left:23px; }
input[type=range]{ -webkit-appearance:none; width:100%; height:8px; border-radius:var(--r-full); background:var(--slate-100); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--teal-600); box-shadow:var(--sh-md); cursor:pointer; }

/* ---------- Info tip ---------- */
.tip{ display:flex; gap:14px; background:rgba(239,246,255,.8); border:1px solid var(--blue-100); border-radius:var(--r-2xl); padding:16px; }
.tip .ic{ width:36px; height:36px; border-radius:var(--r-full); background:var(--blue-100); color:var(--blue-600); display:grid; place-items:center; flex:none; }

/* ---------- Bottom nav ---------- */
.bottomnav{ position:absolute; bottom:0; left:0; right:0; height:64px; background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid rgba(226,232,240,.6);
  box-shadow:0 -4px 20px rgba(0,0,0,.03); display:flex; }
.bottomnav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--slate-400); position:relative; }
.bottomnav a span{ font-size:10px; font-weight:700; opacity:0; }
.bottomnav a.active{ color:var(--teal-600); } .bottomnav a.active span{ opacity:1; }
.bottomnav a.active::before{ content:''; position:absolute; top:8px; width:40px; height:32px; background:var(--teal-50); border-radius:var(--r-full); z-index:-1; }

/* ---------- Gas bottle ---------- */
.bottle-wrap{ display:flex; flex-direction:column; align-items:center; }
.bottle{ filter:drop-shadow(0 16px 22px rgba(15,23,42,.18)); }

/* ---------- Pairing glow ---------- */
.glow-wrap{ position:relative; width:160px; height:160px; display:grid; place-items:center; margin-bottom:40px; }
.glow-ring{ position:absolute; inset:0; border-radius:50%; }
.glow-ring.ping{ background:var(--teal-500); opacity:.18; animation:ping 2s cubic-bezier(0,0,.2,1) infinite; }
.glow-ring.ping.d{ animation-delay:.6s; opacity:.1; }
@keyframes ping{ 75%,100%{ transform:scale(1.7); opacity:0; } }
.glow-core{ width:160px; height:160px; border-radius:50%; display:grid; place-items:center; }
.glow-core.scan{ background:rgba(30,41,59,.5); border:1px solid var(--slate-700); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--teal-400); }
.glow-core.found{ background:linear-gradient(45deg,var(--teal-500),var(--cyan-400)); box-shadow:0 0 50px rgba(20,184,166,.45); color:#fff; transform:scale(1.06); }
.glow-core.fail{ background:rgba(30,41,59,.5); border:1px solid var(--slate-700); color:var(--red-500); }
.blob{ position:absolute; border-radius:50%; filter:blur(110px); opacity:.12; }
.blob.tl{ top:-60px; left:-60px; width:280px; height:280px; background:var(--teal-500); }
.blob.br{ bottom:-60px; right:-60px; width:320px; height:320px; background:var(--cyan-600); }
.device-card-dark{ width:100%; background:rgba(30,41,59,.8); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--slate-700); border-radius:var(--r-2xl); padding:18px; display:flex; align-items:center; gap:14px; box-shadow:var(--sh-slate); }

/* ---------- Chart ---------- */
.chart{ width:100%; height:160px; }
.chart-label{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--slate-800); }
.chart-label .bar{ width:8px; height:24px; border-radius:var(--r-full); background:var(--teal-500); }

/* ---------- Banner / feedback ---------- */
.proto-banner{ background:var(--slate-900); color:#fff; padding:10px 16px; text-align:center; font-size:12px; font-weight:600; line-height:1.5; }
.proto-banner b{ color:var(--teal-400); }
.feedback{ margin:28px 4px 8px; }
.feedback label{ font-size:12px; font-weight:700; color:var(--slate-400); display:block; margin-bottom:6px; }
.feedback textarea{ width:100%; min-height:64px; border:1px dashed var(--slate-300); border-radius:var(--r-xl); padding:10px; font-family:inherit; font-size:13px; resize:vertical; background:rgba(255,255,255,.6); }
.feedback .hint{ font-size:11px; color:var(--slate-400); margin-top:4px; }
.dark .feedback label,.dark .feedback .hint{ color:var(--slate-500); }
.dark .feedback textarea{ background:rgba(30,41,59,.5); border-color:var(--slate-700); color:#fff; }

/* spacing helpers */
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}
.center-x{ text-align:center; } .flex{ display:flex; } .between{ justify-content:space-between; } .aic{ align-items:center; } .gap8{ gap:8px; } .gap12{ gap:12px; }

/* Reviewer notes panel — sits UNDER the app/device frame (not part of the app UI) */
.notes-panel{ max-width:440px; margin:0 auto 48px; padding:16px 18px; background:#111a2e; border:1px solid #233048; border-radius:16px; color:#cbd5e1; }
.notes-panel h4{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--teal-400); margin:0 0 4px; }
.notes-panel .np-hint{ font-size:11px; color:#64748b; margin:0 0 10px; }
.notes-panel textarea{ width:100%; min-height:90px; background:#0b1220; border:1px solid #233048; border-radius:10px; padding:10px; color:#e2e8f0; font-family:inherit; font-size:13px; resize:vertical; }
.notes-panel .np-bar{ display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.notes-panel .np-save{ display:inline-flex; align-items:center; gap:6px; background:var(--teal-600); color:#fff; font-weight:700; font-size:13px; padding:9px 16px; border-radius:9999px; cursor:pointer; border:none; }
.notes-panel .np-save:hover{ background:var(--teal-500); }
.notes-panel .np-save:disabled{ opacity:.6; cursor:default; }
.notes-panel .np-status{ font-size:11px; color:#94a3b8; }

/* Fixed home/menu button (review tool, on every screen) */
.home-fab{ position:fixed; left:14px; bottom:14px; z-index:300; display:inline-flex; align-items:center; gap:6px;
  background:#0f1830; color:#e2e8f0; border:1px solid #233048; border-radius:9999px; padding:9px 15px;
  font-size:13px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.45); }
.home-fab:hover{ border-color:var(--teal-600); color:#fff; }
.home-fab i{ width:16px; height:16px; }

/* ===== Interactivity layer (state-driven demo) ===== */
@keyframes pageEnter{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:translateX(0); } }
.page-transition{ animation:pageEnter .3s ease-out; }
.page-leaving{ opacity:0 !important; transition:opacity .18s ease-in; }

/* Toast / in-app notification */
.vg-toast-wrap{ position:fixed; top:14px; left:0; right:0; z-index:500; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.vg-toast{ pointer-events:auto; max-width:380px; width:calc(100% - 32px); background:#fff; border:1px solid var(--slate-200); border-left:4px solid var(--teal-500); border-radius:14px; box-shadow:0 12px 30px rgba(15,23,42,.18); padding:12px 14px; display:flex; gap:10px; align-items:flex-start; animation:slideUpFade .4s cubic-bezier(.16,1,.3,1); }
.vg-toast.warn{ border-left-color:var(--red-500); }
.vg-toast .vg-ic{ width:34px; height:34px; border-radius:10px; background:var(--teal-50); color:var(--teal-600); display:grid; place-items:center; flex:none; }
.vg-toast.warn .vg-ic{ background:var(--red-100); color:var(--red-600); }
.vg-toast .vg-tt{ font-size:13px; font-weight:700; color:var(--slate-800); }
.vg-toast .vg-tb{ font-size:12px; color:var(--slate-500); margin-top:2px; }

/* Demo controls panel */
.demo-fab{ position:fixed; top:14px; right:14px; z-index:400; background:var(--teal-600); color:#fff; border-radius:9999px; padding:9px 14px; font-size:12px; font-weight:800; box-shadow:0 6px 18px rgba(13,148,136,.4); display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
.demo-fab i{ width:15px; height:15px; }
.demo-panel{ position:fixed; top:52px; right:14px; z-index:400; width:236px; background:#0f1830; color:#e2e8f0; border:1px solid #233048; border-radius:16px; padding:14px; box-shadow:0 18px 40px rgba(0,0,0,.5); display:none; }
.demo-panel.open{ display:block; animation:scaleIn .2s ease-out; }
.demo-panel h5{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--teal-400); margin:0 0 6px; }
.demo-panel .seg{ display:flex; gap:6px; margin:6px 0 12px; }
.demo-panel .seg button{ flex:1; padding:7px; border-radius:9px; font-size:12px; font-weight:700; background:#1b2740; color:#9fb0c7; }
.demo-panel .seg button.on{ background:var(--teal-600); color:#fff; }
.demo-panel .act{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:9px 10px; border-radius:9px; font-size:12px; font-weight:600; color:#dbe5f0; }
.demo-panel .act i{ width:15px; height:15px; }
.demo-panel .act:hover{ background:#1b2740; }
.demo-panel .act.danger{ color:#fca5a5; }

/* Locked features (Inactive mode) */
.locked{ opacity:.5; pointer-events:none; filter:grayscale(.4); }
.lock-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--slate-400); }
.lock-badge i{ width:13px; height:13px; }
.upgrade-overlay{ margin:18px; padding:26px 22px; text-align:center; background:#fff; border:1px dashed var(--teal-500); border-radius:var(--r-3xl); box-shadow:var(--sh-sm); }
.upgrade-overlay .ic{ width:56px; height:56px; border-radius:var(--r-2xl); background:var(--teal-50); color:var(--teal-600); display:grid; place-items:center; margin:0 auto 14px; }

/* Per-screen description (under the app frame, above the notes panel) */
.desc-panel{ max-width:440px; margin:20px auto 14px; padding:14px 18px; background:#0f1830;
  border:1px solid #233048; border-left:3px solid var(--teal-500); border-radius:14px; }
.desc-panel h4{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--teal-400); margin:0 0 5px; }
.desc-panel p{ font-size:13px; line-height:1.55; margin:0; color:#aab8c8; }