/**
 * ShortTrust global theme — ม่วง ดำ น้ำเงิน ฟ้า คราม เขียว ส้ม ไล่สีสมดุล
 */
:root {
  /* Base palette */
  --st-black: #030308;
  --st-purple: #7c3aed;
  --st-purple-light: #a78bfa;
  --st-indigo: #4338ca;
  --st-navy: #1e1b4b;
  --st-blue: #2563eb;
  --st-sky: #38bdf8;
  --st-green: #10b981;
  --st-orange: #f97316;
  --st-cream: #ede9fe;

  /* App tokens */
  --bg-dark: #06040f;
  --bg-panel: #0f0a1f;
  --bg-card: #14102a;
  --bg-hover: #1c1640;
  --bg-light: #14102a;

  --text-main: #f0eeff;
  --text-muted: #a5b4d4;
  --text-dim: #6b7fa8;

  --accent: #a78bfa;
  --accent-hover: #c4b5fd;
  --primary: #6366f1;
  --primary-light: #93c5fd;
  --primary-glow: #38bdf8;

  --border: #2a2550;
  --border-light: #3d3670;

  --success: #10b981;
  --warning: #f97316;
  --danger: #ef4444;

  /* Landing tokens */
  --bg: #030308;
  --bg2: #0a0618;
  --panel: rgba(124, 58, 237, 0.06);
  --text: #f0eeff;
  --muted: #94a3c8;
  --glow: #a78bfa;

  /* Balanced multi-color gradients */
  --gradient-body: linear-gradient(
    165deg,
    #030308 0%,
    #0f0820 18%,
    #1a1040 38%,
    #0c1a3a 58%,
    #081828 78%,
    #0a1628 100%
  );
  --gradient-accent: linear-gradient(
    135deg,
    #7c3aed 0%,
    #6366f1 25%,
    #2563eb 50%,
    #38bdf8 72%,
    #10b981 88%,
    #f97316 100%
  );
  --gradient-hero-text: linear-gradient(
    120deg,
    #ede9fe 0%,
    #a78bfa 22%,
    #60a5fa 48%,
    #38bdf8 68%,
    #34d399 85%,
    #fb923c 100%
  );
  --gradient-card: linear-gradient(
    160deg,
    rgba(15, 10, 31, 0.96) 0%,
    rgba(28, 22, 64, 0.75) 50%,
    rgba(12, 26, 58, 0.65) 100%
  );
  --gradient-nav: linear-gradient(
    180deg,
    rgba(6, 4, 15, 0.94) 0%,
    rgba(15, 10, 31, 0.88) 100%
  );
  --gradient-btn: linear-gradient(135deg, #7c3aed, #3b82f6, #10b981);

  --sidebar-width: 240px;
  --sidebar-collapsed-width: 68px;
  --topbar-height: 60px;
}

html {
  background: var(--st-black);
}

body {
  background: var(--gradient-body);
  background-attachment: fixed;
  color: var(--text-main);
}

.brand-title {
  font-weight: 700;
  background: var(--gradient-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.btn-dev-login {
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: 1px dashed var(--st-orange);
  background: rgba(249, 115, 22, 0.08);
  color: var(--st-orange);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-dev-login:hover {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
}