/* ===========================================================
   THEME: "DeOracle X" — smart tools, real growth. Black
   background, one lime-green signal color standing in for
   "growth", numeric/mono accents for data. Display face:
   Space Grotesk. Body: Inter. Data/mono: JetBrains Mono.
   =========================================================== */

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

:root{
  --ink:        #0A0E1B;   /* page background — deep navy, near-black */
  --ink-raised: #0F1424;   /* hover/raised surfaces */
  --ink-card:   #141A2E;   /* card surface */
  --line:       #232B45;
  --text:       #F8FAFC;
  --text-dim:   #98A2BE;
  --text-muted: #626C8A;
  --signal:     #3D5CFF;   /* primary brand blue */
  --signal-dim: #2C46E0;   /* primary hover */
  --signal-soft:#22C55E;   /* success green, for on-dark accents/badges/success */
  --secondary:  #F5B93C;   /* premium gold/amber */
  --highlight:  #FFD873;   /* light gold highlight */
  --amber:      #F5B93C;  /* pending/warning — same gold family as premium accent */
  --coral:      #EF4444;  /* error/cancel */
  --radius:     14px;
  --shadow:     0 20px 50px -20px rgba(0,0,0,.45);
  --brand-gradient: linear-gradient(135deg, #3D5CFF 0%, #7A62E8 50%, #F5B93C 100%);
  --hero-1:     #3D5CFF;  /* premium gradient hero/nav stops */
  --hero-2:     #7A62E8;
  --hero-3:     #F5B93C;
}

/* ---------- Light theme ----------
   Opt-in via [data-theme="light"] on <html> (see includes/app-header.php,
   which resolves the user's stored theme_preference — light / dark /
   system — server-side, plus a tiny inline script for "system" so there's
   no flash of the wrong theme on load). Because nearly every surface in
   this file is already built on the --ink/--text/--line variables, this
   block alone re-skins the whole app; only a handful of hardcoded
   rgba(...) backgrounds below need a light-aware companion rule. */
[data-theme="light"]{
  --ink:        #F4F6FC;
  --ink-raised: #FFFFFF;
  --ink-card:   #FFFFFF;
  --line:       #E6EAF7;
  --text:       #131A2E;
  --text-dim:   #626C8A;
  --text-muted: #94A3B8;
  --signal:     #3D5CFF;
  --signal-dim: #2C46E0;
  --signal-soft:#059669;
  --secondary:  #E8A425;
  --shadow:     0 20px 50px -20px rgba(61,92,255,.18);
}
[data-theme="light"] body{ background: var(--ink); }
[data-theme="light"] .app-mobile-topbar,
[data-theme="light"] .topbar{ background: rgba(244,246,252,.9); }
[data-theme="light"] .bottom-nav{
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,246,252,.98));
  border-top: 1px solid rgba(61,92,255,.14);
}
[data-theme="light"] .bottom-nav-item{ color:#9691AE; }
[data-theme="light"] .bottom-nav-fab{ border-color: var(--ink); }
[data-theme="light"] ::selection{ background: rgba(61,92,255,.2); }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.display{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.mono{ font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em; }

a{ color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ===========================================================
   MOBILE-FIRST BASE: everything below is written for a phone
   viewport by default. Desktop enhancements live in the
   min-width media queries further down, so the layout is
   always mobile unless the viewport is wide enough to earn
   the roomier desktop treatment.
   =========================================================== */

/* ---------- layout shells ---------- */
.container{ max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media(min-width:481px){ .container{ padding: 0 24px; } }

.topbar{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 24px;
  background: rgba(15,23,42,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; }
.brand-logo{ height:28px; width:auto; max-width:170px; object-fit:contain; display:block; }
.brand-dot{
  width:10px;height:10px;border-radius:50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(61,92,255,.6);
  animation: pulse-ring 2.2s ease-out infinite;
  flex-shrink:0;
}
.brand-word{
  display:inline-block;
  animation: brand-word-in .55s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes brand-word-in{
  0%   { opacity:0; transform: translateY(5px); letter-spacing:-.02em; }
  100% { opacity:1; transform: translateY(0); letter-spacing:normal; }
}
@keyframes pulse-ring{
  0%   { box-shadow: 0 0 0 0 rgba(61,92,255,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(61,92,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,92,255,0); }
}

/* Hazard banner: pending orders / open tickets / low provider balance.
   Sticky across every admin page (rendered from admin-header.php), with a
   blinking hazard-stripe background so it stays noticeable at a glance. */
.hazard-bar{
  position: sticky; top:0; z-index: 50;
  background: repeating-linear-gradient(
    135deg,
    var(--coral) 0 18px,
    #B91C1C 18px 36px
  );
  background-size: 200% 200%;
  animation: hazard-stripes 1.1s linear infinite, hazard-blink 1.1s ease-in-out infinite;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.hazard-bar-inner{
  display:flex; align-items:center; gap:14px;
  max-width: 1400px; margin:0 auto;
  padding: 8px 20px;
}
.hazard-bar-icon{ font-size:16px; flex-shrink:0; color:#fff; }
.hazard-bar-items{
  display:flex; flex-wrap:wrap; gap:6px 18px; flex:1;
}
.hazard-bar-items a{
  color:#fff; font-weight:700; font-size:13px; text-decoration:none;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.hazard-bar-items a:hover{ text-decoration:underline; }
.hazard-bar-mute{
  flex-shrink:0; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.15);
  color:#fff; border-radius:6px; width:28px; height:28px; font-size:14px;
  cursor:pointer; line-height:1;
}
@keyframes hazard-stripes{
  0%   { background-position: 0 0; }
  100% { background-position: 60px 0; }
}
@keyframes hazard-blink{
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}
@media (prefers-reduced-motion: reduce){
  .hazard-bar{ animation: none; }
}

/* Mobile default: nav links live in a dropdown panel toggled by the hamburger */
.nav-links{
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  position:fixed; top:64px; left:0; right:0; z-index:60;
  background: var(--ink-raised); border-bottom:1px solid var(--line);
  padding:10px 16px 16px; box-shadow: var(--shadow);
  transform: translateY(-8px); opacity:0; pointer-events:none; transition: all .18s ease;
}
.nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
.nav-links a{ color: var(--text-dim); font-size:15px; font-weight:500; transition: color .2s; padding:12px 6px; border-bottom:1px solid var(--line); }
.nav-links a:last-child{ border-bottom:none; }
.nav-links a:hover{ color: var(--text); }
.nav-links .btn{ margin-top:6px; }

/* hamburger button (public topbar + app shell) — visible by default on mobile */
.hamburger{
  display:inline-flex; width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
  background: var(--ink-raised); color:var(--text); align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
}
.hamburger svg{ width:18px; height:18px; }

/* Desktop: nav links become a plain horizontal row, hamburger goes away */
@media(min-width:701px){
  .nav-links{
    display:flex; flex-direction:row; gap:26px; align-items:center;
    position:static; z-index:auto; background:transparent; border-bottom:none;
    padding:0; box-shadow:none; transform:none; opacity:1; pointer-events:auto;
  }
  .nav-links a{ padding:0; border-bottom:none; font-size:14px; }
  .nav-links .btn{ margin-top:0; }
  .hamburger{ display:none; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px; border-radius: 10px; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{
  background: var(--signal); color: #FFFFFF;
  box-shadow: 0 0 0 0 rgba(61,92,255,.4);
}
.btn-primary:hover{ box-shadow: 0 8px 26px -6px rgba(61,92,255,.55), 0 4px 18px -6px rgba(245,185,60,.4); transform: translateY(-1px); }
.btn-ghost{ background: transparent; border:1px solid var(--line); color: var(--text); }
.btn-ghost:hover{ border-color:#3A4A6E; background: var(--ink-raised); }
.btn-google{
  background:#fff; color:#1f1f1f; border:1px solid #ddd;
}
.btn-google:hover{ box-shadow: 0 8px 24px -10px rgba(255,255,255,.3); }
.btn-block{ width:100%; }
.btn-sm{ padding: 8px 14px; font-size: 13px; }
.btn-danger{ background: var(--coral); color:#FFFFFF; }

/* ---------- notification bell + dropdown panel (header) ---------- */
.notif-wrap{position:relative}
.notif-bell-btn{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.notif-bell-btn:hover{border-color:rgba(61,92,255,.55);background:rgba(61,92,255,.08);transform:translateY(-1px)}
.notif-badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--highlight);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;border:2px solid var(--ink);box-sizing:content-box}
.notif-panel{position:fixed;top:66px;right:18px;z-index:95;width:390px;max-width:calc(100vw - 24px);background:rgba(20,27,49,.96);border:1px solid rgba(148,163,184,.2);border-radius:18px;box-shadow:0 24px 70px -28px rgba(5,10,28,.75),0 0 0 1px rgba(61,92,255,.08);backdrop-filter:blur(18px);display:flex;flex-direction:column;overflow:hidden;animation:notif-pop-in .2s ease both}
@keyframes notif-pop-in{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;padding:17px 18px 15px;border-bottom:1px solid rgba(148,163,184,.14);background:linear-gradient(135deg,rgba(61,92,255,.18),rgba(122,98,232,.08));flex-shrink:0}
.notif-panel-head h4{font-size:14px;font-weight:700;letter-spacing:.01em;color:#f8fafc}
.notif-unread-label{padding:5px 8px;border:1px solid rgba(124,148,255,.26);border-radius:999px;color:#b9c7ff;background:rgba(61,92,255,.12);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.notif-panel-list{padding:10px;overflow-y:auto;flex:1}
.notif-empty{padding:28px 16px;text-align:center;color:#b5c0d8;font-size:13px}
.notif-item{position:relative;display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid rgba(148,163,184,.16);border-radius:14px;background:rgba(255,255,255,.035);text-decoration:none;color:inherit;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.notif-item:hover{background:rgba(61,92,255,.1);border-color:rgba(124,148,255,.4);transform:translateY(-1px)}
.notif-item-icon{flex-shrink:0;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#3d5cff,#7a62e8);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 8px 18px -10px rgba(61,92,255,.8)}
.notif-item-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.notif-item-title{font-size:13.5px;font-weight:700;line-height:1.35;color:#f8fafc}
.notif-item-snippet{display:-webkit-box;font-size:12.5px;line-height:1.5;color:#b5c0d8;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-item.is-expanded .notif-item-snippet{display:block;overflow:visible;text-overflow:clip}
.notif-item-time{font-size:10.5px;color:#93a1bd;margin-top:2px}
.notif-item-open{color:#b9c7ff;font-weight:700;opacity:1}
.notif-item-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#7a62e8;margin-top:5px;box-shadow:0 0 0 4px rgba(122,98,232,.12)}
.notif-panel-foot{padding:10px 14px;border-top:1px solid rgba(148,163,184,.14);flex-shrink:0}.notif-panel-foot .btn{color:#dbe4ff;border-color:rgba(148,163,184,.28)}
.notif-panel[hidden]{display:none}
@media(max-width:480px){.notif-panel{top:58px;right:12px;left:12px;width:auto;max-width:none}}

/* ---------- hero ---------- */
.hero{ padding: 90px 0 70px; position:relative; overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:-20% -10% auto -10%; height:520px;
  background: radial-gradient(600px 260px at 30% 0%, rgba(61,92,255,.16), transparent 70%),
              radial-gradient(500px 240px at 80% 10%, rgba(245,185,60,.12), transparent 70%);
  pointer-events:none;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:12px; color: var(--signal);
  background: rgba(61,92,255,.08); border:1px solid rgba(61,92,255,.25);
  padding:6px 12px; border-radius:100px; margin-bottom:22px;
  opacity:0; animation: rise .6s ease forwards;
}
.hero h1{
  font-size: clamp(34px, 6vw, 62px); line-height:1.05; max-width: 780px;
  opacity:0; animation: rise .7s ease forwards .1s;
}
.hero h1 span{ color: var(--signal); }
.hero p{
  color: var(--text-dim); font-size:18px; max-width:560px; margin-top:18px;
  opacity:0; animation: rise .7s ease forwards .2s;
}
.hero-actions{ display:flex; gap:14px; margin-top:32px; opacity:0; animation: rise .7s ease forwards .3s; }

/* Platform trust strip — backs up the "Instagram, TikTok, YouTube, X"
   claim in the hero copy with a quick visual scan. */
.hero-platforms{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px;
  opacity:0; animation: rise .7s ease forwards .34s;
}
.hero-platform{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:500; color:var(--text-dim);
}
.hero-platform svg{ flex-shrink:0; color:var(--text-muted); }

@keyframes rise{ from{ opacity:0; transform: translateY(16px);} to{ opacity:1; transform:none; } }

/* live "pulse" ticker strip — signature element */
.pulse-strip{
  margin-top:32px; display:flex; gap:0; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; background: var(--ink-card);
  opacity:0; animation: rise .7s ease forwards .4s;
}
.pulse-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; margin-bottom:10px;
  background: rgba(61,92,255,.1); color: var(--signal);
}
.pulse-cell{ flex:1; padding:20px 22px; border-right:1px solid var(--line); position:relative; }
.pulse-cell:last-child{ border-right:none; }
.pulse-cell .label{ color:var(--text-dim); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.pulse-cell .value{ font-family:'JetBrains Mono',monospace; font-size:26px; margin-top:6px; color:var(--text); }
.pulse-cell .value.up{ color: var(--signal); }
.pulse-bar{ height:3px; background:var(--line); margin-top:12px; border-radius:2px; overflow:hidden; }
.pulse-bar > span{ display:block; height:100%; background:var(--signal); width:0; animation: fill 1.6s ease forwards .6s; }
@keyframes fill{ to{ width: var(--w, 70%); } }

/* ---------- cards / grid ---------- */
.card{
  background: var(--ink-card); border:1px solid var(--line); border-radius: var(--radius);
  padding: 22px; transition: border-color .2s, transform .2s;
  animation: card-in .45s cubic-bezier(.2,.8,.3,1) both;
}
.card:hover{ border-color:#3A4A6E; }
@keyframes card-in{
  0%   { opacity:0; transform: translateY(10px); }
  100% { opacity:1; transform: translateY(0); }
}

/* ===========================================================
   BLOG — list (blog.php), article (blog-post.php), and the
   comments/likes UI shared by the article page.
   =========================================================== */
.blog-hero{ padding:64px 0 36px; position:relative; overflow:hidden; }
.blog-hero::before{
  content:''; position:absolute; inset:-20% -10% auto -10%; height:380px;
  background: radial-gradient(600px 240px at 20% 0%, rgba(61,92,255,.14), transparent 70%);
  pointer-events:none;
}
.blog-hero h1{ font-size:clamp(28px, 5vw, 44px); }
.blog-hero h1 span{ color:var(--signal); }
.blog-hero p{ color:var(--text-dim); font-size:16px; max-width:560px; margin-top:12px; }

.blog-grid{ display:grid; gap:20px; grid-template-columns:1fr; margin-top:10px; }
@media(min-width:641px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:961px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }

.blog-card{
  display:flex; flex-direction:column; background:var(--ink-card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  animation: card-in .45s cubic-bezier(.2,.8,.3,1) both;
}
.blog-card:hover{ border-color:#3A4A6E; transform:translateY(-3px); box-shadow: var(--shadow); }
.blog-card-image{ width:100%; height:170px; background:var(--ink-raised); overflow:hidden; }
.blog-card-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.blog-card:hover .blog-card-image img{ transform:scale(1.04); }
.blog-card-image-placeholder{ display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.blog-card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.blog-card-meta{ font-size:12px; color:var(--text-dim); margin-bottom:8px; }
.blog-card-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; line-height:1.35; margin-bottom:8px; }
.blog-card-excerpt{ color:var(--text-dim); font-size:14px; line-height:1.6; margin:0 0 14px; flex:1; }
.blog-card-stats{ display:flex; gap:16px; padding-top:12px; border-top:1px solid var(--line); }
.blog-card-stats span{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-muted); }

/* ---- article page ---- */
.blog-article{ max-width:720px; margin:0 auto; padding:36px 0 70px; }
.blog-article-back{ display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); font-size:13px; margin-bottom:18px; }
.blog-article h1{ font-size:clamp(26px, 5vw, 40px); line-height:1.2; margin-bottom:16px; }
.blog-article-meta{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:13.5px; margin-bottom:24px; }
.blog-article-image{ width:100%; max-height:440px; object-fit:cover; border-radius:14px; margin-bottom:28px; box-shadow:var(--shadow); }
.blog-article-body{ font-size:16.5px; line-height:1.85; color:var(--text); }
.blog-article-body h2{ font-size:22px; margin:32px 0 12px; }
.blog-article-body p{ margin:0 0 18px; }
.blog-article-body img{ max-width:100%; height:auto; border-radius:10px; margin:20px 0; }
.blog-article-body a{ color:var(--signal); text-decoration:underline; }
.blog-article-body ul, .blog-article-body ol{ padding-left:22px; margin:0 0 18px; }

.blog-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--signal); color:#fff; font-size:13px; font-weight:700; font-family:'Space Grotesk',sans-serif;
}

/* like + share bar */
.blog-engage-bar{
  display:flex; align-items:center; gap:12px; margin:32px 0; padding:14px 18px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-card);
}
.blog-like-btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px;
  border:1px solid var(--line); background:var(--ink-raised); color:var(--text); cursor:pointer;
  font-size:14px; font-weight:600; transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.blog-like-btn:active{ transform:scale(.97); }
.blog-like-btn svg{ transition: fill .15s ease, stroke .15s ease; }
.blog-like-btn.is-liked{ border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); color:#FCA5A5; }
.blog-like-btn.is-liked svg{ fill:#EF4444; stroke:#EF4444; }
.blog-engage-comment-count{ color:var(--text-dim); font-size:13.5px; }

/* comments */
.blog-comments{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }
.blog-comments h2{ font-size:18px; margin-bottom:18px; }
.blog-comment-form{ display:flex; gap:12px; margin-bottom:26px; }
.blog-comment-form textarea{
  flex:1; min-height:46px; max-height:180px; resize:vertical; border:1px solid var(--line);
  border-radius:11px; background:var(--ink-raised); color:var(--text); padding:12px 14px; font-size:14px;
  font-family:inherit; line-height:1.5;
}
.blog-comment-form textarea:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(61,92,255,.14); }
.blog-comment-login{ padding:16px; border:1px dashed var(--line); border-radius:11px; text-align:center; color:var(--text-dim); font-size:14px; margin-bottom:26px; }
.blog-comment-login a{ color:var(--signal); font-weight:600; }
.blog-comment-list{ display:flex; flex-direction:column; gap:18px; }
.blog-comment{ display:flex; gap:12px; }
.blog-comment-body{ flex:1; }
.blog-comment-head{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.blog-comment-name{ font-weight:600; font-size:13.5px; }
.blog-comment-time{ color:var(--text-muted); font-size:12px; }
.blog-comment-text{ color:var(--text); font-size:14.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.blog-comment-delete{
  border:none; background:none; color:var(--text-muted); cursor:pointer; font-size:12px;
  padding:2px 6px; border-radius:6px; margin-left:auto; flex-shrink:0;
}
.blog-comment-delete:hover{ color:#FCA5A5; background:rgba(239,68,68,.08); }
.blog-comments-empty{ color:var(--text-dim); font-size:14px; text-align:center; padding:20px 0; }


/* Stagger cards that appear together in a grid so they don't all pop in
   at once — each successive card in a row/list starts a beat later. */
.grid > .card:nth-child(2){ animation-delay: .05s; }
.grid > .card:nth-child(3){ animation-delay: .1s; }
.grid > .card:nth-child(4){ animation-delay: .15s; }
.grid > .card:nth-child(n+5){ animation-delay: .2s; }
/* Used by the coming-soon pages (includes/coming-soon-manager.php,
   coming-soon.php, coming-soon-example-countries.php). */
@keyframes fadeInUp{
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes bounce{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes scaleIn{
  from { opacity:0; transform: scale(.95); }
  to   { opacity:1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .card, .brand-word{ animation: none; }
  .coming-soon-flag, .country-card-flag,
  [style*="animation: bounce"], [style*="animation: fadeInUp"], [style*="animation: scaleIn"]{ animation: none; }
}
/* Buttons used as tappable cards/pills (country pickers, service pickers,
   category pills) need to inherit the page's type instead of the
   browser's native <button> font/color defaults. */
button.card{ font: inherit; color: inherit; width:100%; white-space:normal; overflow-wrap:break-word; word-break:break-word; }
button.cat-pill{ font: inherit; white-space:nowrap; }
/* Belt-and-suspenders: never let any element push the page into
   horizontal scroll on phones, and make sure long unbroken words
   (long service names, provider strings, etc.) always wrap instead
   of bleeding past the viewport edge. */
html, body{ overflow-x:hidden; max-width:100%; }
#serviceGrid, #importList, #importCountryList{ max-width:100%; }
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }
@media(min-width:601px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr 1fr; } }
@media(min-width:901px){ .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-4{ grid-template-columns: repeat(4, 1fr); } }

/* Service picker grid (services.php "New Order" section): always 2-up,
   even on narrow phones, instead of the single full-width column .grid-3
   collapses to. Compact, dense cards read as a proper catalogue rather
   than one tall stack of oversized tiles. */
#serviceGrid{ display:grid; gap:10px; grid-template-columns: repeat(2, 1fr); }
@media(min-width:601px){ #serviceGrid{ grid-template-columns: repeat(3, 1fr); gap:14px; } }
@media(min-width:901px){ #serviceGrid{ grid-template-columns: repeat(4, 1fr); } }
.service-pick-card{ padding:14px 12px; display:flex; flex-direction:column; align-items:flex-start; }
.service-pick-card .svc-name{ font-weight:600; margin-top:10px; font-size:13px; line-height:1.35; min-height:35px; }
.service-pick-card .svc-cat{ color:var(--text-dim); font-size:10.5px; margin-top:2px; }
.service-pick-card .svc-rate{ margin-top:10px; font-size:14px; color:var(--signal); }
.service-pick-card .svc-rate small{ color:var(--text-dim); font-size:10px; }
.svc-group{ margin-bottom:28px; }
.svc-group-title{
  display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--text); margin-bottom:10px;
}
.svc-group-count{
  color:var(--text-dim); font-weight:500; font-size:11.5px;
  background:var(--panel-2,rgba(255,255,255,.06)); border-radius:999px; padding:2px 8px;
}

/* Compact country picker (eSIM, Virtual Numbers): auto-fills as many
   small flag tiles per row as fit, on every screen size, instead of the
   single tall column that .grid-3 collapses to on phones. */
.flag-grid{ display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.flag-card{
  text-align:center; cursor:pointer; padding:14px 8px 12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.flag-card .flag-emoji{ font-size:28px; line-height:1; }
.flag-card .flag-name{ font-weight:600; font-size:12.5px; line-height:1.25; word-break:break-word; }
.flag-card .flag-count{ color:var(--text-dim); font-size:10.5px; }
@media(min-width:481px){ .flag-grid{ grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } .flag-card .flag-emoji{ font-size:32px; } .flag-card .flag-name{ font-size:13px; } }

/* mobile default: compact hero, stacked pulse strip, stacked hero actions */
.hero{ padding: 56px 0 44px; }
.hero-actions{ flex-direction:column; align-items:stretch; }
.auth-card{ padding: 24px; }
.pulse-strip{ flex-direction:column; }
.pulse-cell{ border-right:none; border-bottom:1px solid var(--line); }
.pulse-cell:last-child{ border-bottom:none; }

@media(min-width:481px){
  .hero{ padding: 90px 0 70px; }
  .hero-actions{ flex-direction:row; align-items:center; }
  .auth-card{ padding: 34px; }
  .pulse-strip{ flex-direction:row; }
  .pulse-cell{ border-right:1px solid var(--line); border-bottom:none; }
  .pulse-cell:last-child{ border-right:none; }
}

.stat-card .label{ color:var(--text-dim); font-size:13px; }
.stat-card .value{ font-family:'JetBrains Mono',monospace; font-size:28px; margin-top:8px; }
.stat-card .trend{ font-size:12px; margin-top:6px; color: var(--signal); }

/* ---------- admin overview: page head, KPI icons, alert strip ---------- */
.page-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:10px 20px; margin-bottom:20px;
}
.page-head h2{ font-size:21px; }
.page-head .page-sub{ color:var(--text-dim); font-size:13px; margin-top:4px; }
.page-head .page-meta{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-muted);
  white-space:nowrap;
}
.page-head .page-meta .dot{
  width:7px;height:7px;border-radius:50%; background:var(--signal-soft);
  box-shadow:0 0 0 3px rgba(34,197,94,.15); flex-shrink:0;
}
@media(min-width:601px){ .page-head h2{ font-size:24px; } }

.stat-card{ position:relative; overflow:hidden; }
.stat-card .stat-icon{
  position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(61,92,255,.12); color:var(--signal); flex-shrink:0;
}
.stat-card .label{ padding-right:40px; }

.section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.section-head .section-title{ display:flex; align-items:center; gap:10px; }
.section-head h3{ font-size:15.5px; }
.section-head .section-count{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-dim);
  background:var(--ink-raised); border:1px solid var(--line); border-radius:100px; padding:2px 9px;
}
.section-icon{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(61,92,255,.12); color:var(--signal);
}
.section-icon.warn{ background:rgba(245,158,11,.14); color:var(--amber); }

.section{ margin-bottom:22px; }

/* Needs-attention: compact alert rows instead of a plain list, grouped in
   a single card so the whole "what needs a human right now" picture reads
   at a glance before Quick Actions / the data tables below. */
.attn-card{ padding:18px 18px 8px; }
.attn-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 4px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none;
}
.attn-card .attn-row:last-child{ border-bottom:none; }
.attn-row:hover .attn-label{ color:var(--text); }
.attn-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.attn-num{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px;
  width:26px; height:26px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,158,11,.14); color:var(--amber);
}
.attn-label{ font-size:13.5px; color:var(--text-dim); overflow-wrap:anywhere; }
.attn-arrow{ color:var(--text-muted); flex-shrink:0; }

.dash-2col{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:901px){ .dash-2col{ grid-template-columns:1.3fr 1fr; align-items:start; } }

/* service cards fade/slide in staggered */
.service-card{ animation: rise .5s ease forwards; opacity:0; }

/* ---------- forms ---------- */
.auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background: radial-gradient(900px 500px at 50% -10%, rgba(61,92,255,.12), transparent 60%), var(--ink);
}
.auth-card{
  width:100%; max-width:400px; background:var(--ink-card); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  animation: rise .5s ease forwards;
}
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border-radius:9px; border:1px solid var(--line);
  background: var(--ink-raised); color:var(--text); font-family:'Inter',sans-serif; font-size:14px;
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--signal);
}
.divider{ display:flex; align-items:center; gap:12px; color:var(--text-dim); font-size:12px; margin:18px 0; }
.divider::before,.divider::after{ content:''; flex:1; height:1px; background:var(--line); }

/* Auth pages specifically (login/register/reset) get roomier fields
   and a bigger tap target than the compact form styling used
   elsewhere in the dashboard/admin — this is what people are
   actually typing a password into, so it should feel easy to use,
   especially on a phone. Same colors as .field above, just larger. */
.auth-card{ max-width:420px; }
.auth-card .field{ margin-bottom:20px; opacity:0; animation: auth-field-in .45s ease forwards; }
.auth-card .field label{ font-size:14px; margin-bottom:8px; }
.auth-card .field input, .auth-card .field select{
  padding:15px 16px; font-size:16px; border-radius:11px; line-height:1.3;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.auth-card .field input:focus, .auth-card .field select:focus{
  box-shadow: 0 0 0 3px var(--vn-accent-soft, rgba(61,92,255,.14));
}
.auth-card .btn{
  padding:15px 22px; font-size:15.5px; border-radius:11px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.auth-card .btn:active{ transform: translateY(1px) scale(.985); }
.auth-card h2{ font-size:23px; }
.auth-card .brand{ opacity:0; animation: auth-field-in .5s ease forwards; }
.auth-card h2, .auth-card > p{ opacity:0; animation: auth-field-in .5s ease forwards; animation-delay:.05s; }
.auth-card form{ opacity:0; animation: auth-field-in .5s ease forwards; animation-delay:.1s; }
.auth-card .field:nth-child(1){ animation-delay:.14s; }
.auth-card .field:nth-child(2){ animation-delay:.2s; }
.auth-card .field:nth-child(3){ animation-delay:.26s; }
.auth-card .field:nth-child(4){ animation-delay:.32s; }
.auth-card .btn-block, .auth-card .btn-google{ opacity:0; animation: auth-field-in .5s ease forwards; animation-delay:.34s; }
@keyframes auth-field-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .auth-card, .auth-card .field, .auth-card .brand, .auth-card h2, .auth-card > p, .auth-card form, .auth-card .btn-block, .auth-card .btn-google{
    animation:none !important; opacity:1 !important;
  }
}
@media(min-width:481px){ .auth-card{ padding: 38px; } }

/* Professional country picker — flag preview + native select underneath
   (keeps the OS's own picker/search on mobile) instead of a plain
   unstyled dropdown. */
.country-select-wrap{
  position:relative; display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:11px; background:var(--ink-raised);
  padding:0 14px; transition: border-color .18s ease, box-shadow .18s ease;
}
.country-select-wrap:focus-within{ border-color:var(--signal); box-shadow: 0 0 0 3px rgba(61,92,255,.14); }
.country-select-wrap .csw-flag{ font-size:20px; line-height:1; flex-shrink:0; }
.country-select-wrap select{
  flex:1; border:none !important; background:transparent !important; padding:15px 0 !important;
  appearance:none; -webkit-appearance:none; font-size:16px; color:var(--text);
  box-shadow:none !important;
}
.country-select-wrap select:focus{ outline:none; }
.country-select-wrap .csw-chevron{ flex-shrink:0; color:var(--text-muted); pointer-events:none; }

/* Country Combo Picker (.ccp) — searchable flag+name dropdown used by
   country_dropdown() in includes/african_countries.php. Behavior lives
   in assets/js/country-picker.js. */
.ccp{ position:relative; }
.ccp-trigger{
  width:100%; display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:11px; background:var(--ink-raised);
  padding:14px; font-size:16px; color:var(--text); cursor:pointer; text-align:left;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ccp-trigger:hover{ border-color: rgba(61,92,255,.4); }
.ccp.ccp-open .ccp-trigger, .ccp-trigger:focus-visible{
  outline:none; border-color:var(--signal); box-shadow: 0 0 0 3px rgba(61,92,255,.14);
}
.ccp-trigger .ccp-flag{ font-size:20px; line-height:1; flex-shrink:0; }
.ccp-trigger .ccp-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ccp-trigger .ccp-chevron{ flex-shrink:0; color:var(--text-muted); transition: transform .18s ease; }
.ccp.ccp-open .ccp-chevron{ transform: rotate(180deg); }

/* Backdrop: mobile-only dimmed overlay behind the sheet, keeps the rest
   of the form from visually bleeding through while the picker is open. */
.ccp-backdrop{
  position:fixed; inset:0; z-index:998;
  background: rgba(5,8,20,.6); backdrop-filter: blur(2px);
  animation: ccp-fade-in .18s ease-out;
}
.ccp-backdrop[hidden]{ display:none !important; }
@keyframes ccp-fade-in{ from{ opacity:0; } to{ opacity:1; } }
body.ccp-lock-scroll{ overflow:hidden; }

/* Mobile default: a bottom sheet, fixed to the viewport, so it never
   overlaps or gets overlapped by the rest of the form beneath it. */
.ccp-panel{
  position:fixed; z-index:999; left:12px; right:12px; bottom:12px; top:auto;
  background:var(--ink-raised); border:1px solid var(--line); border-radius:16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  overflow:hidden; display:flex; flex-direction:column; max-height:min(70vh, 420px);
  animation: ccp-sheet-in .22s cubic-bezier(.2,.8,.3,1);
}
.ccp-panel[hidden]{ display:none !important; }
@keyframes ccp-sheet-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.ccp-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 12px; font-weight:600; font-size:14px;
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.ccp-close{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; border:none;
  background: var(--ink-card); color:var(--text-dim); cursor:pointer;
}
.ccp-close:hover{ color:var(--text); background: var(--line); }

@media(min-width:481px){
  .ccp-backdrop{ display:none !important; }
  .ccp-panel-header{ display:none; }
  .ccp-panel{
    position:absolute; z-index:40; top: calc(100% + 8px); left:0; right:0; bottom:auto;
    border-radius:12px; box-shadow: 0 16px 40px rgba(0,0,0,.35);
    max-height:260px;
    animation: ccp-in .16s ease-out;
  }
  @keyframes ccp-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
}

.ccp-search{
  display:flex; align-items:center; gap:8px; padding:10px 12px; flex-shrink:0;
  border-bottom:1px solid var(--line); color:var(--text-muted);
}
.ccp-search-input{
  flex:1; border:none; background:transparent; color:var(--text); font-size:14px;
  padding:4px 0;
}
.ccp-search-input:focus{ outline:none; }

.ccp-options{ max-height:260px; overflow-y:auto; padding:6px; flex:1; }
.ccp-option{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  cursor:pointer; font-size:14px; color:var(--text);
}
.ccp-option:hover, .ccp-option.ccp-active{ background: rgba(61,92,255,.1); }
.ccp-option[aria-selected="true"]{ background: rgba(61,92,255,.14); }
.ccp-opt-flag{ font-size:18px; line-height:1; flex-shrink:0; }
.ccp-opt-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ccp-opt-currency{ font-size:11px; font-weight:600; letter-spacing:.4px; color:var(--text-muted); flex-shrink:0; }
.ccp-empty{ padding:16px 10px; text-align:center; font-size:13px; color:var(--text-muted); }

.ccp-options::-webkit-scrollbar{ width:8px; }
.ccp-options::-webkit-scrollbar-thumb{ background: var(--line); border-radius:8px; }

.alert{ padding:12px 14px; border-radius:9px; font-size:14px; margin-bottom:16px; }
.alert-error{ background: rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); color:#FCA5A5; }
.alert-success{ background: rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.35); color: var(--signal-soft); }

/* ---------- app shell (dashboard) ----------
   Mobile-first default: single column, off-canvas sidebar behind a
   hamburger-triggered drawer, mobile top bar visible. Desktop widens
   into a static two-column layout via the min-width query below. */
.app{ display:grid; grid-template-columns: 1fr; min-height:100vh; }
.sidebar{
  background: var(--ink-raised); border-right:1px solid var(--line); padding:22px 16px;
  overflow-y:auto;
  position:fixed; top:0; left:0; height:100vh; width:78vw; max-width:280px;
  transform: translateX(-100%); transition: transform .22s ease; z-index:90;
  box-shadow: var(--shadow);
}
.sidebar.open{ transform: translateX(0); }
.side-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  color:var(--text-dim); font-size:14px; font-weight:500; margin-bottom:2px; transition: background .15s, color .15s;
}
.side-link:hover{ background: var(--ink-card); color:var(--text); }
.side-link.active{ background: var(--ink-card); color: var(--signal); }
.main{ padding: 18px 16px 32px; min-width:0; }

/* Grouped / collapsible sidebar sections ("matured" nav) — a <details>
   per section so the long link list from a fully-loaded panel collapses
   down to scannable headings instead of one long undifferentiated list. */
.nav-icon{ flex:none; opacity:.85; }
.nav-group{ margin-bottom:2px; }
.nav-group summary{ list-style:none; cursor:pointer; }
.nav-group summary::-webkit-details-marker{ display:none; }
.nav-group-summary{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:9px; color:var(--text-dim); font-size:14px; font-weight:500;
  transition: background .15s, color .15s;
}
.nav-group-summary:hover{ background: var(--ink-card); color:var(--text); }
.nav-group-summary.active{ color: var(--signal); }
.nav-group-label{ display:flex; align-items:center; gap:10px; }
.nav-group-chevron{ flex:none; transition: transform .18s ease; opacity:.7; }
.nav-group[open] > .nav-group-summary .nav-group-chevron{ transform: rotate(90deg); }
.nav-group-items{ display:flex; flex-direction:column; padding-left:14px; margin:2px 0 6px; }
.side-link.sub{ padding:8px 12px 8px 20px; font-size:13.5px; }

/* mobile top bar: visible by default, hidden once desktop layout kicks in */
.app-mobile-topbar{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background: rgba(15,23,42,0.85); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:70;
}
.app-mobile-topbar .brand{ font-size:16px; font-weight:600; letter-spacing:-.01em; }

/* App nav bar (mobile topbar + sidebar brand): a calmer, non-animated dot in the
   muted signal tone rather than the marketing site's glowing green pulse. */
.app-mobile-topbar .brand-dot,
.sidebar .brand-dot{
  animation:none; box-shadow:none; background: var(--signal-dim);
}

/* NGN / USD display toggle — top-right corner (mobile topbar + desktop page-head).
   A pill-shaped segmented control with a understated sliding thumb behind the active label. */
.currency-toggle{
  position:relative; margin-left:auto; display:inline-flex; align-items:center;
  background: var(--ink-card); border:1px solid var(--line); border-radius:999px;
  padding:3px; gap:2px; user-select:none;
}
.currency-toggle-thumb{
  position:absolute; top:3px; left:3px; z-index:0;
  width:calc(50% - 3px); height:calc(100% - 6px);
  background: var(--signal-dim); border-radius:999px;
  transition: transform .32s cubic-bezier(.65,0,.35,1);
}
.currency-toggle.is-usd .currency-toggle-thumb{ transform: translateX(100%); }
.currency-toggle-btn{
  position:relative; z-index:1; appearance:none; border:none; background:transparent;
  cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.01em;
  padding:6px 12px; border-radius:999px; color: var(--text-dim);
  transition: color .25s ease; white-space:nowrap;
}
.currency-toggle-btn.is-active{ color: var(--ink); }
.currency-toggle-btn:hover:not(.is-active){ color: var(--text); }
.currency-toggle-desktop{ display:none; }
@media(min-width:801px){
  .currency-toggle-desktop{ display:inline-flex; }
}
/* The mobile topbar already shows a bell; hide the page-head's duplicate
   on small screens (page-head's bell/currency-toggle stay for desktop,
   where the mobile topbar itself is hidden). */
@media(max-width:800px){
  .page-head .notif-wrap{ display:none; }
}
/* Dashboard renders its own wallet-hero card with balance + fund action,
   so the generic page-head balance/notif/add-funds strip would be
   redundant directly beneath the mobile topbar — hide it there only. */
@media(max-width:800px){
  body.has-wallet-hero .page-head{ display:none; }
}
.sidebar-overlay{
  display:none; position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:80;
}
.sidebar-overlay.show{ display:block; }

/* Desktop: static two-column shell, sidebar always visible, mobile chrome hidden */
@media(min-width:801px){
  .app{ grid-template-columns: 240px 1fr; }
  .app-mobile-topbar{ display:none; }
  .sidebar-overlay{ display:none !important; }
  .sidebar{
    position:sticky; top:0; height:100vh; width:auto; max-width:none;
    transform:none; box-shadow:none; z-index:auto;
  }
  .main{ padding: 28px 32px; }
}

.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }

.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin: 0 -2px; }
.table-responsive table{ min-width:560px; }

/* Bulk import page: mode tabs + category quick-select chips */
.import-tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.import-tab{ padding:9px 16px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--text-dim); font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; display:inline-block; }
.import-tab.active{ background:var(--ink-raised); border-color:var(--signal); color:var(--text); }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px; }
.chip{ padding:6px 12px; border-radius:100px; border:1px solid var(--line); background:transparent; color:var(--text-dim); font-size:12px; cursor:pointer; white-space:nowrap; }
.chip:hover{ border-color:var(--signal); color:var(--text); }
.chip.active{ background:rgba(61,92,255,.12); border-color:var(--signal); color:var(--signal); }
.import-sticky-bar{ position:sticky; bottom:0; background:var(--ink); border-top:1px solid var(--line); padding:12px; margin:0 -2px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; z-index:5; }
.selected-count{ font-size:13px; color:var(--text-dim); }
.selected-count strong{ color:var(--signal); }

table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ text-align:left; color:var(--text-dim); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:10px 12px; border-bottom:1px solid var(--line); }
td{ padding:12px; border-bottom:1px solid var(--line); }
tr:hover td{ background: var(--ink-raised); }

.badge{ display:inline-block; padding:4px 10px; border-radius:100px; font-size:12px; font-weight:600; }
.badge-pending{ background:rgba(245,158,11,.12); color:var(--amber); }
.badge-progress{ background:rgba(245,185,60,.12); color:var(--secondary); }
.badge-completed{ background:rgba(34,197,94,.12); color:var(--signal-soft); }
.badge-cancelled{ background:rgba(239,68,68,.12); color:var(--coral); }
.badge-success{ background:rgba(34,197,94,.12); color:var(--signal-soft); }
.badge-warning{ background:rgba(245,185,60,.12); color:var(--secondary); }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#334155; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- wallet hero card (dashboard) — premium fintech redesign ---------- */
.wallet-hero{
  position:relative; overflow:hidden; border-radius: calc(var(--radius) + 4px);
  padding: 30px 26px 28px;
  background:
    radial-gradient(560px 260px at 8% -15%,  rgba(79,70,229,.32), transparent 62%),
    radial-gradient(480px 260px at 105% 115%, rgba(61,92,255,.24), transparent 65%),
    linear-gradient(160deg, #0B1020 0%, #0D1330 55%, #0B1020 100%);
  border:1px solid rgba(79,70,229,.25);
  box-shadow:
    0 0 0 1px rgba(79,70,229,.06),
    0 30px 70px -34px rgba(30,41,120,.65),
    0 2px 0 rgba(255,255,255,.03) inset;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  margin-bottom:24px;
}
/* faint mesh glow + abstract curved lines, sitting behind all content */
.wallet-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='320' viewBox='0 0 640 320'><path d='M-40,260 C160,120 300,300 680,60' stroke='%234F46E5' stroke-width='1' fill='none' opacity='0.22'/><path d='M-40,190 C220,60 360,260 680,130' stroke='%237C6AE8' stroke-width='1' fill='none' opacity='0.16'/><path d='M-40,300 C260,160 420,320 680,210' stroke='%233D5CFF' stroke-width='1' fill='none' opacity='0.14'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:cover;
  mix-blend-mode:screen;
}
/* subtle dotted geometric texture, faded in from the right edge */
.wallet-hero::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:46%; z-index:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.5px);
  background-size:15px 15px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to left, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%);
  opacity:.55;
}
.wallet-hero-top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px; }
.wallet-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(8,11,26,.55); border:1px solid rgba(255,255,255,.09);
  padding:7px 14px; border-radius:999px; font-size:12px; font-weight:600; color:#E7EAF6;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wallet-badge-dot{ width:7px; height:7px; border-radius:50%; background:#22C55E; flex-shrink:0; box-shadow:0 0 8px rgba(34,197,94,.75); }
.wallet-fund-btn{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--signal); color:#fff; border:1px solid rgba(255,255,255,.08);
  padding:10px 18px; border-radius:999px;
  font-weight:700; font-size:13.5px; cursor:pointer; transition: transform .15s ease, background .2s ease;
  box-shadow: 0 10px 24px -8px rgba(61,92,255,.65), inset 0 1px 0 rgba(255,255,255,.12);
}
.wallet-fund-btn:hover{ background: var(--signal-dim); }
.wallet-fund-btn:active{ transform: scale(.96); }
.wallet-balance-label{ position:relative; z-index:1; color:#8D96B8; font-size:12.5px; letter-spacing:.02em; margin-bottom:8px; }
.wallet-balance-row{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.wallet-balance{ font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:700; color:#FFFFFF; letter-spacing:-.015em; }
.wallet-eye-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.08); cursor:pointer;
  background: rgba(255,255,255,.06); color:#E7EAF6; flex-shrink:0;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wallet-shortcuts{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:28px; }
.wallet-shortcut{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  text-decoration:none; color:#E7EAF6; text-align:center; background:none; border:none;
  font-family:inherit; cursor:pointer; padding:0;
}
.wallet-shortcut-icon{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s ease, transform .15s ease;
}
.wallet-shortcut:hover .wallet-shortcut-icon{ background: rgba(255,255,255,.09); transform: translateY(-1px); }
.wallet-shortcut span{ font-size:11px; color:#8D96B8; }

/* ---------- account overview card ---------- */
.account-overview{ display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.account-overview-avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(160deg, var(--signal), var(--signal-dim));
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.account-overview-body{ flex:1; min-width:180px; }
.account-overview-body strong{ display:block; font-size:15px; font-weight:600; }
.account-overview-body span{ display:block; color:var(--text-dim); font-size:12.5px; margin-top:2px; }

.tier-progress-card{ display:flex; align-items:center; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.tier-progress-icon{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  background: rgba(34,197,94,.14); color: var(--signal-soft);
  display:flex; align-items:center; justify-content:center;
}
.tier-progress-body{ flex:1; min-width:0; }
.tier-progress-bar{ height:6px; border-radius:4px; background:var(--ink-raised); margin-top:8px; overflow:hidden; }
.tier-progress-bar > span{ display:block; height:100%; background: linear-gradient(90deg, var(--signal-dim), var(--signal)); border-radius:4px; }

/* ---------- promo carousel ---------- */
.promo-scroller{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 10px; margin-bottom:14px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; perspective:1200px;
}
.promo-scroller::-webkit-scrollbar{ display:none; }
.promo-card{
  scroll-snap-align:start; flex:0 0 88%; min-width:260px; border-radius: var(--radius);
  padding:20px; position:relative; overflow:hidden; text-decoration:none; color:#fff;
  background: radial-gradient(320px 160px at 100% 0%, rgba(255,255,255,.22), transparent 70%), var(--brand-gradient);
  border:1px solid rgba(255,255,255,.18);
  transform: scale(.94); opacity:.6;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease, box-shadow .45s ease;
  will-change: transform, opacity;
}
.promo-card.is-active{
  transform: scale(1); opacity:1;
  box-shadow: 0 14px 38px -12px rgba(61,92,255,.45), 0 0 0 1px rgba(255,255,255,.06);
}
@media(min-width:601px){ .promo-card{ flex-basis:46%; } }
@media(min-width:901px){ .promo-card{ flex-basis:31%; } }

/* Diagonal light sweep across the active card, echoing the splash
   screen's shine — reads as "premium" motion rather than a static box. */
.promo-card::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%);
  background-size:250% 250%; background-position:120% 0;
  opacity:0;
}
.promo-card.is-active::before{
  animation: promo-shine 2.6s ease-in-out .15s 1;
}
@keyframes promo-shine{
  0%{ background-position:120% 0; opacity:0; }
  15%{ opacity:.9; }
  55%{ opacity:.5; }
  100%{ background-position:-40% 0; opacity:0; }
}

.promo-eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:#F8FAFC;
  background:rgba(255,255,255,.12); padding:4px 10px; border-radius:999px; margin-bottom:12px;
  position:relative; z-index:2; backdrop-filter:blur(2px);
}
.promo-card h4{ font-size:19px; margin-bottom:6px; position:relative; z-index:2; }
.promo-card p{ color:#E2E8F0; font-size:13px; line-height:1.45; margin-bottom:16px; max-width:80%; position:relative; z-index:2; }
.promo-card .promo-cta{
  display:inline-flex; align-items:center; gap:6px; background:#fff; color:#0F172A;
  font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:999px;
  position:relative; z-index:2; transition: transform .25s ease, box-shadow .25s ease;
}
.promo-card.is-active .promo-cta{ box-shadow:0 6px 18px rgba(0,0,0,.22); }
.promo-card:active .promo-cta{ transform: scale(.96); }

/* Content fades/rises in once a card becomes active, instead of just
   sitting there statically the whole time it's in view. */
.promo-card .promo-eyebrow,
.promo-card h4,
.promo-card p,
.promo-card .promo-cta{
  opacity:0; transform:translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.promo-card.is-active .promo-eyebrow{ opacity:1; transform:none; transition-delay:.05s; }
.promo-card.is-active h4{ opacity:1; transform:none; transition-delay:.12s; }
.promo-card.is-active p{ opacity:1; transform:none; transition-delay:.18s; }
.promo-card.is-active .promo-cta{ opacity:1; transform:none; transition-delay:.24s; }

/* Instagram-story-style segmented progress bar, replacing plain dots —
   each segment fills over the auto-advance interval so the carousel's
   pacing is visible, not just its current position. */
.promo-dots{ display:flex; gap:5px; margin:0 2px 20px; }
.promo-dots span{
  flex:1; height:3px; border-radius:3px; background:var(--line);
  overflow:hidden; position:relative;
}
.promo-dots span > i{
  display:block; height:100%; width:0%; border-radius:3px;
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  transform-origin:left center;
}
.promo-dots span.done > i{ width:100%; }
.promo-dots span.filling > i{ animation: promo-fill linear forwards; }
@keyframes promo-fill{ from{ width:0%; } to{ width:100%; } }

.promo-card-custom{
  aspect-ratio: 1 / 1;
  min-height: 280px;
}
/* Background image lives on its own absolutely-positioned layer (set via
   dashboard.php) rather than directly on the card, so the slow zoom
   animation only scales the image — not the overlay text and padding
   sitting on top of it. */
.promo-card-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  animation: promo-kenburns 9s ease-in-out infinite alternate;
}
@keyframes promo-kenburns{
  from{ transform:scale(1); }
  to{ transform:scale(1.09); }
}
.promo-card-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 85%);
  padding:20px; border-radius:0 0 var(--radius) var(--radius);
}
.promo-card-overlay h4{ font-size:17px; margin-bottom:4px; position:relative; z-index:2; opacity:0; transform:translateY(8px); transition:opacity .5s ease .12s, transform .5s ease .12s; }
.promo-card-overlay p{ color:#E2E8F0; font-size:12.5px; line-height:1.4; margin:0; position:relative; z-index:2; opacity:0; transform:translateY(8px); transition:opacity .5s ease .18s, transform .5s ease .18s; }
.promo-card.is-active .promo-card-overlay h4,
.promo-card.is-active .promo-card-overlay p{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .promo-card, .promo-card::before, .promo-card-custom::after,
  .promo-card .promo-eyebrow, .promo-card h4, .promo-card p, .promo-card .promo-cta,
  .promo-card-overlay h4, .promo-card-overlay p{ animation:none !important; transition:none !important; }
  .promo-card{ transform:none; opacity:1; }
  .promo-card .promo-eyebrow, .promo-card h4, .promo-card p, .promo-card .promo-cta,
  .promo-card-overlay h4, .promo-card-overlay p{ opacity:1; transform:none; }
  .promo-dots span > i{ width:0; }
  .promo-dots span.done > i, .promo-dots span.filling > i{ width:100%; }
}

/* ---------- app topbar avatar / bell (mobile) ---------- */
.currency-toggle-compact{ margin-left:0; }

.app-topbar-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.app-topbar-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; border:none; cursor:pointer;
  background: linear-gradient(160deg, var(--signal), var(--signal-dim)); color:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Quick Services (circular icon grid) ---------- */
.qs-card{ margin-bottom:26px; }
.qs-card .qs-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.qs-card .qs-head h3{ font-size:16px; }
.qs-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px 6px;
}
@media(min-width:601px){ .qs-grid{ grid-template-columns:repeat(6, 1fr); } }
@media(min-width:901px){ .qs-grid{ grid-template-columns:repeat(8, 1fr); } }
.qs-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:var(--text); text-align:center;
}
.qs-icon{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--signal); border:none; color:#FFFFFF;
  box-shadow: 0 3px 8px rgba(61,92,255,.18);
  transition: transform .15s ease;
}
.qs-icon svg{ stroke-width:2; }
.qs-item:active .qs-icon{ transform: scale(.94); }
.qs-item:hover .qs-icon{ box-shadow: 0 3px 10px rgba(61,92,255,.3); }
.qs-item span{ font-size:11.5px; color:var(--text-dim); line-height:1.25; max-width:72px; }
@media(max-width:480px){
  .qs-card{ padding:16px 8px; }
  .qs-grid{ gap:16px 2px; }
  .qs-item span{ font-size:10.5px; max-width:64px; }
}

/* ---------- Bills grid (2-col tiles: icon, title, subtitle) ---------- */
.bills-section{ margin-bottom:28px; }
.bills-section h3{ font-size:15px; margin-bottom:14px; }
.bills-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.bill-tile{
  display:block; text-align:left; text-decoration:none; color:var(--text);
  background: var(--ink-card); border:1px solid var(--line); border-radius: var(--radius);
  padding:18px 16px; transition: transform .12s ease, box-shadow .12s ease;
}
.bill-tile:hover{ box-shadow: var(--shadow); transform: translateY(-1px); }
.bill-tile:active{ transform: scale(.98); }
.bill-tile-icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(61,92,255,.12); color: var(--signal);
}
.bill-tile-title{ font-weight:700; font-size:15px; margin-bottom:2px; }
.bill-tile-sub{ font-size:13px; color:var(--text-dim); }
@media(min-width:601px){ .bills-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- grouped services list (sidebar "More" drawer) ----------
   Category sections (Bills / Numbers & eSIM / More Services), each a
   card with a 2-column grid of row-style icon+label tiles — matches
   the reference recording's "More services" screen. */
.svc-group{ margin-bottom:18px; }
.svc-group-title{ font-size:13px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin:0 2px 10px; }
.svc-tile-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.svc-tile{
  display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px;
  background: var(--ink-card); border:1px solid var(--line); text-decoration:none; color:var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
.svc-tile:hover{ border-color:#3A4A6E; }
.svc-tile:active{ transform: scale(.98); }
.svc-tile-icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--signal); color:#fff;
}
.svc-tile span{ font-size:13px; font-weight:500; line-height:1.2; }

/* ---------- fixed mobile bottom nav (Home / Services / + / Orders / More) ---------- */
.bottom-nav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:75;
  align-items:center; justify-content:space-around;
  background: linear-gradient(180deg, rgba(17,24,39,.97), rgba(8,11,20,.98));
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(61,92,255,.16);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:#94A3B8; font-size:10.5px; font-weight:500;
  flex:1; padding:4px 2px;
}
.bottom-nav-item.active{ color: var(--text); font-weight:600; animation: navLabelPop .3s ease; }
.bottom-nav-item.active svg{
  background: linear-gradient(135deg, var(--signal), var(--secondary));
  color:#fff; border-radius:999px; padding:9px 20px;
  box-shadow: 0 4px 14px rgba(61,92,255,.35), 0 2px 10px rgba(245,185,60,.3);
  animation: navPillPulse 2.2s ease-in-out infinite;
}
@keyframes navPillPulse{
  0%, 100% {
    box-shadow: 0 4px 14px rgba(61,92,255,.35), 0 2px 10px rgba(245,185,60,.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 6px 20px rgba(61,92,255,.5), 0 3px 16px rgba(245,185,60,.55);
    transform: scale(1.07);
  }
}
@keyframes navLabelPop{
  0%   { transform: translateY(3px); opacity:.6; }
  100% { transform: translateY(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .bottom-nav-item.active svg{ animation: none; }
  .bottom-nav-item.active{ animation: none; }
}
.bottom-nav-item svg{ flex-shrink:0; transition: background .15s ease, box-shadow .15s ease; }
.bottom-nav-fab-wrap{ flex:1; display:flex; justify-content:center; }
.bottom-nav-fab{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-top:-30px; border-radius:50%;
  background: var(--signal); color:#fff; box-shadow: 0 4px 14px rgba(61,92,255,.4), 0 2px 10px rgba(245,185,60,.3);
  border:4px solid #0F172A;
}
@media(max-width:360px){
  .bottom-nav{ padding: 8px 2px calc(8px + env(safe-area-inset-bottom)); }
  .bottom-nav-item{ font-size:9.5px; }
}
body.has-bottom-nav .main{ padding-bottom: 84px; }
@media(min-width:801px){
  .bottom-nav{ display:none !important; }
  body.has-bottom-nav .main{ padding: 28px 32px; }
}
@media(max-width:800px){
  .bottom-nav{ display:flex; }
}

/* ---------- site footer (public pages) ---------- */
.site-footer{
  position:relative;
  border-top:1px solid var(--line);
  margin-top:40px;
  padding: 56px 0 28px;
  background: var(--ink-raised);
  overflow:hidden;
}
.site-footer::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(61,92,255,.6) 35%, rgba(147,51,234,.55) 65%, transparent);
}
.site-footer::after{
  content:''; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:640px; height:300px; pointer-events:none;
  background:
    radial-gradient(320px 200px at 30% 0%, rgba(61,92,255,.08), transparent 70%),
    radial-gradient(320px 200px at 70% 0%, rgba(147,51,234,.07), transparent 70%);
}
.site-footer-grid{
  position:relative; display:grid; grid-template-columns: 1fr; gap:36px;
}
.site-footer-brand-top{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.site-footer-mark{ border-radius:8px; flex-shrink:0; }
.site-footer-brand .brand{ margin:0; }
.site-footer-brand p{ color:var(--text-dim); font-size:13px; max-width:280px; line-height:1.6; margin:0; }
.footer-status{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--signal);
  background: rgba(61,92,255,.08); border:1px solid rgba(61,92,255,.2);
  padding:6px 12px; border-radius:100px;
}
.footer-status .brand-dot{ width:7px; height:7px; }
.site-footer-col{ display:flex; flex-direction:column; gap:12px; }
.site-footer-col a{
  color:var(--text-dim); font-size:13.5px; width:fit-content;
  transition: color .15s ease, transform .15s ease;
}
.site-footer-col a:hover{ color:var(--text); transform: translateX(3px); }
.site-footer-heading{
  display:flex; align-items:center; gap:8px;
  color:var(--text); font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; margin-bottom:2px;
}
.site-footer-heading::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background: linear-gradient(135deg, var(--signal), #9333ea);
  box-shadow: 0 0 5px rgba(61,92,255,.5);
}
.site-footer-trust{
  position:relative; display:flex; flex-direction:column; gap:12px;
  margin-top:44px; padding:16px 20px; border-radius:12px;
  background: var(--ink); border:1px solid var(--line);
  font-size:12.5px; color:var(--text-dim);
}
.site-footer-trust span{ display:flex; align-items:center; gap:8px; }
.site-footer-trust svg{ width:15px; height:15px; flex-shrink:0; color:var(--signal); }
.site-footer-bottom{
  position:relative; display:flex; flex-direction:column; gap:8px;
  margin-top:24px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--text-dim); font-size:12px;
}
.footer-meta{ display:flex; flex-direction:column; gap:4px; }
.footer-meta-version{ opacity:.5; font-size:11px; }
.footer-back-top{
  color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:11px;
  transition: color .15s ease;
}
.footer-back-top:hover{ color:var(--signal); }

@media(min-width:701px){
  .site-footer-grid{ grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap:24px; }
  .site-footer-trust{ flex-direction:row; align-items:center; justify-content:space-between; }
  .site-footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}

/* ---------- legal / long-form content pages ---------- */
.legal-page{ padding: 32px 0 24px; max-width:760px; margin:0 auto; }
.legal-page h1{ font-size: clamp(26px, 5vw, 38px); margin-bottom:8px; }
.legal-page .legal-updated{ color:var(--text-dim); font-size:13px; margin-bottom:16px; }
.legal-page .legal-intro{ color:var(--text-dim); font-size:15px; line-height:1.7; margin-bottom:22px; }
.legal-page h2{ font-size:16px; margin: 0; }
.legal-page p, .legal-page li{ color:var(--text-dim); font-size:15px; line-height:1.7; }
.legal-page ul, .legal-page ol{ padding-left:20px; margin:10px 0; }
.legal-page a{ color: var(--signal); }

/* Legal page accordion — keeps long policies scannable on small screens */
.legal-toolbar{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.legal-toolbar button{ background:none; border:1px solid var(--line); color:var(--text-dim); font-size:12px; padding:6px 12px; border-radius:20px; cursor:pointer; }
.legal-toolbar button:hover{ color:var(--signal); border-color:var(--signal); }
.legal-accordion{ border-top:1px solid var(--line); }
.legal-section{ border-bottom:1px solid var(--line); }
.legal-section-header{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:none; text-align:left; cursor:pointer; padding:16px 4px; color:var(--text); }
.legal-section-header .legal-caret{ flex-shrink:0; width:9px; height:9px; border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim); transform:rotate(45deg); transition:transform .18s ease; margin-left:10px; }
.legal-section.is-open .legal-section-header .legal-caret{ transform:rotate(-135deg); }
.legal-section-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease; }
.legal-section.is-open .legal-section-body{ grid-template-rows:1fr; }
.legal-section-body-inner{ overflow:hidden; padding:0 4px; }
.legal-section.is-open .legal-section-body-inner{ padding-top:10px; padding-bottom:16px; }

/* ---------- PWA install banner + iOS instructions modal ---------- */
.pwa-banner{
  position:fixed; left:16px; right:16px; bottom:-120px; z-index:80;
  max-width:480px; margin:0 auto; display:flex; align-items:center; gap:12px;
  background:var(--ink-card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 16px; transition:bottom .28s ease;
}
.pwa-banner.is-visible{ bottom:16px; }
@media(max-width:800px){
  body.has-bottom-nav .pwa-banner.is-visible{ bottom:76px; }
}
.pwa-banner img{ width:38px; height:38px; border-radius:9px; flex-shrink:0; background:#fff; }
.pwa-banner-text{ flex:1; min-width:0; }
.pwa-banner-text strong{ display:block; font-size:13px; color:var(--text); }
.pwa-banner-text span{ display:block; font-size:12px; color:var(--text-dim); }
.pwa-banner-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pwa-banner-dismiss{
  background:none; border:none; color:var(--text-dim); font-size:20px; line-height:1;
  cursor:pointer; padding:4px;
}

.pwa-ios-modal{
  display:none; position:fixed; inset:0; z-index:90; align-items:flex-end; justify-content:center;
  background:rgba(6,9,13,.72); padding:16px;
}
.pwa-ios-modal-card{
  width:100%; max-width:420px; background:var(--ink-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; color:var(--text);
}
.pwa-ios-modal-card h3{ margin:0 0 12px; font-size:17px; }
.pwa-ios-modal-card ol{ margin:0 0 16px; padding-left:20px; color:var(--text-dim); font-size:14px; line-height:1.8; }
.pwa-ios-modal-card ol b{ color:var(--text); }

/* ---------- /install.php landing ---------- */
.install-hero{ text-align:center; padding:48px 0 8px; }
.install-hero img{ width:96px; height:96px; border-radius:22px; background:#fff; padding:6px; box-shadow:var(--shadow); }
.install-hero h1{ font-size:clamp(24px,5vw,32px); margin:18px 0 8px; }
.install-hero p{ color:var(--text-dim); max-width:440px; margin:0 auto 22px; line-height:1.6; }
.install-benefits{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px;
  max-width:640px; margin:0 auto 28px;
}
.install-benefit{ background:var(--ink-card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-align:left; }
.install-benefit .dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); display:inline-block; margin-bottom:8px; }
.install-benefit strong{ display:block; font-size:14px; margin-bottom:4px; }
.install-benefit span{ color:var(--text-dim); font-size:13px; line-height:1.5; }

/* ---------- Social media icons (site footer) ---------- */
.social-icons{ display:flex; gap:8px; margin-top:14px; }
.social-icon{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line); color:var(--text-dim);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.social-icon:hover{ color:var(--ink); background:var(--signal); border-color:var(--signal); }

/* ---------- Settings panel (settings.php, profile.php, login-settings.php,
   payment-settings.php, theme.php, feedback.php) ----------
   A dedicated "back + title" header replaces the usual page-head for this
   whole section, plus a top identity card and a stacked list of tappable
   rows — icon chip, title, subtitle, chevron. */
.settings-header{
  display:flex; align-items:center; gap:14px; margin: 2px 0 20px;
}
.settings-back-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:42px; height:42px; border-radius:50%; background: var(--ink-card);
  border:1px solid var(--line); color: var(--text); transition: border-color .15s ease;
}
.settings-back-btn:hover{ border-color: var(--signal); }
.settings-header h1{ font-size:24px; }

.settings-account-card{
  display:flex; align-items:center; gap:14px; padding:18px;
  background: var(--ink-card); border:1px solid var(--line); border-radius: var(--radius);
  margin-bottom:18px;
}
.settings-account-icon{
  width:52px; height:52px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background: var(--brand-gradient); box-shadow: 0 8px 20px -8px rgba(245,185,60,.55);
}
.settings-account-card strong{ display:block; font-size:17px; margin-bottom:2px; }
.settings-account-card span{ display:block; color:var(--text-dim); font-size:13.5px; word-break:break-all; }

.settings-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.settings-item{
  display:flex; align-items:center; gap:14px; padding:16px;
  background: var(--ink-card); border:1px solid var(--line); border-radius: var(--radius);
  text-decoration:none; color:var(--text); cursor:pointer;
  transition: border-color .15s ease, transform .12s ease; text-align:left; width:100%;
  font-family:inherit;
}
.settings-item:hover{ border-color:#F5B93C55; }
.settings-item:active{ transform: scale(.99); }
.settings-item-icon{
  width:44px; height:44px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(245,185,60,.12); color: var(--secondary);
}
[data-theme="light"] .settings-item-icon{ background: rgba(245,185,60,.1); color:#F5B93C; }
.settings-item-body{ flex:1; min-width:0; }
.settings-item-body strong{ display:block; font-size:15px; font-weight:700; margin-bottom:2px; }
.settings-item-body span{ display:block; color:var(--text-dim); font-size:13px; }
.settings-item-arrow{ flex-shrink:0; color: var(--text-dim); }
.settings-item.danger .settings-item-icon{ background: rgba(239,68,68,.12); color:#EF4444; }
.settings-item.danger .settings-item-body strong{ color:#EF4444; }

/* ---------- Help & Support page ---------- */
.help-hero{
  position:relative; overflow:hidden; text-align:center; padding:36px 22px 30px;
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(520px 260px at 15% -10%, rgba(122,98,232,.35), transparent 60%),
    radial-gradient(480px 260px at 100% 110%, rgba(61,92,255,.25), transparent 65%),
    linear-gradient(160deg, #0B1020 0%, #0D1330 55%, #0B1020 100%);
  border:1px solid rgba(122,98,232,.28);
  margin-bottom:22px;
}
.help-hero-icon{
  width:64px; height:64px; margin:0 auto 18px; border-radius:20px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background: linear-gradient(135deg, var(--signal), #7A62E8);
  box-shadow: 0 10px 26px -10px rgba(122,98,232,.6);
}
.help-hero h2{ font-family:'Space Grotesk',sans-serif; font-size:22px; margin-bottom:10px; }
.help-hero p{ color:var(--text-dim); font-size:14px; line-height:1.6; max-width:340px; margin:0 auto; }
.help-online-badge{
  display:inline-flex; align-items:center; gap:5px; margin-left:8px;
  font-size:11px; font-weight:700; color:var(--signal-soft);
  background: rgba(34,197,94,.12); padding:2px 9px 2px 7px; border-radius:999px; vertical-align:middle;
}
.help-online-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal-soft); flex-shrink:0; }
.help-icon-chat{ background: rgba(34,197,94,.12); color: var(--signal-soft); }
.help-icon-mail{ background: rgba(245,185,60,.12); color: var(--secondary); }
.help-icon-whatsapp{ background: rgba(37,211,102,.14); color: #25D366; }
[data-theme="light"] .help-icon-chat{ background: rgba(34,197,94,.1); }
[data-theme="light"] .help-icon-mail{ background: rgba(245,185,60,.1); }
[data-theme="light"] .help-icon-whatsapp{ background: rgba(37,211,102,.1); }

.settings-card{
  background: var(--ink-card); border:1px solid var(--line); border-radius: var(--radius);
  padding:20px; margin-bottom:18px;
}
.settings-card h3{ font-size:15px; margin-bottom:4px; }
.settings-card .settings-card-hint{ color:var(--text-dim); font-size:13px; margin-bottom:18px; line-height:1.5; }

.theme-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.theme-option{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 8px; border-radius:12px; border:1.5px solid var(--line);
  background: var(--ink-raised); cursor:pointer; transition: border-color .15s ease;
}
.theme-option input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.theme-option.is-selected{ border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(245,185,60,.12); }
.theme-swatch{ width:100%; height:44px; border-radius:8px; border:1px solid var(--line); }
.theme-swatch.light{ background: linear-gradient(135deg,#F5F3FF,#fff); }
.theme-swatch.dark{ background: linear-gradient(135deg,#0F172A,#1E293B); }
.theme-swatch.system{ background: linear-gradient(135deg,#0F172A 50%,#F5F3FF 50%); }
.theme-option span{ font-size:12.5px; font-weight:600; }

.pin-input-row{ display:flex; gap:10px; justify-content:center; margin: 6px 0 18px; }
.pin-digit{
  width:44px; height:52px; text-align:center; font-size:22px; font-weight:700;
  border-radius:10px; border:1.5px solid var(--line); background: var(--ink-raised); color:var(--text);
  font-family:'JetBrains Mono',monospace;
}
.pin-digit:focus{ outline:none; border-color: var(--secondary); }

.settings-danger-note{
  display:flex; gap:10px; padding:12px 14px; border-radius:10px; margin-bottom:16px;
  background: rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); color:#FCA5A5; font-size:13px; line-height:1.5;
}

/* ===========================================================
   LOGIN — split-panel layout. Left: brand panel (desktop only),
   right: the actual form. On narrow screens it collapses to the
   same single centered card the other auth pages use, so nothing
   here overrides .auth-shell/.auth-card for register/forgot-password.
   =========================================================== */
.auth-split{
  min-height:100vh; display:flex; background:var(--ink);
}
.auth-split-form-side{
  flex:1; display:flex; align-items:center; justify-content:center; padding:24px;
  position:relative;
}
.auth-split-form-side::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(700px 420px at 50% -8%, rgba(61,92,255,.14), transparent 62%);
  pointer-events:none;
}

/* Brand panel — hidden by default (mobile-first), shown from 901px up */
.auth-brand-panel{ display:none; }
@media(min-width:1040px){
  .auth-brand-panel{
    display:flex; flex-direction:column; justify-content:space-between;
    width:44%; max-width:560px; padding:56px 48px; position:relative; overflow:hidden;
    background:
      radial-gradient(120% 100% at 10% 0%, rgba(61,92,255,.35) 0%, transparent 55%),
      radial-gradient(120% 100% at 100% 100%, rgba(147,51,234,.32) 0%, transparent 55%),
      linear-gradient(160deg, #0a0e1f 0%, #0d1330 55%, #150c2b 100%);
    border-right:1px solid var(--line);
  }
  .auth-brand-panel-orb{
    position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; mix-blend-mode:screen;
  }
  .auth-brand-panel-orb.a{ width:22vw; height:22vw; top:-8vw; left:-6vw; background:radial-gradient(circle,#3D5CFF,transparent 70%); animation:auth-orb-float 9s ease-in-out infinite; }
  .auth-brand-panel-orb.b{ width:20vw; height:20vw; bottom:-8vw; right:-6vw; background:radial-gradient(circle,#9333ea,transparent 70%); animation:auth-orb-float 11s ease-in-out infinite reverse; }
  @keyframes auth-orb-float{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(2.4vw,2vw) scale(1.08); }
  }

  .auth-brand-top{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
  .auth-brand-top img{ width:40px; height:40px; filter:drop-shadow(0 6px 18px rgba(61,92,255,.5)); }
  .auth-brand-top span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:#F8FAFC; letter-spacing:.01em; }

  .auth-brand-mid{ position:relative; z-index:1; margin:auto 0; padding:40px 0; }
  .auth-brand-mid h1{
    font-family:'Space Grotesk',sans-serif; font-size:clamp(24px,2.6vw,32px); line-height:1.3; font-weight:700; color:#F8FAFC;
  }
  /* Solid color (not a gradient text-clip) so the emphasized line never
     risks a rendering glitch if it wraps on a narrower panel width. */
  .auth-brand-mid h1 span{ color:#B9A8FF; }
  .auth-brand-mid p{ margin-top:14px; font-size:14.5px; line-height:1.6; color:#A9B2D6; max-width:340px; }

  .auth-brand-points{ position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; }
  .auth-brand-point{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:#C7D0F0; }
  .auth-brand-point .dot{
    width:26px; height:26px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(61,92,255,.16); border:1px solid rgba(139,157,255,.25); color:#A9B4FF;
  }
}

.auth-split-form-side .auth-card{
  position:relative; z-index:1; box-shadow:none; border:1px solid var(--line);
}
@media(min-width:901px){
  .auth-split-form-side .auth-card{ box-shadow: var(--shadow); }
}

/* Password field with a right-aligned show/hide toggle */
.field-password-wrap{ position:relative; }
.field-password-wrap input{ padding-right:44px !important; }
.field-toggle-pw{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer; color:var(--text-dim); border-radius:8px;
  transition: color .15s ease, background .15s ease;
}
.field-toggle-pw:hover{ color:var(--text); background:var(--ink-raised); }
.field-toggle-pw svg{ width:18px; height:18px; }
.field-toggle-pw .eye-off{ display:none; }
.field-toggle-pw.is-visible .eye{ display:none; }
.field-toggle-pw.is-visible .eye-off{ display:block; }

.field-icon-wrap{ position:relative; }
.field-icon-wrap svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px;
  color:var(--text-muted); pointer-events:none;
}
.field-icon-wrap input{ padding-left:40px !important; }

.auth-trust-row{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:24px; font-size:12px; color:var(--text-muted);
}
.auth-trust-row svg{ width:13px; height:13px; flex-shrink:0; }

/* SMM PANEL REFRESH */
#smm-order{margin-top:44px!important;padding-top:22px;border-top:1px solid var(--line);font-size:23px;letter-spacing:-.02em}
#smm-order::before{content:'SMM WORKSPACE';display:block;margin-bottom:8px;color:var(--signal);font-size:10px;font-weight:800;letter-spacing:.16em}
#smm-order + p{max-width:720px;margin-bottom:18px!important;color:var(--text-dim);font-size:14px}
#smm-order ~ .field:has(#serviceSearch){max-width:100%!important;margin-bottom:12px!important}
#serviceSearch{width:100%;height:46px;padding:0 15px;border:1px solid var(--line);border-radius:13px;background:var(--ink-card);box-shadow:0 10px 30px -24px rgba(61,92,255,.8);font-size:13px;transition:border-color .18s,box-shadow .18s}
#serviceSearch:focus{border-color:rgba(61,92,255,.75);box-shadow:0 0 0 4px rgba(61,92,255,.12),0 14px 34px -24px rgba(61,92,255,.75)}
#categoryPills{gap:8px!important;padding:8px!important;margin-bottom:8px!important;border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,var(--ink-card),var(--ink-raised));box-shadow:0 12px 30px -26px rgba(19,26,46,.55);scrollbar-width:thin}
#categoryPills::-webkit-scrollbar{height:5px}
#categoryPills::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
#categoryPills .cat-pill{min-height:36px;padding:0 13px!important;border-radius:999px!important;border:1px solid var(--line)!important;box-shadow:none!important;font-size:11.5px;font-weight:600;opacity:1!important;transition:transform .16s,border-color .16s,background .16s,color .16s}
#categoryPills .cat-pill:hover{transform:translateY(-1px);border-color:rgba(61,92,255,.55)!important}
#categoryPills .cat-pill.btn-primary{background:linear-gradient(135deg,var(--signal),#6d5ce7)!important;border-color:transparent!important;color:#fff!important}
#categoryPills .cat-pill.btn-ghost{background:var(--ink-raised)!important;color:var(--text-dim)!important}
#resultCount{margin:0 2px 16px!important;color:var(--text-muted)!important;font-size:10.5px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#serviceGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;align-items:start}
#serviceGrid .svc-group{min-width:0;margin:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.72),var(--ink-card));box-shadow:0 16px 35px -30px rgba(19,26,46,.7)}
#serviceGrid .svc-group-title{min-height:26px;margin:0 0 14px 0!important;color:var(--text);font-size:12px!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase}
#serviceGrid .svc-group-count{padding:3px 8px;background:rgba(61,92,255,.10);color:var(--signal);font-size:10px}
#serviceGrid .svc-group > .grid.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
#serviceGrid .service-pick-card{width:100%;min-width:0;min-height:142px;padding:14px!important;border:1px solid var(--line);border-radius:14px;background:var(--ink-raised);box-shadow:0 8px 20px -20px rgba(19,26,46,.75);transition:transform .18s,border-color .18s,box-shadow .18s}
#serviceGrid .service-pick-card:hover{transform:translateY(-2px);border-color:rgba(61,92,255,.55);box-shadow:0 16px 26px -22px rgba(61,92,255,.7)}
#serviceGrid .service-pick-card .svc-name{display:-webkit-box;overflow:hidden;min-height:0;margin-top:10px;font-size:12px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:5}
#serviceGrid .service-pick-card .svc-rate{margin-top:auto;padding-top:14px;font-size:14px;font-weight:700}
#serviceGrid .service-pick-card .svc-rate small{font-weight:500}
#noResults{padding:24px 0;font-size:13px}
#orderModal{background:rgba(8,12,28,.62)!important;backdrop-filter:blur(9px)}
#orderModal > .card{max-width:520px!important;padding:26px!important;border:1px solid rgba(255,255,255,.16);border-radius:22px!important;box-shadow:0 28px 80px -28px rgba(3,7,18,.65)}
#orderModal #modalServiceName{font-size:18px!important;line-height:1.35}
#orderModal #modalCategoryLabel{margin-bottom:20px!important}
#orderModal #orderForm label{display:block;margin-bottom:7px;color:var(--text-dim);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#orderModal #orderForm input{height:45px;border-radius:12px}
@media(max-width:900px){#serviceGrid{grid-template-columns:1fr!important}}
@media(max-width:620px){#smm-order{margin-top:34px!important;font-size:21px}#serviceGrid .svc-group > .grid.grid-3{grid-template-columns:1fr}#serviceGrid .svc-group{padding:13px}#serviceGrid .service-pick-card{min-height:0}#categoryPills{margin-left:-2px;margin-right:-2px}}

/* ---------- Brand colours for footer social icons ---------- */
.social-icon{
  border-color:transparent;
  color:#fff;
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease, filter .15s ease;
}
.social-icon[aria-label="Facebook"]{background:#1877f2;}
.social-icon[aria-label="Instagram"]{background:radial-gradient(circle at 30% 110%,#fdf497 0 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);}
.social-icon[aria-label="X (Twitter)"]{background:#fff;color:#050505;}
.social-icon[aria-label="Telegram"]{background:#229ed9;}
.social-icon[aria-label="Facebook"]:hover{background:#1877f2;color:#fff;border-color:#1877f2;}
.social-icon[aria-label="Instagram"]:hover{background:radial-gradient(circle at 30% 110%,#fdf497 0 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);color:#fff;border-color:#d6249f;}
.social-icon[aria-label="X (Twitter)"]:hover{background:#fff;color:#050505;border-color:#fff;}
.social-icon[aria-label="Telegram"]:hover{background:#229ed9;color:#fff;border-color:#229ed9;}
.social-icon:hover{transform:translateY(-1px);filter:brightness(1.08);}

/* Ensure brand icons remain bright against footer link styles. */
.social-icon[aria-label="Facebook"],
.social-icon[aria-label="Instagram"],
.social-icon[aria-label="Telegram"]{color:#fff;}

/* ---------- Footer layout refresh ---------- */
.site-footer{
  margin-top:72px;
  padding:72px 0 34px;
  background:linear-gradient(180deg,#11182b 0%,#0b1020 100%);
}
.site-footer-grid{gap:48px;}
.site-footer-brand{
  padding:26px;
  border:1px solid rgba(119,130,255,.18);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(37,50,108,.42),rgba(20,26,46,.78));
  box-shadow:0 22px 60px rgba(4,8,24,.28);
}
.site-footer-brand-top{margin-bottom:18px;}
.site-footer-brand p{max-width:320px;font-size:14px;line-height:1.65;}
.footer-status{margin-top:20px;}
.social-icons{margin-top:24px;gap:10px;}
.site-footer-col{gap:14px;padding-top:8px;}
.site-footer-heading{margin-bottom:6px;letter-spacing:.12em;}
.site-footer-col a{font-size:14px;}
.site-footer-trust{
  margin-top:56px;
  padding:18px 8px;
  border-radius:18px;
  background:rgba(8,12,28,.72);
}
.site-footer-trust span{flex:1;justify-content:center;padding:0 18px;min-height:20px;}
.site-footer-trust span+span{border-left:1px solid var(--line);}
.site-footer-bottom{margin-top:30px;padding-top:26px;}
@media(min-width:701px){
  .site-footer-grid{grid-template-columns:minmax(260px,1.5fr) repeat(4,minmax(110px,1fr));gap:36px;}
  .site-footer-brand{min-height:216px;}
}
@media(max-width:700px){
  .site-footer{padding:48px 0 28px;margin-top:52px;}
  .site-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px;}
  .site-footer-brand{grid-column:1/-1;padding:22px;border-radius:20px;}
  .site-footer-trust{margin-top:42px;padding:14px 18px;}
  .site-footer-trust span{justify-content:flex-start;padding:0;min-height:24px;}
  .site-footer-trust span+span{border-left:0;padding-top:12px;border-top:1px solid var(--line);}
  .site-footer-bottom{margin-top:24px;}
}
@media(max-width:380px){
  .site-footer-grid{column-gap:14px;}
  .site-footer-brand{padding:20px;}
}








/* ---------- lightweight interactions ----------
   No page-load motion or continuous loops. */
.card,.stat-card,.service-pick-card,.blog-card{animation:none;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.card:hover,.stat-card:hover,.service-pick-card:hover,.blog-card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn{transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px) scale(.985)}
@media (prefers-reduced-motion:reduce){.card,.stat-card,.service-pick-card,.blog-card,.btn{transition:none}.card:hover,.stat-card:hover,.service-pick-card:hover,.blog-card:hover{transform:none}}

/* TNXVERIFY site-wide theme: selected only by Admin > Overview. */
html[data-theme='tnx']{
  --ink:#100816;--ink-raised:#1A1025;--ink-card:#171022;--line:rgba(224,196,255,.13);
  --text:#FFFFFF;--text-dim:#BEB2C7;--text-muted:#8D7C99;
  --signal:#A855F7;--signal-dim:#7E22CE;--signal-soft:#7CFFB2;
  --secondary:#FFBF32;--highlight:#D6A3FF;--amber:#FFBF32;--coral:#FF5B86;
  --radius:22px;--shadow:0 25px 70px -30px rgba(0,0,0,.62);
  --brand-gradient:linear-gradient(135deg,#6420F4 0%,#9D36FF 52%,#5D23FF 100%);
}
html[data-theme='tnx'] body{background:radial-gradient(circle at 18% 12%,rgba(99,28,227,.46),transparent 32rem),radial-gradient(circle at 92% 48%,rgba(177,47,232,.20),transparent 30rem),linear-gradient(135deg,#24105B 0%,#160B28 55%,#241029 100%);color:var(--text);}
html[data-theme='tnx'] .topbar,html[data-theme='tnx'] .app-mobile-topbar{background:#0E0A12;border-color:rgba(224,196,255,.16);box-shadow:0 10px 35px rgba(0,0,0,.25);}
html[data-theme='tnx'] .nav-links{background:#160D20;border-color:var(--line);}
html[data-theme='tnx'] .nav-links a{color:#BEB2C7;}
html[data-theme='tnx'] .nav-links a:hover{color:#FFFFFF;}
html[data-theme='tnx'] .brand{color:#FFFFFF;}
html[data-theme='tnx'] .brand-dot{background:#8F3DFF;box-shadow:0 0 0 0 rgba(143,61,255,.62);}
html[data-theme='tnx'] .hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 50% 24%,rgba(104,27,237,.45),transparent 26rem),linear-gradient(135deg,#32127A 0%,#1A0C31 58%,#2A1233 100%);}
html[data-theme='tnx'] .hero::before{content:'';position:absolute;z-index:-1;width:42rem;height:42rem;left:-12rem;top:4rem;border:1px solid rgba(173,91,255,.24);border-radius:50%;box-shadow:0 0 0 5rem rgba(119,45,255,.05),0 0 0 11rem rgba(119,45,255,.035);}
html[data-theme='tnx'] .hero h1{color:#FFFFFF;}
html[data-theme='tnx'] .hero h1 span{background:linear-gradient(110deg,#D79AFF,#A53CFF 52%,#722BFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
html[data-theme='tnx'] .hero p{color:#BEB2C7;}
html[data-theme='tnx'] .eyebrow{border-color:rgba(168,85,247,.35);background:rgba(119,45,255,.16);color:#D6A3FF;}
html[data-theme='tnx'] .hero-platforms,html[data-theme='tnx'] .hero-platform{color:#B7A9C1;}
html[data-theme='tnx'] .pulse-strip{background:rgba(18,11,27,.78);border-color:var(--line);box-shadow:0 25px 70px rgba(0,0,0,.35);}
html[data-theme='tnx'] .pulse-cell{border-color:var(--line);}
html[data-theme='tnx'] .pulse-icon{background:rgba(119,45,255,.18);color:#C18CFF;}
html[data-theme='tnx'] .pulse-bar{background:rgba(168,85,247,.16);}
html[data-theme='tnx'] .pulse-bar span{background:linear-gradient(90deg,#6D23FF,#C13BFF);}
html[data-theme='tnx'] .value.up{color:#A96BFF;}
html[data-theme='tnx'] .btn-primary{background:linear-gradient(135deg,#6420F4,#A936FF);border-color:transparent;color:#FFFFFF;box-shadow:0 14px 30px rgba(119,45,255,.32);}
html[data-theme='tnx'] .btn-primary:hover{background:linear-gradient(135deg,#7D2AFF,#C040FF);box-shadow:0 18px 38px rgba(119,45,255,.45);}
html[data-theme='tnx'] .btn-ghost{background:rgba(14,8,21,.40);border-color:rgba(185,133,255,.35);color:#D6A3FF;}
html[data-theme='tnx'] .btn-ghost:hover{background:rgba(168,85,247,.16);border-color:#A855F7;color:#FFFFFF;}
html[data-theme='tnx'] .btn-secondary{background:rgba(255,191,50,.12);border-color:rgba(255,191,50,.35);color:#FFBF32;}
html[data-theme='tnx'] .card,html[data-theme='tnx'] .panel,html[data-theme='tnx'] .service-card,html[data-theme='tnx'] .auth-card,html[data-theme='tnx'] .auth-panel,html[data-theme='tnx'] .stat-card{background:linear-gradient(145deg,rgba(27,15,40,.90),rgba(15,9,23,.94));border-color:rgba(224,196,255,.14);box-shadow:0 22px 60px rgba(0,0,0,.32);}
html[data-theme='tnx'] .card:hover,html[data-theme='tnx'] .service-card:hover{border-color:rgba(168,85,247,.52);box-shadow:0 24px 70px rgba(75,18,145,.35);}
html[data-theme='tnx'] input,html[data-theme='tnx'] select,html[data-theme='tnx'] textarea{background:#160D20;border-color:rgba(224,196,255,.17);color:#FFFFFF;}
html[data-theme='tnx'] input::placeholder,html[data-theme='tnx'] textarea::placeholder{color:#8D7C99;}
html[data-theme='tnx'] input:focus,html[data-theme='tnx'] select:focus,html[data-theme='tnx'] textarea:focus{border-color:#A855F7;box-shadow:0 0 0 3px rgba(168,85,247,.18);}
html[data-theme='tnx'] .sidebar{background:#100A16;border-color:rgba(224,196,255,.13);box-shadow:18px 0 55px rgba(0,0,0,.38);}
html[data-theme='tnx'] .sidebar a{color:#BEB2C7;}
html[data-theme='tnx'] .sidebar a:hover,html[data-theme='tnx'] .sidebar a.active{color:#FFFFFF;background:rgba(168,85,247,.16);}
html[data-theme='tnx'] .page-head{border-color:rgba(224,196,255,.13);}
html[data-theme='tnx'] .bottom-nav{background:#100A16;border-color:rgba(224,196,255,.13);box-shadow:0 -14px 38px rgba(0,0,0,.36);}
html[data-theme='tnx'] .bottom-nav-item{color:#8D7C99;}
html[data-theme='tnx'] .bottom-nav-item.active{color:#C18CFF;}
html[data-theme='tnx'] .currency-toggle{background:#160D20;border-color:rgba(224,196,255,.17);}
html[data-theme='tnx'] .currency-toggle-btn{color:#BEB2C7;}
html[data-theme='tnx'] .currency-toggle-btn.is-active{color:#D6A3FF;}
html[data-theme='tnx'] .currency-toggle-thumb{background:rgba(168,85,247,.20);}
html[data-theme='tnx'] .table-wrap,html[data-theme='tnx'] table{border-color:rgba(224,196,255,.13);}
html[data-theme='tnx'] th{background:rgba(168,85,247,.12);color:#D6A3FF;}
html[data-theme='tnx'] td{border-color:rgba(224,196,255,.12);}
html[data-theme='tnx'] .badge{background:rgba(168,85,247,.18);color:#D6A3FF;border-color:rgba(168,85,247,.24);}
html[data-theme='tnx'] .service-success-overlay{background:rgba(9,4,15,.94);}
html[data-theme='tnx'] ::selection{background:rgba(168,85,247,.35);color:#FFFFFF;}
@media(max-width:700px){html[data-theme='tnx'] .hero{background:radial-gradient(circle at 50% 12%,rgba(104,27,237,.52),transparent 24rem),linear-gradient(180deg,#2C0E70 0%,#170B27 74%);}html[data-theme='tnx'] .hero::before{width:22rem;height:22rem;left:-10rem;top:9rem;}html[data-theme='tnx'] .topbar{padding:14px 16px;}}

/* TNXVERIFY RESTYLE v2 */
html[data-theme='tnx'] {
  --tnx-bg: #11101a;
  --tnx-bg-deep: #0c0b12;
  --tnx-surface: rgba(31, 26, 45, .82);
  --tnx-surface-strong: #211c30;
  --tnx-surface-soft: rgba(48, 39, 68, .54);
  --tnx-line: rgba(211, 194, 241, .15);
  --tnx-line-strong: rgba(211, 194, 241, .28);
  --tnx-ink: #f1edf8;
  --tnx-muted: #b8b1c5;
  --tnx-lilac: #b399df;
  --tnx-lilac-soft: #8d75b3;
  --tnx-plum: #614a82;
  --tnx-gold: #d6b976;
  --tnx-glow: rgba(125, 91, 170, .16);
  color-scheme: dark;
  background: var(--tnx-bg);
}
html[data-theme='tnx'] body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  color: var(--tnx-ink);
  background: radial-gradient(circle at 12% 0%, rgba(112, 78, 156, .17), transparent 31rem), radial-gradient(circle at 90% 22%, rgba(93, 67, 133, .13), transparent 28rem), linear-gradient(145deg, var(--tnx-bg-deep), var(--tnx-bg) 52%, #171322);
}
html[data-theme='tnx'] body::before,
html[data-theme='tnx'] body::after {
  content: '';
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
}
html[data-theme='tnx'] body::before { width: 22rem; height: 22rem; top: 17vh; left: -13rem; background: rgba(121, 85, 164, .12); animation: tnx-ambient-drift 18s ease-in-out infinite alternate; }
html[data-theme='tnx'] body::after { width: 19rem; height: 19rem; right: -11rem; bottom: 8vh; background: rgba(180, 153, 223, .08); animation: tnx-ambient-drift 23s ease-in-out -7s infinite alternate-reverse; }
html[data-theme='tnx'] .topbar,
html[data-theme='tnx'] .app-header,
html[data-theme='tnx'] .admin-header { position: relative; z-index: 20; background: rgba(16, 14, 24, .78); border-color: var(--tnx-line); box-shadow: 0 12px 35px rgba(3, 2, 8, .18); backdrop-filter: blur(18px); }
html[data-theme='tnx'] .topbar .brand { position: relative; display: inline-flex; align-items: center; gap: .55rem; overflow: hidden; border: 1px solid var(--tnx-line); border-radius: 14px; padding: .38rem .72rem .38rem .48rem; background: rgba(36, 28, 52, .62); box-shadow: 0 7px 22px rgba(7, 5, 14, .18); animation: tnx-brand-breathe 7s ease-in-out infinite; }
html[data-theme='tnx'] .topbar .brand::after { content: ''; position: absolute; inset: -80% 35%; pointer-events: none; background: linear-gradient(105deg, transparent 20%, rgba(241, 237, 248, .32) 50%, transparent 80%); transform: translateX(-160%) rotate(12deg); animation: tnx-brand-sheen 6.5s ease-in-out 1.2s infinite; }
html[data-theme='tnx'] .brand-dot { width: .72rem; height: .72rem; flex: 0 0 .72rem; background: var(--tnx-lilac); box-shadow: 0 0 0 5px rgba(179, 153, 223, .10), 0 0 18px rgba(179, 153, 223, .34); animation: tnx-dot-pulse 3.8s ease-in-out infinite; }
html[data-theme='tnx'] .brand-word { position: relative; z-index: 1; color: var(--tnx-ink); letter-spacing: .14em; text-shadow: 0 0 22px rgba(179, 153, 223, .18); }
html[data-theme='tnx'] .nav-links a,
html[data-theme='tnx'] .app-header a,
html[data-theme='tnx'] .admin-header a { color: var(--tnx-muted); transition: color .25s ease, transform .25s ease; }
html[data-theme='tnx'] .nav-links a:hover,
html[data-theme='tnx'] .app-header a:hover,
html[data-theme='tnx'] .admin-header a:hover { color: var(--tnx-ink); transform: translateY(-1px); }
html[data-theme='tnx'] .hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, rgba(54, 37, 78, .56), rgba(20, 16, 30, .24) 58%, rgba(92, 67, 117, .23)); border-bottom: 1px solid var(--tnx-line); }
html[data-theme='tnx'] .hero::before,
html[data-theme='tnx'] .hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border: 1px solid rgba(211, 194, 241, .11); border-radius: 50%; animation: tnx-orbit 16s linear infinite; }
html[data-theme='tnx'] .hero::before { width: 27rem; height: 27rem; right: -9rem; top: -15rem; }
html[data-theme='tnx'] .hero::after { width: 18rem; height: 18rem; left: -8rem; bottom: -13rem; animation-direction: reverse; animation-duration: 21s; }
html[data-theme='tnx'] .hero h1,
html[data-theme='tnx'] .page-head h1,
html[data-theme='tnx'] .section-title,
html[data-theme='tnx'] h1,
html[data-theme='tnx'] h2,
html[data-theme='tnx'] h3 { color: var(--tnx-ink); letter-spacing: -.025em; }
html[data-theme='tnx'] .hero h1 { text-shadow: 0 12px 30px rgba(10, 7, 16, .25); }
html[data-theme='tnx'] .hero p,
html[data-theme='tnx'] .page-head p,
html[data-theme='tnx'] .muted,
html[data-theme='tnx'] .text-muted,
html[data-theme='tnx'] .form-text { color: var(--tnx-muted); }
html[data-theme='tnx'] .card,
html[data-theme='tnx'] .panel,
html[data-theme='tnx'] .service-card,
html[data-theme='tnx'] .feature-card,
html[data-theme='tnx'] .price-card,
html[data-theme='tnx'] .stat-card,
html[data-theme='tnx'] .auth-card,
html[data-theme='tnx'] .form-card,
html[data-theme='tnx'] .orders-card,
html[data-theme='tnx'] .table-card,
html[data-theme='tnx'] .dx-cert-wrap,
html[data-theme='tnx'] .modal-content { position: relative; overflow: hidden; color: var(--tnx-ink); background: linear-gradient(145deg, var(--tnx-surface), rgba(22, 18, 33, .84)); border: 1px solid var(--tnx-line); border-radius: 20px; box-shadow: 0 18px 45px rgba(4, 3, 9, .18); backdrop-filter: blur(16px); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease; }
html[data-theme='tnx'] .card::before,
html[data-theme='tnx'] .service-card::before,
html[data-theme='tnx'] .feature-card::before,
html[data-theme='tnx'] .dx-cert-wrap::before { content: ''; position: absolute; inset: 0 28% auto 0; height: 1px; background: linear-gradient(90deg, var(--tnx-lilac), transparent); opacity: .7; }
html[data-theme='tnx'] .card:hover,
html[data-theme='tnx'] .panel:hover,
html[data-theme='tnx'] .service-card:hover,
html[data-theme='tnx'] .feature-card:hover,
html[data-theme='tnx'] .price-card:hover,
html[data-theme='tnx'] .stat-card:hover { transform: translateY(-5px); border-color: var(--tnx-line-strong); box-shadow: 0 22px 55px rgba(6, 4, 12, .28), 0 0 28px var(--tnx-glow); }
html[data-theme='tnx'] main > * { animation: tnx-rise .7s both; }
html[data-theme='tnx'] main > *:nth-child(2) { animation-delay: .07s; }
html[data-theme='tnx'] main > *:nth-child(3) { animation-delay: .14s; }
html[data-theme='tnx'] main > *:nth-child(4) { animation-delay: .21s; }
html[data-theme='tnx'] main > *:nth-child(5) { animation-delay: .28s; }
html[data-theme='tnx'] .btn,
html[data-theme='tnx'] button,
html[data-theme='tnx'] input[type='submit'],
html[data-theme='tnx'] .dx-cert-button { transition: transform .25s ease, box-shadow .25s ease, background-position .45s ease, border-color .25s ease; }
html[data-theme='tnx'] .btn-primary,
html[data-theme='tnx'] .btn.btn-primary,
html[data-theme='tnx'] button[type='submit'],
html[data-theme='tnx'] .dx-cert-button { color: #fbf9ff; border-color: transparent; background: linear-gradient(110deg, #6e558f, #8b70b3, #6e558f); background-size: 220% 100%; box-shadow: 0 10px 24px rgba(74, 50, 106, .24); }
html[data-theme='tnx'] .btn-primary:hover,
html[data-theme='tnx'] .btn.btn-primary:hover,
html[data-theme='tnx'] button[type='submit']:hover,
html[data-theme='tnx'] .dx-cert-button:hover { color: #fff; background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(74, 50, 106, .33); }
html[data-theme='tnx'] .btn:not(.btn-primary),
html[data-theme='tnx'] .btn-secondary { color: var(--tnx-ink); background: rgba(50, 40, 70, .58); border-color: var(--tnx-line-strong); }
html[data-theme='tnx'] input,
html[data-theme='tnx'] select,
html[data-theme='tnx'] textarea,
html[data-theme='tnx'] .form-control { color: var(--tnx-ink); background: rgba(13, 11, 20, .58); border-color: var(--tnx-line); border-radius: 12px; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
html[data-theme='tnx'] input:focus,
html[data-theme='tnx'] select:focus,
html[data-theme='tnx'] textarea:focus,
html[data-theme='tnx'] .form-control:focus { background: rgba(24, 19, 35, .82); border-color: var(--tnx-lilac-soft); box-shadow: 0 0 0 4px rgba(179, 153, 223, .11); outline: 0; }
html[data-theme='tnx'] table,
html[data-theme='tnx'] .table { color: var(--tnx-ink); border-color: var(--tnx-line); }
html[data-theme='tnx'] table tr,
html[data-theme='tnx'] .table tr { border-color: var(--tnx-line); transition: background .25s ease; }
html[data-theme='tnx'] table tbody tr:hover,
html[data-theme='tnx'] .table tbody tr:hover { background: rgba(179, 153, 223, .07); }
html[data-theme='tnx'] .badge,
html[data-theme='tnx'] .status,
html[data-theme='tnx'] .pill { border: 1px solid var(--tnx-line); background: rgba(179, 153, 223, .12); color: var(--tnx-ink); }
html[data-theme='tnx'] .alert,
html[data-theme='tnx'] .toast { color: var(--tnx-ink); background: rgba(42, 33, 58, .86); border-color: var(--tnx-line); }
html[data-theme='tnx'] .sidebar,
html[data-theme='tnx'] .app-sidebar,
html[data-theme='tnx'] .admin-sidebar { color: var(--tnx-muted); background: rgba(17, 14, 26, .86); border-color: var(--tnx-line); box-shadow: 10px 0 35px rgba(4, 3, 9, .12); }
html[data-theme='tnx'] .sidebar a,
html[data-theme='tnx'] .app-sidebar a,
html[data-theme='tnx'] .admin-sidebar a { color: var(--tnx-muted); transition: color .25s ease, background .25s ease, padding-left .25s ease; }
html[data-theme='tnx'] .sidebar a:hover,
html[data-theme='tnx'] .sidebar a.active,
html[data-theme='tnx'] .app-sidebar a:hover,
html[data-theme='tnx'] .app-sidebar a.active,
html[data-theme='tnx'] .admin-sidebar a:hover,
html[data-theme='tnx'] .admin-sidebar a.active { color: var(--tnx-ink); background: rgba(179, 153, 223, .10); padding-left: 1.05rem; }
html[data-theme='tnx'] .site-footer,
html[data-theme='tnx'] footer { color: var(--tnx-muted); background: rgba(10, 9, 15, .66); border-color: var(--tnx-line); }
html[data-theme='tnx'] .site-footer a,
html[data-theme='tnx'] footer a { color: var(--tnx-muted); }
html[data-theme='tnx'] .site-footer a:hover,
html[data-theme='tnx'] footer a:hover { color: var(--tnx-ink); }
html[data-theme='tnx'] .site-footer-brand-top .brand { animation: tnx-brand-breathe 8s ease-in-out infinite reverse; }
@keyframes tnx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tnx-brand-breathe { 0%, 100% { transform: translateY(0); box-shadow: 0 7px 22px rgba(7, 5, 14, .18); } 50% { transform: translateY(-2px); box-shadow: 0 11px 27px rgba(92, 67, 126, .24); } }
@keyframes tnx-brand-sheen { 0%, 58% { transform: translateX(-160%) rotate(12deg); opacity: 0; } 68% { opacity: 1; } 84%, 100% { transform: translateX(160%) rotate(12deg); opacity: 0; } }
@keyframes tnx-dot-pulse { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.16); opacity: 1; } }
@keyframes tnx-ambient-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(70px, -35px, 0) scale(1.18); } }
@keyframes tnx-orbit { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1.05); } }
@media (max-width: 700px) { html[data-theme='tnx'] .topbar { margin: .55rem .7rem; border: 1px solid var(--tnx-line); border-radius: 18px; } html[data-theme='tnx'] .hero { padding-top: 3.6rem; padding-bottom: 3.6rem; } html[data-theme='tnx'] .hero h1 { font-size: clamp(2.3rem, 12vw, 4rem); line-height: 1.02; } html[data-theme='tnx'] .card, html[data-theme='tnx'] .panel, html[data-theme='tnx'] .service-card, html[data-theme='tnx'] .feature-card { border-radius: 17px; } }
@media (prefers-reduced-motion: reduce) { html[data-theme='tnx'] *, html[data-theme='tnx'] *::before, html[data-theme='tnx'] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* TNXVERIFY EYE COMFORT PATCH */
html[data-theme='tnx'] {
  --signal: var(--tnx-lilac);
  --signal-strong: var(--tnx-lilac-soft);
  --signal-rgb: 179, 153, 223;
  --accent: var(--tnx-lilac);
  --accent-rgb: 179, 153, 223;
  --text: var(--tnx-ink);
  --text-dim: var(--tnx-muted);
  --border: var(--tnx-line);
}
html[data-theme='tnx'] .hero .eyebrow {
  color: var(--tnx-lilac) !important;
  background: rgba(179, 153, 223, .08) !important;
  border-color: rgba(179, 153, 223, .24) !important;
}
html[data-theme='tnx'] .hero h1 span {
  color: var(--tnx-lilac) !important;
  background: none !important;
  -webkit-text-fill-color: var(--tnx-lilac) !important;
  text-shadow: 0 0 24px rgba(179, 153, 223, .14) !important;
}
html[data-theme='tnx'] .hero .btn-ghost[style] {
  color: var(--tnx-lilac) !important;
  border-color: var(--tnx-line-strong) !important;
}
html[data-theme='tnx'] .pulse-icon {
  color: var(--tnx-lilac) !important;
  background: rgba(179, 153, 223, .10) !important;
  box-shadow: none !important;
}
html[data-theme='tnx'] .pulse-cell .value,
html[data-theme='tnx'] .pulse-cell .value.up {
  color: var(--tnx-lilac) !important;
  text-shadow: none !important;
}
html[data-theme='tnx'] .pulse-bar { background: rgba(179, 153, 223, .12) !important; }
html[data-theme='tnx'] .pulse-bar span { background: var(--tnx-lilac-soft) !important; box-shadow: none !important; }
html[data-theme='tnx'] .status-online,
html[data-theme='tnx'] .online,
html[data-theme='tnx'] [class*='online'] { color: #b4d7c0 !important; background-color: rgba(118, 172, 137, .12) !important; }

/* TNX ADMIN AND EMAIL PREVIEW SURFACES */
html[data-theme='tnx'] .admin-main .card,
html[data-theme='tnx'] .admin-content .card,
html[data-theme='tnx'] .dashboard-card,
html[data-theme='tnx'] .metric-card,
html[data-theme='tnx'] .settings-card,
html[data-theme='tnx'] .template-card,
html[data-theme='tnx'] .mail-preview,
html[data-theme='tnx'] .email-preview { background: linear-gradient(145deg, var(--tnx-surface), rgba(22, 18, 33, .86)); border-color: var(--tnx-line); color: var(--tnx-ink); }
html[data-theme='tnx'] .admin-main .card-header,
html[data-theme='tnx'] .admin-content .card-header,
html[data-theme='tnx'] .settings-card header,
html[data-theme='tnx'] .template-card header { color: var(--tnx-ink); background: rgba(179, 153, 223, .06); border-color: var(--tnx-line); }
html[data-theme='tnx'] .admin-main [style*='#3D5CFF'],
html[data-theme='tnx'] .admin-main [style*='#3d5cff'],
html[data-theme='tnx'] .admin-content [style*='#3D5CFF'],
html[data-theme='tnx'] .admin-content [style*='#3d5cff'],
html[data-theme='tnx'] [style*='61,92,255'] { background-color: var(--tnx-plum) !important; background-image: none !important; border-color: var(--tnx-lilac-soft) !important; color: var(--tnx-ink) !important; }
html[data-theme='tnx'] [style*='#1C2750'],
html[data-theme='tnx'] [style*='#1c2750'] { background-color: #2B1F3F !important; border-color: #4B3866 !important; }
html[data-theme='tnx'] .admin-main .btn-primary,
html[data-theme='tnx'] .admin-content .btn-primary,
html[data-theme='tnx'] .template-card .btn-primary { background: var(--tnx-plum); color: var(--tnx-ink); box-shadow: 0 10px 24px var(--tnx-glow); }




/* Keep the performance card app-like without progress-loader bars. */
html[data-theme='tnx'] .pulse-bar{display:none!important}


.location-control{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--ink-raised);color:var(--text-dim);font:700 10px/1.1 inherit;letter-spacing:.02em;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}
.location-control:hover{border-color:var(--signal);background:rgba(61,92,255,.08);color:var(--text);transform:translateY(-1px)}
.location-control:disabled{cursor:wait;opacity:.7;transform:none}
.location-control-icon{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:20px;padding:0 4px;border-radius:6px;background:rgba(61,92,255,.12);color:var(--signal);font-size:8px;letter-spacing:.04em}
.location-control-compact{min-height:32px;padding:6px 8px}
.location-helper{display:block;margin-top:7px;color:var(--text-muted);font-size:11px;line-height:1.4}
.location-context{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(61,92,255,.05);color:var(--text-dim);font-size:12px}
.location-context-label{color:var(--signal);font-size:9px;font-weight:800;letter-spacing:.12em}
.location-context strong{color:var(--text);font-size:12px}
.location-context small{margin-left:auto;color:var(--text-muted);font-size:10px}
@media(max-width:760px){.page-head .location-control{display:none}.app-topbar-actions .location-control{display:inline-flex}.location-context{align-items:flex-start;flex-wrap:wrap;gap:5px 8px}.location-context small{width:100%;margin-left:0}}