.utdp{font:inherit;font-size:var(--utdp-fs,16px)}
.utdp .utdp-top{display:grid;grid-template-columns:1fr auto;grid-template-areas:'title switch' 'stats stats';gap:12px;align-items:center;margin:8px 0 12px}
.utdp .utdp-title{grid-area:title;margin:0;font-weight:700;color:var(--utdp-accent,#111827)}
.utdp .utdp-switch{grid-area:switch;display:flex;gap:8px}
.utdp .utdp-stats{grid-area:stats;font-size:.95em;opacity:.85}
@media (max-width:600px){.utdp .utdp-top{grid-template-columns:1fr;grid-template-areas:'title' 'switch' 'stats'}}
/* Mobile single column stats */
@media (max-width:640px){
  .utdp .utdp-stats{display:grid !important; grid-template-columns:1fr; row-gap:8px}
  .utdp .utdp-stats > span{display:block; width:100%; text-align:left}
}

.utdp .utdp-add{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.utdp .utdp-add .utdp-field{display:flex;flex-direction:column;min-width:220px}
.utdp .utdp-add .utdp-field.small{min-width:220px}
.utdp .btn-add{align-self:flex-end;padding:.5em 1.2em;border:1px solid var(--utdp-border,#e5e7eb);border-radius:999px;background:#fff;cursor:pointer;white-space:nowrap}
.utdp .btn-add .btn-label{display:inline;font-size:inherit;line-height:inherit}
.utdp .utdp-previews{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.utdp .utdp-previews .pv-image{max-width:300px;border-radius:10px;border:1px solid var(--utdp-border,#e5e7eb)}
/* YouTube size from options */
.utdp .proofs .proof-yt, .utdp .utdp-previews .pv-yt{
  width: var(--utdp-vid-w, 640px);
  max-width: 100%;
  aspect-ratio: var(--utdp-vid-ar, 16/9);
  border:0; border-radius:10px;
}
.utdp .utdp-previews .pv-yt{box-shadow:0 6px 16px rgba(0,0,0,.06)}

.utdp .utdp-panels{margin-top:8px}
.utdp .utdp-tabs{display:flex;gap:8px;margin:10px 0}
.utdp .utdp-tabs .tab{border:1px solid var(--utdp-border,#e5e7eb);background:#fff;border-radius:999px;padding:.4em .9em;cursor:pointer}
.utdp .utdp-tabs .tab[aria-selected="true"]{box-shadow:0 6px 16px rgba(0,0,0,.06)}

.utdp .utdp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.utdp .utdp-list[data-state="inactive"]{display:none}
.utdp .utdp-item{border:1px solid var(--utdp-border,#e5e7eb);border-radius:var(--utdp-radius,12px);padding:var(--utdp-pad-y,8px) var(--utdp-pad-x,10px);background:var(--utdp-bg,#fff)}
.utdp .utdp-item .row.top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.utdp .utdp-item .left{display:flex;gap:8px;align-items:center}
.utdp .utdp-item .title{margin-left:4px}
.utdp .utdp-item.done .title{text-decoration:line-through;opacity:.65}
.utdp .btns{display:flex;gap:6px;margin-left:8px}
.utdp .btn-edit,.utdp .btn-del,.utdp .btn-save,.utdp .btn-cancel{border:1px solid var(--utdp-border,#e5e7eb);background:#fff;border-radius:10px;padding:.25em .5em;cursor:pointer}
.utdp .edit-form{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.utdp .edit-form input{flex:1 1 180px;padding:.4em .6em;border:1px solid var(--utdp-border,#e5e7eb);border-radius:8px}
.utdp .edit-actions{display:flex;gap:6px;width:100%;margin-top:4px}
.utdp .proofs{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap}
.utdp .proofs .proof-image{max-width:320px;border-radius:10px;border:1px solid var(--utdp-border,#e5e7eb)}

/* Link as button (same accent) */
.utdp .proofs .btn-link{
  display:inline-block;
  text-decoration:none;
  padding:.45em .9em;
  border-radius:999px;
  background: linear-gradient(120deg, #24d1c8, #06b6d4);
  color:#fff;
  border:1px solid transparent;
  box-shadow:0 6px 16px rgba(6,182,212,.25);
}
.utdp .proofs .btn-link:hover{
  filter:brightness(1.06);
  box-shadow:0 10px 22px rgba(6,182,212,.28);
}
.utdp .proofs .btn-link:focus-visible{
  outline:2px solid rgba(6,182,212,.45);
  outline-offset:2px;
}

/* === v1.5.2: Proof images responsive — no overflow === */
.utdp .proofs,
.utdp .utdp-previews{
  max-width:100%;
  overflow:hidden;
  flex-wrap:wrap;
}
.utdp .proofs .proof-image,
.utdp .utdp-previews .pv-image{
  display:block;
  width:100%;
  max-width:min(100%, 320px);
  height:auto;
  object-fit:contain;
  border-radius:10px;
  border:1px solid var(--utdp-border,#e5e7eb);
}
@media (max-width: 640px){
  .utdp .proofs, .utdp .utdp-previews{ flex-direction:column; align-items:stretch; }
  .utdp .proofs .proof-image,
  .utdp .utdp-previews .pv-image{ max-width:100%; width:100%; }
}