/* =========================================================================
   THEME TOKENS (mirrors Bot PROJEK LAMA NODEJS / app/globals.css exactly)
   ========================================================================= */
:root {
  --bg-base: 238 242 247;
  --bg-soft: 226 232 240;
  --fg-base: 15 23 42;
  --accent-1: 99 102 241;
  --accent-2: 168 85 247;
  --accent-3: 14 165 233;
  --accent-4: 16 185 129;
  --glass-bg: 238 242 247;
  --glass-border: 255 255 255;
}

.dark {
  --bg-base: 18 22 32;
  --bg-soft: 27 32 46;
  --fg-base: 248 250 252;
  --glass-bg: 27 32 46;
  --glass-border: 42 50 68;
}

/* =========================================================================
   BASE
   ========================================================================= */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s ease, color .3s ease;
}

body {
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(168,85,247,.10), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(14,165,233,.10), transparent 60%),
    rgb(var(--bg-base));
  color: rgb(var(--fg-base));
  min-height: 100dvh;
  font-feature-settings: "cv02","cv03","cv04","cv11","ss01";
  letter-spacing: -0.01em;
}

.dark body {
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(14,165,233,.18), transparent 60%),
    rgb(var(--bg-base));
}

h1, h2, h3, h4 { letter-spacing: -0.02em; }

@media (max-width: 768px) {
  button, a[role="button"], .tap { min-height: 40px; }
  input, select, textarea { font-size: 16px !important; }
}

/* =========================================================================
   AURORA BACKGROUND
   ========================================================================= */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: .55;
  mix-blend-mode: screen;
  animation: float-slow 22s ease-in-out infinite;
  will-change: transform;
}
.dark .aurora-orb { opacity: .35; }
.aurora-orb-1 {
  width: 480px; height: 480px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, rgb(var(--accent-1)) 0%, transparent 70%);
  animation-delay: 0s;
}
.aurora-orb-2 {
  width: 560px; height: 560px;
  top: 30%; right: -160px;
  background: radial-gradient(circle, rgb(var(--accent-2)) 0%, transparent 70%);
  animation-delay: -8s;
}
.aurora-orb-3 {
  width: 520px; height: 520px;
  bottom: -160px; left: 30%;
  background: radial-gradient(circle, rgb(var(--accent-3)) 0%, transparent 70%);
  animation-delay: -14s;
}
.aurora-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.dark .aurora-grid {
  background-image:
    linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
}

@keyframes float-slow {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px,-30px) scale(1.06); }
  66%      { transform: translate(-30px,30px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-orb { animation: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   GLASSMORPHISM UTILITIES
   ========================================================================= */
.glass {
  background: rgba(var(--bg-base), 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    6px 6px 12px rgba(166, 180, 200, 0.65),
    -6px -6px 12px rgba(255, 255, 255, 0.95);
}
.dark .glass {
  background: rgba(var(--bg-base), 0.7);
  border-color: rgba(255, 255, 255, 0.03);
  box-shadow:
    6px 6px 12px rgba(6, 8, 12, 0.65),
    -6px -6px 12px rgba(30, 37, 54, 0.5);
}

.glass-strong {
  background: rgba(var(--bg-base), 0.85);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    10px 10px 20px rgba(166, 180, 200, 0.65),
    -10px -10px 20px rgba(255, 255, 255, 0.95);
}
.dark .glass-strong {
  background: rgba(var(--bg-base), 0.8);
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow:
    10px 10px 20px rgba(6, 8, 12, 0.65),
    -10px -10px 20px rgba(30, 37, 54, 0.5);
}

.glass-subtle {
  background: rgba(var(--bg-soft), 0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 3px 3px 6px rgba(166, 180, 200, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.7);
}
.dark .glass-subtle {
  background: rgba(var(--bg-soft), 0.45);
  border-color: rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 4px 4px 8px rgba(6, 8, 12, 0.55),
    inset -4px -4px 8px rgba(30, 37, 54, 0.45);
}

/* Neumorphic Utilities */
.neu-flat {
  background: rgb(var(--bg-base));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    8px 8px 16px rgba(166, 180, 200, 0.7),
    -8px -8px 16px rgba(255, 255, 255, 0.95);
}
.dark .neu-flat {
  background: rgb(var(--bg-base));
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow:
    8px 8px 16px rgba(6, 8, 12, 0.65),
    -8px -8px 16px rgba(30, 37, 54, 0.5);
}

.neu-sunken {
  background: rgb(var(--bg-soft));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 5px 5px 10px rgba(166, 180, 200, 0.65),
    inset -5px -5px 10px rgba(255, 255, 255, 0.9);
}
.dark .neu-sunken {
  background: rgb(var(--bg-soft));
  border: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 5px 5px 10px rgba(6, 8, 12, 0.65),
    inset -5px -5px 10px rgba(30, 37, 54, 0.45);
}

.neu-btn {
  background: rgb(var(--bg-base));
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    4px 4px 8px rgba(166, 180, 200, 0.65),
    -4px -4px 8px rgba(255, 255, 255, 0.95);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .neu-btn {
  background: rgb(var(--bg-base));
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow:
    4px 4px 8px rgba(6, 8, 12, 0.65),
    -4px -4px 8px rgba(30, 37, 54, 0.5);
}
.neu-btn:hover {
  transform: translateY(-1.5px);
  box-shadow:
    6px 6px 12px rgba(166, 180, 200, 0.8),
    -6px -6px 12px rgba(255, 255, 255, 1);
}
.dark .neu-btn:hover {
  box-shadow:
    6px 6px 12px rgba(6, 8, 12, 0.75),
    -6px -6px 12px rgba(30, 37, 54, 0.6);
}
.neu-btn:active, .neu-btn-active {
  transform: translateY(0.5px);
  box-shadow:
    inset 3px 3px 6px rgba(166, 180, 200, 0.6),
    inset -3px -3px 6px rgba(255, 255, 255, 0.9);
}
.dark .neu-btn:active, .dark .neu-btn-active {
  box-shadow:
    inset 3px 3px 6px rgba(6, 8, 12, 0.75),
    inset -3px -3px 6px rgba(30, 37, 54, 0.5);
}

.neu-input {
  background: rgb(var(--bg-soft));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 4px 4px 8px rgba(166, 180, 200, 0.5),
    inset -4px -4px 8px rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
}
.dark .neu-input {
  background: rgb(var(--bg-soft));
  border: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 4px 4px 8px rgba(6, 8, 12, 0.55),
    inset -4px -4px 8px rgba(30, 37, 54, 0.4);
}
.neu-input:focus {
  outline: none;
  box-shadow:
    inset 2px 2px 4px rgba(166, 180, 200, 0.5),
    inset -2px -2px 4px rgba(255, 255, 255, 0.85),
    0 0 10px rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.4);
}
.dark .neu-input:focus {
  box-shadow:
    inset 2px 2px 4px rgba(6, 8, 12, 0.55),
    inset -2px -2px 4px rgba(30, 37, 54, 0.4),
    0 0 10px rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.35);
}

.glow-ring {
  box-shadow:
    0 0 0 1px rgba(99,102,241,.25),
    0 8px 28px -8px rgba(99,102,241,.45);
}

.text-gradient {
  background: linear-gradient(120deg, rgb(99,102,241), rgb(168,85,247) 50%, rgb(14,165,233));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2.5s linear infinite;
}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* =========================================================================
   CUSTOM SCROLLBARS
   ========================================================================= */
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99,102,241,.4), rgba(168,85,247,.4));
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99,102,241,.7), rgba(168,85,247,.7));
}
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.45) transparent; }

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in .4s ease-out both; }
.fade-in { animation: fade-in .4s ease-out both; }
.fade-up { animation: fade-in .5s cubic-bezier(.16,1,.3,1) both; }

/* Focus rings */
:focus-visible {
  outline: 2px solid rgb(var(--accent-1));
  outline-offset: 2px;
  border-radius: 8px;
}

/* Selection */
::selection {
  background: rgba(99,102,241,.25);
  color: inherit;
}

/* =========================================================================
   GLOW HELPERS
   ========================================================================= */
.shadow-glow { box-shadow: 0 0 30px -5px rgba(99,102,241,.5); }
.shadow-glow-emerald { box-shadow: 0 0 30px -5px rgba(16,185,129,.5); }
.shadow-glass-lg { box-shadow: 0 20px 60px -10px rgba(31,38,135,.25); }

/* =========================================================================
   LOG TERMINAL COLORING
   ========================================================================= */
.log-mono { font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; }
.log-in { color:rgba(16,185,129,.85); }
.log-out { color:rgba(14,165,233,.85); }
.log-cmd { color:rgba(168,85,247,.8); }
.log-qr { color:rgba(99,102,241); font-weight:700; }
.log-err { color:rgba(248,113,113); font-weight:600; }
.log-info { color:rgba(148,163,184); }

/* =========================================================================
   DATE INPUT — calendar picker indicator (visible in dark mode)
   ========================================================================= */
input[type="date"] {
  color-scheme: light;
}
.dark input[type="date"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="date"]:disabled::-webkit-calendar-picker-indicator {
  opacity: 0.35;
  cursor: not-allowed;
}

/* =========================================================================
   SELECT DROPDOWN — native option popup visible in dark mode
   Without color-scheme + option colors the browser renders the open dropdown
   with a white background while the text stays white (dark:text-white from
   Tailwind), making every <option> invisible. This forces the native popup to
   follow the active theme for every <select> on the site.
   ========================================================================= */
select {
  color-scheme: light;
}
.dark select {
  color-scheme: dark;
}
select option {
  background-color: rgb(var(--bg-soft));
  color: rgb(var(--fg-base));
}
.dark select option {
  background-color: rgb(27 32 46); /* --bg-soft dark */
  color: #f8fafc;                  /* slate-50 */
}
select option:hover,
select option:checked {
  background-color: rgba(99, 102, 241, .35);
}