:root{color-scheme:light dark}
body{margin:0;background:light-dark(#f6f7f9,#0f1216)}
#vps-console{--bg:light-dark(#f6f7f9,#0f1216);--surface:light-dark(#ffffff,#171b21);--raised:light-dark(#fbfcfd,#1c2128);--ink:light-dark(#18212b,#e6ebf1);--muted:light-dark(#647181,#8d99a8);--line:light-dark(#e4e8ed,#262d36);--soft:light-dark(#f0f3f6,#20262e);--brand:light-dark(#1f6b62,#6fd1b8);--brandsoft:light-dark(#e3f2ee,#173430);--ok:light-dark(#16a36a,#3ccf8e);--neutral:light-dark(#3b82c4,#6aa9e6);--warn:light-dark(#b7791f,#f0b44c);--warnsoft:light-dark(#fdf3e1,#2c2416);--bad:light-dark(#d43d3d,#f2706b);--badsoft:light-dark(#fdeaea,#33191a);--radius:12px;--gutter:max(24px,calc((100% - 960px)/2));min-height:100vh;font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--bg)}
#vps-console *{box-sizing:border-box}
#vps-console button{font:inherit;color:inherit;cursor:pointer}
#vps-console :is(button,a,summary):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
#vps-console button:disabled{cursor:wait;opacity:.7}
#vps-console [hidden]{display:none!important}
#vps-console h1{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
#vps-console h2{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0}
#vps-console p{margin:8px 0}
#vps-console a{color:var(--brand)}
#vps-console code{font:12.5px/1.4 ui-monospace,"Cascadia Code",Consolas,monospace;overflow-wrap:anywhere}
#vps-console .muted,#vps-console .small{color:var(--muted)}
#vps-console .small{font-size:12px}
#vps-console .count{font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
#vps-console .meta{margin:4px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
#vps-console svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* En-tête */
#vps-console .chrome{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:20px;padding:12px var(--gutter);background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#vps-console .brand{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}
#vps-console .brandmark{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--neutral)));position:relative}
#vps-console .brandmark::after{content:"";position:absolute;inset:6px;border-radius:3px;border:2px solid var(--surface);border-width:2px 0}
#vps-console .segmented{display:flex;gap:2px;padding:3px;background:var(--soft);border-radius:9px}
#vps-console .segmented:empty{display:none}
#vps-console .segmented button{border:0;background:none;padding:5px 12px;border-radius:7px;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
#vps-console .segmented button:hover{color:var(--ink)}
#vps-console .segmented button[aria-pressed=true]{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgb(0 0 0/.12)}
#vps-console .identity{display:flex;gap:12px;align-items:center;margin-left:auto;font-size:12px;color:var(--muted);min-width:0}
#vps-console #collection-status{color:var(--warn)}
#vps-console #collection-status.ok{color:var(--ok)}
#vps-console #collection-status:empty{display:none}
#vps-console #last-update{white-space:nowrap}
#vps-console .primary,#vps-console .ghost,#vps-console .button{display:inline-flex;align-items:center;gap:7px;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:500;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
#vps-console .primary{border:0;background:var(--brand);color:var(--surface)}
#vps-console .primary:hover:not(:disabled){background:color-mix(in srgb,var(--brand) 88%,var(--ink))}
#vps-console .ghost,#vps-console .button{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
#vps-console .ghost:hover,#vps-console .button:hover{background:var(--soft)}
#vps-console .busy .spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#vps-console *{transition:none!important;animation:none!important}}

#vps-console main{padding:32px var(--gutter) 64px}

/* VPS */
#vps-console .host{margin-bottom:40px}
#vps-console .host-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:14px}
#vps-console .gauges{display:flex;gap:24px;flex-shrink:0}
#vps-console .gauge{width:170px;font-size:12px;color:var(--muted)}
#vps-console .gauge-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;white-space:nowrap}
#vps-console .gauge strong{color:var(--ink);font-weight:600}
#vps-console .bar{display:block;stroke:none;width:100%;height:6px;border-radius:3px}
#vps-console .bar .track{fill:var(--soft)}
#vps-console .bar .fill{fill:var(--brand)}
#vps-console .gauge.warn .fill{fill:var(--warn)}
#vps-console .gauge.bad .fill{fill:var(--bad)}

#vps-console .alert{display:flex;gap:10px;padding:10px 14px;margin:0 0 14px;border-radius:10px;background:var(--warnsoft);color:var(--warn);font-size:13px}
#vps-console .alert svg{margin-top:2px}
#vps-console .alert ul{margin:0;padding:0;list-style:none}
#vps-console .alert li+li{margin-top:4px}

#vps-console .list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
#vps-console .app{display:grid;grid-template-columns:minmax(0,1fr) auto 150px 14px;gap:16px;align-items:center;width:100%;padding:13px 18px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;transition:background .12s}
#vps-console .app:last-child{border-bottom:0}
#vps-console .app:hover{background:var(--raised)}
#vps-console .app:hover .chevron{color:var(--ink);transform:translateX(2px)}
#vps-console .appmain{display:flex;flex-direction:column;min-width:0}
#vps-console .appname{display:flex;align-items:center;gap:8px;font-weight:500}
#vps-console .domain{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vps-console .appusage{display:flex;gap:14px;font-size:12.5px;color:var(--muted);white-space:nowrap}
#vps-console .appusage strong{font-weight:500;color:var(--ink)}
#vps-console .appstate{display:flex;align-items:center;justify-content:flex-end;gap:8px}
#vps-console .chevron{color:var(--muted);font-size:18px;line-height:1;transition:transform .12s,color .12s}

#vps-console .badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0;white-space:nowrap}
#vps-console .badge.warn{background:var(--warnsoft);color:var(--warn)}
#vps-console .status{display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
#vps-console .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
#vps-console .status.ok .dot{color:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
#vps-console .status.neutral .dot{color:var(--neutral)}
#vps-console .status.muted{color:var(--muted)}
#vps-console .status.warn{color:var(--warn)}
#vps-console .status.bad{color:var(--bad)}

/* Application */
#vps-console .back{border:0;background:none;padding:0;margin-bottom:20px;color:var(--muted);font-size:13px}
#vps-console .back:hover{color:var(--ink)}
#vps-console .app-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}
#vps-console .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#vps-console .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px}
#vps-console .tile{padding:14px 18px;min-width:0}
#vps-console .tile+.tile{border-left:1px solid var(--line)}
#vps-console .tile-label{font-size:12px;color:var(--muted);margin-bottom:4px}
#vps-console .tile-value{font-size:16px;font-weight:500;overflow-wrap:anywhere}
#vps-console .tile-value .status{font-size:16px}
#vps-console .tile-value code{font-size:15px}
#vps-console .tile-sub{display:block;font-size:12px;font-weight:400;color:var(--muted)}
#vps-console .note{margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--line);background:var(--raised);border-radius:0 8px 8px 0;font-size:13px;color:var(--muted)}
#vps-console .details{display:flex;flex-wrap:wrap;gap:12px 36px;margin:0 0 8px;padding:4px 2px}
#vps-console .details dt{font-size:12px;color:var(--muted)}
#vps-console .details dd{margin:2px 0 0}
#vps-console .section-title{display:flex;align-items:baseline;gap:8px;margin:32px 0 12px}
#vps-console .container{padding:14px 18px;border-bottom:1px solid var(--line)}
#vps-console .container:last-child{border-bottom:0}
#vps-console .container-head{display:flex;justify-content:space-between;align-items:center;gap:12px;overflow-wrap:anywhere}
#vps-console .container-head strong{font-weight:500}
#vps-console .container-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:4px;font-size:12.5px;color:var(--muted)}
#vps-console .container-meta code{font-size:12px}

#vps-console .files{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 10px}
#vps-console .files>summary{padding:10px 8px;font-weight:500;cursor:pointer;display:flex;align-items:baseline;gap:10px}
#vps-console .files>summary::before{content:"›";color:var(--muted);transition:transform .15s}
#vps-console .files[open]>summary::before{transform:rotate(90deg)}
#vps-console .files>summary::-webkit-details-marker{display:none}
#vps-console .filetree{list-style:none;margin:0 0 8px;padding-left:14px;border-left:1px solid var(--line)}
#vps-console .files>.filetree{margin-left:12px}
#vps-console .filetree li{margin:0}
#vps-console .filetree details{padding:0;border:0}
#vps-console .filetree summary,#vps-console .fileitem{display:flex;justify-content:space-between;gap:12px;padding:6px 8px;border-radius:6px;overflow-wrap:anywhere;cursor:pointer}
#vps-console .fileitem{cursor:default}
#vps-console .filetree summary:hover{background:var(--soft)}
#vps-console .filetree .small{text-align:right;font-weight:400}
#vps-console .filetree p{margin:4px 8px;color:var(--muted)}

/* Connexion */
#vps-console .login{max-width:460px;margin:12vh auto;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
#vps-console .login h1{margin-bottom:8px}
#vps-console .login-link{display:inline-flex;margin-top:16px;background:var(--brand);color:var(--surface);padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:500}

@media(max-width:760px){
  #vps-console{--gutter:16px}
  #vps-console .chrome{flex-wrap:wrap;row-gap:10px}
  #vps-console .segmented{order:3;width:100%}
  #vps-console .segmented button{flex:1}
  #vps-console main{padding-top:24px}
  #vps-console .host-head{flex-direction:column;align-items:stretch;gap:14px}
  #vps-console .gauge{flex:1;width:auto}
  #vps-console .app{grid-template-columns:minmax(0,1fr) auto 14px;row-gap:4px;padding:12px 14px}
  #vps-console .appusage{grid-column:1;grid-row:2}
  #vps-console .appstate{grid-column:2;grid-row:1/3}
  #vps-console .chevron{grid-column:3;grid-row:1/3}
  #vps-console .app-head{flex-direction:column}
  #vps-console .actions{justify-content:flex-start}
  #vps-console .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  #vps-console .tile:nth-child(3){border-left:0}
  #vps-console .tile:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:460px){
  #vps-console #last-update{display:none}
  #vps-console h1{font-size:22px}
  #vps-console .gauges{gap:16px}
}

#vps-console .comparison{padding:12px 16px;margin:16px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised)}