/* align.labetter.fun v2 — 多序列比对 */

:root { --ink:#1a1a2e; --ink-light:#4a5568; --blue:#2563eb; --blue-bg:#eff6ff; --red:#e11d48; --red-bg:#fef2f2; --surface:#f8fafc; --card:#fff; --border:#e2e8f0; --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.06); }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;background:var(--surface);color:var(--ink);line-height:1.6}

/* Header */
.header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-inner{max-width:1400px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:1.05rem;font-weight:600}
.logo strong{color:var(--blue)}
.header-nav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.nav-badge{font-size:.78rem;padding:4px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--ink-light);text-decoration:none;font-weight:500}
.nav-badge:hover{background:#e2e8f0}

/* Main */
.main{max-width:1400px;margin:0 auto;padding:0 20px 40px}
.hero-section{text-align:center;padding:32px 0 20px}
.hero-section h1{font-size:1.6rem;font-weight:700}
.hero-desc{margin-top:4px;color:var(--ink-light);font-size:.88rem}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:#fafafa}
.card-header h2{font-size:.92rem;font-weight:700}
.card-body{padding:14px 16px}
.card-footer{padding:12px 16px;border-top:1px solid var(--border);text-align:center}
.header-right{display:flex;gap:6px}
.load-center{text-align:center;padding:40px}

/* Seq input rows */
.seq-row{display:grid;grid-template-columns:120px 1fr;gap:8px;margin-bottom:10px;align-items:stretch}
.seq-row:last-child{margin-bottom:0}
.seq-label{display:flex;flex-direction:column;gap:4px}
.seq-num{font-size:.75rem;color:var(--ink-light);font-weight:600;text-align:right;padding:4px 0}
.seq-name{padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:.8rem;font-family:monospace;background:#fafafa;width:100%;flex:1}
.seq-name:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.seq-data{padding:8px;border:1px solid var(--border);border-radius:6px;font-family:"Cascadia Code","Fira Code",Consolas,monospace;font-size:.8rem;line-height:1.4;resize:vertical;width:100%;min-height:60px;background:#fafafa}
.seq-data:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}

/* Buttons */
.btn-ghost-sm{padding:5px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--ink-light);font-size:.78rem;cursor:pointer;transition:all .12s}
.btn-ghost-sm:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.btn-run-lg{padding:12px 40px;border:none;border-radius:10px;background:var(--blue);color:#fff;font-size:.95rem;font-weight:700;cursor:pointer}
.btn-run-lg:hover{background:#1d4ed8}
.btn-run-lg:disabled{opacity:.6;cursor:not-allowed}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
.loading-spin{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
.loading-msg{margin-top:10px;color:var(--ink-light);font-size:.85rem}
.error-msg{color:var(--red);padding:10px;background:var(--red-bg);border-radius:8px;font-size:.85rem}
.error-card{border-color:var(--red);background:#fff5f5}

/* Viz controls */
.viz-card{position:sticky;top:56px;z-index:50}
.viz-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.viz-label{font-size:.8rem;font-weight:500;color:var(--ink-light);display:flex;align-items:center;gap:4px}
.viz-label select{padding:3px 6px;border:1px solid var(--border);border-radius:5px;font-size:.8rem}
.viz-label input[type=range]{width:70px}
.viz-label input[type=checkbox]{margin:0}

/* Results */
.results-area{margin-top:4px}
.tree-align-row{display:flex;gap:0}
.tree-panel{flex-shrink:0;width:220px;background:#0f172a;border:1px solid #334155;border-radius:8px 0 0 8px;overflow:hidden}
.tree-panel svg{display:block;min-height:80px;width:100%}
.align-panel{flex:1;min-width:0;background:#0f172a;border:1px solid #334155;border-radius:0 8px 8px 0;border-left:none;overflow:auto;max-height:75vh}

/* Alignment */
.aln-display{padding:10px 14px;font-family:"Cascadia Code","Fira Code",Consolas,monospace;font-size:11px;line-height:1.55}
.aln-stats{display:flex;gap:16px;margin-bottom:14px;font-size:.8rem;color:#94a3b8;flex-wrap:wrap}
.aln-stats b{color:#e2e8f0}
.aln-stats .c-yellow{color:#fbbf24}
.aln-stats .c-purple{color:#a78bfa}
.aln-stats code{font-size:.78rem}
.aln-row{white-space:pre;display:flex;min-height:1.3em}
.aln-name{color:#94a3b8;display:inline-block;min-width:80px;flex-shrink:0;text-align:right;padding-right:10px;font-weight:500}
.aln-seq{flex:1;white-space:pre}
.aln-cons .aln-name{color:#a78bfa}
.aln-sep{height:6px}

/* Matrix */
.matrix-card{margin-top:14px}
.matrix-table{border-collapse:collapse;font-size:.78rem;width:100%}
.matrix-table td,.matrix-table th{border:1px solid var(--border);padding:4px 8px;text-align:center;font-variant-numeric:tabular-nums}
.matrix-table th{background:#f8fafc;font-weight:600;color:var(--ink-light)}
.toggle-arrow{color:var(--ink-light);font-size:.8rem;transition:transform .2s}
.toggle-arrow.collapsed{transform:rotate(-90deg)}

/* Responsive */
@media(max-width:900px){
  .tree-align-row{flex-direction:column}
  .tree-panel{width:100%!important;border-radius:8px 8px 0 0;max-height:200px}
  .align-panel{border-radius:0 0 8px 8px!important;border-left:1px solid #334155!important;border-top:none}
  .seq-row{grid-template-columns:100px 1fr}
}
@media(max-width:600px){
  .header-inner{flex-wrap:wrap}
  .viz-controls{gap:8px}
  .seq-row{grid-template-columns:1fr}
  .seq-label{flex-direction:row;align-items:center}
  .seq-num{text-align:left}
}