/* ═══════════════════════════════════════════════════════════════
   OmicsLab — Citation Manager styles (Prompt 17)
   ═══════════════════════════════════════════════════════════════ */
.cit-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.cit-header { margin-bottom: 1.5rem; }
.cit-badge { font-size: .65rem; font-weight: 700; letter-spacing: .12em; color: #58a6ff; background: rgba(88,166,255,.1); border: 1px solid rgba(88,166,255,.25); border-radius: 20px; padding: .25rem .7rem; display: inline-block; margin-bottom: .5rem; }
.cit-title { font-size: 1.9rem; font-weight: 700; margin: 0 0 .4rem; }
.cit-subtitle { color: #8b949e; font-size: .92rem; max-width: 600px; margin: 0; }

.cit-main { display: flex; flex-direction: column; gap: 1.1rem; }
.cit-card { background: #161b22; border: 1px solid #21262d; border-radius: 10px; padding: 1rem 1.15rem; }
.cit-card-title { font-size: .85rem; font-weight: 700; color: #e6edf3; margin-bottom: .8rem; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .5rem; }

/* ── Form ── */
.cit-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .85rem; margin-bottom: .75rem; }
@media (max-width: 640px) { .cit-form-grid { grid-template-columns: 1fr; } }
.cit-span2 { grid-column: 1 / -1; }
.cit-lbl { font-size: .76rem; color: #8b949e; display: flex; flex-direction: column; gap: .22rem; }
.cit-inp { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #e6edf3; font-size: .83rem; padding: .35rem .6rem; width: 100%; box-sizing: border-box; }
.cit-inp:focus { outline: none; border-color: #58a6ff; }
.cit-form-footer { display: flex; align-items: center; gap: .75rem; }
.cit-add-btn { padding: .45rem 1rem; background: rgba(88,166,255,.1); border: 1px solid #58a6ff; border-radius: 7px; color: #58a6ff; font-size: .85rem; font-weight: 700; cursor: pointer; transition: all .12s; }
.cit-add-btn:hover { background: rgba(88,166,255,.18); }
.cit-status { font-size: .78rem; color: #3fb950; }

/* ── Export row ── */
.cit-export-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.cit-fmt-opt { font-size: .74rem; color: #8b949e; display: flex; align-items: center; gap: .25rem; cursor: pointer; }
.cit-fmt-opt input { accent-color: #58a6ff; }
.cit-export-actions { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.cit-export-btn { display: flex; align-items: center; gap: .35rem; padding: .32rem .7rem; border: 1px solid #30363d; border-radius: 6px; background: transparent; color: #8b949e; font-size: .78rem; cursor: pointer; transition: all .12s; }
.cit-export-btn:hover { border-color: #3fb950; color: #3fb950; }
.cit-copy-all-btn { padding: .32rem .7rem; border: 1px solid #30363d; border-radius: 6px; background: transparent; color: #8b949e; font-size: .78rem; cursor: pointer; transition: all .12s; }
.cit-copy-all-btn:hover { border-color: #58a6ff; color: #58a6ff; }

/* ── Library ── */
.cit-library { display: flex; flex-direction: column; gap: .65rem; max-height: 600px; overflow-y: auto; }
.cit-lib-count { font-size: .72rem; color: #6e7681; font-weight: 400; margin-left: .4rem; }
.cit-empty { font-size: .82rem; color: #6e7681; text-align: center; padding: 2rem; }
.cit-ref-card { display: flex; gap: .75rem; align-items: flex-start; background: #0d1117; border: 1px solid #21262d; border-radius: 7px; padding: .7rem .85rem; }
.cit-ref-num { font-size: .8rem; font-weight: 700; color: #58a6ff; min-width: 28px; font-family: 'JetBrains Mono', monospace; }
.cit-ref-body { flex: 1; }
.cit-ref-title { font-size: .83rem; font-weight: 600; color: #e6edf3; margin-bottom: .2rem; }
.cit-ref-authors { font-size: .76rem; color: #8b949e; font-style: italic; margin-bottom: .2rem; }
.cit-ref-meta { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .72rem; color: #6e7681; margin-bottom: .3rem; }
.cit-journal { color: #58a6ff; }
.cit-year { color: #e3b341; }
.cit-vol, .cit-pages { color: #6e7681; }
.cit-doi { color: #58a6ff; text-decoration: underline; }
.cit-ref-tags { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .35rem; }
.cit-tag { font-size: .62rem; padding: .1rem .38rem; background: rgba(88,166,255,.08); border: 1px solid #21262d; border-radius: 8px; color: #8b949e; }
.cit-ref-formatted { font-size: .74rem; color: #6e7681; font-family: 'JetBrains Mono', monospace; background: rgba(0,0,0,.2); border-radius: 4px; padding: .35rem .5rem; line-height: 1.5; margin-top: .2rem; word-break: break-all; }
.cit-ref-actions { display: flex; flex-direction: column; gap: .3rem; }
.cit-copy-btn, .cit-del-btn { padding: .25rem .4rem; border: 1px solid #30363d; border-radius: 5px; background: transparent; cursor: pointer; transition: all .1s; }
.cit-copy-btn { color: #58a6ff; }
.cit-copy-btn:hover { border-color: #58a6ff; background: rgba(88,166,255,.08); }
.cit-del-btn { color: #ff6b6b; }
.cit-del-btn:hover { border-color: #ff6b6b; background: rgba(255,107,107,.08); }

/* ── Formats info ── */
.cit-formats-info { background: #161b22; border: 1px solid #21262d; border-radius: 10px; padding: 1.1rem; margin-top: 1rem; }
.cit-info-title { font-size: .85rem; font-weight: 700; color: #e6edf3; margin-bottom: .8rem; }
.cit-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; }
.cit-fmt-card { background: #0d1117; border: 1px solid #21262d; border-radius: 7px; padding: .65rem .8rem; }
.cit-fmt-name { font-size: .82rem; font-weight: 700; color: #58a6ff; margin-bottom: .2rem; }
.cit-fmt-use { font-size: .72rem; color: #8b949e; margin-bottom: .3rem; line-height: 1.45; }
.cit-fmt-ex { font-size: .68rem; color: #6e7681; font-family: 'JetBrains Mono', monospace; white-space: pre-wrap; }