/* ═══════════════════════════════════════════════════════════════
   ONLINE MODE THEME (data-studio-mode="online")
   comfyui.goerps.com pe naya UI — local mode pe zero effect.
   ═══════════════════════════════════════════════════════════════ */
html[data-studio-mode="online"]{
  --bg:#0a0e1a; --bg2:#0f1526; --bg3:#16203a; --bg4:#1c2a4a;
  --border:rgba(148,163,255,.12); --border2:rgba(148,163,255,.22);
  --text:#eef2ff; --text2:#9aa7c7; --text3:#5c6b8f;
  --accent:#6d5df6; --accent2:#9b8bff; --accent-bg:rgba(109,93,246,.16);
  --green:#2dd4a7; --green-bg:rgba(45,212,167,.12);
  --amber:#fbbf24; --amber-bg:rgba(251,191,36,.12);
  --red:#fb7185; --red-bg:rgba(251,113,133,.12);
  --purple:#a78bfa; --purple-bg:rgba(167,139,250,.14);
  --r:12px; --r-sm:9px;
  --grad:linear-gradient(135deg,#6d5df6 0%,#8b5cf6 50%,#d946ef 100%);
}

/* ── login ── */
html[data-studio-mode="online"] #login-overlay{
  background:radial-gradient(1200px 600px at 20% -10%,rgba(109,93,246,.35),transparent 60%),
             radial-gradient(900px 500px at 100% 110%,rgba(217,70,239,.22),transparent 55%),
             #0a0e1a;
}
html[data-studio-mode="online"] #login-overlay > div{
  background:rgba(15,21,38,.9);
  border:1px solid var(--border2);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
}
html[data-studio-mode="online"] #login-overlay > div > div:first-child{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:26px;
}
html[data-studio-mode="online"] #login-btn{
  background:var(--grad) !important;
  border-radius:10px !important;
}

/* ── sidebar ── */
html[data-studio-mode="online"] .sidebar{
  background:linear-gradient(180deg,#0f1526,#0c1220);
  border-right:1px solid var(--border);
}
html[data-studio-mode="online"] .logo{
  background:linear-gradient(135deg,rgba(109,93,246,.14),rgba(217,70,239,.08));
}
html[data-studio-mode="online"] .logo-icon{
  background:var(--grad);
  border-radius:10px;
  box-shadow:0 4px 16px rgba(109,93,246,.4);
}
html[data-studio-mode="online"] .nav-item:hover{background:rgba(109,93,246,.1);}
html[data-studio-mode="online"] .nav-item.active{
  background:var(--accent-bg);
  box-shadow:inset 3px 0 0 var(--accent);
}
html[data-studio-mode="online"] .nav-filter-bar{background:var(--bg2);}

/* ── topbar ── */
html[data-studio-mode="online"] .topbar{
  background:rgba(15,21,38,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  position:relative;
  z-index:500;
}
html[data-studio-mode="online"] .top-icon{background:var(--grad) !important;color:#fff !important;}

/* ── content / cards ── */
html[data-studio-mode="online"] .content{padding:20px 22px;}
html[data-studio-mode="online"] .card,
html[data-studio-mode="online"] .dash-panel,
html[data-studio-mode="online"] .model-select-wrap .model-dropdown,
html[data-studio-mode="online"] .of-panel,
html[data-studio-mode="online"] .tools-dd-menu{
  background:linear-gradient(180deg,rgba(22,32,58,.75),rgba(15,21,38,.9));
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(2,6,20,.35);
  z-index:9999!important;
}
html[data-studio-mode="online"] .dash-panel-h{
  border-bottom:1px solid var(--border);
}
html[data-studio-mode="online"] .btn-primary{
  background:var(--grad);
  border-radius:10px;
  box-shadow:0 4px 14px rgba(109,93,246,.3);
}
html[data-studio-mode="online"] .btn-primary:hover:not(:disabled){filter:brightness(1.12);}
html[data-studio-mode="online"] .dash-launch-btn{
  border-radius:12px;
  background:linear-gradient(180deg,rgba(22,32,58,.7),rgba(15,21,38,.85));
  border:1px solid var(--border);
  transition:transform .12s, border-color .12s;
}
html[data-studio-mode="online"] .dash-launch-btn:hover{border-color:var(--accent);transform:translateY(-1px);}

/* inputs */
html[data-studio-mode="online"] textarea,
html[data-studio-mode="online"] input[type=text],
html[data-studio-mode="online"] input[type=number],
html[data-studio-mode="online"] input[type=password],
html[data-studio-mode="online"] select{
  background:rgba(10,14,26,.7);
  border-color:var(--border2);
  border-radius:9px;
}
html[data-studio-mode="online"] textarea:focus,
html[data-studio-mode="online"] input:focus,
html[data-studio-mode="online"] select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(109,93,246,.15);}

/* gallery tiles */
html[data-studio-mode="online"] .g-thumb{border-radius:12px;border:1px solid var(--border);overflow:hidden;}
html[data-studio-mode="online"] .g-thumb img{border-radius:12px;}

/* status bar */
html[data-studio-mode="online"] .status-bar{
  background:rgba(109,93,246,.06);
  border-top:1px solid var(--border);
}

/* scrollbars subtle */
html[data-studio-mode="online"] ::-webkit-scrollbar{width:5px;}
html[data-studio-mode="online"] ::-webkit-scrollbar-thumb{background:rgba(148,163,255,.25);border-radius:4px;}

/* ── mobile tweaks for online ─────────────────────────────────────────────── */
@media(max-width:820px){
  /* Disable heavy GPU blur shaders on phones to prevent UI lag/freezing */
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-studio-mode="online"] .topbar {
    background: #0f1526 !important;
  }
  html[data-studio-mode="online"] .card,
  html[data-studio-mode="online"] .dash-panel,
  html[data-studio-mode="online"] .model-select-wrap .model-dropdown,
  html[data-studio-mode="online"] .of-panel,
  html[data-studio-mode="online"] .tools-dd-menu {
    box-shadow: 0 4px 12px rgba(0,0,0,0.28) !important;
    background: #141c30 !important;
  }
  .shell {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

@media(max-width:680px){
  html[data-studio-mode="online"] .content{padding:14px;}
  html[data-studio-mode="online"] .sidebar{
    width:min(var(--sidebar),88vw);
    background:linear-gradient(180deg,#0f1526,#0a0e1a);
  }

  /* topbar — sirf zaroori cheezein */
  html[data-studio-mode="online"] .topbar{padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));}
  html[data-studio-mode="online"] #mode-online-btn{
    padding:6px 8px;font-size:10px;min-height:40px;
  }
  html[data-studio-mode="online"] #mode-online-lbl{font-size:10px;}
  html[data-studio-mode="online"] .top-right #of-confirm-wrap{
    width:40px;height:40px;padding:0;justify-content:center;flex-shrink:0;
  }
  html[data-studio-mode="online"] .top-right #of-confirm-wrap input{width:20px;height:20px;}
  html[data-studio-mode="online"] .top-right #of-btn{
    width:40px;height:40px;padding:0;justify-content:center;font-size:16px;
  }
  html[data-studio-mode="online"] .top-right #of-btn span{display:none;}

  /* login — touch friendly */
  html[data-studio-mode="online"] #login-overlay > div{padding:22px 18px;border-radius:18px;}
  html[data-studio-mode="online"] #login-overlay input{
    font-size:16px;padding:13px 14px;border-radius:10px;
  }
  html[data-studio-mode="online"] #login-btn{padding:14px;font-size:15px;border-radius:12px!important;}

  /* cards stack + full width */
  html[data-studio-mode="online"] .card,
  html[data-studio-mode="online"] .dash-panel{border-radius:14px;}

  /* bottom tab bar — online gradient accent */
  html[data-studio-mode="online"] .mob-tabbar{
    background:rgba(10,14,26,.88);
    border-top:1px solid rgba(148,163,255,.18);
  }
  html[data-studio-mode="online"] .mob-tab.active{color:#9b8bff;}
  html[data-studio-mode="online"] .mob-tab.active .mob-tab-ico{
    text-shadow:0 0 14px rgba(109,93,246,.65);
  }

  /* auto-mode bar tabbar ke upar rahe */
  html[data-studio-mode="online"] #auto-status-bar{
    bottom:calc(58px + env(safe-area-inset-bottom));
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }

  /* folder panel — bottom sheet style */
  html[data-studio-mode="online"] #of-panel{
    position:fixed!important;top:auto;bottom:calc(58px + env(safe-area-inset-bottom));
    left:10px;right:10px;width:auto!important;max-width:none;
    border-radius:14px;border:1px solid rgba(148,163,255,.2);
    background:linear-gradient(180deg,#16203a,#0f1526);
    box-shadow:0 -8px 32px rgba(0,0,0,.5);
    z-index:220;max-height:min(62vh,480px);overflow-y:auto;
  }

  /* jobs menu — dropdown chip ke neeche hi rahe (mobile compact) */
  html[data-studio-mode="online"] #bg-jobs-menu{
    max-height:min(55vh,420px);overflow-y:auto;
  }
}

/* medium phones — topbar aur bhi compact */
@media(max-width:520px){
  html[data-studio-mode="online"] .top-title{max-width:34vw;font-size:12px;}
  html[data-studio-mode="online"] #mode-online-btn span{display:none;}
  html[data-studio-mode="online"] #mode-online-btn{
    width:38px;height:38px;padding:0;justify-content:center;
  }
  html[data-studio-mode="online"] #bg-jobs-chip{max-width:56px!important;}
}
@media(max-width:420px){
  html[data-studio-mode="online"] #of-confirm-wrap{display:none;}
  html[data-studio-mode="online"] .top-right{gap:3px;}
}