/* Demo-mode chrome. Loaded only by /demo/panel/ — nothing here reaches the real dashboard. */
/* A floating strip rather than a layout element: the dashboard's sidebar and topbar are
   both fixed, so anything inserted into the flow collides with them — and would collide
   differently every time that layout changes. This cannot. */
.demo-banner{
    position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:90;
    display:flex; align-items:center; gap:10px; max-width:min(94vw,760px);
    padding:10px 18px; border-radius:999px;
    background:rgba(11,107,152,.96); color:#fff; backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 14px 40px -14px rgba(0,0,0,.75);
    font:500 13px/1.35 'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.demo-banner b{font-weight:700; white-space:nowrap}
.demo-banner span{opacity:.92}
.demo-banner .sp{display:none}
.demo-banner .x{
    margin-left:4px; border:0; background:transparent; color:#fff; opacity:.7; cursor:pointer;
    font:400 17px/1 'Archivo',sans-serif; padding:0 2px;
}
.demo-banner .x:hover{opacity:1}
/* The live-chat bubble sits bottom-right; keep clear of it on wide screens. */
@media (min-width:900px){ .demo-banner{left:calc(50% - 34px)} }

.demo-toast{
    position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:120;
    background:#12181f; color:#e8eef4; border:1px solid rgba(255,255,255,.16);
    border-left:3px solid #4cc2f0; border-radius:7px; padding:12px 20px; max-width:min(90vw,520px);
    font:500 14px/1.45 'Archivo',-apple-system,sans-serif; opacity:0;
    transition:opacity .3s ease, transform .3s ease;
    box-shadow:0 18px 44px -18px rgba(0,0,0,.8);
}
.demo-toast.in{opacity:1; transform:translate(-50%,0)}
.demo-toast.ok{border-left-color:#3ddc84}
.demo-toast.warn{border-left-color:#ffb02e}

.demo-modal{
    position:fixed; inset:0; z-index:110; background:rgba(4,7,11,.72);
    backdrop-filter:blur(3px); display:grid; place-items:center; padding:24px;
    animation:demoIn .18s ease;
}
@keyframes demoIn{from{opacity:0}to{opacity:1}}
.demo-modal-card{
    width:min(880px,100%); max-height:88vh; display:flex; flex-direction:column;
    background:#0a0d12; border:1px solid rgba(255,255,255,.16); border-radius:9px; overflow:hidden;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.demo-modal-card.small{width:min(560px,100%)}
.demo-modal-bar{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:10px 14px; background:#121821; border-bottom:1px solid rgba(255,255,255,.1);
}
.dm-title{font:700 14px 'Archivo',sans-serif; color:#e8eef4}
.dm-meta{font:400 11px 'IBM Plex Mono',ui-monospace,monospace; color:#7c8896}
.dm-state{
    margin-left:auto; display:flex; align-items:center; gap:7px;
    font:500 10.5px/1 'IBM Plex Mono',monospace; letter-spacing:.11em; text-transform:uppercase; color:#3ddc84;
}
.dm-state i{width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor}
.dm-state.warn{color:#ffb02e}
.dm-btn{
    border:1px solid rgba(255,255,255,.22); background:transparent; color:#e8eef4; cursor:pointer;
    border-radius:5px; padding:6px 14px; font:600 12.5px 'Archivo',sans-serif; transition:all .16s;
}
.dm-btn:hover{border-color:#4cc2f0; color:#4cc2f0}
.dm-btn:disabled{opacity:.4; cursor:default; border-color:rgba(255,255,255,.22); color:#e8eef4}
.dm-btn.close:hover{border-color:#ff7b86; color:#ff7b86}
.demo-term{
    margin:0; flex:1; min-height:340px; overflow:auto; background:#05070a; color:#c9d4df;
    font:14px/1.55 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    padding:18px 20px; white-space:pre-wrap; word-break:break-word;
}
.demo-term .dim{color:#7c8896}
.demo-term .ok{color:#7ce09a}
.demo-term .warn{color:#ffce6a}
.demo-term .sel{background:#c9d4df; color:#05070a; display:inline-block}
.demo-modal-foot{
    padding:9px 14px; background:#121821; border-top:1px solid rgba(255,255,255,.1);
    font:400 11.5px 'IBM Plex Mono',monospace; color:#7c8896;
}
.demo-pick{padding:20px}
.demo-pick p{margin:0 0 16px; color:#9aa6b3; font:400 14px/1.55 'Archivo',sans-serif}
.demo-oslist{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px}
.demo-os{
    border:1px solid rgba(255,255,255,.16); background:transparent; color:#e8eef4; cursor:pointer;
    border-radius:6px; padding:12px 14px; text-align:left;
    font:500 13.5px 'Archivo',sans-serif; transition:all .16s;
}
.demo-os:hover{border-color:#4cc2f0; color:#4cc2f0; background:rgba(76,194,240,.07)}

@media (max-width:640px){
    .demo-banner{bottom:12px; font-size:12px; padding:9px 14px; gap:7px}
    .demo-banner b{font-size:12px}
    .demo-modal{padding:0}
    .demo-modal-card{max-height:100vh; height:100vh; border-radius:0; border:0}
}