:root{
  --bg:#FFFFFF;
  --bg-soft:#FFFFFF;
  --panel:#F7FBFE;
  --panel-glass:#F7FBFE;
  --surface-1:#FFFFFF;
  --surface-2:#F5FCFF;
  --surface-3:#EAF8FD;
  --text:#0E2A47;
  --muted:#4D6A86;
  --accent:#0077B6;
  --accent-alt:#023E8A;
  --support:#90E0EF;
  --danger:#023E8A;
  --warn:#90E0EF;
  --ok:#0077B6;
  --border: rgba(2,62,138,0.26);
  --border-soft: rgba(0,119,182,0.16);
  --glow-teal: rgba(0,119,182,0.05);
  --glow-warm: rgba(144,224,239,0.06);
  --shadow: 0 4px 12px rgba(2, 62, 138, 0.06);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"IBM Plex Sans","Manrope","Avenir Next","Helvetica Neue",sans-serif;
  color:var(--text);
  transition: background-color 220ms ease, color 220ms ease;
  background:
    radial-gradient(1200px 500px at 82% -10%, rgba(144,224,239,0.22), transparent 62%),
    radial-gradient(900px 420px at 6% 105%, rgba(0,119,182,0.08), transparent 66%),
    #FFFFFF;
}
a{color:inherit}
.app{display:flex;min-height:100vh}
.sidebar{
  width:260px;flex:0 0 260px;
  background:var(--panel-glass);
  backdrop-filter: blur(8px);
  border-right:1px solid var(--border-soft);
  padding:18px 14px;
  position:sticky;top:0;height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:width 220ms ease, flex-basis 220ms ease, padding 220ms ease, border-color 220ms ease, opacity 180ms ease;
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.navRailToggle{
  position:fixed;
  top:14px;
  left:246px;
  z-index:1305;
  width:28px;
  height:28px;
  border:1px solid rgba(2,62,138,0.35);
  border-radius:999px;
  background:#FFFFFF;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(2,62,138,0.14);
  transition:left 220ms ease, transform 180ms ease, box-shadow 220ms ease;
}
.navRailToggle:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(2,62,138,0.18);
}
.navRailToggleIcon{
  display:block;
  font-size:15px;
  line-height:1;
  transform:rotate(180deg);
  transition:transform 220ms ease;
}
.logoWrap{width:56px;height:36px;display:flex;align-items:center;justify-content:center;flex:0 0 56px}
.brandLogo{max-width:100%;max-height:100%;object-fit:contain;display:block}
.logo{
  width:36px;height:36px;border-radius:10px;background:rgba(0,119,182,0.12);
  border:1px solid rgba(2,62,138,0.38);display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--accent)
}
.loginLogoWrap{display:flex;justify-content:center;align-items:center;margin-bottom:10px}
.loginLogo{width:min(280px, 75vw);height:auto;max-height:80px;object-fit:contain;display:block}
.loginLogoFallback{margin:0 auto}
.brandTitle{font-size:16px;font-weight:800}
.nav{margin-top:18px;display:flex;flex-direction:column;gap:6px;flex:1;overflow:auto;padding-right:2px}
.sidebarFooter{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid rgba(2,62,138,0.28);
}
.sidebarFooter .navBtn{
  width:100%;
}
.sidebarFooter .navBtn + .navBtn{
  margin-top:8px;
}
.sidebarFooter #logoutBtn{
  border:1px solid rgba(2,62,138,0.34);
  border-radius:12px;
  background:#FFFFFF;
  box-shadow:none;
}
.sidebarFooter #logoutBtn:hover{
  background:rgba(0,119,182,0.08);
  border-color:rgba(2,62,138,0.46);
}
.navBtn{
  background:transparent;border:1px solid transparent;color:var(--text);
  padding:9px 10px;border-radius:12px;text-align:left;cursor:pointer;transition:background-color 220ms ease,border-color 220ms ease,transform 180ms ease;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}
.navBtn:hover{background:rgba(0,119,182,0.12);border-color:rgba(0,119,182,0.28)}
.navBtn.active{
  background:rgba(0,119,182,0.14);
  border-color:rgba(2,62,138,0.50);
}
.navGroup{
  border:1px solid var(--border-soft);
  border-radius:12px;
  background:#FFFFFF;
  padding:6px;
}
.navGroupToggle{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-weight:700;
  font-size:12px;
  border-radius:10px;
  text-align:left;
  padding:8px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.navGroupToggle:hover{background:rgba(0,119,182,0.08);border-color:rgba(0,119,182,0.22)}
.navSub{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding-left:6px}
.navSubBtn{font-size:12px;padding:7px 9px}
.navSub.hidden{display:none}
.navDepth-1{padding-left:14px}
.navDepth-2{padding-left:22px}
.navDepthGroup-1{
  margin-top:4px;
  border-color:rgba(0,119,182,0.12);
}
.content{flex:1;padding:22px 22px 60px;max-width:1200px;transition:max-width 220ms ease,padding 220ms ease}
.app.nav-collapsed .sidebar{
  width:0;
  flex:0 0 0;
  padding:0;
  border-right:none;
  opacity:0;
  pointer-events:none;
}
.app.nav-collapsed .content{max-width:none}
.app.nav-collapsed .navRailToggle{left:8px}
.app.nav-collapsed .navRailToggleIcon{transform:rotate(0deg)}
.topbar{
  display:grid;
  grid-template-columns:minmax(260px, 1fr) minmax(560px, 1.5fr);
  align-items:start;
  gap:14px;
  padding:14px;
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
.topbarActions{
  display:grid;
  gap:10px;
  min-width:0;
}
.contextSwitchGrid{
  display:grid;
  gap:8px;
}
.contextSwitchRow{
  display:grid;
  grid-template-columns:66px minmax(260px, 1fr) auto;
  align-items:center;
  gap:8px;
}
.contextSwitchLabel{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.35px;
  text-transform:uppercase;
}
.contextSwitchRow select{
  width:100%;
  min-width:0;
}
.contextSwitchRow .btn{
  min-width:126px;
}
.topbarQuickActions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.accountHover{
  position:relative;
}
.accountIconBtn{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(0,119,182,0.35);
  background:#FFFFFF;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.accountIconBtn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.accountHoverPanel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:320px;
  max-width:min(72vw, 560px);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#FFFFFF;
  box-shadow:0 12px 28px rgba(2,62,138,0.18);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
  z-index:1310;
}
.accountHoverPanel .tiny{
  white-space:normal;
  line-height:1.35;
}
.accountHover:hover .accountHoverPanel,
.accountHover:focus-within .accountHoverPanel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.title{font-weight:800}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fieldStack{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.fieldStack > label{
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.15px;
}
input,select,textarea{
  background:#FFFFFF;
  border:1px solid var(--border-soft);color:var(--text);
  padding:10px 10px;border-radius:12px;outline:none;transition:border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
input:focus,select:focus,textarea:focus{border-color:rgba(0,119,182,0.68);box-shadow:0 0 0 3px rgba(144,224,239,0.36)}
textarea{min-height:100px;resize:vertical;width:100%}
.btn{
  padding:9px 11px;border-radius:12px;border:1px solid rgba(2,62,138,0.42);
  background:rgba(0,119,182,0.12);
  color:var(--text);cursor:pointer;font-weight:700;font-size:12px;line-height:1.2;white-space:nowrap;transition:background 220ms ease,border-color 220ms ease,color 220ms ease,transform 180ms ease,box-shadow 220ms ease;
}
.btn:hover{background:rgba(0,119,182,0.20);transform:translateY(-1px);box-shadow:0 2px 8px rgba(2,62,138,0.10)}
.btn.secondary{
  border-color:rgba(0,119,182,0.30);
  background:rgba(202,240,248,0.36);
}
.btn.danger{border-color:rgba(2,62,138,0.62);background:rgba(2,62,138,0.18)}
.btn.ok{border-color:rgba(0,119,182,0.62);background:rgba(0,119,182,0.18)}
.btn:disabled{opacity:0.46;cursor:not-allowed;transform:none}
.card{
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:14px;
  background:#FFFFFF;
  box-shadow:var(--shadow);
  transition:box-shadow 220ms ease,border-color 220ms ease,transform 180ms ease;
}
.card:hover{box-shadow:0 6px 16px rgba(2,62,138,0.10)}
.card > h2{
  margin:0 0 10px 0;
  padding-bottom:8px;
  border-bottom:1px solid rgba(0,119,182,0.14);
  font-size:22px;
  line-height:1.1;
}
.card > h3{
  margin:0 0 8px 0;
  font-size:16px;
}
.report-shell .report-card{
  border:1px solid rgba(2,62,138,0.32);
  box-shadow:0 6px 16px rgba(2,62,138,0.08);
}
.report-shell .report-section{
  border:1px solid rgba(2,62,138,0.36);
  background:linear-gradient(180deg,#FFFFFF 0%, #F8FCFF 100%);
  box-shadow:0 2px 8px rgba(2,62,138,0.06);
}
.report-shell .report-section .tiny.muted{
  color:#335A7D;
  font-weight:600;
  letter-spacing:0.2px;
}
.report-shell .kpis{
  padding:10px;
  border:1px solid rgba(2,62,138,0.22);
  border-radius:12px;
  background:#FFFFFF;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kpis{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.kpi{display:flex;gap:10px;align-items:center}
.kpi .num{font-size:26px;font-weight:900}
.kpi .lbl{font-size:12px;color:var(--muted)}
.docsGuide{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:12px;
}
.docsCard{
  border:1px solid var(--border-soft);
  border-radius:14px;
  background:#FFFFFF;
  padding:12px;
  box-shadow:var(--shadow);
}
.docsCard h3{
  margin:0 0 6px 0;
  font-size:15px;
}
.docsCardCompact{
  min-height:230px;
}
.docsCard p{
  margin:6px 0;
  font-size:12px;
  line-height:1.45;
}
.docsCard ul{
  margin:6px 0 0 14px;
  padding:0;
}
.docsCard li{
  margin:4px 0;
  font-size:12px;
  line-height:1.4;
}
.docsScopeTag{
  display:inline-block;
  border:1px solid var(--border-soft);
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  color:var(--muted);
  background:var(--surface-2);
}
.docsMenuList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.docsMenuItem{
  border:1px solid var(--border-soft);
  border-radius:999px;
  padding:5px 10px;
  font-size:11px;
  color:var(--text);
  background:var(--surface-2);
}
.docsIndexBtn{
  cursor:pointer;
}
.docsDetailList{
  margin:6px 0 0 16px;
  padding:0;
}
.docsDetailList li{
  margin:4px 0;
  font-size:13px;
  line-height:1.45;
}
.groupMemberBar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.groupsGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
  gap:16px;
  align-items:start;
}
.groupScopeCard{
  margin-top:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.groupScopeToolbar{
  gap:8px;
  align-items:center;
}
.groupScopeToolbar select{
  flex:1 1 240px;
}
.groupMemberBar select{
  flex:1 1 240px;
}
.groupHiddenSelect{
  display:none;
}
.groupMemberList{
  display:grid;
  gap:8px;
}
.groupMemberGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px;
  max-height:280px;
  overflow:auto;
  padding-right:4px;
}
.groupMemberSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}
.groupMemberItem{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border-soft);
  border-radius:12px;
  background:rgba(255,255,255,0.96);
  min-height:68px;
}
.groupMemberLabel{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  line-height:1.25;
}
.groupMemberMeta{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.groupMemberItem .btn{
  padding:6px 10px;
  min-height:unset;
  white-space:nowrap;
}
.groupMemberEmpty{
  padding:14px 16px;
  border:1px dashed var(--border-soft);
  border-radius:14px;
  background:rgba(202,240,248,0.18);
  color:var(--muted);
  font-size:12px;
}
@media (max-width: 960px){
  .groupsGrid{
    grid-template-columns:1fr;
  }
  .groupMemberGrid{
    grid-template-columns:1fr;
    max-height:220px;
  }
}
.muted{color:var(--muted)}
.report-status-ok{color:var(--ok);font-weight:600}
.report-status-bad{color:#B42318;font-weight:600}
.tiny{font-size:12px}
.muted.tiny{
  letter-spacing:0.15px;
}
.mono{font-family:"IBM Plex Mono","JetBrains Mono","SFMono-Regular",monospace}
.toast{padding:12px;border:1px solid rgba(2,62,138,0.34);background:rgba(202,240,248,0.36);border-radius:12px;margin-bottom:12px}
.hidden{display:none}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.fadeInUp{animation:fadeInUp 420ms cubic-bezier(0.21,0.9,0.32,1) both}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.authShell{
  min-height:100vh;
  padding:28px 14px;
}
.authCard{
  width:min(720px, 100%);
  border-radius:20px;
  padding:24px 22px;
  box-shadow:0 10px 26px rgba(2,62,138,0.10);
  backdrop-filter:blur(8px);
}
.authTitle{
  margin:0;
  font-size:34px;
  letter-spacing:-0.3px;
}
.authSub{
  margin-top:8px;
  color:var(--muted);
  font-size:15px;
  line-height:1.35;
}
.authForm{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.setupCard{
  width:min(860px, 100%);
}
.setupPills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 14px 0;
}
.setupPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(2,62,138,0.18);
  background:rgba(202,240,248,0.35);
  color:#1F4B73;
}
.setupPill strong{
  color:#0D365C;
}
.setupHint{
  margin:0 0 10px 0;
  color:var(--muted);
  font-size:13px;
}
.setupForm{
  margin-top:10px;
  display:grid;
  gap:10px;
}
.setupGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.setupFieldWrap{
  display:grid;
  gap:6px;
}
.setupFieldWrap label{
  font-size:12px;
  color:#365A7A;
  font-weight:700;
}
.setupStatus{
  border:1px solid rgba(2,62,138,0.2);
  border-radius:14px;
  background:#FFFFFF;
  padding:10px;
  margin-bottom:12px;
}
.setupStatusTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}
.setupProgressTrack{
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(0,119,182,0.12);
  overflow:hidden;
}
.setupProgressBar{
  height:100%;
  width:0;
  background:linear-gradient(90deg, #0077B6 0%, #90E0EF 100%);
  border-radius:999px;
  transition:width 260ms ease;
}
.btn.loading{
  position:relative;
  color:transparent !important;
}
.btn.loading::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:15px;
  height:15px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  border:2px solid rgba(2,62,138,0.35);
  border-top-color:#0077B6;
  animation:spin 0.9s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
.noticeSuccess{
  border-color:rgba(23,140,81,0.35);
  background:rgba(22,163,74,0.12);
  color:#12693D;
}
.spacer{height:10px}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--border-soft);padding:10px 8px;font-size:13px;vertical-align:top}
th{text-align:left;color:var(--muted);font-weight:700}
tbody tr:nth-child(even){background:rgba(0,119,182,0.03)}
.listPager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border-soft);
}
.listPagerSummary{
  color:var(--muted);
  font-size:12px;
}
.listPagerControls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.listPagerControls .btn{
  padding:7px 10px;
  font-size:12px;
}
.listPagerPageSizeLabel,
.listPagerStatus{
  color:var(--muted);
  font-size:12px;
}
.listPagerPageSize{
  min-width:72px;
}
select[multiple]{min-height:124px}
.view .card + .card{margin-top:12px}
.viz{display:flex;flex-direction:column;gap:10px}
.tier{
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:10px;
  background:#FFFFFF;
}
.tierHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dashboardLayout{
  display:grid;
  grid-template-columns:repeat(2, minmax(360px, 1fr));
  gap:14px;
}
.dashboardCard{position:relative}
.dashboardCard.dashboardWide{grid-column:1 / -1}
.dashboardCard.dragging{opacity:0.55;outline:2px dashed rgba(2,62,138,0.60)}
.dashboardDragHandle{
  position:absolute;
  top:10px;
  right:10px;
  font-size:11px;
  line-height:1;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:#FFFFFF;
  color:var(--muted);
  cursor:grab;
  user-select:none;
}
.dashboardDragHandle:active{cursor:grabbing}
.accountsShell{
  display:grid;
  grid-template-columns:minmax(280px, 340px) minmax(0, 1fr);
  gap:14px;
  align-items:start;
}
.accountsListPanel{position:sticky;top:14px;max-height:calc(100vh - 180px);overflow:hidden}
.accountsDetailPanel{min-height:420px}
.acctTabs{display:flex;gap:8px;flex-wrap:wrap}
.acctTabBtn{padding:8px 10px;font-size:12px}
.acctTabBtn.active{
  background:rgba(0,119,182,0.20);
  border-color:rgba(2,62,138,0.48);
}
.acctPane{
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:10px;
  background:#FFFFFF;
}
.acctListItem{
  width:100%;
  text-align:left;
  margin-bottom:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.acctListItem.active{
  border-color:var(--accent);
  background:rgba(0,119,182,0.12);
}
.acctListMeta{font-size:11px;color:var(--muted)}

.workflowEditor{
  border-color:rgba(2,62,138,0.34);
  background:
    radial-gradient(900px 280px at 100% -15%, rgba(144,224,239,0.22), transparent 65%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FCFF 100%);
}
body.workflow-popout-open{
  overflow:hidden;
}
.workflowPopoutBackdrop{
  position:fixed;
  inset:0;
  z-index:1190;
  background:rgba(13,40,66,0.35);
  backdrop-filter:blur(2px);
}
.workflowEditor.popout{
  position:fixed;
  inset:10px;
  z-index:1200;
  margin:0;
  width:auto;
  max-width:none;
  height:calc(100vh - 20px);
  overflow:auto;
  box-shadow:0 20px 48px rgba(6,31,54,0.35);
  border-color:rgba(2,62,138,0.52);
}
@media (max-width: 840px){
  .listPager{
    align-items:flex-start;
  }
  .listPagerControls{
    width:100%;
  }
}
.workflowHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.workflowHeader h2{
  margin:0;
  border:none;
  padding:0;
}
.workflowMetaBadge{
  border:1px solid rgba(2,62,138,0.28);
  border-radius:999px;
  padding:7px 11px;
  background:rgba(255,255,255,0.82);
  max-width:460px;
}
.workflowToolbar{
  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  gap:10px;
  margin-top:8px;
}
.workflowToolbarGroup{
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:10px;
  background:#FFFFFF;
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.workflowToolbarGroup .fieldStack{
  min-width:170px;
}
.workflowShell{
  display:grid;
  grid-template-columns:minmax(280px, 330px) minmax(0, 1fr);
  gap:12px;
  margin-top:12px;
  align-items:start;
}
.workflowPaletteCard,
.workflowCanvasCard,
.workflowIssuesCard,
.workflowInspectorPanel{
  border-color:rgba(2,62,138,0.22);
  background:linear-gradient(180deg,#FFFFFF 0%, #FAFDFF 100%);
}
.workflowPaletteCard{
  position:sticky;
  top:12px;
}
.workflowPanelHead{
  margin-bottom:8px;
}
.workflowPanelHead h3{
  margin:0 0 6px 0;
}
.workflowPalette{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.workflowPalette .btn{
  display:flex;
  width:100%;
  justify-content:flex-start;
  text-align:left;
  border-radius:12px;
  border-color:rgba(0,119,182,0.26);
  background:linear-gradient(180deg, rgba(230,248,255,0.78) 0%, rgba(208,239,252,0.72) 100%);
}
.workflowPalette .btn[draggable="true"]{
  cursor:grab;
}
.workflowPalette .btn[draggable="true"]:active{
  cursor:grabbing;
}
.workflowPalette .btn:hover{
  border-color:rgba(2,62,138,0.52);
}
.workflowCanvasCard{
  overflow:hidden;
}
.workflowCanvasHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.workflowCanvasHead h3{
  margin:0;
}
.workflowCanvasTools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.workflowZoomControls{
  display:flex;
  gap:6px;
}
.workflowZoomControls .btn{
  min-width:42px;
  text-align:center;
}
.workflowCanvasSplit{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
  gap:12px;
  align-items:start;
}
.workflowCanvasStage{
  border:1px solid rgba(2,62,138,0.18);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.84) 0%, rgba(247,252,255,0.92) 100%);
  padding:10px;
}
.workflowCanvasHint{
  margin:0 0 8px 0;
}
.workflowGraphStage{
  border:1px solid rgba(2,62,138,0.16);
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12px 12px, rgba(0,119,182,0.08) 1.1px, transparent 1.2px) 0 0 / 24px 24px,
    linear-gradient(180deg, rgba(248,253,255,0.94) 0%, rgba(241,250,255,0.94) 100%);
}
.workflowGraphStage.drop-target{
  border-color:rgba(0,119,182,0.72);
  box-shadow:0 0 0 3px rgba(144,224,239,0.42) inset, 0 8px 22px rgba(2,62,138,0.16);
}
#workflowGraph svg{
  display:block;
}
#workflowGraph [data-workflow-node-id]{
  transition:transform 120ms ease;
}
#workflowGraph [data-workflow-edge-id] path{
  transition:stroke 160ms ease, stroke-width 160ms ease;
}
.workflowDetail{
  margin-top:8px;
}
.workflowInspectorPanel{
  margin:0;
}
.workflowIssuesCard{
  margin-top:12px;
}
.workflowIssueItem{
  margin:6px 0;
  padding:7px 9px;
  border-radius:10px;
  border:1px solid rgba(2,62,138,0.14);
  background:#FFFFFF;
}
.workflowIssueItem.error{
  border-color:rgba(171,52,40,0.35);
  background:rgba(171,52,40,0.08);
  color:#8F2B1F;
}
.workflowIssueItem.warning{
  border-color:rgba(155,106,0,0.34);
  background:rgba(250,234,190,0.40);
  color:#7D5B00;
}
.workflowIssueItem.ok{
  border-color:rgba(47,111,115,0.34);
  background:rgba(47,111,115,0.08);
  color:#1E6168;
}
.workflowEditor.popout .workflowShell{
  grid-template-columns:minmax(300px, 360px) minmax(0, 1fr);
}
.workflowEditor.popout .workflowCanvasSplit{
  grid-template-columns:minmax(0, 3fr) minmax(320px, 1fr);
}
.workflowEditor.popout .workflowGraphStage{
  min-height:68vh;
}
.guidedTourModal{
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.guidedTourModal.hidden{
  display:none;
}
.guidedTourBackdrop{
  position:absolute;
  inset:0;
  background:rgba(6,31,54,0.22);
  z-index:0;
}
.credentialModal{
  position:fixed;
  inset:0;
  z-index:1295;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.credentialModal.hidden{
  display:none;
}
.credentialBackdrop{
  position:absolute;
  inset:0;
  background:rgba(6,31,54,0.18);
  z-index:0;
}
.credentialCard{
  position:relative;
  z-index:1;
  width:min(760px, 96vw);
  max-height:88vh;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:#FFFFFF;
  box-shadow:0 20px 48px rgba(6,31,54,0.28);
}
.credentialHeader{
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.credentialActions{
  justify-content:flex-end;
  flex-wrap:wrap;
}
.credentialPayload{
  width:100%;
  min-height:260px;
  margin-top:12px;
  resize:vertical;
  background:#F8FCFF;
  border:1px solid rgba(2,62,138,0.22);
  border-radius:14px;
  padding:12px;
  line-height:1.5;
  color:#0D365C;
}
.guidedTourCard{
  position:relative;
  z-index:1;
  width:min(760px, 96vw);
  max-height:88vh;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:#FFFFFF;
  box-shadow:0 20px 48px rgba(6,31,54,0.35);
}
.guidedTourCard.tour-anchored{
  position:fixed;
  width:min(460px, calc(100vw - 24px));
  max-height:min(82vh, 640px);
  z-index:1302;
}
.guidedTourCard.tour-anchored::after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border-style:solid;
}
.guidedTourCard.tour-arrow-left::after{
  left:-12px;
  top:calc(50% - 10px);
  border-width:10px 12px 10px 0;
  border-color:transparent #FFFFFF transparent transparent;
  filter:drop-shadow(-1px 0 0 rgba(8,37,67,0.28));
}
.guidedTourCard.tour-arrow-right::after{
  right:-12px;
  top:calc(50% - 10px);
  border-width:10px 0 10px 12px;
  border-color:transparent transparent transparent #FFFFFF;
  filter:drop-shadow(1px 0 0 rgba(8,37,67,0.28));
}
.guidedTourCard.tour-arrow-up::after{
  top:-12px;
  left:calc(50% - 10px);
  border-width:0 10px 12px 10px;
  border-color:transparent transparent #FFFFFF transparent;
  filter:drop-shadow(0 -1px 0 rgba(8,37,67,0.28));
}
.guidedTourCard.tour-arrow-down::after{
  bottom:-12px;
  left:calc(50% - 10px);
  border-width:12px 10px 0 10px;
  border-color:#FFFFFF transparent transparent transparent;
  filter:drop-shadow(0 1px 0 rgba(8,37,67,0.28));
}
.tourTargetFocus{
  border-radius:10px;
  outline:3px solid rgba(16,96,173,0.85);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(16,96,173,0.15);
  animation:tourTargetPulse 1.55s ease-in-out infinite;
}
@keyframes tourTargetPulse{
  0%{
    box-shadow:0 0 0 3px rgba(16,96,173,0.20);
  }
  50%{
    box-shadow:0 0 0 8px rgba(16,96,173,0.08);
  }
  100%{
    box-shadow:0 0 0 3px rgba(16,96,173,0.20);
  }
}
.guidedTourBody ul{
  margin:0;
  padding-left:18px;
}
.guidedTourBody li{
  margin:8px 0;
  line-height:1.45;
  font-size:13px;
}
@media (max-width: 1280px){
  .topbar{
    grid-template-columns:1fr;
  }
  .topbarQuickActions{
    justify-content:flex-start;
  }
}
@media (max-width: 980px){
  .app{display:block}
  .navRailToggle{
    left:8px;
    top:10px;
  }
  .sidebar{
    width:100%;
    height:auto;
    position:relative;
    border-right:none;
    border-bottom:1px solid var(--border-soft);
  }
  .content{max-width:none;padding:16px 14px 30px}
  .topbar{
    grid-template-columns:1fr;
  }
  .topbarActions{
    gap:8px;
  }
  .contextSwitchRow{
    grid-template-columns:1fr;
    gap:6px;
  }
  .contextSwitchLabel{
    font-size:10px;
  }
  .topbarQuickActions{
    justify-content:flex-start;
  }
  .app.nav-collapsed .sidebar{
    display:none;
    width:0;
    flex-basis:0;
    padding:0;
  }
  .grid2{grid-template-columns:1fr}
  .dashboardLayout{grid-template-columns:1fr}
  .dashboardCard.dashboardWide{grid-column:auto}
  .logoWrap{width:48px;height:30px;flex-basis:48px}
  .accountsShell{grid-template-columns:1fr}
  .accountsListPanel{position:relative;top:auto;max-height:none}
  .authCard{padding:18px 14px;border-radius:16px}
  .authTitle{font-size:28px}
  .setupGrid{grid-template-columns:1fr}
  .workflowHeader{flex-direction:column}
  .workflowToolbar{grid-template-columns:1fr}
  .workflowToolbarGroup{padding:9px}
  .workflowShell{grid-template-columns:1fr}
  .workflowPaletteCard{position:relative;top:auto}
  .workflowCanvasSplit{grid-template-columns:1fr}
  .workflowEditor.popout{
    inset:8px;
    height:calc(100vh - 16px);
  }
  .credentialHeader{
    flex-direction:column;
  }
  .credentialActions{
    width:100%;
    justify-content:flex-start;
  }
  .credentialPayload{
    min-height:220px;
  }
  .guidedTourCard{
    width:100%;
    max-height:92vh;
  }
}