:root {
  /* base */
  --bg: #070811;
  --bg-deep: #04050b;
  --text: #eaf0f9;
  --text-dim: #9aa6bd;
  --text-faint: #69748c;

  /* aurora accent palette */
  --violet: #8b7cff;
  --teal: #1fe0c0;
  --pink: #ff5ea8;
  --cyan: #38d6ff;

  /* semantic */
  --green: #2ee6a0;
  --green-soft: #1c8a63;
  --red: #ff5d73;
  --amber: #ffc24b;
  --blue: #4aa8ff;
  --purple: #b07cff;

  /* glass surfaces */
  --glass: rgba(18, 22, 40, 0.74);
  --glass-2: rgba(26, 31, 52, 0.66);
  --glass-strong: rgba(11, 13, 26, 0.82);
  --border: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.055);
  --hi: rgba(255, 255, 255, 0.14);
  --bg-elev: rgba(255, 255, 255, 0.05);
  --bg-card: var(--glass);
  --bg-hover: rgba(255, 255, 255, 0.075);

  /* gradients + fx */
  --grad: linear-gradient(135deg, #8b7cff 0%, #1fe0c0 100%);
  --grad-3: linear-gradient(120deg, #8b7cff, #38d6ff, #1fe0c0);
  --grad-line: linear-gradient(90deg, transparent, rgba(139,124,255,.7), rgba(31,224,192,.7), transparent);
  --shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  --glow: 0 0 26px rgba(139, 124, 255, 0.35);
  --blur: blur(18px) saturate(150%);

  --radius: 16px;
  --radius-sm: 11px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-deep);
  color: var(--text); font-family: var(--sans); font-size: 14px;
  -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative;
}

/* ---------- animated aurora backdrop ---------- */
#aurora {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  filter: blur(60px) saturate(158%); pointer-events: none;
  background: radial-gradient(140% 110% at 50% -10%, #0e1430 0%, #090c20 50%, var(--bg-deep) 80%);
}
#aurora .blob {
  position: absolute; mix-blend-mode: screen; will-change: transform, opacity, filter;
  border-radius: 48% 52% 56% 44% / 60% 50% 50% 40%;   /* soft organic curtain shape */
}
/* tall curtains sway + breathe; broad washes drift — desynced periods so it never loops obviously */
.blob.b1 { width: 52vmax; height: 84vmax; top: -26%; left: -6%;
  background: radial-gradient(50% 50% at 50% 42%, #7c5cff 0%, rgba(124,92,255,.32) 38%, transparent 70%);
  opacity: .42; animation: drift1 30s ease-in-out infinite, hueA 41s ease-in-out infinite; }
.blob.b2 { width: 58vmax; height: 80vmax; bottom: -30%; right: -8%;
  background: radial-gradient(50% 50% at 50% 58%, #15d6c0 0%, rgba(21,214,192,.30) 40%, transparent 70%);
  opacity: .42; animation: drift2 37s ease-in-out infinite, hueB 47s ease-in-out infinite; }
.blob.b3 { width: 64vmax; height: 58vmax; top: 12%; right: 8%;
  background: radial-gradient(50% 50% at 50% 50%, #ff4f9d 0%, rgba(255,79,157,.26) 42%, transparent 68%);
  opacity: .30; animation: drift3 44s ease-in-out infinite, hueA 53s ease-in-out infinite; }
.blob.b4 { width: 62vmax; height: 64vmax; bottom: -8%; left: 6%;
  background: radial-gradient(50% 50% at 50% 50%, #3b6dff 0%, rgba(59,109,255,.28) 42%, transparent 70%);
  opacity: .34; animation: drift4 33s ease-in-out infinite, hueB 39s ease-in-out infinite; }
/* vignette over aurora — keeps text readable */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(135% 105% at 50% 0%, transparent 46%, rgba(2,3,8,.76) 100%);
}
/* flowing, undulating motion: gentle sway + vertical breathe + skew waves + shimmer */
@keyframes drift1 {
  0%   { transform: translate(0,0) rotate(0deg) scale(1) skewX(0deg);     opacity: .40; }
  22%  { transform: translate(5vw,3vh) rotate(4deg) scale(1.07) skewX(-7deg);  opacity: .47; }
  46%  { transform: translate(-3vw,7vh) rotate(-3deg) scale(.96) skewX(6deg);  opacity: .34; }
  72%  { transform: translate(4vw,2vh) rotate(2deg) scale(1.05) skewX(-4deg);  opacity: .45; }
  100% { transform: translate(0,0) rotate(0deg) scale(1) skewX(0deg);     opacity: .40; }
}
@keyframes drift2 {
  0%   { transform: translate(0,0) rotate(0deg) scale(1) skewX(0deg);      opacity: .42; }
  26%  { transform: translate(-6vw,-4vh) rotate(-5deg) scale(1.1) skewX(8deg);  opacity: .47; }
  54%  { transform: translate(3vw,-8vh) rotate(3deg) scale(.95) skewX(-6deg);   opacity: .33; }
  80%  { transform: translate(-4vw,-2vh) rotate(-2deg) scale(1.04) skewX(4deg); opacity: .45; }
  100% { transform: translate(0,0) rotate(0deg) scale(1) skewX(0deg);      opacity: .42; }
}
@keyframes drift3 {
  0%   { transform: translate(0,0) rotate(0deg) scale(1) skewY(0deg);      opacity: .28; }
  30%  { transform: translate(-7vw,5vh) rotate(4deg) scale(1.08) skewY(-5deg);  opacity: .35; }
  62%  { transform: translate(5vw,-3vh) rotate(-3deg) scale(.93) skewY(4deg);   opacity: .23; }
  100% { transform: translate(0,0) rotate(0deg) scale(1) skewY(0deg);      opacity: .28; }
}
@keyframes drift4 {
  0%   { transform: translate(0,0) rotate(0deg) scale(1) skewX(0deg);      opacity: .32; }
  34%  { transform: translate(7vw,-5vh) rotate(5deg) scale(1.07) skewX(-7deg);  opacity: .39; }
  66%  { transform: translate(-5vw,4vh) rotate(-3deg) scale(.95) skewX(5deg);   opacity: .25; }
  100% { transform: translate(0,0) rotate(0deg) scale(1) skewX(0deg);      opacity: .32; }
}
/* slow hue breathing so the colours shift like a real aurora */
@keyframes hueA { 0%,100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(-16deg); } }
@keyframes hueB { 0%,100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--violet), var(--teal)); background-clip: padding-box; border: 2px solid transparent; border-radius: 8px; opacity: .7; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--violet), var(--cyan)); }

a { color: var(--cyan); text-decoration: none; }
.mono { font-family: var(--mono); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.dim { color: var(--text-dim); }
.empty { padding: 60px; text-align: center; color: var(--text-dim); }

/* glassy surface helper applied to many panels */
.topbar, .chartcard, .tablecard, .card, .gauge, .mg-summary, .sf-stat,
.drawer, .modal, .wal-card, .job, .reglock {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--border);
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 26px;
  padding: 14px 22px; background: rgba(9, 11, 22, 0.82);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 40px -16px rgba(0,0,0,.6);
}
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad-line); opacity: .8; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: .3px; }
.brand .logo {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--grad); background-size: 200% 200%;
  display: grid; place-items: center; font-size: 17px; color: #0a0a16; font-weight: 800;
  box-shadow: 0 0 22px rgba(139,124,255,.5), inset 0 1px 0 rgba(255,255,255,.4);
  animation: gradmove 7s ease infinite, glowpulse 4.5s ease-in-out infinite;
}
.brand .logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.brand small { display: block; font-weight: 500; color: var(--text-faint); font-size: 10px; letter-spacing: 1.6px; }
.stats { display: flex; gap: 26px; flex: 1; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); }
.stat .v { font-size: 16px; font-weight: 650; font-family: var(--mono); }
.stat .v.big { font-size: 20px; }
.spark { width: 90px; height: 30px; }
.topbar .right { display: flex; align-items: center; gap: 14px; }
.conn { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.dot.live { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s infinite; }
.dot.off { background: var(--red); box-shadow: 0 0 10px var(--red); }
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.8)} }
.bell {
  position: relative; cursor: pointer; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; background: var(--bg-elev); border: 1px solid var(--border); font-size: 17px;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.bell:hover { background: var(--bg-hover); transform: translateY(-1px); box-shadow: var(--glow); }
.bell .badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: linear-gradient(135deg, var(--pink), var(--red)); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid #0a0c16; box-shadow: 0 0 12px rgba(255,94,168,.6);
}
.bell .badge.hidden { display: none; }

/* ---------- Layout ---------- */
.wrap { max-width: 1500px; margin: 0 auto; padding: 22px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.search {
  flex: 1; min-width: 220px; max-width: 360px; background: var(--bg-elev);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--border); border-radius: 11px; padding: 9px 14px; color: var(--text); font-size: 13px;
  transition: box-shadow .18s, border-color .18s, background .18s;
}
.search::placeholder { color: var(--text-faint); }
.search:focus { outline: none; border-color: transparent; background: rgba(255,255,255,.07); box-shadow: 0 0 0 1px var(--violet), 0 0 18px rgba(139,124,255,.32); }
.toolbar .meta { margin-left: auto; font-size: 12px; color: var(--text-dim); display:flex; gap:16px; align-items:center; }
.sweepbar { width: 120px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.sweepbar > i { display:block; height:100%; background: var(--grad); background-size: 200% 100%; width:0%; transition: width .5s; animation: gradmove 3s linear infinite; }

/* ---------- Table ---------- */
.tablecard { border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; background: var(--glass-strong); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; z-index: 10; background: rgba(13, 16, 30, 0.92); color: var(--text-faint);
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px; text-align: right;
  padding: 13px 14px; cursor: pointer; user-select: none; border-bottom: 1px solid var(--border); white-space: nowrap;
  transition: color .15s;
}
thead th:first-child, thead th.l { text-align: left; }
thead th:hover { color: var(--text); }
thead th .arr { opacity: .6; font-size: 9px; color: var(--teal); }
tbody td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--border-soft); font-family: var(--mono); font-size: 13px; white-space: nowrap; }
tbody td.l { text-align: left; font-family: var(--sans); }
tbody tr { transition: background .14s, box-shadow .14s; cursor: pointer; position: relative; }
tbody tr:hover { background: var(--bg-hover); box-shadow: inset 3px 0 0 0 var(--teal); }
tbody tr:last-child td { border-bottom: none; }
.nid { display:inline-grid; place-items:center; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 7px; background: rgba(139,124,255,.12); color: #c9c0ff; font-family: var(--mono); font-size: 12px; border: 1px solid rgba(139,124,255,.2); }
.sname { font-weight: 600; }
.sym { color: var(--text-faint); margin-left: 5px; font-size: 12px; }
.flag { display:inline-block; padding: 2px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; }
.flag.on { background: rgba(46,230,160,.14); color: var(--green); box-shadow: inset 0 0 0 1px rgba(46,230,160,.22); }
.flag.off { background: rgba(255,93,115,.13); color: var(--red); box-shadow: inset 0 0 0 1px rgba(255,93,115,.22); }
.flag.immune { background: rgba(204,93,232,.15); color: #d98bff; box-shadow: inset 0 0 0 1px rgba(204,93,232,.25); }
.burnbar { display:inline-flex; align-items:center; gap:7px; justify-content:flex-end; }
.burnbar .track { width: 52px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow:hidden; }
.burnbar .track > i { display:block; height:100%; }
.skel { color: var(--text-faint); }
.star { cursor: pointer; color: var(--text-faint); margin-right: 8px; font-size: 14px; transition: color .14s, transform .14s, filter .14s; display:inline-block; }
.star:hover { color: var(--amber); transform: scale(1.3); filter: drop-shadow(0 0 6px rgba(255,194,75,.6)); }
.star.on { color: var(--amber); filter: drop-shadow(0 0 5px rgba(255,194,75,.5)); }
tbody tr.watched { background: rgba(255,194,75,.05); }
.watchbtn { font-size: 13px; padding: 8px 14px; margin-bottom: 14px; }
.watchbtn.active { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 16px rgba(255,194,75,.25); }

/* ---------- Drawers ---------- */
.scrim { position: fixed; inset: 0; background: rgba(2,3,8,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity:0; pointer-events:none; transition: opacity .22s; z-index: 50; }
.scrim.show { opacity:1; pointer-events:auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(760px, 94vw);
  background: rgba(11, 13, 26, 0.82); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  border-left: 1px solid var(--border); box-shadow: -30px 0 80px rgba(0,0,0,.6);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 60; display: flex; flex-direction: column;
}
.drawer.show { transform: translateX(0); }
.drawer.narrow { width: min(420px, 94vw); }
.drawer-head { display:flex; align-items:center; gap:12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: 18px; }
.drawer-head .close, .subfull-head .close, .modal-head .close { margin-left:auto; cursor:pointer; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background: var(--bg-elev); border:1px solid var(--border); font-size:18px; transition: background .15s, transform .15s; }
.drawer-head .close:hover, .subfull-head .close:hover, .modal-head .close:hover { background: var(--bg-hover); transform: rotate(90deg); }
.drawer-body { overflow-y: auto; padding: 20px 22px; flex: 1; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; margin-bottom: 22px; }
.card { border-radius: var(--radius-sm); padding: 13px 14px; box-shadow: inset 0 1px 0 var(--hi); }
.card .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-faint); margin-bottom: 5px; }
.card .v { font-size: 17px; font-weight: 650; font-family: var(--mono); }
.card .v.sm { font-size: 14px; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing:1px; color: var(--text-faint); margin: 22px 0 10px; display:flex; align-items:center; gap:10px; }
.section-title .line { flex:1; height:1px; background: linear-gradient(90deg, var(--border), transparent); }
.gauge { display:flex; align-items:center; gap:14px; border-radius:var(--radius-sm); padding:14px 16px; margin-bottom: 6px; }
.gauge .ring { position: relative; width: 64px; height: 64px; }
.gauge .num { font-size: 22px; font-weight: 700; font-family: var(--mono); }
.mtable-wrap { max-height: 440px; overflow-y: auto; border:1px solid var(--border); border-radius: var(--radius-sm); background: rgba(8,10,20,.4); }
.mtable-wrap thead th { top: 0; background: rgba(14,17,32,.95); }

/* ---------- Notifications feed ---------- */
.feed-item { display:flex; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--border-soft); align-items:flex-start; transition: background .14s; }
.feed-item:hover { background: rgba(255,255,255,.03); }
.feed-item .ic { width: 30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px; flex-shrink:0; }
.feed-item .feed-main { flex:1; min-width:0; }
.feed-item .feed-del { flex-shrink:0; background:transparent; border:none; color:var(--text-faint); cursor:pointer; font-size:13px; width:24px; height:24px; border-radius:7px; opacity:0; transition:opacity .14s, background .14s, color .14s; }
.feed-item:hover .feed-del { opacity:1; }
.feed-item .feed-del:hover { background:rgba(255,93,115,.15); color:var(--red); }
.feed-item .t { font-weight:600; font-size:13px; }
.feed-item .b { color: var(--text-dim); font-size: 12px; margin-top:3px; line-height:1.45; }
.feed-item .ts { color: var(--text-faint); font-size: 11px; margin-top:5px; }
.sev-good .ic { background: rgba(46,230,160,.15); color: var(--green); box-shadow: 0 0 14px rgba(46,230,160,.2); }
.sev-warn .ic { background: rgba(255,194,75,.15); color: var(--amber); box-shadow: 0 0 14px rgba(255,194,75,.2); }
.sev-info .ic { background: rgba(74,168,255,.15); color: var(--blue); box-shadow: 0 0 14px rgba(74,168,255,.2); }
.feed-empty { padding: 50px 22px; text-align:center; color: var(--text-faint); }
.feed-tools { padding: 10px 22px; border-bottom:1px solid var(--border); display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.btn { background: var(--bg-elev); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border:1px solid var(--border); color: var(--text-dim); border-radius:9px; padding:7px 13px; font-size:12px; cursor:pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.btn:hover { background: var(--bg-hover); color: var(--text); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.active { border-color: transparent; color: #06120f; background: var(--grad); box-shadow: 0 6px 20px -8px rgba(31,224,192,.55); font-weight: 600; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; top: 76px; right: 22px; z-index: 80; display:flex; flex-direction:column; gap:10px; width: 340px; }
.toast { background: rgba(16,19,36,.78); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border:1px solid var(--border); border-left-width:3px; border-radius: var(--radius-sm); padding: 13px 15px; box-shadow: var(--shadow); animation: slidein .35s cubic-bezier(.2,.8,.3,1); cursor:pointer; }
.toast.sev-good { border-left-color: var(--green); }
.toast.sev-warn { border-left-color: var(--amber); }
.toast.sev-info { border-left-color: var(--blue); }
.toast .t { font-weight:600; font-size:13px; display:flex; gap:8px; align-items:center; }
.toast .b { color: var(--text-dim); font-size:12px; margin-top:4px; line-height:1.4; }
.toast.out { animation: slideout .3s forwards; }
@keyframes slidein { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideout { to{transform:translateX(120%);opacity:0} }

.loading { text-align:center; padding: 70px; color: var(--text-dim); }
.loading.small { padding: 24px; }
.spin { display:inline-block; width:28px; height:28px; border:3px solid rgba(255,255,255,.12); border-top-color: var(--teal); border-right-color: var(--violet); border-radius:50%; animation: rot 1s linear infinite; box-shadow: var(--glow); }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- nav tabs + view ---------- */
.tabs { display:flex; gap:6px; }
.tab { background:transparent; border:1px solid transparent; color:var(--text-dim); padding:8px 16px; border-radius:11px; font-size:13px; font-weight:600; cursor:pointer; transition: color .15s, background .15s; position: relative; }
.tab:hover { color:var(--text); background:var(--bg-elev); }
.tab.active { color:var(--text); background:var(--bg-elev); border-color:var(--border); box-shadow: inset 0 1px 0 var(--hi); }
.tab.active::after { content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:var(--grad); box-shadow:0 0 10px rgba(139,124,255,.6); }
.stats.mini { flex:1; gap:22px; justify-content:flex-end; }
.stats.mini .stat { align-items:flex-end; }
.view.hidden, .hidden { display:none !important; }
.muted { color:var(--text-faint); }
.muted code { background:var(--bg-elev); padding:1px 6px; border-radius:5px; color:var(--text-dim); }

/* ---------- TAO area chart ---------- */
.chartcard { border-radius:var(--radius); padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow), inset 0 1px 0 var(--hi); position: relative; overflow: hidden; }
.chartcard::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--grad-line); }
.chart-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; }
.chart-title { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); }
.chart-price { font-size:23px; font-weight:700; font-family:var(--mono); margin-top:2px; }
.chart-price .muted { font-size:12px; font-weight:400; }
.chart-toggle { display:flex; gap:4px; background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:3px; }
.chart-toggle button { background:transparent; border:none; color:var(--text-dim); padding:5px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; transition: background .15s, color .15s; }
.chart-toggle button:hover { color:var(--text); }
.chart-toggle button.active { background:linear-gradient(135deg, rgba(139,124,255,.5), rgba(56,214,255,.4)); color:#eef0ff; box-shadow: 0 0 14px rgba(139,124,255,.35); }
.chart-wrap { position:relative; height:210px; }
.chart-wrap.sm { height:150px; }
.chart-wrap canvas, .incbars { width:100%; height:100%; display:block; }
.chart-wrap canvas { animation: fadein .8s ease both; }
.mchart-wrap { position:relative; height:300px; margin-bottom:8px; }
.mchart-wrap canvas { animation: fadein .8s ease both; }
.incbars { width:100%; height:100%; display:block; cursor:crosshair; }
.legend { display:inline-flex; align-items:center; gap:10px; font-size:10px; color:var(--text-faint); text-transform:none; letter-spacing:0; margin-left:4px; }
.legend .lg { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:3px; vertical-align:middle; box-shadow: 0 0 6px currentColor; }
.legend .lg.established { background:#46dc2f; color:#46dc2f; }
.legend .lg.immune { background:#cc5de8; color:#cc5de8; }
.legend .lg.at_risk { background:#fa5252; color:#fa5252; }
.chart-tip { position:absolute; top:6px; pointer-events:none; background:rgba(10,13,24,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:7px 11px; font-size:12px; z-index:5; box-shadow:var(--shadow); }
.chart-tip .tip-d { color:var(--text-faint); font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.chart-tip .tip-v { font-family:var(--mono); font-size:15px; font-weight:600; color:#c9bcff; }
#alphaTip .tip-v { color:#00DBBC; }
.sel { background:var(--bg-elev); border:1px solid var(--border); color:var(--text); border-radius:9px; padding:5px 10px; font-size:12px; }

/* ---------- miner graph ---------- */
.mg-head { display:flex; flex-direction:column; gap:12px; margin-bottom:8px; }
.mg-summary { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; border-radius:var(--radius-sm); padding:14px; box-shadow: inset 0 1px 0 var(--hi); }
.mgi { display:flex; flex-direction:column; gap:3px; }
.mgi .k { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint); }
.mgi .v { font-size:15px; font-weight:650; font-family:var(--mono); }
td.dim { color:var(--text-faint); }

/* ---------- external link buttons ---------- */
.lbtns { display:inline-flex; gap:5px; }
.lbtn { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
  background:var(--bg-elev); border:1px solid var(--border); color:var(--text-dim); transition:all .15s; }
.lbtn:hover { color:var(--text); border-color:transparent; background:var(--bg-hover); transform:translateY(-2px); box-shadow: var(--glow); }
.lbtn svg { display:block; }
.lbtn.big { width:34px; height:34px; border-radius:10px; }
thead th.nosort { cursor:default; }
thead th.nosort:hover { color:var(--text-faint); }

/* ---------- full-screen subnet view ---------- */
body.noscroll { overflow:hidden; }
.subfull { position:fixed; inset:0; z-index:70; background:transparent;
  display:flex; flex-direction:column; opacity:0; pointer-events:none;
  transform:translateY(10px); transition:opacity .25s, transform .25s; }
.subfull::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--bg-deep); }
.subfull.show { opacity:1; pointer-events:auto; transform:none; }
.subfull-head { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:14px;
  padding:14px 26px; background:rgba(9,11,22,.72); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border-bottom:1px solid var(--border); }
.subfull-head::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--grad-line); opacity:.7; }
.subfull-head h2 { font-size:19px; }
.subfull-head .sym { color:var(--text-faint); font-size:14px; margin-left:4px; }
.sf-back { width:34px; height:34px; border-radius:10px; background:var(--bg-elev); border:1px solid var(--border);
  color:var(--text-dim); font-size:18px; cursor:pointer; transition: background .15s, transform .15s; }
.sf-back:hover { background:var(--bg-hover); color:var(--text); transform: translateX(-2px); }
.sf-links { display:flex; gap:7px; margin-left:6px; }
.sf-spacer { flex:1; }
.subfull-body { overflow-y:auto; padding:22px 26px 60px; max-width:1400px; width:100%; margin:0 auto; }

.sf-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; margin-bottom:20px; }
.sf-stat { border-radius:var(--radius-sm); padding:12px 14px;
  display:flex; flex-direction:column; gap:5px; box-shadow: inset 0 1px 0 var(--hi); transition: transform .18s, box-shadow .18s, border-color .18s; }
.sf-stat:hover { transform: translateY(-3px); border-color: rgba(139,124,255,.4); box-shadow: var(--glow), inset 0 1px 0 var(--hi); }
.sf-stat .k { font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--text-faint); }
.sf-stat .v { font-size:16px; font-weight:650; font-family:var(--mono); }
/* alpha candlestick panel: dark glass, teal accents */
.chartcard.sub { margin-bottom:20px; background:rgba(9,11,20,.82); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border-color:rgba(31,224,192,.18); }
.chartcard.sub::before { background: linear-gradient(90deg, transparent, rgba(0,219,188,.6), transparent); }
.chartcard.sub .chart-wrap { height:300px; }
.chartcard.sub .chart-title { color:#9fb1ad; }
.chartcard.sub .chart-price { color:#00DBBC; }
.chartcard.sub .chart-toggle { background:rgba(255,255,255,.05); border-color:rgba(31,224,192,.18); }
.chartcard.sub .chart-toggle button.active { background:linear-gradient(135deg, #00DBBC, #14b8a6); color:#06120f; box-shadow:0 0 14px rgba(0,219,188,.4); }
.chartcard.sub .chart-toggle button { color:#9fb1ad; }

/* ---------- Wallet ---------- */
.btn.primary { background:var(--grad); background-size:200% 200%; color:#06120f; border-color:transparent; font-weight:700; box-shadow:0 8px 26px -8px rgba(31,224,192,.55); animation: gradmove 7s ease infinite; }
.btn.primary:hover { filter:brightness(1.08); color:#06120f; transform: translateY(-1px); box-shadow:0 10px 30px -8px rgba(31,224,192,.7); }
.btn.primary:disabled { filter: grayscale(.5) brightness(.7); cursor: default; transform:none; box-shadow:none; }
.wallet-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.wallet-total { display:flex; flex-direction:column; gap:3px; margin-right:auto; }
.wallet-total .k { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); }
.wallet-total .v { font-size:24px; font-weight:700; font-family:var(--mono);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wal-card { border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; box-shadow:var(--shadow), inset 0 1px 0 var(--hi); }
.wal-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.wal-name { font-size:16px; font-weight:700; }
.wal-bal { font-size:18px; font-weight:700; font-family:var(--mono); color:var(--green); }
.wal-meta { font-size:12px; color:var(--text-faint); margin-bottom:12px; }
.jobs-title { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); margin:4px 0 8px; }
.job { display:flex; align-items:center; gap:12px; border-radius:var(--radius-sm); padding:11px 14px; margin-bottom:9px; box-shadow: inset 0 1px 0 var(--hi); }
.job-main { flex:1; min-width:0; }
.job-t { font-weight:600; font-size:13px; display:flex; align-items:center; gap:8px; }
.job-b { font-size:12px; color:var(--text-dim); margin-top:3px; }

/* ---------- modals ---------- */
.modal-scrim { position:fixed; inset:0; z-index:90; background:rgba(2,3,8,.6); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .2s; }
.modal-scrim.show { opacity:1; pointer-events:auto; }
.modal { width:min(440px,94vw); background:rgba(14,17,32,.86); -webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow), inset 0 1px 0 var(--hi); overflow:hidden; animation: pop .3s cubic-bezier(.2,.8,.3,1); }
.modal.hidden { display:none; }
.modal-head { display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-head h3 { font-size:16px; }
.modal-body { padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.fld { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--text-dim); }
.fld span { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint); }
.fld input, .fld select { background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text); font-size:14px; font-family:var(--mono); transition: box-shadow .15s, border-color .15s; }
.fld input:focus, .fld select:focus { outline:none; border-color:transparent; box-shadow:0 0 0 1px var(--teal), 0 0 16px rgba(31,224,192,.3); }
.fld-hint { font-size:11px; color:var(--text-faint); line-height:1.45; margin-top:-6px; }
.reg-summary { background:var(--bg-elev); border:1px solid var(--border); border-radius:11px; padding:12px 14px; font-size:13px; line-height:1.5; }
.modal-err { background:rgba(255,93,115,.12); border:1px solid rgba(255,93,115,.32); color:var(--red); border-radius:10px; padding:10px 12px; font-size:12px; word-break:break-word; }
.modal-err.hidden { display:none; }
.modal-foot { display:flex; justify-content:space-between; gap:10px; padding:14px 20px; border-top:1px solid var(--border); }
.token-row { display:flex; gap:8px; margin-top:14px; justify-content:center; }
.token-row input { background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text); font-family:var(--mono); min-width:240px; }
.token-row input:focus { outline:none; border-color:transparent; box-shadow:0 0 0 1px var(--teal); }
.reglock { display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-radius:var(--radius-sm); padding:11px 14px; margin-bottom:14px; font-size:13px; color:var(--text-dim); box-shadow: inset 0 1px 0 var(--hi); }
.reglock input { background:var(--bg-elev); border:1px solid var(--border); border-radius:9px; padding:7px 10px; color:var(--text); font-family:var(--mono); min-width:200px; }
.reglock input:focus { outline:none; border-color:transparent; box-shadow:0 0 0 1px var(--teal); }
.reglock code { background:var(--bg-elev); padding:1px 6px; border-radius:5px; color:var(--text-dim); }
.wal-id { display:flex; align-items:center; gap:10px; }
.wal-ico { width:30px; height:30px; border-radius:10px; display:inline-grid; place-items:center; flex-shrink:0; }
.wal-ico.emoji { font-size:20px; background:var(--bg-elev); border:1px solid var(--border); line-height:1; }
.wal-ico.mono-ico { font-size:15px; font-weight:700; font-family:var(--mono); }
.wal-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:6px 0 14px; }
.wal-stats .ws { background:var(--bg-elev); border:1px solid var(--border); border-radius:11px; padding:9px 12px; display:flex; flex-direction:column; gap:3px; transition: transform .16s, border-color .16s; }
.wal-stats .ws:hover { transform: translateY(-2px); border-color: rgba(139,124,255,.35); }
.wal-stats .ws .k { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint); }
.wal-stats .ws .v { font-size:15px; font-weight:650; font-family:var(--mono); }
.wal-hk > summary { cursor:pointer; font-size:12px; color:var(--text-dim); padding:6px 0; user-select:none; }
.wal-hk > summary:hover { color:var(--text); }
.wal-hk tbody tr.inactive td { opacity:.5; }
.wal-hk tbody tr { cursor:default; }
.wal-hk tbody tr:hover { box-shadow:none; }
.pos-cell { white-space:normal; max-width:480px; }
.pos-chip { display:inline-block; font-family:var(--mono); font-size:11px; padding:2px 7px; margin:2px 4px 2px 0; border-radius:7px; background:rgba(46,230,160,.1); color:var(--green); border:1px solid rgba(46,230,160,.22); }
.pos-chip.stake { background:rgba(74,168,255,.1); color:var(--blue); border-color:rgba(74,168,255,.22); }
.addr { display:inline-flex; align-items:center; gap:5px; }
.copy { display:inline-grid; place-items:center; width:20px; height:20px; padding:0; border:none;
  background:transparent; color:var(--text-faint); cursor:pointer; border-radius:6px; vertical-align:middle;
  transition:color .14s, background .14s; }
.copy:hover { color:var(--teal); background:var(--bg-hover); }
.copy.copied { color:var(--green); }
.copy.copied svg { display:none; }
.copy.copied::after { content:'✓'; font-size:13px; line-height:1; }
.copy svg { display:block; }
#alphaTip .ohlc { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:2px 8px; margin-top:4px; font-family:var(--mono); font-size:11px; }
#alphaTip .ohlc span { color:var(--text-faint); }
#alphaTip .ohlc b { color:var(--text); font-weight:600; }
#alphaTip .ohlc b.up { color:#00DBBC; }
#alphaTip .ohlc b.down { color:#EB5347; }

/* ---------- table pagination + filter footer ---------- */
.pg-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:10px 14px; border-top:1px solid var(--border); font-size:12px; color:var(--text-dim); }
.pg-left { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pg-count { color:var(--text-faint); }
.pg-size { display:inline-flex; align-items:center; gap:6px; }
.pg-sz { background:var(--bg-elev); border:1px solid var(--border); color:var(--text-dim); border-radius:8px;
  padding:3px 9px; font-size:12px; font-family:var(--mono); cursor:pointer; transition: background .14s, color .14s; }
.pg-sz:hover { background:var(--bg-hover); color:var(--text); }
.pg-sz.active { background:var(--grad); border-color:transparent; color:#06120f; font-weight:600; }
.pg-nav { display:inline-flex; align-items:center; gap:5px; }
.pg-btn { background:var(--bg-elev); border:1px solid var(--border); color:var(--text-dim); border-radius:8px;
  width:28px; height:28px; font-size:13px; cursor:pointer; display:grid; place-items:center; transition: background .14s, color .14s; }
.pg-btn:hover:not(:disabled) { background:var(--bg-hover); color:var(--text); }
.pg-btn:disabled { opacity:.35; cursor:default; }
.pg-page { font-family:var(--mono); color:var(--text-dim); padding:0 6px; min-width:54px; text-align:center; }
.mtable-toolbar { display:flex; align-items:center; gap:10px; margin:2px 0 8px; flex-wrap:wrap; }
.mtable-toolbar .search { max-width:280px; min-width:160px; }
.mtable-toolbar .seg { display:inline-flex; gap:4px; background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:3px; }
.mtable-toolbar .seg button { background:transparent; border:none; color:var(--text-dim); padding:5px 11px; border-radius:8px; font-size:12px; cursor:pointer; transition: background .14s, color .14s; }
.mtable-toolbar .seg button:hover { color:var(--text); }
.mtable-toolbar .seg button.active { background:linear-gradient(135deg, rgba(139,124,255,.45), rgba(56,214,255,.35)); color:#eef0ff; }

/* TAO chart: BTC overlay legend + gold accents */
.ch-legend { font-size:10px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-faint); margin-left:10px; display:inline-flex; align-items:center; gap:8px; }
.ch-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:3px; vertical-align:middle; box-shadow: 0 0 6px currentColor; }
.ch-legend .dot-tao { background:#8b7cff; color:#8b7cff; }
.ch-legend .dot-btc { background:#f7b500; color:#f7b500; }
.chart-price .btc-px { font-size:14px; font-weight:600; color:#f7b500; margin-left:10px; }
.chart-tip .tip-btc { font-family:var(--mono); font-size:13px; font-weight:600; color:#f7b500; margin-top:2px; }

/* ---------- shared keyframes + entrance motion ---------- */
@keyframes gradmove { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes glowpulse { 0%,100%{box-shadow:0 0 18px rgba(139,124,255,.4), inset 0 1px 0 rgba(255,255,255,.4)} 50%{box-shadow:0 0 30px rgba(31,224,192,.55), inset 0 1px 0 rgba(255,255,255,.4)} }
@keyframes fadein { from{opacity:0} to{opacity:1} }
@keyframes rise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@keyframes pop { from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} }

/* panels rise in on load */
#viewOverview > .chartcard { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.02s; }
#viewOverview > .toolbar { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.09s; }
#viewOverview > .tablecard { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.15s; }
#viewOverview > .pg-foot { animation: fadein .7s ease both; animation-delay:.22s; }

/* full-screen subnet content reveals + staggers each time it opens */
.subfull.show .sf-stats > .sf-stat { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.subfull.show .sf-stats > .sf-stat:nth-child(1){animation-delay:.03s}
.subfull.show .sf-stats > .sf-stat:nth-child(2){animation-delay:.06s}
.subfull.show .sf-stats > .sf-stat:nth-child(3){animation-delay:.09s}
.subfull.show .sf-stats > .sf-stat:nth-child(4){animation-delay:.12s}
.subfull.show .sf-stats > .sf-stat:nth-child(5){animation-delay:.15s}
.subfull.show .sf-stats > .sf-stat:nth-child(6){animation-delay:.18s}
.subfull.show .sf-stats > .sf-stat:nth-child(7){animation-delay:.21s}
.subfull.show .sf-stats > .sf-stat:nth-child(n+8){animation-delay:.24s}
.subfull.show .chartcard { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.18s; }
.subfull.show .mchart-wrap { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.24s; }
.subfull.show .mtable-wrap { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.3s; }

/* wallet cards stagger in */
#walBody > .wal-card { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
#walBody > .wal-card:nth-child(1){animation-delay:.04s}
#walBody > .wal-card:nth-child(2){animation-delay:.1s}
#walBody > .wal-card:nth-child(3){animation-delay:.16s}
#walBody > .wal-card:nth-child(n+4){animation-delay:.22s}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .dot.live { animation: none; }
}