*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #faf8ff;
  --card:      #ffffff;
  --border:    #e2e8f0;
  --text:      #1a202c;
  --muted:     #718096;
  --error:     #ef4444;
  --hf:        #7c3aed;
  --hf-dk:     #6d28d9;
  --hf-lt:     #f3e8ff;
  --ok-bg:     #d1fae5; --ok-text:    #065f46;
  --chain-bg:  #f3e8ff; --chain-text: #6b21a8;
  --cible-bg:  #fce7f3; --cible-text: #9d174d;
  --ko-bg:     #fee2e2; --ko-text:    #991b1b;
  --radius:    14px;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
}

body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: url('high-five.avif') center/cover fixed; background-color: var(--bg); color: var(--text); min-height: 100vh; }

/* ── Header ─────────────────────────────────────────────── */
header {
  background: transparent;
  padding: .6rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.hdr-left { display: flex; align-items: center; gap: 1rem; }
.hdr-actions { display: none; align-items: center; gap: .75rem; }
.hdr-run, .hdr-done { display: flex; align-items: center; gap: .75rem; }
.hdr-status { font-size: .82rem; color: rgba(255,255,255,.85); white-space: nowrap; }
.hdr-ghost { color: rgba(255,255,255,.9) !important; border-color: rgba(255,255,255,.35) !important; }
.hdr-ghost:hover { background: rgba(255,255,255,.12) !important; }
.logo { font-size: 1.8rem; line-height: 1; }
header h1 { font-size: 1.3rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
header p  { font-size: .78rem; color: rgba(255,255,255,.55); margin-top: .15rem; }

/* ── Layout ─────────────────────────────────────────────── */
main { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; min-height: 100vh; }
main.home { padding: 0; gap: 0; position: relative; }
#inputCard { max-width: 480px; width: 100%; background: rgba(255,255,255,.45) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius); border: none !important; box-shadow: none !important; }
#resultsCard { margin-top: 2rem; background: rgba(255,255,255,.88) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ── Card ───────────────────────────────────────────────── */
.card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.card-body { padding: 1.5rem; }

/* ── Tabs ───────────────────────────────────────────────── */
.tabs { display: flex; justify-content: center; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem; }
.tab { padding: .65rem 1.2rem; font-size: .88rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.tab.active { color: var(--hf); border-bottom-color: var(--hf); }
.tab:hover:not(.active) { color: var(--text); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Paste area ─────────────────────────────────────────── */
textarea.paste-area {
  width: 100%; height: 200px; padding: .85rem 1rem;
  font-family: 'SF Mono','Cascadia Code','Fira Code',monospace;
  font-size: .82rem; line-height: 1.6;
  border: 2px solid var(--border); border-radius: 8px; outline: none;
  resize: vertical; background: #fafbfc; transition: border-color .15s;
}
textarea.paste-area:focus { border-color: var(--hf); }
textarea.paste-area::placeholder { font-size: .68rem; }
.format-hint { font-size: .73rem; color: rgba(255,255,255,.75); margin-top: .5rem; }
.format-hint code { background: rgba(255,255,255,.2); color: #fff; padding: .1rem .35rem; border-radius: 4px; font-family: monospace; }
.pair-count { margin-top: .6rem; font-size: .82rem; min-height: 1.2em; text-align: center; }
.pair-count.has  { color: var(--hf); font-weight: 600; }
.pair-count.none { color: rgba(255,255,255,.55); }

/* ── CSV drop ───────────────────────────────────────────── */
.file-drop {
  border: 2px dashed rgba(255,255,255,.4); border-radius: 10px; padding: 2rem;
  text-align: center; cursor: pointer; transition: all .2s;
}
.file-drop:hover, .file-drop.drag { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); }
.file-drop input[type="file"] { display: none; }
.file-drop-icon { font-size: 2rem; margin-bottom: .5rem; }
.file-drop-text { font-size: .9rem; color: rgba(255,255,255,.8); }
.file-drop-text strong { color: #fff; }

.col-mapper { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.col-group { display: flex; flex-direction: column; gap: .4rem; }
.col-label { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
select.col-select {
  padding: .6rem .85rem; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: .88rem; outline: none; cursor: pointer; background: #fafbfc;
  transition: border-color .15s;
}
select.col-select:focus { border-color: var(--hf); }

/* ── Options ────────────────────────────────────────────── */
details.opts { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
details.opts > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: .4rem; font-size: .78rem; font-weight: 700; color: var(--hf);
  text-transform: uppercase; letter-spacing: .07em; user-select: none;
}
details.opts > summary::before { content: '▶'; font-size: .58rem; transition: transform .2s; }
details.opts[open] > summary::before { transform: rotate(90deg); }
.opts-grid { margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.opt { display: flex; flex-direction: column; gap: .35rem; }
.opt-lbl { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
input[type="number"] { width: 100%; padding: .42rem .65rem; border: 1.5px solid var(--border); border-radius: 6px; font-size: .88rem; outline: none; transition: border-color .15s; }
input[type="number"]:focus { border-color: var(--hf); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .82rem 1.3rem; border-radius: 8px; border: none;
  cursor: pointer; font-size: .88rem; font-weight: 600; transition: all .15s; white-space: nowrap;
}
.btn-hf      { background: var(--hf); color: #fff; }
.btn-hf:hover:not(:disabled)  { background: var(--hf-dk); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,.3); }
.btn-hf:disabled               { background: #c4b5fd; cursor: not-allowed; }
.btn-danger  { background: var(--error); color: #fff; }
.btn-danger:hover              { background: #dc2626; }
.btn-success { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; }
.btn-success:hover             { opacity: .9; transform: translateY(-1px); }
.btn-ghost   { background: transparent; color: var(--muted); border: 1.5px solid var(--border); }
.btn-ghost:hover               { background: var(--bg); }

.start-row { margin-top: 1.25rem; display: flex; justify-content: center; }

/* ── Stats ──────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(6, 1fr); background: #1f2937; border-bottom: 1px solid #374151; }
.stat { padding: 1rem; text-align: center; border-right: 1px solid #374151; transition: background .15s; color: #fff; }
.stat:last-child { border-right: none; }
.stat.filterable { cursor: pointer; }
.stat.filterable:hover { background: #374151; }
.stats.filtered .stat { opacity: .35; transition: opacity .2s; }
.stats.filtered .stat.active-filter,
.stats.filtered .stat:first-child { opacity: 1; }
.stat:first-child.can-reset { cursor: pointer; }
.stat:first-child.can-reset:hover { background: #374151; }
.stat-n { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.stat-l { font-size: .65rem; color: inherit; text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; opacity: .8; }
.s-ok          { color: #059669; }
.s-chain       { color: #ea580c; }
.s-mismatch    { color: #ea580c; }
.s-no-redirect { color: var(--error); }
.s-error       { color: var(--error); }

/* ── Table toolbar ──────────────────────────────────────── */
.table-toolbar { padding: .5rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 1rem; background: #1f2937; }
.toggle-lbl { font-size: .78rem; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none; }
.toggle-lbl input { accent-color: #a78bfa; }

/* ── URL links ──────────────────────────────────────────── */
.url-link { color: #2563eb; text-decoration: none; }
.url-link:hover { text-decoration: underline; }

/* ── Progress ───────────────────────────────────────────── */
.prog-wrap { height: 3px; background: var(--border); }
.prog-bar  { height: 100%; background: linear-gradient(90deg, #4c1d95, #7c3aed, #db2777); width: 0; transition: width .3s; }
.prog-bar.running { width: 35% !important; animation: slide 1.6s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* ── Results fullscreen layout ─────────────────────────── */
body.results-view {
  height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)), linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #db2777 100%);
}
body.results-view main {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  max-width: 1280px; width: 100%; margin: 0 auto;
  padding: 1.25rem 1.25rem 1.25rem; gap: 0;
}
body.results-view header { box-shadow: none; }
body.results-view #resultsCard {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: rgba(255,255,255,.93) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  margin-top: 0;
}
body.results-view .table-wrap { flex: 1; min-height: 0; max-height: none; }

/* ── Table ──────────────────────────────────────────────── */
.table-wrap { overflow-x: hidden; max-height: calc(100vh - 180px); overflow-y: auto; }
table.results { width: 100%; border-collapse: collapse; font-size: .8rem; table-layout: fixed; }
table.results thead { position: sticky; top: 0; z-index: 1; }
table.results th {
  background: #1f2937; color: #fff; padding: .55rem .75rem;
  text-align: left; font-weight: 600; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  cursor: pointer; user-select: none;
}
table.results th:hover { background: #374151; }
.sort-icon { margin-left: .3rem; opacity: .35; font-style: normal; }
th.sort-asc  .sort-icon::after { content: '↑'; opacity: 1; color: #a78bfa; }
th.sort-desc .sort-icon::after { content: '↓'; opacity: 1; color: #a78bfa; }
th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: '↕'; }
table.results td { padding: .48rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.row-num { display: inline; }
.row-edit-btn { display: none; background: none; border: none; cursor: pointer; font-size: .85rem; padding: .1rem .25rem; border-radius: 4px; color: var(--muted); line-height: 1; }
tr:hover .row-num { display: none; }
tr:hover .row-edit-btn { display: inline; }
.row-edit-btn:hover { background: rgba(124,58,237,.12); color: var(--hf); }
.edit-url-input { width: 100%; padding: .55rem .75rem; border: 1.5px solid var(--border); border-radius: 8px; font-size: .82rem; font-family: monospace; outline: none; transition: border-color .15s; color: var(--text); background: #fff; }
.edit-url-input:focus { border-color: var(--hf); }
.edit-url-label { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .35rem; display: block; }
table.results tbody tr:hover td { background: #f8fafc; }

.url-cell   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: monospace; font-size: .74rem; color: #2563eb; }
.expand-urls .url-cell { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; }
.chain-cell { white-space: pre-line; font-family: monospace; font-size: .7rem; color: var(--muted); line-height: 1.6; overflow: hidden; word-break: break-all; }
.code-cell  { text-align: center; font-family: monospace; font-weight: 700; font-size: .8rem; }
.c-301 { color: #059669; }
.c-2xx { color: #059669; }
.c-3xx { color: #d97706; }
.c-4xx { color: #dc2626; }
.c-nil { color: #b0bac6; }

.badge          { display: inline-flex; align-items: center; padding: .22rem .65rem; border-radius: 20px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.b-ok          { background: var(--ok-bg);    color: var(--ok-text); }
.b-chain       { background: var(--chain-bg); color: var(--chain-text); }
.b-mismatch    { background: var(--cible-bg); color: var(--cible-text); }
.b-no-redirect { background: #f3f4f6;          color: #374151; }
.b-error       { background: var(--ko-bg);    color: var(--ko-text); }
.b-checking    { background: #e0e7ff; color: #3730a3; }

/* ── Footer ─────────────────────────────────────────────── */
.foot { padding: .8rem 1.25rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--hf); animation: pu 1.4s ease-in-out infinite; flex-shrink: 0; }
.pulse.idle { animation: none; background: var(--muted); }
@keyframes pu { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.75); } }
.status-txt { font-size: .8rem; color: var(--muted); }
.spacer { flex: 1; }
.badge-done { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; background: #f3e8ff; color: #6b21a8; border-radius: 20px; font-size: .76rem; font-weight: 700; }

/* ── Home & modal white text ────────────────────────────── */
main.home, .modal-card { color: #fff; }
main.home textarea, main.home input, main.home select,
.modal-card textarea, .modal-card input, .modal-card select { color: var(--text); }
.modal-close { color: rgba(255,255,255,.8); }
.col-group label, .opt-lbl { color: rgba(255,255,255,.7) !important; }
.modal-card .col-label { color: rgba(255,255,255,.7); }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:200; }
.modal-card { background:rgba(255,255,255,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:var(--radius); padding:1.75rem; width:100%; max-width:480px; margin:1rem; position:relative; }
.modal-close { position:absolute; top:.75rem; right:.75rem; background:none; border:none; font-size:1.1rem; cursor:pointer; color:#fff; padding:.2rem .45rem; border-radius:5px; line-height:1; }
.modal-close:hover { background:rgba(255,255,255,.2); }
.modal-title { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:1rem; }
.btn-modal { flex:1; padding:1rem; background:rgba(255,255,255,.15); color:#fff; border:1.5px solid rgba(255,255,255,.35); border-radius:10px; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.btn-modal:hover { background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.6); transform:translateY(-1px); }

/* ── Utils ──────────────────────────────────────────────── */
.hidden { display: none !important; }
.slide-in { animation: su .3s ease; }
@keyframes su { from { opacity:0; transform:translateY(18px); } }
@keyframes rowIn { from { opacity:0; background: #f5f3ff; } }
.row-new { animation: rowIn .4s ease; }
.empty-state { padding: 3rem; text-align: center; color: var(--muted); font-size: .88rem; }