/* ── RAC-PyMOL · styles.css ───────────────────────────────────
   Palette derived from batch.py Vis (dark origin reversed to light)
   BG=#ffffff  SURF=#f5edf7  HI=#AB0061  HI2=#8b0a5e
   GRID=#4a1a6b  MUTE=#b078a8  FG=#1c0524
   ──────────────────────────────────────────────────────────── */

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

:root {
  --bg:      #ffffff;
  --surf:    #f5edf7;
  --border:  #b078a8;
  --hi:      #AB0061;
  --hi2:     #8b0a5e;
  --fg:      #1c0524;
  --mute:    #b078a8;
  --cbe-bg:  #1c0524;
  --cbe-fg:  #ffffff;
  --cbe-hi:  #AB0061;
  --cbe-dim: #4a1a6b;
  --green:   #166534;
}

html, body {
  height: 100vh; width: 100vw; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

/* ── outer shell ─────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; width: 100vw; }

/* ── header ──────────────────────────────────────────────── */
#header {
  flex-shrink: 0; padding: 0 28px; height: 48px;
  background: var(--surf); border-bottom: 2px solid var(--hi);
  display: flex; align-items: center; gap: 14px;
}
#header h1 {
  font-size: 17px; font-weight: 800; color: var(--hi);
  letter-spacing: -0.03em; font-family: 'Inter', sans-serif;
}
#header .sub {
  font-size: 10px; color: var(--mute);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
}
#header .dot { color: var(--border); }

/* ── body: two equal panes ───────────────────────────────── */
#body { flex: 1 1 0; min-height: 0; display: flex; }

/* ── LEFT pane ───────────────────────────────────────────── */
#left {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--border);
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 20% 80%, #f5edf7 0%, #ffffff 70%);
}

#scene-icon {
  width: 88%;
  opacity: 0.84; pointer-events: none;
  display: block; margin: 0 auto 2px;
}

#form-card {
  position: relative; z-index: 1;
  width: 80%; max-width: 480px;
  display: flex; flex-direction: column; gap: 18px;
}

.form-heading { margin-bottom: 4px; }
.form-heading h2 {
  font-size: 22px; font-weight: 800; color: var(--fg);
  letter-spacing: -0.04em; line-height: 1.1;
}
.form-heading h2 span { color: var(--hi); }
.form-heading p {
  margin-top: 5px; font-size: 11px; color: var(--mute);
  font-weight: 500; letter-spacing: 0.01em; line-height: 1.5;
}

.field { display: flex; flex-direction: column; gap: 5px; }

label {
  font-size: 10px; font-weight: 700; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-family: 'Inter', sans-serif;
}
.field-subtitle {
  font-size: 10px; color: var(--mute); line-height: 1.5;
  font-weight: 400;
}
input[type=text] {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 7px;
  background: var(--surf); color: var(--fg);
  font-size: 13px; font-family: 'JetBrains Mono', monospace;
  font-weight: 400; outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
input[type=text]:focus {
  border-color: var(--hi);
  box-shadow: 0 0 0 3px rgba(171,0,97,0.1);
}
input[type=text]::placeholder { color: var(--border); }

#cta {
  padding: 11px 0; background: var(--hi); color: #fff;
  border: none; border-radius: 7px; width: 100%;
  font-size: 14px; font-weight: 700; font-family: 'Inter', sans-serif;
  cursor: pointer; letter-spacing: 0.04em;
  transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
  box-shadow: 0 4px 18px rgba(171,0,97,0.25);
}
#cta:hover {
  background: var(--hi2);
  box-shadow: 0 6px 24px rgba(139,10,94,0.35);
  transform: translateY(-1px);
}
#cta:active { transform: translateY(0); }
#cta:disabled { background: var(--mute); box-shadow: none; cursor: not-allowed; transform: none; }
#cta.local { background: var(--hi); box-shadow: 0 4px 18px rgba(171,0,97,0.25); }
#cta.local:hover { background: var(--hi2); box-shadow: 0 6px 24px rgba(139,10,94,0.35); }

/* ── RIGHT pane ──────────────────────────────────────────── */
#right {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse 65% 55% at 80% 20%, #f5edf7 0%, #ffffff 65%);
}

#cbe-wrap {
  position: relative; z-index: 1;
  width: 80%; max-width: 480px;
  display: flex; flex-direction: column;
  border: 1.5px solid var(--border); border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(28,5,36,0.07);
}

/* title bar */
#cbe-label {
  background: var(--surf); padding: 8px 14px;
  font-size: 12px; font-weight: 700; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.1em;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Inter', sans-serif;
}
#cbe-label .cbe-status {
  font-size: 11px; font-weight: 500; color: var(--border);
  text-transform: none; letter-spacing: 0; font-family: 'JetBrains Mono', monospace;
}

/* dark console */
#cbe {
  height: 200px; background: var(--cbe-bg);
  color: var(--cbe-fg); font-family: 'JetBrains Mono', monospace; font-size: 13px;
  line-height: 1.65; padding: 10px 14px; overflow-y: auto; position: relative;
  white-space: pre-wrap; word-break: break-all;
}
#cbe .prompt { color: var(--cbe-hi); font-weight: 600; }
#cbe-placeholder { color: #ffffff; opacity: 0.32; font-style: italic; padding: 0; margin: 0; display: block; }

/* event log */
#event-log {
  background: var(--surf); border-top: 1px solid var(--border);
  padding: 8px 14px; height: 96px; overflow-y: auto;
  font-size: 12.5px; font-family: 'JetBrains Mono', monospace;
  line-height: 1.65; color: var(--mute);
}
.ev-line { padding: 1px 0; }
.ev-line.ok   { color: var(--green); }
.ev-line.err  { color: #b91c1c; }
.ev-line.info { color: var(--hi); }

/* CBE action buttons */
#cbe-actions {
  display: none; padding: 6px 10px;
  gap: 7px; align-items: center; justify-content: flex-end;
  background: var(--cbe-bg); border-top: 1px solid #3a1050;
}
.cbe-btn-main {
  padding: 5px 14px; background: var(--hi); color: #fff;
  border: none; border-radius: 5px; font-size: 11px; font-weight: 700;
  font-family: 'Inter', sans-serif; cursor: pointer;
  transition: background 0.15s;
}
.cbe-btn-main:hover { background: var(--hi2); }
.cbe-btn-main:disabled { background: var(--cbe-dim); cursor: not-allowed; }
.cbe-btn-icon {
  padding: 5px 9px; background: #270833; color: var(--cbe-hi);
  border: 1px solid var(--cbe-hi); border-radius: 5px;
  font-size: 14px; cursor: pointer; transition: background 0.15s;
}
.cbe-btn-icon:hover { background: var(--hi); color: #fff; }
.cbe-btn-icon:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── PAT overlay ────────────────────────────────────────── */
#pat-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(28,5,36,0.55); backdrop-filter: blur(4px);
  z-index: 101; align-items: center; justify-content: center;
}
#pat-overlay.show { display: flex; }
#pat-box {
  background: #fff; border: 2px solid var(--hi);
  border-radius: 12px; padding: 26px 30px; max-width: 360px; width: 90%;
  box-shadow: 0 12px 48px rgba(171,0,97,0.2);
}
#pat-box h2 {
  font-size: 16px; font-weight: 800; color: var(--hi);
  margin-bottom: 8px; letter-spacing: -0.02em;
  font-family: 'Inter', sans-serif;
}
#pat-box p {
  font-size: 12px; color: var(--mute); margin-bottom: 14px; line-height: 1.6;
}
#pat-box code {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: var(--surf); padding: 1px 5px; border-radius: 3px;
}
.pat-field {
  display: flex; align-items: center; gap: 6px;
}
.pat-field input[type=password],
.pat-field input[type=text] {
  flex: 1; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 7px;
  background: var(--surf); color: var(--fg);
  font-size: 13px; font-family: 'JetBrains Mono', monospace;
  outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.pat-field input:focus {
  border-color: var(--hi); box-shadow: 0 0 0 3px rgba(171,0,97,0.1);
}
.pat-eye {
  background: none; border: 1.5px solid var(--border); border-radius: 6px;
  padding: 6px 8px; cursor: pointer; font-size: 14px; line-height: 1;
  color: var(--mute); transition: border-color 0.15s;
  flex-shrink: 0;
}
.pat-eye:hover { border-color: var(--hi); color: var(--hi); }

/* ── confirm overlay ─────────────────────────────────────── */
#confirm-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(28,5,36,0.55); backdrop-filter: blur(4px);
  z-index: 100; align-items: center; justify-content: center;
}
#confirm-overlay.show { display: flex; }
#confirm-box {
  background: #fff; border: 2px solid var(--hi);
  border-radius: 12px; padding: 26px 30px; max-width: 380px; width: 90%;
  box-shadow: 0 12px 48px rgba(171,0,97,0.2);
}
#confirm-box h2 {
  font-size: 16px; font-weight: 800; color: var(--hi);
  margin-bottom: 8px; letter-spacing: -0.02em;
  font-family: 'Inter', sans-serif;
}
#confirm-box p {
  font-size: 12px; color: var(--mute); margin-bottom: 14px; line-height: 1.6;
  font-weight: 400;
}
.confirm-params {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: var(--surf); padding: 8px 11px; border-radius: 6px;
  border: 1px solid var(--border); margin-bottom: 16px;
  color: var(--fg); word-break: break-all; line-height: 1.7;
}
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-cancel {
  padding: 7px 16px; background: var(--bg); color: var(--mute);
  border: 1.5px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 12px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s;
}
.btn-cancel:hover { border-color: var(--mute); }
.btn-go {
  padding: 7px 16px; background: var(--hi); color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: 'Inter', sans-serif;
  transition: background 0.15s;
}
.btn-go:hover { background: var(--hi2); }