:root { --pd-bg:#0b0e14; --pd-card:#0f1420; --pd-border:#1e2a40; --pd-text:#e9eef7; --pd-sub:#aab6c7; }
.pd-wrap { font-family: ui-sans-serif, system-ui, Arial; color: var(--pd-text); background: var(--pd-bg); padding: 18px; border-radius: 14px; border: 1px solid #121a28; }
.pd-header { display:flex; gap:16px; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.pd-title { font-size: 18px; font-weight: 700; }
.pd-sub { margin-top: 6px; font-size: 13px; color: var(--pd-sub); }
.pd-status { padding: 10px 12px; border-radius: 10px; background:#141a24; border: 1px solid #223047; color: var(--pd-sub); }
.pd-status.pd-busy { color:#ffe6a7; border-color:#5a4b24; }
.pd-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-card { background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: 14px; padding: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.pd-card-title { font-size: 14px; font-weight: 700; color:#d7e2f3; margin-bottom: 10px; }
.pd-row { display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0; }
.pd-btn { padding: 10px 12px; border-radius: 12px; border: 1px solid #2b3b57; background:#172033; color: var(--pd-text); cursor:pointer; }
.pd-btn:disabled { opacity:.45; cursor:not-allowed; }
.pd-ghost { background: transparent; }
.pd-previews { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-preview { border:1px solid var(--pd-border); border-radius: 12px; padding: 10px; background: var(--pd-bg); }
.pd-label { font-size: 12px; color: var(--pd-sub); margin-bottom: 8px; }
.pd-ph { display:flex; align-items:center; justify-content:center; height:220px; color:#72819a; border: 1px dashed #273752; border-radius: 10px; background: rgba(0,0,0,0.05); }
.pd-ph.pd-big { height: 520px; }
.pd-img { width:100%; height:220px; object-fit:cover; border-radius: 10px; border: 1px solid var(--pd-border); }
.pd-result { width:100%; height: 520px; object-fit: contain; background: var(--pd-bg); border-radius: 12px; border:1px solid var(--pd-border); }
.pd-hint { margin-top: 12px; font-size: 12px; color:#90a0b8; line-height: 1.4; }
@media (max-width: 920px) { .pd-grid { grid-template-columns: 1fr; } .pd-ph.pd-big, .pd-result { height: 380px; } }