/* v1.31 Roles live preview (PC screen) */
html.svrp-on #sva{margin-right:452px}
@media (max-width:1280px){html.svrp-on #sva{margin-right:0}#svrp{display:none!important}}
#svrp{position:fixed;top:62px;right:14px;z-index:40;width:430px;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;border:1px solid var(--border);background:var(--surface-solid,#fff);box-shadow:0 22px 48px -24px rgba(15,23,42,.45);animation:svrp-in .3s ease both;transition:width .25s ease}
#svrp.big{width:min(760px,calc(100vw - 300px))}
html.svrp-on #svrp.big~*{}
@keyframes svrp-in{from{opacity:0;transform:translateY(8px)}}
#svrp header{display:flex;justify-content:space-between;align-items:center}
#svrp .svrp-t{display:flex;gap:8px;align-items:center;color:var(--text);font-size:.9rem}
#svrp .svrp-t svg{color:var(--accent,#2e5bd8)}
#svrp .svrp-a{display:flex;gap:4px}
#svrp .svrp-a button{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer}
#svrp .svrp-a button:hover{color:var(--text);border-color:var(--accent,#2e5bd8)}
#svrp .svrp-cap{padding:10px 12px;border-radius:12px;background:var(--surface-2,rgba(15,23,42,.04));min-height:64px}
#svrp .svrp-cap b{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.86rem;color:var(--text)}
#svrp .svrp-cap span{display:block;font-size:.76rem;color:var(--muted);margin-top:4px;line-height:1.45}
#svrp .svrp-cap .svrp-does{color:var(--text);opacity:.8}
#svrp .svrp-cap em{font-style:normal;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:99px}
#svrp .svrp-cap em.g{background:rgba(22,163,74,.13);color:#15803d}
#svrp .svrp-cap em.r{background:rgba(220,38,38,.12);color:#b91c1c}
#svrp .svrp-mon{padding:8px;border-radius:14px;background:#0f172a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#svrp .svrp-clip{position:relative;overflow:hidden;border-radius:7px;background:#f8fafc}
#svrp .svrp-clip iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
#svrp .svrp-wait{position:absolute;inset:0;display:grid;place-items:center;color:#64748b;font-size:.8rem;z-index:1}
#svrp .svrp-stand{align-self:center;width:34%;height:12px;margin-top:-10px;margin-bottom:2px;border-radius:0 0 10px 10px;position:relative;z-index:-1;background:linear-gradient(#1e293b,#334155)}
#svrp .svrp-leg{display:flex;gap:14px;justify-content:center;font-size:.72rem;color:var(--muted)}
#svrp .svrp-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:2px solid}
#svrp .svrp-leg i.g{border-color:#16a34a}#svrp .svrp-leg i.r{border-color:#dc2626;border-style:dashed}
#svrp-btn{position:fixed;right:22px;bottom:96px;z-index:45;display:flex;gap:8px;align-items:center;padding:10px 16px;border-radius:14px;border:1px solid var(--border);background:var(--surface-solid,#fff);box-shadow:0 12px 30px -12px rgba(15,23,42,.35);cursor:pointer;color:var(--text);font-size:.84rem;font-weight:600}
#svrp-btn svg{color:var(--accent,#2e5bd8)}
html.svrp-on .sv131-adv{right:466px}
/* v1.32 — bigger/smaller screen that really resizes, zoom onto the setting, page entry animation */
#svrp{transition:width .25s ease}
#svrp.big{width:min(680px,calc(100vw - 256px - 560px))!important}
html.svrp-on.svrp-big #sva{margin-right:calc(min(680px,100vw - 256px - 560px) + 22px)}
@media (max-width:1500px){#svrp.big{width:560px!important}html.svrp-on.svrp-big #sva{margin-right:582px}}
#svrp .svrp-clip iframe{transition:transform .38s cubic-bezier(.2,.8,.2,1);will-change:transform}
#svrp .svrp-a button.is{color:#fff;background:var(--accent,#2e5bd8);border-color:var(--accent,#2e5bd8)}
#svrp.zoomed .svrp-mon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 3px color-mix(in srgb,var(--accent,#2e5bd8) 35%,transparent)}
#svrp.zoomed .svrp-clip:after{content:"Zoomed in";position:absolute;right:8px;top:8px;z-index:2;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(15,23,42,.72);padding:3px 8px;border-radius:99px;pointer-events:none}
@keyframes svrp-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.svrp-enter #sva > *{animation:svrp-up .45s cubic-bezier(.2,.8,.2,1) both}
html.svrp-enter #sva > *:nth-child(2){animation-delay:.06s}
html.svrp-enter #sva > *:nth-child(3){animation-delay:.12s}
html.svrp-enter #sva > *:nth-child(4){animation-delay:.18s}
html.svrp-enter #sva .sva-r{animation:svrp-up .4s cubic-bezier(.2,.8,.2,1) both}
html.svrp-enter #sva .sva-r:nth-child(1){animation-delay:.10s}html.svrp-enter #sva .sva-r:nth-child(2){animation-delay:.14s}
html.svrp-enter #sva .sva-r:nth-child(3){animation-delay:.18s}html.svrp-enter #sva .sva-r:nth-child(4){animation-delay:.22s}
html.svrp-enter #sva .sva-r:nth-child(5){animation-delay:.26s}html.svrp-enter #sva .sva-r:nth-child(6){animation-delay:.30s}
html.svrp-enter #sva .sva-r:nth-child(7){animation-delay:.34s}html.svrp-enter #sva .sva-r:nth-child(n+8){animation-delay:.38s}
html.svrp-enter #sva .sva-p{animation:svrp-up .4s cubic-bezier(.2,.8,.2,1) both}
html.svrp-enter #sva .sva-p:nth-child(1){animation-delay:.16s}html.svrp-enter #sva .sva-p:nth-child(2){animation-delay:.2s}
html.svrp-enter #sva .sva-p:nth-child(3){animation-delay:.24s}html.svrp-enter #sva .sva-p:nth-child(4){animation-delay:.28s}
html.svrp-enter #sva .sva-p:nth-child(5){animation-delay:.32s}html.svrp-enter #sva .sva-p:nth-child(n+6){animation-delay:.36s}
html.svrp-enter #svrp{animation:svrp-in .5s .2s ease both}
html.sv-lite.svrp-enter #sva *, html.sv-lite.svrp-enter #sva > *{animation:none!important}