/* Styling with right-side notes panel */
:root{
  --bg1:#0b1220; --bg2:#101b33; --acc:#4f8cff;
  --txt:#e7eefc; --muted:#94a3b8; --glass:rgba(255,255,255,.08); --glass-b:rgba(255,255,255,.14);
}
*,*::before,*::after{box-sizing:border-box}
.rmv-root{ display:flex; flex-direction:column; color:var(--txt); }
.rmv-root, .rmv-root * { font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif; }

.rmv-header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px;
  background:color-mix(in oklab, #0b1220 65%, rgba(255,255,255,.06));
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--glass-b);
}
.rmv-header .brand{font-weight:800; letter-spacing:.3px}
.rmv-header .spacer{flex:1}
.rmv-header label{color:var(--muted); font-size:13px}
.rmv-login-note{font-size:13px; color: var(--muted);}

.rmv-header select, .rmv-header button{
  appearance:none; border-radius:12px; padding:10px 12px;
  border:1px solid var(--glass-b);
  background:rgba(255,255,255,.06); color:var(--txt);
  transition: box-shadow .2s, transform .05s, border-color .2s, background .2s;
  touch-action:manipulation;
}
.rmv-header select:focus, .rmv-header button:focus{outline:none; box-shadow:0 0 0 3px rgba(79,140,255,.28); border-color:#4f8cff}
.rmv-header button{background:#4f8cff; border-color:rgba(255,255,255,.3); font-weight:800}
.rmv-header button:hover{filter:brightness(1.03)} .rmv-header button:active{transform:translateY(1px)}

.rmv-viewerbox{position:relative; min-height:60vh;}
.rmv-osd{position:absolute; inset:0}
.rmv-osd, .rmv-osd .openseadragon-container, .rmv-osd .openseadragon-canvas, .rmv-osd canvas{
  width:100%; height:100%; background:transparent!important; touch-action:none; -ms-touch-action:none;
}
.rmv-osd canvas{transform:translateZ(0)}

.hud{
  position:absolute; right:12px; bottom:12px; padding:6px 10px;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.14); border-radius:999px;
  color:var(--muted); font-size:12px; backdrop-filter:blur(6px);
}
.fade-in{animation:fade .25s ease-out both}
@keyframes fade{from{opacity:0} to{opacity:1}}

.rmv-sidepanel{
  position:absolute; top:0; right:0; width:320px; height:100%;
  background:rgba(10,14,25,.86); border-left:1px solid var(--glass-b);
  backdrop-filter: blur(10px) saturate(150%);
  padding:10px; overflow:auto; z-index:4;
}
.rmv-panel-header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 2px 8px 2px; border-bottom:1px dashed var(--glass-b); margin-bottom:8px;}
.rmv-panel-close{background:rgba(255,255,255,.08); border:1px solid var(--glass-b); border-radius:8px; color:var(--txt); padding:6px 8px; cursor:pointer;}
.rmv-panel-close:hover{filter:brightness(1.05)}

.rmv-notes-list{display:flex; flex-direction:column; gap:8px;}
.rmv-note-item{
  display:flex; align-items:flex-start; gap:8px; padding:8px; border:1px solid var(--glass-b);
  border-radius:10px; background:rgba(255,255,255,.04);
}
.rmv-note-text{flex:1; font-size:13px; color:var(--txt);}
.rmv-note-actions{display:flex; gap:6px;}
.rmv-note-actions button{
  background:rgba(255,255,255,.08); border:1px solid var(--glass-b); color:var(--txt);
  padding:6px 8px; border-radius:8px; cursor:pointer;
}
.rmv-note-actions button:hover{filter:brightness(1.05)}
.rmv-notes-empty{font-size:13px; color:var(--muted); padding:8px; text-align:center;}