body.yooplr {
  .toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
  }

  .cards {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .card {
    position: relative;
    border: 1px solid var(--secondary);
    border-radius: 0.5em;
    padding: 1em;
    background: var(--bg-light);
    display: flex;
    flex-direction: column;
    gap: 0.6em;

    &.done {
      opacity: 0.6;

      .text {
        text-decoration: line-through;
      }
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.75em;

      .domain {
        color: var(--secondary);
        letter-spacing: 0.03em;
      }

      .header-right {
        display: flex;
        gap: 0.5em;
        align-items: center;
        margin-left: auto;

        .context {
          color: var(--secondary);
        }

        .badge {
          padding: 0.15em 0.5em;
          border-radius: 0.3em;
          background: var(--primary);
          color: var(--font-color-light);

          &.badge--past { background: #c62828; }
          &.badge--today { background: #2e7d32; }
          &.badge--tomorrow { background: #ef6c00; }
          &.badge--future { background: var(--accent); }
        }
      }
    }

    .text {
      font-size: 1em;
      line-height: 1.4;
      word-break: break-word;
      display: flex;
      align-items: baseline;
      gap: 0.5em;

      .done-toggle {
        display: inline;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        line-height: 1;

        input[type="checkbox"] {
          pointer-events: none;
          cursor: pointer;
        }
      }
    }

    .actions {
      display: none;
      gap: 0.5em;
      position: absolute;
      right: 1em;
      bottom: 1em;

      button, input[type="submit"] {
        font-size: 0.8em;
        padding: 0.25em 0.6em;
      }
    }

    &:hover .actions {
      display: flex;
    }
  }
}