/* Mobile-first styles */
:root{
  --bg:#0f172a;       /* slate-900 */
  --panel:#111827;    /* gray-900 */
  --text:#e5e7eb;     /* gray-200 */
  --muted:#94a3b8;    /* slate-400 */
  --accent:#22c55e;   /* green-500 */
  --danger:#ef4444;   /* red-500 */
  --btn:#1f2937;      /* gray-800 */
  --btnText:#fff;
  --card:#0b1222;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 50% -100px, #1f2937, var(--bg));
  color:var(--text);
}

.app{
  min-height:100%;
  padding: clamp(12px, 3vw, 24px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.container{
  width:100%;
  max-width: 520px;
  background: rgba(17,24,39,0.85);
  border:1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.logo{
  width:36px;height:36px;border-radius:8px;background:#10b981;display:flex;align-items:center;justify-content:center;font-weight:800;color:#062a24
}

.title{
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.sub{
  color:var(--muted);
  font-size: 14px;
}

.card{
  background: var(--card);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:16px;
  margin-top:12px;
}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.controls{display:flex;align-items:center;gap:8px}

.btn{
  background:var(--btn);
  color:var(--btnText);
  border:1px solid rgba(255,255,255,0.08);
  padding:14px 16px;
  border-radius:12px;
  font-weight:700;
  font-size:16px;
  width:100%;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}

.btn-primary{ background: linear-gradient(180deg, #22c55e, #16a34a); color:#04200f; border:none }
.btn-ghost{ background: transparent; border:1px dashed rgba(255,255,255,0.2) }
.btn-danger{ background: linear-gradient(180deg, #ef4444, #dc2626); color:white; border:none }

.input{
  width:88px;
  display:flex;align-items:center;justify-content:space-between;
  background:#0b1222;border:1px solid rgba(255,255,255,0.1);
  padding:8px;border-radius:12px;
}

.input button{
  width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);
  background:#162036;color:#fff;font-weight:800;font-size:18px
}
.input span{font-weight:800;font-size:18px;min-width:28px;text-align:center}

.footerLinks{
  display:flex;gap:12px;margin-top:12px;flex-wrap:wrap
}
.footerLinks a{
  color:#93c5fd;text-decoration:none;
  background:#0b1222;border:1px solid rgba(147,197,253,0.3);
  padding:8px 10px;border-radius:10px;font-size:14px
}

.center{
  text-align:center;
}
.big{
  font-size: clamp(30px, 8vw, 56px);
  font-weight: 900;
  letter-spacing: 0.5px;
  margin: 20px 0 6px;
}
.mid{
  font-size: clamp(16px, 4vw, 20px);
  color:var(--muted);
  margin-bottom: 16px;
}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pill{
  background:#0b1222;border:1px solid rgba(255,255,255,0.08);padding:10px 12px;border-radius:999px;font-size:14px
}

/* Modal */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  display:flex;align-items:center;justify-content:center;padding:16px;z-index:50
}
.modal{
  width:100%;max-width:520px;background:var(--panel);border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;padding:16px
}

.checkbox-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:260px;overflow:auto}
.check{
  display:flex;align-items:center;gap:10px;background:#0b1222;border:1px solid rgba(255,255,255,0.08);
  padding:8px 10px;border-radius:10px
}
.check input{width:18px;height:18px}

.radio-list{display:flex;gap:8px;flex-wrap:wrap}
.radio{display:flex;align-items:center;gap:10px;background:#0b1222;border:1px solid rgba(255,255,255,0.08);padding:8px 10px;border-radius:999px}
.radio input{width:16px;height:16px}

.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  background: #0b1222;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 60;
}

.logo img{width:120px;height:auto;display:block}
.pill.clickable{cursor:pointer; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;}
.footerLeft{display:flex;gap:10px;align-items:center;margin-right:auto}
.iconbtn{background:#0b1222;border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:10px;width:40px;height:40px;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* Floating logo bottom right */
.logo-fixed{
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 100;
}
.logo-fixed img{width:140px;height:auto;opacity:0.9}

.tagline{text-align:center;font-size:16px;color:var(--muted);margin-bottom:8px}
.logo-card{display:flex;justify-content:flex-end;margin-top:12px}
.logo-card img{width:120px;height:auto;opacity:0.9}
.startRow{display:flex;justify-content:center;margin-top:12px}

.panel{
  background:#0b1222;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:16px;
  margin-bottom:12px;
  min-height: 200px;           /* keep top section steady */
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
}
@media (min-width: 480px){
  .panel{ min-height: 240px; }
}
.group-box{
  background:#0b1222;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:14px;
  margin-top:12px;
}
.container{ min-height: 540px; } /* reduce page jump overall */

.logo-inline{ display:flex; align-items:center; margin-left:auto; }
.logo-inline img{ height:auto; }
.footerLinks{ display:flex; align-items:center; gap:12px; }