.rola-site-preview { display:flex; align-items:center; gap:24px; width:100%; margin:30px 0 0; padding:16px 22px 16px 16px; border:1px solid #d6dfe2; border-radius:16px; background:#fff; color:#334852; text-align:left; font:inherit; box-shadow:0 3px 14px #243f4e05; cursor:pointer; }
.rola-site-preview:hover { border-color:#8a9ea8; background:#fbfcfd; }
.rola-site-preview-image { position:relative; width:138px; height:112px; flex:none; overflow:hidden; border-radius:9px; }
.rola-site-preview-image img { width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.rola-site-preview-image>span { position:absolute; bottom:7px; left:7px; padding:3px 8px; border-radius:5px; color:#fff; background:#263d4ce8; font-size:11px; }
.rola-site-preview-copy { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.rola-site-eyebrow { font-size:12px; line-height:1.5; color:#64747b; }
.rola-site-preview-copy strong { font-size:22px; font-weight:500; line-height:1.35; }
.rola-site-date { font-size:11px; color:#68777e; }
.rola-site-status { display:inline-flex; gap:6px; align-items:center; margin-top:7px; color:#4b646a; font-size:11px; font-weight:500; }
.rola-site-status>span { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; background:#edf2f2; }
.rola-site-preview-action { display:flex; align-items:center; gap:10px; margin-left:auto; font-size:13px; font-weight:500; white-space:nowrap; }
.rola-site-preview-action svg { width:20px; height:20px; }
.rola-site-preview:focus-visible,.rola-site-dialog button:focus-visible,.rola-site-slides:focus-visible { outline:3px solid #698898; outline-offset:4px; }
.rola-site-dialog { box-sizing:border-box; width:min(940px,calc(100vw - 40px)); max-width:none; height:min(940px,calc(100dvh - 40px)); max-height:calc(100dvh - 40px); margin:auto; padding:0; border:1px solid #cbd5db; border-radius:18px; background:#f6f8fa; color:#31454f; font-family:inherit; overflow:hidden; box-shadow:0 20px 80px #1a2b3b40; }
.rola-site-dialog[open] { display:flex; flex-direction:column; }
.rola-site-dialog::backdrop { background:#253642b3; backdrop-filter:blur(4px); }
.rola-site-dialog-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:#fff; }
.rola-site-dialog-header p { margin:0 0 4px; font-size:11px; color:#687b86; }
.rola-site-dialog-header h2 { margin:0; font-size:24px; line-height:1.25; color:inherit; }
.rola-site-dialog button { color:inherit; cursor:pointer; }
.rola-site-close { display:grid; place-items:center; width:44px; height:44px; flex:none; border:1px solid #d4dde2; border-radius:50%; background:#f7f9fa; font:300 30px/1 sans-serif; }
.rola-site-slides { display:flex; flex:1 1 auto; min-height:0; width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; }
.rola-site-slides::-webkit-scrollbar { display:none; }
.rola-site-slide { display:flex; flex:0 0 100%; align-items:center; justify-content:center; height:100%; min-width:0; margin:0; padding:12px; scroll-snap-align:center; scroll-snap-stop:always; }
.rola-site-slide img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; }
.rola-site-dialog-footer { flex:none; padding:10px 20px 14px; border-top:1px solid #e2e8ed; background:#fff; text-align:center; }
.rola-site-navigation { display:flex; align-items:center; justify-content:center; gap:24px; }
.rola-site-navigation button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #d0dce1; border-radius:50%; background:#f4f7f9; }
.rola-site-navigation svg { width:21px; height:21px; }
.rola-site-prev svg { transform:rotate(180deg); }
.rola-site-position { min-width:42px; margin:0; font-size:13px; font-variant-numeric:tabular-nums; }
.rola-site-caption { margin:7px 0 10px; min-height:20px; font-size:12px; }
.rola-site-thumbs { display:flex; justify-content:center; gap:8px; }
.rola-site-thumbs button { width:48px; height:44px; padding:2px; overflow:hidden; border:2px solid transparent; border-radius:6px; background:transparent; opacity:.65; }
.rola-site-thumbs button[aria-pressed=true] { border-color:#577687; opacity:1; }
.rola-site-thumbs img { width:100%; height:100%; object-fit:cover; border-radius:2px; }
#rola-site-gallery-help { margin:9px 0 0; color:#657780; font-size:10px; line-height:1.5; }
@media(max-width:600px) {
  .rola-site-preview { display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px 14px; padding:14px; border-radius:13px; }
  .rola-site-preview-image { width:86px; height:112px; }
  .rola-site-preview-copy strong { font-size:18px; }
  .rola-site-eyebrow { font-size:11px; }
  .rola-site-preview-action { grid-column:1/-1; width:100%; justify-content:center; margin:0; padding-top:9px; border-top:1px solid #e5ebee; font-size:12px; }
  .rola-site-preview-copy { gap:4px; }
  .rola-site-status { font-size:10px; gap:4px; }
  .rola-site-date { font-size:10px; }
  .rola-site-dialog { width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .rola-site-dialog-header { padding:calc(12px + env(safe-area-inset-top)) 16px 12px; }
  .rola-site-dialog-header h2 { font-size:22px; }
  .rola-site-slide { padding:8px; }
  .rola-site-dialog-footer { padding:8px 12px calc(12px + env(safe-area-inset-bottom)); }
}
@media(max-height:540px) {
  .rola-site-dialog-header { padding:7px 14px; }
  .rola-site-dialog-header h2 { font-size:18px; }
  .rola-site-dialog-header p,.rola-site-thumbs,#rola-site-gallery-help { display:none; }
  .rola-site-dialog-footer { padding:5px 12px; }
  .rola-site-caption { margin:3px 0 0; }
  .rola-site-slide { padding:4px; }
}
@media print { .rola-site-preview,.rola-site-dialog { display:none!important; } }