:root {
  --cv-bg: #070707;
  --cv-bg-soft: #111111;
  --cv-card: rgba(255, 255, 255, 0.045);
  --cv-card-strong: rgba(255, 255, 255, 0.075);
  --cv-border: rgba(212, 175, 55, 0.26);
  --cv-border-soft: rgba(255, 255, 255, 0.10);
  --cv-gold: #d4af37;
  --cv-gold-soft: #f2d675;
  --cv-text: #f5f1e8;
  --cv-muted: #b6b0a4;
  --cv-danger: #ff6b6b;
  --cv-ok: #59d38c;
  --cv-radius: 22px;
  --cv-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

html {
  background: var(--cv-bg);
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(212, 175, 55, 0.14), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.07), transparent 28%),
    linear-gradient(135deg, #050505 0%, #0b0b0b 42%, #15110a 100%) !important;
  color: var(--cv-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  min-height: 100vh;
}

body::before {
  content: "Consortium Vault – Private Client Access Portal · Secure Online Demo · No Real Client Data";
  display: block;
  padding: 11px 24px;
  background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(255,255,255,0.04));
  color: var(--cv-gold-soft);
  border-bottom: 1px solid rgba(212,175,55,0.22);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

main,
.container,
.page,
.wrapper,
.dashboard,
.admin-dashboard,
.portal-shell,
.login-shell {
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

header,
.hero,
section,
.card,
.panel,
.box,
.module,
.tile,
.login-card,
.dashboard-card,
.admin-card,
.notice,
table,
form {
  border-radius: var(--cv-radius) !important;
}

header,
.hero,
.card,
.panel,
.box,
.module,
.tile,
.login-card,
.dashboard-card,
.admin-card,
.notice,
form,
table {
  background: var(--cv-card) !important;
  border: 1px solid var(--cv-border-soft) !important;
  box-shadow: var(--cv-shadow) !important;
  backdrop-filter: blur(16px);
}

header,
.hero {
  border-color: var(--cv-border) !important;
  padding: 34px !important;
  margin-top: 28px !important;
  margin-bottom: 24px !important;
}

h1,
h2,
h3 {
  color: var(--cv-text) !important;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(34px, 5vw, 64px) !important;
  line-height: 0.98 !important;
  margin-bottom: 18px !important;
}

h2 {
  font-size: clamp(24px, 3vw, 36px) !important;
}

p,
li,
td,
th,
label,
small,
span {
  color: inherit;
}

p,
li {
  color: var(--cv-muted) !important;
  line-height: 1.7 !important;
}

a {
  color: var(--cv-gold-soft) !important;
  text-decoration: none !important;
}

a:hover {
  color: #ffffff !important;
}

button,
.button,
.btn,
input[type="submit"] {
  background: linear-gradient(135deg, #d4af37, #8f6f16) !important;
  color: #090909 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 14px 34px rgba(212,175,55,0.16) !important;
}

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

input,
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.07) !important;
  color: var(--cv-text) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 14px !important;
  padding: 13px 14px !important;
  outline: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--cv-gold) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.10) !important;
}

.card,
.panel,
.box,
.module,
.tile,
.login-card,
.dashboard-card,
.admin-card,
.notice,
form {
  padding: 24px !important;
  margin-bottom: 20px !important;
}

table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}

th {
  color: var(--cv-gold-soft) !important;
  background: rgba(212,175,55,0.08) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

td,
th {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 14px !important;
}

code,
pre {
  background: rgba(0,0,0,0.35) !important;
  color: var(--cv-gold-soft) !important;
  border: 1px solid rgba(212,175,55,0.16) !important;
  border-radius: 14px !important;
}

.status-ok,
.ok,
.success {
  color: var(--cv-ok) !important;
}

.warning,
.danger,
.error {
  color: var(--cv-danger) !important;
}

#login-result {
  display: block;
  margin-top: 16px;
  color: var(--cv-gold-soft) !important;
  font-weight: 700;
}

#session-box {
  margin-top: 18px;
  border: 1px solid rgba(212,175,55,0.20) !important;
  background: rgba(0,0,0,0.22) !important;
  border-radius: 18px !important;
  padding: 18px !important;
}

@media (max-width: 768px) {
  body::before {
    font-size: 10px;
    padding: 10px 12px;
  }

  main,
  .container,
  .page,
  .wrapper,
  .dashboard,
  .admin-dashboard,
  .portal-shell,
  .login-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  header,
  .hero,
  .card,
  .panel,
  .box,
  .module,
  .tile,
  .login-card,
  .dashboard-card,
  .admin-card,
  .notice,
  form {
    padding: 18px !important;
  }
}