:root {
    --bg: #f4f5f8;
    --surface: #ffffff;
    --ink: #1f2330;
    --muted: #6b7280;
    --line: #e5e7eb;
    /* Plasma-derived accent palette to echo the paper figures. */
    --accent: #6a00a8;
    --accent-2: #b12a90;
    --accent-warm: #fca636;
    --accent-deep: #0d0887;
    --danger: #c0392b;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(16, 18, 30, 0.06), 0 6px 20px rgba(16, 18, 30, 0.06);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
}

.container { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }

/* Header */
header {
    text-align: center;
    padding: 44px 24px;
    background: linear-gradient(120deg, var(--accent-deep) 0%, var(--accent) 45%, var(--accent-2) 100%);
    color: #fff;
    border-radius: var(--radius);
    margin-bottom: 24px;
}
header h1 { font-size: 2.6rem; letter-spacing: 0.5px; }
header .subtitle { opacity: 0.92; font-size: 1.02rem; max-width: 720px; margin: 8px auto 0; }

/* Cards / sections */
.about-section, .input-section, .results-section, .error-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 26px;
    margin-bottom: 22px;
}
.about-section p { color: #4b5060; }

.citation-box {
    background: #f6f0fb;
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    margin-top: 14px;
    border-radius: 6px;
    font-size: 0.92rem;
}
.citation-box a { color: var(--accent); margin-left: 6px; }

.section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.section-head h2, .section-head h3 { color: var(--accent); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; color: #374151; }

/* Examples + form */
.examples-inline { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 7px; color: #374151; }
.optional { font-weight: 400; color: var(--muted); font-size: 0.85rem; }

input[type="text"], input[type="search"], textarea, select {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--line);
    border-radius: 7px;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
textarea, #sequence { font-family: 'SF Mono', 'Monaco', 'Menlo', monospace; resize: vertical; min-height: 120px; }
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(106, 0, 168, 0.12);
}
select { cursor: pointer; }
.examples-inline select { width: auto; padding: 7px 10px; }

.char-count, .help-text { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.char-count { text-align: right; }

button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff; border: none; border-radius: 8px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(106, 0, 168, 0.3); }
button[type="submit"]:disabled { opacity: 0.7; cursor: progress; transform: none; }

.run-meta { font-size: 0.85rem; color: var(--muted); }

/* Downloads */
.download-buttons { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.download-btn {
    padding: 9px 16px; background: #fff; color: var(--accent);
    border: 1.5px solid var(--accent); border-radius: 7px;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.download-btn:hover { background: var(--accent); color: #fff; }

.pdb-note {
    background: #fff7e8; border-left: 3px solid var(--accent-warm);
    padding: 10px 14px; border-radius: 6px; font-size: 0.9rem; color: #7a5b1e; margin-bottom: 16px;
}

/* Results layout */
.results-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; }
@media (min-width: 900px) { .results-grid.has-viewer { grid-template-columns: 1.1fr 0.9fr; } }
.plot-container, .viewer-container {
    border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fafafa;
}
#mol-viewer { width: 100%; height: 360px; position: relative; border-radius: 6px; overflow: hidden; background: #fff; }
.viewer-legend { font-size: 0.8rem; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grad-bar {
    display: inline-block; width: 120px; height: 12px; border-radius: 3px; vertical-align: middle;
    /* plasma */
    background: linear-gradient(90deg, #0d0887 0%, #6a00a8 25%, #b12a90 50%, #e16462 75%, #fca636 90%, #f0f921 100%);
}
.legend-ends { display: inline-flex; gap: 84px; font-size: 0.72rem; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }
.swatch.active { background: red; }

/* Plot mode toggle */
.plot-toggle { display: inline-flex; border: 1.5px solid var(--accent); border-radius: 7px; overflow: hidden; }
.toggle-btn {
    padding: 5px 14px; border: none; background: #fff; color: var(--accent);
    font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.toggle-btn + .toggle-btn { border-left: 1.5px solid var(--accent); }
.toggle-btn.active { background: var(--accent); color: #fff; }

/* Table */
.table-wrapper { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
#table-filter { width: 240px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: #f8f9fb; font-weight: 600; position: sticky; top: 0; z-index: 1; }
tbody tr:hover { background: #faf7fd; }
tr.top-row { background: #f6f0fb; }
tr.top-row:hover { background: #efe4fa; }
td { font-variant-numeric: tabular-nums; }

/* Error / misc */
.error-message { background: #fdecea; border-left: 3px solid var(--danger); padding: 16px 18px; border-radius: 6px; }
.error-message h3 { color: var(--danger); margin-bottom: 6px; }
.error-message p { color: #922; }
.muted { color: var(--muted); text-align: center; padding: 40px; }

footer { text-align: center; padding: 24px; color: var(--muted); font-size: 0.86rem; }
footer code { background: #ece8f2; padding: 2px 7px; border-radius: 4px; font-family: 'SF Mono', 'Monaco', monospace; color: #4b3a63; }
footer a { color: var(--accent); }

@media (max-width: 768px) {
    header h1 { font-size: 2rem; }
    .download-buttons { flex-direction: column; }
    .download-btn { width: 100%; }
    #table-filter { width: 100%; }
}