/* Dashboard App — v1.0.0 */
:root {
  --bg:  #0B1929;
  --s1:  #0F2035;
  --s2:  #132644;
  --s3:  #1A2F52;
  --bd:  #1E3A6A;
  --bd2: #274D88;
  --tx:  #f1f1f1;
  --mu:  #7A9CC4;
  --ac:  #3182CE;
  --ac2: #2B6CB0;
  --rd:  #ef4444;
  --gn:  #22c55e;
  --or:  #f7630c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--tx);
  font-size: 14px;
}

/* ── LOGIN ── */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo span {
  font-size: 20px;
  font-weight: 800;
  color: var(--ac);
  letter-spacing: -0.5px;
}

.login-error {
  background: rgba(239,68,68,.15);
  border: 1px solid var(--rd);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--rd);
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--mu);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.form-group input {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--bd2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--tx);
  outline: none;
  transition: border-color .15s;
}

.form-group input:focus {
  border-color: var(--ac);
}

.btn-primary {
  width: 100%;
  background: var(--ac);
  border: none;
  border-radius: 8px;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s;
}

.btn-primary:hover {
  background: var(--ac2);
}

/* ── HEADER ── */
.app-header {
  background: var(--s1);
  border-bottom: 1px solid var(--bd);
  height: 54px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-header-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ac);
}
.app-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-badge {
  background: rgba(49,130,206,.15);
  border: 1px solid var(--ac);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ac);
}
.btn-out {
  background: var(--s3);
  border: 1px solid var(--bd2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mu);
  text-decoration: none;
  transition: all .15s;
}
.btn-out:hover { color: var(--rd); border-color: var(--rd); }

/* ── MAIN ── */
.app-main { padding: 20px 16px; }

/* ── UPLOAD ── */
.upload-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 32px;
}
.upload-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 20px;
}
.upload-meta {
  font-size: 12px;
  color: var(--mu);
  margin-bottom: 16px;
}
.alert {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 20px;
}
.alert-error {
  background: rgba(239,68,68,.15);
  border: 1px solid var(--rd);
  color: var(--rd);
}
.alert-ok {
  background: rgba(34,197,94,.15);
  border: 1px solid var(--gn);
  color: var(--gn);
}
.upload-zone {
  border: 2px dashed var(--bd2);
  border-radius: 10px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
  margin-bottom: 12px;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--ac);
}
.upload-zone input[type="file"] {
  display: none;
}
.upload-icon { font-size: 32px; margin-bottom: 10px; }
.upload-zone p { font-size: 13px; color: var(--mu); }
.upload-filename {
  font-size: 12px;
  color: var(--ac);
  min-height: 18px;
  margin-bottom: 16px;
}