/* ---- Echobase launchpad UI (lp-*) ---------------------------------------- */
:root{--lp-bg:#0b0d12;--lp-card:#0e1118;--lp-border:#232739;--lp-border-soft:rgba(255,255,255,.07);--lp-text:#fff;--lp-muted:#a2a8b8;--lp-hint:#8a92a6;--lp-accent:#6366f1;--lp-accent-soft:rgba(99,102,241,.16);--lp-green:#22c55e;--lp-red:#fb7185}
.lp-note{margin:0 0 .9rem;font-size:.85rem;color:var(--lp-muted)}
.lp-card{border-radius:1rem;border:1px solid var(--lp-border-soft);background:rgba(255,255,255,.025);padding:1.5rem;display:flex;flex-direction:column;gap:1.4rem}
.lp-card-tight{gap:.7rem;padding:1.25rem}
.lp-stack{display:flex;flex-direction:column;gap:1.4rem}
.lp-grid-2{display:grid;grid-template-columns:auto 1fr;gap:1.25rem}
.lp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:700px){.lp-grid-2,.lp-grid-3{grid-template-columns:1fr}}
.lp-field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.lp-label{font-size:.85rem;font-weight:600;color:#fff}
.lp-label span{font-weight:400;color:var(--lp-hint)}
.lp-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.lp-input{width:100%;box-sizing:border-box;border-radius:.6rem;border:1px solid var(--lp-border);background:var(--lp-bg);padding:.72rem .9rem;font:inherit;font-size:.95rem;color:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.lp-input::placeholder{color:#6b7286}
.lp-input:focus{border-color:var(--lp-accent);box-shadow:0 0 0 3px rgba(99,102,241,.3)}
.lp-input[type=number]{-moz-appearance:textfield}
.lp-input::-webkit-outer-spin-button,.lp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lp-textarea{min-height:6.5rem;resize:vertical}
.lp-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;word-break:break-all}
.lp-hint{font-size:.8rem;line-height:1.35rem;color:var(--lp-hint)}
.lp-muted{color:var(--lp-muted);font-size:.95rem;line-height:1.5}
.lp-link{background:none;border:0;padding:0;color:#a5b4fc;font:inherit;font-size:.8rem;cursor:pointer}
.lp-link:hover{color:#c7d2fe}
.lp-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;width:12rem;height:12rem;border-radius:1rem;border:1px dashed var(--lp-border);background:var(--lp-bg);cursor:pointer;text-align:center;padding:1rem;transition:border-color .15s,background .15s}
.lp-dropzone:hover,.lp-dropzone.is-over{border-color:var(--lp-accent);background:var(--lp-accent-soft)}
.lp-dropzone:focus-visible{outline:2px solid #818cf8;outline-offset:2px}
.lp-dropzone img{display:none;width:6rem;height:6rem;border-radius:9999px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lp-dropzone.has-image img{display:block}
.lp-dropzone.has-image .lp-drop-copy b{display:none}
.lp-drop-copy{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--lp-hint)}
.lp-drop-copy b{color:#fff;font-weight:600}
@media (max-width:700px){.lp-dropzone{width:100%;height:9rem}}
.lp-toggle{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;padding:0;color:#fff;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;width:max-content}
.lp-toggle span{font-weight:400;color:var(--lp-hint)}
.lp-toggle .lp-chevron{transition:transform .2s}
.lp-toggle.is-open .lp-chevron{transform:rotate(180deg)}
.lp-pair-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:32rem}
.lp-pair{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:.7rem;border:1px solid var(--lp-border);background:var(--lp-bg);padding:.75rem .9rem;color:#fff;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.lp-pair:hover{border-color:#3b4156}
.lp-pair.is-active{border-color:var(--lp-accent);background:var(--lp-accent-soft)}
.lp-pair svg{flex:none}
.lp-custom{display:flex;flex-direction:column;gap:.5rem;max-width:32rem;margin-top:.5rem}
.lp-input-unit{position:relative;display:flex;align-items:center;gap:.5rem}
.lp-input-unit>span{position:absolute;right:.9rem;font-size:.85rem;font-weight:600;color:var(--lp-muted);pointer-events:none}
.lp-input-unit>.lp-input{padding-right:4.5rem}
.lp-input-unit>button{flex:none}
.lp-info{display:flex;gap:1rem;align-items:flex-start;border-radius:.9rem;border:1px solid var(--lp-border-soft);background:rgba(255,255,255,.03);padding:1rem 1.1rem}
.lp-info-icon{display:inline-flex;flex:none;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;border:1px solid var(--lp-border);background:var(--lp-bg);color:#dfe3ee}
.lp-info-title{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.9rem;font-weight:600;color:#fff;margin-bottom:.2rem}
.lp-badge{display:inline-flex;border-radius:9999px;border:1px solid rgba(129,140,248,.4);background:var(--lp-accent-soft);padding:.1rem .55rem;font-size:.7rem;font-weight:600;color:#c7d2fe}
.lp-radio-row{display:flex;gap:1.25rem;flex-wrap:wrap}
.lp-radio{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:#e4e7ee;cursor:pointer}
.lp-radio input{accent-color:var(--lp-accent);width:1rem;height:1rem;margin:0}
.lp-check{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:#e4e7ee;cursor:pointer;white-space:nowrap}
.lp-check input{accent-color:var(--lp-accent);width:1rem;height:1rem;margin:0}
.lp-summary{display:flex;flex-direction:column;border-radius:.9rem;border:1px solid var(--lp-border-soft);overflow:hidden}
.lp-summary-row{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .9rem;font-size:.85rem;border-top:1px solid var(--lp-border-soft)}
.lp-summary-row:first-child{border-top:0}
.lp-summary-row span{color:var(--lp-hint)}
.lp-summary-row b{color:#fff;font-weight:500;text-align:right;min-width:0;word-break:break-all}
.lp-meta-row{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.8rem;color:var(--lp-hint)}
.lp-meta-row b{color:#fff;font-weight:500}
.lp-submit-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.lp-submit-row .main-btn[disabled]{opacity:.5;cursor:not-allowed}
.lp-result{border-radius:1rem;border:1px solid rgba(34,197,94,.3);background:rgba(34,197,94,.07);padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.lp-result-head{display:flex;gap:1rem;align-items:center}
.lp-result-head img{width:3.5rem;height:3.5rem;border-radius:9999px;object-fit:cover}
.lp-result-title{font-size:1.1rem;font-weight:600;color:#fff}
.lp-result-title span{color:#a5b4fc;font-weight:500}
.lp-result-grid{display:flex;flex-direction:column;gap:.5rem;font-size:.85rem}
.lp-result-grid span{display:block;color:var(--lp-hint);font-size:.75rem}
.lp-result-grid a{color:#c7d2fe}
.lp-result-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* wallet button ------------------------------------------------------------ */
.lp-wallet-wrap{position:relative;display:inline-flex}
.lp-wallet-btn{white-space:nowrap}
.lp-wallet-connected{display:inline-flex;align-items:center;gap:.5rem;font-family:inherit}
.lp-wallet-net{font-size:.75rem;color:var(--lp-muted);border-left:1px solid var(--lp-border-soft);padding-left:.5rem}
.lp-wallet-connected.is-wrong .lp-wallet-net{color:#fbbf24}
.lp-chain-dot{width:.5rem;height:.5rem;border-radius:9999px;background:var(--lp-green);box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.lp-chain-dot.is-wrong{background:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.2)}
.lp-menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:15rem;border-radius:.8rem;border:1px solid var(--lp-border);background:#10131c;box-shadow:0 25px 50px -12px rgba(0,0,0,.7);padding:.4rem;z-index:60;display:flex;flex-direction:column}
.lp-menu-head{padding:.5rem .6rem .6rem;border-bottom:1px solid var(--lp-border-soft);margin-bottom:.3rem}
.lp-menu-title{font-size:.85rem;font-weight:600;color:#fff}
.lp-menu-sub{font-size:.7rem;color:var(--lp-hint);word-break:break-all;font-family:ui-monospace,Menlo,monospace}
.lp-menu-item{text-align:left;background:none;border:0;border-radius:.5rem;padding:.5rem .6rem;font:inherit;font-size:.85rem;color:#e4e7ee;cursor:pointer}
.lp-menu-item:hover{background:rgba(255,255,255,.06)}
.lp-menu-item.is-active{color:#a5b4fc}
.lp-menu-item.is-danger{color:var(--lp-red)}
.lp-network-banner{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;border-radius:.8rem;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);padding:.7rem 1rem;font-size:.85rem;color:#fde68a;margin-bottom:1.25rem}

/* dialog + toasts ---------------------------------------------------------- */
.lp-dialog-root{position:fixed;inset:0;z-index:400;font-family:Inter,"Inter Fallback",ui-sans-serif,system-ui,sans-serif}
.lp-dialog-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.lp-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 2rem);max-width:24rem;border-radius:1rem;border:1px solid var(--lp-border);background:#10131c;padding:1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
.lp-provider-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem}
.lp-provider{display:flex;align-items:center;gap:.8rem;border-radius:.7rem;border:1px solid var(--lp-border);background:var(--lp-bg);padding:.7rem .9rem;color:#fff;font:inherit;font-weight:500;cursor:pointer;text-align:left}
.lp-provider:hover{border-color:var(--lp-accent);background:var(--lp-accent-soft)}
.lp-provider img{width:1.75rem;height:1.75rem;border-radius:.4rem}
.lp-provider-fallback{width:1.75rem;height:1.75rem;border-radius:.4rem;background:linear-gradient(135deg,#6366f1,#a855f7)}
.lp-toasts{position:fixed;right:1rem;bottom:1rem;z-index:500;display:flex;flex-direction:column;gap:.5rem;max-width:min(22rem,calc(100% - 2rem))}
.lp-toast{border-radius:.7rem;border:1px solid var(--lp-border);background:#10131c;color:#fff;padding:.7rem .9rem;font-size:.85rem;box-shadow:0 20px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;font-family:Inter,"Inter Fallback",ui-sans-serif,system-ui,sans-serif}
.lp-toast.is-in{opacity:1;transform:none}
.lp-toast.is-success{border-color:rgba(34,197,94,.4)}
.lp-toast.is-error{border-color:rgba(251,113,133,.5)}

/* coins list --------------------------------------------------------------- */
.lp-toolbar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1.25rem}
.lp-search{max-width:24rem}
.lp-coin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:1000px){.lp-coin-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.lp-coin-grid{grid-template-columns:1fr}}
.lp-coin{display:flex;gap:.9rem;border-radius:1rem;border:1px solid var(--lp-border-soft);background:rgba(255,255,255,.03);padding:1rem;text-decoration:none;color:inherit;transition:border-color .2s,background .2s,transform .2s}
.lp-coin:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.lp-coin-img{width:4rem;height:4rem;border-radius:.9rem;object-fit:cover;flex:none;background:var(--lp-bg)}
.lp-coin-body{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1}
.lp-coin-title{display:flex;gap:.5rem;align-items:baseline;min-width:0}
.lp-coin-title b{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-coin-title span{color:#a5b4fc;font-size:.8rem;font-weight:500;white-space:nowrap}
.lp-coin-desc{font-size:.8rem;color:var(--lp-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
.lp-coin-stats{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.78rem;color:#e4e7ee;font-variant-numeric:tabular-nums}
.lp-coin-stats i{font-style:normal;color:var(--lp-hint);margin-right:.3rem}
.lp-coin-foot{display:flex;justify-content:space-between;gap:.5rem;font-size:.72rem;color:var(--lp-hint);margin-top:auto}
.lp-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding:3rem 1rem;border-radius:1rem;border:1px dashed var(--lp-border)}
.lp-empty-title{font-size:1.05rem;font-weight:600;color:#fff}
.lp-center{display:flex;justify-content:center;margin-top:1.5rem}

/* coin page ---------------------------------------------------------------- */
.lp-coin-head{display:flex;gap:1.25rem;align-items:flex-start;margin-bottom:1.5rem}
.lp-coin-hero-img{width:6rem;height:6rem;border-radius:1.2rem;object-fit:cover;flex:none;background:var(--lp-bg);border:1px solid var(--lp-border-soft)}
.lp-coin-head-body{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.lp-coin-h1{margin:0;font-size:1.75rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.lp-coin-h1 span{color:#a5b4fc;font-weight:500;font-size:1.1rem}
.lp-chips{display:flex;gap:.5rem;flex-wrap:wrap}
button.eb-chip{cursor:pointer;font-family:inherit}
a.eb-chip{text-decoration:none}
.lp-coin-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:1.25rem;align-items:start}
@media (max-width:900px){.lp-coin-layout{grid-template-columns:1fr}.lp-coin-head{flex-direction:column}}
.lp-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.lp-stat{border-radius:.9rem;border:1px solid var(--lp-border-soft);background:rgba(255,255,255,.03);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.25rem}
.lp-stat span{font-size:.75rem;color:var(--lp-hint)}
.lp-stat b{font-size:1.05rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;word-break:break-word}
.lp-kv{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;padding:.45rem 0;border-top:1px solid var(--lp-border-soft)}
.lp-kv:first-of-type{border-top:0}
.lp-kv span{color:var(--lp-hint)}
.lp-kv b,.lp-kv a{color:#fff;font-weight:500;text-align:right}
.lp-kv a{color:#c7d2fe;text-decoration:none}
.lp-trade{gap:.9rem;position:sticky;top:5.5rem}
.lp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;border-radius:.7rem;background:var(--lp-bg);padding:.3rem;border:1px solid var(--lp-border-soft)}
.lp-tab{border:0;border-radius:.5rem;background:transparent;color:var(--lp-muted);padding:.55rem;font:inherit;font-weight:600;cursor:pointer}
.lp-tab.is-active{background:rgba(255,255,255,.08);color:#fff}
.lp-quote{min-height:1.2rem;font-size:.85rem;color:#e4e7ee}
.lp-slippage{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--lp-hint)}
.lp-slip{border:1px solid var(--lp-border);background:var(--lp-bg);color:#e4e7ee;border-radius:9999px;padding:.15rem .6rem;font:inherit;font-size:.75rem;cursor:pointer}
.lp-slip.is-active{border-color:var(--lp-accent);background:var(--lp-accent-soft);color:#c7d2fe}

/* home ----------------------------------------------------------------------*/
.lp-hero-frame{position:relative;margin:0 auto;max-width:80rem;border:1px solid rgba(37,36,50,.8);border-bottom:0;border-radius:1.5rem 1.5rem 0 0;background:rgba(5,6,8,.7);padding:1.5rem;box-shadow:0 25px 50px -12px rgba(17,1,38,.4)}
.lp-hero-frame-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.lp-hero-frame-head h3{margin:0;font-size:1rem;font-weight:600;color:#fff}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:800px){.lp-steps{grid-template-columns:1fr}}
.lp-step{display:flex;flex-direction:column;gap:.6rem;border-radius:1rem;border:1px solid var(--lp-border-soft);background:rgba(255,255,255,.03);padding:1.5rem}
.lp-step-n{display:inline-flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;border-radius:.6rem;border:1px solid rgba(129,140,248,.35);background:var(--lp-accent-soft);color:#c7d2fe;font-weight:600;font-size:.9rem}
.lp-step h3{margin:.25rem 0 0;font-size:1.05rem;font-weight:600;color:#fff}
.lp-step p{margin:0;font-size:.9rem;line-height:1.45rem;color:var(--lp-muted)}
.lp-fee-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:900px){.lp-fee-grid{grid-template-columns:repeat(2,1fr)}}
.lp-fee{border-radius:1rem;border:1px solid var(--lp-border-soft);background:rgba(255,255,255,.03);padding:1.25rem;display:flex;flex-direction:column;gap:.3rem}
.lp-fee b{font-size:1.9rem;font-weight:600;color:#fff;letter-spacing:-.02em}
.lp-fee span{font-size:.85rem;color:var(--lp-muted)}
.lp-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.lp-section-head p{margin:.35rem 0 0;color:var(--lp-muted)}

/* bonding curve ------------------------------------------------------------ */
.lp-progress{height:.6rem;width:100%;border-radius:9999px;background:rgba(255,255,255,.07);overflow:hidden}
.lp-progress-bar{height:100%;border-radius:9999px;background:linear-gradient(90deg,#6366f1,#a855f7);transition:width .4s ease}
.lp-progress.is-small{height:.35rem;margin:.1rem 0}
.lp-badge.is-green{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.12);color:#bbf7d0}
.lp-quick{display:flex;gap:.4rem;flex-wrap:wrap}
.lp-select{width:auto;padding-right:2rem;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239aa1b3'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:1.1rem}
.lp-select option{background:#10131c;color:#fff}
.lp-coin-h1 .lp-badge{vertical-align:middle;margin-left:.25rem}

/* launch mode picker (bonding curve vs instant Uniswap pool) */
.lp-modes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
@media (max-width:820px){.lp-modes{grid-template-columns:1fr}}
.lp-mode{position:relative;display:flex;flex-direction:column;gap:.5rem;border-radius:1rem;border:1px solid var(--lp-border-soft);background:rgba(255,255,255,.025);padding:1.1rem 1.2rem;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.lp-mode:hover{border-color:var(--lp-border)}
.lp-mode.is-active{border-color:rgba(129,140,248,.55);background:var(--lp-accent-soft);box-shadow:0 0 0 1px rgba(129,140,248,.25)}
.lp-mode input{position:absolute;opacity:0;width:0;height:0;margin:0}
.lp-mode-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.95rem;color:#fff}
.lp-mode-head b{font-weight:600}
.lp-mode-head::before{content:"";flex:none;width:1rem;height:1rem;border-radius:9999px;border:2px solid var(--lp-border);transition:border-color .15s,box-shadow .15s}
.lp-mode.is-active .lp-mode-head::before{border-color:var(--lp-accent);box-shadow:inset 0 0 0 3px var(--lp-accent)}
.lp-mode-copy{font-size:.82rem;line-height:1.5;color:var(--lp-hint)}
.lp-mode-copy b{color:#fff;font-weight:600}
.lp-mode:focus-within{outline:2px solid var(--lp-accent);outline-offset:2px}

/* donation callouts (100 % of fees to charity) */
.lp-donation{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.06)}
.lp-donation a{color:#bbf7d0;text-decoration:underline;text-underline-offset:2px}
.lp-cause{display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;align-items:center;border-radius:1.25rem;border:1px solid rgba(34,197,94,.35);background:linear-gradient(135deg,rgba(34,197,94,.10),rgba(129,140,248,.08));padding:2rem}
@media (max-width:820px){.lp-cause{grid-template-columns:1fr;padding:1.4rem}}
.lp-cause h3{margin:0 0 .6rem;font-size:1.5rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.lp-cause p{margin:0;color:#c9cfdb;font-size:.95rem;line-height:1.6}
.lp-cause-stats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.lp-cause-stat{border-radius:.9rem;border:1px solid var(--lp-border-soft);background:rgba(5,6,8,.55);padding:1rem 1.1rem}
.lp-cause-stat b{display:block;font-size:1.6rem;font-weight:600;color:#bbf7d0;letter-spacing:-.02em}
.lp-cause-stat span{font-size:.78rem;color:var(--lp-hint)}
.lp-cause-wallet{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline;font-size:.8rem;color:var(--lp-hint)}
.lp-cause-wallet a{color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.lp-fee.is-cause b{color:#bbf7d0}

/* ------------------------------------------------------------------ rebrand: blurred beach video
   A fixed video sits behind every page. It is anchored to its bottom edge, so scaling it up
   (--bg-zoom, driven by scroll in js/app.js) dives into the sea and the turtles at the bottom
   of the frame. The tint keeps the dark UI readable; cards get a glassy backdrop on top. */
.eb-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#06222a url("../images/bg-poster.jpg") center bottom/cover no-repeat}
.eb-bg-video,.eb-bg-canvas,.eb-bg-poster{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform:scale(var(--bg-zoom,1));transform-origin:50% 100%;filter:blur(var(--bg-blur,12px)) saturate(1.25) brightness(.95);will-change:transform,filter}
.eb-bg-poster{background:url("../images/bg-poster.jpg") center bottom/cover no-repeat}
/* Ambient drift: the aerial clip is slow (about 2% pixel change per frame), so a long, gentle
   pan keeps the background visibly alive. It lives on a wrapper, leaving `transform` on the
   media free for the scroll zoom. */
.eb-bg-move{position:absolute;inset:0;animation:eb-drift 44s ease-in-out infinite alternate;will-change:transform}
@keyframes eb-drift{from{transform:translate3d(-1.8%,1%,0) scale(1.09)}to{transform:translate3d(1.8%,-1%,0) scale(1.14)}}
@media (prefers-reduced-motion:reduce){.eb-bg-move{animation:none;transform:scale(1.09)}}
.eb-bg-canvas[hidden]{display:none}
/* light tint only: the video is the background, the UI floats on glass over it */
.eb-bg-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,8,.34) 0%,rgba(5,6,8,.22) 45%,rgba(2,18,24,.30) 100%)}
/* gradient-filled headlines must use drop-shadow (text-shadow bleeds through background-clip:text) */
.eb-page-hero h1,.main-title{text-shadow:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.eb-page-hero .desc-sm,.eb-page-hero p,.lp-section-head h2,.lp-section-head p,.eb-prose,.lp-steps h3,footer{text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.45)}
#app{position:relative;z-index:1}
.eb-page-bg{background:transparent}
body{background:#06222a}
/* glassy surfaces so text stays crisp over the moving background */
.lp-card,.lp-mode,.lp-cause,.lp-step,.lp-fee,.lp-coin,.lp-summary,.lp-info,.lp-empty{background-color:rgba(6,12,16,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.10)}
.lp-mode.is-active{background:rgba(129,140,248,.14)}
.lp-cause{background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(129,140,248,.10)),rgba(6,12,16,.55)}
.lp-input,.lp-select{background-color:rgba(5,8,12,.7)}
header[data-class-scrolled]{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media (prefers-reduced-motion:reduce){.eb-bg-video,.eb-bg-canvas{display:none!important}}
@media (max-width:640px){.eb-bg-video,.eb-bg-canvas,.eb-bg-poster{filter:blur(9px) saturate(1.25) brightness(.95)}}

/* ?bgdebug=1 shows which layer is painting the background */
.eb-bg-debug{position:fixed;left:.6rem;bottom:.6rem;z-index:9999;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.25);border-radius:.5rem;padding:.4rem .6rem;pointer-events:none;white-space:pre}

.lp-claim{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:.6rem}
.lp-claim>div{display:flex;flex-direction:column;gap:.1rem}
.lp-claim b{font-size:1.1rem;color:#fff}
.lp-cause-claim{grid-column:1/-1}

/* ---------------------------------------------------------------- floating nav pill
   The header is a rounded, translucent bubble over the video instead of a full-width bar.
   Glass comes from backdrop-filter; the border and shadow keep it readable over bright water. */
.eb-nav{padding-top:.7rem;padding-bottom:.2rem;transition:padding-top .2s ease}
.eb-nav-pill{position:relative;border-radius:999px;padding:.3rem .5rem .3rem 1.15rem;background:rgba(8,14,18,.30);border:1px solid rgba(255,255,255,.13);box-shadow:0 6px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease}
.eb-nav-scrolled .eb-nav-pill{background:rgba(6,11,15,.52);border-color:rgba(255,255,255,.16);box-shadow:0 10px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)}
.eb-nav-scrolled{padding-top:.45rem}
/* the mobile menu drops below the pill rather than over it */
#mobile-panel{top:3.6rem!important;padding-left:.25rem;padding-right:.25rem}
@media (max-width:640px){.eb-nav-pill{padding-left:.85rem;border-radius:1.6rem}}

/* X (Twitter) button in the pill */
.eb-x-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;color:#e8edf2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:background-color .18s ease,color .18s ease,transform .18s ease}
.eb-x-btn:hover{background:rgba(255,255,255,.15);color:#fff;transform:translateY(-1px)}
.eb-x-btn[hidden]{display:none}

/* ---------------------------------------------------------------- type
   Nunito: a humanist sans whose stems end in rounded terminals, which is what the wordmark's
   artwork does too, so the two sit together instead of arguing. Rounded without turning soft:
   at 700 the headline still has weight, and the lowercase stays even in long paragraphs.
   Self-hosted latin variable font, with the original Inter left as the fallback. */
@font-face{font-family:"Nunito";src:url("../fonts/Nunito.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{--eb-font-text:"Nunito","Inter","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
      --eb-font-display:var(--eb-font-text)}

html,body,button,input,textarea,select,.lp-dialog-root,.lp-toast{font-family:var(--eb-font-text)}
h1,h2,h3,h4,.main-title,.eb-page-hero h1,.lp-coin-h1,.small-title,.lp-cause-stat b,.lp-stat b{font-family:var(--eb-font-display);letter-spacing:-.015em}

/* headlines: sentence case, a touch heavier than the text so the round shapes stay firm */
.main-title,.small-title{text-transform:none;font-weight:700;letter-spacing:-.02em;line-height:1.09}
.eb-chip{text-transform:none;letter-spacing:0;font-weight:600;font-size:.8rem}

.lp-mono,code,pre,kbd,samp,.lp-menu-sub,.lp-cause-wallet a{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* figures line up in tables and stat rows */
.lp-stat,.lp-coin-stats,.lp-kv,.lp-summary,.lp-claim b{font-variant-numeric:tabular-nums}

/* The beneficiary's name, drawn from the artwork the site owner supplied: the PNG is used as a
   mask, so the mark takes the colour of the text around it and scales with the font size instead
   of sitting in a white box. The span still contains the word for screen readers and search
   engines. Without mask support the rule below never applies and the plain heavy text shows. */
.eb-wwf{font-weight:800;letter-spacing:-.03em}
@supports ((-webkit-mask-image:url(#m)) or (mask-image:url(#m))){
  /* flex:none keeps the mark from being squeezed when it lands inside a flex row (the footer) */
  .eb-wwf{display:inline-block;flex:none;width:2.77em;height:.78em;aspect-ratio:771/217;vertical-align:-.03em;
    background:currentColor;letter-spacing:0;font-weight:inherit;text-indent:-9999px;overflow:hidden;white-space:nowrap;
    -webkit-mask:url("../images/wordmark.png") no-repeat center/contain;mask:url("../images/wordmark.png") no-repeat center/contain}
  /* .main-title paints its text with a gradient clipped to the glyphs, which leaves currentColor
     transparent; the mark takes the gradient's own near-white instead so it does not vanish. */
  .main-title .eb-wwf,.eb-page-hero h1 .eb-wwf{background:#fbfcfe}
}

/* the brand mark: the artwork keeps its own colour, so it is an image rather than a glyph */
/* width is explicit: the site's reset caps images at max-width:100%, which resolves to zero
   inside the header's inline-flex wrapper and collapses an auto-width mark (148/182 = .813) */
.eb-logo{display:block;height:1.55em;width:1.26em;max-width:none;flex:none}

/* ---------------------------------------------------------------- official coin
   The Echobase coin, pinned above the live launches. Green ribbon and border so it reads as
   the one coin the site itself vouches for, against copies that borrow the name. */
.lp-official-wrap{margin:0 auto 1rem;max-width:80rem}
.lp-official{position:relative;border-radius:1.5rem;border:1px solid rgba(68,182,119,.45);background:rgba(5,6,8,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:1.25rem 1.5rem 1.5rem;box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.lp-official-ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:1rem}
.lp-badge.is-official{border-color:rgba(68,182,119,.6);background:rgba(68,182,119,.16);color:#a7f3c4;text-transform:uppercase;letter-spacing:.06em;font-size:.66rem}
.lp-official-body{display:grid;grid-template-columns:auto 1fr auto;gap:1.25rem;align-items:start}
.lp-official-img{width:6rem;height:6rem;border-radius:1.2rem;object-fit:cover;background:var(--lp-bg);border:1px solid rgba(255,255,255,.1)}
.lp-official-title{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;margin-bottom:.3rem}
.lp-official-title b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.lp-official-title>span{font-size:1.05rem;color:#a7f3c4;font-weight:700}
.lp-official-main .lp-progress{margin:.8rem 0}
.lp-official-stats{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:.6rem 0 .9rem;font-size:.95rem;color:#fff;font-variant-numeric:tabular-nums}
.lp-official-stats i{display:block;font-style:normal;font-size:.72rem;color:var(--lp-hint);text-transform:uppercase;letter-spacing:.05em}
.lp-official-cta{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;min-width:12rem;text-align:right}
.lp-official-cta code{font-size:.7rem;word-break:break-all;color:#cbd5e1}
.lp-coin.is-official{border-color:rgba(68,182,119,.45)}
@media (max-width:760px){.lp-official-body{grid-template-columns:auto 1fr}.lp-official-cta{grid-column:1/-1;align-items:stretch;text-align:left}.lp-official-cta .main-btn{width:100%}}