Daily Planner - Schedule Builder

<!-- Add Block Form -->
<div class="dp-card">
  <h3>Add Time Block</h3>

  <div class="dp-field">
    <label>Title</label>
    <input type="text" id="dp-title" placeholder="e.g. Team standup" maxlength="60">
  </div>

  <div class="dp-field">
    <label>Category</label>
    <div class="dp-cat-chips" id="dp-cat-chips"></div>
    <select id="dp-cat-select">
      <option value="Work">Work</option>
      <option value="Meeting">Meeting</option>
      <option value="Personal">Personal</option>
      <option value="Exercise">Exercise</option>
      <option value="Break">Break</option>
      <option value="Other">Other</option>
    </select>
  </div>

  <div class="dp-time-row">
    <div class="dp-field">
      <label>Start</label>
      <input type="time" id="dp-start" value="09:00">
    </div>
    <div class="dp-field">
      <label>End</label>
      <input type="time" id="dp-end" value="10:00">
    </div>
  </div>

  <div class="dp-field">
    <label>Color</label>
    <div class="dp-color-row" id="dp-color-row"></div>
  </div>

  <button class="dp-btn dp-btn-primary" style="width:100%;margin-top:4px" onclick="dpAddBlock()">+ Add Block</button>
</div>

<!-- Summary -->
<div class="dp-card">
  <h3>Summary</h3>
  <ul class="dp-summary-list" id="dp-summary"></ul>
  <div class="dp-total-hrs" id="dp-total-hrs" style="display:none">
    Total planned: <span id="dp-total-val">0h 0m</span>
  </div>
</div>