:root{
  --body-bg:linear-gradient(135deg, #e5e9ff 0%, #d7e3ff 40%, #e7d7ff 100%);
  --shell-bg:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.85));
  --shell-bs:0 40px 80px rgba(0,0,0,.15), inset 0 8px 18px rgba(255,255,255,0.5);
  --card-bg:#f5f7ff;
  --card-bs:0 16px 40px rgba(15,23,42,0.25);
  --topbar-bg:linear-gradient(90deg, #1e1b4b, #2a2163);
  --topbar-color:#eef0ff;
}
*{box-sizing:border-box; font-family:Inter,system-ui;}
body{margin:0;background:var(--body-bg);display:flex;align-items:center;justify-content:center;min-height:100vh;}
.page-wrap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 0;}
.shell{width:85vw;max-width:1400px;min-height:85vh;background:var(--shell-bg);border-radius:28px;padding:40px;box-shadow:var(--shell-bs);display:flex;flex-direction:column;justify-content:space-between;}
.card{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--card-bg);border-radius:26px;overflow:hidden;box-shadow:var(--shell-bs);}
.topbar{background:var(--topbar-bg);color:var(--topbar-color);padding:14px 22px;display:flex;align-items:center;justify-content:space-between;width:100%;border-radius:12px 12px 0 0;}
.top-left{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;}
.top-logo-img{width:32px;height:32px;border-radius:999px;}
.top-metrics{display:flex;align-items:center;gap:24px;font-size:13px;}
.metric-label{font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;}
.metric-value{font-weight:600;white-space:nowrap;display:inline-block;}
.top-right button{border-radius:999px;padding:10px 24px;font-size:14px;font-weight:600;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.05);color:#b0b5c4;transition:all 0.3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;white-space:normal;line-height:1.15;}
.top-right button .btn-sub{display:none;font-size:11px;font-weight:400;opacity:0.75;letter-spacing:0.02em;line-height:1.1;}
.top-right button.active .btn-sub{display:block;}
.top-right button:disabled {background: rgba(255,255,255,0.18);border: 1px solid rgba(255,255,255,0.35);color: rgba(255,255,255,0.55);pointer-events: auto;position: relative;}
.top-right button:disabled:hover {background: rgba(255,255,255,0.22);}
.top-right button:disabled:hover::after {content: attr(data-tooltip);position: absolute;bottom: -38px;left: 30%;transform: translateX(-50%);background: #0b1120;color: #eef0ff;font-size: 12px;padding: 6px 10px;border-radius: 6px;white-space: nowrap;box-shadow: 0 4px 10px rgba(0,0,0,0.15);z-index: 10;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,70,229,0.3);}50%{box-shadow:0 0 0 10px rgba(79,70,229,0);}100%{box-shadow:0 0 0 0 rgba(79,70,229,0);}}
.top-right button.active{background:#4f46e5;color:#ffffff;cursor:pointer;border-color:#a78bfa;animation:pulse 2s infinite ease-in-out;box-shadow:0 0 15px rgba(79,70,229,0.35);}
.top-right button.active:hover{background:#1e4ed8! important;transform:translateY(-1px);}
.content{padding:80px 60px;display:grid;grid-template-columns:1.3fr 1fr;gap:50px;position:relative;background:radial-gradient(circle at 15% 0%,rgba(59,130,246,0.08),transparent 55%),radial-gradient(circle at 85% 100%,rgba(59,130,246,0.12),transparent 55%);}
.content::before{content:"";position:absolute;top:58%;left:32%;transform:translate(-50%, -50%);width:90%;height:90%;background:url("../img/logo-bird.png") no-repeat center;background-size:contain;opacity:0.25;pointer-events:none;z-index:0;}
.content-right{position:relative; z-index:1;}
.content-left{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;}
.content-left h1,
.content-left p{color:#0b1120;}
.hero-title{font-size:36px;font-weight:700;margin:10px 0;}
.hero-sub{font-size:18px;margin:0;color:#6b7280;}
.swap-card{padding:24px;background:white;border-radius:20px;box-shadow:0 18px 45px rgba(15,23,42,0.25);border:1px solid rgba(148,163,184,0.3);}
.swap-body{display:flex;flex-direction:column;gap:14px;}
.swap-field{display:flex;align-items:center;justify-content:space-between;border:1px solid #e5e7eb;background:#f9fafb;border-radius:12px;padding:8px 10px;}
.swap-input{width:100%;border:none;background:transparent;font-size:14px;outline:none;color:#111827;}
.swap-button{width:100%;padding:10px 14px;background:linear-gradient(90deg, #1e1b4b, #2a2163);color:white;font-weight:600;font-size:14px;border-radius:12px;border:none;}
.swap-button:hover{opacity:0.9;cursor:pointer;}
.swap-estimate{margin-top:4px;font-size:13px;color:#6b7280;}
.swap-footer{text-align:right;color:#9ca3af;font-size:11px;margin-top:8px;}
.card-footer{background:white;border-top:1px solid rgba(148,163,184,0.35);padding:14px 22px;display:flex;justify-content:space-between;width:100%;}
.social-icons{display:flex;align-items:center;gap:10px;}
.social-icons a svg{width:20px;height:20px;stroke:#0b1120;fill:#0b1120;transition:0.2s;}
.social-icon:hover svg{opacity:0.7;transform:scale(1.05);}
.nav-links{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:#6b7280;}
.nav-links a{color:#6b7280;text-decoration:none;}
.nav-links a:hover{color:#111827;}
.page-footer{text-align:center;font-size:13px;color:#9ca3af;}
.page-footer .api-link{display:inline-block;margin-top:4px;font-size:11px;color:#9ca3af;text-decoration:none;opacity:0.8;}
.page-footer .api-link:hover{opacity:1;text-decoration:underline;}
@media(max-width: 900px) {
  .shell {padding: 18px;width: 94vw;}
  .topbar {flex-direction: column;align-items: flex-start;text-align: left;gap: 14px;}
  .top-left {align-self: flex-start;}
  .top-metrics {align-self: center;text-align: center;}
  .top-right {width: 100%;display: flex;justify-content: center;}
  .top-right button {max-width: 290px;width: 100%;margin-top: 4px;text-align: center;}
  .content {grid-template-columns: 1fr;padding: 26px 18px 18px;gap: 26px;}
  .content::before {background-size: 200px 200px;opacity: 0.06;background-position: 50% 34%;}
  .hero-title {font-size: 26px;line-height: 1.15;}
  .hero-sub {font-size: 16px;}
  .swap-card {padding: 20px;border-radius: 18px;margin-top: 10px;}
  .swap-input,.swap-amount {font-size: 15px;}
  .swap-button {padding: 12px;font-size: 15px;}
  .card-footer {flex-direction: column;align-items: flex-start;gap: 16px;padding: 16px;}
  .nav-links {justify-content: center;text-align: center; width: 100%}
  .nav-links a {flex: 1 1 calc(33% - 8px);text-align: center;}
  .social-icons a svg {width: 22px;height: 22px;}
  .brand-foot {margin-left: auto;}
  .page-footer {font-size: 12px;padding-top: 14px;}
  .content::before{content:"";position:absolute;top:21%;left:49%;transform:translate(-50%, -50%);width:90%;height:90%;background:url("../img/logo-bird.png") no-repeat center;background-size:contain;opacity:0.20;pointer-events:none;z-index:0;}
}