* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, "Microsoft YaHei", sans-serif
    }

    body {
      background: var(--bg);
      padding: 30px 16px;
      /* max-width: 900px; */
      margin: 0 auto;
    }

    .title {
      text-align: center;
      margin-bottom: 26px;
      color: var(--text);
      font-size: 24px;
    }

    .input-card {
      background: var(--bg);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
      margin-bottom: 24px;
    }

    .input-card label {
      font-weight: 600;
      margin-bottom: 8px;
      display: inline-block;
      color: var(--text);
    }

    .hw-input {
      width: 100%;
      height: 110px;
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      resize: none;
      font-size: 15px;
      transition: border 0.2s;
    }

    .hw-input:focus {
      outline: none;
      border-color: #4263eb;
    }

    .subject-select {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      font-size: 15px;
      margin-bottom: 14px;
      transition: border 0.2s;
    }

    .subject-select:focus {
      outline: none;
      border-color: #4263eb;
    }

    .time-box {
      display: flex;
      gap: 14px;
      margin-bottom: 16px;
    }

    .time-box>div {
      flex: 1;
    }

    .deadline-input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      font-size: 15px;
      transition: border 0.2s;
    }

    .deadline-input:focus {
      outline: none;
      border-color: #4263eb;
    }

    .btn-bar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .btn-add {
      background: #4263eb;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 500;
      transition: 0.2s;
    }

    .btn-add:hover {
      background: #3354d1;
    }

    .btn-clear {
      background: #f43f5e;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 500;
      transition: 0.2s;
    }

    .btn-clear:hover {
      background: #e11d48;
    }

    .btn-play {
      background: #16a34a;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 500;
      transition: 0.2s;
    }

    .btn-play:hover {
      background: #15803d;
    }

    .btn-pause {
      background: #f59e0b;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 500;
      transition: 0.2s;
    }

    .btn-pause:hover {
      background: #d97706;
    }

    .play-area {
      background: var(--bg);
      border-radius: 16px;
      padding: 40px 24px;
      margin: 26px 0;
      text-align: center;
      min-height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--text);

      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
      font-weight: 500;
    }

    .list-title {
      margin: 26px 0 16px;
      font-size: 18px;
      color: var(--text);

    }

    .hw-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* 作业卡片主体 */
    .hw-item {
      background: var(--bg);
      padding: 18px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      position: relative;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .hw-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08)
    }

    /* 学科标签多彩样式 */
    .hw-subject {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 10px
    }

    .subject-语文 {
      background: #fef3c7;
      color: #92400e
    }

    .subject-数学 {
      background: #dbeafe;
      color: #1e40af
    }

    .subject-英语 {
      background: #d1fae5;
      color: #065f46
    }

    .subject-物理 {
      background: #ede9fe;
      color: #5b21b6
    }

    .subject-化学 {
      background: #fce7f3;
      color: #be185d
    }

    .subject-生物 {
      background: #ecfccb;
      color: #3f6212
    }

    .subject-政治 {
      background: #ffedd5;
      color: #c2410c
    }

    .subject-历史 {
      background: #e0e7ff;
      color: #3730a3
    }

    .subject-地理 {
      background: #ccfbf1;
      color: #0f766e
    }

    .subject-美术 {
      background: #fde68a;
      color: #854d0e
    }

    .subject-音乐 {
      background: #ddd6fe;
      color: #6d28d9
    }

    .subject-体育 {
      background: #bbf7d0;
      color: #166534
    }

    .hw-text {
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 10px;
      color: var(--text);

    }

    .hw-time {
      font-size: 13px;
      color: #6b7280
    }

    /* 过期样式 */
    .expired {
      color: var(--bg);
      text-decoration: line-through
    }

    .hw-item.expired-card {
      background: var(--bg);
      border: 1px solid #eee
    }

    .del-btn {
      position: absolute;
      right: 16px;
      top: 16px;
      background: var(--bg);
      border: none;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transition: 0.2s
    }

    .del-btn:hover {
      background: var(--bg);
      color: var(--text);

    }