
:root{ --primary:#e53935; --muted:#6b7280; --bg:#f7f7fb; --card:#ffffff; --text:#111827; --shadow:0 8px 30px rgba(2,6,23,0.06); font-family:'Poppins',sans-serif; }
body .pts-wrapper{ max-width:1024px; margin:24px auto; padding:18px; }
.pts-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.pts-card{ background:var(--card); border-radius:12px; padding:18px; box-shadow:var(--shadow); }
.pts-drop{ border:2px dashed #e6e6ef; padding:28px; text-align:center; border-radius:10px; cursor:pointer; transition:all .2s; }
.pts-drop:hover{ transform:translateY(-2px); }
.pts-drop svg{ opacity:0.9 }
.pts-file-label{ color:var(--primary); font-weight:600; cursor:pointer; }
.pts-muted{ color:var(--muted); font-size:13px }
.pts-preview{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px }
.pts-thumb{ width:120px; border-radius:8px; overflow:hidden; border:1px solid #f1f1f5; box-shadow:0 6px 18px rgba(2,6,23,0.06); cursor:pointer; }
.pts-thumb.selected{ outline:3px solid rgba(229,57,53,0.14); transform:translateY(-4px); }
.pts-thumb img{ display:block; width:100%; }
.pts-page{ padding:8px; text-align:center; background:#fff; font-weight:600 }
.pts-actions-row{ display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.pts-btn{ padding:10px 14px; border-radius:10px; border:0; cursor:pointer; background:#fff; box-shadow:0 6px 18px rgba(2,6,23,0.04); }
.pts-btn-ghost{ background:transparent; border:1px solid #e6e6ef }
.pts-btn-primary{ background:var(--primary); color:#fff; }
.pts-input{ padding:8px 10px; border-radius:8px; border:1px solid #eef0f6; }
.pts-progress{ margin-top:12px }
.pts-progress-bar{ width:100%; height:10px; background:#f1f1f5; border-radius:6px; overflow:hidden }
.pts-progress-inner{ height:100%; width:0%; background:linear-gradient(90deg,var(--primary),#ff7043); transition:width .4s ease }
.pts-status{ margin-top:8px; color:var(--muted) }
.pts-note{ margin-top:10px; color:var(--muted); font-size:13px }

/* Dark mode */
body.pts-dark { --bg:#0b1220; --card:#081224; --text:#e6eef8; --muted:#9aa4b2; }
body.pts-dark .pts-card { box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
body.pts-dark .pts-drop{ border-color:#16202b }
body.pts-dark .pts-thumb{ border-color:#0f1724 }
