/* ==========================================================================
   Abdul Data Sub Nigeria Limited — design system
   One stylesheet for the whole site:
     <link rel="stylesheet" href="assets/app.css">
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */

:root {
  /* Brand — emerald */
  --brand-50:#ECFDF5; --brand-100:#D1FAE5; --brand-200:#A7F3D0;
  --brand-300:#6EE7B7; --brand-400:#34D399; --brand-500:#10B981;
  --brand-600:#059669; --brand-700:#047857; --brand-800:#065F46;
  --brand-900:#064E3B; --brand-950:#022C22;

  /* Neutrals — slate */
  --n-0:#FFFFFF; --n-50:#F8FAFC; --n-100:#F1F5F9; --n-200:#E2E8F0;
  --n-300:#CBD5E1; --n-400:#94A3B8; --n-500:#64748B; --n-600:#475569;
  --n-700:#334155; --n-800:#1E293B; --n-900:#0F172A;

  /* Semantic */
  --success:#059669; --success-bg:#ECFDF5;
  --warning:#B45309; --warning-bg:#FFFBEB;
  --danger:#DC2626;  --danger-bg:#FEF2F2;
  --info:#0369A1;    --info-bg:#F0F9FF;

  /* Roles */
  --bg:var(--n-50);
  --surface:var(--n-0);
  --surface-alt:var(--n-100);
  --text:var(--n-900);
  --text-muted:var(--n-500);
  --text-subtle:var(--n-400);
  --border:var(--n-200);
  --border-soft:var(--n-100);
  --accent:var(--brand-600);
  --accent-hover:var(--brand-700);
  --accent-soft:var(--brand-50);
  --on-accent:#FFFFFF;

  --font:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,
         'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-full:999px;

  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,.10),0 4px 8px rgba(15,23,42,.04);
  --shadow-brand:0 8px 24px rgba(5,150,105,.24);

  --header-h:60px; --nav-h:64px; --maxw:1140px;
  --ring:0 0 0 3px rgba(5,150,105,.28);
  --ease:cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}

/* 2. Reset -------------------------------------------------------------- */

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; padding:0; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100dvh;
}

img,svg,video { display:block; max-width:100%; }
img { height:auto; }
button,input,select,textarea { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }
ul,ol { list-style:none; }
[hidden],.hidden { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }
::selection { background:var(--brand-100); color:var(--brand-900); }

/* 3. Typography --------------------------------------------------------- */

h1,h2,h3,h4,h5 { font-weight:700; line-height:1.25; letter-spacing:-.02em; color:var(--text); }
h1 { font-size:clamp(24px,5vw,32px); }
h2 { font-size:clamp(20px,4vw,24px); }
h3 { font-size:18px; }
h4 { font-size:16px; }
p { color:var(--text-muted); }
small { font-size:13px; }

.text-muted{color:var(--text-muted);} .text-subtle{color:var(--text-subtle);}
.text-success{color:var(--success);} .text-danger{color:var(--danger);}
.text-center{text-align:center;} .text-right{text-align:right;}

.eyebrow {
  font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
}

/* Money always uses tabular figures so columns line up. */
.money { font-variant-numeric:tabular-nums; letter-spacing:-.02em; font-weight:700; }

.lede { font-size:16px; line-height:1.7; color:var(--text-muted); }

/* 4. Layout ------------------------------------------------------------- */

.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s-4); }
.container-narrow { max-width:680px; }
.container-tight { max-width:460px; }
.page { padding-block:var(--s-6) var(--s-10); }

.stack > * + * { margin-top:var(--s-4); }
.stack-lg > * + * { margin-top:var(--s-6); }
.stack-sm > * + * { margin-top:var(--s-2); }

.row { display:flex; align-items:center; gap:var(--s-3); }
.row-between { justify-content:space-between; }
.row-wrap { flex-wrap:wrap; }

.grid { display:grid; gap:var(--s-4); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

@media (max-width:860px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px) { .grid-2 { grid-template-columns:1fr; } }

.section-head {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-4); margin-bottom:var(--s-4);
}
.section-head h2 { font-size:19px; }
.section-head a { font-size:13px; font-weight:600; white-space:nowrap; }

/* 5. Header ------------------------------------------------------------- */

.app-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-soft);
  padding-top:env(safe-area-inset-top,0px);
}

.app-header__inner {
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--s-4);
}

.brand {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-weight:800; font-size:16px; letter-spacing:-.02em; color:var(--text);
}
.brand:hover { color:var(--text); }

.brand__mark {
  width:32px; height:32px; border-radius:9px;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand-500),var(--brand-700));
  color:#fff; font-size:15px; font-weight:800;
  box-shadow:var(--shadow-brand); flex:none;
}
.brand__name { white-space:nowrap; }
.brand__name span { color:var(--accent); }

.header-actions { display:flex; align-items:center; gap:var(--s-2); }

.top-nav { display:none; gap:var(--s-1); }
.top-nav a {
  padding:8px 14px; border-radius:var(--r-full);
  font-size:14px; font-weight:600; color:var(--text-muted);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.top-nav a:hover { background:var(--surface-alt); color:var(--text); }
.top-nav a.is-active { background:var(--accent-soft); color:var(--brand-700); }
@media (min-width:900px) { .top-nav { display:flex; } }

/* 6. Bottom nav --------------------------------------------------------- */

.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--border-soft);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

.bottom-nav a {
  flex:1; min-width:0; height:var(--nav-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; font-size:11px; font-weight:600; color:var(--text-subtle);
  transition:color .18s var(--ease);
}
.bottom-nav a svg { width:22px; height:22px; }
.bottom-nav a.is-active,.bottom-nav a:hover { color:var(--accent); }

.has-bottom-nav { padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px)); }
@media (min-width:900px) {
  .bottom-nav { display:none; }
  .has-bottom-nav { padding-bottom:0; }
}

/* 7. Cards -------------------------------------------------------------- */

.card {
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--s-5);
}
.card--flush { padding:0; overflow:hidden; }
.card--pad-lg { padding:var(--s-6); }

.card__head {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--border-soft);
}
.card__head h3 { font-size:16px; }
.card__body { padding:var(--s-5); }

/* Balance card — the hero of the app */
.balance-card {
  position:relative; overflow:hidden;
  border-radius:var(--r-xl); padding:var(--s-6); color:#fff;
  background:
    radial-gradient(120% 120% at 100% 0%,rgba(52,211,153,.55) 0%,transparent 55%),
    linear-gradient(140deg,var(--brand-700) 0%,var(--brand-900) 100%);
  box-shadow:var(--shadow-brand);
}
.balance-card::after {
  content:''; position:absolute; right:-60px; bottom:-90px;
  width:240px; height:240px; border-radius:50%;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.balance-card > * { position:relative; z-index:1; }

.balance-card__label {
  font-size:13px; font-weight:600; color:rgba(255,255,255,.72);
  display:flex; align-items:center; gap:var(--s-2);
}
.balance-card__amount {
  font-size:clamp(30px,8vw,40px); font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin-top:var(--s-1); line-height:1.1;
}
.balance-card__meta { font-size:13px; color:rgba(255,255,255,.66); margin-top:var(--s-2); }
.balance-card__actions { display:flex; gap:var(--s-2); margin-top:var(--s-5); flex-wrap:wrap; }

.btn-on-dark {
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.btn-on-dark:hover { background:rgba(255,255,255,.22); color:#fff; }
.btn-on-dark--solid { background:#fff; color:var(--brand-800); border-color:#fff; }
.btn-on-dark--solid:hover { background:var(--brand-50); color:var(--brand-800); }

.stat {
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-md); padding:var(--s-4); box-shadow:var(--shadow-xs);
}
.stat__label { font-size:12px; font-weight:600; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.stat__value { font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:2px; }

/* 8. Buttons ------------------------------------------------------------ */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:46px; padding:0 var(--s-5); border-radius:var(--r-md);
  font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);
}
.btn:active { transform:translateY(1px); }
.btn svg { width:18px; height:18px; flex:none; }

.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:0 1px 2px rgba(5,150,105,.24); }
.btn-primary:hover { background:var(--accent-hover); color:#fff; box-shadow:var(--shadow-brand); }

.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-xs); }
.btn-secondary:hover { background:var(--n-50); border-color:var(--n-300); color:var(--text); }

.btn-soft { background:var(--accent-soft); color:var(--brand-700); }
.btn-soft:hover { background:var(--brand-100); color:var(--brand-800); }

.btn-ghost { background:transparent; color:var(--text-muted); }
.btn-ghost:hover { background:var(--surface-alt); color:var(--text); }

.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#B91C1C; color:#fff; }

.btn-sm { height:38px; padding:0 var(--s-4); font-size:14px; border-radius:var(--r-sm); }
.btn-lg { height:54px; padding:0 var(--s-6); font-size:16px; }
.btn-block { display:flex; width:100%; }
.btn-icon { height:40px; width:40px; padding:0; border-radius:var(--r-full); }

.btn:disabled,.btn[aria-disabled='true'],.btn.is-loading { opacity:.58; pointer-events:none; }
.btn.is-loading::before {
  content:''; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* 9. Forms -------------------------------------------------------------- */

.field { display:block; }
.field + .field { margin-top:var(--s-4); }

.label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; color:var(--text); }
.hint { font-size:13px; color:var(--text-muted); margin-top:6px; }

.input,.select,.textarea {
  width:100%; height:48px; padding:0 var(--s-4);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); font-size:15px; color:var(--text);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  appearance:none;
}
.textarea { height:auto; min-height:120px; padding:var(--s-3) var(--s-4); resize:vertical; line-height:1.6; }
.input::placeholder,.textarea::placeholder { color:var(--text-subtle); }
.input:hover,.select:hover,.textarea:hover { border-color:var(--n-300); }
.input:focus,.select:focus,.textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.input:disabled,.select:disabled { background:var(--n-100); color:var(--text-muted); cursor:not-allowed; }
.input.is-invalid { border-color:var(--danger); }
.input.is-invalid:focus { box-shadow:0 0 0 3px rgba(220,38,38,.2); }

.select {
  padding-right:var(--s-10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s-4) center;
}

.input-group { position:relative; }
.input-group__prefix {
  position:absolute; left:var(--s-4); top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-weight:600; pointer-events:none;
}
.input-group .input { padding-left:38px; }
.input-amount { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; height:58px; }

.chips { display:flex; flex-wrap:wrap; gap:var(--s-2); }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface);
  font-size:14px; font-weight:600; color:var(--text-muted);
  cursor:pointer; transition:all .18s var(--ease);
}
.chip:hover { border-color:var(--n-300); color:var(--text); }
.chip.is-active,.chip[aria-pressed='true'] {
  background:var(--accent-soft); border-color:var(--brand-300); color:var(--brand-700);
}

.option-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s-3); }
.option {
  text-align:left; padding:var(--s-4);
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer; transition:all .18s var(--ease);
}
.option:hover { border-color:var(--brand-300); box-shadow:var(--shadow-sm); }
.option.is-active { border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--ring); }
.option__name { font-weight:700; font-size:15px; }
.option__price { font-size:14px; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }
.option__meta { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* 10. Service tiles ----------------------------------------------------- */

.service-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:var(--s-3); }

.service {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--s-2); padding:var(--s-4) var(--s-2);
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-md); box-shadow:var(--shadow-xs); color:var(--text);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.service:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--brand-200); color:var(--text); }

.service__icon {
  width:44px; height:44px; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--brand-700); flex:none;
}
.service__icon svg { width:22px; height:22px; }
.service__name { font-size:13px; font-weight:700; line-height:1.3; }
.service__meta { font-size:11px; color:var(--text-subtle); line-height:1.3; }

/* Services that are not live yet read as clearly secondary. */
.service.is-soon { opacity:.62; }
.service.is-soon .service__icon { background:var(--n-100); color:var(--n-400); }
.service.is-soon:hover { transform:none; box-shadow:var(--shadow-xs); border-color:var(--border-soft); }

.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-2); }
@media (max-width:400px) { .service-grid { grid-template-columns:repeat(3,1fr); } }

/* 11. Lists ------------------------------------------------------------- */

.list { display:flex; flex-direction:column; }

.list__item {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--border-soft); color:var(--text);
}
.list__item:last-child { border-bottom:0; }
a.list__item:hover { background:var(--n-50); color:var(--text); }

.list__icon {
  width:40px; height:40px; border-radius:var(--r-full);
  display:grid; place-items:center; flex:none;
  background:var(--surface-alt); color:var(--text-muted);
}
.list__icon svg { width:18px; height:18px; }
.list__icon--in { background:var(--success-bg); color:var(--success); }
.list__icon--out { background:var(--n-100); color:var(--n-600); }

.list__main { flex:1; min-width:0; }
.list__title { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list__meta { font-size:12.5px; color:var(--text-muted); }
.list__amount { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.list__amount--in { color:var(--success); }
.list__amount--out { color:var(--text); }

.detail-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding:var(--s-3) 0; border-bottom:1px dashed var(--border);
}
.detail-row:last-child { border-bottom:0; }
.detail-row__label { font-size:14px; color:var(--text-muted); }
.detail-row__value { font-size:15px; font-weight:600; text-align:right; word-break:break-word; }

.account-number {
  font-size:24px; font-weight:800; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--brand-800);
}

/* 12. Badges & alerts --------------------------------------------------- */

.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:var(--r-full);
  font-size:12px; font-weight:700; line-height:1.5; white-space:nowrap;
}
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

.badge-success { background:var(--success-bg); color:var(--success); }
.badge-pending { background:var(--warning-bg); color:var(--warning); }
.badge-failed  { background:var(--danger-bg);  color:var(--danger); }
.badge-neutral { background:var(--n-100);      color:var(--n-600); }
.badge-info    { background:var(--info-bg);    color:var(--info); }

.badge-soon { background:var(--n-100); color:var(--n-500); font-size:10px; padding:2px 7px; }
.badge-soon::before { display:none; }

.alert {
  display:flex; gap:var(--s-3); padding:var(--s-4);
  border-radius:var(--r-md); font-size:14px; line-height:1.6;
  border:1px solid transparent;
}
.alert svg { width:20px; height:20px; flex:none; margin-top:1px; }
.alert strong { display:block; margin-bottom:2px; }

.alert-info    { background:var(--info-bg);    color:#0C4A6E; border-color:#BAE6FD; }
.alert-success { background:var(--success-bg); color:var(--brand-900); border-color:var(--brand-200); }
.alert-warning { background:var(--warning-bg); color:#78350F; border-color:#FDE68A; }
.alert-danger  { background:var(--danger-bg);  color:#7F1D1D; border-color:#FECACA; }

/* Inline feedback the existing page scripts toggle by class name. */
.message {
  display:none; margin-top:var(--s-4);
  padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  font-size:14px; border:1px solid transparent;
}
.message.success,.message.error,.message.info,.message.loading { display:block; }
.message.success { background:var(--success-bg); color:var(--brand-900); border-color:var(--brand-200); }
.message.error   { background:var(--danger-bg);  color:#7F1D1D; border-color:#FECACA; }
.message.info,.message.loading { background:var(--info-bg); color:#0C4A6E; border-color:#BAE6FD; }

/* 13. Hero / marketing -------------------------------------------------- */

.hero {
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(90% 120% at 85% 0%,rgba(16,185,129,.42) 0%,transparent 60%),
    linear-gradient(150deg,var(--brand-800) 0%,var(--brand-950) 100%);
  padding-block:var(--s-12) var(--s-16);
}
.hero::after {
  content:''; position:absolute; inset:auto -10% -60% 40%;
  height:420px; border-radius:50%;
  background:rgba(255,255,255,.04); pointer-events:none;
}
.hero > * { position:relative; z-index:1; }
.hero h1 { color:#fff; font-size:clamp(30px,7vw,46px); letter-spacing:-.035em; max-width:18ch; }
.hero p { color:rgba(255,255,255,.76); font-size:16px; line-height:1.7; max-width:54ch; margin-top:var(--s-4); }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }

.hero__pill {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:6px 14px 6px 8px; border-radius:var(--r-full);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  font-size:13px; font-weight:600; color:rgba(255,255,255,.9); margin-bottom:var(--s-5);
}
.hero__pill span {
  background:var(--brand-400); color:var(--brand-950);
  padding:2px 8px; border-radius:var(--r-full); font-size:11px; font-weight:800;
}

.trust-row {
  display:flex; flex-wrap:wrap; gap:var(--s-5);
  margin-top:var(--s-8); padding-top:var(--s-6);
  border-top:1px solid rgba(255,255,255,.12);
}
.trust-row div { font-size:13px; color:rgba(255,255,255,.62); }
.trust-row strong { display:block; font-size:20px; color:#fff; font-weight:800; letter-spacing:-.02em; }

.feature {
  display:flex; gap:var(--s-4); padding:var(--s-5);
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); box-shadow:var(--shadow-xs);
}
.feature__icon {
  width:42px; height:42px; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--brand-700); flex:none;
}
.feature__icon svg { width:21px; height:21px; }
.feature h3 { font-size:16px; margin-bottom:4px; }
.feature p { font-size:14px; }

/* 14. Auth -------------------------------------------------------------- */

.auth {
  min-height:100dvh; display:grid; place-items:center;
  padding:var(--s-6) var(--s-4);
  background:radial-gradient(60% 50% at 50% 0%,var(--brand-50) 0%,transparent 70%),var(--bg);
}
.auth__card {
  width:100%; max-width:440px;
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  padding:var(--s-8) var(--s-6);
}
.auth__head { text-align:center; margin-bottom:var(--s-6); }
.auth__head h1 { font-size:24px; }
.auth__head p { font-size:14px; margin-top:6px; }
.auth__foot { text-align:center; font-size:14px; color:var(--text-muted); margin-top:var(--s-5); }
.auth__foot a { font-weight:600; }

.divider { display:flex; align-items:center; gap:var(--s-3); margin-block:var(--s-5); color:var(--text-subtle); font-size:13px; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* 15. Tables ------------------------------------------------------------ */

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
.table th {
  text-align:left; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
  padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--border); white-space:nowrap;
}
.table td { padding:var(--s-4); border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background:var(--n-50); }

/* 16. Empty & loading states -------------------------------------------- */

.empty { text-align:center; padding:var(--s-10) var(--s-5); }
.empty__icon {
  width:56px; height:56px; border-radius:var(--r-full);
  background:var(--surface-alt); color:var(--text-subtle);
  display:grid; place-items:center; margin:0 auto var(--s-4);
}
.empty__icon svg { width:26px; height:26px; }
.empty h3 { font-size:16px; margin-bottom:4px; }
.empty p { font-size:14px; max-width:34ch; margin-inline:auto; }

.skeleton {
  background:linear-gradient(90deg,var(--n-100) 25%,var(--n-200) 37%,var(--n-100) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  border-radius:var(--r-sm); color:transparent !important;
}
@keyframes shimmer { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }

.spinner {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--accent);
  animation:spin .7s linear infinite; display:inline-block;
}

/* 17. Misc -------------------------------------------------------------- */

.back-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--text-muted); margin-bottom:var(--s-4);
}
.back-link:hover { color:var(--accent); }
.back-link svg { width:16px; height:16px; }

.copy-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--brand-700);
  font-size:13px; font-weight:600; border:1px solid var(--brand-200);
  transition:all .18s var(--ease);
}
.copy-btn:hover { background:var(--brand-100); }
.copy-btn.is-copied { background:var(--success); color:#fff; border-color:var(--success); }
.copy-btn svg { width:15px; height:15px; }

.prose { max-width:70ch; }
.prose h2 { font-size:20px; margin-top:var(--s-8); margin-bottom:var(--s-3); }
.prose h3 { font-size:16px; margin-top:var(--s-6); margin-bottom:var(--s-2); }
.prose p { margin-bottom:var(--s-4); line-height:1.75; }
.prose ul { margin:0 0 var(--s-4) 0; }
.prose li {
  position:relative; padding-left:var(--s-6); margin-bottom:var(--s-2);
  color:var(--text-muted); line-height:1.7;
}
.prose li::before {
  content:''; position:absolute; left:6px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--brand-300);
}
.prose strong { color:var(--text); font-weight:600; }

.whatsapp-cta {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:12px 20px; border-radius:var(--r-full);
  background:#25D366; color:#fff; font-weight:600; font-size:15px;
  box-shadow:0 6px 18px rgba(37,211,102,.32);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.whatsapp-cta:hover { color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px rgba(37,211,102,.4); }
.whatsapp-cta svg { width:20px; height:20px; }

/* 18. Footer ------------------------------------------------------------ */

.site-footer {
  background:var(--brand-950); color:rgba(255,255,255,.62);
  padding-block:var(--s-10) var(--s-8); margin-top:var(--s-12); font-size:14px;
}
.site-footer a { color:rgba(255,255,255,.72); }
.site-footer a:hover { color:#fff; }
.site-footer .brand,.site-footer .brand:hover { color:#fff; }

.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-8); }
@media (max-width:760px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:var(--s-6); }
  .footer-grid > :first-child { grid-column:1 / -1; }
}
.footer-grid h4 {
  color:#fff; font-size:13px; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:var(--s-3);
}
.footer-grid li { margin-bottom:9px; font-size:14px; }

.footer-bottom {
  margin-top:var(--s-8); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:space-between;
  font-size:13px; color:rgba(255,255,255,.48);
}

/* 19. Utilities --------------------------------------------------------- */

.mt-0{margin-top:0 !important;} .mt-2{margin-top:var(--s-2);} .mt-3{margin-top:var(--s-3);}
.mt-4{margin-top:var(--s-4);} .mt-5{margin-top:var(--s-5);} .mt-6{margin-top:var(--s-6);}
.mt-8{margin-top:var(--s-8);} .mb-4{margin-bottom:var(--s-4);}
.w-full{width:100%;} .flex-1{flex:1;min-width:0;} .nowrap{white-space:nowrap;}

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

@media print {
  .app-header,.bottom-nav,.site-footer,.btn { display:none !important; }
  body { background:#fff; }
}