:root{
    /* --- 跨平台字体栈：确保各系统显示一致 --- */
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* --- 基础底色：更中性、更干净（去掉偏蓝灰） --- */
    --bg:#f8fafc;                 /* 原来 #f6f8fb */
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;

    /* 线条别太"粉笔灰"，用带一点透明的中性灰更干净 */
    --line: rgba(148,163,184,.35); /* 原来 #e5e7eb */

    /* --- 交互主色：先保留你的蓝，但把系统做成可被主题覆盖的"语义变量" --- */
    --blue:#3b82f6;
    --blue2:#2563eb;

    /* ✅ 新增：你代码里用到了，但没定义（会导致颜色/边框异常） */
    --primary: var(--blue);
    --primary2: var(--blue2);
    --border: var(--line);
    --hover: #f8fafc;

    /* ✅ 关键：pill 不要带强蓝紫底，否则叠加 tint 很容易脏 */
    --pill:#f1f5f9;               /* 原来 #eef2ff（偏蓝紫） */

    /* ✅ 阴影不要用纯黑，更"高级干净" */
    --shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 28px rgba(15,23,42,.06);

    --radius:14px;
    --radius2:10px;

    /* Alignment panel colors (dark theme) */
    --align-bg:#1e293b;
    --align-bg-alt:#1a2535;
    --align-border:#334155;
    --align-title:#e2e8f0;
    --align-hint:#64748b;
    --align-label:#64748b;
    --align-ruler:#64748b;
    --align-char:#94a3b8;
    --align-char-mismatch:#f5d0fe;
    --align-mismatch-bg:rgba(168,85,247,0.35);
    --align-ss3-H:#f472b6;
    --align-ss3-E:#60a5fa;
    --align-ss3-C:#64748b;
    --align-diff-mark:#c084fc;
    --align-diff-ok:#475569;
}

/* Light theme for alignment panels (default) */
[data-theme="light"] .align-section,
.align-section[data-theme="light"] {
    --align-bg:#f1f5f9;
    --align-bg-alt:#e2e8f0;
    --align-border:#cbd5e1;
    --align-title:#1e293b;
    --align-hint:#94a3b8;
    --align-label:#64748b;
    --align-ruler:#94a3b8;
    --align-char:#334155;
    --align-char-mismatch:#6d28d9;
    --align-mismatch-bg:rgba(167,139,250,0.3);
    --align-ss3-H:#be185d;
    --align-ss3-E:#1d4ed8;
    --align-ss3-C:#9ca3af;
    --align-diff-mark:#7c3aed;
    --align-diff-ok:#cbd5e1;
}

*{box-sizing:border-box}

/* ---------- 跨平台字体渲染优化 ---------- */
body{
    margin:0;
    font-family:var(--sans);
    color:var(--text);
    background:var(--bg);
    /* 字体渲染优化 - 让 Windows 显示效果更接近 Mac */
    -webkit-font-smoothing: antialiased;  /* Mac Chrome/Safari */
    -moz-osx-font-smoothing: grayscale;   /* Mac Firefox */
    text-rendering: optimizeLegibility;   /* 优化字形 */
    font-feature-settings: "kern" 1;      /* 启用字距调整 */
}

/* 确保所有元素继承字体设置 */
button, input, select, textarea {
    font-family: inherit;
}

/* ---------- Header / Nav ---------- */
header{
    background:var(--card);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:10;
}
.nav{
    max-width:1200px;
    margin:0 auto;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}
.brand .dot{
    width:10px;
    height:10px;
    background:var(--blue);
    border-radius:999px;
}
.tabs{
    display:flex;
    gap:14px;
    align-items:center;
    color:var(--muted);
    font-size:14px;
}
.tabs a{
    color:inherit;
    text-decoration:none;
    padding:8px 10px;
    border-radius:10px;
}
.tabs a.active{
    color: var(--primary);
    background: var(--pill);
    font-weight:600;
}
.nav-right{
    display:flex;
    gap:12px;
    align-items:center;
    color:var(--muted);
}

/* ---------- Common ---------- */
.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 10px;
    font-size:13px;
}
.chip strong{color:var(--text)}
.container{
    max-width:1200px;
    margin:0 auto;
    padding:22px 18px 36px;
}
.banner{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 16px;
    box-shadow:var(--shadow);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
}
.banner-content { flex: 1; }
.banner-header { margin-bottom: 4px; }
.banner .title{font-weight:600}
.banner .sub{
    color:var(--muted);
    font-size:13px;
    margin-top:2px;
}
.banner .link{
    color:var(--blue);
    font-weight:600;
    text-decoration:none;
    font-size:13px;
    padding:8px 10px;
    border-radius:10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Banner Expandable Details */
.banner-details {
    margin-top: 8px;
}
.banner-details summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--blue);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}
.banner-details summary::-webkit-details-marker { display: none; }
.banner-details summary .summary-icon::after {
    content: "▸";
    font-size: 14px;
    transition: transform 0.2s ease;
    display: inline-block;
}
.banner-details[open] summary .summary-icon::after {
    transform: rotate(90deg);
}
.banner-details summary:hover {
    text-decoration: underline;
}

/* Expanded Content */
.banner-expanded {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.banner-section {
    margin-bottom: 16px;
}
.banner-section:last-child {
    margin-bottom: 0;
}
.banner-section h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--text);
}

/* Task Grid */
.task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.task-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--line);
}
.task-icon {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.task-content {
    flex: 1;
    min-width: 0;
}
.task-content strong {
    font-size: 12px;
    display: block;
    margin-bottom: 2px;
}
.task-arrow {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--mono);
    display: block;
    margin-bottom: 4px;
}
.task-content p {
    font-size: 11px;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}

/* Workflow Modes */
.workflow-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.workflow-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}
.mode-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.mode-badge.novo {
    background: #dbeafe;
    color: #1d4ed8;
}
.mode-badge.optim {
    background: #dcfce7;
    color: #166534;
}

/* Tips */
.tip-text {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}
.tip-text code {
    background: var(--pill);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--mono);
}
.grid{
    margin-top:16px;
    display:grid;
    grid-template-columns: 1.4fr .9fr;
    gap:16px;
    align-items:start;
}
@media (max-width: 980px){
    .grid{grid-template-columns:1fr}
}
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
    overflow:visible;
}
.card h3{
    margin:0 0 10px 0;
    font-size:16px;
}
.muted{color:var(--muted)}
.row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-start;
}
.field{
    min-width:220px;
    flex:1;
    overflow:visible;
}
label{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin:10px 0 6px;
    overflow:visible;
    position:relative;
}
input[type="text"],
input[type="number"],
textarea,
select{
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px 12px;
    outline:none;
    background:#fff;
    color:var(--text);
    font-size:14px;
}
input::placeholder,
textarea::placeholder{
    color:#c0c7cf;
    font-weight:400;
}
textarea{
    min-height:98px;
    resize:vertical;
    font-family:var(--mono);
    font-size:12px;
}

/* JSON Preview in sidebar - taller and scrollable */
.json-preview-sidebar {
    min-height: 400px;
    max-height: calc(100vh - 200px);
    height: 500px;
    resize: vertical;
    overflow-y: auto;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    white-space: pre;
    width: 100%;
    box-sizing: border-box;
}

/* Sticky sidebar - follows user scroll */
#slot-sidebar {
    position: sticky;
    top: 16px;
    align-self: start;
}

/* Responsive: on narrow screens, reduce height and disable sticky */
@media (max-width: 900px) {
    .json-preview-sidebar {
        min-height: 180px;
        max-height: 280px;
        height: 220px;
    }
    #slot-sidebar {
        position: static;
    }
}

input:focus,
textarea:focus,
select:focus{
    border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

/* Readonly field style (e.g., locked Parsed Sequence) */
textarea.readonly-field,
input.readonly-field {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

.btns{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
.btn{
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
    padding:10px 12px;
    border-radius:12px;
    font-weight:600;
    cursor:pointer;
    font-size:14px;
}
.btn.primary{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
}
.btn.primary:hover{background:var(--blue2)}
.btn:disabled{
    cursor:not-allowed;
    opacity:.55;
}
.warn-hint{
    color:#d97706;
    font-size:12px;
    font-weight:500;
}
.btn.btn-loading{
    background:#9CA3AF;
    color:#fff;
    border-color:#9CA3AF;
    cursor:wait;
    opacity:1;
}
.btn.danger-outline{
    background:transparent;
    border-color:#dc2626;
    color:#dc2626;
}
.btn.danger-outline:hover{
    background:#fef2f2;
}
.btn.danger-outline:disabled{
    opacity:.5;
    cursor:not-allowed;
}

/* Toast notifications */
.toast-container{
    position:fixed;
    top:20px;
    right:20px;
    z-index:10000;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.toast{
    padding:12px 16px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    animation:toast-slide-in .3s ease;
    max-width:360px;
}
.toast.success{
    background:#10b981;
    color:#fff;
}
.toast.error{
    background:#dc2626;
    color:#fff;
}
.toast.info{
    background:#3b82f6;
    color:#fff;
}
.toast.fade-out{
    animation:toast-fade-out .3s ease forwards;
}
@keyframes toast-slide-in{
    from{transform:translateX(100%);opacity:0}
    to{transform:translateX(0);opacity:1}
}
@keyframes toast-fade-out{
    from{opacity:1}
    to{opacity:0}
}
.toast.warning{
    background:#f59e0b;
    color:#fff;
}
.loading-toast{
    display:flex;
    align-items:center;
    gap:8px;
}
.toast-spinner{
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:toast-spin .8s linear infinite;
}
@keyframes toast-spin{
    to{transform:rotate(360deg)}
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--pill);
    color:var(--blue);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:600;
}
.pill.pill-muted{
    background:var(--bg);
    color:var(--muted);
    font-weight:500;
}
.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}
.section-title .right{
    display:flex;
    gap:8px;
    align-items:center;
}
.divider{
    height:1px;
    background:var(--line);
    margin:14px 0;
}
details{
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
    overflow:visible;
}
details + details{margin-top:10px}
summary{
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
}
summary::-webkit-details-marker{display:none}
/* Push the muted hint to the right */
summary > .muted{
    margin-left:auto;
}

/* Collapse/Expand icon for details panels */
.collapse-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    font-size:10px;
    color:var(--muted);
    transition:transform 0.2s ease;
    flex-shrink:0;
}
details[open] > summary .collapse-icon{
    transform:rotate(90deg);
}
.hint{
    font-size:12px;
    color:var(--muted);
    margin-top:6px;
}

/* ---------- Span/Motif Table Input ---------- */
.span-table-container{
    border:1px solid var(--line);
    border-radius:8px;
    background:#fafafa;
    padding:8px;
}
.span-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
.span-table thead th{
    text-align:left;
    font-weight:500;
    font-size:11px;
    color:var(--muted);
    padding:4px 6px;
    border-bottom:1px solid var(--line);
}
.span-table tbody tr{
    border-bottom:1px solid #eee;
}
.span-table tbody tr:last-child{
    border-bottom:none;
}
.span-table td{
    padding:4px 4px;
    vertical-align:middle;
}
.span-table input[type="number"],
.span-table input[type="text"]{
    width:100%;
    padding:6px 8px;
    border:1px solid var(--line);
    border-radius:6px;
    font-size:13px;
    font-family:var(--mono);
    background:#fff;
}
.span-table input[type="number"]{
    width:70px;
}
.span-table input.motif-input{
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.span-table input:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(59,130,246,0.1);
}
.span-table input::placeholder{
    color:#c9d1d9;
    font-weight:400;
    opacity:1;
}
.span-table input.invalid{
    border-color:#ef4444;
    background:#fef2f2;
}
.span-table .row-error{
    color:#ef4444;
    font-size:11px;
    padding:2px 6px;
    display:none;
}
.span-table .row-error.show{
    display:block;
}
.span-delete-btn{
    background:none;
    border:none;
    color:#94a3b8;
    cursor:pointer;
    font-size:16px;
    padding:4px 8px;
    border-radius:4px;
    transition:all .15s;
}
.span-delete-btn:hover{
    background:#fee2e2;
    color:#ef4444;
}
.span-add-btn{
    margin-top:8px;
    font-size:12px;
}
.span-table-empty{
    text-align:center;
    color:var(--muted);
    font-size:12px;
    padding:12px;
}
.hintbox{
    border:1px solid #e0e7ef;
    background:#f8fafc;
    color:#64748b;
    padding:10px 12px;
    border-radius:12px;
    font-size:13px;
    white-space:pre-wrap;
}
.errorbox{
    border:1px solid #fecaca;
    background:#fff1f2;
    color:#991b1b;
    padding:10px 12px;
    border-radius:12px;
    font-size:13px;
    display:none;
    white-space:pre-wrap;
}
.okbox{
    border:1px solid #bbf7d0;
    background:#f0fdf4;
    color:#166534;
    padding:10px 12px;
    border-radius:12px;
    font-size:13px;
    display:none;
    white-space:pre-wrap;
}

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff
}
th,td{
    padding:12px 12px;
    text-align:left;
    font-size:13px;
    border-bottom:1px solid var(--line)
}
th{
    color:var(--muted);
    font-weight:600;
    background:#fbfcfe
}
tr:last-child td{border-bottom:none}

.kpi{
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.kpi .chip{
    background:var(--pill);
    border-color:#e0e7ff
}
.small{font-size:12px}
.mono{font-family:var(--mono)}
.inline{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap
}
.file{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px dashed var(--line);
    padding:10px 12px;
    border-radius:12px;
    background:#fff
}
.file input{flex:1}

/* =========================
   NEW: Sidebar “mode-intro”
   (你颜色不一致的关键修复点)
   ========================= */
.mode-intro{
    border:1px solid var(--line);
    background:#fff;
    border-radius:var(--radius2);
    padding:12px 12px 10px;
    margin-bottom:12px;
}
.mode-intro h4{
    margin:0 0 6px 0;
    font-size:14px;
    font-weight:700;
    color:var(--text);
    line-height:1.25;
}
.mode-subtitle{
    margin:0 0 8px 0;
    font-size:12px;
    color:var(--muted);
}
.mode-intro p{
    margin:0 0 10px 0;
    font-size:13px;
    color:var(--text);
    line-height:1.6;
}

/* tag row */
.features{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 10px 0;
}
.feature-tag{
    display:inline-flex;
    align-items:center;
    border:1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    background: var(--pill);
    color: var(--primary);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:700;
}

/* use cases */
.use-cases{
    font-size:12px;
    color:var(--muted);
    line-height:1.6;
}

/* ---------- Eval results panel ---------- */
.eval-panel{
    margin-top:16px;
    display:none;
}
.eval-panel.show{display:block}
.eval-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap:10px;
    margin-top:10px;
}
.eval-metric{
    background: var(--pill);
    border:1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    border-radius:12px;
    padding:12px;
    text-align:center;
}
.eval-metric .value{
    font-size:20px;
    font-weight:700;
    color: var(--primary);
}
.eval-metric .label{
    font-size:11px;
    color:var(--muted);
    margin-top:4px;
}

/* ---------- Sequence alignment ---------- */
.align-panel{
    margin-top:16px;
    display:none;
}
.align-panel.show{display:block}

/* Row 1: Header row with title and view controls */
.seq-header-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}
.seq-header-left{
    display:flex;
    align-items:center;
    gap:10px;
}
.seq-header-left h3{
    margin:0;
    font-size:16px;
    font-weight:600;
}
.seq-header-left .muted{
    font-size:12px;
    font-weight:normal;
}
.seq-header-right{
    display:flex;
    align-items:center;
    gap:10px;
}

/* Row 2: Action row with selection and buttons */
.seq-action-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding:10px 12px;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:10px;
    margin-bottom:10px;
}
.seq-action-left{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13px;
}
.seq-action-right{
    display:flex;
    align-items:center;
    gap:6px;
}
.seq-action-right .btn{
    padding:6px 10px;
    font-size:12px;
    border-radius:8px;
}
.seq-action-right .btn svg{
    width:12px;
    height:12px;
}
.action-status{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:4px;
}

/* Secondary button style */
.btn.btn-secondary{
    background:var(--card);
    border:1px solid var(--border);
    color:var(--text);
}
.btn.btn-secondary:hover:not(:disabled){
    background:var(--bg);
    border-color:#94a3b8;
}
.btn.btn-secondary:disabled{
    background:transparent;
    color:var(--muted);
    opacity:0.6;
    cursor:not-allowed;
}
.btn.btn-secondary svg{
    vertical-align:middle;
    margin-right:4px;
}
.btn.btn-cancel{
    background:#fee2e2;
    border-color:#fca5a5;
    color:#dc2626;
}
.btn.btn-cancel:hover{
    background:#fecaca;
    border-color:#f87171;
}

/* Legacy seq-controls (hidden, kept for compatibility) */
.seq-controls{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:10px;
}
.seq-controls input[type="text"]{width:160px}
.rank-control{
    display:flex;
    align-items:center;
    gap:6px;
}
.rank-control .rank-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:6px;
    background:var(--card);
    border:1px solid var(--border);
    color:var(--muted);
    font-size:14px;
}
.rank-control select{
    padding:6px 28px 6px 12px;
    border-radius:6px;
    border:1px solid var(--border);
    background:var(--card) url("select-arrow.svg") no-repeat right 10px center;
    background-size:10px;
    color:var(--text);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    min-width:110px;
    transition:all 0.15s ease;
}
.rank-control select:hover{
    border-color:var(--primary);
    background-color:var(--hover);
}
.rank-control select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.12);
}
.rank-control select option{
    padding:8px 12px;
    background:var(--card);
    color:var(--text);
}

/* ---------- New Alignment View (two-section) ---------- */
.align-view{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:10px;
}
.align-section{
    border-radius:12px;
    padding:12px 14px;
    overflow-x:auto;
    background:var(--align-bg);
}
.align-section.seq-section{
    background:var(--align-bg);
}
.align-section.ss3-section{
    background:var(--align-bg-alt);
}
.align-section .section-header{
    display:flex;
    align-items:baseline;
    margin-bottom:8px;
    padding-bottom:6px;
    border-bottom:1px solid var(--align-border);
    position:relative;
}
.align-section .section-header h4{
    margin:0;
    font-size:12px;
    font-weight:600;
    color:var(--align-title);
}
.align-section .section-hint{
    font-size:10px;
    color:var(--align-hint);
    margin-left:12px;
}
.copy-btns{
    display:flex;
    gap:4px;
    margin-left:auto;
    padding-left:8px;
}
.copy-btn{
    display:inline-flex;
    align-items:center;
    gap:3px;
    padding:2px 6px;
    font-size:10px;
    background:var(--bg-secondary);
    border:1px solid var(--border);
    border-radius:4px;
    color:var(--text-muted);
    cursor:pointer;
    transition:all 0.15s ease;
}
.copy-btn:hover{
    background:var(--bg-tertiary);
    color:var(--text);
    border-color:var(--border-hover);
}
.copy-btn:active{
    transform:scale(0.95);
}
.copy-btn.copied{
    background:var(--success-bg, #d4edda);
    border-color:var(--success-border, #28a745);
    color:var(--success-text, #155724);
}
.copy-btn svg{
    flex-shrink:0;
}
.copy-label{
    font-weight:500;
}
.align-content{
    font-family:var(--mono);
    font-size:12px;
    line-height:1.3;
}
.align-placeholder{
    color:var(--align-hint);
    font-style:italic;
    padding:4px 0;
}

/* 切片块 */
.align-chunk{
    margin-bottom:16px;
}
.align-chunk:last-child{
    margin-bottom:0;
}

/* 行基础样式（ruler / seq 共用） */
.ruler-row,
.seq-row{
    display:flex;
    align-items:baseline;
    line-height:1.5;
    font-family:var(--mono);
    font-size:12px;
}

/* 左侧标签（WT / Gen / 空） */
.row-label{
    width:32px;
    min-width:32px;
    color:var(--align-label);
    font-weight:600;
    font-size:11px;
    flex-shrink:0;
    text-align:left;
}

/* 尺标行 */
.ruler-row{
    color:var(--align-ruler);
    font-size:10px;
    user-select:none;
    margin-bottom:1px;
}

/* 字符容器 */
.ruler-chars,
.seq-chars{
    display:flex;
    flex-wrap:nowrap;
}

/* 单个字符（尺标 / 序列通用） - 固定宽度确保对齐 */
.char,
.aa{
    display:inline-block;
    width:9px;
    text-align:center;
    flex-shrink:0;
}

/* 分组边界：每 10 个残基后添加间距 */
.char.group-end,
.aa.group-end{
    margin-right:6px;
}

/* 序列字符默认样式（match = 低调灰色） */
.aa{
    color:var(--align-char);
}

/* mismatch = 高亮 */
.aa.mismatch{
    color:var(--align-char-mismatch);
    background:var(--align-mismatch-bg);
    border-radius:2px;
}

/* gap from pairwise alignment = gray, subdued */
.aa.seq-gap{
    color:#9CA3AF;
    opacity:0.6;
}

/* SS3 颜色编码 */
.ss3-H{color:var(--align-ss3-H)}  /* Helix */
.ss3-E{color:var(--align-ss3-E)}  /* Sheet */
.ss3-C{color:var(--align-ss3-C)}  /* Coil */
.ss3-gap{color:#fbbf24}  /* gap - yellow */

/* SS3 match: 低调显示 */
.ss3-dim{
    opacity:0.5;
}

/* SS3 mismatch: 高亮背景 */
.aa.ss3-mismatch{
    background:var(--align-mismatch-bg);
    border-radius:2px;
    opacity:1;
}

/* SS3 Diff 行符号 */
.ss3-diff-mark{
    color:var(--align-diff-mark);
}
.ss3-diff-ok{
    color:var(--align-diff-ok);
}

/* ---------- Evolutionary Consistency ---------- */
.align-section.evo-section{
    background:var(--align-bg-alt);
}

/* Evolutionary Consistency State Colors (6-state system, NO RED) */
.evo-gap{background:#9CA3AF}           /* insufficient MSA evidence */
.evo-conserved{background:#95DEAE}     /* consistent with conserved pattern */
.evo-risk{background:#EB9DAB}          /* violates conserved pattern */
.evo-unchanged{background:#ABEB9D}     /* variable site, no mutation */
.evo-acceptable{background:#9EACEB}    /* variable site, mutated, MSAProb >= 0.05 */
.evo-rare{background:#F8DB8B}          /* variable site, mutated, MSAProb < 0.05 */

/* Evo cell (colored square per position) */
.evo-cell{
    display:inline-block;
    width:9px;
    height:14px;
    border-radius:2px;
    cursor:text;
}
.evo-cell.group-end{
    margin-right:6px;
}

/* Neff track (effective sequence count per position) */
.neff-cell{
    display:inline-block;
    width:9px;
    height:8px;
    border-radius:1px;
    cursor:pointer;
}
.neff-cell.group-end{
    margin-right:6px;
}
/* Neff colors are now applied via inline style (continuous colormap) */

/* Evo legend */
.evo-legend{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    padding:10px 0 0;
    border-top:1px solid var(--align-border);
    margin-top:10px;
}
.legend-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    color:var(--align-hint);
}
.evo-box{
    width:14px;
    height:14px;
    border-radius:3px;
}

/* Column focus highlight - subtle, no layout shift */
.aa.focused,
.evo-cell.focused,
.neff-cell.focused{
    outline:2px solid rgba(59,130,246,0.5);  /* Subtle blue */
    outline-offset:-2px;  /* Inset to avoid layout shift */
    z-index:1;
    position:relative;
}

/* Evo hover indicator for cells with tooltip */
.evo-hover{
    cursor:pointer;
}

/* Evo tooltip (diagnostic report style) - portal to body, never clipped */
.evo-tooltip{
    position:fixed;
    background:#1e293b;
    color:#f1f5f9;
    padding:12px 14px;
    border-radius:8px;
    font-size:12px;
    line-height:1.6;
    min-width:200px;
    max-width:320px;
    /* Cap height to prevent overflow, allow scrolling if needed */
    max-height:calc(100vh - 24px);
    overflow-y:auto;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
    z-index:999999;
    pointer-events:none;
    display:none;
    opacity:0;
    transition:opacity 0.15s ease-out;
    /* Ensure tooltip is never clipped by any parent */
    isolation:isolate;
}
.evo-tooltip.show{
    display:block;
    opacity:1;
}
.evo-tooltip .tt-section{
    padding:6px 0;
}
.evo-tooltip .tt-section:first-child{
    padding-top:0;
}
.evo-tooltip .tt-section:last-child{
    padding-bottom:0;
}
.evo-tooltip .tt-divider{
    border:none;
    border-top:1px solid #334155;
    margin:4px 0;
}
.evo-tooltip .tt-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
}
.evo-tooltip .tt-label{
    color:#94a3b8;
    white-space:nowrap;
}
.evo-tooltip .tt-value{
    font-weight:600;
    text-align:right;
}
.evo-tooltip .tt-value.muted{
    color:#64748b;
    font-weight:400;
}

/* PhysChem chips layout */
.evo-tooltip .tt-row.tt-physchem{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}
.evo-tooltip .tt-physchem-chips{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    justify-content:flex-start;
}
.evo-tooltip .tt-chip{
    font-size:11px;
    font-weight:500;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    color:#e2e8f0;
    white-space:nowrap;
}

/* Evaluation Tools Section */
.eval-tools-section{
    margin-top:12px;
}
.eval-tool-row{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.eval-tool-status{
    font-size:12px;
    color:var(--muted);
}
.eval-tool-status.success{color:#059669}
.eval-tool-status.error{color:#dc2626}
.eval-tool-status.loading{color:#d97706}

/* File upload area in modal */
.file-upload-area{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px;
    border:2px dashed var(--line);
    border-radius:10px;
    margin:12px 0;
}
.file-upload-area.dragover{
    border-color:var(--blue);
    background:var(--pill);
}
.file-status{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
}
.file-check{
    color:#059669;
    font-weight:bold;
}
.modal-error{
    color:#dc2626;
    font-size:13px;
    padding:10px;
    background:#fee2e2;
    border-radius:8px;
    margin-top:10px;
}

/* Spinner for modal */
.modal-spinner{
    display:inline-block;
    width:16px;
    height:16px;
    border:2px solid var(--line);
    border-top-color:var(--blue);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
    margin-right:8px;
}
@keyframes spin{
    to{transform:rotate(360deg)}
}

/* ---------- Workspace Loading Indicator ---------- */
.loading-indicator {
    display: inline-flex;
    align-items: center;
    color: var(--blue);
    font-size: 13px;
}
.loading-spinner-small {
    width: 12px;
    height: 12px;
    border: 2px solid var(--line);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 6px;
}
.loading-text {
    color: var(--muted);
    font-size: 13px;
}


/* ---------- Legacy alignment styles (kept for compatibility) ---------- */
.seq-info{
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
}
.seq-list{
    max-height:380px;  /* ~10 items at ~38px each */
    overflow-y:auto;
    border:1px solid var(--line);
    border-radius:10px;
    margin-top:10px;
}
.seq-item{
    padding:8px 12px;
    border-bottom:1px solid var(--line);
    cursor:pointer;
    font-size:13px;
    display:flex;
    justify-content:space-between;
}
.seq-item:last-child{border-bottom:none}
.seq-item:hover{background:var(--pill)}
.seq-item.selected{background:#dbeafe; font-weight:600}

/* ---------- Job status badges ---------- */
.status-badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:6px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
}
.status-badge.running{background:#fef3c7; color:#92400e}
.status-badge.succeeded{background:#d1fae5; color:#065f46}
.status-badge.failed{background:#fee2e2; color:#991b1b}
.status-badge.queued{background:#e0e7ff; color:#3730a3}
.status-badge.unknown{background:#f3f4f6; color:#6b7280}

/* ---------- History table improvements ---------- */
#historyBody tr{cursor:pointer; transition:background .15s}
#historyBody tr:hover{background:#f8fafc}
#historyBody tr.selected-row{background:#eff6ff}
#historyBody td:first-child{text-align:center}
.action-btn{
    padding:4px 8px;
    font-size:11px;
    border-radius:6px;
    border:1px solid var(--line);
    background:#fff;
    cursor:pointer;
    margin-right:4px;
}
.action-btn:hover{background:var(--pill)}
.action-btn.primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.action-btn:disabled{opacity:0.5; cursor:not-allowed}

/* ---------- Mode selector (card style) ---------- */
.mode-selector{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin:12px 0 16px;
}
@media (max-width: 700px){
    .mode-selector{grid-template-columns:1fr}
}
.mode-btn{
    border:1px solid var(--line);
    background:#fff;
    border-radius:var(--radius2);
    padding:14px 14px 12px;
    cursor:pointer;
    transition:all .15s ease;
    text-align:left;
}
.mode-btn:hover{
    border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
    background: var(--hover);
}
.mode-btn.active{
    border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
    background: var(--pill);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.mode-btn .mode-title{
    font-weight:600;
    font-size:14px;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:6px;
}
.mode-btn .mode-icon{
    font-size:16px;
}
.mode-btn .mode-desc{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
    line-height:1.4;
}

/* ---------- MSA Section ---------- */
.msa-section{
    padding:10px 0;
}
.msa-section .section-title{
    margin-bottom:8px;
}
input[type="range"]{
    -webkit-appearance:none;
    appearance:none;
    height:6px;
    background:var(--line);
    border-radius:3px;
    outline:none;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:16px;
    height:16px;
    background:var(--blue);
    border-radius:50%;
    cursor:pointer;
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
input[type="range"]::-moz-range-thumb{
    width:16px;
    height:16px;
    background:var(--blue);
    border-radius:50%;
    cursor:pointer;
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}

/* ---------- File Upload Status ---------- */
.file-status{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:var(--muted);
}
.file-check{
    color:#10b981;
    font-weight:bold;
}
.file-name{
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* MSA ready indicator */
.msa-ready{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    background:#d1fae5;
    color:#065f46;
    border-radius:4px;
    font-size:12px;
    font-weight:500;
}

/* ---------- Help Icon & Portal Tooltip ---------- */
.help-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:help;
    font-size:12px;
    margin-left:4px;
    opacity:0.7;
    transition:opacity .15s;
}
.help-icon:hover{
    opacity:1;
}

/* Portal Tooltip - 挂载到 body，避免 overflow 裁切 */
#portal-tooltip{
    position:fixed;
    background:#1e293b;
    color:#f1f5f9;
    padding:10px 14px;
    border-radius:8px;
    font-size:12px;
    font-weight:400;
    line-height:1.6;
    white-space:pre-wrap;
    min-width:200px;
    max-width:320px;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    z-index:99999;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .15s ease, visibility .15s ease;
}
#portal-tooltip.show{
    opacity:1;
    visibility:visible;
}
/* Tooltip 箭头 */
#portal-tooltip::before{
    content:'';
    position:absolute;
    border:7px solid transparent;
}
/* 箭头朝下（tooltip 在上方） */
#portal-tooltip.arrow-bottom::before{
    top:100%;
    left:16px;
    border-top-color:#1e293b;
    border-bottom:none;
}
/* 箭头朝上（tooltip 在下方） */
#portal-tooltip.arrow-top::before{
    bottom:100%;
    left:16px;
    border-bottom-color:#1e293b;
    border-top:none;
}
/* 箭头朝左（tooltip 在右侧） */
#portal-tooltip.arrow-left::before{
    right:100%;
    top:12px;
    border-right-color:#1e293b;
    border-left:none;
}

/* ---------- Input Wrapper & Field Status ---------- */
.input-wrapper{
    position:relative;
    display:flex;
    flex-direction:column;
}
.input-wrapper textarea,
.input-wrapper input[type="text"]{
    width:100%;
}

.field-status{
    position:absolute;
    top:8px;
    right:8px;
    font-size:14px;
    opacity:0;
    transition:opacity .2s;
    pointer-events:none;
}
.field-status.valid{
    opacity:1;
    color:#059669;
    font-weight:600;
}
.field-status.valid::before{
    content:'✓';
}
.field-status.invalid{
    opacity:1;
    color:#ef4444;
}
.field-status.invalid::before{
    content:'✗';
}

/* Validation border colors */
.input-wrapper textarea.valid,
.input-wrapper input.valid{
    border:2px solid #34d399;
    box-shadow:inset 0 1px 2px rgba(16,185,129,.08);
}
.input-wrapper textarea.valid:focus,
.input-wrapper input.valid:focus{
    border-color:#10b981;
    box-shadow:inset 0 1px 2px rgba(16,185,129,.08), 0 0 0 3px rgba(16,185,129,.12);
}
.input-wrapper textarea.invalid,
.input-wrapper input.invalid{
    border:2px solid #f87171;
}
.input-wrapper textarea.invalid:focus,
.input-wrapper input.invalid:focus{
    border-color:#ef4444;
    box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

/* Field error message */
.field-error{
    color:#ef4444;
    font-size:11px;
    margin-top:4px;
    display:none;
}
.field-error.show{
    display:block;
}

/* ---------- Fold Controls & Multi-select ---------- */
/* Note: .fold-controls class deprecated, use .seq-action-row instead */
/* Keeping for backward compatibility with any remaining usages */
.fold-select-row{
    display:flex;
    align-items:center;
    gap:12px;
}
.checkbox-label{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
}
.checkbox-label input[type="checkbox"]{
    width:16px;
    height:16px;
    cursor:pointer;
    accent-color:var(--blue);
}
.fold-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.fold-status{
    font-size:13px;
    color:var(--muted);
}
.fold-status.success{color:#059669}
.fold-status.error{color:#dc2626}

/* Sequence item with checkbox */
.seq-item{
    padding:8px 12px;
    border-bottom:1px solid var(--line);
    cursor:pointer;
    font-size:13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}
.seq-item .seq-checkbox{
    width:16px;
    height:16px;
    cursor:pointer;
    accent-color:var(--blue);
    flex-shrink:0;
}
.seq-item .seq-main{
    flex:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}
.seq-item .seq-badges{
    display:flex;
    gap:6px;
    align-items:center;
}

/* Fold result badges */
.fold-badge{
    display:inline-flex;
    align-items:center;
    padding:2px 6px;
    border-radius:4px;
    font-size:10px;
    font-weight:600;
}
.fold-badge.plddt{
    background:#dbeafe;
    color:#1e40af;
}
.fold-badge.plddt.high{
    background:#d1fae5;
    color:#065f46;
}
.fold-badge.plddt.low{
    background:#fee2e2;
    color:#991b1b;
}
.fold-badge.folded{
    background:#f0fdf4;
    color:#166534;
}
.fold-badge.pending{
    background:#fef3c7;
    color:#92400e;
}

/* EC prediction badges */
.fold-badge.ec{
    background:#ede9fe;
    color:#5b21b6;
}
.fold-badge.ec.error{
    background:#fee2e2;
    color:#991b1b;
}
.fold-badge.ec.pending{
    background:#f5f5f5;
    color:#737373;
}

/* SS3 alignment styling */
.ss3-row{
    margin-top:4px;
    padding-top:4px;
    border-top:1px dashed #475569;
}
.ss3-seq{
    letter-spacing:1px;
}
.ss3-seq .ss3-H{color:#f472b6}  /* Helix - pink */
.ss3-seq .ss3-E{color:#60a5fa}  /* Sheet - blue */
.ss3-seq .ss3-C{color:#a3a3a3}  /* Coil - gray */
.ss3-seq .ss3-match{opacity:0.6}
.ss3-seq .ss3-diff{
    background:#7c3aed;
    color:#fff;
    padding:0 1px;
    border-radius:2px;
}

/* Fold result box */
.fold-result-box{
    margin-top:10px;
    padding:10px 12px;
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    border-radius:10px;
}
.fold-metrics{
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
}
.fold-metric{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:13px;
}
.fold-metric .metric-label{
    color:var(--muted);
}
.fold-metric .metric-value{
    font-weight:600;
    color:var(--text);
}
.fold-metric .metric-value.high{color:#059669}
.fold-metric .metric-value.medium{color:#d97706}
.fold-metric .metric-value.low{color:#dc2626}

.btn-small{
    padding:4px 10px;
    font-size:12px;
    border-radius:6px;
}

/* CLEAN EC result box */
.clean-result-box{
    margin-top:10px;
    padding:10px 12px;
    background:#ede9fe;
    border:1px solid #c4b5fd;
    border-radius:10px;
}
.clean-result-header{
    margin-bottom:8px;
}
.clean-result-header h4{
    margin:0;
    font-size:13px;
    font-weight:600;
    color:#5b21b6;
}
.clean-result-content{
    font-size:13px;
}
.clean-placeholder{
    color:var(--muted);
    font-style:italic;
}
.clean-error{
    color:#991b1b;
}
.clean-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}
.clean-table th,
.clean-table td{
    padding:4px 8px;
    text-align:left;
    border-bottom:1px solid #c4b5fd;
}
.clean-table th{
    background:#ddd6fe;
    font-weight:600;
    color:#5b21b6;
}
.clean-table td.ec-number{
    font-family:var(--mono);
    font-weight:600;
}

/* ---------- Theme Toggle ---------- */
.theme-toggle{
    display:flex;
    align-items:center;
    gap:4px;
    background:var(--pill);
    border:1px solid var(--line);
    border-radius:20px;
    padding:2px;
    cursor:pointer;
}
.theme-toggle .toggle-option{
    padding:4px 10px;
    font-size:11px;
    font-weight:500;
    border-radius:16px;
    color:var(--muted);
    transition:all 0.15s ease;
}
.theme-toggle .toggle-option.active{
    background:var(--card);
    color:var(--text);
    box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.theme-toggle .toggle-option:hover:not(.active){
    color:var(--text);
}

/* ---------- Modal Dialog ---------- */
.modal-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
    backdrop-filter:blur(2px);
}
.modal-overlay.show{
    display:flex;
}
.modal-dialog{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:0 10px 40px rgba(0,0,0,0.2);
    width:100%;
    max-width:420px;
    margin:20px;
    animation:modalSlideIn 0.2s ease-out;
}
@keyframes modalSlideIn{
    from{transform:translateY(-20px);opacity:0}
    to{transform:translateY(0);opacity:1}
}
.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    border-bottom:1px solid var(--line);
}
.modal-header h4{
    margin:0;
    font-size:16px;
    font-weight:600;
}
.modal-close{
    background:none;
    border:none;
    font-size:24px;
    color:var(--muted);
    cursor:pointer;
    padding:0;
    line-height:1;
}
.modal-close:hover{color:var(--text)}
.modal-body{
    padding:20px;
}
.modal-hint{
    font-size:13px;
    color:var(--muted);
    margin:0 0 12px;
    line-height:1.5;
}
.modal-body input[type="text"]{
    width:100%;
    padding:12px 14px;
    font-size:14px;
}
.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:16px 20px;
    border-top:1px solid var(--line);
    background:#fbfcfe;
    border-radius:0 0 var(--radius) var(--radius);
}

/* ---------- Job Name in History ---------- */
.job-name{
    font-weight:600;
    color:var(--text);
    font-size:13px;
    max-width:320px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.job-id-sub{
    font-family:var(--mono);
    font-size:10px;
    color:var(--muted);
    display:block;
    margin-top:2px;
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ---------- Job ETA Display ---------- */
.job-eta{
    display:block;
    margin-top:4px;
    font-size:11px;
    font-family:var(--mono);
    color:#6b7280;
    white-space:nowrap;
    text-align:center;
}
.job-eta.initializing{
    color:#9ca3af;
    font-style:italic;
}
.job-eta.queued{
    color:#3730a3;
    font-style:italic;
}

/* ---------- Job Error Display ---------- */
.job-error-hint{
    display:block;
    margin-top:4px;
    font-size:11px;
    color:#dc2626;
    max-width:300px;
    white-space:normal;
    word-break:break-word;
    line-height:1.4;
}

#jobError{
    display:none;
    margin-top:8px;
    padding:8px 12px;
    background:#fef2f2;
    border:1px solid #fecaca;
    border-radius:6px;
    color:#dc2626;
    font-size:13px;
}

/* ---------- Action Menu & Icon Buttons ---------- */
.icon-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    color: #6b7280;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    color: var(--primary);
}

.icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.copy-btn {
    margin-left: 4px;
    opacity: 0.5;
    flex-shrink: 0;
}

.copy-btn:hover {
    opacity: 1;
}

.rename-btn {
    margin-left: 4px;
    opacity: 0.5;
    flex-shrink: 0;
}

.rename-btn:hover {
    opacity: 1;
}

.job-name-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.job-name-row,
.job-id-row {
    display: flex;
    align-items: center;
}

.job-id-row {
    font-size: 11px;
}

.job-id-row .copy-btn {
    margin-left: 3px;
}

.actions-cell {
    position: relative;
}

.actions-menu-btn {
    padding: 6px 8px;
}

.actions-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    z-index: 1000;
    display: none;
}

.actions-menu .menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    color: var(--text);
    transition: background 0.1s ease;
}

.actions-menu .menu-item:first-child {
    border-radius: var(--radius) var(--radius) 0 0;
}

.actions-menu .menu-item:last-child {
    border-radius: 0 0 var(--radius) var(--radius);
}

.actions-menu .menu-item:hover:not(:disabled) {
    background: #f3f4f6;
}

.actions-menu .menu-item.primary {
    font-weight: 600;
    color: var(--primary);
}

.actions-menu .menu-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.actions-menu .menu-item.danger {
    color: #dc2626;
}

.actions-menu .menu-item.danger:hover:not(:disabled) {
    background: #fef2f2;
}

.actions-menu .menu-divider {
    height: 1px;
    background: var(--line);
    margin: 4px 0;
}

/* ---------- Workspace View ---------- */
.workspace-header {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.workspace-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.workspace-title-row h2 {
    margin: 0;
    font-size: 20px;
    flex: 1;
}

.workspace-meta {
    display: flex;
    gap: 20px;
    font-size: 13px;
}

.workspace-meta code {
    font-family: var(--mono);
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.pagination .page-info {
    font-size: 13px;
    color: var(--muted);
    min-width: 150px;
    text-align: center;
}

.pagination .btn {
    min-width: 100px;
}

.pagination .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- Default Page Scale ---------- */
/* 使用 font-size 替代 zoom 实现跨浏览器一致的缩放效果 */
/* zoom 在 Firefox 上不完全支持 */
html {
    font-size: 110%; /* 基准字体放大到 110%，等效于 zoom: 1.1 */
    -webkit-text-size-adjust: 100%; /* 防止 iOS 横屏时字体自动放大 */
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 为支持 zoom 的浏览器使用 zoom（效果更好），Firefox 用 font-size 兜底 */
@supports (zoom: 1.1) {
    html {
        font-size: 100%; /* 重置 font-size */
        zoom: 1.1;
    }
}

/* ---------- Highlight Pulse Animation ---------- */
@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        transform: scale(1);
    }
}

.highlight-pulse {
    animation: highlight-pulse 0.8s ease-in-out 2;
    border-color: var(--blue) !important;
    background: linear-gradient(135deg, var(--blue), var(--blue2)) !important;
    color: white !important;
}

/* ---------- Length Counter for Textareas ---------- */
.input-wrapper {
    position: relative;
}

.length-counter {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 11px;
    font-family: var(--mono);
    color: var(--muted);
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 6px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.length-counter.visible {
    opacity: 1;
}

/* ---------- MSA Cards Grid ---------- */
.msa-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 700px) {
    .msa-cards-grid {
        grid-template-columns: 1fr;
    }
}

.msa-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.msa-card-header {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.msa-card-body {
    padding: 14px;
}

/* Smaller chip variant */
.chip.chip-sm {
    padding: 3px 8px;
    font-size: 11px;
}

/* ---------- MSA Spans Mini Table ---------- */
.spans-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.spans-mini-table th {
    text-align: left;
    font-weight: 500;
    color: var(--muted);
    font-size: 11px;
    padding: 4px 4px 6px 4px;
}

.spans-mini-table td {
    padding: 3px 4px;
}

.spans-mini-table input[type="number"] {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
}

.spans-mini-table input[type="number"]:focus {
    outline: none;
    border-color: var(--blue);
}

.spans-mini-table input::placeholder {
    color: #a0a8b0;
    opacity: 0.6;
    font-weight: 400;
}

.spans-mini-table input.invalid {
    border-color: var(--red);
    background-color: rgba(239, 68, 68, 0.05);
}

.spans-mini-table .span-delete-btn {
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.spans-mini-table .span-delete-btn:hover {
    color: var(--red);
    border-color: var(--red);
    background: rgba(239, 68, 68, 0.1);
}

/* ---------- Shared Utilities ---------- */
.error-inline {
    color: var(--red);
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: help;
}

.btn.small {
    padding: 4px 10px;
    font-size: 11px;
}

/* ---------- Reference Protein Block ---------- */
.ref-protein-block {
    padding: 12px 14px;
    margin-top: 14px;    /* 与上方 summary 标题保持合理间距 */
    margin-bottom: 14px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.seg-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.seg-btn {
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    opacity: .5;
    transition: background .15s, color .15s, opacity .15s;
}
.seg-btn.active {
    background: var(--blue);
    color: #fff;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.seg-btn:not(.active):hover {
    opacity: .75;
    background: rgba(148,163,184,.12);
}
.ref-prot-ok {
    color: #16a34a;
}
.ref-prot-warn {
    color: #b45309;
}

/* ============================================================
 * CSP-Safe Utility Classes
 *
 * Added so that style-src can drop 'unsafe-inline'.
 * All previously inline `style="..."` attributes in HTML now
 * map to one of these classes (or to existing component CSS).
 * Prefer composing semantic classes; do not reintroduce inline
 * styles in HTML or in JS innerHTML strings.
 * ============================================================ */

/* ---------- Visibility ----------
 * Used to be the inline `style="display:none"` attribute. Plain display:none
 * (no !important) so that an inline `el.style.display = "block"` set in JS
 * still wins over the class. To "show" a default-hidden element, JS must
 * remove this class (and may then leave any inline display alone). */
.is-hidden { display: none; }

/* ---------- Text helpers ---------- */
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.text-mono { font-family: var(--mono); }
.cursor-pointer { cursor: pointer; }

/* ---------- Generic spacing ---------- */
.mt-4  { margin-top: 4px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.m-0   { margin: 0; }

/* ---------- Workspace slot ----------
 * Permanent layout + initial hide. Visibility is toggled separately by
 * JS via inline `style.display`, so this rule must NOT use !important. */
.workspace-slot {
    margin-top: 16px;
}

/* ---------- Modal: field block ---------- */
.modal-field-group { margin-top: 16px; }

.modal-field-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}
.modal-field-label .label-optional {
    font-weight: normal;
    color: var(--muted);
}
.modal-required-mark { color: #ef4444; }

.modal-field-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-sizing: border-box;
}
.modal-field-input-lg {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
}
.modal-field-select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
}
.modal-field-select-narrow {
    width: 200px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
}
.modal-field-hint {
    font-size: 12px;
    color: var(--muted);
    display: block;
    margin-top: 4px;
}

/* ---------- Modal: info & loading ---------- */
.modal-info-box {
    margin-top: 16px;
    padding: 12px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 13px;
}
.modal-loading-block {
    margin-top: 16px;
    text-align: center;
}

/* ---------- Modal width variants ---------- */
.modal-dialog-xs { max-width: 380px; }
.modal-dialog-sm { max-width: 400px; }
.modal-dialog-md { max-width: 420px; }
.modal-dialog-lg { max-width: 440px; }

/* ---------- Chain info preview ---------- */
.chain-info {
    margin-top: 12px;
    padding: 12px;
    background: #f3f4f6;
    border-radius: 8px;
}
.chain-info-row { margin-bottom: 8px; }
.chain-info-success {
    padding: 12px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
}
.seq-preview {
    font-size: 11px;
    word-break: break-all;
}
.seq-preview-spaced {
    font-size: 11px;
    word-break: break-all;
    letter-spacing: 1px;
}
.seq-preview-block {
    font-size: 11px;
    word-break: break-all;
    letter-spacing: 1px;
    display: block;
    margin-top: 4px;
    max-height: 60px;
    overflow-y: auto;
}

/* ---------- Danger / delete UI ---------- */
.modal-title-danger { color: #dc2626; }

.btn-danger-solid {
    background: #dc2626;
    color: white;
}

.delete-job-name {
    background: #f3f4f6;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    margin: 12px 0;
    word-break: break-all;
}

.delete-warn-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
.delete-warn-icon {
    flex-shrink: 0;
    margin-top: 2px;
}
.delete-warn-title {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #111827;
}
.delete-warn-desc {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}
.delete-summary-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
}
.delete-count-emphasis {
    font-weight: 600;
    color: #dc2626;
}
.delete-count-tail { color: #991b1b; }

.confirm-prompt {
    margin: 0 0 16px 0;
    color: #374151;
}
.confirm-token {
    font-family: monospace;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
}
.confirm-input {
    width: 100%;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.confirm-help {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.rename-input { width: 100%; margin: 12px 0; }
.rename-help {
    font-size: 12px;
    color: #6b7280;
}
.rename-help-id { font-family: monospace; }

.field-error-text {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
}

/* ---------- Job Builder: field flex sizing ---------- */
.field-target-length  { min-width: 140px; flex: 0.6; }
.field-seed           { min-width: 120px; flex: 0.5; }
.field-wt-template    { flex: 2; min-width: 320px; }
.field-edit-spans     { flex: 1; min-width: 280px; }
.field-pdb-upload     { flex: 1; min-width: 260px; }
.field-parsed-seq     { flex: 1; min-width: 240px; }
.field-msa-upload     { flex: 1; min-width: 220px; }
.field-msa-run        { flex: 1; min-width: 240px; }
.field-sequence-motifs { min-width: 360px; }

.row-pdb-wrap { flex-wrap: wrap; }

.ref-panel-card {
    padding: 14px;
    box-shadow: none;
    border-radius: 14px;
    border: 1px solid var(--line);
}
.wt-textarea  { min-height: 120px; }
.pdb-textarea { min-height: 80px; font-size: 11px; }

/* span/motif table column widths */
.col-span-pos        { width: 80px; }
.col-span-pos-sm     { width: 70px; }
.col-span-action     { width: 40px; }
.col-span-action-xs  { width: 32px; }
.col-motif-aa        { min-width: 120px; }

/* PDB upload status banner */
.pdb-upload-status {
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}
.pdb-upload-check { color: #16a34a; font-weight: 600; }
.pdb-upload-name-gap { margin-left: 6px; }
.pdb-upload-meta-gap { margin-left: 12px; }
.pdb-upload-change-btn {
    margin-left: 12px;
    padding: 4px 10px;
    font-size: 12px;
}
.btn-full-width { width: 100%; }

/* Reference Protein sub-controls */
.ref-prot-toggle-row {
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.ref-prot-input-row {
    gap: 8px;
    margin-top: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.ref-prot-label-strong { font-weight: 600; }
.ref-prot-label-medium { font-weight: 500; }
.ref-prot-pdb-id   { width: 100px;  font-size: 13px; }
.ref-prot-chain    { width:  64px;  font-size: 13px; text-align: center; }
.ref-prot-uniprot  { width: 140px;  font-size: 13px; }
.ref-prot-status   { margin-top: 6px; }

/* SS3 actions row */
.ss3-actions-row {
    margin-top: 8px;
    gap: 8px;
    align-items: center;
}
.hint-no-margin { margin: 0; }

/* MSA panel */
.msa-step-title    { margin-bottom: 8px; }
.msa-step-label    { font-weight: 600; font-size: 13px; }
.msa-row-bottom    { align-items: flex-end; }
.msa-hint-spaced   { margin-bottom: 6px; }
.msa-status-line   { margin-top: 4px; }
.msa-divider-tight { margin: 12px 0; }
.msa-row-center {
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.msa-status-row    { gap: 6px; align-items: center; }
.msa-results-block { margin-top: 14px; }
.msa-threshold-row   { gap: 10px; }
.msa-threshold-input { flex: 1; }
.msa-threshold-value { min-width: 45px; }
.msa-profile-kpi     { margin: 10px 0 0 0; }
.msa-downloads-block { margin-top: 10px; }
.msa-download-link {
    display: block;
    line-height: 1.4;
    padding: 2px 0;
}

/* Inline checkbox row used inside MSA card */
.checkbox-inline-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Bottom action bar for Job Builder */
.btns-spaced     { margin-top: 12px; }
.hint-spaced     { margin-top: 10px; }
.errorbox-spaced { margin-top: 10px; }

/* ---------- History ---------- */
.section-title-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.history-card-spaced { margin-top: 16px; }
.history-delete-btn {
    font-size: 12px;
    padding: 4px 10px;
}
.history-empty-message {
    text-align: center;
    padding: 20px;
}
.col-status  { width:  90px; }
.col-mode    { width: 110px; }
.col-created { width: 140px; }
.col-actions { width: 130px; }

/* ---------- Sidebar ---------- */
.section-h3-flush { margin-top: 0; }
.list-tight {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.7;
}

/* ---------- Eval panel ---------- */
.eval-details-block {
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
}

/* Force-hide the auto-computed Evaluation Results panel.
 *
 * The legacy partial used inline `style="display:none"` which was both
 * a CSP violation and (incidentally) suppressed an underlying backend
 * bug — wt-similarity's PairwiseAligner call fails with the current
 * BioPython version, so the panel only ever displayed an error pill.
 *
 * After moving the inline style out, `.eval-panel.show` (added by
 * showEvalPanel(true)) was finally able to win over the class-based
 * hide rule, which exposed the broken pill on workspace pages.
 *
 * Until the backend wt-similarity error is fixed, we keep the panel
 * hidden via an ID-specificity rule (overrides .eval-panel.show without
 * needing inline style or !important on .is-hidden, so other components
 * are unaffected). To re-enable later, delete this single rule. */
#evalPanel { display: none !important; }

/* ---------- Workspace header back arrow ---------- */
.workspace-back-arrow {
    margin-right: 4px;
}

/* ---------- Align panel: hidden index/load input ---------- */
.seq-indices-input { width: 120px; }