:root{
  --ink:#141213; --ink-doux:#4a4547; --gris:#8a8386; --trait:#2a2627;
  --fond:#141213; --carte:#1d1a1b; --oxide:#cc0202; --oxide-clair:#ff3b3b;
  --ok:#3bc47d; --attente:#e0a93a; --texte:#eceae9;
  --rayon:10px; --titre:"Segoe UI",system-ui,sans-serif; --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font:16px/1.55 var(--titre)}
body.centre{min-height:100dvh;display:grid;place-items:center;padding:16px}
a{color:inherit;text-decoration:none}
header{display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid var(--trait);position:sticky;top:0;background:rgba(20,18,19,.92);backdrop-filter:blur(8px);z-index:5}
.logo{font-weight:800;letter-spacing:.02em;font-size:1.1rem}
.logo span{color:var(--oxide);margin:0 6px}
header nav{display:flex;gap:4px;margin-left:8px}
header nav a{padding:7px 14px;border-radius:99px;color:var(--gris);font-size:.92rem;transition:background .15s,color .15s}
header nav a.actif{background:var(--oxide);color:#fff}
header nav a:not(.actif):hover{color:var(--texte)}
header form{margin-left:auto}
.lien{background:none;border:0;color:var(--gris);font:inherit;cursor:pointer;padding:7px 10px}
.lien:hover{color:var(--texte)}
main{max-width:860px;margin:0 auto;padding:24px 16px 60px}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:20px;margin-bottom:18px}
h1{margin:0;font-size:1.8rem;letter-spacing:-.02em}
h2{margin:0 0 14px;font-size:1.15rem;letter-spacing:-.01em}
.sous{color:var(--gris);margin:.2em 0 1em}
.retour a{color:var(--gris)}
.retour a:hover{color:var(--texte)}

/* connexion */
.connexion{background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:34px 30px;width:min(360px,92vw);text-align:center}
.connexion h1{color:#fff}
.connexion p.sous{margin-top:4px}

/* formulaires */
input,select,button{font:inherit}
input[type=password],input[type=url],select{width:100%;padding:12px 14px;background:#141213;border:1px solid var(--trait);border-radius:var(--rayon);color:var(--texte);font-size:16px}
input:focus,select:focus{outline:none;border-color:var(--oxide)}
.bouton{display:inline-block;background:var(--oxide);color:#fff;border:0;border-radius:var(--rayon);padding:12px 22px;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .14s var(--ease),background .15s;touch-action:manipulation}
.bouton:active{transform:scale(.97)}
.bouton:hover{background:var(--oxide-clair)}
.bouton.discret{background:transparent;border:1px solid var(--trait);color:var(--texte)}
.bouton.discret:hover{border-color:var(--texte);background:transparent}
.connexion .bouton{width:100%;margin-top:14px}
.erreur{color:var(--oxide-clair)}
.ok{color:var(--ok)}

.lanceur{display:flex;flex-direction:column;gap:12px}
.lanceur .ligne{display:flex;gap:10px}
.lanceur .ligne select{flex:1}
.depot{display:flex;align-items:center;justify-content:center;min-height:92px;border:1.5px dashed var(--trait);border-radius:var(--rayon);cursor:pointer;color:var(--gris);text-align:center;padding:14px;transition:border-color .15s,color .15s}
.depot:hover{border-color:var(--oxide);color:var(--texte)}
.depot input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.depot.plein{border-style:solid;border-color:var(--ok);color:var(--texte)}

/* analyses */
.analyses{display:flex;flex-direction:column;gap:8px}
.analyse{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 16px;background:#141213;border:1px solid var(--trait);border-radius:var(--rayon);align-items:center;transition:border-color .15s}
.analyse:hover{border-color:var(--gris)}
.analyse .nom{font-weight:600;overflow-wrap:anywhere}
.analyse .meta{color:var(--gris);font-size:.86rem;grid-column:1}
.analyse .badge{grid-row:1/3;font-size:.72rem;font-family:var(--mono);padding:4px 9px;border-radius:99px;background:#2a2627;color:var(--gris);white-space:nowrap}
.analyse.en-cours .badge{background:rgba(224,169,58,.16);color:var(--attente)}
.analyse.fini .badge{background:rgba(59,196,125,.16);color:var(--ok)}
.analyse.echec .badge{background:rgba(204,2,2,.18);color:var(--oxide-clair)}
.analyse.en-cours .badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.vide{color:var(--gris)}
.meta{color:var(--gris);font-size:.9rem}

.journal{background:#0d0c0c;border:1px solid var(--trait);border-radius:var(--rayon);padding:14px;font:13px/1.5 var(--mono);color:#d8d4d3;white-space:pre-wrap;overflow-wrap:anywhere;max-height:60vh;overflow:auto;margin:8px 0 0}
code{font-family:var(--mono);background:#0d0c0c;padding:2px 6px;border-radius:5px}

@media(max-width:560px){
  header{gap:10px;padding:12px 14px}
  header nav a{padding:6px 11px}
  main{padding:18px 13px 50px}
  .lanceur .ligne{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.analyse.en-cours .badge::before{animation:none}.bouton:active{transform:none}}

/* recherche */
.recherche{width:100%;padding:11px 14px 11px 38px;background:#141213 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8386' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 13px center;border:1px solid var(--trait);border-radius:var(--rayon);color:var(--texte);font-size:16px;margin-bottom:6px}
.recherche:focus{outline:none;border-color:var(--oxide)}
.liste{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto;margin-top:6px}
.app{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#141213;border:1px solid var(--trait);border-radius:var(--rayon)}
.app-nom{flex:1;min-width:0;font-family:var(--mono);font-size:.86rem;overflow-wrap:anywhere}
.app form{margin:0}
.bouton.mini{padding:7px 14px;font-size:.85rem}

/* liste d'apps : une ligne cliquable, nom lisible + paquet */
.app{margin:0}
.app-ligne{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:11px 14px;background:#141213;border:1px solid var(--trait);border-radius:var(--rayon);color:var(--texte);cursor:pointer;transition:border-color .14s,background .14s;touch-action:manipulation}
.app-ligne:hover{border-color:var(--oxide);background:#1a1718}
.app-ligne:active{transform:scale(.995)}
.app-nom{font-weight:600;font-size:1rem}
.app-pkg{font-family:var(--mono);font-size:.76rem;color:var(--gris);overflow-wrap:anywhere}