/* =============================================================================
   SECURE AUTH & UPLOAD SYSTEM — Stylesheet
   =============================================================================
   Clean, minimal, responsive CSS. No frameworks. No external fonts.
   Color scheme: white background, dark text, blue accent.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   RESET & BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f6f8;
    color: #1a1a2e;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: #2563eb;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   AUTH CONTAINER (Login / Register)
   --------------------------------------------------------------------------- */
.auth-container {
    max-width: 440px;
    margin: 60px auto;
    padding: 0 20px;
}

.auth-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1a1a2e;
}

/* ---------------------------------------------------------------------------
   TABS
   --------------------------------------------------------------------------- */
.tab-nav {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid #e2e8f0;
}

.tab-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.tab-btn:hover {
    color: #2563eb;
}

.tab-btn.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.tab-content {
    display: none;
    background: #ffffff;
    padding: 28px 24px;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.tab-content.active {
    display: block;
}

/* ---------------------------------------------------------------------------
   FORMS
   --------------------------------------------------------------------------- */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.95rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #1a1a2e;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-hint {
    display: block;
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary {
    width: 100%;
    background-color: #2563eb;
    color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
    background-color: #1d4ed8;
}

.btn-secondary {
    background-color: #e2e8f0;
    color: #374151;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #cbd5e1;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.btn-link {
    background: none;
    color: #2563eb;
    padding: 4px 8px;
    font-weight: 500;
}

.btn-link:hover {
    text-decoration: underline;
    background: none;
}

/* ---------------------------------------------------------------------------
   MESSAGES (Success / Error)
   --------------------------------------------------------------------------- */
.msg {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.msg p {
    margin: 0;
}

.msg p + p {
    margin-top: 4px;
}

.msg-success {
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.msg-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* ---------------------------------------------------------------------------
   DASHBOARD LAYOUT
   --------------------------------------------------------------------------- */
.dashboard-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px;
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}

.dash-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
}

.dash-user {
    font-size: 0.9rem;
    color: #64748b;
    margin-left: 12px;
}

.dash-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.storage-info {
    font-size: 0.85rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 20px;
}

/* ---------------------------------------------------------------------------
   DRAG & DROP ZONE
   --------------------------------------------------------------------------- */
.upload-section {
    margin-bottom: 32px;
}

.upload-section h2,
.files-section h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1a1a2e;
}

.drop-zone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    background-color: #fafbfc;
}

.drop-zone:hover {
    border-color: #2563eb;
    background-color: #eff6ff;
}

/* Active state when dragging over */
.drop-zone-active {
    border-color: #2563eb;
    background-color: #dbeafe;
    border-style: solid;
}

.drop-zone-icon {
    font-size: 2.5rem;
    color: #94a3b8;
    margin-bottom: 8px;
    line-height: 1;
}

.drop-zone-text {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.drop-zone-hint {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Hide the native file input — the drop zone acts as the trigger */
.drop-zone-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    /* Allow click-through to the input, but the JS handler also triggers it */
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   FILE PREVIEW (before upload)
   --------------------------------------------------------------------------- */
.file-preview {
    margin-top: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

.file-preview h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #374151;
}

.file-list {
    list-style: none;
}

.file-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.88rem;
}

.file-list li:last-child {
    border-bottom: none;
}

.preview-name {
    color: #374151;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.preview-size {
    color: #94a3b8;
    font-size: 0.82rem;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   UPLOAD ACTIONS & LOADING
   --------------------------------------------------------------------------- */
.upload-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.upload-actions .btn-primary {
    width: auto;
    flex: none;
}

.upload-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    background: #eff6ff;
    border-radius: 8px;
    color: #1e40af;
    font-weight: 500;
}

/* Simple CSS spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #bfdbfe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

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

/* ---------------------------------------------------------------------------
   FILES TABLE
   --------------------------------------------------------------------------- */
.files-section {
    margin-bottom: 32px;
}

.no-files {
    color: #94a3b8;
    font-style: italic;
    padding: 24px 0;
}

.files-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.files-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.files-table thead {
    background-color: #f8fafc;
}

.files-table th {
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    color: #64748b;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.files-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
}

.files-table tbody tr:hover {
    background-color: #f8fafc;
}

.files-table tbody tr:last-child td {
    border-bottom: none;
}

.file-name {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size,
.file-date {
    white-space: nowrap;
    color: #64748b;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   CATEGORY BADGES
   --------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-image {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-audio {
    background-color: #fce7f3;
    color: #9d174d;
}

.badge-video {
    background-color: #ede9fe;
    color: #5b21b6;
}

.badge-document {
    background-color: #fef3c7;
    color: #92400e;
}

/* ---------------------------------------------------------------------------
   UTILITY CLASSES (CSP-compliant: no inline styles needed)
   --------------------------------------------------------------------------- */
.u-hidden {
    display: none !important;
}

.u-flex {
    display: flex !important;
}

.u-block {
    display: block !important;
}

.u-inline {
    display: inline !important;
}

/* ---------------------------------------------------------------------------
   AUTH BOX (Forgot Password, Reset, Verify pages)
   --------------------------------------------------------------------------- */
.auth-box {
    background: #ffffff;
    padding: 28px 24px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.auth-intro {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.form-links {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
}

.form-links a {
    color: #2563eb;
}

.form-links a:hover {
    text-decoration: underline;
}

.link-separator {
    color: #cbd5e1;
    margin: 0 10px;
}

/* ---------------------------------------------------------------------------
   ACCOUNT SETTINGS PAGE
   --------------------------------------------------------------------------- */
.settings-container {
    max-width: 720px;
}

.settings-section {
    margin-bottom: 32px;
}

.settings-section h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.settings-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-label {
    font-weight: 500;
    color: #64748b;
    font-size: 0.9rem;
}

.settings-value {
    color: #1a1a2e;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Verified/Unverified badges */
.badge-verified {
    background-color: #ecfdf5;
    color: #065f46;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-unverified {
    background-color: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Storage bar */
.storage-bar {
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 4px;
    margin-top: 16px;
    overflow: hidden;
}

.storage-bar-fill {
    height: 100%;
    background-color: #2563eb;
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0;
}

/* Storage width classes (CSP-compliant, no inline styles) */
.storage-width-0 { width: 0%; }
.storage-width-5 { width: 5%; }
.storage-width-10 { width: 10%; }
.storage-width-15 { width: 15%; }
.storage-width-20 { width: 20%; }
.storage-width-25 { width: 25%; }
.storage-width-30 { width: 30%; }
.storage-width-35 { width: 35%; }
.storage-width-40 { width: 40%; }
.storage-width-45 { width: 45%; }
.storage-width-50 { width: 50%; }
.storage-width-55 { width: 55%; }
.storage-width-60 { width: 60%; }
.storage-width-65 { width: 65%; }
.storage-width-70 { width: 70%; }
.storage-width-75 { width: 75%; }
.storage-width-80 { width: 80%; }
.storage-width-85 { width: 85%; }
.storage-width-90 { width: 90%; }
.storage-width-95 { width: 95%; }
.storage-width-100 { width: 100%; }

.storage-percent {
    text-align: right;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 6px;
}

/* Danger zone */
.settings-danger h2 {
    color: #dc2626;
}

.settings-card-danger {
    border-color: #fecaca;
    background-color: #fef2f2;
}

.settings-card-danger h3 {
    font-size: 1rem;
    color: #991b1b;
    margin-bottom: 8px;
}

.settings-card-danger p {
    color: #7f1d1d;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.btn-danger {
    background-color: #dc2626;
    color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
}

.delete-confirm {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #fecaca;
}

.delete-warning {
    font-weight: 600;
    margin-bottom: 10px;
}

.delete-list {
    margin: 0 0 16px 20px;
    font-size: 0.875rem;
    color: #7f1d1d;
}

.delete-list li {
    margin-bottom: 4px;
}

.delete-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.delete-actions .btn {
    width: auto;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .auth-container {
        margin: 30px auto;
    }

    .dash-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dash-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .drop-zone {
        padding: 24px 16px;
    }

    .files-table th,
    .files-table td {
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .file-name {
        max-width: 160px;
    }

    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .settings-value {
        flex-wrap: wrap;
    }

    .delete-actions {
        flex-direction: column;
    }

    .delete-actions .btn {
        width: 100%;
    }
}

/* =============================================================================
   WEBSHOP STYLES
   ============================================================================= */

/* ---------------------------------------------------------------------------
   SHOP HEADER
   --------------------------------------------------------------------------- */
.shop-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.shop-header-left, .shop-header-center, .shop-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.shop-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
}

.shop-logo:hover {
    text-decoration: none;
    color: #2563eb;
}

.search-form {
    display: flex;
    gap: 8px;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    width: 250px;
}

.cart-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.cart-total {
    color: #2563eb;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   SHOP CONTENT LAYOUT
   --------------------------------------------------------------------------- */
.shop-content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 30px;
}

.shop-sidebar {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    height: fit-content;
}

.shop-sidebar h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 12px;
    margin-top: 20px;
}

.shop-sidebar h3:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   CATEGORY NAVIGATION
   --------------------------------------------------------------------------- */
.category-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-link {
    padding: 8px 12px;
    border-radius: 6px;
    color: #374151;
    transition: background 0.2s;
}

.category-link:hover {
    background: #f3f4f6;
    text-decoration: none;
}

.category-link.active {
    background: #2563eb;
    color: #fff;
}

.category-child {
    padding-left: 24px;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   FILTER FORM
   --------------------------------------------------------------------------- */
.filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.filter-group label {
    display: block;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 4px;
}

.filter-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   SHOP MAIN
   --------------------------------------------------------------------------- */
.shop-main {
    min-width: 0;
}

.shop-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.shop-header-row h1 {
    font-size: 1.75rem;
}

.product-count {
    color: #6b7280;
}

/* ---------------------------------------------------------------------------
   PRODUCT GRID
   --------------------------------------------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}

.product-grid-small {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.product-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.product-link {
    display: block;
    color: inherit;
}

.product-link:hover {
    text-decoration: none;
}

.product-image {
    aspect-ratio: 1;
    background: #f3f4f6;
    position: relative;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    font-size: 0.9rem;
}

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-sale {
    background: #ef4444;
    color: #fff;
}

.badge-out {
    background: #6b7280;
    color: #fff;
}

.badge-custom {
    background: #8b5cf6;
    color: #fff;
    top: auto;
    bottom: 10px;
}

.product-info {
    padding: 16px;
}

.product-name {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 4px;
    color: #1a1a2e;
}

.product-category {
    font-size: 0.85rem;
    color: #6b7280;
    display: block;
    margin-bottom: 8px;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-old, .price-old-large {
    color: #9ca3af;
    text-decoration: line-through;
    font-size: 0.9rem;
}

.price-current {
    font-weight: 600;
    color: #1a1a2e;
    font-size: 1.1rem;
}

.price-current-large {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 1.75rem;
}

.price-save {
    display: block;
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   PAGINATION
   --------------------------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.pagination-link, .pagination-current {
    padding: 8px 14px;
    border-radius: 6px;
}

.pagination-link {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.pagination-link:hover {
    background: #f3f4f6;
    text-decoration: none;
}

.pagination-current {
    background: #2563eb;
    color: #fff;
}

/* ---------------------------------------------------------------------------
   SHOP LANDING SECTIONS (hero, howto, trust, FAQ)
   --------------------------------------------------------------------------- */

/* Hero */
.shop-hero {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #0a0a1a 100%);
    padding: 80px 24px;
    text-align: center;
    border-bottom: 1px solid #222;
}
.shop-hero-inner { max-width: 640px; margin: 0 auto; }
.shop-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #f0f0f0;
    line-height: 1.2;
    margin-bottom: 16px;
}
.shop-hero-title em { font-style: italic; color: #c4a35a; }
.shop-hero-subtitle {
    font-size: 1rem;
    color: #999;
    line-height: 1.6;
    margin-bottom: 32px;
}
.shop-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }

/* How It Works */
.shop-howto {
    padding: 64px 24px;
    text-align: center;
    background: #0d0d0d;
    border-bottom: 1px solid #222;
}
.shop-section-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #f0f0f0;
    margin-bottom: 40px;
}
.shop-howto-steps {
    display: flex;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.shop-howto-step {
    flex: 1;
    min-width: 220px;
    max-width: 280px;
}
.shop-howto-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; }
.shop-howto-step h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #f0f0f0;
    margin-bottom: 8px;
}
.shop-howto-step p {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.5;
}

/* Trust Bar */
.shop-trust {
    padding: 24px;
    background: #111;
    border-bottom: 1px solid #222;
}
.shop-trust-items {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}
.shop-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.shop-trust-icon { font-size: 1.2rem; }
.shop-trust-text { font-size: 0.8rem; color: #aaa; }

/* FAQ */
.shop-faq {
    padding: 64px 24px;
    background: #0a0a0a;
    border-bottom: 1px solid #222;
}
.shop-faq-list {
    max-width: 700px;
    margin: 0 auto;
}
.shop-faq-item {
    border-bottom: 1px solid #222;
}
.shop-faq-item summary {
    padding: 16px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #e0e0e0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shop-faq-item summary::after {
    content: '+';
    font-size: 1.2rem;
    color: #888;
    transition: transform 0.2s;
}
.shop-faq-item[open] summary::after {
    content: '\2212';
}
.shop-faq-item p {
    padding: 0 0 16px;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.6;
}
.shop-faq-item summary::-webkit-details-marker { display: none; }

/* Reviews */
.shop-reviews {
    padding: 64px 24px;
    background: #0d0d0d;
    border-bottom: 1px solid #222;
    text-align: center;
}
.shop-reviews-avg {
    display: block;
    font-size: 1rem;
    color: #c4a35a;
    margin-top: 8px;
    font-weight: 400;
}
.shop-reviews-avg small {
    color: #888;
    font-size: 0.8rem;
}
.shop-reviews-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 0 16px;
    max-width: 1100px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}
.shop-reviews-scroll::-webkit-scrollbar { height: 4px; }
.shop-reviews-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.shop-review-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 24px;
    text-align: left;
}
.shop-review-stars {
    color: #c4a35a;
    font-size: 1rem;
    margin-bottom: 12px;
}
.shop-review-text {
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 16px;
    font-style: italic;
}
.shop-review-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shop-review-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #e0e0e0;
}
.shop-review-source {
    font-size: 0.7rem;
    color: #666;
    background: #222;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Shop Landing Responsive */
@media (max-width: 600px) {
    .shop-hero { padding: 48px 16px; }
    .shop-howto-steps { gap: 24px; }
    .shop-trust-items { gap: 16px; }
}

/* ---------------------------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------------------------- */
.breadcrumb {
    padding: 15px 0;
    font-size: 0.9rem;
    color: #6b7280;
}

.breadcrumb a {
    color: #6b7280;
}

.breadcrumb a:hover {
    color: #2563eb;
}

.breadcrumb-sep {
    margin: 0 8px;
}

/* ---------------------------------------------------------------------------
   PRODUCT DETAIL
   --------------------------------------------------------------------------- */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.gallery-main {
    aspect-ratio: 1;
    background: #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-no-image-large {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    font-size: 1.2rem;
}

.gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.gallery-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.gallery-thumb:hover, .gallery-thumb.active {
    border-color: #2563eb;
}

.product-title {
    font-size: 1.75rem;
    margin-bottom: 10px;
}

.product-meta {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 20px;
}

.product-price-large {
    margin-bottom: 20px;
}

.stock-status {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    margin-bottom: 25px;
}

.stock-in_stock {
    background: #dcfce7;
    color: #166534;
}

.stock-out_of_stock {
    background: #fee2e2;
    color: #991b1b;
}

.stock-backorder {
    background: #fef3c7;
    color: #92400e;
}

/* ---------------------------------------------------------------------------
   ADD TO CART FORM
   --------------------------------------------------------------------------- */
.add-to-cart-form {
    margin-bottom: 30px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.quantity-input {
    width: 80px;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-align: center;
    font-size: 1rem;
}

.btn-large {
    padding: 14px 28px;
    font-size: 1.1rem;
}

/* ---------------------------------------------------------------------------
   CUSTOM IMAGE SECTION
   --------------------------------------------------------------------------- */
.custom-image-section {
    background: #f9fafb;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.custom-image-section h3 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.custom-image-info {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 15px;
}

.existing-images {
    margin-bottom: 15px;
}

.image-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.image-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.image-option:has(input:checked) {
    border-color: #2563eb;
}

.image-option img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.upload-new-image {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-new-image small {
    color: #6b7280;
}

.pending-images-info {
    margin-top: 10px;
    color: #92400e;
    font-size: 0.85rem;
}

.login-prompt {
    color: #6b7280;
}

/* ---------------------------------------------------------------------------
   PRODUCT DESCRIPTION
   --------------------------------------------------------------------------- */
.product-description {
    border-top: 1px solid #e5e7eb;
    padding-top: 25px;
    margin-top: 25px;
}

.product-description h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.description-content {
    color: #4b5563;
    line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   RELATED PRODUCTS
   --------------------------------------------------------------------------- */
.related-products {
    margin-top: 50px;
}

.related-products h2 {
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
   CART PAGE
   --------------------------------------------------------------------------- */
.cart-page {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cart-page h1 {
    margin-bottom: 30px;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
}

.cart-empty p {
    margin-bottom: 20px;
    color: #6b7280;
}

.cart-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #6b7280;
}

.cart-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

.cart-item-product {
    display: flex;
    gap: 15px;
    align-items: center;
}

.cart-item-image {
    width: 80px;
    height: 80px;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    font-size: 0.75rem;
}

.cart-item-name {
    font-weight: 500;
    color: #1a1a2e;
}

.cart-item-custom {
    display: block;
    font-size: 0.8rem;
    color: #8b5cf6;
    margin-top: 4px;
}

.smartprint-badge {
    display: inline-block;
    background: #10b981;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 5px 0;
}

.diy-badge {
    display: inline-block;
    background: #f59e0b;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 5px 0;
}

.diy-difficulty-badge {
    font-weight: 600;
}

.cart-item-meta {
    margin-top: 4px;
}

.cart-item-meta small {
    color: #6b7280;
    font-size: 0.8rem;
}

.cart-item-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.cart-nfc-badge {
    background: #4f46e5;
    color: #fff !important;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem !important;
    font-weight: 600;
}

.order-item-options {
    display: block;
}

.order-item-options small {
    color: #6b7280;
    font-size: 0.8rem;
}

.cart-qty-input {
    width: 60px;
    padding: 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    text-align: center;
}

.cart-item-total {
    font-weight: 600;
}

.btn-remove {
    color: #ef4444;
    font-weight: bold;
}

.cart-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* ---------------------------------------------------------------------------
   CART SUMMARY
   --------------------------------------------------------------------------- */
.cart-summary {
    background: #f9fafb;
    padding: 25px;
    border-radius: 8px;
    height: fit-content;
}

.cart-summary h2 {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.summary-total {
    font-size: 1.25rem;
    font-weight: 700;
    border-bottom: none;
    padding-top: 15px;
}

.summary-tax-note {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 15px 0;
}

.free-shipping-notice {
    background: #dcfce7;
    color: #166534;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin: 15px 0;
    text-align: center;
}

.checkout-login {
    text-align: center;
}

.checkout-login p {
    margin-bottom: 12px;
    color: #6b7280;
}

.register-link {
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   CHECKOUT PAGE
   --------------------------------------------------------------------------- */
.checkout-page {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.checkout-page h1 {
    margin-bottom: 30px;
}

.checkout-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
}

.checkout-section {
    background: #f9fafb;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.checkout-section h2 {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-group-small {
    flex: 0 0 120px;
}

.form-group-large {
    flex: 1;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 10px 0;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.payment-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.payment-label strong {
    display: block;
    margin-bottom: 4px;
}

.payment-label small {
    color: #6b7280;
}

/* Shipping method selection */
.shipping-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin: 20px 0 8px;
}

.shipping-group-title:first-of-type {
    margin-top: 0;
}

.shipping-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shipping-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.shipping-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.shipping-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.shipping-label strong {
    display: block;
    font-size: 0.9rem;
}

.shipping-carrier {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.shipping-price {
    font-weight: 600;
    white-space: nowrap;
    margin-left: 12px;
}

.shipping-price-free {
    color: #059669;
}

/* FoxPost APT Finder Widget */
.foxpost-apt-section { margin-top: 0; }
.foxpost-apt-hint { font-size: 0.85rem; color: #6b7280; margin-bottom: 12px; }
.foxpost-apt-widget-wrap { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.foxpost-apt-iframe { display: block; width: 100%; min-height: 450px; border: none; }
.foxpost-apt-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 15px; background: #eff6ff; border: 1px solid #2563eb; border-radius: 6px; margin-bottom: 8px; }
.foxpost-apt-card strong { font-size: 0.95rem; }
.foxpost-apt-card span { font-size: 0.85rem; color: #6b7280; }

/* Shipping carrier logo in radio label */
.shipping-label-inner { display: flex; flex-direction: column; gap: 2px; }
.shipping-carrier-logo { max-width: 20px; max-height: 20px; width: 20px; height: 20px; object-fit: contain; display: inline-block; vertical-align: middle; margin-right: 4px; flex-shrink: 0; }

/* Product page FoxPost badge */
.product-shipping-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin: 12px 0;
    font-size: 0.85rem;
    color: #374151;
}
.product-foxpost-logo { max-width: 80px; width: 80px; height: auto; object-fit: contain; flex-shrink: 0; }

/* FoxPost admin button row */
.foxpost-btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-danger-outline { color: #dc2626; border-color: #dc2626; background: transparent; }
.btn-danger-outline:hover { background: #fef2f2; }

/* Disabled shipping option */
.shipping-option-disabled { opacity: 0.5; cursor: not-allowed; background: #f9fafb; }
.shipping-option-disabled input { pointer-events: none; }
.shipping-disabled-reason { display: block; font-size: 0.7rem; color: #dc2626; margin-top: 2px; }

.checkout-summary {
    background: #f9fafb;
    padding: 25px;
    border-radius: 8px;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.order-items {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.9rem;
}

.order-item-name small {
    color: #6b7280;
}

.terms-note {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 15px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   ORDERS PAGE
   --------------------------------------------------------------------------- */
.orders-page {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.orders-page h1 {
    margin-bottom: 30px;
}

.no-orders {
    text-align: center;
    padding: 60px 20px;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-table th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #6b7280;
}

.orders-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.order-number {
    font-weight: 600;
    font-family: monospace;
}

.order-total {
    font-weight: 600;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-pending { background: #fef3c7; color: #92400e; }
.status-processing { background: #dbeafe; color: #1e40af; }
.status-shipped { background: #e0e7ff; color: #3730a3; }
.status-delivered { background: #dcfce7; color: #166534; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.status-refunded { background: #f3e8ff; color: #6b21a8; }

.payment-pending { background: #fef3c7; color: #92400e; }
.payment-paid { background: #dcfce7; color: #166534; }
.payment-failed { background: #fee2e2; color: #991b1b; }
.payment-refunded { background: #f3e8ff; color: #6b21a8; }

/* ---------------------------------------------------------------------------
   ORDER DETAIL
   --------------------------------------------------------------------------- */
.order-detail-header {
    margin-bottom: 30px;
}

.order-detail-header h1 {
    margin-top: 10px;
}

.order-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.order-info-box {
    background: #f9fafb;
    padding: 20px;
    border-radius: 8px;
}

.order-info-box h3 {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 12px;
}

.order-info-box p {
    margin-bottom: 6px;
}

.order-items-detail h3 {
    margin-bottom: 15px;
}

.order-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}

.order-items-table th {
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #e5e7eb;
    font-size: 0.85rem;
    color: #6b7280;
}

.order-items-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e5e7eb;
}

.custom-image-badge {
    display: inline-block;
    background: #8b5cf6;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}

.order-totals {
    background: #f9fafb;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    margin-left: auto;
}

.totals-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.totals-total {
    font-weight: 700;
    font-size: 1.1rem;
    border-top: 2px solid #e5e7eb;
    margin-top: 10px;
    padding-top: 15px;
}

.payment-info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 20px;
    border-radius: 8px;
    margin-top: 25px;
}

.payment-info-box h3 {
    color: #1e40af;
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------------------
   PROFILE PAGE
   --------------------------------------------------------------------------- */
.profile-page {
    max-width: 900px;
    margin: 0 auto;
}

.profile-page h1 {
    margin-bottom: 30px;
}

.profile-section {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 25px;
}

.profile-section h2 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.profile-info p {
    margin-bottom: 10px;
}

.profile-empty {
    color: #6b7280;
    margin-bottom: 15px;
}

.profile-empty a {
    color: #4f46e5;
}

.profile-subtitle {
    font-size: 0.95rem;
    margin: 20px 0 10px;
    color: #374151;
}

.profile-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.profile-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111;
}

.profile-stat-label {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.profile-last-order {
    font-size: 0.88rem;
    color: #374151;
    margin-bottom: 15px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
}

.profile-score-explain {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 15px;
}

/* Coupon cards */
.coupon-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.coupon-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    flex-wrap: wrap;
}

.coupon-available {
    border-left: 4px solid #10b981;
}

.coupon-used {
    border-left: 4px solid #9ca3af;
    opacity: 0.6;
}

.coupon-code {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1px;
    min-width: 140px;
    font-family: monospace;
}

.coupon-details {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.coupon-discount {
    font-weight: 600;
    color: #10b981;
}

.coupon-used .coupon-discount {
    color: #6b7280;
}

.coupon-expiry,
.coupon-min {
    font-size: 0.8rem;
    color: #6b7280;
}

.coupon-stackable {
    font-size: 0.75rem;
}

.coupon-uses {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Referral box */
.referral-box {
    margin-top: 15px;
    padding: 15px;
    background: #f0fdf4;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
}

.referral-link-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.referral-url-input {
    flex: 1;
    font-size: 0.82rem;
    padding: 8px 12px;
}

.referral-hint {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
}

/* Invitee list */
.invitee-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.invitee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.88rem;
}

.invitee-name {
    font-weight: 500;
}

.invitee-date {
    color: #6b7280;
    font-size: 0.8rem;
}

.address-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.address-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.address-card-header {
    background: #f9fafb;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.address-type {
    font-weight: 500;
    font-size: 0.9rem;
}

.address-card-body {
    padding: 15px;
}

.address-card-body p {
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.address-card-actions {
    padding: 10px 15px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 15px;
}

/* ---------------------------------------------------------------------------
   MODAL
   --------------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.is-visible {
    display: flex;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content h3 {
    margin-bottom: 20px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

/* ---------------------------------------------------------------------------
   BADGES
   --------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-primary {
    background: #dbeafe;
    color: #1e40af;
}

/* ---------------------------------------------------------------------------
   UTILITY CLASSES
   --------------------------------------------------------------------------- */
.btn-block {
    display: block;
    width: 100%;
}

.btn-danger {
    color: #ef4444;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE - WEBSHOP
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .shop-content {
        grid-template-columns: 200px 1fr;
    }

    .cart-content {
        grid-template-columns: 1fr;
    }

    .checkout-content {
        grid-template-columns: 1fr;
    }

    .order-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .shop-header {
        flex-direction: column;
        text-align: center;
    }

    .shop-content {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        order: 1;
    }

    .shop-main {
        order: 0;
    }

    .product-detail {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cart-table th:nth-child(2),
    .cart-table td:nth-child(2) {
        display: none;
    }

    .search-input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    .cart-item-product {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-item-image {
        width: 60px;
        height: 60px;
    }
}

/* =============================================================================
   ADMIN PANEL STYLES
   ============================================================================= */

.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
    overflow-x: hidden;
}

/* --- Admin Header --- */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
    overflow: hidden;
    max-width: 100%;
}

.admin-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a2e;
    text-decoration: none;
}

.admin-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: 100%;
}

.admin-nav-link {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-nav-link:hover {
    background: #f1f5f9;
    text-decoration: none;
}

.admin-nav-link.active {
    background: #2563eb;
    color: #fff;
}

.admin-header-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
    margin-left: auto;
}

/* --- Stats Cards Grid --- */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 36px;
}

.admin-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
}

.admin-stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 8px;
}

.admin-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
}

.admin-stat-card.admin-stat-warning .admin-stat-value {
    color: #b45309;
}

/* ── Funnel widget (admin.php) ─────────────────────────────── */
.admin-funnel-widget { margin: 2rem 0; }
.admin-funnel-widget h2 { color: var(--text-primary, #e0e0e0); margin-bottom: 1rem; }
.admin-funnel-widget h2 small { font-size: 0.6em; color: var(--text-secondary, #888); }
.admin-funnel-link { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--accent, #c4a35a); text-decoration: none; }
.admin-funnel-link:hover { text-decoration: underline; }

/* --- Admin Tables --- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.admin-table th {
    text-align: left;
    padding: 12px 16px;
    background: #f8fafc;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
}

.admin-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 0.9rem;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: #fafafa;
}

/* --- Admin Filter Bar --- */
.admin-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 20px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.admin-filters .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 140px;
}

.admin-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #1a1a2e;
}

.admin-select-sm {
    padding: 4px 8px;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
}

/* --- Inline Status Update Form --- */
.admin-status-form {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* --- Image Moderation Grid --- */
.admin-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.admin-image-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.admin-image-thumb-wrap {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f3f4f6;
    cursor: pointer;
}

.admin-image-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.admin-image-thumb:hover {
    transform: scale(1.04);
}

.admin-image-meta {
    padding: 12px;
}

.admin-image-meta p {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 4px;
}

.admin-image-meta strong {
    color: #1a1a2e;
}

.admin-image-actions {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
}

/* Image preview modal */
.admin-preview-modal .modal-content {
    max-width: 800px;
    padding: 12px;
    background: #000;
}

.admin-preview-modal .modal-content img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Role badge --- */
.role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.role-admin { background: #fde8e8; color: #c0392b; }
.role-manager { background: #e8f4fd; color: #1a6fa8; }
.role-support { background: #e8fdf0; color: #1a8a3c; }

/* --- Section title bar --- */
.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.admin-section-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
}

/* --- Admin filter tabs --- */
.admin-tab-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.admin-tab-link {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.admin-tab-link:hover {
    color: #1a1a2e;
}

.admin-tab-link.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

/* --- Admin btn overrides --- */
.admin-btn-approve {
    padding: 4px 12px;
    font-size: 0.8rem;
    border-radius: 4px;
    border: 1px solid #16a34a;
    background: #dcfce7;
    color: #166534;
    cursor: pointer;
    font-weight: 500;
}

.admin-btn-approve:hover {
    background: #bbf7d0;
}

.admin-btn-reject {
    padding: 4px 12px;
    font-size: 0.8rem;
    border-radius: 4px;
    border: 1px solid #dc2626;
    background: #fee2e2;
    color: #991b1b;
    cursor: pointer;
    font-weight: 500;
}

.admin-btn-reject:hover {
    background: #fecaca;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .admin-container {
        padding: 12px 10px;
    }
    .admin-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .admin-nav-link {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    .admin-header-right {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .admin-header-right .btn-sm {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .admin-stat-card {
        padding: 12px;
    }
    .admin-stat-value {
        font-size: 1.3rem;
    }
    .admin-table {
        font-size: 0.8rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-table th,
    .admin-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }
    .admin-table thead,
    .admin-table tbody,
    .admin-table tr {
        min-width: max-content;
    }
    .admin-section-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .admin-section-header h1 {
        font-size: 1.2rem;
    }
    .admin-filters {
        flex-direction: column;
        gap: 8px;
    }
    .admin-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    .coupon-form {
        flex-direction: column;
    }
}
@media (max-width: 480px) {
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }
    .admin-stat-value {
        font-size: 1.1rem;
    }
    .admin-nav-link {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   COUPON SYSTEM
   --------------------------------------------------------------------------- */
.coupon-form-wrapper {
    margin-bottom: 16px;
}

.coupon-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.coupon-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.coupon-input::placeholder {
    text-transform: none;
}

.coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: #065f46;
}

.coupon-remove-form {
    display: inline;
}

.coupon-error {
    color: #dc2626;
    font-size: 0.85rem;
    margin: 6px 0 0 0;
}

.summary-row.summary-discount {
    color: #059669;
    font-weight: 600;
}

/* =============================================================================
   NFC VIEWER — Public SmartPrint content display
   ============================================================================= */

.nfc-body {
    margin: 0;
    padding: 0;
    background: #111;
    color: #f0f0f0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
}

.nfc-viewer {
    max-width: 900px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ─── Smartpoint Navigation ─────────────────────────────────────────── */

.nfc-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px 8px;
    flex-shrink: 0;
}

.nfc-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #444;
    background: #222;
    color: #ccc;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nfc-nav-btn:hover {
    border-color: #888;
    color: #fff;
}

.nfc-nav-btn.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* ─── Sections ──────────────────────────────────────────────────────── */

.nfc-section {
    display: none;
    flex: 1;
    padding: 12px;
}

.nfc-section.is-visible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ─── Fullscreen Image ──────────────────────────────────────────────── */

.nfc-fullscreen-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
}

.nfc-fullscreen-img {
    max-width: 100%;
    max-height: 85vh;
    max-height: 85dvh;
    object-fit: contain;
    border-radius: 8px;
    cursor: zoom-in;
}

/* ─── Image Gallery ─────────────────────────────────────────────────── */

.nfc-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    padding: 8px 0;
}

.nfc-gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    background: #222;
}

.nfc-gallery-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.nfc-gallery-item:hover .nfc-gallery-thumb {
    transform: scale(1.05);
}

/* ─── Lightbox ──────────────────────────────────────────────────────── */

.nfc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nfc-lightbox[hidden] {
    display: none;
}

.nfc-lightbox-img {
    max-width: 95vw;
    max-height: 90vh;
    max-height: 90dvh;
    object-fit: contain;
}

.nfc-lightbox-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 1001;
    line-height: 1;
    padding: 8px;
}

.nfc-lightbox-prev,
.nfc-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 8px;
    z-index: 1001;
    line-height: 1;
}

.nfc-lightbox-prev { left: 12px; }
.nfc-lightbox-next { right: 12px; }

.nfc-lightbox-prev:hover,
.nfc-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ─── Video ─────────────────────────────────────────────────────────── */

.nfc-video-full-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
}

.nfc-video-full {
    max-width: 100%;
    max-height: 85vh;
    max-height: 85dvh;
    border-radius: 8px;
    background: #000;
}

.nfc-video-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.nfc-video-gallery-item {
    width: 100%;
}

.nfc-video-item {
    width: 100%;
    border-radius: 8px;
    background: #000;
}

/* ─── Audio ─────────────────────────────────────────────────────────── */

.nfc-audio-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 600px;
}

.nfc-audio-item {
    background: #1a1a2e;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nfc-audio-name {
    font-size: 0.9rem;
    color: #aaa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nfc-audio-player {
    width: 100%;
    height: 40px;
}

/* ─── Embeds (YouTube, Spotify) ─────────────────────────────────────── */

.nfc-embed-wrap {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.nfc-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.nfc-embed-fullscreen {
    max-width: none;
    aspect-ratio: auto;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    inset: 0;
    border-radius: 0;
    z-index: 10;
}

.nfc-yt-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    cursor: pointer;
}

.nfc-yt-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nfc-yt-play {
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.2s;
    padding: 0;
}

.nfc-yt-play:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ─── Native App Splash (YouTube / Spotify deep link) ───────────────── */

.nfc-app-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nfc-app-splash:hover,
.nfc-app-splash:active {
    color: #fff;
    text-decoration: none;
}

.nfc-app-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    padding: 24px;
}

.nfc-app-play-icon {
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}

.nfc-app-label {
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.nfc-app-sublabel {
    font-size: 0.85rem;
    color: #aaa;
}

.nfc-spotify-splash {
    background: #121212;
}

.nfc-spotify-icon {
    filter: drop-shadow(0 4px 20px rgba(29,185,84,0.4));
}

/* ─── Link Card ─────────────────────────────────────────────────────── */

.nfc-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    color: #f0f0f0;
    width: 100%;
    max-width: 500px;
    transition: all 0.2s ease;
}

.nfc-link-card:hover {
    background: #252540;
    border-color: #555;
}

.nfc-link-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.nfc-link-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    flex: 1;
}

.nfc-link-host {
    font-weight: 600;
    font-size: 1rem;
}

.nfc-link-url {
    font-size: 0.8rem;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nfc-link-arrow {
    font-size: 1.5rem;
    color: #888;
    flex-shrink: 0;
}

/* ─── Error Page ────────────────────────────────────────────────────── */

.nfc-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    text-align: center;
    padding: 24px;
}

.nfc-error-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #666;
    margin-bottom: 24px;
}

.nfc-error h1 {
    font-size: 1.5rem;
    margin: 0 0 12px;
    color: #ddd;
}

.nfc-error p {
    color: #888;
    margin: 0;
    font-size: 1rem;
}

.nfc-empty {
    color: #888;
    text-align: center;
    padding: 40px 20px;
}

/* ─── Redirect Page ─────────────────────────────────────────────────── */

.nfc-redirect {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    gap: 20px;
    color: #aaa;
}

.nfc-redirect-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #333;
    border-top-color: #fff;
    border-radius: 50%;
    animation: nfc-spin 0.8s linear infinite;
}

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

/* ─── Responsive ────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .nfc-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .nfc-section {
        padding: 20px;
    }
}

@media (min-width: 1024px) {
    .nfc-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   SMARTPRINT CUSTOMER ORDER CARD
   --------------------------------------------------------------------------- */
.customer-sp-card {
    margin-top: 15px;
    padding: 15px;
    background-color: #f7fbff;
    border: 1px solid #cce0ff;
    border-radius: 8px;
    font-size: 0.9em;
}

.customer-sp-card h4 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #4361ee;
    font-size: 1.1em;
}

.sp-preview-image {
    margin-bottom: 15px;
}

.sp-preview-image img {
    max-width: 150px;
    max-height: 150px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.sp-preview-image img:hover {
    transform: scale(1.05);
}

.sp-detail-row {
    margin-bottom: 8px;
}

.sp-detail-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.sp-text-columns-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.sp-text-column {
    flex: 1;
    min-width: 150px;
    background: rgba(255,255,255,0.5);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed rgba(67, 97, 238, 0.3);
}

.sp-media-list,
.sp-text-list {
    margin: 0;
    padding-left: 15px;
}

.sp-media-list li,
.sp-text-list li {
    margin-bottom: 3px;
    color: #334155;
}

.badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    margin-right: 6px;
    color: #fff;
}

.badge-image, .badge-images { background-color: #3b82f6; }
.badge-audio { background-color: #10b981; }
.badge-video { background-color: #8b5cf6; }
.badge-youtube { background-color: #ef4444; }
.badge-spotify { background-color: #22c55e; }
.badge-url { background-color: #f59e0b; }

/* ─── Admin SmartPrint detail styles (CSP-compliant replacements) ──────── */
.sp-admin-details {
    margin-top: 15px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.sp-admin-details h4 {
    margin-top: 0;
    margin-bottom: 10px;
}

.sp-admin-img-wrap {
    margin-bottom: 10px;
}

.sp-admin-preview-img {
    max-width: 200px;
    max-height: 200px;
    border: 1px solid #ccc;
    margin-top: 5px;
}

.sp-admin-dimensions {
    margin-bottom: 10px;
}

.sp-admin-media-section {
    margin-bottom: 15px;
}

.sp-admin-media-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 5px;
}

.sp-admin-media-item {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-admin-badge-sm {
    font-size: 0.7em;
}

.sp-admin-muted {
    color: #666;
    font-size: 0.85em;
}

.sp-admin-summary {
    cursor: pointer;
    font-weight: bold;
    color: #4361ee;
}

.sp-admin-state-wrap {
    margin-top: 10px;
    overflow-x: auto;
}

.sp-admin-state-table {
    font-size: 0.85em;
}

.sp-admin-mono {
    font-family: monospace;
}

.sp-custom-badge-wrap {
    margin-top: 5px;
}

/* ─── Admin product table styles ─────────────────────────────────────── */
.admin-product-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.text-muted {
    color: #9ca3af;
}

/* ─── Checkbox group (login/register) ────────────────────────────────── */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.checkbox-group input[type="checkbox"] {
    margin: 0;
    width: auto;
}

.checkbox-group label {
    margin: 0;
    font-weight: normal;
}

/* =============================================================================
   LEGAL FOOTER
   ============================================================================= */
.legal-footer {
    margin-top: 2rem;
    padding: 1rem 0;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    font-size: 0.85rem;
}

.legal-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

.legal-footer-links a {
    color: #666;
    text-decoration: none;
}

.legal-footer-links a:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* =============================================================================
   LEGAL PAGES
   ============================================================================= */
.legal-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    line-height: 1.7;
}

.legal-container h1 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #2563eb;
    padding-bottom: 0.5rem;
}

.legal-container h2 {
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    color: #1e3a5f;
}

.legal-container h3 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.legal-container th,
.legal-container td {
    border: 1px solid #ddd;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.legal-container th {
    background: #f5f7fa;
    font-weight: 600;
}

.legal-container dl {
    margin: 1rem 0;
}

.legal-container dt {
    font-weight: 600;
    margin-top: 0.75rem;
}

.legal-container dd {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------------
   CONTACT PAGE
   --------------------------------------------------------------------------- */
.contact-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

.contact-page h1 {
    font-size: 1.75rem;
    margin-bottom: 8px;
}

.contact-intro {
    color: #64748b;
    margin-bottom: 24px;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

.contact-form .form-group {
    margin-bottom: 16px;
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.contact-form .required {
    color: #dc2626;
}

.contact-form .form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s;
}

.contact-form .form-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.contact-form textarea.form-input {
    resize: vertical;
    min-height: 120px;
}

.contact-form .form-hint {
    display: block;
    color: #94a3b8;
    font-size: 0.8rem;
    margin-top: 4px;
}

/* Honeypot — invisible to humans */
.contact-hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

.contact-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px;
}

.contact-info h2 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: #1e3a5f;
}

.contact-details dt {
    font-weight: 600;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #475569;
}

.contact-details dd {
    margin-left: 0;
    margin-bottom: 4px;
}

.contact-faq {
    margin-top: 16px;
}

.contact-faq h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 4px;
}

.contact-faq p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* =============================================================================
   INVOICE BADGES & NAV STATUS
   ============================================================================= */
.invoice-type-normal { background: #2196F3; color: #fff; }
.invoice-type-storno { background: #f44336; color: #fff; }
.nav-status-done { background: #4CAF50; color: #fff; }
.nav-status-processing { background: #FF9800; color: #fff; }
.nav-status-received { background: #2196F3; color: #fff; }
.nav-status-aborted { background: #f44336; color: #fff; }
.nav-status-none { background: #9E9E9E; color: #fff; }

.order-invoice-section { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--border-color, #ddd); border-radius: 8px; }
.invoice-row { padding: 0.75rem 0; border-bottom: 1px solid var(--border-color, #eee); }
.invoice-row:last-child { border-bottom: none; }
.invoice-storno { opacity: 0.7; }
.invoice-storno p:first-child strong { text-decoration: line-through; }
.invoice-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.text-danger { color: #f44336; }

/* Storno Modal */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.u-hidden { display: none; }
.modal-content { background: var(--bg-color, #fff); padding: 2rem; border-radius: 12px; max-width: 500px; width: 90%; }
.modal-actions { display: flex; gap: 1rem; margin-top: 1.5rem; justify-content: flex-end; }

/* Invoice management details dropdown */
.invoice-manage-details { display: inline-block; position: relative; }
.invoice-manage-details summary { cursor: pointer; list-style: none; }
.invoice-manage-details summary::-webkit-details-marker { display: none; }
.invoice-manage-details summary::marker { display: none; content: ''; }
.invoice-manage-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; padding: 0.5rem; background: var(--bg-color, #f8f8f8); border: 1px solid #ddd; border-radius: 8px; }
.btn-outline { background: transparent; border: 1px solid #999; color: #666; }
.btn-outline:hover { border-color: #333; color: #333; }
#refund-amount { max-width: 200px; font-size: 1.1rem; font-weight: 600; }

/* Invoice admin page — stat cards & row highlights */
.stat-value { font-size: 1.75rem; font-weight: 700; }
.stat-label { font-size: 0.85rem; color: var(--text-muted, #666); margin-top: 0.25rem; }
.stat-card-danger { border-color: #f44336; }
.stat-card-danger .stat-value { color: #f44336; }

.invoice-row-overdue { background-color: rgba(244, 67, 54, 0.08); }
.invoice-row-storno td { opacity: 0.65; }
.invoice-row-storno td:first-child { text-decoration: line-through; }
.invoice-row-nav-error { background-color: rgba(244, 67, 54, 0.05); }
.invoice-row-nav-error td { opacity: 0.55; }
.invoice-row-nav-error td:first-child strong { text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   NAV DASHBOARD
   --------------------------------------------------------------------------- */
.nav-dash-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.nav-dash-env-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px 0;
}
.nav-env-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-right: 4px;
}
.nav-env-btn {
    padding: 5px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}
.nav-env-btn:hover {
    border-color: #94a3b8;
    color: #1e293b;
}
.nav-env-btn.is-active[data-env="eles"] {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #15803d;
}
.nav-env-btn.is-active[data-env="test"] {
    border-color: #d97706;
    background: #fffbeb;
    color: #b45309;
}
.nav-dash-sync-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.nav-sync-status {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
}
.nav-sync-status strong {
    color: #1e293b;
}
.nav-sync-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.nav-dash-tab {
    padding: 10px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}
.nav-dash-tab:hover:not(:disabled) {
    border-color: #94a3b8;
    color: #1e293b;
}
.nav-dash-tab.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e40af;
}
.nav-dash-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.nav-dash-tab small {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: #94a3b8;
    margin-top: 2px;
}

.nav-dash-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #334155;
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.nav-dash-filters {
    flex-wrap: wrap;
    align-items: flex-end;
}

.nav-dash-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    color: #64748b;
    font-size: 0.95rem;
}
.nav-dash-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: navSpin 0.6s linear infinite;
}
@keyframes navSpin {
    to { transform: rotate(360deg); }
}

.nav-dash-clickable { cursor: pointer; }
.nav-dash-clickable:hover td { background: #f0f9ff; }

/* Sortable column headers */
.nav-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.nav-sortable:hover { background: #f0f4ff; }
.nav-sort-icon { display: inline-block; width: 14px; margin-left: 4px; font-size: 0.75rem; color: #94a3b8; vertical-align: middle; }
.nav-sortable:hover .nav-sort-icon { color: #64748b; }
.nav-sort-icon::after { content: '\2195'; }
.is-sorted-asc .nav-sort-icon::after { content: '\2191'; }
.is-sorted-desc .nav-sort-icon::after { content: '\2193'; }
.is-sorted-asc .nav-sort-icon,
.is-sorted-desc .nav-sort-icon { color: #2563eb; }
.is-sorted-asc,
.is-sorted-desc { background: #f0f4ff; }

.text-right { text-align: right; }

.table-responsive { overflow-x: auto; }

/* Operation badges */
.nav-op-create { background: #dcfce7; color: #166534; }
.nav-op-modify { background: #fef3c7; color: #92400e; }
.nav-op-storno { background: #fee2e2; color: #991b1b; }

/* Source badge */
.nav-source-badge { background: #f1f5f9; color: #475569; }

/* Direction badges */
.nav-dir-out { background: #dbeafe; color: #1e40af; }
.nav-dir-in { background: #fce7f3; color: #9d174d; }

/* NAV Sync date picker */
.nav-sync-until-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #475569; }
.nav-sync-until-label input { width: 140px; padding: 4px 8px; font-size: 0.85rem; }

/* NAV Dashboard toolbar */
.nav-dash-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }

/* NAV Analytics panels */
.nav-analytics-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    margin: 16px 0;
}
.nav-analytics-panel h3 { margin: 0 0 12px; font-size: 1.1rem; }
.nav-analytics-panel .nav-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.nav-analytics-panel .nav-stat-box {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
}
.nav-stat-box .nav-stat-value { font-size: 1.3rem; font-weight: 700; }
.nav-stat-box .nav-stat-label { font-size: 0.8rem; color: #64748b; margin-top: 2px; }
.nav-stat-box.nav-stat-danger .nav-stat-value { color: #dc2626; }
.nav-stat-box.nav-stat-success .nav-stat-value { color: #16a34a; }
.nav-stat-box.nav-stat-warning .nav-stat-value { color: #d97706; }
.nav-stat-box.nav-stat-info .nav-stat-value { color: #2563eb; }

.nav-analytics-panel table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.nav-analytics-panel th { text-align: left; padding: 6px 8px; background: #f1f5f9; border-bottom: 2px solid #e2e8f0; font-weight: 600; }
.nav-analytics-panel td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }
.nav-analytics-panel tr.nav-row-overdue td { background: #fef2f2; }
.nav-analytics-panel tr.nav-row-soon td { background: #fffbeb; }
.nav-analytics-panel tr.nav-row-unmatched td { background: #fef2f2; }
.nav-analytics-panel .nav-panel-close { float: right; cursor: pointer; background: none; border: none; font-size: 1.2rem; color: #94a3b8; }
.nav-analytics-panel .nav-panel-close:hover { color: #1e293b; }

/* Invoice detail modal — large */
.nav-invoice-detail-modal {
    max-width: 1100px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Invoice XML preview */
.nav-dash-xml {
    background: #1e293b;
    color: #e2e8f0;
    padding: 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 400px;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Active nav link */
.admin-nav-active {
    color: #2563eb;
    font-weight: 700;
}

/* Pagination button style */
.pagination-link {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    color: #2563eb;
}
.pagination-link:hover { background: #eff6ff; }
.pagination-current {
    padding: 6px 12px;
    border: 1px solid #2563eb;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Funnel Analytics (admin-funnels.php) ──────────────────── */
.funnel-filters { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; }
.funnel-filter-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.funnel-filter-group label { color: var(--text-secondary, #888); font-size: 0.85rem; }
.funnel-filter-btn {
    padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.85rem;
    color: var(--text-secondary, #888); background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, #333); text-decoration: none; transition: all 0.2s;
}
.funnel-filter-btn:hover { border-color: var(--accent, #c4a35a); color: var(--text-primary, #e0e0e0); }
.funnel-filter-btn.active { background: var(--accent, #c4a35a); color: #000; border-color: var(--accent, #c4a35a); }

.funnel-summary {
    font-size: 1.1rem; color: var(--text-primary, #e0e0e0);
    margin-bottom: 2rem; padding: 1rem; background: var(--bg-card, #1a1a1a);
    border-radius: 8px; border: 1px solid var(--border, #333);
}
.funnel-summary strong { color: var(--accent, #c4a35a); font-size: 1.3rem; }

.funnel-chart { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.funnel-step { display: grid; grid-template-columns: 180px 1fr 180px; align-items: center; gap: 1rem; }
.funnel-step-label { font-size: 0.9rem; color: var(--text-primary, #e0e0e0); text-align: right; }
.funnel-bar-container {
    height: 32px; background: var(--bg-card, #1a1a1a); border-radius: 6px;
    border: 1px solid var(--border, #333); overflow: hidden;
}
.funnel-bar {
    height: 100%; border-radius: 6px; min-width: 2px;
    background: linear-gradient(90deg, var(--accent, #c4a35a), #d4b86a);
    transition: width 0.4s ease;
}
.funnel-step-stats { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
.funnel-step-count { color: var(--text-primary, #e0e0e0); font-weight: 600; }
.funnel-step-conv { color: var(--text-secondary, #888); }
.funnel-step-drop { color: #e74c3c; font-size: 0.8rem; }

@media (max-width: 768px) {
    .funnel-step { grid-template-columns: 1fr; gap: 0.25rem; }
    .funnel-step-label { text-align: left; }
}

/* ── ADMIN REVIEWS ─────────────────────────────────────────────────────────── */

.review-filter-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.review-filter-tab {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #aaa;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.review-filter-tab:hover {
    background: #222;
    color: #e0e0e0;
    border-color: #555;
}
.review-filter-tab.active {
    background: #c4a35a;
    color: #000;
    border-color: #c4a35a;
    font-weight: 600;
}

/* Star rating display */
.review-stars {
    color: #c4a35a;
    font-size: 1rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Status badges for reviews */
.review-status-approved { background: #1a4a2e; color: #4caf7d; border: 1px solid #2d6b43; }
.review-status-rejected { background: #4a1a1a; color: #e57373; border: 1px solid #6b2d2d; }
.review-status-pending  { background: #4a3a1a; color: #ffb74d; border: 1px solid #6b5528; }

/* Source badges */
.review-source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.review-source-google   { background: #1a3a4a; color: #64b5f6; border: 1px solid #1e5a7a; }
.review-source-facebook { background: #1a2a4a; color: #7986cb; border: 1px solid #2a3f78; }
.review-source-email    { background: #2a2a1a; color: #fff176; border: 1px solid #4a4a1a; }
.review-source-manual   { background: #2a2a2a; color: #9e9e9e; border: 1px solid #444; }
.review-source-website  { background: #1a3a3a; color: #4db6ac; border: 1px solid #1e5e5e; }

.review-text-cell  { max-width: 280px; font-size: 0.85rem; color: #bbb; }
.review-date-cell  { white-space: nowrap; font-size: 0.85rem; color: #888; }
.review-actions-cell { white-space: nowrap; }
.review-meta-user  { color: #777; font-size: 0.75rem; }
.review-no-text    { color: #555; }

/* Action buttons */
.btn-review-approve {
    background: #1a4a2e;
    color: #4caf7d;
    border: 1px solid #2d6b43;
}
.btn-review-approve:hover {
    background: #2d6b43;
    color: #a5d6a7;
}
.btn-review-reject {
    background: #4a1a1a;
    color: #e57373;
    border: 1px solid #6b2d2d;
}
.btn-review-reject:hover {
    background: #6b2d2d;
    color: #ffcdd2;
}

/* Manual review creation form */
.review-create-form {
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.review-form-hint {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 1rem;
}
.admin-empty-state {
    color: #666;
    font-style: italic;
    padding: 2rem 0;
}

/* ── Shipping Dashboard ───────────────────────────────────────────────── */
.shipping-stats {
    display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.shipping-stat-card {
    flex: 1 1 140px; padding: 1rem 1.25rem; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 8px; text-align: center;
    text-decoration: none; color: inherit; transition: border-color 0.15s;
}
.shipping-stat-card:hover { border-color: #94a3b8; }
.shipping-stat-card.active { border-color: #2563eb; background: #eff6ff; }
.shipping-stat-number { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.shipping-stat-label { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }
.shipping-filters { margin-bottom: 1.25rem; }
.shipping-filter-row {
    display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.shipping-row-attention { background: #fffbeb; }
.shipping-order-link { font-weight: 600; font-size: 0.8rem; font-family: monospace; }
.shipping-carrier-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 0.75rem; font-weight: 500; background: #f1f5f9; color: #334155;
}
.carrier-foxpost { background: #fef3c7; color: #92400e; }
.carrier-gls { background: #dbeafe; color: #1e40af; }
.carrier-mpl { background: #fce7f3; color: #9d174d; }
.carrier-packeta { background: #d1fae5; color: #065f46; }
.shipping-tracking-link {
    font-family: monospace; font-size: 0.8rem; word-break: break-all;
}
.shipping-tracking-code {
    font-size: 0.8rem; background: #f1f5f9; padding: 1px 4px; border-radius: 3px;
}
.admin-footer-info {
    text-align: center; padding: 1rem; color: #94a3b8; font-size: 0.85rem;
}
.shipping-table-wrap { overflow-x: auto; }
.shipping-table-wrap .admin-table { min-width: 1000px; table-layout: fixed; }
.shipping-table-wrap .admin-table th:nth-child(1) { width: 12%; }
.shipping-table-wrap .admin-table th:nth-child(2) { width: 8%; }
.shipping-table-wrap .admin-table th:nth-child(3) { width: 14%; }
.shipping-table-wrap .admin-table th:nth-child(4) { width: 14%; }
.shipping-table-wrap .admin-table th:nth-child(5) { width: 16%; }
.shipping-table-wrap .admin-table th:nth-child(6) { width: 12%; }
.shipping-table-wrap .admin-table th:nth-child(7) { width: 9%; }
.shipping-table-wrap .admin-table th:nth-child(8) { width: 7%; }
.shipping-table-wrap .admin-table th:nth-child(9) { width: 8%; }
.shipping-table-wrap .admin-table td { vertical-align: top; overflow: hidden; text-overflow: ellipsis; }

/* ── Reviews Section ─────────────────────────────────────────────── */
.reviews-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; }
.reviews-section h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.reviews-summary { font-size: 0.9rem; color: #64748b; font-weight: 400; }
.reviews-empty { color: #64748b; font-style: italic; }
.reviews-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.review-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; }
.review-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.review-stars { color: #f59e0b; font-size: 1rem; }
.review-author { font-weight: 600; font-size: 0.9rem; }
.review-date { color: #94a3b8; font-size: 0.8rem; }
.review-text { color: #334155; line-height: 1.6; }
.review-reply { margin-top: 0.75rem; padding: 0.75rem; background: #f1f5f9; border-radius: 6px; font-size: 0.9rem; }
.review-reply strong { color: #1e293b; }
.review-message { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.review-message-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.review-message-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.review-form-wrapper { margin-top: 2rem; padding: 1.5rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
.review-form-wrapper h3 { margin-bottom: 1rem; font-size: 1.1rem; }
.review-form .form-group { margin-bottom: 1rem; }
.review-form textarea { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: 0.9rem; resize: vertical; }
.review-form textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.15rem; }
.star-rating input { display: none; }
.star-rating label { cursor: pointer; font-size: 1.5rem; color: #d1d5db; transition: color 0.15s; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #f59e0b; }

/* ── Newsletter Footer ───────────────────────────────────────────── */
.newsletter-footer { padding: 1.5rem 0; text-align: center; border-bottom: 1px solid #e2e8f0; margin-bottom: 1rem; }
.newsletter-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.75rem; }
.newsletter-fields { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.newsletter-input { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.85rem; width: 180px; }
.newsletter-btn { white-space: nowrap; }
.newsletter-gdpr { display: flex; align-items: center; gap: 0.35rem; justify-content: center; font-size: 0.8rem; color: #64748b; }
.newsletter-gdpr a { color: #2563eb; }
.newsletter-message { margin-top: 0.5rem; font-size: 0.85rem; min-height: 1.2em; }
.newsletter-success { color: #166534; }
.newsletter-error { color: #991b1b; }

/* -- Newsletter Admin --------------------------------------------------- */
.newsletter-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}
.newsletter-tab {
    padding: 0.75rem 1.25rem;
    color: #888;
    text-decoration: none;
    font-size: 0.85rem;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
}
.newsletter-tab:hover { color: #e0e0e0; }
.newsletter-tab.active {
    color: #c8a96e;
    border-bottom-color: #c8a96e;
}
.newsletter-tab-content { display: none; }
.newsletter-tab-content.active { display: block; }
.newsletter-editor {
    width: 100%;
    min-height: 300px;
    background: #111;
    color: #e0e0e0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    resize: vertical;
}
.newsletter-editor:focus {
    outline: none;
    border-color: #c8a96e;
}
.newsletter-preview-frame, .newsletter-preview-iframe {
    width: 100%;
    min-height: 400px;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
}
.template-placeholder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.template-placeholder-tag {
    background: rgba(200,169,110,0.15);
    color: #c8a96e;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8rem;
}
.campaign-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.campaign-status-draft, .newsletter-status-draft { background: rgba(255,255,255,0.08); color: #aaa; }
.campaign-status-scheduled, .newsletter-status-scheduled { background: rgba(59,130,246,0.15); color: #60a5fa; }
.campaign-status-sending, .newsletter-status-sending { background: rgba(245,158,11,0.15); color: #fbbf24; }
.campaign-status-sent, .newsletter-status-sent { background: rgba(34,197,94,0.15); color: #4ade80; }
.campaign-status-failed, .newsletter-status-failed { background: rgba(239,68,68,0.15); color: #f87171; }
.newsletter-tier-newsletter { background: rgba(34,197,94,0.15); color: #4ade80; }
.newsletter-tier-notify { background: rgba(255,255,255,0.08); color: #aaa; }
.newsletter-error-text { color: #f87171; font-size: 0.75rem; }
.newsletter-actions { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
.newsletter-template-placeholders { margin-bottom: 1rem; }
.newsletter-filter-row {
    display: flex;
    gap: 12px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.newsletter-filter-row .form-group {
    flex: 1;
    min-width: 150px;
}
.newsletter-sync-warning {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #fbbf24;
    margin-bottom: 1rem;
}
.newsletter-brevo-unavailable {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    color: #888;
}

/* -- Email Admin -------------------------------------------------------- */
.email-layout {
    display: flex;
    gap: 0;
    min-height: 500px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}
.email-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.02);
    border-right: 1px solid rgba(255,255,255,0.08);
    padding: 12px 0;
}
.email-main {
    flex: 1;
    min-width: 0;
    padding: 16px;
}
.email-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.email-toolbar select,
.email-toolbar input[type="text"] {
    background: #111;
    color: #e0e0e0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-family: inherit;
}
.email-folder-item {
    display: block;
    padding: 8px 16px;
    color: #888;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.email-folder-item:hover { background: rgba(255,255,255,0.04); color: #e0e0e0; }
.email-folder-active {
    background: rgba(200,169,110,0.1);
    color: #c8a96e;
    font-weight: 600;
}
.email-folder-count {
    background: rgba(200,169,110,0.2);
    color: #c8a96e;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.7rem;
    margin-left: 6px;
}
.email-list { width: 100%; border-collapse: collapse; }
.email-list td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.85rem; cursor: pointer; }
.email-list tr:hover td { background: rgba(255,255,255,0.03); }
.email-row-unread td { font-weight: 600; color: #f0f0f0; }
.email-subject { max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-from { color: #aaa; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-date { color: #666; white-space: nowrap; font-size: 0.8rem; }
.email-attachment-icon { color: #c8a96e; margin-right: 4px; }
.email-read-view { margin-top: 1rem; }
.email-read-header {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
}
.email-read-header strong { color: #c8a96e; }
.email-read-body {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    overflow-x: auto;
}
.email-read-body pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; margin: 0; }
.email-read-body-html { background: #fff; color: #333; border-radius: 8px; padding: 16px; overflow-x: auto; max-width: 100%; }
.email-read-attachments {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.email-read-attachments a {
    background: rgba(200,169,110,0.1);
    color: #c8a96e;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.15s;
}
.email-read-attachments a:hover { background: rgba(200,169,110,0.2); }
.email-read-actions { display: flex; gap: 8px; margin-top: 1rem; }
.email-compose-form { margin-top: 1rem; }
.email-compose-form .form-group { margin-bottom: 1rem; }
.email-compose-form textarea {
    width: 100%;
    min-height: 250px;
    background: #111;
    color: #e0e0e0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}
.email-compose-form textarea:focus { outline: none; border-color: #c8a96e; }
.email-preview-frame {
    width: 100%;
    min-height: 400px;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
}
.email-cc-toggle { color: #c8a96e; cursor: pointer; font-size: 0.8rem; text-decoration: underline; }
.email-empty-state { text-align: center; padding: 48px; color: #666; }

/* =============================================================================
   SESSION ANALYTICS
   ============================================================================= */
.session-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.session-stat-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    transition: border-color .2s, box-shadow .2s;
}
.session-stat-card:hover { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.session-stat-number { font-size: 1.75rem; font-weight: 700; color: #2563eb; line-height: 1.2; }
.session-stat-label { font-size: .85rem; color: #64748b; margin-top: .35rem; }
.session-stat-sub { font-size: .75rem; color: #94a3b8; margin-top: .25rem; }

.token-breakdown {
    display: grid; grid-template-columns: 1fr; gap: .5rem;
    margin-bottom: 2rem; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.25rem;
}
.token-breakdown h3 { margin: 0 0 .75rem 0; font-size: .95rem; color: #1e293b; }
.token-row {
    display: grid; grid-template-columns: 140px 1fr 100px 80px;
    gap: .75rem; align-items: center; font-size: .85rem;
}
.token-bar-bg { background: #e2e8f0; border-radius: 4px; height: 20px; overflow: hidden; }
.token-bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
.token-bar.input { background: #0ea5e9; }
.token-bar.output { background: #ef4444; }
.token-bar.cache-creation { background: #f59e0b; }
.token-bar.cache-read { background: #22c55e; }
.token-label { color: #64748b; }
.token-count { text-align: right; color: #1e293b; }
.token-cost { text-align: right; color: #2563eb; font-weight: 600; }

.cost-chart {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 1.25rem; margin-bottom: 2rem; overflow-x: auto;
}
.cost-chart h3 { margin: 0 0 1rem 0; font-size: 1rem; color: #1e293b; }
.chart-bars {
    display: flex; align-items: flex-end; gap: 3px;
    height: 200px; padding-bottom: 2rem; position: relative; min-width: max-content;
}
.chart-bar-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.chart-bar {
    width: 28px; background: linear-gradient(to top, #2563eb, #60a5fa);
    border-radius: 3px 3px 0 0; min-height: 2px;
    position: relative; cursor: pointer; transition: opacity .2s;
}
.chart-bar:hover { opacity: .8; }
.chart-bar-tooltip {
    display: none; position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%); background: #1e293b;
    border: 1px solid #334155; border-radius: 6px;
    padding: .35rem .5rem; font-size: .7rem; white-space: nowrap;
    color: #f1f5f9; z-index: 10; pointer-events: none;
}
.chart-bar:hover .chart-bar-tooltip { display: block; }
.chart-bar-date {
    font-size: .6rem; color: #94a3b8; margin-top: .35rem;
    writing-mode: vertical-rl; text-orientation: mixed; height: 2rem; overflow: hidden;
}
.chart-period-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.chart-period-tab {
    padding: .3rem .75rem; border-radius: 6px; font-size: .8rem;
    color: #64748b; text-decoration: none; border: 1px solid transparent; transition: all .2s;
}
.chart-period-tab:hover,
.chart-period-tab.active { color: #2563eb; border-color: #2563eb; }

.project-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.project-pill {
    padding: .4rem .85rem; border-radius: 20px; font-size: .8rem;
    color: #64748b; text-decoration: none; border: 1px solid #e2e8f0; transition: all .2s;
}
.project-pill:hover,
.project-pill.active { color: #2563eb; border-color: #2563eb; background: #eff6ff; }
.project-pill-separator { color: #cbd5e1; font-size: .8rem; display: flex; align-items: center; padding: 0 .25rem; }
.project-pill-hidden { color: #94a3b8; border-style: dashed; }
.project-pill-hidden:hover { color: #7c3aed; border-color: #7c3aed; background: #f5f3ff; }

/* Session table header with per-page selector */
.session-table-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.session-table-header h2 { margin: 0; }
.per-page-selector { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #64748b; }
.per-page-btn {
    padding: .25rem .5rem; border-radius: 4px; font-size: .75rem;
    color: #64748b; text-decoration: none; border: 1px solid #e2e8f0; transition: all .2s;
}
.per-page-btn:hover,
.per-page-btn.active { color: #2563eb; border-color: #2563eb; background: #eff6ff; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; margin-bottom: 1.5rem; }
.pagination-btn {
    padding: .35rem .65rem; border-radius: 4px; font-size: .8rem;
    color: #64748b; text-decoration: none; border: 1px solid #e2e8f0; transition: all .2s;
}
.pagination-btn:hover { color: #2563eb; border-color: #2563eb; background: #eff6ff; }
.pagination-btn.active { color: #fff; background: #2563eb; border-color: #2563eb; font-weight: 600; }
.pagination-dots { color: #94a3b8; font-size: .8rem; padding: 0 .25rem; }
.pagination-info { color: #94a3b8; font-size: .75rem; margin-left: auto; }

.session-cost-cell { font-weight: 600; color: #2563eb; }
.session-tokens-mini {
    display: flex; gap: 2px; height: 14px;
    border-radius: 3px; overflow: hidden; min-width: 80px;
}
.session-tokens-mini span { display: block; height: 100%; }
.session-tokens-mini .tk-input { background: #0ea5e9; }
.session-tokens-mini .tk-output { background: #ef4444; }
.session-tokens-mini .tk-cache-c { background: #f59e0b; }
.session-tokens-mini .tk-cache-r { background: #22c55e; }
.session-id-short { font-family: monospace; font-size: .8rem; color: #94a3b8; }
.session-duration { font-size: .85rem; }
.session-table-wrap .admin-table { table-layout: fixed; }
.session-table-wrap .col-date { width: 82px; }
.session-table-wrap .col-title { width: 147px; overflow: hidden; text-overflow: ellipsis; }
.session-table-wrap .col-project { width: 100px; overflow: hidden; text-overflow: ellipsis; }
.session-table-wrap .col-api { width: 42px; }
.session-table-wrap .col-tokens { width: 90px; }
.session-table-wrap .col-ctx { width: 92px; }
.session-table-wrap .col-cost { width: 65px; }
.session-table-wrap .col-duration { width: 72px; }
.session-table-wrap .col-budget { width: 90px; }
.session-table-wrap .col-budget-global { width: 110px; }
.session-budget-cell { white-space: nowrap; font-size: .75rem; }
.session-budget-cell .budget-row { display: flex; align-items: center; gap: 3px; line-height: 1.6; }
.session-budget-cell .budget-label { font-weight: 600; color: #64748b; min-width: 26px; font-size: .7rem; }
.session-budget-cell .budget-delta { font-weight: 600; color: #f59e0b; }
.session-budget-cell .budget-range { color: #94a3b8; font-size: .7rem; }
.session-budget-cell .budget-na { color: #cbd5e1; }
.session-budget-cell .budget-reset { color: #94a3b8; font-weight: 400; font-size: .7rem; }
.session-budget-cell .budget-approx { color: #94a3b8; font-style: italic; }
.session-budget-cell .budget-cost { color: #10b981; font-weight: 700; font-size: .78rem; }
.session-model { font-size: .75rem; color: #94a3b8; }
.session-title-cell { max-width: 200px; font-size: .82rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.session-ctx-cell { white-space: nowrap; font-size: .82rem; }
.ctx-bar-bg { display: inline-block; width: 50px; height: 10px; background: #e2e8f0; border-radius: 5px; overflow: hidden; vertical-align: middle; margin-right: 4px; }
.ctx-bar { display: block; height: 100%; border-radius: 5px; }
.ctx-value { color: #475569; margin-right: 2px; }
.ctx-pct { color: #94a3b8; font-size: .75rem; }
.budget-bar-bg { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-top: .4rem; }
.budget-bar { display: block; height: 100%; border-radius: 4px; }

.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { color: #2563eb; }

.project-breakdown {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem; margin-bottom: 2rem;
}
.project-card {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 1rem;
}
.project-card-name { font-weight: 600; color: #1e293b; margin-bottom: .5rem; }
.project-card-stat {
    display: flex; justify-content: space-between;
    font-size: .85rem; color: #64748b; padding: .15rem 0;
}
.project-card-stat strong { color: #1e293b; }

.cache-info { font-size: .75rem; color: #94a3b8; text-align: right; margin-bottom: 1rem; }

.view-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.view-tab {
    padding: .5rem 1rem; border-radius: 8px; font-size: .85rem;
    color: #64748b; text-decoration: none; border: 1px solid #e2e8f0; transition: all .2s;
}
.view-tab:hover,
.view-tab.active { color: #1e293b; border-color: #2563eb; background: #eff6ff; }

/* ══════════════════════════════════════════════════════════════════
   Finance Dashboard
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Tab navigation ─────────────────────────────────────────── */
.finance-tabs {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.finance-tab {
    padding: 0.625rem 1.125rem;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: #64748b;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-radius: 0.25rem 0.25rem 0 0;
}
.finance-tab:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.finance-tab.active {
    border-bottom-color: #2563eb;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
}
.finance-tab-content {
    display: none;
}
.finance-tab-content.active {
    display: block;
}

/* ── 2. Stats row ──────────────────────────────────────────────── */
.finance-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.finance-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
.finance-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}
.finance-stat-card .finance-stat-label {
    font-size: 0.78rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    display: block;
}
.finance-stat-card .finance-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 0.375rem;
}
.finance-stat-card .finance-stat-sub {
    font-size: 0.8rem;
    color: #94a3b8;
}
.trend-up {
    color: #22c55e;
    font-size: 0.82rem;
    font-weight: 600;
}
.trend-up::before {
    content: '▲ ';
}
.trend-down {
    color: #ef4444;
    font-size: 0.82rem;
    font-weight: 600;
}
.trend-down::before {
    content: '▼ ';
}
.finance-yearly-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.finance-yearly-summary-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 100px;
}
.finance-yearly-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.finance-yearly-item .finance-yearly-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.finance-yearly-item .finance-yearly-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
}
.finance-yearly-item .finance-yearly-value.positive {
    color: #22c55e;
}
.finance-yearly-item .finance-yearly-value.negative {
    color: #ef4444;
}

/* ── 3. Charts ─────────────────────────────────────────────────── */
.finance-chart-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}
.finance-chart-container {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.finance-chart-container.chart-wide {
    flex: 0 0 60%;
    min-width: 0;
}
.finance-chart-container.chart-narrow {
    flex: 0 0 calc(40% - 1rem);
    min-width: 0;
}
.finance-chart-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.finance-bar-chart {
    width: 100%;
    aspect-ratio: 16/7;
    display: block;
    overflow: visible;
}
.finance-pie-chart {
    display: block;
    max-width: 220px;
    margin: 0 auto;
}
.finance-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.875rem;
}
.finance-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #64748b;
}
.finance-chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.finance-chart-bar-income {
    fill: #22c55e;
}
.finance-chart-bar-expense {
    fill: #ef4444;
}
.finance-chart-bar-profit {
    fill: #2563eb;
}
.finance-chart-axis text {
    font-size: 10px;
    fill: #94a3b8;
}
.finance-chart-axis line,
.finance-chart-axis path {
    stroke: #e2e8f0;
}
.finance-chart-grid line {
    stroke: #f1f5f9;
    stroke-dasharray: 3,3;
}
.finance-chart-tooltip {
    position: absolute;
    background: #1e293b;
    color: #fff;
    font-size: 0.78rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    pointer-events: none;
    white-space: nowrap;
    z-index: 50;
    display: none;
}
.finance-chart-tooltip.is-visible {
    display: block;
}

/* ── 4. Modal ──────────────────────────────────────────────────── */
.finance-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.finance-modal.is-visible {
    display: flex;
}
.finance-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
}
.finance-modal-content {
    position: relative;
    background: #fff;
    border-radius: 0.625rem;
    max-width: 640px;
    width: calc(100% - 2rem);
    padding: 1.5rem;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    z-index: 1;
}
.finance-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.875rem;
    margin-bottom: 1.25rem;
}
.finance-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.finance-modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: #94a3b8;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}
.finance-modal-close:hover {
    color: #1e293b;
    background: #f1f5f9;
}
.finance-form-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.finance-form-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}
.finance-form-group.full-width {
    flex: 0 0 100%;
}
.finance-form-group label {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 0.35rem;
}
.finance-form-group input,
.finance-form-group select,
.finance-form-group textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.finance-form-group input:focus,
.finance-form-group select:focus,
.finance-form-group textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.finance-form-group textarea {
    resize: vertical;
    min-height: 72px;
}
.finance-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
    margin-top: 1.25rem;
}
.finance-vat-toggle {
    display: flex;
    flex-direction: row;
    gap: 0;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    overflow: hidden;
    width: fit-content;
    margin-bottom: 0.75rem;
}
.finance-vat-toggle input[type="radio"] {
    display: none;
}
.finance-vat-toggle label {
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    cursor: pointer;
    color: #64748b;
    background: #f8fafc;
    border: none;
    transition: all 0.2s ease;
    margin: 0;
}
.finance-vat-toggle input[type="radio"]:checked + label {
    background: #2563eb;
    color: #fff;
    font-weight: 600;
}
.finance-vat-result {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.35rem;
    min-height: 1.2em;
}
.finance-vat-result strong {
    color: #1e293b;
}

/* ── 4b. Currency section ──────────────────────────────────────── */
.finance-currency-section {
    background: #f0f9ff;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #bae6fd;
    margin-top: 0.5rem;
}
.finance-currency-settled {
    font-size: 0.75rem;
    color: #16a34a;
}
.finance-currency-pending {
    font-size: 0.75rem;
    color: #d97706;
    font-style: italic;
}
.finance-currency-pending-banner {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #92400e;
}

/* ── 5. Category tree ──────────────────────────────────────────── */
.finance-category-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.finance-category-tree ul {
    list-style: none;
    padding-left: 1.5rem;
    margin: 0;
    border-left: 2px solid #f1f5f9;
    margin-left: 0.5rem;
}
.finance-category-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-radius: 0.375rem;
    gap: 0.5rem;
    transition: background 0.15s ease;
    cursor: default;
}
.finance-category-item:hover {
    background: #f8fafc;
}
.finance-category-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}
.finance-category-name {
    flex: 1;
    font-size: 0.875rem;
    color: #1e293b;
}
.finance-category-count {
    font-size: 0.75rem;
    color: #94a3b8;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}
.finance-category-system {
    font-size: 0.7rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.finance-category-system::before {
    content: '🔒';
    font-size: 0.65rem;
}
.finance-category-actions {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.finance-category-item:hover .finance-category-actions {
    opacity: 1;
}
.finance-category-actions button {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    background: #fff;
    cursor: pointer;
    color: #64748b;
    transition: all 0.15s ease;
}
.finance-category-actions button:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}
.finance-category-actions button.btn-danger:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #ef4444;
}

/* ── 6. Source & status badges ─────────────────────────────────── */
.finance-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.finance-badge-manual {
    background: #f1f5f9;
    color: #64748b;
}
.finance-badge-webshop {
    background: #dcfce7;
    color: #16a34a;
}
.finance-badge-nav {
    background: #dbeafe;
    color: #2563eb;
}
.finance-badge-recurring {
    background: #f3e8ff;
    color: #9333ea;
}
.finance-badge-import {
    background: #fef3c7;
    color: #d97706;
}
.finance-badge-paid {
    background: #dcfce7;
    color: #16a34a;
}
.finance-badge-pending {
    background: #fef3c7;
    color: #d97706;
}
.finance-badge-overdue {
    background: #fee2e2;
    color: #dc2626;
}
.finance-badge-cancelled {
    background: #f1f5f9;
    color: #94a3b8;
    text-decoration: line-through;
}
.finance-badge-income {
    background: #dcfce7;
    color: #16a34a;
}
.finance-badge-expense {
    background: #fee2e2;
    color: #dc2626;
}

/* ── 7. Recurring list ─────────────────────────────────────────── */
.finance-recurring-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.625rem;
    transition: all 0.2s ease;
}
.finance-recurring-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border-color: #cbd5e1;
}
.finance-recurring-info {
    flex: 1;
    min-width: 0;
}
.finance-recurring-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.finance-recurring-meta {
    font-size: 0.78rem;
    color: #94a3b8;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.finance-recurring-amount {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}
.finance-recurring-amount.expense {
    color: #ef4444;
}
.finance-recurring-amount.income {
    color: #22c55e;
}
/* CSS-only toggle switch */
.finance-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.finance-toggle input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.finance-toggle-slider {
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
}
.finance-toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.finance-toggle input[type="checkbox"]:checked + .finance-toggle-slider {
    background: #2563eb;
}
.finance-toggle input[type="checkbox"]:checked + .finance-toggle-slider::after {
    transform: translateX(18px);
}
.finance-toggle input[type="checkbox"]:focus-visible + .finance-toggle-slider {
    box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
}

/* ── 8. NAV sync section ───────────────────────────────────────── */
.finance-nav-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.finance-nav-column-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f1f5f9;
}
.finance-nav-warning {
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: #854d0e;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.finance-nav-warning::before {
    content: '⚠';
    flex-shrink: 0;
}
.finance-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.finance-sync-btn:hover {
    background: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.finance-sync-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}
.finance-sync-status {
    font-size: 0.76rem;
    color: #94a3b8;
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.finance-sync-status.syncing {
    color: #2563eb;
}
.finance-sync-status.success {
    color: #22c55e;
}
.finance-sync-status.error {
    color: #ef4444;
}

/* ── 9. Receipt icon ───────────────────────────────────────────── */
.finance-receipt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    font-size: 0.9rem;
    padding: 0.15rem 0.3rem;
    border-radius: 0.25rem;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
}
.finance-receipt-icon:hover {
    color: #2563eb;
    background: #eff6ff;
}
.finance-receipt-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.15s ease;
}
.finance-receipt-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* ── 11. Table overrides for finance ───────────────────────────── */
.finance-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.5rem;
}
.finance-table-wrap .admin-table {
    table-layout: fixed;
    min-width: 700px;
}
.finance-table-wrap .admin-table .col-date    { width: 110px; }
.finance-table-wrap .admin-table .col-type    { width: 80px; }
.finance-table-wrap .admin-table .col-amount  { width: 120px; text-align: right; }
.finance-table-wrap .admin-table .col-cat     { width: 130px; }
.finance-table-wrap .admin-table .col-source  { width: 95px; }
.finance-table-wrap .admin-table .col-status  { width: 90px; }
.finance-table-wrap .admin-table .col-note    { /* remaining */ }
.finance-table-wrap .admin-table .col-actions { width: 80px; text-align: center; }
.finance-amount-income {
    color: #16a34a;
    font-weight: 600;
}
.finance-amount-expense {
    color: #dc2626;
    font-weight: 600;
}

/* ── 12. Top categories list ───────────────────────────────────── */
.finance-top-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.finance-top-category {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}
.finance-top-category:hover {
    background: #f1f5f9;
}
.finance-top-category-name {
    flex: 1;
    font-size: 0.85rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.finance-top-category-amount {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}
.finance-top-category-bar-wrap {
    width: 80px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.finance-top-category-bar {
    height: 100%;
    border-radius: 3px;
    background: #2563eb;
    transition: width 0.4s ease;
}
.finance-top-category-bar.income-bar {
    background: #22c55e;
}
.finance-top-category-bar.expense-bar {
    background: #ef4444;
}

/* ── Additional utility classes ────────────────────────────────── */
.finance-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.finance-section-header h2,
.finance-section-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.finance-filters-row {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}
.finance-filters-row label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}
.finance-filters-row select,
.finance-filters-row input[type="text"],
.finance-filters-row input[type="date"] {
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.82rem;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.2s ease;
}
.finance-filters-row select:focus,
.finance-filters-row input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.finance-date-range {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #94a3b8;
}
.finance-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
    font-size: 0.9rem;
}
.finance-empty-state .finance-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}
.finance-action-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.finance-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
}
.finance-btn-primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.finance-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37,99,235,0.3);
    color: #fff;
}
.finance-btn-secondary {
    background: #fff;
    color: #64748b;
    border-color: #e2e8f0;
}
.finance-btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}
.finance-btn-danger {
    background: #fff;
    color: #ef4444;
    border-color: #fca5a5;
}
.finance-btn-danger:hover {
    background: #fef2f2;
    border-color: #ef4444;
}
.finance-btn-sm {
    padding: 0.3rem 0.625rem;
    font-size: 0.78rem;
}
.finance-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── 10. Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .finance-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .finance-chart-row {
        flex-direction: column;
    }
    .finance-chart-container.chart-wide,
    .finance-chart-container.chart-narrow {
        flex: 0 0 100%;
        width: 100%;
    }
    .finance-form-row {
        flex-direction: column;
    }
    .finance-form-group {
        min-width: 0;
        flex: 0 0 100%;
    }
    .finance-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .finance-nav-section {
        grid-template-columns: 1fr;
    }
    .finance-yearly-summary {
        gap: 1rem;
    }
    .finance-recurring-card {
        flex-wrap: wrap;
    }
    .finance-bank-balance-row {
        flex-direction: column;
    }
    .finance-sparkline-container {
        max-width: 100%;
    }
    .finance-supplier-bar-name {
        flex: 0 0 100px;
    }
    .finance-supplier-bar-val {
        flex: 0 0 90px;
        font-size: 0.75rem;
    }
}
@media (max-width: 480px) {
    .finance-stats-row {
        grid-template-columns: 1fr;
    }
    .finance-modal-content {
        padding: 1rem;
    }
    .finance-stat-card .finance-stat-value {
        font-size: 1.3rem;
    }
    .finance-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .finance-filters-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Finance Pro: Bank Balance ──────────────────────────────────── */
.finance-bank-balance-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
}
.finance-balance-card {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border: 2px solid #e2e8f0;
    min-width: 200px;
}
.finance-balance-card.balance-positive { border-color: #22c55e; background: #f0fdf4; }
.finance-balance-card.balance-negative { border-color: #ef4444; background: #fef2f2; }
.finance-balance-label { font-size: 0.8rem; color: #64748b; font-weight: 500; margin-bottom: 0.25rem; }
.finance-balance-value { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
.balance-positive .finance-balance-value { color: #16a34a; }
.balance-negative .finance-balance-value { color: #dc2626; }
.finance-balance-sub { font-size: 0.78rem; color: #94a3b8; margin-top: 0.25rem; }
.finance-balance-details { display: flex; flex-direction: column; gap: 0.35rem; }
.finance-balance-detail-item { display: flex; gap: 0.5rem; font-size: 0.85rem; }
.finance-balance-detail-label { color: #64748b; }
.finance-balance-detail-val { font-weight: 600; }
.income-color { color: #16a34a; }
.expense-color { color: #dc2626; }
.finance-sparkline-container { flex: 1; min-width: 150px; max-width: 320px; }
.finance-sparkline-svg { width: 100%; height: auto; }

/* ── Finance Pro: Forecast ─────────────────────────────────────── */
.finance-forecast-chart { margin-bottom: 1rem; }
.finance-forecast-svg { width: 100%; height: auto; max-height: 240px; }
.finance-forecast-table { margin-top: 0.5rem; }
.finance-row-negative { background: #fef2f2; }
.finance-warning {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #92400e;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* ── Finance Pro: Supplier Chart ───────────────────────────────── */
.finance-supplier-chart { margin-bottom: 1rem; }
.finance-supplier-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.finance-supplier-bar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.finance-supplier-bar-name {
    flex: 0 0 160px;
    font-size: 0.82rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.finance-supplier-bar-wrap {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}
.finance-supplier-bar-fill {
    height: 100%;
    background: #ef4444;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.finance-supplier-bar-val {
    flex: 0 0 120px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
}

/* ── Finance Pro: Tax Helper ───────────────────────────────────── */
.finance-tax-kata-row {
    margin-bottom: 1rem;
}
.finance-tax-kata-label { font-size: 0.82rem; color: #64748b; margin-bottom: 0.25rem; }
.finance-tax-kata-nums { font-size: 0.9rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem; }
.finance-progress-bar {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.finance-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}
.progress-ok { background: #22c55e; }
.progress-warning { background: #f59e0b; }
.progress-danger { background: #ef4444; }
.finance-tax-monthly-chart { margin-bottom: 1rem; }
.finance-tax-monthly-svg { width: 100%; height: auto; max-height: 160px; }
.finance-subsection-title { font-size: 0.88rem; font-weight: 600; color: #1e293b; margin: 1rem 0 0.5rem; }

/* ── Finance Modal SM ──────────────────────────────────────────── */
.finance-modal-sm { max-width: 400px; }
.finance-help-text { display: block; font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; }
.finance-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.88rem;
    color: #1e293b;
    background: #fff;
}
.finance-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.finance-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

/* ── Finance Calendar ──────────────────────────────────────────── */
.finance-calendar-controls {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem;
}
.finance-calendar-nav { display: flex; align-items: center; gap: 0.5rem; }
.finance-calendar-title { font-weight: 600; font-size: 1.1rem; min-width: 200px; text-align: center; }
.finance-calendar-views { display: flex; gap: 0.25rem; align-items: center; }
.finance-cal-view-btn {
    padding: 0.35rem 0.75rem; border: 1px solid #e2e8f0; background: #fff;
    border-radius: 0.375rem; cursor: pointer; font-size: 0.85rem;
    transition: all 0.15s ease;
}
.finance-cal-view-btn:hover { background: #f1f5f9; }
.finance-cal-view-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.finance-cal-multi-select {
    padding: 0.35rem 0.5rem; border: 1px solid #e2e8f0; border-radius: 0.375rem;
    font-size: 0.85rem; cursor: pointer;
}
.finance-cal-multi-select.active { border-color: #2563eb; }

/* Month grid */
.finance-cal-month-header, .finance-cal-week-header {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
    background: #f8fafc; border-bottom: 2px solid #e2e8f0;
}
.finance-cal-week-day-name {
    padding: 0.5rem; text-align: center; font-weight: 600; font-size: 0.8rem;
    color: #64748b; text-transform: uppercase;
}
.finance-cal-month-grid, .finance-cal-week-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
    background: #e2e8f0;
}

.finance-cal-cell {
    background: #fff; min-height: 80px; padding: 0.4rem; cursor: pointer;
    transition: background 0.15s ease; position: relative;
}
.finance-cal-cell:hover { background: #f8fafc; }
.finance-cal-cell.is-today { background: #eff6ff; box-shadow: inset 0 0 0 2px #2563eb; }
.finance-cal-cell.is-outside { background: #f8fafc; min-height: 40px; cursor: default; }
.finance-cal-cell.has-data { border-left: 3px solid #2563eb; }
.finance-cal-cell-date { font-weight: 600; font-size: 0.85rem; color: #334155; margin-bottom: 0.25rem; }
.finance-cal-cell-income { font-size: 0.75rem; color: #16a34a; font-weight: 500; }
.finance-cal-cell-expense { font-size: 0.75rem; color: #dc2626; font-weight: 500; }
.finance-cal-cell-count { font-size: 0.7rem; color: #94a3b8; margin-top: 0.15rem; }

/* Multi-month mini calendars */
.finance-cal-multi-view {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.finance-cal-mini-month {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem;
    padding: 0.75rem; overflow: hidden;
}
.finance-cal-mini-title { font-weight: 600; font-size: 0.9rem; text-align: center; margin-bottom: 0.25rem; }
.finance-cal-mini-summary { text-align: center; font-size: 0.75rem; margin-bottom: 0.5rem; }
.finance-cal-mini-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-size: 0.7rem;
}
.finance-cal-mini-header { text-align: center; font-weight: 600; color: #64748b; padding: 2px; }
.finance-cal-mini-cell {
    text-align: center; padding: 3px 1px; cursor: pointer; border-radius: 2px;
    transition: background 0.1s;
}
.finance-cal-mini-cell:hover { background: #f1f5f9; }
.finance-cal-mini-cell.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px #2563eb; }
.finance-cal-mini-cell.is-outside { color: #d1d5db; }
.finance-cal-mini-cell.has-income { background: #dcfce7; color: #166534; }
.finance-cal-mini-cell.has-expense { background: #fee2e2; color: #991b1b; }
.finance-cal-mini-cell.has-both { background: linear-gradient(135deg, #dcfce7 50%, #fee2e2 50%); }

/* Day view */
.finance-cal-day-view { max-width: 800px; }
.finance-cal-day-summary {
    display: flex; gap: 1.5rem; font-size: 1.1rem; font-weight: 600;
    padding: 1rem; background: #f8fafc; border-radius: 0.5rem; margin-bottom: 1rem;
}
.finance-cal-income { color: #16a34a; }
.finance-cal-expense { color: #dc2626; }
.finance-cal-balance { color: #334155; }
.finance-cal-empty { color: #94a3b8; font-style: italic; }

.finance-cal-day-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}
.finance-cal-day-item:hover { background: #f8fafc; }
.finance-cal-item-income .finance-cal-item-amount { color: #16a34a; font-weight: 600; }
.finance-cal-item-expense .finance-cal-item-amount { color: #dc2626; font-weight: 600; }
.finance-cal-item-desc { flex: 1; }
.finance-cal-item-cat { font-size: 0.8rem; color: #64748b; }
.finance-cal-item-amount { min-width: 100px; text-align: right; }

/* Recurring projected items */
.finance-cal-item-projected { opacity: 0.7; border-left: 3px dashed #94a3b8; padding-left: 4px; }
.finance-cal-cell-projected { background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(148,163,184,0.08) 3px, rgba(148,163,184,0.08) 6px); }
.finance-cal-item-icon { margin-right: 0.25rem; }

/* Day totals at bottom of each calendar cell */
.finance-cal-cell { padding-bottom: 22px; }
.finance-cal-cell-totals {
    position: absolute; bottom: 2px; left: 2px; right: 2px;
    display: flex; gap: 4px; font-size: 0.65rem; justify-content: space-between;
    border-top: 1px solid #f1f5f9; padding-top: 1px;
}
.cal-total-expense { color: #dc2626; }
.cal-total-income { color: #16a34a; }
.cal-total-balance { color: #2563eb; font-weight: 600; }

/* Month summary row */
.finance-cal-month-summary {
    display: flex; gap: 1.5rem; justify-content: center; padding: 0.75rem 1rem;
    margin-top: 0.5rem; background: #f8fafc; border-radius: 0.5rem;
    font-size: 0.9rem; font-weight: 500;
}

/* Full-size multi-month grid (2-4 months) */
.finance-cal-multi-full-view {
    display: grid; gap: 1.5rem;
}
.finance-cal-multi-full-view[data-cols="1"] { grid-template-columns: 1fr; }
.finance-cal-multi-full-view[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.finance-cal-full-month {
    border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.75rem;
}
.finance-cal-full-month-title {
    font-weight: 600; font-size: 1.05rem; text-align: center; margin-bottom: 0.5rem; color: #1e293b;
}

/* Detail panel (on cell click) */
.finance-calendar-detail {
    display: none; margin-top: 1rem; padding: 1rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem;
}
.finance-calendar-detail.is-visible { display: block; }
.finance-cal-detail-summary { display: flex; gap: 1.5rem; margin-bottom: 0.75rem; font-weight: 500; flex-wrap: wrap; }

/* Detail item row */
.finance-cal-detail-items { display: flex; flex-direction: column; gap: 0.5rem; }
.finance-cal-detail-item {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0.75rem;
    border: 1px solid #f1f5f9; border-radius: 0.375rem; background: #fafbfc;
}
.finance-cal-detail-item.finance-cal-item-projected { background: #f8fafc; border-style: dashed; }
.finance-cal-detail-icon { font-size: 1.1rem; min-width: 1.5rem; text-align: center; }
.finance-cal-detail-item-info { flex: 1; min-width: 0; }
.finance-cal-detail-item-desc { font-weight: 500; margin-bottom: 0.15rem; }
.finance-cal-detail-item-meta { font-size: 0.8rem; color: #64748b; }
.finance-cal-detail-item-amount { font-weight: 600; min-width: 100px; text-align: right; white-space: nowrap; }
.finance-cal-detail-item-actions { min-width: 80px; text-align: right; }

/* Status badges */
.finance-cal-badge-projected {
    display: inline-block; padding: 1px 6px; font-size: 0.7rem; border-radius: 3px;
    background: #e2e8f0; color: #475569;
}
.finance-cal-badge-paid {
    display: inline-block; padding: 1px 6px; font-size: 0.7rem; border-radius: 3px;
    background: #dcfce7; color: #166534;
}
.finance-cal-badge-pending {
    display: inline-block; padding: 1px 6px; font-size: 0.7rem; border-radius: 3px;
    background: #fef9c3; color: #854d0e;
}

/* Recurring history */
.finance-cal-recurring-history {
    margin: 0.25rem 0 0.5rem 2.25rem; padding: 0.5rem 0.75rem;
    background: #f8fafc; border-left: 3px solid #cbd5e1; border-radius: 0 0.375rem 0.375rem 0;
    font-size: 0.85rem;
}
.finance-cal-rh-section { margin-bottom: 0.5rem; }
.finance-cal-rh-section:last-child { margin-bottom: 0; }
.finance-cal-rh-list { list-style: none; padding: 0; margin: 0.25rem 0 0 0; }
.finance-cal-rh-list li { padding: 0.2rem 0; color: #475569; }

/* Action form inline */
.finance-cal-action-form { display: inline; }
.finance-btn-success { background: #16a34a; color: #fff; border-color: #16a34a; }
.finance-btn-success:hover { background: #15803d; }

/* Responsive */
@media (max-width: 768px) {
    .finance-calendar-controls { flex-direction: column; align-items: stretch; }
    .finance-calendar-nav { justify-content: center; }
    .finance-calendar-views { justify-content: center; flex-wrap: wrap; }
    .finance-cal-cell { min-height: 60px; }
    .finance-cal-multi-view { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .finance-cal-multi-full-view { grid-template-columns: 1fr; }
    .finance-cal-detail-item { flex-wrap: wrap; }
    .finance-cal-month-summary { flex-direction: column; align-items: center; gap: 0.5rem; }
}

/* ── Calendar Cell Items — Pro Layout ──────────────────────────── */
.finance-cal-cell-item,
.finance-cal-cell-group {
    display: flex; align-items: center; gap: 3px;
    font-size: 0.7rem; line-height: 1.3; padding: 1px 2px;
    border-radius: 3px; cursor: default; overflow: hidden;
    white-space: nowrap; max-width: 100%;
}
.finance-cal-cell-item:hover,
.finance-cal-cell-group:hover { background: rgba(0,0,0,0.04); }
.finance-cal-cell-group { cursor: pointer; }
.finance-cal-cell-group.is-expanded { background: rgba(0,0,0,0.06); }

.cal-item-dot {
    width: 8px; height: 8px; min-width: 8px;
    border-radius: 50%; display: inline-block;
}
.cal-item-text {
    flex: 1; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: #334155;
}
.cal-item-amt {
    font-weight: 600; white-space: nowrap; margin-left: auto; padding-left: 4px;
}
.finance-cal-cell-item.is-income .cal-item-amt { color: #16a34a; }
.finance-cal-cell-item.is-expense .cal-item-amt { color: #dc2626; }
.finance-cal-cell-group.is-income .cal-item-amt { color: #16a34a; }
.finance-cal-cell-group.is-expense .cal-item-amt { color: #dc2626; }

.cal-item-count {
    font-size: 0.6rem; background: #e2e8f0; color: #475569;
    border-radius: 8px; padding: 0 4px; margin-left: 2px;
    font-weight: 600; min-width: 14px; text-align: center;
}

/* Projected/recurring items — subtle dashed left border instead of emoji */
.finance-cal-cell-item.is-projected,
.finance-cal-cell-group.is-projected {
    opacity: 0.65; border-left: 2px dashed #94a3b8; padding-left: 4px;
}
.finance-cal-cell-item.is-projected .cal-item-text,
.finance-cal-cell-group.is-projected .cal-item-text { font-style: italic; }

/* Group detail — hidden by default, shown on click */
.finance-cal-cell-group-detail {
    display: none; padding-left: 12px;
}
.finance-cal-cell-group-detail.is-expanded { display: block; }
.cal-group-detail-item {
    display: flex; align-items: center; gap: 3px;
    font-size: 0.65rem; line-height: 1.2; padding: 1px 2px;
    overflow: hidden; white-space: nowrap;
}
.cal-group-detail-item.is-projected { opacity: 0.6; font-style: italic; }

/* Day view status badges (text-based, no emoji) */
.cal-icon-projected {
    font-size: 0.6rem; background: #f1f5f9; color: #64748b;
    border: 1px dashed #94a3b8; border-radius: 3px; padding: 1px 5px;
}
.cal-icon-paid {
    font-size: 0.6rem; background: #dcfce7; color: #166534;
    border-radius: 3px; padding: 1px 5px;
}
.cal-icon-pending {
    font-size: 0.6rem; background: #fef3c7; color: #92400e;
    border-radius: 3px; padding: 1px 5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN MOBILE RESPONSIVE — shipping, sessions, finance, funnels, emails
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Shipping stats */
    .shipping-stats { gap: 0.5rem; }
    .shipping-stat-card { flex: 1 1 calc(50% - 0.5rem); padding: 0.75rem; }
    .shipping-stat-number { font-size: 1.3rem; }
    .shipping-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Session stats */
    .session-stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .session-stat-card { padding: 0.75rem; }
    .session-stat-number { font-size: 1.3rem; }
    .session-chart-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Finance */
    .finance-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .finance-card { padding: 0.75rem; }
    .finance-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .finance-action-btns { gap: 0.3rem; }
    .finance-btn { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
    .finance-cal-multi-full-view[data-cols="2"] { grid-template-columns: 1fr; }

    /* Funnels */
    .funnel-filters { flex-direction: column; gap: 0.75rem; }

    /* Email */
    .email-list-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Pagination */
    .pagination-link, .pagination-current { padding: 5px 9px; font-size: 0.78rem; }

    /* Marketing AI */
    .marketing-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}
@media (max-width: 480px) {
    .shipping-stats { flex-direction: column; }
    .shipping-stat-card { flex: 1 1 100%; }
    .session-stats { grid-template-columns: 1fr; }
    .finance-stats-row { grid-template-columns: 1fr; }
    .marketing-stats { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   USER DETAIL PANEL + NOTES + LTV
   ═══════════════════════════════════════════════════════════════════ */
.user-detail-link { color: #3b82f6; text-decoration: none; }
.user-detail-link:hover { text-decoration: underline; }

.user-detail-panel {
    margin-top: 24px;
    background: #fff;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    padding: 24px;
}
.user-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}
.user-detail-header h2 { margin: 0; }

.user-detail-info { margin-bottom: 16px; }
.user-detail-info p { margin: 4px 0; }

.user-detail-ltv { margin-bottom: 24px; }
.user-detail-ltv h3 { margin-bottom: 12px; }
.ltv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.ltv-stat {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.ltv-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
}
.ltv-label {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 4px;
}
.ltv-dates { font-size: 0.85rem; color: #6b7280; }

.user-detail-notes h3 { margin-bottom: 12px; }
.note-add-form { margin-bottom: 16px; }
.note-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.notes-list { display: flex; flex-direction: column; gap: 8px; }
.note-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
}
.note-card.note-pinned {
    background: #fffbeb;
    border-color: #f59e0b;
}
.note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.8rem;
}
.note-author { font-weight: 600; color: #374151; }
.note-date { color: #9ca3af; }
.note-body {
    color: #374151;
    line-height: 1.5;
    margin-bottom: 6px;
}
.note-actions { display: flex; gap: 8px; }
.u-inline { display: inline; }

/* ═══════════════════════════════════════════════════════════════════
   WISHLIST
   ═══════════════════════════════════════════════════════════════════ */
.wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #9ca3af;
    transition: all 0.2s;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.wishlist-btn:hover { background: #fff; color: #ef4444; transform: scale(1.1); }
.wishlist-btn.wishlisted { color: #ef4444; }
.wishlist-btn.wishlisted .wishlist-icon { color: #ef4444; }
.wishlist-btn.wishlist-loading { opacity: 0.5; pointer-events: none; }

.wishlist-btn-large {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 1rem;
    gap: 6px;
}
.wishlist-btn-large .wishlist-text { font-size: 0.9rem; }

.product-card { position: relative; }

/* Profile wishlist */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.wishlist-item {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: opacity 0.3s;
}
.wishlist-item-link {
    text-decoration: none;
    color: inherit;
}
.wishlist-item-image {
    aspect-ratio: 1;
    background: #f3f4f6;
    overflow: hidden;
}
.wishlist-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wishlist-item-info {
    padding: 12px;
}
.wishlist-item-name {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: #1a1a2e;
}
.wishlist-item-price {
    font-weight: 600;
    color: #3b82f6;
}
.wishlist-remove-btn {
    top: 8px;
    right: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   USER TAGS / SEGMENTATION
   ═══════════════════════════════════════════════════════════════════ */
.tags-cell { white-space: nowrap; }
.user-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    margin: 1px 2px;
}
.user-tag small { opacity: 0.8; font-weight: 400; }
.user-tag-uj { background: #3b82f6; }
.user-tag-vasarlo { background: #10b981; }
.user-tag-visszatero { background: #8b5cf6; }
.user-tag-vip { background: #f59e0b; }
.user-tag-inaktiv { background: #ef4444; }
.user-tag-influencer { background: #ec4899; }
.user-tag-problemas { background: #dc2626; }
.user-tag-b2b { background: #0891b2; }
.tag-remove-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 2px;
    line-height: 1;
}
.tag-remove-btn:hover { color: #fff; }
.tags-current {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}
.tag-assign-form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.user-detail-tags {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════
   USER DETAIL PAGE (admin-user-detail.php)
   ═══════════════════════════════════════════════════════════════════ */
.user-detail-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px;
    margin-top: 16px;
}
@media (max-width: 900px) {
    .user-detail-grid { grid-template-columns: 1fr; }
}
.user-detail-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.user-detail-card h3 { margin: 0 0 12px; font-size: 1rem; }
.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.card-header-row h3 { margin-bottom: 0; }

/* Activity Feed Timeline */
.activity-feed { position: relative; }
.feed-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
}
.feed-item:last-child { border-bottom: none; }
.feed-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.feed-item-order .feed-icon { background: #dbeafe; }
.feed-item-coupon .feed-icon { background: #fef3c7; }
.feed-item-registration .feed-icon { background: #d1fae5; }
.feed-item-verification .feed-icon { background: #e0e7ff; }
.feed-item-contest .feed-icon { background: #fce7f3; }
.feed-item-review .feed-icon { background: #fef9c3; }
.feed-item-note .feed-icon { background: #f3f4f6; }
.feed-content { flex: 1; min-width: 0; }
.feed-title { font-weight: 600; font-size: 0.9rem; color: #1a1a2e; }
.feed-detail { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.feed-date { font-size: 0.75rem; color: #9ca3af; margin-top: 4px; }
.user-detail-tags h3 { margin-bottom: 12px; }

/* ── ADMIN REPORTS ──────────────────────────────────────────────────────────── */

.reports-period-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    align-items: center;
}
.reports-period-filters label {
    color: #888;
    font-size: 0.85rem;
    margin-right: 0.25rem;
}

/* KPI stat cards reuse .admin-stats-grid + .admin-stat-card */

/* Revenue bar chart */
.reports-chart-section {
    margin-bottom: 2rem;
}
.reports-chart-section h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #e0e0e0);
}
.reports-chart-scroll {
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.reports-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    min-width: max-content;
    padding: 0 0 0 4px;
}
.reports-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 36px;
}
.reports-bar-wrap {
    display: flex;
    align-items: flex-end;
    height: 120px;
    width: 28px;
}
.reports-bar {
    width: 100%;
    min-height: 2px;
    background: linear-gradient(180deg, var(--accent, #c4a35a), #d4b86a);
    border-radius: 3px 3px 0 0;
    transition: opacity 0.2s;
}
.reports-bar:hover {
    opacity: 0.8;
}
.reports-bar-label {
    font-size: 0.65rem;
    color: #888;
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: top center;
    margin-top: 4px;
    height: 28px;
    line-height: 1;
}
.reports-bar-value {
    font-size: 0.65rem;
    color: #aaa;
    white-space: nowrap;
    text-align: center;
}
.reports-chart-empty {
    color: #666;
    font-style: italic;
    padding: 1rem 0;
}

/* Reports tables */
.reports-table-section {
    margin-bottom: 2rem;
}
.reports-table-section h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #e0e0e0);
}

@media (max-width: 600px) {
    .reports-bar-chart { height: 120px; }
    .reports-bar-wrap { height: 80px; }
}

/* =============================================================================
   FAQ PAGE
   ============================================================================= */

.faq-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

.faq-hero {
    padding: 56px 0 40px;
    text-align: center;
    border-bottom: 1px solid #222;
    margin-bottom: 48px;
}

.faq-title {
    font-size: 2rem;
    font-weight: 700;
    color: #e0e0e0;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.faq-subtitle {
    font-size: 1rem;
    color: #888;
    margin: 0;
    line-height: 1.6;
}

.faq-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.faq-category {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-category-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c4a35a;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2a1a;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid #1e1e1e;
}

.faq-item:first-child {
    border-top: 1px solid #1e1e1e;
}

.faq-question {
    padding: 18px 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e0e0e0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 0.15s;
    user-select: none;
}

.faq-question:hover {
    color: #c4a35a;
}

.faq-question::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    color: #555;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.2s;
}

.faq-item[open] .faq-question {
    color: #c4a35a;
}

.faq-item[open] .faq-question::after {
    content: '\2212';
    color: #c4a35a;
}

.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; content: ''; }

.faq-answer {
    padding: 0 4px 20px;
    animation: faq-open 0.15s ease-out;
}

.faq-answer p {
    margin: 0;
    font-size: 0.875rem;
    color: #999;
    line-height: 1.7;
}

@keyframes faq-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.faq-cta {
    text-align: center;
    padding: 48px 24px;
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 8px;
    margin-top: 16px;
}

.faq-cta-text {
    font-size: 1rem;
    color: #aaa;
    margin: 0 0 20px;
}

@media (max-width: 600px) {
    .faq-title { font-size: 1.5rem; }
    .faq-hero { padding: 36px 0 28px; }
    .faq-content { gap: 36px; }
    .faq-question { font-size: 0.9rem; padding: 16px 4px; }
    .faq-answer p { font-size: 0.85rem; }
}