/* ── Hero ───────────────────────────────────────────────── */
.app-hero {
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 1.5rem 1.1rem;
}
.app-hero--lavender {
  background: var(--c-lavender-bg);
  border-bottom-color: var(--c-lavender-border);
}
.app-hero__inner { max-width: 60rem; margin: 0 auto; }
.app-hero__title {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800;
  color: var(--c-lavender-text); letter-spacing: -.02em;
  margin: 0 0 .5rem; line-height: 1.2;
}
.app-hero__desc {
  font-size: .9rem; color: var(--color-text-secondary);
  max-width: 660px; line-height: 1.6; margin: 0 0 .85rem;
}
.app-hero__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.hero-chip {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem; font-size: .72rem; font-weight: 700;
  background: var(--color-surface); border: 1.5px solid var(--c-lavender-border);
  border-radius: var(--radius-full); color: var(--c-lavender-text); white-space: nowrap;
}

/* ── Tool shell ─────────────────────────────────────────── */
.tool-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-10);
}

/* ── Style pills bar ────────────────────────────────────── */
.pills-bar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.style-pill input[type="radio"] { display: none; }
.style-pill span {
  display: inline-block;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer; transition: all .1s; white-space: nowrap;
  user-select: none;
}
.style-pill input[type="radio"]:checked + span {
  background: var(--c-lavender-bg);
  border-color: var(--c-lavender-border);
  color: var(--c-lavender-text);
  font-weight: var(--weight-semibold);
}
.style-pill span:hover { border-color: var(--c-lavender-border); }

/* ── Options bar ────────────────────────────────────────── */
.opts-bar {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.toggle-wrap { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.toggle-wrap input[type="checkbox"] { accent-color: var(--c-lavender-text); width: 0.9rem; height: 0.9rem; cursor: pointer; }
.toggle-lbl { font-size: var(--text-xs); color: var(--color-text-secondary); user-select: none; }

/* ── Split panel ────────────────────────────────────────── */
.split-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 28rem;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 640px) {
  .split-panel { grid-template-columns: 1fr; height: auto; }
  .input-panel  { height: 14rem; }
  .output-panel { height: 18rem; border-left: none !important; border-top: 1px solid var(--color-border); }
}

/* ── Input panel ────────────────────────────────────────── */
.input-panel {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}
.output-panel { display: flex; flex-direction: column; overflow: hidden; }

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.panel-title {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.panel-action {
  font-size: var(--text-xs); background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 2px var(--space-2);
  color: var(--color-text-secondary); cursor: pointer; transition: all .1s;
}
.panel-action:hover { border-color: var(--c-lavender-border); color: var(--c-lavender-text); }

.bibtex-input {
  flex: 1; resize: none; border: none; outline: none;
  padding: var(--space-4);
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 0.72rem; line-height: 1.6;
  color: var(--color-text-secondary);
  background: transparent;
  overflow: auto;
}
.bibtex-input::placeholder { color: var(--color-text-muted); font-style: italic; }

/* ── Output panel ───────────────────────────────────────── */
.output-scroll {
  flex: 1; overflow-y: auto;
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.output-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); color: var(--color-text-muted);
  font-size: var(--text-sm); text-align: center; padding: var(--space-6);
}
.output-empty-icon { font-size: 2rem; opacity: 0.4; }

/* ── Citation cards ─────────────────────────────────────── */
.cite-card {
  border: 1px solid var(--c-lavender-border);
  border-top: 3px solid var(--c-lavender-text);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  transition: box-shadow .15s;
}
.cite-card:hover { box-shadow: 0 2px 8px rgb(74 40 152 / 0.08); }

.cite-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.cite-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cite-num {
  width: 1.4rem; height: 1.4rem;
  background: var(--c-lavender-text); color: #fff;
  border-radius: 50%; font-size: 0.62rem; font-weight: var(--weight-bold);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cite-type {
  font-size: 0.62rem; font-weight: var(--weight-semibold); color: var(--c-lavender-text);
  background: var(--c-lavender-bg); border: 1px solid var(--c-lavender-border);
  padding: 1px var(--space-2); border-radius: var(--radius-full); text-transform: capitalize;
}
.cite-key {
  font-size: 0.62rem; color: var(--color-text-muted);
  font-family: ui-monospace, monospace;
}
.cite-copy {
  flex-shrink: 0; padding: 3px var(--space-3);
  font-size: var(--text-xs);
  border: 1px solid var(--c-lavender-border);
  border-radius: var(--radius-md);
  background: var(--c-lavender-bg); color: var(--c-lavender-text);
  cursor: pointer; transition: all .1s; white-space: nowrap;
}
.cite-copy:hover { background: var(--c-lavender-text); color: #fff; }
.cite-copy.copied { background: #15803d; border-color: #15803d; color: #fff; }

.cite-text {
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.cite-warn {
  margin-top: var(--space-2);
  font-size: var(--text-xs); color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: var(--radius-sm); padding: 3px var(--space-2);
}

/* ── Sort select ────────────────────────────────────────── */
.sort-wrap { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.sort-select {
  font-size: var(--text-xs); color: var(--color-text-secondary);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 3px var(--space-2);
  cursor: pointer; outline: none;
}
.sort-select:focus { border-color: var(--c-lavender-border); }

/* ── In-text citation row ───────────────────────────────── */
.cite-intext-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.cite-intext-lbl {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0;
}
.cite-intext-val {
  font-size: var(--text-sm); color: var(--color-text-primary);
  font-family: ui-monospace, monospace; flex: 1;
}
button.cite-intext-copy {
  flex-shrink: 0; padding: 2px var(--space-2);
  font-size: var(--text-xs);
  border: 1px solid var(--c-lavender-border);
  border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--c-lavender-text);
  cursor: pointer; transition: all .1s;
}
button.cite-intext-copy:hover { background: var(--c-lavender-bg); }

/* ── Inline field editor ────────────────────────────────── */
.cite-fix-btn {
  margin-left: var(--space-2); padding: 1px var(--space-2);
  font-size: var(--text-xs);
  border: 1px solid #fde68a; border-radius: var(--radius-sm);
  background: transparent; color: #92400e;
  cursor: pointer; transition: background .1s;
}
.cite-fix-btn:hover { background: #fef3c7; }

.cite-editor {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--c-lavender-border);
  border-radius: var(--radius-md);
  background: var(--c-lavender-bg);
}
.ce-fields { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.ce-label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--c-lavender-text); flex: 1; min-width: 10rem;
}
.ce-input {
  padding: 4px var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-primary);
  border: 1px solid var(--c-lavender-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface); outline: none;
  transition: border-color .1s;
}
.ce-input:focus { border-color: var(--c-lavender-text); }
.ce-apply {
  padding: 4px var(--space-4);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  border: 1.5px solid var(--c-lavender-text);
  border-radius: var(--radius-md);
  background: var(--c-lavender-text); color: #fff;
  cursor: pointer; transition: opacity .1s;
}
.ce-apply:hover { opacity: 0.85; }

/* ── Stats bar ──────────────────────────────────────────── */
.stats-bar {
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-alt);
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
}
.stat-chip {
  font-size: var(--text-xs);
  background: var(--c-lavender-bg); border: 1px solid var(--c-lavender-border);
  border-radius: var(--radius-full); padding: 2px var(--space-3);
  color: var(--color-text-secondary);
}
.stat-chip strong { color: var(--c-lavender-text); font-weight: var(--weight-semibold); }
.stat-chip--warn { background: #fffbeb; border-color: #fde68a; }
.stat-chip--warn strong { color: #92400e; }

/* Learn more */
.learn-more{max-width:820px;margin:1.25rem auto 0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.1rem 1.5rem}
.learn-more-title{font-size:1.1rem;font-weight:800;color:var(--c-lavender-text);margin:0 0 .75rem}
.learn-more h3{font-size:1rem;font-weight:800;color:var(--color-text-primary);margin:1.1rem 0 .5rem}
.learn-more p{font-size:.88rem;line-height:1.65;color:var(--color-text-secondary);margin:0 0 .75rem}
.learn-more a{color:var(--c-lavender-text)}
.learn-more .faq-item{margin-bottom:.75rem}
.learn-more .faq-q{font-size:.88rem;font-weight:700;color:var(--color-text-primary);margin:0 0 .25rem}
.learn-more-meta{font-size:.72rem;color:var(--color-text-muted);margin-top:1rem}