/*
  VM Manager - app.css
  Mise en page de l'application (apres identification) : barre laterale, pages,
  cartes VM, modales, tableaux, parametres, navigation mobile, responsive.
  Repris quasi verbatim de l'ancien front monolithe.
*/

/* Barre laterale */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;box-shadow:var(--shadow)}
.sidebar-logo{padding:24px;font-size:20px;font-weight:800;letter-spacing:-.5px;border-bottom:1px solid var(--border);text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sidebar-logo span{color:var(--accent)}
.sidebar-nav{flex:1;padding:12px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text2);transition:all .15s;margin-bottom:2px;width:100%;border:none;background:none;font-family:'Syne',sans-serif;text-align:left}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:var(--accent-dim);color:var(--accent)}
.sidebar-bottom{padding:12px;border-top:1px solid var(--border)}
.user-info{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:4px;cursor:pointer}
.user-avatar{width:34px;height:34px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;flex-shrink:0}
.user-name{font-size:13px;font-weight:700}.user-role{font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace}
.sidebar-actions{display:flex;gap:6px;padding:0 4px}
.btn-sidebar{flex:1;background:transparent;border:1.5px solid var(--border);color:var(--text2);border-radius:8px;padding:7px 4px;font-family:'Syne',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}
.btn-sidebar:hover{border-color:var(--accent);color:var(--accent)}
.btn-sidebar.logout:hover{border-color:var(--red);color:var(--red)}

/* Zone principale + pages */
.main{margin-left:220px;padding:28px 32px;min-height:100vh}
.page{display:none}.page.active{display:block}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-title{font-size:26px;font-weight:800;letter-spacing:-.5px}
.page-title span{color:var(--accent)}

/* Badge serveur (temperatures + horloge) */
.server-badge{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:8px 14px;box-shadow:var(--shadow)}
.server-info{display:flex;flex-direction:column;gap:4px}
.server-temp{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:6px;transition:background .15s}
.server-temp:hover{background:var(--bg3)}
.server-temp.mb{color:var(--accent)}.server-temp.cpu{color:var(--orange)}
.clock{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--text2)}
.divider{width:1px;height:24px;background:var(--border)}

/* Grille et cartes VM */
.vm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.vm-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:16px;padding:20px;transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden;cursor:pointer}
.vm-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--border);transition:background .3s}
.vm-card.running::before{background:var(--green)}
.vm-card.eteinte::before{background:var(--border2)}
.vm-card.pause::before{background:var(--orange)}
.vm-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.vm-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;gap:8px}
.vm-name{font-size:16px;font-weight:700;line-height:1.2}
.vm-alias{font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace;margin-top:2px}
.vm-state{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;flex-shrink:0}
.vm-state.running{background:rgba(0,214,143,.12);color:var(--green)}
.vm-state.eteinte{background:rgba(136,136,170,.1);color:var(--text2)}
.vm-state.pause{background:rgba(255,170,0,.12);color:var(--orange)}
.state-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.state-dot.running{animation:pulse 2s infinite}
.vm-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.spec-item{background:var(--bg3);border-radius:8px;padding:8px 10px}
.spec-label{font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;font-family:'JetBrains Mono',monospace;font-weight:600}
.spec-value{font-size:14px;font-weight:700;font-family:'JetBrains Mono',monospace}
.vm-gpu{font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace;margin-bottom:8px;padding:6px 10px;background:var(--bg3);border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vm-uptime{font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.ping-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;padding:2px 7px;border-radius:20px;margin-left:6px}
.ping-badge.up{background:rgba(0,214,143,.15);color:var(--green)}
.ping-badge.down{background:rgba(255,71,87,.12);color:var(--red)}
.ping-line{font-size:11px;font-family:'JetBrains Mono',monospace;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.card-perf{margin-bottom:10px}
.card-perf-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.cpl{font-size:10px;color:var(--text2);font-family:'JetBrains Mono',monospace;width:28px;flex-shrink:0;font-weight:600}
.cpbar{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.cpfill{height:100%;border-radius:2px;transition:width .6s ease}
.cpfill.cpu{background:var(--accent)}.cpfill.ram{background:var(--green)}
.cpval{font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;width:38px;text-align:right;flex-shrink:0}
.cpval.cpu{color:var(--accent)}.cpval.ram{color:var(--green)}
.cploading{font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.vm-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.vm-actions .btn{font-size:10px;padding:7px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px}
.vm-actions .btn-start{grid-column:span 2}

/* Chargements / etats vides */
.loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--text2);font-size:14px;gap:12px}
.empty{text-align:center;padding:60px;color:var(--text2)}
.empty-vm{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:16px}
.empty-vm-title{font-size:18px;font-weight:700;color:var(--text2)}
.empty-vm-sub{font-size:13px;color:var(--text3);font-family:'JetBrains Mono',monospace}

/* Tableaux (page utilisateurs, audit) */
.table-wrap{background:var(--bg2);border:1.5px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.table-scroll{overflow-x:auto}
#users-mobile{display:none}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:14px 20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text2);border-bottom:1px solid var(--border);background:var(--bg3);white-space:nowrap}
td{padding:13px 20px;font-size:14px;border-bottom:1px solid var(--border);transition:background .15s}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--card-hover)}
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace}
.badge-admin{background:var(--accent-dim);color:var(--accent)}
.badge-user{background:rgba(136,136,170,.1);color:var(--text2)}
.badge-ok{background:rgba(0,214,143,.15);color:var(--green)}
.badge-ko{background:rgba(255,71,87,.12);color:var(--red)}

/* Modales */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(6px)}
.modal{background:var(--bg2);border:1.5px solid var(--border);border-radius:20px;padding:32px;width:580px;max-width:92vw;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal-title{font-size:20px;font-weight:800;margin-bottom:20px;letter-spacing:-.3px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}
.section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text2);margin:16px 0 10px}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.detail-item{background:var(--bg3);border-radius:10px;padding:12px}
.detail-label{font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;font-family:'JetBrains Mono',monospace;font-weight:600}
.detail-value{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;word-break:break-all;line-height:1.3}
.detail-value.sm{font-size:11px}
.disk-item{padding:12px 14px;background:var(--bg3);border-radius:10px;margin-bottom:8px}
.disk-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.disk-target{color:var(--accent);font-weight:700;font-family:'JetBrains Mono',monospace;font-size:12px;min-width:36px}
.disk-source{color:var(--text2);font-family:'JetBrains Mono',monospace;font-size:11px;word-break:break-all}
.disk-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:6px}
.disk-stat{text-align:center;background:var(--bg4);border-radius:6px;padding:6px}
.disk-stat-label{font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;font-family:'JetBrains Mono',monospace}
.disk-stat-value{font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace}

/* Performances en direct (modale detail) */
.perf-section{margin-top:18px}
.perf-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1s infinite;flex-shrink:0}
.perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.perf-item{background:var(--bg3);border-radius:12px;padding:14px}
.perf-item-label{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-family:'JetBrains Mono',monospace}
.perf-item-val{font-size:22px;font-weight:800;font-family:'JetBrains Mono',monospace;margin-bottom:8px}
.perf-item-val.cpu{color:var(--accent)}.perf-item-val.ram{color:var(--green)}
.progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;border-radius:2px;transition:width .5s ease}
.progress-fill.cpu{background:var(--accent)}.progress-fill.ram{background:var(--green)}
.net-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.net-item{background:var(--bg3);border-radius:8px;padding:10px}
.net-label{font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-family:'JetBrains Mono',monospace}
.net-value{font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace}
.perf-loading{display:flex;align-items:center;gap:10px;color:var(--text2);font-size:13px;padding:12px 0}

/* Alertes (toasts) */
#ac{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column-reverse;gap:8px;z-index:2000;pointer-events:none;max-width:320px}
.alert{background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:13px 18px;font-size:13px;font-weight:600;box-shadow:var(--shadow);pointer-events:auto;display:flex;align-items:center;gap:10px}
.alert.success{border-color:var(--green);color:var(--green)}
.alert.error{border-color:var(--red);color:var(--red)}
.alert.info{border-color:var(--orange);color:var(--orange)}
@keyframes alertIn{from{transform:translateX(120%) scale(.9);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes alertOut{from{transform:translateX(0) scale(1);opacity:1;max-height:80px}to{transform:translateX(120%) scale(.9);opacity:0;max-height:0;padding:0;margin:0}}
.alert.entering{animation:alertIn .3s cubic-bezier(.34,1.56,.64,1) forwards}
.alert.leaving{animation:alertOut .3s ease-in forwards}

/* Bannieres d'action (demarrage / arret) */
#banners{margin-bottom:8px}
.action-banner{border-radius:10px;padding:10px 16px;font-size:13px;display:flex;align-items:center;gap:10px;margin-bottom:8px;font-weight:600}
.action-banner.demarrage{background:rgba(0,214,143,.08);border:1.5px solid rgba(0,214,143,.3);color:var(--green)}
.action-banner.arret{background:rgba(255,71,87,.08);border:1.5px solid rgba(255,71,87,.3);color:var(--red)}
.action-banner.redemarrage{background:rgba(255,170,0,.08);border:1.5px solid rgba(255,170,0,.3);color:var(--orange)}

/* Parametres : onglets + panneaux */
.settings-tabs{display:flex;flex-wrap:nowrap;gap:0;border-bottom:2px solid var(--border);margin-bottom:24px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:0}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tab{padding:11px 14px 13px;font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:5px;line-height:1.2;flex-shrink:0;background:none;border-top:none;border-left:none;border-right:none;font-family:'Syne',sans-serif}
.settings-tab:hover{color:var(--text)}
.settings-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.settings-pane{display:none}.settings-pane.active{display:block}
.settings-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:var(--shadow)}
.settings-title{font-size:16px;font-weight:700;margin-bottom:18px}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}
.settings-label{font-size:14px;font-weight:600}
.settings-desc{font-size:12px;color:var(--text2);margin-top:2px}
.toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border2);border-radius:24px;cursor:pointer;transition:.2s}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:var(--accent)}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px)}
.alias-input{background:var(--bg3);border:1.5px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;outline:none;width:180px}
.alias-input:focus{border-color:var(--accent)}
.settings-select{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;padding:12px 16px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;outline:none}
.settings-select:focus{border-color:var(--accent)}

/* Ligne alias / ping (empilee sur mobile) */
.vm-setting-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.vm-setting-row:last-child{border-bottom:none}
.vm-setting-name{flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-setting-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.vm-setting-controls .alias-input{width:160px}

/* Liste de cases a cocher (assignation de VMs) */
.vm-checklist{max-height:260px;overflow-y:auto;border:1.5px solid var(--border);border-radius:10px}
.vm-check-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.vm-check-item:last-child{border-bottom:none}
.vm-check-item:hover{background:var(--bg3)}
.vm-check-item input{accent-color:var(--accent);width:15px;height:15px}

/* Bouton flottant de theme */
.theme-float{position:fixed;bottom:24px;left:240px;width:40px;height:40px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;box-shadow:var(--shadow);z-index:500;transition:all .2s}
.theme-float:hover{border-color:var(--accent);transform:scale(1.1)}

/* Nuanciers de couleur d'accent */
.accent-swatches{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.accent-swatch{width:28px;height:28px;border-radius:8px;cursor:pointer;border:2.5px solid transparent;transition:all .15s;flex-shrink:0}
.accent-swatch:hover{transform:scale(1.12)}
.accent-swatch.active{border-color:var(--text)!important;box-shadow:0 0 0 2px var(--bg2),0 0 0 4px currentColor}
.accent-picker-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.accent-native{width:36px;height:36px;border:none;border-radius:8px;padding:2px;background:var(--bg3);cursor:pointer}
.accent-hex-input{background:var(--bg3);border:1.5px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;outline:none;width:110px}
.accent-hex-input:focus{border-color:var(--accent)}

/* Barre superieure mobile */
.mobile-topbar{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:var(--bg2);border-bottom:1px solid var(--border);z-index:300;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:var(--shadow)}
.mob-logo{font-size:18px;font-weight:800;letter-spacing:-.5px;cursor:pointer}
.mob-logo span{color:var(--accent)}
.mob-user-pill{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:5px 12px 5px 7px;cursor:pointer}
.mob-user-avatar{width:26px;height:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;flex-shrink:0}
.mob-user-label{font-size:12px;font-weight:700;color:var(--text)}

/* Navigation basse mobile */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--bg2);border-top:1px solid var(--border);z-index:300;flex-direction:row;align-items:stretch;padding-bottom:env(safe-area-inset-bottom,0)}
.mob-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font-size:9px;font-weight:700;color:var(--text2);transition:color .15s;padding:6px 2px;letter-spacing:.3px;text-transform:uppercase;border:none;background:none;font-family:'Syne',sans-serif;position:relative}
.mob-nav-item .mob-icon{font-size:20px;line-height:1}
.mob-nav-item.active{color:var(--accent)}
.mob-nav-item.active::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:var(--accent);border-radius:0 0 2px 2px}
.mob-nav-item:hover{color:var(--text)}

/* Cartes utilisateur mobile (page admin) */
.user-card-mobile{background:var(--bg2);border:1.5px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px;position:relative;overflow:hidden}
.user-card-mobile::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.user-card-mobile.is-admin::before{background:var(--accent)}
.user-card-mobile.is-user::before{background:var(--border2)}
.user-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.user-card-avatar{width:40px;height:40px;background:var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;flex-shrink:0}
.user-card-avatar.is-user{background:var(--bg4);color:var(--text2)}
.user-card-info{flex:1;min-width:0}
.user-card-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-card-email{font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-card-vms{font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace;background:var(--bg3);border-radius:8px;padding:8px 10px;margin-bottom:10px;line-height:1.5;min-height:34px}
.user-card-actions{display:flex;gap:8px}
.user-card-actions .btn{flex:1;text-align:center;font-size:12px;padding:9px 6px}

/* Filigrane de version */
#version-watermark{position:fixed;bottom:12px;right:16px;font-size:12px;font-family:monospace;color:var(--text3);pointer-events:none;user-select:none;z-index:9999;letter-spacing:.1em}

/* Responsive mobile */
@media(max-width:768px){
  .sidebar{display:none}
  .mobile-topbar{display:flex}
  .mobile-nav{display:flex}
  .main{margin-left:0;padding:72px 14px 76px}
  .vm-grid{grid-template-columns:1fr}
  .page-header{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .page-title{text-align:center;width:100%}
  .server-badge{width:100%;justify-content:center}
  .perf-grid{grid-template-columns:1fr}
  .net-grid{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:repeat(2,1fr)}
  .modal{width:96vw;padding:20px;max-height:84vh}
  .theme-float{left:auto;right:16px;bottom:70px}
  .table-wrap{display:none}
  #users-mobile{display:block}
  #page-admin .page-header{flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
  #page-admin .page-title{text-align:left;width:auto}
  .settings-tabs{flex-direction:column;border-bottom:none;padding-bottom:0;gap:2px;margin-bottom:16px;background:var(--bg2);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;padding:6px}
  .settings-tab{border-bottom:none!important;border-radius:10px;padding:13px 14px;font-size:13px;margin-bottom:0}
  .settings-tab.active{background:var(--accent-dim);color:var(--accent)}
  #ac{bottom:70px;right:12px;max-width:calc(100vw - 24px)}
  #version-watermark{bottom:66px}
  .vm-setting-row{flex-direction:column;align-items:stretch;gap:8px;padding:12px 0}
  .vm-setting-name{white-space:normal;font-size:14px}
  .vm-setting-controls{width:100%}
  .vm-setting-controls .alias-input{flex:1;width:auto}
}