/* STARLORD — PRO GOLD theme. Load after each page's layout stylesheet.
   Edit the tokens here to update every page together. */
:root {
  color-scheme: dark;
  --bg: #0a0704;
  --panel: #1a1409;
  --panel2: #241b0c;
  --line: #4a3a14;
  --text: #fff6e0;
  --muted: #c2ab7a;
  --blue: #e9b83d;
  --cyan: #ffd766;

  /* gold system */
  --gold: #f5c542;
  --gold-bright: #ffe27a;
  --gold-deep: #b9861e;
  --gold-rose: #e7c98b;
  --gold-line: rgba(245, 197, 66, 0.35);
  --gold-glow: rgba(245, 197, 66, 0.45);
  --gold-text: linear-gradient(100deg, #fff3cf 0%, #f5c542 35%, #b9861e 55%, #ffe27a 75%, #fff3cf 100%);
  --sl-primary: #f5c542;
  --sl-highlight: #ffe27a;
  --sl-surface: linear-gradient(155deg, #241c0e, #100b04 70%);
  --sl-shadow: 0 18px 46px #00000080, 0 0 0 1px var(--gold-line);
}

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

body {
  background:
    radial-gradient(ellipse at 82% -5%, rgba(245, 197, 66, 0.14) 0, transparent 45%),
    radial-gradient(ellipse at 8% 105%, rgba(185, 134, 30, 0.12) 0, transparent 42%),
    radial-gradient(circle at 50% 50%, #16110a 0%, #0a0704 70%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: #1a1409; }

button, input, select, textarea { font-family: inherit; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--gold-bright); outline-offset: 3px;
}
:where(button, a) { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }

.ambient-one, .orb-one { background: var(--gold); opacity: .28; }
.ambient-two, .orb-two { background: var(--gold-bright); opacity: .16; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: linear-gradient(180deg, #1c150a fa, #0a0704fc);
  border-right-color: #3d2f10;
  box-shadow: 12px 0 36px #00000055, inset -1px 0 0 var(--gold-line);
}
.brand strong { color: #fff8e6; }
.brand strong span {
  background: var(--gold-text);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldShift 5s linear infinite;
}
.brand small { color: var(--muted); letter-spacing: 2px; }
.brand-mark {
  border-color: var(--gold);
  background: linear-gradient(140deg, #3a2c0e, #17110a);
  color: var(--gold-bright);
  box-shadow: 0 0 22px var(--gold-glow), inset 0 0 12px #ffd76633;
  overflow: hidden;
  position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  background-size: 250% 250%;
  animation: shineSweep 3.2s ease-in-out infinite;
  mix-blend-mode: overlay;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }

.sidebar nav a { color: #c9b382; border-radius: 10px; position: relative; }
.sidebar nav a:hover { border-color: #6b5220; background: #241a0a; box-shadow: none; }
.sidebar nav a.active {
  color: #14100a; border-color: var(--gold-bright);
  background: linear-gradient(105deg, var(--gold), var(--gold-deep));
  box-shadow: 0 6px 22px var(--gold-glow), inset 3px 0 0 #fff3cf;
  font-weight: 700;
}

.news { border-color: #4a3a14; background: #150f06; }
.news b, .news > span { color: #1a1409; background: linear-gradient(120deg, var(--gold-bright), var(--gold)); font-weight: 800; }
.news p { color: #d9c496; }

.icon-button, .home-button, .profile { border-color: #4a3a14; background: #17110a; }
.icon-button:hover, .home-button:hover { border-color: var(--gold); box-shadow: 0 0 16px var(--gold-glow); }
.profile span { background: linear-gradient(145deg, var(--gold), var(--gold-deep)); color: #1a1409; }

.welcome h1, .heading h1, .team-heading h1, .member-heading h1 { letter-spacing: -.035em; }
.welcome h1 span, .heading h1 span, .visual h1 span {
  background: var(--gold-text); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; animation: goldShift 5s linear infinite;
}
.eyebrow, .heading p, .panel-title p, .history-title p, .card-heading p { color: var(--gold-bright); letter-spacing: 2px; }

/* ---------- Panels / Cards ---------- */
.panel, .stat, .plan-card, .team-panel, .member-panel, .login-card,
.team-summary article, .member-summary article {
  border-color: var(--gold-line);
  background: var(--sl-surface);
  border-radius: 16px;
  box-shadow: var(--sl-shadow), inset 0 1px 0 #ffe27a14;
  position: relative;
  overflow: hidden;
}

.plan-card { border-top: 3px solid var(--gold); }
.plan-card.cyan, .plan-card.purple, .plan-card.gold { color: var(--gold-bright); }
.plan-card.featured {
  border-color: var(--gold-bright);
  background: linear-gradient(145deg, #3a2c0e, #17120a);
  box-shadow: 0 0 40px var(--gold-glow), var(--sl-shadow);
}
.plan-card:after { opacity: .18; background: var(--gold) !important; }
.plan-icon {
  background: linear-gradient(160deg, #241b0c, #120d06);
  box-shadow: 0 8px 24px var(--gold-glow), 0 0 0 1px var(--gold-line);
  color: var(--gold-bright) !important;
}
.popular { background: linear-gradient(120deg, var(--gold-bright), var(--gold-deep)); color: #1a1409; font-weight: 800; }
.plan-card small, .stat small, .mini small { color: var(--muted); }
.plan-card button {
  background: linear-gradient(120deg, #241b0c, #17110a);
  border-color: var(--gold-deep); color: var(--gold-bright);
}
.plan-card button:hover { background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: #1a1409; }

/* ---------- Buttons ---------- */
.primary-button, .create-button, .check-button, .continue-button, .export-btn,
.referral button {
  border: 1px solid var(--gold-bright); color: #1a1409 !important;
  background: linear-gradient(110deg, var(--gold-bright), var(--gold) 50%, var(--gold-deep));
  background-size: 220% auto;
  box-shadow: 0 7px 22px var(--gold-glow);
  font-weight: 800; border-radius: 10px;
  position: relative; overflow: hidden;
  transition: background-position .5s ease, filter .2s ease, transform .15s ease;
}
:where(.primary-button, .create-button, .check-button, .continue-button, .export-btn, .referral button):hover:not(:disabled) {
  filter: brightness(1.12); background-position: 100% 0; transform: translateY(-1px);
}
:where(.primary-button, .create-button, .check-button, .continue-button, .export-btn, .referral button) svg { color: #1a1409 !important; }

.balance {
  border-color: var(--gold-deep);
  background: linear-gradient(130deg, #241b0c, #120d06);
  box-shadow: 0 8px 26px #00000066, 0 0 22px var(--gold-glow) inset;
}
.balance svg, .panel-title svg, .panel-title a { color: var(--gold-bright); }

.stat-icon, .round-icon { background: linear-gradient(160deg, #241b0c, #150f07); color: var(--gold-bright); }
.team-summary i, .member-summary i { color: #1a1409; background: linear-gradient(120deg, var(--gold-bright), var(--gold)); }
.member-id { color: var(--gold-bright); }

.table-wrap { border: 1px solid var(--gold-line); border-radius: 12px; }
:where(.team-table, .member-table) th { color: var(--gold-bright); background: #1a1409; }
:where(.team-table, .member-table) td { border-bottom-color: #382a10; }
:where(.team-table, .member-table) tbody tr:hover { background: #2a1e0c88; }

.search-box input, .team-tools select, .member-tools select, .overview select,
.quick-amounts button, .amount-field { border-color: #4a3a14; background: #150f06; color: #f3e6c4; }
.pager button { background: #1a1409; border-color: #4a3a14; }
.pager button.active { background: var(--gold); border-color: var(--gold-bright); color: #1a1409; font-weight: 800; }

.network-card { background: #1a1409; border-color: #4a3a14; }
.wallet-option { background: #17120a; border-color: #4a3a14; }
.wallet-option.primary { background: linear-gradient(105deg, #3a2c0e, #17120a); border-color: var(--gold-deep); }
.wallet-option:hover { border-color: var(--gold-bright); box-shadow: 0 5px 20px var(--gold-glow); }
.wallet-option small, .card-heading > span, .terms p, .benefits { color: var(--muted); }

.cube { background: radial-gradient(circle, #3a2c0e, #100b04 70%); border-color: var(--gold-deep); box-shadow: 0 0 65px var(--gold-glow); }
.cube-core { color: #fff3cf; border-color: var(--gold-bright); background: #1a1409; box-shadow: 0 0 28px var(--gold-glow); }

.mobile-nav { background: #100b04f5; border-top-color: #4a3a14; }
.mobile-nav a.active { color: var(--gold-bright); }
.mobile-nav .main-action {
  background: linear-gradient(145deg, var(--gold-bright), var(--gold-deep)) !important;
  box-shadow: 0 0 20px var(--gold-glow) !important; color: #1a1409 !important;
}

@keyframes goldShift { to { background-position: 200% center; } }
@keyframes shineSweep { 0% { background-position: -50% -50%; } 100% { background-position: 150% 150%; } }

@media (max-width: 760px) {
  .panel, .stat, .plan-card, .team-panel, .member-panel { border-radius: 12px; }
  .brand strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}