*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:'Poppins',Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:#1f2937;background:#f8fafc
}

:root{
  --bg:#f8fafc;--card:#ffffff;--text:#0f172a;--muted:#6b7280;--brand:#e11d48;--line:#e5e7eb;
}

[hidden] { display: none !important; }

.container{
  max-width:min(1400px,94vw);
  margin:0 auto;
  padding:20px;
}

h1{margin:0 0 4px;font-size:28px;color:var(--text);letter-spacing:.2px}
.subtitle{margin:0 0 16px;color:var(--muted)}

#upload-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 8px}

/* Enhanced File Input Styling */
#file-input {
  height: 50px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
}
#file-input:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}
#file-input::file-selector-button {
  height: 100%;
  margin-right: 12px;
  border: none;
  background: #f1f5f9;
  padding: 0 16px;
  border-radius: 6px;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
}
#file-input::file-selector-button:hover {
  background: #e2e8f0;
  color: #000;
}

/* Upload Button & Spinner */
#upload-btn {
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
}
#upload-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
#upload-btn:active {
  transform: translateY(0);
}

/* Spinner Animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

#upload-btn.loading {
  opacity: 0.8;
  pointer-events: none;
  cursor: wait;
}

#upload-btn.loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* Download Button (NEW) */
#download-btn {
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: #10b981; /* Emerald Green */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
#download-btn:hover {
  background: #059669;
  transform: translateY(-1px);
}
#download-btn:active {
  transform: translateY(0);
}

/* Message Box */
.message{
  padding:12px;margin:0 0 20px;border-radius:6px;font-size:14px;
  display:flex;align-items:center;gap:8px
}
.message.error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.message.info{background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}

/* Summary & Cards */
.summary{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.05)
}
.section-title{
  margin:0 0 16px;font-size:18px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:8px
}
.section-title::before{
  content:'';display:block;width:4px;height:18px;background:var(--brand);border-radius:2px
}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px 24px}
.label-row{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:8px 0}
.label-row:last-child{border-bottom:none}
.label-row span{color:var(--muted);font-size:14px}
.label-row strong{color:var(--text);font-weight:600;text-align:right}

/* Tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;padding:10px;background:#f8fafc;color:var(--muted);
  font-weight:600;border-bottom:2px solid var(--line);white-space:nowrap
}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafafa}

/* Badges */
.badge{
  display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;
  text-transform:uppercase
}
.badge-a{background:#dcfce7;color:#166534}
.badge-b{background:#fef9c3;color:#854d0e}
.badge-c{background:#fee2e2;color:#991b1b}
.badge.warn { background: #fff7ed; color: #c2410c; }
.badge.large { font-size: 24px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 10px; }

.centered-message { text-align: center; padding: 40px; color: var(--muted); }