:root {
  --dark: #1f2c45;
  --teal: #008b8b;
  --gold: #cfa44a;
  --light: #f5f7fa;
  --muted: #627086;
  --white: #ffffff;
  --danger: #ae4346;
  --border: #e2e8f0;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: radial-gradient(circle at top right, rgba(0,139,139,.14), transparent 30%), var(--light);
  color: var(--dark);
}
.page { width: min(1100px, 92vw); margin: 0 auto; padding: 48px 0; }
.hero { text-align: center; padding: 34px 20px 26px; }
.badge {
  display: inline-block;
  background: rgba(207,164,74,.14);
  color: var(--gold);
  border: 1px solid rgba(207,164,74,.38);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  margin-bottom: 18px;
}
h1 { margin: 0; font-size: clamp(32px, 6vw, 54px); line-height: 1.1; }
.hero p { max-width: 720px; margin: 18px auto 0; color: var(--muted); font-size: 18px; line-height: 1.8; }
.card {
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(31,44,69,.10);
  padding: 28px;
}
.upload-card { margin-top: 18px; }
.dropzone {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 230px;
  border: 2px dashed rgba(0,139,139,.38);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0,139,139,.06), rgba(207,164,74,.06));
  cursor: pointer;
  padding: 30px;
}
.dropzone input { display: none; }
.icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--teal);
  color: white;
  font-size: 28px;
  margin-bottom: 16px;
}
.dropzone strong { font-size: 22px; }
.dropzone small { color: var(--muted); margin-top: 10px; line-height: 1.7; }
button {
  width: 100%;
  margin-top: 18px;
  border: 0;
  border-radius: 18px;
  padding: 16px 20px;
  background: var(--dark);
  color: white;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(31,44,69,.22); }
.alert {
  padding: 14px 18px;
  border-radius: 16px;
  margin-bottom: 16px;
  font-weight: 700;
}
.alert a { color: inherit; text-decoration: underline; }
.error { background: rgba(174,67,70,.12); color: var(--danger); }
.success { background: rgba(0,139,139,.12); color: var(--teal); }
.grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.metric {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(31,44,69,.08);
}
.metric span { color: var(--muted); display: block; margin-bottom: 8px; }
.metric strong { color: var(--teal); font-size: 30px; }
.notes { margin-top: 32px; }
.notes h2 { margin-bottom: 16px; }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.notes-grid > div {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 20px;
}
.notes-grid h3 { margin-top: 0; color: var(--gold); }
.notes-grid p { color: var(--muted); line-height: 1.8; }
@media (max-width: 800px) {
  .grid, .notes-grid { grid-template-columns: 1fr; }
}

.processing-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(31, 44, 69, .58);
  backdrop-filter: blur(8px);
  z-index: 1000;
  padding: 24px;
}
.processing-overlay.show { display: flex; }
.processing-card {
  width: min(460px, 94vw);
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 28px;
  padding: 34px 28px;
  box-shadow: 0 30px 90px rgba(0,0,0,.24);
}
.processing-card h2 { margin: 18px 0 8px; color: var(--dark); }
.processing-card p { margin: 0; color: var(--muted); line-height: 1.8; }
.spinner {
  width: 68px;
  height: 68px;
  margin: 0 auto;
  border-radius: 50%;
  border: 6px solid rgba(0,139,139,.18);
  border-top-color: var(--teal);
  animation: spin 1s linear infinite;
}
button:disabled {
  opacity: .75;
  cursor: wait;
  transform: none;
  box-shadow: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.dropzone.has-files {
  border-color: rgba(0,139,139,.78);
  background: linear-gradient(135deg, rgba(0,139,139,.13), rgba(207,164,74,.10));
  box-shadow: inset 0 0 0 1px rgba(0,139,139,.08);
}
.dropzone.drag-over {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(207,164,74,.16), rgba(0,139,139,.10));
}
.dropzone.has-files .icon {
  background: var(--gold);
}
.selected-files {
  width: 100%;
  margin-top: 18px;
}
.selected-files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.selected-files-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(0,139,139,.18);
  border-radius: 16px;
  padding: 12px 14px;
}
.file-status {
  flex: 0 0 auto;
  color: var(--teal);
  background: rgba(0,139,139,.10);
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 800;
  font-size: 12px;
}
.file-info {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.file-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.file-info small {
  color: var(--muted);
  margin: 0;
}

.upload-warning {
  width: 100%;
  margin-top: 14px;
  background: rgba(174,67,70,.10);
  color: var(--danger);
  border: 1px solid rgba(174,67,70,.20);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 10px 0 20px;
}
.tab-button {
  margin-top: 0;
  background: rgba(255,255,255,.9);
  color: var(--dark);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(31,44,69,.08);
}
.tab-button.active {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.form-row label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}
.form-row input,
.form-row select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--white);
  color: var(--dark);
  font-size: 16px;
  font-family: inherit;
}
.periodic-dropzone { min-height: 210px; }
.processing-overlay.visible { display: flex; }
.dropzone.drop-error {
  border-color: var(--danger);
  background: rgba(174,67,70,.09);
}
@media (max-width: 800px) {
  .tabs, .form-row { grid-template-columns: 1fr; }
}