/* =====================================================================
   coin.css  -  coin page: layout + Buy / Sell panel
   Loaded LAST (after look.css), so it wins over the older glass / polish rules.
   Everything is scoped to #s-token so no other screen is touched.
   Colours use the same theme variables as the rest of the glass look, so it
   follows whatever theme is picked.
   ===================================================================== */

/* ---------- shared card look ------------------------------------------------ */
#s-token .hero,
#s-token #d-buysect,
#s-token #d-sellbox{
  background-color:var(--gl-fill)!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-edge-2);
  box-shadow:var(--gl-shadow);
}

/* ---------- header: coin logo is text-sized, not a big badge ---------------- */
#s-token .tk-hd .d-avatar{width:20px;height:20px}
#s-token .tk-hd .hd-row{gap:8px}

/* ---------- hero: price, chips, chart, timeframes -------------------------- */
#s-token .hero{margin:10px 10px 0;padding:18px 18px 14px;border-radius:20px}
#s-token .hero .big{font-size:40px;line-height:1;letter-spacing:-.045em}

#s-token .metaline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;
  font-size:12.5px;color:var(--txt-2)}
#s-token .metaline .sep{display:none}
#s-token .metaline>span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;
  background:rgba(var(--tm-hi,255,255,255),.06);white-space:nowrap}
#s-token .metaline>#d-lbl{background:none;padding:0 4px 0 0;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
#s-token .metaline b{margin:0;font-weight:700}

#s-token .chartwrap{margin:14px 0 0}

/* timeframe row = one small segmented control, centred */
#s-token .tfrow{display:flex;justify-content:center;gap:2px;width:fit-content;max-width:100%;
  margin:12px auto 0;padding:3px;border-radius:12px;background:rgba(var(--tm-hi,255,255,255),.06)}
#s-token .tfrow button{flex:none;padding:6px 14px;border-radius:9px;background:transparent;
  font:600 12.5px var(--ui);color:var(--txt-2);transition:background .15s,color .15s}
#s-token .tfrow button:hover{color:var(--txt)}
#s-token .tfrow button[aria-selected="true"]{background:rgba(var(--tm-hi,255,255,255),.16);color:var(--txt)}
#s-token .chart-help{padding:8px 0 0;font-size:11px;color:var(--txt-3)}

/* ---------- stats: ONE glass box, cells split by hairlines (DexScreener style) ----
   The box itself is #d-stats, so the stat grid, buy pressure, bonding curve and
   creator line all live inside the same panel instead of 4 separate cards.
   Blur is set here on purpose: phones switch it off for every list row (speed),
   but this is a single element, so it can keep it - that is what makes it read
   as see-through glass instead of a dark slab. */
#s-token #d-stats{
  margin:10px 10px 0!important;padding:0!important;overflow:hidden;border-radius:18px;
  background-color:rgba(var(--tm-glass,8,8,10),calc(var(--tm-a-box,.55)*.55))!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25)!important;backdrop-filter:blur(14px) saturate(1.25)!important;
  border:1px solid var(--gl-edge)!important;box-shadow:var(--gl-shadow)}

#s-token #d-stats .grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:0 -1px -1px 0!important;padding:0;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#s-token #d-stats .gcell{min-width:0;padding:11px 13px 12px;border:0!important;border-radius:0!important;
  background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:inset -1px -1px 0 var(--gl-edge-2)}
#s-token #d-stats .gcell i{display:block;margin:0 0 3px;font-size:11.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--txt-2)!important}
#s-token #d-stats .gcell b{display:block;margin:0;font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
#s-token #d-stats .gcell b .dim{display:block;margin-top:1px;font-size:11px!important;font-weight:500!important;white-space:nowrap}
#s-token #d-stats .grid6>.gcell:last-child:nth-child(odd){grid-column:auto}

/* buy pressure / bonding curve / creator: rows inside the same box */
#s-token #d-stats .curvebox,
#s-token #d-stats .creator{margin:0!important;padding:12px 14px;border:0!important;border-top:1px solid var(--gl-edge-2)!important;
  border-radius:0!important;background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#s-token #d-stats .crow{font-size:12.5px;margin-bottom:8px}
#s-token #d-stats .ctrack{height:6px}

/* ---------- Buy / Sell cards ------------------------------------------------ */
#s-token #d-buysect,
#s-token #d-sellbox{margin:10px 10px 0!important;padding:14px!important;border-radius:18px}

/* heading row:  ● Buy ............ 0.000 SOL   Edit */
#s-token #d-buysect>.cap,
#s-token #d-sellbox>.cap{
  display:flex!important;align-items:center;gap:8px;width:100%;align-self:stretch;
  padding:0!important;margin:0 0 12px!important;border-radius:0;
  background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  font-size:15px!important;font-weight:700!important;letter-spacing:-.01em!important;text-transform:none!important;
  color:var(--txt)!important}
#s-token #d-buysect>.cap::before,
#s-token #d-sellbox>.cap::before{content:"";flex:none;width:8px;height:8px;border-radius:50%}
#s-token #d-buysect>.cap::before{background:var(--up);box-shadow:0 0 10px rgba(46,230,107,.6)}
#s-token #d-sellbox>.cap::before{background:var(--down);box-shadow:0 0 10px rgba(255,85,51,.55)}

#s-token .cap-bal{margin:0 0 0 auto;font-style:normal;font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--txt-2)}
#s-token .cap-edit{margin:0 0 0 auto;padding:5px 11px!important;border-radius:8px!important;
  font:600 12px var(--ui)!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--txt-2)!important;background:transparent!important;
  border:1px solid var(--gl-edge)!important;box-shadow:none!important;
  transition:color .15s,border-color .15s,background .15s}
#s-token .cap-bal+.cap-edit{margin-left:0}
#s-token .cap-edit:hover{color:var(--txt)!important;border-color:rgba(var(--tm-hi,255,255,255),.3)!important}
#s-token .cap-edit.on{color:#04150a!important;background:var(--up)!important;border-color:var(--up)!important}

/* the preset buttons */
#s-token .ladder{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
#s-token .ladder .key.lk{
  height:48px;padding:0 6px;border-radius:12px;
  display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:5px;
  box-shadow:none!important;
  transition:transform .12s,background .15s,border-color .15s,box-shadow .15s}
#s-token .ladder .key.lk b{font-size:17px;font-weight:700;letter-spacing:-.03em;line-height:48px}
#s-token .ladder .key.lk small{font-size:11px;font-weight:600;letter-spacing:.02em;opacity:1}
#s-token .ladder .key.lk b span{font-size:.7em;font-weight:700;margin-left:1px;opacity:.9}

/* buy = green */
#s-token .ladder .key.lk.b{
  background:rgba(46,230,107,.10)!important;border:1px solid rgba(46,230,107,.30)!important}
#s-token .ladder .key.lk.b b{color:#eafff1!important}
#s-token .ladder .key.lk.b small{color:var(--up)!important}
@media(hover:hover){
  #s-token .ladder .key.lk.b:hover{background:rgba(46,230,107,.18)!important;border-color:rgba(46,230,107,.7)!important;
    transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(46,230,107,.55)!important}
}
#s-token .ladder .key.lk.b:active{background:var(--up)!important;border-color:var(--up)!important;transform:scale(.97)}
#s-token .ladder .key.lk.b:active b,#s-token .ladder .key.lk.b:active small{color:#04150a!important}

/* sell = red */
#s-token .ladder .key.lk.s{
  background:rgba(255,85,51,.10)!important;border:1px solid rgba(255,85,51,.30)!important}
#s-token .ladder .key.lk.s b{color:#fff1ed!important}
#s-token .ladder .key.lk.s b span{color:var(--down)!important;opacity:1}
@media(hover:hover){
  #s-token .ladder .key.lk.s:hover{background:rgba(255,85,51,.18)!important;border-color:rgba(255,85,51,.7)!important;
    transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(255,85,51,.5)!important}
}
#s-token .ladder .key.lk.s:active{background:var(--down)!important;border-color:var(--down)!important;transform:scale(.97)}
#s-token .ladder .key.lk.s:active b,#s-token .ladder .key.lk.s:active b span{color:#2a0800!important}

/* custom amount: quiet dashed button under the grid */
#s-token .ladder .key.lk.custom{
  grid-column:1/-1;height:42px;gap:8px;align-items:center;
  background:transparent!important;border:1px dashed var(--gl-edge)!important;
  color:var(--txt-2)!important}
#s-token .ladder .key.lk.custom b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1;color:var(--txt-2)!important}
#s-token .ladder .key.lk.custom svg{flex:none;color:var(--txt-2)!important}
@media(hover:hover){
  #s-token .ladder .key.lk.custom:hover{border-color:rgba(46,230,107,.6)!important;background:rgba(46,230,107,.06)!important;transform:none;box-shadow:none!important}
  #s-token .ladder .key.lk.custom:hover b,#s-token .ladder .key.lk.custom:hover svg{color:var(--up)!important}
}

/* editing the amounts */
#s-token .ladder .pe{height:48px;padding:0 12px;border-radius:12px}
#s-token .ladder .pe input{font:700 16px var(--ui)}

/* ---------- "View chart" toggle (phones only; on a computer the chart is always there) */
#s-token .vc-btn{display:none}
@media(max-width:1023px){
  #s-token .vc-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:38px;margin:0 0 12px;
    border-radius:10px;border:1px solid var(--gl-edge);background:rgba(var(--tm-hi,255,255,255),.05);
    color:var(--txt-1);font:600 13px var(--ui);cursor:pointer;transition:background .15s,border-color .15s}
  #s-token .vc-btn:active{transform:scale(.98)}
  #s-token .vc-btn.on{border-color:rgba(46,230,107,.45);color:var(--up)}
  /* chart tucked away */
  #s-token.chart-off .chartwrap,
  #s-token.chart-off .tfrow,
  #s-token.chart-off .chart-help{display:none}
  #s-token.chart-off .hero{padding-bottom:16px}
}

/* ---------- quick Buy / Sell buttons under the header (phones) ------------- */
#s-token .tk-trade{gap:10px;padding:0 12px 12px}
#s-token .tk-trade .qtrade{height:46px;border-radius:12px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  box-shadow:none!important;transition:transform .1s,filter .15s,background .15s}
#s-token .tk-trade .qtrade b{font-weight:800}
#s-token .tk-trade .qtrade.qbuy{flex:1.4;background:var(--up)!important;color:#04150a!important}
#s-token .tk-trade .qtrade.qsell{flex:1;background:transparent!important;color:var(--down)!important;
  border:1.5px solid rgba(255,85,51,.55)}
#s-token .tk-trade .qtrade.qsell b{color:inherit}
#s-token .tk-trade .qtrade:active{transform:scale(.97)}
@media(hover:hover){#s-token .tk-trade .qtrade.qbuy:hover{filter:brightness(1.08)}
  #s-token .tk-trade .qtrade.qsell:hover{background:rgba(255,85,51,.12)!important}}

/* ---------- computer layout: chart left, trade cards right ---------------- */
@media(min-width:1024px){
  #s-token.on{grid-template-columns:minmax(0,1fr) 360px;column-gap:20px}
  #s-token .hero{margin:14px 0 0;padding:20px 22px 14px}
  #s-token .hero .big{font-size:44px}
  #s-token .chartwrap{border-radius:14px}
  #s-token #d-stats{margin:10px 0 0!important}

  /* the side column is just a stack of two cards (no big box around them) */
  #s-token>.tk-side{
    display:flex;flex-direction:column;gap:12px;padding:0!important;margin-top:14px;
    background:none!important;border:0!important;border-radius:0;box-shadow:none!important;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  #s-token .tk-side #d-buysect,
  #s-token .tk-side #d-sellbox{margin:0!important;padding:16px!important}
}

/* =====================================================================
   See-through fixes on the other screens (same glass recipe as the stats box)
   - Voice room card (chat) and the Trending / New / Almost / Migrated strip (feed)
     were nearly solid: dark fill + blur switched off on phones.
   - These are single elements, so a real blur is cheap and lets the fill drop low.
   ===================================================================== */
body #s-chat .ch-voice{
  background-color:rgba(var(--tm-glass,8,8,10),calc(var(--tm-a-box,.55)*.55))!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25)!important;backdrop-filter:blur(14px) saturate(1.25)!important;
  border-color:var(--gl-edge)!important}

@media(max-width:1023px){
  #s-feed .chipbar{
    background:rgba(var(--tm-glass-bar,0,0,0),calc(var(--tm-a-bar,.5)*.55))!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.25)!important;backdrop-filter:blur(14px) saturate(1.25)!important}
}

/* =====================================================================
   DMs (Chat > Messages): same see-through glass as the general chat
   x-fix.css had turned the DM panel + bubbles almost solid (~93% dark) so text
   stayed readable. Here the panel drops to the same glass level as the rest of
   chat, with a real blur behind it so the text still reads.

   COLOUR: change the one line  --dm-accent  (r,g,b) to recolour sent bubbles,
   the unread highlight and the send button.
     green  46,230,107   (default, matches Buy)      purple 150,110,255
     blue   70,160,255                               pink   255,90,170
   ===================================================================== */
body #s-chat .ch-dmp{
  --dm-accent:46,230,107;
  --dm-bg:rgba(var(--tm-glass,8,8,10),calc(var(--tm-a-box,.55)*.55));
  --dm-in:rgba(var(--tm-hi,255,255,255),.09);
}
body #s-chat .dm-inbox,
body #s-chat .dm-thread{
  background:var(--dm-bg)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25)!important;backdrop-filter:blur(14px) saturate(1.25)!important;
  border:1px solid var(--gl-edge)!important}

/* received */
body #s-chat .dm-log .dmb{
  background-color:var(--dm-in)!important;
  border:1px solid rgba(var(--tm-hi,255,255,255),.14)!important;
  box-shadow:none}
/* sent: tinted glass in the accent colour instead of a solid white slab */
body #s-chat .dm-log .dmb.me{
  background-color:rgba(var(--dm-accent),.26)!important;
  border-color:rgba(var(--dm-accent),.55)!important;
  color:#fff!important}

/* inbox: unread row, quick replies, send button */
body #s-chat .dmr.un{background-color:rgba(var(--dm-accent),.12)!important}
body #s-chat .dm-quick button{background-color:var(--dm-in)!important;
  border:1px solid rgba(var(--tm-hi,255,255,255),.2)!important}
body #s-chat .ch-dmp .ch-send{background:rgb(var(--dm-accent))!important;color:#03170b!important}
body #s-chat .ch-dmp .ch-compose textarea:focus{border-color:rgba(var(--dm-accent),.7);
  box-shadow:0 0 0 3px rgba(var(--dm-accent),.16)}

/* =====================================================================
   Support row (Chat): the Pulse account sits first, tagged "No fees",
   so people can DM it to buy a no-fee account + VIP.
   ===================================================================== */
body #s-chat .stf.stf-pulse{
  background-color:rgba(46,230,107,.12)!important;
  border:1px solid rgba(46,230,107,.5)!important}
@media(hover:hover){body #s-chat .stf.stf-pulse:hover{background-color:rgba(46,230,107,.2)!important}}
.stf-pulse .stf-tx b{color:var(--up)}
.stf-pulse .stf-tx small{color:var(--up)}

/* =====================================================================
   Pulse logo = text size. The P mark was ~2x the size of the word next to it
   (loading screen, sign-in, top-left of every screen). Now it matches the text.
   ===================================================================== */
#gate .pl-lockup .pl-mark,
#gate .pl-lockup.lg .pl-mark{width:22px;height:22px}
#gate .pl-lockup,#gate .pl-lockup.lg{gap:8px}
.au-brand .pl-lockup .pl-mark{width:20px;height:20px}
.au-brand .pl-lockup{gap:7px}
body .hd-row .brand.cash.has-logo{width:22px;height:22px;margin:0 2px 0 0}

/* =====================================================================
   TRADE HISTORY rows (profile + wallet History window)
   coin avatar, name with a Buy/Sell tag, "0.100 SOL . 2h ago", result on the right
   ===================================================================== */
.hrow.trd{gap:11px;padding:11px 14px}
.hrow.trd .hav{width:38px;height:38px}
.hrow.trd .hav img{width:100%;height:100%;object-fit:cover}
.hrow.trd .hmid{min-width:0}
.hrow.trd .hmid b{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.hrow.trd .hmid small{display:block;margin-top:2px;font-size:12px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tside{flex:none;padding:2px 7px;border-radius:99px;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.02em;line-height:1.25}
.tside.buy{background:rgba(46,230,107,.16);color:var(--up)}
.tside.sell{background:rgba(255,85,51,.16);color:var(--down)}
.hrow.trd .hfig{flex:none;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.trdlist{max-height:60vh;overflow-y:auto}

/* =====================================================================
   CHAT: Support, Voice room, Search and Trending are ONE attached panel
   (they used to be four separate floating boxes). Sections are split by thin
   lines; the chips inside keep their pill shape.
   ===================================================================== */
body #s-chat .ch-side{
  margin:6px 12px 0;padding:0!important;gap:0!important;border-radius:18px;
  background-color:rgba(var(--tm-glass,8,8,10),calc(var(--tm-a-box,.55)*.55));
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--gl-edge);box-shadow:var(--gl-shadow);overflow-y:auto}
body #s-chat .ch-side>[hidden]{display:none!important}
body #s-chat .ch-side>*{
  margin:0!important;padding:10px 12px!important;border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body #s-chat .ch-side>*:not([hidden]){border-bottom:1px solid var(--gl-edge-2)!important}
body #s-chat .ch-side>*:last-child{border-bottom:0!important}

/* search box: a quiet field inside the panel */
body #s-chat .ch-side .ch-search{background-color:rgba(var(--tm-hi,255,255,255),.07)!important;
  border:1px solid var(--gl-edge-2)!important;border-radius:12px!important}
body #s-chat .ch-side .ch-search:focus-within{border-color:rgba(var(--tm-hi,255,255,255),.35)!important}
/* chips (support people + trending coins) */
body #s-chat .ch-side .stf:not(.stf-pulse),
body #s-chat .ch-side .hotchip{background-color:rgba(var(--tm-hi,255,255,255),.07)!important;
  border:1px solid var(--gl-edge-2)!important}
/* "Trending now" is a caption, not a pill */
body #s-chat .ch-side .ch-hotcap{padding:0!important;margin:0 0 7px!important;border-radius:0;
  background:none!important;font-size:12px;font-weight:600;color:var(--txt-2)!important;letter-spacing:0;text-transform:none}
body #s-chat .ch-side .stf-cap{margin:0 0 8px}
@media(max-width:1023px){
  /* phones keep the compact header block (caption hidden, tighter rows) so the message box stays on screen */
  body #s-chat .ch-side>*{padding:7px 10px!important}
  body #s-chat .ch-side .ch-hotcap{display:none}
}
@media(min-width:1024px){
  body #s-chat .ch-side{margin:0;width:340px}
  body #s-chat .ch-side .ch-hotcap{display:block}
}

/* =====================================================================
   SNIPER: dip meter on dip cards + a clear highlight when it is a DIP BUY
   ===================================================================== */
.sn-dip{margin:11px 0 0}
.sn-dip-h{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--txt-2)}
.sn-dip-h b{font-weight:750;color:var(--txt)}
.sn-dip-bar{margin-top:6px;height:5px;border-radius:99px;background:rgba(var(--tm-hi,255,255,255),.1);overflow:hidden}
.sn-dip-bar i{display:block;height:100%;border-radius:99px;background:#d9b45a}
.sn-dip.ready .sn-dip-bar i{background:var(--up)}
.sn-dip.ready .sn-dip-h span:last-child b{color:var(--up)}
.sn-card.dipr{border-color:rgba(46,230,107,.45)!important;box-shadow:0 0 0 1px rgba(46,230,107,.18),0 10px 26px -16px rgba(46,230,107,.55)!important}

/* =====================================================================
   TRENDING (home feed, phones): each coin is a clean card - coin picture,
   name + age, price and a coloured change pill, spark line, buy button
   ===================================================================== */
@media(max-width:1023px){
  #s-feed #feed .f{
    margin:0 12px 8px;padding:12px 12px 11px;gap:11px;border-radius:18px;
    background:rgba(var(--tm-hi,255,255,255),.045);
    border:1px solid var(--gl-edge-2);box-shadow:none}
  #s-feed #feed .f:active{background:rgba(var(--tm-hi,255,255,255),.09)}
  #s-feed #feed .f .av{width:48px;height:48px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--gl-edge-2)}
  #s-feed #feed .f .f-tk{font-size:16.5px;font-weight:750;letter-spacing:-.02em}
  #s-feed #feed .f .f-sub{margin-top:4px;font-size:12px;color:var(--txt-2)}
  #s-feed #feed .f .cell-age{padding:1px 7px;border-radius:7px;background:rgba(var(--tm-hi,255,255,255),.08);
    color:var(--txt-2);font-weight:600}
  #s-feed #feed .f .f-mc{font-size:17px;font-weight:750;letter-spacing:-.02em}
  #s-feed #feed .f .tr-ch{display:inline-block;margin-top:3px;padding:2px 7px;border-radius:8px;
    font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
  #s-feed #feed .f .tr-ch.up{background:rgba(46,230,107,.14);color:var(--up)}
  #s-feed #feed .f .tr-ch.down{background:rgba(255,85,51,.14);color:var(--down)}
  #s-feed #feed .f .f-chips{padding-top:2px}
}

/* Copy any wallet (Copy tab) */
.cw-box{margin:0 14px 14px;padding:12px;border-radius:16px;background:rgba(var(--tm-hi,255,255,255),.05);border:1px solid rgba(var(--tm-hi,255,255,255),.10)}
.cw-add{display:flex;gap:8px}
.cw-add input{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:12px;border:1px solid rgba(var(--tm-hi,255,255,255),.14);
  background:rgba(var(--tm-hi,255,255,255),.06);color:var(--txt);font:500 13.5px var(--ui);outline:none}
.cw-add input::placeholder{color:var(--txt-3)}
.cw-add .cp-btn{flex:none;height:40px;padding:0 16px}
.cw-hint{display:block;margin-top:8px;font-size:12px;line-height:1.4;color:var(--txt-3)}
.cw-row{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(var(--tm-hi,255,255,255),.08)}
.cw-mid{flex:1;min-width:0}
.cw-mid b{display:block;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-mid small{display:block;margin-top:2px;font-size:12px;color:var(--txt-3)}