/* Google Material 3 & Android Native Theme Stylesheet */

:root {
    --primary-color: #1a73e8;
    --secondary-color: #202124;
    --accent-color: #0b57d0;
    --primary-rgb: 26, 115, 232;
    --secondary-rgb: 32, 33, 36;
    --accent-rgb: 11, 87, 208;
    --primary-contrast: #ffffff;
    --secondary-contrast: #ffffff;
    --accent-contrast: #ffffff;

    /* Google Brand Palette */
    --google-blue: #1a73e8;
    --google-red: #ea4335;
    --google-yellow: #fbbc04;
    --google-green: #34a853;

/* Material 3 Surface Tokens (Light Mode) */
    --m3-surface: #ffffff;
    --m3-surface-dim: #f8fafd;
    --m3-surface-container: #f1f3f4;
    --m3-surface-container-high: #e8eaed;
    --m3-on-surface: #202124;
    --m3-on-surface-variant: #5f6368;
    --m3-outline: #dadce0;
    --m3-outline-variant: #e8eaed;

    --livewire-progress-bar-color: #1a73e8;
}

html.dark {
    /* Material 3 Surface Tokens (Dark Mode) */
    --m3-surface: #1e2023;
    --m3-surface-dim: #121316;
    --m3-surface-container: #282a2d;
    --m3-surface-container-high: #333538;
    --m3-on-surface: #e8eaed;
    --m3-on-surface-variant: #9aa0a6;
    --m3-outline: #3c4043;
    --m3-outline-variant: #5f6368;
}

/* Material 3 Surface & Border Utility Classes */
.bg-surface {
    background-color: #ffffff !important;
}
html.dark .bg-surface {
    background-color: #1e2023 !important;
}
.bg-surface-dim {
    background-color: #f8fafd !important;
}
html.dark .bg-surface-dim {
    background-color: #121316 !important;
}
.bg-surface-container {
    background-color: #f1f3f4 !important;
}
html.dark .bg-surface-container {
    background-color: #282a2d !important;
}
.bg-surface-container-high {
    background-color: #e8eaed !important;
}
html.dark .bg-surface-container-high {
    background-color: #333538 !important;
}

.text-on-surface {
    color: #202124 !important;
}
.text-on-surface-variant {
    color: #5f6368 !important;
}
html.dark .text-on-surface {
    color: #e8eaed !important;
}
html.dark .text-on-surface-variant {
    color: #9aa0a6 !important;
}

/* Comprehensive Dark Mode Typography & Container Guarantees */
html.dark body {
    background-color: #121316 !important;
    color: #e8eaed !important;
}
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: #e8eaed !important;
}
html.dark [class*="text-[#202124]"],
html.dark [class*="dark:text-[#e8eaed]"],
html.dark [class*="dark:text-white"],
html.dark .text-slate-900,
html.dark .text-gray-900,
html.dark .text-slate-800,
html.dark .text-gray-800 {
    color: #e8eaed !important;
}
html.dark [class*="dark:text-gray-400"],
html.dark [class*="dark:text-slate-400"],
html.dark [class*="dark:text-gray-300"],
html.dark [class*="dark:text-slate-300"] {
    color: #9aa0a6 !important;
}
html.dark [class*="dark:bg-[#1e2023]"],
html.dark [class*="dark:bg-[#202124]"],
html.dark [class*="dark:bg-[#1e1f20]"],
html.dark [class*="dark:bg-[#131415]"],
html.dark [class*="dark:bg-slate-900"],
html.dark [class*="dark:bg-gray-900"],
html.dark .bg-white[class*="dark:bg-"] {
    background-color: #1e2023 !important;
}
html.dark [class*="dark:bg-[#121316]"],
html.dark [class*="dark:bg-[#0f1012]"] {
    background-color: #121316 !important;
}
html.dark [class*="dark:bg-[#282a2c]"],
html.dark [class*="dark:bg-[#282a2d]"],
html.dark [class*="dark:bg-[#2d2f31]"],
html.dark [class*="dark:bg-[#333538]"],
html.dark [class*="dark:bg-slate-800"],
html.dark [class*="dark:bg-gray-800"] {
    background-color: #282a2d !important;
}
html.dark [class*="dark:border-gray-800"],
html.dark [class*="dark:border-gray-700"],
html.dark [class*="dark:border-slate-800"],
html.dark [class*="dark:border-slate-700"] {
    border-color: #3c4043 !important;
}

.border-outline {
    border-color: #dadce0 !important;
}
.border-outline\/20 {
    border-color: rgba(218, 220, 224, 0.4) !important;
}
.border-outline\/30 {
    border-color: rgba(218, 220, 224, 0.6) !important;
}
.border-outline\/40 {
    border-color: rgba(218, 220, 224, 0.8) !important;
}
html.dark .border-outline {
    border-color: #3c4043 !important;
}
html.dark .border-outline\/20 {
    border-color: rgba(60, 64, 67, 0.4) !important;
}
html.dark .border-outline\/30 {
    border-color: rgba(60, 64, 67, 0.6) !important;
}
html.dark .border-outline\/40 {
    border-color: rgba(60, 64, 67, 0.8) !important;
}

/* Material 3 Elevation Shadows */
.m3-elevation-0 {
    box-shadow: none;
}
.m3-elevation-1 {
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15), 0 1px 2px 0 rgba(60, 64, 67, 0.1);
}
.m3-elevation-2 {
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.2), 0 4px 8px 3px rgba(60, 64, 67, 0.1);
}
.m3-elevation-3 {
    box-shadow: 0 2px 6px 0 rgba(60, 64, 67, 0.25), 0 8px 16px 4px rgba(60, 64, 67, 0.12);
}
.m3-elevation-4 {
    box-shadow: 0 4px 8px 0 rgba(60, 64, 67, 0.3), 0 12px 24px 6px rgba(60, 64, 67, 0.15);
}

html.dark .m3-elevation-1 {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
html.dark .m3-elevation-2 {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5), 0 4px 10px 2px rgba(0, 0, 0, 0.3);
}
html.dark .m3-elevation-3 {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.6), 0 8px 20px 4px rgba(0, 0, 0, 0.4);
}

/* Google Material Indeterminate Linear Progress Bar */
.m3-linear-progress {
    position: relative;
    width: 100%;
    height: 3px;
    background-color: rgba(var(--primary-rgb), 0.15);
    overflow: hidden;
}
.m3-linear-progress::before,
.m3-linear-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    background-color: var(--primary-color);
}
.m3-linear-progress::before {
    animation: m3-linear-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.m3-linear-progress::after {
    animation: m3-linear-indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation-delay: 1.15s;
}

@keyframes m3-linear-indeterminate {
    0% { left: -35%; right: 100%; }
    60% { left: 100%; right: -90%; }
    100% { left: 100%; right: -90%; }
}
@keyframes m3-linear-indeterminate-short {
    0% { left: -200%; right: 100%; }
    60% { left: 107%; right: -8%; }
    100% { left: 107%; right: -8%; }
}

/* Google Material Indeterminate Circular Spinner */
.m3-circular-spinner {
    animation: m3-spinner-rotate 2s linear infinite;
    transform-origin: center center;
}
.m3-circular-spinner circle {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: m3-spinner-dash 1.5s ease-in-out infinite, m3-spinner-color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes m3-spinner-rotate {
    100% { transform: rotate(360deg); }
}
@keyframes m3-spinner-dash {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; }
    100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}
@keyframes m3-spinner-color {
    100%, 0% { stroke: var(--primary-color); }
    40% { stroke: #ea4335; }
    66% { stroke: #fbbc04; }
    80% { stroke: #34a853; }
    90% { stroke: var(--primary-color); }
}

/* Google Material 3 Buttons */
.btn-material-filled, .btn-amazon-yellow, .btn-amazon-buy, .btn-amazon-orange {
    background-color: var(--primary-color) !important;
    color: var(--primary-contrast) !important;
    border-radius: 9999px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
}
.btn-material-filled:hover, .btn-amazon-yellow:hover, .btn-amazon-buy:hover, .btn-amazon-orange:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 6px 1px rgba(60, 64, 67, 0.25);
    transform: translateY(-1px);
}
.btn-material-filled:active, .btn-amazon-yellow:active, .btn-amazon-buy:active, .btn-amazon-orange:active {
    filter: brightness(0.95);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.2);
    transform: translateY(0);
}
.btn-material-filled svg:not([style*="color"]):not([class*="text-"]),
.btn-amazon-yellow svg:not([style*="color"]):not([class*="text-"]),
.btn-amazon-buy svg:not([style*="color"]):not([class*="text-"]) {
    color: var(--primary-contrast) !important;
}
.btn-material-filled span:not([style*="color"]):not([class*="text-"]),
.btn-amazon-yellow span:not([style*="color"]):not([class*="text-"]),
.btn-amazon-buy span:not([style*="color"]):not([class*="text-"]) {
    color: var(--primary-contrast) !important;
}

/* Hero Section Stacking Rules (Eliminate Duplication Glitch) */
.hero-slider-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
}
.hero-slide-item {
    grid-area: 1 / 1 / 2 / 2 !important;
}

.btn-material-tonal {
    background-color: rgba(var(--primary-rgb), 0.12) !important;
    color: var(--primary-color) !important;
    border-radius: 9999px !important;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    border: 1px solid transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-material-tonal:hover {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15);
}
html.dark .btn-material-tonal {
    background-color: rgba(var(--primary-rgb), 0.25) !important;
    color: #8ab4f8 !important;
}

.btn-material-outlined {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    border: 1px solid #dadce0 !important;
    border-radius: 9999px !important;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html.dark .btn-material-outlined {
    color: #e8eaed !important;
    border-color: #3c4043 !important;
}
.btn-material-outlined:hover {
    background-color: rgba(var(--primary-rgb), 0.08) !important;
    border-color: var(--primary-color) !important;
}

/* Google Material 3 Outlined Form Inputs & Dropdowns (Matches Google Sign-In & Workspace) */
.m3-input,
.m3-outlined-input,
.auth-card input[type="text"]:not([type="checkbox"]):not([type="radio"]),
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="number"],
.auth-card input[type="tel"],
.auth-card input[type="search"],
form input[type="text"]:not([type="checkbox"]):not([type="radio"]):not(.google-search-input):not([class*="rounded-full"]),
form input[type="email"]:not([class*="rounded-full"]),
form input[type="password"]:not([class*="rounded-full"]),
form input[type="number"]:not([class*="rounded-full"]),
form input[type="tel"]:not([class*="rounded-full"]) {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 4px; /* Google Material 3 4px standard radius */
    border: 1px solid #747775;
    background-color: #ffffff;
    color: #1f1f1f;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    outline: none;
    box-sizing: border-box;
}

html.dark .m3-input,
html.dark .m3-outlined-input,
html.dark .auth-card input[type="text"]:not([type="checkbox"]):not([type="radio"]),
html.dark .auth-card input[type="email"],
html.dark .auth-card input[type="password"],
html.dark .auth-card input[type="number"],
html.dark .auth-card input[type="tel"],
html.dark .auth-card input[type="search"],
html.dark form input[type="text"]:not([type="checkbox"]):not([type="radio"]):not(.google-search-input):not([class*="rounded-full"]),
html.dark form input[type="email"]:not([class*="rounded-full"]),
html.dark form input[type="password"]:not([class*="rounded-full"]),
html.dark form input[type="number"]:not([class*="rounded-full"]),
html.dark form input[type="tel"]:not([class*="rounded-full"]) {
    border-color: #8e918f;
    background-color: #1e2023;
    color: #e3e3e3;
}

.m3-input:hover:not(:focus):not([disabled]),
.m3-outlined-input:hover:not(:focus):not([disabled]),
.auth-card input:hover:not(:focus):not([disabled]),
form input:hover:not(:focus):not([disabled]):not([type="checkbox"]):not([type="radio"]) {
    border-color: #1f1f1f;
}

html.dark .m3-input:hover:not(:focus):not([disabled]),
html.dark .m3-outlined-input:hover:not(:focus):not([disabled]),
html.dark .auth-card input:hover:not(:focus):not([disabled]),
html.dark form input:hover:not(:focus):not([disabled]):not([type="checkbox"]):not([type="radio"]) {
    border-color: #e3e3e3;
}

.m3-input:focus,
.m3-outlined-input:focus,
.auth-card input:focus:not([type="checkbox"]):not([type="radio"]),
form input:focus:not([type="checkbox"]):not([type="radio"]) {
    border: 2px solid var(--primary-color) !important;
    padding: calc(0.75rem - 1px) calc(1rem - 1px) !important;
    outline: none !important;
    box-shadow: none !important;
}

html.dark .m3-input:focus,
html.dark .m3-outlined-input:focus,
html.dark .auth-card input:focus:not([type="checkbox"]):not([type="radio"]),
html.dark form input:focus:not([type="checkbox"]):not([type="radio"]) {
    border-color: var(--primary-color) !important;
}

/* Material 3 Outlined Dropdown / Select */
.m3-select,
.m3-outlined-select,
.auth-card select,
form select:not([class*="rounded-full"]) {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 4px;
    border: 1px solid #747775;
    background-color: #ffffff;
    color: #1f1f1f;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23444746'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    outline: none;
    box-sizing: border-box;
}

html.dark {
    color-scheme: dark;
}
html.dark select,
html.dark input,
html.dark textarea {
    color-scheme: dark;
}

select option,
select optgroup,
.m3-select option,
.m3-outlined-select option {
    background-color: #ffffff;
    color: #202124;
}

html.dark .m3-select,
html.dark .m3-outlined-select,
html.dark .auth-card select,
html.dark form select:not([class*="rounded-full"]) {
    color-scheme: dark !important;
    border-color: #8e918f;
    background-color: #1e2023;
    color: #e8eaed !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23c4c7c5'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
}

html.dark select option,
html.dark select optgroup,
html.dark .m3-select option,
html.dark .m3-outlined-select option,
html.dark form select option {
    background-color: #1e2023 !important;
    color: #e8eaed !important;
}

html.dark select option:disabled,
html.dark .m3-select option:disabled {
    color: #8e918f !important;
}

.m3-select:hover:not(:focus):not([disabled]),
.m3-outlined-select:hover:not(:focus):not([disabled]),
.auth-card select:hover:not(:focus):not([disabled]),
form select:hover:not(:focus):not([disabled]):not([class*="rounded-full"]) {
    border-color: #1f1f1f;
}

html.dark .m3-select:hover:not(:focus):not([disabled]),
html.dark .m3-outlined-select:hover:not(:focus):not([disabled]),
html.dark .auth-card select:hover:not(:focus):not([disabled]),
html.dark form select:hover:not(:focus):not([disabled]):not([class*="rounded-full"]) {
    border-color: #e3e3e3;
}

.m3-select:focus,
.m3-outlined-select:focus,
.auth-card select:focus,
form select:focus:not([class*="rounded-full"]) {
    border: 2px solid var(--primary-color) !important;
    padding: calc(0.75rem - 1px) calc(2.5rem - 1px) calc(0.75rem - 1px) calc(1rem - 1px) !important;
    outline: none !important;
    box-shadow: none !important;
}

html.dark .m3-select:focus,
html.dark .m3-outlined-select:focus,
html.dark .auth-card select:focus,
html.dark form select:focus:not([class*="rounded-full"]) {
    border-color: var(--primary-color) !important;
}

/* Material 3 Outlined Textarea */
.m3-textarea,
.m3-outlined-textarea,
.auth-card textarea,
form textarea {
    width: 100%;
    min-height: 96px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 4px;
    border: 1px solid #747775;
    background-color: #ffffff;
    color: #1f1f1f;
    transition: border-color 0.15s ease;
    outline: none;
    box-sizing: border-box;
}

html.dark .m3-textarea,
html.dark .m3-outlined-textarea,
html.dark .auth-card textarea,
html.dark form textarea {
    border-color: #8e918f;
    background-color: #1e2023;
    color: #e3e3e3;
}

.m3-textarea:hover:not(:focus):not([disabled]),
.m3-outlined-textarea:hover:not(:focus):not([disabled]),
.auth-card textarea:hover:not(:focus):not([disabled]),
form textarea:hover:not(:focus):not([disabled]) {
    border-color: #1f1f1f;
}

html.dark .m3-textarea:hover:not(:focus):not([disabled]),
html.dark .m3-outlined-textarea:hover:not(:focus):not([disabled]),
html.dark .auth-card textarea:hover:not(:focus):not([disabled]),
html.dark form textarea:hover:not(:focus):not([disabled]) {
    border-color: #e3e3e3;
}

.m3-textarea:focus,
.m3-outlined-textarea:focus,
.auth-card textarea:focus,
form textarea:focus {
    border: 2px solid var(--primary-color) !important;
    padding: calc(0.75rem - 1px) calc(1rem - 1px) !important;
    outline: none !important;
    box-shadow: none !important;
}

html.dark .m3-textarea:focus,
html.dark .m3-outlined-textarea:focus,
html.dark .auth-card textarea:focus,
html.dark form textarea:focus {
    border-color: var(--primary-color) !important;
}

/* Material 3 Floating Notched Field */
.m3-field {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.m3-field .m3-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 4px;
    font-size: 14px;
    color: #747775;
    pointer-events: none;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
    background-color: #ffffff;
    line-height: 1;
    z-index: 1;
}
html.dark .m3-field .m3-label {
    color: #8e918f;
    background-color: #1e2023;
}
.m3-field .m3-textarea ~ .m3-label {
    top: 20px;
}
.m3-field .m3-input:focus ~ .m3-label,
.m3-field .m3-input:not(:placeholder-shown) ~ .m3-label,
.m3-field .m3-textarea:focus ~ .m3-label,
.m3-field .m3-textarea:not(:placeholder-shown) ~ .m3-label,
.m3-field .m3-label.m3-label-float,
.m3-field .m3-select ~ .m3-label {
    top: 0 !important;
    transform: translateY(-50%) scale(0.85);
    transform-origin: left top;
    font-size: 13px;
    font-weight: 500;
}
.m3-field .m3-input:focus ~ .m3-label,
.m3-field .m3-select:focus ~ .m3-label,
.m3-field .m3-textarea:focus ~ .m3-label {
    color: var(--primary-color) !important;
}

/* Google Material Pagination Component */
.pagination, 
.google-material-pagination {
    width: 100%;
}
.google-material-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}
@media (min-width: 640px) {
    .google-material-pagination {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.google-material-pagination .pagination-summary {
    display: block !important;
    width: auto !important;
    font-size: 0.8125rem;
    color: #5f6368;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    white-space: nowrap;
}
html.dark .google-material-pagination .pagination-summary {
    color: #9aa0a6;
}
.google-material-pagination .pagination-summary span {
    display: inline !important;
    min-width: auto !important;
    height: auto !important;
    padding: 0 0.125rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    color: #202124 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
html.dark .google-material-pagination .pagination-summary span {
    color: #e8eaed !important;
}
.google-material-pagination .google-pagination-pill {
    display: inline-flex !important;
    width: auto !important;
    margin-left: auto;
}
@media (max-width: 639px) {
    .google-material-pagination .google-pagination-pill {
        margin-left: 0;
    }
}

nav[role="navigation"]:not(.google-pagination-pill) > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.25rem;
}
nav[role="navigation"] p {
    font-size: 0.8125rem;
    color: #5f6368;
    margin: 0;
    padding: 0.25rem 0.5rem;
}
html.dark nav[role="navigation"] p {
    color: #9aa0a6;
}
nav[role="navigation"] p span {
    font-weight: 600;
    display: inline !important;
    min-width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    color: inherit !important;
    background: transparent !important;
}
nav[role="navigation"] svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}
nav[role="navigation"]:not(.google-pagination-pill) [aria-label*="Pagination"] a,
nav[role="navigation"]:not(.google-pagination-pill) [aria-label*="Pagination"] span:not(.font-bold),
nav[role="navigation"]:not(.google-pagination-pill) .inline-flex > a,
nav[role="navigation"]:not(.google-pagination-pill) .inline-flex > span,
nav[role="navigation"] .pagination a,
nav[role="navigation"] .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    margin: 0 0.125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px !important;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    color: #3c4043;
    text-decoration: none;
    cursor: pointer;
}
html.dark nav[role="navigation"] [aria-label*="Pagination"] a,
html.dark nav[role="navigation"] [aria-label*="Pagination"] span,
html.dark nav[role="navigation"] .inline-flex > a,
html.dark nav[role="navigation"] .inline-flex > span {
    color: #e8eaed;
}
nav[role="navigation"] a:hover {
    background-color: rgba(var(--primary-rgb), 0.12) !important;
    color: var(--primary-color) !important;
}
nav[role="navigation"] [aria-current="page"] span,
nav[role="navigation"] span[aria-current="page"],
nav[role="navigation"] [aria-label*="Pagination"] span[aria-current="page"],
nav[role="navigation"] .inline-flex > span.relative.z-10 {
    background-color: var(--primary-color) !important;
    color: var(--primary-contrast, #ffffff) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Material Chips & Badges */
.m3-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #dadce0;
    background-color: #ffffff;
    color: #3c4043;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
}
html.dark .m3-chip {
    border-color: #3c4043;
    background-color: #202124;
    color: #e8eaed;
}
.m3-chip:hover {
    background-color: #f1f3f4;
    border-color: #bdc1c6;
}
html.dark .m3-chip:hover {
    background-color: #2d2f31;
    border-color: #5f6368;
}
.m3-chip.active {
    background-color: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

/* Android Native Bottom Navigation Bar Pill Indicator */
.android-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0.5rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.android-nav-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 1.875rem;
    border-radius: 9999px;
    margin-bottom: 0.25rem;
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
}
.android-nav-item.active .android-nav-indicator {
    background-color: rgba(var(--primary-rgb), 0.18);
    color: var(--primary-color);
}
.android-nav-item:not(.active) .android-nav-indicator {
    background-color: transparent;
    color: #5f6368;
}
html.dark .android-nav-item:not(.active) .android-nav-indicator {
    color: #9aa0a6;
}

/* Android Bottom Sheet Drag Handle */
.android-sheet-handle {
    width: 2.25rem;
    height: 0.25rem;
    border-radius: 9999px;
    background-color: #dadce0;
    margin: 0.5rem auto 0.75rem auto;
}
html.dark .android-sheet-handle {
    background-color: #5f6368;
}

/* Google Search Bar Pill */
.google-search-pill {
    background-color: #f1f3f4;
    border: 1px solid transparent;
    border-radius: 9999px;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.google-search-pill:hover {
    background-color: #e8eaed;
}
.google-search-pill:focus-within {
    background-color: #ffffff;
    border-color: #dadce0;
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}
html.dark .google-search-pill {
    background-color: #303134;
    border-color: transparent;
}
html.dark .google-search-pill:hover {
    background-color: #3c4043;
}
html.dark .google-search-pill:focus-within {
    background-color: #202124;
    border-color: #5f6368;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.5);
}

/* Custom Scrollbars with Material aesthetic */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #dadce0;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #bdc1c6;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #3c4043;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #5f6368;
}

[x-cloak] {
    display: none !important;
}

/* Smooth ripple effect base */
.material-ripple {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}
.m3-active-ripple {
    position: absolute;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.16;
    transform: scale(0);
    animation: m3-ripple-expand 0.28s cubic-bezier(0.2, 0, 0, 1) forwards;
    pointer-events: none;
    will-change: transform, opacity;
}
html.dark .m3-active-ripple {
    opacity: 0.22;
}
.m3-active-ripple.m3-ripple-fade-out {
    opacity: 0 !important;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@keyframes m3-ripple-expand {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}