/* aether-web — css/watchlist.css (Трек 6.2: персональный watchlist + звёзды). Веб-токены. */
#page-watchlist .wl-pghead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
#page-watchlist .wl-pgtitle{font-size:22px;font-weight:800;letter-spacing:-.02em}
#page-watchlist .wl-pgcnt{font-size:13px;color:var(--muted);font-weight:600;margin-left:8px}
#page-watchlist .wl-clearbtn{font-size:11px;font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:var(--r-sm,7px);padding:6px 12px;cursor:pointer;font-family:var(--font);transition:.12s}
#page-watchlist .wl-clearbtn:hover{color:var(--dn);border-color:var(--dn);background:rgba(248,113,113,.08)}

#page-watchlist .wl-section{margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
#page-watchlist .wl-sechead{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border)}
#page-watchlist .wl-nm{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
#page-watchlist .wl-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;font-family:var(--mono)}
#page-watchlist .wl-bstock{color:var(--blue);background:rgba(91,141,255,.14)}
#page-watchlist .wl-bcrypto{color:var(--amber);background:rgba(247,185,85,.14)}
#page-watchlist .wl-cnt{font-size:11px;color:var(--muted);margin-left:auto;font-weight:600}

#page-watchlist .wl-head{display:grid;grid-template-columns:1.6fr .9fr .8fr 1fr 40px;gap:10px;padding:8px 16px;border-bottom:1px solid var(--border)}
#page-watchlist .wl-head span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
#page-watchlist .wl-head span:not(:first-child){text-align:right}
#page-watchlist .wl-head span:last-child{text-align:center}

#page-watchlist .wl-row{display:grid;grid-template-columns:1.6fr .9fr .8fr 1fr 40px;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:center;cursor:pointer;transition:background .12s}
#page-watchlist .wl-row:last-child{border-bottom:none}
#page-watchlist .wl-row:hover{background:var(--elevated)}
#page-watchlist .wl-sym{display:flex;align-items:center;gap:11px;min-width:0;overflow:hidden}
#page-watchlist .wl-sym>div{min-width:0;overflow:hidden}   /* обёртка .s/.n: без min-width:0 имя-.n не усекалось эллипсисом и наезжало на цену @360 */
#page-watchlist .wl-sym .lg{width:30px;height:30px;border-radius:8px;background:var(--elevated);box-shadow:inset 0 0 0 1px var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--muted);flex:none}
#page-watchlist .wl-sym .s{font-size:14px;font-weight:800;letter-spacing:-.01em}
#page-watchlist .wl-sym .n{font-size:10.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-watchlist .wl-price{text-align:right;font-size:14px;font-weight:700}
#page-watchlist .wl-chg{text-align:right;font-size:12px;font-weight:800}
#page-watchlist .wl-spark{display:flex;justify-content:flex-end;line-height:0}
#page-watchlist .wl-spark svg{width:84px;height:30px}
#page-watchlist .wl-del{display:flex;justify-content:center}
#page-watchlist .wl-del button{width:26px;height:26px;border-radius:7px;border:none;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;transition:.12s}
#page-watchlist .wl-row:hover .wl-del button{color:var(--dn);background:rgba(248,113,113,.1)}
#page-watchlist .c-up{color:var(--up)} #page-watchlist .c-dn{color:var(--dn)}

#page-watchlist .wl-skel{display:inline-block;height:13px;width:54px;border-radius:5px;background:linear-gradient(90deg,var(--elevated),rgba(255,255,255,.07),var(--elevated));opacity:.5}
#page-watchlist .wl-empty{padding:48px 20px;text-align:center}
#page-watchlist .wl-empty .ic{font-size:34px;margin-bottom:12px;opacity:.5;color:var(--amber)}
#page-watchlist .wl-empty .t{font-size:15px;font-weight:700;margin-bottom:6px}
#page-watchlist .wl-empty .d{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:360px;margin:0 auto}
#page-watchlist .wl-empty .d b{color:var(--amber)}
#page-watchlist .wl-localnote{font-size:10.5px;color:var(--dim,var(--muted));text-align:center;margin-top:10px}
/* Empty state: center the column on the page (the list keeps its left-aligned 900px; #wl-root
   has no auto-margin, which otherwise left-shifts the empty message on wide viewports). Text is
   already text-align:center, so centering the block makes it read as page-centered. */
#page-watchlist #wl-root:has(.wl-empty),
#page-watchlist #wl-feed:has(.wl-empty){margin-left:auto;margin-right:auto}

/* звезда — для встраивания в любые карточки активов (дашборд/скринер/деталь) */
.wl-star{cursor:pointer;color:var(--txt3,var(--muted));font-size:14px;line-height:1;user-select:none;transition:.12s;padding:0 3px}
.wl-star:hover{color:var(--amber)}
.wl-star.wl-on{color:var(--amber)}