/* =================================================================
   MD3 COMPONENTS - Material Design 3 Component Styles
   Gom tat ca components: Sidebar, Header, Homepage, Modals
   ================================================================= */

.flex.min-h-screen {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    background-color: var(--md-sys-color-surface);
}

.floating-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background: var(--md-sys-color-surface-container-low);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--md3-elevation-level1);
}

.floating-nav.active {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    .floating-nav {
        position: sticky;
        top: 0;
        width: 280px;
        height: 100vh;
        max-height: 100vh;
        transform: translateX(0);
        box-shadow: none;
        z-index: 10;
        border-right: none;
        background: var(--md-sys-color-surface-container-low);
        overflow-y: auto;
    }

    body.sidebar-collapsed .floating-nav {
        transform: translateX(-100%);
        position: fixed;
        z-index: 1000;
        box-shadow: var(--md3-elevation-level3);
    }
}

.floating-nav::-webkit-scrollbar {
    width: 4px;
}

.floating-nav::-webkit-scrollbar-track {
    background: transparent;
}

.floating-nav::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 2px;
}

.floating-nav::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

.floating-nav__stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
    height: 100%;
    padding: 0;
}

.floating-nav__header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.5rem 1.5rem 1rem;
    flex-shrink: 0;
}

.floating-nav__header-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}

.floating-nav__brand-primary {
    color: var(--md-sys-color-primary);
}

.floating-nav__brand-secondary {
    color: var(--md-sys-color-on-surface);
}

.floating-nav__header-title {
    font-size: 0.813rem;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.02em;
}

.floating-nav__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 0.75rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.floating-nav__nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.5rem;
    min-height: 3.5rem;
    margin-bottom: 0.25rem;
    border-radius: var(--md3-shape-full);
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: background-color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
                color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.floating-nav__nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    border-radius: var(--md3-shape-full);
}

.floating-nav__nav-link:hover {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}

.floating-nav__nav-link:hover::before {
    opacity: var(--md3-state-hover-opacity);
    background: var(--md-sys-color-on-surface);
}

.floating-nav__nav-link--active {
    color: var(--md-sys-color-on-secondary-container);
    background: var(--md-sys-color-secondary-container);
    font-weight: 600;
}

.floating-nav__nav-link--active::before {
    opacity: 0;
}

.floating-nav__nav-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 24px;
    transition: color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.floating-nav__nav-link:hover .floating-nav__nav-icon {
    color: var(--md-sys-color-on-surface);
}

.floating-nav__nav-link--active .floating-nav__nav-icon {
    color: var(--md-sys-color-on-secondary-container);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.floating-nav__nav-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    line-height: 1.3;
}

.floating-nav__nav-label-sub {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-outline);
    font-weight: 500;
    line-height: 1rem;
}

.floating-nav__nav-link:hover .floating-nav__nav-label-sub,
.floating-nav__nav-link--active .floating-nav__nav-label-sub {
    color: var(--md-sys-color-primary);
}

.floating-nav__nav-label-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: inherit;
}

.floating-nav__nav-chevron {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--md-sys-color-outline-variant);
    opacity: 0.6;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
                color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
                transform var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.floating-nav__nav-link:hover .floating-nav__nav-chevron {
    opacity: 1;
    color: var(--md-sys-color-on-surface-variant);
}

.floating-nav__nav-link--active .floating-nav__nav-chevron {
    opacity: 1;
    color: var(--md-sys-color-on-secondary-container);
}

.floating-nav__status-card {
    background: var(--md-sys-color-surface-container);
    padding: 1rem;
    margin: 1rem;
    margin-top: auto;
    flex-shrink: 0;
    border-radius: var(--md3-shape-large);
    box-shadow: none;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.floating-nav__status-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    pointer-events: none;
}

.floating-nav__status-card:hover {
    background: var(--md-sys-color-surface-container-high);
    box-shadow: var(--md3-elevation-level1);
}

.floating-nav__status-card:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.floating-nav__status-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    position: relative;
    z-index: 1;
}

.floating-nav__status-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary-container);
    border-radius: 50%;
    color: var(--md-sys-color-on-primary-container);
    font-size: 1.25rem;
    box-shadow: var(--md3-elevation-level1);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.floating-nav__status-card:hover .floating-nav__status-icon {
    box-shadow: var(--md3-elevation-level2);
}

.floating-nav__status-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.floating-nav__status-copy {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.floating-nav__status-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}

.floating-nav__status-desc {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.025em;
}

.floating-nav__status-meta {
    background: var(--md-sys-color-secondary-container);
    padding: 0.5rem 0.75rem;
    border-radius: var(--md3-shape-small);
    font-size: 0.6875rem;
    line-height: 1rem;
    color: var(--md-sys-color-on-secondary-container);
    font-weight: 500;
    margin-bottom: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    position: relative;
    z-index: 1;
    letter-spacing: 0.025em;
}

.floating-nav__status-meta::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background: var(--md3-success);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--md-sys-color-secondary-container);
}

.floating-nav__cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    height: 40px;
    min-height: 40px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    border: none;
    border-radius: var(--md3-shape-full);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.01em;
    box-shadow: var(--md3-elevation-level2);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.floating-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background: var(--md-sys-color-surface-container-low);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--md3-elevation-level1);
}

.floating-nav.active {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    .floating-nav {
        position: sticky;
        top: 0;
        width: 280px;
        height: 100vh;
        max-height: 100vh;
        transform: translateX(0);
        box-shadow: none;
        z-index: 10;
        border-right: none;
        background: var(--md-sys-color-surface-container-low);
        overflow-y: auto;
    }

    body.sidebar-collapsed .floating-nav {
        transform: translateX(-100%);
        position: fixed;
        z-index: 1000;
        box-shadow: var(--md3-elevation-level3);
    }
}

.floating-nav::-webkit-scrollbar {
    width: 4px;
}

.floating-nav::-webkit-scrollbar-track {
    background: transparent;
}

.floating-nav::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 2px;
}

.floating-nav::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

.floating-nav__stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
    height: 100%;
    padding: 0;
}

.floating-nav__header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.5rem 1.5rem 1rem;
    flex-shrink: 0;
}

.floating-nav__header-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}

.floating-nav__brand-primary {
    color: var(--md-sys-color-primary);
}

.floating-nav__brand-secondary {
    color: var(--md-sys-color-on-surface);
}

.floating-nav__header-title {
    font-size: 0.813rem;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.02em;
}

.floating-nav__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 0.75rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.floating-nav__nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.5rem;
    min-height: 3.5rem;
    margin-bottom: 0.25rem;
    border-radius: var(--md3-shape-full);
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: background-color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
                color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.floating-nav__nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    border-radius: var(--md3-shape-full);
}

.floating-nav__nav-link:hover {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}

.floating-nav__nav-link:hover::before {
    opacity: var(--md3-state-hover-opacity);
    background: var(--md-sys-color-on-surface);
}

.floating-nav__nav-link--active {
    color: var(--md-sys-color-on-secondary-container);
    background: var(--md-sys-color-secondary-container);
    font-weight: 600;
}

.floating-nav__nav-link--active::before {
    opacity: 0;
}

.floating-nav__nav-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 24px;
    transition: color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.floating-nav__nav-link:hover .floating-nav__nav-icon {
    color: var(--md-sys-color-on-surface);
}

.floating-nav__nav-link--active .floating-nav__nav-icon {
    color: var(--md-sys-color-on-secondary-container);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.floating-nav__nav-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    line-height: 1.3;
}

.floating-nav__nav-label-sub {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-outline);
    font-weight: 500;
    line-height: 1rem;
}

.floating-nav__nav-link:hover .floating-nav__nav-label-sub,
.floating-nav__nav-link--active .floating-nav__nav-label-sub {
    color: var(--md-sys-color-primary);
}

.floating-nav__nav-label-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: inherit;
}

.floating-nav__nav-chevron {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--md-sys-color-outline-variant);
    opacity: 0.6;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
                color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
                transform var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.floating-nav__nav-link:hover .floating-nav__nav-chevron {
    opacity: 1;
    color: var(--md-sys-color-on-surface-variant);
}

.floating-nav__nav-link--active .floating-nav__nav-chevron {
    opacity: 1;
    color: var(--md-sys-color-on-secondary-container);
}

.floating-nav__status-card {
    background: var(--md-sys-color-surface-container);
    padding: 1rem;
    margin: 1rem;
    margin-top: auto;
    flex-shrink: 0;
    border-radius: var(--md3-shape-large);
    box-shadow: none;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.floating-nav__status-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    pointer-events: none;
}

.floating-nav__status-card:hover {
    background: var(--md-sys-color-surface-container-high);
    box-shadow: var(--md3-elevation-level1);
}

.floating-nav__status-card:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.floating-nav__status-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    position: relative;
    z-index: 1;
}

.floating-nav__status-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary-container);
    border-radius: 50%;
    color: var(--md-sys-color-on-primary-container);
    font-size: 1.25rem;
    box-shadow: var(--md3-elevation-level1);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.floating-nav__status-card:hover .floating-nav__status-icon {
    box-shadow: var(--md3-elevation-level2);
}

.floating-nav__status-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.floating-nav__status-copy {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.floating-nav__status-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}

.floating-nav__status-desc {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.025em;
}

.floating-nav__status-meta {
    background: var(--md-sys-color-secondary-container);
    padding: 0.5rem 0.75rem;
    border-radius: var(--md3-shape-small);
    font-size: 0.6875rem;
    line-height: 1rem;
    color: var(--md-sys-color-on-secondary-container);
    font-weight: 500;
    margin-bottom: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    position: relative;
    z-index: 1;
    letter-spacing: 0.025em;
}

.floating-nav__status-meta::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background: var(--md3-success);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--md-sys-color-secondary-container);
}

.floating-nav__cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    height: 40px;
    min-height: 40px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    border: none;
    border-radius: var(--md3-shape-full);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.01em;
    box-shadow: var(--md3-elevation-level2);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.floating-nav__cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-primary);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    pointer-events: none;
}

.floating-nav__cta-button:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.floating-nav__cta-button:hover {
    box-shadow: var(--md3-elevation-level3);
}

.floating-nav__cta-button:active {
    box-shadow: var(--md3-elevation-level1);
}

.floating-nav__cta-button:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.floating-nav__cta-button .material-symbols-outlined {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.floating-nav--admin {
    width: 280px;
}

.floating-nav__section-header {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--md-sys-color-outline);
    padding: 1rem 0.5rem 0.5rem;
    margin-top: 0.5rem;
}

.floating-nav__item-group {
    display: flex;
    flex-direction: column;
}

.floating-nav__dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.floating-nav__dropdown-content {
    padding-left: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    border-left: 2px solid var(--md-sys-color-outline-variant);
    margin-left: 1.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.floating-nav__sub-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.85rem;
    border-radius: var(--md3-shape-small);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    text-decoration: none;
    font-weight: 500;
}

.floating-nav__sub-link:hover {
    color: var(--md-sys-color-primary);
    background: rgba(var(--md-sys-color-primary), 0.05);
    transform: translateX(4px);
}

.floating-nav__sub-link--active {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    font-weight: 600;
}

.floating-nav__dropdown-trigger[aria-expanded="true"] .floating-nav__nav-chevron {
    transform: rotate(180deg);
    transition: transform var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}

.floating-nav__dropdown-trigger .floating-nav__nav-chevron {
    transition: transform var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}

.floating-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    border-radius: 9999px;
    box-shadow: var(--md3-elevation-level2);
}

/* Admin Footer */
.admin-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
}

.admin-footer__stats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.admin-footer__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--md-sys-color-primary-container);
    border-radius: var(--md3-shape-small);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.admin-footer__stat--warning {
    background: var(--md3-warning-container);
}

.admin-footer__stat-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
}

.admin-footer__stat--warning .admin-footer__stat-value {
    color: var(--md3-warning);
}

.admin-footer__stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-on-surface-variant);
}

.admin-footer__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md3-shape-medium);
}

.admin-footer__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--md-sys-color-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-footer__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-footer__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-footer__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-footer__role {
    font-size: 0.6875rem;
    color: var(--md-sys-color-on-surface-variant);
}

.admin-footer__home {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md3-shape-small);
    color: var(--md-sys-color-on-surface-variant);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.admin-footer__home:hover {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

/* Account Sidebar Sticky Bottom */
.sticky-bottom {
    margin-top: auto;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding-top: 1rem;
}

.floating-nav__status-card.compact {
    padding: 0.75rem;
}

.floating-nav__status-card.compact .floating-nav__status-head {
    margin-bottom: 0;
    gap: 0.5rem;
}

.floating-nav__status-card.compact .floating-nav__status-icon {
    width: 2rem;
    height: 2rem;
}

.floating-nav__status-card.compact .floating-nav__cta-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

/* =================================================================
   SECTION 2: TOP APP BAR (Material Design 3 Standard)
   ================================================================= */

.site-header {
    position: static;
    width: 100%;
    height: 64px;
    min-height: 64px;
    background: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding: 0 1rem;
    box-shadow: none;
    z-index: 50 !important;
    display: flex;
    align-items: center;
}

.site-header.max-w-7xl {
    background: var(--md-sys-color-surface);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 1rem;
    margin: 0 auto;
    position: static;
    height: 64px;
    min-height: 64px;
}

.site-header.max-w-7xl:hover {
    box-shadow: none;
}

.site-header.max-w-7xl .site-header-bar {
    width: 100%;
    max-width: 100%;
}

.site-header.max-w-7xl .site-header-brand-text {
    gap: 0.25rem;
}

.site-header.max-w-7xl .site-header-brand__meta {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.site-header.max-w-7xl .site-header-brand__title {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
}

@media (min-width: 640px) {
    .site-header.max-w-7xl {
        padding: 0 2rem;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .site-header.max-w-7xl {
        padding: 0 2.5rem;
        margin: 0 auto;
    }

    .site-header.max-w-7xl .site-header-brand__title {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

.site-header--mobile {
    z-index: 40;
}

@media (min-width: 1024px) {
    .site-header--mobile {
        z-index: 100;
        padding: 0 1.5rem;
    }
}

.site-header--admin {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-extra-large);
    width: 88%;
    max-width: 1400px;
    margin: 2rem auto 0;
    padding: 0.75rem 1.75rem;
    box-shadow: none;
    position: static;
}

.site-header.scrolled {
    box-shadow: none;
}

.site-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
}

.site-header-brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sidebar-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.sidebar-toggle:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.sidebar-toggle__icon-stack {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle__icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
}

.sidebar-toggle__icon--menu {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.sidebar-toggle__icon--close {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
}

.sidebar-toggle.is-active .sidebar-toggle__icon--menu,
body.sidebar-open .sidebar-toggle__icon--menu {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
}

.sidebar-toggle.is-active .sidebar-toggle__icon--close,
body.sidebar-open .sidebar-toggle__icon--close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.sidebar-toggle.is-active,
body.sidebar-open .sidebar-toggle {
    background: var(--md-sys-color-secondary-container);
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--md3-elevation-level2);
}

.site-header-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.site-header-brand__meta {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1;
}

.site-header-brand__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header-brand__title.text-lg {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
}

.site-header-brand__meta.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.05em;
}

.site-header-brand__primary,
.site-header-brand__secondary {
    color: inherit;
}

.site-header-brand__primary {
    color: var(--md-sys-color-primary);
}

.site-header-brand__secondary {
    color: var(--md-sys-color-on-surface);
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* User Menu */
.user-menu-container {
    position: relative;
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--md3-shape-full);
    cursor: pointer;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
    height: 3rem;
    min-height: 3rem;
}

.user-menu-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    border-radius: var(--md3-shape-full);
}

.user-menu-toggle:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.user-menu-toggle:hover {
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--md-sys-color-outline-variant);
}

.user-menu-toggle:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.user-menu-toggle:active::before {
    opacity: var(--md3-state-press-opacity);
}

.user-menu-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: right;
    position: relative;
    z-index: 1;
}

.user-menu-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-role {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    color: var(--md-sys-color-on-surface-variant);
}

.user-menu-avatar {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    background: var(--md-sys-color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-primary);
    font-weight: 700;
    font-size: 0.875rem;
    overflow: hidden;
    transition: transform var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    position: relative;
    z-index: 1;
    border: 2px solid var(--md-sys-color-surface);
}

.user-menu-toggle:hover .user-menu-avatar {
    transform: scale(1.05);
}

.user-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-menu-chevron {
    flex-shrink: 0;
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--md-sys-color-outline);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.user-menu-toggle:hover .user-menu-chevron {
    color: var(--md-sys-color-primary);
}

.user-menu-toggle[aria-expanded="true"] .user-menu-chevron {
    transform: rotate(180deg);
    color: var(--md-sys-color-primary);
}

.user-menu-toggle[aria-expanded="true"] {
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--md-sys-color-primary-container);
}

.user-menu-toggle[aria-expanded="true"] .user-menu-avatar {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    height: 40px;
    min-height: 40px;
    border-radius: var(--md3-shape-full);
    font-family: var(--md-sys-typescale-label-large-font-family-name, inherit);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    user-select: none;
}

.ui-button .material-symbols-outlined {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.ui-button::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    pointer-events: none;
}

.ui-button:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.ui-button:focus-visible::before {
    opacity: var(--md3-state-focus-opacity);
}

.ui-button:active::before {
    opacity: var(--md3-state-press-opacity);
}

.ui-button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.ui-button--primary {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md3-elevation-level1);
}

.ui-button--primary::before {
    background: var(--md-sys-color-on-primary);
}

.ui-button--primary:hover {
    box-shadow: var(--md3-elevation-level2);
}

.ui-button--primary:active {
    box-shadow: var(--md3-elevation-level1);
}

.ui-button--primary:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.ui-button--outlined {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
    box-shadow: none;
}

.ui-button--outlined::before {
    background: var(--md-sys-color-primary);
}

.ui-button--outlined:hover {
    border-color: var(--md-sys-color-primary);
}

.ui-button--text {
    background: transparent;
    color: var(--md-sys-color-primary);
    padding: 0.625rem 0.75rem;
    height: 40px;
    min-height: 40px;
    box-shadow: none;
}

.ui-button--text::before {
    background: var(--md-sys-color-primary);
}

.ui-button--elevated {
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-primary);
    box-shadow: var(--md3-elevation-level1);
}

.ui-button--elevated:hover {
    box-shadow: var(--md3-elevation-level2);
}

.ui-button--elevated:active {
    box-shadow: var(--md3-elevation-level1);
}

.ui-button--elevated::before {
    background: var(--md-sys-color-primary);
}

.ui-button--elevated:hover {
    box-shadow: var(--md3-elevation-level2);
}

.ui-button--sm {
    padding: 0.5rem 0.75rem;
    height: 32px;
    min-height: 32px;
    font-size: 0.8125rem;
    line-height: 1rem;
}

.ui-button--sm .material-symbols-outlined {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.ui-button--lg {
    padding: 0.875rem 1.5rem;
    height: 48px;
    min-height: 48px;
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.ui-button--lg .material-symbols-outlined {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.ui-button--icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--md3-shape-full);
}

.ui-button--icon.ui-button--sm {
    width: 2rem;
    height: 2rem;
}

.ui-button--icon.ui-button--lg {
    width: 3rem;
    height: 3rem;
}

/* Sidebar Backdrop */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
}

.sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Body States */
body.sidebar-open {
    overflow: hidden;
}

/* =================================================================
   SECTION 3: HOMEPAGE COMPONENTS
   ================================================================= */

.content-wrapper {
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 2rem;
    background: var(--md-sys-color-surface);
    overflow: visible;
}

main.max-w-7xl {
    max-width: 80rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    background: var(--md-sys-color-surface);
}

.content-wrapper.max-w-3xl {
    max-width: 48rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 3rem 1rem;
    background: var(--md-sys-color-surface);
}

@media (min-width: 640px) {
    .content-wrapper.max-w-3xl {
        padding: 3rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .content-wrapper.max-w-3xl {
        padding: 3rem 2rem;
    }
}

main.max-w-7xl.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

main.max-w-7xl.p-4 {
    padding: 1rem;
}

main.max-w-7xl.space-y-6 > * + * {
    margin-top: 1.5rem;
}

main.max-w-7xl h1,
main.max-w-7xl h2,
main.max-w-7xl h3 {
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
    letter-spacing: 0;
}

main.max-w-7xl h1 {
    font-size: 1.75rem;
    line-height: 2.25rem;
}

main.max-w-7xl h1.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

main.max-w-7xl h1.text-4xl {
    font-size: 2.25rem;
    line-height: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

main.max-w-7xl h1.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
}

main.max-w-7xl h2 {
    font-size: 1.5rem;
    line-height: 2rem;
}

main.max-w-7xl h2.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
}

main.max-w-7xl h2.font-extrabold {
    font-weight: 800;
}

main.max-w-7xl h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

main.max-w-7xl p {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.025em;
}

main.max-w-7xl p.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

main.max-w-7xl .text-primary {
    color: var(--md-sys-color-primary) !important;
}

main.max-w-7xl .text-slate-900 {
    color: var(--md-sys-color-on-surface) !important;
}

main.max-w-7xl .text-slate-600 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

main.max-w-7xl .text-slate-500 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

main.max-w-7xl .text-slate-700 {
    color: var(--md-sys-color-on-surface) !important;
}

main.max-w-7xl .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

.content-wrapper.max-w-3xl .text-xs.font-bold.uppercase {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--md-sys-color-primary);
}

.content-wrapper.max-w-3xl h1.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--md-sys-color-on-surface);
    margin-top: 0.5rem;
}

.content-wrapper.max-w-3xl .rounded-3xl {
    border-radius: var(--md3-shape-extra-large) !important;
}

.content-wrapper.max-w-3xl .rounded-2xl {
    border-radius: var(--md3-shape-large) !important;
}

.content-wrapper.max-w-3xl .rounded-xl {
    border-radius: var(--md3-shape-medium) !important;
}

.content-wrapper.max-w-3xl .bg-white {
    background: var(--md-sys-color-surface) !important;
}

.content-wrapper.max-w-3xl .border-gray-100,
.content-wrapper.max-w-3xl .border-gray-200 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.content-wrapper.max-w-3xl .border-red-200 {
    border-color: var(--md3-error-container) !important;
}

.content-wrapper.max-w-3xl .bg-red-50 {
    background: var(--md3-error-container) !important;
    color: var(--md3-on-error-container) !important;
}

.content-wrapper.max-w-3xl .text-red-700 {
    color: var(--md3-on-error-container) !important;
}

.content-wrapper.max-w-3xl .bg-emerald-100 {
    background: var(--md3-success-container) !important;
}

.content-wrapper.max-w-3xl .text-emerald-600 {
    color: var(--md3-success) !important;
}

.content-wrapper.max-w-3xl .ring-emerald-50 {
    box-shadow: 0 0 0 8px var(--md3-success-container);
}

.content-wrapper.max-w-3xl input[type="text"] {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-medium);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    width: 100%;
}

.content-wrapper.max-w-3xl input[type="text"]:focus {
    border-color: var(--md-sys-color-primary);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.content-wrapper.max-w-3xl input[type="text"]::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
}

.content-wrapper.max-w-3xl input[type="text"].bg-slate-50 {
    background: var(--md-sys-color-surface-container-low) !important;
}

.content-wrapper.max-w-3xl label {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.01em;
    display: block;
    margin-bottom: 0.5rem;
}

.content-wrapper.max-w-3xl label.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}

.content-wrapper.max-w-3xl button.bg-indigo-600,
.content-wrapper.max-w-3xl a.bg-indigo-600 {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    border-radius: var(--md3-shape-medium);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow: var(--md3-elevation-level2);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}

.content-wrapper.max-w-3xl button.bg-indigo-600:hover,
.content-wrapper.max-w-3xl a.bg-indigo-600:hover {
    box-shadow: var(--md3-elevation-level3);
}

.content-wrapper.max-w-3xl button.bg-slate-900,
.content-wrapper.max-w-3xl a.bg-slate-900 {
    background: var(--md-sys-color-on-surface) !important;
    color: var(--md-sys-color-surface) !important;
    border-radius: var(--md3-shape-medium);
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow: var(--md3-elevation-level2);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}

.content-wrapper.max-w-3xl button.bg-slate-900:hover,
.content-wrapper.max-w-3xl a.bg-slate-900:hover {
    box-shadow: var(--md3-elevation-level3);
}

.content-wrapper.max-w-3xl a.rounded-xl.border {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-medium);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.content-wrapper.max-w-3xl a.rounded-xl.border::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    pointer-events: none;
}

.content-wrapper.max-w-3xl a.rounded-xl.border:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.content-wrapper.max-w-3xl a.rounded-xl.border:hover {
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--md-sys-color-primary);
}

.content-wrapper.max-w-3xl .shadow-xl {
    box-shadow: var(--md3-elevation-level2) !important;
}

.content-wrapper.max-w-3xl .shadow-lg {
    box-shadow: var(--md3-elevation-level2) !important;
}

.content-wrapper.max-w-3xl .space-y-8 > * + * {
    margin-top: 2rem;
}

.content-wrapper.max-w-3xl .space-y-6 > * + * {
    margin-top: 1.5rem;
}

.content-wrapper.max-w-3xl .space-y-4 > * + * {
    margin-top: 1rem;
}

.content-wrapper.max-w-3xl .space-y-2 > * + * {
    margin-top: 0.5rem;
}

.content-wrapper.max-w-3xl .grid.gap-6 {
    gap: 1.5rem;
}

.content-wrapper.max-w-3xl .border-t.border-gray-100 {
    border-top: 1px solid var(--md-sys-color-outline-variant) !important;
    padding-top: 1.5rem;
}

.content-wrapper.max-w-3xl .material-symbols-outlined.text-4xl {
    font-size: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.content-wrapper.max-w-3xl .material-symbols-outlined.text-lg {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

main.max-w-7xl .mb-8 {
    margin-bottom: 2rem;
}

main.max-w-7xl .mb-6 {
    margin-bottom: 1.5rem;
}

main.max-w-7xl .mt-2 {
    margin-top: 0.5rem;
}

@media (min-width: 640px) {
    main.max-w-7xl.p-4 {
        padding: 1.5rem;
    }

    main.max-w-7xl.sm\:p-6 {
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    main.max-w-7xl.lg\:p-8 {
        padding: 2rem;
    }

    main.max-w-7xl h1 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    main.max-w-7xl h2 {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }

    main.max-w-7xl h3 {
        font-size: 1.375rem;
        line-height: 1.75rem;
    }
}

@media (min-width: 1280px) {
    .content-wrapper {
        padding: 2rem 3rem;
    }

    main.max-w-7xl {
        padding: 2rem;
    }
}

@media (min-width: 1536px) {
    .content-wrapper {
        padding: 2rem 4rem;
    }

    main.max-w-7xl {
        padding: 2.5rem;
    }
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    overflow: visible;
    transition: margin-left var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
}

.main-wrapper.app-main {
    margin-left: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .flex.min-h-screen:has(.floating-nav--admin) .main-wrapper.app-main {
        margin-left: 0 !important;
        width: calc(100% - 280px) !important;
    }

    body.sidebar-collapsed .flex.min-h-screen:has(.floating-nav--admin) .main-wrapper.app-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Hero Banner */
.lg\:col-span-8 .relative.group {
    position: relative;
    overflow: hidden;
    border-radius: var(--md3-shape-large);
    background: var(--md-sys-color-surface-container-low);
    backdrop-filter: blur(10px);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md3-elevation-level2);
    transition: all var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
}

.lg\:col-span-8 .relative.group:hover {
    box-shadow: var(--md3-elevation-level3);
}

.lg\:col-span-8 .relative.group img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--md3-motion-duration-long2) var(--md3-motion-easing-emphasized);
}


.lg\:col-span-8 h2 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 1);
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* CTA Button */
.bg-brand-600 {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 0.75rem 1.5rem;
    border-radius: var(--md3-shape-large);
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: var(--md3-elevation-level1);
    transition: all var(--md3-motion-duration-medium1) var(--md3-motion-easing-standard);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.bg-brand-600::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-primary);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.bg-brand-600:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

/* Ranking Card */
.lg\:col-span-4 > .bg-white {
    background: var(--md-sys-color-surface-container-low);
    backdrop-filter: blur(12px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-medium);
    box-shadow: var(--md3-elevation-level1);
    overflow: hidden;
    display: flex;
    /* flex-direction: column;
    height: 100%; */
}

/* Alert Box */
#alertBox {
    background: var(--md-sys-color-secondary-container);
    backdrop-filter: blur(12px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-medium);
    padding: 0.75rem 1rem;
    box-shadow: var(--md3-elevation-level1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Product Cards */
.bg-white.rounded-\[1\.5rem\] {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-large);
    box-shadow: var(--md3-elevation-level1);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bg-white.rounded-\[1\.5rem\]:hover {
    box-shadow: var(--md3-elevation-level2);
}

.lg\:col-span-4.bg-white.rounded-\[1\.5rem\] {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-large);
    box-shadow: var(--md3-elevation-level1);
}

.lg\:col-span-4.bg-white.rounded-\[1\.5rem\]:hover {
    box-shadow: var(--md3-elevation-level2);
}

.aspect-video {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    padding: 0.375rem;
    border-radius: var(--md3-shape-small);
}

.aspect-video img {
    border-radius: var(--md3-shape-small);
    object-fit: cover;
    transition: transform var(--md3-motion-duration-long2) var(--md3-motion-easing-emphasized);
}


/* Stock Status Badges */
.bg-green-50 {
    background: var(--md3-success-container);
    color: var(--md3-success);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--md3-shape-small);
}

.bg-red-50 {
    background: var(--md3-error-container);
    color: var(--md3-error);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--md3-shape-small);
}

/* Marquee Animation */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

.animate-marquee {
    animation: marquee 25s linear infinite;
    will-change: transform;
}

.group:hover .animate-marquee {
    animation-play-state: paused;
}

/* =================================================================
   SECTION 4: MODALS & POPUPS
   ================================================================= */

/* Welcome Modal */
.welcome-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeIn var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized) forwards;
}

.welcome-modal {
    background: var(--md-sys-color-surface);
    backdrop-filter: blur(24px);
    width: 90%;
    max-width: 400px;
    border-radius: var(--md3-shape-extra-large);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md3-elevation-level5);
    overflow: hidden;
    transform: scale(0.95);
    animation: slideUp var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized) 0.1s forwards;
}

.welcome-modal__header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-modal__title {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
}

.welcome-modal__close {
    background: var(--md-sys-color-surface-container);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.welcome-modal__close:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.welcome-modal__body {
    padding: 1.5rem;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
}

.welcome-modal__icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    border-radius: var(--md3-shape-large);
    box-shadow: var(--md3-elevation-level2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary);
}

.welcome-modal__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--md3-shape-medium);
}

.welcome-modal__feature-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md3-shape-medium);
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
}

.welcome-modal__feature-item {
    display: flex;
    align-items: center;
    background: var(--md-sys-color-surface);
    padding: 0.875rem 1rem;
    transition: background var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.welcome-modal__feature-item:hover {
    background: var(--md-sys-color-surface-container-low);
}

.welcome-modal__feature-icon {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    border-radius: var(--md3-shape-small);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.875rem;
    color: var(--md-sys-color-on-primary);
}

.welcome-modal__feature-icon.blue { background: var(--md-sys-color-primary); }
.welcome-modal__feature-icon.green { background: var(--md3-success); }
.welcome-modal__feature-icon.orange { background: var(--md3-warning); }
.welcome-modal__feature-icon.red { background: var(--md3-error); }


.welcome-modal__feature-text {
    font-size: 0.875rem;
    text-align: left;
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
}

.welcome-modal__footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: var(--md-sys-color-surface-container-low);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Auth Pages */
.auth-card {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-extra-large);
    padding: 2rem;
    box-shadow: var(--md3-elevation-level1);
}

.auth-input-group {
    margin-bottom: 1.5rem;
}

.auth-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--md-sys-color-on-surface);
    font-size: 0.875rem;
    font-weight: 500;
}

.auth-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md3-shape-small);
    color: var(--md-sys-color-on-surface);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.auth-input:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
    outline: none;
}

/* Tables */
.table-container {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-medium);
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    background: var(--md-sys-color-surface-container);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.table td {
    padding: 1rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
    font-size: 0.875rem;
}

.table tr:last-child td {
    border-bottom: none;
}

.table tr:hover {
    background: var(--md-sys-color-surface-container-high);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--md3-shape-small);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.badge--success {
    background: var(--md3-success-container);
    color: var(--md3-on-success-container);
}

.badge--warning {
    background: var(--md3-warning-container);
    color: var(--md3-on-warning-container);
}

.badge--error {
    background: var(--md3-error-container);
    color: var(--md3-on-error-container);
}

.badge--info {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}


.welcome-modal__footer {
    padding: 1.5rem;
}

.welcome-modal__btn {
    width: 100%;
    padding: 0.875rem;
    background: var(--md-sys-color-primary);
    border: none;
    color: var(--md-sys-color-on-primary);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--md3-shape-medium);
    cursor: pointer;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    box-shadow: var(--md3-elevation-level2);
}

.welcome-modal__btn:hover {
    box-shadow: var(--md3-elevation-level3);
}

.welcome-modal__btn:active {
    transform: scale(0.98);
}

/* Login Prompt Modal */
#loginPromptModal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
}

#loginPromptContent {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-extra-large);
    box-shadow: var(--md3-elevation-level5);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* =================================================================
   SECTION 5: RESPONSIVE DESIGN
   ================================================================= */

@media (min-width: 1024px) {
    .main-wrapper {
        width: auto;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body:not(.sidebar-collapsed) .main-wrapper:not(.app-main) {
        margin-left: 0;
    }

    body.sidebar-collapsed .main-wrapper:not(.app-main) {
        margin-left: 0;
    }

    .sidebar-backdrop {
        display: none;
    }

    body.sidebar-open {
        overflow: auto;
    }

    body.sidebar-open .main-wrapper,
    body.sidebar-open .site-header {
        filter: none;
        pointer-events: auto;
        user-select: auto;
    }
}

@media (max-width: 1023px) {
    .floating-nav {
        width: 280px;
        max-width: 85vw;
        box-shadow: var(--md3-elevation-level3);
    }

    .floating-nav__header {
        padding: 1.25rem 1rem;
    }

    .floating-nav__nav {
        padding: 0.25rem 0;
    }

    .floating-nav__nav-link {
        margin: 0 0.25rem;
        padding: 0.75rem 0.875rem;
    }

    .floating-nav__status-card {
        margin: 0.75rem;
        padding: 0.875rem;
        border-radius: var(--md3-shape-small);
    }

    .floating-nav__status-head {
        gap: 0.625rem;
        margin-bottom: 0.75rem;
    }

    .floating-nav__status-icon {
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
        font-size: 1.125rem;
    }

    .floating-nav__status-meta {
        margin-bottom: 0.75rem;
        padding: 0.4375rem 0.625rem;
    }

    .floating-nav__cta-button {
        padding: 0.5625rem 0.875rem;
        height: 36px;
        min-height: 36px;
        font-size: 0.8125rem;
    }

    .main-wrapper {
        margin-left: 0;
        width: 100%;
    }

    .content-wrapper {
        padding: 1.5rem 1rem;
    }

    .site-header {
        padding: 0 1rem;
    }

    .site-header--mobile {
        padding: 0 1rem;
    }

    .user-menu-info {
        display: none;
    }

    .user-menu-toggle {
        padding: 0.375rem;
        height: 2.5rem;
        min-height: 2.5rem;
    }

    .user-menu-avatar {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
        font-size: 0.8125rem;
    }

    .user-menu-chevron {
        display: none;
    }

    body.sidebar-open .main-wrapper,
    body.sidebar-open .site-header {
        filter: blur(4px);
        pointer-events: none;
        user-select: none;
    }
}

@media (max-width: 639px) {
    .floating-nav {
        width: 100%;
        max-width: 100%;
    }

    .floating-nav__header {
        padding: 1rem 0.875rem;
    }

    .floating-nav__header-meta {
        font-size: 1.25rem;
    }

    .floating-nav__nav {
        padding: 0.25rem 0;
    }

    .floating-nav__nav-link {
        gap: 0.75rem;
        padding: 0.75rem 0.875rem;
        margin: 0 0.25rem;
    }

    .floating-nav__nav-icon {
        width: 24px;
        height: 24px;
        font-size: 24px;
    }

    .floating-nav__status-card {
        margin: 0.5rem;
        padding: 0.75rem;
        border-radius: var(--md3-shape-small);
    }

    .floating-nav__status-head {
        gap: 0.5rem;
        margin-bottom: 0.625rem;
    }

    .floating-nav__status-icon {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
        font-size: 1rem;
    }

    .floating-nav__status-title {
        font-size: 0.8125rem;
        margin-bottom: 0.125rem;
    }

    .floating-nav__status-desc {
        font-size: 0.6875rem;
    }

    .floating-nav__status-meta {
        margin-bottom: 0.625rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.625rem;
    }

    .floating-nav__cta-button {
        padding: 0.5rem 0.75rem;
        height: 32px;
        min-height: 32px;
        font-size: 0.75rem;
    }

    .site-header {
        padding: 0 0.75rem;
    }

    .site-header--mobile {
        padding: 0 0.75rem;
    }

    .site-header-brand__meta {
        font-size: 0.688rem;
    }

    .site-header-brand__title {
        font-size: 0.938rem;
    }

    .sidebar-toggle {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .user-menu-avatar {
        width: 2rem;
        height: 2rem;
    }

    .content-wrapper {
        padding: 1rem 0.75rem;
    }
}


/* Scrollbar Styling */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-on-surface-variant) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 2px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

/* =================================================================
   SECTION 7: MD3 BUTTON SYSTEM
   ================================================================= */

.md3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--md3-shape-full);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.md3-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    pointer-events: none;
}

.md3-btn:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.md3-btn:focus-visible::before {
    opacity: var(--md3-state-focus-opacity);
}

.md3-btn:active::before {
    opacity: var(--md3-state-press-opacity);
}

.md3-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.md3-btn--filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md3-elevation-level1);
}

.md3-btn--filled::before {
    background: var(--md-sys-color-on-primary);
}

.md3-btn--filled:hover {
    box-shadow: var(--md3-elevation-level2);
}

.md3-btn--filled-tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md3-btn--filled-tonal::before {
    background: var(--md-sys-color-on-secondary-container);
}

.md3-btn--outlined {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}

.md3-btn--outlined::before {
    background: var(--md-sys-color-primary);
}

.md3-btn--outlined:hover {
    border-color: var(--md-sys-color-primary);
}

.md3-btn--text {
    background: transparent;
    color: var(--md-sys-color-primary);
    padding: 0.625rem 1rem;
}

.md3-btn--text::before {
    background: var(--md-sys-color-primary);
}

.md3-btn--elevated {
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-primary);
    box-shadow: var(--md3-elevation-level1);
}

.md3-btn--elevated::before {
    background: var(--md-sys-color-primary);
}

.md3-btn--elevated:hover {
    box-shadow: var(--md3-elevation-level2);
}

.md3-btn--success {
    background: var(--md3-success);
    color: var(--md3-on-success);
}

.md3-btn--success::before {
    background: var(--md3-on-success);
}

.md3-btn--warning {
    background: var(--md3-warning);
    color: var(--md3-on-warning);
}

.md3-btn--warning::before {
    background: var(--md3-on-warning);
}

.md3-btn--error {
    background: var(--md3-error);
    color: var(--md3-on-error);
}

.md3-btn--error::before {
    background: var(--md3-on-error);
}

.md3-btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

.md3-btn--lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.md3-btn--icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--md3-shape-full);
}

.md3-btn--icon.md3-btn--sm {
    width: 2rem;
    height: 2rem;
}

.md3-btn--icon.md3-btn--lg {
    width: 3rem;
    height: 3rem;
}

/* =================================================================
   SECTION 8: TEXT CONTRAST OVERRIDES
   ================================================================= */

.text-primary { color: var(--md-sys-color-primary); }
.text-on-primary { color: var(--md-sys-color-on-primary); }
.text-secondary { color: var(--md-sys-color-secondary); }
.text-on-secondary { color: var(--md-sys-color-on-secondary); }
.text-surface { color: var(--md-sys-color-on-surface); }
.text-surface-variant { color: var(--md-sys-color-on-surface-variant); }
.text-success { color: var(--md3-success); }
.text-warning { color: var(--md3-warning); }
.text-error { color: var(--md3-error); }

.bg-primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.bg-primary-container { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.bg-secondary { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); }
.bg-secondary-container { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.bg-surface { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); }
.bg-surface-container { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
.bg-success { background: var(--md3-success); color: var(--md3-on-success); }
.bg-success-container { background: var(--md3-success-container); color: var(--md3-on-success-container); }
.bg-warning { background: var(--md3-warning); color: var(--md3-on-warning); }
.bg-warning-container { background: var(--md3-warning-container); color: var(--md3-on-warning-container); }
.bg-error { background: var(--md3-error); color: var(--md3-on-error); }
.bg-error-container { background: var(--md3-error-container); color: var(--md3-on-error-container); }

/* =================================================================
   SECTION 9: TAILWIND BUTTON OVERRIDES
   ================================================================= */

.bg-blue-600,
.bg-indigo-600,
.bg-brand-600 {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

.bg-blue-600:hover,
.bg-indigo-600:hover,
.bg-brand-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-brand-700:hover {
    filter: brightness(1.1);
}

.bg-emerald-600,
.bg-green-600 {
    background: var(--md3-success) !important;
    color: var(--md3-on-success) !important;
}

.bg-emerald-600:hover,
.bg-green-600:hover,
.hover\:bg-emerald-700:hover,
.hover\:bg-green-700:hover {
    filter: brightness(1.1);
}

.bg-emerald-50 {
    background: var(--md3-success-container) !important;
    color: var(--md3-on-success-container) !important;
}

.border-emerald-200 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.text-emerald-600,
.text-emerald-700 {
    color: var(--md3-success) !important;
}

.bg-yellow-50 {
    background: var(--md3-warning-container) !important;
    color: var(--md3-on-warning-container) !important;
}

.border-yellow-200 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.text-yellow-600,
.text-yellow-700 {
    color: var(--md3-warning) !important;
}

.bg-red-600,
.bg-rose-600 {
    background: var(--md3-error) !important;
    color: var(--md3-on-error) !important;
}

.bg-red-600:hover,
.bg-rose-600:hover,
.hover\:bg-red-700:hover,
.hover\:bg-rose-700:hover {
    filter: brightness(1.1);
}

.bg-orange-600,
.bg-amber-600 {
    background: var(--md3-warning) !important;
    color: var(--md3-on-warning) !important;
}

.bg-orange-600:hover,
.bg-amber-600:hover,
.hover\:bg-orange-700:hover,
.hover\:bg-amber-700:hover {
    filter: brightness(1.1);
}

.bg-slate-50,
.bg-gray-50 {
    background: var(--md-sys-color-surface-container-low) !important;
    color: var(--md-sys-color-on-surface) !important;
}

.bg-slate-100,
.bg-gray-100 {
    background: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface) !important;
}

main.max-w-7xl a.px-4.py-2.rounded-lg {
    padding: 0.5rem 1rem;
    border-radius: var(--md3-shape-medium);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

main.max-w-7xl a.px-4.py-2.rounded-lg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    pointer-events: none;
}

main.max-w-7xl a.px-4.py-2.rounded-lg:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

main.max-w-7xl a.px-4.py-2.rounded-lg.bg-primary {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    box-shadow: var(--md3-elevation-level1);
}

main.max-w-7xl a.px-4.py-2.rounded-lg.bg-primary:hover {
    box-shadow: var(--md3-elevation-level2);
}

main.max-w-7xl a.px-4.py-2.rounded-lg.bg-slate-100 {
    background: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant);
}

main.max-w-7xl a.px-4.py-2.rounded-lg.bg-slate-100:hover {
    background: var(--md-sys-color-surface-container-high) !important;
    border-color: var(--md-sys-color-primary);
}

main.max-w-7xl .flex.flex-wrap.gap-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

main.max-w-7xl .grid.gap-6 {
    gap: 1.5rem;
}

main.max-w-7xl .grid.gap-6.sm\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

main.max-w-7xl .grid.gap-6.lg\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
    main.max-w-7xl .grid.gap-6.sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    main.max-w-7xl .grid.gap-6.lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-large);
    box-shadow: var(--md3-elevation-level1);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    pointer-events: none;
}

.card:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.card:hover {
    box-shadow: var(--md3-elevation-level2);
}

.card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 1;
}

.card-body.space-y-4 > * + * {
    margin-top: 1rem;
}

.group .card h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0;
    transition: color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.group:hover .card h3 {
    color: var(--md-sys-color-primary);
}

.group .card h3.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.group .card p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.025em;
}

.group .card .material-symbols-outlined.text-3xl {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    color: var(--md-sys-color-primary);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.group:hover .card .material-symbols-outlined.text-3xl {
    color: var(--md-sys-color-primary);
}

.group .card .border-t {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding-top: 1rem;
}

.group .card .border-t.border-slate-200 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.group .card .material-symbols-outlined.text-slate-400 {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.group:hover .card .material-symbols-outlined.text-slate-400 {
    color: var(--md-sys-color-primary);
}

.group .card span.text-sm.text-slate-500 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.025em;
}

.group .card .flex.items-start.justify-between {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.group .card .flex.items-start.justify-between > div.flex-1 {
    flex: 1;
    min-width: 0;
}

.group .card .flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.group .card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.group {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

a.group:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 4px;
    border-radius: var(--md3-shape-large);
}

a.group .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media (max-width: 639px) {
    .card-body {
        padding: 1.25rem;
    }

    .group .card h3 {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .group .card .material-symbols-outlined.text-3xl {
        font-size: 1.75rem;
        width: 1.75rem;
        height: 1.75rem;
    }
}

.text-slate-900,
.text-gray-900 {
    color: var(--md-sys-color-on-surface) !important;
}

.text-slate-700,
.text-gray-700 {
    color: var(--md-sys-color-on-surface) !important;
}

.text-slate-600,
.text-gray-600 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

.text-slate-500,
.text-gray-500 {
    color: var(--md-sys-color-outline) !important;
}

.text-slate-400,
.text-gray-400 {
    color: var(--md-sys-color-outline) !important;
}

.text-blue-600,
.text-indigo-600 {
    color: var(--md-sys-color-primary) !important;
}

.text-emerald-600,
.text-green-600 {
    color: var(--md3-success) !important;
}

.text-red-600,
.text-rose-600 {
    color: var(--md3-error) !important;
}

.text-orange-600,
.text-amber-600 {
    color: var(--md3-warning) !important;
}

.border-slate-200,
.border-gray-200 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.border-slate-100,
.border-gray-100 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.shadow-lg {
    box-shadow: var(--md3-elevation-level3) !important;
}

.shadow-xl {
    box-shadow: var(--md3-elevation-level2) !important;
}

.shadow-xl.shadow-slate-200\/40 {
    box-shadow: var(--md3-elevation-level1) !important;
}

.shadow-2xl {
    box-shadow: var(--md3-elevation-level5) !important;
}

.shadow-sm {
    box-shadow: var(--md3-elevation-level1) !important;
}

.shadow-md {
    box-shadow: var(--md3-elevation-level2) !important;
}

/* =================================================================
   SECTION 10: HERO PAGE COMPONENTS
   ================================================================= */

.lg\:col-span-4 .bg-white,
.lg\:col-span-4.bg-white {
    background: var(--md-sys-color-surface) !important;
}

.lg\:col-span-4 .bg-white .border-b,
.lg\:col-span-4.bg-white .border-b {
    border-color: var(--md-sys-color-outline-variant) !important;
    border-bottom-width: 1px;
}

.lg\:col-span-4.bg-white > div.bg-white {
    background: var(--md-sys-color-surface-container-low) !important;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.lg\:col-span-4.bg-white > div.bg-white h3 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.01em;
}

.lg\:col-span-4.bg-white > div.bg-white a {
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1rem;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.lg\:col-span-4.bg-white > div.bg-white a:hover {
    color: var(--md-sys-color-primary);
}

.lg\:col-span-4.bg-white .bg-brand-50,
.bg-brand-50.p-1\.5 {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
    padding: 0.375rem;
    border-radius: var(--md3-shape-small);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    box-shadow: var(--md3-elevation-level0);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.lg\:col-span-4.bg-white .bg-brand-50::before,
.bg-brand-50.p-1\.5::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-primary-container);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    pointer-events: none;
}

.lg\:col-span-4.bg-white .bg-brand-50:hover,
.bg-brand-50.p-1\.5:hover {
    box-shadow: var(--md3-elevation-level1);
}

.lg\:col-span-4.bg-white .bg-brand-50:hover::before,
.bg-brand-50.p-1\.5:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.lg\:col-span-4.bg-white .bg-brand-50 i,
.bg-brand-50.p-1\.5 i {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--md-sys-color-on-primary-container);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}


.lg\:col-span-4.bg-white .bg-brand-50 .text-sm,
.bg-brand-50.p-1\.5 .text-sm {
    font-size: 1rem !important;
}

.lg\:col-span-4.bg-white > div.p-3 {
    padding: 0.75rem;
    background: var(--md-sys-color-surface);
}

.lg\:col-span-4.bg-white .space-y-2\.5 > div {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-small);
    padding: 0.5rem;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.lg\:col-span-4.bg-white .space-y-2\.5 > div:hover {
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--md3-elevation-level1);
}

.lg\:col-span-4.bg-white .bg-gradient-to-r.from-yellow-50\/80 {
    background: var(--md3-warning-container) !important;
    border-color: var(--md3-warning-container) !important;
}

.lg\:col-span-4.bg-white .bg-gradient-to-r.from-slate-50\/80 {
    background: var(--md-sys-color-surface-container) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

.lg\:col-span-4.bg-white .bg-gradient-to-r.from-orange-50\/80 {
    background: var(--md3-warning-container) !important;
    border-color: var(--md3-warning-container) !important;
}

.lg\:col-span-4.bg-white .border-slate-100 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.lg\:col-span-4.bg-white .hover\:bg-slate-50\/80:hover {
    background: var(--md-sys-color-surface-container-low) !important;
}

.lg\:col-span-4.bg-white .text-slate-900 {
    color: var(--md-sys-color-on-surface) !important;
}

.lg\:col-span-4.bg-white .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

.lg\:col-span-4.bg-white .text-slate-500 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

.bg-brand-50 {
    background: var(--md-sys-color-primary-container) !important;
}

.text-brand-600 {
    color: var(--md-sys-color-primary) !important;
}

.hover\:text-brand-600:hover {
    color: var(--md-sys-color-primary) !important;
}

.border-brand-200 {
    border-color: var(--md-sys-color-primary-container) !important;
}

.hover\:border-brand-200:hover {
    border-color: var(--md-sys-color-primary-container) !important;
}

.bg-brand-600\/90 {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

.group-hover\:text-brand-600:hover,
.group:hover .group-hover\:text-brand-600 {
    color: var(--md-sys-color-primary) !important;
}

.hover\:bg-brand-600:hover {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

.hover\:border-brand-600:hover {
    border-color: var(--md-sys-color-primary) !important;
}

.shadow-brand-600\/30,
.shadow-brand-600\/50,
.hover\:shadow-brand-600\/50:hover {
    box-shadow: var(--md3-elevation-level2) !important;
}

.hover\:shadow-brand-500\/10:hover {
    box-shadow: var(--md3-elevation-level3) !important;
}

.border-yellow-100\/50,
.border-yellow-100,
.border-yellow-200 {
    border-color: rgba(234, 179, 8, 0.3) !important;
}

.hover\:border-yellow-200:hover {
    border-color: rgba(234, 179, 8, 0.5) !important;
}

.text-yellow-600 {
    color: #a16207 !important;
}

.text-yellow-500 {
    color: #ca8a04 !important;
}

.shadow-yellow-500\/20 {
    box-shadow: 0 4px 6px rgba(234, 179, 8, 0.2) !important;
}

.border-orange-100\/50,
.border-orange-100,
.border-orange-200 {
    border-color: rgba(251, 146, 60, 0.3) !important;
}

.hover\:border-orange-200:hover {
    border-color: rgba(251, 146, 60, 0.5) !important;
}

.text-orange-600 {
    color: #c2410c !important;
}

.text-orange-500 {
    color: #ea580c !important;
}

.hover\:border-slate-300:hover {
    border-color: var(--md-sys-color-outline) !important;
}

.hover\:bg-slate-50\/80:hover {
    background: var(--md-sys-color-surface-container-low) !important;
}

.from-blue-50,
.bg-gradient-to-r.from-blue-50 {
    background: var(--md-sys-color-primary-container) !important;
}

.border-blue-100 {
    border-color: var(--md-sys-color-primary-container) !important;
}

.bg-blue-500 {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

.shadow-blue-500\/20 {
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2) !important;
}

.text-blue-50 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.lg\:col-span-8 .text-blue-50,
.lg\:col-span-8 p.text-blue-50 {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.lg\:col-span-8 .absolute p.text-blue-50 {
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bg-green-500 {
    background: var(--md3-success) !important;
}

.bg-green-400 {
    background: #4ade80 !important;
}

.bg-red-500 {
    background: var(--md3-error) !important;
}

.rounded-\[2rem\] {
    border-radius: var(--md3-shape-extra-large) !important;
}

.rounded-\[1\.5rem\] {
    border-radius: var(--md3-shape-large) !important;
}

.rounded-\[1\.2rem\] {
    border-radius: var(--md3-shape-medium) !important;
}

.bg-slate-900 {
    background: var(--md-sys-color-on-surface) !important;
    color: var(--md-sys-color-surface) !important;
}

.from-slate-900\/80 {
    background: linear-gradient(to top, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.3), transparent) !important;
}

.bg-white\/20 {
    background: rgba(255, 255, 255, 0.2) !important;
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.border-white {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.shadow-blue-900\/5 {
    box-shadow: var(--md3-elevation-level2) !important;
}

.shadow-slate-200\/40 {
    box-shadow: var(--md3-elevation-level1) !important;
}

.border-slate-50\/80 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.border-slate-200\/50 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.border-slate-100 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.scrollbar-thumb-slate-200::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant) !important;
}

[class*="bg-gradient-to-r"][class*="from-yellow-50"] {
    background: linear-gradient(to right, rgba(254, 243, 199, 0.9), var(--md-sys-color-surface)) !important;
}

[class*="bg-gradient-to-r"][class*="from-slate-50"] {
    background: linear-gradient(to right, var(--md-sys-color-surface-container), var(--md-sys-color-surface)) !important;
}

[class*="bg-gradient-to-r"][class*="from-orange-50"] {
    background: linear-gradient(to right, rgba(255, 237, 213, 0.9), var(--md-sys-color-surface)) !important;
}

.bg-yellow-100\/50 {
    background: rgba(254, 243, 199, 0.6) !important;
}

.bg-slate-100\/50 {
    background: var(--md-sys-color-surface-container) !important;
}

.bg-orange-100\/50 {
    background: rgba(255, 237, 213, 0.6) !important;
}


/* =================================================================
   SECTION 11: ADMIN HEADER & SIDEBAR OPTIMIZATION
   ================================================================= */

.floating-nav--admin {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    max-height: 100dvh;
    background: var(--md-sys-color-surface-container-low);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0;
    box-shadow: var(--md3-elevation-level2);
    z-index: 150;
    transform: translateX(-100%);
    transition: transform var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.floating-nav--admin::-webkit-scrollbar {
    width: 4px;
}

.floating-nav--admin::-webkit-scrollbar-track {
    background: transparent;
}

.floating-nav--admin::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 2px;
}

.floating-nav--admin::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

.floating-nav--admin.active {
    transform: translateX(0);
    z-index: 150;
}

.floating-nav--admin .floating-nav__stack {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.5rem 1rem;
    gap: 1.5rem;
}

.floating-nav--admin .floating-nav__header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.floating-nav--admin .floating-nav__brand-primary {
    color: var(--md-sys-color-primary);
}

.floating-nav--admin .floating-nav__brand-secondary {
    color: var(--md-sys-color-on-surface);
}

.floating-nav--admin .floating-nav__nav-link {
    color: var(--md-sys-color-on-surface-variant);
}

.floating-nav--admin .floating-nav__nav-link:hover {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container);
}

.floating-nav--admin .floating-nav__nav-link--active {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
}

.floating-nav--admin .floating-nav__nav-link--active .floating-nav__nav-icon {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.floating-nav--admin .floating-nav__section-header {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--md-sys-color-outline);
    padding: 1rem 0.5rem 0.5rem;
    margin-top: 0.5rem;
}

.floating-nav--admin .floating-nav__dropdown-content {
    padding-left: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    border-left: 2px solid var(--md-sys-color-outline-variant);
    margin-left: 1.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized),
                opacity var(--md3-motion-duration-short4) var(--md3-motion-easing-standard),
                margin-top var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized),
                margin-bottom var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
}

.floating-nav--admin .floating-nav__dropdown-content:not(.hidden) {
    max-height: 1000px;
    opacity: 1;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

.floating-nav--admin .floating-nav__dropdown-content.hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.floating-nav--admin .floating-nav__dropdown-trigger[aria-expanded="true"] .floating-nav__nav-chevron {
    transform: rotate(180deg);
}

.floating-nav--admin .floating-nav__sub-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.85rem;
    border-radius: var(--md3-shape-small);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    text-decoration: none;
    font-weight: 500;
}

.floating-nav--admin .floating-nav__sub-link:hover {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    transform: translateX(4px);
}

.floating-nav--admin .floating-nav__sub-link--active {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    font-weight: 600;
}

.floating-nav--admin .floating-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    border-radius: var(--md3-shape-full);
    box-shadow: var(--md3-elevation-level2);
}

.admin-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md3-shape-medium);
}

.admin-footer__stats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.admin-footer__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--md-sys-color-primary-container);
    border-radius: var(--md3-shape-small);
    border: 1px solid var(--md-sys-color-outline-variant);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.admin-footer__stat:hover {
    box-shadow: var(--md3-elevation-level1);
}

.admin-footer__stat--warning {
    background: var(--md3-warning-container);
    border-color: var(--md3-warning-container);
}

.admin-footer__stat-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
}

.admin-footer__stat--warning .admin-footer__stat-value {
    color: var(--md3-warning);
}

.admin-footer__stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-on-surface-variant);
}

.admin-footer__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md3-shape-medium);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.admin-footer__user:hover {
    background: var(--md-sys-color-surface-container);
}

.admin-footer__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--md-sys-color-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-footer__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-footer__avatar .material-symbols-outlined {
    font-size: 1.25rem;
    color: var(--md-sys-color-primary);
}

.admin-footer__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-footer__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-footer__role {
    font-size: 0.6875rem;
    color: var(--md-sys-color-on-surface-variant);
}

.admin-footer__home {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md3-shape-small);
    color: var(--md-sys-color-on-surface-variant);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    text-decoration: none;
}

.admin-footer__home:hover {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}



.site-header__stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--md3-shape-medium);
    background: var(--md3-success-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.site-header__stat:hover {
    box-shadow: var(--md3-elevation-level1);
}

.site-header__stat--warning {
    background: var(--md3-warning-container);
}

.site-header__stat-icon {
    font-size: 1rem;
    color: var(--md3-success);
}

.site-header__stat--warning .site-header__stat-icon {
    color: var(--md3-warning);
}

.site-header__stat-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--md3-on-success-container);
}

.site-header__stat--warning .site-header__stat-value {
    color: var(--md3-on-warning-container);
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 18rem;
    min-width: 18rem;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-large);
    box-shadow: var(--md3-elevation-level3);
    z-index: 200 !important;
    transform-origin: top right;
    transition: opacity var(--md3-motion-duration-short4) var(--md3-motion-easing-emphasized),
                transform var(--md3-motion-duration-short4) var(--md3-motion-easing-emphasized),
                visibility var(--md3-motion-duration-short4);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.96) translateY(-4px);
    pointer-events: none;
    display: none;
}

.user-menu-dropdown[aria-hidden="false"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}

.user-menu-dropdown:not(.hidden).visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}

.user-menu-dropdown:not(.hidden):not(.invisible):not([aria-hidden="true"]) {
    display: block !important;
}

.user-menu-dropdown.opacity-100:not(.invisible) {
    opacity: 1 !important;
    visibility: visible !important;
}

.user-menu-dropdown.visible.scale-100 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}

.user-menu-dropdown.hidden,
.user-menu-dropdown.invisible,
.user-menu-dropdown[aria-hidden="true"] {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.96) translateY(-4px) !important;
    pointer-events: none !important;
    display: none !important;
}

/* Override inline styles and Tailwind classes */
.user-menu-dropdown[style*="display: none"] {
    display: none !important;
}

.user-menu-dropdown[style*="display: block"] {
    display: block !important;
}

.user-menu-dropdown[style*="visibility: visible"]:not([aria-hidden="true"]):not(.hidden) {
    display: block !important;
    visibility: visible !important;
}

.user-menu-dropdown.opacity-100 {
    opacity: 1 !important;
}

.user-menu-dropdown.opacity-0 {
    opacity: 0 !important;
}

.user-menu-dropdown.scale-100 {
    transform: scale(1) translateY(0) !important;
}

.user-menu-dropdown.scale-95 {
    transform: scale(0.96) translateY(-4px) !important;
}

.user-menu-dropdown.visible {
    visibility: visible !important;
}

.user-menu-dropdown.rounded-2xl {
    border-radius: var(--md3-shape-extra-large) !important;
}

.user-menu-dropdown.bg-white {
    background: var(--md-sys-color-surface) !important;
}

.user-menu-dropdown.border-gray-100 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

/* Important: Force override when JS adds classes */
.user-menu-dropdown.opacity-100.visible.scale-100[style*="display: block"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
}

.user-menu-dropdown .floating-nav__stack {
    padding: 0.5rem;
}

.user-menu-dropdown .floating-nav__nav-link {
    border-radius: var(--md3-shape-medium);
    margin: 0;
    padding: 0.625rem 0.875rem;
}

/* =================================================================
   SECTION 12: AUTH FORMS (Material Design 3)
   ================================================================= */

.content-wrapper.flex.items-center.justify-center {
    background: var(--md-sys-color-surface-container-lowest);
    min-height: calc(100vh - 64px);
}

.content-wrapper.flex.items-center.justify-center .bg-slate-100 {
    background: var(--md-sys-color-surface-container-lowest) !important;
}

.content-wrapper .bg-white.rounded-2xl {
    background: var(--md-sys-color-surface) !important;
    border-radius: var(--md3-shape-extra-large) !important;
    box-shadow: var(--md3-elevation-level1) !important;
    padding: 2rem !important;
    max-width: 28rem !important;
    width: 100%;
}

.content-wrapper .bg-white.rounded-2xl h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--md-sys-color-on-surface);
    text-align: center;
    margin-bottom: 1.5rem;
}

.content-wrapper .bg-white.rounded-2xl form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.content-wrapper .bg-white.rounded-2xl .flex.flex-col.gap-1 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.content-wrapper .bg-white.rounded-2xl label.text-gray-900 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.01em;
}

.content-wrapper .bg-white.rounded-2xl .flex.items-center.border-\[1\.5px\] {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline) !important;
    border-radius: var(--md3-shape-medium);
    height: 3.5rem;
    min-height: 3.5rem;
    padding: 0 1rem;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .bg-white.rounded-2xl .flex.items-center.border-\[1\.5px\]:hover {
    background: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-on-surface-variant) !important;
}

.content-wrapper .bg-white.rounded-2xl .flex.items-center.border-\[1\.5px\]:focus-within {
    border-color: var(--md-sys-color-primary) !important;
    border-width: 2px !important;
    background: var(--md-sys-color-surface);
    box-shadow: 0 0 0 1px var(--md-sys-color-primary-container);
}

.content-wrapper .bg-white.rounded-2xl .flex.items-center.border-\[1\.5px\] svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
    transition: color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .bg-white.rounded-2xl .flex.items-center.border-\[1\.5px\]:hover svg {
    color: var(--md-sys-color-on-surface);
}

.content-wrapper .bg-white.rounded-2xl .flex.items-center.border-\[1\.5px\]:focus-within svg {
    color: var(--md-sys-color-primary);
}

.content-wrapper .bg-white.rounded-2xl input[type="email"],
.content-wrapper .bg-white.rounded-2xl input[type="password"],
.content-wrapper .bg-white.rounded-2xl input[type="text"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--md-sys-color-on-surface);
    padding: 0.75rem 0.5rem;
    margin-left: 0.75rem;
    width: 100%;
    height: 100%;
}

.content-wrapper .bg-white.rounded-2xl input[type="email"]::placeholder,
.content-wrapper .bg-white.rounded-2xl input[type="password"]::placeholder,
.content-wrapper .bg-white.rounded-2xl input[type="text"]::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
}

.content-wrapper .bg-white.rounded-2xl input[type="email"]:focus,
.content-wrapper .bg-white.rounded-2xl input[type="password"]:focus,
.content-wrapper .bg-white.rounded-2xl input[type="text"]:focus {
    outline: none;
}

.content-wrapper .bg-white.rounded-2xl button[type="button"].text-gray-400 {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    transition: color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md3-shape-small);
    position: relative;
    overflow: hidden;
}

.content-wrapper .bg-white.rounded-2xl button[type="button"].text-gray-400::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    border-radius: var(--md3-shape-small);
}

.content-wrapper .bg-white.rounded-2xl button[type="button"].text-gray-400:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.content-wrapper .bg-white.rounded-2xl button[type="button"].text-gray-400:hover {
    color: var(--md-sys-color-on-surface);
}

.content-wrapper .bg-white.rounded-2xl button[type="button"].text-gray-400:active::before {
    opacity: var(--md3-state-press-opacity);
}

.content-wrapper .bg-white.rounded-2xl button[type="button"].text-gray-400 svg {
    width: 1.25rem;
    height: 1.25rem;
    position: relative;
    z-index: 1;
}

.content-wrapper .bg-white.rounded-2xl .bg-red-50 {
    background: var(--md3-error-container) !important;
    border-color: var(--md3-error) !important;
    border-radius: var(--md3-shape-medium);
    padding: 1rem;
    margin-bottom: 1rem;
}

.content-wrapper .bg-white.rounded-2xl .bg-red-50 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-wrapper .bg-white.rounded-2xl .bg-red-50 li {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md3-on-error-container);
    margin-bottom: 0.25rem;
}

.content-wrapper .bg-white.rounded-2xl .bg-red-50 li:last-child {
    margin-bottom: 0;
}

.content-wrapper .bg-white.rounded-2xl .flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.content-wrapper .bg-white.rounded-2xl label.flex.items-center.gap-2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
}

.content-wrapper .bg-white.rounded-2xl input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--md-sys-color-primary);
    cursor: pointer;
    border-radius: var(--md3-shape-small);
    border: 2px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    appearance: none;
    position: relative;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .bg-white.rounded-2xl input[type="checkbox"]:checked {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.content-wrapper .bg-white.rounded-2xl input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0.375rem;
    height: 0.625rem;
    border: solid var(--md-sys-color-on-primary);
    border-width: 0 2px 2px 0;
}

.content-wrapper .bg-white.rounded-2xl input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.content-wrapper .bg-white.rounded-2xl span.text-sm.text-gray-700 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
}

.content-wrapper .bg-white.rounded-2xl a.text-sm.text-blue-500 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    position: relative;
}

.content-wrapper .bg-white.rounded-2xl a.text-sm.text-blue-500:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.content-wrapper .bg-white.rounded-2xl a.text-sm.text-blue-500:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    border-radius: var(--md3-shape-small);
}

.content-wrapper .bg-white.rounded-2xl button[type="submit"] {
    background: var(--md-sys-color-primary) !important;
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    border: none !important;
    border-radius: var(--md3-shape-medium) !important;
    height: 3.5rem !important;
    min-height: 3.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.25rem !important;
    letter-spacing: 0.01em !important;
    margin-top: 1rem !important;
    cursor: pointer !important;
    transition: background-color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard), opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard) !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    transform: none !important;
}

.content-wrapper .bg-white.rounded-2xl button[type="submit"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-primary);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .bg-white.rounded-2xl button[type="submit"]:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.content-wrapper .bg-white.rounded-2xl button[type="submit"]:hover {
    background: var(--md-sys-color-primary) !important;
    background-color: var(--md-sys-color-primary) !important;
    opacity: 0.92 !important;
    box-shadow: none !important;
    transform: none !important;
}

.content-wrapper .bg-white.rounded-2xl button[type="submit"]:active::before {
    opacity: var(--md3-state-press-opacity);
}

.content-wrapper .bg-white.rounded-2xl button[type="submit"]:active {
    background: var(--md-sys-color-primary) !important;
    background-color: var(--md-sys-color-primary) !important;
    opacity: 0.88 !important;
    box-shadow: none !important;
    transform: none !important;
}

.content-wrapper .bg-white.rounded-2xl button[type="submit"]:focus-visible {
    outline: 2px solid var(--md-sys-color-primary) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.content-wrapper .bg-white.rounded-2xl button[type="submit"]:disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.content-wrapper .bg-white.rounded-2xl form button.mt-4 {
    margin-top: 1rem !important;
}

.content-wrapper .bg-white.rounded-2xl form button.h-\[50px\] {
    height: 3.5rem !important;
    min-height: 3.5rem !important;
}

.content-wrapper .bg-white.rounded-2xl form button.rounded-lg {
    border-radius: var(--md3-shape-medium) !important;
}

.content-wrapper .bg-white.rounded-2xl form button.transition-colors {
    transition: background-color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard), opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard) !important;
}

.content-wrapper .bg-white.rounded-2xl form button.text-white {
    color: var(--md-sys-color-on-primary) !important;
}

.content-wrapper .bg-white.rounded-2xl form button.font-medium {
    font-weight: 600 !important;
}

/* =================================================================
   SECTION 13: ACCOUNT DASHBOARD CARDS (Material Design 3)
   ================================================================= */

.main-wrapper.app-main .p-4.lg\:p-6 {
    padding: 1rem;
    background: var(--md-sys-color-surface-container-lowest);
}

@media (min-width: 1024px) {
    .main-wrapper.app-main .p-4.lg\:p-6 {
        padding: 1.5rem;
    }
}

.main-wrapper.app-main .space-y-6 > * + * {
    margin-top: 1.5rem;
}

.main-wrapper.app-main .bg-white.rounded-xl {
    background: var(--md-sys-color-surface) !important;
    border-radius: var(--md3-shape-large) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md3-elevation-level1) !important;
    padding: 1.5rem !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-sm.font-medium.text-slate-500 {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.01em;
    margin-bottom: 0.25rem;
}

.main-wrapper.app-main .bg-white.rounded-xl h1.text-2xl,
.main-wrapper.app-main .bg-white.rounded-xl h1.lg\:text-3xl {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 0.5rem;
}

@media (min-width: 1024px) {
    .main-wrapper.app-main .bg-white.rounded-xl h1.lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

.main-wrapper.app-main .bg-white.rounded-xl h2.text-xl,
.main-wrapper.app-main .bg-white.rounded-xl h2.lg\:text-2xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 0.5rem;
}

@media (min-width: 1024px) {
    .main-wrapper.app-main .bg-white.rounded-xl h2.lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

.main-wrapper.app-main .bg-white.rounded-xl .text-slate-600 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.025em;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-slate-900 {
    color: var(--md-sys-color-on-surface) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl a.inline-flex.items-center.gap-2 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--md3-shape-medium);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
}

.main-wrapper.app-main .bg-white.rounded-xl a.bg-slate-100 {
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant);
}

.main-wrapper.app-main .bg-white.rounded-xl a.bg-slate-100:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.main-wrapper.app-main .bg-white.rounded-xl a.bg-slate-100 .material-symbols-outlined {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    position: relative;
    z-index: 1;
}

.main-wrapper.app-main .bg-white.rounded-xl .grid.gap-4 {
    gap: 1rem;
}

.main-wrapper.app-main .bg-white.rounded-xl .bg-gradient-to-br {
    background: var(--md-sys-color-surface-container-low) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-medium) !important;
    padding: 1rem !important;
    position: relative;
    overflow: hidden;
}

.main-wrapper.app-main .bg-white.rounded-xl .from-blue-50.to-blue-100 {
    background: var(--md-sys-color-primary-container) !important;
    border-color: var(--md-sys-color-primary) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .from-emerald-50.to-emerald-100 {
    background: var(--md3-success-container) !important;
    border-color: var(--md3-success) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .from-slate-50.to-slate-100 {
    background: var(--md-sys-color-surface-container-low) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-blue-600 {
    color: var(--md-sys-color-primary) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-blue-700 {
    color: var(--md-sys-color-on-primary-container) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-emerald-600 {
    color: var(--md3-success) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-emerald-700 {
    color: var(--md3-on-success-container) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-slate-600 {
    color: var(--md-sys-color-on-surface-variant) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-slate-700 {
    color: var(--md-sys-color-on-surface) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .bg-blue-100 {
    background: var(--md-sys-color-primary-container) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .bg-emerald-100 {
    background: var(--md3-success-container) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .bg-slate-100 {
    background: var(--md-sys-color-surface-container-high) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .border-blue-200 {
    border-color: var(--md-sys-color-primary) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .border-emerald-200 {
    border-color: var(--md3-success) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .border-slate-200 {
    border-color: var(--md-sys-color-outline-variant) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .material-symbols-outlined.text-2xl {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-xs.font-medium {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    letter-spacing: 0.05em;
}

.main-wrapper.app-main .bg-white.rounded-xl .rounded-full {
    border-radius: var(--md3-shape-full) !important;
    padding: 0.25rem 0.5rem;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-2xl.font-bold {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-center.py-12 {
    text-align: center;
    padding: 3rem 0;
}

.main-wrapper.app-main .bg-white.rounded-xl .inline-flex.items-center.justify-center.w-20.h-20 {
    width: 5rem;
    height: 5rem;
    border-radius: var(--md3-shape-full);
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main-wrapper.app-main .bg-white.rounded-xl .material-symbols-outlined.text-4xl {
    font-size: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.main-wrapper.app-main .bg-white.rounded-xl h3.text-lg.font-semibold {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 0.5rem;
}

.main-wrapper.app-main .bg-white.rounded-xl a.inline-flex.items-center.gap-2.bg-blue-600 {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    padding: 0.75rem 1.5rem;
    border-radius: var(--md3-shape-medium);
    font-weight: 500;
    box-shadow: none;
}

.main-wrapper.app-main .bg-white.rounded-xl a.bg-blue-600:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.main-wrapper.app-main .bg-white.rounded-xl .space-y-4 > * + * {
    margin-top: 1rem;
}

.main-wrapper.app-main .bg-white.rounded-xl .border.border-slate-200.rounded-lg {
    background: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-medium) !important;
    padding: 1rem !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .text-xs.font-medium.text-slate-500.uppercase {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}

.main-wrapper.app-main .bg-white.rounded-xl .inline-flex.items-center.px-2.py-1.rounded-full {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--md3-shape-full);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.main-wrapper.app-main .bg-white.rounded-xl .bg-emerald-100.text-emerald-700 {
    background: var(--md3-success-container) !important;
    color: var(--md3-on-success-container) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl .bg-slate-100.text-slate-700 {
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl h3.text-lg.font-semibold.text-slate-900 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.main-wrapper.app-main .bg-white.rounded-xl .flex.flex-wrap.gap-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.main-wrapper.app-main .bg-white.rounded-xl .flex.items-center.gap-1 {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.main-wrapper.app-main .bg-white.rounded-xl .material-symbols-outlined.text-base {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.main-wrapper.app-main .bg-white.rounded-xl label.text-sm.font-medium.text-slate-700 {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    display: block;
    margin-bottom: 0.5rem;
}

.main-wrapper.app-main .bg-white.rounded-xl input.flex-1.px-3.py-2.bg-slate-50 {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--md-sys-color-surface-container-low) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-medium);
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface);
}

.main-wrapper.app-main .bg-white.rounded-xl input.flex-1.px-3.py-2.bg-slate-50:focus {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    border-color: var(--md-sys-color-primary);
}

.main-wrapper.app-main .bg-white.rounded-xl button.inline-flex.items-center.gap-2.bg-slate-100 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-medium);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.main-wrapper.app-main .bg-white.rounded-xl a.inline-flex.items-center.gap-2.bg-blue-600.hover\:bg-blue-700 {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

/* =================================================================
   SECTION 14: PURCHASE HISTORY TABLE (Material Design 3)
   ================================================================= */

.main-wrapper.app-main .bg-white.rounded-xl .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.main-wrapper.app-main .bg-white.rounded-xl table.w-full {
    width: 100%;
    border-collapse: collapse;
}

.main-wrapper.app-main .bg-white.rounded-xl thead tr.border-b {
    border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl thead th {
    padding: 1rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.01em;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-low);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody tr.border-b {
    border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody tr:last-child {
    border-bottom: none !important;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td {
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td span.font-mono {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem;
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface);
    padding: 0.25rem 0.5rem;
    border-radius: var(--md3-shape-small);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .flex.items-center.gap-2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .material-symbols-outlined.text-slate-400 {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--md-sys-color-on-surface-variant);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td span.font-medium {
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td span.font-semibold {
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .text-sm.text-slate-600 {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .inline-flex.items-center.gap-1 {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--md3-shape-small);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .bg-emerald-50 {
    background: var(--md3-success-container) !important;
    color: var(--md3-on-success-container) !important;
    border: 1px solid var(--md3-success);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .bg-amber-50 {
    background: var(--md-sys-color-tertiary-container) !important;
    color: var(--md-sys-color-on-tertiary-container) !important;
    border: 1px solid var(--md-sys-color-tertiary);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .bg-slate-50 {
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .text-emerald-700 {
    color: var(--md3-on-success-container) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .text-amber-700 {
    color: var(--md-sys-color-on-tertiary-container) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .text-slate-700 {
    color: var(--md-sys-color-on-surface) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .material-symbols-outlined.text-xs {
    font-size: 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td a.inline-flex.items-center.gap-1 {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    color: var(--md-sys-color-primary) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td a.text-blue-600 {
    color: var(--md-sys-color-primary) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td a:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    border-radius: var(--md3-shape-small);
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .material-symbols-outlined.text-base {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.main-wrapper.app-main .bg-white.rounded-xl tbody td .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant) !important;
    opacity: 0.6;
}

.main-wrapper.app-main .bg-white.rounded-xl .mt-6 {
    margin-top: 1.5rem;
}

.main-wrapper.app-main .bg-white.rounded-xl .mt-6 nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.main-wrapper.app-main .bg-white.rounded-xl .mt-6 nav a,
.main-wrapper.app-main .bg-white.rounded-xl .mt-6 nav span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    border-radius: var(--md3-shape-medium);
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.main-wrapper.app-main .bg-white.rounded-xl .mt-6 nav a[rel="prev"],
.main-wrapper.app-main .bg-white.rounded-xl .mt-6 nav a[rel="next"] {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
}

.main-wrapper.app-main .bg-white.rounded-xl .mt-6 nav span.relative {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
    font-weight: 600;
}

.main-wrapper.app-main .bg-white.rounded-xl .mt-6 nav a:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

@media (max-width: 1023px) {
    .main-wrapper.app-main .bg-white.rounded-xl table {
        font-size: 0.8125rem;
    }

    .main-wrapper.app-main .bg-white.rounded-xl thead th,
    .main-wrapper.app-main .bg-white.rounded-xl tbody td {
        padding: 0.75rem 0.5rem;
    }

    .main-wrapper.app-main .bg-white.rounded-xl thead th {
        font-size: 0.8125rem;
    }

    .main-wrapper.app-main .bg-white.rounded-xl tbody td {
        font-size: 0.8125rem;
    }
}

/* =================================================================
   SECTION 15: ACCOUNT PROFILE FORM INPUTS (Material Design 3)
   ================================================================= */

.main-wrapper.app-main .bg-white.rounded-xl form input[type="text"],
.main-wrapper.app-main .bg-white.rounded-xl form input[type="email"],
.main-wrapper.app-main .bg-white.rounded-xl form textarea {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    background: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-medium) !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: var(--md-sys-color-on-surface) !important;
    transition: border-color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
                box-shadow var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
                background-color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard) !important;
    outline: none !important;
    box-shadow: none !important;
}

.main-wrapper.app-main .bg-white.rounded-xl form input[type="text"].border-slate-300,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="email"].border-slate-300,
.main-wrapper.app-main .bg-white.rounded-xl form textarea.border-slate-300 {
    border-color: var(--md-sys-color-outline-variant) !important;
    background: var(--md-sys-color-surface) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl form input[type="text"]:hover,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="email"]:hover,
.main-wrapper.app-main .bg-white.rounded-xl form textarea:hover {
    border-color: var(--md-sys-color-outline) !important;
    background: var(--md-sys-color-surface) !important;
    box-shadow: none !important;
}

.main-wrapper.app-main .bg-white.rounded-xl form input[type="text"]:focus,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="email"]:focus,
.main-wrapper.app-main .bg-white.rounded-xl form textarea:focus,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="text"].focus\:ring-2:focus,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="email"].focus\:ring-2:focus,
.main-wrapper.app-main .bg-white.rounded-xl form textarea.focus\:ring-2:focus,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="text"].focus\:ring-blue-500:focus,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="email"].focus\:ring-blue-500:focus,
.main-wrapper.app-main .bg-white.rounded-xl form textarea.focus\:ring-blue-500:focus {
    border-color: var(--md-sys-color-primary) !important;
    background: var(--md-sys-color-surface) !important;
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container) !important;
    outline: none !important;
    ring: none !important;
    --tw-ring-offset-shadow: none !important;
    --tw-ring-shadow: none !important;
}

.main-wrapper.app-main .bg-white.rounded-xl form input[type="text"].focus\:border-blue-500:focus,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="email"].focus\:border-blue-500:focus,
.main-wrapper.app-main .bg-white.rounded-xl form textarea.focus\:border-blue-500:focus {
    border-color: var(--md-sys-color-primary) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl form input[type="text"]::placeholder,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="email"]::placeholder,
.main-wrapper.app-main .bg-white.rounded-xl form textarea::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
}

.main-wrapper.app-main .bg-white.rounded-xl form input[type="text"]:disabled,
.main-wrapper.app-main .bg-white.rounded-xl form input[type="email"]:disabled,
.main-wrapper.app-main .bg-white.rounded-xl form textarea:disabled {
    background: var(--md-sys-color-surface-container-lowest) !important;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
    cursor: not-allowed;
}

.main-wrapper.app-main .bg-white.rounded-xl form input.border-red-500,
.main-wrapper.app-main .bg-white.rounded-xl form textarea.border-red-500 {
    border-color: var(--md3-error) !important;
    background: var(--md3-error-container) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl form input.border-red-500:focus,
.main-wrapper.app-main .bg-white.rounded-xl form textarea.border-red-500:focus {
    border-color: var(--md3-error) !important;
    box-shadow: 0 0 0 2px var(--md3-error-container);
}

.main-wrapper.app-main .bg-white.rounded-xl form textarea {
    resize: vertical;
    min-height: 6rem;
    font-family: inherit;
}

.main-wrapper.app-main .bg-white.rounded-xl form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 0.5rem;
}

.main-wrapper.app-main .bg-white.rounded-xl form label .text-red-500 {
    color: var(--md3-error) !important;
}

.main-wrapper.app-main .bg-white.rounded-xl form .text-sm.text-red-600 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md3-error) !important;
    margin-top: 0.25rem;
}

.main-wrapper.app-main .bg-white.rounded-xl form .text-xs.text-slate-500 {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.25rem;
}

@media (max-width: 639px) {
    .main-wrapper.app-main .p-4.lg\:p-6 {
        padding: 1rem;
    }

    .main-wrapper.app-main .bg-white.rounded-xl {
        padding: 1rem !important;
    }

    .main-wrapper.app-main .bg-white.rounded-xl thead th,
    .main-wrapper.app-main .bg-white.rounded-xl tbody td {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
    }

    .main-wrapper.app-main .bg-white.rounded-xl tbody td .inline-flex.items-center.gap-1 {
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
    }

    .main-wrapper.app-main .bg-white.rounded-xl form input[type="text"],
    .main-wrapper.app-main .bg-white.rounded-xl form input[type="email"],
    .main-wrapper.app-main .bg-white.rounded-xl form textarea {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
}

.content-wrapper .bg-white.rounded-2xl form button[class*="bg-\[rgb"] {
    background: var(--md-sys-color-primary) !important;
    background-color: var(--md-sys-color-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

.content-wrapper .bg-white.rounded-2xl form button[class*="bg-\[rgb"]:hover {
    background: var(--md-sys-color-primary) !important;
    background-color: var(--md-sys-color-primary) !important;
    opacity: 0.92 !important;
    box-shadow: none !important;
    transform: none !important;
}

.content-wrapper .bg-white.rounded-2xl form button[class*="bg-\[rgb"]:active {
    background: var(--md-sys-color-primary) !important;
    background-color: var(--md-sys-color-primary) !important;
    opacity: 0.88 !important;
    box-shadow: none !important;
    transform: none !important;
}

.content-wrapper .bg-white.rounded-2xl p.text-center.text-sm {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    margin-top: 0.5rem;
}

.content-wrapper .bg-white.rounded-2xl p.text-center.text-sm a {
    color: var(--md-sys-color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .bg-white.rounded-2xl p.text-center.text-sm a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.content-wrapper .bg-white.rounded-2xl .flex.items-center.gap-3.my-4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.content-wrapper .bg-white.rounded-2xl .flex-1.h-px {
    flex: 1;
    height: 1px;
    background: var(--md-sys-color-outline-variant);
}

.content-wrapper .bg-white.rounded-2xl span.text-sm.text-gray-400 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}

.content-wrapper .bg-white.rounded-2xl a.w-full.h-\[50px\] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 3.5rem;
    min-height: 3.5rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-medium);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.content-wrapper .bg-white.rounded-2xl a.w-full.h-\[50px\]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .bg-white.rounded-2xl a.w-full.h-\[50px\]:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.content-wrapper .bg-white.rounded-2xl a.w-full.h-\[50px\]:hover {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container-low);
}

.content-wrapper .bg-white.rounded-2xl a.w-full.h-\[50px\]:active::before {
    opacity: var(--md3-state-press-opacity);
}

.content-wrapper .bg-white.rounded-2xl a.w-full.h-\[50px\]:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.content-wrapper .bg-white.rounded-2xl a.w-full.h-\[50px\] svg {
    width: 1.25rem;
    height: 1.25rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

@media (max-width: 639px) {
    .content-wrapper .bg-white.rounded-2xl {
        padding: 1.5rem !important;
        margin: 1rem;
    }

    .content-wrapper .bg-white.rounded-2xl h2 {
        font-size: 1.25rem;
        line-height: 1.75rem;
        margin-bottom: 1.25rem;
    }
}

.sidebar-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-full);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    box-shadow: var(--md3-elevation-level1);
    position: relative;
    overflow: hidden;
}

.sidebar-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.sidebar-toggle:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.sidebar-toggle:hover {
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--md3-elevation-level2);
    transform: translateY(-1px);
}

.sidebar-toggle__icon-stack {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle__icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
}

.sidebar-toggle__icon--menu {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.sidebar-toggle__icon--close {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
}

.sidebar-toggle.is-active .sidebar-toggle__icon--menu,
body.sidebar-open .sidebar-toggle__icon--menu {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
}

.sidebar-toggle.is-active .sidebar-toggle__icon--close,
body.sidebar-open .sidebar-toggle__icon--close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.sidebar-toggle.is-active,
body.sidebar-open .sidebar-toggle {
    background: var(--md-sys-color-secondary-container);
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--md3-elevation-level2);
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
}

.sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
}

body.sidebar-open {
    overflow: hidden;
}

@media (min-width: 1024px) {
    .floating-nav--admin {
        transform: translateX(0);
    }

    body.sidebar-collapsed .floating-nav--admin {
        transform: translateX(-100%);
    }

    body.sidebar-collapsed .floating-nav--admin.active {
        transform: translateX(0);
        z-index: 150;
    }

    .flex.min-h-screen:has(.floating-nav--admin) .main-wrapper.app-main {
        margin-left: 0 !important;
        width: calc(100% - 280px) !important;
    }

    body.sidebar-collapsed .flex.min-h-screen:has(.floating-nav--admin) .main-wrapper.app-main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .sidebar-backdrop {
        display: none;
    }

    body.sidebar-open {
        overflow: auto;
    }

    body.sidebar-open .site-header,
    body.sidebar-open .main-wrapper {
        filter: none;
        pointer-events: auto;
        user-select: auto;
    }
}

@media (max-width: 1023px) {
    .floating-nav--admin {
        inset: 0;
        width: 100%;
        max-width: 85vw;
        border-radius: 0;
    }

    body.sidebar-open .floating-nav--admin {
        transform: translateX(0);
        z-index: 150;
    }

    .floating-nav--admin .floating-nav__stack {
        padding: 1.25rem 1rem;
        gap: 0.75rem;
    }

    .floating-nav--admin .floating-nav__header {
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
        margin-bottom: 0.5rem;
    }

    .site-header {
        width: calc(100% - 2rem);
        margin: 1rem auto 0;
        padding: 0.625rem 1.25rem;
    }

    .site-header__quick-stats {
        display: none;
    }

    .user-menu-info {
        display: none;
    }

    .user-menu-toggle {
        padding: 0.375rem;
        height: 2.5rem;
        min-height: 2.5rem;
    }

    .user-menu-avatar {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
        font-size: 0.8125rem;
    }

    .user-menu-chevron {
        display: none;
    }

    body.sidebar-open .main-wrapper,
    body.sidebar-open .site-header {
        filter: blur(4px);
        pointer-events: none;
        user-select: none;
    }
}

@media (max-width: 639px) {
    .floating-nav--admin {
        width: 100%;
        max-width: 100%;
        padding: 1.25rem 1rem;
    }

    .floating-nav--admin .floating-nav__header-meta {
        font-size: 1.25rem;
    }

    .floating-nav--admin .floating-nav__nav-link {
        gap: 0.625rem;
        padding: 0.75rem 0.875rem;
    }

    .floating-nav--admin .floating-nav__nav-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.25rem;
    }

    .site-header {
        width: calc(100% - 1rem);
        margin: 0.75rem auto 0;
        padding: 0.5rem 1rem;
    }

    .site-header-brand__meta {
        font-size: 0.688rem;
    }

    .site-header-brand__title {
        font-size: 0.938rem;
    }

    .sidebar-toggle {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .user-menu-avatar {
        width: 2rem;
        height: 2rem;
    }
}

/* =================================================================
   SECTION 14: TRANSACTION LOOKUP PAGE (Material Design 3)
   ================================================================= */

.flex.min-h-screen.bg-slate-50 {
    background: var(--md-sys-color-surface-container-lowest);
}

.main-wrapper.flex-1.flex.flex-col {
    background: var(--md-sys-color-surface);
}

.content-wrapper.flex-1.w-full.max-w-3xl.mx-auto.px-4.py-12 {
    background: var(--md-sys-color-surface);
}

.content-wrapper.flex-1 .mb-8 {
    margin-bottom: 2rem;
}

.content-wrapper.flex-1 .mb-8 .text-xs.font-bold.uppercase {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--md-sys-color-primary);
}

.content-wrapper.flex-1 .mb-8 h1.text-3xl.font-black {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--md-sys-color-on-surface);
}

.content-wrapper.flex-1 .mb-8 p.text-slate-500 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
}

.content-wrapper.flex-1 .mb-8 a.hidden.sm\:inline-flex {
    display: none;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md3-shape-large);
    padding: 0.625rem 1rem;
    color: var(--md-sys-color-on-surface);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

@media (min-width: 640px) {
    .content-wrapper.flex-1 .mb-8 a.hidden.sm\:inline-flex {
        display: inline-flex;
    }
}

.content-wrapper.flex-1 .mb-8 a.hidden.sm\:inline-flex::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper.flex-1 .mb-8 a.hidden.sm\:inline-flex:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.content-wrapper.flex-1 .mb-8 a.hidden.sm\:inline-flex:hover {
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--md-sys-color-on-surface-variant);
}

.content-wrapper.flex-1 .mb-8 a.hidden.sm\:inline-flex .material-symbols-outlined {
    font-size: 1.125rem;
}

.content-wrapper .rounded-3xl.bg-red-50 {
    background: var(--md3-error-container) !important;
    border: 1px solid var(--md3-error) !important;
    border-radius: var(--md3-shape-extra-large) !important;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--md3-elevation-level0);
}

.content-wrapper .rounded-3xl.bg-red-50 .material-symbols-outlined {
    color: var(--md3-error);
    font-size: 1.25rem;
}

.content-wrapper .rounded-3xl.bg-red-50 p.font-medium {
    color: var(--md3-on-error-container);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.content-wrapper .rounded-3xl.bg-white {
    background: var(--md-sys-color-surface) !important;
    border-radius: var(--md3-shape-extra-large) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md3-elevation-level2) !important;
    padding: 2rem;
}

.content-wrapper .rounded-3xl.bg-white .inline-flex.h-20.w-20 {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--md-sys-color-surface);
}

.content-wrapper .rounded-3xl.bg-white .inline-flex.h-20.w-20 .material-symbols-outlined {
    font-size: 2rem;
}

.content-wrapper .rounded-3xl.bg-white h2.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.content-wrapper .rounded-3xl.bg-white p.text-slate-500 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
}

.content-wrapper .rounded-3xl.bg-white .space-y-2 .text-xs {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}

.content-wrapper .rounded-3xl.bg-white input[type="text"]#lookupLicenseKey {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md3-shape-large);
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .rounded-3xl.bg-white input[type="text"]#lookupLicenseKey:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}

.content-wrapper .rounded-3xl.bg-white button[type="button"].bg-indigo-600 {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    border: none;
    border-radius: var(--md3-shape-large);
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    box-shadow: var(--md3-elevation-level1);
    position: relative;
    overflow: hidden;
}

.content-wrapper .rounded-3xl.bg-white button[type="button"].bg-indigo-600::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-primary);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .rounded-3xl.bg-white button[type="button"].bg-indigo-600:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.content-wrapper .rounded-3xl.bg-white button[type="button"].bg-indigo-600:hover {
    box-shadow: var(--md3-elevation-level2);
}

.content-wrapper .rounded-3xl.bg-white button[type="button"].bg-indigo-600:active {
    box-shadow: var(--md3-elevation-level1);
}

.content-wrapper .rounded-3xl.bg-white button[type="button"].bg-indigo-600 .material-symbols-outlined {
    font-size: 1.125rem;
}

.content-wrapper .rounded-3xl.bg-white button[type="button"].bg-emerald-600 {
    background: var(--md3-success) !important;
    color: var(--md3-on-success) !important;
    box-shadow: var(--md3-elevation-level1);
}

.content-wrapper .rounded-3xl.bg-white a.bg-slate-900 {
    background: var(--md-sys-color-on-surface) !important;
    color: var(--md-sys-color-surface) !important;
    border: none;
    border-radius: var(--md3-shape-large);
    padding: 1rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: var(--md3-elevation-level2);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.content-wrapper .rounded-3xl.bg-white a.bg-slate-900::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-surface);
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .rounded-3xl.bg-white a.bg-slate-900:hover::before {
    opacity: var(--md3-state-hover-opacity);
}

.content-wrapper .rounded-3xl.bg-white a.bg-slate-900:hover {
    background: var(--md-sys-color-on-surface) !important;
    box-shadow: var(--md3-elevation-level3);
}

.content-wrapper .rounded-3xl.bg-white a.bg-slate-900 .material-symbols-outlined {
    font-size: 1.25rem;
}

.content-wrapper .rounded-3xl.bg-white .grid.gap-6 .text-xs {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}

.content-wrapper .rounded-3xl.bg-white .grid.gap-6 .text-sm {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.content-wrapper .rounded-3xl.bg-white .grid.gap-6 .text-emerald-600 {
    color: var(--md3-success);
}

.content-wrapper form.rounded-3xl.bg-white {
    background: var(--md-sys-color-surface) !important;
    border-radius: var(--md3-shape-extra-large) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md3-elevation-level2) !important;
    padding: 2rem;
}

.content-wrapper form.rounded-3xl.bg-white label.text-sm {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.content-wrapper form.rounded-3xl.bg-white input[type="text"]#transaction_id {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md3-shape-large);
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--md-sys-color-on-surface);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper form.rounded-3xl.bg-white input[type="text"]#transaction_id:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}

.content-wrapper form.rounded-3xl.bg-white input[type="text"]#transaction_id::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
}

.content-wrapper form.rounded-3xl.bg-white p.text-sm.text-red-600 {
    font-size: 0.875rem;
    color: var(--md3-error);
    margin-top: 0.5rem;
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 24px !important;
    border: none !important;
    border-radius: 20px !important;
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    font-family: "Google Sans", "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.1s ease !important;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3) !important;
    width: 100% !important;
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600::before,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    pointer-events: none;
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600:active::before,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600:active::before {
    width: 300px;
    height: 300px;
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600:hover,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600:hover {
    box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3) !important;
    background: var(--md-sys-color-primary) !important;
    filter: brightness(0.95);
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600:focus,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.35), 0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600:active,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600:active {
    transform: scale(0.98) !important;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600:disabled,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600:disabled {
    background: rgba(29, 27, 32, 0.12) !important;
    color: rgba(29, 27, 32, 0.38) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600 .material-symbols-outlined,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600 .material-symbols-outlined {
    font-size: 1.125rem !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin-right: 0.5rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600.hover\:bg-indigo-700:hover,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600.hover\:bg-indigo-700:hover {
    background: var(--md-sys-color-primary) !important;
    filter: brightness(0.95);
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600.shadow-lg,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600.shadow-lg {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3) !important;
}

.content-wrapper form.rounded-3xl.bg-white button[type="submit"].bg-indigo-600.shadow-indigo-500\/20,
.content-wrapper form.rounded-3xl.bg-white button[type="submit"].w-full.inline-flex.items-center.justify-center.bg-indigo-600.shadow-indigo-500\/20 {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3) !important;
}

@media (max-width: 639px) {
    .content-wrapper.flex-1.w-full.max-w-3xl.mx-auto {
        padding: 1rem;
    }

    .content-wrapper .rounded-3xl.bg-white,
    .content-wrapper form.rounded-3xl.bg-white {
        padding: 1.5rem;
    }

    .content-wrapper .rounded-3xl.bg-white h2.text-2xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .content-wrapper .rounded-3xl.bg-white .inline-flex.h-20.w-20 {
        width: 4rem;
        height: 4rem;
    }

    .content-wrapper .rounded-3xl.bg-white .inline-flex.h-20.w-20 .material-symbols-outlined {
        font-size: 1.75rem;
    }
}

/* Copy button state changes for JS feedback */
.content-wrapper .rounded-3xl.bg-white button[type="button"][onclick*="copyLookupKey"] {
    transition: all 0.2s var(--md3-motion-easing-standard);
}

.content-wrapper .rounded-3xl.bg-white button[type="button"][onclick*="copyLookupKey"].bg-emerald-600 {
    background: var(--md3-success) !important;
    color: var(--md3-on-success) !important;
}

/* =================================================================
   SECTION 15: EMAIL TEMPLATES ADMIN PAGE (Material Design 3)
   ================================================================= */

/* Dashboard card override with inline styles */
.dashboard-card {
    background: var(--md-sys-color-surface) !important;
    border-radius: var(--md3-shape-large) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    padding: 1.5rem;
    transition: box-shadow var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.dashboard-card:hover {
    box-shadow: var(--md3-elevation-level2);
}

/* Success alert */
.dashboard-card.border-emerald-200 {
    background: var(--md3-success-container) !important;
    border: 1px solid var(--md3-success) !important;
}

.dashboard-card.border-emerald-200 .text-emerald-800 {
    color: var(--md3-on-success-container) !important;
}

.dashboard-card.border-emerald-200 .text-emerald-600 {
    color: var(--md3-success) !important;
}

/* Error alert */
.dashboard-card.border-red-200 {
    background: var(--md3-error-container) !important;
    border: 1px solid var(--md3-error) !important;
}

.dashboard-card.border-red-200 .text-red-800 {
    color: var(--md3-on-error-container) !important;
}

.dashboard-card.border-red-200 .text-red-600 {
    color: var(--md3-error) !important;
}

/* Back link */
.dashboard-card .text-sm.text-slate-500 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
}

.dashboard-card .text-sm.text-slate-500:hover {
    color: var(--md-sys-color-on-surface);
}

/* Page title */
.text-3xl.font-bold.text-slate-900 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0;
}

.text-sm.text-slate-600 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
}

/* Tab navigation */
.dashboard-card .flex.border-b {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.dashboard-card button.px-6.py-4.font-medium.text-sm.border-b-2 {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.dashboard-card button.px-6.py-4.font-medium.text-sm.border-b-2:hover {
    color: var(--md-sys-color-on-surface);
}

.dashboard-card button.px-6.py-4.font-medium.text-sm.border-b-2.border-indigo-600 {
    border-bottom-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}

.dashboard-card button.px-6.py-4.font-medium.text-sm.border-b-2.whitespace-nowrap .material-symbols-outlined {
    font-size: 1.125rem;
}

/* Icon containers with MD3 colors */
.dashboard-card .icon-container.bg-indigo-50 {
    background: var(--md-sys-color-primary-container);
}

.dashboard-card .icon-container.bg-indigo-50 .material-symbols-outlined {
    color: var(--md-sys-color-on-primary-container);
}

.dashboard-card .icon-container.bg-purple-50 {
    background: #f3e8ff;
}

.dashboard-card .icon-container.bg-purple-50 .material-symbols-outlined {
    color: #7c3aed;
}

.dashboard-card .icon-container.bg-pink-50 {
    background: #fce7f3;
}

.dashboard-card .icon-container.bg-pink-50 .material-symbols-outlined {
    color: #db2777;
}

.dashboard-card .icon-container.bg-emerald-50 {
    background: var(--md3-success-container);
}

.dashboard-card .icon-container.bg-emerald-50 .material-symbols-outlined {
    color: var(--md3-success);
}

/* Tab section headers */
.space-y-6 h2.text-xl.font-bold {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.space-y-6 h2.text-xl.font-bold + p.text-sm.text-slate-500 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
}

/* Form inputs */
.custom-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md3-shape-medium);
    background: var(--md-sys-color-surface);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.custom-input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    background: var(--md-sys-color-surface);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}

/* Form textarea */
.custom-input.font-mono.text-sm.min-h-\[300px\] {
    font-family: ui-monospace, 'Courier New', monospace;
    min-height: 200px;
    resize: vertical;
}

/* Custom select */
.custom-select {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md3-shape-medium);
    background: var(--md-sys-color-surface);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.custom-select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    background: var(--md-sys-color-surface);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}

/* Variable code blocks */
.bg-\[#F2F4F7\].p-4.rounded-xl.border {
    background: var(--md-sys-color-surface-container-low) !important;
    border-color: var(--md-sys-color-outline) !important;
}

.bg-\[#F2F4F7\].p-4.rounded-xl.border code {
    background: var(--md-sys-color-surface);
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--md-sys-color-primary);
}

/* Quill editor container override */
.bg-white.rounded-xl.border-2 .overflow-hidden {
    border-color: var(--md-sys-color-outline);
}

/* User search results */
#user_results.user-item {
    background: var(--md-sys-color-surface);
}

#user_results.user-item:hover {
    background: var(--md-sys-color-surface-container-low);
}

#user_results .font-medium {
    color: var(--md-sys-color-on-surface);
}

#user_results .text-sm {
    color: var(--md-sys-color-on-surface-variant);
}

/* Info alert */
.bg-blue-50.border-blue-200 {
    background: var(--md-sys-color-primary-container) !important;
    border: 1px solid var(--md-sys-color-primary) !important;
    border-radius: var(--md3-shape-large);
}

.bg-blue-50.border-blue-200 .text-blue-800 {
    color: var(--md-sys-color-on-primary-container) !important;
}

.bg-blue-50.border-blue-200 .material-symbols-outlined {
    color: var(--md-sys-color-on-primary);
}

.bg-blue-50.border-blue-200 strong {
    color: var(--md-sys-color-on-primary);
}

/* Buttons */
.px-8.py-4.border-2.text-slate-700 {
    border-color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.px-8.py-4.border-2.text-slate-700:hover {
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--md-sys-color-on-surface-variant);
}

.bg-indigo-600.shadow-lg {
    background: var(--md-sys-color-primary) !important;
    box-shadow: var(--md3-elevation-level2);
}

.bg-indigo-600.shadow-lg:hover {
    background: var(--md-sys-color-primary);
    box-shadow: var(--md3-elevation-level3);
}

/* Form labels */
.space-y-3 label.text-sm.font-semibold {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

/* Grid layout */
.grid.grid-cols-1.md\:grid-cols-2.gap-6 {
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-2.gap-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.content-wrapper nav {
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.14em;
}

.content-wrapper nav a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

.content-wrapper nav a:hover {
    text-decoration: underline;
}

.content-wrapper .product-summary {
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md3-elevation-level2);
    border-radius: var(--md3-shape-extra-large);
}

.content-wrapper .product-summary .inline-flex.items-center.rounded-full {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.content-wrapper .product-summary .mt-6.rounded-2xl {
    background: var(--md-sys-color-surface-container-highest);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md3-elevation-level1);
}

.content-wrapper #gallery-thumbnails img {
    border-radius: var(--md3-shape-medium);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md3-elevation-level1);
    transition: transform var(--md3-motion-duration-short4) var(--md3-motion-easing-standard),
        box-shadow var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}

.content-wrapper #gallery-thumbnails img:hover {
    transform: translateY(-2px);
    box-shadow: var(--md3-elevation-level2);
}

.content-wrapper .package-option {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md3-elevation-level0);
    transition: border-color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
        background var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.content-wrapper .package-option:hover {
    background: var(--md-sys-color-surface-container);
}

.content-wrapper .package-option.border-indigo-600 {
    border-color: var(--md-sys-color-primary);
}

.content-wrapper .package-option.bg-indigo-600\/5 {
    background: var(--md-sys-color-primary-container);
}

.content-wrapper .package-option input[type="radio"] {
    accent-color: var(--md-sys-color-primary);
}

.content-wrapper .ui-button.ui-button--primary {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md3-shape-large);
    box-shadow: var(--md3-elevation-level2);
}

.content-wrapper .ui-button.ui-button--primary:hover {
    box-shadow: var(--md3-elevation-level3);
}

/* Loading spinner */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 639px) {
    .dashboard-card {
        padding: 1rem;
    }

    .grid.grid-cols-1.md\:grid-cols-2.gap-6 {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   SECTION 16: PRODUCT SHOW PAGE (Material Design 3)
   ================================================================= */

/* Page layout */
.flex.min-h-screen.bg-slate-50 {
    background: var(--md-sys-color-surface-container-lowest);
}

.main-wrapper.flex-1.flex.flex-col {
    background: var(--md-sys-color-surface);
}

.content-wrapper.flex-1.w-full.max-w-6xl.mx-auto {
    background: var(--md-sys-color-surface);
}

/* Breadcrumb */
.mt-6.text-xs.font-semibold.uppercase.tracking-\[0\.2em\] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}

.mt-6.text-xs.font-semibold.uppercase.tracking-\[0\.2em\] a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    transition: opacity var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.mt-6.text-xs.font-semibold.uppercase.tracking-\[0\.2em\] a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Error alert */
.mt-6.rounded-2xl.bg-red-50 {
    background: var(--md3-error-container) !important;
    border: 1px solid var(--md3-error) !important;
    border-radius: var(--md3-shape-large) !important;
    padding: 1rem;
}

.mt-6.rounded-2xl.bg-red-50 .material-symbols-outlined {
    color: var(--md3-error);
}

.mt-6.rounded-2xl.bg-red-50 .text-red-700 {
    color: var(--md3-on-error-container) !important;
}

.mt-6.rounded-2xl.bg-red-50 .font-medium {
    font-weight: 600;
}

.mt-6.rounded-2xl.bg-red-50 p {
    color: var(--md3-on-error-container);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Gallery section */
.mt-6.grid.gap-10 .rounded-3xl.bg-white {
    background: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-extra-large) !important;
    padding: 1.5rem;
    box-shadow: var(--md3-elevation-level2);
    backdrop-filter: none;
}

.mt-6.grid.gap-10 .rounded-2xl.overflow-hidden {
    border-radius: var(--md3-shape-large);
    overflow: hidden;
}

.mt-6.grid.gap-10 .rounded-2xl.overflow-hidden img {
    height: 24rem;
    width: 100%;
    object-fit: cover;
    transition: transform var(--md3-motion-duration-medium4) var(--md3-motion-easing-standard);
}

.mt-6.grid.gap-10 .rounded-2xl.overflow-hidden.group:hover img {
    transform: scale(1.02);
}

.mt-6.grid.gap-10 .rounded-2xl.overflow-hidden .absolute.top-4 {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    border-radius: var(--md3-shape-full);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    box-shadow: var(--md3-elevation-level2);
}

.mt-6.grid.gap-10 .grid.grid-cols-3 img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--md3-shape-medium);
    opacity: 0.7;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
    cursor: pointer;
    border: 2px solid transparent;
}

.mt-6.grid.gap-10 .grid.grid-cols-3 img:hover {
    opacity: 1;
}

.mt-6.grid.gap-10 .grid.grid-cols-3 img.border-2 {
    opacity: 1;
    border-color: var(--md-sys-color-primary);
}

/* Product summary card */
.product-summary.rounded-3xl {
    background: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-extra-large) !important;
    padding: 1.5rem;
    box-shadow: var(--md3-elevation-level2);
}

.product-summary .inline-flex.rounded-full.bg-indigo-600 {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
    border-radius: var(--md3-shape-full);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
}

.product-summary .text-slate-500 .material-symbols-outlined {
    color: var(--md-sys-color-tertiary);
}

.product-summary .text-slate-500 {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
}

.content-wrapper .rounded-3xl.bg-white\/50 {
    background: var(--md-sys-color-surface-container-low) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md3-elevation-level1) !important;
    backdrop-filter: none !important;
}

.content-wrapper .rounded-3xl.bg-white\/80 {
    background: var(--md-sys-color-surface-container) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md3-elevation-level2) !important;
    backdrop-filter: none !important;
}

#gallery-thumbnails img {
    border-radius: var(--md3-shape-medium);
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md3-elevation-level0);
    transition: transform var(--md3-motion-duration-short4) var(--md3-motion-easing-standard),
        box-shadow var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}

#gallery-thumbnails img:hover {
    transform: translateY(-2px);
    box-shadow: var(--md3-elevation-level1);
}

.product-summary h1.text-2xl {
    font-size: 1.625rem;
    line-height: 2.25rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
}

.product-summary p.text-sm.uppercase {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--md-sys-color-on-surface-variant);
}

.product-summary .rounded-2xl.bg-slate-900 {
    background: var(--md-sys-color-primary-container) !important;
    border-radius: var(--md3-shape-large) !important;
    padding: 1.5rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md3-elevation-level1);
    color: var(--md-sys-color-on-primary-container);
}

.product-summary .rounded-2xl.bg-slate-900 .text-white\/60 {
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.7;
}

.product-summary .rounded-2xl.bg-slate-900 .text-2xl {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--md-sys-color-on-primary-container);
}

.product-summary .rounded-2xl.bg-slate-900 .text-emerald-400 {
    color: var(--md-sys-color-on-primary-container);
}

.product-summary .rounded-2xl.bg-slate-900 .text-white {
    color: var(--md-sys-color-on-primary-container);
}

/* Package selection */
.product-summary label.text-xs {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
}

.product-summary .package-option {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md3-shape-large);
    padding: 0.75rem 1rem;
    background: var(--md-sys-color-surface-container-low);
    transition: background var(--md3-motion-duration-short2) var(--md3-motion-easing-standard),
        border-color var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.product-summary .package-option:hover:not(.cursor-not-allowed) {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container);
}

.product-summary .package-option.border-indigo-600 {
    border-color: var(--md-sys-color-secondary) !important;
    background: var(--md-sys-color-secondary-container) !important;
}

.product-summary .package-option.border-indigo-600 .package-name,
.product-summary .package-option.border-indigo-600 .package-price {
    color: var(--md-sys-color-on-secondary-container) !important;
}

.product-summary .package-option .bg-red-100 {
    background: var(--md3-error-container) !important;
    color: var(--md3-on-error-container) !important;
}

.product-summary .package-option .w-4 {
    width: 1rem;
    height: 1rem;
    accent-color: var(--md-sys-color-primary);
}

.product-summary .package-option .text-slate-700 {
    color: var(--md-sys-color-on-surface);
}

.product-summary .package-option .text-indigo-600 {
    color: var(--md-sys-color-primary) !important;
}

.product-summary .package-option .text-emerald-600 {
    color: var(--md3-success);
}

.product-summary .package-option .text-slate-500 {
    color: var(--md-sys-color-on-surface-variant);
}

.product-summary .package-option .text-emerald-500 {
    color: var(--md3-success);
}

.product-summary .package-option .text-gray-200 {
    color: var(--md-sys-color-outline-variant);
}

/* Buy now button */
.product-summary .ui-button--primary {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 0.875rem 1.5rem;
    font-weight: 600;
    border-radius: var(--md3-shape-large);
    box-shadow: var(--md3-elevation-level1);
}

.product-summary .ui-button--primary:hover {
    box-shadow: var(--md3-elevation-level2);
}

.product-summary .ui-button--primary .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Description section */
.mt-12 .rounded-3xl.bg-white {
    background: var(--md-sys-color-surface-container-low) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-extra-large) !important;
    padding: 2rem;
    box-shadow: var(--md3-elevation-level1);
}

.mt-12 h2.text-xl {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.mt-12 h2 .material-symbols-outlined {
    color: var(--md-sys-color-primary);
}

.mt-12 .prose {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.5rem;
}

/* Reviews section */
#reviews h2 .material-symbols-outlined {
    color: var(--md-sys-color-tertiary);
}

#reviews .toggle-review-btn {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border: none;
    border-radius: var(--md3-shape-medium);
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

#reviews .toggle-review-btn:hover {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* Review form */
#reviews .bg-white {
    background: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-large) !important;
    padding: 1.5rem;
    box-shadow: var(--md3-elevation-level1);
}

#reviews .bg-white h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

#reviews .bg-white .close-review-btn {
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    padding: 0.25rem;
    border-radius: var(--md3-shape-small);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

#reviews .bg-white .close-review-btn:hover {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-low);
}

#reviews .bg-white label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

#reviews .bg-white input[type="radio"]:checked + span {
    color: var(--md-sys-color-tertiary);
}

#reviews .bg-white textarea {
    width: 100%;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md3-shape-large);
    background: var(--md-sys-color-surface-container-low);
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface);
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

#reviews .bg-white textarea:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}

#reviews .bg-white textarea::placeholder {
    color: var(--md-sys-color-on-surface-variant);
}

/* Review login prompt */
#reviews .bg-indigo-50 {
    background: var(--md-sys-color-primary-container) !important;
    border: 1px solid var(--md-sys-color-primary) !important;
    border-radius: var(--md3-shape-large) !important;
    padding: 1.5rem;
}

#reviews .bg-indigo-50 .text-indigo-800 {
    color: var(--md-sys-color-on-primary-container) !important;
}

#reviews .bg-indigo-50 a {
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    font-weight: 600;
}

#reviews .bg-indigo-50 a:hover {
    text-decoration: underline;
}

/* Review items */
#reviews .rounded-2xl.bg-white {
    background: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-large) !important;
    padding: 1.5rem;
}

#reviews .rounded-2xl.bg-white .w-10 {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: 50%;
}

#reviews .rounded-2xl.bg-white h4 {
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

#reviews .rounded-2xl.bg-white .text-slate-500 {
    color: var(--md-sys-color-on-surface-variant);
}

#reviews .rounded-2xl.bg-white .text-amber-400 {
    color: var(--md-sys-color-tertiary);
}

#reviews .rounded-2xl.bg-white .text-slate-300 {
    color: var(--md-sys-color-outline-variant);
}

#reviews .rounded-2xl.bg-white .text-slate-600 {
    color: var(--md-sys-color-on-surface-variant);
}

#reviews .text-slate-500 {
    color: var(--md-sys-color-on-surface-variant);
}

/* Sidebar info */
.space-y-6 .rounded-3xl.bg-white {
    background: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-extra-large) !important;
    padding: 1.5rem;
    box-shadow: var(--md3-elevation-level2);
}

.space-y-6 h3 {
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.space-y-6 .text-sm.text-slate-600 {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
}

.space-y-6 .text-slate-400 {
    color: var(--md-sys-color-on-surface-variant);
}

/* Related products section */
.mt-16 h2 .material-symbols-outlined {
    color: var(--md-sys-color-primary);
}

.mt-16 h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.mt-16 .border-t {
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.mt-16 .text-slate-500 {
    color: var(--md-sys-color-on-surface-variant);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--md3-shape-medium);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard);
}

.pagination a {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface);
}

.pagination a:hover {
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}

.pagination .page-item.active span {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: 1px solid var(--md-sys-color-primary);
}

.pagination .disabled {
    opacity: 0.38;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 1023px) {
    .product-summary.rounded-3xl {
        position: static;
    }

    .mt-6.grid.gap-10 .rounded-2xl.overflow-hidden img {
        height: 20rem;
    }
}

@media (max-width: 639px) {
    .mt-6.grid.gap-10 .rounded-2xl.overflow-hidden img {
        height: 16rem;
    }

    .mt-6.grid.gap-10 .rounded-3xl.bg-white {
        padding: 1rem;
    }

    .product-summary.rounded-3xl {
        padding: 1rem;
    }

    .product-summary .rounded-2xl.bg-slate-900 {
        padding: 1rem;
    }

    #reviews .bg-white {
        padding: 1rem;
    }
}