:root{font-family:Inter,system-ui,-apple-system,sans-serif;color:#20283a;background:#f3f5f9;font-size:14px;--accent:#5146e5;--muted:#69748a;--line:#e5e9f1}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:white;color:#34405a;padding:9px 13px;white-space:nowrap}button:hover{background:#eef0fc}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.primary{background:var(--accent);color:white;border-color:var(--accent);font-weight:650}.primary:hover{background:#4034cc}.danger{color:#b42338}
.login{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 20% 10%,#e5e6ff,transparent 55%),#f3f5f9}.login-card{width:min(100%,410px);padding:38px;background:white;border:1px solid var(--line);border-radius:24px;box-shadow:0 25px 75px #293c7020}.brand-mark{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:#5146e5;color:white;font-weight:800;font-size:23px;font-family:ui-monospace,monospace}.login-card .brand-mark{margin-bottom:24px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--muted);margin:0 0 8px}h1{font-size:28px;letter-spacing:-.04em;margin:0 0 8px}p,small{color:var(--muted)}.login-card p:not(.eyebrow):not(.error){line-height:1.6;margin:0}.login-card form{display:grid;gap:15px;margin:24px 0 10px}.login-card label{display:grid;gap:8px;font-weight:600}.login-card input{border:1px solid #d9dfea;border-radius:9px;padding:12px;width:100%;outline-color:var(--accent);color:#20283a}.login-card button{display:flex;justify-content:space-between;padding:13px 15px}.error{color:#b42338;margin:0;min-height:18px;font-size:13px}
.app{display:grid;grid-template-columns:235px minmax(0,1fr);height:100dvh;min-height:0}aside{background:#fff;border-right:1px solid var(--line);padding:23px 15px;display:flex;flex-direction:column;gap:13px;min-width:0;min-height:0;overflow:auto}.brand{display:flex;align-items:center;gap:11px;margin:0 4px 20px}.brand small{display:block;margin-top:3px}.sidecontent{min-width:0}.workspace-home{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:9px;background:#eeedff;color:#5146e5;font-weight:650;margin-bottom:16px}.field-label{font-size:12px;color:var(--muted);display:block;margin-bottom:7px}select{width:100%;background:white;border:1px solid var(--line);padding:9px;border-radius:9px;color:#34405a}.section-label{margin-top:26px}.tree{display:grid;gap:4px;max-height:32vh;overflow:auto}.tree button{text-align:left;border:0;background:transparent;overflow:hidden;text-overflow:ellipsis;padding:10px 11px;font-size:12px}.tree button:hover{background:#f0f2f8}.tree button.active{background:#eeedff;color:#5146e5;font-weight:650}.empty-sessions{color:var(--muted);font-size:12px;padding:7px 10px}.quick-actions{display:grid;gap:5px}.nav{text-align:left;display:flex;gap:10px;align-items:center;border:none}.app-icon{display:grid;place-items:center;flex:none;width:31px;height:31px;background:#f0f1ff;color:var(--accent);border-radius:8px;font-size:16px;font-weight:700}.sidebottom{margin-top:auto;color:var(--muted);font-size:12px;display:grid;gap:9px}.sidebottom button{text-align:left}.file-link{color:#34405a;text-decoration:none;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:9px;padding:9px 13px;font-size:14px}.file-link:hover{background:#eef0fc}.side-note{display:flex;gap:8px;align-items:center;padding:4px}.dot{width:8px;height:8px;border-radius:50%;background:#2eab78}
.workspace{padding:32px;min-width:0;min-height:0;max-width:1800px;width:100%;height:100%;margin:auto;display:flex;flex-direction:column}.workspace-header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:24px;flex:none}.heading-group{display:flex;gap:12px;align-items:center}.actions,.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#8a92a3}.connection{display:flex;align-items:center;gap:7px;font-size:12px;color:#69748a;max-width:220px;overflow:hidden;text-overflow:ellipsis}.connection:before{content:'';width:8px;height:8px;flex:none;border-radius:50%;background:#c6983c}.connection[data-state=online]{color:#23805b}.connection[data-state=online]:before{background:#2eab78}.connection[data-state=offline]{color:#b42338}.connection[data-state=offline]:before{background:#b42338}
.terminal-card{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:white;overflow:hidden}.terminal-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line);flex:none}.session-heading{display:flex;align-items:center;gap:9px;min-width:0}.session-heading div{min-width:0}.session-heading strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-heading small{display:block;font-size:11px;margin-top:3px}.terminal-toolbar button{font-size:12px;padding:7px 10px}.terminal-card #terminal{flex:1;min-height:0;min-width:0;overflow:hidden;background:#141b2b;padding:13px 12px}.terminal-card .xterm{height:100%}.terminal-footer{background:#fff;border-top:1px solid var(--line);padding:10px 14px;display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;flex:none}.page-footer{display:flex;justify-content:space-between;gap:10px;padding:13px 3px 0;font-size:12px;color:var(--muted);flex:none}#toggle{display:none}
@media(max-width:760px){.app{display:block;position:relative}.workspace{padding:18px 12px}.workspace-header{align-items:flex-start;gap:12px;margin-bottom:15px}.workspace-header h1{font-size:24px}.workspace-header .eyebrow{font-size:9px}.heading-group{gap:8px}.actions{justify-content:flex-end;gap:7px}.actions .connection{font-size:11px}.actions .primary{font-size:12px;padding:8px 10px}.crumb{font-size:12px}#toggle{display:block;padding:8px}aside{display:none;position:absolute;inset:0 auto 0 0;width:min(260px,84vw);z-index:5;box-shadow:15px 0 45px #293c7030}aside.open{display:flex}.terminal-toolbar{padding:10px;gap:8px}.session-heading small{display:none}.tools{gap:5px}.terminal-toolbar button{font-size:11px;padding:6px 8px}.terminal-card #terminal{padding:8px 5px}.terminal-footer,.page-footer{font-size:10px}.terminal-footer span:last-child{display:none}.login-card{padding:30px}.page-footer{flex-wrap:wrap}}
.upload-toast{position:fixed;right:18px;bottom:18px;z-index:50;max-width:min(420px,90vw);padding:11px 14px;border-radius:10px;background:#17233a;color:#dbeafe;border:1px solid #33466b;box-shadow:0 10px 30px #0b142544;font-size:13px;overflow-wrap:anywhere}.upload-toast.error{background:#3a1721;border-color:#7f2937;color:#fecdd3}


/* Vu Workspace design system */
:root{--accent:#4658d9;--muted:#65738a;--line:#dfe5ee;--ink:#17253a;--surface:#fff;--sidebar:#18263b;color:var(--ink);background:#eef2f7;font-size:14px}
body{min-width:0}button,input,select{font:inherit}button,select{min-height:36px;border-radius:10px;transition:background .16s,border-color .16s,box-shadow .16s}button:hover{background:#f1f4fc;border-color:#bfc9e3}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #7787ff;outline-offset:3px}.primary{background:var(--accent);border-color:var(--accent);box-shadow:0 3px 8px #4658d926}.primary:hover{background:#3547c5}.danger{color:#b42338}
.login{min-height:100dvh;background:radial-gradient(ellipse at 13% 12%,#dce4ff 0,transparent 48%),radial-gradient(ellipse at 90% 90%,#dcece9 0,transparent 45%),#eef2f7;padding:24px}.login-card{width:min(100%,440px);border-radius:26px;padding:40px;box-shadow:0 22px 70px #23334e18;border:1px solid #fff}.login-card h1{font-size:34px;font-weight:780;letter-spacing:-.045em}.login-card p:not(.eyebrow):not(.error){line-height:1.65}.login-card .brand-mark{width:52px;height:52px;border-radius:16px;margin-bottom:25px}.login-card input{min-height:48px;background:#f8f9fc;border-color:#dce3ef}.login-card button{min-height:48px}.brand-mark{background:linear-gradient(145deg,#7181fa,#4457dc);box-shadow:0 5px 14px #2736a64d}.eyebrow{font-size:10px;letter-spacing:.15em}
.app{grid-template-columns:254px minmax(0,1fr)}aside{background:var(--sidebar);color:#eef3ff;border:0;padding:22px 16px;gap:15px;min-height:0;overflow:auto}.brand{margin:0 0 22px;padding:0 4px}.brand strong{font-size:16px;letter-spacing:-.02em}.brand small,aside .eyebrow,aside .field-label,aside .sidebottom,aside .empty-sessions{color:#aebbd0}.brand small{font-size:11px}.nav,aside .tree button,aside .sidebottom button,aside .file-link{color:#dbe4f4;background:transparent;border:1px solid transparent}.nav:hover,aside .tree button:hover,aside .sidebottom button:hover,aside .file-link:hover{background:#263952;border-color:#344961}.nav.active,aside .tree button.active,aside .workspace-home{background:#34466c;color:#e5eaff;border:1px solid #485a83}.tree button{min-height:38px}.sidebottom{border-top:1px solid #344359;padding-top:14px}.sidebottom button,.sidebottom .file-link{border:1px solid #40516a;border-radius:10px}.sidebottom .file-link{display:flex;align-items:center;justify-content:space-between;text-decoration:none;padding:10px 12px;font-size:13px}.workspace{padding:30px 32px;max-width:1900px;margin:0 auto;min-width:0}h1{font-size:31px;font-weight:780;letter-spacing:-.045em}.crumb{font-size:12px;overflow-wrap:anywhere}.actions,.tools{gap:8px}.mobile-menu{display:none}.drawer-shade{display:none}
@media(max-width:900px){.app{grid-template-columns:225px minmax(0,1fr)}.workspace{padding:24px 20px}}
@media(max-width:760px){.app{display:block;position:relative}.workspace{padding:14px 12px max(14px,env(safe-area-inset-bottom));width:100%}h1{font-size:24px}.mobile-menu{display:grid;place-items:center;flex:none;width:44px;height:44px;font-size:20px;padding:0}.drawer-shade:not([hidden]){display:block;position:fixed;inset:0;z-index:19;background:#0d192b88;border:0;border-radius:0;padding:0;width:100%;height:100%}aside{display:none;position:fixed;inset:0 auto 0 0;z-index:20;width:min(310px,86vw);max-width:100%;height:100dvh;padding:20px 16px max(20px,env(safe-area-inset-bottom));box-shadow:12px 0 50px #14223a44;flex-direction:column;align-items:stretch;flex-wrap:nowrap;overflow:auto}aside.open{display:flex}.brand{margin:0 0 16px}.brand small,aside>.eyebrow,.tree,.sidebottom,.sidebottom .dot{display:revert}.sidebottom{display:grid;width:100%;font-size:12px;gap:9px}.sidebottom button{font-size:13px}.tree{display:grid;max-height:none;overflow:visible}aside button,aside select,aside .file-link{min-height:44px}button,select{min-height:44px}input:not([type=checkbox]){font-size:16px}.login{padding:16px}.login-card{padding:28px 24px;border-radius:22px}.login-card h1{font-size:30px}.login-card input{font-size:16px}.login-card button{min-height:48px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Vu Terminal: touch-first shell layout */
.app{height:var(--app-height,100dvh)}aside select{background:#25364d;border-color:#41546f;color:#eef3ff}.app-icon{background:#e9edff;color:#4658d9}aside .app-icon{background:#34476c;color:#c7d0ff}.workspace-header{margin-bottom:18px}.connection{background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 10px;white-space:nowrap;max-width:none}.terminal-card{border:1px solid #dce3ef;border-radius:17px;box-shadow:0 8px 30px #23334a13}.terminal-toolbar{padding:12px 15px}.terminal-card #terminal{background:#141b2b;padding:12px}.terminal-footer{padding:10px 14px}.terminal-keys{display:flex;align-items:center;gap:6px;padding:8px 11px;background:#202b40;border-top:1px solid #35445c;overflow-x:auto;flex:none;scrollbar-width:thin}.terminal-keys button{background:#2d3b53;border:1px solid #43536d;color:#edf2ff;font:600 12px ui-monospace,monospace;min-height:34px;padding:6px 10px;flex:none;box-shadow:none}.terminal-keys button:hover{background:#435573}.terminal-keys button[aria-pressed=true]{background:#6276ee;border-color:#9aa8ff;color:white}.terminal-keys .key-spacer{flex:1}.terminal-keys .key-image{font-family:inherit;background:#3d4f80}.terminal-keys .key-paste{font-family:inherit}.terminal-card .xterm{width:100%}#toggle{display:none}.page-footer{padding-top:10px}
@media(max-width:760px){#toggle{display:grid;width:44px;height:44px;padding:0;place-items:center}.app{height:var(--app-height,100dvh)}aside{position:fixed;height:var(--app-height,100dvh);width:min(310px,86vw)}aside .tree{max-height:34vh;overflow:auto}.workspace{padding:10px 9px max(8px,env(safe-area-inset-bottom));height:100%;min-height:0}.workspace-header{margin-bottom:10px;align-items:center;gap:8px}.heading-group{min-width:0;gap:8px}.heading-group .eyebrow,.heading-group .crumb{display:none}.heading-group h1{margin:0;font-size:22px}.actions{flex-direction:column;align-items:flex-end;gap:4px}.actions .primary{min-height:40px;padding:7px 10px;font-size:12px}.connection{padding:4px 7px;font-size:10px;max-width:150px;white-space:normal;line-height:1.2}.terminal-card{border-radius:12px}.terminal-toolbar{padding:7px 8px;gap:6px}.terminal-toolbar .app-icon{width:28px;height:28px}.terminal-toolbar .tools{flex-wrap:nowrap;gap:4px}.terminal-toolbar button{min-height:40px;padding:5px 7px;font-size:11px;white-space:normal}.session-heading strong{font-size:12px}.terminal-card #terminal{padding:6px 4px}.terminal-keys{padding:6px;gap:5px}.terminal-keys button{min-height:43px;padding:6px 11px}.terminal-keys .key-spacer{display:none}.terminal-footer,.page-footer{display:none}}
@media(max-width:350px){.heading-group h1{font-size:19px}.terminal-toolbar .app-icon{display:none}.actions .primary{font-size:11px}}
@media(max-height:440px) and (max-width:900px){.workspace-header{margin-bottom:5px}.heading-group .eyebrow,.heading-group .crumb,.page-footer,.terminal-footer{display:none}.workspace{padding:5px}.terminal-toolbar{padding:4px 8px}.terminal-keys{padding:3px 6px}.terminal-keys button{min-height:35px}}