/* ====== App Theme (Dark · 2025 refresh) ====== */
:root{
  --bg:#0b1220; --elev:#111827; --elev2:#0f172a; --border:#1f2937;
  --txt:#e5e7eb; --muted:#9ca3af; --acc:#f59e0b; --danger:#ef4444;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --topbar-h:56px; --tabbar-h:64px;
  --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
  --ring: 0 0 0 2px rgba(245,158,11,.25);
  --card-grad: linear-gradient(180deg, rgba(17,24,39,.82), rgba(17,24,39,.96));
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
  letter-spacing:.1px; line-height:1.25;
  font-size:clamp(15px,1.6vw,16px);
}

/* Optional wrapper if you already use it */
.wrap{
  min-height:100dvh;
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  align-content:start;
}

a{ color:#93c5fd; text-decoration:none }
.muted{ color:var(--muted) }

/* ====== Top App Bar ====== */
.top{
  position:sticky; top:0; z-index:40;
  height:calc(var(--topbar-h) + var(--safe-top));
  padding-top:var(--safe-top);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 14px;
  background:linear-gradient(0deg,rgba(11,18,32,.70),rgba(11,18,32,.92));
  backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06);
}
.top .title{ font-weight:900; letter-spacing:.2px; font-size:16px; opacity:.96 }
.top .actions a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  transition:transform .08s ease, background .2s ease;
}
.top .actions a:active{ background:rgba(255,255,255,.06); transform:translateY(1px) }

/* ====== Page Container (force mobile on PC) ====== */
.container{
  width:100%; max-width:440px;
  margin:0 auto; padding:16px;
  padding-bottom:calc(var(--tabbar-h) + 90px + var(--safe-bottom));
}

/* ====== Cards ====== */
.card{
  background:var(--card-grad);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px; padding:16px; margin:12px 0; box-shadow:var(--shadow);
}
.card h1,.card h2{
  margin:.15em 0 .5em; letter-spacing:.2px;
  background:linear-gradient(135deg,#fff,#ffe4a6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 20px rgba(245,158,11,.08);
}

/* ====== Buttons ====== */
.btn{
  position:relative; overflow:hidden; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(245,158,11,.95), #d97706),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  color:#111; font-weight:900; letter-spacing:.25px;
  box-shadow:0 10px 24px rgba(245,158,11,.22);
  transition:transform .08s ease, filter .2s ease;
}
.btn.block{ display:flex; width:100% }
.btn.ghost{
  background:rgba(255,255,255,.03);
  color:var(--txt);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
.btn.danger{
  background:
    linear-gradient(135deg, var(--danger), #b91c1c),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  color:#fff;
}
.btn:active{ transform:translateY(1px) }
.row{ display:flex; gap:10px; flex-wrap:wrap }

/* Ripple tap effect */
.btn::after{
  content:""; position:absolute; inset:auto; width:0; height:0; border-radius:999px;
  background:rgba(255,255,255,.35); transform:translate(-50%,-50%); pointer-events:none;
  transition:width .35s ease,height .35s ease,opacity .45s ease;
}
.btn.rippling::after{ width:240px; height:240px; opacity:0 }

/* ====== Inputs ====== */
label{ display:block; font-size:13px; color:var(--muted); margin:6px 2px }
input,select,textarea{
  width:100%; padding:13px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.98));
  color:var(--txt); font-size:16px; transition: box-shadow .15s ease, border-color .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none; box-shadow:var(--ring);
  border-color:rgba(245,158,11,.35);
}

/* ====== Bottom Tab Bar ====== */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom:var(--safe-bottom);
  background:linear-gradient(180deg,rgba(11,18,32,.55),rgba(11,18,32,.92));
  backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px;
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--muted); font-size:12px; padding:6px 0; gap:2px;
}
.tabbar a .ico{ font-size:18px; line-height:18px; margin-bottom:2px }
.tabbar a.active{ color:#fde68a }

/* ====== Toast ====== */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + 24px + var(--safe-bottom));
  transform:translateX(-50%) translateY(6px);
  background:rgba(13,21,38,.92); color:var(--txt);
  border:1px solid rgba(255,255,255,.08); padding:12px 14px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px) }

/* ====== Auth Screen ====== */
.auth-screen{
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(245,158,11,.08), transparent 60%),
    radial-gradient(40% 35% at 10% 20%, rgba(96,165,250,.10), transparent 60%),
    var(--bg);
}
.auth-card{
  max-width:440px; margin:18px auto; text-align:center;
  background:var(--card-grad); border:1px solid rgba(255,255,255,.07);
  border-radius:18px; backdrop-filter:blur(10px); box-shadow:var(--shadow);
}
.brand{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:12px }
.brand .logo{
  width:74px; height:74px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#0f172a,#0b1220);
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); font-size:34px;
}
.brand h1{ margin:.2em 0 0; font-size:22px; font-weight:800 }
.brand p{ margin:0 }
.form-v{ text-align:left; margin-top:10px }
.form-v .btn{ margin-top:10px }
.tiny{ font-size:12px; margin-top:10px }
.alert{
  background:#7f1d1d; color:#fecaca;
  border:1px solid #b91c1c; border-radius:12px; padding:10px 12px; margin:8px 0 12px;
}

/* ====== VIP CALL LOOK ====== */
.call-screen{
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(245,158,11,.1), transparent 60%),
    radial-gradient(40% 35% at 10% 20%, rgba(96,165,250,.12), transparent 60%),
    var(--bg);
}

.call-card,
.container .card:first-child{
  position:relative; text-align:center;
  background:var(--card-grad);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  padding:28px 16px 36px;
  overflow:hidden;
}

/* VIP glow pulse */
.call-card::before,
.container .card:first-child::before{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(closest-side, rgba(245,158,11,.22), transparent 70%);
  filter:blur(20px); animation:vipPulse 3s ease-in-out infinite; z-index:0;
}
@keyframes vipPulse{
  0%{ transform:scale(.95); opacity:.55 }
  50%{ transform:scale(1.05); opacity:.85 }
  100%{ transform:scale(.95); opacity:.55 }
}

/* Headline with animated dots */
.call-card h1,
.container .card:first-child h1{
  position:relative; z-index:2;
  font-size:24px; font-weight:900; letter-spacing:.3px;
  margin:.2em 0 .4em;
  background:linear-gradient(135deg,#fff,#ffe4a6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 20px rgba(245,158,11,.15);
}
.call-card h1::after,
.container .card:first-child h1::after{
  content:""; display:inline-block; width:1.6em; text-align:left;
  animation:dots 1.3s steps(4,end) infinite;
}
@keyframes dots{
  0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}
}

/* searching “breath” */
#status{ animation:softBreath 2.6s ease-in-out infinite }
@keyframes softBreath{
  0%,100%{ opacity:.9; text-shadow:0 0 10px rgba(245,158,11,.1) }
  50%{ opacity:1; text-shadow:0 0 18px rgba(245,158,11,.2) }
}
#peer{ font-size:14px; margin-top:8px; color:var(--muted) }

/* Hide audio UI */
audio#remoteAudio{ width:0; height:0; opacity:0 }

/* Sticky bottom bar for End button (uses #actions) */
#actions{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(11,18,32,.25), rgba(11,18,32,.9));
  backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.08);
}
#actions .btn.danger{
  background:linear-gradient(135deg,#ef4444,#b91c1c), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  color:#fff; font-size:16px; min-height:56px;
  box-shadow:0 10px 26px rgba(239,68,68,.25);
  border-radius:14px;
}
#actions .btn.danger:active{ transform:translateY(1px) }

/* ====== Ads: Banner (fixed bottom) ====== */
.ad-banner-fixed{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(11,18,32,.85), rgba(11,18,32,.98));
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:center; align-items:center;
}
.ad-banner-fixed iframe{ max-width:100% }

/* Extra bottom space on call screen if banner is present */
.call-screen .container{
  padding-bottom: calc(var(--tabbar-h) + 120px + var(--safe-bottom));
}

/* ====== Ads: Popup Modal (centered) ====== */
.ad-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; justify-content:center; align-items:center;
}
.ad-modal.hidden{ display:none }

.ad-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.7); backdrop-filter:blur(3px);
}

.ad-box{
  position:relative; z-index:1;
  background:var(--card-grad); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  padding:16px; width:90%; max-width:500px;
  animation:popIn .35s ease;
}

.ad-slot{ display:block; width:100%; overflow:hidden }
.ad-slot iframe, .ad-slot div{ max-width:100% }

.ad-close{
  position:absolute; top:8px; right:8px;
  background:#ff3333; color:#fff; border:0; border-radius:50%;
  width:32px; height:32px; font-size:18px; line-height:32px; text-align:center;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.4); transition:background .2s;
}
.ad-close:hover{ background:#cc0000 }

@keyframes popIn{
  from{ transform:scale(.8); opacity:0 }
  to{ transform:scale(1); opacity:1 }
}

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

 /* ===== bottom dock ad ===== */
    .ad-banner-fixed.ad-on-call{
      position:fixed; left:50%; transform:translateX(-50%);
      bottom:calc(12px + env(safe-area-inset-bottom));
      width:calc(min(100vw, var(--wrap-w)) - 32px);
      padding:12px 14px; border-radius:14px;
      background:linear-gradient(180deg, rgba(20,24,36,.92), rgba(12,15,24,.94));
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 18px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset;
      z-index:1000; animation:adSlideUp .25s ease-out;
    }
    .ad-banner-fixed.ad-on-call::before{
      content:"Advertisement"; position:absolute; top:-10px; left:14px;
      font-size:11px; font-weight:800; padding:4px 8px; border-radius:999px; color:#fff;
      background:linear-gradient(135deg, var(--brand1), var(--brand2));
      box-shadow:0 6px 14px rgba(255,71,126,.35);
    }
    @keyframes adSlideUp{from{transform:translate(-50%, 12px)} to{transform:translate(-50%, 0)}}
    .ad-banner-fixed.ad-on-call *{ color:#fff }
    .ad-banner-fixed.ad-on-call img,
    .ad-banner-fixed.ad-on-call iframe{max-width:100%; border-radius:10px; display:block}

    /* popup ad */
    .ad-modal.hidden{display:none}
    .ad-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); z-index:1100}
    .ad-sheet{
      position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
      width:min(560px, calc(100% - 24px));
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px; z-index:1110;
      box-shadow:0 24px 80px rgba(0,0,0,.75);
    }
    .ad-close{
      position:absolute; right:10px; top:10px; border:0; color:#fff; background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:6px 8px; cursor:pointer;
    }


/* ====== Keep phone feel on bigger screens ====== */
@media (min-width:700px){
  .container{ max-width:480px }
}


    :root{ --text:#fff; --muted:#b9bcc6; --border:rgba(255,255,255,.12);
           --brand1:#ff477e; --brand2:#ff9f45; --wrap-w:430px; --wrap-radius:22px; }
    *{box-sizing:border-box} html,body{height:100%}
    body{
      margin:0; color:var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      background:
        radial-gradient(120% 100% at 0% 0%, rgba(255,71,126,.12), transparent 60%),
        radial-gradient(120% 100% at 100% 0%, rgba(255,159,69,.10), transparent 60%),
        #0a0f1a;
      display:grid; place-items:center; overflow:hidden;
    }
    .app-wrap{width:min(100vw, var(--wrap-w)); min-height:100dvh; position:relative}
    .wrap-bg{position:fixed; inset:auto auto 0 50%; transform:translateX(-50%); top:0;
      width:min(100vw, var(--wrap-w)); height:100dvh; border-radius:var(--wrap-radius);
      pointer-events:none; z-index:0; background:linear-gradient(180deg, rgba(14,18,28,.85), rgba(10,13,22,.88));
      border:1px solid rgba(255,255,255,.06);
      box-shadow:0 30px 120px rgba(0,0,0,.85), 0 10px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset}
    .wrap-bg::before,.wrap-bg::after{content:""; position:absolute; top:10%; bottom:10%; width:40%;
      filter:blur(26px); opacity:.25; border-radius:50%}
    .wrap-bg::before{ left:-12%; background:radial-gradient(60% 60% at 50% 50%, rgba(255,71,126,.6), transparent 60%) }
    .wrap-bg::after{ right:-12%; background:radial-gradient(60% 60% at 50% 50%, rgba(255,159,69,.6), transparent 60%) }
    .app{position:relative; z-index:1; display:flex; flex-direction:column; height:100dvh;
         padding-bottom:max(12px, env(safe-area-inset-bottom)); min-height:0}
    header.top{position:sticky; top:0; z-index:30; margin:12px; padding:10px 12px; border-radius:16px;
      display:flex; align-items:center; gap:10px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.10); backdrop-filter: blur(22px) saturate(140%);
      box-shadow:0 8px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04)}
    .brand{font-weight:900; letter-spacing:.2px; font-size:16px; position:relative; padding-left:12px}
    .brand::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
      width:6px; height:70%; border-radius:6px; background:linear-gradient(180deg, var(--brand1), var(--brand2));
      box-shadow:0 0 18px rgba(255,71,126,.55)}
    .spacer{flex:1}
    a.icon-btn{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14); text-decoration:none; transition:transform .06s ease, filter .18s ease;
      box-shadow:0 6px 18px rgba(0,0,0,.35)}
    a.icon-btn:hover{filter:brightness(1.08)} a.icon-btn:active{transform:translateY(1px)}
    a.icon-btn svg{width:18px; height:18px; fill:#fff; opacity:.95}
    main.content{flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding:0 12px 12px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid var(--border);
      border-radius:20px; padding:16px; box-shadow:0 12px 36px rgba(0,0,0,.55); margin:8px 0}
    .offer-title{font-size:0; margin:0 0 6px 0}
    .offer-meta{color:var(--muted); font-size:12px; margin:8px 0 0 0}
    .offer-body{margin-top:10px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:14px; box-shadow:0 8px 26px rgba(0,0,0,.45)}
    .offer-body :is(h1,h2,h3){margin:0 0 .35em 0} .offer-body :is(p,ul,ol){line-height:1.55}
    .offer-body img{max-width:100%; height:auto; border-radius:10px} .offer-body a{color:#fff; text-decoration:underline}
    .not-found{text-align:center; padding:26px 18px}
    .nf-big{font-size:28px; font-weight:900; letter-spacing:.2px; margin:0 0 6px 0}
    .nf-muted{color:var(--muted); font-size:13px; margin:0 0 12px 0}
    .btn-home{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; font-weight:800; font-size:13px;
      background:linear-gradient(135deg, var(--brand1), var(--brand2)); color:#111; text-decoration:none;
      box-shadow:0 6px 18px rgba(255,71,126,.35), 0 4px 12px rgba(255,159,69,.22)}
    @media(max-width:480px){ .wrap-bg{width:100vw; border-radius:0} .app-wrap{width:100vw} }