/* ============================================
   RESPONSIVE OVERHAUL v2 - CookieJar
   Structural layout contract: no cutoffs at any
   window size, no horizontal scroll, proper reflow.
   ============================================ */

/* ============================================
   1. LAYOUT CONTRACT: Global min-width: 0
   Every flex/grid child must shrink properly.
   ============================================ */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
    min-width: 0;
}

/* Force all flex and grid children to shrink */
*, *::before, *::after {
    min-width: 0;
    box-sizing: border-box;
}

/* ============================================
   2. APP SHELL: Flex row with proper shrink
   Sidebar (fixed) + Main (flex: 1, min-width: 0)
   ============================================ */

.app-shell {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    overflow: hidden;
}

.main-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden;
    max-width: 100%;
}

.page-container {
    min-width: 0;
}

/* Main scroll container */
.main-content > .content-container {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* All pages must shrink */
.page {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* ============================================
   3. SIDEBAR: Desktop collapse + responsive
   ============================================ */

/* Sidebar base: smooth width transition */
.sidebar {
    width: 260px;
    flex: 0 0 260px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 180ms ease, flex-basis 180ms ease, transform 300ms ease;
    flex-shrink: 0;
}

/* Desktop sidebar collapse via body class */
body.sidebar-collapsed .sidebar {
    width: 72px;
    flex-basis: 72px;
}

body.sidebar-collapsed .sidebar .brand-text {
    display: none;
}

body.sidebar-collapsed .sidebar .nav-item-label,
body.sidebar-collapsed .sidebar .nav-section-title,
body.sidebar-collapsed .sidebar .nav-item-badge,
body.sidebar-collapsed .sidebar .sidebar-footer .card p,
body.sidebar-collapsed .sidebar .sidebar-footer .btn,
body.sidebar-collapsed .sidebar .sidebar-footer a {
    display: none;
}

body.sidebar-collapsed .sidebar .nav-item {
    justify-content: center;
    padding: var(--space-3);
}

body.sidebar-collapsed .sidebar .nav-item-icon {
    margin: 0;
}

body.sidebar-collapsed .sidebar .sidebar-footer {
    padding: var(--space-2);
}

body.sidebar-collapsed .sidebar .sidebar-footer .card {
    padding: var(--space-2) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.sidebar-collapsed .main-content {
    margin-left: 0;
}

/* Ensure main content uses remaining width when sidebar collapses */
.page-container,
.main,
.main-content {
    min-width: 0;
}

/* Sidebar section headers: consistent appearance */
.sidebar .nav-section-title {
    display: block;
    opacity: 0.75;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    margin: 14px 12px 8px;
}

/* Sidebar collapse toggle button */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border, #333);
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-secondary, #999);
    cursor: pointer;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
    background: var(--color-surface-hover, rgba(255,255,255,0.05));
    color: var(--color-text-primary, #fff);
}

.sidebar-collapse-btn svg {
    transition: transform 180ms ease;
}

body.sidebar-collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

/* Tablet: auto-collapse sidebar (769-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: var(--sidebar-collapsed-width, 72px);
        transform: translateX(0);
    }

    .sidebar .nav-item-label,
    .sidebar .nav-section-title,
    .sidebar .nav-item-badge,
    .sidebar .sidebar-footer .card p,
    .sidebar .sidebar-footer .btn,
    .sidebar .sidebar-footer a {
        display: none;
    }

    .sidebar .nav-item {
        justify-content: center;
        padding: var(--space-3);
    }

    .sidebar .nav-item-icon {
        margin: 0;
    }

    .main-content {
        margin-left: var(--sidebar-collapsed-width, 72px);
    }

    .sidebar-footer {
        padding: var(--space-2);
    }

    .sidebar-footer .card {
        padding: var(--space-2) !important;
    }

    /* Hide collapse button on tablet (already collapsed) */
    .sidebar-collapse-btn {
        display: none;
    }
}

/* Mobile: full overlay drawer (<769px) */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        z-index: var(--z-modal, 500);
        width: 280px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: var(--space-4);
    }

    /* Force full sidebar labels on mobile (override collapsed state) */
    body.sidebar-collapsed .sidebar {
        width: 280px;
    }

    body.sidebar-collapsed .sidebar .nav-item-label,
    body.sidebar-collapsed .sidebar .nav-section-title,
    body.sidebar-collapsed .sidebar .nav-item-badge,
    body.sidebar-collapsed .sidebar .sidebar-footer .card p,
    body.sidebar-collapsed .sidebar .sidebar-footer .btn,
    body.sidebar-collapsed .sidebar .sidebar-footer a {
        display: revert;
    }

    body.sidebar-collapsed .sidebar .nav-item {
        justify-content: flex-start;
        padding: revert;
    }

    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }

    /* Hide collapse button on mobile */
    .sidebar-collapse-btn {
        display: none;
    }
}

/* ============================================
   4. PANELS / DRAWERS: Internal scrolling
   ============================================ */

.paper-builder-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 260px;
    min-width: 260px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;          /* allow left-edge icons/handles to show */
    padding-top: 10px;
    padding-bottom: 12px;
    padding-left: 12px;           /* breathing room for left-edge visuals */
    box-sizing: border-box;
}

/* Prevent clipping on sidebar and children */
.paper-builder-sidebar *,
.paper-builder-sidebar {
    clip-path: none !important;
    mask-image: none !important;
}

.paper-builder-sidebar-panel,
.paper-builder-sections {
    overflow: visible;
    min-height: 0;
}

.paper-builder-sidebar-header {
    flex: 0 0 auto;
    padding: var(--space-3);
}

.paper-sections-list,
.paper-builder-sidebar .paper-sections,
.pb-sections-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;          /* don't clip left-edge icons */
    padding-right: 8px;
    padding-left: 8px;            /* extra buffer so icons don't hit the edge */
}

/* The outline list container should not clip either */
.paper-outline,
.paper-sections,
.paper-builder-sections,
#paperBuilderSections {
    overflow: visible;
    padding-left: 8px;
}

/* Each section row: ensure internal layout doesn't shove icons outside */
.paper-section-item,
.section-item,
.paper-outline-item {
    position: relative;
    padding-left: 14px;           /* space for the dot/handle */
    box-sizing: border-box;
}

/* Keep left dot/drag handle pseudo-elements inside the box */
.paper-section-item::before,
.paper-outline-item::before {
    left: 6px;
}

.paper-builder-controls,
.context-drawer {
    max-height: calc(100vh - var(--topbar-height, 64px));
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
}

.modal,
.modal-content,
.modal-container {
    max-height: 90vh;
    overflow-y: auto;
}

/* ============================================
   5. CONTENT: Responsive widths
   ============================================ */

.content-container {
    max-width: clamp(320px, 100%, var(--content-max-width, 1200px));
    width: 100%;
    padding: 0 var(--space-4);
    margin: 0 auto;
    min-width: 0;
}

/* Cards and grids must not overflow */
.card,
.result-section,
.debate-intro-card {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ============================================
   6. RESPONSIVE GRIDS
   ============================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--space-4);
}

.library-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

@media (max-width: 768px) {
    .result-comparison {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .comparison-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }
}

/* ============================================
   7. PAPER BUILDER: Layout contract
   All grid/flex parents get min-width: 0
   ============================================ */

.paper-builder-topbar {
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: auto;
    min-width: 0;
}

.paper-builder-topbar-left,
.paper-builder-topbar-center,
.paper-builder-topbar-right {
    min-width: 0;
}

/* Paper builder shell: flex row with min-width: 0 everywhere */
.paper-builder-container {
    display: flex;
    min-width: 0;
    height: calc(100vh - var(--topbar-height, 64px));
    min-height: 0;
    overflow: hidden;
}

/* Grid children must shrink */
.paper-builder-container > * {
    min-width: 0;
}

.paper-builder-editor,
.paper-builder-workbench .paper-builder-main {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: auto;
}

.paper-builder-editor > * {
    min-width: 0;
}

.section-editor-content {
    min-width: 0;
    max-width: 100%;
}

/* Paper progress meter */
.paper-progress-meter {
    max-width: 100%;
    min-width: 0;
}

/* Paper builder topbar responsive */
@media (max-width: 768px) {
    .paper-builder-topbar-center {
        order: 3;
        width: 100%;
    }

    .paper-builder-topbar-left {
        flex: 1;
        min-width: 0;
    }

    .paper-topbar-title-input {
        max-width: 100%;
        font-size: var(--text-sm, 0.875rem);
    }

    .paper-builder-topbar-right {
        gap: var(--space-2);
    }

    .paper-builder-topbar-right .btn span {
        display: none;
    }
}

/* Paper builder: sidebar collapses at < 1100px */
@media (max-width: 1100px) {
    .paper-builder-container {
        grid-template-columns: 1fr !important;
    }

    .paper-builder-container.drawer-open {
        grid-template-columns: 1fr !important;
    }

    .paper-builder-sidebar {
        position: fixed;
        left: 0;
        top: var(--topbar-height, 64px);
        width: 260px;
        height: calc(100vh - var(--topbar-height, 64px));
        z-index: var(--z-fixed, 100);
        box-shadow: var(--shadow-xl);
        transform: translateX(-100%);
        transition: transform 200ms ease;
        background: var(--color-bg-secondary, #1a1a2e);
    }

    .paper-builder-sidebar.open {
        transform: translateX(0);
    }

    .paper-builder-editor {
        width: 100%;
        max-width: none;
        padding: var(--space-4);
    }
}

/* Additional options responsive grid */
.section-additional-options,
.additional-options-grid,
.paper-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    width: 100%;
}

.section-additional-options > *,
.additional-options-grid > *,
.paper-options-grid > * {
    width: 100%;
    min-width: 0;
}

.section-additional-options input,
.additional-options-grid input,
.paper-options-grid input,
.section-additional-options select,
.additional-options-grid select,
.paper-options-grid select,
.section-additional-options textarea,
.additional-options-grid textarea,
.paper-options-grid textarea {
    width: 100%;
}

@media (max-width: 640px) {
    .section-additional-options,
    .additional-options-grid,
    .paper-options-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   8. WHAT IF ENGINE: Redesigned layout
   ============================================ */

/* Container - wider max-width, centered, fit viewport */
.debate-engine-container {
    max-width: 1200px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 18px 18px 24px;
    height: calc(100vh - var(--topbar-height, 64px));
    min-height: 0;
    overflow: hidden;
}

/* Header wraps */
.debate-engine-header {
    flex-wrap: wrap;
    gap: var(--space-3);
    min-width: 0;
}

@media (max-width: 768px) {
    .debate-engine-header {
        flex-direction: column;
        align-items: stretch;
    }

    .debate-engine-header h1 {
        font-size: var(--text-2xl, 1.5rem);
    }

    .debate-mode-toggle {
        width: 100%;
    }

    .debate-mode-btn {
        flex: 1;
        justify-content: center;
        padding: var(--space-3);
    }
}

/* Adversarial wrap: flex column fills the panel */
.adv-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 14px;
}

/* Row 1: argument + CTA side by side */
.adv-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 12px;
}

.adv-argument textarea {
    min-height: 72px;
    max-height: 140px;
    resize: vertical;
}

.adv-cta {
    align-self: end;
    padding-bottom: 2px;
}

/* Row 2: two columns */
.adv-bottom {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 14px;
    min-height: 0;
    flex: 1 1 auto;
}

.adv-left {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.adv-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.critic-grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

/* Critic grid: compact 3-col on desktop */
.critic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* Critic cards: compact, even */
.critic-card {
    min-height: 64px;
    padding: 10px;
}
.critic-name {
    font-weight: 650;
}
.critic-desc {
    opacity: 0.8;
    font-size: 12px;
    line-height: 1.25;
}

/* Left column panel styling */
.adv-left {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px;
}

/* Focus chips: uniform size */
.focus-chip {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Critic search box */
.critic-search {
    width: 100%;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
    background: var(--color-surface, #1a1e28);
    border: 1px solid var(--color-border, #333);
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-primary, #e8e9ed);
    font-size: var(--text-sm, 0.875rem);
    font-family: inherit;
    flex-shrink: 0;
}

.critic-search::placeholder {
    color: var(--color-text-tertiary, #6b7080);
}

.critic-search:focus {
    outline: none;
    border-color: var(--color-accent-primary, #64b5f6);
}

/* Responsive fallbacks for adversarial layout */
@media (max-width: 1200px) {
    .critic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adv-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .debate-engine-container { overflow-y: auto; height: auto; }
}
@media (max-width: 820px) {
    .critic-grid { grid-template-columns: 1fr; }
    .adv-top { grid-template-columns: 1fr; }
    .adv-cta { justify-self: start; }
}

/* Engagement mode: segmented control */
.engagement-mode-options {
    display: flex;
    gap: 0;
    background: var(--color-surface, #1a1a2e);
    border: 1px solid var(--color-border, #333);
    border-radius: var(--radius-lg, 12px);
    padding: 3px;
    overflow: hidden;
}

.engagement-mode-btn {
    flex: 1;
    text-align: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all 150ms ease;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary, #999);
    font-size: var(--text-sm, 0.875rem);
}

.engagement-mode-btn:hover {
    background: var(--color-surface-hover, rgba(255,255,255,0.05));
    color: var(--color-text-primary, #fff);
}

.engagement-mode-btn.active {
    background: var(--color-accent-primary, #4a6cf7);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.engagement-mode-btn .mode-desc {
    font-size: var(--text-xs, 0.75rem);
    opacity: 0.7;
    margin-top: 2px;
}

/* Focus chips: wrap, compact, standardized */
.focus-areas-chips,
.focus-presets-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.focus-chip,
.focus-preset-chip {
    padding: 10px 12px;
    border-radius: 999px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: var(--text-sm, 0.875rem);
    white-space: nowrap;
}

/* Perspective categories */
.perspective-categories {
    max-width: 100%;
    min-width: 0;
}

/* Lens chips: even grid layout */
.category-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px;
}
@media (max-width: 1100px) { .category-options { grid-template-columns: repeat(3, minmax(160px, 1fr)); } }
@media (max-width: 820px)  { .category-options { grid-template-columns: repeat(2, minmax(140px, 1fr)); } }
@media (max-width: 520px)  { .category-options { grid-template-columns: 1fr; } }

.perspective-option {
    max-width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 10px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

/* Lens section open state: highlight header in blue */
.perspective-category.open .category-header {
    border-color: var(--color-accent-primary, #64b5f6);
    background: rgba(59, 130, 246, 0.12);
}

/* Category header: accent when selection exists */
.perspective-category.has-selection .category-header {
    border-color: var(--color-accent-primary, #64b5f6);
    color: var(--color-accent-primary, #64b5f6);
}

/* Action bar wraps */
.debate-action-bar {
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .debate-action-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .debate-action-bar .btn {
        width: 100%;
        justify-content: center;
    }

    .engagement-mode-options {
        flex-direction: column;
    }
}

/* ============================================
   9. WRITING ASSISTANT: Compact layout
   ============================================ */

.coach-action-btn {
    padding: var(--space-2) var(--space-3);
}

.coach-action-group {
    margin-bottom: var(--space-3);
}

.coach-action-group-title {
    margin-bottom: var(--space-1);
}

.context-tab-panel {
    padding: var(--space-3);
}

/* ============================================
   10. FORM CONTROLS: Full width in grid cells
   ============================================ */

.form-group input,
.form-group select,
.form-group textarea,
.card input,
.card select,
.card textarea {
    width: 100%;
    max-width: 100%;
}

/* ============================================
   11. TYPOGRAPHY: Responsive scaling
   ============================================ */

@media (max-width: 480px) {
    h1 {
        font-size: clamp(1.25rem, 5vw, var(--text-3xl, 1.875rem));
    }

    h2 {
        font-size: clamp(1.125rem, 4vw, var(--text-2xl, 1.5rem));
    }

    h3 {
        font-size: clamp(1rem, 3.5vw, var(--text-xl, 1.25rem));
    }
}

/* ============================================
   12. BUTTONS: Touch-friendly sizing
   ============================================ */

@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        padding: var(--space-3) var(--space-4);
    }

    .btn-sm {
        min-height: 36px;
    }
}

/* ============================================
   13. IMAGES AND MEDIA: Responsive
   ============================================ */

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* ============================================
   14. TABLE OVERFLOW
   ============================================ */

table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* ============================================
   15. MODAL: Responsive sizing
   ============================================ */

@media (max-width: 768px) {
    .modal,
    .modal-content {
        max-width: calc(100vw - 2rem);
        width: 100%;
        margin: var(--space-4);
    }

    .modal-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

/* ============================================
   16. EXPORT ACTION BAR
   ============================================ */

@media (max-width: 480px) {
    .export-actions-bar {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .export-action-btn {
        flex: 1;
        min-width: calc(33% - var(--space-2));
    }
}

/* ============================================
   17. BUTTON HIERARCHY for Paper Builder
   ============================================ */

.paper-topbar-cta,
.next-step-cta {
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.paper-builder-topbar-right .btn-ghost {
    opacity: 0.8;
}

.paper-builder-topbar-right .btn-ghost:hover {
    opacity: 1;
}

/* ============================================
   18. PRINT STYLES
   ============================================ */

@media print {
    .sidebar,
    .topbar,
    .sidebar-overlay,
    .toast-container,
    .export-actions-bar,
    .context-drawer-toggle,
    .paper-builder-controls-toggle {
        display: none !important;
    }

    .main-content {
        margin: 0;
        padding: 0;
    }
}

/* ============================================
   19. COMMUNITY: Temporarily hidden
   ============================================ */

#page-community {
    display: none !important;
}

.nav-item[data-page="community"] {
    display: none !important;
}

/* ============================================
   20. TRENDING REFRESH STATES
   ============================================ */

.trending-refresh.loading .trending-refresh-icon {
    animation: spin-refresh 1s linear infinite;
}

.trending-refresh:disabled {
    opacity: 0.5;
    pointer-events: none;
}

@keyframes spin-refresh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Trending refresh visual feedback */
.trending-refreshing .trending-grid {
    opacity: 0.5;
    transition: opacity 200ms ease;
}

/* ============================================
   20. VISUAL POLISH: Hover/press animations
   ============================================ */

.btn,
.nav-item,
.critic-card,
.lens-chip,
.focus-chip,
.perspective-option,
.focus-preset-chip {
    transition: transform 120ms ease, box-shadow 120ms ease,
                border-color 120ms ease, background 120ms ease,
                opacity 120ms ease;
}

.critic-card:hover,
.lens-chip:hover,
.focus-chip:hover,
.perspective-option:hover,
.focus-preset-chip:hover {
    transform: translateY(-1px);
}

.critic-card:active,
.lens-chip:active,
.focus-chip:active,
.perspective-option:active,
.focus-preset-chip:active,
.btn:active {
    transform: translateY(0px) scale(0.99);
}

/* Selected state: blue accent border + faint blue bg */
.critic-card.active,
.critic-card.selected {
    border-color: var(--color-accent-primary, #64b5f6);
    background: rgba(59, 130, 246, 0.10);
}

.focus-chip.active,
.perspective-option.selected,
.perspective-option.active {
    border-color: var(--color-accent-primary, #64b5f6);
    background: rgba(59, 130, 246, 0.14);
}

/* ============================================
   SUBTLE ANIMATIONS
   ============================================ */

/* Buttons: press + hover glow */
.btn {
    transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.btn:active {
    transform: translateY(1px);
}

/* Cards: hover lift */
.card {
    transition: transform .12s ease, border-color .18s ease;
}
.card:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.45);
}

/* Section expand/collapse: height + opacity (fast) */
.category-options {
    transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.15s ease;
}

/* Trending refresh loading spin */
#trendingRefreshBtn.is-loading svg,
.trending-refresh.loading .trending-refresh-icon {
    animation: spin-refresh 0.9s linear infinite;
}