/* Compare PDF — styles (uses theme vars from style.css) */
.cm-wrap { max-width: 900px; margin: 0 auto; padding: 56px 22px 90px; }
.cm-head { text-align: center; margin-bottom: 30px; }
.cm-head .eyebrow { margin-bottom: 16px; }
.cm-head h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
.cm-head p { color: var(--txt2); margin-top: 12px; font-weight: 400; }
.cm-stage { animation: fadeUp .4s cubic-bezier(.22,1,.36,1) both; }
.hidden { display: none !important; }

/* two upload slots */
.cm-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cm-slot { position: relative; display: block; cursor: pointer; border: 1.5px dashed var(--line2); border-radius: var(--r-lg); background: var(--card); padding: 30px 18px; text-align: center; transition: all .25s; }
.cm-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cm-slot:hover, .cm-slot.drag { border-color: var(--lime); background: rgba(194,240,74,0.04); }
.cm-slot.has { border-style: solid; border-color: var(--lime); }
.cm-slot-tag { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); margin-bottom: 14px; }
.cm-slot-ic { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: #0a0b0d; font-weight: 800; font-size: 1.1rem; }
.cm-slot-t { font-weight: 700; font-size: .98rem; }
.cm-slot-s { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--txt3); margin-top: 5px; }
.cm-slot.has .cm-slot-t { color: var(--lime); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* loader */
.cm-scan-box { text-align: center; padding: 48px 24px; max-width: 440px; margin: 0 auto; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.cm-spin { width: 52px; height: 52px; margin: 0 auto 22px; border: 2px solid var(--surface2); border-top-color: var(--lime); border-radius: 50%; animation: spin .8s linear infinite; box-shadow: 0 0 20px -6px var(--lime); }
.cm-scan-box h3 { font-size: 1.3rem; } .cm-scan-box p { color: var(--txt3); margin-top: 10px; font-size: .8rem; }

/* summary */
.cm-summary { text-align: center; margin-bottom: 18px; font-family: 'JetBrains Mono', monospace; font-size: .82rem; }
.cm-summary .same { color: var(--lime); }
.cm-summary b.add { color: var(--lime); } .cm-summary b.del { color: #e2683b; }

/* tabs */
.cm-tabs { display: flex; gap: 6px; padding: 5px; background: var(--card); border: 1px solid var(--line2); border-radius: 100px; margin-bottom: 16px; max-width: 320px; margin-left: auto; margin-right: auto; }
.cm-tab { flex: 1; padding: 9px; border: none; cursor: pointer; border-radius: 100px; background: transparent; color: var(--txt2); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: .85rem; }
.cm-tab.sel { background: var(--lime); color: #0a0b0d; }

.cm-legend { display: flex; gap: 14px; justify-content: center; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; font-size: .66rem; }
.cm-lg.add { color: var(--lime); } .cm-lg.del { color: #e2683b; }

/* text diff */
.cm-diff { border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg); overflow: hidden; max-height: 600px; overflow-y: auto; font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
.cm-line { display: flex; gap: 8px; padding: 3px 12px; white-space: pre-wrap; word-break: break-word; border-left: 3px solid transparent; }
.cm-line .mk { width: 12px; flex-shrink: 0; color: var(--txt3); }
.cm-line.eq { color: var(--txt3); }
.cm-line.add { background: rgba(194,240,74,0.08); border-left-color: var(--lime); color: var(--txt); }
.cm-line.add .mk { color: var(--lime); }
.cm-line.del { background: rgba(226,104,59,0.08); border-left-color: #e2683b; color: var(--txt2); }
.cm-line.del .mk { color: #e2683b; }

/* visual side by side */
.cm-visual { display: flex; flex-direction: column; gap: 18px; }
.cm-vrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-vcol { border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; background: #fff; }
.cm-vcol img { display: block; width: 100%; height: auto; }
.cm-vcol-lbl { font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--txt3); margin-bottom: 6px; }
.cm-vcell { display: flex; flex-direction: column; }
.cm-vempty { aspect-ratio: 3/4; display: grid; place-items: center; color: var(--txt3); font-family: 'JetBrains Mono', monospace; font-size: .7rem; background: var(--surface2); border-radius: var(--r); }
.cm-fallback { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--txt3); margin: 18px 0; }

@media (max-width: 600px) { .cm-wrap { padding-left: 14px; padding-right: 14px; } }

/* ===================== ADVANCED COMPARE UI ===================== */
/* widen the result view */
.cm-stage#cmResult { max-width: 1040px; margin-left: auto; margin-right: auto; }

/* result top bar: summary + new button */
.cm-resbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.cm-resbar .cm-summary { text-align: left; margin: 0; }
.cm-newbtn { flex-shrink: 0; padding: 9px 16px; border: 1px solid var(--line2); border-radius: 100px; background: var(--card); color: var(--txt2); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .82rem; cursor: pointer; transition: all .15s; }
.cm-newbtn:hover { border-color: var(--lime); color: var(--lime); }
.cm-summary b.chg { color: var(--violet); }
.cm-pgcount { color: var(--txt3); }

/* toolbar: tabs + nav + filters */
.cm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cm-tabs { margin: 0; max-width: none; }
.cm-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cm-nav { display: flex; align-items: center; gap: 6px; }
.cm-navbtn { width: 30px; height: 30px; border: 1px solid var(--line2); border-radius: 8px; background: var(--card); color: var(--txt2); cursor: pointer; font-size: .9rem; transition: all .15s; }
.cm-navbtn:hover { border-color: var(--lime); color: var(--lime); }
.cm-navlabel { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--txt3); min-width: 44px; text-align: center; }
.cm-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cm-filter { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--txt3); cursor: pointer; }
.cm-filter input { accent-color: var(--lime); }

/* page jump strip */
.cm-pagemap { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); }
.cm-pagechip { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--txt3); font-family: 'JetBrains Mono', monospace; font-size: .72rem; cursor: pointer; transition: all .15s; }
.cm-pagechip:hover { border-color: var(--lime); color: var(--txt); }
.cm-pagechip.changed { border-color: var(--violet); color: var(--violet); background: rgba(139,125,255,0.08); }
.cm-pagechip.sel { outline: 2px solid var(--lime); }

/* changed lines (word-level) */
.cm-line.chg-del { background: rgba(226,104,59,0.07); border-left-color: var(--violet); color: var(--txt2); }
.cm-line.chg-add { background: rgba(194,240,74,0.06); border-left-color: var(--violet); color: var(--txt); }
.cm-line.chg-del .mk, .cm-line.chg-add .mk { color: var(--violet); }
.cm-line .w-del { background: rgba(226,104,59,0.32); border-radius: 3px; text-decoration: line-through; text-decoration-color: rgba(226,104,59,0.6); }
.cm-line .w-add { background: rgba(194,240,74,0.28); border-radius: 3px; }
.cm-line.focus { outline: 2px solid var(--lime); outline-offset: -2px; }

/* only-changes filter hides equal lines */
.cm-diff.only-changes .cm-line.eq { display: none; }

/* visual head labels */
.cm-vhead { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--txt3); }
.cm-vhead span { text-align: center; }
/* region highlight marks on visual pages */
.cm-vcol { position: relative; }
.cm-mark { position: absolute; background: rgba(139,125,255,0.22); border: 1.5px solid var(--violet); border-radius: 2px; pointer-events: none; box-shadow: 0 0 0 1px rgba(139,125,255,0.3); }
/* allow each column to scroll for sync-scroll */
.cm-vcol { max-height: 70vh; overflow-y: auto; }

@media (max-width: 760px){
  .cm-toolbar { flex-direction: column; align-items: stretch; }
  .cm-controls { justify-content: space-between; }
  .cm-vcol { max-height: none; overflow: visible; }
}

/* scanned-PDF OCR tip */
.cm-tip { display: flex; gap: 11px; margin-top: 16px; padding: 13px 15px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--card); font-size: .82rem; line-height: 1.55; color: var(--txt2); }
.cm-tip-ic { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }
.cm-tip b { color: var(--txt); }
.cm-tip a { color: var(--lime); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.cm-tip a:hover { border-bottom-color: var(--lime); }