/* ============================================================
   Pushpa FREE HOSTING — warm bronze / cream theme
   Palette extracted from the brand mascot (logo.png):
   cream ground, bronze-gold accents, warm brown text.
   Anti-slop: ONE accent used sparingly, gradients only on the
   brand wordmark + primary CTA + hero ring. Depth from soft
   warm shadows + 1px hairlines, never neon glow.
   ============================================================ */

:root {
  /* ground + surfaces (warm cream) */
  --bg:        #EFE3D2;
  --bg-2:      #E7D9C4;
  --surface:   #FBF5EC;
  --surface-2: #F4EADA;
  --surface-3: #EADCC5;
  --hair:      rgba(85, 60, 38, 0.12);
  --hair-2:    rgba(85, 60, 38, 0.20);

  /* bronze accent */
  --accent:    #A9743F;
  --accent-2:  #8A5A2E;
  --gold:      #C79A5B;
  --gold-2:    #E6C88A;

  /* status (warm) */
  --ok:      #6E9A4E;
  --warn:    #CE8A38;
  --danger:  #BE5546;

  /* text (warm brown) */
  --text:    #352517;
  --text-2:  #7C6446;
  --text-3:  #A08A6E;

  /* shadows (warm-tinted, layered) */
  --sh-sm: 0 1px 2px rgba(85,60,38,0.08);
  --sh:    0 2px 6px rgba(85,60,38,0.08), 0 1px 2px rgba(85,60,38,0.06);
  --sh-md: 0 8px 20px -10px rgba(85,60,38,0.28), 0 2px 6px rgba(85,60,38,0.08);
  --sh-lg: 0 20px 44px -18px rgba(85,60,38,0.35), 0 6px 14px -8px rgba(85,60,38,0.18);

  /* spacing (8px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* radius */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast:160ms; --med:240ms; --slow:380ms;

  --appw: 480px;
  --nav-h: 68px;
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html, body {
  height:100%;
  background: var(--bg);
  color: var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* desktop: centre the app, warm ambient glows behind */
body {
  display:flex; justify-content:center; min-height:100vh;
  background:
    radial-gradient(55% 40% at 50% -6%, rgba(199,154,91,0.16), transparent 68%),
    radial-gradient(45% 40% at 90% 110%, rgba(169,116,63,0.12), transparent 70%),
    var(--bg);
}

/* ---------- app shell ---------- */
#app {
  position:relative; width:100%; max-width:var(--appw); min-height:100vh;
  background:var(--bg); display:flex; flex-direction:column;
  border-left:1px solid var(--hair); border-right:1px solid var(--hair); overflow:hidden;
}
@media (max-width:500px){ #app{border:none;} body{background:var(--bg);} }

.screen-scroll {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding: var(--s4) var(--s4) calc(var(--nav-h) + var(--s5));
  scrollbar-width:none;
}
.screen-scroll::-webkit-scrollbar{ display:none; }
.screen{ animation: screenIn var(--med) var(--ease) both; }
@keyframes screenIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- typography ---------- */
.brand {
  font-weight:800; letter-spacing:0.02em;
  background:linear-gradient(120deg, var(--accent-2) 0%, var(--gold) 60%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.h1{ font-size:25px; font-weight:800; letter-spacing:-0.02em; }
.h2{ font-size:18px; font-weight:750; letter-spacing:-0.01em; }
.sub{ color:var(--text-2); font-size:14px; }
.mono{ font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }

/* ---------- app header ---------- */
.appbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(251,245,236,0.9), rgba(251,245,236,0));
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:15;
}
.brandbox{ display:flex; align-items:center; gap:10px; line-height:1.1; }
.brandbox .logo{ width:38px; height:38px; border-radius:12px; box-shadow:var(--sh-md); flex:none; }
.appbar .wordmark{ font-size:18px; }
.appbar .tag{ font-size:9.5px; letter-spacing:0.2em; color:var(--text-2); font-weight:700; }
.abright{ display:flex; align-items:center; gap:8px; }
.langbtn{
  background:var(--surface-2); border:1px solid var(--hair-2); color:var(--text);
  border-radius:99px; padding:6px 11px; font-size:12px; font-weight:700; cursor:pointer;
  font-family:inherit; box-shadow:var(--sh-sm);
}
.langbtn:active{ transform:scale(0.96); }

/* ---------- card ---------- */
.card{
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:var(--s4); position:relative; box-shadow:var(--sh);
}
.card + .card{ margin-top:var(--s3); }
.card-title{ display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s3); }
.center{ text-align:center; }

/* ---------- uptime hero (emotional core) ---------- */
.hero{
  border:1px solid var(--hair-2); border-radius:var(--r-xl); padding:var(--s5);
  position:relative; overflow:hidden; box-shadow:var(--sh-md);
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(230,200,138,0.35), transparent 60%),
    linear-gradient(180deg, #FCF7EF 0%, #F3E7D3 100%);
}
.hero::after{
  content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px;
  border-radius:50%; background:
    radial-gradient(circle, rgba(199,154,91,0.28), transparent 62%);
  pointer-events:none;
}
.hero .bot-name{ display:flex; align-items:center; gap:var(--s2); font-weight:750; font-size:15px; }
.uptime-val{ font-size:46px; font-weight:800; letter-spacing:-0.03em; line-height:1; margin:var(--s3) 0 var(--s1); color:var(--accent-2); }
.uptime-bar{ height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:var(--s4); box-shadow:inset 0 1px 2px rgba(85,60,38,0.12); }
.uptime-bar > span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--gold), var(--accent)); transition:width 700ms var(--ease); }
.uptime-meta{ display:flex; justify-content:space-between; margin-top:var(--s2); font-size:12px; color:var(--text-2); font-weight:600; }
.stops-note{ margin-top:var(--s2); font-size:11.5px; line-height:1.45; color:var(--text-2); opacity:.9; text-align:center; }
.card .stops-note{ margin-top:var(--s3); padding-top:var(--s2); border-top:1px dashed rgba(124,100,70,.25); }

/* ---------- status dot ---------- */
.dot{ width:9px; height:9px; border-radius:99px; background:var(--text-3); flex:none; }
.dot.run{ background:var(--ok); animation:pulse 2.2s var(--ease) infinite; }
.dot.stop{ background:var(--text-3); }
.dot.warn{ background:var(--warn); }
.dot.starting{ background:var(--warn); animation:pulse 1.1s var(--ease) infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(110,154,78,0.5); }
  70%{ box-shadow:0 0 0 8px rgba(110,154,78,0); }
  100%{ box-shadow:0 0 0 0 rgba(110,154,78,0); }
}

/* ---------- stat grid ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-top:var(--s3); }
.stat{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md); padding:var(--s3); text-align:center; box-shadow:var(--sh-sm); }
.stat .v{ font-size:22px; font-weight:800; letter-spacing:-0.02em; color:var(--accent-2); }
.stat .l{ font-size:11px; color:var(--text-2); margin-top:2px; font-weight:600; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; padding:14px var(--s4); border-radius:var(--r-md); font-size:15px; font-weight:700;
  border:1px solid transparent; cursor:pointer; user-select:none; font-family:inherit;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast), background var(--fast);
}
.btn:active{ transform:scale(0.97); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn-primary{
  color:#FCF7EF; background:linear-gradient(120deg, var(--accent-2) 0%, var(--accent) 55%, var(--gold) 130%);
  box-shadow:0 8px 18px -8px rgba(138,90,46,0.6), var(--sh-sm);
}
.btn-ghost{ background:var(--surface-2); color:var(--text); border-color:var(--hair-2); box-shadow:var(--sh-sm); }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-ok{ background:rgba(110,154,78,0.14); color:#4d7233; border-color:rgba(110,154,78,0.32); }
.btn-danger{ background:rgba(190,85,70,0.1); color:#a2412f; border-color:rgba(190,85,70,0.26); }
.btn-sm{ padding:9px 12px; font-size:13px; width:auto; }
.btn[disabled]{ opacity:0.45; pointer-events:none; }

/* ---------- chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:0.02em;
  padding:4px 9px; border-radius:99px; border:1px solid var(--hair-2); color:var(--text-2); background:var(--surface-2);
}
.chip.acc{ color:var(--accent-2); border-color:rgba(169,116,63,0.34); background:rgba(199,154,91,0.14); }
.chip.ok{ color:#4d7233; border-color:rgba(110,154,78,0.32); background:rgba(110,154,78,0.12); }
.chip.warn{ color:#96601f; border-color:rgba(206,138,56,0.32); background:rgba(206,138,56,0.12); }
.chip.py{ color:#8a5a2e; border-color:rgba(138,90,46,0.3); background:rgba(199,154,91,0.14); }
.chip.js{ color:#6b7d3a; border-color:rgba(107,125,58,0.3); background:rgba(107,125,58,0.12); }

/* ---------- section heading ---------- */
.sec-h{ display:flex; align-items:center; justify-content:space-between; margin:var(--s5) 0 var(--s3); }
.sec-h:first-child{ margin-top:0; }

/* ---------- bot card ---------- */
.bot{ display:flex; align-items:center; gap:var(--s3); }
.bot .avatar{ width:44px; height:44px; border-radius:var(--r-md); flex:none; display:grid; place-items:center; font-size:19px; background:var(--surface-2); border:1px solid var(--hair-2); box-shadow:var(--sh-sm); }
.bot .meta{ flex:1; min-width:0; }
.bot .meta .nm{ font-weight:750; font-size:15px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bot .meta .rt{ font-size:12px; color:var(--text-2); margin-top:2px; }
.bot-actions{ display:flex; gap:var(--s2); margin-top:var(--s3); }
.ram{ height:5px; background:var(--surface-3); border-radius:99px; overflow:hidden; margin-top:8px; }
.ram > span{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--accent)); }

/* ---------- ad slots ---------- */
.ad-slots{ display:flex; gap:var(--s3); justify-content:center; margin:var(--s4) 0; }
.ad-slot{
  width:64px; height:64px; border-radius:var(--r-lg); border:1.5px dashed var(--hair-2);
  background:var(--surface); display:grid; place-items:center; font-size:24px; color:var(--text-3);
  transition:all var(--med) var(--ease); box-shadow:var(--sh-sm);
}
.ad-slot.done{ border-style:solid; border-color:rgba(110,154,78,0.4); background:rgba(110,154,78,0.12); color:#4d7233; animation:pop var(--med) var(--ease); }
@keyframes pop{ from{ transform:scale(0.7); opacity:0;} to{ transform:scale(1); opacity:1;} }

/* ---------- rows ---------- */
.row{ display:flex; align-items:center; justify-content:space-between; padding:var(--s3) 0; border-bottom:1px solid var(--hair); }
.row:last-child{ border-bottom:none; }
.row .k{ color:var(--text-2); font-size:14px; }
.row .v{ font-weight:750; }

/* ---------- inputs ---------- */
.field{ margin-bottom:var(--s3); }
.field label{ display:block; font-size:12px; color:var(--text-2); margin-bottom:6px; font-weight:700; }
.input, textarea.input, select.input{
  width:100%; background:var(--surface-2); border:1px solid var(--hair-2); border-radius:var(--r-md);
  padding:12px var(--s3); color:var(--text); font-size:15px; font-family:inherit; transition:border-color var(--fast), box-shadow var(--fast);
  box-shadow:inset 0 1px 2px rgba(85,60,38,0.05);
}
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(169,116,63,0.15); }
textarea.input{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; resize:vertical; min-height:120px; line-height:1.5; }

/* ---------- empty state ---------- */
.empty{ text-align:center; padding:var(--s7) var(--s4); color:var(--text-2); }
.empty .ic{ font-size:46px; margin-bottom:var(--s3); }

/* ---------- referral strip ---------- */
.strip{
  display:flex; align-items:center; gap:var(--s3); margin-top:var(--s3); cursor:pointer;
  background:linear-gradient(120deg, rgba(230,200,138,0.28), rgba(199,154,91,0.16));
  border:1px solid rgba(169,116,63,0.28); border-radius:var(--r-lg); padding:var(--s3) var(--s4);
  box-shadow:var(--sh-sm); transition:transform var(--fast) var(--ease);
}
.strip:active{ transform:scale(0.99); }
.strip .ic{ font-size:22px; }
.strip .tx{ flex:1; font-size:13px; color:var(--text-2); }
.strip .tx b{ display:block; font-size:14px; color:var(--accent-2); }

/* ---------- QR ---------- */
.qr-box{ background:#fff; border-radius:var(--r-md); padding:var(--s3); width:200px; height:200px; margin:0 auto var(--s3); display:grid; place-items:center; box-shadow:var(--sh-md); border:1px solid var(--hair); }
.qr-box img{ width:100%; height:100%; object-fit:contain; }

/* ---------- bottom nav ---------- */
.nav{
  position:absolute; left:0; right:0; bottom:0; height:var(--nav-h);
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:rgba(251,245,236,0.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--hair); z-index:20; padding-bottom:env(safe-area-inset-bottom);
}
.nav button{
  background:none; border:none; cursor:pointer; color:var(--text-3);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10px; font-weight:700; font-family:inherit; transition:color var(--fast);
}
.nav button .ni{ font-size:20px; line-height:1; transition:transform var(--fast) var(--ease); }
.nav button.active{ color:var(--accent-2); }
.nav button.active .ni{ transform:translateY(-2px); }

/* ---------- toast ---------- */
#toast{
  position:fixed; bottom:calc(var(--nav-h) + 16px); left:50%; transform:translateX(-50%) translateY(20px);
  background:#352517; color:#F4EADA; padding:11px 18px; border-radius:99px; font-size:13px; font-weight:600;
  opacity:0; pointer-events:none; transition:all var(--med) var(--ease); z-index:100;
  box-shadow:var(--sh-lg); white-space:nowrap;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- segmented ---------- */
.seg{ display:flex; background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:3px; gap:3px; }
.seg button{ flex:1; background:none; border:none; color:var(--text-2); font-weight:700; font-size:13px; padding:9px; border-radius:11px; cursor:pointer; font-family:inherit; transition:all var(--fast); }
.seg button.active{ background:var(--surface); color:var(--accent-2); box-shadow:var(--sh-sm); }

/* ---------- misc ---------- */
.hero-mascot{ display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s4); }
.hero-mascot .mascot{
  width:72px; height:72px; border-radius:22px; flex:none;
  box-shadow:0 10px 26px -10px rgba(138,90,46,0.55), var(--sh);
  border:2px solid rgba(255,255,255,0.6);
}
.greet{ margin-bottom:0; }
.price{ font-size:30px; font-weight:800; margin:var(--s3) 0; letter-spacing:-0.02em; color:var(--accent-2); }
.price .per{ font-size:14px; font-weight:600; color:var(--text-2); margin-left:4px; }
.prem{ border-color:rgba(169,116,63,0.32); background:linear-gradient(180deg,#FCF7EF,#F5EAD8); }
.gift{ font-size:40px; margin-bottom:8px; }
.linkbox{ background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:var(--s3); }
.linkbox .mono{ font-size:12px; word-break:break-all; color:var(--accent-2); }
.deploy{ margin-top:var(--s5); }
.brandbox .logo{ box-shadow:0 4px 12px -4px rgba(138,90,46,0.4); }

/* modal */
.modal{ position:fixed; inset:0; background:rgba(53,37,23,0.5); backdrop-filter:blur(3px); z-index:200; display:flex; align-items:flex-end; justify-content:center; animation:fadeIn var(--fast) var(--ease); }
.modal-box{ width:100%; max-width:var(--appw); background:var(--bg); border:1px solid var(--hair-2); border-bottom:none; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:var(--s4) var(--s4) var(--s6); max-height:74vh; overflow-y:auto; animation:slideUp var(--med) var(--ease); box-shadow:var(--sh-lg); }
.modal-h{ display:flex; align-items:center; justify-content:space-between; font-weight:750; font-size:16px; margin-bottom:var(--s4); }
.modal-h .x{ background:var(--surface-2); border:1px solid var(--hair-2); color:var(--text); width:32px; height:32px; border-radius:99px; cursor:pointer; font-size:14px; }
.logs{ background:#241a10; border:1px solid rgba(0,0,0,0.2); border-radius:var(--r-md); padding:var(--s3); font-size:11px; line-height:1.5; color:#d8c9a8; min-height:200px; max-height:50vh; overflow-y:auto; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,Menlo,Consolas,monospace; }
.langlist{ display:flex; flex-direction:column; gap:8px; }
.langopt{ background:var(--surface-2); border:1px solid var(--hair-2); color:var(--text); border-radius:var(--r-md); padding:14px var(--s4); font-size:15px; font-weight:700; cursor:pointer; text-align:left; font-family:inherit; }
.langopt.active{ border-color:var(--accent); color:var(--accent-2); background:rgba(199,154,91,0.16); }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes slideUp{ from{ transform:translateY(30px); opacity:0;} to{ transform:translateY(0); opacity:1;} }

/* skeleton */
.skel{ background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:sk 1.3s infinite; border-radius:var(--r-md); }
@keyframes sk{ from{background-position:200% 0;} to{background-position:-200% 0;} }

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


/* drag & drop upload */
.drop{ border:2px dashed var(--hair-2); border-radius:var(--r-md); background:var(--surface-2); padding:var(--s5) var(--s4); text-align:center; cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease); }
.drop.small{ padding:var(--s4); }
.drop.over{ border-color:var(--accent); background:rgba(199,154,91,0.14); }
.drop-ic{ font-size:26px; margin-bottom:6px; }
.drop-tx{ font-size:13px; line-height:1.5; }
.drop-tx b{ font-weight:700; }
.drop-tx .sub{ font-size:11px; opacity:.7; }
.filechip{ display:flex; align-items:center; gap:8px; margin-top:8px; background:var(--surface-2); border:1px solid var(--hair-2); border-radius:var(--r-md); padding:9px 12px; font-size:12px; }
.filechip b{ font-weight:700; word-break:break-all; }
.filechip .x{ margin-left:auto; background:var(--surface-3); border:1px solid var(--hair-2); color:var(--text); width:22px; height:22px; border-radius:99px; cursor:pointer; font-size:11px; flex:none; }

/* ---------- real Telegram account avatar ---------- */
.avatar-img{
  border-radius:50%; object-fit:cover; flex:none; display:block;
  border:3px solid rgba(255,255,255,0.75);
  box-shadow:0 10px 26px -10px rgba(138,90,46,0.55), var(--sh);
  background:var(--surface-2);
}
.avatar-fallback{
  border-radius:50%; flex:none; display:grid; place-items:center; font-weight:800; color:#FCF7EF;
  background:linear-gradient(135deg, var(--accent-2) 0%, var(--gold) 100%);
  border:3px solid rgba(255,255,255,0.75);
  box-shadow:0 10px 26px -10px rgba(138,90,46,0.55), var(--sh);
  letter-spacing:-0.02em;
}

/* ---------- first-time congratulations popup ---------- */
.congrats-pop{ text-align:center; padding:var(--s2) 0 0; }
.congrats-pop .conf{ font-size:56px; line-height:1; margin-bottom:var(--s2); animation:confBounce 900ms var(--ease); }
.congrats-pop .gift{ font-size:44px; margin:var(--s3) 0 var(--s1); animation:confBounce 900ms var(--ease) 120ms both; }
.congrats-pop .price{ font-size:38px; margin:var(--s1) 0 var(--s4); }
@keyframes confBounce{
  0%{ transform:scale(0.4) rotate(-12deg); opacity:0; }
  60%{ transform:scale(1.15) rotate(4deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}

/* ---------- phone-first polish ---------- */
@media (max-width:500px){
  :root{ --appw:100%; }
  .h1{ font-size:23px; }
  .uptime-val{ font-size:42px; }
  .btn{ padding:15px var(--s4); }         /* bigger touch targets on phones */
  /* language / any bottom-sheet modal: force full width (flex % width was collapsing) */
  .modal{ align-items:flex-end; }
  .modal-box{ flex:0 0 100%; width:100%; max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0; padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom)); }
  .screen-scroll{ padding-top:calc(var(--s4) + env(safe-area-inset-top)); }
}