/* ============================================================
   Design tokens — soft neumorphic light theme
   ============================================================ */
:root{
  --bg:#E8EAED;
  --surface:#EDEFF2;
  --surface-2:#E3E5E9;
  --shadow-d:rgba(163,177,198,0.55);
  --shadow-l:rgba(255,255,255,0.85);
  --text:#2B2E34;
  --muted:#8A8F98;
  --border:rgba(163,177,198,0.28);
  --accent:#4C6EF5;
  --accent-soft:rgba(76,110,245,0.14);
  --amber:#FF9F45;
  --mint:#3DDC97;
  --danger:#E8635F;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --radius-pill:999px;
  --maxw:560px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button, input, textarea, select{font-family:inherit;}

h1,h2,h3{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  line-height:1.2;
  margin:0 0 .5em 0;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px 20px 60px;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ============================================================
   Neumorphic primitives
   ============================================================ */
.n-raised{
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:8px 8px 16px var(--shadow-d), -8px -8px 16px var(--shadow-l);
}
.n-raised-sm{
  background:var(--surface);
  border-radius:var(--radius-md);
  box-shadow:5px 5px 11px var(--shadow-d), -5px -5px 11px var(--shadow-l);
}
.n-inset{
  background:var(--surface-2);
  border-radius:var(--radius-md);
  box-shadow:inset 4px 4px 9px var(--shadow-d), inset -4px -4px 9px var(--shadow-l);
}
.n-circle{
  border-radius:50%;
  background:var(--surface);
  box-shadow:4px 4px 8px var(--shadow-d), -4px -4px 8px var(--shadow-l);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

/* ============================================================
   Loading overlay
   ============================================================ */
#loadingOverlay{
  position:fixed;inset:0;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;
  z-index:999;
  transition:opacity .4s ease;
}
#loadingOverlay.loading-hide{opacity:0;pointer-events:none;}
.loader-badge{
  width:76px;height:76px;
  border-radius:26px;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;
}
.loader-dots{display:flex;gap:9px;}
.loader-dots span{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  animation:dotPulse 1.1s ease-in-out infinite;
}
.loader-dots span:nth-child(2){animation-delay:.15s;background:var(--mint);}
.loader-dots span:nth-child(3){animation-delay:.3s;background:var(--amber);}
@keyframes dotPulse{
  0%,80%,100%{transform:scale(.6);opacity:.5;}
  40%{transform:scale(1);opacity:1;}
}
.loader-label{
  font-size:13px;color:var(--muted);
  letter-spacing:.02em;
}
.loader-track{
  width:140px;height:8px;
  border-radius:var(--radius-pill);
  overflow:hidden;
  position:relative;
  background:var(--surface-2);
  box-shadow:inset 2px 2px 4px var(--shadow-d), inset -2px -2px 4px var(--shadow-l);
}
.loader-track .fill{
  position:absolute;top:0;bottom:0;left:-40%;
  width:40%;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--accent), var(--mint));
  animation:loaderSlide 1.2s ease-in-out infinite;
}
@keyframes loaderSlide{
  0%{left:-40%;}
  50%{left:60%;}
  100%{left:100%;}
}

/* ============================================================
   Banner
   ============================================================ */
.banner-frame{
  padding:10px;
  margin-bottom:22px;
}
.banner{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radius-md);
  background:var(--surface-2);
}

/* ============================================================
   Fake terminal — recessed "screen" inside a soft bezel
   ============================================================ */
.terminal{
  padding:14px;
  margin:0 0 24px;
}
.terminal-bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 4px 10px;
}
.terminal-bar span{
  width:11px;height:11px;border-radius:50%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.35), 0 1px 1px rgba(0,0,0,0.15);
}
.terminal-bar span:nth-child(1){background:#FF5F57;}
.terminal-bar span:nth-child(2){background:#FEBC2E;}
.terminal-bar span:nth-child(3){background:#28C840;}
.terminal-bar .label{
  flex:1;
  text-align:center;
  margin-left:-33px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--muted);
}
.terminal-screen{
  position:relative;
  background:#12151A;
  border-radius:var(--radius-sm);
  box-shadow:inset 3px 3px 8px rgba(0,0,0,0.55), inset -1px -1px 3px rgba(255,255,255,0.03);
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  padding:16px 14px 18px;
  min-height:130px;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:hidden;
}
.terminal-screen::after{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  pointer-events:none;
}
.terminal-screen .line{display:block;min-height:1.5em;}
.prompt-sym{
  color:var(--mint);
  font-weight:600;
  text-shadow:0 0 5px rgba(61,220,151,0.65);
}
.cmd-text{
  color:#F1F3F5;
  text-shadow:0 0 2px rgba(255,255,255,0.12);
}
.output-text{
  display:block;
  color:#7C8592;
  padding-left:1px;
}
.cursor{
  display:inline-block;
  width:7px;height:14px;
  background:var(--mint);
  box-shadow:0 0 6px rgba(61,220,151,0.8);
  margin-left:2px;
  vertical-align:-2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

/* ============================================================
   WhatsApp FAB (homepage only)
   ============================================================ */
.fab-whatsapp{
  position:fixed;
  right:20px;bottom:20px;
  width:58px;height:58px;
  border-radius:50%;
  background:#25D366;
  display:none;
  align-items:center;justify-content:center;
  box-shadow:6px 6px 14px rgba(37,211,102,0.4), -4px -4px 10px var(--shadow-l);
  z-index:60;
  transition:transform .15s ease;
}
.fab-whatsapp:active{transform:scale(.94);}
.fab-whatsapp svg{width:28px;height:28px;}

/* ============================================================
   App description
   ============================================================ */
.app-desc{
  color:var(--muted);
  font-size:15px;
  margin:0 6px 32px;
}

/* ============================================================
   Buy card
   ============================================================ */
.buy-card{
  padding:14px;
  margin-bottom:40px;
}
.buy-card .buy-banner{
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radius-md);
  background:var(--surface-2);
  margin-bottom:16px;
}
.buy-card .buy-body{padding:0 4px 4px;}
.buy-card h2{font-size:20px;margin-bottom:8px;}
.buy-card .buy-desc{color:var(--muted);font-size:14.5px;margin-bottom:18px;}
.buy-card .buy-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.buy-card .price{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;color:var(--amber);font-weight:600;
}
.buy-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:13px 26px;
  border-radius:var(--radius-pill);
  font-weight:600;font-size:14.5px;
  cursor:pointer;
  box-shadow:5px 5px 12px rgba(76,110,245,0.35), -3px -3px 8px var(--shadow-l);
  transition:transform .15s ease;
}
.buy-btn:active{transform:scale(.97);}

/* ============================================================
   Feature grid
   ============================================================ */
.section-title{
  font-size:13px;color:var(--muted);
  margin:0 6px 14px;
}
.feature-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px;margin-bottom:36px;
}
.feature-card{
  padding:18px 14px;
  text-align:center;
}
.feature-card .emoji-badge{
  width:46px;height:46px;
  margin:0 auto 10px;
  font-size:20px;
}
.feature-card .text{font-size:13.5px;color:var(--text);}

/* ============================================================
   Contact section
   ============================================================ */
.contact-list{
  display:flex;flex-direction:column;gap:12px;
  margin-bottom:20px;
}
.contact-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;
}
.contact-item .icon-badge{
  width:40px;height:40px;
  overflow:hidden;
}
.contact-item .icon-badge img{width:22px;height:22px;object-fit:contain;}
.contact-item .name{font-size:14.5px;flex:1;}
.contact-item .arrow{
  width:30px;height:30px;
  font-size:14px;color:var(--muted);
}

/* ============================================================
   Empty / placeholder
   ============================================================ */
.placeholder-text{color:var(--muted);font-size:13.5px;padding:4px 6px;}

/* ============================================================
   Admin panel
   ============================================================ */
.admin-shell{max-width:640px;margin:0 auto;padding:24px 18px 80px;}
.admin-login{max-width:340px;margin:16vh auto 0;padding:0 18px;}
.admin-login .login-card{
  padding:28px 24px;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:8px 8px 16px var(--shadow-d), -8px -8px 16px var(--shadow-l);
}
.admin-login h1{font-size:21px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px;}
.field input, .field textarea{
  width:100%;
  border:none;
  color:var(--text);
  padding:12px 14px;
  font-size:14px;
  background:var(--surface-2);
  border-radius:var(--radius-sm);
  box-shadow:inset 3px 3px 7px var(--shadow-d), inset -3px -3px 7px var(--shadow-l);
}
.field textarea{min-height:90px;resize:vertical;font-family:'JetBrains Mono',monospace;font-size:13px;}

.panel-block{
  padding:20px;margin-bottom:22px;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:8px 8px 16px var(--shadow-d), -8px -8px 16px var(--shadow-l);
}
.panel-block h2{font-size:16px;margin-bottom:16px;}

.btn{
  border:none;
  padding:11px 20px;
  border-radius:var(--radius-pill);
  font-weight:600;font-size:13.5px;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
  box-shadow:5px 5px 11px rgba(76,110,245,0.3), -3px -3px 7px var(--shadow-l);
  transition:transform .15s ease;
}
.btn:active{transform:scale(.97);}
.btn.secondary{
  background:var(--surface);
  color:var(--text);
  box-shadow:5px 5px 11px var(--shadow-d), -5px -5px 11px var(--shadow-l);
}
.btn.danger{
  background:var(--surface);
  color:var(--danger);
  padding:7px 14px;font-size:12.5px;
  box-shadow:3px 3px 7px var(--shadow-d), -3px -3px 7px var(--shadow-l);
}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.list-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:10px;
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:5px 5px 11px var(--shadow-d), -5px -5px 11px var(--shadow-l);
}
.list-item .grow{flex:1;min-width:0;}
.list-item .grow .t1{font-size:14px;}
.list-item .grow .t2{font-size:12px;color:var(--muted);word-break:break-all;}
.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.top-bar h1{font-size:19px;margin:0;}
.status-msg{
  font-size:13px;padding:12px 14px;
  border-radius:var(--radius-sm);margin-bottom:14px;
}
.status-msg.ok{background:rgba(61,220,151,0.14);color:#1E9E6C;}
.status-msg.err{background:rgba(232,99,95,0.14);color:var(--danger);}
.tag{font-size:11px;color:var(--muted);}

/* buyingapp.html specific */
.back-link{
  display:inline-flex;align-items:center;
  margin:0 0 6px;padding:9px 16px;
  font-size:13.5px;color:var(--text);
  border-radius:var(--radius-pill);
}
.purchase-block{padding:18px;margin-top:14px;}
.purchase-block h2{font-size:15px;color:var(--muted);margin-bottom:14px;font-weight:500;}