/* -- QUANTUM RINGS THEME PALETTE (Shibuya Overrides) -- */
:root {
    /* Brand Colors */
    --qr-gray-deep: #080808;
    /* Deepest background */
    --qr-gray-mid: #303030;
    /* Sidebar/Cards */
    --qr-cyan: #00f0ff;
    /* Electric Cyan */
    --qr-green: #00ff9d;
    /* Neon Green */
    --qr-text: #e2e8f0;
    /* Off-white text */

    /* Default (Light Mode) Overrides */
    --sy-c-brand: var(--qr-green);
    --sy-c-link: #059669;
    /* Darker green for readability on white bg */
}

/* Dark Mode (The Primary Quantum Look) */
html.dark {
    --qr-gray-mid: #151515;

    /* Backgrounds */
    --sy-c-bg: var(--qr-gray-deep);
    --sy-s-sidebar-bg: var(--qr-gray-mid);
    --sy-c-bg-weak: var(--qr-gray-mid);

    /* Text */
    --sy-c-text: var(--qr-text);
    --sy-c-heading: #ffffff;
    --sy-c-text-weak: #94a3b8;

    /* Accents & Links */
    --sy-c-brand: var(--qr-green);
    --sy-c-link: var(--qr-green);
}

/* Header Bar Always Dark (Overrides Light Mode Header) */
html:not(.dark) .sy-head {
    /* Set variables for inheritance */
    --sy-c-bg: var(--qr-gray-deep);
    /* Or if your theme version uses this variable name: --sy-c-background: var(--qr-gray-deep); */
    --sy-s-sidebar-bg: var(--qr-gray-mid);
    --sy-c-bg-weak: var(--qr-gray-mid);

    /* Text */
    color: var(--qr-text);
    --sy-c-text: var(--qr-text);
    --sy-c-text-weak: #94a3b8;
}

/* Directly target background elements for reliability */
html:not(.dark) .sy-head-nav {
    background-color: var(--qr-gray-deep) !important;
}

html:not(.dark) .sy-head-blur {
    background-color: var(--qr-gray-deep) !important;
}

/* Hover State to Match Dark Mode Accents */
html:not(.dark) .sy-head .sy-head-nav .sy-head-links a {
    background-color: var(--qr-gray-deep) !important;
}

html:not(.dark) .sy-head .sy-head-nav .sy-head-links a:hover {
    background-color: var(--qr-gray-mid) !important;
    color: var(--qr-green) !important;
}

/* Search Box and KBD Dark Override in Light Mode */
html:not(.dark) .searchbox {
    background-color: var(--qr-gray-mid) !important;
    border-color: var(--qr-gray-deep) !important; /* If there's a border */
    border-radius: 6px !important;
}

html:not(.dark) .searchbox input::placeholder {
    color: #909090 !important; /* Weak text for placeholder */
}

html:not(.dark) .searchbox kbd {
    background: linear-gradient(-225deg, #353434, #141414);
    border: 0;
    box-shadow:inset 0 -2px #373737, inset 0 0 1px 1px #222, 0 1px 2px 1px #000
}

/* Logo Adjustment */
.shibuya-brand img {
    filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.3));
    /* Green glow for logo */
}

/* 1. Force the main display wrapper (which applies the 'text-align: center') to align left. */
.katex-display {
    text-align: left !important;
    /* Optional: Use a left padding here for the margin effect */
    padding-left: 2rem !important;
}

/* 2. Target the inner element (where margin: 0 auto might be used) and prevent centering. */
/* This is crucial to stop the content itself from trying to center. */
.katex-display>.katex {
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* The KaTeX element needs to be a block or inline-block for the alignment to take effect */
    display: inline-block !important;
}

/* 3. Ensure the inner span containing the actual math output is also left-aligned */
.katex-display .katex .katex-html {
    text-align: left !important;
}