/* Hydra WebUI - Dark Theme */

:root {
    color-scheme: dark;
    --bg-primary: #080c14;
    --bg-secondary: rgba(14, 20, 36, 0.75);
    --bg-tertiary: #111d30;
    --border: rgba(255, 255, 255, 0.08);
    --text-primary: #dde8f5;
    --text-secondary: #7a90a8;
    --text-muted: #3a4a5c;
    --accent-race: #f0883e;
    --accent-hoard: #58a6ff;
    --accent-green: #3fb950;
    --accent-red: #f85149;
    --accent-purple: #bc8cff;
    --radius: 8px;
    /* Alias/tokens ajoutes (etaient references sans etre definis -> couleurs cassees) */
    --accent-yellow: #e3b341;
    --accent-blue: #58a6ff;
    --bg-card: rgba(255, 255, 255, 0.03);
    --card-bg: #111d30;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background:
        radial-gradient(ellipse 900px 500px at 15% -5%, rgba(30, 80, 180, 0.2) 0%, transparent 65%),
        radial-gradient(ellipse 700px 400px at 85% 105%, rgba(20, 50, 140, 0.14) 0%, transparent 65%),
        var(--bg-primary);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
    background: rgba(8, 12, 22, 0.85);
    border-bottom: 1px solid rgba(88, 166, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
}

header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(88, 166, 255, 0.5) 25%,
        rgba(160, 210, 255, 0.9) 50%,
        rgba(88, 166, 255, 0.5) 75%,
        transparent 100%);
}

.logo-icon {
    height: 52px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(88, 166, 255, 0.55)) drop-shadow(0 0 24px rgba(88, 166, 255, 0.25));
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(88, 166, 255, 0.5), 0 0 50px rgba(88, 166, 255, 0.2);
}

.header-banner {
    height: 56px;
    width: auto;
    flex: 1;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(88, 166, 255, 0.35));
    margin: 0 24px;
}

.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.logo .subtitle {
    font-size: 12px;
    color: rgba(88, 166, 255, 0.4);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.header-stats {
    display: flex;
    gap: 24px;
    align-items: center;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Exit IP: two short lines instead of one long one. A dual-stack pair is about
   forty characters, which on a single line stretched the header stat far past
   every other one and pushed the controls beside it off to the right. The
   addresses stay readable, and the full pair is on the tooltip so truncating
   never loses one. */
.exit-ip-stat .stat-value {
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    line-height: 1.3;
    text-align: right;
}
/* Each address on its own line: the separator was doing the work of a line
   break, badly, and wrapped wherever there happened to be room. */
/* A full IPv6 is 39 characters at worst, and the header has the room: size the
   line for the longest address there is, so a real address is never clipped.
   The ellipsis stays as a floor for anything longer than a v6 literal, and the
   tooltip still holds both addresses in full. The warning line is a sentence
   and is never clipped: it is shorter than an address anyway. */
.exit-ip-stat .stat-value .ip-line {
    display: block;
    max-width: 39ch;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.exit-ip-stat .stat-value .net-warn { font-family: inherit; }

/* Same two-line address in the agents table. No max-width: the cell grows. */
#agents-table .exit-ip-cell .ip-line { display: block; }
/* The cell's .mono break-all is right for an address, wrong for a sentence. */
#agents-table .exit-ip-cell .net-warn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    word-break: normal;
}

.stat-ip {
    font-size: 12px;
    font-family: monospace;
    color: var(--accent-hoard);
    cursor: pointer;
}

.stat-ip:hover {
    opacity: 0.75;
}

.stat-total {
    color: var(--accent-green);
    font-size: 13px;
}

.stat-session {
    color: var(--text-primary);
    font-size: 13px;
}

.tunnel-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    margin: -8px 0;
    padding: 4px 12px;
    border-left: 1px solid var(--border);
    align-self: stretch;
}

.tunnel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    white-space: nowrap;
}

.tunnel-iface {
    color: var(--text-muted);
    font-size: 9px;
    min-width: 28px;
}

.tunnel-ip {
    color: var(--accent-hoard);
}

.tunnel-bar-wrap {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}

.tunnel-bar {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-hoard);
    transition: width 0.3s;
}

.tunnel-pct {
    color: var(--text-muted);
    font-size: 10px;
    min-width: 28px;
    text-align: right;
}

.health-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background 0.3s;
}

.health-dot.ok {
    background: var(--accent-green);
    box-shadow: 0 0 8px rgba(63, 185, 80, 0.7);
}
.health-dot.warn {
    background: #e3b341;
    box-shadow: 0 0 8px rgba(227, 179, 65, 0.7);
}
.health-dot.error {
    background: var(--accent-red);
    box-shadow: 0 0 8px rgba(248, 81, 73, 0.7);
}

/* Nav */
nav {
    display: flex;
    gap: 0;
    background: rgba(10, 14, 24, 0.7);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 12px 20px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tab:hover {
    color: var(--text-primary);
}

.tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-hoard);
}

.tab:last-child {
    margin-left: auto;
    color: var(--accent-hoard);
    font-weight: 600;
}

/* Main */
main {
    flex: 1;
    padding: 24px;
    width: 90%;
    margin: 0 auto;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.card h3 {
    padding: 12px 16px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.card-body {
    padding: 16px;
}

.metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.metric:last-child {
    border-bottom: none;
}

.metric span:first-child {
    color: var(--text-secondary);
    font-size: 13px;
}

.metric span:last-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius);
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

thead {
    background: rgba(0, 0, 0, 0.2);
}

th {
    padding: 10px 16px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

#hoard-table thead th[data-col] {
    cursor: pointer;
    user-select: none;
}

#hoard-table thead th[data-col]:hover {
    color: var(--text-primary);
}

#race-table thead th { cursor: pointer; user-select: none; }
#race-table thead th:hover { color: var(--text-primary); }
#race-table thead th.sort-asc::after { content: " ▲"; color: var(--accent-race); }
#race-table thead th.sort-desc::after { content: " ▼"; color: var(--accent-race); }

#hoard-table thead th.sort-asc::after { content: " ▲"; color: var(--accent-hoard); }
#hoard-table thead th.sort-desc::after { content: " ▼"; color: var(--accent-hoard); }

td {
    padding: 10px 16px;
    font-size: 13px;
    border-top: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

td.empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px;
}

tr:hover td {
    background: rgba(88, 166, 255, 0.04);
}

/* Progress bar */
.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent-green);
    border-radius: 3px;
    transition: width 0.5s ease;
    box-shadow: 0 0 6px rgba(63, 185, 80, 0.5);
}

.progress-fill.downloading {
    background: var(--accent-hoard);
    box-shadow: 0 0 6px rgba(88, 166, 255, 0.5);
}

.progress-text {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Hoard bar */
.hoard-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 6px;
}

.hoard-filter-bar input[type="text"] {
    flex: 1;
    max-width: 280px;
    padding: 5px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
}

#hoard-filter-count {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.hoard-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
    align-items: center;
}

.hoard-chips-cats {
    margin-bottom: 12px;
}

.chip {
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--accent-hoard);
    color: var(--text-primary);
}

.chip-count {
    color: var(--text-primary);
    font-weight: 600;
}

.chip.active {
    background: rgba(88, 166, 255, 0.15);
    border-color: var(--accent-hoard);
    color: var(--accent-hoard);
}

.chip-state[data-state="seeding"].active {
    background: rgba(63, 185, 80, 0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.chip-state[data-state="downloading"].active {
    background: rgba(88, 166, 255, 0.15);
    border-color: var(--accent-hoard);
    color: var(--accent-hoard);
}

.chip-state[data-state="checking_files"].active {
    background: rgba(240, 136, 62, 0.15);
    border-color: var(--accent-race);
    color: var(--accent-race);
}

.hoard-stats-bar {
    display: flex;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin: 16px 0 8px;
}

.hoard-bar-announced {
    background: var(--text-secondary);
    transition: width 0.5s;
    opacity: 0.3;
}

.hoard-bar-uploading {
    background: var(--accent-green);
    transition: width 0.5s;
}

.hoard-bar-with-peers {
    background: var(--accent-hoard);
    transition: width 0.5s;
    opacity: 0.6;
}

.hoard-stats-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.legend-announced::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    margin-right: 4px;
    opacity: 0.3;
}

.legend-uploading::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    margin-right: 4px;
}

.legend-with-peers::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-hoard);
    margin-right: 4px;
    opacity: 0.6;
}

.hoard-summary {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Section header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.race-stats-bar {
    display: flex;
    gap: 24px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--card-bg, #1e1e2e);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary, #a0a0b0);
}

.race-stats-bar strong {
    color: var(--text-primary, #e0e0e0);
}

/* Add form */
.add-form-container {
    max-width: 600px;
}

.add-form-container h2 {
    margin-bottom: 24px;
    font-size: 18px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

input, select, textarea {
    color-scheme: dark;
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Checkboxes and radios are not text fields. The rule above sets width:100%
   and appearance:none, which renders a checkbox as a full-width empty box with
   no tick: the control stops looking like a control, and a checked default is
   invisible. Scoped exceptions already existed (.logs-controls,
   .settings-adv-toggle, .hl-toggle); this makes the exception global so a plain
   checkbox is correct anywhere, including the import wizard. */
input[type="checkbox"], input[type="radio"] {
    width: auto;
    padding: 0;
    margin: 0 6px 0 0;
    -webkit-appearance: auto;
    appearance: auto;
    vertical-align: middle;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-hoard);
}

input::placeholder {
    color: var(--text-muted);
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b949e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}


input[type="file"] {
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.mode-selector {
    display: flex;
    gap: 8px;
}

.mode-btn {
    flex: 1;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-btn.active[data-mode="race"] {
    background: rgba(240, 136, 62, 0.15);
    border-color: var(--accent-race);
    color: var(--accent-race);
}

.mode-btn.active[data-mode="hoard"] {
    background: rgba(88, 166, 255, 0.15);
    border-color: var(--accent-hoard);
    color: var(--accent-hoard);
}

.pf-btn {
    flex: 1;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pf-btn.active {
    background: rgba(63, 185, 80, 0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn-primary {
    width: 100%;
    padding: 12px;
    background: rgba(88, 166, 255, 0.08);
    border: 1px solid rgba(88, 166, 255, 0.35);
    border-radius: var(--radius);
    color: var(--accent-hoard);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
    box-shadow: 0 0 16px rgba(88, 166, 255, 0.08);
}

.btn-primary:hover {
    background: rgba(88, 166, 255, 0.15);
    border-color: rgba(88, 166, 255, 0.6);
    box-shadow: 0 0 24px rgba(88, 166, 255, 0.18);
}

.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-remove {
    background: none;
    border: 1px solid var(--border);
    color: var(--accent-red);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-remove:hover {
    background: rgba(248, 81, 73, 0.1);
    border-color: var(--accent-red);
}

.result-msg {
    margin-top: 12px;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 13px;
    display: none;
}

.result-msg.success {
    display: block;
    background: rgba(63, 185, 80, 0.08);
    border: 1px solid rgba(63, 185, 80, 0.4);
    color: var(--accent-green);
}

.result-msg.error {
    display: block;
    background: rgba(248, 81, 73, 0.1);
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
}

/* Seedbox badge */
.badge-seedbox, .badge-no {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
    white-space: pre-line;
}

.badge-seedbox {
    background: rgba(188, 140, 255, 0.15);
    color: var(--accent-purple);
}

.badge-no {
    color: var(--text-muted);
}

/* Filesystem Dropdown */
.fs-dropdown {
    position: fixed;
    z-index: 1000;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.fs-dropdown-crumbs {
    font-size: 11px;
    font-family: monospace;
    padding: 5px 10px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow-x: auto;
    position: sticky;
    top: 0;
}

.fs-crumb {
    color: var(--accent-hoard);
    cursor: pointer;
}

.fs-crumb:hover { text-decoration: underline; }

.fs-dir-item {
    padding: 6px 12px;
    cursor: pointer;
    font-family: monospace;
    font-size: 12px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fs-dir-item:last-child { border-bottom: none; }

.fs-dir-item:hover { background: var(--bg-primary); }

.fs-dir-item.fs-empty {
    color: var(--text-secondary);
    cursor: default;
}

.fs-dir-item.fs-empty:hover { background: none; }

/* Categories */
.cat-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cat-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cat-form-actions .btn-primary {
    width: auto;
    padding: 8px 20px;
    margin-top: 0;
}

.btn-cancel {
    padding: 8px 20px;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius);
    font-size: 14px;
    cursor: pointer;
}

.btn-cancel:hover { border-color: var(--text-secondary); }

.btn-small {
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    margin-right: 4px;
}

.btn-small:hover { border-color: var(--text-primary); color: var(--text-primary); }
.btn-small.btn-danger { color: var(--accent-red); border-color: var(--accent-red); }
.btn-small.btn-danger:hover { background: rgba(247,129,102,0.1); }

.mode-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.mode-tag.mode-race { background: rgba(247,129,102,0.15); color: var(--accent-race); }
.mode-tag.mode-hoard { background: rgba(88,166,255,0.15); color: var(--accent-hoard); }

.state-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.state-active { background: rgba(63,185,80,0.15); color: var(--accent-green); }
.state-checking { background: rgba(88,166,255,0.15); color: var(--accent-hoard); }

/* Score bar */
.score-bar {
    display: inline-block;
    width: 60px;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}

.score-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

/* Detail panel — fixed drawer */
.detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(50vw, 960px);
    min-width: 480px;
    height: 100vh;
    overflow-y: auto;
    z-index: 200;
    padding: 24px 20px;
    background: rgba(14, 14, 20, 0.97);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    animation: slideInRight 0.22s ease;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(40px); }
}

.detail-panel.closing {
    animation: slideOutRight 0.2s ease forwards;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.detail-header h3 {
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    border: none;
}

.detail-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.detail-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.detail-tab:hover {
    color: var(--text-primary);
}

.detail-tab.active {
    color: var(--accent-race);
    border-bottom-color: var(--accent-race);
}

.event-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.event-badge.added { background: rgba(88,166,255,0.15); color: #58a6ff; }
.event-badge.completed { background: rgba(63,185,80,0.15); color: #3fb950; }
.event-badge.first_upload { background: rgba(240,136,62,0.15); color: #f0883e; }
.event-badge.removed { background: rgba(248,81,73,0.15); color: #f85149; }
.event-badge.tracker_announce { background: rgba(139,148,158,0.15); color: #8b949e; }

.btn-close {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-close:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.detail-grid .card {
    overflow: visible;
}

.mono {
    font-family: monospace;
    font-size: 11px;
    word-break: break-all;
}

tr.selected td {
    background: rgba(88, 166, 255, 0.05);
    border-left: 2px solid var(--accent-hoard);
}

tr.clickable {
    cursor: pointer;
}

tr.clickable:hover td {
    background: rgba(88, 166, 255, 0.05);
}

tr.t-row {
    user-select: none;
}

tr.row-selected td {
    background: rgba(88, 166, 255, 0.08);
    border-left: 2px solid var(--accent-hoard);
}

/* ─── Context menu ─────────────────────────────────────── */

.ctx-menu {
    position: fixed;
    z-index: 9999;
    background: #1a2233;
    border: 1px solid #2a3a52;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    min-width: 200px;
    padding: 4px 0;
    user-select: none;
}

.ctx-label {
    padding: 6px 14px 4px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ctx-separator {
    height: 1px;
    background: #2a3a52;
    margin: 4px 0;
}

.ctx-item {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.ctx-item:hover {
    background: rgba(240, 136, 62, 0.12);
}

.ctx-item.ctx-danger {
    color: var(--accent-red);
}

.ctx-item.ctx-danger:hover {
    background: rgba(248, 81, 73, 0.12);
}

.ctx-scroll {
    max-height: 50vh;
    overflow-y: auto;
}

.peer-flag {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    margin: 1px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.peer-flag.seed {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-green);
}

.peer-flag.interested {
    background: rgba(88, 166, 255, 0.15);
    color: var(--accent-hoard);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal {
    background: rgba(12, 18, 32, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
    animation: slideDown 0.15s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.modal h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.modal p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-modal {
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.btn-keep {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-keep:hover {
    background: rgba(88, 166, 255, 0.1);
    border-color: var(--accent-hoard);
    color: var(--accent-hoard);
}

.btn-delete {
    background: rgba(248, 81, 73, 0.1);
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.btn-delete:hover {
    background: rgba(248, 81, 73, 0.2);
}

.btn-cancel {
    background: none;
    color: var(--text-secondary);
}

.btn-cancel:hover {
    color: var(--text-primary);
}

/* Hardlinks */
.hl-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.hl-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}

.hl-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.hl-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.hl-linked .hl-stat-value { color: var(--accent-green); }
.hl-orphan .hl-stat-value { color: var(--accent-red); }
.hl-partial .hl-stat-value { color: var(--accent-yellow); }
.hl-ghost .hl-stat-value { color: var(--accent-purple, #a371f7); }

.hl-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.hl-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
}

.hl-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.hl-cat-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hl-cat-chip {
    padding: 5px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.hl-cat-chip.active {
    background: rgba(88, 166, 255, 0.12);
    border-color: rgba(88, 166, 255, 0.5);
    color: var(--accent-hoard);
}

.hl-scan-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
}

.hl-scan-badge.scanning {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-green);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hl-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
}

.hl-badge-orphan {
    background: rgba(248, 81, 73, 0.15);
    color: var(--accent-red);
}

.hl-badge-partial {
    background: rgba(210, 153, 34, 0.15);
    color: var(--accent-yellow);
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.card-header-row h3 {
    margin: 0;
}

.card-header-row div {
    display: flex;
    gap: 8px;
}

.result-msg.info {
    color: var(--accent-blue);
}

.hl-config-section {
    margin-bottom: 0;
}

.hl-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

.hl-dot-linked { background: var(--accent-green); }
.hl-dot-orphan { background: var(--accent-red); }
.hl-dot-partial { background: var(--accent-yellow); }

.hl-badge-linked {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-green);
}

.hl-badge-missing {
    background: rgba(139, 148, 158, 0.15);
    color: var(--text-secondary);
}

.hl-bar-track {
    display: flex;
    height: 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.hl-bar-fill { height: 100%; }
.hl-bar-linked { background: var(--accent-green); }
.hl-bar-orphan { background: var(--accent-red); }

@media (max-width: 768px) {
    .hl-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .hl-config-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer */
footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 24px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(8, 12, 20, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* VPN Speedtest */
.bm-vpn-section {
    margin-bottom: 24px;
}

.bm-vpn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bm-vpn-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.bm-vpn-ts {
    font-size: 13px !important;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    /* Header */
    header {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }
    .header-banner { display: none; }
    .logo-icon { height: 36px; }
    .logo h1 { font-size: 18px; letter-spacing: 2px; }
    .logo .subtitle { display: none; }
    .header-stats {
        width: 100%;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
    }

    /* Nav */
    nav {
        overflow-x: auto;
        padding: 0 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    nav::-webkit-scrollbar { display: none; }
    .tab { padding: 10px 12px; font-size: 12px; white-space: nowrap; }

    /* Main */
    main { padding: 12px; width: 100%; }

    /* Cards */
    .cards { grid-template-columns: 1fr; }

    /* Tables */
    table { font-size: 12px; }
    th, td { padding: 8px; }

    /* Section header */
    .section-header { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* Hide utility */
    .hide-mobile { display: none !important; }

    /* Detail panel */
    .detail-grid { grid-template-columns: 1fr !important; }

    /* Hoard filter */
    .hoard-filter-bar input[type="text"] { max-width: 100%; }
    .hoard-filter-bar { flex-wrap: wrap; }

    /* Startup track */
    .startup-track { width: 85vw; }

    /* Footer */
    footer { flex-direction: column; gap: 4px; text-align: center; }

    /* Benchmark */
    .bm-metrics-grid { grid-template-columns: repeat(4, 1fr); }
    .bm-charts-grid { grid-template-columns: 1fr; }
    .bm-range-bar { flex-wrap: wrap; }

    /* Race table (Name/Size/Progress/Seeds/Leechers/Down/Up/Ratio/Completed)
       Keep: Name, Progress, Down, Up  |  Hide: Size(2), Seeds(4), Leechers(5), Ratio(8), Completed(9) */
    #race-table th:nth-child(2), #race-table td:nth-child(2),
    #race-table th:nth-child(4), #race-table td:nth-child(4),
    #race-table th:nth-child(5), #race-table td:nth-child(5),
    #race-table th:nth-child(8), #race-table td:nth-child(8),
    #race-table th:nth-child(9), #race-table td:nth-child(9) { display: none; }

    /* Hoard table (Name/Size/State/Progress/Seeds/Leechers/Down/Up/Ratio/Category/Added/Completed)
       Keep: Name, Size, State, Progress, Up  |  Hide: 5,6,7,9,10,11,12 */
    #hoard-table th:nth-child(5), #hoard-table td:nth-child(5),
    #hoard-table th:nth-child(6), #hoard-table td:nth-child(6),
    #hoard-table th:nth-child(7), #hoard-table td:nth-child(7),
    #hoard-table th:nth-child(9), #hoard-table td:nth-child(9),
    #hoard-table th:nth-child(10), #hoard-table td:nth-child(10),
    #hoard-table th:nth-child(11), #hoard-table td:nth-child(11),
    #hoard-table th:nth-child(12), #hoard-table td:nth-child(12) { display: none; }

    /* Peers table (IP/Score/AvgSpeed/MaxSpeed/Sessions/Reliability/Client/Seedbox)
       Keep: IP, Score, AvgSpeed, Client  |  Hide: 4,5,6,8 */
    #peers-table th:nth-child(4), #peers-table td:nth-child(4),
    #peers-table th:nth-child(5), #peers-table td:nth-child(5),
    #peers-table th:nth-child(6), #peers-table td:nth-child(6),
    #peers-table th:nth-child(8), #peers-table td:nth-child(8) { display: none; }

    /* Detail peers tables (IP/Client/Progress/Down/Up/Downloaded/Uploaded/Flags)
       Keep: IP, Client, Progress, Flags  |  Hide: Down(4), Up(5), Downloaded(6), Uploaded(7) */
    #detail-peers-table th:nth-child(4), #detail-peers-table td:nth-child(4),
    #detail-peers-table th:nth-child(5), #detail-peers-table td:nth-child(5),
    #detail-peers-table th:nth-child(6), #detail-peers-table td:nth-child(6),
    #detail-peers-table th:nth-child(7), #detail-peers-table td:nth-child(7),
    #h-detail-peers-table th:nth-child(4), #h-detail-peers-table td:nth-child(4),
    #h-detail-peers-table th:nth-child(5), #h-detail-peers-table td:nth-child(5),
    #h-detail-peers-table th:nth-child(6), #h-detail-peers-table td:nth-child(6),
    #h-detail-peers-table th:nth-child(7), #h-detail-peers-table td:nth-child(7) { display: none; }
}

/* Benchmark */
.bm-metrics-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.bm-metric-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.bm-metric-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.bm-metric-value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.bm-metric-value.bm-warn { color: var(--accent-red); }
.bm-metric-value.bm-good { color: var(--accent-green); }

.bm-range-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.bm-range-btns {
    display: flex;
    gap: 6px;
}

.bm-range-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.bm-range-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.bm-range-btn.active {
    background: rgba(88, 166, 255, 0.15);
    border-color: rgba(88, 166, 255, 0.4);
    color: var(--accent-hoard);
}

.bm-range-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.bm-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.bm-chart-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius);
    padding: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.bm-chart-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.bm-chart-wrap {
    position: relative;
    height: 160px;
}

/* Compare section */
.bm-compare-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius);
    padding: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.bm-compare-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.bm-compare-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.bm-compare-pickers {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.bm-picker-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bm-picker-group label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
}

.bm-picker-group input[type="datetime-local"] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 7px 10px;
    font-size: 13px;
    colorscheme: dark;
}

.bm-picker-sep {
    font-size: 20px;
    color: var(--text-muted);
    padding-bottom: 4px;
}

.bm-compare-btn {
    align-self: flex-end;
}

.bm-compare-counts {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.bm-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bm-compare-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bm-compare-table td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-variant-numeric: tabular-nums;
}

.bm-compare-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.cmp-col-label {
    font-weight: 600;
    color: var(--text-primary);
}

.cmp-secondary {
    color: var(--text-secondary);
    font-size: 12px;
}

/* Card footer */
.card-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-box {
    background: rgba(12, 18, 32, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    width: 440px;
    max-width: 90vw;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.modal-box h3 {
    margin-bottom: 8px;
    font-size: 15px;
}

.modal-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tracker-ok { color: var(--accent-green); font-size: 12px; }
.tracker-err { color: var(--accent-red); font-size: 12px; }
.tracker-warn {
    display: inline-block;
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    cursor: default;
}

.chip-active-seed { border-color: rgba(63, 185, 80, 0.4); color: var(--accent-green); }
.chip-active-seed.active { background: rgba(63, 185, 80, 0.2); border-color: var(--accent-green); }
.chip-tracker-err { border-color: rgba(248, 129, 73, 0.4); color: #f88149; }
.chip-tracker-err.active { background: rgba(248, 129, 73, 0.2); border-color: #f88149; }
.chip-torrent-err { border-color: rgba(248, 81, 73, 0.4); color: var(--accent-red); }
.chip-torrent-err.active { background: rgba(248, 81, 73, 0.2); border-color: var(--accent-red); }
.torrent-err-badge {
    display: inline-block;
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    cursor: default;
}

/* ─── Startup Overlay ──────────────────────────────────────── */
#startup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.7s ease;
}

#startup-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

#startup-overlay::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-hoard) 50%, transparent 100%);
    animation: startup-scan 3s linear infinite;
    opacity: 0.25;
}

@keyframes startup-scan {
    0%   { top: 0%; }
    100% { top: 100%; }
}

.startup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
}

.startup-logo {
    width: 72px;
    height: 72px;
    animation: startup-pulse 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(88, 166, 255, 0.45));
}

@keyframes startup-pulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 16px rgba(88, 166, 255, 0.4)); }
    50%       { transform: scale(1.06); filter: drop-shadow(0 0 28px rgba(88, 166, 255, 0.75)); }
}

.startup-title {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    color: var(--text-primary);
    margin: 0;
}

.startup-phase {
    color: var(--text-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
}

.startup-track {
    width: 340px;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.startup-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-race), var(--accent-hoard));
    border-radius: 2px;
    transition: width 0.45s ease;
    position: relative;
}

.startup-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45));
    animation: startup-shimmer 1.1s ease-in-out infinite;
}

@keyframes startup-shimmer {
    0%, 100% { opacity: 0; }
    50%       { opacity: 1; }
}

.startup-counter {
    font-family: monospace;
    font-size: 1.35rem;
    color: var(--accent-hoard);
    letter-spacing: 0.04em;
}

.startup-sep {
    color: var(--text-muted);
    margin: 0 6px;
}

.startup-unit {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 8px;
    vertical-align: middle;
}

.uploader-badge {
    display: inline-block;
    background: rgba(56, 139, 253, 0.25);
    color: #58a6ff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    cursor: default;
}
.uploader-badge.injection-hit {
    background: rgba(63, 185, 80, 0.25);
    color: #3fb950;
}

/* ---------------------------------------------------------------------------
   Timeline tab
   --------------------------------------------------------------------------- */
.card-title-sm {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-muted); margin: 0 0 6px 0; font-weight: 500;
}

.tl-result {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-radius: 6px; margin-bottom: 10px;
    font-size: 13px;
}
.tl-result.loss {
    background: linear-gradient(135deg, #1b1520 0%, #21161b 100%);
    border: 1px solid #3d2230;
}
.tl-result.win {
    background: linear-gradient(135deg, #151b20 0%, #162116 100%);
    border: 1px solid #223d22;
}
.tl-result .tl-pos { font-size: 22px; font-weight: 700; }
.tl-result .tl-pos span { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.tl-result .tl-detail { text-align: right; font-size: 11px; }

.tl-meta-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 6px; margin-bottom: 10px;
}
.tl-meta-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 4px; padding: 5px 8px;
}
.tl-meta-label { font-size: 9px; text-transform: uppercase; color: var(--text-muted); }
.tl-meta-val { font-size: 12px; color: var(--text-primary); font-weight: 500; }
.tl-meta-val.bad { color: #f85149; }
.tl-meta-val.good { color: #3fb950; }

.tl-ev-row {
    display: flex; gap: 8px; padding: 3px 0; font-size: 11px;
    border-left: 2px solid var(--border); padding-left: 8px; margin-left: 4px;
}
.tl-ev-row.hl { border-left-color: #f85149; }
.tl-ev-t { color: var(--text-muted); min-width: 42px; font-size: 10px; font-family: monospace; }
.tl-ev-txt { color: var(--text-secondary); }
.tl-ev-txt strong { color: var(--text-primary); font-weight: 500; }
.tl-ev-txt .d { color: var(--text-muted); }

.event-badge.announce { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
.event-badge.completed { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.event-badge.added { background: rgba(139, 148, 158, 0.15); color: #8b949e; }

#tunnel-info {
    margin: 2px 0 -4px 0;
    line-height: 1.1;
    font-size: 10px;
    font-family: monospace;
}

/* ===== Overview milestone / accélération / records (2026-07-10) ===== */
.card.wide { grid-column: 1 / -1; }
.card h3 .tag { float: right; letter-spacing: 0; text-transform: none; color: var(--accent-purple); font-weight: 600; }
.metric small { color: var(--text-muted); font-family: 'SF Mono','Cascadia Code',monospace; font-size: 11px; margin-left: 7px; font-weight: 400; }
.metric .hi { color: var(--accent-green); }

.milestone { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.milestone .num { font-family: 'SF Mono','Cascadia Code',monospace; font-weight: 700; font-size: clamp(44px,8vw,72px); line-height: 1; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.milestone .num .u { font-size: .4em; color: var(--text-secondary); margin-left: 8px; }
.milestone .side { flex: 1; min-width: 240px; }
.milestone .side .cap { color: var(--text-secondary); font-size: 13px; margin-bottom: 10px; }
.milestone .side .cap b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.track { height: 8px; border-radius: 5px; background: var(--bg-tertiary); border: 1px solid var(--border); overflow: hidden; }
.fill { height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg,var(--accent-hoard),var(--accent-purple)); box-shadow: 0 0 12px rgba(188,140,255,.45); transition: width 1.6s cubic-bezier(.2,.7,.2,1); }
.prowl { display: flex; justify-content: space-between; font-family: 'SF Mono','Cascadia Code',monospace; font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.prowl .goal { color: var(--accent-purple); }

.qb { width: 14px; height: 14px; border-radius: 50%; background: #4a7fb5; display: inline-block; flex: none; }
.hy { width: 14px; height: 14px; border-radius: 4px; flex: none; background: radial-gradient(circle at 35% 30%,var(--accent-hoard),#1b3a63); }

.accel { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.accel .lead { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 1px; }
.ar { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; font-size: 14px; }
.ar .when { display: flex; align-items: center; gap: 9px; color: var(--text-secondary); }
.ar .via { color: var(--text-muted); font-family: 'SF Mono','Cascadia Code',monospace; font-size: 12px; text-align: right; }
.ar .dur { font-family: 'SF Mono','Cascadia Code',monospace; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 96px; color: var(--text-primary); }
.ar.hot .when { color: var(--text-primary); font-weight: 600; }
.ar.hot .dur { color: var(--accent-green); }
.ar.hot .via { color: var(--accent-hoard); }
@media (max-width: 520px) { .ar { grid-template-columns: 1fr auto; } .ar .via { display: none; } }

/* Fix largeur Overview : 3 colonnes pleines (l.auto-fit laissait une colonne vide à droite à cause du milestone en 1/-1) */
#tab-overview .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { #tab-overview .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { #tab-overview .cards { grid-template-columns: 1fr; } }

/* pastilles moteur retirées (rendu blob bizarre) — masquées live, spans retirés du HTML au prochain build */
#tab-overview .accel .qb, #tab-overview .accel .hy { display: none; }


/* ─── Menu Reglages (default.toml) — redesign OSS 2026-07-25 ───────────── */
.settings-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
}
.settings-search {
    flex: 1;
    max-width: 360px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 13px;
}
.settings-search-count {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.settings-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-group {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.settings-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background 0.15s;
}
.settings-group-head::-webkit-details-marker { display: none; }
.settings-group-head:hover { background: rgba(88, 166, 255, 0.05); }
.settings-group-head::after {
    content: "\25BE";
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 0.2s;
}
.settings-group[open] .settings-group-head::after { transform: rotate(180deg); }
.sg-icon { font-size: 15px; line-height: 1; }
.sg-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-primary);
}
.sg-count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
}
.settings-group-body {
    padding: 4px 16px 14px;
    border-top: 1px solid var(--border);
}
.settings-section { margin-top: 12px; }
.settings-section-title {
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    font-size: 11px;
    color: var(--accent-hoard);
    margin-bottom: 4px;
    opacity: 0.85;
}
.settings-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.settings-row:last-child { border-bottom: none; }
.sr-label { display: flex; flex-direction: column; min-width: 240px; }
.sr-key { font-size: 13px; color: var(--text-primary); }
.sr-path {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Cascadia Code', monospace;
}
.sr-field { flex: 1; display: flex; justify-content: flex-end; }
.sr-input {
    width: 340px;
    max-width: 100%;
    padding: 7px 10px;
    /* background-color, NOT the background shorthand: the shorthand resets
       background-image to none, which wiped the chevron the global select
       rule paints and left every dropdown looking like a text field. */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 13px;
}
.sr-input:focus { border-color: var(--accent-hoard); outline: none; }
.sr-input-num { width: 180px; font-variant-numeric: tabular-nums; }

/* Tracker editor. The textarea is the control: the whole list is edited as
   text and saved in one go, so there is nothing to click per row -- and the
   trackers table refreshes on a timer, which is no place for a button. */
.card-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.trk-edit-box { width: 640px; max-width: 92vw; }
.trk-edit-hint { color: var(--text-muted); font-size: 12px; margin: 4px 0 10px; }
.trk-edit-text {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
}
.trk-edit-text:focus { border-color: var(--accent-hoard); outline: none; }
.trk-edit-engine { color: var(--text-muted); font-size: 12px; margin: 8px 0 0; }
.trk-edit-msg { font-size: 12px; margin: 6px 0 0; min-height: 16px; color: var(--text-secondary); }
.trk-edit-msg.error { color: var(--accent-error, #f85149); }

/* Toggle switch (checkbox stylise, la logique .checked reste inchangee) */
.toggle { position: relative; display: inline-block; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    transition: all 0.2s;
    position: relative;
}
.toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-secondary);
    transition: all 0.2s;
}
.toggle input:checked + .toggle-track {
    background: rgba(63, 185, 80, 0.2);
    border-color: var(--accent-green);
}
.toggle input:checked + .toggle-track::after {
    left: 20px;
    background: var(--accent-green);
}

@media (max-width: 768px) {
    .settings-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .sr-label { min-width: 0; }
    .sr-field { justify-content: stretch; }
    .sr-input, .sr-input-num { width: 100%; }
}

.settings-adv-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.settings-adv-toggle input { width: auto; margin: 0; cursor: pointer; }

.sr-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.35;
}

.sr-default {
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    color: var(--text-muted);
    margin-left: 6px;
}

.sr-keygen {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sr-keygen .sr-input { width: 300px; }
.sr-keygen .btn-small { margin-right: 0; }

.sr-readonly {
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 10px;
    max-width: 340px;
    overflow-x: auto;
    white-space: nowrap;
}


/* Category placement (multi-agent) */
.cat-placement { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cat-agent-row { display: flex; align-items: center; gap: 10px; }
.cat-agent-lbl { min-width: 130px; display: inline-flex; align-items: center; gap: 6px; }
.cat-agent-path { flex: 1; }


/* Resizable torrent table columns: drag handle on each header's right edge. */
#race-table thead th[data-col],
#hoard-table thead th[data-col] { position: relative; }
.col-grip {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 3;
}
.col-grip:hover { background: var(--accent-hoard); opacity: 0.5; }


/* Truncate overflowing cell text (long torrent names) with an ellipsis when a
   column is resized narrow, instead of spilling into the neighbouring column. */
#race-table tbody td,
#hoard-table tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Settings sub-tabs */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.settings-tab { background: transparent; border: none; color: var(--text-secondary); padding: 9px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; font-weight: 500; border-radius: 6px 6px 0 0; }
.settings-tab:hover { color: var(--text-primary); background: var(--bg-card); }
.settings-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
.settings-tab .sg-count { opacity: .55; font-size: 12px; margin-left: 4px; }
.settings-tab .sg-title { color: inherit; }
.settings-panel[hidden] { display: none; }

.col-menu .col-chk { display:inline-block; width:1.2em; color:var(--accent-blue); }
.col-menu .ctx-scroll { max-height:60vh; overflow-y:auto; }

.changelog { line-height:1.55; max-width:1200px; }
.changelog h1 { font-size:1.5rem; margin:0 0 .3em; }
.changelog h2 { font-size:1.15rem; margin:1.4em 0 .3em; border-bottom:1px solid var(--border); padding-bottom:.2em; }
.changelog h3 { font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary); margin:1em 0 .3em; }
.changelog ul { margin:.2em 0 .6em; padding-left:1.3em; }
.changelog li { margin:.15em 0; }
.changelog code { background:var(--bg-card); padding:.05em .35em; border-radius:4px; font-size:.9em; }
.changelog hr { border:none; border-top:1px solid var(--border); margin:1.2em 0; }
.changelog a { color:var(--accent-blue); }

.update-badge { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:10px; background:var(--accent-green); color:#0b0f14; font-size:11px; font-weight:600; text-decoration:none; vertical-align:middle; }
.update-badge:hover { filter:brightness(1.1); }

.ip-refresh-btn { background:none; border:none; cursor:pointer; color:#8b949e; font-size:11px; line-height:1; padding:0 2px; vertical-align:middle; opacity:0; transition:opacity .15s; }
.ip-refresh-btn:hover { color:#58a6ff; }
.stat:hover .ip-refresh-btn { opacity:1; }
.ip-refresh-btn.spin { opacity:1; display:inline-block; animation: iprefreshspin .6s linear infinite; }
@keyframes iprefreshspin { to { transform: rotate(360deg); } }

/* Exit IP refresh: icon always visible, whole block is a hover pill w/ refresh cursor */
.ip-refresh-btn { opacity: 1; color:#8b949e; }
.stat:hover .ip-refresh-btn { opacity: 1; }
/* The negative margin cancels the horizontal padding for layout: this is
   the only stat with padding, so without it the header gutter around the
   Exit IP was 44px against 24px everywhere else. The capsule now bleeds
   into the existing gap instead of widening it. */
.exit-ip-stat { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M23%204v6h-6%27%2F%3E%3Cpath%20d%3D%27M20.49%2015a9%209%200%201%201-2.12-9.36L23%2010%27%2F%3E%3C%2Fsvg%3E") 11 11, pointer; border: 1px solid transparent; border-radius: var(--radius); padding: 3px 10px; margin: 0 -10px; transition: background .15s, border-color .15s; }
.exit-ip-stat:hover { background: #0d1117; border-color: #30363d; }
.exit-ip-stat:hover .ip-refresh-btn { color:#58a6ff; }

.exit-ip-stat { cursor: pointer; }

.logs-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.logs-controls select, .logs-controls input[type=text] { background:#0d1117; color:#c9d1d9; border:1px solid #30363d; border-radius:6px; padding:5px 8px; font-size:13px; }
.logs-controls input[type=text] { flex:1; min-width:140px; }
.logs-controls button, .logs-controls a#logs-issue { background:#21262d; color:#c9d1d9; border:1px solid #30363d; border-radius:6px; padding:5px 10px; cursor:pointer; text-decoration:none; font-size:13px; }
.logs-controls button:hover, .logs-controls a#logs-issue:hover { border-color:#58a6ff; }
.logs-controls .logs-live { display:flex; align-items:center; gap:4px; font-size:13px; color:#8b949e; }
.logs-controls select { width:auto; flex:0 0 auto; }
.logs-controls input[type=checkbox] { width:auto; flex:0 0 auto; margin:0; -webkit-appearance:auto; appearance:auto; }
.logs-controls .logs-live { flex:0 0 auto; }
.logs-view { background:#010409; border:1px solid #30363d; border-radius:8px; padding:10px 12px; height:62vh; overflow:auto; font:12px/1.45 ui-monospace,"Cascadia Mono",monospace; white-space:pre; color:#c9d1d9; transition:border-color .2s; }

#tab-logs .add-form-container { max-width: none; }


/* Draggable column headers (reorder) */
th.col-drag { cursor: grab; }
th.col-drag:active { cursor: grabbing; }
th.col-drop { box-shadow: inset 3px 0 0 var(--accent, #4a9eff); }


/* Race drain policy panel (Phase 1) */
.race-policy{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:14px}
.rp-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rp-gauge{width:120px;height:10px;border-radius:6px;background:var(--bg-tertiary);border:1px solid var(--border);position:relative;overflow:hidden;flex-shrink:0}
.rp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent-green),var(--accent-yellow));transition:width .3s}
.rp-mark{position:absolute;top:-3px;width:2px;height:16px;background:var(--accent-red);opacity:.85}
.rp-mark.low{background:var(--accent-hoard);opacity:.6}
.rp-disk{font-size:12.5px;color:var(--text-secondary);white-space:nowrap}
.rp-disk b{color:var(--text-primary)}
.rp-sep{width:1px;height:22px;background:var(--border)}
.rp-field{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-secondary);white-space:nowrap}
.rp-field input[type=number]{width:48px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:4px 6px;font-size:12.5px;text-align:right}
.rp-muted{color:var(--text-muted)}
.rp-spacer{flex:1}
.rp-sw{position:relative;width:34px;height:19px;display:inline-block;flex-shrink:0}
.rp-sw input{opacity:0;width:0;height:0}
.rp-slider{position:absolute;inset:0;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:19px;cursor:pointer;transition:.15s}
.rp-slider:before{content:"";position:absolute;height:11px;width:11px;left:3px;top:3px;background:var(--text-secondary);border-radius:50%;transition:.15s}
.rp-sw input:checked+.rp-slider{background:rgba(63,185,80,.2);border-color:var(--accent-green)}
.rp-sw input:checked+.rp-slider:before{transform:translateX(15px);background:var(--accent-green)}
.rp-btn{padding:6px 12px;background:rgba(240,136,62,.1);border:1px solid rgba(240,136,62,.4);border-radius:7px;color:var(--accent-race);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.rp-btn.ghost{background:rgba(88,166,255,.08);border-color:rgba(88,166,255,.35);color:var(--accent-hoard)}
.rp-btn:disabled{opacity:.5;cursor:default}
.rp-hist{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.rp-hist table{width:100%;border-collapse:collapse;font-size:12px}
.rp-hist th{text-align:left;color:var(--text-muted);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.04em;padding:4px 8px}
.rp-hist td{padding:5px 8px;border-top:1px solid var(--border);color:var(--text-secondary)}

.rp-line2{margin-top:2px}
.rp-cap{font-size:12px;color:var(--text-secondary);font-weight:600}
.rp-warn{color:var(--accent-red);font-weight:400}
.rp-seg{gap:0!important;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.rp-seg button{background:var(--bg-tertiary);color:var(--text-secondary);border:none;padding:3px 9px;font-size:11.5px;font-weight:600;cursor:pointer;border-right:1px solid var(--border)}
.rp-seg button:last-child{border-right:none}
.rp-seg button.on{background:rgba(188,140,255,.16);color:var(--accent-purple)}


/* Race policy panel v2 (redesigned — one line per policy, info pills) */
.rp2{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;position:relative;z-index:2}
.rp2-row{display:flex;align-items:center;gap:12px;padding:9px 14px;flex-wrap:wrap;border-top:1px solid var(--border)}
.rp2-row:first-child{border-top:none}
.rp2-gauge{width:150px;height:11px;border-radius:6px;background:var(--bg-tertiary);border:1px solid var(--border);position:relative;overflow:hidden;flex-shrink:0}
.rp2-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent-green),var(--accent-yellow));transition:width .3s}
.rp2-mark{position:absolute;top:-3px;width:2px;height:17px;background:var(--accent-red);opacity:.85}
.rp2-mark.low{background:var(--accent-hoard);opacity:.6}
.rp2-disk{font-size:13px;color:var(--text-secondary)}
.rp2-disk b{color:var(--text-primary);font-size:15px}
.rp2-spacer{flex:1}
.rp2-btn{padding:6px 12px;background:rgba(240,136,62,.1);border:1px solid rgba(240,136,62,.4);border-radius:7px;color:var(--accent-race);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.rp2-btn.ghost{background:rgba(88,166,255,.08);border-color:rgba(88,166,255,.35);color:var(--accent-hoard)}
.rp2-btn:disabled{opacity:.5;cursor:default}
.rp2-drain-result{font-size:12px;color:var(--text-dim,#8b949e)}
.rp2-warn{font-size:12px;color:var(--accent-race,#f0883e);font-weight:600}
.rp2-lbl{display:flex;align-items:center;gap:6px;width:180px;flex-shrink:0;font-size:13px;font-weight:600;color:var(--text-primary)}
.rp2-body{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--text-secondary);transition:opacity .15s}
.rp2-body.off{opacity:.32;pointer-events:none}
.rp2-f{display:flex;align-items:center;gap:5px;white-space:nowrap}
.rp2-f input[type=number]{width:50px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:4px 6px;text-align:right;font-size:12.5px}
.rp2-f.dim{color:var(--text-muted)}
.rp2-sw{position:relative;width:36px;height:20px;flex-shrink:0}
.rp2-sw input{opacity:0;width:0;height:0}
.rp2-sl{position:absolute;inset:0;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:20px;cursor:pointer;transition:.15s}
.rp2-sl:before{content:"";position:absolute;height:12px;width:12px;left:3px;top:3px;background:var(--text-secondary);border-radius:50%;transition:.15s}
.rp2-sw input:checked+.rp2-sl{background:rgba(63,185,80,.2);border-color:var(--accent-green)}
.rp2-sw input:checked+.rp2-sl:before{transform:translateX(16px);background:var(--accent-green)}
.rp2-seg{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.rp2-seg button{background:var(--bg-tertiary);color:var(--text-secondary);border:none;padding:3px 9px;font-size:11.5px;font-weight:600;cursor:pointer;border-right:1px solid var(--border)}
.rp2-seg button:last-child{border-right:none}
.rp2-seg button.on{background:rgba(188,140,255,.16);color:var(--accent-purple)}
.rp2-seg.act button.on{background:rgba(240,136,62,.16);color:var(--accent-race)}
.rp2-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--text-muted);background:var(--bg-tertiary);color:var(--text-secondary);font-size:9px;font-style:italic;font-weight:700;cursor:help;flex-shrink:0}
.rp2-info:hover{border-color:var(--accent-hoard);color:var(--accent-hoard);background:rgba(88,166,255,.1)}
.rp2-info .rp2-tip{display:none;position:absolute;top:135%;left:0;width:280px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;padding:9px 11px;font-size:11px;font-style:normal;font-weight:400;color:var(--text-secondary);line-height:1.5;z-index:20;box-shadow:0 6px 18px rgba(0,0,0,.45);white-space:normal}
.rp2-info:hover .rp2-tip{display:block}
.rp2-hist{padding:0 14px 12px}
.rp2-hist table{width:100%;border-collapse:collapse;font-size:12px}
.rp2-hist th{text-align:left;color:var(--text-muted);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.04em;padding:4px 8px}
.rp2-hist td{padding:5px 8px;border-top:1px solid var(--border);color:var(--text-secondary)}

.rp2-grad{display:flex;flex-direction:column;gap:6px;padding:0 14px}
.rp2-grad:empty{display:none}
.rp2-grad-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-secondary)}
.rp2-grad-name{width:230px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.rp2-grad-bar{flex:1;height:8px;border-radius:5px;background:var(--bg-tertiary);border:1px solid var(--border);overflow:hidden}
.rp2-grad-fill{height:100%;background:linear-gradient(90deg,var(--accent-hoard),var(--accent-purple));transition:width .4s}
.rp2-grad-pct{width:100px;text-align:right;flex-shrink:0;color:var(--text-muted)}
.rp2-grad-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:700;padding:8px 0 2px}

/* Pause is the user's decision; queued is a scheduler holding a slot. Two
   different situations, so two different colours. */
.state-badge.state-paused{background:rgba(139,148,158,.15);color:var(--text-dim,#8b949e)}
.state-badge.state-queued{background:rgba(88,166,255,.12);color:var(--accent-blue,#58a6ff)}
/* Its data is gone. Nothing the scheduler can fix, so it reads as an alarm. */
.state-badge.state-error{background:rgba(248,81,73,.15);color:var(--accent-red,#f85149)}
.detail-error{background:rgba(248,81,73,.1);border:1px solid var(--accent-red,#f85149);
    border-radius:6px;padding:12px 14px;margin-bottom:14px;color:var(--accent-red,#f85149)}
/* The path is the actionable part, so it stays readable rather than alarming. */
.detail-error-msg{margin-top:6px;font-family:monospace;font-size:12px;
    word-break:break-all;color:var(--text,#c9d1d9)}
.detail-error-hint{margin-top:6px;font-size:12px;color:var(--text-dim,#8b949e)}

/* ---- Add Torrent: .torrent content preview (parsed in the browser) ---- */
.preview-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
}

.preview-toggle input {
    width: auto;
    margin: 0;
}

.add-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

#tab-add .add-form-container {
    flex: 0 0 600px;
    max-width: 600px;
}

.add-preview-col {
    flex: 1 1 0;
    min-width: 0;
    position: sticky;
    top: 16px;
}

.add-preview-col h2 {
    margin-bottom: 24px;
    font-size: 18px;
}

@media (max-width: 1100px) {
    .add-layout {
        flex-direction: column;
    }

    #tab-add .add-form-container,
    .add-preview-col {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        position: static;
    }
}

.tp-empty {
    color: var(--text-secondary);
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 16px;
}

.torrent-preview .tp-head {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 6px;
}

.tp-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--bg-secondary);
}

.tp-card summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.tp-name {
    font-weight: 600;
    word-break: break-all;
}

.tp-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

.tp-files {
    margin: 8px 0 0;
    max-height: 55vh;
    overflow-y: auto;
    font-size: 12px;
}

.tp-file {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    border-bottom: 1px solid var(--border);
}

.tp-file:last-child {
    border-bottom: none;
}

.tp-file-path {
    word-break: break-all;
}

.tp-file-size {
    color: var(--text-secondary);
    white-space: nowrap;
}

.tp-more,
.tp-trackers {
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 6px;
    word-break: break-all;
}

.tp-card-error {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-color: #c0392b;
}

/* ---- Torrent detail: Content tab ---- */
.h-detail-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    padding: 8px 14px;
}

.h-detail-tab:hover {
    color: var(--text-primary);
}

.h-detail-tab.active {
    color: var(--accent-hoard);
    border-bottom-color: var(--accent-hoard);
}

.tc-empty {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 8px 0;
}

.tc-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.tc-table {
    width: 100%;
    font-size: 12px;
}

.tc-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.tc-path {
    word-break: break-all;
}

.tc-num {
    text-align: right;
    white-space: nowrap;
}

.tc-barcell {
    width: 120px;
}

.tc-bar {
    background: var(--border);
    border-radius: 3px;
    height: 6px;
    overflow: hidden;
    width: 100%;
}

.tc-bar-fill {
    background: var(--accent-blue);
    height: 100%;
}


/* Language picker on the first-run screen. */
.setup-lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-dim, #9aa4b2);
    max-width: 100%;
}
.setup-lang-row select {
    /* min-width:0 is the point: without it a flex child refuses to shrink below
       the width of its widest option, and long labels push it out of the box. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
    padding: 5px 8px;
    box-sizing: border-box;
}
@media (max-width: 420px) {
    .setup-lang-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .setup-lang-row select { max-width: 100%; }
}

/* Startup pause banner. Deliberately loud and undismissable: while the hold
   is on, Hydra announces nothing and dials nothing, which is indistinguishable
   from a broken install unless the reason is on screen. */
#startup-pause-banner {
    background: rgba(227, 179, 65, 0.1);
    border-bottom: 1px solid var(--accent-yellow);
    padding: 10px 20px;
}

.startup-pause-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1600px;
    margin: 0 auto;
}

#startup-pause-banner strong {
    color: var(--accent-yellow);
    font-size: 14px;
}

.startup-pause-text {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 2px;
}

@media (max-width: 700px) {
    .startup-pause-inner { flex-direction: column; align-items: stretch; }
}

/* Network mode tab: the four setups as picks, not as a list of keys. */
.net-mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.net-mode-card { text-align: left; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px; cursor: pointer; color: var(--text-primary); display: flex; flex-direction: column; gap: 6px; }
.net-mode-card:hover { border-color: var(--accent-blue); }
.net-mode-card.active { border-color: var(--accent-blue); box-shadow: inset 0 0 0 1px var(--accent-blue); }
.net-mode-card .nm-title { font-weight: 600; font-size: 14px; }
.net-mode-card .nm-blurb { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.net-ok { color: var(--accent-green); }
.net-warn { color: var(--accent-orange); }
.net-fail { color: var(--accent-red); }

.settings-save-bar { display: flex; justify-content: flex-start; padding: 14px 0 4px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* One polygon, one vertex per engine. */
.net-poly { background: none; border: 0; padding: 4px; line-height: 0; cursor: pointer; border-radius: 8px; }
.net-poly:hover { background: rgba(255,255,255,.06); }
.net-poly:focus-visible { outline: 2px solid var(--accent-blue, #7aa2f7); outline-offset: 2px; }
.net-poly svg { display: block; overflow: visible; }
/* Variant B: the edges are a neutral ring, so only the vertices carry state --
   an edge between two engines would suggest a link that does not exist. */
.net-poly .np-edge { fill: none; stroke: #64748b; stroke-opacity: .35; stroke-width: 1; }
.net-poly .np-node circle { stroke: var(--bg-primary, #0a0e17); stroke-width: 1.2; }
.net-poly .np-node.np-warn circle { animation: npPulse 1.6s ease-in-out infinite; }
@keyframes npPulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.net-panel-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none;
    transition: opacity .18s ease; z-index: 900; }
.net-panel-scrim.open { opacity: 1; pointer-events: auto; }
/* Opaque, not the translucent --bg-secondary the cards use. This one sits over
   a busy table and lists addresses: a 75% background put the rows underneath
   straight through the text. */
.net-panel { position: fixed; z-index: 901; width: min(560px, 92vw); background: #0e1424;
    border: 1px solid var(--border, #1b2436); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.66);
    transform: scale(.12); opacity: 0; pointer-events: none;
    transition: transform .2s cubic-bezier(.2,.9,.25,1.1), opacity .16s ease; }
.net-panel.open { transform: scale(1); opacity: 1; pointer-events: auto; }
.net-panel h3 { margin: 0; padding: 14px 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-secondary); border-bottom: 1px solid var(--border, #1b2436); }
.net-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center;
    padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.04); }
.net-row:last-child { border-bottom: 0; }
.net-row .nr-dot { width: 10px; height: 10px; border-radius: 50%; }
.net-row .nr-name { font-weight: 600; }
.net-row .nr-sub { font-size: 12px; color: var(--text-secondary); }
.net-row .nr-ip { text-align: right; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.net-row .nr-iface { color: var(--accent-blue, #7aa2f7); }

.health-dots { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.health-row { display: flex; align-items: center; gap: 6px; cursor: default; }
.health-row span { font-size: 11px; color: var(--text-secondary); line-height: 1; }
.health-dots .health-dot { width: 9px; height: 9px; flex: 0 0 auto; }

/* Kept in view: the save button sits at the bottom of a long panel, and a
   restart notice scrolled off the top is a notice nobody reads. */
#settings-restart-banner { position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }

/* Jobs tab. The name is what a person reads and searches for; the hash is
   there to be copied into an API call or grepped out of a log, so it is
   present in full but visually secondary. */
.job-torrent .job-name {
    font-weight: 500;
    word-break: break-word;
}

.job-torrent .job-hash {
    font-family: monospace;
    font-size: 0.78em;
    color: var(--text-secondary);
    user-select: all;
}

.job-error {
    color: var(--accent-red);
    word-break: break-word;
}

/* Jobs table. Fixed layout on purpose: the list re-renders every two seconds
   while a move runs, and with automatic widths the columns would resize on
   every tick as the byte counts grow. The two columns worth reading -- the
   release name and where it is going -- take whatever the fixed ones leave. */
#jobs-table {
    width: 100%;
    table-layout: fixed;
}

#jobs-table .jt-state { width: 90px; }
#jobs-table .jt-type { width: 110px; }
#jobs-table .jt-progress { width: 220px; }
#jobs-table .jt-started { width: 160px; }
#jobs-table .jt-action { width: 90px; }

#jobs-table td {
    vertical-align: top;
    word-break: break-word;
}

/* Context menu groups. The heading is a label, never a target: it must not
   look clickable next to the items it introduces. */
.ctx-group-title {
    padding: 6px 12px 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim, #8a8a8a);
    cursor: default;
    user-select: none;
}