/* NexView - base: reset, design tokens, typography, utilities
   (design language ported from the original NexView homepage) */
:root {
  /* Brand */
  --blue:#2563eb; --blue-700:#1d4ed8; --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe;
  --green:#25D366; --green-700:#1ea855;
  /* Neutrals */
  --ink:#0f172a; --ink-2:#111827; --text:#374151; --muted:#6b7280; --muted-2:#9ca3af;
  --line:#e5e7eb; --bg:#f8f9fb; --bg-soft:#f8faff; --bg-card:#ffffff; --dark:#0f172a;
  /* Effects */
  --radius:16px; --radius-sm:9px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 4px 20px rgba(37,99,235,.08);
  --shadow-lg:0 8px 30px rgba(0,0,0,.08);
  --maxw:1280px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink-2); line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1 0 auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ line-height:1.2; font-weight:700; color:var(--ink); letter-spacing:-.02em; }

.wrap{ max-width:var(--maxw); margin:0 auto; width:100%; }

/* Generic buttons (also used by admin) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600;
  font-size:14px; border-radius:var(--radius-sm); padding:11px 20px; cursor:pointer;
  border:1px solid transparent; transition:background .15s, box-shadow .15s, transform .15s; }
.btn:hover{ transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--ink-2); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-wa{ background:var(--green); color:#fff; }
.btn-wa:hover{ background:var(--green-700); }
.btn-danger{ background:#fee2e2; color:#b91c1c; }
.btn-danger:hover{ background:#fecaca; }

/* Utilities */
.hide{ display:none !important; }
.text-center{ text-align:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.spinner{ width:34px; height:34px; border:3px solid var(--blue-100); border-top-color:var(--blue);
  border-radius:50%; animation:spin .8s linear infinite; margin:48px auto; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.state-msg{ text-align:center; color:var(--muted); padding:48px 16px; font-size:15px; }
.notice{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; border-radius:12px;
  padding:14px 18px; font-size:14px; margin:16px auto; max-width:var(--maxw); }