/* DINGO polish layer - loaded last. Neater headers, compact APK pill, modern surfaces, 3s rolling loader. */

/* ---------- page loader: rolling animation, 3 seconds ---------- */
#pgl{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#fff;
  animation:pglOut .45s ease 3s forwards!important}
#pgl .pgl-in{display:grid;justify-items:center;gap:18px}
#pgl .pgl-ring{position:relative;width:64px;height:64px}
#pgl .pgl-ring::before,#pgl .pgl-ring::after{content:"";position:absolute;inset:0;border-radius:50%}
#pgl .pgl-ring::before{border:5px solid #FDE3E4}
#pgl .pgl-ring::after{border:5px solid transparent;border-top-color:#E3000F;border-right-color:#E3000F;
  animation:pglRoll .8s linear infinite!important}
#pgl .pgl-ball{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:linear-gradient(135deg,#FF3B3B,#B0000B);box-shadow:0 6px 14px -4px rgba(200,0,15,.6);
  animation:pglPulse 1.2s ease-in-out infinite!important}
#pgl .pgl-name{font:800 15px var(--display,system-ui);letter-spacing:.28em;color:#14161C;padding-left:.28em}
#pgl .pgl-bar{width:120px;height:4px;border-radius:4px;background:#F3E6E6;overflow:hidden}
#pgl .pgl-bar i{display:block;height:100%;width:100%;border-radius:4px;background:linear-gradient(90deg,#FF3B3B,#E3000F);
  transform:scaleX(0);transform-origin:left;animation:pglFill 3s linear forwards!important}
@keyframes pglRoll{to{transform:rotate(360deg)}}
@keyframes pglPulse{0%,100%{transform:scale(.8)}50%{transform:scale(1)}}
@keyframes pglFill{to{transform:scaleX(1)}}
@keyframes pglOut{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){#pgl .pgl-ring::after{animation-duration:1.6s}}

/* ---------- top header: brand left, compact APK pill right ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 16px;
  background:rgba(255,255,255,.92);border-bottom:1px solid #F0F0F3;
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.topbar .brand{display:flex;align-items:center;gap:10px;min-width:0}
.topbar .brand .logo-img{height:30px;width:auto;flex:none}
.topbar .brand strong{font:800 16px/1 var(--display);letter-spacing:.1em;color:#14161C}
.topbar .tb-r{display:flex;align-items:center;flex:none}
.topbar .apk{height:30px;padding:0 11px;gap:5px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 6px 12px -8px rgba(200,0,15,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.topbar .apk .ic{width:14px;height:14px}

/* ---------- inner page header: centred title, round back button ---------- */
.backbar{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;min-height:56px;padding:8px 14px;
  background:rgba(255,255,255,.92);border-bottom:1px solid #F0F0F3;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.backbar a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#F5F6F8;color:#14161C;
  transition:background .15s,transform .15s}
.backbar a:active{transform:scale(.94);background:#ECEDF1}
.backbar h1{margin:0;font:800 17px/1.2 var(--display);letter-spacing:-.01em;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- modern, tidy surfaces ---------- */
.page{padding:14px 14px 18px;gap:12px}
.card{border-radius:20px;border:1px solid #F0F0F3;box-shadow:0 1px 2px rgba(20,22,28,.04),0 10px 28px -18px rgba(20,22,28,.18)}
.banner{border-radius:22px}
.btn{border-radius:12px;font-weight:800;transition:transform .12s,filter .12s}
.btn:active{transform:scale(.97);filter:brightness(.96)}
input,select,textarea{border-radius:12px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(227,0,15,.25);outline-offset:1px}
table{border-collapse:collapse;width:100%}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body:not(.pf):not(.reg) .topbar,
  :root:not([data-theme="light"]) body:not(.pf):not(.reg) .backbar{background:rgba(12,12,16,.92);border-bottom-color:#26262E}
  :root:not([data-theme="light"]) body:not(.pf):not(.reg) .topbar .brand strong{color:#F4F4F6}
  :root:not([data-theme="light"]) body:not(.pf):not(.reg) .backbar a{background:#1E1E25;color:#F4F4F6}
  :root:not([data-theme="light"]) body:not(.pf):not(.reg) .card{border-color:#26262E}
  :root:not([data-theme="light"]) #pgl{background:#0C0C10}
  :root:not([data-theme="light"]) #pgl .pgl-name{color:#F4F4F6}
  :root:not([data-theme="light"]) #pgl .pgl-ring::before{border-color:#2A1213}
  :root:not([data-theme="light"]) #pgl .pgl-bar{background:#26262E}
}

/* JS failsafe hides the loader even if animations are disabled elsewhere */
#pgl.pgl-gone{opacity:0!important;visibility:hidden!important;pointer-events:none!important;display:none!important}

/* ---------- signup success page ---------- */
.ok-badge{width:84px;height:84px;margin:6px auto 18px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#27C46B,#0E9A52);box-shadow:0 0 0 10px #E8F8F0,0 16px 30px -12px rgba(14,154,82,.7)}
.ok-badge .ic{stroke-width:2.6}
.ok-steps{list-style:none;display:grid;gap:10px;margin:6px 0 20px;padding:0}
.ok-steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#F7F8FA;border:1px solid #EDEDF0;font-weight:600;color:#14161C}
.ok-steps b{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#E3000F;color:#fff;font-size:13px}
.ok-dl{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#fff}
.ok-note{margin-top:14px;text-align:center;font-size:12.5px;line-height:1.5;color:#737A87}