:root {
    --bg: #0d141c;
    --panel: #131c26;
    --line: #1e2a37;
    --line-strong: #2b3b4c;
    --ui: #aeb9c6;
    --ui-dim: #6b7889;
    --accent: #5fd3bc;

    /* record-type colours — this mapping is the whole point of the tool */
    --rec-atom: #5fd3bc;
    --rec-hetatm: #f0a35e;
    --rec-seqres: #8bd450;
    --rec-helix: #b48ef0;
    --rec-sheet: #e87fb0;
    --rec-conect: #6fa8dc;
    --rec-cryst: #4fb0a5;
    --rec-hetnam: #c98f5a;
    --rec-marker: #dbe2ea;
    --rec-meta: #6b7889;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ui);
    font-family:
        ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas,
        monospace;
    -webkit-font-smoothing: antialiased;
    padding: clamp(16px, 4vw, 40px);
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
}

header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
    margin-bottom: 18px;
}
header .mark {
    width: 9px;
    height: 18px;
    background: var(--accent);
    align-self: center;
}
h1 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0;
    color: #e6edf4;
}
header .sub {
    font-size: 12px;
    color: var(--ui-dim);
    letter-spacing: 0.04em;
}

.controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.filebtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: #dbe6ef;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.filebtn:hover {
    border-color: var(--accent);
    background: #16212c;
}
.filebtn:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.filebtn input {
    display: none;
}

.status {
    font-size: 12px;
    color: var(--ui-dim);
    letter-spacing: 0.03em;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 11px;
    color: var(--ui-dim);
    margin-bottom: 16px;
    letter-spacing: 0.04em;
}
.legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
}

.viewer {
    margin: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px 20px;
    min-height: 320px;
    max-height: 72vh;
    overflow: auto;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre; /* preserve PDB's fixed columns */
    tab-size: 4;
    transition: border-color 0.15s;
}
.viewer.drag {
    border-color: var(--accent);
}
.viewer .empty {
    color: var(--ui-dim);
    white-space: normal;
    display: block;
}

/* record colours — class names match what the Go/WASM side emits (rec-<TYPE>) */
.rec-ATOM {
    color: var(--rec-atom);
}
.rec-HETATM {
    color: var(--rec-hetatm);
}
.rec-SEQRES {
    color: var(--rec-seqres);
}
.rec-HELIX {
    color: var(--rec-helix);
}
.rec-SHEET {
    color: var(--rec-sheet);
}
.rec-CONECT {
    color: var(--rec-conect);
}
.rec-CRYST1,
.rec-SCALE1,
.rec-SCALE2,
.rec-SCALE3,
.rec-ORIGX1,
.rec-ORIGX2,
.rec-ORIGX3,
.rec-MTRIX1,
.rec-MTRIX2,
.rec-MTRIX3 {
    color: var(--rec-cryst);
}
.rec-HETNAM,
.rec-HETSYN,
.rec-FORMUL,
.rec-HET {
    color: var(--rec-hetnam);
}
.rec-MODEL,
.rec-ENDMDL,
.rec-TER,
.rec-END,
.rec-MASTER {
    color: var(--rec-marker);
    font-weight: 500;
}
.rec-HEADER,
.rec-OBSLTE,
.rec-TITLE,
.rec-SPLIT,
.rec-CAVEAT,
.rec-COMPND,
.rec-SOURCE,
.rec-KEYWDS,
.rec-EXPDTA,
.rec-NUMMDL,
.rec-MDLTYP,
.rec-AUTHOR,
.rec-REVDAT,
.rec-SPRSDE,
.rec-JRNL,
.rec-REMARK,
.rec-DBREF,
.rec-SEQADV,
.rec-MODRES {
    color: var(--rec-meta);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}