/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,Arial,sans-serif;background:#07090b;color:#eaf0f6;line-height:1.5}
a{color:#2aa9ff;text-decoration:none}
.container{max-width:1080px;margin:24px auto;padding:0 16px}

/* Top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent),#0f1720;border-bottom:1px solid rgba(255,255,255,0.03)}
.left{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,0.04)}
.brand-name{font-weight:700}
.brand-chain{font-size:12px;color:#8b98a8}
.wallet-address{padding:6px 10px;background:#08101a;border-radius:8px;border:1px solid rgba(255,255,255,0.02);font-family:ui-monospace,monospace;color:#9aa8bf;font-size:13px;display:inline-block}

/* Layout */
.hero{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
@media (max-width:820px){.hero{grid-template-columns:1fr}.buy-card{order:2}}

.left-col h1{font-size:34px;margin-bottom:6px}
.lead{color:#93a3b8;margin-bottom:12px}

/* Cards */
.countdown-card,.progress-card,.buy-card,.info-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent),#0f1720;border:1px solid rgba(255,255,255,0.03);border-radius:12px;padding:14px;margin-bottom:16px}
.countdown{font-weight:800;font-size:28px;color:#ffcc00;margin-top:6px;text-align:center;padding:10px;border-radius:10px;background:rgba(255,255,255,0.03)}
.progress-head{display:flex;justify-content:space-between;color:#93a3b8;margin-bottom:10px}
.progress-bar{width:100%;height:12px;background:#08111a;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,0.02)}
.progress-fill{height:100%;background:linear-gradient(90deg,#2aa9ff,#00e1a2);width:0%}

/* Buy card */
.buy-card{padding:18px;background:linear-gradient(180deg,rgba(255,255,255,0.03),#0f1720);border-radius:16px;border:1px solid rgba(255,255,255,0.05)}
.buy-card h2{margin:0 0 8px}
label{font-weight:600;color:#cfe6ff;font-size:14px}
input[type=number]{width:100%;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.05);background:#08101a;color:#eaf0f6;margin-top:8px;font-size:16px;font-weight:600;text-align:right}
.calc{display:flex;justify-content:space-between;align-items:center;margin:12px 0;color:#93a3b8}
.btn{width:100%;padding:14px;border-radius:12px;border:0;background:linear-gradient(180deg,#2aa9ff,#148be0);color:#071427;font-weight:800;cursor:pointer;font-size:16px;transition:0.3s}
.btn:disabled{opacity:.6;cursor:not-allowed}
.mini{margin-top:10px;color:#93a3b8;font-size:13px;text-align:center}

/* Info card */
.info-card h3{margin-bottom:8px}
.info-card ol{margin:8px 0 12px;padding-left:18px;color:#93a3b8}
.meta{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.meta li{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;background:#07121a;border:1px solid rgba(255,255,255,0.02);color:#cfe6ff}

/* footer */
.footer{text-align:center;padding:18px;color:#93a3b8;border-top:1px solid rgba(255,255,255,0.02);margin-top:18px}

/* Toast notifications */
.toast {position: fixed; bottom: 20px; right: 20px; background: rgba(40,40,40,0.9); color: #fff; padding: 12px 20px; border-radius: 10px; font-weight: 600; z-index: 9999; opacity: 0; animation: fadein 0.3s forwards, fadeout 0.3s 3.5s forwards;}
.toast.success { background: #2aa962; }
.toast.error { background: #e02424; }
@keyframes fadein { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeout { from {opacity:1;} to {opacity:0;} }