:root {
  --bg: #080b0f;
  --panel: #101720;
  --panel-soft: #141d28;
  --panel-raised: #182332;
  --line: #263442;
  --line-strong: #334758;
  --text: #eef4f8;
  --muted: #8795a4;
  --muted-strong: #a9b5bf;
  --green: #20c997;
  --green-soft: rgba(32, 201, 151, .13);
  --red: #ff5c73;
  --red-soft: rgba(255, 92, 115, .13);
  --blue: #4ea1ff;
  --blue-soft: rgba(78, 161, 255, .12);
  --amber: #f5b451;
  --shadow: rgba(0, 0, 0, .28);
  --radius: 8px;
}

:root[data-theme="light"] {
  --bg: #f4f7fa;
  --panel: #fff;
  --panel-soft: #f7fafc;
  --panel-raised: #edf3f8;
  --line: #d9e1e8;
  --line-strong: #c4d0db;
  --text: #17212b;
  --muted: #657485;
  --muted-strong: #3f4e5d;
  --shadow: rgba(29, 42, 56, .12);
}

body {
  margin: 0;
  background: transparent;
}

.widget {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-family: system-ui, -apple-system, sans-serif;
  text-decoration: none;
  color: var(--text);
  gap: 10px;
  white-space: nowrap;
}

.widget img { border-radius: 50%; }
.name { display: inline-flex; flex-direction: column; }
.muted { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.price { font-weight: 700; }
.change.is-up { color: var(--green); }
.change.is-down { color: var(--red); }
.brand { color: var(--muted); font-size: 11px; margin-left: auto; }
#error { color: var(--text); font: 14px system-ui, -apple-system, sans-serif; }

@keyframes flash-up {
  0% { background-color: var(--green-soft); }
  100% { background-color: transparent; }
}
@keyframes flash-down {
  0% { background-color: var(--red-soft); }
  100% { background-color: transparent; }
}
.flash-up { animation: flash-up 600ms ease-out; }
.flash-down { animation: flash-down 600ms ease-out; }

.ticker { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding: 6px; scrollbar-width: none; font-family: system-ui, -apple-system, sans-serif; }
.ticker::-webkit-scrollbar { display: none; }
.ticker .item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); text-decoration: none; white-space: nowrap; font-size: 13px; }
.ticker .item img { border-radius: 50%; }
.ticker .sym { font-weight: 700; }
.ticker .brand { align-self: center; color: var(--muted); font-size: 11px; padding: 0 6px; }

.mood { display:flex; gap:12px; align-items:center; padding:8px 10px; font-family: system-ui, -apple-system, sans-serif; color: var(--text); }
.mood-item { display:flex; flex-direction:column; gap:2px; padding:6px 12px; border:1px solid var(--line); border-radius:12px; background: var(--panel); min-width:140px; }
.mood .lbl { font-size:11px; color:var(--muted); }
.mood .val { font-size:22px; font-weight:700; line-height:1.1; }
.mood .cls { font-size:12px; color:var(--muted); }
.mood .brand { margin-left:auto; color:var(--muted); font-size:11px; text-decoration:none; }

.embed-news { display:flex; flex-direction:column; font-family: system-ui, -apple-system, sans-serif; padding: 6px 8px; gap: 6px; }
.embed-news-item { display:flex; flex-direction:column; gap:2px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background: var(--panel); color: var(--text); text-decoration:none; }
.embed-news-item .ttl { font-size:13px; font-weight:600; line-height:1.3; }
.embed-news-item .meta { font-size:11px; color: var(--muted); }
.embed-news .brand { align-self:flex-end; color: var(--muted); font-size:11px; text-decoration:none; }