:root {
  --bg: #080b12;
  --bg-2: #0a0e16;
  --panel: #0d131d;
  --panel-2: #0b111a;
  --line: #1a2636;
  --line-soft: rgba(130,154,190,.12);
  --text: #f3f6fb;
  --muted: #8f9caf;
  --muted-2: #657186;
  --cyan: #48e6e7;
  --blue: #64a8ff;
  --violet: #a284f6;
  --pink: #ef5aa8;
  --green: #57f2ad;
  --red: #ff667d;
  --amber: #ffc266;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0 !important;
  color: var(--text) !important;
  background: linear-gradient(180deg, #080b12 0%, #090d14 100%) !important;
  font-synthesis: none;
  text-rendering: optimizeSpeed;
}

/* Kill all expensive motion/effects from page-specific styles. */
*, *::before, *::after {
  animation: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  scroll-behavior: auto !important;
}

.container,
.wrap,
.app,
main {
  background: transparent !important;
}

/* Reference-style panels: solid dark navy, no blur. */
.hero,
.card,
.box,
.panel,
.glass,
.section,
.stat,
.login-shell,
.chat,
.analysis,
.analysis-output,
.preview-card,
.video-box,
.indicator,
.composer,
.table-wrap,
.logs,
.log,
.private {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
}

.row,
.field {
  background: var(--panel-2) !important;
  border-color: var(--line-soft) !important;
}

.topnav,
.nav,
.header {
  background: transparent !important;
}

.topnav a,
.nav a,
.header a {
  color: var(--text) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: color .12s ease !important;
}

.topnav a:hover,
.nav a:hover,
.header a:hover {
  color: #fff !important;
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
}

a.btn,
.btn,
button,
input[type="submit"] {
  color: var(--text) !important;
  text-decoration: none !important;
  background: #0c111a !important;
  border: 1px solid #1d2a3b !important;
  box-shadow: none !important;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease !important;
}

a.btn:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
  color: #fff !important;
  background: #111927 !important;
  border-color: #2f6b7a !important;
  transform: none !important;
}

.btn.primary,
button.primary,
.primary.btn,
input[type="submit"] {
  color: #071018 !important;
  border-color: #59cfd8 !important;
  background: linear-gradient(90deg, #49e3df 0%, #72d6ef 50%, #a98af3 100%) !important;
  font-weight: 700 !important;
}

.btn.danger, .btn.ban, button.danger, button.ban {
  color: #ffd8df !important;
  background: #231219 !important;
  border-color: #5f2a38 !important;
}

.btn.warn, button.warn {
  color: #ffe1a8 !important;
  background: #211a10 !important;
  border-color: #554020 !important;
}

.btn.ok, button.ok {
  color: #bfffe2 !important;
  background: #102019 !important;
  border-color: #25563f !important;
}

/* Static cyan -> blue -> violet -> pink branding, same color direction as reference. */
.brand,
.title,
.site-title,
h1 {
  color: transparent !important;
  background: linear-gradient(90deg, #f3f6fb 0%, #f3f6fb 18%, #48e6e7 40%, #64a8ff 58%, #a284f6 77%, #ef5aa8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: none !important;
}

h2, h3, h4 {
  color: var(--text) !important;
}

p, .muted, small, label {
  color: var(--muted) !important;
}

.online {
  color: var(--green) !important;
  text-shadow: none !important;
}

.offline, .error {
  color: #ff9aab !important;
}

a {
  color: #66d9f0;
}

a:hover {
  color: #90e9f8;
}

input,
textarea,
select {
  color: #eef3f9 !important;
  background: #0b1018 !important;
  border: 1px solid #1d2a3b !important;
  outline: none !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #3c7b88 !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #667286 !important;
}

select option {
  background: #0b1018;
  color: #eef3f9;
}

table {
  background: #0b1018 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  color: var(--muted) !important;
  background: #0d131d !important;
}

td, th {
  border-color: #172333 !important;
}

tbody tr:hover {
  background: #101923 !important;
}

.badge,
.status,
.muted {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.badge,
.status {
  border: 1px solid transparent !important;
}

.message,
.bubble,
.user-message,
.assistant-message,
.ai-message {
  background: #0d131d !important;
  border: 1px solid #1a2636 !important;
  box-shadow: none !important;
}

.user-message {
  border-color: #24535d !important;
}

video,
canvas,
.preview,
#preview,
#screenPreview {
  border-radius: 14px !important;
  border: 1px solid #255663 !important;
  background: #090e16 !important;
  box-shadow: none !important;
}

hr {
  border: 0 !important;
  border-top: 1px solid #172333 !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #070a10;
}

::-webkit-scrollbar-thumb {
  background: #222b39;
  border-radius: 999px;
  border: 2px solid #070a10;
}

::-webkit-scrollbar-thumb:hover {
  background: #2e3c4e;
}

::selection {
  background: #1f4e59;
  color: #fff;
}

/* Navigation links are plain text — no little boxes around Dashboard/Admin/Logout/etc. */
.topnav a,
.topnav a:link,
.topnav a:visited,
.topnav a:hover,
.topnav a:active,
.nav a,
.nav a:link,
.nav a:visited,
.nav a:hover,
.nav a:active,
.header a,
.header a:link,
.header a:visited,
.header a:hover,
.header a:active {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}

/* Let the browser skip painting off-screen sections where supported. */
@supports (content-visibility: auto) {
  section,
  .section,
  .card,
  .panel,
  .box {
    content-visibility: auto;
    contain-intrinsic-size: auto 240px;
  }
}

/* Respect users/browsers that ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
  }
}