/* Remote Browser Vault · Workspace Design System v0.11.8
 * Layered over styles.css to preserve legacy component behaviors and DOM IDs.
 * All functionality remains in app.js; this file contains appearance only.
 */
:root {
  color-scheme: dark;
  --bg: #080c16;
  --panel: #111a2b;
  --panel2: #172238;
  --card: #121c2d;
  --border: #283650;
  --line: #25334a;
  --text: #edf2fc;
  --muted: #98a8c1;
  --accent: #9579ff;
  --accent2: #c0aeff;
  --danger: #ff7e95;
  --good: #61deb6;
  --warn: #eebc6e;
  --radius: 16px;
  --radius-small: 11px;
  --sidebar-width: 268px;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: -.012em;
}
button, input, textarea, select { font: inherit; }
button { transition: background-color .17s ease, border-color .17s ease, color .17s ease, box-shadow .17s ease; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}
::selection { background: rgba(149,121,255,.4); color: #fff; }
::placeholder { color: #7889a4; opacity: 1; }

/* Authentication / setup */
.center-view {
  background:
    radial-gradient(ellipse 44% 45% at 20% 10%,rgba(108,81,220,.28),transparent 100%),
    radial-gradient(ellipse 42% 50% at 88% 83%,rgba(30,124,190,.16),transparent 100%),
    #080c17;
  position:relative;
}
.center-view::before {
  content:"THEOLDGAMER  /  SECURE WORKSPACE";
  position:fixed;top:27px;left:35px;
  font-size:11px;letter-spacing:.23em;font-weight:800;color:#95a4c0;
  pointer-events:none;
}
.center-view .auth-card {
  width:min(470px,calc(100vw - 32px));
  padding:42px;
  border:1px solid rgba(153,166,206,.22);
  background:linear-gradient(145deg,rgba(24,33,55,.97),rgba(11,17,31,.98));
  border-radius:24px;
  box-shadow:0 45px 120px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.025) inset;
}
.center-view .auth-card h1 {font-size:27px;letter-spacing:-.05em;margin-top:24px;}
.center-view .auth-card p {line-height:1.7;}
.brand-mark {
  border-radius:16px;
  background:linear-gradient(135deg,#ad8dff 0%,#7659dc 55%,#4d8bce 100%);
  color:white;box-shadow:0 10px 28px rgba(113,82,218,.33);
  letter-spacing:-.08em;
}
.auth-card input,.dialog-form input,.dialog-form select,.dialog-form textarea,.list-toolbar input,.vault-gate input {
  background:#0b1423;border:1px solid #303f58;border-radius:11px;color:#f2f6ff;
}
.auth-card input:focus,.dialog-form input:focus,.dialog-form textarea:focus,.dialog-form select:focus,.vault-gate input:focus {
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(149,121,255,.18);
}
.primary {background:linear-gradient(100deg,#a184ff,#795df1);color:#fff;border:1px solid rgba(211,195,255,.2);box-shadow:0 6px 20px rgba(94,67,194,.17)}
.primary:hover {filter:brightness(1.1)}
.ghost,.toolbar-btn,.icon-btn,.tab-action {
  background:#172137;color:#cbd5ea;border:1px solid #2b3952;
}
.ghost:hover,.toolbar-btn:hover,.icon-btn:hover,.tab-action:hover{background:#22304a;border-color:#43557a;color:#fff}

/* Workspace frame */
#appView.app { grid-template-columns:var(--sidebar-width) minmax(0,1fr);height:100vh;height:100dvh;min-width:0;overflow:hidden; }
#appView .sidebar {
  padding:23px 14px 14px;
  background:linear-gradient(174deg,#111a2b 0%,#0b1423 65%,#0b1220 100%);
  border-right:1px solid #273750;
  box-shadow:8px 0 24px rgba(0,0,0,.08);
  z-index:25;
}
#appView .sidebar .brand {padding:3px 9px 23px;gap:12px;justify-content:flex-start;min-width:0;}
#appView .brand .brand-mark.small {width:43px;height:43px;border-radius:13px;font-size:15px;flex:0 0 43px;}
.brand-identity{display:flex;flex-direction:column;min-width:0;gap:5px;}
#brandText {color:#f5f6ff;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;letter-spacing:-.035em;}
.brand-identity small{font-size:9px;letter-spacing:.125em;font-weight:800;color:#8b9cbd;white-space:nowrap;}
.sidebar-caption {display:flex;gap:10px;align-items:center;color:#7d90ad;font-weight:800;letter-spacing:.15em;font-size:10px;padding:7px 14px 10px;}
.caption-line{height:1px;flex:1;background:#293a56;}
#appView .sidebar-nav{gap:3px;padding:0 4px 3px 1px;scrollbar-color:#53627e transparent;}
#appView .sidebar-nav::-webkit-scrollbar {width:6px;}
#appView .sidebar-nav::-webkit-scrollbar-track {background:transparent;}
#appView .sidebar-nav::-webkit-scrollbar-thumb {border:0;background:#485877;border-radius:9px;}
#appView .sidebar-nav .nav {flex-shrink:0;display:flex;justify-content:flex-start;align-items:center;gap:12px;min-height:43px;width:100%;padding:8px 12px;white-space:normal;border-radius:11px;color:#aab9d0;border:1px solid transparent;text-align:left;font-size:12.5px;font-weight:630;line-height:1.3;}
#appView .sidebar-nav .nav > span:not(.nav-icon){display:inline;min-width:0;}
#appView .sidebar-nav .nav:hover {color:#f1edff;background:#1a2944;border-color:#2a3d5e;}
#appView .sidebar-nav .nav.active {background:linear-gradient(98deg,rgba(148,118,254,.26),rgba(101,89,189,.10));color:#f5f2ff;border:1px solid rgba(157,136,243,.26);box-shadow:inset 3px 0 #aa92ff;}
#appView .nav-icon {display:inline-grid!important;place-items:center;min-width:25px;width:25px;height:26px;flex:0 0 25px;border-radius:8px;background:#1a2841;color:#a6b7d7;font-size:17px;font-weight:600;line-height:1;}
#appView .nav.active .nav-icon{background:rgba(159,129,255,.22);color:#dacdff;}
#appView .nav-section{font-size:9.5px;letter-spacing:.16em;color:#8194b3;padding:22px 12px 8px;}
.sidebar-footer-label {padding:11px 13px 10px;font-size:10px;letter-spacing:.09em;color:#667994;display:flex;align-items:center;justify-content:space-between;gap:6px;}
.sidebar-footer-label span{font-size:8px;color:#a998fa;border:1px solid #4a4277;padding:4px 6px;border-radius:6px;font-weight:800;}
#appView .sidebar-bottom{padding:13px 5px 0;align-items:center;gap:10px;border-color:#2a3951;}
#appView .user-badge{display:block;color:#e5eafb;font-weight:760;font-size:12px;max-width:150px;white-space:nowrap;}
#appView .access-badge{letter-spacing:.03em;font-size:10px;}
#logoutBtn {font-size:11px;padding:9px 10px;flex-shrink:0;}
.sidebar-scrim{display:none;}

#appView .main {
  min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow-y:auto;
  background:
    radial-gradient(ellipse 70% 45% at 80% -15%,rgba(90,86,192,.12),transparent),
    linear-gradient(180deg,#0c1423,#0b1220 64%,#0b1220);
  scrollbar-color:#465776 transparent;
}
.workspace-bar {
  min-height:84px;flex:0 0 84px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px 29px;border-bottom:1px solid #29364e;
  background:rgba(15,24,40,.91);backdrop-filter:blur(12px);
  position:relative;z-index:3;
}
.workspace-heading{display:flex;align-items:center;gap:14px;min-width:0;}
.workspace-title-group{min-width:0;}
.workspace-overline{font-size:9.5px;color:#97a7c6;letter-spacing:.2em;font-weight:780;}
.workspace-title-group h1{font-size:22px;line-height:1.2;margin:6px 0 0;color:#fafbff;letter-spacing:-.04em;font-weight:750;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.workspace-actions{display:flex;align-items:center;gap:14px;}
.workspace-environment{display:inline-flex;align-items:center;gap:9px;color:#9eafca;font-size:11px;white-space:nowrap;}
.env-indicator{width:7px;height:7px;background:#59deb2;border-radius:50%;box-shadow:0 0 0 4px rgba(89,222,178,.1)}
.workspace-quick-nav{border:1px solid #344563;color:#ccd7ef;background:#172239;padding:10px 13px;display:flex;align-items:center;gap:9px;border-radius:10px;font-weight:650;font-size:12px;}
.workspace-quick-nav:hover{border-color:#806ac4;background:#222b48;}
.workspace-quick-nav > span{font-size:20px;line-height:12px;}
kbd{font:inherit;font-size:10px;font-weight:750;color:#8fa1c5;border:1px solid #3a4c6a;background:#101b2e;border-radius:5px;padding:3px 5px;white-space:nowrap;}
.workspace-menu-button{display:none;border:1px solid #344563;background:#1b2840;color:#e7ebff;border-radius:10px;width:40px;height:40px;flex-shrink:0;}

/* Uniform content primitives; scoped to application */
#appView .main > section.panel{width:100%;padding:25px 28px 30px;min-width:0;height:auto;flex:1 0 auto;}
#appView .main > section.panel.is-active-panel:not(#browserPanel){display:block;}
#appView .section-head{gap:18px;margin:2px 0 22px;flex-wrap:wrap;align-items:flex-start;}
#appView .section-head h2{color:#f7f8ff;font-size:22px;letter-spacing:-.04em;font-weight:750;line-height:1.3;}
#appView .section-head p{font-size:12.5px;color:#9aabc7;line-height:1.65;max-width:800px;margin-top:6px;}
#appView .actions{display:flex;gap:8px;flex-wrap:wrap;}
#appView .card{background:linear-gradient(165deg,#142036 0%,#101a2c 100%);border:1px solid #2a3953;border-radius:15px;box-shadow:0 9px 27px rgba(1,5,12,.12);min-width:0;}
#appView .stat{border-radius:15px;}
#appView .stat strong{font-weight:760;letter-spacing:-.055em;}
#appView .stat span{color:#a2b1cb;}
#appView table{border-collapse:separate;border-spacing:0;width:100%;}
#appView th{background:rgba(119,141,191,.06);color:#a3b1cc;font-size:11px;text-transform:uppercase;letter-spacing:.065em;}
#appView td{color:#d9e1f1;}
#appView tr:hover td{background:rgba(145,119,255,.035);}
#appView th,#appView td{border-bottom:1px solid #26364e;padding:13px 14px;}
#appView .table-wrap{border:1px solid #293953;border-radius:12px;overflow:auto;}
#appView .notice{background:#151f33;border:1px solid #33425c;color:#aebed9;border-radius:12px;line-height:1.65;}
#appView .switch-row{background:#111d31;border-color:#2b3b56;}
#appView .pill{background:#1c2942;color:#bac9e2;border-color:#394a66;}
#appView .toolbar-btn,#appView .icon-btn,#appView .ghost{min-height:35px;border-radius:9px;white-space:nowrap;}
#appView select,#appView input:not([type=checkbox]):not([type=radio]):not([type=hidden]),#appView textarea {
  border-radius:10px;color:#eaf0fe;
}
#appView select{background:#101b2e;border:1px solid #33435f;padding:8px 10px;}
#appView .library-card,#appView .detail-card,#appView .update-card{border-radius:15px;}
#appView .vault-item{border-color:#2a3852;}
#appView .vault-item:hover,#appView .vault-item.active{background:#1a2a44;}
#appView .agent-stat-card{background:#152238;border-color:#2e405f;}
#appView .history-row{background:#111e32;border-color:#2a3953;}
#appView .notification-item.unread{border-left:3px solid var(--accent);}
#appView .nav-count{margin-left:3px;}

/* Browser — dedicated workstation instead of generic form content */
#appView .main > #browserPanel.panel.is-active-panel{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;padding:18px 22px 22px;}
#browserPanel .browser-shell{
  min-height:300px;height:100%;flex:1 1 auto;min-width:0;
  grid-template-rows:auto auto auto minmax(0,1fr);
  background:#080f1b;border:1px solid #30415c;border-radius:17px;
  box-shadow:0 20px 65px rgba(0,0,0,.2);
}
#browserPanel .browser-toolbar{background:#111c30;min-width:0;display:grid;grid-template-rows:auto auto;gap:0;padding:0;}
#browserPanel .browser-toolbar-navigation{background:#151f33;padding:13px 15px;gap:8px;display:flex;min-width:0;flex-wrap:nowrap;border-bottom:1px solid #2a3a56;}
#browserPanel .browser-toolbar-navigation .traffic-lights{margin-right:12px;}
#browserPanel .browser-toolbar-navigation .icon-btn{min-width:38px;height:39px;font-size:17px;}
#browserPanel .browser-toolbar-navigation .address-form{min-width:165px;flex:1 1 350px;max-width:none;background:#0b1526;border:1px solid #3d506f;border-radius:11px;height:41px;transition:border-color .2s,box-shadow .2s;}
#browserPanel .browser-toolbar-navigation .address-form:focus-within{border-color:#a28aff;box-shadow:0 0 0 3px rgba(152,125,255,.11)}
#browserPanel .browser-toolbar-navigation .address-form input{font-size:13px;min-width:0;width:100%;height:100%;color:#f1f4ff;}
#browserPanel .scope{font-size:9px;font-weight:800;letter-spacing:.095em;border-radius:5px;}
#browserPanel .browser-toolbar-navigation .toolbar-btn{min-width:36px;height:39px;display:inline-flex;align-items:center;justify-content:center;}
#browserPanel .browser-toolbar-navigation #zoomSelect{min-width:78px;max-width:78px;flex:none;height:38px;}
#browserPanel .browser-toolbar-options{
  background:#0f192b;padding:10px 14px;min-width:0;display:flex;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;gap:7px;scrollbar-width:thin;scrollbar-color:#566788 transparent;
}
#browserPanel .browser-toolbar-options .toolbar-btn,#browserPanel .browser-toolbar-options .toolbar-select{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;min-height:35px;height:35px;padding:7px 11px;
  white-space:nowrap;max-width:none;
}
#browserPanel .browser-toolbar-options #locationSelect{min-width:160px;max-width:205px;}
#browserPanel .browser-toolbar-options #profileSelect{min-width:120px;max-width:165px;}
#browserPanel .browser-toolbar-options .mode-active{color:#f4eeff;border-color:#8b75d8;background:#493975;box-shadow:inset 0 0 0 1px rgba(150,130,255,.2)}
#browserPanel .tabbar{background:#111b2d;border-bottom:1px solid #293a55;min-height:46px;padding:6px 10px;display:flex;align-items:center;}
#browserPanel .browser-tabs{min-width:0;}
#browserPanel .browser-tab{background:#1a2942;border:1px solid #30415b;color:#c4d0e8;border-radius:10px;padding:8px 11px;}
#browserPanel .browser-tab.active{background:#273a5b;border-color:#7766bb;color:white;}
#browserPanel .tab-action{height:32px;min-width:33px;border-radius:9px;}
#browserPanel .browser-status{color:#9baac4;border-color:#27364f;min-height:32px;background:#0e1829;gap:8px;padding:7px 12px;font-size:10px;}
#browserPanel .browser-status > span:last-child{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
#browserPanel .browser-status strong{color:#b8aaff;}
#browserPanel .viewport-wrap{min-height:0;background:radial-gradient(ellipse at 50% 30%,#11182c,#060a13);}
#browserPanel .browser-overlay{background:rgba(8,14,27,.85);color:#a9b6cc;backdrop-filter:blur(5px);}
#browserPanel .tog-home {background:radial-gradient(circle at 52% 34%,#263257 0%,#121930 48%,#0a0f1c 100%);}
#browserPanel .tog-home-inner{width:min(690px,100%);}
#browserPanel .tog-home-logo{font-size:clamp(42px,5vw,67px);letter-spacing:-.055em;color:#f6f6ff;}
#browserPanel .tog-home-logo span{color:#b2a0ff;}
#browserPanel .tog-home-subtitle{color:#a1afe1;letter-spacing:.44em;font-size:11px;}
#browserPanel .tog-search-form{border-radius:16px;background:#101b31;border-color:#455679;box-shadow:0 15px 45px #03071377;}
#browserPanel .tog-search-form button{border-radius:11px;background:linear-gradient(120deg,#a184ff,#775bf0);}
#browserPanel .tog-home-shortcuts button{background:#1c2944;border-color:#3b4d6d;border-radius:10px;color:#e4eafd;}
#browserPanel .tog-privacy-note{color:#9daaC5!important;}

/* Dialogs, overlays, and command palette */
dialog{background:linear-gradient(155deg,#152138,#0e1829);border:1px solid #3a4b6b;color:#f2f5fe;border-radius:18px;max-height:90vh;overflow:auto;}
dialog::backdrop{background:rgba(4,9,19,.8);backdrop-filter:blur(4px);}
dialog .dialog-form{padding:24px;}
dialog .dialog-head{padding-bottom:13px;border-bottom:1px solid #2a3952;}
dialog .dialog-head h3{font-size:17px;letter-spacing:-.02em;}
.toast{background:#203050;color:#eef1ff;border:1px solid #55668b;box-shadow:0 14px 45px #0008;z-index:150;}
.quick-nav-dialog{width:min(570px,calc(100vw - 28px));padding:0;overflow:hidden;border-radius:18px;}
.quick-nav-head{display:flex;align-items:center;gap:13px;padding:19px 20px 17px;border-bottom:1px solid #2d3c59;}
.quick-nav-head > div{display:grid;gap:4px;flex:1;}
.quick-nav-head strong{font-size:16px;}
.quick-nav-head small{font-size:11px;color:#99abc9;}
.quick-nav-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#312958;color:#c8baff;font-size:26px;}
.quick-nav-input-label{display:flex;align-items:center;margin:17px 20px 13px;padding:0 14px;gap:11px;background:#0b1628;border:1px solid #405272;border-radius:11px;color:#bac7e0;}
.quick-nav-input-label > span{font-size:25px;}
.quick-nav-input-label input{flex:1;min-width:0;padding:14px 0;border:0;outline:0;background:transparent;color:#f2f6ff;font-size:14px;}
.quick-nav-results{padding:0 12px 12px;max-height:min(55vh,420px);overflow:auto;}
.quick-nav-item{display:flex;align-items:center;gap:13px;width:100%;padding:12px;border:1px solid transparent;border-radius:11px;background:transparent;color:#dfe7fa;text-align:left;margin:2px 0;}
.quick-nav-item:hover,.quick-nav-item:focus-visible{background:#233452;border-color:#536489;}
.quick-nav-item-icon{width:34px;height:34px;border-radius:10px;background:#1e2c45;color:#bcaaff;display:grid;place-items:center;font-size:18px;flex:0 0 34px;}
.quick-nav-item-label{flex:1;font-weight:650;}
.quick-nav-item-arrow{font-size:19px;color:#889dbc;}
.quick-nav-empty{text-align:center;color:#9aacca;padding:25px 10px;}
.quick-nav-foot{border-top:1px solid #293951;background:#101b2d;padding:12px 18px;color:#91a1bc;font-size:11px;display:flex;align-items:center;gap:7px;}

/* Responsive: overlay sidebar instead of silently hiding module names or tools. */
@media(max-width:1350px){
  .workspace-environment{display:none;}
  #browserPanel .browser-toolbar-navigation{flex-wrap:wrap;}
  #browserPanel .browser-toolbar-navigation .address-form{order:0;flex:1 1 330px;}
  #browserPanel .browser-toolbar-navigation #bookmarkBtn,#browserPanel .browser-toolbar-navigation #copyRemoteBtn,#browserPanel .browser-toolbar-navigation #pasteRemoteBtn,#browserPanel .browser-toolbar-navigation #zoomSelect,#browserPanel .browser-toolbar-navigation #fullscreenBtn{order:0;}
}
@media(max-width:1040px){
  #appView.app{grid-template-columns:minmax(0,1fr);}
  #appView .sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--sidebar-width);z-index:40;transform:translateX(-103%);transition:transform .22s ease;}
  #appView.sidebar-open .sidebar{transform:translateX(0);}
  #appView .sidebar-scrim{position:fixed;inset:0;z-index:39;border:0;background:rgba(4,8,18,.72);}
  #appView.sidebar-open .sidebar-scrim{display:block;}
  #appView .brand strong,#appView .sidebar-nav .nav span,#appView .sidebar-bottom .user-badge{display:inline;}
  #appView .sidebar-nav .nav{justify-content:flex-start;}
  #appView .sidebar-nav .nav-section{font-size:9.5px;}
  #appView .sidebar-bottom{justify-content:space-between;}
  #appView .toolbar-btn{display:inline-flex;}
  .workspace-menu-button{display:inline-grid;place-items:center;}
  .workspace-bar{padding:12px 21px;}
  #appView .main > section.panel{padding:22px;}
  #appView .main > #browserPanel.panel.is-active-panel{padding:14px;}
}
@media(max-width:760px){
  .workspace-bar{min-height:74px;flex-basis:74px;padding:10px 15px;}
  .workspace-title-group h1{font-size:18px;}
  .workspace-overline{font-size:8px;letter-spacing:.13em;}
  .workspace-quick-nav{padding:9px;gap:7px;}
  .workspace-quick-nav kbd{display:none;}
  #appView .main > section.panel{padding:16px;}
  #appView .section-head h2{font-size:19px;}
  #appView .main > #browserPanel.panel.is-active-panel{padding:8px;}
  #browserPanel .browser-shell{border-radius:12px;}
  #browserPanel .browser-toolbar-navigation{gap:6px;padding:10px;}
  #browserPanel .browser-toolbar-navigation .traffic-lights{display:none;}
  #browserPanel .browser-toolbar-navigation .address-form{order:2;flex:1 1 100%;min-width:100%;}
  #browserPanel .browser-toolbar-navigation #bookmarkBtn,#browserPanel .browser-toolbar-navigation #copyRemoteBtn,#browserPanel .browser-toolbar-navigation #pasteRemoteBtn,#browserPanel .browser-toolbar-navigation #zoomSelect,#browserPanel .browser-toolbar-navigation #fullscreenBtn{order:3;}
  #browserPanel .browser-toolbar-navigation .toolbar-btn{display:inline-flex;}
  #browserPanel .browser-toolbar-options{max-height:none;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;}
  #browserPanel .browser-toolbar-options #incognitoBtn,#browserPanel .browser-toolbar-options .toolbar-select{display:inline-flex;}
  #browserPanel .browser-status{font-size:9px;}
  #browserPanel .tog-search-form{gap:4px;padding:5px 6px 5px 13px;}
  #browserPanel .tog-search-form input{font-size:13px;}
  #browserPanel .tog-search-form button{padding:10px 13px;}
  #appView .stats-row{grid-template-columns:1fr;}
  #appView .two-col{grid-template-columns:1fr;}
  #appView .vault-layout{grid-template-columns:1fr;height:auto;}
  #appView .detail-card{display:block;}
  .center-view::before{left:18px;top:17px;font-size:9px;}
  .center-view .auth-card{padding:30px 24px;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;}}