/* ═══ SNIN Relay V2 — Dashboard Styles ═══ */
@import url('https://fonts.cdnfonts.com/css/inter');

/* ─── Dark Theme (default) ─── */


:root {
  --bg: #0b0e14;
  --bg2: #11171f;
  --bg3: #191f2a;
  --card-bg: rgba(18,26,36,.75);
  --border: rgba(30,42,58,.6);
  --text: #e2e8f0;
  --text2: #94a3b8;
  --accent: #00d4ff;
  --accent2: #0099cc;
  --green: #22c55e;
  --yellow: #eab308;
  --red: #ef4444;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --glow: 0 0 20px rgba(0,212,255,.08);
  /* Design Rules easings (emilkowalski/skills) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
/* ─── Light Theme (OVERRIDES DARK) ─── */
[data-theme="light"] {
  --bg: #f1f5f9;
  --bg2: #e2e8f0;
  --bg3: #cbd5e1;
  --card-bg: rgba(255,255,255,.85);
  --border: rgba(148,163,184,.5);
  --text: #0f172a;
  --text2: #475569;
  --accent: #0284c7;
  --accent2: #0369a1;
  --green: #15803d;
  --yellow: #a16207;
  --red: #b91c1c;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --glow: 0 0 20px rgba(2,132,199,.06);
}
[data-theme="light"] body {
  background: radial-gradient(ellipse at 20% 50%, #e2e8f0 0%, #f8fafc 70%);
  color: var(--text);
}
[data-theme="light"] .card {
  background: rgba(255,255,255,.85);
  border-color: var(--border);
}
[data-theme="light"] .card:hover {
  border-color: rgba(2,132,199,.25);
  box-shadow: var(--shadow), 0 8px 30px rgba(0,0,0,.08), 0 0 24px rgba(2,132,199,.06);
}
[data-theme="light"] .header {
  background: rgba(241,245,249,.9);
  border-bottom-color: var(--border);
}
[data-theme="light"] .table-wrap {
  background: rgba(255,255,255,.6);
}
[data-theme="light"] .chart-card {
  background: rgba(255,255,255,.7);
}
[data-theme="light"] .tab {
  color: var(--text2);
}
[data-theme="light"] .tab:hover {
  background: rgba(203,213,225,.4);
  color: var(--text);
}
[data-theme="light"] .tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
[data-theme="light"] body::after {
  opacity: .03;
}
[data-theme="light"] .status-badge.alive {
  background: #dcfce7;
  color: #166534;
}
[data-theme="light"] .status-badge.dead {
  background: #fee2e2;
  color: #991b1b;
}
[data-theme="light"] .feed-item {
  background: rgba(255,255,255,.6);
  border-color: var(--border);
}
[data-theme="light"] .feed-item:hover {
  background: rgba(255,255,255,.85);
}
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] button:not(.tab) {
  background: rgba(255,255,255,.8);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="light"] input::placeholder {
  color: var(--text2);
}
[data-theme="light"] .export-btn {
  background: rgba(255,255,255,.8);
  color: var(--text);
}
[data-theme="light"] .export-btn:hover {
  background: var(--accent);
  color: #fff;
}


* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: var(--font);
  background: radial-gradient(ellipse at 20% 50%, #0f1a2e 0%, #0b0e14 70%);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration:none; }
a:hover { color: #66e3ff; }

/* ─── Container ─── */
.container { max-width:1120px; margin:0 auto; padding:0 20px; }

/* ─── Header ─── */
.header {
  background: rgba(17,23,31,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 16px 0 0;
  position: sticky; top:0; z-index:100;
}
.header-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.header-left { display:flex; align-items:center; gap:20px; }
.header-right { display:flex; align-items:center; gap:12px; }
#particlesCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0.5}
.cyber-clock {
  font-family:'Inter','Courier New',monospace; font-size:.82rem; font-weight:600;
  color:#00d4ff; text-shadow:0 0 8px rgba(0,212,255,.4),0 0 20px rgba(0,212,255,.15);
  letter-spacing:2px; padding:4px 10px; border:1px solid rgba(0,212,255,.2); border-radius:6px;
  background:rgba(0,212,255,.05); user-select:none;
}

.logo { font-size:1.35rem; font-weight:700; letter-spacing:-.5px; color:var(--text); }
.logo-v { color:var(--accent); }

.status-badge {
  font-size:.78rem; padding:4px 12px; border-radius:20px;
  background:rgba(25,31,42,.6); border:1px solid var(--border);
}
.status-badge.alive { color:var(--green); border-color:rgba(34,197,94,.4); }
.status-badge.dead { color:var(--red); border-color:rgba(239,68,68,.4); }

.stat-mini { font-size:.78rem; color:var(--text2); }
.btn-link { font-size:.85rem; color:var(--accent); }

/* ─── Language Switcher ─── */
.lang-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  color:var(--accent); font-size:.85rem; font-weight:700; cursor:pointer;
  padding:5px 10px; letter-spacing:.5px; text-transform:uppercase;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
  line-height:1; user-select:none; -webkit-tap-highlight-color:transparent;
}
.lang-btn:hover { background:var(--border); }
.lang-btn:active { transform:scale(0.95); }

/* ─── Tabs ─── */
.tabs {
  display:flex; gap:2px; padding:0 20px; max-width:1120px; margin:0 auto;
  overflow-x:auto; white-space:nowrap;
}
.tab {
  background:transparent; border:none; color:var(--text2); font-size:.85rem;
  font-weight:500; cursor:pointer; padding:10px 20px; border-bottom:2px solid transparent;
  transition:color 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out);
  font-family:var(--font); position:relative; user-select:none; -webkit-tap-highlight-color:transparent;
}
.tab:hover { color:var(--text); background:rgba(25,31,42,.4); border-radius:6px 6px 0 0; }
.tab:active { transform:scale(0.97); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); animation:glowPulse 3s var(--ease-in-out) infinite; }
.tab.active::after{
  content:'';position:absolute;bottom:-2px;left:20%;right:20%;height:2px;
  background:var(--accent);border-radius:2px;animation:glowPulse 3s var(--ease-in-out) infinite
}

/* ─── Tab Content ─── */
.tab-content { display:none; padding-top:20px; }
.tab-content.active { display:block; }

/* ─── Main ─── */
.main { padding:0 0 40px; }

/* ─── Sections ─── */
.section { margin-bottom:32px; }
.section-title {
  font-size:.78rem; font-weight:700; color:var(--text2); margin-bottom:16px;
  text-transform:uppercase; letter-spacing:1px;
  display:flex; align-items:center; gap:8px;
}
.section-desc { font-size:.85rem; color:var(--text2); margin-bottom:16px; }

/* ─── Cards Grid ─── */
.cards {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:14px;
}
.cards-2 { grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }

.card {
  position:relative;
  background: rgba(18,26,36,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  transition: transform 250ms var(--ease-out), border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
  box-shadow: var(--shadow);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,212,255,.18);
  box-shadow: var(--shadow), 0 8px 30px rgba(0,0,0,.3), 0 0 24px rgba(0,212,255,.04);
}
.card:active { transform:scale(0.98); }
.card::before {
  content:''; position:absolute; inset:-1px; border-radius:13px;
  background:linear-gradient(135deg,transparent 40%,rgba(0,212,255,.08),transparent 60%);
  opacity:0; transition:opacity .5s; pointer-events:none;
  background-size:200% 200%;
}
.card:hover::before{opacity:1;animation:borderGlow 2s var(--ease-in-out) infinite}
@keyframes borderGlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.card-value {
  font-size:1.9rem; font-weight:700; color:var(--text);
  letter-spacing:-1px; line-height:1.1; margin-top:6px;
}
.card-label {
  font-size:.78rem; color:var(--text2); margin-top:4px;
  font-weight:500; letter-spacing:.3px;
}
/* ─── Glitch on logo ─── */
.logo{position:relative;display:inline-block}
.logo::after,.logo::before{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.logo:hover::after,.logo:active::after{
  opacity:.7;clip-path:inset(10% 0 70% 0);color:#ff0040;
  animation:glitch1 .3s ease 2;
  transform:translateX(2px);
}
.logo:hover::before,.logo:active::before{
  opacity:.7;clip-path:inset(60% 0 10% 0);color:#00d4ff;
  animation:glitch2 .3s ease 2;
  transform:translateX(-2px);
}
@keyframes glitch1{0%{transform:translateX(2px)}25%{transform:translateX(-1px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}100%{transform:translateX(2px)}}
@keyframes glitch2{0%{transform:translateX(-2px)}25%{transform:translateX(1px)}50%{transform:translateX(-3px)}75%{transform:translateX(2px)}100%{transform:translateX(-2px)}}
/* ─── CRT Scanlines ─── */
body::after{
  content:'';position:fixed;top:0;left:0;width:100vw;height:100vh;
  pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
  opacity:.15;
}
.card-bar {
  height:3px; border-radius:2px; background:rgba(255,255,255,.05); margin-top:8px; overflow:hidden;
}
.card-bar-fill {
  height:100%; border-radius:2px; width:0%; transition:width .8s var(--ease-out);
  box-shadow:0 0 8px var(--icon-clr, var(--accent));
}

/* ─── Tables ─── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes countUp{
  from{opacity:0;transform:scale(.8)}
  to{opacity:1;transform:scale(1)}
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 8px rgba(0,212,255,.05)}
  50%{box-shadow:0 0 20px rgba(0,212,255,.12)}
}

.card{animation:fadeUp .4s var(--ease-out) both}
.card:nth-child(1){animation-delay:.05s}
.card:nth-child(2){animation-delay:.1s}
.card:nth-child(3){animation-delay:.15s}
.card:nth-child(4){animation-delay:.2s}
.card:nth-child(5){animation-delay:.25s}

.tab-content.active{animation:fadeUp .3s var(--ease-out) both}

.card-value{animation:countUp .35s var(--ease-out) both;animation-delay:.3s}
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); background:rgba(18,26,36,.4); }
.table {
  width:100%; border-collapse:collapse; font-size:.82rem;
}
.table th {
  text-align:left; padding:10px 12px; background:rgba(25,31,42,.6);
  border-bottom:1px solid var(--border); font-weight:600; color:var(--text2); white-space:nowrap;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.5px;
}
.table td {
  padding:9px 12px; border-bottom:1px solid rgba(25,31,42,.6); vertical-align:middle;
}
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:rgba(0,212,255,.02); }
.table tbody tr:hover { background:var(--bg3); }
.table .pk { font-family:monospace; font-size:.73rem; color:var(--text2); }
.table .status-on { color:var(--green); }
.table .status-off { color:var(--red); }
.table .latency { color:var(--accent2); }
.table .time { color:var(--text2); font-size:.78rem; }

/* ─── Badges ─── */
.badge-live {
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--green); background:rgba(0,230,118,.1); padding:2px 8px; border-radius:4px;
  animation:pulse 2s var(--ease-in-out) infinite;
}
.badge-count {
  font-size:.75rem; font-weight:600; color:var(--text2);
  background:var(--bg3); padding:1px 8px; border-radius:10px;
}
@keyframes pulse {
  0%,100% { opacity:1; }
  50% { opacity:.5; }
}

/* ─── Charts ─── */
.heatmap-info { font-size:.78rem; color:var(--text2); margin-bottom:6px; text-align:center; }

/* ─── Charts ─── */
.charts-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.chart-card {
  background:rgba(18,26,36,.5); border:1px solid var(--border); border-radius:var(--radius); padding:16px; backdrop-filter:blur(8px);
}
.chart-card canvas { max-height:300px; }
.chart-card.chart-full canvas { max-height:400px; }
.chart-card.chart-full { grid-column:1/-1; }
.chart-title {
  font-size:.82rem; font-weight:600; color:var(--text2); margin-bottom:12px;
}
.heatmap-info { font-size:.78rem; color:var(--text2); margin-bottom:6px; text-align:center; }
.export-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.export-btn {
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:8px 14px; color:var(--text); cursor:pointer; font-size:.82rem;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.export-btn:hover { border-color:var(--accent); background:var(--accent-bg); }
.export-btn:active { transform:scale(0.97); }

/* ─── Live Feed / Events ─── */
.feed {
  max-height:400px; overflow-y:auto; background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius);
}
.feed-item {
  padding:7px 10px; border-bottom:1px solid var(--bg3); font-size:.8rem; line-height:1.4;
}
.feed-item:hover { background:var(--bg3); }
.feed-item.log-error { border-left:2px solid var(--red); }
.feed-item.log-warn { border-left:2px solid var(--yellow); }
.feed-item.log-info { border-left:2px solid var(--accent); }
.feed-item.log-debug { border-left:2px solid var(--text2); }
.feed-item code { font-size:.72rem; word-break:break-all; }
.ev-kind { display:inline-block; font-size:.68rem; padding:1px 5px; border-radius:3px; background:var(--bg3); color:var(--accent); margin-right:5px; }
.ev-pk { font-family:monospace; font-size:.73rem; color:var(--text2); margin-right:5px; }
.ev-time { font-size:.68rem; color:var(--text2); }
.ev-content { display:block; margin-top:3px; color:var(--text2); font-size:.78rem; max-height:2.2em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── Event Toolbar ─── */
.event-toolbar {
  display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:.85rem; color:var(--text2); flex-wrap:wrap;
}
.event-toolbar select {
  background:rgba(25,31,42,.7); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:7px 12px; font-size:.82rem; outline:none; cursor:pointer;
  transition:border-color .2s; font-family:var(--font);
}
.event-toolbar select:focus { border-color:var(--accent); }
.event-toolbar input {
  background:rgba(25,31,42,.7); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:7px 12px; font-size:.82rem; outline:none; width:180px;
  transition:border-color .2s; font-family:var(--font);
}
.event-toolbar input:focus { border-color:var(--accent); }

/* ─── Search Bar ─── */
.search-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%;
}
.search-bar input {
  background:var(--bg2); border:1px solid var(--border); border-radius:4px;
  color:var(--text); padding:6px 10px; font-size:.82rem; outline:none; flex:1; min-width:140px;
  font-family:var(--font);
}
.search-bar input:focus { border-color:var(--accent); }
.btn-sm { padding:5px 12px; font-size:.78rem; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text2); }
.btn-outline:hover { border-color:var(--text2); color:var(--text); background:var(--bg3); }
.search-count {
  font-size:.78rem; color:var(--accent); padding:6px 10px;
  background:rgba(0,212,255,.08); border-bottom:1px solid var(--border);
}
.event-count-note { font-size:.72rem; color:var(--text2); text-align:center; padding:6px; }

/* ─── Thread Viewer ─── */
.thread-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0; font-weight:600; font-size:.85rem;
}
#threadFeed { max-height:500px; overflow-y:auto; border-radius:0 0 var(--radius) var(--radius); }
.thread-parent { opacity:.7; border-left:2px solid var(--accent2); }
.thread-current { border-left:2px solid var(--accent); background:rgba(0,212,255,.05); }
.thread-reply { border-left:2px solid var(--green); }
.thread-replies-label {
  font-size:.75rem; color:var(--green); padding:6px 10px;
  background:rgba(0,230,118,.05); font-weight:600;
}

/* ─── Heatmap ─── */
.heatmap-wrap {
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; overflow-x:auto;
}
.heatmap-table { display:table; width:100%; font-size:.7rem; }
.heatmap-header { display:table-row; }
.heatmap-row { display:table-row; }
.hm-day-label { display:table-cell; width:24px; font-size:.7rem; color:var(--text2); padding:1px 4px; white-space:nowrap; }
.hm-hour { display:table-cell; width:24px; text-align:center; font-size:.62rem; color:var(--text2); padding:1px 0; }
.hm-cell { display:table-cell; width:24px; height:18px; text-align:center; border-radius:2px; font-size:.62rem; line-height:18px; cursor:default; color:transparent; }
.hm-cell.lv0 { background:var(--bg3); color:var(--text2); }
.hm-cell.lv1 { background:rgba(0,212,255,.2); color:var(--text2); }
.hm-cell.lv1 { background:rgba(0,212,255,.2); color:var(--text2); }
.hm-cell.lv2 { background:rgba(0,212,255,.4); color:var(--text); }
.hm-cell.lv3 { background:rgba(0,212,255,.65); color:#fff; font-weight:600; }
.hm-cell.lv4 { background:var(--accent); color:#fff; font-weight:700; }
.hm-cell:hover { outline:1px solid var(--text); }

/* ─── Nostr Publish ─── */
.nostr-publish {
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; max-width:600px;
}
.nostr-key { font-family:monospace; font-size:.82rem; color:var(--accent); margin-left:8px; }
.nostr-actions { display:flex; align-items:center; gap:10px; margin-top:8px; }
.nostr-publish textarea {
  width:100%; padding:8px 10px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); font-size:.85rem; outline:none;
  font-family:var(--font); resize:vertical;
}
.nostr-publish textarea:focus { border-color:var(--accent); }

/* ─── Form ─── */
.form { max-width:480px; }
.form-group { margin-bottom:10px; }
.form-group label { display:block; font-size:.85rem; margin-bottom:3px; color:var(--text2); }
.form-group input,.form-group textarea {
  width:100%; padding:7px 10px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); font-size:.88rem; outline:none; font-family:var(--font);
}
.form-group input:focus,.form-group textarea:focus { border-color:var(--accent); }
.form-msg { font-size:.85rem; margin-left:10px; }
.form-msg.ok { color:var(--green); }
.form-msg.err { color:var(--red); }

.btn {
  padding:8px 20px; background:var(--accent); color:var(--bg); border:none; border-radius:8px;
  font-size:.82rem; cursor:pointer; font-weight:700; font-family:var(--font);
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.btn:hover { background:#33ddff; transform:translateY(-1px); box-shadow:0 4px 15px rgba(0,212,255,.25); }
.btn:active { transform:scale(0.97); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }

.btn-small { padding:5px 14px; font-size:.75rem; }

/* ─── Footer ─── */
.footer {
  border-top:1px solid var(--border); padding:14px 0; color:var(--text2); font-size:.78rem;
}
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ─── Responsive ─── */
/* Small phones (≤400px) */
@media (max-width:400px) {
  .cards { grid-template-columns:1fr; }
  .cards-2 { grid-template-columns:1fr; }
  .card-value { font-size:1.5rem; }
  .card { padding:14px 12px; }
  .section-title { font-size:.72rem; }
  .cyber-clock { font-size:.65rem; letter-spacing:1px; padding:2px 5px; display:none; }
  .header-left { gap:8px; }
  .header-right { gap:4px; flex-wrap:wrap; justify-content:flex-end; }
  .logo { font-size:1rem; }
  .stat-mini { display:none; }
  #relayCanvas { height:140px !important; }
  #particlesCanvas { opacity:0.15; }
  .container { padding:0 8px; }
  .main { padding:0 0 20px; }
  .section { margin-bottom:16px; }
  .section-title { word-break:break-all; }
  .chart-card { padding:8px; }
  .event-table .col-time { width:50px; }
  .event-table .col-pubkey { display:none; }
  .event-table .col-content { max-width:100px; }
  .event-toolbar input { width:100px; font-size:.75rem; }
  .nostr-publish { max-width:100%; }
  .btn { padding:8px 14px; font-size:.85rem; }
  .lang-btn { padding:6px 8px; font-size:.75rem; }
  .tab { padding:6px 6px; font-size:.7rem; }
  .tabs { padding:0 4px; }
  .header { padding:10px 0 0; }
  .header-inner { gap:6px; margin-bottom:10px; }
  .feed-item { font-size:.72rem; padding:6px 8px; }
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table { font-size:.72rem; }
  .table th, .table td { padding:6px 8px; }
  .card-icon { width:26px; height:26px; margin-bottom:4px; }
  .card-icon svg { width:13px; height:13px; }
  .card-label { font-size:.7rem; }
  .hm-hour { font-size:.55rem; }
  .hm-cell { width:18px; height:14px; font-size:.55rem; }
  .hm-day-label { font-size:.6rem; }
  .search-bar input { min-width:100px; font-size:.75rem; }
  .event-table .col-kind { width:35px; }
}

/* Medium phones (401–600px) */
@media (max-width:600px) {
  .header-inner { flex-direction:column; align-items:stretch; gap:6px; }
  .header-left { justify-content:space-between; }
  .header-right { justify-content:space-between; flex-wrap:wrap; gap:8px; }
  .cards { grid-template-columns:repeat(2,1fr); gap:10px; }
  .cards-2 { grid-template-columns:repeat(2,1fr); gap:10px; }
  .charts-grid { grid-template-columns:1fr; gap:10px; }
  .footer-inner { flex-direction:column; align-items:center; text-align:center; }
  .tabs { gap:0; padding:0 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab { padding:8px 10px; font-size:.8rem; }
  .card-value { font-size:1.6rem; }
  .card { padding:16px 12px; }
  #relayCanvas { height:160px !important; }
  .container { padding:0 12px; }
  .section-title { font-size:.75rem; }
  .event-toolbar { gap:8px; }
  .event-toolbar input { width:120px; }
  .cyber-clock { font-size:.72rem; }
  #particlesCanvas { opacity:0.25; }
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .heatmap-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .chart-card.chart-full { overflow-x:hidden; }
  .logo { font-size:1.15rem; }
}

/* Tablets (601–900px) */
@media (min-width:601px) and (max-width:900px) {
  .cards { grid-template-columns:repeat(3,1fr); }
  .container { padding:0 16px; }
  #relayCanvas { height:190px; }
}

/* ─── Event Table & Pagination ─── */
.event-table{
  width:100%;border-collapse:collapse;font-size:.82rem;table-layout:fixed
}
.event-table th{
  text-align:left;padding:8px 6px;border-bottom:2px solid var(--border);
  color:var(--text2);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px
}
.event-table td{
  padding:6px;border-bottom:1px solid var(--border);vertical-align:top;
  overflow:hidden;text-overflow:ellipsis
}
.event-table tr:hover{background:var(--bg3)}
.event-table .col-time{width:90px;white-space:nowrap;font-family:var(--font-mono)}
.event-table .col-kind{width:45px;text-align:center;font-family:var(--font-mono)}
.event-table .col-pubkey{width:70px;font-family:var(--font-mono);font-size:.75rem;color:var(--text2);overflow:hidden;text-overflow:ellipsis}
.event-table .col-content{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.event-table .col-content:hover{color:var(--accent);white-space:normal;background:var(--bg2);position:relative;z-index:10}
.badge-kind{
  display:inline-block;padding:2px 6px;border-radius:4px;font-size:.72rem;font-weight:600;background:var(--accent);color:#fff
}
.pagination{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px;background:rgba(18,26,36,.4);border:1px solid var(--border);border-radius:var(--radius);margin-top:12px;flex-wrap:wrap
}
.pagination button{padding:7px 16px;font-size:.78rem;border-radius:8px}
#pageInfo{font-size:.8rem;color:var(--text2);font-weight:500}
#totalInfo{font-size:.75rem;color:var(--text2)}

/* ─── Sparklines ─── */
.sparkline{
  height:32px;margin-top:8px;padding:0 2px;opacity:0.7
}
.sparkline svg{width:100%;height:100%;display:block}
.sparkline .line{fill:none;stroke:var(--spark-clr,var(--accent));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sparkline .fill{fill:var(--spark-clr,var(--accent));opacity:.08}
.sparkline .dot{fill:var(--spark-clr,var(--accent));stroke:var(--bg);stroke-width:1.5}
.sparkline .label{font-size:8px;fill:var(--text2);text-anchor:middle}

/* ─── Card Icons ─── */
.card-icon{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:var(--icon-bg,var(--accent));opacity:.12;margin-bottom:8px
}
.card-icon svg{width:18px;height:18px;color:var(--icon-clr,var(--accent));opacity:.85}
.card-icon+.card-value{margin-top:0}
@media(max-width:600px){
  .card-icon{width:30px;height:30px}
  .card-icon svg{width:15px;height:15px}
}

/* ─── Design Forge Premium Components ─── */

/* Glass Panel — deep material blur for primary sections */
.glass-panel {
  background: rgba(18, 26, 36, 0.7);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.glass-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.04), transparent 70%);
  pointer-events: none;
}

/* Neon Border — animated accent border */
.neon-border {
  position: relative;
}
.neon-border::after {
  content: '';
  position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), transparent 40%, var(--accent2), transparent 80%);
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
  z-index: -1;
  animation: neonFlow 4s var(--ease-in-out) infinite;
}
.neon-border:hover::after { opacity: 0.15; }
@keyframes neonFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Plasma Text — glowing section title effect */
.plasma-text {
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 60%, var(--text) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: plasmaShift 5s var(--ease-in-out) infinite;
}
@keyframes plasmaShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Holo Card — subtle rainbow shimmer */
.holo-card {
  position: relative;
  overflow: hidden;
}
.holo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, 
    transparent 30%, 
    rgba(0, 212, 255, 0.05) 45%, 
    rgba(168, 85, 247, 0.04) 55%, 
    transparent 70%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  pointer-events: none;
}
.holo-card:hover::after { opacity: 1; animation: holoSweep 2.5s var(--ease-in-out) infinite; }
@keyframes holoSweep {
  0% { background-position: 200% 0%; }
  100% { background-position: -200% 0%; }
}

/* Floating Icons — gentle levitation */
.float-icon {
  animation: floatIcon 3s var(--ease-in-out) infinite;
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Data Pulse — subtle indicator for live data */
.data-pulse {
  position: relative;
}
.data-pulse::before {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: dataPulse 2s var(--ease-in-out) infinite;
}
@keyframes dataPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* Smooth Reveal — clip-path reveal for sections */
.smooth-reveal {
  animation: smoothReveal 500ms var(--ease-out) both;
}
@keyframes smoothReveal {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0% 0); }
}

/* ─── Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-delay: 0s !important;
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); }
  .card:active { transform: scale(0.98); }
  .tab:hover { color: var(--text); background: rgba(25,31,42,.4); border-radius: 6px 6px 0 0; }
  .btn:hover { background: #33ddff; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0,212,255,.25); }
}