/* ================= early access app additions ================= */
[hidden] { display: none !important; }

/* onboarding */
.gate { overflow-y: auto; overflow-x: hidden; }
.gate-bg { position: fixed; }
.gate-card { margin: auto; }
.gate-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; margin-bottom: 26px; color: #f1f7ea; }
.gate-brand svg { width: 34px; height: 34px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.gate h2 { font-size: 30px; letter-spacing: -0.03em; margin: 22px 0 18px; }
.in { display: block; margin-bottom: 14px; }
.in span { display: block; font-size: 13px; margin-bottom: 6px; opacity: .8; }
.in input { width: 100%; padding: 14px 16px; border-radius: 14px; font: inherit; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.gate .in input { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.gate .in input::placeholder { color: rgba(255,255,255,.4); }
.gate .in input:focus { border-color: var(--leaf); box-shadow: 0 0 0 4px rgba(143,201,106,.2); background: rgba(255,255,255,.12); }
.main .in input { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.main .in input:focus { border-color: var(--moss); box-shadow: 0 0 0 4px rgba(47,90,53,.12); background: #fff; }
.err { display: block; min-height: 16px; margin-top: 4px; font-size: 12px; color: #f0a48c; }
.main .err { color: var(--red); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #c3d5bf; margin: 6px 0 2px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--leaf); width: 16px; height: 16px; flex-shrink: 0; }
.gate .btn.wide { margin-top: 10px; }
.creating { text-align: center; }
.spin-ring { width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; position: relative; }
.spin-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--leaf); animation: rot 1s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.spin-ring svg { width: 52px; height: 52px; animation: spin 6s linear infinite; }
.steps-check { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.steps-check li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.35); transition: color .3s; }
.steps-check li::before { content: ""; width: 22px; height: 22px; border-radius: 99px; border: 2px solid rgba(255,255,255,.2); flex-shrink: 0; transition: all .3s var(--ease); }
.steps-check li.doing { color: #fff; }
.steps-check li.doing::before { border-color: var(--leaf); border-top-color: transparent; animation: rot .8s linear infinite; }
.steps-check li.done { color: #dfeedd; }
.steps-check li.done::before { background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%2314281a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--leaf); animation: none; }

/* sidebar extras */
.side-sep { height: 1px; background: rgba(255,255,255,.08); margin: 12px 8px; }
.side-user { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); cursor: pointer; transition: background .2s; }
.side-user:hover { background: rgba(255,255,255,.09); }
.side-user b { display: block; font-size: 14px; color: #f1f7ea; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user span { display: block; font-size: 12px; color: #8fa78b; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { border: 0; cursor: pointer; }
.avatar.sm { width: 36px; height: 36px; border-radius: 12px; font-size: 13px; flex-shrink: 0; }
.avatar.xl { width: 96px; height: 96px; border-radius: 30px; font-size: 32px; margin: -48px auto 14px; border: 5px solid #fff; position: relative; }

.badge-ea { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--moss); white-space: nowrap; }
.bell { position: relative; width: 42px; height: 42px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.bell svg { width: 20px; height: 20px; fill: none; stroke: var(--forest); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bell i { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 99px; background: var(--leaf); box-shadow: 0 0 0 2px #fff; opacity: 0; }
.bell.dot i { opacity: 1; }

.pill-lock { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 5px 10px; border-radius: 99px; background: rgba(143,201,106,.16); color: var(--moss); white-space: nowrap; }
.balance-panel .pill-lock { background: rgba(255,255,255,.08); color: var(--glow); }
.q.locked { opacity: .55; }
.q.locked:hover { transform: none; background: rgba(255,255,255,.06); }
.flatline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60px; opacity: .35; }
.flatline path { fill: none; stroke: var(--leaf); stroke-width: 2; stroke-dasharray: 6 8; }
.hide-amounts .bal, .hide-amounts .claim-amt { filter: blur(14px); }

.card-note { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.card-note .live { flex-shrink: 0; }

/* checklist */
.ready { grid-area: tier; }
.checklist { list-style: none; margin: 16px 0 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.checklist li + li { border-top: 1px solid var(--line); }
.checklist li > div { flex: 1; min-width: 0; }
.checklist b { display: block; font-weight: 600; font-size: 14px; }
.checklist small { color: var(--muted); font-size: 12.5px; }
.ck { width: 24px; height: 24px; border-radius: 99px; border: 2px solid var(--line); flex-shrink: 0; transition: all .3s var(--ease); }
.checklist li.done .ck { background: var(--moss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23d6f5b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--moss); }
.checklist li.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.checklist li.done .mini { display: none; }
#readyBar { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--leaf), var(--moss)); transition: width .8s var(--ease); animation: none; }

.mini { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 99px; background: var(--forest); color: #eef5e8; font-size: 13px; font-weight: 500; white-space: nowrap; transition: transform .2s var(--ease), background .2s; }
.mini:hover { transform: translateY(-1px); background: var(--forest-2); }
.mini.light { background: var(--glow); color: var(--forest); }
.mini.red { background: var(--red); }

/* empty states */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 12px; }
.empty-ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--paper); border: 1px dashed rgba(14,26,18,.2); margin-bottom: 12px; }
.empty-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--moss); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.empty b { font-size: 16px; }
.empty p { color: var(--muted); font-size: 14px; max-width: 320px; margin-top: 4px; }
.act-list li.empty-row { display: block; border: 0; }

/* trade locked */
.launch-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, #2a5530, var(--forest) 60%); color: #eef5e8; margin-bottom: 18px; }
.launch-banner svg { width: 44px; height: 44px; flex-shrink: 0; }
.launch-banner b { display: block; font-size: 17px; }
.launch-banner span { font-size: 14px; color: #b9cdb6; }
.launch-banner .mini { margin-left: auto; }
.locked-panel { position: relative; overflow: hidden; }
.locked-panel > :not(.lock-overlay) { opacity: .45; }
.lock-overlay { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.94); border: 1px solid var(--line); box-shadow: 0 20px 40px rgba(14,26,18,.12); font-weight: 500; font-size: 14px; text-align: center; }
.lock-overlay svg { width: 18px; height: 18px; fill: none; stroke: var(--forest); stroke-width: 1.8; flex-shrink: 0; }
.mkt-list .pill-lock { margin-left: auto; }

/* rewards */
.grid-rewards { grid-template-areas: "claim tiers" "how tiers"; }
.how { grid-area: how; }
.how-list { list-style: none; margin: 0; padding: 0; counter-reset: h; }
.how-list li { position: relative; padding: 12px 0 12px 46px; counter-increment: h; }
.how-list li + li { border-top: 1px solid var(--line); }
.how-list li::before { content: counter(h); position: absolute; left: 0; top: 12px; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; background: var(--paper); font-family: var(--mono); font-size: 13px; color: var(--forest); }
.how-list b { display: block; }
.how-list span { color: var(--muted); font-size: 14px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* activity filters */
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { padding: 7px 14px; border-radius: 99px; font-size: 13px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.filters button.active { background: var(--forest); color: var(--glow); border-color: transparent; }

/* profile */
.grid-profile { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
.profile-card { grid-row: span 2; text-align: center; padding: 0 0 24px; overflow: hidden; }
.pc-banner { height: 120px; background: url("/assets/banner.jpg") center 60% / cover; }
.profile-card h3 { font-size: 26px; letter-spacing: -0.03em; }
.pc-badges { margin: 14px 0 6px; }
.pc-meta { margin: 18px 24px 0; padding: 0; text-align: left; }
.pc-meta div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pc-meta dt { color: var(--muted); flex-shrink: 0; }
.pc-meta dd { margin: 0; min-width: 0; font-weight: 500; font-family: var(--mono); font-size: 13px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.profile-card h3, .profile-card > .muted { padding: 0 20px; overflow-wrap: anywhere; }
.stack .btn { margin-top: 4px; }
.copy-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.copy-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

/* settings */
.grid-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row b { display: block; font-weight: 600; font-size: 14.5px; }
.set-row small { color: var(--muted); font-size: 13px; }
.set-row.danger b { color: var(--red); }
.set-row select { padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 14px; color: var(--ink); }
.sw { position: relative; width: 48px; height: 28px; flex-shrink: 0; cursor: pointer; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 99px; background: var(--paper-2); border: 1px solid var(--line); transition: background .25s; pointer-events: none; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 99px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .3s var(--ease); }
.sw input:checked + i { background: var(--moss); border-color: var(--moss); }
.sw input:checked + i::after { transform: translateX(20px); }
.sw input:focus-visible + i { box-shadow: 0 0 0 3px rgba(143,201,106,.4); }

/* drawer & modal */
.drawer, .modal { position: fixed; inset: 0; z-index: 95; background: rgba(14,26,18,.35); backdrop-filter: blur(4px); display: flex; animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.drawer { justify-content: flex-end; }
.drawer-panel { width: min(400px, 100%); height: 100%; background: #fff; padding: 26px 24px; animation: slideIn .35s var(--ease); overflow-y: auto; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
.modal { align-items: center; justify-content: center; padding: 20px; }
.modal-card { width: min(420px, 100%); background: #fff; border-radius: 24px; padding: 28px; box-shadow: 0 30px 60px rgba(0,0,0,.25); animation: gateIn .35s var(--ease); }
.modal-card h3 { font-size: 22px; margin-bottom: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.modal-actions .mini:first-child { background: var(--paper); color: var(--ink); }

.app-foot { margin-top: 40px; font-size: 12px; color: var(--muted); }
.calm *, .calm *::before, .calm *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

@media (max-width: 1100px) {
  .grid-profile { grid-template-columns: 1fr; }
  .profile-card { grid-row: auto; }
  .grid-settings { grid-template-columns: 1fr; }
}
/* grid items must be allowed to shrink below their content (long addresses, emails) */
.grid-home > *, .grid-trade > *, .grid-rewards > *, .grid-profile > *, .grid-settings > * { min-width: 0; }
html, body { overflow-x: hidden; }

@media (max-width: 820px) {
  .grid-home, .grid-trade, .grid-rewards, .grid-profile, .grid-settings { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 20px; }
  .panel.profile-card { padding: 0 0 22px; }
  .pc-meta { margin: 18px 20px 0; }
  .top-right .badge-ea { display: none; }
  .grid-rewards { grid-template-areas: "claim" "tiers" "how"; }
  .tabbar { grid-template-columns: repeat(5, 1fr); }
  .launch-banner { flex-wrap: wrap; }
  .launch-banner .mini { margin-left: 0; }
  .panel-head { flex-wrap: wrap; gap: 10px; }
}