/* Terxo Mobile — Neo-Brutalism TERXO-PHOTO viewer */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700&display=swap');

:root {
    --neo-bg: #f2efe4;
    --neo-surface: #ffffff;
    --neo-ink: #0a0a0a;
    --neo-yellow: #ffe566;
    --neo-coral: #ff6b6b;
    --neo-border: 3px solid #0a0a0a;
    --neo-shadow: 6px 6px 0 #0a0a0a;
    --neo-shadow-sm: 4px 4px 0 #0a0a0a;
    --brand-blue: #425df5;
    --font-display: 'Syne', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --sidebar-width: 280px;
}

body {
    font-family: var(--font-body) !important;
    background: var(--neo-ink) !important;
    color: var(--neo-surface) !important;
    background-image:
        linear-gradient(rgba(255, 229, 102, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 229, 102, 0.07) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
}

/* Close & menu */
.tp-close {
    width: 52px !important;
    height: 52px !important;
    border-radius: 0 !important;
    background: var(--neo-coral) !important;
    border: var(--neo-border) !important;
    color: var(--neo-ink) !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    font-family: var(--font-display) !important;
    box-shadow: var(--neo-shadow-sm) !important;
}

.tp-close:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--neo-shadow) !important;
    background: #ff8585 !important;
}

.tp-menu-toggle {
    border-radius: 0 !important;
    background: var(--neo-yellow) !important;
    border: var(--neo-border) !important;
    color: var(--neo-ink) !important;
    box-shadow: var(--neo-shadow-sm) !important;
}

.tp-menu-toggle:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--neo-shadow) !important;
}

/* Sidebar */
.tp-sidebar {
    background: var(--neo-yellow) !important;
    border-right: var(--neo-border) !important;
    box-shadow: var(--neo-shadow) !important;
}

.tp-sidebar-title {
    border-bottom: var(--neo-border) !important;
    padding: 24px 20px 16px !important;
}

.tp-sidebar-title h1 {
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--neo-ink) !important;
    letter-spacing: 0.06em !important;
}

.tp-sidebar-title p {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: rgba(10, 10, 10, 0.65) !important;
}

.tp-section-label {
    font-family: var(--font-display) !important;
    font-size: 0.65rem !important;
    color: rgba(10, 10, 10, 0.5) !important;
    letter-spacing: 0.1em !important;
}

.tp-nav-btn {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--neo-ink) !important;
    border-left: var(--neo-border) !important;
    border-left-color: transparent !important;
    border-radius: 0 !important;
}

.tp-nav-btn:hover {
    background: var(--neo-surface) !important;
    color: var(--neo-ink) !important;
}

.tp-nav-btn.active {
    background: var(--neo-ink) !important;
    color: var(--neo-surface) !important;
    border-left-color: var(--neo-yellow) !important;
    box-shadow: inset 4px 0 0 var(--neo-yellow);
    font-weight: 700 !important;
}

.tp-nav-btn.active i {
    color: var(--neo-yellow) !important;
    opacity: 1 !important;
}

.tp-divider {
    background: var(--neo-ink) !important;
    height: 3px !important;
    margin: 10px 20px !important;
}

.tp-sidebar::-webkit-scrollbar-thumb {
    background: var(--neo-ink) !important;
    border-radius: 0 !important;
}

/* Main viewer */
.tp-main {
    background: var(--neo-ink) !important;
}

.tp-page-titles h1 {
    font-family: var(--font-display) !important;
    color: var(--neo-yellow) !important;
}

.tp-category-header {
    border-bottom: var(--neo-border) !important;
    background: rgba(255, 229, 102, 0.08);
}

.tp-category-header h2 {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    color: var(--neo-yellow) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tp-category-header p {
    color: rgba(255, 255, 255, 0.65) !important;
    font-family: var(--font-body) !important;
}

.tp-viewport {
    background:
        linear-gradient(rgba(255, 229, 102, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 229, 102, 0.05) 1px, transparent 1px),
        var(--neo-ink) !important;
    background-size: 32px 32px, 32px 32px, auto !important;
}

.tp-photo {
    border: var(--neo-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--neo-shadow) !important;
    background: #fff;
    padding: 4px;
}

/* Controls */
.tp-controls {
    background: var(--neo-surface) !important;
    border-top: var(--neo-border) !important;
    color: var(--neo-ink) !important;
}

.tp-ctrl-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 0 !important;
    background: var(--neo-yellow) !important;
    border: var(--neo-border) !important;
    color: var(--neo-ink) !important;
    box-shadow: var(--neo-shadow-sm) !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
}

.tp-ctrl-btn:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: var(--neo-shadow) !important;
    background: #fff !important;
}

.tp-ctrl-btn:disabled {
    opacity: 0.35 !important;
}

.tp-zoom-label,
.tp-counter {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    color: var(--neo-ink) !important;
}

.tp-ctrl-btn.tp-fullscreen-btn {
    width: auto !important;
    min-width: 118px !important;
    height: 40px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.tp-fullscreen-btn {
    background: var(--brand-blue) !important;
    color: #fff !important;
}

.tp-fullscreen-btn span {
    display: inline !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
}

.tp-fullscreen-btn:hover:not(:disabled) {
    background: #123cb8 !important;
    color: #fff !important;
}

/* Thumbnails */
.tp-thumbs {
    background: rgba(255, 255, 255, 0.04);
    border-top: var(--neo-border) !important;
}

.tp-thumb {
    border-radius: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    opacity: 0.6 !important;
}

.tp-thumb:hover {
    opacity: 0.9 !important;
    border-color: var(--neo-yellow) !important;
}

.tp-thumb.active {
    opacity: 1 !important;
    border: var(--neo-border) !important;
    border-color: var(--neo-ink) !important;
    box-shadow: 0 0 0 2px var(--neo-yellow);
    filter: brightness(0.85);
}

/* Lightbox */
.tp-lightbox {
    background: rgba(10, 10, 10, 0.96) !important;
}

.tp-lightbox-close {
    border-radius: 0 !important;
    background: var(--neo-coral) !important;
    border: var(--neo-border) !important;
    color: var(--neo-ink) !important;
    font-weight: 800 !important;
    box-shadow: var(--neo-shadow-sm) !important;
}

.tp-lightbox-close:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--neo-shadow) !important;
}

.tp-lightbox-zoom {
    background: var(--neo-surface) !important;
    border: var(--neo-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--neo-shadow) !important;
}

.tp-lightbox-img {
    border: var(--neo-border);
    box-shadow: var(--neo-shadow);
}

.tp-sidebar-overlay {
    background: rgba(10, 10, 10, 0.7) !important;
}

@media (max-width: 768px) {
    html, body {
        height: 100dvh;
    }

    .tp-close {
        top: max(12px, env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        width: 46px !important;
        height: 46px !important;
    }

    .tp-sidebar {
        box-shadow: 8px 0 0 var(--neo-ink) !important;
        width: min(88vw, var(--sidebar-width)) !important;
    }

    .tp-sidebar.open {
        border-right: var(--neo-border);
    }

    .tp-mobile-head {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 56px 12px 12px !important;
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        border-bottom: var(--neo-border) !important;
        background: rgba(255, 229, 102, 0.08) !important;
    }

    .tp-menu-toggle {
        position: static !important;
        display: inline-flex !important;
        flex-shrink: 0 !important;
    }

    .tp-category-header {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
        background: transparent !important;
    }

    .tp-category-header h2 {
        font-size: 0.85rem !important;
        line-height: 1.25 !important;
        word-break: break-word;
    }

    .tp-category-header p {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .tp-page-titles {
        padding: 56px 14px 0 !important;
    }

    .tp-controls {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
    }

    .tp-zoom-controls,
    .tp-nav-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tp-thumbs {
        padding: 8px 12px max(8px, env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tp-thumb {
        width: 52px !important;
        height: 52px !important;
        flex-shrink: 0;
    }

    .tp-ctrl-btn.tp-fullscreen-btn {
        min-width: 104px !important;
        padding: 0 14px !important;
    }
}

@media (max-width: 400px) {
    .tp-ctrl-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .tp-ctrl-btn.tp-fullscreen-btn {
        min-width: 96px !important;
        height: 36px !important;
        padding: 0 12px !important;
    }

    .tp-fullscreen-btn span {
        font-size: 0.65rem !important;
    }

    .tp-thumb {
        width: 46px !important;
        height: 46px !important;
    }

    .tp-zoom-label,
    .tp-counter {
        font-size: 0.72rem !important;
    }
}