#viewswitch-admin-root,
#viewswitch-session-root {
  --vs-ink: #080d22;
  --vs-panel: #111938;
  --vs-panel-2: #171d4d;
  --vs-text: #f8f8ff;
  --vs-muted: #aab2d8;
  --vs-violet: #7445ff;
  --vs-violet-bright: #9a76ff;
  --vs-teal: #20e0ba;
  --vs-line: rgba(192, 203, 255, .16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#viewswitch-admin-root.viewswitch-toolbar-mounted {
  align-items: center;
  display: inline-flex;
  list-style: none;
  margin: 0;
  position: relative;
}

.viewswitch-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  color: #495465;
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  line-height: 1;
  min-height: 40px;
  padding: 0 8px;
  position: relative;
  right: auto;
  top: auto;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  width: 40px;
  z-index: 1;
}

.viewswitch-trigger:hover,
.viewswitch-trigger:focus-visible {
  background: transparent;
  box-shadow: none;
  color: #293445;
  outline: none;
  transform: none;
}

.viewswitch-trigger-icon {
  align-items: center;
  background: transparent;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.viewswitch-trigger-icon svg { fill: none; height: 21px; stroke: currentColor; width: 21px; }
#viewswitch-admin-root.viewswitch-toolbar-fallback .viewswitch-trigger {
  background: transparent;
  box-shadow: none;
  position: fixed;
  right: 68px;
  top: 8px;
  z-index: 1045;
}

.viewswitch-panel {
  background: linear-gradient(160deg, rgba(25, 31, 71, .98), rgba(10, 15, 38, .99));
  border: 1px solid rgba(159, 141, 255, .37);
  border-radius: 19px;
  box-shadow: 0 28px 70px rgba(3, 5, 20, .48), 0 0 38px rgba(100, 70, 255, .18);
  box-sizing: border-box;
  color: var(--vs-text);
  overflow: hidden;
  position: fixed;
  right: 20px;
  top: 54px;
  width: min(452px, calc(100vw - 28px));
  z-index: 1050;
}
.viewswitch-panel[hidden] { display: none; }
.viewswitch-panel-glow {
  background: radial-gradient(circle, rgba(107, 71, 255, .28), rgba(107, 71, 255, 0) 68%);
  height: 250px;
  pointer-events: none;
  position: absolute;
  right: -100px;
  top: -126px;
  width: 250px;
}
.viewswitch-panel-header { display: flex; gap: 16px; justify-content: space-between; padding: 24px 24px 16px; position: relative; }
.viewswitch-eyebrow { color: var(--vs-teal); font-size: 10px; font-weight: 800; letter-spacing: .15em; margin-bottom: 6px; }
.viewswitch-panel h2 { color: var(--vs-text); font-size: 21px; font-weight: 750; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.viewswitch-panel-header p { color: var(--vs-muted); font-size: 12px; line-height: 1.5; margin: 7px 0 0; }
.viewswitch-close { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); border-radius: 9px; color: #d9ddf7; cursor: pointer; font-size: 24px; font-weight: 300; height: 29px; line-height: 22px; padding: 0; width: 29px; }
.viewswitch-close:hover { background: rgba(255,255,255,.13); color: #fff; }

.viewswitch-search-wrap { align-items: center; background: rgba(4, 8, 26, .54); border: 1px solid rgba(181, 178, 255, .27); border-radius: 11px; display: flex; margin: 0 24px; padding: 0 11px; transition: border-color .18s ease, box-shadow .18s ease; }
.viewswitch-search-wrap:focus-within { border-color: var(--vs-violet-bright); box-shadow: 0 0 0 3px rgba(116, 69, 255, .13); }
.viewswitch-search-icon { fill: none; height: 17px; margin-right: 8px; stroke: #a9b1dc; stroke-linecap: round; stroke-width: 2; width: 17px; }
#viewswitch-search { background: transparent; border: 0; box-shadow: none; color: #fff; font-size: 13px; height: 43px; outline: none; padding: 0; width: 100%; }
#viewswitch-search::placeholder { color: #8b93bc; }
.viewswitch-search-key { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); border-radius: 5px; color: #9ca4ca; font-size: 10px; padding: 3px 5px; white-space: nowrap; }

.viewswitch-filter-group { display: flex; gap: 7px; padding: 16px 24px 12px; }
.viewswitch-filter { background: transparent; border: 1px solid transparent; border-radius: 999px; color: #aeb5d7; cursor: pointer; font-size: 11px; font-weight: 650; padding: 6px 10px; }
.viewswitch-filter:hover { color: #fff; }
.viewswitch-filter.is-active { background: rgba(119, 81, 255, .2); border-color: rgba(151, 124, 255, .43); color: #e7e0ff; }

.viewswitch-results { border-bottom: 1px solid var(--vs-line); border-top: 1px solid var(--vs-line); min-height: 195px; max-height: 342px; overflow-y: auto; padding: 7px; }
.viewswitch-results::-webkit-scrollbar { width: 7px; }
.viewswitch-results::-webkit-scrollbar-thumb { background: rgba(180, 180, 255, .23); border-radius: 10px; }
.viewswitch-result { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 11px; color: #fff; cursor: pointer; display: flex; gap: 11px; margin: 1px 0; padding: 10px; text-align: left; transition: background .16s ease, border-color .16s ease, transform .16s ease; width: 100%; }
.viewswitch-result:hover { background: linear-gradient(90deg, rgba(112, 74, 255, .17), rgba(33, 224, 186, .06)); border-color: rgba(143, 121, 255, .31); transform: translateX(2px); }
.viewswitch-result-avatar { align-items: center; background: linear-gradient(145deg, #7445ff, #353b9a); border: 1px solid rgba(255,255,255,.23); border-radius: 50%; color: #fff; display: flex; flex: 0 0 auto; font-size: 11px; font-weight: 800; height: 34px; justify-content: center; width: 34px; }
.viewswitch-result-copy { min-width: 0; width: 100%; }
.viewswitch-result-name-row { align-items: center; display: flex; gap: 7px; justify-content: space-between; }
.viewswitch-result strong { color: #f8f8ff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewswitch-result small { color: #9fa7cf; display: block; font-size: 11px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewswitch-result-kind { background: rgba(32, 224, 186, .11); border: 1px solid rgba(32, 224, 186, .22); border-radius: 5px; color: #69f1d2; flex: 0 0 auto; font-size: 9px; font-weight: 800; padding: 3px 5px; text-transform: uppercase; }
.viewswitch-result-kind.is-team { background: rgba(134, 103, 255, .14); border-color: rgba(160, 139, 255, .27); color: #c6b6ff; }
.viewswitch-empty-state { align-items: center; color: var(--vs-muted); display: flex; flex-direction: column; font-size: 11px; justify-content: center; min-height: 181px; padding: 18px 25px; text-align: center; }
.viewswitch-empty-state strong { color: #e7e8f7; font-size: 13px; margin: 10px 0 4px; }
.viewswitch-empty-state span:last-child { line-height: 1.55; max-width: 240px; }
.viewswitch-empty-orb { align-items: center; background: linear-gradient(145deg, rgba(116,69,255,.75), rgba(32,224,186,.54)); border-radius: 50%; box-shadow: 0 0 22px rgba(116,69,255,.34); display: flex; height: 39px; justify-content: center; width: 39px; }
.viewswitch-empty-orb span { color: white; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.viewswitch-loading { color: #b7c0e2; font-size: 12px; padding: 23px 10px; text-align: center; }
.viewswitch-panel-footer { color: #8992b9; display: flex; font-size: 10px; gap: 8px; line-height: 1.45; padding: 13px 24px; }
.viewswitch-shield { color: #51e9c4; font-weight: 750; white-space: nowrap; }

.viewswitch-session-root { bottom: 0; box-sizing: border-box; left: 0; padding: 0 20px 16px; pointer-events: none; position: fixed; right: 0; z-index: 1060; }
.viewswitch-session-shell { align-items: center; backdrop-filter: blur(18px); background: linear-gradient(100deg, rgba(7,12,36,.96), rgba(22,24,74,.96) 50%, rgba(9,13,39,.97)); border: 1px solid rgba(135, 110, 255, .58); border-radius: 18px; box-shadow: 0 18px 42px rgba(3, 5, 25, .38), 0 0 32px rgba(94, 59, 255, .25), inset 0 1px 0 rgba(255,255,255,.10); box-sizing: border-box; color: var(--vs-text); display: flex; gap: 14px; margin: 0 auto; max-width: 1120px; min-height: 88px; padding: 12px 16px; pointer-events: auto; position: relative; }
.viewswitch-session-shell::after { background: linear-gradient(90deg, transparent, #805cff, #2ee7c1, #805cff, transparent); border-radius: 0 0 16px 16px; bottom: -1px; content: ''; filter: blur(.1px); height: 2px; left: 15%; opacity: .85; position: absolute; right: 15%; }
.viewswitch-live-status { align-items: center; display: flex; flex: 0 0 auto; gap: 8px; }
.viewswitch-live-dot { background: #2ff2b4; border-radius: 50%; box-shadow: 0 0 0 5px rgba(47,242,180,.1), 0 0 17px rgba(47,242,180,.8); height: 9px; width: 9px; }
.viewswitch-live-copy { display: flex; flex-direction: column; }
.viewswitch-live-copy strong { color: #48f5c7; font-size: 15px; letter-spacing: .08em; line-height: 1; }
.viewswitch-live-copy small { color: #76b6b2; font-size: 8px; font-weight: 800; letter-spacing: .08em; margin-top: 4px; }
.viewswitch-session-divider { background: linear-gradient(180deg, transparent, rgba(186,196,255,.32), transparent); height: 46px; width: 1px; }
.viewswitch-target-avatar { align-items: center; background: linear-gradient(145deg, #8a63ff, #31468c); border: 2px solid rgba(255,255,255,.21); border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.24); display: flex; flex: 0 0 auto; font-size: 13px; font-weight: 850; height: 48px; justify-content: center; width: 48px; }
.viewswitch-target-copy { min-width: 175px; }
.viewswitch-session-label { color: #969fc9; display: block; font-size: 10px; line-height: 1.1; margin-bottom: 5px; }
.viewswitch-target-name-row { align-items: center; display: flex; gap: 7px; }
.viewswitch-target-name-row strong { color: #fff; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.viewswitch-kind-badge { border-radius: 5px; font-size: 9px; font-weight: 800; padding: 3px 5px; text-transform: uppercase; }
.viewswitch-kind-badge.is-client { background: rgba(32,224,186,.12); border: 1px solid rgba(32,224,186,.24); color: #5cf1cc; }
.viewswitch-kind-badge.is-team { background: rgba(142,111,255,.16); border: 1px solid rgba(142,111,255,.28); color: #c8baff; }
.viewswitch-target-detail { color: #adb5d8; display: block; font-size: 10px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewswitch-session-meta { margin-left: auto; min-width: 125px; }
.viewswitch-timer { align-items: baseline; display: flex; gap: 7px; }
.viewswitch-timer span { color: #fff; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 21px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.05em; }
.viewswitch-timer small { color: #8993be; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.viewswitch-return-button { align-items: center; background: linear-gradient(135deg, #6942ed, #884df4); border: 1px solid rgba(198, 178, 255, .46); border-radius: 10px; box-shadow: 0 8px 20px rgba(87, 48, 211, .26), inset 0 1px rgba(255,255,255,.16); color: #fff; cursor: pointer; display: inline-flex; flex: 0 0 auto; font-size: 12px; font-weight: 760; gap: 7px; min-height: 40px; padding: 0 13px; transition: box-shadow .18s ease, transform .18s ease; }
.viewswitch-return-button:hover { box-shadow: 0 10px 24px rgba(112, 69, 255, .44), inset 0 1px rgba(255,255,255,.16); transform: translateY(-1px); }
.viewswitch-return-button svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 17px; }

@media (max-width: 840px) {
  .viewswitch-session-root { padding: 0 8px 8px; }
  .viewswitch-session-shell { border-radius: 13px; gap: 9px; min-height: 76px; padding: 10px; }
  .viewswitch-session-divider-wide, .viewswitch-session-meta .viewswitch-session-label { display: none; }
  .viewswitch-session-meta { margin-left: auto; min-width: auto; }
  .viewswitch-timer small { display: none; }
  .viewswitch-timer span { font-size: 17px; }
  .viewswitch-target-copy { min-width: 0; overflow: hidden; }
  .viewswitch-target-name-row strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
  .viewswitch-target-detail { max-width: 170px; }
  .viewswitch-return-button { font-size: 0; min-height: 39px; padding: 0; justify-content: center; width: 39px; }
  .viewswitch-return-button svg { height: 19px; width: 19px; }
}
@media (max-width: 500px) {
  .viewswitch-session-shell { gap: 7px; }
  .viewswitch-live-copy, .viewswitch-session-divider:first-of-type, .viewswitch-kind-badge { display: none; }
  .viewswitch-target-avatar { height: 38px; width: 38px; }
  .viewswitch-target-detail { max-width: 130px; }
  .viewswitch-panel { right: 8px; top: 48px; width: calc(100vw - 16px); }
}


/* ViewSwitch v1.1: quick access and account review */
.viewswitch-quick-access {
  border-top: 1px solid var(--vs-line);
  padding: 13px 24px 12px;
}
.viewswitch-section-heading { align-items: center; color: #e5e8ff; display: flex; font-size: 11px; justify-content: space-between; margin-bottom: 9px; }
.viewswitch-section-heading strong { font-size: 11px; font-weight: 780; }
.viewswitch-section-heading span { color: #8992ba; font-size: 10px; }
.viewswitch-quick-access-items { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.viewswitch-quick-account { align-items: center; background: rgba(255,255,255,.035); border: 1px solid rgba(181, 188, 255, .13); border-radius: 9px; color: #f7f8ff; cursor: pointer; display: flex; gap: 7px; min-width: 0; padding: 7px; text-align: left; transition: border-color .16s ease, background .16s ease; }
.viewswitch-quick-account:hover { background: rgba(116,69,255,.13); border-color: rgba(150,131,255,.35); }
.viewswitch-quick-avatar { align-items: center; background: linear-gradient(145deg, #6547d9, #385294); border-radius: 50%; display: inline-flex; flex: 0 0 auto; font-size: 9px; font-weight: 800; height: 26px; justify-content: center; width: 26px; }
.viewswitch-quick-copy { display: block; min-width: 0; }
.viewswitch-quick-copy strong { display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewswitch-quick-copy .viewswitch-result-kind { display: inline-block; font-size: 8px; margin-top: 3px; padding: 1px 4px; }
.viewswitch-quick-state { color: #f7c95f; font-size: 13px; margin-left: auto; }
.viewswitch-review-hint { color: #8490bd; font-size: 10px; margin-left: auto; }
.viewswitch-result:hover .viewswitch-review-hint { color: #bbaeff; }
.viewswitch-preview { background: linear-gradient(125deg, rgba(103,70,238,.17), rgba(13,18,48,.4)); border-bottom: 1px solid var(--vs-line); border-top: 1px solid var(--vs-line); padding: 13px 18px 15px; }
.viewswitch-preview-top { align-items: center; display: flex; justify-content: space-between; }
.viewswitch-preview-back { background: transparent; border: 0; color: #aeb7de; cursor: pointer; font-size: 11px; padding: 0; }
.viewswitch-preview-back:hover { color: #fff; }
.viewswitch-preview-pin { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; color: #bcc4eb; cursor: pointer; font-size: 17px; height: 28px; line-height: 1; padding: 0; width: 28px; }
.viewswitch-preview-pin.is-pinned { color: #f7c95f; }
.viewswitch-preview-identity { align-items: center; display: flex; gap: 11px; margin: 7px 0 12px; }
.viewswitch-preview-avatar { align-items: center; background: linear-gradient(145deg, #8c64ff, #315193); border: 2px solid rgba(255,255,255,.20); border-radius: 50%; box-shadow: 0 5px 15px rgba(4,4,25,.24); color: white; display: inline-flex; flex: 0 0 auto; font-size: 13px; font-weight: 850; height: 44px; justify-content: center; width: 44px; }
.viewswitch-preview .viewswitch-eyebrow { font-size: 8px; margin-bottom: 3px; }
.viewswitch-preview h3 { color: #fff; font-size: 16px; line-height: 1.2; margin: 0; }
.viewswitch-preview-kind { color: #b8c0e2; display: block; font-size: 10px; margin-top: 2px; }
.viewswitch-preview-details { display: grid; gap: 8px; grid-template-columns: 1fr 1.3fr; margin: 0 0 13px; }
.viewswitch-preview-details div { min-width: 0; }
.viewswitch-preview-details dt { color: #8f98bf; font-size: 9px; font-weight: 700; margin-bottom: 3px; text-transform: uppercase; }
.viewswitch-preview-details dd { color: #e5e8f7; font-size: 11px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewswitch-preview-start { background: linear-gradient(135deg, #6841eb, #8c53f4); border: 1px solid rgba(207,193,255,.34); border-radius: 8px; box-shadow: 0 7px 16px rgba(75,42,202,.22); color: white; cursor: pointer; font-size: 11px; font-weight: 760; min-height: 35px; padding: 0 12px; width: 100%; }
.viewswitch-preview-start:disabled { cursor: wait; opacity: .72; }
.viewswitch-preview-loading, .viewswitch-preview-error { color: #b2bae0; font-size: 11px; padding: 9px; text-align: center; }
.viewswitch-preview:not([hidden]) + .viewswitch-results { max-height: 165px; }

/* Collapsible live-session presentation */
.viewswitch-collapse-button { align-items: center; background: rgba(255,255,255,.045); border: 1px solid rgba(205,211,255,.18); border-radius: 8px; color: #c8cfee; cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 32px; justify-content: center; padding: 0; width: 32px; }
.viewswitch-collapse-button:hover { background: rgba(255,255,255,.11); color: #fff; }
.viewswitch-collapse-button svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .2s ease; width: 17px; }
.viewswitch-session-root.is-collapsed .viewswitch-session-shell { gap: 10px; max-width: 630px; min-height: 52px; padding: 7px 10px; }
.viewswitch-session-root.is-collapsed .viewswitch-session-shell::after { left: 25%; right: 25%; }
.viewswitch-session-root.is-collapsed .viewswitch-live-copy small,
.viewswitch-session-root.is-collapsed .viewswitch-session-divider,
.viewswitch-session-root.is-collapsed .viewswitch-target-avatar,
.viewswitch-session-root.is-collapsed .viewswitch-target-detail,
.viewswitch-session-root.is-collapsed .viewswitch-session-label,
.viewswitch-session-root.is-collapsed .viewswitch-kind-badge,
.viewswitch-session-root.is-collapsed .viewswitch-timer small { display: none; }
.viewswitch-session-root.is-collapsed .viewswitch-live-copy strong { font-size: 11px; }
.viewswitch-session-root.is-collapsed .viewswitch-target-copy { min-width: 0; }
.viewswitch-session-root.is-collapsed .viewswitch-target-name-row strong { font-size: 12px; }
.viewswitch-session-root.is-collapsed .viewswitch-session-meta { margin-left: auto; min-width: auto; }
.viewswitch-session-root.is-collapsed .viewswitch-timer span { font-size: 15px; }
.viewswitch-session-root.is-collapsed .viewswitch-collapse-button svg { transform: rotate(180deg); }
.viewswitch-session-root.is-collapsed .viewswitch-return-button { font-size: 0; min-height: 32px; padding: 0; justify-content: center; width: 32px; }
.viewswitch-session-root.is-collapsed .viewswitch-return-button svg { height: 16px; width: 16px; }

@media (max-width: 500px) {
  .viewswitch-quick-access-items { grid-template-columns: 1fr; }
  .viewswitch-preview-details { grid-template-columns: 1fr; gap: 7px; }
  .viewswitch-preview:not([hidden]) + .viewswitch-results { max-height: 125px; }
}