:root{
  --rl-bg:#f9fafb;
  --rl-card:#ffffff;
  --rl-stroke:#e5e7eb;
  --rl-text:#1f2937;
  --rl-muted:#6b7280;
  --rl-accent:#2563eb;
  --rl-radius:12px;
  --rl-shadow:0 4px 10px rgba(0,0,0,.06);
}

.rl-wrap{padding:30px 20px;}
.rl-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;max-width:1100px;margin:0 auto 20px;}
.rl-title{font-size:28px;font-weight:700;margin:0;}
.rl-sub{font-size:14px;color:var(--rl-muted);margin-top:4px;}

.rl-search{border:1px solid var(--rl-stroke);border-radius:var(--rl-radius);padding:8px 12px;display:flex;align-items:center;gap:8px;background:#fff;box-shadow:var(--rl-shadow);flex:1;max-width:350px;}
.rl-search input{border:0;outline:0;background:transparent;width:100%;font-size:14px;color:var(--rl-text);}
.rl-search input::placeholder{color:var(--rl-muted);}

.rl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:1100px;margin:0 auto;}
.rl-card{background:var(--rl-card);border:1px solid var(--rl-stroke);border-radius:var(--rl-radius);padding:16px;box-shadow:var(--rl-shadow);transition:transform .2s;}
.rl-card:hover{transform:translateY(-2px);}
.rl-card h3{font-size:16px;margin:0 0 6px;}
.rl-meta{font-size:13px;color:var(--rl-muted);margin-bottom:10px;}

.rl-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rl-stroke);border-radius:8px;margin-bottom:10px;background:#fff;}
.rl-thumb--fallback{display:grid;place-items:center;color:var(--rl-muted);}
.rl-thumb--fallback .dashicons{font-size:24px;}

.rl-actions{display:flex;gap:8px;flex-wrap:wrap;}
.rl-btn{padding:7px 12px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--rl-stroke);background:#fff;transition:.2s;}
.rl-btn:hover{background:var(--rl-accent);color:#fff;border-color:var(--rl-accent);}
.rl-btn--primary{background:var(--rl-accent);color:#fff;border-color:var(--rl-accent);}
.rl-btn--primary:hover{filter:brightness(1.05);}

.rl-empty{text-align:center;color:var(--rl-muted);padding:30px;border:1px dashed var(--rl-stroke);border-radius:var(--rl-radius);}

/* ---- Native <dialog> modal ---- */
.rl-dialog{
  border: 1px solid var(--rl-stroke);
  border-radius: var(--rl-radius);
  padding: 0;
  width: min(1000px, 96vw);
  height: min(80vh, 900px);
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.rl-dialog:modal{ /* ensures proper centering across browsers */ }
.rl-dialog::backdrop{
  background: rgba(0,0,0,.45);
}

.rl-dialog-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--rl-stroke);background:#fff;
}
.rl-dialog-title{font-size:14px;font-weight:600;}
.rl-dialog-actions{display:flex;gap:8px;align-items:center;}
.rl-dialog-close{cursor:pointer;}

.rl-dialog-body{height: calc(100% - 50px); background:#fff;}
.rl-dialog-body iframe{width:100%;height:100%;border:0;display:block;}
@media (max-width: 640px){
  .rl-header{flex-direction:column;align-items:flex-start;}
  .rl-search{max-width:100%;}
}