:root{
  --bg: transparent;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(0,0,0,.10);
  --accent: #2563eb;
  --accent2: #60a5fa;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --card: #121826;
    --text: #e9eef8;
    --muted: #b4c0d1;
    --border: rgba(255,255,255,.18);
    --accent: #60a5fa;
    --accent2: #7dd3fc;
  }
}
.dark, body.dark, body.dark-mode, body.theme-dark, body.is-dark, body[data-theme="dark"], .wp-dark-mode-active{
  --bg: #0b1220;
  --card: #121826;
  --text: #e9eef8;
  --muted: #b4c0d1;
  --border: rgba(255,255,255,.18);
  --accent: #60a5fa;
  --accent2: #7dd3fc;
}

.opz-wrap{max-width:1200px;margin:0 auto;padding:28px;color:var(--text);background:var(--bg);}
.opz-header{text-align:center;margin-bottom:24px;}
.opz-header h2{margin:0 0 6px;font-size:30px;letter-spacing:.2px;color:var(--text);}
.opz-header p{margin:0;color:var(--muted);}

.opz-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:680px){.opz-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.opz-grid{grid-template-columns:1fr 1fr 1fr;}}

.opz-card{
  background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;
  box-shadow:0 10px 30px rgba(2,6,23,.08);transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.dark .opz-card, body.dark-mode .opz-card, body[data-theme="dark"] .opz-card{ box-shadow:0 10px 30px rgba(0,0,0,.35); }
.opz-card:hover{ transform:translateY(-3px); }

.opz-media{position:relative;width:100%;aspect-ratio:4/5;background:#0a0f1a;}
.opz-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02);}

.opz-body{padding:14px 14px 16px;color:var(--text);}
.opz-badge{display:inline-block;font-size:12px;color:#0b1220;background:linear-gradient(90deg,var(--accent),var(--accent2));padding:6px 10px;border-radius:999px;font-weight:800;}
.opz-name{margin:8px 0 6px;font-size:18px;font-weight:800;color:var(--text);}
.opz-phrase{margin:8px 0 14px;color:var(--text);opacity:.96;font-style:italic;line-height:1.38;}

.opz-vote{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#0b1220;padding:11px 14px;border-radius:12px;font-weight:900;cursor:pointer;transition:transform .06s ease, filter .2s ease;}
.opz-vote:hover{filter:brightness(1.05);} .opz-vote:active{transform: translateY(1px);}

.opz-footer{text-align:center;margin-top:16px;color:var(--muted);font-size:13px;}

/* Modal + Toast */
.opz-modal-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  z-index: 99999;
}
.opz-modal{
  width: min(90vw, 420px);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 18px;
  text-align: center;
}
.opz-modal h4{ margin: 0 0 6px; font-size: 18px; font-weight: 900; }
.opz-modal p{ margin: 0 0 12px; opacity: .95; line-height: 1.35; }
.opz-modal .opz-modal-actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.opz-btn{ appearance: none; border: none; cursor: pointer; border-radius: 999px; padding: 9px 14px; font-weight: 800; }
.opz-btn-primary{ background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #0b1220; }
.opz-btn-ghost{ background: transparent; color: inherit; border: 1px solid var(--border); }

.opz-toast{ position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #111; color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 14px; display: none; z-index: 99998; }