:root{
  --bg-top:#1B3A78; --bg-mid:#15275C; --bg-bot:#0E1A40;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.09);
  --line:rgba(160,185,240,.16); --line-2:rgba(160,185,240,.28);
  --pink:#F06DA6; --pink-deep:#E8568F; --peri:#7C88DE; --aqua:#67D2EC;
  --coral:#FF6F8B; --mint:#5FE0BC;
  --bone:#EAF1FF; --text:#C7D3F0; --muted:#90A0CA; --gold:#F3C969;
  --grad:linear-gradient(135deg,var(--pink),var(--peri));
  --grad-soft:linear-gradient(135deg,rgba(240,109,166,.18),rgba(124,136,222,.18));
  --radius:18px; --maxw:680px;
  --display:"Nunito",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; color:var(--text); font-family:var(--body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 380px at 50% -6%, rgba(150,205,255,.20), transparent 70%),
    radial-gradient(700px 300px at 85% 8%, rgba(240,109,166,.10), transparent 70%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 42%, var(--bg-bot) 100%);
  background-attachment:fixed;
}

/* drifting bubbles */
.bubbles{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.bubbles::before,.bubbles::after{
  content:""; position:absolute; left:0; right:0; top:0; height:200%;
  background-repeat:repeat;
  animation:rise-bubbles 26s linear infinite;
}
.bubbles::before{
  background-image:
    radial-gradient(3px 3px at 12% 20%, rgba(255,255,255,.20), transparent),
    radial-gradient(2px 2px at 32% 60%, rgba(255,255,255,.16), transparent),
    radial-gradient(4px 4px at 58% 35%, rgba(255,255,255,.14), transparent),
    radial-gradient(2px 2px at 78% 75%, rgba(255,255,255,.18), transparent),
    radial-gradient(3px 3px at 90% 50%, rgba(255,255,255,.12), transparent);
  background-size:100% 50%;
}
.bubbles::after{
  background-image:
    radial-gradient(2px 2px at 20% 80%, rgba(255,255,255,.12), transparent),
    radial-gradient(3px 3px at 46% 30%, rgba(255,255,255,.10), transparent),
    radial-gradient(2px 2px at 68% 65%, rgba(255,255,255,.12), transparent),
    radial-gradient(2px 2px at 86% 25%, rgba(255,255,255,.10), transparent);
  background-size:100% 50%; animation-duration:40s; opacity:.7;
}
@keyframes rise-bubbles{from{transform:translateY(0)} to{transform:translateY(-50%)}}

/* top bar */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px; backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(14,26,64,.72), rgba(14,26,64,.35));
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:11px}
.brand-mark{width:40px; height:auto; filter:drop-shadow(0 2px 8px rgba(240,109,166,.4))}
.brand-name{font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--bone); letter-spacing:-.5px}
.brand-accent{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.topbar-right{display:flex; align-items:center; gap:10px}

.badge{font-family:var(--mono); font-size:.72rem; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--glass)}
.badge-off{color:var(--muted)}
.badge-on{color:#0c1430; border:none; background:linear-gradient(135deg,var(--aqua),var(--mint)); font-weight:700}
.badge-wrong{color:#fff; border-color:rgba(255,111,139,.5); background:rgba(255,111,139,.18)}

/* buttons */
.btn{font-family:var(--display); font-weight:700; font-size:.95rem; cursor:pointer;
  border-radius:12px; border:1px solid transparent; padding:9px 17px; transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.btn:focus-visible{outline:2px solid var(--aqua); outline-offset:2px}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 6px 18px rgba(240,109,166,.32)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 10px 26px rgba(240,109,166,.42)}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary:disabled{background:rgba(255,255,255,.08); color:var(--muted); cursor:not-allowed; box-shadow:none}
.btn-ghost{background:var(--glass); color:var(--text); border-color:var(--line-2); backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--aqua); color:var(--bone)}
.btn.icon{padding:9px 12px; font-size:1rem}
.btn-block{width:100%; padding:14px; margin-top:8px; font-size:1.05rem}
.small{font-size:.8rem}

/* hero */
.hero{position:relative; height:clamp(180px,30vw,280px); margin-bottom:-40px; z-index:1; overflow:hidden}
.hero-img{position:absolute; inset:0; background:url("assets/hero.jpg") center 38%/cover no-repeat}
.hero-fade{position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(21,39,92,.25) 0%, rgba(15,26,64,0) 30%, rgba(15,26,64,.65) 78%, var(--bg-mid) 100%),
    linear-gradient(90deg, rgba(15,26,64,.5), transparent 18%, transparent 82%, rgba(15,26,64,.5));
}

/* layout */
.wrap{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto 60px; padding:0 18px}
.headline{font-family:var(--display); font-weight:900; font-size:clamp(1.5rem,4vw,2.1rem); color:var(--bone);
  letter-spacing:-.6px; line-height:1.1; margin:18px 0 8px; text-shadow:0 2px 20px rgba(0,0,0,.35)}
.lede{color:var(--text); font-size:1rem; margin:0 0 26px; max-width:54ch}

.tabs{display:flex; gap:6px; padding:5px; margin-bottom:20px;
  background:var(--glass); border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(10px)}
.tab{flex:1; background:none; border:none; color:var(--muted); font-family:var(--display); font-weight:700;
  font-size:.95rem; padding:10px 8px; cursor:pointer; border-radius:10px; transition:.15s}
.tab:hover{color:var(--text)}
.tab.is-active{color:#fff; background:var(--grad); box-shadow:0 4px 14px rgba(240,109,166,.3)}
.tab:focus-visible{outline:2px solid var(--aqua); outline-offset:1px}

.panel{display:none; animation:rise .28s ease}
.panel.is-active{display:block}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* glass cards */
.card{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  backdrop-filter:blur(16px); box-shadow:0 12px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}
.card-intro{margin:0 0 18px; color:var(--muted); font-size:.9rem; line-height:1.55}
.card-intro strong{color:var(--bone); font-weight:700}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:.74rem; color:var(--muted); font-weight:600; letter-spacing:.4px; text-transform:uppercase}
input,.select{
  background:rgba(8,16,40,.5); border:1px solid var(--line); color:var(--bone);
  border-radius:12px; padding:12px 13px; font-family:var(--body); font-size:1rem; width:100%;
}
input::placeholder{color:#6f7fab}
input:focus,.select:focus{outline:none; border-color:var(--aqua); box-shadow:0 0 0 3px rgba(103,210,236,.18)}
input[readonly]{color:var(--text)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}

/* swap */
.swap-row{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.amount-line{display:flex; align-items:center; gap:8px; background:rgba(8,16,40,.5);
  border:1px solid var(--line); border-radius:12px; padding:4px 8px 4px 4px}
.amount-line input{border:none; background:none; box-shadow:none !important; font-family:var(--mono); font-size:1.3rem}
.amount-line .sym{font-family:var(--display); font-weight:800; color:#fff; font-size:.9rem; white-space:nowrap;
  background:var(--grad); padding:7px 13px; border-radius:9px; box-shadow:0 3px 10px rgba(240,109,166,.3)}
.flip{align-self:center; width:40px; height:40px; border-radius:50%; cursor:pointer; color:#fff;
  background:var(--grad); border:3px solid var(--bg-mid); font-size:1rem; margin:-4px 0;
  box-shadow:0 4px 14px rgba(124,136,222,.4); transition:transform .15s}
.flip:hover{transform:rotate(180deg)}
.center{text-align:center}

/* token list */
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.token-list{display:flex; flex-direction:column; gap:12px}
.token-card{background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; backdrop-filter:blur(12px);
  transition:border-color .15s, transform .15s}
.token-card:hover{border-color:var(--line-2); transform:translateY(-1px)}
.token-card .meta{min-width:0}
.token-card .tk-name{font-family:var(--display); font-weight:800; color:var(--bone); font-size:1.1rem}
.token-card .tk-sym{color:var(--pink); font-family:var(--mono); font-size:.8rem; margin-left:7px}
.token-card .tk-sub{color:var(--muted); font-size:.78rem; font-family:var(--mono); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.token-card .tk-actions{display:flex; gap:8px; flex-shrink:0; align-items:center}
.tk-actions a{color:var(--aqua); font-size:.78rem; text-decoration:none}
.tk-actions a:hover{text-decoration:underline}
.empty{color:var(--muted); text-align:center; padding:160px 0 36px; font-family:var(--display); font-weight:700; font-size:1.05rem;
  background:url("assets/mascot.png") center 0/auto 132px no-repeat;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}

/* settings drawer */
.drawer{position:fixed; inset:0; background:rgba(8,14,34,.62); display:flex; justify-content:flex-end; z-index:40; backdrop-filter:blur(3px)}
.drawer[hidden]{display:none}     /* the hidden attribute must win over display:flex */
.drawer-card{width:min(430px,100%); height:100%; background:linear-gradient(180deg,#16275a,#101d44);
  border-left:1px solid var(--line-2); padding:26px; overflow:auto; box-shadow:-20px 0 60px rgba(0,0,0,.45)}
.drawer-card h3{font-family:var(--display); font-weight:800; color:var(--bone); margin:0 0 6px; font-size:1.3rem}
.drawer-card input{font-family:var(--mono); font-size:.82rem}
.drawer-card code{font-family:var(--mono); color:var(--aqua); font-size:.8em}
.drawer-actions{display:flex; gap:10px; margin-top:18px}

/* toast */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:rgba(20,34,75,.92); border:1px solid var(--line-2); border-left:4px solid var(--aqua);
  color:var(--bone); padding:13px 18px; border-radius:12px; max-width:90vw; z-index:50;
  font-size:.9rem; box-shadow:0 16px 40px rgba(0,0,0,.5); backdrop-filter:blur(10px); animation:rise .2s ease}
.toast[hidden]{display:none}
.toast.err{border-left-color:var(--coral)}
.toast.work{border-left-color:var(--gold)}
.toast a{color:var(--aqua)}
.muted{color:var(--muted)}

/* footer */
.foot{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:34px;
  color:var(--muted); font-size:.82rem; font-family:var(--display); font-weight:600}
.foot-mark{width:26px; height:auto; opacity:.85}

@media (max-width:560px){
  .grid2{grid-template-columns:1fr}
  .token-card{flex-direction:column; align-items:flex-start}
  .brand-name{font-size:1.3rem}
  .topbar{padding:12px 16px}
  .btn-primary{padding:8px 13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ============ nektonswap v2: Tokens / Trenches / Swap ============ */

/* wider app shell; tabs centered below sticky header */
.wrap{max-width:1080px}
.tabs{max-width:1080px; margin:18px auto; width:calc(100% - 36px)}

/* header search */
.topbar{gap:16px}
.topbar-search{flex:1; max-width:440px; display:flex}
.topbar-search input{
  background:rgba(8,16,40,.5); border:1px solid var(--line); color:var(--bone);
  border-radius:11px; padding:9px 13px; font-size:.9rem; width:100%; font-family:var(--body);
}
.topbar-search input:focus{outline:none; border-color:var(--aqua); box-shadow:0 0 0 3px rgba(103,210,236,.16)}
@media (max-width:820px){ .topbar-search{display:none} }

/* segmented control */
.segmented{display:inline-flex; gap:4px; padding:4px; background:var(--glass); border:1px solid var(--line); border-radius:11px; backdrop-filter:blur(8px)}
.seg{background:none; border:none; color:var(--muted); font-family:var(--display); font-weight:700; font-size:.86rem; padding:7px 16px; border-radius:8px; cursor:pointer; transition:.15s}
.seg:hover{color:var(--text)}
.seg.is-active{color:#fff; background:var(--grad); box-shadow:0 3px 10px rgba(240,109,166,.3)}
.center-seg{display:flex; justify-content:center; margin:0 auto 18px; width:max-content}

.toolbar-right{display:flex; align-items:center; gap:12px}

/* avatar */
.avatar{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex-shrink:0;
  border-radius:13px; font-family:var(--display); font-weight:800; font-size:.82rem; color:#fff;
  letter-spacing:-.3px; box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25)}

/* token grid */
.token-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px}
.tcard{background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  backdrop-filter:blur(14px); box-shadow:0 10px 34px rgba(0,0,0,.3); transition:transform .15s, border-color .15s; display:flex; flex-direction:column; gap:13px}
.tcard:hover{transform:translateY(-2px); border-color:var(--line-2)}
.tcard-top{display:flex; align-items:center; gap:11px; min-width:0}
.tcard-id{min-width:0}
.tcard-name{font-family:var(--display); font-weight:800; color:var(--bone); font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tcard-sym{color:var(--muted); font-size:.76rem; font-family:var(--mono); margin-top:2px}
.tcard-stats{display:grid; grid-template-columns:1fr 1fr; gap:9px 10px}
.tcard-stats div{display:flex; flex-direction:column; gap:2px}
.tcard-stats span{font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.tcard-stats b{font-family:var(--mono); font-size:.84rem; color:var(--bone); font-weight:700}
.tcard-stats .mono{font-size:.74rem; color:var(--text)}
.tcard-actions{display:flex; align-items:center; gap:8px; margin-top:2px}
.tcard-actions .btn{flex:1}
.tcard-link{color:var(--aqua); text-decoration:none; font-size:1rem; padding:0 4px}
.small.btn,.btn.small{padding:7px 12px; font-size:.82rem}

/* trenches */
.trench-head{display:flex; align-items:center; gap:9px; color:var(--text); font-size:.9rem; margin-bottom:16px; font-family:var(--display); font-weight:700}
.live-dot{width:9px; height:9px; border-radius:50%; background:#46e08a; box-shadow:0 0 0 0 rgba(70,224,138,.6); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(70,224,138,.55)}70%{box-shadow:0 0 0 9px rgba(70,224,138,0)}100%{box-shadow:0 0 0 0 rgba(70,224,138,0)}}
.trench-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:760px){ .trench-cols{grid-template-columns:1fr} }
.trench-col{background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:14px; backdrop-filter:blur(14px)}
.trench-title{font-family:var(--display); font-weight:800; color:var(--bone); font-size:1rem; margin:4px 6px 12px}
.trench-list{display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow:auto}
.feed-row{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px; cursor:pointer;
  background:rgba(8,16,40,.35); border:1px solid transparent; transition:.14s; animation:rise .3s ease}
.feed-row:hover{border-color:var(--line-2); background:rgba(8,16,40,.6)}
.feed-mid{flex:1; min-width:0}
.feed-name{font-family:var(--display); font-weight:700; color:var(--bone); font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.feed-sym{color:var(--pink); font-family:var(--mono); font-size:.74rem; margin-left:4px}
.feed-sub{color:var(--muted); font-size:.74rem; font-family:var(--mono); margin-top:2px}
.feed-age{font-family:var(--mono); font-size:.74rem; color:var(--aqua); flex-shrink:0}
.trade-badge{font-family:var(--display); font-weight:800; font-size:.66rem; padding:5px 8px; border-radius:8px; flex-shrink:0; width:42px; text-align:center}
.trade-badge.buy{background:rgba(70,224,138,.18); color:#5fe0a0}
.trade-badge.sell{background:rgba(255,111,139,.18); color:#ff8aa0}

/* swap section: keep cards narrow + centered */
#panel-swap{max-width:560px; margin:0 auto}

/* launch modal */
.modal{position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(8,14,34,.66); backdrop-filter:blur(5px); animation:rise .2s ease}
.modal[hidden]{display:none}
.modal-card{position:relative; width:min(460px,100%); background:linear-gradient(180deg,#1a2c60,#121f48);
  border:1px solid var(--line-2); border-radius:20px; padding:26px; box-shadow:0 24px 70px rgba(0,0,0,.5)}
.modal-card h3{font-family:var(--display); font-weight:800; color:var(--bone); margin:0 0 6px; font-size:1.4rem}
.modal-x{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:9px; cursor:pointer;
  background:var(--glass); border:1px solid var(--line); color:var(--text); font-size:.85rem}
.modal-x:hover{border-color:var(--aqua); color:var(--bone)}

.mono{font-family:var(--mono)}

/* ============ Create modal v2 + token image/socials ============ */
.launch-card{max-height:92vh; overflow:auto; width:min(480px,100%)}
.modal-sub{margin:0 0 18px}
.launch-identity{display:flex; gap:14px; align-items:stretch; margin-bottom:6px}
.launch-id-fields{flex:1; display:flex; flex-direction:column; justify-content:center}
.launch-id-fields .field{margin-bottom:10px}
.launch-id-fields .field:last-child{margin-bottom:0}

/* image dropzone */
.img-drop{position:relative; width:96px; height:96px; flex-shrink:0; border-radius:16px; cursor:pointer;
  border:2px dashed var(--line-2); background:rgba(8,16,40,.4); display:flex; align-items:center; justify-content:center;
  transition:.15s; overflow:hidden}
.img-drop:hover,.img-drop.drag{border-color:var(--aqua); background:rgba(103,210,236,.08)}
.img-preview{position:absolute; inset:0; background-size:cover; background-position:center}
.img-preview.has-img + .img-hint{opacity:0}
.img-hint{position:relative; z-index:1; text-align:center; color:var(--muted); font-family:var(--display); font-weight:700; font-size:.74rem; line-height:1.3; pointer-events:none; transition:.15s}

/* sections */
.launch-section{margin-top:18px}
.section-label{display:block; font-family:var(--display); font-weight:800; color:var(--bone); font-size:.82rem;
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px}
.section-label em{font-style:normal; color:var(--muted); font-weight:600; font-size:.78rem; text-transform:none; letter-spacing:0; margin-left:6px}

/* icon inputs */
.input-icon{display:flex; align-items:center; gap:0; background:rgba(8,16,40,.5); border:1px solid var(--line);
  border-radius:11px; margin-bottom:9px; overflow:hidden; transition:.15s}
.input-icon:focus-within{border-color:var(--aqua); box-shadow:0 0 0 3px rgba(103,210,236,.16)}
.input-icon span{width:42px; text-align:center; color:var(--aqua); font-size:.95rem; flex-shrink:0}
.input-icon input{border:none; background:none; box-shadow:none !important; padding-left:0; border-radius:0}

/* dev buy */
.devbuy{background:var(--grad-soft); border:1px solid rgba(240,109,166,.28); border-radius:16px; padding:16px; margin-top:20px}
.devbuy .section-label{margin-bottom:6px}
.devbuy-note{margin:0 0 12px; line-height:1.5}
.chips{display:flex; gap:8px; margin-top:10px}
.chip{flex:1; background:rgba(8,16,40,.45); border:1px solid var(--line-2); color:var(--text);
  font-family:var(--mono); font-size:.84rem; padding:8px; border-radius:10px; cursor:pointer; transition:.13s}
.chip:hover{border-color:var(--aqua); color:var(--bone); background:rgba(103,210,236,.1)}

/* image avatar (token cards / feed) */
.avatar-img{background-size:cover !important; background-position:center; color:transparent}

/* socials on cards */
.tcard-top{position:relative}
.socials{display:flex; gap:6px; margin-left:auto; align-self:flex-start}
.soc{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px;
  background:rgba(8,16,40,.5); border:1px solid var(--line); color:var(--aqua); text-decoration:none; font-size:.8rem; transition:.13s}
.soc:hover{border-color:var(--aqua); background:rgba(103,210,236,.12)}

/* ============ tabs-in-header + Trenches table + bio ============ */
.topbar{flex-wrap:wrap}
.topbar .tabs{margin:0; width:auto; max-width:none; padding:4px; flex-shrink:0}
.topbar-search{flex:1 1 180px; min-width:120px}
@media (max-width:920px){
  .topbar .tabs{order:3; width:100%; justify-content:center}
  .topbar-search{order:4}
}

textarea{background:rgba(8,16,40,.5); border:1px solid var(--line); color:var(--bone);
  border-radius:12px; padding:11px 13px; font-family:var(--body); font-size:.95rem; width:100%; resize:vertical; line-height:1.45}
textarea::placeholder{color:#6f7fab}
textarea:focus{outline:none; border-color:var(--aqua); box-shadow:0 0 0 3px rgba(103,210,236,.16)}

/* trench filters */
.trench-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.filter{background:var(--glass); border:1px solid var(--line); color:var(--muted); font-family:var(--display);
  font-weight:700; font-size:.84rem; padding:8px 15px; border-radius:10px; cursor:pointer; transition:.13s; backdrop-filter:blur(8px)}
.filter:hover{color:var(--text); border-color:var(--line-2)}
.filter.is-active{color:#fff; background:var(--grad); border-color:transparent; box-shadow:0 3px 10px rgba(240,109,166,.3)}

/* trench table */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); backdrop-filter:blur(14px); box-shadow:0 12px 40px rgba(0,0,0,.3)}
.trench-table{width:100%; border-collapse:collapse; min-width:660px}
.trench-table thead th{text-align:left; color:var(--muted); font-family:var(--display); font-weight:800;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; padding:13px 16px; border-bottom:1px solid var(--line)}
.trench-table th.num, .trench-table td.num{text-align:right}
.trench-table tbody tr{border-bottom:1px solid rgba(160,185,240,.07); cursor:pointer; transition:.12s}
.trench-table tbody tr:hover{background:rgba(255,255,255,.045)}
.trench-table td{padding:12px 16px; font-family:var(--mono); font-size:.85rem; color:var(--bone); vertical-align:middle; white-space:nowrap}
.t-token{display:flex; align-items:center; gap:11px}
.t-token .avatar{width:36px; height:36px; border-radius:11px; font-size:.72rem}
.t-id{min-width:0}
.t-name{font-family:var(--display); font-weight:700; color:var(--bone); font-size:.92rem}
.t-sym{color:var(--pink); font-size:.74rem; margin-left:4px}
.t-age{color:var(--muted); font-size:.73rem; margin-top:1px}
.delta{font-size:.76rem}
.delta.up{color:#46e08a} .delta.down{color:#ff8aa0} .delta.flat{color:var(--muted)}
.t-empty{text-align:center; color:var(--muted); padding:44px; font-family:var(--display); font-weight:700}

/* bio on cards */
.tcard-bio{color:var(--muted); font-size:.8rem; line-height:1.45; margin-top:-3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* copyable contract address */
.ca{display:inline-flex; align-items:center; gap:5px; background:rgba(8,16,40,.5); border:1px solid var(--line);
  color:var(--muted); font-family:var(--mono); font-size:.72rem; padding:4px 8px; border-radius:8px; cursor:pointer; transition:.13s}
.ca:hover{border-color:var(--aqua); color:var(--aqua); background:rgba(103,210,236,.08)}
.ca-ico{font-size:.82rem; opacity:.8}
.tcard-ca{margin-top:2px}
.t-age .ca{padding:2px 6px; font-size:.68rem; margin-left:2px}

/* ============ token detail page ============ */
.detail-back{margin-bottom:16px}
.detail-top{margin-bottom:18px}
.detail-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.detail-avatar{width:72px; height:72px; border-radius:20px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:1.3rem; color:#fff; background-size:cover; background-position:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25)}
.detail-id{min-width:0}
.detail-id h2{font-family:var(--display); font-weight:900; color:var(--bone); margin:0; font-size:1.7rem; line-height:1.1}
.detail-sym{font-family:var(--mono); color:var(--pink); font-size:.92rem; margin-top:3px}
.detail-sym .muted{color:var(--muted)}
.detail-id .socials{margin-top:8px}
.detail-ca{margin-left:auto}
.detail-bio{color:var(--text); font-size:.95rem; line-height:1.55; margin:16px 0 0; max-width:760px}
.detail-stats{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:18px}
@media (max-width:760px){ .detail-stats{grid-template-columns:repeat(3,1fr)} .detail-ca{margin-left:0; width:100%} }
.dstat{background:var(--glass); border:1px solid var(--line); border-radius:13px; padding:11px 13px; backdrop-filter:blur(10px)}
.dstat span{display:block; font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.dstat b{font-family:var(--mono); font-size:.92rem; color:var(--bone); font-weight:700; margin-top:3px; display:block}

.detail-grid{display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start}
@media (max-width:820px){ .detail-grid{grid-template-columns:1fr} }
.detail-chart{padding:18px}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
.chart-title{font-family:var(--display); font-weight:800; color:var(--bone); font-size:1rem}
.chart-box{width:100%}
.pchart{width:100%; height:auto; display:block}
.vbar{fill:var(--aqua); opacity:.45}
.chart-empty{display:flex; align-items:center; justify-content:center; min-height:180px; color:var(--muted); text-align:center; font-size:.9rem; padding:20px}

.detail-trade{padding:18px}
.detail-trade .segmented{display:flex; width:100%; margin-bottom:14px}
.detail-trade .seg{flex:1; text-align:center}
.detail-trade [data-dmode="buy"].is-active{background:linear-gradient(135deg,#3fd08a,#2bb673)}
.detail-trade [data-dmode="sell"].is-active{background:linear-gradient(135deg,#ff7d97,#e8566f)}

/* candlestick chart container */
.chart-box{width:100%; min-height:300px; position:relative}
.chart-box > div{border-radius:10px; overflow:hidden}

/* price impact + burned-liquidity badges */
.imp{font-family:var(--mono); font-size:.72rem; padding:2px 7px; border-radius:7px; margin-left:6px}
.imp-low{background:rgba(70,224,138,.14); color:#5fe0a0}
.imp-mid{background:rgba(239,159,39,.16); color:#f0b95c}
.imp-high{background:rgba(255,111,139,.18); color:#ff8aa0}
.burn-badge{display:inline-flex; align-items:center; gap:5px; background:rgba(70,224,138,.12); border:1px solid rgba(70,224,138,.3);
  color:#5fe0a0; font-family:var(--display); font-weight:700; font-size:.72rem; padding:4px 10px; border-radius:9px}

/* fixed supply display */
.fixed-supply{background:rgba(8,16,40,.35); border:1px dashed var(--line); color:var(--text);
  border-radius:12px; padding:11px 13px; font-family:var(--mono); font-size:.92rem}
.fixed-supply span{color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; margin-left:6px}

/* dev buy estimate */
.devbuy-est{margin:2px 0 10px; min-height:1em}
.est-warn{color:#f0b95c !important}

/* chart timeframe + mode controls */
.chart-head{flex-wrap:wrap; gap:8px}
.chart-ctrls{display:flex; gap:8px; flex-wrap:wrap}
.tfgroup{display:inline-flex; gap:2px; padding:3px; background:rgba(8,16,40,.45); border:1px solid var(--line); border-radius:9px}
.tfbtn{background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:.72rem; padding:4px 9px; border-radius:7px; cursor:pointer; transition:.12s}
.tfbtn:hover{color:var(--text)}
.tfbtn.is-active{color:#fff; background:var(--grad)}

/* launch as a page */
.launch-page{max-width:520px; margin:0 auto; padding:26px}
.launch-page h3{font-family:var(--display); font-weight:800; color:var(--bone); margin:0 0 6px; font-size:1.4rem}

/* portfolio */
.pf-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px}
.pf-title{font-family:var(--display); font-weight:900; color:var(--bone); margin:0; font-size:1.5rem}
.pf-total{font-family:var(--mono); font-weight:700; color:var(--bone); font-size:1.2rem}
.pf-list{display:flex; flex-direction:column; gap:9px; max-width:760px}
.pf-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; cursor:pointer;
  background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); transition:.13s}
.pf-row:hover{border-color:var(--line-2); transform:translateY(-1px)}
.pf-mid{flex:1; min-width:0}
.pf-name{font-family:var(--display); font-weight:700; color:var(--bone); font-size:.95rem}
.pf-sub{color:var(--muted); font-size:.76rem; font-family:var(--mono); margin-top:2px}
.pf-val{font-family:var(--mono); font-weight:700; color:var(--bone)}
.pf-creator{font-size:.64rem; background:var(--grad-soft); border:1px solid rgba(240,109,166,.3); color:var(--pink); padding:2px 7px; border-radius:7px; margin-left:6px; font-family:var(--display)}
.empty{padding:36px; text-align:center; color:var(--muted); font-family:var(--display); font-weight:700;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--radius)}

/* add-image state on detail avatar */
.av-add{cursor:pointer; border:2px dashed rgba(255,255,255,.45); font-size:.72rem !important; line-height:1.2; text-align:center}
.av-add:hover{border-color:var(--aqua)}

/* creator fees card */
.fees-card{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--grad-soft); border:1px solid rgba(240,109,166,.28); border-radius:14px; padding:12px 16px; margin-top:14px; max-width:760px}
.fees-card[hidden]{display:none}
.fees-earned{color:var(--text); font-size:.88rem}
.fees-earned b{color:var(--bone); font-family:var(--mono)}

/* chart legend (OHLC + %) */
.chart-box{position:relative}
.chart-legend{position:absolute; top:6px; left:8px; z-index:5; display:flex; gap:7px; align-items:baseline;
  font-family:var(--mono); font-size:.72rem; pointer-events:none; flex-wrap:wrap}
.chart-legend span{color:var(--muted)}
.chart-legend b{font-weight:700}
.lg-up{color:#26a69a} .lg-dn{color:#ef5350}

/* fullscreen chart */
.chart-fs{position:fixed !important; inset:0; z-index:400; border-radius:0 !important; margin:0;
  background:#0d142e !important; display:flex; flex-direction:column; padding:18px 22px !important}
.chart-fs .chart-box{flex:1}
.no-scroll{overflow:hidden}

/* creator link + banner */
.creator-link{color:var(--aqua); text-decoration:none; font-family:var(--mono)}
.creator-link:hover{text-decoration:underline}
.creator-banner{display:flex; align-items:center; gap:10px; background:var(--glass); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; margin-bottom:12px; color:var(--text); font-size:.9rem}
.creator-banner b{font-family:var(--mono); color:var(--bone)}

/* king of the hill */
.koth{display:flex; align-items:center; gap:10px; cursor:pointer; margin-bottom:12px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(240,185,92,.12), rgba(240,109,166,.10));
  border:1px solid rgba(240,185,92,.35); border-radius:14px; padding:11px 16px; font-size:.9rem; color:var(--text)}
.koth:hover{border-color:rgba(240,185,92,.6)}
.koth-crown{font-size:1.2rem}
.koth b{color:#f0b95c; font-family:var(--display)}
.koth-name{font-family:var(--display); font-weight:700; color:var(--bone)}
.koth .avatar{width:26px; height:26px; border-radius:8px; font-size:.6rem}

/* live feed */
.feed{display:flex; gap:8px; overflow-x:auto; margin-bottom:14px; padding-bottom:4px; scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.feed-item{flex-shrink:0; cursor:pointer; font-family:var(--mono); font-size:.74rem; padding:5px 11px; border-radius:9px;
  background:var(--glass); border:1px solid var(--line)}
.feed-item:hover{border-color:var(--line-2)}

/* watchlist stars */
.star-th{width:34px}
.star-cell{text-align:center}
.star{background:none; border:none; color:var(--muted); font-size:1rem; cursor:pointer; padding:2px 6px}
.star:hover{color:#f0b95c}
.star.is-on{color:#f0b95c}
.filter-watch.is-active{color:#f0b95c; border-color:rgba(240,185,92,.5)}

/* detail layout with tabs card */
.detail-grid{grid-template-rows:auto auto}
.detail-chart{grid-column:1; grid-row:1}
.detail-tabs{grid-column:1; grid-row:2; padding:16px}
.detail-trade{grid-column:2; grid-row:1 / span 2; align-self:start}
@media (max-width:820px){ .detail-chart,.detail-tabs,.detail-trade{grid-column:1} .detail-trade{grid-row:auto} .detail-tabs{grid-row:auto} }
#dTabContent{margin-top:12px}
.tab-empty{padding:24px; text-align:center; color:var(--muted); font-size:.86rem}

/* trades tape + holders table */
.tape{width:100%; border-collapse:collapse; font-size:.8rem}
.tape th{text-align:left; color:var(--muted); font-family:var(--display); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.4px; padding:6px 8px; border-bottom:1px solid var(--line)}
.tape td{padding:7px 8px; border-bottom:1px solid rgba(160,185,240,.06); font-family:var(--mono)}
.tape .num{text-align:left}
.h-tag{font-size:.62rem; background:rgba(70,224,138,.12); border:1px solid rgba(70,224,138,.3); color:#5fe0a0;
  padding:1px 6px; border-radius:6px; margin-left:5px; font-family:var(--display)}

/* comments */
.cmt-compose{display:flex; gap:8px; margin-bottom:14px}
.cmt-compose input{flex:1; background:rgba(8,16,40,.5); border:1px solid var(--line); border-radius:11px;
  color:var(--bone); padding:10px 13px; font-family:var(--body); font-size:.88rem; outline:none}
.cmt-compose input:focus{border-color:var(--line-2)}
.cmt{padding:10px 0; border-bottom:1px solid rgba(160,185,240,.07)}
.cmt-head{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.cmt-text{color:var(--text); font-size:.88rem; line-height:1.5; word-break:break-word}

/* slippage + pay selector */
.slip-row{display:flex; align-items:center; gap:7px; margin:10px 0 12px}
.slip-row input{width:60px; background:rgba(8,16,40,.5); border:1px solid var(--line); border-radius:8px;
  color:var(--bone); padding:5px 8px; font-family:var(--mono); font-size:.8rem; outline:none; text-align:center}
.sym-select{border:none; cursor:pointer; appearance:auto; padding-right:4px}

/* ============ sea bubbles background ============ */
.bubbles{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bubbles span{position:absolute; bottom:-60px; left:var(--x); width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.5), rgba(154,214,255,.16) 45%, rgba(154,214,255,.05) 70%);
  border:1px solid rgba(190,225,255,.35);
  box-shadow:inset 2px -2px 6px rgba(255,255,255,.22), 0 0 12px rgba(140,200,255,.10);
  animation:bubble-rise var(--d) linear infinite;
  animation-delay:var(--dl);
  opacity:0}
@keyframes bubble-rise{
  0%{transform:translateY(0) translateX(0) scale(.85); opacity:0}
  6%{opacity:.5}
  50%{transform:translateY(-55vh) translateX(14px) scale(1); opacity:.42}
  75%{transform:translateY(-80vh) translateX(-10px) scale(1.05); opacity:.3}
  100%{transform:translateY(-110vh) translateX(6px) scale(1.1); opacity:0}
}
@media (prefers-reduced-motion: reduce){ .bubbles span{animation:none; opacity:.18; bottom:auto; top:calc(var(--dl) * 4)} }
header, main{position:relative; z-index:1}

/* clickable brand */
.brand{cursor:pointer}

/* telegram logo icon (replaces the plane emoji) */
.tg-ico{display:inline-flex; color:#29a9eb}
.tg-ico svg{width:1em; height:1em}
.soc svg{width:1em; height:1em; vertical-align:-0.15em}

/* ============ launch form redesign ============ */
.field-hint{display:block; color:var(--muted); font-size:.72rem; margin-top:5px; line-height:1.4}
.consent-row{display:flex; align-items:flex-start; gap:9px; margin:6px 0 10px; cursor:pointer; color:var(--muted); font-size:.78rem; line-height:1.45}
.consent-row input{margin-top:2px; accent-color:#f06da6; width:15px; height:15px; flex-shrink:0}
.img-drop-wide{display:flex; align-items:center; gap:14px; border:1.5px dashed var(--line-2); border-radius:14px;
  padding:14px 18px; cursor:pointer; transition:.15s; min-height:64px; position:relative}
.img-drop-wide:hover{border-color:var(--aqua)}
.img-drop-wide.is-locked{opacity:.55; cursor:not-allowed}
.img-drop-wide.is-locked:hover{border-color:var(--line-2)}
.img-drop-wide .img-preview{width:52px; height:52px; border-radius:12px; background:rgba(8,16,40,.5) center/cover; flex-shrink:0}
.img-drop-wide .img-preview.has-img + .img-hint{display:none}
.img-drop-wide .img-hint{color:var(--muted); font-size:.9rem; font-family:var(--display); font-weight:600}
.prefix-input{display:flex; align-items:center; background:rgba(8,16,40,.5); border:1px solid var(--line); border-radius:12px; padding:0 13px; transition:.15s}
.prefix-input:focus-within{border-color:var(--line-2)}
.prefix-input > span{color:var(--muted); font-family:var(--mono); font-size:.86rem; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.prefix-input input{flex:1; background:none; border:none; outline:none; color:var(--bone); padding:11px 4px 11px 2px; font-family:var(--body); font-size:.92rem; min-width:0}
.pfx-tg .tg-ico{margin-right:2px}
.devbuy-box{display:flex; align-items:center; background:rgba(8,16,40,.5); border:1px solid var(--line); border-radius:14px; padding:6px 12px 6px 16px}
.devbuy-box:focus-within{border-color:var(--line-2)}
.devbuy-box input{flex:1; background:none; border:none; outline:none; color:var(--bone); font-family:var(--mono); font-size:1.4rem; padding:8px 4px; min-width:0}
.eth-chip{display:inline-flex; align-items:center; gap:6px; background:var(--grad-soft); border:1px solid rgba(154,168,255,.35);
  color:var(--bone); font-family:var(--display); font-weight:700; font-size:.85rem; padding:7px 13px; border-radius:11px; flex-shrink:0}
.devbuy-max{cursor:pointer}
.devbuy-max:hover{color:var(--aqua)}
.adv-toggle{display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none;
  border-top:1px solid var(--line); color:var(--bone); font-family:var(--display); font-weight:700; font-size:1rem;
  padding:15px 2px; margin-top:14px; cursor:pointer}
.adv-toggle:hover .adv-chev{color:var(--aqua)}
.adv-chev{color:var(--muted); transition:.15s}
.adv-body{padding:4px 0 12px}

/* ============ wallet modal ============ */
.wallet-card{max-width:400px; background:#0c1126; border:1px solid var(--line); padding:24px}
.wallet-title{font-family:var(--display); font-weight:900; color:var(--bone); margin:0 0 16px; font-size:1.3rem}
.wallet-list{display:flex; flex-direction:column; gap:4px}
.w-row{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:none; border:none;
  border-radius:13px; padding:11px 12px; cursor:pointer; text-decoration:none; transition:.13s}
.w-row:hover{background:rgba(160,185,240,.07)}
.w-row-soon{opacity:.5; cursor:default}
.w-row-soon:hover{background:none}
.w-ico{width:40px; height:40px; border-radius:11px; flex-shrink:0; object-fit:cover}
.w-ico-fallback{display:inline-flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:800; font-size:1.1rem}
.w-name{flex:1; color:var(--bone); font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.25}
.w-sub{display:block; color:var(--muted); font-weight:400; font-size:.74rem; font-family:var(--body); margin-top:2px}
.w-badge{background:rgba(70,224,138,.12); border:1px solid rgba(70,224,138,.4); color:#5fe0a0; font-family:var(--display);
  font-weight:700; font-size:.72rem; padding:4px 11px; border-radius:99px}
.w-arrow{color:var(--muted); font-size:1rem}
.w-soon{background:rgba(160,185,240,.1); border:1px solid var(--line); color:var(--muted); font-family:var(--display);
  font-weight:700; font-size:.72rem; padding:4px 11px; border-radius:99px}

/* ============ new pairs widget ============ */
.newpairs-wrap{margin-bottom:12px}
.np-label{display:block; color:var(--muted); font-family:var(--display); font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:7px}
.newpairs{display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.newpairs::-webkit-scrollbar{display:none}
.np-card{display:flex; align-items:center; gap:9px; flex-shrink:0; background:var(--glass); border:1px solid var(--line);
  border-radius:13px; padding:8px 12px; cursor:pointer; transition:.13s}
.np-card:hover{border-color:var(--line-2); transform:translateY(-1px)}
.np-card .avatar{width:30px; height:30px; border-radius:9px; font-size:.62rem}
.np-mid{display:flex; flex-direction:column; align-items:flex-start}
.np-sym{font-family:var(--display); font-weight:700; color:var(--bone); font-size:.84rem}
.np-age{font-family:var(--mono); color:var(--muted); font-size:.66rem}
.np-mc{font-family:var(--mono); font-weight:700; color:var(--bone); font-size:.78rem; margin-left:4px}

/* new pairs widget */
.newpairs{margin-bottom:14px}
.np-head{display:flex; align-items:center; gap:7px; font-family:var(--display); font-weight:800; color:var(--bone);
  font-size:.86rem; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px}
.np-dot{width:8px; height:8px; border-radius:50%; background:#46e08a; box-shadow:0 0 8px #46e08a; animation:np-pulse 1.6s ease-in-out infinite}
@keyframes np-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.np-row{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.np-row::-webkit-scrollbar{display:none}
.np-card{flex-shrink:0; display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:13px; cursor:pointer;
  background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); transition:.13s; min-width:150px}
.np-card:hover{border-color:var(--line-2); transform:translateY(-1px)}
.np-card .avatar{width:30px; height:30px; border-radius:9px; font-size:.6rem}
.np-mid{min-width:0}
.np-name{font-family:var(--display); font-weight:700; color:var(--bone); font-size:.84rem; white-space:nowrap}
.np-lock{font-size:.68rem}
.np-sub{color:var(--muted); font-size:.68rem; font-family:var(--mono)}
.np-mc{font-family:var(--mono); font-weight:700; color:var(--aqua); font-size:.78rem; margin-left:auto}

/* the hidden attribute always wins, no matter the element's display rule */
[hidden]{display:none !important}

/* token picker */
.picker-btn{display:flex; align-items:center; justify-content:space-between; width:100%; background:rgba(8,16,40,.5);
  border:1px solid var(--line); border-radius:12px; color:var(--bone); padding:12px 14px; font-family:var(--display);
  font-weight:700; font-size:.95rem; cursor:pointer; transition:.13s}
.picker-btn:hover{border-color:var(--line-2)}
.picker-ph{color:var(--muted); font-weight:600}
.picker-chev{color:var(--muted); font-size:.8rem}
.picker-card{max-width:440px; width:92vw; padding:22px}
.picker-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.picker-head h3{font-family:var(--display); font-weight:900; color:var(--bone); margin:0; font-size:1.25rem}
#pickerSearch{width:100%; box-sizing:border-box; background:rgba(8,16,40,.55); border:1px solid var(--line);
  border-radius:12px; color:var(--bone); padding:12px 14px; font-family:var(--body); font-size:.92rem; outline:none; margin-bottom:14px}
#pickerSearch:focus{border-color:var(--line-2)}
.picker-common-label{color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.5px;
  font-family:var(--display); font-weight:700; margin-bottom:8px}
.picker-common{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.picker-chip{display:inline-flex; align-items:center; gap:6px; background:rgba(8,16,40,.5); border:1px solid var(--line);
  border-radius:11px; color:var(--bone); padding:8px 13px; font-family:var(--mono); font-size:.82rem; cursor:pointer; transition:.13s}
.picker-chip:hover{border-color:var(--line-2)}
.picker-list{max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:6px}
.picker-row{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; cursor:pointer; transition:.12s}
.picker-row:hover{background:rgba(160,185,240,.08)}
.picker-row .avatar{width:32px; height:32px; border-radius:10px; font-size:.6rem}
.picker-mid{min-width:0; flex:1}
.picker-name{font-family:var(--display); font-weight:700; color:var(--bone); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.picker-sub{color:var(--muted); font-size:.7rem; font-family:var(--mono)}
.picker-mc{font-family:var(--mono); color:var(--aqua); font-size:.78rem; font-weight:700}