@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
    color-scheme: light;
    --play-canvas: #f3f3e9;
    --play-paper: #fffef8;
    --play-paper-2: #f8f8ef;
    --play-ink: #1b2d32;
    --play-muted: #66777a;
    --play-line: #d5ddd5;
    --play-cobalt: #365cf5;
    --play-lime: #d8f36a;
    --play-coral: #ff795f;
    --play-mint: #b9e9da;
    --play-deep: #17383c;
    --play-shadow: 0 12px 0 rgba(39, 66, 62, .07), 0 22px 44px rgba(42, 67, 62, .10);
    --play-small-shadow: 0 5px 0 rgba(39, 66, 62, .07), 0 11px 22px rgba(42, 67, 62, .08);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--play-canvas); scroll-behavior: smooth; }

body {
    position: relative;
    min-height: 100dvh;
    color: var(--play-ink) !important;
    background:
        radial-gradient(ellipse at 90% 0%, rgba(216, 243, 106, .22), transparent 29rem),
        radial-gradient(ellipse at 1% 26%, rgba(185, 233, 218, .29), transparent 34rem),
        var(--play-canvas) !important;
    font-family: "Outfit", "IBM Plex Mono", sans-serif !important;
    font-feature-settings: "ss01" on;
    -webkit-font-smoothing: antialiased;
}

body::before {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    z-index: 0 !important;
    opacity: .36;
    background-image:
        linear-gradient(rgba(47, 78, 73, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 78, 73, .055) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
}

body > * { position: relative; }
body > #loader,
body > #sidebar,
body > #overlay,
body > #notificationPanel { position: fixed; }

main,
footer,
header { z-index: 1; }

main {
    padding-top: clamp(2rem, 5vw, 3.75rem) !important;
    padding-bottom: clamp(3rem, 7vw, 5.5rem) !important;
}

main.loaded { transform: translateY(0) !important; }

h1, h2, h3, h4, h5, p { color: inherit; }
h1, h2, h3, h4 { letter-spacing: -.025em; }

code, pre, .font-mono {
    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace !important;
}

body [class~="bg-[#000000]"] { background-color: transparent !important; }
body [class~="text-premium"] { color: var(--play-ink) !important; }
body [class~="text-neutral-light"],
body [class~="text-gray-400"],
body [class~="text-gray-500"] { color: var(--play-muted) !important; }
body [class~="border-neutral-dark"] { border-color: var(--play-line) !important; }
body [class~="border-gray-800"] { border-color: var(--play-line) !important; }
body [class~="text-white"] { color: var(--play-ink) !important; }
body [class~="text-black"] { color: var(--play-ink) !important; }

.bg-gradient-premium {
    color: var(--play-ink) !important;
    background: linear-gradient(120deg, var(--play-lime), #f5d677 54%, var(--play-coral)) !important;
}
.text-premium-yellow,
.text-orange-400 { color: #bd642e !important; }
.text-green-400 { color: #257965 !important; }
.text-blue-400,
.text-purple-400 { color: var(--play-cobalt) !important; }
.text-red-400 { color: #c84d45 !important; }
.bg-green-900\/50 { background: #dff0d9 !important; color: #276b58 !important; }
.bg-green-500 { background-color: #51a982 !important; }
.bg-red-500 { background-color: var(--play-coral) !important; color: #fff !important; }

a, button, input, textarea { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(54, 92, 245, .38) !important;
    outline-offset: 3px;
}

.transition-all,
.transition-colors,
.transition-transform {
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease !important;
}

header {
    background: rgba(255, 254, 248, .88) !important;
    border-color: rgba(89, 116, 108, .2) !important;
    box-shadow: 0 1px 0 rgba(30, 62, 56, .04), 0 8px 24px rgba(41, 67, 61, .05) !important;
    backdrop-filter: blur(18px);
}
header > div { min-height: 2.4rem; }
header h1 {
    font-size: .95rem !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    color: var(--play-ink) !important;
}
header h1::before {
    content: "";
    display: inline-block;
    width: .72rem;
    height: .72rem;
    margin-right: .65rem;
    vertical-align: .02rem;
    border-radius: 4px 4px 4px 1px;
    background: var(--play-cobalt);
    box-shadow: 3px 3px 0 var(--play-lime);
    transform: rotate(-8deg);
}
header button {
    color: var(--play-ink) !important;
    border-radius: 12px;
}
header button:hover { transform: translateY(-2px); }
header .fa-bell { color: var(--play-ink) !important; }

#sidebar {
    color: #f5f5e9 !important;
    background: var(--play-deep) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 18px 0 46px rgba(16, 43, 44, .2) !important;
}
#sidebar h3,
#sidebar .text-white { color: #f6f5e9 !important; }
#sidebar > div:first-child { border-color: rgba(255,255,255,.15) !important; }
#sidebar a {
    margin: .15rem 0;
    padding: .7rem .8rem !important;
    border: 1px solid transparent;
    border-radius: 12px !important;
    color: #dcebe2 !important;
}
#sidebar a:hover {
    background: rgba(216, 243, 106, .13) !important;
    border-color: rgba(216, 243, 106, .24);
    color: var(--play-lime) !important;
    transform: translateX(3px);
}
#sidebar a .text-gray-400,
#sidebar button { color: #dcebe2 !important; }
#overlay { background: rgba(18, 43, 43, .42) !important; backdrop-filter: blur(3px); }

#notificationPanel {
    top: 4.4rem !important;
    right: clamp(.75rem, 2vw, 1.5rem) !important;
    width: min(22rem, calc(100vw - 1.5rem)) !important;
    color: var(--play-ink) !important;
    background: var(--play-paper) !important;
    border: 1px solid var(--play-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--play-shadow) !important;
}
#notificationPanel h4 { color: var(--play-ink) !important; }
#notificationPanel #clearNotifications { color: var(--play-cobalt) !important; }
.notification-item { border-color: var(--play-line) !important; }
.notification-item:hover { transform: translateX(3px); }
#notifBadge { box-shadow: 0 0 0 2px var(--play-paper); }

main > .text-center:first-child,
#introduction {
    position: relative;
}
#apiTitle,
#headerTitle,
#introduction h2,
main > .text-center h2,
main > .text-left h2 {
    color: var(--play-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 800 !important;
    letter-spacing: -.055em !important;
}
#apiTitle,
#introduction h2 { font-size: clamp(2rem, 5vw, 3.4rem) !important; line-height: 1.04 !important; }
#introduction h2 span { color: var(--play-cobalt); }
#headerImage {
    max-height: 20rem;
    object-fit: cover;
    border: 5px solid var(--play-paper) !important;
    border-radius: 25px !important;
    box-shadow: 10px 10px 0 var(--play-lime), var(--play-shadow);
    transform: rotate(-1.2deg);
}
#headerImage:hover { transform: rotate(0) translateY(-4px); }

/* Light, raised dashboard panels */
main [class~="border-neutral-dark"] {
    border-color: var(--play-line) !important;
}
main [class~="border-neutral-dark"][class~="bg-[#000000]"],
main > div[class~="border"],
#introduction > div[class~="border"],
#exampleEndpoint,
.api-item {
    color: var(--play-ink) !important;
    background: var(--play-paper) !important;
    border-color: var(--play-line) !important;
    box-shadow: var(--play-small-shadow) !important;
}
main > div[class~="border"],
#introduction > div[class~="border"],
#exampleEndpoint,
.api-item {
    border-radius: 18px !important;
}
main > div[class~="border"]:hover,
#introduction > div[class~="border"]:hover,
#exampleEndpoint:hover,
.api-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 rgba(39, 66, 62, .07), 0 24px 42px rgba(42, 67, 62, .13) !important;
}
main .rounded-lg,
main .rounded-md { border-radius: 12px; }
main h3, main h4, main h5 { color: var(--play-ink); }
main [class~="bg-gradient-premium"] { color: var(--play-ink) !important; }
main h2[class~="bg-gradient-premium"],
main h3[class~="bg-gradient-premium"] {
    color: var(--play-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Main intro card and action */
#introduction > div:first-of-type {
    padding: clamp(1.4rem, 4vw, 2.4rem) !important;
    border-radius: 22px !important;
}
#introduction p { line-height: 1.7; }
#introduction a[href="/docs"],
main a[href="/docs"] {
    color: var(--play-ink) !important;
    background: var(--play-cobalt) !important;
    border: 1px solid #2347d9 !important;
    border-radius: 13px !important;
    box-shadow: 0 5px 0 #203fbd, 0 12px 20px rgba(54, 92, 245, .2);
    font-weight: 700 !important;
    transform: translateY(0);
}
#introduction a[href="/docs"] { color: #fff !important; }
#introduction a[href="/docs"]:hover,
main a[href="/docs"]:hover { transform: translateY(-3px); }

/* Dashboard metrics: offset pastel tiles, rather than a row of identical cards */
main .grid > div[class~="border-neutral-dark"] {
    background: var(--play-paper) !important;
    border: 1px solid var(--play-line) !important;
    border-radius: 17px !important;
    box-shadow: 0 5px 0 rgba(39, 66, 62, .06), 0 12px 24px rgba(42, 67, 62, .08) !important;
}
main .grid > div:nth-child(4n + 1) { border-top: 4px solid var(--play-cobalt) !important; }
main .grid > div:nth-child(4n + 2) { border-top: 4px solid #6aae92 !important; }
main .grid > div:nth-child(4n + 3) { border-top: 4px solid var(--play-coral) !important; }
main .grid > div:nth-child(4n + 4) { border-top: 4px solid #d5b848 !important; }
main .grid > div:hover { transform: translateY(-4px) rotate(-.4deg); }
main .grid > div h3 {
    color: var(--play-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Search, parameter controls, and method selection */
#searchInput,
.api-item input[type="text"],
.api-item textarea,
.custom-dropdown > button {
    color: var(--play-ink) !important;
    background: #fffef8 !important;
    border: 1px solid #cbd7d0 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(24, 52, 47, .04);
}
#searchInput { min-height: 3.5rem; border-radius: 14px !important; }
#searchInput:focus,
.api-item input:focus,
.api-item textarea:focus,
.custom-dropdown > button:focus {
    border-color: var(--play-cobalt) !important;
    box-shadow: 0 0 0 4px rgba(54, 92, 245, .12) !important;
}
input::placeholder,
textarea::placeholder { color: #879392 !important; opacity: 1; }
.custom-dropdown .dropdown-options {
    color: var(--play-ink) !important;
    background: var(--play-paper) !important;
    border-color: var(--play-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--play-shadow) !important;
}
.custom-dropdown .dropdown-options button {
    color: var(--play-ink) !important;
    text-align: left;
}
.custom-dropdown .dropdown-options button:hover { background: #eef4dc !important; }
.tab-container { border-color: var(--play-line) !important; }
.tab-container button,
#languageSelector button,
.endpoint-tab {
    color: var(--play-muted) !important;
    border-radius: 8px 8px 0 0;
}
.tab-container button.text-white,
.endpoint-tab.text-white,
#languageSelector button.active-lang {
    color: var(--play-cobalt) !important;
    font-weight: 700 !important;
}
.tab-indicator { height: 3px !important; background: var(--play-cobalt) !important; border-radius: 3px 3px 0 0; }
.api-item > button:first-child { color: var(--play-ink); }
.api-item > button:first-child:hover > div:first-child { background: #f4f6ed !important; }
.api-item > button:first-child > div:first-child { border-radius: 16px 16px 0 0; }
.api-item > button:first-child span[class*="bg-gradient-premium"] {
    color: var(--play-ink) !important;
    border-radius: 8px !important;
}
.api-item .text-red-400 { color: #c84d45 !important; }
.api-item form label { display: block; margin-bottom: .25rem; color: var(--play-ink) !important; font-weight: 600; }
.api-item form [class~="text-xs"] { line-height: 1.5; }
.api-item .method-content,
.api-item #response-content-0 { min-width: 0; }
.api-item button[type="submit"] {
    color: #fff !important;
    background: var(--play-cobalt) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 0 #2444c7;
    font-weight: 700 !important;
}
.api-item button[type="submit"]:hover { transform: translateY(-2px); }
.api-item button[type="button"]:not(.custom-dropdown button) { cursor: pointer; }
.api-item button[id^="clear-"] {
    color: var(--play-ink) !important;
    background: var(--play-paper-2) !important;
    border-color: var(--play-line) !important;
}
.api-item button:hover,
footer a:hover { transform: translateY(-2px); }

/* Request / response / cURL workbench surfaces */
.api-item [class*="border-neutral-dark"][class*="text-xs"],
#exampleContent [class*="border-neutral-dark"] {
    border-color: var(--play-line) !important;
}
.api-item form > div[class*="border-neutral-dark"],
.api-item #response-content-0,
.api-item #curl-content-0 { border-radius: 12px; }
.api-item pre,
#exampleEndpoint pre,
main pre {
    overflow-x: auto;
    padding: .95rem 1rem !important;
    color: #dcebe2 !important;
    background: #17383c !important;
    border: 1px solid rgba(23, 56, 60, .2);
    border-radius: 12px;
    line-height: 1.7;
    tab-size: 2;
}
.api-item pre code,
#exampleEndpoint pre code,
main pre code { color: #e7f2d9 !important; }
pre code.hljs { padding: 0 !important; background: transparent !important; }
.api-item #response-content-0 pre { margin: 0; }
.api-item .tab-indicator { bottom: 0; }
.api-item .text-neutral-light { color: var(--play-muted) !important; }

/* Home / docs supporting content */
#apiStatus { color: #276b58 !important; }
#baseUrl,
#userAgentText { color: var(--play-ink) !important; overflow-wrap: anywhere; }
#exampleContent h4 { color: var(--play-ink) !important; }
#exampleContent code:not(pre code) {
    color: #284dc4 !important;
    background: #edf0ff !important;
}
#exampleContent [class~="space-y-4"] > div {
    padding: .9rem;
    border-radius: 11px;
    background: #f3f6eb;
}

footer {
    color: var(--play-ink) !important;
    background: rgba(255, 254, 248, .78) !important;
    border-color: var(--play-line) !important;
}
footer h3 { color: var(--play-ink) !important; }
footer a {
    color: var(--play-deep) !important;
    background: var(--play-mint) !important;
    border-radius: 11px !important;
}
footer a:hover { background: var(--play-lime) !important; }
footer [class~="text-gray-500"] { color: var(--play-muted) !important; }

/* Error states stay playful without undermining urgency or legibility */
main > .text-center h2.text-6xl {
    display: inline-block;
    padding: .08em .24em .16em;
    color: var(--play-cobalt) !important;
    background: var(--play-lime) !important;
    -webkit-text-fill-color: currentColor !important;
    border: 1px solid #c5d955;
    border-radius: 24px;
    box-shadow: 8px 8px 0 rgba(54, 92, 245, .13), 0 16px 30px rgba(42, 67, 62, .1);
    transform: rotate(-3deg);
}
main > .text-center p.text-2xl { color: var(--play-ink) !important; }
main > .text-center + div[class~="border"] {
    padding: clamp(1.25rem, 4vw, 2rem) !important;
}
main > .text-center + div ul { line-height: 1.8; }
main > .text-center + div[class~="border"] + .text-center a {
    color: #fff !important;
    background: var(--play-cobalt) !important;
    box-shadow: 0 5px 0 #2344c7, 0 12px 22px rgba(54, 92, 245, .2);
    border: 1px solid #2344c7;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

#loader {
    color: var(--play-ink) !important;
    background: var(--play-canvas) !important;
}
.loader-spinner {
    border-color: var(--play-line) !important;
    border-top-color: var(--play-cobalt) !important;
}
.loading-text { color: var(--play-ink) !important; font-weight: 700 !important; }

@media (min-width: 1024px) {
    #sidebar { box-shadow: 10px 0 30px rgba(16, 43, 44, .1) !important; }
}

@media (max-width: 767px) {
    main { padding-left: 1rem !important; padding-right: 1rem !important; }
    header { padding-top: .75rem !important; padding-bottom: .75rem !important; }
    #apiTitle { font-size: 2.15rem !important; }
    .api-item > button:first-child > div:first-child { padding-left: 1rem !important; padding-right: 1rem !important; }
    .api-item > button:first-child > div:nth-child(3) { padding-left: 1rem !important; padding-right: 1rem !important; }
    .api-item > div[id^="endpoint-"] { padding-left: 1rem !important; padding-right: 1rem !important; }
    .api-item pre { font-size: .7rem !important; }
    footer > div { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    main { transform: none !important; }
}