/* ===== 移动端适配（≤ 480px） ===== */
@media (max-width: 480px) {
  /* 关闭 backdrop-filter，移动端 GPU 压力大 */
  .todo-inner,
  .input-wrapper textarea,
  .status-strip,
  .btn-action,
  .drawer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .container {
    padding: 15px 12px 0;
  }

  h1 {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }

  .menu-btn {
    width: 40px;
    height: 40px;
  }

  .drawer {
    width: min(90vw, 320px);
    padding: 16px 12px 18px;
  }

  .input-wrapper textarea {
    padding: 12px 30px 12px 14px;
    font-size: 0.95rem;
  }

  .todo-inner {
    padding: 14px 12px;
    gap: 10px;
  }

  .edit-actions {
    gap: 4px;
  }

  .btn-save,
  .btn-cancel {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 0.82rem;
  }

  .btn-save {
    width: 27px;
    height: 26px;
  }

  .filter-btn {
    padding: 7px 12px;
    font-size: 0.8rem;
  }

  .status-strip {
    padding: 14px 12px 12px 12px;
  }

  .stats {
    font-size: 0.78rem;
  }

  .btn-action {
    padding: 11px 12px;
    font-size: 0.82rem;
    min-width: 120px;
  }

  .theme-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  /* 移动端：todo-item hover 不偏移（无 hover 状态） */
  .todo-item:hover .todo-inner {
    transform: none;
    box-shadow: none;
  }
}

/* ===== 平板端适配（481px ~ 768px） ===== */
@media (min-width: 481px) and (max-width: 768px) {
  .container {
    padding: 40px 20px 0;
    max-width: 600px;
  }
}

/* ===== PC 端（≥ 769px） ===== */
@media (min-width: 769px) {
  .container {
    max-width: 560px;
  }
}