:root {
--midnight-navy:#191049;
--poster-navy:#0b0a46;
--royal-indigo:#384b8b;
--light-blue:#99ccff;
--off-white:#e6e8f5;
--white:#ffffff;
--mist-indigo:#d8dbeb;
--grey-indigo:#9f9db1;
--accent-pink:#ff3366;
--accent-pink-hover:#e62e5c;
--text-grey:#444444;
--text-light:#eeeeee;
--text-muted:#cccccc;
--border-light:#eeeeee;
--border-grey:#e5e5e5;
--border-medium:#bdbdbd;}

*,*::before,*::after {box-sizing:border-box;}
html,body {margin:0;padding:0;font-family:Arial,sans-serif;background-color:var(--off-white);color:var(--midnight-navy);overflow-x:hidden;}
button,select,input {font-family:inherit;}
button {cursor:pointer;}
[hidden] {display:none !important;}


/* DASHBOARD MENU */

.dashboard-menu-content {display:flex;flex-direction:column;gap:10px;padding:20px;}
.dashboard-menu-content h2 {margin:0 0 5px;color:var(--white);font-size:20px;}
.dashboard-menu-content label {font-size:12px;font-weight:bold;color:var(--text-muted);}
.dashboard-menu-content select {width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--border-medium);border-radius:5px;background:var(--white);color:var(--midnight-navy);font-size:14px;}
.dashboard-menu-content button {min-height:40px;padding:10px 15px;border:none;border-radius:5px;background:var(--accent-pink);color:var(--white);font-weight:bold;font-size:13px;text-transform:uppercase;}
.dashboard-menu-content button:hover {background:var(--accent-pink-hover);}
.dashboard-menu-content input[type="file"] {display:none;}
.file-upload-btn {display:flex;align-items:center;justify-content:center;min-height:40px;padding:10px 15px;border-radius:5px;background:var(--accent-pink);color:var(--white);font-weight:bold;font-size:13px;text-transform:uppercase;cursor:pointer;}
.file-upload-btn:hover {background:var(--accent-pink-hover);}
#fileName {display:block;padding:5px 0;color:var(--text-muted);font-size:12px;word-break:break-word;}


/* STATUS */

.status-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 0;margin:5px 0;border-top:1px solid rgba(255,255,255,0.15);border-bottom:1px solid rgba(255,255,255,0.15);}
.status-grid div {color:var(--text-muted);font-size:12px;}
.status-grid span {display:block;margin-top:2px;color:var(--white);font-size:14px;font-weight:bold;}


/* DASHBOARD */

.content-wrap {max-width:1200px;margin:0 auto;padding:30px 20px 50px;}
.section-title {margin:0 0 20px;padding-bottom:10px;border-bottom:2px solid var(--midnight-navy);color:var(--midnight-navy);font-size:20px;}


/* KPI */

.kpi-grid {display:grid;grid-template-columns:1fr;gap:15px;margin-bottom:35px;}
.kpi-card {background:var(--white);border-radius:8px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.08);border-top:4px solid var(--midnight-navy);}
.kpi-title {margin:0 0 8px;color:var(--text-grey);font-size:13px;font-weight:bold;text-transform:uppercase;}
.kpi-value {margin:0;color:var(--midnight-navy);font-size:30px;font-weight:bold;line-height:1.1;}


/* PLATFORM ACCENTS */

.platform-facebook {border-top-color:#1877f2;}
.platform-instagram {border-top-color:#e1306c;}
.platform-tiktok {border-top-color:#111111;}
.platform-youtube {border-top-color:#ff0000;}
.platform-x {border-top-color:#000000;}
.platform-whatsapp {border-top-color:#25d366;}
.platform-website {border-top-color:var(--accent-pink);}


/* CHARTS */

.chart-grid {display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:35px;}
.chart-card {background:var(--white);border-radius:8px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.08);min-width:0;margin-bottom:35px;}
.chart-card.large {width:100%;}
.chart-title {margin:0 0 15px;color:var(--midnight-navy);font-size:17px;font-weight:bold;}
.chart-wrap {position:relative;width:100%;height:300px;}
.chart-wrap canvas {width:100% !important;height:100% !important;max-width:100%;}


/* DATA CARDS */

.data-card {background:var(--white);border-radius:8px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.08);}
.data-card h3 {margin:0 0 12px;color:var(--midnight-navy);font-size:17px;}
.data-row {display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--border-light);font-size:14px;}
.data-row:last-child {border-bottom:none;}
.data-label {color:var(--text-grey);}
.data-value {color:var(--midnight-navy);font-weight:bold;}


/* EMPTY STATE */

.empty-state {padding:40px 20px;text-align:center;color:var(--grey-indigo);background:var(--white);border-radius:8px;border:1px dashed var(--border-medium);}
.empty-state h3 {margin:0 0 8px;color:var(--midnight-navy);}
.empty-state p {margin:0;font-size:14px;}


/* MODALS */

.modal {position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(11,10,70,0.65);}
.modal.show {display:flex;}
.modal-content {width:100%;max-width:600px;max-height:90vh;overflow-y:auto;background:var(--white);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.3);padding:20px;}
.modal-content h2 {margin:0 0 15px;color:var(--midnight-navy);font-size:20px;}
.modal-content p {margin:0 0 20px;color:var(--text-grey);line-height:1.5;}
.modal-content button {min-height:38px;padding:8px 16px;border:none;border-radius:5px;background:var(--accent-pink);color:var(--white);font-weight:bold;}
.modal-content button:hover {background:var(--accent-pink-hover);}


/* LOADING */

#loadingOverlay {position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(11,10,70,0.85);color:var(--white);}
#loadingOverlay.show {display:flex;}
.loader {width:30px;height:30px;border:3px solid rgba(255,255,255,0.25);border-top-color:var(--accent-pink);border-radius:50%;animation:spin 0.8s linear infinite;}
#loadingMessage {margin-top:15px;font-size:14px;}
@keyframes spin {to {transform:rotate(360deg);}}


/* FOOTER */

.footer {padding:20px;background:var(--midnight-navy);color:var(--text-muted);text-align:center;font-size:12px;}


/* RESPONSIVE */

@media (min-width:600px) {
.kpi-grid {grid-template-columns:repeat(2,1fr);}
.chart-grid {grid-template-columns:repeat(2,1fr);}
}

@media (min-width:900px) {
.kpi-grid {grid-template-columns:repeat(5,1fr);}
.chart-wrap {height:320px;}
}

@media (max-width:599px) {
.content-wrap {padding:25px 15px 40px;}
.section-title {font-size:18px;}
.kpi-value {font-size:26px;}
.chart-wrap {height:280px;}
}


/* PRINT / PDF */

@media print {
body {background:var(--white);}
header,nav,footer,.modal,#loadingOverlay {display:none !important;}
.content-wrap {max-width:none;padding:20px;}
.chart-card,.kpi-card,.data-card {box-shadow:none;break-inside:avoid;}
}