/* Liquid Glass UI layer for cv1.zip
   Content and portfolio data are intentionally kept in the original HTML. */
:root {
    color-scheme: light;
    --lg-canvas: #f5f5f7;
    --lg-canvas-2: #fbfbfd;
    --lg-text: #1d1d1f;
    --lg-text-soft: #424245;
    --lg-muted: #6e6e73;
    --lg-muted-2: #86868b;
    --lg-line: rgba(0, 0, 0, 0.08);
    --lg-line-strong: rgba(0, 0, 0, 0.14);
    --lg-surface: rgba(255, 255, 255, 0.62);
    --lg-surface-strong: rgba(255, 255, 255, 0.82);
    --lg-surface-soft: rgba(255, 255, 255, 0.38);
    --lg-glass-edge: rgba(255, 255, 255, 0.78);
    --lg-accent: #f59e0b;
    --lg-accent-2: #ffb84d;
    --lg-accent-soft: rgba(245, 158, 11, 0.14);
    --lg-blue: #007aff;
    --lg-footer: #111827;
    --lg-blur: 30px;
    --lg-saturate: 1.65;
    --lg-shadow: 0 24px 80px rgba(30, 33, 43, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --lg-shadow-soft: 0 14px 44px rgba(30, 33, 43, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.68);
    --lg-shadow-hover: 0 34px 100px rgba(30, 33, 43, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --lg-radius: 28px;
    --lg-radius-lg: 40px;
    --lg-ease: cubic-bezier(.22, .8, .28, 1);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --lg-canvas: #08090c;
    --lg-canvas-2: #111318;
    --lg-text: #f5f5f7;
    --lg-text-soft: rgba(245, 245, 247, 0.78);
    --lg-muted: rgba(245, 245, 247, 0.62);
    --lg-muted-2: rgba(245, 245, 247, 0.46);
    --lg-line: rgba(255, 255, 255, 0.10);
    --lg-line-strong: rgba(255, 255, 255, 0.18);
    --lg-surface: rgba(26, 29, 36, 0.58);
    --lg-surface-strong: rgba(26, 29, 36, 0.76);
    --lg-surface-soft: rgba(255, 255, 255, 0.06);
    --lg-glass-edge: rgba(255, 255, 255, 0.16);
    --lg-accent-soft: rgba(245, 158, 11, 0.18);
    --lg-footer: #050507;
    --lg-shadow: 0 28px 90px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --lg-shadow-soft: 0 18px 56px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --lg-shadow-hover: 0 38px 110px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html { background: var(--lg-canvas); scroll-padding-top: 92px; }
body.bg-light {
    background:
        radial-gradient(circle at 14% 4%, rgba(245, 158, 11, .18), transparent 30rem),
        radial-gradient(circle at 86% 2%, rgba(0, 122, 255, .13), transparent 34rem),
        radial-gradient(circle at 56% 40%, rgba(255,255,255,.86), transparent 24rem),
        linear-gradient(180deg, var(--lg-canvas) 0%, var(--lg-canvas-2) 46%, var(--lg-canvas) 100%) !important;
    color: var(--lg-text) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
html[data-theme="dark"] body.bg-light {
    background:
        radial-gradient(circle at 12% 4%, rgba(245, 158, 11, .14), transparent 28rem),
        radial-gradient(circle at 86% 2%, rgba(0, 122, 255, .14), transparent 32rem),
        radial-gradient(circle at 62% 46%, rgba(255,255,255,.055), transparent 22rem),
        linear-gradient(180deg, #07080b 0%, #101217 48%, #08090c 100%) !important;
}
body::before,
body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -2;
    filter: blur(14px);
    opacity: .78;
}
body::before {
    width: min(42vw, 640px);
    height: min(42vw, 640px);
    right: -14vw;
    top: -12vw;
    border-radius: 46% 54% 48% 52%;
    background: radial-gradient(circle at 36% 34%, rgba(255,255,255,.95), rgba(255,184,77,.28) 36%, rgba(0,122,255,.12) 64%, transparent 78%);
}
body::after {
    width: min(34vw, 520px);
    height: min(34vw, 520px);
    left: -12vw;
    top: 38vh;
    border-radius: 58% 42% 56% 44%;
    background: radial-gradient(circle at 62% 38%, rgba(255,255,255,.88), rgba(174,214,255,.22) 42%, rgba(245,158,11,.12) 70%, transparent 80%);
}
html[data-theme="dark"] body::before {
    background: radial-gradient(circle at 36% 34%, rgba(255,255,255,.08), rgba(255,184,77,.16) 36%, rgba(0,122,255,.12) 64%, transparent 78%);
}
html[data-theme="dark"] body::after {
    background: radial-gradient(circle at 62% 38%, rgba(255,255,255,.05), rgba(174,214,255,.12) 42%, rgba(245,158,11,.10) 70%, transparent 80%);
}

/* Core text and palette overrides */
.text-primary, .highlight { color: var(--lg-text) !important; }
.text-dark { color: var(--lg-text) !important; }
.text-gray-700 { color: var(--lg-text-soft) !important; }
.text-gray-600 { color: var(--lg-text-soft) !important; }
.text-gray-500, .text-gray-400 { color: var(--lg-muted) !important; }
.border-gray-200, .border-gray-100, .border-gray-50 { border-color: var(--lg-line) !important; }
.bg-light { background-color: transparent !important; }
.bg-white { background-color: var(--lg-surface-strong) !important; }
.bg-gray-50, .bg-gray-100, [class*="bg-gray-50"], [class*="bg-gray-100"] { background-color: var(--lg-surface-soft) !important; }
[class*="border-gray-"] { border-color: var(--lg-line) !important; }
.bg-primary { background-color: var(--lg-footer) !important; }
.text-accent { color: var(--lg-accent) !important; }
.bg-accent { background-color: var(--lg-accent) !important; }
.selection\:bg-accent::selection { background: rgba(245, 158, 11, .24) !important; color: var(--lg-text) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(0,0,0,.12));
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); border: 3px solid transparent; background-clip: padding-box; }

/* Loader */
.loader-screen {
    background:
        radial-gradient(circle at 52% 46%, rgba(245, 158, 11, .18), transparent 28rem),
        var(--lg-canvas) !important;
    transition: opacity .55s var(--lg-ease), visibility .55s var(--lg-ease);
}
.loader-screen > div {
    letter-spacing: -0.085em !important;
    background-image: linear-gradient(120deg, var(--lg-text) 0%, var(--lg-muted) 38%, var(--lg-accent) 72%, var(--lg-accent-2) 100%) !important;
    filter: drop-shadow(0 22px 60px rgba(245,158,11,.20));
}

/* Navigation */
#navbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#navbar > div {
    transition: all .32s var(--lg-ease);
}
#navbar.bg-glass-dark {
    background: linear-gradient(180deg, var(--lg-surface-strong), var(--lg-surface)) !important;
    border-bottom: 1px solid var(--lg-glass-edge);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    box-shadow: var(--lg-shadow-soft);
}
#navbar.bg-glass-dark::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
    opacity: .68;
}
html[data-theme="dark"] #navbar.bg-glass-dark::before { opacity: .18; }
#navbar.bg-glass-dark .text-white,
#navbar.bg-glass-dark .text-gray-300,
#navbar.bg-glass-dark .text-gray-400,
#navbar.bg-glass-dark a,
#navbar.bg-glass-dark button { color: var(--lg-text) !important; }
#navbar.bg-glass-dark .text-accent,
#navbar.bg-glass-dark span.text-accent { color: var(--lg-accent) !important; }
#navbar .bg-linkedin {
    background: rgba(0, 119, 181, .88) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 10px 28px rgba(0, 119, 181, .20), inset 0 1px 0 rgba(255,255,255,.26) !important;
}
#navbar.bg-glass-dark .bg-linkedin { color: #fff !important; }
#navbar [x-show="mobileMenuOpen"] {
    background: linear-gradient(180deg, var(--lg-surface-strong), var(--lg-surface)) !important;
    border: 1px solid var(--lg-glass-edge) !important;
    border-top: 0 !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    box-shadow: var(--lg-shadow) !important;
}
#navbar [x-show="mobileMenuOpen"] a { color: var(--lg-text) !important; }
#navbar [x-show="mobileMenuOpen"] a.bg-linkedin { color: #fff !important; }

.theme-toggle {
    position: relative;
    width: 50px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    padding: 0;
    color: #fff;
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 28px rgba(0,0,0,.12);
    transition: all .28s var(--lg-ease);
    overflow: hidden;
}
.theme-toggle::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.95);
    transition: transform .28s var(--lg-ease), background .28s var(--lg-ease);
}
.theme-toggle__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    transition: opacity .22s var(--lg-ease), transform .28s var(--lg-ease), color .28s var(--lg-ease);
}
.theme-toggle__sun { left: 8px; color: #b36b00; opacity: 1; }
.theme-toggle__moon { right: 8px; color: rgba(255,255,255,.72); opacity: .76; }
#navbar.bg-glass-dark .theme-toggle {
    color: var(--lg-text);
    background: var(--lg-surface);
    border-color: var(--lg-glass-edge);
}
html[data-theme="dark"] .theme-toggle {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
}
html[data-theme="dark"] .theme-toggle::before {
    transform: translateX(18px);
    background: rgba(35, 38, 46, .95);
}
html[data-theme="dark"] .theme-toggle__sun { opacity: .52; color: rgba(255,255,255,.46); }
html[data-theme="dark"] .theme-toggle__moon { opacity: 1; color: #fff; }

/* Hero */
section.h-\[100dvh\] { isolation: isolate; }
section.h-\[100dvh\] .absolute.inset-0.bg-black\/60 {
    background:
        linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 46%, rgba(0,0,0,.62) 100%),
        radial-gradient(circle at 50% 25%, rgba(255,255,255,.16), transparent 26rem) !important;
}
section.h-\[100dvh\] video { filter: saturate(1.05) contrast(1.03); }
.hero-anim.inline-flex {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.30) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 18px 54px rgba(0,0,0,.18);
}
.hero-anim a,
.hero-anim.inline-flex + h1,
section.h-\[100dvh\] h1 { text-shadow: 0 24px 70px rgba(0,0,0,.34); }
section.h-\[100dvh\] a[href="#about"] {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.34) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 50px rgba(0,0,0,.18);
}
section.h-\[100dvh\] a[href="#works"] {
    background: rgba(255,255,255,.88) !important;
    color: #111827 !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.55);
    backdrop-filter: blur(22px) saturate(1.55);
    box-shadow: 0 18px 54px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
section.h-\[100dvh\] .bg-gradient-to-t {
    background: linear-gradient(to top, var(--lg-canvas), rgba(245,245,247,0)) !important;
}
html[data-theme="dark"] section.h-\[100dvh\] .bg-gradient-to-t {
    background: linear-gradient(to top, #07080b, rgba(7,8,11,0)) !important;
}

/* Logo strip */
main > div.w-full.bg-light {
    background: transparent !important;
    border-color: var(--lg-line) !important;
}
main > div.w-full.bg-light .max-w-7xl {
    border: 1px solid var(--lg-glass-edge);
    background: linear-gradient(180deg, var(--lg-surface-strong), var(--lg-surface));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-soft);
    padding-top: 24px;
    padding-bottom: 24px;
}
html[data-theme="dark"] main > div.w-full.bg-light img { filter: grayscale(1) brightness(1.8); opacity: .74; }

/* About and skills */
#about { position: relative; }
#about::before {
    content: "";
    position: absolute;
    inset: 3rem 1rem auto;
    height: 54%;
    pointer-events: none;
    border-radius: 60px;
    background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.70), transparent 24rem), radial-gradient(circle at 80% 14%, rgba(0,122,255,.08), transparent 28rem);
    filter: blur(2px);
    opacity: .65;
    z-index: -1;
}
html[data-theme="dark"] #about::before { background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.06), transparent 24rem), radial-gradient(circle at 80% 14%, rgba(0,122,255,.12), transparent 28rem); opacity: 1; }
#about [class*="rounded-[1.5rem]"],
#about .rounded-lg,
#about .rounded-xl {
    border-color: var(--lg-glass-edge) !important;
    background: linear-gradient(180deg, var(--lg-surface-strong), var(--lg-surface)) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    box-shadow: var(--lg-shadow-soft) !important;
}
#about .rounded-lg:hover,
#about .rounded-xl:hover {
    transform: translateY(-2px);
    box-shadow: var(--lg-shadow) !important;
}
#about .rounded-full.overflow-hidden {
    border-color: rgba(255,255,255,.86) !important;
    box-shadow: 0 18px 54px rgba(30,33,43,.14), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
html[data-theme="dark"] #about .rounded-full.overflow-hidden { border-color: rgba(255,255,255,.16) !important; }
#about span[class*="bg-white"] {
    background: rgba(255,255,255,.56) !important;
    border-color: var(--lg-line) !important;
}
html[data-theme="dark"] #about span[class*="bg-white"] { background: rgba(255,255,255,.08) !important; }

/* Works */
#works {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18)),
        radial-gradient(circle at 82% 12%, rgba(245,158,11,.10), transparent 30rem) !important;
    border-color: var(--lg-line) !important;
}
html[data-theme="dark"] #works {
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
        radial-gradient(circle at 82% 12%, rgba(245,158,11,.11), transparent 30rem) !important;
}
#works .inline-block {
    background: var(--lg-accent-soft) !important;
    color: var(--lg-accent) !important;
    border: 1px solid rgba(245,158,11,.16);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
}
#works .grid > div {
    border: 1px solid var(--lg-glass-edge) !important;
    box-shadow: var(--lg-shadow-soft) !important;
    transform: translateZ(0);
    will-change: transform;
}
#works .grid > div::before {
    content: "";
    position: absolute;
    inset: 1px 18px auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
    opacity: .72;
    z-index: 3;
    pointer-events: none;
}
#works .grid > div:hover {
    box-shadow: var(--lg-shadow-hover) !important;
}
#works .grid > div:last-child {
    background: linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,255,255,.24)), radial-gradient(circle at 45% 24%, rgba(245,158,11,.20), transparent 16rem) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
}
html[data-theme="dark"] #works .grid > div:last-child {
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.04)), radial-gradient(circle at 45% 24%, rgba(245,158,11,.18), transparent 16rem) !important;
}
#works .bg-gradient-to-t {
    background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.20), rgba(255,255,255,.04)) !important;
}
#works .absolute.top-4.right-4,
#works [class*="backdrop-blur-md"] {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.24);
    -webkit-backdrop-filter: blur(20px) saturate(1.45);
    backdrop-filter: blur(20px) saturate(1.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 36px rgba(0,0,0,.18);
}

/* Footer */
footer#contact {
    background:
        radial-gradient(circle at 82% 0%, rgba(245,158,11,.22), transparent 30rem),
        radial-gradient(circle at 16% 42%, rgba(0,122,255,.14), transparent 32rem),
        linear-gradient(180deg, #111827, #06070a) !important;
}
html[data-theme="dark"] footer#contact {
    background:
        radial-gradient(circle at 82% 0%, rgba(245,158,11,.16), transparent 30rem),
        radial-gradient(circle at 16% 42%, rgba(0,122,255,.12), transparent 32rem),
        linear-gradient(180deg, #050507, #020203) !important;
}
footer#contact button {
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
    backdrop-filter: blur(18px) saturate(1.45);
}
footer#contact button:first-child {
    background: rgba(255,255,255,.86) !important;
    color: #111827 !important;
    box-shadow: 0 18px 54px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
footer#contact .border-t { border-color: rgba(255,255,255,.10) !important; }

/* Modal */
[role="dialog"] [class*="bg-dark/90"] {
    background: rgba(8, 9, 12, .68) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    backdrop-filter: blur(22px) saturate(1.35);
}
[role="dialog"] > div.relative {
    border: 1px solid var(--lg-glass-edge) !important;
    background: linear-gradient(180deg, var(--lg-surface-strong), var(--lg-surface)) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    box-shadow: 0 44px 140px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.76) !important;
}
html[data-theme="dark"] [role="dialog"] > div.relative { box-shadow: 0 44px 140px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.14) !important; }
[role="dialog"] .bg-white,
[role="dialog"] .bg-gray-50,
[role="dialog"] .bg-gray-100 {
    background: var(--lg-surface) !important;
    border-color: var(--lg-line) !important;
}
[role="dialog"] button.bg-black\/50,
[role="dialog"] button.md\:bg-white\/90,
[role="dialog"] button.bg-white\/80 {
    background: rgba(255,255,255,.72) !important;
    color: #111827 !important;
    border: 1px solid rgba(255,255,255,.62);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 14px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-theme="dark"] [role="dialog"] button.bg-black\/50,
html[data-theme="dark"] [role="dialog"] button.md\:bg-white\/90,
html[data-theme="dark"] [role="dialog"] button.bg-white\/80 {
    background: rgba(26,29,36,.74) !important;
    color: #f5f5f7 !important;
    border-color: rgba(255,255,255,.16);
}
[role="dialog"] .custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(245,158,11,.38) transparent; }
[role="dialog"] .rounded-xl,
[role="dialog"] .rounded {
    background: var(--lg-surface-soft) !important;
    border-color: var(--lg-line) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
}
[role="dialog"] .border-t { border-color: var(--lg-line) !important; }
[role="dialog"] .bg-black\/20 {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.28);
}
html[data-theme="dark"] [role="dialog"] .bg-black\/20 { background: rgba(0,0,0,.28) !important; }

/* Utility polish */
a, button, .transition-all, .transition-colors, .transition-transform, #works .grid > div {
    transition-timing-function: var(--lg-ease) !important;
}
button, a { -webkit-tap-highlight-color: transparent; }
.shadow-lg, .shadow-xl, .shadow-2xl, .shadow-md { box-shadow: var(--lg-shadow-soft) !important; }
.prose { color: var(--lg-text-soft) !important; }

@media (max-width: 768px) {
    html { scroll-padding-top: 78px; }
    #navbar.bg-glass-dark { border-radius: 0 0 26px 26px; }
    #navbar > div { padding-left: 18px !important; padding-right: 18px !important; }
    .theme-toggle { width: 46px; height: 30px; }
    .theme-toggle::before { width: 22px; height: 22px; }
    html[data-theme="dark"] .theme-toggle::before { transform: translateX(17px); }
    main > div.w-full.bg-light .max-w-7xl { border-radius: 28px; }
    #about::before { inset: 2rem .75rem auto; border-radius: 34px; }
    [role="dialog"] > div.relative { border-radius: 28px 28px 0 0 !important; }
}

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


/* Theme state helpers */
html.theme-light, body.theme-light { color-scheme: light; }
html.theme-dark, body.theme-dark { color-scheme: dark; }
html[data-theme="dark"] .text-white { color: var(--lg-text) !important; }
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-white\/70,
html[data-theme="dark"] .bg-white\/60 { background-color: rgba(26, 29, 36, 0.78) !important; }
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-xl,
html[data-theme="dark"] .shadow-2xl { box-shadow: var(--lg-shadow-soft) !important; }