:is(.a17-ui, .a17-admin) {
    --a17-blur-strength: blur(12px);
    font-family: 'Roboto Flex', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

:is(.a17-ui, .a17-admin) .material-symbols-outlined {
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

:is(.a17-ui, .a17-admin) .md3-app-bar {
    background: var(--a17-blur-gradient);
    backdrop-filter: var(--a17-blur-strength);
    -webkit-backdrop-filter: var(--a17-blur-strength);
    border-bottom: var(--a17-border);
}

:is(.a17-ui, .a17-admin) .md3-card {
    background: var(--a17-blur-gradient) !important;
    backdrop-filter: var(--a17-blur-strength);
    -webkit-backdrop-filter: var(--a17-blur-strength);
    border: var(--a17-border) !important;
    border-radius: var(--shape-panel, 32px) !important;
    box-shadow: 0 16px 40px rgba(var(--md-primary-rgb), 0.06);
    transition: var(--a17-spring, all 0.35s ease);
}

:is(.a17-ui, .a17-admin) .md3-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(var(--md-primary-rgb), 0.12);
    border-color: rgba(var(--md-primary-rgb), 0.2) !important;
}

:is(.a17-ui, .a17-admin) .md3-badge,
:is(.a17-ui, .a17-admin) .hero-badge,
:is(.a17-ui, .a17-admin) .ai-chip {
    border-radius: 20px 8px 20px 20px;
    font-weight: 800;
    transition: var(--a17-spring, all 0.35s ease);
}

:is(.a17-ui, .a17-admin) .md3-badge:hover,
:is(.a17-ui, .a17-admin) .ai-chip:hover {
    border-radius: var(--shape-pill);
}

:is(.a17-ui, .a17-admin) .action-btn,
:is(.a17-ui, .a17-admin) .reaction-btn {
    height: 44px;
    padding: 0 16px;
    border-radius: var(--shape-pill);
    border: 1px solid var(--m3e-outline-variant);
    background: color-mix(in srgb, var(--md-surface) 50%, transparent);
    font-weight: 700;
    font-size: 13px;
    transition: var(--a17-spring, all 0.35s ease);
}

:is(.a17-ui, .a17-admin) .action-btn:hover {
    background: var(--md-primary-container);
    border-color: transparent;
}

:is(.a17-ui, .a17-admin) .reaction-btn.active,
:is(.a17-ui, .a17-admin) .action-btn.active {
    background: var(--md-error-container);
    color: var(--md-on-error-container);
    border-color: transparent;
    border-radius: 20px 20px 4px 20px;
}

:is(.a17-ui, .a17-admin) .reaction-btn.active .material-symbols-outlined {
    color: var(--md-error);
}

:is(.a17-ui, .a17-admin) .unlock-btn {
    border-radius: 18px 6px 18px 18px;
    font-weight: 700;
    height: 48px;
    padding: 0 20px;
    transition: var(--a17-spring, all 0.35s ease);
}

:is(.a17-ui, .a17-admin) .unlock-btn:hover {
    border-radius: var(--shape-pill);
}

:is(.a17-ui, .a17-admin) .card-footer .action-btn:first-of-type {
    border-radius: var(--shape-pill) var(--shape-card) var(--shape-card) var(--shape-pill);
}

:is(.a17-ui, .a17-admin) .card-footer .action-btn:last-of-type {
    border-radius: var(--shape-card) var(--shape-pill) var(--shape-pill) var(--shape-card);
}

:is(.a17-ui, .a17-admin) .card-footer .action-btn:only-child {
    border-radius: var(--shape-pill);
}

:is(.a17-ui, .a17-admin) .m3e-reaction-pill {
    height: 44px;
    padding: 0 16px;
    background: color-mix(in srgb, var(--md-surface) 50%, transparent);
    border: 1px solid var(--m3e-outline-variant);
    border-radius: var(--shape-pill);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    color: var(--md-on-surface-variant);
    transition: var(--a17-spring, all 0.35s ease);
}

:is(.a17-ui, .a17-admin) .m3e-reaction-pill.active,
:is(.a17-ui, .a17-admin) .m3e-reaction-pill.is-liked {
    background: var(--md-error-container);
    color: var(--md-on-error-container);
    border-color: transparent;
    border-radius: 20px 20px 4px 20px;
}

:is(.a17-ui, .a17-admin) .m3e-reaction-pill.reaction-dislike.active,
:is(.a17-ui, .a17-admin) .m3e-reaction-pill.is-disliked {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    border-color: transparent;
    border-radius: 20px 4px 20px 20px;
}

:is(.a17-ui, .a17-admin) .m3e-reaction-pill.active .reaction-heart,
:is(.a17-ui, .a17-admin) .m3e-reaction-pill.is-liked .reaction-heart {
    color: var(--md-error);
    animation: heart-bounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

@keyframes heart-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.4) rotate(-12deg); }
    100% { transform: scale(1); }
}

:is(.a17-ui, .a17-admin) .md3-bottom-nav {
    display: block !important;
    background: transparent;
    border-top: none;
    pointer-events: none;
    height: auto;
    min-height: 72px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0));
}

:is(.a17-ui, .a17-admin) .bottom-nav-container {
    background: color-mix(in srgb, var(--md-surface-container-high) 70%, transparent);
    backdrop-filter: var(--a17-blur-strength);
    -webkit-backdrop-filter: var(--a17-blur-strength);
    border: var(--a17-border);
    border-radius: var(--shape-pill, 100px);
    padding: 8px 12px;
    gap: 4px;
    box-shadow: 0 12px 40px rgba(var(--md-primary-rgb), 0.12);
    pointer-events: auto;
    max-width: 360px;
}

:is(.a17-ui, .a17-admin) .bottom-nav-item {
    padding: 8px 0;
}

:is(.a17-ui, .a17-admin) .bottom-nav-item.active {
    color: var(--md-primary);
}

:is(.a17-ui, .a17-admin) .bottom-nav-item.active .nav-icon-wrapper {
    background: var(--md-primary);
    color: var(--md-on-primary);
    border-radius: var(--shape-card, 24px);
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(var(--md-primary-rgb), 0.35);
}

:is(.a17-ui, .a17-admin) .bottom-nav-item:not(.active):hover .nav-icon-wrapper {
    background: var(--md-primary-container);
    transform: scale(1.08);
}

@media (orientation: portrait) {
    :is(.a17-ui, .a17-admin) .bottom-nav-container {
        max-width: min(92vw, 380px);
    }
    :is(.a17-ui, .a17-admin) .main-content {
        padding-bottom: calc(108px + env(safe-area-inset-bottom, 0));
    }
}

@media (orientation: landscape) {
    :is(.a17-ui, .a17-admin) .md3-bottom-nav {
        padding: 6px 20px calc(6px + env(safe-area-inset-bottom, 0));
    }
    :is(.a17-ui, .a17-admin) .bottom-nav-container {
        max-width: min(55vw, 420px);
        padding: 6px 10px;
    }
    :is(.a17-ui, .a17-admin) .bottom-nav-item .nav-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    :is(.a17-ui, .a17-admin) .nav-label {
        font-size: 10px;
    }
    :is(.a17-ui, .a17-admin) .main-content {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0));
    }
}

@media (min-aspect-ratio: 16/9) and (orientation: landscape) {
    :is(.a17-ui, .a17-admin) .bottom-nav-container {
        max-width: 400px;
    }
}

@media (max-aspect-ratio: 9/16) and (orientation: portrait) {
    :is(.a17-ui, .a17-admin) .bottom-nav-container {
        max-width: min(94vw, 360px);
    }
    :is(.a17-ui, .a17-admin) .bottom-nav-item {
        padding: 4px 6px;
    }
}