*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#030b16;
  --panel:rgba(9,29,54,.76);
  --line:rgba(255,255,255,.12);
  --text:#f4f9ff;
  --muted:#9bb2ca;
  --blue:#168cff;
  --cyan:#6de5ff;
  --green:#64e8a7;
  --yellow:#ffc75f;
}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 12%,rgba(17,115,236,.23),transparent 28%),
    radial-gradient(circle at 88% 72%,rgba(10,211,235,.11),transparent 28%),
    linear-gradient(135deg,#020812,#071a31 58%,#06386d);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}
button,input{font:inherit}
.background-grid{
  position:fixed;inset:0;pointer-events:none;opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,black,transparent 93%);
}
.glow{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none}
.glow-left{width:400px;height:400px;left:-180px;top:-160px;background:#087dff;opacity:.3}
.glow-right{width:360px;height:360px;right:-130px;bottom:-170px;background:#00c6e5;opacity:.24}
.page{
  position:relative;z-index:2;
  width:min(1180px,calc(100% - 30px));
  min-height:100vh;margin:auto;
  display:flex;flex-direction:column;
}
.header{
  min-height:96px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:13px}
.brand-symbol,.app-logo{
  display:grid;place-items:center;font-weight:900;
  background:linear-gradient(135deg,#168cff,#76e5ff);
  box-shadow:0 15px 34px rgba(22,140,255,.32);
}
.brand-symbol{width:48px;height:48px;border-radius:15px;font-size:23px}
.brand strong,.brand small{display:block}
.brand strong{font-size:17px}
.brand small{margin-top:3px;color:var(--muted);font-size:12px}
.security{
  display:flex;align-items:center;gap:9px;padding:10px 14px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.055);color:#c9def2;font-size:12px;
  backdrop-filter:blur(18px);
}
.security span{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.initial-screen{flex:1;display:grid;place-items:center;padding:35px 0 60px}
.consult-card{
  width:min(520px,100%);padding:46px;
  border:1px solid var(--line);border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  box-shadow:0 38px 110px rgba(0,0,0,.42);
  backdrop-filter:blur(24px);
}
.tag,.located{
  display:inline-flex;padding:8px 12px;border-radius:999px;
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;
}
.tag{color:#8beeff;background:rgba(48,186,255,.08);border:1px solid rgba(99,218,255,.18)}
h1{margin-top:22px;font-size:clamp(38px,5vw,56px);line-height:1.03;letter-spacing:-2.5px}
.consult-card>p{margin-top:18px;color:#b1c6da;line-height:1.7}
form{margin-top:30px}
form label{display:block;margin-bottom:9px;color:#dceaff;font-size:13px;font-weight:800}
.input-box{
  height:62px;border:1px solid rgba(255,255,255,.13);
  border-radius:17px;background:rgba(3,15,29,.5);transition:.2s;
}
.input-box:focus-within{border-color:#47b9ff;box-shadow:0 0 0 4px rgba(26,146,255,.12)}
.input-box input{
  width:100%;height:100%;padding:0 18px;border:0;outline:0;
  color:white;background:transparent;font-size:20px;letter-spacing:.04em;
}
.input-box input::placeholder{color:#607991}
form button,.download-button{
  display:flex;align-items:center;justify-content:center;gap:18px;
  border:0;border-radius:16px;color:white;
  background:linear-gradient(135deg,#178dff,#086bdc);
  font-weight:900;text-decoration:none;cursor:pointer;
  box-shadow:0 18px 38px rgba(4,104,231,.3);transition:.2s;
}
form button{width:100%;min-height:58px;margin-top:17px;font-size:16px}
form button:hover,.download-button:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(4,104,231,.4)}
form button:disabled{opacity:.65;cursor:wait;transform:none}
.form-message{display:none;margin-top:14px;padding:13px 14px;border-radius:13px;font-size:13px}
.form-message.error{display:block;color:#ffd9dd;border:1px solid rgba(255,99,114,.23);background:rgba(255,67,87,.1)}
.safe-note{
  margin-top:24px;padding-top:21px;border-top:1px solid rgba(255,255,255,.08);
  color:#7892aa;text-align:center;font-size:11px;
}
.result-screen{
  flex:1;display:none;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:60px;align-items:center;padding:20px 0 60px;
}
.result-screen.visible{display:grid;animation:screenIn .65s ease both}
.result-content{max-width:610px}
.new-search{margin-bottom:24px;border:0;color:#8fa9c2;background:none;cursor:pointer}
.located{color:#7cf0b5;background:rgba(40,201,122,.09);border:1px solid rgba(77,229,156,.2)}
h2{margin-top:18px;font-size:clamp(38px,5vw,58px);letter-spacing:-2px}
.intro{margin-top:13px;color:#a9bed2;line-height:1.65}
.expiry-alert{
  max-width:560px;margin-top:22px;padding:16px;
  display:flex;align-items:flex-start;gap:13px;
  border:1px solid rgba(255,195,86,.2);border-radius:17px;
  background:rgba(255,174,38,.08);
}
.alert-symbol{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
  border-radius:10px;color:#251700;background:var(--yellow);font-weight:900;
}
.expiry-alert strong,.expiry-alert span{display:block}
.expiry-alert strong{color:#ffd986;font-size:14px}
.expiry-alert span{margin-top:4px;color:#aebdca;font-size:12px}
.choices{margin-top:28px}
.choices h3{margin-bottom:13px;font-size:17px}
.choice{
  position:relative;max-width:560px;min-height:74px;margin-top:11px;padding:14px 16px;
  display:flex;align-items:center;gap:13px;
  border:1px solid rgba(255,255,255,.11);border-radius:17px;
  background:rgba(255,255,255,.055);cursor:pointer;transition:.2s;
}
.choice:hover{transform:translateY(-2px);border-color:rgba(61,178,255,.55)}
.choice:has(input:checked){border-color:#39b3ff;background:rgba(26,145,255,.12)}
.choice input{position:absolute;opacity:0}
.choice-icon{
  width:43px;height:43px;flex:none;display:grid;place-items:center;
  border-radius:13px;color:#8eeeff;background:rgba(38,175,255,.12);
  font-size:13px;font-weight:900;
}
.choice-text{flex:1}
.choice-text strong,.choice-text small{display:block}
.choice-text strong{font-size:14px}
.choice-text small{margin-top:4px;color:#829bb4;font-size:11px}
.check{
  width:28px;height:28px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.15);border-radius:50%;
  color:transparent;transition:.2s;
}
.choice:has(input:checked) .check{border-color:#38b6ff;color:white;background:#168cff}
.next-step{
  max-width:560px;margin-top:20px;padding:19px;
  display:none;grid-template-columns:40px 1fr;gap:13px;
  border:1px solid rgba(74,225,154,.2);border-radius:18px;
  background:rgba(36,194,117,.08);
}
.next-step.visible{display:grid;animation:slideUp .45s ease both}
.success-icon{
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:11px;color:#062313;background:#63e8a4;font-weight:900;
}
.next-step strong{color:#8df0bb}
.next-step p{margin-top:5px;color:#a9bbcc;font-size:12px;line-height:1.55}
.download-button{grid-column:1/-1;min-height:53px;margin-top:4px;font-size:14px}
.phone-area{
  position:relative;min-height:650px;display:grid;place-items:center;perspective:1300px;
}
.phone-light{
  position:absolute;width:360px;height:360px;border-radius:50%;
  background:#0f8eff;opacity:.18;filter:blur(70px);
}
.phone{
  position:relative;z-index:2;width:296px;height:610px;padding:9px;
  border:1px solid rgba(255,255,255,.28);border-radius:47px;
  background:linear-gradient(145deg,#39404a,#090c11 58%,#252c35);
  box-shadow:0 55px 100px rgba(0,0,0,.52),inset 0 1px 2px rgba(255,255,255,.35);
  transform:rotateY(-10deg) rotateX(3deg);
  animation:phoneFloat 4.2s ease-in-out infinite;
}
.phone-notch{
  position:absolute;z-index:8;top:16px;left:50%;width:92px;height:25px;
  transform:translateX(-50%);border-radius:20px;background:#050609;
}
.phone-screen{
  position:relative;width:100%;height:100%;overflow:hidden;padding:24px 18px 18px;
  border-radius:38px;
  background:
    radial-gradient(circle at 82% 5%,rgba(67,184,255,.32),transparent 25%),
    linear-gradient(180deg,#0b2c53,#061a31 57%,#04101e);
}
.phone-screen:after{
  content:"";position:absolute;inset:-40% auto auto -80%;width:62%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  transform:rotate(18deg);animation:shine 5.5s ease-in-out infinite;
}
.status-bar,.app-header,.greeting,.points-card,.money-card,.available-status,.phone-menu{position:relative;z-index:2}
.status-bar{display:flex;justify-content:space-between;padding:0 7px;font-size:10px;font-weight:800}
.app-header{margin-top:35px;display:flex;align-items:center;justify-content:space-between}
.app-logo{width:47px;height:47px;border-radius:15px;font-size:22px}
.app-header>span{color:#9cc5e4;font-size:20px}
.greeting{margin-top:25px}
.greeting span{display:block;color:#9bb7d0;font-size:13px}
.greeting strong{display:block;margin-top:4px;font-size:24px;line-height:1.15}
.points-card{
  margin-top:20px;padding:20px;border:1px solid rgba(104,220,255,.18);
  border-radius:22px;background:linear-gradient(135deg,rgba(28,145,255,.3),rgba(34,218,255,.09));
}
.points-card span{display:block;color:#b7d5ed;font-size:11px}
.points-card strong{display:block;margin-top:7px;color:#8ceeff;font-size:38px;letter-spacing:-1px}
.points-card small{color:#9bb8ce;font-size:11px}
.money-card{
  margin-top:13px;padding:15px;display:flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(255,255,255,.065);
}
.money-symbol{
  width:43px;height:43px;flex:none;display:grid;place-items:center;
  border-radius:13px;color:#8ff2bd;background:rgba(46,207,125,.13);
  font-size:13px;font-weight:900;
}
.money-card span,.money-card strong{display:block}
.money-card span{color:#9fb4c8;font-size:10px}
.money-card strong{margin-top:4px;font-size:20px}
.available-status{
  margin-top:15px;padding:13px;display:flex;align-items:center;gap:9px;
  border-radius:14px;color:#a8c1d7;background:rgba(255,255,255,.045);font-size:10px;
}
.available-status span{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.phone-menu{
  position:absolute;left:18px;right:18px;bottom:17px;padding:14px 12px;
  display:flex;justify-content:space-around;
  border:1px solid rgba(255,255,255,.07);border-radius:17px;
  color:#718da7;background:rgba(2,10,18,.38);font-size:15px;
}
.phone-menu b{color:#6ee6ff}
.phone-shadow{
  position:absolute;bottom:12px;width:230px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.55);filter:blur(16px);
}
footer{
  min-height:62px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;border-top:1px solid rgba(255,255,255,.075);
  color:#647f98;font-size:10px;
}
@keyframes phoneFloat{
  0%,100%{transform:rotateY(-10deg) rotateX(3deg) translateY(0)}
  50%{transform:rotateY(-7deg) rotateX(2deg) translateY(-13px)}
}
@keyframes shine{
  0%,55%{left:-80%}
  82%,100%{left:150%}
}
@keyframes screenIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:900px){
  .result-screen{grid-template-columns:1fr;gap:20px}
  .phone-area{order:-1;min-height:620px}
  .result-content{max-width:680px;margin:auto}
}
@media(max-width:560px){
  .page{width:min(100% - 20px,1180px)}
  .header{min-height:78px}
  .brand strong{font-size:14px}
  .brand small,.security{display:none}
  .consult-card{padding:28px 20px;border-radius:24px}
  h1{font-size:38px}
  .result-screen{padding-top:0}
  h2{font-size:38px}
  .phone-area{min-height:560px;transform:scale(.88);margin:-35px 0}
  .expiry-alert,.choice,.next-step{max-width:none}
  footer{flex-direction:column;justify-content:center;text-align:center}
}


.result-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}

.result-top .new-search{
  margin-bottom:0;
}

.phone-mobile-slot{
  display:none;
}

@media(max-width:900px){
  .result-screen{
    display:none;
    grid-template-columns:1fr;
    gap:0;
    align-items:start;
    padding-top:12px;
  }

  .result-screen.visible{
    display:block;
  }

  .result-content{
    max-width:680px;
    margin:0 auto;
  }

  .result-top{
    margin-bottom:22px;
  }

  .result-content h2{
    margin-top:0;
  }

  .phone-mobile-slot{
    display:block;
    height:0;
  }

  .phone-area{
    margin:20px auto 12px;
    min-height:590px;
    order:initial;
  }

  .expiry-alert{
    margin-top:8px;
  }
}

@media(max-width:560px){
  .result-screen{
    padding-top:14px;
  }

  .result-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:24px;
  }

  .new-search{
    font-size:12px;
    white-space:nowrap;
  }

  .located{
    padding:8px 10px;
    font-size:10px;
    letter-spacing:.04em;
    white-space:nowrap;
  }

  .result-content h2{
    margin-top:0;
    font-size:36px;
    line-height:1.08;
  }

  .intro{
    margin-top:12px;
    font-size:15px;
  }

  .phone-area{
    min-height:540px;
    margin:8px auto 4px;
    transform:scale(.84);
    transform-origin:top center;
    margin-bottom:-72px;
  }

  .expiry-alert{
    margin-top:12px;
  }
}

:root{
  --admin-primary:#0a73ff;
  --admin-accent:#19a7ff;
}

.editable-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:none;
}

.brand-symbol.has-custom-logo,
.app-logo.has-custom-logo{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:hidden;
}

.brand-symbol.has-custom-logo .editable-logo,
.app-logo.has-custom-logo .editable-logo{
  display:block;
}

.brand-symbol.has-custom-logo #brandLetter,
.app-logo.has-custom-logo #phoneLogoLetter{
  display:none;
}

body.has-custom-background{
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

#newSearchText{
  pointer-events:none;
}

#downloadText{
  pointer-events:none;
}

/* V7: custom logos always override the fallback P */
.brand-symbol.has-custom-logo,
.app-logo.has-custom-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:transparent !important;
}

.brand-symbol.has-custom-logo > span,
.app-logo.has-custom-logo > span{
  display:none !important;
}

.brand-symbol.has-custom-logo img,
.app-logo.has-custom-logo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border-radius:inherit !important;
}
