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: 0.5rem;
  }

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

    &.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;
        background: var(--bg-light);
      }
    }

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

  .dashboard {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    scroll-snap-type: x mandatory;
    height: calc(100vh - 10rem);
  }

  .dashboard-section {
    width: calc(50% - 0.75rem);
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;

    h2 {
      font-size: 1.1em;
      margin-bottom: 0.75rem;
      padding-bottom: 0.25rem;
      border-bottom: 1px solid var(--secondary);

      .count {
        font-weight: normal;
        font-size: 0.85em;
        opacity: 0.6;
      }
    }

    .cards {
      overflow-y: auto;
      flex: 1;
    }

    &.dashboard-section--overdue h2 {
      color: #c62828;
    }

    &.dashboard-section--today h2 {
      color: #2e7d32;
    }
  }

  @media (max-width: 640px) {
    .dashboard-section {
      min-width: 100%;
    }
  }
}