*{box-sizing:border-box;margin:0;padding:0}
.material-icons{font-family:'Material Icons';font-size:1rem;line-height:1;vertical-align:-.15em;display:inline-block;user-select:none;flex-shrink:0}
:root{--bg:#0f172a;--card:#1e293b;--border:#334155;--primary:#007389;--text:#e2e8f0;--muted:#94a3b8;
    --ok:#10b981;--warn:#f59e0b;--err:#ef4444;--accent: #05a0b5
}

body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px}

/* header */
header{display:flex;align-items:center;gap:1rem;padding:.625rem 1.5rem;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.logo{font-size:1rem;font-weight:700;color:var(--accent);white-space:nowrap}
nav{display:flex;gap:.25rem;flex:1}
nav button{padding:.35rem .85rem;border:none;border-radius:.375rem;background:transparent;color:var(--muted);cursor:pointer;font-size:.8125rem;transition:.12s}
nav button:hover{background:#ffffff0d;color:var(--text)}
nav button.active{background:var(--primary);color:#fff}
.hdr-status{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--err);flex-shrink:0}
.dot.on{background:var(--ok);box-shadow:0 0 5px var(--ok)}

/* layout */
main{padding:1.5rem;max-width:1375px;margin:0 auto}
section{display:none}
section.active{display:block}

/* stat cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.75rem;margin-bottom:1.25rem}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:.5rem;padding:.875rem 1rem}
.stat-card .lbl{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}
.stat-card .val{font-size:1.5rem;font-weight:700;line-height:1}
.val.ok{color:var(--ok)}
.val.warn{color:var(--warn)}
.val.err{color:var(--err)}
.val.accent{color:var(--accent)}

/* panels */
.panel{background:var(--card);border:1px solid var(--border);border-radius:.5rem;overflow:hidden;margin-bottom:1rem}
.panel-hdr{padding:.625rem 1rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.8125rem;display:flex;align-items:center;justify-content:space-between}
.panel-body{padding:1rem}

/* filter bar */
.filter-bar{display:flex;align-items:center;gap:.625rem;padding:.5rem .875rem;border-bottom:1px solid var(--border);background:#ffffff03;flex-wrap:wrap}
.filter-bar lbl{display:flex;align-items:center;gap:.375rem;font-size:.7rem;color:var(--muted)}

/* forms */
form.inline{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}
lbl{display:flex;flex-direction:column;gap:.2rem;font-size:.7rem;color:var(--muted)}
input,select,textarea{padding:.375rem .6rem;border:1px solid var(--border);border-radius:.375rem;background:#0a111f;color:var(--text);font-size:.8125rem;outline:none;transition:.12s}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}
textarea{font-family:monospace;resize:vertical;line-height:1.5}
input.wide{min-width:260px}
input[readonly]{opacity:.7;cursor:default}

/* buttons */
button.btn{padding:.375rem .875rem;border:none;border-radius:.375rem;cursor:pointer;font-size:.8125rem;font-weight:500;transition:.12s;line-height:1.4}
button.btn-primary{background:var(--primary);color:#fff}
button.btn-primary:hover{background:#00576d}
button.btn-danger{background:transparent;color:var(--err);border:1px solid #ef444440}
button.btn-danger:hover{background:var(--err);color:#fff}
button.btn-success{background:transparent;color:var(--ok);border:1px solid #10b98140}
button.btn-success:hover{background:var(--ok);color:#fff}
button.btn-sm{padding:.2rem .5rem;font-size:.7rem}
button.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
button.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
button.btn-icon{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:.375rem;padding:.35rem .55rem;cursor:pointer;font-size:.8125rem;transition:.12s;line-height:1;display:inline-flex;align-items:center;gap:.2rem}
button.btn-icon:hover{border-color:var(--primary);color:var(--primary)}
button:disabled{opacity:.45;cursor:not-allowed}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.8125rem;table-layout:fixed}
thead th{text-align:left;padding:.45rem .75rem;font-size:.68rem;color:var(--muted);border-bottom:1px solid var(--border);font-weight:500;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;position:relative;overflow:visible;user-select:none;cursor:grab}
thead th:last-child{cursor:default}
tbody td{padding:.55rem .75rem;border-bottom:1px solid #ffffff06;vertical-align:middle;overflow:hidden;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#ffffff04}

/* column resize / reorder */
.col-resizer{position:absolute;right:-2px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:2;border-radius:2px}
.col-resizer:hover,.col-resizer.resizing{background:var(--primary);opacity:.7}
thead th.col-drag-over{box-shadow:inset 2px 0 0 var(--primary)}
thead th.col-dragging{opacity:.35}
/* column sort */
.col-sort-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:0 .15rem;line-height:1;margin-left:.25rem;opacity:.75;transition:.12s;display:inline-flex;align-items:center;vertical-align:middle}
.col-sort-btn:hover{color:var(--text);opacity:1}
.col-sort-btn.active{color:var(--accent);opacity:1}
.col-sort-btn .material-icons{font-size:.8rem}

/* misc table */
.mono{font-family:monospace;font-size:.75rem;color:var(--muted)}
.badge{display:inline-flex;align-items:center;padding:.15rem .45rem;border-radius:9999px;font-size:.67rem;font-weight:600;white-space:nowrap}
.badge-pinned{background:#10b98118;color:var(--ok)}
.badge-pinning{background:#38bdf818;color:#38bdf8}
.badge-verifying{background:#38bdf818;color:#38bdf8}
.badge-exporting{background:#f59e0b18;color:#f59e0b}
.badge-unpinned{background:#6b728018;color:#9ca3af}
.badge-error{background:#ef444418;color:var(--err)}
.progress{height:.3rem;background:var(--border);border-radius:9999px;overflow:hidden;width:72px;display:inline-block}
.progress-fill{height:100%;background:#38bdf8;transition:width .3s,background .3s}
.empty{text-align:center;padding:3rem;color:var(--muted);font-size:.875rem}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
.modal-overlay{position:absolute;inset:0;background:#000c}
.modal-box{position:relative;background:var(--card);border:1px solid var(--border);border-radius:.5rem;width:min(700px,96vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 64px #0008}
.modal-hdr{padding:.75rem 1.125rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.9375rem;flex-shrink:0}
.modal-body{padding:1rem 1.125rem;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:.875rem}
.modal-footer{padding:.75rem 1.125rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* file browser */
.browser-path{font-family:monospace;font-size:.75rem;color:var(--muted);background:#0a111f;border:1px solid var(--border);border-radius:.375rem;padding:.35rem .6rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-height:2rem}
.browser-crumb{color:var(--accent);cursor:pointer;padding:.05rem .15rem;border-radius:.2rem}
.browser-crumb:hover{background:#6366f120}
.browser-crumb-sep{color:var(--border)}
.browser-list{border:1px solid var(--border);border-radius:.375rem;overflow-y:auto;height:240px;background:#0a111f}
.browser-entry{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;cursor:pointer;font-size:.8125rem;border-bottom:1px solid #ffffff04;user-select:none}
.browser-entry:last-child{border-bottom:none}
.browser-entry:hover{background:#ffffff08}
.browser-entry.selected{background:#6366f118;outline:1px solid #6366f150;outline-offset:-1px}
.browser-entry .icon{flex-shrink:0;width:1.4rem;display:inline-flex;align-items:center;justify-content:center}
.browser-entry .icon .material-icons{font-size:1.05rem}
.browser-entry .ename{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-entry .esize{font-size:.7rem;color:var(--muted);white-space:nowrap}
.browser-actions{display:flex;gap:.5rem;align-items:center;margin-top:.375rem}
.selected-path{font-family:monospace;font-size:.75rem;background:#0a111f;border:1px solid var(--border);border-radius:.375rem;padding:.375rem .6rem;color:var(--text);word-break:break-all;min-height:2.25rem}

/* toast */
.toast{position:fixed;bottom:1.25rem;right:1.25rem;padding:.625rem .9rem;border-radius:.4rem;font-size:.8125rem;z-index:200;animation:toastIn .18s ease;max-width:340px}
.toast-ok{background:#10b981cc;color:#ecfdf5;backdrop-filter:blur(4px)}
.toast-err{background:#ef4444cc;color:#fef2f2;backdrop-filter:blur(4px)}

/* misc */
.chip-active{display:inline-block;padding:.1rem .35rem;border-radius:9999px;background:#10b98118;color:var(--ok);font-size:.65rem;margin-left:.35rem;font-weight:600}
.chip-ipns{display:inline-block;padding:.1rem .35rem;border-radius:9999px;background:#6366f118;color:#818cf8;font-size:.65rem;font-weight:600;vertical-align:middle}
.chip-ipfs{display:inline-block;padding:.1rem .35rem;border-radius:9999px;background:#0ea5e918;color:#38bdf8;font-size:.65rem;font-weight:600;vertical-align:middle}
a.cid-link{color:var(--accent);text-decoration:none}
a.cid-link:hover{text-decoration:underline}
.field-hint{display:block;font-size:.72rem;color:var(--muted);margin-top:.25rem;line-height:1.4}

@keyframes toastIn{from{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}
@keyframes progpulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes preparepulse{0%,100%{opacity:1;background:#a855f7}50%{opacity:.3;background:#a855f7}}

/* bandwidth chart */
.dash-top{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.75rem;margin-bottom:1.25rem}
.dash-top .bw-card{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.bw-card{background:var(--card);border:1px solid var(--border);border-radius:.5rem;padding:.625rem .875rem .5rem}
.bw-hdr{display:flex;align-items:center;gap:.875rem;margin-bottom:.375rem}
.bw-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);flex:1}
.bw-leg{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--muted)}
.bw-dot{width:.45rem;height:.45rem;border-radius:50%;display:inline-block;flex-shrink:0}
#bw-canvas{width:100%;flex:1;height:0;min-height:20px;display:block}

/* action menu ⋮ */
.action-menu{position:relative;display:inline-flex;align-items:center}
.action-menu-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:.375rem;padding:.2rem .45rem;cursor:pointer;line-height:1;transition:.12s;display:inline-flex;align-items:center}
.action-menu-btn:hover{border-color:var(--primary);color:var(--primary)}
.action-dropdown{position:fixed;right:0;top:0;background:var(--card);border:1px solid var(--border);border-radius:.4rem;z-index:200;display:none;min-width:200px;box-shadow:0 8px 32px #000a}
.action-dropdown.open{display:block}
.action-dropdown button{display:flex;align-items:center;gap:.45rem;width:100%;padding:.5rem .8rem;background:transparent;border:none;color:var(--text);font-size:.8125rem;cursor:pointer;transition:.1s;white-space:nowrap}
.action-dropdown button .material-icons{font-size:1rem;opacity:.8}
.action-dropdown button:hover{background:#ffffff0a;color:var(--primary)}
.action-dropdown button.danger{color:var(--err)}
.action-dropdown button.danger:hover{background:#ef444410;color:var(--err)}
.action-sep{height:1px;background:var(--border);margin:.2rem 0}

/* ── Page Configuration ─────────────────────────────────────────────────── */
.cfg-section{background:var(--card);border:1px solid var(--border);border-radius:.5rem;overflow:hidden;margin-bottom:.875rem}
.cfg-section-title{padding:.45rem 1rem;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:#ffffff05;border-bottom:1px solid var(--border)}
.cfg-row{display:flex;align-items:flex-start;gap:1.5rem;padding:.625rem 1rem;border-bottom:1px solid #ffffff06}
.cfg-row:last-child{border-bottom:none}
.cfg-meta{flex:1;min-width:0;padding-top:.1rem}
.cfg-label{font-size:.8125rem;font-weight:500;color:var(--text);line-height:1.4}
.cfg-desc{font-size:.7rem;color:var(--muted);margin-top:.15rem;line-height:1.45}
.cfg-ctrl{align-self: end;display:flex;align-items:flex-start;flex-shrink:0;padding-top:.05rem}
.cfg-ctrl input[type=number],.cfg-ctrl input[type=text]{width:96px}
.cfg-ctrl textarea{width:240px;height:72px}
.cfg-val{font-family:monospace;font-size:.75rem;line-height:1.6;word-break:break-all}
.cfg-footer{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;margin-top:.25rem}
.cfg-restart{font-size:.75rem;padding:.2rem .55rem;background:#f59e0b1a;color:var(--warn);border-radius:.3rem}
.cfg-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.cfg-toggle input{opacity:0;width:0;height:0;position:absolute}
.cfg-toggle-track{width:36px;height:20px;background:#ffffff18;border-radius:10px;transition:.2s;border:1px solid var(--border)}
.cfg-toggle input:checked + .cfg-toggle-track{background:var(--primary);border-color:var(--primary)}
.cfg-toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px #0004}
.cfg-toggle input:checked ~ .cfg-toggle-track .cfg-toggle-thumb{left:19px}

/* ── Overlays authentification ──────────────────────────────────────────── */
.auth-overlay{position:fixed;inset:0;background:var(--bg);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
.auth-box{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:2rem 2.25rem;width:100%;max-width:380px;display:flex;flex-direction:column;gap:1rem}
.auth-logo{align-self: center;display:flex;align-items:center;gap:.55rem;font-size:1.25rem;font-weight:700;color:var(--accent);margin-bottom:.25rem}
.auth-title{font-size:1rem;font-weight:600;color:var(--text)}
.auth-desc{font-size:.78rem;color:var(--muted);line-height:1.5}
.auth-field{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;color:var(--muted)}
.auth-field input{font-size:.875rem;padding:.5rem .75rem;width:100%}
.auth-error{font-size:.78rem;color:var(--err);background:#ef444412;border:1px solid #ef444430;border-radius:.375rem;padding:.35rem .65rem;line-height:1.4}

/* ── Responsive mobile ──────────────────────────────────────────────────── */
@media (max-width:680px){
  /* Header : logo + statut sur une ligne, nav défilante en dessous */
  header{flex-wrap:wrap;padding:.5rem .75rem;gap:.375rem .5rem}
  .logo{flex:1;font-size:.875rem}
  .hdr-status{order:1}
  #btn-logout{order:1}
  nav{order:2;flex:none;width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;flex-wrap:nowrap}
  nav::-webkit-scrollbar{display:none}
  nav button{white-space:nowrap;flex-shrink:0;font-size:.75rem;padding:.28rem .65rem}

  /* Contenu */
  main{padding:.625rem .5rem}

  /* Tableaux : scroll horizontal dans leur conteneur */
  #files-content,#torrpin-content,#labels-content,#cfg-torrpin-rules{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Dashboard : grille 2 colonnes, bw-card pleine largeur */
  .dash-top{grid-template-columns:repeat(2,1fr)}
  .dash-top .bw-card{grid-column:span 2;grid-row:span 1}

  /* Config : empiler label et contrôle verticalement */
  .cfg-row{flex-direction:column;gap:.4rem}
  .cfg-ctrl{align-self:flex-start;width:100%}
  .cfg-ctrl input[type=number],.cfg-ctrl input[type=text],.cfg-ctrl textarea,.cfg-ctrl select{width:100% !important;max-width:100%;box-sizing:border-box}
  input.wide{min-width:0;width:100%}

  /* Modal : pleine largeur */
  .modal-box{width:96vw;max-height:92vh}
}