/* Public /demo page: simulated panel, no backend calls. */
.demo-bar {
  position: sticky; top: 0; z-index: 150;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 10px 20px; font-size: 13px;
  background: linear-gradient(90deg, rgba(10, 132, 255, .22), rgba(34, 211, 238, .12));
  border-bottom: 1px solid rgba(80, 140, 255, .3);
  backdrop-filter: blur(10px);
}
.demo-bar-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: demo-pulse 1.8s infinite;
}
.demo-bar-actions { margin-left: auto; display: flex; gap: 8px; }
.demo-bar-actions .storm-btn { padding: 6px 14px; font-size: 13px; }
@keyframes demo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.demo-layout { min-height: calc(100vh - 49px); }
.demo-layout .side-nav a { cursor: pointer; }
.demo-k { font-size: 11px; text-transform: uppercase; color: var(--storm-muted); }
.demo-v { margin-top: 4px; font-weight: 500; }

.demo-stats { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.demo-stat { margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.demo-stat span { font-size: 12px; }
.demo-stat b { font-size: 1.7rem; font-weight: 600; line-height: 1; }
.demo-red { color: #f87171; }
.demo-cyan { color: #67e8f9; }
.demo-amber { color: #fbbf24; }

.demo-split { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .demo-split { grid-template-columns: 1fr; } }
.demo-box { margin: 0; padding: 16px; }
.demo-box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.demo-feed { list-style: none; margin: 10px 0 0; padding: 0; }
.demo-feed-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .05);
}
.demo-feed-row:first-child { border-top: 0; }
.demo-feed-row.fresh { animation: demo-in .5s ease-out; }
@keyframes demo-in { from { opacity: 0; transform: translateY(-6px); background: rgba(59, 158, 255, .12); } to { opacity: 1; transform: none; } }
.demo-time { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--storm-muted); }
.demo-feed-main { min-width: 0; font-size: 13px; }
.demo-feed-main small { display: block; margin-top: 2px; font-size: 12px; color: var(--storm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-feed-sm .demo-feed-row { grid-template-columns: 60px minmax(0, 1fr) auto; padding: 6px 0; }

.demo-act {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 255, 255, .06); color: var(--storm-muted);
}
.demo-act-ban { background: rgba(232, 93, 93, .16); color: #f87171; }
.demo-act-kick { background: rgba(251, 146, 60, .16); color: #fb923c; }
.demo-act-screenshot { background: rgba(34, 211, 238, .13); color: #67e8f9; }
.demo-act-suspect { background: rgba(251, 191, 36, .12); color: #fbbf24; }

.demo-bars { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.demo-bar-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 12px; color: var(--storm-muted); }
.demo-bar-row b { color: #fff; font-weight: 600; text-align: right; }
.demo-bar-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.demo-bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0a84ff, #22d3ee); transition: width .5s ease; }

.demo-players { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .demo-players { grid-template-columns: 1fr; } }
.demo-prow {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 0 0 4px; border-radius: 10px; text-align: left;
  border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer;
}
.demo-prow:hover { background: rgba(255, 255, 255, .05); }
.demo-prow.on { background: rgba(59, 158, 255, .16); border-color: rgba(59, 158, 255, .35); }
.demo-prow b { display: block; font-size: 13px; font-weight: 500; }
.demo-prow small { display: block; font-size: 11px; margin-top: 2px; }
.demo-ping { font-size: 11px; white-space: nowrap; }
.demo-btn-ban { border-color: rgba(232, 93, 93, .45) !important; color: var(--storm-ban) !important; }
.demo-h3 { margin: 18px 0 0; font-size: 13px; font-weight: 600; color: var(--storm-muted); text-transform: uppercase; letter-spacing: .06em; }

.demo-cfg { margin-top: 12px; padding: 0; overflow: hidden; }
.demo-cfg-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 14px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--storm-border);
}
.demo-cfg-row:first-child { border-top: 0; }
.demo-cfg-row.off .demo-cfg-name, .demo-cfg-row.off select { opacity: .45; }
.demo-cfg-name b { font-size: 14px; font-weight: 500; }
.demo-cfg-name small { display: block; margin-top: 3px; font-size: 12px; }
.demo-cfg-act { padding: 7px 10px; font-size: 13px; }
@media (max-width: 640px) { .demo-cfg-row { grid-template-columns: 1fr auto; } .demo-cfg-act { grid-column: 1 / -1; } }

.demo-table-wrap { margin-top: 16px; padding: 0; overflow-x: auto; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.demo-table td:nth-child(2) b { white-space: nowrap; }
.demo-ids { margin-top: 4px; font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }
.demo-ban-acts { white-space: nowrap; }
.demo-ban-acts .demo-link { margin-right: 12px; }
#demo-ban-search, #demo-filter { padding: 9px 12px; font-size: 14px; }
.demo-players .mon-actions .storm-btn { padding: 8px 16px; font-size: 13px; }
.demo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.demo-table th {
  text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--storm-muted); border-bottom: 1px solid var(--storm-border);
}
.demo-table td { padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .05); vertical-align: top; }
.demo-table tr.demo-revoked td { opacity: .45; }
.demo-small { font-size: 11px; }
.demo-link { border: 0; background: none; padding: 0; color: var(--storm-cyan); cursor: pointer; font-size: 13px; }
.demo-link:hover { text-decoration: underline; }
.demo-mini { padding: 4px 10px; font-size: 12px; }

.demo-modal {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(2, 6, 18, .72); backdrop-filter: blur(4px);
}
.demo-modal[hidden] { display: none; }
.demo-modal-card { width: min(760px, 100%); margin: 0; padding: 16px; }
.demo-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.demo-shot { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--storm-border); }
.demo-shot-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #f59e6b 0%, #c2587a 38%, #3b2a5c 70%, #141a33 100%); }
.demo-shot-city {
  position: absolute; left: 0; right: 0; bottom: 30%; height: 34%;
  background: linear-gradient(180deg, #151c3b, #0b1022);
  clip-path: polygon(0 55%, 4% 55%, 4% 10%, 11% 10%, 11% 40%, 14% 40%, 14% 0, 22% 0, 22% 35%, 25% 35%, 25% 20%, 31% 20%, 31% 50%, 36% 50%,
    36% 5%, 47% 5%, 47% 45%, 50% 45%, 50% 15%, 58% 15%, 58% 38%, 62% 38%, 62% 8%, 70% 8%, 70% 42%, 73% 42%, 73% 12%, 84% 12%, 84% 48%,
    87% 48%, 87% 18%, 96% 18%, 96% 52%, 100% 52%, 100% 100%, 0 100%);
}
.demo-shot-road { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #1c2036, #0c0f1c); }
.demo-shot-road::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 6px; height: 100%; transform: translateX(-50%) perspective(200px) rotateX(60deg);
  background: repeating-linear-gradient(180deg, #e8d27a 0 18px, transparent 18px 36px); opacity: .7;
}
.demo-shot-hud {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 12px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #e2e8f0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent);
}