:root{
  --day-bg:#ffffff; --day-panel:#f7f9fb; --day-text:#0b1220; --accent:#2563eb;
  --night-bg:#071025; --night-panel:#0b1020; --night-text:#ffffff; --night-accent:#7c3aed;
}
body:not(.dcwpv9-night){ --bg:var(--day-panel); --text:var(--day-text); --accent-var:var(--accent); }
body.dcwpv9-night{ --bg:var(--night-panel); --text:var(--night-text); --accent-var:var(--night-accent); }
*{box-sizing:border-box}
.dcwpv9-container{max-width:1100px;margin:18px auto;padding:18px;background:linear-gradient(135deg,var(--bg),rgba(0,0,0,0.02));color:var(--text);border-radius:12px;font-family:Inter,Arial,Helvetica,sans-serif;transition:all 260ms ease;}
.dcwpv9-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.dcwpv9-title{margin:0;font-size:20px;font-weight:800}
.dcwpv9-nav a{color:var(--text);text-decoration:none;margin:0 8px;font-weight:600}
.dcwpv9-toggle button{padding:8px 10px;border-radius:8px;border:none;background:linear-gradient(90deg,var(--accent-var),#06b6d4);color:#021426;cursor:pointer}
.dcwpv9-main{display:grid;grid-template-columns:1fr;gap:14px}
.card{background:var(--bg);padding:14px;border-radius:12px;box-shadow:0 6px 30px rgba(10,10,20,0.04)}
.dcwpv9-tool{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:center}
.dcwpv9-leftcol, .dcwpv9-rightcol{flex:1 1 320px;max-width:560px}
.dcwpv9-drop{width:100%;padding:18px;border-radius:12px;border:2px dashed rgba(0,0,0,0.06);background:var(--bg);min-height:120px;display:flex;align-items:center;justify-content:center}
body.dcwpv9-night .dcwpv9-drop{border-color:rgba(255,255,255,0.18);background:var(--night-panel)}
.dcwpv9-drop-text{font-weight:800;text-align:center}
.dcwpv9-btn{padding:12px 16px;border-radius:10px;border:none;background:linear-gradient(90deg,var(--accent-var),#06b6d4);color:#021426;font-weight:900;cursor:pointer}
.dcwpv9-progress-bar{background:rgba(0,0,0,0.04);border-radius:10px;overflow:hidden;height:36px}
.dcwpv9-progress-bar div{height:36px;width:0;background:linear-gradient(90deg,var(--accent-var),#06b6d4);text-align:center;line-height:36px;font-weight:800;color:#021426}
.dcwpv9-footer{margin-top:12px;text-align:center;color:var(--text);font-weight:700}
@media(min-width:900px){ .dcwpv9-main{grid-template-columns:2fr 1fr} }
@media(max-width:899px){ .dcwpv9-tool{flex-direction:column} .dcwpv9-btn{width:100%} }