/* GlobalScan - Stili Login */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Nascondi scrollbar ma mantieni funzionalità */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.ricerche-content::-webkit-scrollbar,
.ricerche-tab-content::-webkit-scrollbar,
#page-ricerche-virali::-webkit-scrollbar,
.collezione-content::-webkit-scrollbar,
#page-collezione::-webkit-scrollbar,
.collezione-grid-container::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sfondo */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

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

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%);
}

/* Container Login */
.login-container {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px 50px;
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 420px;
    text-align: center;
    backdrop-filter: blur(10px);
    animation: slideUp 0.6s ease-out;
}

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

/* Brand */
.brand {
    margin-bottom: 25px;
}

.title {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
    margin-bottom: 5px;
}

.subtitle {
    font-size: 14px;
    color: #888;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Avatar */
.avatar-container {
    margin: 25px 0;
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #667eea;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    transition: transform 0.3s ease;
}

.avatar:hover {
    transform: scale(1.05);
}

/* Selezione Lingua */
.language-selector {
    margin-bottom: 25px;
    text-align: left;
}

.language-selector label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

.language-selector i {
    color: #667eea;
    margin-right: 5px;
}

.lang-select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Form */
.form {
    margin-top: 20px;
}

.input-group {
    position: relative;
    margin-bottom: 18px;
}

.input-group i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #667eea;
    font-size: 18px;
}

.input-group input {
    width: 100%;
    padding: 15px 15px 15px 48px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #fafafa;
}

.input-group input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-group input::placeholder {
    color: #aaa;
}

/* Messaggi */
.error-message {
    color: #e74c3c;
    font-size: 13px;
    margin-bottom: 15px;
    min-height: 20px;
    font-weight: 500;
}

.success-message {
    color: #27ae60;
    font-size: 13px;
    margin-bottom: 15px;
    min-height: 20px;
    font-weight: 500;
}

/* Bottoni */
.buttons {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.btn-primary,
.btn-secondary {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: #f5f5f5;
    color: #555;
    border: 2px solid #e0e0e0;
}

.btn-secondary:hover {
    background: #ebebeb;
    border-color: #667eea;
    color: #667eea;
}

/* Page Management */
.page {
    display: none;
    min-height: 100vh;
    width: 100%;
}

.page.active {
    display: flex;
    flex-direction: column;
}

/* Pagina Login centrata */
#page-login.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hidden {
    display: none !important;
}

/* ========== ADMIN PAGE ========== */
#page-admin {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    overflow-y: auto;
    padding-top: 70px;
    padding-bottom: 20px;
}

.admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(102, 126, 234, 0.5);
}

.admin-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    height: 70px;
}

.admin-title {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-title i {
    color: #667eea;
}

.admin-user {
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.admin-user i {
    font-size: 20px;
    color: #00ff88;
}

/* Admin Tabs */
.admin-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 0 30px;
    gap: 10px;
    position: sticky;
    top: 70px;
    z-index: 50;
}

.admin-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 15px 25px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.admin-tab:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.admin-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

/* Admin Content */
.admin-content {
    padding: 20px 30px;
    min-height: calc(100vh - 150px);
}

.admin-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

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

/* Editor Container */
.editor-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.editor-request {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.editor-request h3 {
    color: white;
    margin: 0 0 15px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-request h3 i {
    color: #667eea;
}

#admin-prompt {
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 14px;
    resize: vertical;
    min-height: 120px;
    margin-bottom: 15px;
}

#admin-prompt::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#admin-prompt:focus {
    outline: none;
    border-color: #667eea;
}

.btn-admin-submit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    padding: 15px 25px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    transition: all 0.3s ease;
}

.btn-admin-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}

/* Preview Section */
.editor-preview-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.editor-preview-section h3 {
    color: white;
    margin: 0 0 15px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-preview-section h3 i {
    color: #00ff88;
}

.admin-preview-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 20px;
    margin-bottom: 15px;
    border: 2px dashed rgba(102, 126, 234, 0.3);
}

.preview-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 60px 20px;
}

.preview-placeholder i {
    font-size: 48px;
    margin-bottom: 15px;
    color: rgba(102, 126, 234, 0.5);
}

.preview-placeholder p {
    font-size: 14px;
    line-height: 1.6;
}

/* Preview Actions */
.preview-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-approve, .btn-reject, .btn-modify {
    flex: 1;
    min-width: 120px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-approve {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
}

.btn-approve:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 136, 0.4);
}

.btn-reject {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: white;
}

.btn-reject:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 65, 108, 0.4);
}

.btn-modify {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-modify:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* Admin Chat Section */
.admin-chat-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.admin-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: white;
    font-weight: 600;
}

.admin-chat-header i {
    color: #667eea;
    margin-right: 8px;
}

.admin-chat-messages {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.admin-chat-messages .message {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
}

.admin-chat-input-area {
    display: flex;
    gap: 10px;
}

#admin-chat-input {
    flex: 1;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 14px;
}

#admin-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#admin-chat-input:focus {
    outline: none;
    border-color: #667eea;
}

.admin-chat-input-area button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.admin-chat-input-area button:hover {
    transform: scale(1.1);
}

/* Files Section */
.files-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 25px;
}

.files-toolbar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.btn-file-action {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-file-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.files-list {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    min-height: 200px;
    padding: 20px;
}

/* Database Section */
.database-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 25px;
}

.db-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.btn-db-action {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    padding: 15px 25px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-db-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}

.db-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, 0.5);
}

.stat-card i {
    font-size: 32px;
    color: #667eea;
    margin-bottom: 10px;
}

.stat-value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: white;
    margin-bottom: 5px;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Settings Section */
.settings-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 25px;
    max-width: 600px;
}

.setting-group {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.setting-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.setting-group h4 {
    color: white;
    font-size: 18px;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.setting-group h4 i {
    color: #667eea;
}

.setting-field {
    margin-bottom: 15px;
}

.setting-field label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 8px;
}

.setting-field input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 14px;
}

.setting-field input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.setting-field input:focus {
    outline: none;
    border-color: #667eea;
}

.btn-save-settings {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    border: none;
    border-radius: 10px;
    padding: 12px 25px;
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-save-settings:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 136, 0.4);
}

/* Responsive Admin */
@media (max-width: 768px) {
    .editor-container {
        grid-template-columns: 1fr;
    }
    
    .admin-tabs {
        flex-wrap: wrap;
        padding: 0 15px;
    }
    
    .admin-tab {
        padding: 12px 15px;
        font-size: 13px;
    }
    
    .admin-content {
        padding: 15px;
    }
    
    .preview-actions {
        flex-direction: column;
    }
    
    .db-actions {
        flex-direction: column;
    }
    
    .files-toolbar {
        flex-wrap: wrap;
    }
}

/* Preview Content Styles */
.admin-preview-box pre {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 8px;
    color: #00ff88;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.admin-preview-box .preview-html {
    background: white;
    padding: 20px;
    border-radius: 8px;
    color: #333;
}

.admin-preview-box .preview-text {
    color: white;
    line-height: 1.6;
}

.admin-preview-box .preview-error {
    color: #ff416c;
    padding: 15px;
    background: rgba(255, 65, 108, 0.1);
    border-radius: 8px;
    border-left: 3px solid #ff416c;
}

/* Loading State */
.admin-preview-box .loading {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 40px;
}

.admin-preview-box .loading i {
    font-size: 32px;
    color: #667eea;
    animation: spin 1s linear infinite;
}

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

/* Collapse/Expand for Preview */
.preview-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.preview-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Approve/Reject Animation */
.approving {
    animation: pulse-green 0.5s ease;
}

.rejecting {
    animation: pulse-red 0.5s ease;
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4); }
    50% { box-shadow: 0 0 20px 10px rgba(0, 255, 136, 0.2); }
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 65, 108, 0.4); }
    50% { box-shadow: 0 0 20px 10px rgba(255, 65, 108, 0.2); }
}

/* Sfondo Scan */
.scan-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.scan-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Header Scan */
.scan-header {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.logo-small {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
}

.logo-small i {
    font-size: 24px;
    color: #f5576c;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: white;
    cursor: pointer;
    transition: background 0.3s;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Bottone Scansiona */
.scan-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.btn-scan-main {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border: none;
    border-radius: 30px;
    padding: 40px 70px;
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.5);
    animation: pulse-scan 2s ease-in-out infinite;
}

@keyframes pulse-scan {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.btn-scan-main:hover {
    transform: scale(1.1);
}

.btn-scan-main i {
    font-size: 50px;
}

.btn-scan-main span {
    font-size: 28px;
    font-weight: 800;
}

/* Fotocamera Overlay */
.camera-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.camera-container {
    position: relative;
    width: 90%;
    max-width: 800px;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
}

.camera-container video {
    width: 100%;
    display: block;
}

.camera-timer {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6b35;
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 24px;
    font-weight: 700;
}

.btn-close-camera {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-close-camera:hover {
    background: #ff6b35;
}

/* Camera Controls - Pulsante Scatta */
.camera-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.btn-capture {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s ease;
}

.btn-capture:hover {
    transform: scale(1.1);
}

.capture-ring {
    width: 80px;
    height: 80px;
    border: 4px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.capture-ring i {
    font-size: 32px;
    color: white;
}

.btn-capture:active .capture-ring {
    background: rgba(255, 255, 255, 0.4);
}

.price-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.price-tag {
    position: absolute;
    background: rgba(255, 107, 53, 0.95);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Chat Assistente */
.assistant-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    padding: 15px 20px;
    display: flex;
    gap: 15px;
    z-index: 2000;
}

.chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 12px 15px;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.audio-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: white;
    cursor: pointer;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    max-height: 120px;
    margin-bottom: 10px;
}

.message {
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 14px;
    border-radius: 15px;
    margin-bottom: 8px;
    font-size: 14px;
    color: white;
}

.message.assistant {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
}

.message.user {
    background: rgba(255, 107, 53, 0.8);
    margin-left: auto;
}

.chat-input-area {
    display: flex;
    gap: 10px;
}

.chat-input-area input {
    flex: 1;
    padding: 12px 18px;
    border: none;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 14px;
    outline: none;
}

.chat-input-area button {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    color: white;
    cursor: pointer;
}

/* Avatar Assistente */
.assistant-avatar-container {
    flex-shrink: 0;
}

.assistant-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #ff6b35;
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.6);
}

.assistant-avatar img,
.assistant-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 768px) {
    .assistant-bar {
        flex-direction: column;
    }
    
    .assistant-avatar-container {
        display: flex;
        justify-content: center;
    }
    
    .assistant-avatar {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 480px) {
    .btn-scan-main {
        padding: 30px 50px;
    }
    
    .btn-scan-main span {
        font-size: 22px;
    }
    
    .login-container {
        padding: 30px 25px;
        margin: 20px;
    }
    
    .title {
        font-size: 32px;
    }
    
    .avatar {
        width: 100px;
        height: 100px;
    }
    
    .buttons {
        flex-direction: column;
    }
}

/* ========== PAGINA 3: DASHBOARD ========== */
#page-3 {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    overflow-y: auto;
    padding-top: 70px; /* spazio per header fisso */
    padding-bottom: 180px; /* spazio per chat bar fixed */
}

/* Header fisso */
.page-3-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(102, 126, 234, 0.5);
    height: 70px;
}

.page-3-header-fixed .icon-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-3-header-fixed .icon-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.page-3-title {
    color: white;
    font-size: 26px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Layout principale 2 colonne */
.page-3-layout {
    display: flex;
    min-height: calc(100vh - 250px);
    padding: 20px;
    gap: 20px;
}

/* Sinistra: immagine assistente */
.page-3-left {
    flex: 0 0 35%;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.page-3-assistant-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Destra: bottoni griglia 2x3 */
.page-3-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-3-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.page-3-btn {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
}

.page-3-btn:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

.page-3-btn i {
    font-size: 32px;
}

.page-3-btn span {
    font-size: 16px;
    font-weight: 600;
}

/* Chat assistente fixed bottom */
.page-3-assistant-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    background: rgba(26, 26, 46, 0.98);
    backdrop-filter: blur(15px);
    border-top: 2px solid rgba(102, 126, 234, 0.5);
    padding: 15px 30px;
    height: 160px;
}

.page-3-chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.page-3-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.page-3-chat-header i {
    color: #667eea;
}

.page-3-chat-messages {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.page-3-chat-messages .message {
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 5px;
    font-size: 13px;
}

.page-3-chat-messages .message.assistant {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.page-3-chat-input-area {
    display: flex;
    gap: 10px;
}

.page-3-chat-input-area input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 14px;
}

.page-3-chat-input-area input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.page-3-chat-input-area button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-3-chat-input-area button:hover {
    transform: scale(1.1);
}

/* Avatar nella chat bar */
.page-3-avatar-container {
    flex: 0 0 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-3-assistant-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #667eea;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-3-assistant-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.8);
}

.page-3-assistant-avatar img,
.page-3-assistant-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 768px) {
    .page-3-layout {
        flex-direction: column;
    }
    
    .page-3-left {
        flex: 0 0 200px;
    }
    
    .page-3-assistant-img {
        height: 200px;
        width: auto;
    }
    
    .page-3-buttons-grid {
        grid-template-columns: 1fr;
    }
    
    .page-3-assistant-bar {
        height: 140px;
        padding: 10px 15px;
    }
    
    .page-3-avatar-container {
        flex: 0 0 100px;
    }
    
    .page-3-assistant-avatar {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 480px) {
    .page-3-header-fixed .header-user span {
        display: none;
    }
    
    .page-3-title {
        font-size: 20px;
    }
    
    .page-3-btn {
        padding: 20px 15px;
    }
    
    .page-3-btn i {
        font-size: 24px;
    }
    
    .page-3-btn span {
        font-size: 14px;
    }
}

/* ========== MODALE LE MIE SCANSIONI ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(102, 126, 234, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

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

.modal-header h2 {
    color: white;
    font-size: 24px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.modal-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    transition: all 0.3s ease;
}

.modal-close:hover {
    color: #ff4444;
    transform: scale(1.1);
}

.modal-body {
    padding: 20px 30px;
    overflow-y: auto;
    flex: 1;
}

/* Griglia oggetti salvati */
.saved-objects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.saved-object-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.saved-object-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border-color: rgba(102, 126, 234, 0.5);
}

.saved-object-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

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

.saved-object-info {
    padding: 15px;
}

.saved-object-info h4 {
    color: white;
    font-size: 18px;
    margin: 0 0 8px 0;
    text-transform: capitalize;
}

.saved-object-price {
    color: #00ff88;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.saved-object-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.saved-object-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin: 0;
}

/* Azioni oggetto */
.saved-object-actions {
    display: flex;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.action-btn.delete {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
}

.action-btn.share {
    background: linear-gradient(135deg, #2196f3 0%, #03a9f4 100%);
}

.action-btn.sell {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
}

.action-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Messaggio vuoto */
.empty-message {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    font-style: italic;
    grid-column: 1 / -1;
}

/* Responsive modale */
@media (max-width: 768px) {
    .saved-objects-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        max-height: 90vh;
    }
    
    .modal-header h2 {
        font-size: 20px;
    }
    
    .saved-object-actions {
        flex-direction: column;
        gap: 8px;
    }
}

/* ========== MARKETPLACE PAGE ========== */
.marketplace-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.marketplace-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

.marketplace-title {
    color: white;
    font-size: 24px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.marketplace-title i {
    color: #00ff88;
}

.marketplace-user {
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.marketplace-user i {
    font-size: 24px;
    color: #667eea;
}

/* Tabs Navigation */
.marketplace-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 0 30px;
    gap: 10px;
}

.marketplace-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 15px 25px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.marketplace-tab:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.marketplace-tab.active {
    color: #00ff88;
    border-bottom-color: #00ff88;
}

.marketplace-tab .badge {
    background: #ff4444;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Content Area */
.marketplace-content {
    padding-top: 130px;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
}

.marketplace-tab-content {
    display: none;
    padding: 20px 30px;
    animation: fadeIn 0.3s ease;
}

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

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

/* Ad Banners */
.ad-banner {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(102, 126, 234, 0.3);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.ad-placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ad-placeholder i {
    font-size: 20px;
}

/* Filters */
.marketplace-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
}

.search-box input {
    width: 100%;
    padding: 12px 15px 12px 45px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 15px;
}

.search-box input:focus {
    outline: none;
    border-color: #667eea;
}

/* CAP Filter Box */
.cap-filter-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 140px;
}

.cap-filter-box i {
    position: absolute;
    left: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.cap-filter-box input {
    width: 100%;
    padding: 12px 35px 12px 35px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
}

.cap-filter-box input:focus {
    outline: none;
    border-color: #00ff88;
}

.radius-badge {
    position: absolute;
    right: 8px;
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    cursor: help;
}

.marketplace-filters select {
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 14px;
    cursor: pointer;
    min-width: 150px;
    appearance: auto;
    -webkit-appearance: auto;
}

.marketplace-filters select option {
    background: #1a1a2e;
    color: white;
    padding: 10px;
}

/* Forza visibilità sempre */
.marketplace-filters select:focus {
    outline: 2px solid #667eea;
    background: rgba(0, 0, 0, 0.5);
}

/* Marketplace Grid - Stile Ricerche Virali (grande e scorrevole) */
.marketplace-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}

/* Stile card marketplace come ricerche virali */
.marketplace-grid .marketplace-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    width: 100%;
}

.marketplace-grid .marketplace-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

/* Immagini grandi come ricerche virali */
.marketplace-grid .marketplace-item-image {
    width: 100%;
    height: 450px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

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

.marketplace-grid .marketplace-item-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #00ff88;
    color: #1a1a2e;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.marketplace-grid .marketplace-item-info {
    padding: 20px;
}

.marketplace-grid .marketplace-item-price {
    color: #00ff88;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.marketplace-grid .marketplace-item-title {
    color: white;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.marketplace-grid .marketplace-item-location {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.marketplace-grid .marketplace-item-seller {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin: 0;
}

/* SELL FORM */
.sell-form-container {
    max-width: 700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sell-form-container h2 {
    color: white;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sell-images-section {
    margin-bottom: 25px;
}

.sell-label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
    font-size: 15px;
}

.sell-images-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.sell-image-upload {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.6);
}

.sell-image-upload:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.sell-image-upload i {
    font-size: 24px;
    margin-bottom: 5px;
}

.sell-image-upload span {
    font-size: 11px;
}

.sell-image-preview {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

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

.sell-image-preview .remove-img {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ff4444;
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.sell-from-scans {
    text-align: center;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 10px;
}

.sell-from-scans p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.sell-from-scans a {
    color: #00ff88;
    text-decoration: none;
}

.sell-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sell-field label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.sell-field input,
.sell-field select,
.sell-field textarea {
width: 100%;
padding: 14px 18px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 15px;
}

.sell-field select option {
background: #1a1a2e;
color: white;
padding: 10px;
}

.sell-field input:focus,
.sell-field select:focus,
.sell-field textarea:focus {
outline: none;
border-color: #667eea;
}

.sell-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.btn-sell-submit {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
    border: none;
    padding: 16px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.btn-sell-submit:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}

/* Scroll per tab vendi */
#tab-sell {
    max-height: calc(100vh - 150px);
    overflow-y: auto !important;
    padding-bottom: 100px;
}

/* Forza colore categorie dropdown */
#sell-category {
    background: #1a1a2e !important;
    color: white !important;
}

#sell-category option {
    background: #1a1a2e !important;
    color: white !important;
    padding: 10px;
}

/* My Listings */
.my-listings-header {
    margin-bottom: 25px;
}

.my-listings-header h2 {
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.marketplace-item-actions {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.marketplace-item-actions button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.btn-edit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-delete {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: white;
}

/* MESSAGES */
.messages-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 180px);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.conversations-list {
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    overflow-y: auto;
}

.conversations-list h3 {
    color: white;
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.conversation-item:hover,
.conversation-item.active {
    background: rgba(102, 126, 234, 0.2);
}

.conversation-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.conversation-info {
    flex: 1;
}

.conversation-info h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 14px;
}

.conversation-info p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Conversazione attiva evidenziata */
.conversation-item.active {
    background: rgba(0, 255, 136, 0.2);
    border-left: 3px solid #00ff88;
}

/* Messaggi container fix */
.messages-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 200px);
    gap: 0;
}

/* Lista conversazioni fix */
.conversations-list {
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    overflow-y: auto;
}

.conversations-list h3 {
    color: white;
    margin: 0 0 20px 0;
    font-size: 18px;
}

.chat-area {
    display: flex;
    flex-direction: column;
}

.chat-header {
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-header span {
    color: white;
    font-size: 16px;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-input-area {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-input-area input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.chat-input-area button {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Marketplace Detail Modal */
.marketplace-detail-modal {
    max-width: 800px;
}

.detail-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    margin-bottom: 25px;
}

.detail-main-image {
    grid-row: span 2;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
}

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

.detail-thumb {
    height: 195px;
    border-radius: 10px;
    overflow: hidden;
}

.detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-info {
    padding: 0 10px;
}

.detail-info h2 {
    color: white;
    font-size: 28px;
    margin: 0 0 15px 0;
}

.detail-price {
    color: #00ff88;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.detail-city {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    margin: 0 0 10px 0;
}

.detail-city i {
    color: #ff4444;
}

.detail-seller {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    margin: 0 0 20px 0;
}

.detail-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 30px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.btn-contact-seller {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 12px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-contact-seller:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}

/* Modale Modifica Posizione */
.edit-location-modal {
    max-width: 450px;
}

.edit-location-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.location-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.location-field label {
    color: white;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-field label i {
    color: #667eea;
}

.location-field input {
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 15px;
}

.location-field input:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(0, 0, 0, 0.5);
}

.location-field small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.location-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.btn-save-location,
.btn-use-gps {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-save-location {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
}

.btn-save-location:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}

.btn-use-gps {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-use-gps:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

/* Responsive Marketplace */
@media (max-width: 992px) {
    .messages-container {
        grid-template-columns: 250px 1fr;
    }
    
    .detail-gallery {
        grid-template-columns: 1fr 1fr;
    }
    
    .detail-main-image {
        grid-row: span 2;
    }
}

@media (max-width: 768px) {
    .marketplace-header-top {
        padding: 12px 15px;
    }
    
    .marketplace-title {
        font-size: 18px;
    }
    
    .marketplace-tabs {
        padding: 0 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .marketplace-tab {
        padding: 12px 15px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    .marketplace-content {
        padding-top: 115px;
    }
    
    .marketplace-tab-content {
        padding: 15px;
    }
    
    .marketplace-filters {
        flex-direction: column;
    }
    
    /* Su mobile le card restano grandi e verticali come ricerche virali */
    .marketplace-grid {
        gap: 20px;
        max-width: 100%;
    }
    
    .marketplace-grid .marketplace-item-image {
        height: 350px; /* Leggermente più piccolo su mobile ma sempre grande */
    }
    
    .marketplace-grid .marketplace-item-price {
        font-size: 24px;
    }
    
    .marketplace-grid .marketplace-item-title {
        font-size: 18px;
    }
    
    .messages-container {
        grid-template-columns: 1fr;
    }
    
    .conversations-list {
        display: none;
    }
    
    /* Mostra lista quando c'è una conversazione attiva */
    .conversations-list.has-active-chat {
        display: block;
        position: absolute;
        z-index: 100;
        width: 100%;
        height: 100%;
        background: #1a1a2e;
    }
    
    .sell-form-container {
        padding: 25px;
    }
    
    .sell-row {
        grid-template-columns: 1fr;
    }
    
    .sell-images-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .detail-gallery {
        grid-template-columns: 1fr;
    }
    
    .detail-main-image {
        height: 250px;
        grid-row: auto;
    }
    
    .detail-thumb {
        display: none;
    }
}

/* ========== PAGINA PERIZIA ========== */
.perizia-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 2px solid rgba(0, 255, 136, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

.perizia-title {
    color: white;
    font-size: 24px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.perizia-title i {
    color: #00ff88;
}

.perizia-user {
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.perizia-user i {
    font-size: 24px;
    color: #00ff88;
}

/* Contenuto Perizia */
.perizia-content {
    padding-top: 80px;
    padding-bottom: 200px;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Bottoni principali */
.perizia-main-buttons {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-perizia-action {
    width: 220px;
    height: 220px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.btn-perizia-action i {
    font-size: 60px;
}

.btn-perizia-action span {
    font-size: 22px;
    font-weight: bold;
}

.btn-perizia-action small {
    font-size: 13px;
    opacity: 0.8;
}

.btn-scatta {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
}

.btn-scatta:hover {
    transform: scale(1.08) translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 255, 136, 0.4);
}

.btn-salvate {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-salvate:hover {
    transform: scale(1.08) translateY(-5px);
    box-shadow: 0 20px 50px rgba(102, 126, 234, 0.4);
}

/* Info box */
.perizia-info {
    max-width: 600px;
    padding: 0 20px;
}

.perizia-info-box {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.perizia-info-box i {
    font-size: 30px;
    color: #00ff88;
}

.perizia-info-box p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* Chat Assistente Perito */
.perizia-assistant-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-top: 2px solid rgba(0, 255, 136, 0.3);
    display: flex;
    padding: 15px 30px;
    z-index: 90;
    height: 180px;
}

.perizia-chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

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

.perizia-chat-header span {
    color: #00ff88;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.perizia-chat-messages {
    flex: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.perizia-chat-input-area {
    display: flex;
    gap: 10px;
}

.perizia-chat-input-area input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 14px;
}

.perizia-chat-input-area button {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perizia-avatar-container {
    display: flex;
    align-items: center;
}

.perizia-assistant-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #00ff88;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.perizia-assistant-avatar img,
.perizia-assistant-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fotocamera Perizia */
#perizia-camera-overlay {
    z-index: 1000;
}

#perizia-camera-overlay .camera-container {
    background: #000;
}

#perizia-camera-overlay .camera-resolution {
    background: #00ff88;
    color: #1a1a2e;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

.camera-focus-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    pointer-events: none;
}

.focus-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid #00ff88;
}

.focus-corner.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.focus-corner.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

.focus-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

.focus-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* Modale Perizia Completata */
.perizia-result-modal {
    max-width: 900px;
    max-height: 90vh;
}

.perizia-document-preview {
    background: white;
    color: black;
    padding: 40px;
    border-radius: 10px;
    min-height: 600px;
    font-family: 'Times New Roman', serif;
    margin-bottom: 20px;
    overflow-y: auto;
    max-height: 60vh;
}

.perizia-document-header {
    text-align: center;
    border-bottom: 3px double #333;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.perizia-document-header h1 {
    font-size: 28px;
    margin: 0;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.perizia-document-header h2 {
    font-size: 18px;
    margin: 10px 0 0 0;
    color: #667eea;
}

.perizia-document-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.perizia-photo-section {
    grid-column: span 2;
    text-align: center;
}

.perizia-photo-section img {
    max-width: 100%;
    max-height: 400px;
    border: 2px solid #333;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.perizia-detail-section {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
}

.perizia-detail-section h3 {
    margin: 0 0 15px 0;
    color: #1a1a2e;
    border-bottom: 2px solid #00ff88;
    padding-bottom: 10px;
}

.perizia-detail-section .label {
    font-weight: bold;
    color: #667eea;
}

.perizia-detail-section .value {
    font-size: 18px;
    margin: 5px 0 15px 0;
}

.perizia-price-box {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin: 20px 0;
}

.perizia-price-box .label {
    font-size: 14px;
    text-transform: uppercase;
}

.perizia-price-box .value {
    font-size: 36px;
    font-weight: bold;
    margin: 10px 0 0 0;
}

.perizia-document-footer {
    grid-column: span 2;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #333;
    text-align: center;
}

.perizia-stamp {
    display: inline-block;
    border: 3px solid #ff4444;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ff4444;
    font-weight: bold;
    transform: rotate(-15deg);
    margin: 20px auto;
}

.perizia-stamp span:first-child {
    font-size: 12px;
    text-transform: uppercase;
}

.perizia-stamp span:last-child {
    font-size: 20px;
}

.perizia-signature {
    margin-top: 30px;
    font-style: italic;
}

.perizia-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-download-pdf {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-save-perizia {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Lista Perizie Salvate */
.perizie-salvate-modal {
    max-width: 800px;
}

.perizie-list {
    display: grid;
    gap: 15px;
}

.perizia-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.perizia-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.perizia-item-info {
    flex: 1;
}

.perizia-item-info h4 {
    color: white;
    margin: 0 0 8px 0;
}

.perizia-item-info .date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 0 0 5px 0;
}

.perizia-item-info .price {
    color: #00ff88;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}

.perizia-item-actions {
    display: flex;
    gap: 10px;
}

.perizia-item-actions button {
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

/* Responsive Perizia */
@media (max-width: 768px) {
    .perizia-main-buttons {
        flex-direction: column;
        gap: 20px;
    }
    
    .btn-perizia-action {
        width: 180px;
        height: 180px;
    }
    
    .btn-perizia-action i {
        font-size: 40px;
    }
    
    .btn-perizia-action span {
        font-size: 18px;
    }
    
    .perizia-document-body {
        grid-template-columns: 1fr;
    }
    
    .perizia-photo-section {
        grid-column: span 1;
    }
    
    .perizia-document-footer {
        grid-column: span 1;
    }
    
    .perizia-assistant-bar {
        height: 150px;
        padding: 10px 15px;
    }
    
    .perizia-assistant-avatar {
        width: 80px;
        height: 80px;
    }
    
    .camera-focus-frame {
        width: 200px;
        height: 200px;
    }
}

/* ========== PAGINA COLLEZIONE ========== */

#page-collezione {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    height: 100vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

#page-collezione.active {
    display: flex;
}

/* Header Collezione */
.collezione-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.collezione-title-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
}

.collezione-title {
    color: #e94560;
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.album-name-input {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 15px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    min-width: 200px;
    text-align: center;
    transition: all 0.3s ease;
}

.album-name-input:focus {
    outline: none;
    border-color: #e94560;
    background: rgba(255, 255, 255, 0.15);
}

.album-name-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.collezione-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-new-album {
    background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-new-album:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.5);
}

/* Bottone I Miei Album nell'header */
.btn-miei-album-header {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-miei-album-header:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(0, 212, 255, 0.5);
}

.collezione-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.collezione-user i {
    font-size: 1.5rem;
    color: #e94560;
}

/* Contenuto principale */
.collezione-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Stats */
.collezione-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.collezione-stats span {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.collezione-stats i {
    color: #e94560;
}

/* Griglia */
.collezione-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    margin-bottom: 10px;
}

.collezione-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    padding: 8px;
}

/* Slot figurina (più piccoli per 15 slot) */
.figurina-slot {
    aspect-ratio: 3/3.5;
    background: rgba(255, 255, 255, 0.08);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 90px;
}

.figurina-slot:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-3px);
}

.figurina-slot.empty::before {
    content: '+';
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

.figurina-slot.empty::after {
    content: 'Aggiungi';
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
}

.figurina-slot.occupied {
    border-style: solid;
    border-color: rgba(233, 69, 96, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.figurina-slot.occupied:hover {
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);
}

/* Contenuto slot occupato */
.figurina-slot-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
}

.figurina-slot-image {
    width: 100%;
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 5px;
}

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

.figurina-slot-info {
    text-align: center;
    width: 100%;
}

.figurina-slot-name {
    font-size: 0.75rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.figurina-slot-price {
    font-size: 0.8rem;
    color: #e94560;
    font-weight: 600;
}

/* Lampeggio per duplicati */
@keyframes flashDuplicate {
    0%, 100% { 
        border-color: #ff0000; 
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
        transform: scale(1.05);
    }
    50% { 
        border-color: #ff6666; 
        box-shadow: 0 0 30px rgba(255, 0, 0, 1);
        transform: scale(1.1);
    }
}

.figurina-slot.flashing {
    animation: flashDuplicate 0.5s ease-in-out 10;
    border-color: #ff0000 !important;
    z-index: 100;
}

/* Bottone SCATTA */
.collezione-scatta-container {
    display: none;
}

.btn-collezione-scatta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
    border: none;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(233, 69, 96, 0.4);
}

.btn-collezione-scatta:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(233, 69, 96, 0.6);
}

.btn-collezione-scatta:active {
    transform: scale(0.95);
}

.scatta-ring {
    width: 50px;
    height: 50px;
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.btn-collezione-scatta span {
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-collezione-scatta small {
    font-size: 0.65rem;
    opacity: 0.8;
}

/* Assistente Collezione */
.collezione-assistant-bar {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    gap: 15px;
    min-height: 180px;
}

.collezione-chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.collezione-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.collezione-chat-header span {
    color: #e94560;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.collezione-chat-messages {
    flex: 1;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.collezione-chat-input-area {
    display: flex;
    gap: 8px;
}

.collezione-chat-input-area input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 10px 15px;
    color: #fff;
    font-size: 0.9rem;
}

.collezione-chat-input-area input:focus {
    outline: none;
    border-color: #e94560;
}

.collezione-chat-input-area button {
    background: #e94560;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.collezione-chat-input-area button:hover {
    background: #ff6b6b;
    transform: scale(1.1);
}

.collezione-avatar-container {
    display: flex;
    align-items: flex-end;
}

.collezione-assistant-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

.collezione-assistant-avatar img,
.collezione-assistant-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Modale Figurina */
.figurina-modal {
    max-width: 500px;
    width: 90%;
}

.figurina-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.figurina-image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.figurina-image-preview {
    width: 200px;
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid #e94560;
    background: rgba(0, 0, 0, 0.2);
}

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

.figurina-image-actions {
    display: flex;
    gap: 10px;
}

.btn-change-photo,
.btn-upload-photo {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid #e94560;
    border-radius: 20px;
    padding: 8px 15px;
    color: #e94560;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-change-photo:hover,
.btn-upload-photo:hover {
    background: #e94560;
    color: white;
}

.figurina-info-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.figurina-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.figurina-field label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.figurina-field label i {
    color: #e94560;
}

.figurina-field input,
.figurina-field textarea {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    font-size: 0.9rem;
}

.figurina-field input:focus,
.figurina-field textarea:focus {
    outline: none;
    border-color: #e94560;
}

.price-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-style: italic;
}

.figurina-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-save-figurina {
    flex: 1;
    background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
    border: none;
    border-radius: 25px;
    padding: 12px 20px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-save-figurina:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

.btn-cancel-figurina {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-cancel-figurina:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Modale Dettaglio */
.figurina-detail-modal {
    max-width: 450px;
    width: 90%;
}

.figurina-detail-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.figurina-detail-image {
    width: 250px;
    height: 250px;
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid #e94560;
}

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

.figurina-detail-info {
    text-align: center;
    width: 100%;
}

.figurina-detail-info h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.figurina-detail-info .detail-price {
    color: #e94560;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.figurina-detail-info .detail-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
}

.figurina-detail-info .detail-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin-top: 10px;
}

.figurina-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.btn-edit-figurina,
.btn-delete-figurina {
    flex: 1;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
}

.btn-edit-figurina {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.btn-delete-figurina {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: white;
}

.btn-edit-figurina:hover,
.btn-delete-figurina:hover {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .collezione-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .collezione-title-section {
        flex-direction: column;
        gap: 5px;
    }
    
    .collezione-title {
        font-size: 1.2rem;
    }
    
    .album-name-input {
        font-size: 1rem;
        min-width: 150px;
    }
    
    .btn-collezione-scatta {
        width: 100px;
        height: 100px;
    }
    
    .collezione-assistant-bar {
        flex-direction: column;
        min-height: auto;
    }
    
    .collezione-avatar-container {
        justify-content: center;
    }
    
    .collezione-assistant-avatar {
        width: 80px;
        height: 80px;
    }
    
    .figurina-modal {
        width: 95%;
    }
    
    .figurina-image-preview {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .collezione-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .figurina-slot-name {
        font-size: 0.65rem;
    }
    
    .figurina-slot-price {
        font-size: 0.7rem;
    }
}

/* ========== I MIEI ALBUM ========== */

.miei-album-modal {
    max-width: 600px;
    width: 90%;
}

.miei-album-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.empty-album-message {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.7);
}

.empty-album-message i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #e94560;
    display: block;
}

.empty-album-message p {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.empty-album-message small {
    color: rgba(255, 255, 255, 0.5);
}

.album-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.2) 0%, rgba(255, 107, 107, 0.1) 100%);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.album-card:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3) 0%, rgba(255, 107, 107, 0.2) 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(233, 69, 96, 0.3);
}

.album-card-icon {
    width: 50px;
    height: 50px;
    background: rgba(233, 69, 96, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.album-card-info {
    flex: 1;
}

.album-card-info h3 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.album-card-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 2px 0;
}

.album-card-info p i {
    color: #e94560;
    margin-right: 5px;
}

.album-card-arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
}

.miei-album-actions {
    margin-top: 20px;
    text-align: center;
}

.btn-new-album-modal {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    border-radius: 25px;
    padding: 12px 25px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

.btn-new-album-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5);
}

/* ========== MOSTRA IL MIO ALBUM ========== */

.btn-mostra-album-header {
    background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.3);
}

.btn-mostra-album-header:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.5);
}

.mostra-album-modal {
    max-width: 600px;
    width: 90%;
}

.mostra-album-description {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.mostra-album-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.album-viral-status {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 200, 83, 0.2) 100%);
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
}

.album-viral-status p {
    color: white;
    margin: 0 0 15px 0;
}

.album-viral-status p i {
    color: #00ff88;
    margin-right: 8px;
}

.btn-rimuovi-viral {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-rimuovi-viral:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(255, 68, 68, 0.5);
}

/* Album in Ricerche Virali */
.album-viral-card {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3) 0%, rgba(255, 107, 107, 0.2) 100%);
    border: 2px solid rgba(233, 69, 96, 0.5);
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.album-viral-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(233, 69, 96, 0.4);
}

.album-viral-preview {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    overflow: hidden;
}

.album-viral-preview img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.album-viral-preview .empty-slot {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.album-viral-info h3 {
    color: white;
    margin: 0;
    font-size: 1.2rem;
    text-align: center;
}

.album-viral-info p {
    color: rgba(255, 255, 255, 0.7);
    margin: 5px 0 0 0;
    font-size: 0.9rem;
    text-align: center;
}

/* ========== VIEW ALBUM MODAL ========== */

.view-album-modal {
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.view-album-owner {
    color: rgba(255, 255, 255, 0.7);
    margin: 5px 0 0 0;
    font-size: 0.9rem;
}

.view-album-owner span {
    color: #e94560;
    font-weight: 600;
}

.view-album-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
}

.view-album-stats span {
    color: white;
}

.view-album-stats span i {
    color: #e94560;
    margin-right: 8px;
}

.view-album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.view-album-grid .figurina-slot {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
}

.view-album-grid .figurina-slot.occupied {
    border: 2px solid #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.view-album-grid .figurina-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-album-grid .figurina-slot-info {
    padding: 10px;
    text-align: center;
}

.view-album-grid .figurina-slot-name {
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-album-grid .figurina-slot-price {
    color: #00ff88;
    font-size: 0.8rem;
    margin-top: 5px;
}

/* ========== RICERCHE VIRALI PAGE ========== */

#page-ricerche-virali {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    height: 100vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

#page-ricerche-virali.active {
    display: flex;
    overflow-y: auto;
}

.ricerche-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.ricerche-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ricerche-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ricerche-user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
}

.ricerche-user-profile span {
    font-weight: 600;
}

.user-points {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    border-radius: 20px;
}

.user-points i {
    color: #ffd700;
}

.ricerche-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    height: calc(100vh - 80px);
}

/* Banner Pubblicitari */
.ad-banner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px dashed rgba(102, 126, 234, 0.5);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.ad-placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Upload Section */
.upload-section {
    margin-bottom: 20px;
    text-align: center;
}

.btn-upload-content {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    border-radius: 25px;
    padding: 15px 30px;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

.btn-upload-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5);
}

/* Tabs */
.ricerche-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.ricerche-tab {
    background: transparent;
    border: 2px solid rgba(102, 126, 234, 0.5);
    border-radius: 20px;
    padding: 10px 20px;
    color: white;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ricerche-tab:hover {
    background: rgba(102, 126, 234, 0.3);
}

.ricerche-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
}

.ricerche-tab-content {
    display: none;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    padding-right: 10px;
}

.ricerche-tab-content.active {
    display: block;
    overflow-y: auto;
}

/* Feed */
.ricerche-feed {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}

/* Spazi pubblicitari */
.ad-space {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px dashed rgba(102, 126, 234, 0.5);
    border-radius: 20px;
    padding: 60px 20px;
    text-align: center;
    margin: 10px 0;
}

.ad-space-placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ad-space-placeholder i {
    font-size: 2rem;
    color: #667eea;
}

.content-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    width: 100%;
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.content-media {
    width: 100%;
    height: 450px;
    object-fit: cover;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.content-info {
    padding: 15px;
}

.content-title {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.content-author {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.content-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.btn-like, .btn-comment, .btn-edit, .btn-delete {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 5px 12px;
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-like:hover {
    background: rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
}

.btn-like.liked {
    background: #ffd700;
    color: #1a1a2e;
    border-color: #ffd700;
}

.btn-comment:hover {
    background: rgba(102, 126, 234, 0.3);
}

.btn-edit:hover {
    background: rgba(0, 212, 255, 0.3);
}

.btn-delete:hover {
    background: rgba(255, 107, 107, 0.3);
    border-color: #ff6b6b;
}

/* Upload Modal */
.upload-modal {
    max-width: 500px;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.upload-preview {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px dashed rgba(102, 126, 234, 0.5);
}

.upload-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 20px;
}

.upload-placeholder i {
    font-size: 48px;
    margin-bottom: 10px;
    display: block;
}

.upload-field label {
    display: block;
    color: white;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.upload-field input,
.upload-field textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 10px 15px;
    color: white;
    font-size: 0.95rem;
}

.upload-field input::placeholder,
.upload-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.btn-submit-upload {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    border-radius: 20px;
    padding: 12px 25px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.btn-submit-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
}

/* Content Detail Modal */
.content-detail-modal {
    max-width: 600px;
}

.content-detail-media {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 15px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.content-detail-info h2 {
    color: white;
    margin-bottom: 10px;
}

.content-detail-info p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

/* Comments Section */
.comments-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comments-section h3 {
    color: white;
    margin-bottom: 15px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.comment {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 15px;
}

.comment-author {
    color: #667eea;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.comment-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.comment-input-area {
    display: flex;
    gap: 10px;
}

.comment-input-area input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 10px 15px;
    color: white;
}

.comment-input-area button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.comment-input-area button:hover {
    transform: scale(1.1);
}

/* ========== MARKETPLACE SELL BUTTON ========== */
.btn-sell-submit {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    border-radius: 25px;
    padding: 15px 30px;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

.btn-sell-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5);
}

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

/* ========== PAGINA RIPARIAMOLO ========== */

#page-ripariamolo {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), url('images/ripariamolo.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    height: 100vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

#page-ripariamolo.active {
    display: flex;
}

/* Header Ripariamolo */
.ripariamolo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ripariamolo-title {
    color: #00d4ff;
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ripariamolo-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.ripariamolo-user i {
    font-size: 1.5rem;
    color: #00d4ff;
}

/* Contenuto principale */
.ripariamolo-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* Sezione CAP e Controlli */
.ripariamolo-controls {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.cap-input-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cap-input-section label {
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cap-input-section label i {
    color: #00d4ff;
}

#ripariamolo-cap-input {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    color: #fff;
    font-size: 1rem;
    width: 120px;
    text-align: center;
}

#ripariamolo-cap-input:focus {
    outline: none;
    border-color: #00d4ff;
}

#ripariamolo-cap-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.btn-save-cap {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-save-cap:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.5);
}

/* Tabs */
.ripariamolo-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ripariamolo-tab {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 10px 20px;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ripariamolo-tab:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.5);
}

.ripariamolo-tab.active {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border-color: transparent;
}

.ripariamolo-tab i {
    font-size: 1rem;
}

/* Tab Content */
.ripariamolo-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
}

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

/* Sezione Scansiona */
.ripariamolo-scan-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px 0;
}

.btn-ripariamolo-scatta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
}

.btn-ripariamolo-scatta:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.6);
}

.btn-ripariamolo-scatta .scatta-ring {
    width: 60px;
    height: 60px;
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.btn-ripariamolo-scatta span {
    font-size: 1rem;
    font-weight: 600;
}

.btn-ripariamolo-scatta small {
    font-size: 0.7rem;
    opacity: 0.9;
}

.ripariamolo-hint {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    max-width: 300px;
    font-size: 0.9rem;
}

/* Risultati */
.ripariamolo-results {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
}

.ripariamolo-object-info {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.ripariamolo-object-info h3 {
    color: #00d4ff;
    margin: 0 0 10px 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.object-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
}

.object-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Negozi */
.ripariamolo-shops-section {
    margin-bottom: 20px;
}

.ripariamolo-shops-section h3 {
    color: #fff;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shops-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
}

.shop-card:hover {
    background: rgba(0, 212, 255, 0.15);
    transform: translateX(5px);
}

.shop-name {
    font-weight: 600;
    color: white;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-address {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.shop-phone {
    color: #00d4ff;
    font-size: 0.85rem;
}

/* Coupon Alert */
.coupon-alert {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: pulseCoupon 2s infinite;
}

@keyframes pulseCoupon {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
}

.coupon-alert i {
    font-size: 2rem;
    color: #1a1a2e;
}

.coupon-alert-content {
    flex: 1;
}

.coupon-alert-content strong {
    color: #1a1a2e;
    display: block;
    margin-bottom: 3px;
}

.coupon-alert-content span {
    color: #333;
    font-size: 0.85rem;
}

/* Liste Oggetti e Coupon */
.ripariamolo-oggetti-list,
.ripariamolo-coupon-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ripariamolo-item-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ripariamolo-item-card:hover {
    background: rgba(0, 212, 255, 0.15);
    transform: translateX(5px);
}

.ripariamolo-item-card img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.3);
}

.ripariamolo-item-info {
    flex: 1;
}

.ripariamolo-item-info h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 1rem;
}

.ripariamolo-item-info p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 0.8rem;
}

/* Coupon Card */
.coupon-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 170, 0, 0.1) 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.coupon-card i {
    font-size: 2rem;
    color: #ffd700;
}

.coupon-info {
    flex: 1;
}

.coupon-info h4 {
    color: #ffd700;
    margin: 0 0 5px 0;
}

.coupon-info p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.85rem;
}

/* Assistente Bar */
.ripariamolo-assistant-bar {
    display: flex;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    gap: 15px;
    min-height: 180px;
}

.ripariamolo-chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ripariamolo-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ripariamolo-chat-header span {
    color: #00d4ff;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ripariamolo-chat-messages {
    flex: 1;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.ripariamolo-chat-input-area {
    display: flex;
    gap: 8px;
}

.ripariamolo-chat-input-area input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 10px 15px;
    color: #fff;
    font-size: 0.9rem;
}

.ripariamolo-chat-input-area input:focus {
    outline: none;
    border-color: #00d4ff;
}

.ripariamolo-chat-input-area button {
    background: #00d4ff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ripariamolo-chat-input-area button:hover {
    background: #0099cc;
    transform: scale(1.1);
}

.ripariamolo-avatar-container {
    display: flex;
    align-items: flex-end;
}

.ripariamolo-assistant-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #00d4ff;
    box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4);
}

.ripariamolo-assistant-avatar img,
.ripariamolo-assistant-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 768px) {
    .ripariamolo-tabs {
        justify-content: center;
    }
    
    .ripariamolo-tab {
        padding: 8px 15px;
        font-size: 0.8rem;
    }
    
    .ripariamolo-assistant-bar {
        flex-direction: column;
        min-height: auto;
    }
    
    .ripariamolo-avatar-container {
        justify-content: center;
    }
    
}

/* ========== PAGINA HOBBISTA ========== */
#page-hobbista {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
}

#page-hobbista.active {
    display: flex;
    flex-direction: column;
}

.hobbista-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
    backdrop-filter: blur(10px);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.hobbista-title {
    color: white;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.hobbista-title i {
    color: #00ff88;
}

.hobbista-user {
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.hobbista-user i {
    font-size: 24px;
    color: #667eea;
}

.hobbista-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hobbista-scan-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 40px;
}

.btn-hobbista-scan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border: none;
    border-radius: 50%;
    width: 160px;
    height: 160px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.5);
    animation: pulse-scan 2s ease-in-out infinite;
}

.btn-hobbista-scan:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 50px rgba(255, 107, 53, 0.7);
}

.btn-hobbista-scan:active {
    transform: scale(0.95);
}

.scan-ring {
    width: 60px;
    height: 60px;
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.btn-hobbista-scan span {
    font-size: 22px;
    font-weight: 800;
}

.btn-hobbista-scan small {
    font-size: 12px;
    opacity: 0.9;
}

.hobbista-assistant-bar {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    gap: 15px;
    min-height: 160px;
}

.hobbista-chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hobbista-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hobbista-chat-header span {
    color: #00ff88;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hobbista-chat-messages {
    flex: 1;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    max-height: 80px;
}

.hobbista-chat-messages .message {
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 6px;
    font-size: 13px;
    color: white;
    line-height: 1.4;
}

.hobbista-chat-messages .message.assistant {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

.hobbista-chat-input-area {
    display: flex;
    gap: 8px;
}

.hobbista-chat-input-area input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 10px 15px;
    color: #fff;
    font-size: 14px;
}

.hobbista-chat-input-area input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.hobbista-chat-input-area button {
    background: #00ff88;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hobbista-chat-input-area button:hover {
    background: #00c853;
    transform: scale(1.1);
}

.hobbista-avatar-container {
    display: flex;
    align-items: flex-end;
}

.hobbista-assistant-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #00ff88;
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}

.hobbista-assistant-avatar img,
.hobbista-assistant-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .hobbista-scan-container {
        padding: 20px;
    }
    
    .btn-hobbista-scan {
        width: 140px;
        height: 140px;
    }
    
    .scan-ring {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    
    .btn-hobbista-scan span {
        font-size: 18px;
    }
    
    .hobbista-assistant-bar {
        flex-direction: column;
        min-height: auto;
    }
    
    .hobbista-avatar-container {
        justify-content: center;
    }
    
    .hobbista-assistant-avatar {
        width: 80px;
        height: 80px;
    }
}

/* ========== HOBBI SALVATI STYLES ========== */
.hobbista-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-hobbisti-salvati-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    border: none;
    border-radius: 20px;
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-hobbisti-salvati-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 136, 0.4);
}

.btn-hobbisti-salvati-header i {
    font-size: 16px;
}

/* Modale Hobbi Salvati */
.hobbisti-salvati-modal {
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
}

.hobbisti-salvati-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.hobbista-saved-item {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(0, 255, 136, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.hobbista-saved-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);
    border-color: #00ff88;
}

.hobbista-saved-item .item-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #0a0a0a;
}

.hobbista-saved-item .item-info {
    padding: 15px;
}

.hobbista-saved-item .item-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
}

.hobbista-saved-item .item-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.hobbista-saved-item .btn-aiutami {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    border: none;
    border-radius: 10px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hobbista-saved-item .btn-aiutami:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 255, 136, 0.4);
}

/* Modale AIUTAMI */
.hobbista-aiutami-modal {
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

.aiutami-content {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
}

.aiutami-image-section {
    flex: 0 0 200px;
}

.aiutami-image-section img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(0, 255, 136, 0.3);
}

.aiutami-info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aiutami-info-section h3 {
    font-size: 24px;
    color: #00ff88;
    margin-bottom: 10px;
}

.aiutami-info-section p {
    color: #aaa;
    font-size: 14px;
}

.aiutami-actions {
    padding: 0 20px 20px;
}

.btn-aiutami-analyze {
    width: 100%;
    padding: 15px 30px;
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    border: none;
    border-radius: 12px;
    color: #1a1a2e;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-aiutami-analyze:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.4);
}

.btn-aiutami-analyze i {
    font-size: 24px;
}

.aiutami-results {
    padding: 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    margin: 0 20px 20px;
}

.aiutami-loading {
    text-align: center;
    padding: 30px;
    color: #00ff88;
    font-size: 16px;
}

.aiutami-loading i {
    margin-right: 10px;
}

.aiutami-analysis-content {
    color: white;
    line-height: 1.6;
}

.aiutami-analysis-content h4 {
    color: #00ff88;
    margin: 20px 0 10px;
    font-size: 18px;
}

.aiutami-analysis-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.aiutami-analysis-content li {
    margin: 8px 0;
}

@media (max-width: 768px) {
    .btn-hobbisti-salvati-header span {
        display: none;
    }
    
    .btn-hobbisti-salvati-header {
        padding: 10px;
    }
    
    .hobbisti-salvati-list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
        padding: 15px;
    }
    
    .aiutami-content {
        flex-direction: column;
    }
    
    .aiutami-image-section {
        flex: none;
    }
    
    .aiutami-image-section img {
        height: 150px;
    }
}

/* ========== MOSTRA IN VIRALITÀ STYLES ========== */
.btn-mostra-viralita-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-mostra-viralita-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.btn-mostra-viralita-header i {
    font-size: 16px;
}

/* Modale Mostra in Viralità */
.mostra-viralita-modal {
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
}

.viralita-description {
    padding: 0 20px;
    color: #aaa;
    font-size: 14px;
    margin-bottom: 20px;
}

.viralita-projects-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}

.viralita-project-item {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

.viralita-project-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.2);
}

.viralita-project-item.selected {
    border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.viralita-project-item.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #00ff88;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    font-size: 14px;
}

.viralita-project-item .item-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #0a0a0a;
}

.viralita-project-item .item-info {
    padding: 15px;
}

.viralita-project-item .item-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
}

.viralita-project-item .item-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.viralita-project-item .btn-seleziona {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.viralita-project-item .btn-seleziona:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.viralita-project-item.selected .btn-seleziona {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
}

.viralita-status {
    padding: 20px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 200, 83, 0.1) 100%);
    border-radius: 12px;
    margin: 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.viralita-status p {
    color: #00ff88;
    font-size: 14px;
    margin: 0;
}

.viralita-status i {
    margin-right: 8px;
}

.btn-rimuovi-tutti {
    padding: 8px 16px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-rimuovi-tutti:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

/* Modale Dettaglio Progetto Virale */
.hobbista-viral-detail-modal {
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

.viral-author {
    color: #888;
    font-size: 14px;
    margin: -10px 0 15px 20px;
}

.viral-author span {
    color: #00ff88;
    font-weight: 600;
}

.viral-detail-media {
    padding: 20px;
}

.viral-detail-media img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 16px;
    border: 2px solid rgba(255, 107, 107, 0.3);
}

.viral-detail-info {
    padding: 0 20px 20px;
}

.viral-detail-info p {
    color: #aaa;
    margin-bottom: 15px;
}

.viral-description {
    font-style: italic;
    line-height: 1.6;
}

.viral-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.viral-actions .btn-like,
.viral-actions .btn-comment {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.viral-actions .btn-like {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #1a1a2e;
}

.viral-actions .btn-like.liked {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
}

.viral-actions .btn-comment {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
}

.viral-actions button:hover {
    transform: scale(1.05);
}

/* Card progetto virale nel feed */
.hobbista-viral-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

.hobbista-viral-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.4);
    border-color: #ff6b6b;
}

.hobbista-viral-card .content-media {
    height: 450px;
}

.hobbista-viral-card .viral-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 768px) {
    .btn-mostra-viralita-header span {
        display: none;
    }
    
    .btn-mostra-viralita-header {
        padding: 10px;
    }
    
    .viralita-projects-list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
        padding: 15px;
    }
    
    .viralita-status {
        flex-direction: column;
        text-align: center;
    }
    
    .viral-actions {
        flex-direction: column;
    }
}

/* ========== BOTTONE CONTATTA ========== */
.view-album-actions {
    padding: 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 20px;
}

.btn-contact-owner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    border: none;
    border-radius: 25px;
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-contact-owner:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}

.btn-contact-owner i {
    font-size: 18px;
}

/* Bottone Contatta in Hobbista Viral Detail */
.btn-contact-hobbista {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    border: none;
    border-radius: 20px;
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
}

.btn-contact-hobbista:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}

.btn-contact-hobbista i {
    font-size: 16px;
}

/* ========== PAGINA PORTAFOGLIO ========== */
#page-portafoglio {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    display: none;
    flex-direction: column;
}

#page-portafoglio.active {
    display: flex;
}

.portafoglio-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portafoglio-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.portafoglio-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 0.9rem;
}

.portafoglio-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* Balance Card */
.portafoglio-balance-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 170, 0, 0.1) 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.balance-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.balance-amount {
    color: #ffd700;
    font-size: 3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 5px;
}

.balance-amount i {
    font-size: 2.5rem;
}

.coins-label {
    font-size: 1.2rem;
    color: rgba(255, 215, 0, 0.8);
}

.balance-equivalent {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    margin-bottom: 20px;
}

.balance-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-ricarica, .btn-trasferisci {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ricarica {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    color: #1a1a2e;
}

.btn-trasferisci {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    color: white;
}

.btn-ricarica:hover, .btn-trasferisci:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Stats */
.portafoglio-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card i {
    font-size: 1.5rem;
    color: #667eea;
    margin-bottom: 10px;
}

.stat-value {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

/* Transactions */
.portafoglio-transactions {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.transactions-header h3 {
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-view-all {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 8px 15px;
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-view-all:hover {
    background: rgba(255, 255, 255, 0.1);
}

.transactions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.transaction-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.transaction-item.income .transaction-icon {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

.transaction-item.expense .transaction-icon {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.transaction-details {
    flex: 1;
}

.transaction-title {
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.transaction-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.transaction-amount {
    font-weight: 700;
    font-size: 1.1rem;
}

.transaction-amount.positive {
    color: #00ff88;
}

.transaction-amount.negative {
    color: #ff6b6b;
}

/* Payment Methods */
.portafoglio-payment-methods {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.portafoglio-payment-methods h3 {
    color: white;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 2px solid transparent;
}

.payment-card.active {
    border-color: #ffd700;
}

.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #1a1a2e;
}

.card-info {
    flex: 1;
}

.card-name {
    color: white;
    font-weight: 600;
    margin-bottom: 3px;
}

.card-balance {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.card-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #1a1a2e;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-add-payment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-add-payment:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
}

/* Assistant Bar */
.portafoglio-assistant-bar {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    gap: 15px;
    min-height: 160px;
}

.portafoglio-chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.portafoglio-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.portafoglio-chat-header span {
    color: #ffd700;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.portafoglio-chat-messages {
    flex: 1;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    max-height: 80px;
}

.portafoglio-chat-input-area {
    display: flex;
    gap: 8px;
}

.portafoglio-chat-input-area input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 10px 15px;
    color: #fff;
    font-size: 14px;
}

.portafoglio-chat-input-area button {
    background: #ffd700;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portafoglio-chat-input-area button:hover {
    background: #ffaa00;
    transform: scale(1.1);
}

.portafoglio-avatar-container {
    display: flex;
    align-items: flex-end;
}

.portafoglio-assistant-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffd700;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}

.portafoglio-assistant-avatar img,
.portafoglio-assistant-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========== MODALE PUBBLICITA RICARICA ========== */
.ads-ricarica-modal {
    max-width: 500px;
}

.ads-info {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.ads-info p {
    color: white;
    margin: 0;
    font-size: 1rem;
}

.ads-info i {
    color: #ffd700;
    margin-right: 8px;
}

.ads-timer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ff6b6b;
    font-size: 0.9rem;
}

.ads-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.ad-video-slot {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 15px;
    padding: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
    height: 100%;
}

.ad-placeholder i {
    font-size: 2.5rem;
    color: #667eea;
    margin-bottom: 10px;
}

.ad-placeholder span {
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
}

.ad-placeholder small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.ad-placeholder:hover i {
    color: #00ff88;
    transform: scale(1.1);
}

.ad-completed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #00ff88;
    font-weight: 600;
}

.ad-completed i {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.ads-reward {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 170, 0, 0.1) 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reward-text {
    color: white;
    font-size: 1.1rem;
}

.reward-text i {
    color: #ffd700;
    margin-right: 8px;
}

.reward-text strong {
    color: #00ff88;
    font-size: 1.3rem;
}

.btn-claim-reward {
    background: linear-gradient(135deg, #00ff88 0%, #00c853 100%);
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    color: #1a1a2e;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
}

.btn-claim-reward:disabled {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    color: #999;
    cursor: not-allowed;
}

.btn-claim-reward:not(:disabled):hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}

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