@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #0B1F1C;
  --surface: #0F3D34;
  --surface-2: #123F36;
  --line: rgba(232, 245, 228, 0.12);
  --line-strong: rgba(232, 245, 228, 0.22);
  --text: #E8F5E4;
  --text-muted: #8FA69C;
  --accent: #4ADE9E;
  --accent-dim: #2F8F6C;
  --gold: #F0C36D;
  --gold-dim: #B8934C;
  --danger: #F28B82;
  --radius: 14px;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--line);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 74, 222, 158;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: #83efbc;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(74, 222, 158, 0.06), transparent 35rem),
    radial-gradient(circle at 90% 85%, rgba(240, 195, 109, 0.05), transparent 38rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--bg); }
a { color: var(--accent); }

h1, h2, h3, h4, h5, h6, .navbar-brand {
  color: var(--text);
  font-family: var(--font-display);
}

.container { max-width: 1080px; }

.navbar.navbar-light.bg-light {
  background: rgba(11, 31, 28, 0.88) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.navbar .container-fluid { max-width: 1080px; padding: 0 32px; }
.navbar-brand { font-size: 20px; font-weight: 600; }
.navbar-brand img { object-fit: contain; }
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link { color: var(--text); }
.navbar-light .navbar-nav .nav-link { font-size: 13px; font-weight: 500; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus { color: var(--accent); }
.navbar-light .navbar-toggler { border-color: var(--line-strong); }
.navbar-light .navbar-toggler-icon { filter: invert(88%) sepia(12%) saturate(400%) hue-rotate(65deg); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.card-body { padding: 28px; }
.card-title, .card h3, .card h4, .card h5, .card h6 { color: var(--text); }
.text-muted, small.text-muted { color: var(--text-muted) !important; }

.form-label { color: var(--text); font-size: 14px; font-weight: 500; }

.form-control,
.form-select {
  color: var(--text);
  background-color: rgba(11, 31, 28, 0.65);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 13px;
}

.form-control::placeholder { color: var(--text-muted); opacity: 0.8; }
.form-control:focus, .form-select:focus {
  color: var(--text);
  background-color: rgba(11, 31, 28, 0.85);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(74, 222, 158, 0.14);
}

.btn {
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
}

.btn-primary {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover, .btn-primary:focus {
  color: var(--bg);
  background: #83efbc;
  border-color: #83efbc;
}

.btn-outline-primary, .btn-outline-success {
  color: var(--accent);
  border-color: rgba(74, 222, 158, 0.45);
}

.btn-outline-primary:hover, .btn-outline-success:hover {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.btn-outline-secondary, .btn-secondary {
  color: var(--text);
  background: transparent;
  border-color: var(--line-strong);
}

.btn-outline-secondary:hover, .btn-secondary:hover {
  color: var(--text);
  background: var(--surface-2);
}

.btn-danger, .btn-outline-danger {
  color: var(--danger);
  border-color: rgba(242, 139, 130, 0.4);
}

.btn-danger:hover, .btn-outline-danger:hover {
  color: #fff;
  background: #a94442;
  border-color: #a94442;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line);
  margin-top: 18px;
  vertical-align: middle;
}

.table thead th {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom-color: var(--line-strong);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(232, 245, 228, 0.035);
  color: var(--text);
}

.badge { border-radius: 6px; font-family: var(--font-mono); font-size: 10px; padding: 5px 8px; }
.badge.bg-success { color: var(--accent) !important; background: rgba(74, 222, 158, 0.12) !important; }
.badge.bg-danger { color: var(--danger) !important; background: rgba(242, 139, 130, 0.12) !important; }

.alert {
  border-radius: 10px;
  border-width: 1px;
  font-size: 14px;
}

/* Feedbacks use light surfaces so their messages remain readable in every upload flow. */
.alert-info, .alert-light, .alert-secondary {
  background: #cff4fc;
  border-color: #b6effb;
  color: #000 !important;
}

.alert-warning {
  background: #fff3cd;
  border-color: #ffecb5;
  color: #000 !important;
}

.alert-danger {
  background: #f8d7da;
  border-color: #f1aeb5;
  color: #000 !important;
}

.alert-success {
  background: #d1e7dd;
  border-color: #a3cfbb;
  color: #000 !important;
}

#chatMessages {
  background: rgba(11, 31, 28, 0.65) !important;
  border: 1px solid var(--line);
}

@media (max-width: 640px) {
  .navbar .container-fluid, .container { padding-left: 20px; padding-right: 20px; }
  .card-body { padding: 22px; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
}
<style>
.file-upload {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-upload input[type="file"] {
    display: none;
}

.file-upload label {
    cursor: pointer;
    margin: 0;
}

#file-name {
    color: #6c757d;
    font-size: 0.9rem;
}
</style>