:root{
  --bg: #ffffff;
  --text: #1a3a66;         /* deep blue */
  --muted: #5d7aa3;        /* softer blue */
  --hot: #ff1493;          /* hot pink */
  --hot-2:#ff4da6;         /* lighter hot pink */
  --card:#f5f8ff;
  --line:#e5ecff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

.container{max-width:1100px;margin:0 auto;padding:18px}
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:56px;width:auto;display:block}
.brand .title{font-size:22px;font-weight:800;letter-spacing:.3px}
.brand .subtitle{font-size:12px;color:var(--muted)}
.nav{display:flex;gap:16px;color:var(--muted)}

.btn{border:2px solid var(--hot);background:var(--hot);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;cursor:pointer;transition:transform .05s ease,opacity .2s}
.btn:hover{transform:translateY(-1px)}
.btn.outline{background:transparent;color:var(--hot)}
.btn.ghost{border-color:#ccd6ff;background:transparent;color:var(--text)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding:28px 0;align-items:center}
.hero h1{font-size:40px;line-height:1.1;margin:0}
.hero p{color:var(--muted);margin:10px 0 18px}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.pill{font-size:12px;border:1px solid var(--line);padding:4px 8px;border-radius:999px;color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.col{display:flex;flex-direction:column;gap:8px}

.section{padding:22px 0;border-top:1px solid var(--line)}
.section h2{margin:0 0 10px;font-size:20px}
.small{font-size:12px;color:var(--muted)}

.rate{display:flex;align-items:center;gap:10px}
.rate .amount{font-size:28px;font-weight:800}
.rate .fx{display:flex;flex-direction:column;gap:6px}
.kicker{font-size:12px;color:var(--muted)}
.footer{padding:28px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted)}

.notice{background:#fff2f7;border:1px solid #ffd0e8;color:#6b1b3a;border-radius:12px;padding:10px 12px;font-size:13px}
.status{font-size:12px;color:var(--muted)}

.wait-box{max-width:520px;margin:18px auto}
.center{display:grid;place-items:center}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef5ff;border:1px solid #d9e7ff;color:#29539b;font-size:12px}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:24px}

.terminal{background:#0b0f14;color:#89f9a6;border:1px solid #17202b;border-radius:12px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.terminal .muted{color:#7aa59b}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;place-items:center;z-index:50}
.overlay.show{display:grid}
.overlay .panel{background:#fff;border-radius:16px;padding:20px;max-width:480px;text-align:center}
.overlay .panel h3{margin:10px 0 6px}
.overlay .panel p{color:#385a8f}
.dog{font-size:40px;line-height:1}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .brand img{height:48px}
}

/* Home page brand tweaks */
.home .brand img{ height:168px !important; }
.home .brand .title{ color:#ffffff !important; } /* keep in DOM for indexing */
@media (max-width:900px){
  .home .brand img{ height:120px !important; }
}

/* ===== Auth banner + login pill (shared across pages) ===== */
#auth-banner{
  margin-top:8px;
  min-height:28px;
}

#auth-banner .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#eef4ff;
  color:#1e2a5a;
  font-weight:600;
  border:none;               /* override generic .pill border */
  font-size:13px;
}

#auth-banner .pill img{
  height:16px;
  width:16px;
  vertical-align:-2px;
}

#auth-banner .pill .name{
  max-width:22ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#auth-banner .swap{
  margin-left:10px;
  font-size:12px;
  color:var(--muted);
}