/* new-ui.css — nouvelle navigation (bêta, flag « new_ui »). Chargée par navbar.js seulement quand le flag
   est actif pour le compte (html.new-ui) : rien ici ne touche l'interface actuelle.
   Reprend les composants existants : accordéon/lignes de account.css, boutons de ui-dialogs.js,
   barre .wbn de navbar.css. */

:root {
    --nui-card: hsl(217 38% 17%);            /* .acct-section */
    --nui-card-line: rgba(255, 255, 255, 0.07);
    --nui-label: #8badc9;                    /* .acct-label */
    --nui-section: #8fd6f8;                  /* .acct-section-name */
}

/* ---------------- Barre du haut */
html.new-ui .nav-list .nav-link .wi.submenu-icon { width: 18px; height: 18px; margin-inline-end: 2px; color: var(--text-secondary); }
html.new-ui .nav-list > .nav-item > .nav-link.active .wi.submenu-icon,
html.new-ui .nav-list > .nav-item > .nav-link:hover .wi.submenu-icon { color: var(--text-light); }

/* ---------------- Menu de l'avatar : court, avec un en-tête */
html.new-ui #user-submenu.nui-menu {
    min-width: 236px;
    padding: 6px;
    gap: 0;
    border-radius: 14px;
    background: linear-gradient(165deg, hsl(217 32% 25%), hsl(217 38% 17%));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px -12px rgba(1, 4, 12, 0.65);
    max-height: none;
}
html.new-ui #user-submenu .nui-menu-head {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    min-width: 0;
}
html.new-ui #user-submenu .nui-name { color: var(--text-light); font-weight: 600; font-size: .92rem; line-height: 1.3; }
html.new-ui #user-submenu .nui-mail { color: var(--text-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.new-ui #user-submenu .nav-item { padding: 0; }
html.new-ui #user-submenu .nav-link { padding: 9px 10px; font-weight: 500; font-size: .9rem; gap: 10px; }
html.new-ui #user-submenu .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-light); }
html.new-ui #user-submenu .wi.submenu-icon { width: 17px; height: 17px; color: var(--text-muted); margin: 0; filter: none; }
html.new-ui #user-submenu .nav-link:hover .wi.submenu-icon { color: var(--text-light); }
html.new-ui #user-submenu .nui-admin .wi.submenu-icon { color: var(--warning-color, #f59e0b); }
html.new-ui #user-submenu .nui-logout { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
html.new-ui #user-submenu .nui-logout .nav-link { color: #ff7b7b !important; }
html.new-ui #user-submenu .nui-logout .wi.submenu-icon { color: #ff7b7b; }

/* ---------------- Barre d'onglets (écrans étroits) : réutilise .wbn de navbar.css */
html.new-ui .nui-tabbar { display: none; }
html.new-ui body.nui-narrow .nui-tabbar { display: block; }
/* Bande d'identité en haut sur téléphone (new-ui.js renderBrand) : mise en forme de navbar.css
   (body.wbn-active #waifly-brand-header), elle garde la zone sûre du haut que la barre masquée réservait. */
html.new-ui body.nui-narrow #waifly-brand-header.nui-wbh { text-decoration: none; color: var(--text-light); }

/* Navigateur mobile (hors app iOS) : barre pleine largeur du prototype, collée en bas, pas de pilule.
   L'app iOS garde .wbn tel quel (new-ui.js ne pose .nui-flat / body.nui-flatbar que hors iOS).
   Hauteur : 6px + 4px + icône 22px + 3px + libellé ~12px + 4px + 10px ≈ 62px, plus la zone sûre.
   --wbn-clear / --wbn-reserved redéfinis sur body : la bulle du chat (ticket.css), les toasts
   (popup.css, cart.css…) et le padding-bottom de body.wbn-active (navbar.css) suivent tout seuls. */
html.new-ui body.nui-flatbar { --wbn-height: 62px; --wbn-gap: 0px; --wbn-clear: 62px; --wbn-reserved: 70px; }
html.new-ui body .nui-tabbar.nui-flat {
    left: 0; right: 0; bottom: 0;
    height: calc(62px + env(safe-area-inset-bottom));
    padding: 6px 4px calc(10px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    border-radius: 0;
    background: rgba(13, 30, 58, .96);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: none;
}
html.new-ui body .nui-tabbar.nui-flat .wbn-rows { position: static; inset: auto; border-radius: 0; overflow: visible; height: 100%; }
html.new-ui body .nui-tabbar.nui-flat .wbn-row { position: static; inset: auto; height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); transition: none; }
html.new-ui body .nui-tabbar.nui-flat a.wbn-item {
    flex: none; min-width: 0; padding: 4px 0; gap: 3px; border-radius: 10px;
    color: #9ca3af; font: 500 .64rem/1.2 'Poppins', Arial, sans-serif; text-decoration: none;
}
html.new-ui body .nui-tabbar.nui-flat a.wbn-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.new-ui body .nui-tabbar.nui-flat a.wbn-item .wi { width: 22px; height: 22px; padding: 0; background: none; border-radius: 0; color: inherit; }
html.new-ui body .nui-tabbar.nui-flat a.wbn-item.active { color: var(--primary-color, #38b1ed); }
html.new-ui body .nui-tabbar.nui-flat a.wbn-item:focus-visible { outline: 2px solid var(--primary-color, #38b1ed); outline-offset: -2px; }
html.new-ui body .nui-tabbar.nui-flat .nui-tab-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; background: rgba(255, 255, 255, .08); }
html.new-ui body .nui-tabbar.nui-flat a.wbn-item.active .nui-tab-av { box-shadow: 0 0 0 2px rgba(13, 30, 58, 1), 0 0 0 3.5px var(--primary-color, #38b1ed); }
/* Mode terminal : mêmes couleurs que le reste du thème (fond noir, accent vert via --primary-color). */
html.new-ui body.terminal-mode .nui-tabbar.nui-flat { background: rgba(7, 12, 18, .97); border-top-color: rgba(0, 255, 157, .14); }
html.new-ui body.terminal-mode .nui-tabbar.nui-flat a.wbn-item { color: var(--text-muted, #3d6e52); }
html.new-ui body.terminal-mode .nui-tabbar.nui-flat a.wbn-item.active { color: var(--primary-color); }
html.new-ui body.terminal-mode .nui-tabbar.nui-flat a.wbn-item.active .nui-tab-av { box-shadow: 0 0 0 2px #070c12, 0 0 0 3.5px var(--primary-color); }

/* ---------------- Pages de la nouvelle interface (tools, help, me) */
.nui-page { max-width: 1080px; margin: 0 auto; padding: 28px 20px 48px; font-family: 'Poppins', Arial, sans-serif; color: var(--text-secondary); }
.nui-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.nui-head h1 { margin: 0; color: var(--text-light); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.nui-head p { margin: 4px 0 0; color: var(--text-muted); font-size: .9rem; }
.nui-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); white-space: nowrap; line-height: 1.3; }
.nui-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nui-chip.plain::before { display: none; }
.nui-chip.ok { color: #34d399; background: rgba(16, 185, 129, 0.14); }
.nui-chip.new { color: var(--primary-color); background: rgba(56, 177, 237, 0.14); }
.nui-chip.off { color: var(--text-muted); }
.nui-chip.loading { color: transparent; background: linear-gradient(90deg, hsl(217 38% 15%) 0%, hsl(217 30% 22%) 50%, hsl(217 38% 15%) 100%); background-size: 200% 100%; animation: nui-shimmer 1.3s linear infinite; min-width: 80px; }
.nui-chip.loading::before { display: none; }
@keyframes nui-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .nui-chip.loading { animation: none; } }

/* Bouton : reprise de .uidlg-btn (ui-dialogs.js) */
.nui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: var(--text-light); font: 600 .85rem 'Poppins', Arial, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .15s ease; }
.nui-btn:hover { background: rgba(255, 255, 255, 0.09); }
.nui-btn.primary { background: linear-gradient(135deg, var(--primary-color, #38b1ed), var(--primary-dark, #2d95cc)); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -6px rgba(56, 177, 237, 0.6); }
.nui-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(56, 177, 237, 0.75); filter: brightness(1.06); }
.nui-btn:focus-visible, .nui-row:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
@media (max-width: 650px) { .nui-btn { height: 42px; } }

/* Tools : grille régulière, 3 colonnes */
.nui-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .nui-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nui-tools { grid-template-columns: 1fr; } }
.nui-tool { background: var(--nui-card); border: 1px solid var(--nui-card-line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: border-color .15s ease; }
.nui-tool:hover { border-color: rgba(56, 177, 237, 0.35); }
.nui-tool-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nui-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(56, 177, 237, 0.14); color: var(--primary-color); display: grid; place-content: center; flex: 0 0 38px; }
.nui-ico .wi { width: 20px; height: 20px; }
.nui-cat { font-size: .68rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--nui-section); font-weight: 600; }
.nui-tool h2 { margin: 2px 0 0; color: var(--text-light); font-size: 1.02rem; font-weight: 600; }
.nui-tool p { margin: 0; flex: 1; font-size: .86rem; line-height: 1.5; }
.nui-tool-foot { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.nui-addr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .78rem; color: var(--text-secondary); background: rgba(0, 0, 0, 0.2); padding: 1px 7px; border-radius: 5px; }

/* Listes de réglages (Me, Help sur téléphone) : même principe que l'onglet Me du prototype */
.nui-group { margin-top: 18px; }
.nui-group-title { font-size: .74rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--nui-section); font-weight: 600; padding: 0 4px 7px; }
.nui-list { background: var(--nui-card); border: 1px solid var(--nui-card-line); border-radius: 14px; overflow: hidden; }
.nui-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-light); text-decoration: none; font-size: .92rem; font-weight: 500; }
.nui-row:last-child { border-bottom: 0; }
.nui-row:hover { background: rgba(255, 255, 255, 0.04); }
.nui-row .nui-ico { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }
.nui-row .nui-ico .wi { width: 17px; height: 17px; }
.nui-row .nui-sub { display: block; font-size: .78rem; color: var(--text-muted); font-weight: 400; }
.nui-row .nui-end { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .82rem; font-weight: 400; }
.nui-row .nui-end .wi { width: 15px; height: 15px; }
.nui-row.danger { color: #ff7b7b; justify-content: center; }
.nui-row.upgrade { background: linear-gradient(135deg, rgba(56, 177, 237, 0.22), rgba(56, 177, 237, 0.06)); }
.nui-row.upgrade .nui-ico { background: linear-gradient(135deg, var(--primary-color, #38b1ed), var(--primary-dark, #2d95cc)); color: #fff; }
/* En-tête de profil (nui-kit.js profileHead) : Me sur téléphone, Account partout. Avatar avec son cadre
   (.wc-av[data-frame], styles/cosmetics.css) et badges équipés à côté du nom. */
.nui-me-head, .nui-prof { display: flex; gap: 14px; align-items: center; }
.nui-prof { font-family: 'Poppins', Arial, sans-serif; text-align: start; }
.nui-prof-avwrap { flex: 0 0 auto; display: inline-flex; padding: 4px; }
.nui-prof .nui-prof-av, .nui-me-head > img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; background: rgba(255, 255, 255, 0.06); }
.nui-prof-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.nui-prof-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.nui-prof-name b { color: var(--text-light); font-size: 1.12rem; font-weight: 600; overflow-wrap: anywhere; }
.nui-prof-name .wc-badges { margin-inline-start: 0; }
.nui-prof-mail { font-size: .84rem; color: var(--text-muted); overflow-wrap: anywhere; }
/* Account (ordinateur et téléphone, liste de base) : l'en-tête au-dessus de l'accordéon, en carte. */
html.new-ui .account-details > .nui-prof { background: var(--nui-card); border: 1px solid var(--nui-card-line); border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; }
html.new-ui body.nui-acct-detail .account-details > .nui-prof { display: none; }

/* Boutons des stores (nui-kit.js storeBadges) : badges sombres arrondis, logo officiel + deux lignes. */
.nui-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.nui-store { display: inline-flex; align-items: center; gap: 10px; min-width: 168px; height: 50px; padding: 0 16px 0 12px; box-sizing: border-box;
    border-radius: 12px; background: #000; border: 1px solid rgba(255, 255, 255, 0.28); color: #fff !important; text-decoration: none;
    font-family: 'Poppins', Arial, sans-serif; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.nui-store:hover { border-color: rgba(56, 177, 237, 0.75); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(56, 177, 237, 0.55); }
.nui-store:focus-visible { outline: 2px solid var(--primary-color, #38b1ed); outline-offset: 2px; }
.nui-store-logo { width: 26px; height: 26px; flex: 0 0 26px; display: block; }
.nui-store-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: start; }
.nui-store-txt small { font-size: .64rem; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, 0.85); }
.nui-store-txt b { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.nui-stores.compact .nui-store { height: 44px; min-width: 150px; }
.nui-stores.compact .nui-store-txt b { font-size: .95rem; }
@media (max-width: 400px) { .nui-stores { display: grid; grid-template-columns: 1fr; } .nui-store { width: 100%; } }
.nui-me-app p { flex: 0 0 auto; }
body.terminal-mode .nui-store { background: #070c12; border-color: rgba(0, 255, 157, 0.3); }
@media (prefers-reduced-motion: reduce) { .nui-store { transition: none; } .nui-store:hover { transform: none; } }

/* Help : trois cartes sur ordinateur, liste sur téléphone */
.nui-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .nui-help { grid-template-columns: 1fr; } }

/* ---------------- Page Servers (nouvelle interface) : boutons écrits + menu ⋯ */
/* Les raccourcis de la barre d'outils ont rejoint Tools (sous-domaine, Bot Builder, état réseau) et la
   barre du haut (Upgrade). #subdomain-btn reste dans le DOM : le menu ⋯ s'en sert pour ouvrir la fenêtre. */
html.new-ui #subdomain-btn, html.new-ui #bfs-toolbar-btn, html.new-ui #resources-btn, html.new-ui #shop-btn { display: none !important; }
/* Chaque ligne du tableau est son propre display:table à largeurs fixes (servers.css) : on ne peut pas
   « rétrécir au contenu ». La colonne des actions reçoit donc une largeur fixe, en-tête compris, et les
   boutons ne passent jamais à la ligne. */
html.new-ui .server-actions-cell { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; }
html.new-ui .server-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
html.new-ui #servers-table th:last-child, html.new-ui #servers-table td:last-child { width: 330px; text-align: end; }
html.new-ui .server-actions-cell .nui-btn, html.new-ui .server-card-actions .nui-btn { height: 34px; padding: 0 13px; font-size: .82rem; width: auto; }
html.new-ui .nui-btn .wi { width: 16px; height: 16px; }
html.new-ui .nui-more { position: relative; }
html.new-ui .nui-more-btn { width: 40px; padding: 0 !important; }
html.new-ui .nui-more-btn .wi { width: 22px; height: 22px; }
/* Bouton « Manage bot » ajouté par botforge-servers.js : même gabarit, avec son libellé. */
html.new-ui .bfs-manage-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: var(--text-light); font: 600 .82rem 'Poppins', Arial, sans-serif; cursor: pointer; width: auto; }
html.new-ui .bfs-manage-btn::after { content: "Edit bot"; }
html.new-ui .bfs-manage-btn svg { width: 16px; height: 16px; }

.nui-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 250px; padding: 6px; border-radius: 14px; background: linear-gradient(165deg, hsl(217 32% 25%), hsl(217 38% 17%)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 60px -12px rgba(1, 4, 12, 0.65); text-align: left; white-space: normal; }
.nui-menu-pop[hidden] { display: none; }
.nui-pop-head { padding: 8px 10px 9px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: var(--text-light); font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nui-menu-pop .nui-pop-item { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--text-secondary); font-family: 'Poppins', Arial, sans-serif; }
.nui-menu-pop .nui-pop-item:hover, .nui-menu-pop .nui-pop-item:focus-visible { background: rgba(255, 255, 255, 0.06); }
.nui-menu-pop .nui-pop-item:focus-visible { outline: 2px solid rgba(56, 177, 237, 0.5); outline-offset: -2px; }
.nui-menu-pop .nui-pop-item .wi { width: 18px; height: 18px; flex: 0 0 18px; color: var(--primary-color); }
.nui-menu-pop .nui-pop-item b { display: block; color: var(--text-light); font-size: .86rem; font-weight: 600; }
.nui-menu-pop .nui-pop-item small { display: block; color: var(--text-muted); font-size: .74rem; overflow-wrap: anywhere; }
.nui-menu-pop .nui-pop-item.danger .wi, .nui-menu-pop .nui-pop-item.danger b { color: #ff7b7b; }
.nui-menu-pop .nui-pop-item img { display: none; }

/* Téléphone : le menu ⋯ devient une feuille d'actions en bas de l'écran, au-dessus de la barre d'onglets. */
@media (max-width: 650px) {
    html.new-ui #view-switch { display: none !important; } /* téléphone : toujours les cartes (servers.js resolveViewMode) */
    html.new-ui .server-card-actions { display: grid; grid-template-columns: 1fr 1fr auto; }
    html.new-ui .server-card-actions .nui-btn { height: 42px; justify-content: center; }
    html.new-ui .nui-more-btn { width: 48px; }
    html.new-ui .bfs-manage-btn { height: 42px; justify-content: center; grid-column: 1 / -1; }
    .nui-menu-pop { position: fixed; left: 0; right: 0; top: auto; bottom: 0; min-width: 0; border-radius: 22px 22px 0 0; padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); z-index: 10001; max-height: 75vh; overflow-y: auto; }
    .nui-menu-pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); margin: 0 auto 8px; }
    .nui-menu-pop .nui-pop-item { padding: 12px 10px; }
    body.nui-pop-open::after { content: ""; position: fixed; inset: 0; background: rgba(3, 7, 20, 0.55); backdrop-filter: blur(4px); z-index: 10000; }
}

/* ---------------- Écran d'un serveur (scripts/server-view.js), dans la page Servers */
body.nui-view-open .container > :not(#nui-server-view) { display: none !important; }
.nui-sv { font-family: 'Poppins', Arial, sans-serif; color: var(--text-secondary); text-align: start; }
.nui-sv-loading { padding: 40px 0; }
.nui-crumb { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--text-muted); margin-bottom: 10px; }
.nui-crumb a { color: var(--text-muted); text-decoration: none; }
.nui-crumb a:hover { color: var(--text-light); }
.nui-sv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.nui-sv-title h1 { margin: 0; color: var(--text-light); font-size: 1.45rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.nui-sv-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; font-size: .82rem; color: var(--text-muted); }
.nui-sv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nui-sv-actions .nui-btn .wi, .nui-sv .nui-btn .wi { width: 16px; height: 16px; }
.nui-chip.bad { color: #ff7b7b; background: rgba(239, 68, 68, 0.14); }
.nui-chip.warn { color: #f59e0b; background: rgba(245, 158, 11, 0.13); }
.nui-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin: 18px 0; overflow-x: auto; scrollbar-width: none; }
.nui-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 10px 14px; cursor: pointer; font: 500 .9rem 'Poppins', Arial, sans-serif; white-space: nowrap; border-radius: 6px 6px 0 0; }
.nui-tabs button:hover { color: var(--text-light); background: rgba(255, 255, 255, 0.05); }
.nui-tabs button.on { color: var(--text-light); border-bottom-color: var(--primary-color); }
.nui-tabs button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
.nui-sv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.nui-sv .nui-tool h2 { margin-bottom: 4px; }
.nui-sv .nui-tool.danger { border-color: rgba(239, 68, 68, 0.32); }
.nui-sv .nui-tool.danger h2 { color: #ff9a9a; }
.nui-kv { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: .875rem; }
.nui-kv:last-of-type { border-bottom: 0; }
.nui-kv-l { color: var(--nui-label); font-weight: 500; font-size: .875rem; }
.nui-kv-v { color: var(--text-light); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.nui-kv-v a, .nui-sv p a { color: var(--primary-color); }
.nui-hint { font-size: .8rem; color: var(--text-muted); margin: 8px 0 0; line-height: 1.5; }
.nui-alert { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .85rem; border: 1px solid; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.45; }
.nui-alert > .wi { width: 18px; height: 18px; flex: 0 0 18px; }
.nui-alert > span { flex: 1; min-width: 180px; }
.nui-alert b { display: block; color: var(--text-light); }
.nui-alert.warn { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.32); }
.nui-alert.warn > .wi { color: #f59e0b; }
.nui-input { height: 38px; flex: 1; min-width: 0; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: var(--text-light); font: 500 .9rem 'Poppins', Arial, sans-serif; }
.nui-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(56, 177, 237, 0.35); }
.nui-inline { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.nui-btn.danger { color: #ff7b7b; border-color: rgba(239, 68, 68, 0.45); background: transparent; }
.nui-btn.danger:hover { background: rgba(239, 68, 68, 0.12); }
@media (max-width: 650px) {
    .nui-sv-actions { width: 100%; }
    .nui-sv-actions .nui-btn { flex: 1; }
    .nui-kv { grid-template-columns: 1fr; gap: 2px; }
    .nui-input { height: 44px; font-size: 1rem; }
}

/* ---------------- Page Account sur téléphone (≤650px, scripts/new-ui.js) : présentation de l'onglet Me.
   Liste de lignes (comme .nui-row) au lieu de l'accordéon ; un toucher ouvre la section seule
   (body.nui-acct-detail + .nui-acct-cur). Sur ordinateur rien ne change : tout est sous body.nui-narrow. */
.nui-acct-back, .nui-acct-gt, .nui-acct-ico { display: none; }
html.new-ui body.nui-narrow .account-details { text-align: start; font-family: 'Poppins', Arial, sans-serif; }
html.new-ui body.nui-narrow .account-details > h1 { font-size: 1.3rem; font-weight: 600; color: var(--text-light); margin: 0 0 2px; }
html.new-ui body.nui-narrow .account-info { gap: 0; }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .nui-acct-gt { display: block; font-size: .74rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--nui-section); font-weight: 600; padding: 18px 4px 7px; }
/* Liste : une carte par groupe (Profile → Preferences, Plan → Your data, Danger zone seule). */
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section,
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section[open] {
    background: var(--nui-card); border: 1px solid var(--nui-card-line); border-top-color: rgba(255, 255, 255, 0.06); border-top-width: 0; border-radius: 0;
}
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > #sect-profile,
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > #sect-plan,
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > #sect-danger { border-top-width: 1px; border-top-color: var(--nui-card-line); border-top-left-radius: 14px; border-top-right-radius: 14px; }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > #sect-preferences,
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > #sect-data-export,
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > #sect-danger { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > #sect-danger { margin-top: 18px; border-color: rgba(239, 68, 68, 0.32); }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section > .acct-body { display: none; }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section > .acct-summary { min-height: 52px; padding: 8px 14px; gap: 12px; box-sizing: border-box; }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section > .acct-summary::before { display: none; }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section > .acct-summary:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
html.new-ui body.nui-narrow .account-info > .acct-section > .acct-summary > .nui-acct-ico { display: grid; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }
html.new-ui body.nui-narrow .nui-acct-ico .wi { width: 17px; height: 17px; }
html.new-ui body.nui-narrow #sect-danger .nui-acct-ico { color: #ff7b7b; background: rgba(239, 68, 68, 0.12); }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section .acct-section-name { text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 500; color: var(--text-light); }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > #sect-danger .acct-section-name { color: #ff7b7b; }
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section > .acct-summary > .acct-glance { opacity: 1; max-width: 48%; font-size: .82rem; color: var(--text-muted); }
/* Chevron « › » en bout de ligne, quel que soit l'état d'ouverture mémorisé par account.js. */
html.new-ui body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section > summary > .acct-chevron { order: 9; width: 7px; height: 7px; margin-inline-start: 2px; border-color: var(--text-muted); transform: rotate(-45deg); }
html.new-ui[dir="rtl"] body.nui-narrow:not(.nui-acct-detail) .account-info > .acct-section > summary > .acct-chevron { transform: rotate(45deg); }
/* Écran d'une section */
html.new-ui body.nui-narrow.nui-acct-detail .account-details > h1,
html.new-ui body.nui-narrow.nui-acct-detail .account-info > .acct-section:not(.nui-acct-cur),
html.new-ui body.nui-narrow.nui-acct-detail .app-icon-section { display: none !important; }
html.new-ui body.nui-narrow.nui-acct-detail .nui-acct-back { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
html.new-ui body.nui-narrow .nui-acct-back .nui-btn { height: 36px; padding: 0 12px 0 8px; }
html.new-ui body.nui-narrow .nui-acct-back .nui-back-ico { width: 18px; height: 18px; }
html.new-ui body.nui-narrow .nui-acct-back h2 { flex-basis: 100%; margin: 0; color: var(--text-light); font-size: 1.3rem; font-weight: 600; outline: none; }
html.new-ui body.nui-narrow.nui-acct-detail .account-info > .nui-acct-cur { border-radius: 14px; background: var(--nui-card); border-color: var(--nui-card-line); }
html.new-ui body.nui-narrow.nui-acct-detail .account-info > .nui-acct-cur.acct-danger { border-color: rgba(239, 68, 68, 0.4); }
html.new-ui body.nui-narrow.nui-acct-detail .account-info > .nui-acct-cur > .acct-summary { display: none; }
html.new-ui body.nui-narrow.nui-acct-detail .account-info > .nui-acct-cur > .acct-body { border-top: 0; margin-top: 0; padding: 4px 14px 14px; animation: none; }
/* Sous-sections (Security, Preferences) : lignes de réglage, l'accordéon d'account.js reste. */
html.new-ui body.nui-narrow.nui-acct-detail .acct-subsummary { min-height: 48px; box-sizing: border-box; padding: 10px 0; }
html.new-ui body.nui-narrow.nui-acct-detail .acct-subsection-name { font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--text-light); white-space: normal; }
html.new-ui body.nui-narrow.nui-acct-detail .acct-subsummary:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
html.new-ui body.nui-narrow.nui-acct-detail .acct-actions button,
html.new-ui body.nui-narrow.nui-acct-detail .acct-actions .btn { min-height: 42px; }
/* Mode terminal : les cartes prennent les surfaces du thème. */
html.new-ui body.terminal-mode.nui-narrow .account-info > .acct-section { background: #0c1520; border-color: rgba(0, 255, 157, 0.12); }
html.new-ui body.terminal-mode.nui-narrow .account-info > .acct-section .acct-section-name { color: var(--text-light); }
html.new-ui body.terminal-mode.nui-narrow .nui-acct-ico { background: rgba(0, 255, 157, 0.08); color: var(--primary-color); }

/* ---------------- Support en plein écran (scripts/support-full.js) : la fenêtre de ticket.js agrandie.
   Sélecteurs plus forts que ceux de ticket.css, y compris body.wbn-active #ticket-widget .chat-window.open. */
html.nui-support-full { overflow: hidden; }
html.new-ui #ticket-widget button:focus-visible,
html.new-ui #ticket-widget textarea:focus-visible,
html.new-ui #ticket-widget input:focus-visible,
html.new-ui #ticket-widget .conversation-item:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; }
#ticket-widget .nui-full-empty { display: none; } /* plus fort que « #ticket-widget div » de ticket.css */
html.nui-support-full #ticket-widget.nui-full::before { content: ""; position: fixed; inset: 0; z-index: 10040; background: rgba(3, 7, 20, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.nui-support-full body #ticket-widget.nui-full .chat-toggle-btn { display: none; }
html.nui-support-full body #ticket-widget.nui-full .chat-window,
html.nui-support-full body #ticket-widget.nui-full .chat-window.open {
    z-index: 10041;
    top: 24px; bottom: 24px; left: 50%; right: auto;
    width: min(1180px, calc(100vw - 48px)); max-width: none;
    height: auto; min-height: 0; max-height: none;
    transform: translateX(-50%);
    border-radius: 14px;
}
html.nui-support-full body #ticket-widget.nui-full .chat-header { cursor: default; }
html.nui-support-full body #ticket-widget.nui-full .chat-messages { padding: 18px 22px; }

/* Ordinateur : liste des conversations à gauche, fil à droite (compte connecté seulement). */
@media (min-width: 651px) {
    html.nui-support-full body #ticket-widget.nui-full.nui-full-list .chat-window.open {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    }
    #ticket-widget.nui-full.nui-full-list .chat-header { grid-column: 1 / -1; grid-row: 1; }
    #ticket-widget.nui-full.nui-full-list #conversationList {
        display: flex !important; grid-column: 1; grid-row: 2 / 7; min-height: 0;
        border-inline-end: 1px solid var(--chat-border); background: rgba(0, 0, 0, 0.12);
    }
    #ticket-widget.nui-full.nui-full-list #emailPrompt,
    #ticket-widget.nui-full.nui-full-list #codeVerifyPrompt,
    #ticket-widget.nui-full.nui-full-list #chat,
    #ticket-widget.nui-full.nui-full-list .nui-full-empty { grid-column: 2; grid-row: 2; min-height: 0; }
    #ticket-widget.nui-full.nui-full-list #typingIndicatorContainer { grid-column: 2; grid-row: 3; }
    #ticket-widget.nui-full.nui-full-list #filePreview { grid-column: 2; grid-row: 4; }
    #ticket-widget.nui-full.nui-full-list #askForm { grid-column: 2; grid-row: 5; }
    #ticket-widget.nui-full.nui-full-list .chat-footer { grid-column: 2; grid-row: 6; }
    #ticket-widget.nui-full.nui-full-list #backToListBtn { display: none !important; }
    #ticket-widget.nui-full.nui-full-list #chat[style*="none"] ~ .nui-full-empty {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
        padding: 24px; text-align: center; color: var(--chat-text-muted);
    }
    #ticket-widget .nui-full-empty .nui-full-empty-title { display: block; color: var(--chat-text); font-weight: 600; font-size: 1.05rem; }
    #ticket-widget .nui-full-empty .nui-full-empty-text { display: block; max-width: 40ch; font-size: .9rem; line-height: 1.5; }
    #ticket-widget .nui-full-empty .nui-full-new {
        display: inline-flex; align-items: center; height: 38px; padding: 0 16px; margin-top: 6px; border-radius: 10px; cursor: pointer;
        background: linear-gradient(135deg, var(--chat-primary), var(--chat-primary-dark)); color: #fff; font-weight: 600; font-size: .88rem;
    }
    #ticket-widget.nui-full .conversation-item.nui-on { background: rgba(56, 177, 237, 0.14); box-shadow: inset 3px 0 0 var(--chat-primary); }
}
/* Téléphone : plein écran au-dessus de la barre d'onglets ; la liste et le fil alternent comme dans la bulle. */
@media (max-width: 650px) {
    html.nui-support-full body #ticket-widget.nui-full .chat-window,
    html.nui-support-full body #ticket-widget.nui-full .chat-window.open {
        top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; transform: none; border-radius: 0; border: 0;
    }
    html.nui-support-full body #ticket-widget.nui-full .chat-header { padding-top: calc(14px + env(safe-area-inset-top)); }
    html.nui-support-full body #ticket-widget.nui-full .chat-input-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ---------------- Finitions : clavier, 360 px, mode terminal */
html.new-ui #user-avatar:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; border-radius: 50%; }
html.new-ui .nui-tabbar a.wbn-item:focus-visible { outline: 2px solid var(--primary-color, #38b1ed); outline-offset: -2px; border-radius: 10px; }
html.new-ui #user-submenu .nav-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; border-radius: 9px; }
.nui-page a:focus-visible, .nui-sv a:focus-visible, .nui-acct-back .nui-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
/* Rien ne doit déborder à 360 px : textes longs (e-mail, adresses, noms) coupés au besoin. */
.nui-row > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.nui-sv-meta .nui-addr, .nui-kv .nui-addr { overflow-wrap: anywhere; }
@media (max-width: 400px) {
    .nui-page { padding: 18px 14px 32px; }
    .nui-sv-actions .nui-btn { padding: 0 10px; }
}
/* Mode terminal : les surfaces et accents de la nouvelle interface suivent le thème (fond noir, vert). */
body.terminal-mode { --nui-card: #0c1520; --nui-card-line: rgba(0, 255, 157, 0.12); --nui-label: #5fae86; --nui-section: var(--primary-color); }
body.terminal-mode .nui-ico { background: rgba(0, 255, 157, 0.1); color: var(--primary-color); }
body.terminal-mode .nui-btn { border-color: rgba(0, 255, 157, 0.3); }
body.terminal-mode .nui-btn.primary { background: transparent; color: var(--primary-color); border-color: var(--primary-color); box-shadow: none; }
body.terminal-mode .nui-btn.primary:hover { background: rgba(0, 255, 157, 0.1); transform: none; box-shadow: none; }
body.terminal-mode .nui-chip.new { color: var(--primary-color); background: rgba(0, 255, 157, 0.1); }
body.terminal-mode .nui-row.upgrade { background: rgba(0, 255, 157, 0.08); }
body.terminal-mode .nui-row.upgrade .nui-ico { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); }
body.terminal-mode .nui-list a.nui-row:not(.danger):not(.upgrade) { color: var(--text-light); }
body.terminal-mode .nui-list a.nui-row.danger:not(.upgrade) { color: #ff7b7b; }
html.new-ui body.terminal-mode #user-submenu.nui-menu,
body.terminal-mode .nui-menu-pop { background: #0c1520; border-color: rgba(0, 255, 157, 0.18); }
body.terminal-mode .nui-tabs button.on { border-bottom-color: var(--primary-color); }

/* =====================================================================================================
   Compléments (bêta new_ui) : accueil, fil d'Ariane des sous-pages, habillage des pages existantes,
   téléphone. Tout est sous html.new-ui (posé par navbar.js seulement quand le flag est actif) ou sur des
   classes nui-* que seuls les scripts de la nouvelle interface créent.
   ===================================================================================================== */

/* ---------------- Petites pièces communes */
.nui-chev { width: 14px; height: 14px; flex: 0 0 auto; }
/* Chevrons (nui-kit.js) : tracés vers la droite, retournés en RTL. */
html[dir="rtl"] .nui-chev, html[dir="rtl"] .nui-back-ico { transform: scaleX(-1); }
.nui-alert.bad { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.35); }
.nui-alert.bad > .wi { color: #ef4444; }
.nui-alert.ok { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.32); }
.nui-alert.ok > .wi { color: #10b981; }
.nui-alert .nui-btn { height: 34px; padding: 0 13px; font-size: .82rem; }
.nui-btn-icon { width: 36px; padding: 0; }
.nui-btn[disabled] { opacity: .6; cursor: default; }
.nui-spin .wi { animation: nui-rot .8s linear infinite; }
@keyframes nui-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nui-spin .wi { animation: none; } }
@media (max-width: 650px) {
    .nui-btn-icon { width: 42px; }
    .nui-sv-actions .nui-btn.nui-btn-icon { flex: 0 0 42px; }
    .nui-alert .nui-btn { height: 40px; }
}

/* Fil d'Ariane des sous-pages (new-ui.js addCrumb) : « Tools / Bot Builder ». Les pages « Me » ne l'ont
   que sur téléphone ; dans l'écran d'une section du compte, le bouton retour suffit. */
.nui-page-crumb { font-family: 'Poppins', Arial, sans-serif; text-align: start; margin: 0 0 12px; flex-wrap: wrap; }
.nui-page-crumb span[aria-current] { color: var(--text-secondary); }
html.new-ui body:not(.nui-narrow) .nui-crumb-me,
html.new-ui body.nui-acct-detail .nui-page-crumb { display: none; }
/* Bot Builder : son lien « ‹ Servers » fait doublon avec le fil « Tools / Bot Builder ». */
html.new-ui .bf-back { display: none; }

/* ---------------- Accueil (scripts/nui-home.js) */
html.nui-home-on main.container > .module { display: none !important; }
html.nui-home-on main.container { max-width: 1120px; }
.nui-home.nui-page { padding: 8px 0 32px; max-width: none; }
.nui-home-grid, .nui-home-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.nui-stat { text-decoration: none; color: inherit; gap: 2px; justify-content: center; }
a.nui-stat:hover { border-color: rgba(56, 177, 237, 0.35); }
.nui-stat b { display: block; font-size: 1.7rem; color: var(--text-light); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.nui-stat > span { font-size: .8rem; color: var(--text-muted); }
.nui-bar { display: block; height: 5px; border-radius: 99px; background: rgba(0, 0, 0, 0.25); overflow: hidden; margin-top: 8px; }
.nui-bar[hidden] { display: none; }
.nui-bar i { display: block; height: 100%; background: var(--primary-color, #38b1ed); border-radius: 99px; transition: width .4s ease; }
.nui-plan { background: linear-gradient(135deg, rgba(56, 177, 237, 0.18), rgba(56, 177, 237, 0.04) 70%); border-color: rgba(56, 177, 237, 0.35); }
.nui-plan[hidden] { display: none; }
.nui-plan .nui-tool-foot { border-top: 0; padding-top: 0; }
.nui-home .nui-group-title { margin: 24px 0 0; padding: 0 2px 10px; }
.nui-group-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.nui-more-link { color: var(--primary-color); font-weight: 600; font-size: .8rem; text-decoration: none; display: inline-flex; gap: 3px; align-items: center; }
.nui-home-attn { display: flex; flex-direction: column; gap: 10px; }
.nui-home-attn .nui-alert { margin: 0; }
.nui-home-attn .nui-alert span[data-i18n-skip] { display: inline; color: inherit; }
.nui-quick { display: flex; gap: 12px; align-items: center; min-width: 0; background: var(--nui-card); border: 1px solid var(--nui-card-line); border-radius: 14px; padding: 12px 14px; color: inherit; text-decoration: none; transition: border-color .15s ease; }
.nui-quick:hover { border-color: rgba(56, 177, 237, 0.45); }
.nui-quick:focus-visible, .nui-stat:focus-visible, .nui-more-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.nui-quick-txt { min-width: 0; display: flex; flex-direction: column; }
.nui-quick-txt b { color: var(--text-light); font-size: .88rem; font-weight: 600; }
.nui-quick-txt span { font-size: .76rem; color: var(--text-muted); overflow-wrap: anywhere; }
.nui-quick > .nui-chev { margin-inline-start: auto; width: 18px; height: 18px; color: var(--text-muted); }
.nui-home-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
@media (max-width: 860px) { .nui-home-cols { grid-template-columns: minmax(0, 1fr); } }
/* Liste des notifications de home.js, déplacée telle quelle dans la carte */
.nui-home-notifs { padding-top: 4px; padding-bottom: 4px; }
.nui-home-notifs #notification-list { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
.nui-home-notifs #notification-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 0; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: .84rem; line-height: 1.5; background: none; }
.nui-home-notifs #notification-list li:last-child { border-bottom: 0; }
.nui-home-notifs #notification-list .title { color: var(--text-light); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.nui-home-notifs #notification-list .date { color: var(--text-muted); font-size: .74rem; white-space: nowrap; }
.nui-home-notifs #notification-list .message { grid-column: 1 / -1; color: var(--text-secondary); overflow-wrap: anywhere; }
.nui-home-notifs #notification-list a { color: var(--primary-color); }
.nui-home-help p { margin: 0; }
.nui-home-help .nui-inline { margin-top: 0; }
.nui-home-links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .85rem; }
.nui-home-links li { display: flex; gap: 9px; align-items: center; min-width: 0; }
.nui-home-links .wi { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 16px; }
.nui-home-links a { color: var(--primary-color); overflow-wrap: anywhere; }
.nui-home-apps { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .82rem; }
.nui-home-apps .nui-hint { margin: 0; flex-basis: 100%; }
@media (max-width: 650px) {
    html.nui-home-on main.container { padding: 12px 14px; margin-top: 0; }
    .nui-home .nui-head h1 { font-size: 1.25rem; }
    .nui-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .nui-home-grid .nui-plan { grid-column: 1 / -1; }
    .nui-home-grid .nui-stat { padding: 14px; }
    .nui-stat b { font-size: 1.45rem; }
    .nui-home-quick { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ---------------- Liste des serveurs : en-tête « Servers · X of Y slots used » (server-view.js) */
.nui-srv-head { text-align: start; margin: 4px 0 16px; font-family: 'Poppins', Arial, sans-serif; }

/* ---------------- Habillage des pages existantes (même logique, autre présentation) */
/* En-têtes : à gauche, Poppins 600, comme .nui-head ; plus de grandes marges sous une barre qui n'est plus là. */
html.new-ui .billing-container { margin-top: 24px; }
html.new-ui .billing-header { text-align: start; margin-bottom: 20px; }
html.new-ui .billing-header h2 { display: flex; align-items: center; gap: 10px; font: 600 1.5rem/1.2 'Poppins', Arial, sans-serif; color: var(--text-light); margin: 0 0 4px; }
html.new-ui .billing-header h2 .wi, html.new-ui .billing-header h2 svg { width: 22px; height: 22px; color: var(--primary-color); margin: 0 !important; }
html.new-ui .billing-header p { font-size: .9rem; color: var(--text-muted); margin: 0; }
/* Onglets Billing : ceux de l'écran serveur (.nui-tabs), en ligne et défilants sur téléphone au lieu d'une colonne. */
html.new-ui .billing-container .tabs { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 2px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow-x: auto; scrollbar-width: none; }
html.new-ui .billing-container .tabs::-webkit-scrollbar { display: none; }
html.new-ui .billing-container .tab { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; color: var(--text-muted); font: 500 .9rem 'Poppins', Arial, sans-serif; white-space: nowrap; text-align: start; }
html.new-ui .billing-container .tab:hover { color: var(--text-light); background: rgba(255, 255, 255, 0.05); }
html.new-ui .billing-container .tab.active { color: var(--text-light); border-bottom-color: var(--primary-color); border-inline-start-color: transparent; }
html.new-ui .billing-container .tab .wi { width: 16px; height: 16px; }
html.new-ui .billing-container .tab:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
/* Cartes et boutons : ceux des pages de la nouvelle interface (.nui-tool, .nui-btn). */
html.new-ui .billing-container .subscription-card,
html.new-ui .billing-container .referral-stat-card { background: var(--nui-card); border: 1px solid var(--nui-card-line); border-radius: 14px; }
html.new-ui .billing-container .subscription-card { padding: 18px 20px; }
html.new-ui .billing-container .subscription-card:hover,
html.new-ui .billing-container .referral-stat-card:hover { transform: none; box-shadow: none; border-color: rgba(56, 177, 237, 0.35); }
html.new-ui .billing-container .referral-code-card { border-radius: 14px; }
html.new-ui .billing-container .btn { min-height: 38px; padding: 0 16px; border-radius: 10px; font: 600 .85rem 'Poppins', Arial, sans-serif; background: linear-gradient(135deg, var(--primary-color, #38b1ed), var(--primary-dark, #2d95cc)); color: #fff; box-shadow: 0 8px 20px -6px rgba(56, 177, 237, 0.6); }
html.new-ui .billing-container .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(56, 177, 237, 0.75); filter: brightness(1.06); }
html.new-ui .billing-container .btn.btn-secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text-light); box-shadow: none; }
html.new-ui .billing-container .btn.btn-secondary:hover { background: rgba(255, 255, 255, 0.09); transform: none; filter: none; }
html.new-ui .billing-container .btn.btn-danger { background: transparent; border: 1px solid rgba(239, 68, 68, 0.45); color: #ff7b7b; box-shadow: none; }
html.new-ui .billing-container .btn.btn-danger:hover { background: rgba(239, 68, 68, 0.12); color: #ff7b7b; transform: none; filter: none; }
html.new-ui .billing-container .btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
@media (max-width: 650px) {
    html.new-ui .billing-container { margin-top: 8px; padding: 0 2px; }
    html.new-ui .billing-header h2 { font-size: 1.25rem; }
    html.new-ui .billing-container .btn { min-height: 42px; }
    html.new-ui main.container:has(> .billing-container) { padding: 12px 14px; margin-top: 0; }
}

/* Account (ordinateur) : la page n'est plus une carte posée au milieu ; titre comme les autres pages. */
html.new-ui main:has(> .account-details) { background: transparent; box-shadow: none; border: 0; max-width: 860px; padding: 28px 20px 48px; }
html.new-ui .account-details { text-align: start; font-family: 'Poppins', Arial, sans-serif; }
html.new-ui .account-details > h1 { font-size: 1.5rem; font-weight: 600; color: var(--text-light); margin: 0 0 18px; }
@media (max-width: 650px) { html.new-ui main:has(> .account-details) { padding: 12px 14px 24px; margin-top: 0; } }

/* Support (formulaire), avis : mêmes titres à gauche. */
html.new-ui #contact-form h2 { text-align: start; font: 600 1.5rem/1.2 'Poppins', Arial, sans-serif; color: var(--text-light); margin-bottom: 8px; }
html.new-ui .opinion-container h1 { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; }
/* Communauté, GitLab, Bot Builder : titres au même gabarit. */
html.new-ui .community-header h1 { font: 600 1.5rem/1.2 'Poppins', Arial, sans-serif; }
html.new-ui .gl-head h1 { font: 600 1.5rem/1.2 'Poppins', Arial, sans-serif; color: var(--text-light); }
html.new-ui .bf-container { margin-top: 20px; }
/* Upgrade (shop) : bandeau d'en-tête moins haut, comme les autres pages. */
html.new-ui .header-section { padding: 40px 28px; margin: 20px 0 32px; }
@media (max-width: 650px) {
    html.new-ui .header-section { padding: 26px 16px; margin: 8px 0 22px; }
    html.new-ui .community-header h1, html.new-ui .gl-head h1 { font-size: 1.25rem; }
    html.new-ui #contact-form h2 { font-size: 1.25rem; }
}

/* ---------------- Téléphone, barre d'onglets plate : rien ne doit passer dessous */
/* Éléments fixés en bas qui ne suivaient pas --wbn-clear : décalés d'autant (marge basse d'un élément fixé). */
html.new-ui body.wbn-active #botforge-toast { bottom: calc(24px + var(--wbn-clear, 72px) + env(safe-area-inset-bottom)); }
html.new-ui body.wbn-active #waifly-chatbot { bottom: calc(20px + var(--wbn-clear, 72px) + env(safe-area-inset-bottom)); }
html.new-ui body.wbn-active .toggle-snow-btn,
html.new-ui body.wbn-active .toggle-halloween-btn,
html.new-ui body.wbn-active .toggle-ny-btn,
html.new-ui body.wbn-active .toggle-wc-btn,
html.new-ui body.wbn-active .toggle-easter-btn,
html.new-ui body.wbn-active .toggle-b3-btn,
html.new-ui body.wbn-active .wa-nt-fab,
html.new-ui body.wbn-active .wa-nt-invite,
html.new-ui body.wbn-active .wa-ads-pill,
html.new-ui body.wbn-active #client-test-banner { margin-bottom: var(--wbn-clear, 72px); }
/* Bot Builder : la barre « Suivant » de l'assistant colle au bas de l'écran (sticky) : au-dessus de la barre. */
html.new-ui body.wbn-active .bf-wizard-bar { bottom: calc(var(--wbn-clear, 72px) + env(safe-area-inset-bottom)); }
/* Upgrade : la feuille de paiement du téléphone passe au-dessus de la barre d'onglets (même z-index sinon,
   et la barre, ajoutée en dernier, cachait le bouton Payer). */
html.new-ui body.wbn-active .payment-backdrop { z-index: 598; }
html.new-ui body.wbn-active .payment-container.active { z-index: 599; }
/* Pas de défilement horizontal de la page à 360 px : la vue ne défile qu'en hauteur (les tableaux larges
   gardent leur propre défilement). clip ne crée pas de conteneur de défilement : position: sticky marche encore. */
html.new-ui body.nui-narrow { overflow-x: clip; }
html.new-ui body.nui-narrow img, html.new-ui body.nui-narrow video { max-width: 100%; }
/* Mode terminal : mêmes surfaces que le reste du thème pour les nouvelles pièces. */
body.terminal-mode .nui-plan { background: rgba(0, 255, 157, 0.06); border-color: rgba(0, 255, 157, 0.3); }
body.terminal-mode .nui-quick:hover, body.terminal-mode a.nui-stat:hover { border-color: rgba(0, 255, 157, 0.4); }
html.new-ui body.terminal-mode .billing-container .btn { background: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); box-shadow: none; }
html.new-ui body.terminal-mode .billing-container .btn:hover { background: rgba(0, 255, 157, 0.1); transform: none; box-shadow: none; filter: none; }
html.new-ui body.terminal-mode .billing-container .btn.btn-danger { color: #ff7b7b; border-color: rgba(239, 68, 68, 0.45); }
html.new-ui body.terminal-mode .billing-container .subscription-card,
html.new-ui body.terminal-mode .billing-container .referral-stat-card { background: #0c1520; border-color: rgba(0, 255, 157, 0.12); }

/* ---------------- Zone sûre du haut dans l'app (new-ui.js safeTop) : bande fixe sous la barre d'état.
   Hauteur 0 hors app et sur un écran sans encoche. Au-dessus des fenêtres (ui-dialogs 10000, support 10040). */
#nui-safe-top { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--nui-statusbar, var(--dark-bg, #0b1e3d)); z-index: 10060; pointer-events: none; }
body.terminal-mode #nui-safe-top { background: #070c12; }
/* Barre du haut (ordinateur / tablette dans l'app) collée en haut : elle garde déjà la zone dans son padding. */
html.new-ui.nui-app body:not(.nui-narrow) #main-nav { position: sticky; top: 0; z-index: 900; }
/* Fenêtres et feuilles plein écran : leur contenu commence sous la barre d'état. */
html.new-ui.nui-app .uidlg-overlay { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
html.new-ui.nui-app body.nui-narrow .nui-menu-pop { max-height: calc(75vh - env(safe-area-inset-top, 0px)); }
@media (max-width: 650px) {
    html.new-ui.nui-app body.nui-acct-detail .nui-acct-back { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--nui-statusbar, var(--dark-bg, #0b1e3d)); padding: 8px 0; margin-top: -8px; }
}

/* ---------------- Pages d'outils : en-tête commun (new-ui.js toolHead) */
.nui-th { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 16px; align-items: start; margin: 0 0 22px; font-family: 'Poppins', Arial, sans-serif; text-align: start; }
.nui-th-ico { width: 46px; height: 46px; flex-basis: 46px; border-radius: 12px; }
.nui-th-ico .wi, .nui-th-ico svg { width: 24px; height: 24px; }
.nui-th-txt h1 { margin: 0; color: var(--text-light); font: 600 1.5rem/1.2 'Poppins', Arial, sans-serif; }
.nui-th-txt p { margin: 4px 0 0; color: var(--text-muted); font-size: .9rem; line-height: 1.5; max-width: 62ch; }
.nui-th-state { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.nui-th-state .nui-chip[hidden] { display: none; }
.nui-th-state .bf-header-meta { display: contents; }
.nui-th-act { align-self: center; }
.nui-th-act .nui-btn .wi { width: 16px; height: 16px; }
@media (max-width: 650px) {
    .nui-th { grid-template-columns: auto minmax(0, 1fr); margin-bottom: 16px; }
    .nui-th-txt h1 { font-size: 1.25rem; }
    .nui-th-act { grid-column: 1 / -1; }
    .nui-th-act .nui-btn { width: 100%; }
}
/* Anciens titres des pages d'outils : remplacés par l'en-tête commun. */
body.nui-tool-botforge .bf-header, body.nui-tool-gitlab .gl-head, body.nui-tool-referral .billing-header { display: none !important; }
body.nui-tool-page .bf-header-meta .bf-chip { font-size: .72rem; padding: 3px 10px; border-radius: 999px; }

/* ---------------- Network status (nui-resources.js) : l'ancienne page masquée, une carte par nœud */
html.nui-res-on body > .container > :not(#nui-res):not(#nui-page-crumb):not(#nui-tool-head) { display: none !important; }
html.nui-res-on body > .container { max-width: 1080px; margin: 0 auto; padding: 28px 20px 48px; font-family: 'Poppins', Arial, sans-serif; color: var(--text-secondary); text-align: start; }
.nui-res .nui-group-title { margin: 22px 0 0; padding: 0 2px 10px; }
.nui-res-sum { margin: 0; }
.nui-res-sum > .wi { color: var(--primary-color); }
.nui-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.nui-res-head { display: flex; align-items: center; gap: 12px; }
.nui-res-head > div { min-width: 0; flex: 1; }
.nui-res-head h2 { margin: 0; }
.nui-res-place { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--text-muted); }
.nui-res-place .wi { width: 13px; height: 13px; }
.nui-res-node.bad { border-color: rgba(239, 68, 68, 0.4); }
.nui-res-node.warn { border-color: rgba(245, 158, 11, 0.38); }
.nui-res-grp { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.nui-res-gt { font-size: .7rem; letter-spacing: 1.1px; text-transform: uppercase; color: var(--nui-section); font-weight: 600; }
.nui-res-m { display: flex; flex-direction: column; gap: 4px; }
.nui-res-ml { display: flex; justify-content: space-between; font-size: .84rem; color: var(--nui-label); }
.nui-res-ml b { color: var(--text-light); font-weight: 600; font-variant-numeric: tabular-nums; }
.nui-res-bar { margin-top: 0; height: 7px; }
.nui-res-bar.ok i { background: #10b981; }
.nui-res-bar.warn i { background: #f59e0b; }
.nui-res-bar.bad i { background: #ef4444; }
.nui-res-mt { font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nui-res-at { margin: 0; }
@media (max-width: 650px) {
    html.nui-res-on body > .container { padding: 12px 14px 24px; margin-top: 0; }
    .nui-res-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Domaines (nui-domains.js) : onglet Domains de l'écran serveur et page Domains */
.nui-dm { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.nui-dm-page { font-family: 'Poppins', Arial, sans-serif; text-align: start; }
.nui-dm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.nui-dm-head p { margin: 4px 0 0; }
.nui-dm-list { display: flex; flex-direction: column; }
.nui-dm-list > .nui-hint { margin: 4px 0; }
.nui-dm-row { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.nui-dm-row:last-child { border-bottom: 0; }
.nui-dm-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nui-dm-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.nui-dm-name .nui-addr { font-size: .84rem; overflow-wrap: anywhere; }
.nui-dm-name a.nui-addr { color: var(--text-light); text-decoration: none; }
.nui-dm-name a.nui-addr:hover { color: var(--primary-color); }
.nui-dm-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--text-muted); }
.nui-dm-meta b { color: var(--text-secondary); font-weight: 500; }
.nui-dm-act { display: flex; gap: 6px; flex-wrap: wrap; }
.nui-dm-act .nui-btn { height: 34px; padding: 0 12px; font-size: .8rem; }
.nui-dm .nui-tool-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nui-dm .nui-tool-foot .nui-hint { margin: 0; }
.nui-dm .nui-btn svg.wi { width: 16px; height: 16px; }
.nui-dm-verify { margin-top: 8px; padding: 12px; border-radius: 10px; border: 1px solid rgba(245, 158, 11, 0.32); background: rgba(245, 158, 11, 0.06); display: flex; flex-direction: column; gap: 8px; }
.nui-dm-verify p { margin: 0; font-size: .82rem; }
.nui-dm-verify p b { display: block; color: var(--text-light); }
.nui-dm-rec { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.nui-dm-rec code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .76rem; background: rgba(0, 0, 0, 0.25); padding: 6px 8px; border-radius: 6px; overflow-wrap: anywhere; color: var(--text-light); }
.nui-dm-rec .nui-btn-icon { width: 34px; height: 34px; }
.nui-hint.ok { color: #34d399; }
.nui-hint.bad { color: #ff7b7b; }
.nui-dm-vstatus.ok { color: #34d399; }
.nui-dm-vstatus.bad { color: #ff7b7b; }
/* Formulaire d'ajout (fenêtre ui-dialogs.js uiCustom) */
.nui-dm-form, .nui-dm-pick { display: flex; flex-direction: column; gap: 6px; text-align: start; }
.nui-dm-ftitle { margin: 0 0 8px; font: 600 1.15rem/1.3 'Poppins', Arial, sans-serif; color: var(--text-light); }
.nui-dm-form .nui-kv-l { margin-top: 6px; }
.nui-dm-form select.nui-input, .nui-dm-form input.nui-input { width: 100%; box-sizing: border-box; flex: none; }
.nui-dm-form select.nui-input option { color: #111; }
.nui-dm-fqdn { display: flex; align-items: center; gap: 6px; }
.nui-dm-fqdn .nui-addr { white-space: nowrap; }
.nui-dm-check { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: .86rem; color: var(--text-secondary); }
.nui-dm-form .uidlg-actions { margin-top: 14px; }
.nui-dm-form .uidlg-btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.nui-dm-pick .nui-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer; color: var(--text-light); font: 500 .92rem 'Poppins', Arial, sans-serif; border: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 8px; }
.nui-dm-pick .nui-row:hover, .nui-dm-pick .nui-row:focus-visible { border-color: rgba(56, 177, 237, 0.5); background: rgba(56, 177, 237, 0.06); }
.nui-dm-pick .nui-sub { display: block; font-size: .78rem; color: var(--text-muted); font-weight: 400; }
@media (max-width: 650px) {
    .nui-dm { grid-template-columns: minmax(0, 1fr); }
    .nui-dm-act { width: 100%; }
    .nui-dm-act .nui-btn { flex: 1; height: 40px; }
}

/* ---------------- Page Servers, vue cartes (patches/servers-new-ui.js nuiBuildServerCard) */
html.new-ui .servers-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
@media (min-width: 1180px) { html.new-ui .servers-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 650px) { html.new-ui .servers-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
html.new-ui .server-card.nui-sc { background: var(--nui-card); border: 1px solid var(--nui-card-line); border-radius: 14px; padding: 16px; gap: 12px; font-family: 'Poppins', Arial, sans-serif; text-align: start; min-width: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
html.new-ui .server-card.nui-sc:hover { transform: none; border-color: rgba(56, 177, 237, 0.35); }
html.new-ui .server-card.nui-sc.is-suspended { border-color: rgba(239, 68, 68, 0.35); }
html.new-ui .server-card.nui-sc.is-shared { border-style: dashed; }
.nui-sc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nui-sc-state { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.nui-sc-state.ok { color: #34d399; }
.nui-sc-state.bad { color: #ff7b7b; }
.nui-sc-state .status-dot { margin: 0; flex: 0 0 auto; }
html.new-ui .nui-sc-badges.server-card-header { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; align-items: center; }
.nui-sc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .63rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(56, 177, 237, 0.45); color: var(--primary-color); white-space: nowrap; line-height: 1.5; }
.nui-sc-badge[hidden] { display: none; }
.nui-sc-badge.free { border-color: rgba(255, 255, 255, 0.18); color: var(--text-muted); }
.nui-sc-badge.shared { border-color: rgba(167, 139, 250, 0.5); color: #c4b5fd; }
.nui-sc-badge .wi { width: 12px; height: 12px; }
.nui-sc-badges:has(.bfs-badge) .nui-sc-plan.free { display: none; }
html.new-ui .nui-sc-badges .bfs-badge { margin: 0; font-size: .63rem; letter-spacing: .05em; text-transform: uppercase; }
.nui-sc-name { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; min-width: 0; }
.nui-sc-name a { color: var(--text-light); text-decoration: none; overflow-wrap: anywhere; }
.nui-sc-name a:hover { text-decoration: underline; text-decoration-color: rgba(56, 177, 237, 0.6); text-underline-offset: 3px; }
.nui-sc-name a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 4px; }
.nui-sc-addr { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nui-sc-addr .nui-addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; }
html.new-ui .nui-sc-copy { all: unset; box-sizing: border-box; display: inline-grid; place-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; cursor: pointer; color: var(--text-muted); }
html.new-ui .nui-sc-copy:hover { color: var(--text-light); background: rgba(255, 255, 255, 0.06); }
html.new-ui .nui-sc-copy:focus-visible { outline: 2px solid var(--primary-color); }
html.new-ui .nui-sc-copy .wi { width: 15px; height: 15px; }
.nui-sc-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.nui-sc-specs > div { min-width: 0; }
.nui-sc-specs dt { font-size: .7rem; color: var(--nui-label); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.nui-sc-specs dd { margin: 2px 0 0; color: var(--text-light); font-size: .86rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nui-sc .nui-alert, .nui-sc .pressure-banner { margin: 0; }
.nui-sc .pressure-banner { border-radius: 10px; }
html.new-ui .server-card-actions.nui-sc-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html.new-ui .nui-sc-foot .nui-more { margin-inline-start: auto; }
.nui-sc-note { font-size: .78rem; color: var(--text-muted); }
@media (max-width: 650px) {
    html.new-ui .server-card-actions.nui-sc-foot { display: grid; grid-template-columns: 1fr 1fr auto; }
    html.new-ui .nui-sc.is-shared .server-card-actions.nui-sc-foot { grid-template-columns: 1fr; }
    .nui-sc-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) { .nui-sc-specs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
body.terminal-mode .server-card.nui-sc { background: #0c1520; border-color: rgba(0, 255, 157, 0.12); }

/* ---------------- Account sur téléphone, deuxième niveau (new-ui.js acctOpenSub) : sous-sections en lignes */
.nui-mx-l { display: none; }
@media (max-width: 650px) {
    /* Dans une section : chaque sous-section est une ligne (nom, résumé, chevron), son contenu caché. */
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-subsection { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-subsection:last-of-type { border-bottom: 0; }
    html.new-ui body.nui-acct-detail:not(.nui-acct-sub) .nui-acct-cur .acct-subsection > .acct-body { display: none; }
    html.new-ui body.nui-acct-detail:not(.nui-acct-sub) .nui-acct-cur .acct-subsummary { min-height: 52px; box-sizing: border-box; padding: 8px 0; gap: 12px; }
    html.new-ui body.nui-acct-detail:not(.nui-acct-sub) .nui-acct-cur .acct-subsection-name { font-size: .92rem; font-weight: 500; letter-spacing: 0; color: var(--text-light); white-space: normal; text-transform: none; }
    html.new-ui body.nui-acct-detail:not(.nui-acct-sub) .nui-acct-cur .acct-subsection .acct-glance { opacity: 1; max-width: 50%; font-size: .82rem; color: var(--text-muted); }
    html.new-ui body.nui-acct-detail:not(.nui-acct-sub) .nui-acct-cur .acct-subsection > summary > .acct-chevron { order: 9; transform: rotate(-45deg); border-color: var(--text-muted); margin-inline-start: 4px; }
    html.new-ui[dir="rtl"] body.nui-acct-detail:not(.nui-acct-sub) .nui-acct-cur .acct-subsection > summary > .acct-chevron { transform: rotate(135deg); }
    /* Sous-section ouverte : elle seule, sans son titre (repris en haut de l'écran). */
    html.new-ui body.nui-acct-sub .nui-acct-cur > .acct-body > :not(.nui-acct-subcur) { display: none !important; }
    html.new-ui body.nui-acct-sub .nui-acct-subcur { border: 0; overflow: visible; }
    html.new-ui body.nui-acct-sub .nui-acct-subcur > summary { display: none; }
    html.new-ui body.nui-acct-sub .nui-acct-subcur > .acct-body { display: block; padding: 0; animation: none; }
    /* Lignes de réglage : libellé à gauche, valeur ou interrupteur à droite. */
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-row { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; min-height: 48px; box-sizing: border-box; padding: 8px 0; }
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-row[hidden] { display: none; }
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-row > .acct-label { flex: 1 1 120px; color: var(--text-light); font-weight: 500; }
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-row > .acct-value { flex: 0 1 auto; max-width: 100%; justify-content: flex-end; text-align: end; color: var(--text-muted); }
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-row > .acct-value .acct-switch { flex-direction: row-reverse; text-align: start; }
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-row > .acct-value .acct-select { max-width: 100%; }
    /* Ligne « titre » (une seule colonne dans account.html) : titre de groupe, comme dans la liste de base. */
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-row[style*="1fr"] { min-height: 0; padding: 18px 0 6px; border-bottom: 0; }
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-row[style*="1fr"] > .acct-label { font-size: .74rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--nui-section); font-weight: 600; }
    /* Tableau des notifications → une ligne par type, interrupteurs « Email » et « Push » à droite. */
    html.new-ui body.nui-acct-detail .acct-notif-matrix, html.new-ui body.nui-acct-detail .acct-notif-matrix tbody { display: block; width: 100%; }
    html.new-ui body.nui-acct-detail .acct-notif-matrix thead { display: none; }
    html.new-ui body.nui-acct-detail .acct-notif-matrix tr { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    html.new-ui body.nui-acct-detail .acct-notif-matrix td { display: block; padding: 0; border: 0; text-align: center; }
    html.new-ui body.nui-acct-detail .acct-notif-matrix td:first-child { flex: 1; text-align: start; color: var(--text-light); font-size: .9rem; }
    html.new-ui body.nui-acct-detail .acct-notif-matrix td:not(:first-child) { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
    html.new-ui body.nui-acct-detail .acct-notif-matrix td.acct-notif-none { justify-content: flex-end; padding-bottom: 6px; }
    html.new-ui body.nui-acct-detail .nui-mx-l { display: block; font-size: .64rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-actions { flex-direction: column; }
    html.new-ui body.nui-acct-detail .nui-acct-cur .acct-actions > * { width: 100%; }
}

/* Onglet Me : cadre d'avatar équipé (cosmétiques), à la taille de l'icône de la barre */
html.new-ui .nui-flat .wc-av.nui-tab-frame { width: 22px; height: 22px; }
html.new-ui .nui-flat .wc-av.nui-tab-frame .nui-tab-av { width: 22px; height: 22px; border-radius: 50%; }