/* GrandPaaChat unified navy and gold theme */
:root {
  --gp-bg: #020911;
  --gp-panel: #071522;
  --gp-panel2: #0b1d2d;
  --gp-gold: #efb63e;
  --gp-gold-light: #ffd777;
  --gp-text: #f8f6f0;
  --gp-muted: #c5d0df;
  --gp-border: #344657;
  color-scheme: dark;
}

html {
  background: var(--gp-bg) !important;
  color-scheme: dark;
}

body {
  background: var(--gp-bg) !important;
  color: var(--gp-text) !important;
}

body, input, textarea, select, button {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--gp-text) !important;
  letter-spacing: -.02em;
}

p, label, small, .muted, .text-muted {
  color: var(--gp-muted);
}

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

a:hover {
  color: #fff0bd;
}

header, nav, aside, footer,
.card, .panel, .modal-content, .dropdown-menu,
.sidebar, .navbar, .topbar, .content-card,
.stat-card, .settings-card, .message-card,
.post, .post-card, .community-card,
.group-card, .channel-card, .profile-card,
.notification-card, .friend-card, .marketplace-card {
  background-color: var(--gp-panel) !important;
  color: var(--gp-text) !important;
  border-color: var(--gp-border) !important;
}

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

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

button, .btn, input[type="submit"],
input[type="button"], [role="button"] {
  border-radius: 10px;
  transition: background-color .18s ease, border-color .18s ease;
}

button:not(.secondary):not(.btn-secondary),
.btn-primary, .btn-gold,
input[type="submit"], input[type="button"] {
  background: var(--gp-gold) !important;
  color: #101722 !important;
  border: 1px solid var(--gp-gold) !important;
  font-weight: 700 !important;
}

button:hover, .btn:hover, input[type="submit"]:hover {
  filter: brightness(1.08);
}

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

th {
  background: var(--gp-panel2) !important;
  color: var(--gp-gold-light) !important;
}

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

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

img {
  max-width: 100%;
}

::selection {
  background: var(--gp-gold);
  color: #071522;
}

/* Existing GrandPaaChat layout */
.gp-layout-v4 {
  background: var(--gp-bg) !important;
  color: var(--gp-text) !important;
}

.gp-menu-v4, .gp-account-v4,
.gp-logo-panel, .gp-layout-v4 .card {
  background: var(--gp-panel) !important;
  color: var(--gp-text) !important;
  border-color: var(--gp-border) !important;
}

.gp-menu-v4 a, .gp-menu-v4 button {
  color: var(--gp-text);
}

.gp-menu-v4 a:hover, .gp-menu-v4 .active {
  background: #172b3c !important;
  color: var(--gp-gold-light) !important;
}

.gp-logo-panel img {
  object-fit: contain;
}

/* Reference homepage layout, when present */
.hero, .login, .community, .banner,
.hero-section, .login-section, .community-section {
  color: var(--gp-text) !important;
}

.hero, .community, .hero-section, .community-section {
  background-color: var(--gp-bg) !important;
}

.login, .login-section {
  background: var(--gp-panel) !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 18px;
}

.banner {
  background: linear-gradient(120deg, #071522, #14283a) !important;
  border: 1px solid var(--gp-border);
  border-radius: 18px;
}

.hero h1, .hero-section h1,
.hero h2, .hero-section h2,
.login h2, .community h2 {
  color: var(--gp-gold-light) !important;
}

.feature, .feature-card, .circle-card {
  background: var(--gp-panel) !important;
  color: var(--gp-text) !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 16px;
}

footer {
  border-top: 1px solid var(--gp-border);
}

@media (max-width: 768px) {
  .gp-layout-v4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gp-menu-v4, .gp-account-v4, .gp-logo-panel {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero h1, .hero-section h1 {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
  }
}

/* GrandPaaChat final homepage layout */
html {
  min-height: 100%;
  scroll-behavior: smooth;
}
body {
  display: block !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #f4f0e5 !important;
  background: #050b14 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
header {
  position: relative !important;
  z-index: 5;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 18px;
  width: auto !important;
  padding: 16px clamp(16px, 4vw, 60px) !important;
  background: #081321 !important;
  border-bottom: 1px solid #9b7938 !important;
}
header .logo img {
  display: block !important;
  width: 76px !important;
  height: 86px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
}
header .brand h1 {
  margin: 0 !important;
  color: #e5bd63 !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  font-weight: 800 !important;
}
header .brand p {
  margin: 5px 0 0 !important;
  color: #c3cbd6 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
}
header nav {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
header nav a {
  color: #e6eaf0 !important;
  text-decoration: none !important;
}
header nav a:hover {
  color: #edc56b !important;
}
main {
  display: block !important;
  width: min(1240px, 92%) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 38px 0 55px !important;
}
.hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important;
  align-items: center !important;
  gap: clamp(24px, 5vw, 65px) !important;
  min-height: 450px;
  padding: 30px 0 48px !important;
}
.hero h1, .hero h2, .hero h3 {
  color: #e8c16b !important;
}
.hero p, .hero li {
  color: #d0d7e2 !important;
  line-height: 1.7 !important;
}
#signin-section {
  display: block !important;
  width: auto !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 25px !important;
  border: 1px solid #80652f !important;
  border-radius: 20px !important;
  background: #0d1929 !important;
  box-shadow: 0 18px 55px #0008 !important;
}
#signin-section .card {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#signin-section input,
#signin-section select,
#signin-section textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 14px !important;
  color: #f7f7f7 !important;
  background: #07111e !important;
  border: 1px solid #34445a !important;
  border-radius: 9px !important;
}
#signin-section button,
main a.button,
main .btn {
  border-radius: 10px !important;
}
.community {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 35px 0 !important;
}
.community > * {
  min-width: 0;
}
.banner {
  margin: 35px 0 !important;
  padding: clamp(22px, 4vw, 42px) !important;
  color: #f6e8c5 !important;
  background: linear-gradient(120deg, #13243a, #352817) !important;
  border: 1px solid #9b7938 !important;
  border-radius: 18px !important;
}
footer {
  padding: 25px 16px !important;
  color: #aeb9c8 !important;
  text-align: center !important;
  background: #081321 !important;
  border-top: 1px solid #344052 !important;
}
@media (max-width: 800px) {
  header {
    justify-content: center !important;
  }
  header .brand {
    flex: 1 1 180px;
  }
  header nav {
    justify-content: center !important;
    width: 100%;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: auto !important;
  }
  #signin-section {
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .community {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Targeted repair based on the live homepage screenshot */
html, body {
  width: 100% !important;
  min-height: 100% !important;
  background: #050b14 !important;
  overflow-x: hidden !important;
}
body {
  display: block !important;
}
header {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 112px !important;
  background: #081321 !important;
}
header .logo {
  display: flex !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  height: 86px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 2px solid #e5bd63 !important;
  border-radius: 14px !important;
}
header .logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
header .brand {
  min-width: 0 !important;
  flex: 1 1 240px !important;
}
header .brand h1 {
  overflow-wrap: anywhere !important;
  line-height: 1.12 !important;
}

/* Remove the accidental white surfaces from the new theme */
main,
main .hero,
main .community,
main .banner,
.gp-layout-v4,
.gp-menu-v4,
.gp-menu-v4 .nav,
.gp-account-v4 {
  color: #f4f0e5 !important;
}
.gp-layout-v4,
.gp-menu-v4,
.gp-menu-v4 .nav,
.gp-account-v4,
main .hero > div:not(#signin-section),
main .community > * {
  background-color: #081321 !important;
}
.gp-menu-v4 a,
.gp-menu-v4 .nav a,
.gp-menu-v4 .nav-label {
  color: #e5bd63 !important;
}
.gp-menu-v4 .nav a,
.gp-menu-v4 .nav > *,
.gp-menu-v4 button {
  border-color: #34445a !important;
}
main {
  box-sizing: border-box !important;
  width: min(1440px, 94%) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
}
.hero {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}
.hero > *,
.community > * {
  min-width: 0 !important;
}
#signin-section {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 440px !important;
  background: #0d1929 !important;
  color: #f4f0e5 !important;
}
#signin-section .card {
  background: transparent !important;
  color: inherit !important;
}
#signin-section h1,
#signin-section h2,
#signin-section h3,
#signin-section label {
  color: #e5bd63 !important;
}
@media (max-width: 800px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  header .brand {
    flex: 1 1 180px !important;
  }
}

/* ORIGINAL GRANDPAACHAT DESIGN REAPPLIED */
:root{--bg:#020911;--navy:#071522;--gold:#efb63e;--light:#ffd777;--white:#f8f6f0;--muted:#c5d0df}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 20% 20%,#102438,transparent 45%),var(--bg);color:var(--white);font:16px/1.6 "Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
header{position:relative;padding:18px 24px 0 145px;border-bottom:1px solid var(--gold);min-height:152px}
.logo{position:absolute;top:12px;left:20px;width:100px;height:128px;background:#000;border:2px solid var(--gold);border-radius:17px;padding:6px;display:flex;align-items:center;justify-content:center}
.logo img{width:100%;height:100%;object-fit:contain}
.brand{display:flex;align-items:center;min-height:65px}
.brand h1{margin:0;color:var(--light);font: bold clamp(26px,4vw,40px) Georgia,serif}
.brand p{margin:0;letter-spacing:1px;font-size:13px}
.top-actions{position:absolute;right:24px;top:25px;display:flex;gap:15px;align-items:center}
.gold{display:inline-block;border:0;border-radius:11px;padding:11px 19px;background:linear-gradient(135deg,var(--light),#d99b24);color:#111;font-weight:bold;cursor:pointer}
nav{display:flex;justify-content:space-between;gap:8px;margin-top:14px;overflow-x:auto}
nav a{padding:8px 12px;white-space:nowrap;border-radius:10px 10px 0 0;font-size:14px}
nav a:hover,nav a.active{background:var(--gold);color:#111}
.hero,.community{max-width:1400px;margin:auto;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;padding:48px 5%}
.eyebrow{color:var(--gold);font-weight:bold;letter-spacing:2px}
h2{font: bold clamp(32px,4.5vw,52px)/1.15 Georgia,serif;margin:8px 0;color:var(--white)}
.tagline{font:italic 24px Georgia,serif;margin:14px 0}
.copy{font-size:18px;color:var(--muted)}
.chapter{margin-top:28px;border-top:2px solid var(--gold);padding-top:15px}
.chapter h3{color:var(--light);font: bold 24px Georgia,serif}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.circle{width:60px;height:60px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--light);font-size:27px;margin:0 auto 8px}
.features p{margin:0;font-size:14px}
.login{border:2px solid var(--gold);border-radius:17px;background:#030b13;padding:26px}
.login h2{color:var(--light);font-size:35px}
.login p{color:var(--muted);margin-top:0}
.tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid #455365;border-radius:12px;overflow:hidden;margin:20px 0}
.tabs button{border:0;background:transparent;color:var(--white);padding:12px;cursor:pointer}
.tabs button.active{background:var(--gold);color:#111;font-weight:bold}
.login input{display:block;width:100%;padding:14px;margin:14px 0;background:#081522;color:white;border:1px solid #455365;border-radius:11px}
.login .gold{width:100%;margin-top:8px}
.note{text-align:center;font-size:12px;margin:20px 0 0!important}
.community{border-top:1px solid #35414d;grid-template-columns:1fr 1fr}
.photo{width:100%;height:350px;object-fit:cover;border:2px solid var(--gold);border-radius:14px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}
.values h3{font: bold 21px Georgia,serif;margin:4px 0}
.values p{color:var(--muted);margin:0}
.quote{color:var(--light);font:italic 20px Georgia,serif;margin-top:25px}
.banner{margin:0 auto 40px;max-width:1320px;padding:28px;border:1px solid var(--gold);border-radius:15px;display:grid;grid-template-columns:1fr 1fr;gap:24px;background:linear-gradient(90deg,#071522ee,#07152299),url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1400&q=80') center/cover}
.banner h2{font-size:29px}
.banner p{color:var(--muted)}
.shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.shortcuts a{font-size:13px}
footer{text-align:center;border-top:1px solid var(--gold);padding:18px;color:var(--muted);font-size:13px}
footer p{margin:3px}
@media(max-width:800px){
 header{padding:12px 12px 0 90px}
 .logo{width:66px;height:86px;left:10px;top:10px}
 .brand h1{font-size:23px}.brand p{font-size:10px}
 .top-actions{position:static;margin:8px 0;justify-content:flex-start}
 nav{justify-content:flex-start}
 .hero,.community{grid-template-columns:1fr;padding:30px 18px;gap:28px}
 .login{padding:20px}
 .photo{height:270px}
 .banner{grid-template-columns:1fr;margin:0 12px 28px;padding:20px}
}
@media(max-width:380px){.brand h1{font-size:19px}.features{gap:4px}.features p{font-size:12px}}