a.logo{display:flex;align-items:center;line-height:0;text-decoration:none}.logo img{height:34px;width:auto;display:block}
.nav-btn{height:36px;padding:0 16px;border-radius:999px;border:0;background:linear-gradient(180deg,#3ee0b0,#17b889);color:#04241c;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;box-shadow:0 8px 18px rgba(31,207,159,.28)}
.nav-btn.ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:#e7f3ef;font-weight:600;box-shadow:none}
.user-chip{font-size:13px;color:#d5ddd9;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actions form{margin:0}

.home-hero{text-align:center;padding:54px 20px 18px}
.eyebrow{margin:0 0 10px;color:#19e2b0;letter-spacing:.16em;font-size:12px;text-transform:uppercase}
.home-hero h1{font-size:52px;line-height:1.05;margin:0 0 12px;font-weight:800;letter-spacing:-1.8px}
.home-hero h1 span{color:var(--green)}
.lead{max-width:640px;margin:0 auto;color:#aab6c5;font-size:17px}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}

.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:8px 0 12px}
.section-head h2,.cta-band h2{margin:0;font-size:22px}
.section-head p,.cta-band p{margin:4px 0 0;color:var(--muted);font-size:13px}
.market-card{border:1px solid #1b3041;border-radius:14px;overflow:auto;background:linear-gradient(180deg,rgba(7,21,34,.96),rgba(8,20,32,.98))}
.up{color:#7deacb}
.down{color:#ff8d8d}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.feature{display:block;border:1px solid #1a3044;border-radius:14px;padding:22px;background:linear-gradient(145deg,#0d1c2b,#0b1725);color:inherit;text-decoration:none}
.feature h3{margin:8px 0;font-size:20px}
.feature p{margin:0;color:#9eacbd;font-size:14px;line-height:1.5}
.feature-kicker{color:var(--green);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.cta-band{margin-top:18px;border:1px solid #1e8f80;border-radius:16px;padding:22px;display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(90deg,rgba(12,48,44,.9),rgba(8,22,34,.9))}

.auth-card{border:1px solid #1a3044;border-radius:16px;background:linear-gradient(145deg,#0d1c2b,#0b1725);padding:28px;max-width:460px;margin:0 auto 28px}
.auth-card .field{margin-bottom:14px}
.auth-card .primary{margin-top:8px}
.field-error{color:#ff8d8d;font-size:12px;margin:6px 0 0}
.alert{border:1px solid #6a3040;background:#2a1520;color:#ffc1c9;border-radius:9px;padding:10px 12px;font-size:13px;margin-bottom:14px}
.alert.ok{border-color:#1e8f80;background:#0d2b28;color:#b7f6e6}
.google-btn{height:48px;border-radius:9px;border:1px solid #31465c;background:#101c2b;color:#f2f7fb;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:750}
.g-mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#1a73e8;font-weight:800;font-size:14px}
.or-line{display:flex;align-items:center;gap:10px;color:#7f8d9f;font-size:12px;margin:16px 0}
.or-line:before,.or-line:after{content:"";height:1px;background:#20374d;flex:1}
.remember{display:flex;align-items:center;gap:8px;color:#bac7d4;font-size:13px;margin:4px 0 8px}
.auth-switch{text-align:center;color:#9eacbd;font-size:13px;margin:16px 0 0}
.auth-switch a{color:var(--green)}
.swap-box{margin-bottom:28px}
button.swap-arrow{padding:0;cursor:pointer}

.swap-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:stretch}
.swap-card,.info-card{position:relative;border:1px solid #1c4c56;border-radius:16px;background:linear-gradient(180deg,#102033,#0b1724);padding:18px;overflow:hidden}
.swap-card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.swap-card-head h2,.info-card h2{margin:0;font-size:20px}
.swap-card-head p{margin:3px 0 0;color:#8ea0b3;font-size:13px}
.swap-stack{position:relative;display:grid;gap:14px}
.token-meta{display:flex;justify-content:space-between;align-items:center;color:#9eacbd;font-size:12px;margin-bottom:8px}
.token-meta b{font-weight:650;color:#d5dee8}
.max-btn{border:0;background:transparent;color:#19e2b0;font-weight:800;cursor:pointer;padding:0 0 0 8px}
.token-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #1e5560;border-radius:14px;background:#0c1828;padding:12px 14px}
.token-pill{display:flex;align-items:center;gap:10px;background:#13263a;border-radius:12px;padding:6px 12px 6px 6px;min-width:150px}
.token-pill .coin{width:36px;height:36px;font-size:16px}
.token-pill select{appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d5dee8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") right center no-repeat;border:0;color:#fff;font-weight:750;font-size:16px;padding-right:18px;outline:none;cursor:pointer}
.token-amount{text-align:right;min-width:120px}
.token-amount input,.token-figure{width:100%;border:0;background:transparent;color:#fff;font-size:30px;font-weight:800;text-align:right;outline:none;line-height:1}
.token-amount input::-webkit-outer-spin-button,.token-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.token-amount small{display:block;color:#7f8d9f;font-size:12px;margin-top:4px}
.swap-flip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid #1e705f;background:#0c342e;color:var(--green);cursor:pointer;font-size:18px}
.rate-bar{margin-top:14px;border:1px solid #1a3c4a;border-radius:12px;background:#0c1b2a;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;color:#d5dee8;font-size:13px}
.rate-timer{color:#9eacbd}
.receive-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:#c5d0db;font-size:14px}
.receive-row strong{color:#fff;font-size:16px}
.swap-now{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.swap-history{margin-top:16px;overflow:auto}
.swap-history .copy{font-size:14px}
.info-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px}
.info-list li{display:flex;gap:12px;align-items:flex-start}
.info-ico{width:38px;height:38px;border-radius:12px;background:#12382f;color:#19e2b0;display:grid;place-items:center;flex:none;font-size:18px}
.info-list strong{display:block;font-size:15px}
.info-list span{color:#8ea0b3;font-size:12px}
.coin-art{position:absolute;right:-8px;bottom:-18px;width:180px;height:140px;pointer-events:none}
.art-coin{position:absolute;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:42px;font-weight:800}
.art-coin.usdt{right:62px;bottom:18px;color:#fff;background:radial-gradient(circle at 35% 30%,#7dffe0,#12b98f 55%,#0c7d66);box-shadow:0 12px 24px rgba(0,0,0,.28)}
.art-coin.mtht{right:8px;bottom:0;color:#6a4a00;background:radial-gradient(circle at 35% 30%,#ffe38a,#e0aa2a 60%,#b8860b);border:3px solid #ffe7a3}
a.primary.swap-link{display:flex;align-items:center;justify-content:center;text-decoration:none}

@media(max-width:900px){
 .home-hero h1{font-size:38px}
 .feature-grid,.swap-layout{grid-template-columns:1fr}
 .coin-art{display:none}
 .cta-band{flex-direction:column;align-items:flex-start}
}
@media(max-width:650px){
 .actions{gap:8px}
 .user-chip{display:none}
 .home-hero{padding:32px 16px 8px}
 .home-hero h1{font-size:32px;letter-spacing:-1px}
 .lead{font-size:15px}
 .shell{width:calc(100% - 24px)}
 .auth-card{padding:18px}
 .market-card{overflow:visible;background:transparent;border:0}
 .market-card table{min-width:0}
 .market-card thead{display:none}
 .market-card tr{display:grid;gap:2px;margin:0 0 12px;padding:12px 14px;border:1px solid #1b3041;border-radius:16px;background:linear-gradient(180deg,rgba(7,21,34,.96),rgba(8,20,32,.98))}
 .market-card td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:7px 0;text-align:right}
 .market-card td:before{content:attr(data-label);color:#9eacbd;font-size:12px;font-weight:600}
 .hero-actions .nav-btn{width:100%;justify-content:center}
 .cta-band{padding:16px}
 .footer-right{flex-wrap:wrap;gap:8px}
}