/* ===== BASE ===== */
:root {
--primary: #2a4c6f;
--secondary: #89a9c9;
--success: #28a745;
--danger: #dc3545;
--warning: #ffc107;
--info: #17a2b8;
--facebook: #6f42c1;
--light: #f8f9fa;
--dark: #343a40;
--gray: #6c757d;
}
body {margin:0;background:linear-gradient(135deg, #1c3a5a, #2a4c6f);font-family:Arial;}
.menu {display:grid;grid-template-columns:repeat(2, 250px); gap:20px;}
.menu-large {grid-template-columns:repeat(3, 250px);gap:20px;}
.login-container {max-width:400px;margin:100px auto;padding:30px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.2);text-align:center;}
.container {max-width:600px;margin:100px auto;padding:30px;background:#8ac;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.2);text-align:center;}
.card {background:white;color:#2a4c6f;padding:30px;border-radius:15px;text-align:center;text-decoration:none;font-weight:bold;transition:0.3s;}
.card:hover {transform:translateY(-5px);}
.admin-container {display: flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;max-width:1600px;margin:20px auto;padding:15px;}
.admin-container h1 {color:#def;margin:10px auto;font-size:1.4rem;}
.grid {display: grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));max-width:1600px;margin:0 auto;gap:20px;}
h1 {color:white;margin-bottom:20px;}
h2 {margin-top:5px;color:white;color:#246;font-weight:bold;font-size:1.5rem;text-shadow:0 2px 4px rgba(0,10,20,0.5);}
ul {list-style:none;padding:0;}
li {padding:8px 0;border-bottom:1px solid #eee;}
p {color:#def;}
input {width:100%;padding:10px;margin:10px 0;border: 1px solid #ddd;border-radius:6px;}
button {width:100%;padding:10px;background:#2a4c6f;color:white;border: none;border-radius:6px;cursor:pointer;}
button:hover {background:#1c3a5a;}
.admin-layout {display:flex;min-height:100vh;}
.sidebar {width: 220px;background:#1c3a5a;color:white;padding:20px;display:flex;flex-direction:column;}
.sidebar h2 {margin-bottom: 20px;color: #a0d2ff;}
.sidebar a {color: white;text-decoration: none;padding: 10px;margin-bottom: 10px;border-radius: 8px;transition: 0.2s;}
.sidebar a:hover {background:#2a4c6f;}
.main-content {flex:1;padding:10px;}
.error {color:red;margin-bottom:10px;}
canvas {max-width: 100%;height: auto !important;}
.card canvas {width: 100% !important;height: 100% !important;}
.header-bar {margin-bottom:16px;background:var(--primary);color:white;padding:25px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid var(--secondary);border-radius:10px;}
.header-bar h1 {margin:0;font-size:1.8rem;display:flex;align-items:center;gap:15px;}
.header-actions {display:flex;gap:15px;margin-left:5px;align-items:center;}
.logout-btn {background: var(--danger);color: white;border: none;padding: 12px 25px;border-radius: 50px;cursor: pointer;text-decoration: none;display: flex;align-items: center;gap: 10px;font-weight: 600;transition: all 0.3s ease;}
.logout-btn:hover {background: #c82333;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);}
.stats-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px;padding:25px;background:#3a5c7f;border-radius:10px;}
.stat-card {background: white;padding: 20px;border-radius: 15px;box-shadow: 0 5px 15px rgba(0,0,0,0.08);text-align: center;transition: transform 0.3s ease;border-left: 5px solid var(--primary);}
.stat-card:hover {transform: translateY(-5px);}
.stat-number {font-size: 2.5rem;font-weight: 700;color: var(--primary);margin-bottom: 5px;}
.stat-label {color: var(--gray);font-size: 0.9rem;text-transform: uppercase;letter-spacing: 1px;}
.tab-system {padding: 30px;}
.tab-headers {display: flex;gap: 5px;border-bottom: 3px solid var(--light);margin-bottom: 30px;flex-wrap: wrap;}
.tab-header {padding: 15px 30px;background: var(--light);border: none;border-radius: 10px 10px 0 0;font-weight: 600;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;gap: 10px;}
.tab-header.active {background: var(--primary);color: white;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(42, 76, 111, 0.3);}
.tab-content {display: none;animation: fadeIn 0.5s ease;}
.tab-content.active {display: block;}
@keyframes fadeIn {from {opacity: 0;transform: translateY(10px);} to {opacity: 1;transform: translateY(0);}}
@keyframes slideUp {from {transform: translateY(50px);opacity: 0;} to {transform: translateY(0);opacity: 1;}}
.filter-bar {background:#3a5c7f;padding: 20px;border-radius: 15px;margin-bottom: 30px;display: flex;flex-wrap: wrap;gap: 20px;align-items: center;}
.filter-group {display: flex;flex-direction: column;gap: 8px;min-width: 200px;}
.filter-label {font-weight: 600;color: var(--primary);font-size: 0.9rem;}
select, input[type="text"], textarea {padding: 12px 15px;border: 2px solid #e0e0e0;border-radius: 10px;font-size: 1rem;transition: all 0.3s ease;background: white;}
select:focus, input[type="text"]:focus, textarea:focus {border-color: var(--primary);outline: none;box-shadow: 0 0 0 3px rgba(42, 76, 111, 0.1);}
.images-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 25px;margin-bottom: 40px;}
#top-images {display:grid;grid-template-columns: repeat(3, 1fr)!important;gap:12px;padding:10px;}
.image-card {background: white;border-radius: 15px;overflow: hidden;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;position: relative;border: 2px solid transparent;}
.image-card:hover {transform: translateY(-10px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);}
.image-card.has-keywords {border-color: var(--success);}
.image-card.no-keywords {border-color: var(--danger);}
.card-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.image-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary);
    margin: 0;
}
.image-type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}
.keywords-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}
.keywords-status.has {
    color: var(--success);
}
.keywords-status.none {
    color: var(--danger);
}
.card-preview {
    height: 180px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.card-preview:hover img {
    transform: scale(1.05);
}
.card-actions {
    padding: 20px;
    background: var(--light);
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.keywords-display {
    max-height: 100px;
    overflow-y: auto;
    background: white;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #eee;
}
.keyword-tag {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    margin: 3px;
    border-radius: 15px;
    font-size: 0.85rem;
}
.preview-modal .modal-content {max-width: 95vw;width: auto;background: #1a1a1a;}
.preview-content {background: #1a1a1a !important;color: white;}
.preview-content .modal-header {border-bottom: 1px solid #444;}
.preview-content .modal-header h2 {color: white;}
.preview-container {display: flex;justify-content: center;align-items: center;min-height: 300px;background: #0d0d0d;border-radius: 8px;padding: 20px;}
#preview-image {box-shadow: 0 4px 20px rgba(0,0,0,0.5);border-radius: 4px;}
.preview-info {color: #ccc;font-size: 14px;}
.preview-info p {margin: 5px 0;}
.btn-preview {background: #6c757d;color: white;border: none;padding: 8px 12px;border-radius: 4px;cursor: pointer;font-size: 14px;transition: background 0.2s;}
.btn-preview:hover {background: #5a6268;}
.btn-preview i {margin-right: 5px;}
.btn {padding: 12px 20px;border: none;border-radius: 10px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;gap: 10px;}
.btn-primary {background: var(--primary);color: white;}
.btn-primary:hover {background: #1c3a5a;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(42, 76, 111, 0.3);}
.btn-success {background: var(--success);color: white;}
.btn-danger {background: var(--danger);color: white;}
.btn-info {background: var(--info);color: white;}
.pagination {display: flex;justify-content: center;align-items: center;gap: 15px;margin-top: 40px;padding: 20px;background:#3a5c7f;border-radius: 15px;width: 75%;}
.pagination .pages {width:100%;color:#def;}
.page-btn {padding: 8px 16px;background: white;border: 2px solid var(--primary);color: var(--primary);border-radius: 10px;cursor: pointer;font-weight: 600;transition: all 0.3s ease;}
.page-btn:hover:not(:disabled) {background: var(--primary);color: white;}
.page-btn:disabled {opacity: 0.5;cursor: not-allowed;}
.page-info {font-weight: 600;color: var(--primary);}
.modal {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);animation: fadeIn 0.3s ease;}
.modal-content {position: relative;margin: 50px auto;max-width: 90%;max-height: 80vh;background: white;border-radius: 20px;overflow: hidden;animation: slideUp 0.5s ease;}
.modal-header {padding: 20px;background: var(--primary);color: white;display: flex;justify-content: space-between;align-items: center;}
.modal-close {font-size: 2rem;cursor: pointer;transition: color 0.3s ease;}
.modal-close:hover {color: var(--secondary);}
.modal-body {padding: 30px;max-height: 60vh;overflow-y: auto;}
.suggestions-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 15px;margin-top: 20px;}
.suggestion-tag {background: white;border: 2px solid var(--info);color: var(--info);padding: 10px 15px;border-radius: 10px;cursor: pointer;text-align: center;transition: all 0.3s ease;font-weight: 600;}
@media (max-width: 1200px) {
    #top-images {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
@media (max-width: 900px) {
.grid {grid-template-columns: 1fr;}
}
@media (max-width: 768px) {
.images-grid {grid-template-columns: 1fr;}
.filter-bar {flex-direction: column;align-items: stretch;}
.filter-group {min-width: 100%;}
.header-bar {flex-direction: column;gap: 20px;text-align: center;}
.tab-headers {justify-content: center;}
.modal-content {margin: 20px auto;width: 95%;}
#top-images {grid-template-columns: repeat(2, 1fr) !important;}
}
@media (max-width: 480px) {
    #top-images {
        grid-template-columns: 1fr !important;
    }
}