/* Premium Design Overhaul - Black & Gray Monochrome */
:root {
    --bg-base: #000000;
    --bg-surface: #0a0a0a;
    --bg-surface-hover: #1a1a1a;
    
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    
    --accent-pink: #ffffff;
    --accent-pink-glow: rgba(255, 255, 255, 0.1);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-pill: 9999px;
    
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #5a5a5a #0a0a0a;
}

*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: #0a0a0a;
}

*::-webkit-scrollbar-thumb {
    background: #5a5a5a;
    border-radius: 10px;
    min-height: 50px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #707070;
}

*::-webkit-scrollbar-thumb:active {
    background: #858585;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #5a5a5a #0a0a0a;
}

html::-webkit-scrollbar {
    width: 11px;
}

html::-webkit-scrollbar-track {
    background: #0a0a0a;
}

html::-webkit-scrollbar-thumb {
    background: #5a5a5a;
    border-radius: 10px;
    min-height: 50px;
}

html::-webkit-scrollbar-thumb:hover {
    background: #707070;
}

html::-webkit-scrollbar-thumb:active {
    background: #858585;
}

body {
    background-color: var(--bg-base);
    background: linear-gradient(-45deg, #000000, #0a0a0a, #1a1a1a, #0f0f0f);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: #5a5a5a #0a0a0a;
}

body::-webkit-scrollbar {
    width: 11px;
}

body::-webkit-scrollbar-track {
    background: #0a0a0a;
}

body::-webkit-scrollbar-thumb {
    background: #5a5a5a;
    border-radius: 10px;
    min-height: 50px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #707070;
}

body::-webkit-scrollbar-thumb:active {
    background: #858585;
}

body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.modal-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0);
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--text-primary);
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    text-transform: uppercase;
    transition: var(--transition-smooth);
}

.nav-links a:hover {
    color: var(--text-primary);
}

.nav-icon {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

/* Hero Section */
.hero {
    margin-top: 0;
    margin-bottom: 2rem;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.hero-badge .dot {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.hero h1 {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.hero .subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    min-height: 1.5rem;
}

.cursor {
    display: inline-block;
    width: 2px;
    animation: blink 1s step-end infinite;
    color: var(--text-primary);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.btn-primary {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
    background-color: #e5e5e5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

/* Categories */
.categories {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 2rem;
    scrollbar-width: none;
}
.categories::-webkit-scrollbar {
    display: none;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    min-width: 90px;
    padding: 1rem;
    border-radius: var(--radius-lg);
}

.category-item:hover {
    background: var(--bg-surface);
}

.category-icon {
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--text-secondary);
    transition: var(--transition-smooth);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.02);
}

.category-item:hover .category-icon {
    color: var(--text-primary);
    border-color: var(--border-strong);
    transform: scale(1.05);
}

.category-item.active .category-icon {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}

.category-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    transition: var(--transition-smooth);
}

.category-item:hover .category-name {
    color: var(--text-primary);
}

.category-item.active .category-name {
    color: var(--text-primary);
    font-weight: 600;
}

/* Premium "Show Girls" Button */
.category-item.premium .category-icon {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

.category-item.premium:hover .category-icon,
.category-item.premium.active .category-icon {
    color: var(--accent-pink);
    border-color: var(--accent-pink);
    background: var(--accent-pink-glow);
    box-shadow: 0 0 20px var(--accent-pink-glow);
}

.category-item.premium .category-name {
    color: var(--text-secondary);
}

.category-item.premium:hover .category-name,
.category-item.premium.active .category-name {
    color: var(--accent-pink);
}

/* Sub Categories */
.sub-categories {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 2rem;
    scrollbar-width: none;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
}

.sub-categories::-webkit-scrollbar {
    display: none;
}

.sub-categories.hidden {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    pointer-events: none;
    transform: translateY(-20px);
}

.girl-item {
    min-width: 90px;
    border-radius: var(--radius-lg);
}

.girl-item .category-icon {
    background: transparent;
    border-color: var(--border-subtle);
}

.girl-item .category-name {
    color: var(--text-muted);
}

.girl-item:hover .category-icon {
    border-color: var(--accent-pink);
    color: var(--accent-pink);
    background: var(--accent-pink-glow);
}

.girl-item:hover .category-name {
    color: var(--text-primary);
}

/* Controls (Search & Sort) */
.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border-subtle);
}

.search-bar {
    flex: 1;
    max-width: 400px;
    display: flex;
    align-items: center;
    background: var(--bg-surface);
    border-radius: var(--radius-pill);
    padding: 1rem 1.5rem;
    border: 1px solid var(--border-strong);
    transition: var(--transition-smooth);
}

.search-bar:focus-within {
    border-color: var(--text-primary);
    background: transparent;
}

.search-bar i {
    color: var(--text-secondary);
    margin-right: 1rem;
    font-size: 1.1rem;
}

.search-bar input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    font-family: inherit;
}

.search-bar input::placeholder {
    color: var(--text-muted);
}

.sort-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sort-container label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.custom-select {
    position: relative;
}

.custom-select select {
    appearance: none;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 1rem 3rem 1rem 1.5rem;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: var(--transition-smooth);
}

.custom-select select:hover, .custom-select select:focus {
    border-color: var(--text-primary);
    background: transparent;
}

.custom-select::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Floating Sidebar - COMPLETELY HIDDEN */
.floating-sidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-icon {
    background: linear-gradient(135deg, #27272a 0%, #3f3f46 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sidebar-icon:hover {
    background: linear-gradient(135deg, #3f3f46 0%, #52525b 100%) !important;
}

.purple-icon {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.9rem;
    font-weight: 800;
}

.purple-icon:hover {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    position: relative;
    z-index: 100;
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.login-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 1.5rem;
    height: 44px;
    border-radius: 16px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.login-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.3s;
}

.modal-overlay:not(.hidden) {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
}

.modal-content {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 90%;
    max-width: 450px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay:not(.hidden) .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h2 i {
    color: #a3a3a3;
}

.close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.modal-body {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.settings-section {
    margin-bottom: 2rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h3 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}



.check-icon {
    color: #a3a3a3;
    font-size: 1rem;
}

.check-icon.hidden {
    display: none;
}

/* Login Modal Specifics */
.login-content {
    max-width: 400px;
}

#login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
}

.input-wrapper input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 1rem 1rem 1rem 2.5rem;
    border-radius: 16px;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-smooth);
}

.input-wrapper input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.error-msg {
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(239, 68, 68, 0.1);
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    text-align: center;
}

.error-msg.hidden {
    display: none;
}

.login-submit-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}

/* Admin Panel */
.admin-panel {
    display: flex;
    min-height: 100vh;
    background: var(--bg-base);
    color: var(--text-primary);
}

.admin-panel.hidden {
    display: none;
}

/* Admin Sidebar */
.admin-sidebar {
    width: 280px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 50;
}

.admin-logo {
    margin-bottom: 3rem;
    padding-left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-logo__word {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
}

.admin-logo__word b {
    font-weight: 400;
    color: #71717a;
}

.admin-logo__tag {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b6b73;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.admin-link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-left: 3px solid transparent;
}

.admin-link i {
    font-size: 1.2rem;
    transition: var(--transition-smooth);
}

.admin-link:hover {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.9);
    transform: translateX(4px);
}

.admin-link.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    color: #ffffff;
    border-left: 3px solid #ffffff;
    border-radius: 0 10px 10px 0;
}

.admin-link.active i {
    color: #ffffff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.admin-bottom {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 1rem 1.2rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.logout-btn i {
    font-size: 1.2rem;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Admin Main Content */
.admin-main {
    flex: 1;
    margin-left: 280px;
    padding: 3rem;
    min-height: 100vh;
    background: var(--bg-base);
    background-image: radial-gradient(circle at top, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

.admin-view {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.admin-view.active {
    display: block;
}

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

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.admin-header h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.text-muted {
    color: var(--text-muted);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.pro-stats {
    grid-template-columns: repeat(3, 1fr);
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: var(--transition-smooth);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.stat-info h3 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.stat-trend {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-trend.positive { color: #10b981; }
.stat-trend.negative { color: #ef4444; }

/* Recent Activity */
.recent-activity h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.activity-list {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
}

.activity-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item .time {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.text-success { color: #10b981; }
.text-warning { color: #f59e0b; }
.text-info { color: #3b82f6; }

/* Tables */
.table-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.admin-table th, .admin-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.admin-table th {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.02);
}

.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-links a:hover {
    color: var(--text-primary);
}

.nav-links a i {
    color: var(--primary-color);
}

/* Dropdown */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 10px;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(15, 15, 18, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 0.5rem;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 500;
}

.nav-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.action-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: var(--transition-smooth);
}

.action-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.action-btn.delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Dummy box */
.dummy-box {
    background: var(--bg-surface);
    border: 1px dashed var(--border-strong);
    padding: 3rem;
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-muted);
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .admin-sidebar {
        width: 80px;
        padding: 2rem 1rem;
    }
    
    .admin-link span, .admin-bottom span {
        display: none;
    }

    .admin-logo__tag {
        display: none;
    }
    
    .admin-logo {
        align-items: center;
        padding-left: 0;
    }

    .admin-logo__word {
        font-size: 0.8rem;
        letter-spacing: 0.06em;
    }
    
    .admin-link {
        justify-content: center;
        padding: 1rem;
    }
    
    .admin-link i {
        font-size: 1.25rem;
    }
    
    .admin-main {
        margin-left: 80px;
        padding: 2rem;
    }

    .categories {
        justify-content: flex-start;
        padding-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 2rem 1.5rem;
    }
    
    .header {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 3rem;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 2rem;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-bar {
        max-width: 100%;
    }
    
    .floating-sidebar {
        right: 1rem;
        bottom: 1rem;
    }
    
    .sidebar-icon {
        width: 48px;
        height: 48px;
    }
}

/* =========================================
   ADMIN PANEL 2.0 (PRO) STYLES
========================================= */

/* Top Bar */
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.admin-search {
    position: relative;
    width: 300px;
}

.admin-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.admin-search input {
    width: 100%;
    background: var(--surface-light);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 20px;
    outline: none;
    transition: var(--transition-smooth);
}

.admin-search input:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.admin-profile-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.notif-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}

.notif-btn:hover {
    color: var(--text-primary);
}

.notif-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--surface-dark);
}

.admin-profile-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 16px;
    transition: var(--transition-smooth);
}

.admin-profile-card:hover {
    background: var(--surface-light);
}

.admin-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
}

.admin-info {
    display: flex;
    flex-direction: column;
}

.admin-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.admin-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Glass Cards & Pro Stats */
.glass-card {
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.pro-stats {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pro-stats .stat-icon {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    border-radius: 16px;
}

.purple-glow { color: #a3a3a3; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); }
.blue-glow { color: #60a5fa; background: rgba(59, 130, 246, 0.15); box-shadow: 0 0 15px rgba(59, 130, 246, 0.2); }
.pink-glow { color: #f472b6; background: rgba(236, 72, 153, 0.15); box-shadow: 0 0 15px rgba(236, 72, 153, 0.2); }
.red-glow { color: #f87171; background: rgba(239, 68, 68, 0.15); box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); }

/* Dashboard Content Grid */
.dashboard-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* CSS Chart */
.css-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 200px;
    margin-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

.css-chart .bar {
    width: 30px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255,0.2) 100%);
    border-radius: 6px 6px 0 0;
    position: relative;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.css-chart .bar:hover {
    filter: brightness(1.2);
}

.css-chart .bar span {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.css-chart .bar::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-light);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

.css-chart .bar:hover::after {
    opacity: 1;
}

/* Recent Activity Improvements */
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item i {
    margin-top: 4px;
    font-size: 1.1rem;
}

.text-info { color: #38bdf8; }
.text-warning { color: #fbbf24; }
.text-success { color: #4ade80; }
.text-purple { color: #ffffff; }

/* Products Table Improvements */
.admin-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-search-bar {
    flex: 1;
    position: relative;
}

.admin-search-bar i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.admin-search-bar input {
    width: 100%;
    background: var(--surface-dark);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 8px;
    outline: none;
}

.product-cell {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.product-img-mock {
    width: 40px;
    height: 40px;
    background: var(--surface-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.product-id {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.status-badge {
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-success { background: rgba(74, 222, 128, 0.1); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); }
.status-danger { background: rgba(248, 113, 113, 0.1); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.2); }
.status-warning { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
.badge-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }

/* Users View */
.online-dot, .offline-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.online-dot { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.offline-dot { background: #9ca3af; }

/* Settings View */
.settings-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 1rem;
}

.settings-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: var(--transition-smooth);
}

.settings-tab:hover {
    color: var(--text-primary);
    background: var(--surface-light);
}

.settings-tab.active {
    color: #000000;
    background: #ffffff;
}

.settings-pane {
    display: none;
}

.settings-pane.active {
    display: block;
    animation: fadeIn 0.3s ease-out forwards;
}

.settings-pane h3 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.settings-content-area {
    min-height: 300px;
}

/* =========================================
   FEATURES SECTION (ULTRA PREMIUM)
========================================= */
.features {
    position: relative;
    padding: 8rem 0;
    text-align: center;
    overflow: hidden;
}

.features-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.features-header {
    position: relative;
    margin-bottom: 5rem;
    z-index: 1;
}

.features-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.15);
    color: #a3a3a3;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.features-header h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.features-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.glass-feature {
    background: linear-gradient(145deg, rgba(30, 30, 35, 0.7) 0%, rgba(20, 20, 25, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.glass-feature::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.glass-feature:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 255, 0.2);
}

.glass-feature:hover::before {
    opacity: 1;
}

.feature-icon-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 2rem;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2), 0 8px 25px rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
}

.feature-icon-wrapper .feature-icon {
    margin-bottom: 0;
    background: transparent;
    color: #a3a3a3;
    font-size: 1.8rem;
    width: auto;
    height: auto;
    display: block;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-feature:hover .feature-icon-wrapper {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.3);
}

.glass-feature:hover .feature-icon {
    transform: scale(1.2) rotate(8deg);
}

.glass-feature h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.glass-feature p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    flex: 1;
}

.feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #a3a3a3;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    margin-top: auto;
}

.feature-link:hover {
    color: #e9d5ff;
}

.feature-link i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.feature-link:hover i {
    transform: translateX(6px);
}

/* =========================================
   TOOLS SECTION
========================================= */
.tools-section {
    position: relative;
    padding: 6rem 0 8rem 0;
}

.tools-header {
    margin-bottom: 4rem;
    text-align: center;
}

.tools-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.tools-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tool-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2.5rem;
    text-decoration: none;
    flex-direction: row;
}

.tool-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #a3a3a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

.tool-row:hover .tool-icon-box {
    transform: scale(1.1) rotate(-5deg);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
}

.tool-content {
    flex: 1;
}

.tool-content h3 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.tool-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.tool-arrow {
    width: 45px;
    height: 45px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.tool-row:hover .tool-arrow {
    background: rgba(255, 255, 255, 0.1);
    color: #a3a3a3;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(5px);
}

/* =========================================
   COMMUNITY BANNER
========================================= */
.community-banner-wrapper {
    max-width: 1400px;
    margin: 6rem auto 0 auto;
    position: relative;
    padding: 3rem 0;
}

.community-bg-grid {
    position: absolute;
    top: 0; left: -10%; right: -10%; bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 60%);
    z-index: 0;
}

.community-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 3rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
    background: rgba(15, 15, 18, 0.95);
    gap: 1rem;
}

.community-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.discord-icon {
    font-size: 3.5rem;
    color: #5865F2;
    filter: drop-shadow(0 0 25px rgba(88, 101, 242, 0.5));
    margin-bottom: 0.5rem;
}

.community-info h3 {
    font-size: 1.6rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0;
}

.community-info p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    font-size: 1rem;
}

.btn-discord {
    background: transparent;
    border: 1px solid rgba(88, 101, 242, 0.4);
    color: #ffffff;
    padding: 0.9rem 2.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-discord:hover {
    background: rgba(88, 101, 242, 0.15);
    border-color: #5865F2;
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.2);
    transform: translateY(-2px);
}

/* =========================================
   SELLERS VIEW
========================================= */
.main-view.hidden {
    display: none !important;
}

#sellers-view {
    padding: 6rem 0 4rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

.sellers-header-section {
    margin-bottom: 3rem;
}

.sellers-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}

.sellers-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    font-weight: 500;
}

.sellers-search-section {
    margin-bottom: 4rem;
}

.sellers-search-container {
    max-width: 1400px;
    margin: 0 auto 2rem auto;
}

.sellers-search-input {
    width: 100%;
    background: rgba(20, 20, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    color: #ffffff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.sellers-search-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.sellers-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.sellers-tags-wrapper {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
}

.sellers-tags-scroll {
    display: flex;
    gap: 0.8rem;
    overflow-x: scroll !important; /* Force scrollbar to always show */
    scrollbar-width: auto !important; /* Firefox - force visible scrollbar */
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1) !important; /* Firefox colors - brighter */
    padding: 0.5rem 0 1.5rem 0; /* More padding at bottom for scrollbar */
    scroll-behavior: smooth;
    flex: 1;
    width: 100%;
}

/* Chrome/Safari scrollbar styling - make it very visible */
.sellers-tags-scroll::-webkit-scrollbar {
    display: block !important; /* Force show scrollbar */
    height: 12px !important; /* Bigger scrollbar height */
}

.sellers-tags-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important; /* Brighter track background */
    border-radius: 6px;
}

.sellers-tags-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5) !important; /* Brighter thumb color */
    border-radius: 6px;
    transition: background 0.3s;
}

.sellers-tags-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7) !important; /* Even brighter on hover */
}

.seller-tag {
    background: rgba(30, 30, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
}

.seller-tag:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

.seller-tag.active {
    background: rgba(255, 255, 255, 0.2);
    color: #a3a3a3;
    border-color: rgba(255, 255, 255, 0.4);
}

.scroll-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 0.5rem;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-btn:hover {
    color: #ffffff;
}

.sellers-scroll-track {
    max-width: 1400px;
    margin: 1.5rem auto 0 auto;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.sellers-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 20%;
    background: linear-gradient(135deg, #3f3f46 0%, #52525b 100%);
    border-radius: 2px;
    transition: transform 0.1s linear;
}

.sellers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.seller-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-align: left;
}

.seller-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.seller-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #a3a3a3;
}

.seller-info h3 {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.seller-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.text-warning {
    color: #f59e0b;
}

.seller-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.seller-tag-small {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.seller-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: #a3a3a3;
    text-decoration: none;
    padding: 0.8rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    margin-top: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.seller-link:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .tool-row {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }
    .tool-arrow {
        transform: rotate(90deg);
    }
    .tool-row:hover .tool-arrow {
        transform: rotate(90deg) translateY(5px);
    }
    .community-banner {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }
    .community-info {
        flex-direction: column;
    }
}

.seller-card-premium { background: #13131a; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; text-align: left; }
.seller-avatar-initial { width: 44px; height: 44px; border-radius: 10px; background: #ffffff; color: #000000; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; flex-shrink: 0; }
.top-rated-star { font-size: 0.75rem; color: rgba(255,255,255,0.5); font-weight: 400; margin-left: 6px; }
.top-rated-star i { color: #fbbf24; }
.seller-tags-premium { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.seller-tag-premium { background: #1f1f2e; color: rgba(255, 255, 255, 0.8); padding: 0.3rem 0.8rem; border-radius: 8px; font-size: 0.75rem; border: 1px solid rgba(255,255,255,0.05); }
.seller-btn-premium { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.8rem; background: #ffffff; color: #000000; border-radius: 8px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; margin-top: auto; }
.seller-btn-premium:hover { background: #e0e0e0; color: #000000; }
.social-sidebar {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 10px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
}
.social-bubble {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #3f3f46 0%, #52525b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-bubble:hover {
    background: linear-gradient(135deg, #52525b 0%, #71717a 100%);
    transform: scale(1.1);
}
.social-bubble:hover {
    transform: scale(1.1);
}
.sellers-tags-scroll::-webkit-scrollbar {
    display: block;
    height: 4px;
}
.sellers-tags-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.sellers-tags-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}
.sellers-tags-wrapper {
    padding-bottom: 10px;
}
.social-sidebar {
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #2d1b46;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    z-index: 1000;
}
.social-bubble {
    width: 40px;
    height: 40px;
    background: #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #13131a;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
}
.social-bubble:hover {
    background: #ffffff;
    transform: scale(1.05);
}

.sellers-search-input {
    border-radius: 20px !important;
    background: rgba(30, 20, 35, 0.4) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    padding: 1rem 1.5rem !important;
}

.sellers-tags-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

.sellers-tags-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
}

.sellers-tags-scroll::-webkit-scrollbar {
    display: block !important;
    height: 3px !important;
    position: absolute;
    bottom: 0;
}

.sellers-tags-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 0;
}

.sellers-tags-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 1) !important;
    border-radius: 0;
}

.scroll-btn {
    display: none !important;
}
.text-center {
    text-align: center;
}

/* Tracking View Styles */
.tracking-container {
    max-width: 800px;
    margin: 0 auto 4rem auto;
    background: rgba(20, 20, 25, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    padding: 3rem;
}

.tracking-input-wrapper {
    margin-bottom: 2rem;
}

.tracking-search-input {
    width: 100%;
    background: rgba(30, 20, 35, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    color: #ffffff;
    font-size: 1.1rem;
    outline: none;
    transition: all 0.3s ease;
}

.tracking-search-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

.tracking-btn {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 0.8rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tracking-btn:hover {
    background: #e5e5e5;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.4);
}

.tracking-results-container {
    margin-top: 3rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tracking-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

.tracking-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.tracking-placeholder h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
}

.tracking-placeholder p {
    font-size: 0.95rem;
}

/* Image Search View Styles */
.image-search-container {
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

.upload-zone {
    background: rgba(20, 20, 25, 0.4);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone:hover, .upload-zone.dragover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.upload-icon {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

.upload-zone h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.upload-zone p {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2rem;
}

.upload-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.8rem 2rem;
    font-size: 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* 1688 Image Search Styles */
.search-1688-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #e879f9;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}
.search-1688-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.search-1688-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto 4rem auto;
    background: #0f0f13;
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 20px;
    padding: 3rem;
    overflow: hidden;
}

.search-1688-grid-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 1;
}

.search-1688-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.upload-zone-1688 {
    width: 60%;
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.upload-zone-1688:hover, .upload-zone-1688.dragover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.upload-icon-1688 {
    font-size: 3rem;
    color: #a3a3a3;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.upload-zone-1688 h3 {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.5rem;
}
.upload-zone-1688 p {
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
}

.preview-image-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}
.preview-image-wrapper img {
    max-width: 300px;
    max-height: 300px;
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
}
.remove-image-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ef4444;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.start-search-btn {
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 12px;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}
.start-search-btn:hover {
    background: #e5e5e5;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.agent-link-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}
.agent-link-btn.kakobuy { background: #f59e0b; }
.agent-link-btn.kakobuy:hover { background: #d97706; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
.agent-link-btn.wellgobuy { background: #3b82f6; }
.agent-link-btn.wellgobuy:hover { background: #2563eb; box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); }

.flag-img {
    width: 24px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
}


/* --- PREMIUM SETTINGS MODAL STYLES --- */
#settings-modal .modal-content {
    background: #0f0f12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-width: 450px;
    padding: 0;
    overflow: hidden;
}

#settings-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#settings-modal .modal-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

#settings-modal .modal-header h2 i {
    color: #ffffff;
    font-size: 1.5rem;
}

#settings-modal .close-btn {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

#settings-modal .close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

#settings-modal .modal-body {
    padding: 2rem;
}

.settings-section {
    margin-bottom: 2rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h3 {
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-section h3 i {
    font-size: 0.8rem;
}









.option-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
}

.flag-img {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
}

.agent-logo {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
}

.check-icon {
    color: #ffffff;
    font-size: 1rem;
}













.settings-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-option:last-child {
    margin-bottom: 0;
}

.settings-option:hover {
    background: rgba(255, 255, 255, 0.04);
}

.settings-option.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 3px solid #ffffff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.05);
}


/* ==========================================
   ADMIN PANEL - ADD PRODUCT MODAL
========================================== */


.modal-content {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.modal-content form {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-wrapper label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.input-wrapper input,
.input-wrapper select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.input-wrapper input:focus,
.input-wrapper select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.modal-footer {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-footer .btn {
    flex: 1;
}

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-dead {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: capitalize;
}

/* Product Card Styles — overridden by #products-grid .product-card block at end of file */
.product-card { display: flex; flex-direction: column; cursor: pointer; }

.product-image {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorite-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.favorite-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.product-info {
    padding: 1rem;
}

.product-info h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #fbbf24;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.product-rating span {
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.btn-view-product {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-view-product:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Grid Layout */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
}


/* =========================================
   LINE CHART STYLES - INTERACTIVE GRADIENT
========================================= */

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.chart-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.line-chart-container {
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

.line-chart {
    width: 100%;
    height: auto;
    display: block;
}

.chart-label {
    fill: var(--text-muted);
    font-size: 12px;
    text-anchor: middle;
    font-weight: 500;
}

.line-path {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: drawLine 2s ease forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

.line-area {
    opacity: 0;
    animation: fadeInArea 1.5s ease 0.5s forwards;
}

@keyframes fadeInArea {
    to {
        opacity: 0.6;
    }
}

.chart-point {
    fill: #ffffff;
    stroke: #71717a;
    stroke-width: 2;
    opacity: 1;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chart-point:hover {
    r: 9;
    fill: #a1a1aa;
    stroke: #ffffff;
    stroke-width: 3;
    filter: drop-shadow(0 0 12px rgba(161, 161, 170, 0.8));
}

.chart-tooltip {
    position: absolute;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    pointer-events: none;
    z-index: 100;
    min-width: 220px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chart-tooltip.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
}

.tooltip-day {
    font-size: 0.8rem;
    font-weight: 700;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tooltip-data {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.tooltip-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tooltip-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}


/* =========================================


/* =========================================


/* =========================================
   PRODUCTS VIEW — EXPLORE PRODUCTS
========================================= */

#products-view {
    width: 100%;
    min-height: 100vh;
}

.pv-header {
    width: 100%;
    text-align: center;
    padding: 3.5rem 0 1.5rem;
}
.pv-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0;
}

.pv-wrap {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2.5rem 5rem;
    box-sizing: border-box;
}

/* Search */
.pv-search-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}
.pv-search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 1;
}
.pv-search-input {
    width: 100%;
    box-sizing: border-box;
    background: #111;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.9rem 1rem 0.9rem 2.8rem;
    outline: none;
    transition: border-color 0.2s;
}
.pv-search-input::placeholder { color: rgba(255,255,255,0.25); }
.pv-search-input:focus { border-color: rgba(255,255,255,0.3); }

/* Toolbar */
.pv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pv-toolbar::-webkit-scrollbar { display: none; }
.pv-filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.pv-sort { flex-shrink: 0; }

/* Filter buttons */
.pv-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #111;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    color: rgba(255,255,255,0.65);
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
}
.pv-filter-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}
.pv-filter-btn.active {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}
.pv-chev { font-size: 0.6rem; opacity: 0.5; }

/* --- Category dropdown --- */
.pv-filter-dropdown { position: relative; }

/* toggle button — rounder, ios style */
.pv-cat-toggle {
    border-radius: 20px;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
}

.pv-dropdown-menu::-webkit-scrollbar { width: 4px; }
.pv-dropdown-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* search inside dropdown */
.pv-drop-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.4rem;
    flex-shrink: 0;
}
.pv-drop-search-wrap i { color: rgba(255,255,255,0.3); font-size: 0.8rem; }
.pv-drop-search {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.84rem;
    width: 100%;
}
.pv-drop-search::placeholder { color: rgba(255,255,255,0.25); }

/* dropdown items */
.pv-drop-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    width: 100%;
}
.pv-drop-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.pv-drop-item.active { color: #fff; font-weight: 700; }
.pv-drop-item.active { background: rgba(255,255,255,0.06); }

.pv-drop-icon {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.pv-drop-item span { flex: 1; }
.pv-drop-check {
    font-size: 0.75rem;
    color: #fff;
    opacity: 0;
    margin-left: auto;
    flex-shrink: 0;
}
.pv-drop-item.active .pv-drop-check { opacity: 1; }
.pv-drop-item.active .pv-drop-icon { color: rgba(255,255,255,0.8); }

/* =========================================
   PRODUCT GRID — 4 kolumny, większe kwadraty
========================================= */
#products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.2rem !important;
    margin-bottom: 2.5rem;
    background: transparent !important;
}
@media (max-width: 1100px) { #products-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 750px)  { #products-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px)  { #products-grid { grid-template-columns: 1fr !important; } }

/* =========================================
   PRODUCT CARD
========================================= */
.product-card {
    background: #0d0d0d !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden !important;
    transition: border-color 0.2s, transform 0.2s !important;
    padding: 0 !important;
}
.product-card:hover {
    border-color: rgba(255,255,255,0.14) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

/* Image — square 1:1 */
.product-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden !important;
    background: #161616;
    flex-shrink: 0;
    border-radius: 0;
}
.product-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.product-card:hover .product-card__img-wrap img { transform: scale(1.05); }

/* Badges */
.product-card__badge-popular {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 8px 4px 6px;
    border-radius: 6px;
    display: flex; align-items: center; gap: 4px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.product-card__badge-popular i {
    color: #f97316;
    font-size: 0.6rem;
}
.product-card__badge-cat {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 2;
}

/* Body */
.product-card__body {
    padding: 0.85rem 0.9rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}
.product-card__cat-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
}
.product-card__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
}
.product-card__price {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
.product-card__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255,255,255,0.3);
    font-size: 0.72rem;
}
.product-card__meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}
.product-card__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem !important;
    margin-top: 0.65rem;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.82rem !important;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.product-card__btn:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 0.65rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    color: rgba(255,255,255,0.45);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.page-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
.page-btn.active { background: #fff !important; color: #000 !important; border-color: #fff !important; }


/* =========================================


/* =========================================
   PRODUCTS VIEW — clean animacja wejścia
========================================= */
#products-view.pv-animate-in .pv-title,
#products-view.pv-animate-in .pv-search-wrap,
#products-view.pv-animate-in .pv-toolbar,
#products-view.pv-animate-in #products-grid {
    animation: pvFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#products-view.pv-animate-in .pv-search-wrap { animation-delay: 0.07s; }
#products-view.pv-animate-in .pv-toolbar      { animation-delay: 0.13s; }
#products-view.pv-animate-in #products-grid   { animation-delay: 0.2s;  }

@keyframes pvFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* =========================================
   TOOL VIEWS — wspólny styl
========================================= */
.tool-view {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* animacja wejścia dla tool views */
.tool-view.tool-animate {
    animation: pvFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Hero section każdego toola */
.tool-hero {
    width: 100%;
    max-width: 780px;
    padding: 6rem 2rem 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.tool-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

.tool-hero__sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.45);
    margin: 0 0 2rem;
    line-height: 1.6;
    max-width: 480px;
}

/* Input row — tracking, converter, qc */
.tool-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: #141414;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    padding: 0.35rem 0.35rem 0.35rem 1.2rem;
}

.tool-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.tool-input-icon {
    color: rgba(255,255,255,0.25);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.tool-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    width: 100%;
    min-width: 0;
}
.tool-input::placeholder { color: rgba(255,255,255,0.25); }

/* Track / Find / Convert button */
.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.tool-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
}

/* hint below input */
.tool-hint {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.25);
    margin-top: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* tracking results */
.tool-results {
    width: 100%;
    max-width: 780px;
    padding: 0 2rem 4rem;
}

/* =========================================
   LINK CONVERTER — agent dropdown
========================================= */
.agent-dropdown {
    position: relative;
    flex-shrink: 0;
}

.agent-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.agent-btn:hover { background: rgba(255,255,255,0.13); }

.agent-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.15);
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.agent-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    background: #161616;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 0.75rem 0.5rem 0.5rem;
    z-index: 300;
    box-shadow: 0 16px 40px rgba(0,0,0,0.7);
    gap: 0.1rem;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.agent-dropdown.open .agent-menu { display: flex; }

.agent-menu__label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3);
    padding: 0 0.75rem 0.5rem;
    text-transform: uppercase;
}

.agent-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    text-align: left;
}
.agent-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.agent-item.active { color: #fff; font-weight: 700; }

.agent-check {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0;
}
.agent-item.active .agent-check { opacity: 1; }

/* converter result */
.converter-result {
    width: 100%;
    margin-top: 1.2rem;
    background: #141414;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    animation: pvFadeUp 0.3s ease both;
}
.converter-result.hidden { display: none; }
.converter-result__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.converter-result__inner span {
    flex: 1;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    word-break: break-all;
    min-width: 0;
}
.tool-copy-btn, .tool-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}
.tool-copy-btn:hover, .tool-open-btn:hover { background: rgba(255,255,255,0.15); }

/* =========================================
   HOW IT WORKS — converter
========================================= */
.how-it-works {
    width: 100%;
    max-width: 900px;
    padding: 0 2rem 5rem;
    text-align: center;
}
.how-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.how-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 680px) { .how-grid { grid-template-columns: 1fr; } }

.how-card {
    background: #111;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: left;
}
.how-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.2rem;
}
.how-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}
.how-card p {
    font-size: 0.83rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.6;
}

/* =========================================
   QC FINDER — placeholder
========================================= */
.qc-placeholder {
    text-align: center;
    padding: 3rem 2rem;
    color: rgba(255,255,255,0.3);
}
.qc-placeholder__icon {
    width: 70px;
    height: 70px;
    background: #111;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: rgba(255,255,255,0.3);
    margin: 0 auto 1.2rem;
}
.qc-placeholder h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.5rem;
}
.qc-placeholder p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.3);
}
.qc-results { width: 100%; max-width: 900px; padding: 0 2rem 4rem; }
.qc-results.hidden { display: none; }


/* =========================================
   PRODUCT CARD — profesjonalna animacja wejścia
   Każda karta dostaje --card-i (index) przez JS
   i wchodzi z dołu z opacity + scale stagger
========================================= */

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.product-card {
    opacity: 0; /* domyślnie niewidoczna, JS ją animuje */
}

.product-card.card-visible {
    animation: cardEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--card-i, 0) * 55ms);
}

/* Spinner — infinity scroll loader */
.products-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 0;
    gap: 0.5rem;
}

.products-loader.hidden { display: none; }

.loader-dot {
    width: 7px;
    height: 7px;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
    animation: loaderPulse 1.2s ease-in-out infinite;
}
.loader-dot:nth-child(2) { animation-delay: 0.2s; }
.loader-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes loaderPulse {
    0%, 100% { transform: scale(0.7); opacity: 0.3; }
    50%       { transform: scale(1);   opacity: 1;   }
}

/* Sentinel — niewidoczny trigger dla IntersectionObserver */
#scroll-sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
}


/* =========================================
   TOOLBAR + DROPDOWN — OVERRIDE FINAL
========================================= */

/* Toolbar */
.pv-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    margin-bottom: 2rem !important;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
}
.pv-filters {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-wrap: nowrap !important;
}

/* Filter / sort buttons — clean dark pill style */
.pv-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    background: #141414 !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 99px !important;
    color: rgba(255,255,255,0.6) !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.pv-filter-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.18) !important;
}
.pv-filter-btn.active {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}
.pv-chev { font-size: 0.55rem !important; opacity: 0.45 !important; }

/* Dropdown menu — glassmorphism dark */
.pv-dropdown-menu {
    background: #161616 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03) !important;
    padding: 6px !important;
    width: 220px !important;
    max-height: 380px !important;
    overflow-y: auto !important;
}

.pv-drop-search-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    padding: 0.45rem 0.75rem !important;
    margin-bottom: 4px !important;
}
.pv-drop-search-wrap i { color: rgba(255,255,255,0.25) !important; font-size: 0.75rem !important; }
.pv-drop-search {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    width: 100% !important;
}
.pv-drop-search::placeholder { color: rgba(255,255,255,0.2) !important; }

.pv-drop-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.6) !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 0.55rem 0.75rem !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: left !important;
    transition: background 0.12s, color 0.12s !important;
}
.pv-drop-item:hover {
    background: rgba(255,255,255,0.07) !important;
    color: #fff !important;
}
.pv-drop-item.active {
    background: rgba(255,255,255,0.07) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.pv-drop-icon {
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.3) !important;
    width: 15px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}
.pv-drop-item.active .pv-drop-icon { color: rgba(255,255,255,0.7) !important; }
.pv-drop-item span { flex: 1 !important; }
.pv-drop-check { margin-left: auto !important; font-size: 0.7rem !important; opacity: 0 !important; }
.pv-drop-item.active .pv-drop-check { opacity: 1 !important; }


/* =========================================
   HOME — FEATURES & TOOLS — nowy styl
========================================= */

/* Wspólne nagłówki sekcji */
.home-section-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 99px;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1rem;
}
.home-section-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}
.home-section-sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.4);
    margin: 0;
    line-height: 1.6;
}

/* ---- FEATURES SECTION ---- */
.home-features {
    padding: 6rem 0 5rem;
    position: relative;
}
.home-features__header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.home-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
}
@media (max-width: 1000px) { .home-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .home-features__grid { grid-template-columns: 1fr; } }

.hf-card {
    background: #0a0a0a;
    padding: 2.2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background 0.2s;
    text-decoration: none;
}
.hf-card:hover { background: #111; }

.hf-card__icon {
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.5rem;
    transition: background 0.2s, color 0.2s;
}
.hf-card:hover .hf-card__icon {
    background: rgba(255,255,255,0.09);
    color: #fff;
}
.hf-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.hf-card p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.hf-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    margin-top: 0.5rem;
    transition: color 0.2s;
}
.hf-card:hover .hf-card__link { color: #fff; }
.hf-card__link i { font-size: 0.7rem; transition: transform 0.2s; }
.hf-card:hover .hf-card__link i { transform: translateX(4px); }

/* ---- TOOLS SECTION ---- */
.home-tools {
    padding: 0 0 6rem;
}
.home-tools__header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-top: 5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.home-tools__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 3rem;
}
.ht-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0a0a0a;
    padding: 1.4rem 1.8rem;
    text-decoration: none;
    transition: background 0.18s;
    gap: 1rem;
}
.ht-row:hover { background: #111; }
.ht-row__left {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.ht-row__icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s;
}
.ht-row:hover .ht-row__icon { background: rgba(255,255,255,0.09); color: #fff; }
.ht-row__text h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.2rem;
}
.ht-row__text p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
    margin: 0;
    line-height: 1.5;
}
.ht-row__arrow {
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s, transform 0.18s;
}
.ht-row:hover .ht-row__arrow {
    background: rgba(255,255,255,0.09);
    color: #fff;
    transform: translateX(3px);
}

/* ---- DISCORD BANNER ---- */
.home-discord {
    position: relative;
    overflow: hidden;
}
.home-discord__bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, transparent 70%);
    pointer-events: none;
}
.home-discord__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 2.2rem 2.5rem;
    flex-wrap: wrap;
}
.home-discord__icon {
    font-size: 2.2rem;
    color: #5865F2;
    filter: drop-shadow(0 0 16px rgba(88,101,242,0.4));
    flex-shrink: 0;
}
.home-discord__text { flex: 1; min-width: 200px; }
.home-discord__text h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.25rem;
}
.home-discord__text p {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.4);
    margin: 0;
    line-height: 1.5;
}
.home-discord__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(88,101,242,0.15);
    border: 1px solid rgba(88,101,242,0.35);
    border-radius: 99px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.65rem 1.4rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
.home-discord__btn:hover {
    background: rgba(88,101,242,0.28);
    border-color: rgba(88,101,242,0.6);
}


/* =========================================
   HOME BOTTOM — GLASS REDESIGN
========================================= */

/* ---- FEATURES SECTION ---- */
.home-features {
    padding: 7rem 0 6rem !important;
    position: relative;
    overflow: hidden;
}

/* subtle radial glow behind the section */
.home-features::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
}

.home-features__header {
    text-align: center !important;
    margin-bottom: 4rem !important;
}

.home-features__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* grid wrapper — adds spacing */
    padding: 0 !important;
    column-gap: 1.2rem !important;
    row-gap: 1.2rem !important;
}

@media (max-width: 1000px) { .home-features__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px)  { .home-features__grid { grid-template-columns: 1fr !important; } }

/* Glass card */
.hf-card {
    position: relative !important;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.02) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    padding: 2rem 1.8rem 1.8rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.7rem !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
    text-decoration: none !important;
}

/* shimmer line on top */
.hf-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.25) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hf-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.hf-card:hover::before { opacity: 1; }

.hf-card__icon {
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    color: rgba(255,255,255,0.7) !important;
    margin-bottom: 0.4rem !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.hf-card:hover .hf-card__icon {
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.2) !important;
}

.hf-card h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}
.hf-card p {
    font-size: 0.83rem !important;
    color: rgba(255,255,255,0.4) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    flex: 1 !important;
}
.hf-card__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.4) !important;
    margin-top: 0.5rem !important;
    transition: color 0.2s, gap 0.2s !important;
    text-decoration: none !important;
}
.hf-card:hover .hf-card__link { color: rgba(255,255,255,0.85) !important; gap: 0.65rem !important; }
.hf-card__link i { font-size: 0.68rem !important; }

/* ---- TOOLS SECTION ---- */
.home-tools {
    padding: 0 0 7rem !important;
}
.home-tools__header {
    text-align: center !important;
    padding-top: 5rem !important;
    margin-bottom: 3rem !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.home-tools__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-bottom: 2.5rem !important;
}

.ht-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.055) 0%,
        rgba(255,255,255,0.02) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 16px !important;
    padding: 1.3rem 1.6rem !important;
    text-decoration: none !important;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
                border-color 0.25s ease,
                box-shadow 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
.ht-row::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}
.ht-row:hover {
    transform: translateX(6px) !important;
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.03) 100%) !important;
}
.ht-row:hover::before { opacity: 1; }

.ht-row__left {
    display: flex !important;
    align-items: center !important;
    gap: 1.2rem !important;
}
.ht-row__icon {
    width: 42px !important;
    height: 42px !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    color: rgba(255,255,255,0.55) !important;
    flex-shrink: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
    transition: background 0.2s, color 0.2s !important;
}
.ht-row:hover .ht-row__icon {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
.ht-row__text h3 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 0.2rem !important;
    letter-spacing: -0.01em !important;
}
.ht-row__text p {
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.35) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.ht-row__arrow {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,0.3) !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
    transition: background 0.2s, color 0.2s, transform 0.2s !important;
}
.ht-row:hover .ht-row__arrow {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    transform: translateX(3px) !important;
}

/* ---- DISCORD BANNER ---- */
.home-discord {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}
.home-discord__bg-grid {
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 75%) !important;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 75%) !important;
    pointer-events: none !important;
}
.home-discord__inner {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.055) 0%,
        rgba(255,255,255,0.02) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    padding: 2.5rem 2.8rem !important;
    flex-wrap: wrap !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 20px 60px rgba(0,0,0,0.3) !important;
}
.home-discord__icon {
    font-size: 2.5rem !important;
    color: #5865F2 !important;
    filter: drop-shadow(0 0 20px rgba(88,101,242,0.5)) !important;
    flex-shrink: 0 !important;
}
.home-discord__text { flex: 1 !important; min-width: 200px !important; }
.home-discord__text h3 {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 0.3rem !important;
    letter-spacing: -0.02em !important;
}
.home-discord__text p {
    font-size: 0.85rem !important;
    color: rgba(255,255,255,0.4) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.home-discord__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: rgba(88,101,242,0.18) !important;
    border: 1px solid rgba(88,101,242,0.4) !important;
    border-radius: 99px !important;
    color: #fff !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 0.7rem 1.6rem !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 0 20px rgba(88,101,242,0.15) !important;
}
.home-discord__btn:hover {
    background: rgba(88,101,242,0.3) !important;
    border-color: rgba(88,101,242,0.65) !important;
    box-shadow: 0 0 30px rgba(88,101,242,0.3) !important;
}


/* =========================================
   SCROLL REVEAL — clean, subtle
========================================= */

/* Elementy przed animacją — niewidoczne */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="left"] {
    transform: translateX(-20px);
}

[data-reveal="right"] {
    transform: translateX(20px);
}

[data-reveal="scale"] {
    transform: scale(0.96) translateY(14px);
}

/* Po wejściu w viewport — widoczne */
[data-reveal].in-view {
    opacity: 1 !important;
    transform: none !important;
}

/* Stagger delay przez data-delay="Nms" */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.4s; }


/* =========================================
   SELLERS VIEW — clean redesign
========================================= */

#sellers-view {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 2rem 6rem;
}

/* Header */
.sv-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.sv-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0 0 0.5rem;
}
.sv-sub {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

/* Search */
.sv-search-wrap {
    position: relative;
    margin-bottom: 1.2rem;
}
.sv-search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.25);
    font-size: 0.9rem;
    pointer-events: none;
}
.sv-search-input,
.sellers-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    padding: 0.9rem 1rem 0.9rem 2.8rem !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}
.sv-search-input::placeholder,
.sellers-search-input::placeholder { color: rgba(255,255,255,0.22) !important; }
.sv-search-input:focus,
.sellers-search-input:focus { border-color: rgba(255,255,255,0.2) !important; }

/* Tags scrollable row */
.sv-tags-wrap {
    margin-bottom: 2.5rem;
    overflow: hidden;
}
.sv-tags-scroll {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}
.sv-tags-scroll::-webkit-scrollbar { display: none; }

.sv-tag,
.seller-tag {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 99px !important;
    color: rgba(255,255,255,0.55) !important;
    font-family: inherit !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 0.38rem 0.9rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.sv-tag:hover,
.seller-tag:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.16) !important;
}
.sv-tag.active,
.seller-tag.active {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* Grid - fixed with explicit row flow */
.sv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: start;
    grid-auto-flow: row;
}
@media (max-width: 1100px) { .sv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .sv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .sv-grid { grid-template-columns: 1fr; } }

/* Card */
.seller-card-premium {
    background: linear-gradient(145deg,
        rgba(255,255,255,0.055) 0%,
        rgba(255,255,255,0.02) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 1.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.9rem !important;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
                border-color 0.25s ease,
                box-shadow 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
.seller-card-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}
.seller-card-premium:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255,255,255,0.15) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35) !important;
}
.seller-card-premium:hover::before { opacity: 1; }

/* Avatar initial — clean monochrome */
.seller-avatar-initial {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    letter-spacing: -0.02em !important;
}

/* Seller header row */
.seller-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
}
.seller-info h3 {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
}

/* Top rated badge */
.top-rated-star {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 99px !important;
    padding: 2px 7px 2px 5px !important;
    white-space: nowrap !important;
}
.top-rated-star i { color: #f59e0b !important; font-size: 0.6rem !important; }

/* Description */
.seller-desc {
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.38) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    flex: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Brand tags on card */
.seller-tags-premium {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    max-width: 100% !important;
    overflow: hidden !important;
    max-height: 3.2rem !important;
    min-height: 1.8rem !important;
}
.seller-tag-premium {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 6px !important;
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    padding: 3px 6px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    line-height: 1.2 !important;
}
.seller-tag-premium i {
    flex-shrink: 0 !important;
}
.seller-tag-highlight {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: rgba(52, 211, 153, 0.9) !important;
}

/* Visit button */
.seller-btn-premium {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.65rem !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 9px !important;
    color: rgba(255,255,255,0.8) !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-top: auto !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
.seller-btn-premium:hover {
    background: rgba(255,255,255,0.13) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.2) !important;
}


/* =========================================
   HERO STATS BAR
========================================= */
.hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 2.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 1rem 0;
    overflow: hidden;
}
.hero-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 1.5rem;
}
.hero-stat__num {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
}
.hero-stat__label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hero-stat__divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .hero-stats { flex-wrap: wrap; }
    .hero-stat__divider { display: none; }
    .hero-stat { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .hero-stat:nth-child(n+5) { border-bottom: none; }
}

/* Nav active state */
.nav-links a.nav-active {
    color: var(--text-primary) !important;
}
.nav-links a.nav-active::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 3px;
}

/* =========================================
   SITE FOOTER
========================================= */
.site-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 0;
    padding: 0;
}
/* Footer only shows on home-view */
.site-footer { display: none; }
#home-view.active ~ .site-footer,
body:has(#home-view.active) .site-footer { display: block; }

.site-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
}
@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 500px) {
    .site-footer__inner { grid-template-columns: 1fr; }
}

.site-footer__logo {
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}
.site-footer__tagline {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
    line-height: 1.6;
    margin: 0 0 1.2rem;
    max-width: 220px;
}
.site-footer__socials {
    display: flex;
    gap: 0.5rem;
}
.site-footer__social {
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.site-footer__social:hover { background: rgba(255,255,255,0.1); color: #fff; }

.site-footer__col h4 {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3);
    margin: 0 0 1rem;
}
.site-footer__col a {
    display: block;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    margin-bottom: 0.55rem;
    transition: color 0.15s;
    cursor: pointer;
}
.site-footer__col a:hover { color: #fff; }

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 1.2rem;
    padding-bottom: 1.5rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.2);
    flex-wrap: wrap;
    gap: 0.5rem;
}


/* ---- SPACING FIX ---- */


/* =========================================
   HERO — FINAL CLEAN VERSION
========================================= */
.hero {
    min-height: calc(100vh - 60px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 3rem 2rem !important;
    margin: 0 !important;
    gap: 1.2rem !important;
}

.hero h1 {
    font-size: clamp(2.6rem, 5vw, 4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(160deg, #ffffff 0%, rgba(255,255,255,0.78) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin: 0 !important;
}

.hero-badge {
    margin-bottom: 0.25rem !important;
}

.hero .subtitle {
    font-size: 1rem !important;
    color: rgba(255,255,255,0.4) !important;
    min-height: 1.4rem !important;
    margin: 0 !important;
}

.hero-buttons {
    margin-top: 0.5rem !important;
    gap: 0.75rem !important;
}


/* Fallback — jeśli JS nie odpali reveal, pokaż po chwili */
[data-reveal] {
    animation: revealFallback 0.01s 2.5s forwards;
}
[data-reveal].in-view {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
@keyframes revealFallback {
    to { opacity: 1; transform: none; }
}


/* ---- HERO POSITION FIX ---- */
.hero {
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -2rem !important;
}

.hero { margin-top: -6rem !important; }

.hero { margin-top: -9rem !important; }


/* =========================================
   TRACKING — wyniki z własnego API
========================================= */

.track-result {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.track-result__header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.4rem 1.6rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
}

.track-result__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    width: fit-content;
}

.track-result__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.45);
}

.track-result__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.track-result__meta i {
    color: rgba(255,255,255,0.25);
    font-size: 0.7rem;
}

/* Timeline */
.track-result__timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 2rem;
}

.track-result__timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: rgba(255,255,255,0.07);
}

.track-event {
    position: relative;
    padding: 0.85rem 0 0.85rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.track-event:last-child {
    border-bottom: none;
}

.track-event__dot {
    position: absolute;
    left: -1.55rem;
    top: 1.1rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.track-event__dot--active {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16,185,129,0.4);
}

.track-event__content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.track-event__date {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.3);
    font-variant-numeric: tabular-nums;
}

.track-event__status {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
}

.track-event--first .track-event__status {
    color: #fff;
}

.track-event__loc {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
}

.track-event__loc i {
    font-size: 0.65rem;
}

/* ==== FXTRK:CSS START ==== */
/* =========================================
   TRACKING MODULE (port z Tracking.module.css)
   Wszystkie klasy z przedrostkiem fxtrk-.
   Progi: 1024 px i 768 px (bez 640/480 px).
   Warstwa mapy 3D nie jest przenoszona.
========================================= */

.fxtrk-root {
    /* tokeny lokalne — jedyne miejsce z wartościami kolorów modułu */
    --fxtrk-base: #09090b;
    --fxtrk-surface: #18181b;
    --fxtrk-surface-2: #27272a;
    --fxtrk-text: var(--text-primary);
    --fxtrk-text-dim: #a1a1aa;
    --fxtrk-border: rgba(255, 255, 255, 0.05);
    --fxtrk-accent: #ffffff;
    --fxtrk-accent-light: #a3a3a3;
    --fxtrk-accent-soft: rgba(255, 255, 255, 0.05);
    --fxtrk-accent-line: rgba(255, 255, 255, 0.15);
    --fxtrk-pink: #f472b6;
    --fxtrk-ok: #34d399;
    --fxtrk-warn: #fbbf24;
    --fxtrk-danger: #f87171;

    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 60px;
    color: var(--fxtrk-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
}

/* zaznaczanie tekstu — własność ma przetrwać przyszłe globalne user-select: none */
#tracking-view .fxtrk-root {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.fxtrk-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.fxtrk-main {
    position: relative;
    z-index: 1;
    width: 100%;
}

.fxtrk-animate-in {
    animation: fxtrkPageEnter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fxtrkPageEnter {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes fxtrkSpin {
    to { transform: rotate(360deg); }
}

@keyframes fxtrkPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.8); }
}

/* ---------- Nagłówek ---------- */
.fxtrk-header {
    text-align: center;
    margin-bottom: 40px;
}

.fxtrk-header__title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0 0 8px;
    color: var(--fxtrk-text);
}

.fxtrk-header__sub {
    color: var(--fxtrk-text-dim);
    font-size: 16px;
    margin: 0;
}

/* ---------- Pole wyszukiwania ---------- */
.fxtrk-box {
    background: var(--fxtrk-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 40px;
    padding: 40px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5);
}

.fxtrk-input-group {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--fxtrk-base);
    border: 1px solid var(--fxtrk-border);
    border-radius: 20px;
    padding: 10px 10px 10px 24px;
    position: relative;
    transition: all 0.3s ease;
}

.fxtrk-input-group:focus-within {
    border-color: var(--fxtrk-accent-line);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.fxtrk-input-icon {
    color: var(--text-muted);
    font-size: 18px;
}

.fxtrk-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--fxtrk-text);
    font-family: inherit;
    font-size: 16px;
    outline: none;
}

.fxtrk-input:focus,
.fxtrk-input:focus-visible {
    outline: none !important;
}

.fxtrk-track-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #ffffff, #a3a3a3);
    color: #000;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

.fxtrk-track-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}

.fxtrk-track-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.fxtrk-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fxtrkSpin 0.8s linear infinite;
}

.fxtrk-status-msg {
    text-align: center;
    margin-top: 20px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.1);
    color: var(--fxtrk-danger);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fxtrk-last-searched {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    overflow-wrap: anywhere;
}

.fxtrk-last-searched:hover {
    color: var(--fxtrk-accent-light);
}

.fxtrk-last-searched strong {
    color: var(--fxtrk-accent-light);
    font-weight: 700;
}

/* ---------- Wyniki ---------- */
.fxtrk-result {
    margin-top: 40px;
    animation: fxtrkFadeIn 0.5s ease;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* odstęp po dawnym banerze mapy przejmuje pierwsza sekcja wyników */
.fxtrk-result > :first-child {
    margin-bottom: 30px;
}

.fxtrk-section-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--fxtrk-text);
}

/* Informacje główne — dwie kolumny powyżej 768 px */
.fxtrk-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 40px;
}

.fxtrk-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding: 16px;
    border: 1px solid var(--fxtrk-border);
    border-radius: var(--radius-lg);
    background: var(--fxtrk-surface);
    min-width: 0;
}

.fxtrk-info-item i,
.fxtrk-info-item svg {
    color: var(--fxtrk-accent-light);
    flex-shrink: 0;
}

.fxtrk-info-item__label {
    color: var(--fxtrk-text-dim);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.fxtrk-info-item__value {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: var(--fxtrk-text);
    overflow-wrap: anywhere;
}

.fxtrk-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    color: var(--fxtrk-accent-light);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.fxtrk-copy-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--fxtrk-accent-line);
    transform: translateY(-1px);
}

.fxtrk-copy-btn:active {
    transform: scale(0.95);
}

/* ---------- Grupy krajów ---------- */
.fxtrk-country-group {
    margin-bottom: 40px;
}

.fxtrk-country-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.fxtrk-country__code {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.fxtrk-country__name {
    font-size: 24px;
    font-weight: 800;
    color: var(--fxtrk-accent-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}

.fxtrk-country__divider {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--fxtrk-accent-line), transparent);
}

/* ---------- Oś czasu (jedna kolumna na każdej szerokości) ---------- */
.fxtrk-timeline-section {
    border-top: 1px solid var(--fxtrk-border);
    padding-top: 30px;
}

.fxtrk-timeline {
    position: relative;
    padding-left: 24px;
    display: block;
}

.fxtrk-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.fxtrk-timeline__item {
    position: relative;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.fxtrk-timeline__item:hover {
    transform: translateX(10px);
}

.fxtrk-timeline__item:hover .fxtrk-timeline__content {
    background: var(--fxtrk-surface-2);
    border-color: var(--fxtrk-accent-line);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);
}

.fxtrk-timeline__item:hover .fxtrk-timeline__dot {
    transform: scale(1.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.fxtrk-timeline__dot {
    position: absolute;
    left: -28px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a3a3a3;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.fxtrk-timeline__content {
    padding: 16px;
    border: 1px solid var(--fxtrk-border);
    border-radius: 20px;
    background: var(--fxtrk-surface);
    transition: all 0.3s ease;
}

.fxtrk-timeline__date {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fxtrk-accent-light);
}

.fxtrk-timeline__status {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--fxtrk-text);
    overflow-wrap: anywhere;
}

.fxtrk-timeline__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--fxtrk-text-dim);
    overflow-wrap: anywhere;
}

.fxtrk-show-more {
    display: block;
    margin: 20px auto 0;
    padding: 10px 24px;
    border: 1px solid var(--fxtrk-accent-line);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--fxtrk-accent-light);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.fxtrk-show-more:hover {
    background: var(--fxtrk-accent-soft);
    border-color: var(--fxtrk-accent);
}

.fxtrk-show-more:focus,
.fxtrk-show-more:focus-visible {
    outline: none;
    border-color: var(--fxtrk-accent-line);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.fxtrk-show-more:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.08);
}

.fxtrk-source-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--fxtrk-border);
    opacity: 0.4;
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ---------- Karta przewidywanej dostawy (główny widok wyników) ---------- */
.fxtrk-estimate {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    position: relative;
    overflow: hidden;
    animation: fxtrkFadeIn 0.4s ease;
    transition: all 0.3s ease;
}

.fxtrk-estimate:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.05);
}

.fxtrk-estimate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ffffff, #a3a3a3, transparent);
}

/* warianty pewności — statyczne nazwy klas, bez składania przez interpolację */
.fxtrk-estimate--high {
    border-color: rgba(52, 211, 153, 0.3);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.07) 0%, rgba(16, 185, 129, 0.03) 100%);
}

.fxtrk-estimate--high::before {
    background: linear-gradient(90deg, #34d399, #10b981, transparent);
}

.fxtrk-estimate--medium {
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.07) 0%, rgba(245, 158, 11, 0.03) 100%);
}

.fxtrk-estimate--medium::before {
    background: linear-gradient(90deg, #fbbf24, #f59e0b, transparent);
}

.fxtrk-estimate--low {
    border-color: rgba(255, 255, 255, 0.15);
}

.fxtrk-estimate__icon {
    min-width: 36px;
    text-align: center;
    font-size: 28px;
    color: var(--fxtrk-accent-light);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
}

.fxtrk-estimate--high .fxtrk-estimate__icon {
    color: var(--fxtrk-ok);
    filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.6));
}

.fxtrk-estimate--medium .fxtrk-estimate__icon {
    color: var(--fxtrk-warn);
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.6));
}

.fxtrk-estimate__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fxtrk-estimate__label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.fxtrk-estimate__dates {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--fxtrk-text);
    overflow-wrap: anywhere;
}

.fxtrk-estimate__delivered {
    font-size: 22px;
    font-weight: 800;
    color: var(--fxtrk-ok);
    overflow-wrap: anywhere;
}

.fxtrk-estimate__milestone {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.fxtrk-estimate__milestone i,
.fxtrk-estimate__milestone svg {
    color: var(--fxtrk-accent-light);
    font-size: 9px;
}

.fxtrk-estimate--high .fxtrk-estimate__milestone i,
.fxtrk-estimate--high .fxtrk-estimate__milestone svg {
    color: var(--fxtrk-ok);
}

.fxtrk-estimate--medium .fxtrk-estimate__milestone i,
.fxtrk-estimate--medium .fxtrk-estimate__milestone svg {
    color: var(--fxtrk-warn);
}

.fxtrk-estimate__country-note {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(251, 191, 36, 0.7);
    overflow-wrap: anywhere;
}

.fxtrk-estimate__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: fxtrkPulseDot 2s ease-in-out infinite;
}

.fxtrk-dot--high { background: #34d399; box-shadow: 0 0 8px #34d399; }
.fxtrk-dot--medium { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.fxtrk-dot--low { background: #a3a3a3; box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); }

.fxtrk-confidence-bar {
    height: 3px;
    margin-top: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.fxtrk-confidence-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fxtrk-fill--high { width: 90%; background: linear-gradient(90deg, #34d399, #10b981); }
.fxtrk-fill--medium { width: 55%; background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.fxtrk-fill--low { width: 25%; background: linear-gradient(90deg, #ffffff, #a3a3a3); }

.fxtrk-confidence-text {
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* =========================================
   TRACKING — próg 1024 px
========================================= */
@media (max-width: 1024px) {
    .fxtrk-root {
        padding: 0 16px 48px;
    }
    .fxtrk-header__title {
        font-size: 40px;
    }
    .fxtrk-box {
        padding: 32px;
        border-radius: 32px;
    }
    .fxtrk-estimate__dates {
        font-size: 24px;
    }
}

/* =========================================
   TRACKING — próg 768 px
   (scalone reguły z zakresów 640 px i 480 px modułu)
========================================= */
@media (max-width: 768px) {
    .fxtrk-root {
        padding: 0 14px 40px;
    }
    .fxtrk-header {
        margin-bottom: 28px;
    }
    .fxtrk-header__title {
        font-size: 32px;
    }
    .fxtrk-box {
        padding: 20px;
        border-radius: 24px;
    }
    .fxtrk-input-group {
        padding: 8px 8px 8px 16px;
        gap: 10px;
    }
    .fxtrk-info-grid {
        grid-template-columns: 1fr;
    }
    .fxtrk-country__name {
        font-size: 18px;
    }
    .fxtrk-estimate {
        padding: 18px 20px;
        gap: 14px;
    }
    .fxtrk-estimate__icon {
        font-size: 22px;
    }
    .fxtrk-estimate__dates {
        font-size: 20px;
    }
    .fxtrk-estimate__delivered {
        font-size: 18px;
    }
    .fxtrk-timeline__item:hover {
        transform: none;
    }
}
/* =========================================
   FXTRK — Tracking w MONOCHROMATYCZNYM stylu strony
   -----------------------------------------
   Neutralne kolory: czarny + szary + biały (zero fioletu!)
   Duże fonty, przestronne karty, minimalistyczny design
========================================= */

/* ---------- Kontener ---------- */
.fxtrk-root {
    --fxtrk-bg: #0a0a0a;
    --fxtrk-bg-card: #111111;
    --fxtrk-bg-hover: #1a1a1a;
    --fxtrk-text: #ffffff;
    --fxtrk-text-dim: #a3a3a3;
    --fxtrk-text-muted: #737373;
    --fxtrk-border: rgba(255, 255, 255, 0.08);
    --fxtrk-border-strong: rgba(255, 255, 255, 0.15);
    --fxtrk-accent: #ffffff;
    --fxtrk-accent-dim: #a3a3a3;
    --fxtrk-success: #10b981;
    
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

#tracking-view .fxtrk-root {
    user-select: text;
}

.fxtrk-main {
    display: block;
}

/* ---------- Karta statusu (dostarczone/w drodze) ---------- */
.fxtrk-estimate {
    margin-bottom: 40px;
    padding: 28px 32px;
    background: var(--fxtrk-bg-card);
    border: 1px solid var(--fxtrk-border);
    border-left: 3px solid var(--fxtrk-accent-dim);
    border-radius: var(--radius-lg);
}

.fxtrk-estimate--high {
    border-left-color: var(--fxtrk-success);
}

.fxtrk-estimate__label {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--fxtrk-text);
    letter-spacing: -0.01em;
}

.fxtrk-estimate__range {
    font-size: 17px;
    font-weight: 600;
    color: var(--fxtrk-text-dim);
    margin-bottom: 14px;
}

.fxtrk-estimate__confidence {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--fxtrk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.fxtrk-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fxtrk-text-muted);
}

.fxtrk-dot--high {
    background: var(--fxtrk-success);
}

.fxtrk-dot--medium {
    background: var(--fxtrk-text-dim);
}

/* ---------- Informacje główne ---------- */
.fxtrk-info {
    margin-bottom: 56px;
}

.fxtrk-info__title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: var(--fxtrk-text);
}

.fxtrk-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.fxtrk-info-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 70px 24px 24px;
    background: var(--fxtrk-bg-card);
    border: 1px solid var(--fxtrk-border);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    min-height: 90px;
}

.fxtrk-info-item:hover {
    background: var(--fxtrk-bg-hover);
    border-color: var(--fxtrk-border-strong);
}

.fxtrk-info-item__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fxtrk-text-muted);
    margin-bottom: 10px;
}

.fxtrk-info-item__value {
    font-size: 17px;
    font-weight: 600;
    color: var(--fxtrk-text);
    line-height: 1.4;
    word-break: break-word;
    padding-right: 5px;
    max-width: 100%;
    overflow: hidden;
}

.fxtrk-copy-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--fxtrk-border);
    border-radius: var(--radius-sm);
    color: var(--fxtrk-text-dim);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.fxtrk-copy-btn:hover {
    background: var(--fxtrk-bg-hover);
    border-color: var(--fxtrk-border-strong);
    color: var(--fxtrk-text);
}

.fxtrk-copy-btn--copied {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--fxtrk-success);
}

/* ---------- Historia przesyłki ---------- */
.fxtrk-timeline {
    margin-top: 56px;
}

.fxtrk-timeline__title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
    color: var(--fxtrk-text);
}

.fxtrk-timeline__group {
    margin-bottom: 40px;
}

.fxtrk-timeline__group-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.fxtrk-timeline__group-code {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--fxtrk-border-strong);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--fxtrk-text);
}

.fxtrk-timeline__group-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fxtrk-text-dim);
}

.fxtrk-timeline__group-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--fxtrk-border), transparent);
}

.fxtrk-timeline__item {
    position: relative;
    padding-left: 36px;
    margin-bottom: 18px;
}

.fxtrk-timeline__item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 26px;
    bottom: -18px;
    width: 2px;
    background: var(--fxtrk-border);
}

.fxtrk-timeline__item:last-child::before {
    display: none;
}

.fxtrk-timeline__dot {
    position: absolute;
    left: 0;
    top: 20px;
    width: 12px;
    height: 12px;
    background: var(--fxtrk-text-muted);
    border: 2px solid var(--fxtrk-bg);
    border-radius: 50%;
    z-index: 1;
    transition: all 0.2s ease;
}

.fxtrk-timeline__item--latest .fxtrk-timeline__dot {
    background: var(--fxtrk-text);
}

.fxtrk-timeline__item:hover .fxtrk-timeline__dot {
    background: var(--fxtrk-text-dim);
    transform: scale(1.2);
}

.fxtrk-timeline__body {
    padding: 20px 26px;
    background: var(--fxtrk-bg-card);
    border: 1px solid var(--fxtrk-border);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.fxtrk-timeline__item:hover .fxtrk-timeline__body {
    background: var(--fxtrk-bg-hover);
    border-color: var(--fxtrk-border-strong);
}

.fxtrk-timeline__date {
    font-size: 13px;
    font-weight: 700;
    color: var(--fxtrk-text-dim);
    margin-bottom: 10px;
    letter-spacing: 0.03em;
}

.fxtrk-timeline__status {
    font-size: 17px;
    font-weight: 600;
    color: var(--fxtrk-text);
    margin-bottom: 8px;
    line-height: 1.5;
}

.fxtrk-timeline__location {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--fxtrk-text-dim);
}

.fxtrk-timeline__location i {
    font-size: 13px;
    opacity: 0.7;
}

/* ---------- Loading i stany ---------- */
.fxtrk-loading {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.fxtrk-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--fxtrk-border);
    border-top-color: var(--fxtrk-text);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.fxtrk-status-msg {
    padding: 40px 32px;
    text-align: center;
    background: var(--fxtrk-bg-card);
    border: 1px solid var(--fxtrk-border);
    border-radius: var(--radius-lg);
    font-size: 16px;
    color: var(--fxtrk-text-dim);
}

.fxtrk-status-msg__value {
    font-weight: 700;
    color: var(--fxtrk-text);
}

.fxtrk-show-more {
    display: block;
    margin: 36px auto 0;
    padding: 16px 36px;
    background: var(--fxtrk-bg-card);
    border: 1px solid var(--fxtrk-border);
    border-radius: var(--radius-lg);
    color: var(--fxtrk-text);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fxtrk-show-more:hover {
    background: var(--fxtrk-bg-hover);
    border-color: var(--fxtrk-border-strong);
}

/* ---------- Last searched ---------- */
.fxtrk-last-searched {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--fxtrk-bg-card);
    border: 1px solid var(--fxtrk-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--fxtrk-text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fxtrk-last-searched:hover {
    background: var(--fxtrk-bg-hover);
    border-color: var(--fxtrk-border-strong);
}

.fxtrk-last-searched strong {
    color: var(--fxtrk-text);
    font-weight: 700;
}

/* ---------- Responsywność ---------- */
@media (max-width: 768px) {
    .fxtrk-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .fxtrk-estimate {
        padding: 22px 24px;
    }
    
    .fxtrk-timeline__status {
        font-size: 16px;
    }
    
    .fxtrk-info__title,
    .fxtrk-timeline__title {
        font-size: 20px;
    }
}
/* ==== FXTRK:CSS END ==== */


/* =========================================
   PREFERENCES MODAL STYLES
========================================= */
.pref-modal {
    max-width: 460px;
}

.pref-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pref-modal__header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.pref-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: var(--transition-smooth);
}

.pref-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.pref-modal__body {
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.pref-modal__body::-webkit-scrollbar {
    width: 6px;
}

.pref-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.pref-modal__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.pref-modal__body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.pref-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.4rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pref-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pref-row__left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pref-row__icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    font-size: 1.2rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.pref-row:hover .pref-row__icon {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.pref-agent-avatar {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--text-primary);
}

.pref-row__text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pref-row__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pref-row__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pref-row__arrow {
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.pref-row:hover .pref-row__arrow {
    transform: translateX(3px);
}

.pref-sub {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    margin-top: -0.25rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pref-sub:not(.hidden) {
    display: flex;
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
}

.pref-sub-item {
    opacity: 0;
    transform: translateX(-10px);
    animation: slideInItem 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.pref-sub:not(.hidden) .pref-sub-item:nth-child(1) { animation-delay: 0.05s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(2) { animation-delay: 0.08s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(3) { animation-delay: 0.11s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(4) { animation-delay: 0.14s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(5) { animation-delay: 0.17s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(6) { animation-delay: 0.20s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(7) { animation-delay: 0.23s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(8) { animation-delay: 0.26s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(9) { animation-delay: 0.29s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(10) { animation-delay: 0.32s; }
.pref-sub:not(.hidden) .pref-sub-item:nth-child(11) { animation-delay: 0.35s; }

@keyframes slideInItem {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pref-sub-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 11px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    width: 100%;
}

.pref-sub-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    transform: translateX(3px);
}

.pref-sub-item.active {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.pref-sub-item i.fa-check {
    margin-left: auto;
    font-size: 0.85rem;
    color: #10b981;
    opacity: 0;
}

.pref-sub-item.active i.fa-check {
    opacity: 1;
}

.pref-sub-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.pref-sub-item:hover .pref-sub-avatar {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

.pref-sub-item.active .pref-sub-avatar {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

@keyframes pvFadeUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   PRODUCT DETAIL VIEW STYLES
========================================= */

/* Main Container */
#product-detail-view {
    padding: 0;
}

.pdv-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Back Navigation */
.pdv-back-nav {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem 0;
}

.pdv-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    /* TASK 8.4: Enhanced smooth transition with GPU acceleration */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.pdv-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(-4px);
}

.pdv-back-btn:active {
    transform: translateX(-2px);
}

/* Loading State */
.pdv-loading {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-secondary);
}

.pdv-loading i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--text-primary);
}

.pdv-loading p {
    font-size: 1.1rem;
}

/* Error State */
.pdv-error {
    text-align: center;
    padding: 5rem 2rem;
    max-width: 500px;
    margin: 0 auto;
}

.pdv-error i {
    font-size: 4rem;
    color: #ef4444;
    margin-bottom: 1.5rem;
    display: block;
}

.pdv-error h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.pdv-error p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Main Content Layout */
.pdv-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    /* TASK 8.4: FadeIn animation for content */
    animation: pdvFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

/* TASK 8.4: FadeIn keyframes animation */
@keyframes pdvFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   TASK 8.1: PRODUCT INFO SECTION
========================================= */

.pdv-info-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Title */
.pdv-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Meta Information */
.pdv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.pdv-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pdv-badge i {
    font-size: 0.9rem;
}

.pdv-badge-service {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.pdv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pdv-meta-item i {
    font-size: 0.9rem;
    opacity: 0.6;
}

.pdv-meta-item span:last-child {
    color: var(--text-primary);
    font-weight: 500;
}

/* Price Section */
.pdv-price-section {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.pdv-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.pdv-currency {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Action Buttons */
.pdv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pdv-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    /* TASK 8.4: Smooth hover transitions with GPU acceleration */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    border: none;
    font-family: inherit;
    will-change: transform;
}

.pdv-action-primary {
    background: var(--text-primary);
    color: var(--bg-base);
    flex: 1;
    min-width: 140px;
}

.pdv-action-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25);
}

.pdv-action-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.pdv-action-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    flex: 1;
    min-width: 140px;
}

.pdv-action-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.pdv-action-secondary:active {
    transform: translateY(0);
}

.pdv-action-icon {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    padding: 0.875rem;
    width: 44px;
    height: 44px;
}

.pdv-action-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--border-strong);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.pdv-action-icon:active {
    transform: translateY(0) scale(1);
}

/* Report Link */
.pdv-report-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    /* TASK 8.4: Smooth hover transition */
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0.5rem 0;
    will-change: transform;
}

.pdv-report-link:hover {
    color: var(--text-primary);
    transform: translateX(2px);
}

.pdv-report-link i {
    font-size: 0.9rem;
    /* TASK 8.4: Icon transition */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pdv-report-link:hover i {
    transform: scale(1.1);
}

/* Description Section (Expandable) */
.pdv-description-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
}

.pdv-description-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 0;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    text-align: left;
}

.pdv-description-header:hover {
    color: var(--text-primary);
    opacity: 0.8;
}

.pdv-description-icon {
    font-size: 0.9rem;
    /* TASK 8.4: GPU-accelerated smooth rotation transition */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--text-secondary);
    will-change: transform;
}

/* TASK 8.4: Description content with smooth expand/collapse animation */
.pdv-description-content {
    padding: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.95rem;
    /* GPU-accelerated properties for smooth animation */
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: max-height, opacity;
}

.pdv-description-content:not(.hidden) {
    padding: 1rem 0;
}

.pdv-description-content.hidden {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

/* Stats Display */
.pdv-stats {
    display: flex;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.pdv-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pdv-stat i {
    font-size: 1.1rem;
    opacity: 0.6;
}

.pdv-stat span:nth-child(2) {
    font-weight: 600;
    color: var(--text-primary);
}

/* =========================================
   TASK 8.3: RESPONSIVE CSS BREAKPOINTS
========================================= */

/* Responsive Layout - Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .pdv-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .pdv-container {
        padding: 1.5rem;
    }
    
    .pdv-back-nav {
        padding: 1rem 1.5rem 0;
    }
    
    .pdv-title {
        font-size: 1.75rem;
    }
    
    .pdv-price {
        font-size: 1.75rem;
    }
    
    .pdv-actions {
        flex-wrap: wrap;
    }
    
    .pdv-image-section {
        max-width: 100%;
    }
}

/* Responsive Layout - Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .pdv-container {
        padding: 1rem;
    }
    
    .pdv-back-nav {
        padding: 1rem 1rem 0;
    }
    
    .pdv-back-btn {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }
    
    .pdv-loading {
        padding: 3rem 1rem;
    }
    
    .pdv-loading i {
        font-size: 2.5rem;
    }
    
    .pdv-loading p {
        font-size: 1rem;
    }
    
    .pdv-error {
        padding: 3rem 1rem;
    }
    
    .pdv-error i {
        font-size: 3rem;
    }
    
    .pdv-error h3 {
        font-size: 1.25rem;
    }
    
    .pdv-title {
        font-size: 1.5rem;
    }
    
    .pdv-meta {
        gap: 0.5rem;
    }
    
    .pdv-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }
    
    .pdv-price {
        font-size: 1.5rem;
    }
    
    .pdv-currency {
        font-size: 1.1rem;
    }
    
    .pdv-action-btn {
        font-size: 0.85rem;
        padding: 0.75rem 1.25rem;
    }
    
    .pdv-action-icon {
        width: 40px;
        height: 40px;
        padding: 0.75rem;
    }
    
    .pdv-stats {
        gap: 1.5rem;
    }
    
    /* Ensure single column layout */
    .pdv-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Ensure related products maintain horizontal scroll */
    .pdv-related-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Responsive Layout - Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .pdv-back-btn span {
        display: none;
    }
    
    .pdv-back-btn {
        padding: 0.625rem;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        justify-content: center;
    }
    
    .pdv-title {
        font-size: 1.25rem;
    }
    
    .pdv-meta {
        font-size: 0.8rem;
    }
    
    .pdv-badge {
        font-size: 0.7rem;
        padding: 0.35rem 0.65rem;
    }
    
    .pdv-price {
        font-size: 1.35rem;
    }
    
    .pdv-currency {
        font-size: 1rem;
    }
    
    /* Ensure action buttons stack vertically on mobile */
    .pdv-actions {
        flex-direction: column;
    }
    
    .pdv-action-primary,
    .pdv-action-secondary {
        width: 100%;
        min-width: 0;
    }
    
    .pdv-action-icon {
        width: 100%;
    }
    
    .pdv-description-header {
        font-size: 0.95rem;
    }
    
    .pdv-description-content {
        font-size: 0.9rem;
    }
    
    .pdv-stats {
        gap: 1rem;
        font-size: 0.85rem;
    }
    
    /* Ensure single column layout */
    .pdv-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Ensure related products maintain horizontal scroll */
    .pdv-related-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    .pdv-related-card {
        scroll-snap-align: start;
    }
}

/* =========================================
   RELATED PRODUCTS SECTION
========================================= */

/* Related Products Section Container */
.pdv-related-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border-subtle);
}

/* Related Products Header */
.pdv-related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Related Products Title */
.pdv-related-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* View All Link */
.pdv-related-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    /* TASK 8.4: Smooth transition with GPU acceleration */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.pdv-related-view-all:hover {
    color: var(--text-primary);
    transform: translateX(4px);
}

.pdv-related-view-all i {
    font-size: 0.85rem;
    /* TASK 8.4: Arrow icon slide animation */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.pdv-related-view-all:hover i {
    transform: translateX(6px);
}

/* Horizontal Scroll Container */
.pdv-related-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.pdv-related-scroll::-webkit-scrollbar {
    height: 8px;
}

.pdv-related-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.pdv-related-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.pdv-related-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Related Product Card */
.pdv-related-card {
    flex: 0 0 280px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    /* TASK 8.4: Smooth hover transition with GPU acceleration */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.pdv-related-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.pdv-related-card:active {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Card Image Wrapper */
.pdv-related-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #ffffff;
}

.pdv-related-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* TASK 8.4: Smooth zoom transition on hover */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.pdv-related-card:hover .pdv-related-card__img-wrap img {
    transform: scale(1.08);
}

/* Card Body */
.pdv-related-card__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Category Label */
.pdv-related-card__cat {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Product Name */
.pdv-related-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bottom Section (Price and Meta) */
.pdv-related-card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

/* Price */
.pdv-related-card__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Meta Information (Views and Likes) */
.pdv-related-card__meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.pdv-related-card__meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pdv-related-card__meta i {
    font-size: 0.85rem;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .pdv-related-section {
        margin-top: 3rem;
        padding-top: 2rem;
    }
    
    .pdv-related-title {
        font-size: 1.5rem;
    }
    
    .pdv-related-card {
        flex: 0 0 260px;
    }
}

@media (max-width: 768px) {
    .pdv-related-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
    
    .pdv-related-header {
        margin-bottom: 1.5rem;
    }
    
    .pdv-related-title {
        font-size: 1.25rem;
    }
    
    .pdv-related-view-all {
        font-size: 0.85rem;
    }
    
    .pdv-related-card {
        flex: 0 0 240px;
    }
    
    .pdv-related-card__body {
        padding: 0.875rem;
    }
    
    .pdv-related-card__name {
        font-size: 0.9rem;
    }
    
    .pdv-related-card__price {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .pdv-related-section {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }
    
    .pdv-related-title {
        font-size: 1.1rem;
    }
    
    .pdv-related-card {
        flex: 0 0 200px;
    }
    
    .pdv-related-scroll {
        gap: 1rem;
    }
    
    .pdv-related-card__body {
        padding: 0.75rem;
    }
}

/* =========================================
   TASK 8.2: PRODUCT IMAGE SECTION & LIGHTBOX
========================================= */

/* Product Image Section */
.pdv-image-section {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.pdv-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* TASK 8.4: Smooth hover transition */
    transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pdv-image-wrapper:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    border-color: var(--border-strong);
}

.pdv-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* TASK 8.4: Subtle zoom on hover with GPU acceleration */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.pdv-image-wrapper:hover .pdv-image {
    transform: scale(1.03);
}

/* Expand Button */
.pdv-expand-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* TASK 8.4: Smooth fade and slide-up animation */
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
}

.pdv-image-wrapper:hover .pdv-expand-btn {
    opacity: 1;
    transform: translateY(0);
}

.pdv-expand-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.08) translateY(0);
}

.pdv-expand-btn:active {
    transform: scale(0.95) translateY(0);
}

/* Lightbox Overlay */
.pdv-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    /* TASK 8.4: Enhanced lightbox fade in/out with GPU acceleration */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pdv-lightbox-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* Lightbox Close Button */
.pdv-lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* TASK 8.4: Smooth rotation and scale transition */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10000;
    will-change: transform;
}

.pdv-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
}

.pdv-lightbox-close:active {
    transform: rotate(90deg) scale(0.95);
}

/* Lightbox Image */
.pdv-lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    /* TASK 8.4: Enhanced scale and fade animation */
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.pdv-lightbox-overlay:not(.hidden) .pdv-lightbox-image {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.1s;
}

/* Responsive Adjustments for Image Section */
@media (max-width: 1024px) {
    .pdv-image-section {
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .pdv-image-section {
        max-width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .pdv-expand-btn {
        width: 44px;
        height: 44px;
        bottom: 0.75rem;
        right: 0.75rem;
        font-size: 1rem;
    }
    
    .pdv-lightbox-overlay {
        padding: 1rem;
    }
    
    .pdv-lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .pdv-lightbox-image {
        max-width: 95vw;
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    .pdv-image-section {
        margin-bottom: 1rem;
    }
    
    .pdv-expand-btn {
        width: 40px;
        height: 40px;
        bottom: 0.5rem;
        right: 0.5rem;
        font-size: 0.9rem;
        border-radius: 10px;
    }
    
    .pdv-lightbox-close {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
}


/* =========================================
   PRODUCTS VIEW — DROPDOWNS AND FILTERS
========================================= */

/* Filter Dropdown */
.pv-filter-dropdown {
    position: relative;
}

.pv-dropdown-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: rgba(15, 15, 18, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 0.5rem;
    min-width: 280px;
    max-height: 400px;
    overflow-y: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.pv-filter-dropdown.open .pv-dropdown-menu {
    display: flex;
}

.pv-drop-search-wrap {
    position: relative;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.pv-drop-search-wrap i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.pv-drop-search {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    padding: 0.75rem 0.75rem 0.75rem 2.25rem;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    transition: var(--transition-smooth);
}

.pv-drop-search:focus {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.pv-drop-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    transition: var(--transition-smooth);
    position: relative;
}

.pv-drop-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.pv-drop-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.pv-drop-icon {
    font-size: 1rem;
    opacity: 0.6;
}

.pv-drop-item span {
    flex: 1;
    text-align: left;
}

.pv-drop-check {
    opacity: 0;
    font-size: 0.9rem;
    transition: opacity 0.2s ease;
}

.pv-drop-item.active .pv-drop-check {
    opacity: 1;
}

.pv-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.pv-filter-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.pv-filter-btn.active,
.pv-filter-pill.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.pv-chev {
    font-size: 0.75rem;
    opacity: 0.6;
}


/* ===============================================
   DROPDOWN FIX - FINAL VERSION
   =============================================== */
.pv-filter-dropdown {
    position: relative !important;
}

.pv-dropdown-menu {
    display: none !important;
    flex-direction: column !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    background: #0f0f12 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 0.5rem !important;
    min-width: 280px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
    z-index: 9999 !important;
}

.pv-filter-dropdown.open .pv-dropdown-menu {
    display: flex !important;
}

.pv-drop-search-wrap {
    position: relative !important;
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.pv-drop-search-wrap i {
    position: absolute !important;
    left: 1.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #737373 !important;
    font-size: 0.9rem !important;
}

.pv-drop-search {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    padding: 0.75rem 0.75rem 0.75rem 2.25rem !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    outline: none !important;
}

.pv-drop-search:focus {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.pv-drop-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
    border: none !important;
    background: transparent !important;
    color: #a3a3a3 !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: left !important;
}

.pv-drop-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.pv-drop-item.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.pv-drop-icon {
    font-size: 1rem !important;
    opacity: 0.6 !important;
}

.pv-drop-item span {
    flex: 1 !important;
}

.pv-drop-check {
    opacity: 0 !important;
    font-size: 0.9rem !important;
}

.pv-drop-item.active .pv-drop-check {
    opacity: 1 !important;
}


/* Fix overflow clipping dropdown */
.pv-toolbar {
    overflow: visible !important;
}

.pv-filters {
    overflow: visible !important;
}

.pv-wrap {
    overflow: visible !important;
}


/* Make dropdown smaller and more compact */
.pv-dropdown-menu {
    min-width: 260px !important;
    max-height: 360px !important;
    padding: 0.4rem !important;
    overflow-x: hidden !important;
}

.pv-drop-search-wrap {
    padding: 0.4rem !important;
    margin-bottom: 0.4rem !important;
}

.pv-drop-search {
    padding: 0.6rem 0.6rem 0.6rem 2rem !important;
    font-size: 0.8rem !important;
    border-radius: 10px !important;
}

.pv-drop-search-wrap i {
    left: 1rem !important;
    font-size: 0.8rem !important;
}

.pv-drop-item {
    gap: 0.6rem !important;
    padding: 0.6rem 0.8rem !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
}

.pv-drop-icon {
    font-size: 0.9rem !important;
}

.pv-drop-check {
    font-size: 0.8rem !important;
}


/* Custom price range inputs */
.pv-price-custom {
    padding: 0.75rem 0.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 0.4rem !important;
}

.pv-price-custom-label {
    font-size: 0.7rem !important;
    color: #737373 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
}

.pv-price-custom-inputs {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-bottom: 0.5rem !important;
}

.pv-price-input {
    flex: 1 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    padding: 0.45rem 0.5rem !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    outline: none !important;
    min-width: 0 !important;
}

.pv-price-input:focus {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.pv-price-input::placeholder {
    color: #737373 !important;
}

.pv-price-separator {
    color: #737373 !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.pv-price-apply-btn {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding: 0.55rem !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pv-price-apply-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.pv-price-apply-btn:active {
    transform: scale(0.98) !important;
}

/* ===================================
   ADMIN MODALS
   =================================== */
.admin-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.admin-modal.show {
    opacity: 1;
    visibility: visible;
}

.admin-modal-content {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.admin-modal.show .admin-modal-content {
    transform: scale(1);
}

.admin-modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-modal-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    color: #a3a3a3;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #333;
    color: #fff;
}

/* Admin Form Styles */
.admin-form {
    padding: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #a3a3a3;
}

.form-group input,
.form-group select {
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #fff;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #a3a3a3;
    background: #1a1a1a;
}

.form-group input::placeholder {
    color: #737373;
}

.checkbox-group label {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #a3a3a3;
}

.checkbox-group span {
    color: #a3a3a3;
    font-size: 0.875rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #333;
}

/* Scrollbar for modal */
.admin-modal-content::-webkit-scrollbar {
    width: 8px;
}

.admin-modal-content::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.admin-modal-content::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

.admin-modal-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .admin-modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .admin-form {
        padding: 1.5rem;
    }
}

/* ===================================
   CHART PERIOD BUTTONS
   =================================== */
.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chart-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
}

.chart-period-btns {
    display: flex;
    gap: 0.5rem;
}

.period-btn {
    background: #0a0a0a;
    border: 1px solid #333;
    color: #a3a3a3;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.period-btn:hover {
    background: #1a1a1a;
    border-color: #555;
    color: #fff;
}

.period-btn.active {
    background: #a3a3a3;
    border-color: #a3a3a3;
    color: #000;
}

/* Custom Period Picker */
.custom-period-picker {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: #0a0a0a;
}

.custom-period-picker.hidden {
    display: none;
}

.period-inputs {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.period-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.period-input-group label {
    font-size: 0.75rem;
    color: #a3a3a3;
    font-weight: 500;
}

.period-date-input {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: #fff;
    font-size: 0.875rem;
    font-family: inherit;
}

.period-date-input:focus {
    outline: none;
    border-color: #a3a3a3;
}

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

/* Responsive */
@media (max-width: 768px) {
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .chart-period-btns {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .period-btn {
        flex: 1;
        min-width: calc(50% - 0.25rem);
    }
    
    .period-inputs {
        flex-direction: column;
        width: 100%;
    }
    
    .period-input-group {
        width: 100%;
    }
}

/* ===================================
   INTERACTIVE CHART POINTS
   =================================== */
.chart-point-hidden {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chart-point-visible {
    opacity: 1;
    fill: #a3a3a3;
    stroke: #fff;
    stroke-width: 2;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.chart-point-visible:hover {
    transform: scale(1.2);
}

.chart-hover-zone {
    cursor: pointer;
}

.chart-label {
    fill: #a3a3a3;
    font-size: 11px;
    font-weight: 500;
}

/* Smaller chart container */
.line-chart-container {
    position: relative;
    width: 100%;
    max-height: 240px;
    overflow: visible;
}

.line-chart {
    width: 100%;
    height: auto;
    max-height: 240px;
}

.chart-overlay {
    cursor: crosshair !important;
}

/* Chart tooltip - no pointer events so it doesn't interfere */
/* NOTE: this used to force `position: fixed`, which broke the tooltip.
   The chart sits inside .glass-card, and its backdrop-filter makes that
   card a containing block for fixed-position descendants — so viewport
   coordinates from the mouse event resolved against the card and the
   tooltip flew off below the chart. It is positioned absolutely inside
   .line-chart-container instead. */
.chart-tooltip {
    pointer-events: none !important;
    z-index: 10000;
    position: absolute;
    will-change: transform;
}

/* ===== TOGGLE SWITCH ===== */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
    border-radius: 30px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: rgba(255, 255, 255, 0.22);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-slider:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.toggle-switch input:checked + .toggle-slider:hover {
    background-color: #e5e5e5;
}


/* =========================================
   PROMO POPUP SYSTEM
========================================= */

/* Promo Popup Overlay
   Every visual value is a custom property so the admin panel can
   drive it without inline styles. Fallbacks keep the popup usable
   even if no settings were ever saved. */
.promo-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    background: var(--promo-overlay-bg, rgba(0, 0, 0, 0.85));
    backdrop-filter: blur(var(--promo-overlay-blur, 12px));
    -webkit-backdrop-filter: blur(var(--promo-overlay-blur, 12px));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.promo-popup-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* Placement — shared by the real overlay and the admin preview,
   so both stay in sync from a single rule set. */
.promo-surface[data-position="top"] { align-items: flex-start; }
.promo-surface[data-position="bottom"] { align-items: flex-end; }
.promo-surface[data-position="bottom-right"] { align-items: flex-end; justify-content: flex-end; }
.promo-surface[data-position="bottom-left"] { align-items: flex-end; justify-content: flex-start; }

/* Promo Popup Modal */
.promo-popup-modal {
    position: relative;
    background: var(--promo-modal-bg, #0f0f12);
    border: 1px solid var(--promo-modal-border, #1e1e24);
    border-radius: var(--promo-modal-radius, 16px);
    padding: var(--promo-modal-padding, 44px);
    max-width: var(--promo-modal-width, 440px);
    width: 100%;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
    transform: scale(0.96) translateY(10px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.promo-popup-overlay:not(.hidden) .promo-popup-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Close Button */
.promo-popup-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #1a1a1a;
    color: #737373;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 10;
}

.promo-popup-close:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.promo-popup-close:hover {
    background: #1a1a1a;
    border-color: #737373;
    color: #ffffff;
}

/* Promo Content */
.promo-popup-content {
    text-align: center;
}

.promo-surface[data-align="left"] .promo-popup-content { text-align: left; }
.promo-surface[data-align="right"] .promo-popup-content { text-align: right; }

/* Centred copy gets a comfortable measure; aligned copy should not
   be nudged off its edge by auto margins. */
.promo-surface[data-align="left"] .promo-popup-modal p,
.promo-surface[data-align="right"] .promo-popup-modal p {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.promo-popup-badge.hidden {
    display: none;
}

/* Badge */
.promo-popup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--promo-badge-bg, #17171c);
    border: 1px solid var(--promo-badge-border, #2a2a32);
    padding: 0.45rem 1rem;
    border-radius: var(--promo-badge-radius, 100px);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--promo-badge-color, #d4d4d8);
    letter-spacing: 0.14em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

/* Title */
.promo-popup-modal h2 {
    font-size: var(--promo-title-size, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--promo-title-color, #ffffff);
    margin-bottom: 0.85rem;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

/* Description */
.promo-popup-modal p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--promo-desc-color, #8b8b93);
    margin-bottom: 2rem;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
}

/* CTA Button */
.promo-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--promo-btn-width, 100%);
    background: var(--promo-btn-bg, #ffffff);
    color: var(--promo-btn-color, #000000);
    padding: 0.95rem 2rem;
    border-radius: var(--promo-btn-radius, 10px);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.12);
}

/* Hover must not hardcode a colour, otherwise it would override
   whatever the admin picked. Brightness shift works for any hue. */
.promo-cta-button:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(255, 255, 255, 0.18);
}

.promo-cta-button:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .promo-popup-modal {
        padding: 2.5rem 2rem;
        max-width: 90%;
    }
    
    .promo-popup-modal h2 {
        font-size: 1.5rem;
    }
    
    .promo-popup-modal p {
        font-size: 0.95rem;
    }
    
    .promo-cta-button {
        padding: 0.9rem 1.75rem;
        font-size: 0.9rem;
    }
}

/* =========================================
   ADMIN SETTINGS - TOGGLE SWITCH
========================================= */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #737373;
    transition: 0.4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
    background-color: #ffffff;
}

.toggle-slider:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.toggle-switch input:checked + .toggle-slider:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* =========================================
   FIX: .input-wrapper was declared twice, the
   later stacked-column rule killed the icon
   positioning. Canonical layout below.
========================================= */

.input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-wrapper > i {
    position: absolute;
    left: 0.95rem;
    bottom: 0;
    height: 47px;
    display: flex;
    align-items: center;
    color: #6b6b73;
    font-size: 0.9rem;
    pointer-events: none;
}

.input-wrapper > i ~ input,
.input-wrapper > i ~ select,
.input-wrapper > i ~ textarea {
    padding-left: 2.6rem;
}

/* =========================================
   ADMIN SETTINGS PANEL
========================================= */

.aset-card {
    background: #0f0f12;
    border: 1px solid #1e1e24;
    border-radius: 14px;
    overflow: hidden;
}

.aset-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid #1e1e24;
}

.aset-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0 0 0.3rem;
}

.aset-card__desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6b6b73;
    margin: 0;
    max-width: 52ch;
}

.aset-card form {
    padding: 1.75rem;
}

.aset-section {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid #17171c;
}

.aset-section__title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6b6b73;
    margin: 0 0 1.15rem;
}

.aset-grid {
    display: grid;
    gap: 1.15rem;
}

.aset-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aset-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.aset-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

/* Spacing only between stacked blocks, never between grid columns */
.aset-section > .aset-field + .aset-field,
.aset-section > .aset-field + .aset-grid,
.aset-section > .aset-grid + .aset-field,
.aset-section > .aset-grid + .aset-grid {
    margin-top: 1.15rem;
}

.aset-field__label {
    font-size: 0.82rem;
    font-weight: 500;
    color: #c9c9d1;
}

.aset-field__hint {
    font-size: 0.75rem;
    color: #5a5a63;
    margin: 0;
}

.aset-input {
    width: 100%;
    background: #17171c;
    border: 1px solid #26262e;
    border-radius: 9px;
    padding: 0.7rem 0.9rem;
    color: #f2f2f5;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.aset-input::placeholder { color: #55555e; }

.aset-input:hover { border-color: #34343e; }

.aset-input:focus {
    outline: none;
    background: #1b1b21;
    border-color: #5a5a66;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}

.aset-textarea {
    resize: vertical;
    min-height: 84px;
    line-height: 1.55;
}

.aset-color {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.aset-color__swatch {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 1px solid #26262e;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.18s ease;
}

.aset-color__swatch:hover { border-color: #45454f; }

.aset-color__swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.aset-color__swatch::-webkit-color-swatch { border: none; border-radius: 6px; }
.aset-color__swatch::-moz-color-swatch { border: none; border-radius: 6px; }

.aset-color__hex {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    text-transform: lowercase;
}

.aset-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.aset-btn {
    border-radius: 9px;
    padding: 0.7rem 1.4rem;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.aset-btn--ghost {
    background: transparent;
    border-color: #2b2b34;
    color: #c9c9d1;
}

.aset-btn--ghost:hover {
    background: #17171c;
    border-color: #3a3a45;
    color: #ffffff;
}

.aset-btn--primary {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.14);
}

.aset-btn--primary:hover {
    background: #e5e5e5;
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.2);
}

.aset-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

@media (max-width: 900px) {
    .aset-grid--2,
    .aset-grid--3 { grid-template-columns: minmax(0, 1fr); }

    .aset-card__head { flex-direction: column; }
    .aset-card form { padding: 1.25rem; }
    .aset-actions .aset-btn { flex: 1; }
}

/* =========================================
   ADMIN MODE — hide public-site chrome that
   would float over the panel
========================================= */

body.admin-mode .social-sidebar,
body.admin-mode #site-footer {
    display: none !important;
}

/* =========================================
   ADMIN SETTINGS — extra control types
========================================= */

.aset-input--invalid {
    border-color: #b45454 !important;
    box-shadow: 0 0 0 3px rgba(180, 84, 84, 0.15) !important;
}

.aset-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #8b8b93 50%),
                      linear-gradient(135deg, #8b8b93 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
    cursor: pointer;
}

.aset-select option {
    background: #17171c;
    color: #f2f2f5;
}

/* Label with a live value readout on the right */
.aset-field__labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.aset-field__value {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: #8b8b93;
    background: #17171c;
    border: 1px solid #26262e;
    border-radius: 5px;
    padding: 0.1rem 0.4rem;
}

/* Range slider */
.aset-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border: none;
}

.aset-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: #26262e;
}

.aset-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    margin-top: -5.5px;
    border-radius: 50%;
    background: #f2f2f5;
    border: none;
    transition: transform 0.15s ease;
}

.aset-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.aset-range:active::-webkit-slider-thumb { transform: scale(0.96); }

.aset-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: #26262e;
}

.aset-range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f2f2f5;
    border: none;
}

.aset-range:focus-visible {
    outline: none;
}

.aset-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}

/* Inline switch row (label left, toggle right) */
.aset-switchrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #131317;
    border: 1px solid #22222a;
    border-radius: 9px;
    padding: 0.75rem 0.9rem;
}

.aset-switchrow__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.aset-switchrow__title {
    font-size: 0.82rem;
    font-weight: 500;
    color: #c9c9d1;
}

.aset-switchrow__hint {
    font-size: 0.74rem;
    color: #5a5a63;
    margin: 0;
}

/* Compact toggle used inside switch rows */
.aset-switchrow .toggle-switch {
    flex: 0 0 auto;
}

/* =========================================
   ADMIN SETTINGS — form + live preview layout
========================================= */

.aset-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 1.5rem;
    align-items: start;
}

.aset-preview {
    position: sticky;
    top: 1.5rem;
    background: #0f0f12;
    border: 1px solid #1e1e24;
    border-radius: 14px;
    overflow: hidden;
}

.aset-preview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #1e1e24;
}

.aset-preview__title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6b6b73;
}

.aset-preview__state {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c9c9d1;
    background: #17171c;
    border: 1px solid #26262e;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.aset-preview__state[data-off="true"] {
    color: #7d7d86;
}

/* A miniature viewport. The checkerboard makes overlay opacity and
   blur readable instead of guesswork against a flat background. */
.aset-preview__stage {
    position: relative;
    height: 380px;
    overflow: hidden;
    background-color: #08080a;
    background-image:
        linear-gradient(45deg, #121216 25%, transparent 25%, transparent 75%, #121216 75%),
        linear-gradient(45deg, #121216 25%, transparent 25%, transparent 75%, #121216 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
}

.aset-preview__surface {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: var(--promo-overlay-bg, rgba(0, 0, 0, 0.85));
    backdrop-filter: blur(var(--promo-overlay-blur, 12px));
    -webkit-backdrop-filter: blur(var(--promo-overlay-blur, 12px));
}

/* JS sets --promo-preview-scale so a 900px modal still fits the panel. */
.aset-preview__scaler {
    transform: scale(var(--promo-preview-scale, 1));
    transform-origin: center center;
    width: 100%;
    display: flex;
    justify-content: inherit;
}

.aset-preview__surface[data-position="bottom-right"] .aset-preview__scaler { justify-content: flex-end; }
.aset-preview__surface[data-position="bottom-left"] .aset-preview__scaler { justify-content: flex-start; }

/* The real modal animates in from hidden; inside the preview it must
   simply be visible at all times.
   Width is pinned to the configured value instead of filling the panel,
   otherwise the scaler would shrink an already-shrunken box. */
.aset-preview__surface .promo-popup-modal {
    transform: none;
    opacity: 1;
    width: var(--promo-modal-width, 440px);
    max-width: none;
    flex: 0 0 auto;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

/* Scale away from the edge the popup is anchored to. */
.aset-preview__surface[data-position="top"] .aset-preview__scaler { transform-origin: center top; }
.aset-preview__surface[data-position="bottom"] .aset-preview__scaler,
.aset-preview__surface[data-position="bottom-right"] .aset-preview__scaler,
.aset-preview__surface[data-position="bottom-left"] .aset-preview__scaler { transform-origin: center bottom; }

/* Close button is decorative here — always shown so its shape and
   contrast can be judged. */
.aset-preview__surface .promo-popup-close {
    opacity: 1;
    visibility: visible;
    cursor: default;
}

.aset-preview__surface .promo-cta-button {
    cursor: default;
}

.aset-preview__surface .promo-cta-button:hover {
    filter: none;
    transform: none;
}

.aset-preview__note {
    margin: 0;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #1e1e24;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #5a5a63;
}

/* Below this width the preview would squeeze the form, so it moves
   under it and stops sticking. */
@media (max-width: 1400px) {
    .aset-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .aset-preview {
        position: static;
    }

    .aset-preview__stage {
        height: 340px;
    }
}

/* =========================================
   NATIVE SELECT DROPDOWN LIST
   The popup list is drawn by the OS and defaults to white. Setting
   background-color on the select AND its options makes Chromium and
   Firefox render a dark list instead.
========================================= */

.apf-select,
.aset-select,
.admin-panel select,
.modal-overlay select {
    color-scheme: dark;
}

.apf-select option,
.aset-select option,
.admin-panel select option,
.modal-overlay select option {
    background-color: #17171c;
    color: #f2f2f5;
}

.apf-select optgroup,
.aset-select optgroup,
.admin-panel select optgroup,
.modal-overlay select optgroup {
    background-color: #0f0f12;
    color: #8b8b93;
}

/* =========================================
   ADD PRODUCT FORM (compact, no inner scroll)
========================================= */

#add-product-modal .modal-content {
    max-width: 560px;
    width: 100%;
}

.apf {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 1.5rem;
    text-align: left;
}

.apf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.apf-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.apf-labelrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.apf-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #c9c9d1;
    text-align: left;
}

.apf-hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #5a5a63;
}

/* "auto" pill next to the category label */
.apf-auto {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b8b93;
    background: #17171c;
    border: 1px solid #26262e;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.apf-auto[data-state="manual"] {
    opacity: 0.35;
}

.apf-auto[data-state="applied"] {
    color: #f2f2f5;
    border-color: #45454f;
}

.apf-input {
    width: 100%;
    background: #17171c;
    border: 1px solid #26262e;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    color: #f2f2f5;
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.apf-input::placeholder { color: #55555e; }

.apf-input:hover { border-color: #34343e; }

.apf-input:focus {
    outline: none;
    background: #1b1b21;
    border-color: #5a5a66;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}

.apf-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #8b8b93 50%),
                      linear-gradient(135deg, #8b8b93 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
    cursor: pointer;
}

.apf-switchrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #131317;
    border: 1px solid #22222a;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}

.apf-switchrow__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.apf-switchrow__title {
    font-size: 0.8rem;
    font-weight: 500;
    color: #c9c9d1;
}

.apf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.apf-actions .aset-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
}

/* Compact toggle so the switch row stays short */
.apf-switchrow .toggle-switch {
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
}

.apf-switchrow .toggle-slider:before {
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
}

.apf-switchrow .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(18px);
}

@media (max-width: 560px) {
    .apf-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================
   ADMIN FILTER BAR ALIGNMENT
   The element carries both .search-bar and .admin-search-bar.
   .search-bar draws a pill (background + border + 1rem/1.5rem padding)
   while .admin-search-bar input draws its own box, so the field rendered
   as two nested frames with the icon pinned to the outer edge.
   Strip the outer chrome and let the input alone carry the styling.
========================================= */

.admin-topbar {
    /* Search removed — keep the profile block on the right. */
    justify-content: flex-end;
}

.admin-filters {
    align-items: center;
    /* .glass-card ships 1.5rem, which was too tall once the inner pill went */
    padding: 1rem;
}

.search-bar.admin-search-bar,
.search-bar.admin-search-bar:focus-within {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
}

.search-bar.admin-search-bar i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
    font-size: 0.85rem;
    color: #6b6b73;
    pointer-events: none;
}

.search-bar.admin-search-bar input {
    height: 42px;
    padding: 0 1rem 0 2.35rem;
    background: #17171c;
    border: 1px solid #26262e;
    border-radius: 9px;
    font-size: 0.88rem;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.search-bar.admin-search-bar input:hover {
    border-color: #34343e;
}

.search-bar.admin-search-bar input:focus {
    background: #1b1b21;
    border-color: #5a5a66;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}

/* Match the neighbouring select to the search field so the row lines up */
.admin-filters .custom-select select {
    height: 42px;
    padding: 0 2.6rem 0 1rem;
    background: #17171c;
    border: 1px solid #26262e;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 400;
}

.admin-filters .custom-select select:hover,
.admin-filters .custom-select select:focus {
    background: #1b1b21;
    border-color: #5a5a66;
}

.admin-filters .custom-select::after {
    color: #6b6b73;
    font-size: 0.7rem;
}

/* =========================================
   DASHBOARD CHART
   The 240px max-height clipped the 800x260 viewBox and forced
   letterboxing, which threw the hover mapping off. Let the SVG keep
   its own aspect ratio instead.
========================================= */

.chart-section {
    padding: 1.5rem;
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.chart-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f2f2f5;
    margin: 0;
    letter-spacing: -0.01em;
}

.chart-period-btns {
    display: flex;
    gap: 0.35rem;
    background: #131317;
    border: 1px solid #22222a;
    border-radius: 9px;
    padding: 0.2rem;
}

.chart-period-btns .period-btn {
    background: transparent;
    border: none;
    color: #8b8b93;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.chart-period-btns .period-btn:hover {
    color: #f2f2f5;
    background: #1b1b21;
}

.chart-period-btns .period-btn.active {
    background: #ffffff;
    color: #000000;
}

.line-chart-container {
    position: relative;
    width: 100%;
    max-height: none;
    margin-top: 1.25rem;
    overflow: visible;
}

.line-chart {
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
    overflow: visible;
}

.chart-dot {
    transition: r 0.15s ease;
}

/* ---- Tooltip ---- */

.chart-tooltip {
    background: #0f0f12;
    backdrop-filter: none;
    border: 1px solid #26262e;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    min-width: 0;
    width: max-content;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.chart-tooltip.hidden {
    opacity: 0;
    visibility: hidden;
    transform: none;
}

.chart-tooltip .tooltip-day {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b8b93;
    margin-bottom: 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #22222a;
}

.chart-tooltip .tooltip-data {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.chart-tooltip .tooltip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
}

.chart-tooltip .tooltip-label {
    font-size: 0.76rem;
    color: #6b6b73;
    white-space: nowrap;
}

.chart-tooltip .tooltip-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: #f2f2f5;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .chart-header { align-items: flex-start; flex-direction: column; }
    .chart-period-btns { width: 100%; overflow-x: auto; }
}

/* =========================================
   MISSING `.hidden` COVERAGE
   There is no generic `.hidden { display: none }` in this stylesheet —
   visibility is handled per component (.main-view.hidden,
   .admin-panel.hidden, ...). The elements below only ever carry a bare
   `hidden` class, so classList.add('hidden') did nothing and their
   loaders / error boxes / result panels stayed on screen next to the
   real content.

   Scoped to these ids/classes on purpose: a blanket `.hidden` rule would
   break the components that fade out via opacity + visibility while
   keeping their box (modals, promo popup, chart tooltip, lightbox).
========================================= */

.pdv-loading.hidden,
.pdv-error.hidden,
.pdv-content.hidden,
#file-info.hidden,
#import-progress.hidden,
#import-results.hidden,
#bulk-scrape-progress.hidden,
#bulk-scrape-results.hidden {
    display: none !important;
}

/* =========================================
   ADMIN SETTINGS — list rows (agents, socials)
========================================= */

.aset-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

.aset-section--flush {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.aset-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.aset-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #131317;
    border: 1px solid #22222a;
    border-radius: 9px;
    padding: 0.6rem 0.75rem;
    min-width: 0;
}

.aset-row__badge {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1b1b21;
    border: 1px solid #2a2a32;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #c9c9d1;
}

.aset-row__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 0 0 auto;
    width: 150px;
}

.aset-row__title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #f2f2f5;
}

/* Templates are long; keep them on one line and clip instead of wrapping */
.aset-row__sub {
    font-size: 0.72rem;
    color: #5a5a63;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aset-row__input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    padding: 0.45rem 0.65rem;
}

.aset-row__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.aset-tag {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6b73;
    background: #1b1b21;
    border: 1px solid #2a2a32;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.aset-iconbtn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #2b2b34;
    border-radius: 8px;
    color: #8b8b93;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.aset-iconbtn:hover {
    background: #1f1f26;
    border-color: #45454f;
    color: #f2f2f5;
}

.aset-empty {
    margin: 0;
    font-size: 0.78rem;
    color: #5a5a63;
    padding: 0.35rem 0;
}

/* Live template preview */
.aset-preview-line {
    margin: 0;
    background: #131317;
    border: 1px solid #22222a;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #8b8b93;
    word-break: break-all;
}

.aset-field__hint code {
    background: #1b1b21;
    border: 1px solid #2a2a32;
    border-radius: 4px;
    padding: 0.05rem 0.28rem;
    font-size: 0.7rem;
    color: #c9c9d1;
}

/* Social bubbles are hidden until a link is configured */
.social-sidebar:empty {
    display: none;
}

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

    .aset-row {
        flex-wrap: wrap;
    }

    .aset-row__text { width: auto; flex: 1 1 auto; }
    .aset-row__input { flex-basis: 100%; }
}

/* =========================================
   ADMIN SETTINGS — section navigation
   Own class names (.aset-nav / .aset-pane) rather than reusing
   .settings-tab / .settings-pane, which belong to the public
   settings modal.
========================================= */

.aset-nav {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    border-bottom: 1px solid #1e1e24;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.aset-nav::-webkit-scrollbar { display: none; }

.aset-nav__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.7rem 1rem;
    margin-bottom: -1px;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b6b73;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.aset-nav__tab i {
    font-size: 0.85rem;
}

.aset-nav__tab:hover {
    color: #c9c9d1;
}

.aset-nav__tab.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.aset-nav__tab:focus-visible {
    outline: none;
    color: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
    border-radius: 6px 6px 0 0;
}

.aset-pane {
    display: none;
}

.aset-pane.active {
    display: block;
}

@media (max-width: 640px) {
    .aset-nav__tab {
        padding: 0.65rem 0.75rem;
        letter-spacing: 0.06em;
    }

    .aset-nav__tab span {
        display: none;
    }

    .aset-nav__tab i {
        font-size: 1rem;
    }
}

/* =========================================
   PRODUCTS — empty state
   Replaces the demo products that used to fill this grid.
========================================= */

.products-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4.5rem 1.5rem;
    color: var(--text-muted);
}

.products-empty i {
    font-size: 2.25rem;
    color: #3a3a45;
    margin-bottom: 1.1rem;
}

.products-empty h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f2f2f5;
    letter-spacing: -0.01em;
}

.products-empty p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #6b6b73;
    max-width: 42ch;
}