@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ============================================================
   Qyro Cloud theme — dark-only, matches www.qyro.site
   Sky accent #38bdf8 · near-black bg #050604 · sage text #c6cbbb
   ============================================================ */

:root {
    --qyro-bg: #050604;
    --qyro-bg-alt: #11130f;
    --qyro-panel: #151812;
    --qyro-accent: #38bdf8;
    --qyro-accent-hover: #0ea5e9;
    --qyro-accent-deep: #0284c7;
    --qyro-text: #c6cbbb;
    --qyro-text-bright: #f7f4e8;
}

/* ---------- global ---------- */
html, body {
    background-color: var(--qyro-bg) !important;
    color: var(--qyro-text) !important;
}
body {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* ---------- branding font: Stack Sans Headline ---------- */
.heavy,
#server-name,
#sidebar-server-name,
.page-title {
    font-family: 'Stack Sans Headline', 'Inter', sans-serif !important;
    letter-spacing: 0.02em;
}

/* ---------- panel / surface colors ---------- */
.bg-\[\#010103\] { background-color: var(--qyro-bg) !important; }
.bg-\[\#0e0f13\],
.bg-\[\#101017\],
.bg-\[\#101017\] { background-color: var(--qyro-bg-alt) !important; }
.bg-\[\#191c20\],
.bg-\[\#1a1c20\],
.bg-\[\#1a1d21\],
.bg-\[\#27292c\] { background-color: var(--qyro-panel) !important; }

.bg-gray-950 { background-color: var(--qyro-bg) !important; }
.bg-gray-900 { background-color: var(--qyro-bg-alt) !important; }
.bg-gray-800 { background-color: var(--qyro-panel) !important; }
.bg-gray-700 { background-color: #1a1e16 !important; }
.bg-gray-100 { background-color: var(--qyro-panel) !important; }
.bg-gray-200 { background-color: #1a1e16 !important; }
.bg-gray-50  { background-color: #0d0f0a !important; }
.bg-white    { background-color: var(--qyro-panel) !important; }

.bg-zinc-400 { background-color: #3a4033 !important; }
.bg-zinc-500 { background-color: #2e3329 !important; }
.bg-zinc-600 { background-color: #23271f !important; }
.bg-zinc-700 { background-color: #1a1e16 !important; }

/* ---------- accent remap: indigo -> sky #38bdf8 ---------- */
/* Filled buttons use deeper sky so white text stays readable */
.bg-indigo-500 { background-color: #0ea5e9 !important; }
.bg-indigo-600 { background-color: #0284c7 !important; }
.bg-indigo-700 { background-color: #0369a1 !important; }
.bg-indigo-900 { background-color: #0c4a6e !important; }
.bg-indigo-950 { background-color: #082f49 !important; }
.bg-indigo-100 { background-color: rgba(14, 165, 233, 0.15) !important; }

.hover\:bg-indigo-500:hover { background-color: #0284c7 !important; }
.hover\:bg-indigo-600:hover { background-color: #0369a1 !important; }
.hover\:bg-indigo-700:hover { background-color: #0369a1 !important; }

.text-indigo-100 { color: #e0f2fe !important; }
.text-indigo-200 { color: #bae6fd !important; }
.text-indigo-300 { color: #7dd3fc !important; }
.text-indigo-400 { color: var(--qyro-accent) !important; }
.text-indigo-500 { color: #38bdf8 !important; }
.text-indigo-600 { color: #38bdf8 !important; }

.hover\:text-indigo-300:hover { color: #7dd3fc !important; }
.hover\:text-indigo-900:hover { color: #7dd3fc !important; }

.border-indigo-500 { border-color: var(--qyro-accent) !important; }

.ring-indigo-500 { --tw-ring-color: var(--qyro-accent) !important; }
.ring-indigo-800 { --tw-ring-color: #075985 !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--qyro-accent) !important; }
.focus\:ring-indigo-300:focus { --tw-ring-color: rgba(56, 189, 248, 0.5) !important; }
.focus\:border-indigo-500:focus { border-color: var(--qyro-accent) !important; }

/* ---------- blue -> sky ---------- */
.bg-blue-500 { background-color: #0ea5e9 !important; }
.bg-blue-700 { background-color: #0284c7 !important; }
.hover\:bg-blue-700:hover { background-color: #0369a1 !important; }
.text-blue-400 { color: var(--qyro-accent) !important; }

/* ---------- gradients ---------- */
.from-indigo-500 { --tw-gradient-from: #0ea5e9 !important; }
.from-indigo-600 { --tw-gradient-from: #0ea5e9 !important; }
.from-indigo-700 { --tw-gradient-from: #0284c7 !important; }
.to-indigo-600   { --tw-gradient-to: #0284c7 !important; }
.to-indigo-700   { --tw-gradient-to: #0369a1 !important; }
.to-indigo-800   { --tw-gradient-to: #075985 !important; }
.via-blue-300    { --tw-gradient-stops: #7dd3fc 0%, #38bdf8 50% !important; }
.to-blue-900     { --tw-gradient-to: #0c4a6e !important; }
.to-gray-300     { --tw-gradient-to: #1a1e16 !important; }
.to-gray-400     { --tw-gradient-to: #2a2f25 !important; }

/* ---------- text remap: crisp whites (no green tint) ---------- */
.text-gray-900 { color: #ffffff !important; }
.text-gray-800 { color: #fbfbfa !important; }
.text-gray-700 { color: #f5f5f2 !important; }
.text-gray-600 { color: #eaeae6 !important; }
.text-gray-500 { color: #dededa !important; }
.text-gray-400 { color: #d4d4cf !important; }
.text-gray-300 { color: #efefec !important; }
.text-gray-200 { color: #f7f7f5 !important; }
.text-zinc-400 { color: #d4d4cf !important; }
.text-zinc-300 { color: #efefec !important; }
.text-neutral-300 { color: #efefec !important; }
.text-neutral-400 { color: #d4d4cf !important; }
.text-neutral-500 { color: #c4c4be !important; }
.placeholder-gray-400::placeholder { color: #9a9a92 !important; }

/* brighter translucent whites */
.text-white\/50 { color: rgba(255, 255, 255, 0.78) !important; }
.text-white\/60 { color: rgba(255, 255, 255, 0.84) !important; }
.text-white\/70 { color: rgba(255, 255, 255, 0.9) !important; }
.text-white\/80 { color: rgba(255, 255, 255, 0.94) !important; }
.text-white\/90 { color: rgba(255, 255, 255, 0.98) !important; }

/* ---------- border / ring remap ---------- */
.border-gray-300 { border-color: #2a2f25 !important; }
.border-gray-200 { border-color: #23271f !important; }
.border-gray-100 { border-color: #1c2017 !important; }
.border-gray-500 { border-color: #3a4033 !important; }
.ring-gray-500 { --tw-ring-color: #4a5040 !important; }
.ring-gray-200 { --tw-ring-color: #23271f !important; }
.ring-gray-900 { --tw-ring-color: var(--qyro-bg) !important; }

/* ---------- loading bar ---------- */
.loadingbar .bar {
    background: var(--qyro-accent) !important;
    -webkit-box-shadow: 0px 4px 38px -15px var(--qyro-accent) !important;
    -moz-box-shadow: 0px 4px 38px -15px var(--qyro-accent) !important;
    box-shadow: 0px 4px 38px -15px var(--qyro-accent) !important;
}

/* ---------- internal scrollbars ---------- */
.shell-scroll {
    scrollbar-width: thin;
    scrollbar-color: #2a2f25 transparent;
}
.shell-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.shell-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.shell-scroll::-webkit-scrollbar-thumb {
    background: #2a2f25;
    border-radius: 8px;
}
.shell-scroll::-webkit-scrollbar-thumb:hover {
    background: #3a4033;
}

/* ---------- form controls: dark ---------- */
input, select, textarea {
    color-scheme: dark;
}

/* ============================================================
   AUTH / REGISTER / RESET PAGES — dark mode (light -> dark)
   ============================================================ */
body.bg-gray-100 {
    background-color: var(--qyro-bg) !important;
    color: var(--qyro-text) !important;
}
body.bg-gray-100 input,
body.bg-gray-100 input.bg-gray-200 {
    background-color: var(--qyro-panel) !important;
    border-color: #23271f !important;
    color: #e5e2d2 !important;
}
body.bg-gray-100 input::placeholder {
    color: #7d8372 !important;
}
body.bg-gray-100 .bg-gray-100 { background-color: #0d0f0a !important; }
body.bg-gray-100 .bg-gray-800 {
    background-color: var(--qyro-accent) !important;
    color: #050604 !important;
}
body.bg-gray-100 .hover\:bg-gray-700:hover {
    background-color: var(--qyro-accent-hover) !important;
}
body.bg-gray-100 .bg-white {
    background-color: var(--qyro-panel) !important;
    border-color: #23271f !important;
}
body.bg-gray-100 .text-gray-800,
body.bg-gray-100 h2,
body.bg-gray-100 h1 {
    color: var(--qyro-text-bright) !important;
}
body.bg-gray-100 .text-gray-700,
body.bg-gray-100 .text-gray-600,
body.bg-gray-100 .text-gray-500,
body.bg-gray-100 .text-gray-400 {
    color: var(--qyro-text) !important;
}
body.bg-gray-100 .border-gray-300,
body.bg-gray-100 .border-gray-200 {
    border-color: #23271f !important;
}
body.bg-gray-100 .text-indigo-600 {
    color: var(--qyro-accent) !important;
}
body.bg-gray-100 .hover\:text-indigo-800:hover {
    color: #7dd3fc !important;
}
body.bg-gray-100 .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.3) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}
body.bg-gray-100 .text-red-600 {
    color: #fca5a5 !important;
}