/* === layout.css — header, sidebar, app shell === */

/* LOGIN */
#login{position:fixed;inset:0;background:var(--bg0);z-index:1000;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(ellipse 60% 60% at 20% 50%,rgba(0,212,255,.04) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 80% 30%,rgba(0,255,204,.025) 0%,transparent 50%);}
.lbox{background:var(--panel);border:1px solid var(--border2);border-radius:12px;padding:36px;width:380px;box-shadow:0 0 60px rgba(0,0,0,.8),0 0 30px rgba(0,212,255,.04);}
.logo-wrap{text-align:center;margin-bottom:28px;}
.logo-t{font-family:var(--ff);font-size:22px;font-weight:700;color:var(--accent);letter-spacing:3px;text-shadow:0 0 20px rgba(0,212,255,.6);}
.logo-t b{color:var(--neon);}
.logo-s{font-size:10px;color:var(--muted2);letter-spacing:2px;display:block;margin-top:3px;}
.lf label{display:block;font-size:10px;color:var(--muted);margin-bottom:4px;letter-spacing:.5px;text-transform:uppercase;}
.lf input,.lf select{width:100%;background:var(--bg2);border:1px solid var(--border2);color:var(--text);padding:9px 12px;border-radius:var(--r);font-size:13px;transition:.15s;margin-bottom:12px;}
.lf input:focus,.lf select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,212,255,.1);}
.lbtn{width:100%;padding:11px;background:var(--accent);color:var(--bg0);border:none;border-radius:var(--r);font-size:13px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:.2s;}
.lbtn:hover{background:var(--neon);box-shadow:0 0 20px rgba(0,255,204,.4);}
.ldemo{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.ldemo-t{font-size:10px;color:var(--muted2);margin-bottom:7px;letter-spacing:.5px;}
.da{display:flex;align-items:center;gap:8px;padding:5px 7px;cursor:pointer;border-radius:4px;transition:.15s;}
.da:hover{background:var(--bg3);}
.da span:last-child{font-size:11px;color:var(--muted);}
.db{font-family:var(--ff);font-size:9px;padding:2px 7px;border-radius:2px;font-weight:700;letter-spacing:.5px;}
.r-sa{background:rgba(255,215,0,.12);color:var(--gold);border:1px solid rgba(255,215,0,.3);}
.r-a{background:rgba(168,85,247,.12);color:var(--purple);border:1px solid rgba(168,85,247,.3);}
.r-s{background:rgba(0,212,255,.1);color:var(--accent);border:1px solid rgba(0,212,255,.2);}

/* HEADER */
#hdr{height:52px;background:var(--panel);border-bottom:1px solid var(--border);display:none;align-items:center;padding:0 16px;gap:10px;z-index:100;position:fixed;top:0;left:0;right:0;box-shadow:0 2px 16px rgba(0,0,0,.5);}
.hdr-logo{font-family:var(--ff);font-size:13px;font-weight:700;color:var(--accent);letter-spacing:2px;text-shadow:0 0 12px rgba(0,212,255,.45);}
.hdr-logo b{color:var(--neon);}
.hdr-ver{font-size:9px;color:var(--muted2);}
.hdr-sep{flex:1;}
.hdr-ai-status{display:flex;align-items:center;gap:5px;font-family:var(--ff);font-size:10px;color:var(--muted2);}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--muted2);}
.ai-dot.on{background:var(--success);animation:pdot 2s infinite;}
.hdr-btn{background:transparent;border:1px solid var(--border2);color:var(--muted);padding:4px 10px;border-radius:var(--r);font-size:11px;cursor:pointer;transition:.15s;}
.hdr-btn:hover{border-color:var(--accent);color:var(--accent);}
.hdr-role{font-family:var(--ff);font-size:10px;padding:3px 9px;border-radius:3px;letter-spacing:1px;font-weight:700;}
.hdr-user{font-size:12px;color:var(--muted);margin-left:2px;}

/* SIDEBAR */
#nav{position:fixed;left:0;top:52px;bottom:0;width:52px;background:var(--panel);border-right:1px solid var(--border);display:none;flex-direction:column;align-items:center;padding:6px 0;gap:2px;z-index:90;transition:.25s width;}
#nav.expanded{width:200px;}
.ni{width:40px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);cursor:pointer;color:var(--muted2);font-size:17px;transition:.15s;position:relative;flex-shrink:0;}
#nav.expanded .ni{width:184px;justify-content:flex-start;padding-left:12px;gap:9px;}
.ni:hover{background:var(--bg3);color:var(--accent);}
.ni.on{background:rgba(0,212,255,.1);color:var(--accent);border-right:2px solid var(--accent);}
.nl{display:none;font-size:12px;font-weight:600;white-space:nowrap;}
#nav.expanded .nl{display:block;}
.nb{position:absolute;top:5px;right:5px;background:var(--danger);color:#fff;font-size:9px;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff);}
#nav.expanded .nb{position:static;margin-left:auto;}
.nsep{width:30px;height:1px;background:var(--border);margin:3px 0;}
.nexp{margin-top:auto;width:40px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted2);font-size:13px;transition:.15s;}
.nexp:hover{color:var(--accent);}

/* APP SHELL */
#app{position:fixed;left:52px;top:52px;right:0;bottom:0;overflow:hidden;transition:.25s left;display:none;}
body.nex #app{left:200px;}
.pg{display:none;height:100%;flex-direction:column;overflow:hidden;animation:fadeIn .15s ease;}
.pg.on{display:flex;}

/* SECTION HEADER */
.sh{padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0;}
.st{font-size:14px;font-weight:700;}
.sa{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap;}

/* DRAWER */
#drw{position:fixed;right:-380px;top:52px;bottom:0;width:365px;background:var(--panel);border-left:1px solid var(--border2);z-index:200;transition:.3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;overflow:hidden;}
.drw-header{padding:11px 14px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:8px;}
.drw-header span{font-size:13px;font-weight:700;color:var(--accent);flex:1;}
.drw-header button{background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;transition:.15s;}
.drw-header button:hover{color:var(--danger);}
#drwb{flex:1;overflow-y:auto;padding:14px;}
#drwa{padding:11px 14px;border-top:1px solid var(--border);display:flex;gap:5px;flex-wrap:wrap;}

/* TOAST */
#toast{position:fixed;bottom:22px;right:22px;z-index:9000;padding:9px 16px;border-radius:var(--r);font-size:12px;font-weight:600;font-family:var(--ff);transform:translateX(120%);transition:.3s cubic-bezier(.2,.8,.2,1);max-width:310px;pointer-events:none;}
#toast.show{transform:translateX(0);}
#toast.ok{background:rgba(0,230,118,.12);border:1px solid var(--success);color:var(--success);}
#toast.err{background:rgba(255,45,85,.12);border:1px solid var(--danger);color:var(--danger);}
#toast.inf{background:rgba(0,212,255,.1);border:1px solid var(--accent);color:var(--accent);}

/* OFFLINE */
#offline-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:8000;background:rgba(255,107,53,.15);border-top:1px solid var(--warn);color:var(--warn);font-size:11px;font-family:var(--ff);padding:5px 16px;text-align:center;}