:root{
  --fond:#0b1030; --fond-2:#161d45; --carte:#141a3d; --trait:rgba(255,255,255,.10);
  --texte:#eef1fb; --texte-2:#b7c0e6; --texte-3:#7c86b5;
  --bleu:#3a7bff; --bleu-clair:#5b93ff; --rouge:#e0555f; --vert:#5cc98a;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--fond);color:var(--texte);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
h1,h2{margin:0 0 4px;font-weight:800;}
h1{font-size:20px;} h2{font-size:16px;margin-bottom:14px;}
.ecran{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:20px;}
.carte--connexion{width:100%;max-width:360px;}
.sous-titre{color:var(--texte-3);margin:0 0 20px;font-size:13px;}
.pile{display:flex;flex-direction:column;gap:14px;}
.champ{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0;}
.champ>span,.champ>legend{font-size:12.5px;font-weight:700;color:var(--texte-2);padding:0;}
.champ em{font-style:normal;font-weight:500;color:var(--texte-3);}
input:not([type=checkbox]),select,textarea{
  width:100%;background:var(--fond-2);border:1px solid var(--trait);border-radius:10px;color:var(--texte);
  padding:10px 12px;font:inherit;
}
textarea{resize:vertical;min-height:70px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--bleu-clair);}
.bouton{border:1px solid var(--trait);background:var(--fond-2);color:var(--texte);border-radius:10px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;}
.bouton:hover{border-color:var(--bleu-clair);}
.bouton:disabled{opacity:.5;cursor:default;}
.bouton--principal{background:var(--bleu);border-color:var(--bleu);}
.bouton--principal:hover{background:var(--bleu-clair);}
.bouton--discret{background:transparent;}
.bouton--petit{padding:5px 10px;font-size:12.5px;}
.erreur{color:var(--rouge);font-size:13px;margin:0;}
.erreur[hidden]{display:none;}
.aide{color:var(--texte-2);font-size:13px;margin:0 0 10px;}
.cle-totp{font-family:ui-monospace,Consolas,monospace;font-size:13px;background:var(--fond-2);border-radius:8px;padding:8px 10px;word-break:break-all;margin:0 0 8px;}
.lien-totp{display:inline-block;margin-bottom:14px;color:var(--bleu-clair);font-size:13px;}

.app-shell[hidden],.ecran[hidden]{display:none;}
.entete{display:flex;align-items:center;gap:24px;padding:14px 24px;border-bottom:1px solid var(--trait);background:var(--fond-2);}
.entete h1{margin:0;}
.onglets{display:flex;gap:6px;flex:1;}
.onglet{background:transparent;border:0;color:var(--texte-2);font:inherit;font-weight:700;padding:8px 14px;border-radius:8px;cursor:pointer;}
.onglet.is-actif{background:var(--bleu);color:#fff;}
.onglet[hidden]{display:none;}
.entete__droite{display:flex;align-items:center;gap:10px;}
.moi{color:var(--texte-3);font-size:13px;}
.contenu{max-width:1200px;margin:0 auto;padding:24px;}
.contenu section[hidden]{display:none;}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){.grille-2,.grille-3{grid-template-columns:1fr;}}

.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;}
.liste .vide{color:var(--texte-3);font-size:13px;}
.element{background:var(--fond-2);border-radius:10px;padding:10px 12px;font-size:13px;}
.element__tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
.element strong{font-size:14px;}
.pastille{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;}
.pastille--vert{background:rgba(92,201,138,.18);color:var(--vert);}
.pastille--gris{background:rgba(124,134,181,.18);color:var(--texte-3);}
.rangee{display:flex;gap:8px;align-items:center;}
.case{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--texte);font-weight:400;margin-bottom:6px;}
.case input{width:auto;}