/* GrandPaaChat shared black/navy and gold theme */
:root {
  color-scheme: dark;
  --gp-bg: #020911;
  --gp-navy: #071522;
  --gp-panel: #091725;
  --gp-panel-2: #101e2c;
  --gp-gold: #e9ae36;
  --gp-gold-light: #ffd16b;
  --gp-text: #f8f6f0;
  --gp-muted: #c5d0df;
  --gp-border: rgba(233,174,54,.48);
  --gp-radius: 14px;
}

html {
  min-height: 100%;
  background: var(--gp-bg) !important;
  color: var(--gp-text);
}

body {
  color: var(--gp-text) !important;
  background:
    radial-gradient(ellipse at 18% 10%, #102438 0%, transparent 42%),
    linear-gradient(135deg, #020911, #061321 58%, #02070d) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 15px;
}

a { color: var(--gp-gold-light); }
a:hover { color: #fff0c2; }

h1, h2, h3, h4, h5, h6 {
  color: var(--gp-gold-light);
}

header, .topbar, .gp-topbar, nav,
.sidebar, .gp-sidebar, .rightbar, .gp-rightbar {
  background-color: rgba(3, 12, 22, .97) !important;
  color: var(--gp-text) !important;
  border-color: var(--gp-border) !important;
}

main, .gp-page, .gp-layout, .page-layout,
.main-layout, .gp-3col {
  color: var(--gp-text);
}

.card, .panel, .box, .modal, .dialog,
.post, .message, .chat-panel, .settings-card,
[class*="card"], [class*="panel"], [class*="modal"] {
  background-color: var(--gp-panel) !important;
  color: var(--gp-text) !important;
  border-color: var(--gp-border) !important;
  border-radius: var(--gp-radius);
}

input, textarea, select {
  background: #06111d !important;
  color: var(--gp-text) !important;
  border: 1px solid #435366 !important;
  border-radius: 10px !important;
}

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

button, .btn, [role="button"],
input[type="submit"], input[type="button"] {
  border-color: var(--gp-gold) !important;
  border-radius: 10px;
}

button:not(.secondary):not(.tab),
.btn:not(.secondary),
input[type="submit"], input[type="button"] {
  background: linear-gradient(135deg, var(--gp-gold-light), #d99b24);
  color: #101018;
}

hr { border-color: var(--gp-border) !important; }

table th {
  color: var(--gp-gold-light);
}

table td, table th {
  border-color: var(--gp-border);
}

img, video { max-width: 100%; }

@media (max-width: 700px) {
  body { font-size: 14px; }
  input, textarea, select, button { max-width: 100%; }
}