* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #fff; color: #0f172a; min-height: 100vh; -webkit-font-smoothing: antialiased; }
.container { max-width: 72rem; margin: 0 auto; }
[hidden] { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* ===== Buttons ===== */
.arn-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border-radius: .875rem; font-size: .875rem; font-weight: 700; cursor: pointer; border: none; transition: all .2s ease; text-decoration: none; white-space: nowrap; font-family: inherit; }
.arn-btn-primary { background: linear-gradient(135deg, #e11d48, #9f1239); color: #fff; box-shadow: 0 4px 14px rgba(225, 29, 72, .3); }
.arn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(225, 29, 72, .4); }
.arn-btn-ghost { background: #fff; color: #475569; border: 1.5px solid #e2e8f0; }
.arn-btn-ghost:hover { border-color: #6366f1; color: #4338ca; background: #eff6ff; }
.arn-btn-ghost.active { border-color: #6366f1; color: #4338ca; background: #eff6ff; }
.arn-btn-sm { padding: .45rem .9rem; font-size: .75rem; border-radius: .625rem; }
.arn-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; pointer-events: none; }

/* ===== Processing ===== */
.arn-spinner { position: relative; width: 72px; height: 72px; margin: 0 auto 1.25rem; }
.arn-spinner .ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid #f1f5f9; border-top-color: #3b82f6; border-right-color: #8b5cf6; animation: spin 1s linear infinite; }
.arn-spinner .ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.arn-progress-track { background: #e2e8f0; border-radius: 9999px; height: 8px; overflow: hidden; margin: 1.25rem auto; max-width: 320px; }
.arn-progress-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); transition: width .3s ease; }
.arn-pstep { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; color: #64748b; opacity: .35; transition: all .3s; }
.arn-pstep.active { opacity: 1; color: #3b82f6; font-weight: 700; }
.arn-pstep.done { opacity: 1; color: #10b981; }
.arn-pstep-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ===== Info + stats ===== */
.arn-info-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: .875rem; padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-bottom: 1rem; }
.arn-info-item { display: flex; flex-direction: column; gap: .1rem; }
.arn-info-key { font-size: .625rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.arn-info-val { font-size: .8125rem; font-weight: 700; color: #1e293b; }

.arn-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .625rem; margin-bottom: 1.25rem; }
.arn-stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: .875rem; padding: .875rem .625rem; text-align: center; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.arn-stat-num { font-size: 1.375rem; font-weight: 800; line-height: 1; color: #0f172a; }
.arn-stat-label { font-size: .625rem; color: #64748b; font-weight: 700; margin-top: .3rem; text-transform: uppercase; letter-spacing: .03em; }

/* ===== Signature / warning banners ===== */
.arn-warn-banner { display: flex; gap: .75rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 1rem; padding: 1rem 1.25rem; font-size: .8125rem; color: #92400e; line-height: 1.65; margin-bottom: 1.25rem; }
.arn-warn-banner svg { flex-shrink: 0; margin-top: .1rem; }
.arn-danger-banner { display: flex; gap: .75rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 1rem; padding: 1rem 1.25rem; font-size: .8125rem; color: #991b1b; line-height: 1.65; margin-bottom: 1.25rem; }
.arn-danger-banner svg { flex-shrink: 0; margin-top: .1rem; }
.arn-privacy-banner { display: flex; align-items: center; gap: .75rem; background: rgba(16, 185, 129, .06); border: 1px solid rgba(16, 185, 129, .2); border-radius: .875rem; padding: .875rem 1.25rem; font-size: .8125rem; color: #065f46; font-weight: 600; margin-bottom: 1.25rem; }

/* ===== Category selector ===== */
.arn-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 720px) { .arn-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.arn-cat-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 1rem; padding: .875rem .9375rem; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; position: relative; }
.arn-cat-card:hover { border-color: #c7d2fe; }
.arn-cat-card.checked { border-color: #6366f1; background: #f5f5ff; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.arn-cat-card.danger.checked { border-color: #ef4444; background: #fef2f2; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.arn-cat-card.disabled-locked { opacity: .72; }
.arn-cat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.arn-cat-dot { width: .625rem; height: .625rem; border-radius: 50%; flex-shrink: 0; }
.arn-cat-name { font-size: .8125rem; font-weight: 700; color: #0f172a; }
.arn-cat-count { font-size: 1.125rem; font-weight: 800; color: #0f172a; margin: .2rem 0; }
.arn-cat-desc { font-size: .6875rem; color: #64748b; line-height: 1.5; }
.arn-cat-lock { font-size: .625rem; font-weight: 700; color: #b45309; background: #fffbeb; padding: .1rem .45rem; border-radius: 9999px; display: inline-flex; align-items: center; gap: .2rem; margin-top: .4rem; }
.arn-cat-confirm { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #fecaca; }
.arn-cat-confirm p { font-size: .6875rem; color: #991b1b; line-height: 1.5; margin-bottom: .4rem; }
.arn-cat-confirm button { width: 100%; }

/* ===== Page range ===== */
.arn-range-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 1rem; padding: 1rem 1.125rem; margin-top: 1rem; }
.arn-radio-row { display: flex; gap: 1rem; margin-bottom: .625rem; flex-wrap: wrap; }
.arn-radio-lbl { display: flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 600; color: #334155; cursor: pointer; }
.arn-radio-lbl input { accent-color: #6366f1; }
.arn-range-input { width: 100%; padding: .55rem .75rem; border: 1.5px solid #e2e8f0; border-radius: .625rem; font-size: .8125rem; font-family: inherit; }
.arn-range-input:disabled { background: #f8fafc; color: #94a3b8; }
.arn-range-error { font-size: .6875rem; color: #dc2626; margin-top: .35rem; display: none; }
.arn-range-error.show { display: block; }

/* ===== Page heatmap ===== */
.arn-page-chip { position: relative; min-width: 1.875rem; height: 1.875rem; padding: 0 .35rem; border-radius: .5rem; border: 1.5px solid #e2e8f0; background: #fff; color: #94a3b8; font-size: .6875rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; }
.arn-page-chip.has-annots { color: #0f172a; border-color: #fecdd3; background: #fff1f2; }
.arn-page-chip.active { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, .15); }
.arn-page-chip.out-of-scope { opacity: .4; }
.arn-page-chip-dot { position: absolute; top: -.2rem; right: -.2rem; width: .4375rem; height: .4375rem; border-radius: 50%; background: #e11d48; }

/* ===== Inspector ===== */
.arn-inspector { margin-top: 1.25rem; }
.arn-inspector-toolbar { display: flex; gap: .625rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.arn-search { flex: 1; min-width: 10rem; padding: .55rem .875rem; border-radius: .625rem; border: 1.5px solid #e2e8f0; font-size: .8125rem; font-family: inherit; }
.arn-search:focus { outline: none; border-color: #6366f1; }
.arn-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: .875rem; }
.arn-table { width: 100%; border-collapse: collapse; font-size: .8125rem; min-width: 640px; }
.arn-table th { text-align: left; padding: .625rem .75rem; background: #f8fafc; color: #0f172a; font-weight: 700; border-bottom: 2px solid #e8ecf0; white-space: nowrap; position: sticky; top: 0; }
.arn-table td { padding: .55rem .75rem; border-bottom: 1px solid #eef2f7; color: #475569; vertical-align: top; }
.arn-table tr:last-child td { border-bottom: none; }
.arn-table tr.locked td { color: #94a3b8; }
.arn-row-check { accent-color: #6366f1; }
.arn-type-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .6875rem; font-weight: 700; padding: .15rem .5rem; border-radius: 9999px; white-space: nowrap; }
.arn-snippet { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.arn-inspector-more { text-align: center; padding: .75rem; font-size: .75rem; color: #64748b; }

/* ===== Modal (compare) ===== */
.arn-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .75); backdrop-filter: blur(6px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.arn-modal-box { background: #fff; border-radius: 1.5rem; max-width: 960px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 32px 80px rgba(15, 23, 42, .3); }
.arn-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #f1f5f9; }
.arn-modal-title { font-size: 1rem; font-weight: 800; color: #0f172a; }
.arn-modal-close { width: 32px; height: 32px; border-radius: .5rem; border: 1.5px solid #e2e8f0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; }
.arn-modal-close:hover { border-color: #ef4444; color: #ef4444; }
.arn-modal-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 1.25rem; }
@media (max-width: 720px) { .arn-modal-compare-grid { grid-template-columns: 1fr; } }
.arn-modal-page-wrap { border: 1.5px solid #e2e8f0; border-radius: 1rem; overflow: hidden; background: #f8fafc; }
.arn-modal-page-wrap canvas { width: 100%; height: auto; display: block; }
.arn-modal-page-label { padding: .625rem .875rem; background: #fff; border-bottom: 1px solid #e2e8f0; font-size: .8rem; font-weight: 700; color: #475569; display: flex; align-items: center; gap: .5rem; }
.arn-modal-nav { display: flex; justify-content: center; gap: .75rem; padding: 0 1.25rem 1.25rem; }

/* ===== Empty / success / error ===== */
.arn-empty-state { text-align: center; padding: 3.5rem 2rem; background: #f8fafc; border: 1.5px dashed #e2e8f0; border-radius: 1.25rem; }
.arn-download-card { background: linear-gradient(135deg, #fff1f2, #ffe4e6); border: 2px solid #fecdd3; border-radius: 1.5rem; padding: 2.5rem; text-align: center; }
.arn-success-icon { width: 4.5rem; height: 4.5rem; background: linear-gradient(135deg, #10b981, #059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; box-shadow: 0 8px 24px rgba(16, 185, 129, .35); }
.arn-error-card { background: #fef2f2; border: 1.5px solid #fecaca; border-radius: 1rem; padding: 2rem; text-align: center; color: #dc2626; }
.arn-pw-input { width: 100%; max-width: 20rem; margin: 0 auto 1rem; display: block; padding: .7rem .9rem; border: 1.5px solid #e2e8f0; border-radius: .75rem; font-size: .9375rem; font-family: inherit; }
.arn-pw-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }

/* ===== Toast ===== */
#arn-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #1e293b; color: #fff; padding: .875rem 1.5rem; border-radius: .875rem; font-size: .875rem; font-weight: 600; box-shadow: 0 8px 24px rgba(15, 23, 42, .25); transform: translateY(4rem); opacity: 0; transition: all .35s cubic-bezier(.34,1.56,.64,1); z-index: 9999; max-width: 320px; pointer-events: none; }
#arn-toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 640px) {
  .arn-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .arn-cat-grid { grid-template-columns: 1fr; }
}