.diy-intro { display:flex; justify-content:space-between; gap:16px; padding:17px 19px; background:#eef8f5; border-left:4px solid var(--mint); color:var(--navy); }
.diy-intro span { font-size:12px; color:var(--muted); }
.duration-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.duration-options label { margin:0; cursor:pointer; }
.duration-options input { position:absolute; opacity:0; pointer-events:none; }
.duration-options span { display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); padding:15px 17px; background:#fff; border-radius:4px; }
.duration-options input:checked + span { border:2px solid var(--mint); background:#effaf7; padding:14px 16px; }
.duration-options small { color:var(--muted); font-weight:500; }
.diy-toolbar { display:flex; justify-content:space-between; align-items:center; margin:27px 0 12px; }
.diy-toolbar > div { display:flex; align-items:center; gap:12px; color:var(--navy); }
.diy-toolbar span { font-size:12px; color:var(--muted); }
.diy-scenes { display:grid; gap:13px; }
.diy-scene { display:grid; grid-template-columns:54px 190px 1fr auto; gap:13px; align-items:stretch; border:1px solid var(--line); padding:13px; background:#fbfbfc; }
.diy-scene-number { display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-weight:800; color:var(--mint); font-size:20px; }
.diy-image-picker { position:relative; min-height:150px; border:1px dashed #aeb6c7; background:#eef0f4; overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:12px; font-weight:700; padding:10px; }
.diy-image-picker input { display:none; }
.diy-image-picker img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.diy-image-picker.has-image span { display:none; }
.diy-scene textarea { height:100%; min-height:150px; resize:vertical; background:#fff; }
.diy-scene-tools { display:flex; flex-direction:column; gap:7px; justify-content:center; }
.diy-scene-tools button { min-width:38px; padding:8px; border:1px solid var(--line); background:#fff; color:var(--navy); font-weight:800; }
.diy-scene-tools .remove-diy { color:var(--danger); }
@media (max-width:700px) {
  .diy-intro { flex-direction:column; }
  .duration-options { grid-template-columns:1fr; }
  .diy-scene { grid-template-columns:36px 105px 1fr; }
  .diy-scene-tools { grid-column:2/4; flex-direction:row; }
  .diy-image-picker, .diy-scene textarea { min-height:125px; }
}