:root {
  --watch-bg: #080815;
  --watch-panel: #0d1424;
  --watch-panel-2: #111b2d;
  --watch-grid: #26334b;
  --watch-cyan: #42e5ff;
  --watch-green: #43f2a5;
  --watch-pink: #ff4fd8;
  --watch-purple: #8d68ff;
  --watch-amber: #ffc54d;
  --watch-muted: #8f9bb3;
}

.watch-page { padding: clamp(16px, 2.2vw, 34px); background: var(--watch-bg); color: #f7f8ff; }
.watch-board { overflow: hidden; border: 1px solid rgba(255,79,216,.42); border-radius: 18px; background: #080d19; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.watch-hero { display: flex; justify-content: space-between; gap: 24px; padding: clamp(18px,2.5vw,34px); border-bottom: 1px solid var(--watch-grid); background: radial-gradient(circle at 5% 0%,rgba(255,79,216,.12),transparent 35%),linear-gradient(130deg,#14091e,#091321 65%); }
.watch-overline,.watch-table-card > header span { color: var(--watch-pink); font: 900 .65rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .16em; }
.watch-hero h1 { margin: 7px 0 5px; font-size: clamp(1.8rem,3.4vw,3.2rem); letter-spacing: -.04em; }
.watch-hero p { max-width: 760px; margin: 0; color: #aebbd0; line-height: 1.55; }
.watch-sync { display: grid; min-width: min(310px,100%); align-content: center; gap: 4px; padding: 14px 16px; border: 1px solid #294263; border-radius: 13px; background: #09111f; }
.watch-sync small { color: var(--watch-cyan); font: 900 .6rem/1.2 ui-monospace,monospace; letter-spacing: .12em; }
.watch-sync strong { color: #fff; }
.watch-sync span { color: var(--watch-muted); font-size: .72rem; }
.watch-sync button { width: max-content; margin-top: 7px; padding: 8px 12px; border: 1px solid #365170; border-radius: 8px; background: #16223a; color: #fff; font-weight: 800; cursor: pointer; }
.watch-sync button:disabled { opacity: .55; cursor: wait; }

.watch-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--watch-grid); background: var(--watch-panel); }
.watch-summary div { display: grid; gap: 6px; padding: 15px 20px; border-right: 1px solid var(--watch-grid); }
.watch-summary div:last-child { border-right: 0; }
.watch-summary small { color: var(--watch-muted); font: 900 .6rem/1.2 ui-monospace,monospace; letter-spacing: .1em; }
.watch-summary strong { color: var(--watch-green); font-size: 1.35rem; }

.watch-groups { display: flex; gap: 8px; overflow-x: auto; padding: 12px 20px; border-bottom: 1px solid var(--watch-grid); background: #0a101d; scrollbar-width: thin; }
.watch-groups button { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; padding: 9px 13px; border: 1px solid #33445f; border-radius: 999px; background: #111b2d; color: #b8c4d8; font-weight: 800; cursor: pointer; }
.watch-groups button span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #202f49; font-size: .65rem; }
.watch-groups button.active { border-color: var(--watch-pink); color: #fff; box-shadow: 0 0 20px rgba(255,79,216,.14); }

.watch-table-card > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px 20px 12px; }
.watch-table-card h2 { margin: 3px 0 0; font-size: 1.3rem; }
.watch-filter { display: grid; gap: 5px; color: var(--watch-muted); font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.watch-filter input { width: min(300px,55vw); padding: 9px 11px; border: 1px solid #33445f; border-radius: 8px; background: #08101d; color: #fff; }
.watch-table-shell { overflow-x: auto; border-top: 1px solid var(--watch-grid); border-bottom: 1px solid var(--watch-grid); }
.watch-table-shell table { width: 100%; min-width: 990px; border-collapse: collapse; }
.watch-table-shell th { padding: 12px; border-bottom: 1px solid rgba(255,79,216,.55); background: #211036; color: #fff; text-align: left; font: 900 .67rem/1.2 ui-monospace,monospace; letter-spacing: .05em; }
.watch-table-shell td { padding: 12px; border-right: 1px solid rgba(51,68,95,.55); border-bottom: 1px solid rgba(51,68,95,.55); background: #0d1424; vertical-align: middle; }
.watch-table-shell tr[data-watch-item] { cursor: pointer; }
.watch-table-shell tr[data-watch-item]:hover td { background: #121d31; }
.watch-rank { color: var(--watch-cyan); font-family: ui-monospace,monospace; font-weight: 900; }
.watch-identity { display: flex; gap: 10px; align-items: center; min-width: 210px; }
.watch-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,79,216,.6); border-radius: 11px; background: linear-gradient(145deg,#182740,#29133b); color: #fff; font-weight: 900; }
.watch-identity strong,.watch-metric strong { display: block; color: #fff; }
.watch-identity small,.watch-metric small { display: block; margin-top: 3px; color: var(--watch-muted); font-size: .68rem; }
.watch-league { color: var(--watch-cyan); font-weight: 800; }
.watch-blocks { color: var(--watch-green); font-size: 1rem; font-weight: 900; }
.watch-boosts { display: flex; flex-wrap: wrap; gap: 5px; min-width: 220px; }
.watch-boost { display: inline-flex; gap: 5px; align-items: center; padding: 4px 7px; border: 1px solid #33445f; border-radius: 999px; background: #080f1c; color: #cbd5e6; font: 800 .62rem/1 ui-monospace,monospace; }
.watch-boost i { width: 7px; height: 7px; border-radius: 50%; background: var(--boost-color,var(--watch-purple)); box-shadow: 0 0 8px var(--boost-color,var(--watch-purple)); }
.watch-empty { color: var(--watch-muted); }
.watch-group-label { color: #c5b8ff; font-size: .75rem; font-weight: 800; }
.watch-status { min-height: 42px; padding: 12px 20px; color: var(--watch-muted); font-size: .76rem; }
.watch-status.ready { color: var(--watch-green); }
.watch-status.warning { color: var(--watch-amber); }
.watch-status.error { color: #ff667f; }

.watch-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 18px; }
.watch-modal[hidden] { display: none; }
.watch-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,5,13,.82); backdrop-filter: blur(7px); }
.watch-modal-dialog { position: relative; width: min(820px,100%); max-height: min(760px,90vh); overflow: auto; border: 1px solid rgba(255,79,216,.62); border-radius: 17px; background: #09111f; box-shadow: 0 26px 80px rgba(0,0,0,.65); }
.watch-modal-dialog > header { position: sticky; z-index: 2; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--watch-grid); background: rgba(9,17,31,.96); }
.watch-modal-dialog > header span { color: var(--watch-pink); font: 900 .6rem/1.2 ui-monospace,monospace; letter-spacing: .14em; }
.watch-modal-dialog h2 { margin: 4px 0 0; }
.watch-modal-dialog > header button { width: 38px; height: 38px; border: 1px solid #355171; border-radius: 10px; background: #111c30; color: #fff; font-size: 1.4rem; cursor: pointer; }
#watchModalBody { padding: 18px; }
.watch-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.watch-detail-grid div { padding: 12px; border: 1px solid var(--watch-grid); border-radius: 10px; background: #0e1829; }
.watch-detail-grid small { display: block; color: var(--watch-muted); font: 800 .58rem/1.2 ui-monospace,monospace; }
.watch-detail-grid strong { display: block; margin-top: 5px; color: var(--watch-green); }
.watch-cycle-list { display: grid; gap: 8px; margin-top: 18px; }
.watch-cycle { display: grid; grid-template-columns: 82px 1fr 1fr 1.4fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--watch-grid); border-radius: 10px; background: #0b1423; }
.watch-cycle > strong { color: var(--watch-cyan); }
.watch-cycle span { color: #c9d2e2; font-size: .76rem; }

body.premium-demo-active .watch-sync button { display: none; }

@media (max-width: 840px) {
  .watch-hero { flex-direction: column; }
  .watch-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .watch-summary div:nth-child(2) { border-right: 0; }
  .watch-table-card > header { align-items: stretch; flex-direction: column; }
  .watch-filter input { width: 100%; }
  .watch-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .watch-cycle { grid-template-columns: 72px 1fr; }
}

@media (max-width: 520px) {
  .watch-page { padding: 9px; }
  .watch-summary strong { font-size: 1.05rem; }
  .watch-groups { padding-inline: 12px; }
  .watch-modal { padding: 7px; }
}