/* Hermes Console login page — Linear-inspired theme.
   Near-black canvas, separation via luminance steps (no borders),
   single indigo accent, Inter with cv01/ss03 features. */

:root {
  --bg: #08090a;                 /* canvas */
  --bg-panel: #0f1011;           /* panels / elevated canvas */
  --bg-surface: #191a1b;         /* cards, modals, toasts */
  --bg-surface-hover: #202124;   /* card hover */
  --bg-subtle: rgba(255, 255, 255, 0.02);       /* columns, report cards */
  --bg-subtle-hover: rgba(255, 255, 255, 0.045);
  --bg-input: rgba(255, 255, 255, 0.04);
  --text-1: #f7f8f8;             /* primary */
  --text-2: #d0d6e0;             /* secondary */
  --text-3: #8a8f98;             /* muted */
  --text-4: #62666d;             /* faint */
  --accent: #5e6ad2;             /* brand indigo */
  --accent-bright: #7170ff;      /* interactive */
  --accent-hover: #828fff;
  --danger: #f2555a;
  --success: #27a644;
  --success-bright: #3ecf8e;
  --hairline: rgba(255, 255, 255, 0.06);
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-dialog: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ring: 0 0 0 2px rgba(113, 112, 255, 0.4);
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv01", "ss03";
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

.hidden { display: none !important; }

/* ---------- views ---------- */

main { padding: 28px 24px 48px; }

.view { max-width: 100%; margin: 0 auto; }

/* ---------- auth (borderless, centered) ---------- */

.auth {
  max-width: 360px;
  margin: 13vh auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.auth-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }

.auth-sub {
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 24px;
}

.auth-sub strong { color: var(--text-1); font-weight: 600; }

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-hint { color: var(--text-4); font-size: 12px; margin-top: 18px; }

.auth input[type="password"] {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--bg-input);
  color: var(--text-1);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: box-shadow 0.12s, background 0.12s;
}

.auth input[type="password"]::placeholder { color: var(--text-4); }
.auth input[type="password"]:focus { box-shadow: var(--ring); background: rgba(255, 255, 255, 0.055); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, opacity 0.12s;
  user-select: none;
  white-space: nowrap;
}

.btn:hover:not(:disabled) { background: var(--bg-subtle-hover); color: var(--text-1); }
.btn:active:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
.btn:disabled { opacity: 0.45; cursor: default; }

.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #6a77dd; color: #fff; }
.btn.primary:active:not(:disabled) { background: #525fc0; }

.btn.wide { width: 100%; padding: 9px 12px; }

/* ---------- toasts ---------- */

.toast-root {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}

.toast {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  box-shadow: var(--shadow-pop);
  animation: pop-in 0.15s ease-out;
  transition: opacity 0.25s, transform 0.25s;
  max-width: min(420px, calc(100vw - 40px));
}

.toast-success { color: var(--success-bright); }
.toast-error { color: var(--danger); }

@keyframes pop-in { from { opacity: 0; transform: scale(0.98) translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  main { padding: 20px 12px 40px; }
  .auth { width: 100%; margin-top: 8vh; }
  .auth-title { font-size: 18px; }
  .auth input[type="password"] { font-size: 16px; padding: 12px 14px; }
  .btn.wide { padding: 12px 14px; font-size: 15px; }
}