:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { margin: 0; padding: 0 0 40px; background: #f6f7f9; color: #1a1a1a; }

header { background: #16324f; color: #fff; padding: 20px 24px; }
header h1 { margin: 0 0 4px; font-size: 20px; }
header .hint { margin: 0; font-size: 13px; color: #cfe0f0; }

main { max-width: 860px; margin: 24px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 24px; }

section { background: #fff; border: 1px solid #dfe3e8; border-radius: 8px; padding: 20px; }
section h2 { margin-top: 0; font-size: 16px; }

.account-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #e2e6ea; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px;
}
.account-card img { width: 130px; height: 44px; border: 1px solid #ccc; background: #fff; }
.account-card input[type="text"], .account-card input[type="password"] {
  padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; width: 130px;
}
.account-card .status { font-size: 12px; padding: 2px 8px; border-radius: 12px; }
.status-PENDING { background: #eee; color: #555; }
.status-LOGGED_IN { background: #d9f2df; color: #1c6b34; }
.status-AUTH_FAILED, .status-NEEDS_RELOGIN { background: #fbe2e2; color: #a12626; }

fieldset { border: 1px solid #e2e6ea; border-radius: 6px; margin-bottom: 14px; }
fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 16px; font-size: 14px; }

.field-row { display: flex; gap: 20px; margin-bottom: 14px; }
.field-row label { display: flex; flex-direction: column; font-size: 13px; gap: 4px; }

button {
  padding: 8px 16px; border-radius: 6px; border: 1px solid #16324f;
  background: #16324f; color: #fff; cursor: pointer; font-size: 14px;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.danger { background: #fff; color: #a12626; border-color: #a12626; margin-left: 8px; }

.progress-bar-track {
  position: relative; height: 22px; background: #eef1f4; border-radius: 11px;
  overflow: hidden; margin: 10px 0; border: 1px solid #dfe3e8;
}
.progress-bar-fill {
  height: 100%; width: 0%; background: #1c6b34; transition: width 0.2s ease;
}
.progress-bar-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #1a1a1a;
}

#progress-log { list-style: none; padding: 0; max-height: 320px; overflow-y: auto; font-size: 13px; }
#progress-log li { padding: 4px 8px; border-bottom: 1px solid #eee; }
#progress-log li.error { color: #a12626; }
#progress-log li.warning { color: #a1631f; }

.output-dir-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-bottom: 14px; }
.output-dir-field input[type="text"] { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; }

#download-zip-link {
  display: inline-block; margin-top: 12px; padding: 8px 16px; background: #1c6b34;
  color: #fff; border-radius: 6px; text-decoration: none;
}

/* --- Header: thêm nút đăng xuất --- */
header .header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
header .header-bar .logout-btn {
  background: transparent; color: #fff; border-color: #fff; font-size: 13px;
  padding: 6px 12px; flex-shrink: 0;
}
header .header-bar .logout-btn:hover { background: rgba(255,255,255,0.1); }

/* --- Trang đăng nhập --- */
.login-main {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: linear-gradient(135deg, #16324f 0%, #1f4e7a 100%);
}
.login-box {
  background: #fff; border-radius: 10px; padding: 32px 28px;
  width: 100%; max-width: 360px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.login-box h1 { margin: 0 0 4px; font-size: 18px; color: #16324f; }
.login-box .hint { margin: 0 0 20px; font-size: 13px; color: #667; }
.login-box label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: #333; margin-bottom: 12px;
}
.login-box input[type="text"],
.login-box input[type="password"] {
  padding: 10px 12px; border: 1px solid #c9d0d8; border-radius: 6px; font-size: 14px;
}
.login-box input:focus { outline: 2px solid #1f4e7a; outline-offset: -1px; }
.login-box button[type="submit"] {
  width: 100%; margin-top: 8px; padding: 10px 16px; font-size: 14px;
}
.login-error {
  background: #fbe2e2; color: #a12626; border: 1px solid #f1bcbc;
  border-radius: 6px; padding: 8px 12px; font-size: 13px; margin: 0 0 14px;
}