:root {
  /* Colors */
  --navy-deepest: rgb(4, 6, 15);
  --navy-deep:     #070B1A;
  --navy-mid:      #0A0E22;
  --navy-panel:    #0D1228;
  --navy-input:    rgba(6, 9, 20, 0.85);
  --navy-border:   rgba(198, 167, 94, 0.18);
  --navy-border-s: rgba(198, 167, 94, 0.07);

  --gold:          #C6A75E;
  --gold-light:    #E2C97E;
  --gold-dark: rgba(154, 122, 58, 0.88);
  --gold-glow:     rgba(198, 167, 94, 0.22);

  --text-primary:   #EDE8DC;
  --text-secondary: rgba(234, 229, 222, 0.73);
  --text-muted:     rgba(160, 148, 120, 0.45);

  /* Typography */
  /*--font-serif: 'Playfair Display', Georgia, sans-serif;*/
  --font-sans:  'Inter', system-ui, sans-serif;

  --font-main: 'Inter', sans-serif;
  --font-titles: 'Playfair Display', serif;


  /* Misc */
  --radius:     10px;
  --radius-lg:  16px;
  --transition: 0.25s ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--navy-deepest);
  /*background: var(--text-secondary);*/
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

input, select, button, textarea { font-family: var(--font-sans); }

/* ── Utilities ──────────────────────────────────────────── */
.hidden   { display: none !important; }
.fade-up  { animation: fadeUp .55s ease both; animation-delay: var(--delay, 0s); }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn  { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse    { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
@keyframes floatY   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ringPulse { 0%, 100% { opacity: .15; transform: scale(1); } 50% { opacity: .45; transform: scale(1.03); } }
@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(18px, -14px) scale(1.02); }
  50%  { transform: translate(-12px, 22px) scale(0.98); }
  75%  { transform: translate(8px, -8px) scale(1.01); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ════════════════════════════════════════════════════════════
   ANIMATED BACKGROUND  (used on every page)
════════════════════════════════════════════════════════════ */
.bg-layer {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #04050F 0%, #070A1C 45%, #060818 75%, #030408 100%);
  /*background: linear-gradient(135deg, #c9ccdf 0%, #60616c 45%, #585977 75%, #adb8dc 100%);*/
  overflow: hidden;
  pointer-events: none;
}

.bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  animation: orbFloat linear infinite;
}
.bg-orb--1 { width: 700px; height: 500px; top: -8%;  left: -8%;   background: rgba(198,167,94,0.045); animation-duration: 28s; }
.bg-orb--2 { width: 600px; height: 700px; top: 35%;  right: -12%; background: rgba(30,50,120,0.07);   animation-duration: 38s; }
.bg-orb--3 { width: 450px; height: 450px; bottom:-5%;left:  25%;  background: rgba(198,167,94,0.03);  animation-duration: 32s; }

.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(198,167,94,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,167,94,0.028) 1px, transparent 1px);
  background-size: 60px 60px;
}

.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.72) 100%);
}

/* ════════════════════════════════════════════════════════════
   GLASS CARD  (shared component)
════════════════════════════════════════════════════════════ */
.glass-card {

  background: linear-gradient(135deg, rgb(5, 6, 16) 0%, rgb(7, 10, 26) 100%);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 50px rgba(198,167,94,0.05),
    0 32px 64px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(198,167,94,0.07);
  backdrop-filter: blur(22px);
}

/* ════════════════════════════════════════════════════════════
   INPUTS  (shared)
════════════════════════════════════════════════════════════ */
.field { margin-bottom: 14px; }

.field label, label {
  display: block; margin-bottom: 6px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(198,167,94,0.65);
}

.input-wrap { position: relative; }

.input-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px;
  fill: none; stroke: rgba(198,167,94,0.38);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
  transition: stroke var(--transition);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select {
  width: 100%; padding: 12px 14px;
  background: var(--navy-input);
  border: 1px solid rgba(198,167,94,0.16);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.input-wrap input { padding-left: 40px; }
input::placeholder { color: rgba(160,148,120,0.38); }

input:focus, select:focus {
  border-color: rgba(198,167,94,0.55);
  box-shadow: 0 0 0 3px rgba(198,167,94,0.1);
}
.input-wrap:focus-within .input-icon { stroke: rgba(198,167,94,0.75); }

select { cursor: pointer; }
select option { background: #0A0E22; color: var(--text-primary); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ════════════════════════════════════════════════════════════
   BUTTONS  (shared)
════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: var(--radius);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  border: none; cursor: pointer;
  transition: all var(--transition);
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #0D0E1A;
  box-shadow: 0 0 14px rgba(198,167,94,0.28), 0 4px 16px rgba(0,0,0,0.4);
}
.btn--gold:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 24px rgba(198,167,94,0.42), 0 6px 20px rgba(0,0,0,0.5);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(198,167,94,0.35);
}
.btn--outline:hover {
  background: rgba(198,167,94,0.06);
  border-color: rgba(198,167,94,0.55);
}

.btn--full { width: 100%; }
.btn--sm   { padding: 9px 18px; font-size: 11px; }

/* ════════════════════════════════════════════════════════════
   ALERTS  (shared)
════════════════════════════════════════════════════════════ */
.alert { padding: 10px 14px; border-radius: 8px; font-size: 12px; margin-bottom: 12px; }
.alert--error {
  background: rgba(220,50,50,0.08);
  border: 1px solid rgba(220,50,50,0.22);
  color: rgba(240,100,100,0.9);
}

/* ════════════════════════════════════════════════════════════
   SHARED DASHBOARD HEADER  (used in dashboard + admin)
════════════════════════════════════════════════════════════ */
.dash-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4,5,14,0.97); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(198,167,94,0.1);
  padding: 13px 36px;
  display: flex; align-items: center; justify-content: space-between;
}
.dash-header__left { display: flex; align-items: center; gap: 10px; }

.dash-logo {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(198,167,94,0.08); border: 1px solid rgba(198,167,94,0.18);
  display: flex; align-items: center; justify-content: center;
}
.dash-logo svg {
  fill: none; stroke: rgba(198,167,94,0.8);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.dash-brand {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: rgba(198,167,94,0.45);
}

.dash-header__right { display: flex; align-items: center; gap: 16px; }

.status-dot-wrap { display: flex; align-items: center; gap: 6px; }
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4CAF50; box-shadow: 0 0 8px rgba(76,175,80,0.7);
}
.status-dot-wrap span {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(76,175,80,0.65);
}

.header-sep { width: 1px; height: 14px; background: rgba(198,167,94,0.1); }
.dash-username { font-size: 11px; color: rgba(200,190,170,0.4); }

.btn-signout {
  background: none; border: none; cursor: pointer;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(198,167,94,0.3); transition: color var(--transition);
}
.btn-signout:hover { color: rgba(198,167,94,0.8); }

/* ════════════════════════════════════════════════════════════
   SHARED HERO  (dashboard + admin)
════════════════════════════════════════════════════════════ */
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  padding: 4px 13px; background: rgba(198,167,94,0.05);
  border: 1px solid rgba(198,167,94,0.12); border-radius: 20px;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: rgba(198,167,94,0.55);
}
.hero-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(198,167,94,0.65); }

.hero-title {
  font-family: var(--font-serif);
  font-size: 36px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-primary); margin-bottom: 8px;
}
.hero-sub { font-size: 13px; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   SHARED FOOTER
════════════════════════════════════════════════════════════ */
.dash-footer {
  text-align: center; padding: 14px 0;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(198,167,94,0.15);
}

/* ════════════════════════════════════════════════════════════
   SHARED CARD LABEL
════════════════════════════════════════════════════════════ */
.card-label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: rgba(198,167,94,0.5); margin-bottom: 8px;
}

.divider      { height: 1px; background: rgba(198,167,94,0.07); }
.divider-thin { height: 1px; background: rgba(198,167,94,0.06); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .grid-2     { grid-template-columns: 1fr; }
  .dash-header { padding: 12px 16px; }
}



.qfs-alert-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
    transition: all 0.3s ease;
}

.qfs-alert-box {
    width: 90%; max-width: 400px;
    padding: 30px !important;
    text-align: center;
    border: 1px solid var(--gold) !important;
}

.qfs-alert-icon {
    font-size: 40px; margin-bottom: 15px;
}

#qfs-alert-title {
    font-family: var(--font-serif);
    color: var(--gold); margin-bottom: 10px;
}

#qfs-alert-message {
    font-size: 14px; color: rgba(255,255,255,0.8);
    line-height: 1.6; margin-bottom: 25px;
}

.qfs-alert-buttons {
    display: flex; gap: 15px; justify-content: center;
}

.hidden { display: none !important; }