:root {
    color-scheme: dark;
    --afa-ink: #08010f;
    --afa-ink-soft: #10051a;
    --afa-plum: #1b0a25;
    --afa-purple: #8b1bb4;
    --afa-magenta: #f0048a;
    --afa-orange: #ff7a1a;
    --afa-gold: #ffd51f;
    --afa-text: #fff7fd;
    --afa-text-soft: #d5c6dd;
    --afa-text-muted: #a997b3;
    --afa-surface: rgba(27, 10, 37, 0.82);
    --afa-surface-strong: rgba(20, 7, 30, 0.94);
    --afa-surface-soft: rgba(45, 17, 58, 0.56);
    --afa-border: rgba(231, 186, 255, 0.14);
    --afa-border-hot: rgba(240, 4, 138, 0.3);
}

html {
    scroll-behavior: smooth;
}

body.afa-page-bg {
    min-height: 100vh;
    color: var(--afa-text);
    --tw-ring-offset-color: var(--afa-ink);
    background:
        radial-gradient(circle at 8% 6%, rgba(240, 4, 138, 0.2), transparent 34rem),
        radial-gradient(circle at 92% 14%, rgba(139, 27, 180, 0.14), transparent 32rem),
        radial-gradient(circle at 64% 86%, rgba(255, 122, 26, 0.08), transparent 32rem),
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 0 1px, transparent 1.2px),
        linear-gradient(145deg, #0d0115 0%, #08010f 48%, #10031a 100%);
    background-size: auto, auto, auto, 44px 44px, auto;
    background-attachment: fixed;
}

.afa-site-header {
    background: rgba(9, 2, 16, 0.82);
    border-color: var(--afa-border);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.32);
}

.afa-admin-header {
    background: rgba(12, 3, 20, 0.9);
    border-color: var(--afa-border);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.afa-surface {
    background: var(--afa-surface);
    border-color: var(--afa-border);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
}

.afa-logo {
    display: block;
    border-radius: 9999px;
    filter: drop-shadow(0 12px 28px rgba(240, 4, 138, 0.18));
}

.afa-brand-name {
    background: linear-gradient(90deg, #ff5eb8, var(--afa-magenta) 35%, var(--afa-orange) 68%, var(--afa-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.afa-inline-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.afa-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.afa-icon-sm {
    width: 0.9rem;
    height: 0.9rem;
}

.afa-icon-lg {
    width: 1.5rem;
    height: 1.5rem;
}

.afa-icon-xl {
    width: 2rem;
    height: 2rem;
}

.afa-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dark cosmic surface system. Tailwind utility атаулары функционалдық
   шаблондарда сақталады, ал визуал осы қабатта бірізді түрде ауысады. */
body.afa-page-bg [class~="bg-white"] {
    background-color: var(--afa-surface) !important;
    border-color: var(--afa-border) !important;
    backdrop-filter: blur(16px);
}

body.afa-page-bg main [class~="rounded-2xl"][class~="bg-white"] {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

body.afa-page-bg [class~="bg-slate-50"],
body.afa-page-bg [class~="bg-slate-100"] {
    background-color: var(--afa-surface-soft) !important;
}

body.afa-page-bg [class~="bg-slate-200"] {
    background-color: rgba(104, 72, 120, 0.38) !important;
}

body.afa-page-bg [class~="bg-brand-purpledark"] {
    background-color: #24102e;
}

body.afa-page-bg [class~="border-slate-100"],
body.afa-page-bg [class~="border-slate-200"],
body.afa-page-bg [class~="border-slate-300"],
body.afa-page-bg [class~="divide-slate-100"] {
    border-color: var(--afa-border) !important;
}

body.afa-page-bg [class~="divide-slate-100"] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--afa-border) !important;
}

body.afa-page-bg [class~="text-slate-900"],
body.afa-page-bg [class~="text-slate-800"],
body.afa-page-bg [class~="text-slate-700"] {
    color: var(--afa-text) !important;
}

body.afa-page-bg [class~="text-slate-600"] {
    color: var(--afa-text-soft) !important;
}

body.afa-page-bg [class~="text-slate-500"] {
    color: #bbaac5 !important;
}

body.afa-page-bg [class~="text-slate-400"] {
    color: #917f9d !important;
}

body.afa-page-bg [class~="text-slate-300"] {
    color: #d7c9df !important;
}

body.afa-page-bg [class~="text-brand-purple"] {
    color: #d989ff;
}

body.afa-page-bg [class~="text-red-700"] {
    color: #ff9cad !important;
}

body.afa-page-bg [class~="text-emerald-800"],
body.afa-page-bg [class~="text-emerald-700"],
body.afa-page-bg [class~="text-emerald-600"] {
    color: #6ee7b7 !important;
}

body.afa-page-bg [class~="text-amber-700"],
body.afa-page-bg [class~="text-amber-600"] {
    color: #fcd34d !important;
}

body.afa-page-bg [class~="text-orange-700"] {
    color: #fdba74 !important;
}

body.afa-page-bg [class~="text-sky-700"],
body.afa-page-bg [class~="text-sky-600"] {
    color: #7dd3fc !important;
}

body.afa-page-bg [class~="text-violet-700"],
body.afa-page-bg [class~="text-violet-600"] {
    color: #c4b5fd !important;
}

body.afa-page-bg [class~="shadow"],
body.afa-page-bg [class~="shadow-sm"],
body.afa-page-bg [class~="shadow-md"],
body.afa-page-bg [class~="shadow-lg"],
body.afa-page-bg [class~="shadow-xl"] {
    --tw-shadow-color: rgba(0, 0, 0, 0.3) !important;
}

body.afa-page-bg main section:not(:first-child) {
    position: relative;
}

body.afa-page-bg article,
body.afa-page-bg main [class~="rounded-2xl"][class~="border"] {
    border-color: var(--afa-border) !important;
}

body.afa-page-bg article:hover,
body.afa-page-bg main [class~="rounded-2xl"][class~="border"]:hover {
    border-color: var(--afa-border-hot) !important;
}

body.afa-page-bg input:not([type="checkbox"]):not([type="radio"]),
body.afa-page-bg select,
body.afa-page-bg textarea {
    color: var(--afa-text);
    background-color: rgba(8, 1, 15, 0.7) !important;
    border-color: rgba(226, 181, 246, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.afa-page-bg input::placeholder,
body.afa-page-bg textarea::placeholder {
    color: #776684;
}

body.afa-page-bg input:disabled,
body.afa-page-bg select:disabled,
body.afa-page-bg textarea:disabled {
    color: #776684 !important;
    background-color: rgba(58, 38, 69, 0.44) !important;
}

body.afa-page-bg select option,
body.afa-page-bg select optgroup {
    color: var(--afa-text);
    background: #14071e;
}

body.afa-page-bg input:-webkit-autofill,
body.afa-page-bg input:-webkit-autofill:hover,
body.afa-page-bg input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--afa-text);
    -webkit-box-shadow: 0 0 0 1000px #12061c inset;
    transition: background-color 9999s ease-out 0s;
}

body.afa-page-bg table thead,
body.afa-page-bg table tbody,
body.afa-page-bg table tr,
body.afa-page-bg table td,
body.afa-page-bg table th {
    border-color: var(--afa-border) !important;
}

body.afa-page-bg table tbody tr:hover {
    background: rgba(240, 4, 138, 0.05);
}

body.afa-page-bg [class~="bg-emerald-50"],
body.afa-page-bg [class~="bg-emerald-100"] {
    background-color: rgba(16, 185, 129, 0.14) !important;
}

body.afa-page-bg [class~="bg-red-50"],
body.afa-page-bg [class~="bg-red-100"] {
    background-color: rgba(244, 63, 94, 0.14) !important;
}

body.afa-page-bg [class~="bg-amber-50"],
body.afa-page-bg [class~="bg-amber-100"],
body.afa-page-bg [class~="bg-orange-100"] {
    background-color: rgba(245, 158, 11, 0.14) !important;
}

body.afa-page-bg [class~="bg-sky-100"] {
    background-color: rgba(14, 165, 233, 0.14) !important;
}

body.afa-page-bg [class~="bg-violet-100"] {
    background-color: rgba(139, 92, 246, 0.16) !important;
}

body.afa-page-bg .prose-content {
    color: var(--afa-text-soft) !important;
}

body.afa-page-bg .prose-content :where(h1, h2, h3, h4, strong) {
    color: var(--afa-text);
}

body.afa-page-bg footer {
    background:
        radial-gradient(circle at 20% 0%, rgba(240, 4, 138, 0.13), transparent 24rem),
        #06010b !important;
    border-top: 1px solid var(--afa-border);
}

body.afa-page-bg aside[class*="bg-brand-purpledark"] {
    background:
        radial-gradient(circle at 20% 0%, rgba(240, 4, 138, 0.18), transparent 18rem),
        linear-gradient(180deg, #16051f, #090110) !important;
    border-right: 1px solid var(--afa-border);
}

body.afa-page-bg ::selection {
    color: white;
    background: rgba(240, 4, 138, 0.65);
}

body.afa-page-bg::-webkit-scrollbar {
    width: 11px;
}

body.afa-page-bg::-webkit-scrollbar-track {
    background: var(--afa-ink);
}

body.afa-page-bg::-webkit-scrollbar-thumb {
    background: #4f1a61;
    border: 3px solid var(--afa-ink);
    border-radius: 999px;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(240, 4, 138, 0.42);
    outline-offset: 2px;
}

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