/* 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:var(--radius);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;letter-spacing:.6px;color:var(--muted)}
#page-watchlist .wl-badge{font-size:10px;font-weight:500;padding:2px 7px;border-radius:6px;font-family:var(--mono)}
#page-watchlist .wl-bstock{color:var(--blue);background:rgba(47,129,247,.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:10px;font-weight:700;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:6px;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:11px;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:6px;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:6px;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}
/* Иконка пустого экрана — SVG на currentColor. Янтарный убран: он значит «вотчлист» на
   строках списка, а здесь был чистым украшением, то есть вторым акцентом на экране. */
#page-watchlist .wl-empty .ic{margin-bottom:12px;color:var(--dim)}
#page-watchlist .wl-empty .ic svg{width:30px;height:30px}
#page-watchlist .wl-empty .t{font-size:15px;font-weight:700;margin-bottom:6px}
#page-watchlist .wl-empty .d{font-size:13px;color:var(--muted);line-height:1.5;max-width:360px;margin:0 auto}
#page-watchlist .wl-empty .d b{color:var(--text)}
#page-watchlist .wl-localnote{font-size:11px;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(--muted);line-height:0;user-select:none;transition:color .12s;
  padding:0 3px;display:inline-flex;align-items:center}
.wl-star svg{display:block}
.wl-star:hover{color:var(--amber)}
.wl-star.wl-on{color:var(--amber)}
.wl-star.wl-on svg{fill:currentColor}