#back-link { color: #cdd6dd; text-decoration: none; font-size: 13px; margin-left: 14px; }
#back-link:hover { color: #fff; }

#model-help-link { margin-left: 14px; font-size: 13px; font-weight: 600; border: 1px solid #3a4a63; background: #2a3b54; color: #fff; cursor: pointer; border-radius: 5px; padding: 4px 10px; display: inline-block; text-decoration: none; }
#model-help-link:hover { background: #2e6f95; }

#ilayout { display: flex; height: calc(100vh - 46px); width: 100%; }
#ipanel { width: 340px; overflow-y: auto; padding: 14px 16px; background: #fff; border-right: 1px solid #dde3e8; }
#ipanel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #5b6670; margin: 2px 0 12px; }
.ilbl { display: block; font-size: 12px; color: #5b6670; margin: 10px 0 3px; font-weight: 600; }
#seq, .ent-seq { width: 100%; resize: vertical; font: 12px ui-monospace, Menlo, monospace; border: 1px solid #cdd6dd; border-radius: 6px; padding: 8px; letter-spacing: .5px; }
#jobname { width: 100%; border: 1px solid #cdd6dd; border-radius: 6px; padding: 6px 8px; font: 13px sans-serif; }
.seqinfo { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #8a96a0; margin-top: 3px; }
.lbl-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: #99a3ab; }

/* AF3-style multi-entity input (RNA / protein / DNA / ligand + copy counts) */
#entities { display: flex; flex-direction: column; gap: 8px; }
.entity { border: 1px solid #dde3e8; border-radius: 8px; padding: 8px; background: #fafcfe; }
.entity.invalid { border-color: #e0b3a2; background: #fdf3ef; }
.ent-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ent-type { flex: 1 1 auto; padding: 4px 6px; border: 1px solid #cdd6dd; border-radius: 5px; font-size: 12px; background: #fff; }
.ent-count { width: 46px; padding: 4px; border: 1px solid #cdd6dd; border-radius: 5px; font-size: 12px; text-align: center; }
.ent-head button { border: 1px solid #d3dae0; background: #f6f8fa; color: #5b6670; border-radius: 4px; font-size: 11px; line-height: 1.4; padding: 1px 6px; cursor: pointer; }
.ent-head button:disabled { opacity: .35; cursor: default; }
.ent-head .ent-del:hover:enabled { background: #c1440e; color: #fff; border-color: #c1440e; }
.ent-info { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #8a96a0; margin-top: 3px; }
.ent-caveat { color: #b9770e; }
.ent-len { margin-left: auto; }
.ent-actions { margin-top: 6px; }
.linkbtn { background: none; border: 0; color: #2e6f95; cursor: pointer; font-size: 11px; }
.linkbtn:hover { text-decoration: underline; }
#predict-btn { width: 100%; margin-top: 12px; padding: 9px; background: #2e6f95; color: #fff; border: 0; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; }
#predict-btn:hover { background: #245a7a; }
#predict-note { font-size: 12px; margin-top: 8px; line-height: 1.45; }
#predict-note code { background: #eef2f5; padding: 0 4px; border-radius: 3px; }

#iresult { flex: 1; position: relative; display: flex; flex-direction: column; padding: 14px 18px; overflow: auto; }

/* stage timeline */
#stages { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.stage { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 11px; border-radius: 16px; border: 1px solid #e3e8ec; color: #8a96a0; background: #fff; }
.stage i { width: 9px; height: 9px; border-radius: 50%; background: #cdd6dd; display: inline-block; }
.stage.run { color: #2e6f95; border-color: #2e6f95; }
.stage.run i { background: #2e6f95; animation: ipulse 1s ease-in-out infinite; }
.stage.done { color: #2f8f57; border-color: #b7dcc4; }
.stage.done i { background: #2f8f57; }
.stage.err { color: #c0504d; border-color: #e6b3b0; }
.stage.err i { background: #c0504d; }
@keyframes ipulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

#iview { display: none; flex: 1 1 auto; min-height: 360px; flex-direction: column; }
#iview.show { display: flex; }
#iviewer { position: relative; width: 100%; flex: 1 1 auto; min-height: 360px; background: #0d1117; border-radius: 8px; overflow: hidden; }
.vtoggle { display: flex; gap: 0; margin-bottom: 8px; align-self: flex-end; }
.vtoggle button { font-size: 12px; border: 1px solid #cdd6dd; background: #fff; color: #5b6670; padding: 3px 12px; cursor: pointer; }
.vtoggle button:first-child { border-radius: 6px 0 0 6px; }
.vtoggle button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.vtoggle button.active { background: #2e6f95; color: #fff; border-color: #2e6f95; }
#ibadges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rbadge { font-size: 12px; border: 1px solid #cdd6dd; background: #fff; color: #2e6f95; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.rbadge.active { background: #2e6f95; color: #fff; border-color: #2e6f95; }
.rbadge:hover { background: #eaf3f8; }
.rbadge.active:hover { background: #245a7a; }
.rbadge.dl { color: #5b6670; }
/* download split-button + dropdown menu (export zip | ▾ → download all predictions) */
.dlwrap { position: relative; display: inline-flex; margin-left: auto; }
.dlwrap .rbadge.dl { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rbadge.dlcaret { color: #5b6670; padding: 4px 7px; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dlmenu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; background: #fff; border: 1px solid #cdd6dd; border-radius: 8px; box-shadow: 0 6px 20px rgba(20,40,60,.16); padding: 4px; min-width: 210px; }
.dlmenu[hidden] { display: none; }
.dlmi { display: block; width: 100%; text-align: left; font-size: 12px; border: 0; background: transparent; color: #2e6f95; border-radius: 5px; padding: 6px 9px; cursor: pointer; }
.dlmi:hover { background: #eaf3f8; }
.dlmi-sub { font-size: 10px; color: #8a94a0; padding: 0 9px 4px; line-height: 1.35; }
#iplaceholder { color: #8a96a0; font-size: 13px; max-width: 520px; line-height: 1.5; margin-top: 20px; }

/* model selector + jobs monitor (added for submit/model/monitor/cancel) */
#model, #msa_mode { width: 100%; padding: 6px 8px; border: 1px solid #cdd6dd; border-radius: 5px; font-size: 13px; margin: 2px 0 6px; background: #fff; }
.ihint { font-size: 11px; color: #7a848c; line-height: 1.4; margin: 2px 0 2px; }
.optrow { display: flex; gap: 10px; margin-top: 4px; }
.optrow span { flex: 1 1 0; min-width: 0; }
.numopt { width: 100%; padding: 6px 8px; border: 1px solid #cdd6dd; border-radius: 5px; font-size: 13px; margin: 2px 0 2px; background: #fff; }
#opt_description { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #cdd6dd; border-radius: 5px; font-size: 12px; margin: 2px 0 2px; background: #fff; font-family: inherit; resize: vertical; }
#opt_description[hidden] { display: none; }
.jobs { margin-top: 14px; }
.jobs-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5b6670; font-weight: 600; margin-bottom: 4px; }
.job { padding: 5px 0; border-top: 1px solid #eef2f5; }
.job-main { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.job .jn { font-weight: 600; color: #1f324d; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job .jopen { cursor: pointer; }
.job .jopen:hover { color: #2e6f95; text-decoration: underline; }
.job .jn-id { font-weight: 500; color: #8a94a0; font-family: ui-monospace, monospace; font-size: 11px; }  /* server target_id, unlabeled */
.jren { flex: 0 0 auto; border: 1px solid #d3dae0; background: #f6f8fa; color: #5b6670; border-radius: 4px; font-size: 11px; padding: 1px 6px; cursor: pointer; }
.jren:hover { background: #2e6f95; color: #fff; border-color: #2e6f95; }
.job .jm { color: #5b6670; flex: 0 0 auto; }
.job .js { flex: 0 0 auto; padding: 1px 7px; border-radius: 8px; font-size: 10px; text-transform: uppercase; background: #eef2f5; color: #5b6670; }
.js-done { background: #2e9e4f; color: #fff; font-weight: 600; }
.js-running, .js-submitted, .js-queued, .js-pending { background: #eaf3f8; color: #2e6f95; }
.js-error { background: #d64545; color: #fff; font-weight: 600; }
.js-cancelled { background: #f3e9e4; color: #c1440e; }
.jkill { flex: 0 0 auto; border: 1px solid #e0b3a2; background: #fbeee7; color: #c1440e; border-radius: 4px; font-size: 11px; padding: 1px 8px; cursor: pointer; }
.jkill:hover { background: #c1440e; color: #fff; border-color: #c1440e; }

/* per-job meta line: Date + Seq length columns (kept on their own row so the crowded
   name/model/status/kill row never overflows the 340px sidebar at any width) */
.job-meta { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #8a96a0; margin-top: 3px; }
.job-meta .jd, .job-meta .jl { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }

/* session model registry — visibility checkboxes + close (Feature 1) */
.mpanel { margin-top: 10px; }
.mpanel:empty { display: none; }
.mpanel .jobs-h { display: flex; align-items: center; justify-content: space-between; }
.mh-actions { display: inline-flex; gap: 6px; }
.mh-btn { border: 1px solid #cdd6dd; background: #fff; color: #2e6f95; border-radius: 4px; font-size: 10px; text-transform: none; letter-spacing: 0; padding: 1px 7px; cursor: pointer; font-weight: 500; }
.mh-btn:hover { background: #eaf3f8; }
.model { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 0; border-top: 1px solid #eef2f5; }
.model .mvis { flex: 0 0 auto; cursor: pointer; margin: 0; }
.model .msw { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }
.model .mn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f324d; }
.model .mn-cur { font-weight: 700; }
.model .mclose { flex: 0 0 auto; border: 1px solid #d3dae0; background: #f6f8fa; color: #8a96a0; border-radius: 4px; font-size: 13px; line-height: 1; padding: 0 6px; cursor: pointer; }
.model .mclose:hover { background: #c1440e; color: #fff; border-color: #c1440e; }

/* secondary structure view + export (Feature 2) */
.ssblock { margin-top: 14px; border-top: 1px solid #e6ebef; padding-top: 10px; }
.ssblock[hidden] { display: none; }
.ss-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ss-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5b6670; font-weight: 600; }
.ss-info { font-size: 11px; color: #8a96a0; }
.ss-mode { display: inline-flex; margin-left: auto; }
.ss-mode button { font-size: 11px; border: 1px solid #cdd6dd; background: #fff; color: #5b6670; padding: 2px 9px; cursor: pointer; }
.ss-mode button:first-child { border-radius: 5px 0 0 5px; }
.ss-mode button:last-child { border-radius: 0 5px 5px 0; border-left: 0; }
.ss-mode button.active { background: #2e6f95; color: #fff; border-color: #2e6f95; }
.ss-dl { display: inline-flex; gap: 5px; }
.ss-dl button { font-size: 11px; border: 1px solid #cdd6dd; background: #fff; color: #2e6f95; border-radius: 5px; padding: 2px 9px; cursor: pointer; }
.ss-dl button:hover { background: #eaf3f8; }
.ss-svg { background: #fff; border: 1px solid #e6ebef; border-radius: 8px; padding: 8px; overflow: auto; }
.ss-svg svg { display: block; max-width: 100%; height: auto; }
.ss-note { font-size: 10px; color: #8a94a0; margin-top: 5px; line-height: 1.4; }

/* "Why these picks" panel — Expert-mode research brief/rationale (Phase 3) */
.why-picks { margin-top: 14px; border-top: 1px solid #e6ebef; padding-top: 10px; }
.why-picks[hidden] { display: none; }
.why-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.why-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5b6670; font-weight: 600; }
.why-gate { font-size: 11px; color: #2e6f95; font-weight: 600; }
.why-family { font-size: 12px; color: #1f324d; margin-bottom: 4px; }
.why-brief, .why-rationale { font-size: 12px; color: #3c4650; line-height: 1.5; white-space: pre-wrap; margin-bottom: 6px; }
.why-rationale { color: #5b6670; font-style: italic; }
.why-thinking-wrap { margin-top: 4px; }
.why-thinking-wrap[hidden] { display: none; }
.why-thinking-wrap summary { font-size: 11px; color: #2e6f95; cursor: pointer; font-weight: 600; }
.why-thinking-wrap summary:hover { text-decoration: underline; }
.why-thinking { font-size: 11px; color: #5b6670; line-height: 1.5; white-space: pre-wrap; margin-top: 6px; max-height: 340px; overflow-y: auto; background: #fafcfe; border: 1px solid #e6ebef; border-radius: 6px; padding: 8px 10px; }

/* top "Loading…" banner — shown while opening a stored result (large structures can take a moment) */
.iloading { display: flex; align-items: center; gap: 8px; background: #eaf3f8; border: 1px solid #cfe1ec;
  color: #2e6f95; font-size: 13px; font-weight: 600; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.iloading[hidden] { display: none; }
.iloading::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #2e6f95;
  animation: iload-pulse 1s ease-in-out infinite; flex: 0 0 auto; }
@keyframes iload-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* "Open by ID" — visualize any submitted job (even one not in this browser's Recent list) */
.openid-row { display: flex; gap: 6px; margin: 10px 0 4px; }
.openid-row input { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 5px 8px;
  border: 1px solid #cdd6dd; border-radius: 6px; background: #fff; color: #1f324d; }
.openid-row input:focus { outline: none; border-color: #2e6f95; }
.openid-row button { flex: 0 0 auto; font-size: 12px; padding: 5px 12px; border: 1px solid #2e6f95;
  background: #2e6f95; color: #fff; border-radius: 6px; cursor: pointer; }
.openid-row button:hover { background: #24597a; }

/* Recent-jobs: fixed-height scroll area + live-filter count (so a long list doesn't grow the page) */
.jobs-count { color: #8a94a0; font-weight: 500; text-transform: none; letter-spacing: 0; }
.jobs-list { max-height: 300px; overflow-y: auto; }
.jobs-empty { font-size: 12px; color: #8a94a0; padding: 8px 2px; }