:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#06b6d4;
  --muted:#94a3b8;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}
*{box-sizing:border-box}
body{background:#0b1220;color:#e6eef8;margin:0;padding:20px}
.container{max-width:1100px;margin:0 auto}
header h1{margin:0 0 4px;font-size:22px}
header p{margin:0 0 16px;color:var(--muted)}
.uploader{display:flex;gap:16px;flex-wrap:wrap}
.card{background:linear-gradient(180deg,#071022, #081426);padding:16px;border-radius:10px;flex:1;min-width:260px}
.card h2{margin:0 0 8px;font-size:16px}
.file-list{margin-top:8px;color:var(--muted);font-size:13px}
.file-row{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;margin:6px 0;background:rgba(255,255,255,0.02);border-radius:6px}
.file-row .meta{font-size:13px;color:var(--muted)}
.actions{display:flex;gap:8px;align-items:center;margin:16px 0}
.status{color:var(--muted);padding:8px 12px;background:rgba(255,255,255,0.02);border-radius:8px}
button{background:var(--accent);color:#042233;border:0;padding:10px 14px;border-radius:8px;font-weight:600;cursor:pointer}
button[disabled]{opacity:0.4;cursor:not-allowed}
.results{background:#071225;padding:12px;border-radius:10px;color:var(--muted)}
.table-wrap{overflow:auto;margin-top:12px}
table{width:100%;border-collapse:collapse;color:#e6eef8}
th,td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.03);text-align:left;font-size:13px}
th{position:sticky;top:0;background:#081426;font-weight:700}
th.sortable{cursor:pointer;user-select:none;transition:background 0.2s}
th.sortable:hover{background:#0a1a34}
td.num{text-align:right}
th.num{text-align:right}
.roi-red{background:#4a0b0b}
.roi-yellow{background:#3a2e0b}
.roi-green{background:#0f2a16}
.summary{margin-bottom:12px;color:var(--muted)}

/* Overall Stats Grid */
.overall-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:8px}
@media(max-width:900px){.overall-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.overall-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card{background:linear-gradient(135deg,#0a1628,#0d1a2d);padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.05);text-align:center}
.stat-label{font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
.stat-value{font-size:16px;font-weight:600;color:#e6eef8}
.stat-positive{color:#4ade80}
.stat-negative{color:#f87171}
.stat-warning{color:#fbbf24}
.view-toggle{display:flex;gap:8px;margin:16px 0}
.view-toggle button{flex:1;max-width:200px}
.view-toggle button.active{background:#0f5a6b;border:2px solid var(--accent)}
.daywise-section{background:#071225;padding:12px;border-radius:10px;margin-top:16px}
.combined-section{background:#071225;padding:12px;border-radius:10px;margin-top:16px}
.combined-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:16px;padding:12px;background:rgba(255,255,255,0.02);border-radius:8px}
.daywise-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:16px;padding:12px;background:rgba(255,255,255,0.02);border-radius:8px}
.date-range{display:flex;gap:12px;align-items:center}
.date-range label{color:var(--muted);font-size:13px}
.date-range input{padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:#0b1220;color:#e6eef8;font-size:13px}
.metrics{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.metrics label{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px}
.metrics input[type="checkbox"]{cursor:pointer}
.date-header{background:#0a1a34;border-left:2px solid rgba(255,255,255,0.1);text-align:center;vertical-align:top;padding:8px 6px}
.date-header-content{display:flex;flex-direction:column;gap:2px;align-items:center}
.date-primary{font-size:13px;color:#e6eef8;margin-bottom:4px}
.date-metrics-primary,.date-metrics-secondary{font-size:10px;color:var(--muted);font-weight:normal;text-align:left}
.date-metrics-primary div,.date-metrics-secondary div{padding:1px 0;white-space:nowrap}
.date-metrics-secondary[hidden]{display:none}
.view-more-btn{background:rgba(255,255,255,0.1);border:none;color:var(--accent);font-size:9px;padding:2px 6px;border-radius:4px;cursor:pointer;margin-top:4px}
.view-more-btn:hover{background:rgba(255,255,255,0.15)}
.metric-header{font-size:11px;color:var(--accent);background:#0a1a34}
footer{margin-top:18px;color:var(--muted);font-size:12px}

/* Settings Section */
.settings-toggle{margin-top:8px}
.settings-toggle button{background:#1a2a40;font-size:12px;padding:6px 12px}
.settings-section{background:#071225;padding:16px;border-radius:10px;margin-bottom:16px}
.settings-section h3{margin:0 0 12px;font-size:14px;color:var(--accent)}
.settings-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.settings-controls label{color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:4px}
.settings-controls input{padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:#0b1220;color:#e6eef8;font-size:13px;width:120px}
.settings-controls button{margin-top:18px}

/* Date Picker Modal */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal[hidden]{display:none}
.modal-content{background:#0b1220;padding:24px;border-radius:12px;min-width:300px;border:1px solid rgba(255,255,255,0.1)}
.modal-content h3{margin:0 0 16px;font-size:16px;color:#e6eef8}
.modal-content input{width:100%;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:#071225;color:#e6eef8;font-size:14px}
.modal-actions{display:flex;gap:12px;margin-top:16px;justify-content:flex-end}
.modal-actions button:first-child{background:#2a3a50}

/* Flatpickr customization */
.flatpickr-calendar{background:#0b1220 !important;border:1px solid rgba(255,255,255,0.1) !important;box-shadow:0 4px 20px rgba(0,0,0,0.4) !important}
.flatpickr-months .flatpickr-month{background:#071225 !important;color:var(--accent) !important}
.flatpickr-current-month .flatpickr-monthDropdown-months{background:#071225 !important;color:#e6eef8 !important}
.flatpickr-weekdays{background:#071225 !important}
.flatpickr-day{color:#e6eef8 !important}
.flatpickr-day.selected{background:var(--accent) !important;border-color:var(--accent) !important;color:#042233 !important}
.flatpickr-day:hover{background:#1a2a40 !important}

/* GA Modal */
.ga-modal-content{min-width:320px}
.ga-modal-date{margin:0 0 16px;color:var(--muted);font-size:14px}
.ga-modal-date strong{color:#e6eef8}
.ga-form{display:flex;flex-direction:column;gap:12px}
.ga-form label{color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:4px}
.ga-form input{padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:#071225;color:#e6eef8;font-size:14px}

/* GA Data in Date Headers */
.date-ga-section{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(255,255,255,0.1)}
.date-ga-section.has-data{border-top-color:rgba(74,222,128,0.3)}
.ga-header{font-size:10px;color:var(--accent);font-weight:600;margin-bottom:4px}
.date-ga-section.has-data .ga-header{color:#4ade80}
.ga-metrics,.ga-calculated{font-size:9px;color:var(--muted);text-align:left}
.ga-metrics div,.ga-calculated div{padding:1px 0;white-space:nowrap}
.ga-calculated{margin-top:4px;padding-top:4px;border-top:1px dotted rgba(255,255,255,0.05)}
.ga-calculated div{color:#a5b4fc}
.ga-no-data{font-size:9px;color:var(--muted);font-style:italic;padding:4px 0}
.add-ga-btn{background:rgba(6,182,212,0.2);border:1px solid var(--accent);color:var(--accent);font-size:9px;padding:3px 8px;border-radius:4px;cursor:pointer;margin-top:6px}
.add-ga-btn:hover{background:rgba(6,182,212,0.3)}
.date-ga-section.has-data .add-ga-btn{background:rgba(74,222,128,0.15);border-color:#4ade80;color:#4ade80}
.date-ga-section.has-data .add-ga-btn:hover{background:rgba(74,222,128,0.25)}