/* Theme-aware defaults; override via :root vars or Additional CSS */
:root{
  --ohps-font: inherit;
  --ohps-radius: 12px;
  --ohps-gap: 16px;

  --ohps-fg: currentColor;
  --ohps-muted-fg: #333;
  --ohps-bg: #ffffff;
  --ohps-card: #ffffff;
  --ohps-border: #e5e7eb;

  --ohps-primary: #0d6efd;
  --ohps-primary-contrast: #ffffff;
  --ohps-button: #222222;
  --ohps-button-contrast: #ffffff;
  --ohps-button-muted: #eeeeee;
  --ohps-overlay: rgba(0,0,0,.6);
}

/* Container & typography */
.ohps-pll { max-width: 1100px; margin:0 auto; color: var(--ohps-fg); font-family: var(--ohps-font); }
.ohps-pll * { font-family: inherit; box-sizing: border-box; }

/* Uploader */
.ohps-pll__uploader { padding: 12px 0; }
.ohps-pll__hint { opacity: .7; margin-top: 6px; }

/* Grid */
.ohps-pll__list { list-style:none; margin:20px 0; padding:0; display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: var(--ohps-gap); }
.ohps-pll__item { border:1px solid var(--ohps-border); border-radius: var(--ohps-radius); background: var(--ohps-card);
  box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow:hidden; }
.ohps-pll__thumb { width:100%; height:190px; object-fit:cover; display:block; }

/* Buttons */
.ohps-pll__btn,
.ohps-pll__item-actions button,
.ohps-pll-modal__toolbar button{
  background: var(--ohps-button);
  color: var(--ohps-button-contrast);
  border:none; padding:10px 16px; border-radius:8px; cursor:pointer;
  transition: transform .04s ease, opacity .2s ease, background .2s;
}
.ohps-pll__item-actions { display:flex; gap:8px; padding:8px; justify-content:space-between; }
.ohps-pll__item-actions button.muted { background: var(--ohps-button-muted); color: var(--ohps-muted-fg); }
.ohps-pll-modal__toolbar button.primary { background: var(--ohps-primary); color: var(--ohps-primary-contrast); }
.ohps-pll__btn[disabled]{ opacity:.45; cursor:not-allowed; }
.ohps-pll__btn:hover,
.ohps-pll__item-actions button:hover,
.ohps-pll-modal__toolbar button:hover{ transform: translateY(-1px); }

/* Agreement */
.ohps-pll__agree { display:block; margin: 10px 0; }
.ohps-pll__actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Modal */
.ohps-pll-modal[hidden]{ display:none; }
.ohps-pll-modal { position:fixed; inset:0; background: var(--ohps-overlay); z-index: 99999;
  display:flex; align-items:center; justify-content:center; }
.ohps-pll-modal__box { width:min(92vw, 1100px); background: var(--ohps-bg);
  border-radius: calc(var(--ohps-radius) + 2px); overflow:hidden; display:flex; flex-direction:column; }
.ohps-pll-modal__toolbar { display:flex; gap:10px; align-items:center; padding:12px; border-bottom:1px solid var(--ohps-border); }
.ohps-pll-modal__spacer { flex:1; }
.ohps-pll-modal__canvas { height:min(75vh, 800px); padding:8px; }
.ohps-pll-modal__canvas img { max-width:100%; max-height:100%; display:block; margin:0 auto; }

/* Small screens */
@media (max-width: 640px){
  .ohps-pll__thumb{ height:140px; }
  .ohps-pll-modal__toolbar{ gap:6px; flex-wrap:wrap; }
}