/* JMIplay 5.28.919 — preview-mode bar: readable, compact, owner-only pause. */
.viewbar.jmi-viewbar{
  position:relative;box-sizing:border-box;width:100%;z-index:55;
  padding:9px 15px!important;margin:0!important;
  color:#f6e4b8!important;
  border-block:1px solid rgba(249,198,75,.30)!important;
  background:linear-gradient(90deg,rgba(19,25,33,.98),rgba(35,34,29,.99) 52%,rgba(19,26,33,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.14)!important;
  font-size:12px!important;line-height:1.35!important;text-align:initial!important;
}
.viewbar.jmi-viewbar .jmi-vb-shell{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  max-width:1240px;margin:auto;min-height:37px;
}
.viewbar.jmi-viewbar .jmi-vb-switch-form{display:block;flex:0 0 auto;margin:0;padding:0}
.viewbar.jmi-viewbar .jmi-vb-toggle{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;
  padding:5px 11px 5px 8px;border-radius:11px;
  border:1px solid rgba(67,222,159,.32);background:rgba(35,174,117,.10);
  color:#9af5ca;font:inherit;font-size:11px;font-weight:900;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.viewbar.jmi-viewbar .jmi-vb-toggle:hover{background:rgba(35,174,117,.18);border-color:rgba(67,222,159,.65)}
.viewbar.jmi-viewbar .jmi-vb-toggle:focus-visible{outline:2px solid #40e3bf;outline-offset:3px}
.viewbar.jmi-viewbar .jmi-vb-track{
  position:relative;display:block;flex:0 0 35px;width:35px;height:21px;border-radius:999px;
  background:linear-gradient(120deg,#138c73,#24c79b);border:1px solid rgba(116,255,208,.35);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.16);
}
.viewbar.jmi-viewbar .jmi-vb-knob{
  position:absolute;top:2px;left:16px;width:15px;height:15px;background:#fafffd;border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.25);transition:left .23s ease,background .23s ease;
}
.viewbar.jmi-viewbar.is-paused .jmi-vb-toggle{background:rgba(255,198,58,.07);border-color:rgba(255,198,58,.3);color:#e8bd78}
.viewbar.jmi-viewbar.is-paused .jmi-vb-track{background:#4a5360;border-color:#778a95}
.viewbar.jmi-viewbar.is-paused .jmi-vb-knob{left:2px;background:#d8e1e5}
.viewbar.jmi-viewbar .jmi-vb-info{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0}
.viewbar.jmi-viewbar .jmi-vb-eye{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;
  border:1px solid rgba(255,198,58,.27);border-radius:10px;color:#ffd168;background:rgba(255,198,58,.09)}
.viewbar.jmi-viewbar .jmi-vb-eye i{margin:0!important;font-size:14px}
.viewbar.jmi-viewbar .jmi-vb-copy{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start}
.viewbar.jmi-viewbar .jmi-vb-copy strong{font-size:12px;color:#fff1d4;font-weight:900}
.viewbar.jmi-viewbar .jmi-vb-copy span{font-size:11px;color:#c9d4d7;font-weight:600}
.viewbar.jmi-viewbar .jmi-view-role{display:inline-flex;gap:6px;align-items:center;max-width:100%;padding:7px 11px;
  border:1px solid color-mix(in srgb,var(--jmi-role-color,#b3c4c9) 55%,transparent);
  border-radius:999px;background:color-mix(in srgb,var(--jmi-role-color,#a7ceda) 15%,transparent);
  color:#f1fcff!important;text-shadow:none;font-weight:900;font-size:11px;white-space:nowrap}
.viewbar.jmi-viewbar .jmi-view-role .jmi-role-svg{width:15px;height:15px;flex:0 0 15px;vertical-align:middle}
.viewbar.jmi-viewbar .jmi-vb-picker{display:inline-block;margin:0;flex:0 0 auto}
.viewbar.jmi-viewbar .jmi-vb-picker>a{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin:0!important;min-height:36px;box-sizing:border-box;padding:8px 14px!important;
  border-radius:11px;background:rgba(249,194,62,.12);border:1px solid rgba(249,194,62,.40);
  color:#ffce69;font-size:11px;font-weight:900;white-space:nowrap;text-decoration:none}
.viewbar.jmi-viewbar .jmi-vb-picker>a:hover{background:rgba(249,194,62,.21);border-color:rgba(249,194,62,.66)}
.viewbar.jmi-viewbar .jmi-vb-picker>a i{margin:0!important}
.viewbar.jmi-viewbar .jmi-vb-picker .vb-list{top:calc(100% + 4px);margin-top:0;z-index:3500;min-width:240px}
.viewbar.jmi-viewbar .vb-list a{margin:2px 0!important;padding:10px 12px!important;width:100%;box-sizing:border-box;background:transparent;border:none;font-size:12px;white-space:normal;color:#cfdde2}
.viewbar.jmi-viewbar .vb-list a:hover{background:rgba(255,198,58,.11);color:#fff3d9}
.viewbar.jmi-viewbar .vb-list a.on{background:rgba(255,198,58,.15);color:#ffe0a0}
.viewbar.jmi-viewbar .vb-list a.off{color:#ff9baf}
.viewbar.jmi-viewbar.is-paused .jmi-vb-eye{color:#a9bfc6;background:rgba(139,158,165,.09);border-color:rgba(139,158,165,.28)}
/* Matching light variant: same geometry and animations, only palette changes. */
html.theme-light .viewbar.jmi-viewbar{background:linear-gradient(90deg,rgba(252,248,238,.98),rgba(250,239,213,.97),rgba(252,248,238,.98))!important;color:#533c11!important;border-color:rgba(174,126,34,.35)!important;box-shadow:0 8px 24px rgba(82,58,21,.10)!important}
html.theme-light .viewbar.jmi-viewbar .jmi-vb-eye{color:#996300;background:rgba(184,122,0,.08);border-color:rgba(184,122,0,.27)}
html.theme-light .viewbar.jmi-viewbar .jmi-vb-copy strong{color:#4d3713}
html.theme-light .viewbar.jmi-viewbar .jmi-vb-copy span{color:#71634d}
html.theme-light .viewbar.jmi-viewbar .jmi-view-role{color:#704b0b!important;background:#fff4d9;border-color:#d6b86b}
html.theme-light .viewbar.jmi-viewbar .jmi-vb-picker>a{color:#684612;background:rgba(190,138,28,.12);border-color:rgba(190,138,28,.35)}
html.theme-light .viewbar.jmi-viewbar .jmi-vb-picker>a:hover{background:rgba(190,138,28,.22)}
html.theme-light .viewbar.jmi-viewbar .jmi-vb-toggle{color:#146545;background:rgba(35,174,117,.09);border-color:rgba(28,155,105,.4)}
html.theme-light .viewbar.jmi-viewbar.is-paused .jmi-vb-toggle{color:#6d5b3a;background:rgba(123,99,59,.07);border-color:rgba(123,99,59,.3)}
html.theme-light .viewbar.jmi-viewbar .vb-list{background:#fffaf0;border-color:#d1a44c;box-shadow:0 15px 28px rgba(65,49,20,.17)}
html.theme-light .viewbar.jmi-viewbar .vb-list a{color:#514633}
html.theme-light .viewbar.jmi-viewbar .vb-list a:hover,html.theme-light .viewbar.jmi-viewbar .vb-list a.on{background:#fff1d3;color:#704b0b}
@media(max-width:800px){
  .viewbar.jmi-viewbar{padding:8px!important}
  .viewbar.jmi-viewbar .jmi-vb-shell{gap:9px}
  .viewbar.jmi-viewbar .jmi-vb-info{flex:1 1 240px;justify-content:flex-start}
  .viewbar.jmi-viewbar .jmi-vb-picker{margin:0!important}
}
@media(max-width:560px){
  .viewbar.jmi-viewbar .jmi-vb-shell{justify-content:space-between;gap:8px}
  .viewbar.jmi-viewbar .jmi-vb-info{order:-1;flex:1 1 100%;justify-content:center;flex-wrap:wrap}
  .viewbar.jmi-viewbar .jmi-vb-switch-form{flex:1 1 auto}
  .viewbar.jmi-viewbar .jmi-vb-toggle{width:100%;justify-content:center}
  .viewbar.jmi-viewbar .jmi-vb-picker{display:block;flex:1 1 auto}
  .viewbar.jmi-viewbar .jmi-vb-picker>a{width:100%;white-space:normal}
  .viewbar.jmi-viewbar .jmi-vb-picker .vb-list{left:auto;right:0;transform:none;min-width:min(260px,90vw);width:auto}
}
@media(prefers-reduced-motion:reduce){.viewbar.jmi-viewbar .jmi-vb-knob{transition:none!important}}