@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");

:root {
  /* enpit brand tokens (see the "Claude Workshop UI Mockups" design project) */
  --enpit-blue: #323cd5;
  --enpit-blue-hover: #2a33b8;
  --enpit-blue-wash: rgba(50, 60, 213, 0.16);
  --pragmatic-dark: #101219;
  --pragmatic-dark-soft: #1a1b22;
  --border: #2a2c36;
  --border-soft: #3a3c46;
  --text: #ffffff;
  --text-body: #e6e6e8;
  --muted: #8a8a90;
  --muted-strong: #b3b3b5;
  --success: #7fc98c;
  --danger: #f08a7a;

  --font-sans: "Montserrat", Arial, Helvetica, sans-serif;
  --radius-sm: 4px;
  --radius-md: 12px;
  --transition-ui: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--pragmatic-dark);
  color: var(--text-body);
  font: 16px/1.5 var(--font-sans);
}

a { color: var(--enpit-blue); }

.center {
  min-height: 100vh;
  display: flex;
}

/* ---- Login: split panel ---- */
.split { flex: 1; display: flex; flex-direction: column; }
.split-row { flex: 1; display: flex; min-height: 100vh; }

.brand-panel {
  width: 42%;
  min-width: 320px;
  background: var(--enpit-blue);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.brand-panel img.logo { height: 26px; width: auto; align-self: flex-start; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 3px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--enpit-blue);
  align-self: flex-start;
}

.brand-copy { display: flex; flex-direction: column; gap: 20px; }

.brand-copy h1 {
  margin: 0;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.brand-copy p {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  max-width: 32ch;
}

.brand-panel .footnote { font-size: 15px; color: rgba(255, 255, 255, 0.75); }

.form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 56px;
  gap: 24px;
}

.form-panel form,
.form-panel .form-body {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: auto 0;
}

.form-heading { display: flex; flex-direction: column; gap: 8px; }
.form-heading h2 { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
.form-heading p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--muted-strong); }

.field { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 16px; font-weight: 500; color: #fff; }
.hint { font-size: 15px; color: var(--muted); }
.hint code { font-family: ui-monospace, Menlo, monospace; color: var(--muted-strong); }

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  background: #0e0f14;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 17px;
  transition: var(--transition-ui);
}

input:focus {
  outline: none;
  border-color: var(--enpit-blue);
  box-shadow: 0 0 0 3px var(--enpit-blue-wash);
}

.actions-row { display: flex; align-items: center; gap: 16px; }
.actions-row .aside { font-size: 15px; color: var(--muted); }

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-ui);
  white-space: nowrap;
}

button.primary, .btn.primary {
  background: var(--enpit-blue);
  border: 1px solid var(--enpit-blue);
  color: #fff;
}
button.primary:hover, .btn.primary:hover { background: var(--enpit-blue-hover); }

button.outline, .btn.outline {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-body);
}
button.outline:hover, .btn.outline:hover { border-color: var(--enpit-blue); background: var(--enpit-blue-wash); }

button:disabled { opacity: .5; cursor: not-allowed; }

.error {
  margin: 0;
  color: var(--danger);
  font-size: 14px;
  min-height: 20px;
}

.page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--muted);
}
.page-footer img { height: 18px; width: auto; opacity: .75; }

/* ---- Session select ---- */
.select-page { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }

header.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 40px;
  border-bottom: 1px solid var(--border);
  background: var(--pragmatic-dark-soft);
  flex-wrap: wrap;
}

.top-bar .brand-group { display: flex; align-items: center; gap: 16px; }
.top-bar .brand-group img { height: 20px; width: auto; }
.top-bar .rule { width: 1px; height: 20px; background: var(--border-soft); }
.top-bar .title { font-size: 17px; font-weight: 500; color: #fff; }
.top-bar .meta { font-size: 16px; color: var(--muted); }
.top-bar .usage { font-size: 16px; color: var(--muted); }

.select-body {
  flex: 1;
  padding: 48px 40px;
  display: flex;
  gap: 64px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.select-form { width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; }
.select-form h2 { margin: 0; font-size: 34px; font-weight: 500; letter-spacing: -0.015em; color: #fff; }
.select-form .lead { margin: 0; font-size: 18px; line-height: 1.45; color: var(--muted-strong); }

.existing-col { flex: 1; min-width: 280px; max-width: 460px; display: flex; flex-direction: column; gap: 14px; }

.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.session-list button {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  padding: 14px 16px;
  background: var(--pragmatic-dark-soft);
  border: 1px solid var(--border);
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 400;
  font-size: 16px;
}

.session-list button:hover { border-color: var(--enpit-blue); background: #151622; }
.session-list button.current { border-color: var(--enpit-blue); }
.session-list .meta { color: var(--muted-strong); font-size: 15px; font-family: var(--font-sans); }

.select-page .page-footer { padding: 18px 40px; border-top: 1px solid var(--border); }

/* ---- Terminal ---- */
.terminal-page { display: flex; flex-direction: column; height: 100vh; }

header.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--pragmatic-dark-soft);
  flex-wrap: wrap;
}

.bar .who { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--muted); }
.bar .who img { height: 18px; width: auto; }
.bar .rule { width: 1px; height: 18px; background: var(--border-soft); }
.bar .who strong { color: #fff; font-family: ui-monospace, Menlo, monospace; font-weight: 400; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: rgba(138, 138, 144, 0.12);
  color: var(--muted);
}
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status-chip[data-state="open"] { background: rgba(127, 201, 140, .12); color: var(--success); }
.status-chip[data-state="open"] .dot { background: var(--success); }
.status-chip[data-state="closed"] { background: rgba(240, 138, 122, .12); color: var(--danger); }
.status-chip[data-state="closed"] .dot { background: var(--danger); }

.bar nav { display: flex; align-items: center; gap: 8px; }
.bar nav button, .bar nav a { padding: 7px 14px; font-size: 15px; text-decoration: none; }
.bar nav a.outline { border: 1px solid var(--border-soft); color: var(--text-body); border-radius: var(--radius-sm); transition: var(--transition-ui); }
.bar nav a.outline:hover { border-color: var(--enpit-blue); background: var(--enpit-blue-wash); }

#terminal { flex: 1; min-height: 0; padding: 8px 10px; background: var(--pragmatic-dark); }

footer.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 22px;
  border-top: 1px solid var(--border);
  background: var(--pragmatic-dark-soft);
  font-size: 14px;
  color: var(--muted);
}
footer.status-bar img { height: 15px; width: auto; opacity: .75; }
footer.status-bar .keys { display: flex; align-items: center; gap: 18px; }

@media (max-width: 900px) {
  .split-row { flex-direction: column; min-height: auto; }
  .brand-panel { width: 100%; }
  .select-body { padding: 32px 20px; gap: 32px; }
  .top-bar, header.bar, .page-footer, .select-page .page-footer { padding-left: 20px; padding-right: 20px; }
}