:root{
  --neo-ink:#101010;
  --neo-paper:#fff8e7;
  --neo-blue:#5267ff;
  --neo-yellow:#ffd84d;
  --neo-pink:#ff7aa8;
  --neo-mint:#72e6b1;
  --neo-sky:#8cc8ff;
  --neo-white:#fff;
  --neo-shadow:#101010;
}
body{
  color:var(--neo-ink)!important;
  background:var(--neo-paper)!important;
  font-family:"Trebuchet MS",Arial,sans-serif!important;
}
body::before{display:none!important}
h1,h2,.section-title,.welcome-title,.stat-value{
  font-family:"Arial Black",Impact,sans-serif!important;
  letter-spacing:-.035em!important;
}
.dashboard-sidebar,.site-sidebar,.sidebar{
  border-right:3px solid var(--neo-ink)!important;
  background:var(--neo-blue)!important;
  box-shadow:7px 0 0 var(--neo-ink)!important;
}
.brand-mark{
  width:40px!important;
  height:40px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
  display:block!important;
}
.dashboard-sidebar nav a,.dashboard-sidebar button,
.site-sidebar nav a,.site-sidebar button,
.sidebar nav a,.sidebar button{
  border:2px solid transparent!important;
  border-radius:4px!important;
  font-weight:900!important;
}
.dashboard-sidebar nav a.active,.dashboard-sidebar nav a:hover,
.site-sidebar nav a.active,.site-sidebar nav a:hover,
.sidebar nav a.active,.sidebar nav a:hover{
  border-color:var(--neo-ink)!important;
  color:var(--neo-ink)!important;
  background:var(--neo-yellow)!important;
  box-shadow:3px 3px 0 var(--neo-ink)!important;
}
.sidebar-plan{
  border:3px solid var(--neo-ink)!important;
  border-radius:4px!important;
  color:var(--neo-ink)!important;
  background:var(--neo-pink)!important;
  box-shadow:5px 5px 0 var(--neo-ink)!important;
}
.sidebar-plan small{color:#292929!important}
.sidebar-plan a,.sidebar-plan button{
  border:2px solid var(--neo-ink)!important;
  border-radius:3px!important;
  color:var(--neo-ink)!important;
  background:#fff!important;
  box-shadow:2px 2px 0 var(--neo-ink)!important;
}
.profile,.site-profile,.discord-profile{border-top:3px solid var(--neo-ink)!important}
/* Discord avatar must stay circular - override neobrutal square corners */
.discord-avatar,.discord-avatar-fallback{
  border:3px solid var(--neo-ink)!important;
  border-radius:50%!important;
}
.avatar,.site-avatar{
  border:3px solid var(--neo-ink)!important;
  border-radius:4px!important;
}
/* Profile card layout */
.discord-profile{
  position:relative;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 22px!important;
  gap:10px;
  align-items:center;
  margin-top:10px;
  padding:10px 10px;
  border-top:3px solid var(--neo-ink)!important;
  border-bottom:0!important;
  border-left:0!important;
  border-right:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.discord-avatar-wrap{
  position:relative;
  width:42px;
  height:42px;
  flex-shrink:0;
}
.discord-avatar-fallback{
  display:grid;
  width:42px!important;
  height:42px!important;
  place-items:center;
  border:2px solid var(--neo-ink)!important;
  border-radius:50%!important;
  background:#fff!important;
  color:var(--neo-ink);
  font-size:16px;
  font-weight:900;
}
.discord-avatar{
  display:none;
  width:42px!important;
  height:42px!important;
  border:2px solid var(--neo-ink)!important;
  border-radius:50%!important;
  object-fit:cover;
  background:#fff!important;
}
.discord-user-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
.discord-user-name{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--neo-ink);
  font-size:13px;
  font-weight:900;
  line-height:1.25;
}
.discord-user-role{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#64748b;
  line-height:1;
}
.discord-user-role.admin{color:#e11d48!important}
.profile-menu-toggle{
  width:22px!important;
  height:22px!important;
  padding:0!important;
  border:0!important;
  border-radius:4px!important;
  color:var(--neo-ink)!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  cursor:pointer;
  font-size:14px;
  font-weight:900;
  display:flex!important;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease!important;
  line-height:1;
}
.profile-menu-toggle:hover{
  transform:none!important;
  background:rgba(0,0,0,0.08)!important;
  box-shadow:none!important;
}
.profile-menu-toggle[aria-expanded="true"]{transform:rotate(180deg)!important}
.profile-menu{
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  z-index:20;
  display:none;
  width:190px;
  padding:10px;
  border:3px solid var(--neo-ink)!important;
  border-radius:5px!important;
  color:var(--neo-ink);
  background:#fff!important;
  box-shadow:5px 5px 0 var(--neo-ink)!important;
}
.profile-menu.open{display:block}
.profile-logout{
  display:block!important;
  width:100%!important;
  padding:8px 10px!important;
  border:2px solid var(--neo-ink)!important;
  border-radius:3px!important;
  color:var(--neo-ink)!important;
  background:var(--neo-pink)!important;
  box-shadow:2px 2px 0 var(--neo-ink)!important;
  text-align:left;
  cursor:pointer;
  font-weight:800;
  transform:none!important;
}
.profile-logout:hover{
  transform:translate(1px,1px)!important;
  box-shadow:1px 1px 0 var(--neo-ink)!important;
}
.discord-badge{
  position:absolute;
  right:-3px;
  bottom:-2px;
  display:grid;
  width:18px;
  height:18px;
  place-items:center;
  border:2px solid var(--neo-ink)!important;
  border-radius:50%!important;
  color:#fff;
  background:#5865f2;
  font-size:9px;
  font-weight:900;
  z-index:2;
  box-shadow:none!important;
}
.discord-badge.admin{
  right:-8px!important;
  bottom:-3px!important;
  width:auto!important;
  height:16px!important;
  padding:1px 5px!important;
  border-radius:4px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#e11d48,#be123c)!important;
  border:2px solid var(--neo-ink)!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
  box-shadow:none!important;
}
/* dark mode overrides for profile */
body[data-theme="dark"] .discord-user-name{color:#f7f1df}
body[data-theme="dark"] .discord-user-role.admin{color:#fb7185!important}
body[data-theme="dark"] .profile-menu-toggle{color:#f7f1df!important}
body[data-theme="dark"] .profile-menu{color:#f7f1df;background:#1b1b1b!important;border-color:#f7f1df!important;box-shadow:5px 5px 0 #5267ff!important}
body[data-theme="dark"] .profile-logout{color:#f7f1df!important;background:#5a2438!important;border-color:#f7f1df!important}
body[data-theme="dark"] .discord-avatar,body[data-theme="dark"] .discord-avatar-fallback{border-color:#f7f1df!important;color:#f7f1df;background:#181818!important}
.panel,.summary-card,.stat-card,.session-card,.connection-details,.mcp-details{
  border:3px solid var(--neo-ink)!important;
  border-radius:5px!important;
  color:var(--neo-ink)!important;
  background:var(--neo-white)!important;
  box-shadow:6px 6px 0 var(--neo-shadow)!important;
}
.summary-card:nth-child(1),.stat-card:nth-child(1){background:var(--neo-yellow)!important}
.summary-card:nth-child(2),.stat-card:nth-child(2){background:var(--neo-mint)!important}
.summary-card:nth-child(3),.stat-card:nth-child(3){background:var(--neo-pink)!important}
.summary-card:nth-child(4),.stat-card:nth-child(4){background:var(--neo-sky)!important}
.session-card,.connection-details,.mcp-details{margin-bottom:12px!important}
button:not(.profile-menu-toggle):not(.sidebar-theme-switch):not(.profile-logout),.button,.new-session-button,.topbar-icon,.panel-link{
  border:3px solid var(--neo-ink)!important;
  border-radius:4px!important;
  color:var(--neo-ink)!important;
  background:var(--neo-yellow)!important;
  box-shadow:4px 4px 0 var(--neo-ink)!important;
  font-weight:900!important;
}
button:not(.profile-menu-toggle):not(.sidebar-theme-switch):not(.profile-logout):hover,.button:hover,.new-session-button:hover,.topbar-icon:hover,.panel-link:hover{
  transform:translate(2px,2px)!important;
  box-shadow:2px 2px 0 var(--neo-ink)!important;
}
button.danger,.stop-session{background:var(--neo-pink)!important}
.badge,.status,.metric{
  border:2px solid var(--neo-ink)!important;
  border-radius:3px!important;
  color:var(--neo-ink)!important;
  box-shadow:2px 2px 0 var(--neo-ink)!important;
}
.saved,.completed{background:var(--neo-mint)!important}
.running{background:var(--neo-sky)!important}
.failed,.missing{background:var(--neo-pink)!important}
input,select,code{
  border-color:var(--neo-ink)!important;
  color:var(--neo-ink)!important;
  background:#fff!important;
}
table th,table td{border-color:var(--neo-ink)!important}
details{
  border:2px solid var(--neo-ink)!important;
  border-radius:3px!important;
  background:#fff!important;
}
.quick-start{
  display:flex!important;
  flex-direction:column!important;
  color:var(--neo-ink)!important;
  background:var(--neo-yellow)!important;
  padding:20px!important;
  box-sizing:border-box!important;
}
.quick-start p{color:#333!important;margin-bottom:12px!important}
.quick-step{display:flex;align-items:center;gap:10px;margin:8px 0!important;font-size:12px;font-weight:700}
.quick-step span{
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border:2px solid var(--neo-ink)!important;
  border-radius:3px!important;
  color:var(--neo-ink)!important;
  background:#fff!important;
  box-shadow:2px 2px 0 var(--neo-ink)!important;
}
.quick-start a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:fit-content!important;
  margin-top:14px!important;
  margin-bottom:2px!important;
  padding:8px 14px!important;
  border:2px solid var(--neo-ink)!important;
  border-radius:4px!important;
  color:var(--neo-ink)!important;
  background:#fff!important;
  box-shadow:3px 3px 0 var(--neo-ink)!important;
  font-size:11px!important;
  font-weight:900!important;
  text-decoration:none!important;
  transition:transform .12s ease,box-shadow .12s ease!important;
}
.quick-start a:hover{
  transform:translate(1px,1px)!important;
  box-shadow:2px 2px 0 var(--neo-ink)!important;
  background:var(--neo-paper)!important;
}
.login-card,.auth-card{
  width:min(440px,100%);
  padding:34px;
  border:4px solid var(--neo-ink);
  border-radius:5px;
  color:var(--neo-ink);
  background:var(--neo-yellow);
  box-shadow:9px 9px 0 var(--neo-ink);
}
.login-card p,.auth-card p{color:#292929}
.auth-page{display:grid;min-height:100vh;margin:0;padding:24px;place-items:center}
body[data-theme="dark"]{
  --neo-ink:#f7f1df;
  --neo-paper:#111;
  --neo-shadow:#5267ff;
  color:var(--neo-ink)!important;
  background:var(--neo-paper)!important;
}
body[data-theme="dark"] .dashboard-sidebar,
body[data-theme="dark"] .site-sidebar,
body[data-theme="dark"] .sidebar{
  border-color:#f7f1df!important;
  background:#1b1b1b!important;
  box-shadow:7px 0 0 #5267ff!important;
}
body[data-theme="dark"] .panel,
body[data-theme="dark"] .summary-card,
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .session-card,
body[data-theme="dark"] .connection-details,
body[data-theme="dark"] .mcp-details{
  border-color:#f7f1df!important;
  color:#f7f1df!important;
  background:#1b1b1b!important;
  box-shadow:6px 6px 0 #5267ff!important;
}
body[data-theme="dark"] .summary-card:nth-child(1),body[data-theme="dark"] .stat-card:nth-child(1){background:#594a12!important}
body[data-theme="dark"] .summary-card:nth-child(2),body[data-theme="dark"] .stat-card:nth-child(2){background:#164b37!important}
body[data-theme="dark"] .summary-card:nth-child(3),body[data-theme="dark"] .stat-card:nth-child(3){background:#5a2438!important}
body[data-theme="dark"] .summary-card:nth-child(4),body[data-theme="dark"] .stat-card:nth-child(4){background:#203f63!important}
body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] code,body[data-theme="dark"] details{
  color:#f7f1df!important;
  background:#171717!important;
}
img,video,iframe,canvas{max-width:100%}
button,a,input,select,summary{touch-action:manipulation}
.table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.job-meta,.session-id,code{overflow-wrap:anywhere}
@media(max-width:1100px){
  /* Only shrink sidebar on pages without the app-sidebar drawer (has-app-sidebar is
     added by the sidebar script immediately on pages that use app-sidebar.css) */
  body:not(.has-app-sidebar) .dashboard-sidebar,
  body:not(.has-app-sidebar) .site-sidebar,
  body:not(.has-app-sidebar) .sidebar{width:188px!important}
  main.dashboard-main,main.sessions-main,.sidebar+main{
    width:calc(100% - 188px)!important;
    margin-left:188px!important;
    padding-inline:20px!important;
  }
  .dashboard-layout{grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr)!important}
  .stat-grid,.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .connection-grid,.mcp-grid{grid-template-columns:130px minmax(0,1fr)!important}
}
@media(max-width:860px){
  html,body{height:auto!important;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important}
  /* Sidebar mobile rules — only for pages without the app-sidebar.css drawer */
  body:not(.has-app-sidebar) .dashboard-sidebar,
  body:not(.has-app-sidebar) .site-sidebar,
  body:not(.has-app-sidebar) .sidebar{
    position:sticky!important;
    top:0!important;
    z-index:100!important;
    display:block!important;
    width:100%!important;
    min-height:auto!important;
    padding:10px 12px!important;
    border-right:0!important;
    border-bottom:3px solid var(--neo-ink)!important;
    box-shadow:0 4px 12px rgba(0,0,0,0.15)!important;
  }
  body:not(.has-app-sidebar) .dashboard-sidebar .brand,
  body:not(.has-app-sidebar) .site-sidebar .brand,
  body:not(.has-app-sidebar) .sidebar .brand{padding:0 4px 8px!important}
  body:not(.has-app-sidebar) .dashboard-sidebar nav,
  body:not(.has-app-sidebar) .site-sidebar nav,
  body:not(.has-app-sidebar) .sidebar nav{
    display:flex!important;
    width:100%;
    padding:3px 2px 5px!important;
    flex-flow:row nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  body:not(.has-app-sidebar) .dashboard-sidebar nav::-webkit-scrollbar,
  body:not(.has-app-sidebar) .site-sidebar nav::-webkit-scrollbar,
  body:not(.has-app-sidebar) .sidebar nav::-webkit-scrollbar{
    display:none!important;
  }
  body:not(.has-app-sidebar) .sidebar-menu{display:contents!important}
  body:not(.has-app-sidebar) .dashboard-sidebar nav a,
  body:not(.has-app-sidebar) .site-sidebar nav a,
  body:not(.has-app-sidebar) .sidebar nav a,
  body:not(.has-app-sidebar) .dashboard-sidebar nav button,
  body:not(.has-app-sidebar) .site-sidebar nav button,
  body:not(.has-app-sidebar) .sidebar nav button{
    width:auto!important;
    min-width:max-content;
    min-height:44px;
    padding:10px 14px!important;
    font-size:13px!important;
  }
  body:not(.has-app-sidebar) .dashboard-sidebar nav form,
  body:not(.has-app-sidebar) .site-sidebar nav form,
  body:not(.has-app-sidebar) .sidebar nav form{display:flex;flex:0 0 auto;margin:0!important}
  .sidebar-plan{display:none!important}
  /* discord-profile flex override: only for pages without app-sidebar drawer */
  body:not(.has-app-sidebar) .discord-profile,
  body:not(.has-app-sidebar) .site-profile,
  body:not(.has-app-sidebar) .profile{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px 10px!important;
    border-top:2px solid var(--neo-ink)!important;
    margin-top:10px!important;
  }
  main.dashboard-main,main.sessions-main,.sidebar+main{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100vh - 120px)!important;
    margin:0!important;
    padding:18px 14px 40px!important;
  }
  .dashboard-topbar,.top{align-items:flex-start!important;flex-wrap:wrap}
  .dashboard-layout{display:block!important}
  .primary-column,.secondary-column{display:block!important}
  .dashboard-layout .panel,.primary-column>.panel,.secondary-column>.panel{height:auto!important;min-height:0!important;margin-bottom:18px}
  .dashboard-layout .live-panel{height:auto!important;aspect-ratio:16/9}
  .dashboard-layout .live-stage{height:100%!important;min-height:0!important}
  .logs-panel{max-height:440px!important}
  #jobs{max-height:360px!important}
  .activity-panel{overflow:auto!important}
  .activity-table{min-width:100%}
  .quick-start{min-height:auto!important}
  .page-hero{margin-bottom:18px!important}
  .session{align-items:flex-start!important}
  .browser-workspace{min-height:240px!important;height:auto!important;aspect-ratio:16/9!important}
  .remote-login iframe{min-height:220px!important;height:100%!important;aspect-ratio:16/9!important}
  .browser-empty{min-height:200px!important}
}
@media(max-width:600px){
  .dashboard-sidebar,.site-sidebar,.sidebar{padding:8px 10px!important}
  main.dashboard-main,main.sessions-main,.sidebar+main{padding:14px 10px 34px!important}
  .welcome-title,.top h1,h1{font-size:clamp(22px,7.5vw,30px)!important;line-height:1.1}
  .welcome-subtitle,.hero-copy{font-size:12px!important}
  .topbar-actions,.actions{display:grid!important;width:100%;grid-template-columns:minmax(0,1fr) auto auto;gap:8px!important}
  .new-session-button,.button{min-height:44px;justify-content:center}
  .stat-grid,.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stat-card,.summary-card{min-height:92px!important;padding:12px 14px!important}
  .stat-value{font-size:22px!important;margin-top:6px!important}
  .stat-label{font-size:11px!important}
  .stat-note{font-size:10px!important}
  .panel{padding:14px!important}
  .dashboard-layout .live-panel{padding:0!important}
  .job-head{grid-template-columns:36px minmax(0,1fr)!important;gap:10px!important}
  .job-actions{grid-column:1/-1;justify-content:flex-start!important}
  .analytics,.metrics{gap:6px!important}
  .metric{font-size:10px!important;padding:4px 7px!important}
  .session{gap:12px!important}
  .session-site{width:100%}
  .session .danger{width:100%}
  .connection-grid,.mcp-grid{grid-template-columns:1fr!important}
  .connection-actions,.actions{flex-direction:column}
  .connection-actions button,.actions button{width:100%;min-height:44px}
  .browser-workspace{min-height:200px!important;height:auto!important;aspect-ratio:16/9!important}
  .remote-login iframe{min-height:180px!important;height:100%!important;aspect-ratio:16/9!important}
  .browser-empty{min-height:180px!important}
  table{min-width:100%}
  video{max-width:100%!important}
  .login-card,.auth-card{padding:22px!important;box-shadow:6px 6px 0 var(--neo-ink)!important}
}
@media(max-width:380px){
  main.dashboard-main,main.sessions-main,.sidebar+main{padding-inline:8px!important}
  .stat-card,.summary-card,.panel{box-shadow:4px 4px 0 var(--neo-shadow)!important}
  .brand-copy span{display:none!important}
  .stat-grid,.summary-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}