@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;
  --space-64: 256px;
  --space-96: 384px;
  --space-lg: 512px;
  --space-xl: 640px;
  --space-2xl: 768px;
  --text-xs: 12px;
  --colors-neutral-900: hsl(220, 5%, 12%);
  --colors-neutral-800: hsl(233, 7%, 19%);
  --colors-neutral-700: hsl(230, 9%, 24%);
  --colors-neutral-600: hsl(232, 8%, 35%);
  --colors-neutral-500: hsl(227, 8%, 52%);
  --colors-neutral-400: hsl(231, 10%, 63%);
  --colors-neutral-300: hsl(230, 10%, 76%);
  --colors-neutral-200: hsl(230, 11%, 89%);
  --colors-neutral-100: hsl(180, 9%, 98%);
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 48px;
  --rounded-xsmall: 4px;
  --text-5xl: 72px;
  --colors-primary-900: #063b57ff;
  --colors-accent-900: #013735ff;
  --colors-accent-800: #074f4bff;
  --colors-accent-700: #0c6f6aff;
  --colors-accent-600: #1ea49dff;
  --colors-accent-500: #22c7bfff;
  --colors-accent-400: #64f4edff;
  --colors-accent-300: #affbf7ff;
  --colors-accent-200: #b2f9f5ff;
  --colors-accent-100: #d3fffdff;
  --colors-success-900: #004c20ff;
  --colors-alert-900: #400a00ff;
  --colors-alert-800: #571004ff;
  --colors-alert-700: #751908ff;
  --colors-alert-600: #902715ff;
  --colors-alert-500: #ad402dff;
  --colors-alert-400: #e5715cff;
  --colors-alert-300: #ed9788ff;
  --colors-alert-200: #fbbfb4ff;
  --colors-alert-100: #ffdcd6ff;
  --colors-success-800: #01652bff;
  --colors-success-700: #11803fff;
  --colors-success-600: #1eab59ff;
  --colors-success-500: #3dd47cff;
  --colors-success-400: #50e58eff;
  --colors-success-300: #65f09fff;
  --colors-success-200: #80f5b1ff;
  --colors-success-100: #acffceff;
  --colors-primary-800: #124e70ff;
  --colors-primary-700: #156691ff;
  --colors-primary-600: #217cadff;
  --colors-primary-500: #3d99c9ff;
  --colors-primary-400: #6db3d9ff;
  --colors-primary-300: #91cae9ff;
  --colors-primary-200: #c3e6f9ff;
  --colors-primary-100: #daf1fdff;
  --rounded-small: 8px;
  --rounded-medium: 12px;
  --rounded-large: 16px;
  --rounded-xlarge: 24px;
  --rounded-full: 999px;
  background: var(--colors-neutral-900, #1d1e20);
  color: var(--colors-neutral-100);
}

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  *:not(svg > *) {
    font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
      "Helvetica Neue", sans-serif;
    box-sizing: border-box;
  }
  button {
    all: unset;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-1, 4px);
    border-radius: 1rem;
    cursor: pointer;
    &:focus-visible {
      outline: 2px solid var(--colors-primary-300);
    }
  }
}
@layer components {
  .button {
    padding: 6px var(--space-3, 12px);
  }
  button {
    &.primary {
      background-color: var(--colors-primary-600);
      &:active {
        background-color: var(--colors-primary-500);
      }
    }
    &.ghost {
      background-color: var(--colors-neutral-700);
      &:active {
        background-color: var(--colors-neutral-600);
      }
    }
    &.alert {
      background-color: var(--colors-alert-500);
    }
  }
  .modal {
    position: fixed;
    top: min(6rem, 20%);
    left: 50%;
    translate: -50% 0;
    background-color: var(--colors-neutral-800);
    width: 100vw;
    max-width: 372px;
    width: min(100vw, 372px);
    padding: var(--space-6, 24px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4, 16px);
    border-radius: var(--rounded-medium);
    z-index: 20;
    display: none;
  }
  .modal--open {
    display: flex;
  }
  .modal__icon {
    padding: var(--space-4, 16px);
    border-radius: var(--rounded-full);
    display: flex;
  }
  .modal__icon--alert {
    background-color: hsla(9, 72%, 63%, 0.1);
    & > svg * {
      stroke: var(--colors-alert-500);
    }
  }
  .modal__icon--primary {
    background-color: hsla(201, 87%, 18%, 0.49);
  }
  .modal__actions {
    display: flex;
    justify-content: stretch;
    gap: var(--space-3);
    width: 100%;
  }
  .modal__message {
    text-align: center;
  }
  .modal__text-input,
  .modal__select-input,
  .modal__datetime-input {
    border-radius: var(--rounded-full, 999px);
    border: none;
    background: var(--colors-neutral-900, #1d1e20ff);
    padding: var(--space-3, 12px) var(--space-6, 24px);
    display: block;
    width: 100%;
    color: var(--colors-neutral-100);
    font-size: var(--text-base);
    &:focus {
      outline: 2px solid var(--colors-primary-500);
    }
  }
  .modal__datetime-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
  option[value=""] {
    display: none;
  }
  .modal__btn {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--rounded-xlarge, 24px);
    font-weight: 600;
    display: block;
    flex: 1 0 0;
    text-align: center;
  }
  .overlay,
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background-color: hsla(9, 0%, 10%, 0.18);
    backdrop-filter: blur(3px);
    display: none;
  }
  .sidebar-overlay {
    z-index: 5;
  }
  .overlay--open {
    display: block;
  }
  .toast {
    display: flex;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    justify-content: space-between;
    align-items: center;
    border-radius: var(--rounded-small, 8px);
    & > .toast--info {
      display: flex;
      align-items: center;
      gap: var(--space-2, 8px);
      flex: 1 0 0;
      stroke: var(--colors-success-500);
      font-size: var(--text-sm, 14px);
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
  }

  .toast__btn--close {
    display: flex;
    padding: var(--space-1, 4px);
    justify-content: center;
    /* align-items: center; */
    gap: 10px;
    .toast--alert & {
      stroke: var(--colors-alert-700, #751908);
    }
    .toast--success & {
      stroke: var(--colors-success-700, #11803f);
    }
  }
  .toast--success {
    background: var(--colors-success-900, #004c20);
    color: var(--colors-success-200, #80f5b1);
    .toast--info {
      stroke: var(--colors-success-500, #3dd47c);
    }
  }
  .toast--alert {
    background: var(--colors-alert-900, #400a00);
    color: var(--colors-alert-200, #fbbfb4);
    .toast--info {
      stroke: var(--colors-alert-500);
    }
  }
  #toast-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 100;
    width: min(100%, 20rem);
  }

  .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    padding: var(--space-6, 24px) var(--space-4, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6, 24px);
    background: var(--colors-neutral-800);
    z-index: 6;
  }

  .brand-name {
    display: flex;
    padding: 0 var(--space-4, 16px);
    align-items: center;
    gap: var(--space-1, 4px);
    align-self: stretch;
  }

  .sidebar__home-tab {
    display: flex;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    align-items: flex-start;
    gap: var(--space-3, 12px);
    align-self: stretch;
  }

  .sidebar__home-tab p {
    color: var(--colors-neutral-300, #bcbec8);

    font-size: var(--text-base, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    cursor: pointer;
  }

  .brand-name img {
    width: 19.526px;
    height: 24px;
  }

  .brand-name h1 {
    color: #fff;

    font-size: var(--text-lg, 18px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 23.4px */
  }

  .sidebar__home-tab img {
    width: 20px;
    height: 20px;
  }

  .progress {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1, 4px);
    align-self: stretch;
  }
  .progress__bar {
    height: var(--space-3, 12px);
    border-radius: var(--rounded-small, 8px);
    background: var(--colors-neutral-700, #3c3e48);
    width: 100%;
    position: relative;
  }

  .progress__bar__done,
  .progress__bar__in-progress {
    border-radius: var(--rounded-small, 8px);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    transition: width 0.4s;
  }
  .progress__bar__in-progress {
    background-color: var(--colors-neutral-600);
  }
  .progress__bar__done {
    background: linear-gradient(
      90deg,
      var(--colors-primary-600, #217cad) 0%,
      var(--colors-primary-400, #6db3d9) 100%
    );
  }
  .progress > *:not(.progress__bar) {
    padding: var(--space-1, 4px) var(--space-4, 16px);
  }

  .progress p {
    color: #fff;

    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 23.4px */
  }

  .progress-status {
    color: var(--colors-neutral-100, #f9fafa);

    font-size: var(--text-base, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 18.2px */
  }

  .progress .prog-bar {
    position: ans;
  }

  .progress__bar__text {
    color: var(--colors-neutral-400, #979aaa);

    font-size: var(--text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
  }

  .container-low svg {
    position: relative;
  }

  .panel {
    display: flex;
    /* padding-top: var(--space-12, 48px); */
    flex-direction: column;
    align-items: stretch;
    margin-left: 280px;
    min-width: calc(100% - 280px);
    gap: var(--space-4, 16px);
    padding-bottom: 2rem;
  }

  .mode-container--kanban {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;

    > * {
      flex-grow: 1;
      flex-basis: 300px;
    }
  }
  .mode--kanban {
    width: min(100%, 1080px);
    margin: 0 auto;
  }

  .list {
    display: flex;
    padding: var(--space-3, 12px) var(--space-3, 16px);
    align-self: stretch;
    border-radius: var(--rounded-small, 8px);
    cursor: grab;
    background-color: var(--colors-neutral-700);
    flex-direction: column;
  }
  .list--done {
    & > .time-left {
      display: none;
    }
    & > .kanban-task {
      text-decoration: line-through;
      color: var(--colors-neutral-300);
    }
  }
  .mode-container--kanban .item > p {
    color: var(--colors-neutral-100, #f9fafa);

    font-size: var(--text-base, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .time-left {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    stroke: var(--colors-neutral-400);
    color: var(--colors-neutral-400);
  }
  .time-left__text {
    font-size: var(--text-sm);
  }
  .time-left__icon {
    display: flex;
    align-items: center;
  }

  .status {
    display: flex;
    padding: var(--space-4, 24px) var(--space-3, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    border-radius: var(--rounded-small, 8px);
    background: var(--colors-neutral-800);

    & > :first-child {
      display: flex;
      gap: var(--space-3);
      align-items: center;
    }
  }
  .status > h3 {
    font-size: var(--text-xl);
  }

  .categories {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    align-self: stretch;
  }

  .categories-empty {
    padding: var(--space-4);
    background-color: var(--colors-neutral-900);
    border-radius: var(--rounded-small);
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .categories-empty--active {
    display: flex;
  }

  button.categories-add {
    border-radius: var(--rounded-full);
    color: var(--colors-neutral-100);
    stroke: currentColor;
    font-size: var(--text-sm);
    font-weight: bold;
    padding: var(--space-2) var(--space-4);
  }
  a.categories-add {
    color: var(--colors-primary-500);
    cursor: pointer;
    &:hover {
      color: var(--colors-primary-400);
    }
  }

  .categories-title {
    display: flex;
    padding: var(--space-1, 4px) var(--space-4, 16px);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }

  .categories #category-tabs {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: var(--space-2, 8px);
    align-self: stretch;
  }

  .category,
  .sidebar__home-tab {
    display: flex;
    padding: var(--space-3) var(--space-4, 16px);
    color: var(--colors-neutral-500);
    justify-content: flex-start;
  }
  .category {
    padding: var(--space-1) var(--space-4, 16px);
    justify-content: space-between;
    &:hover .category__delete-btn {
      opacity: 1;
    }
  }
  .category__info {
    display: flex;
    gap: var(--space-3);
  }
  .category__delete-btn {
    transition: stroke 0.2s, background-color 0.2s;
    opacity: 0;
    padding: var(--space-1);
    border-radius: var(--rounded-small);
    stroke: var(--colors-neutral-400);
    &:hover {
      background-color: var(--colors-neutral-600);
      stroke: var(--colors-neutral-200);
    }
  }
  .category:hover:not(.tab--active),
  .sidebar__home-tab:hover:not(.tab--active) {
    border-radius: var(--rounded-medium, 12px);
    background: var(--colors-neutral-700, #3c3e48);
    transition: background-color 0.2s ease;
    cursor: pointer;
  }
  .tab--active {
    font-weight: bold;
    border-radius: var(--rounded-medium, 12px);
    background: var(--colors-neutral-700, #3c3e48);
    cursor: pointer;
    color: var(--colors-neutral-100);
  }

  .categories-title svg {
    cursor: pointer;
  }

  .header {
    padding: var(--space-3, 12px) 24px;
    padding-top: var(--space-16, 48px);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: calc(280px + var(--space-6));
    background-color: var(--colors-neutral-900);
    z-index: 4;
  }
  .header__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0px auto;
    max-width: 1280px;
    transition: max-width 0.5s ease;
  }
  .header__container--contained {
    max-width: 747px;
  }
  .categories-info__metadata {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    > * {
      display: flex;
      align-items: center;
      gap: var(--space-2, 12px);
      flex-wrap: wrap;
    }
  }

  .streak {
    display: flex;
    align-items: center;
  }
  .streak .streak__count {
    color: var(--colors-alert-500, #ad402d);

    font-size: var(--text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 18.2px */
  }

  .category-info {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
  }

  .category-info p {
    color: var(--colors-neutral-300, #bcbec8);

    font-size: var(--text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .category-info__icon {
    color: #fff;

    font-size: var(--text-3xl, 32px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  #view-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .view {
    display: flex;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    justify-content: center;
    align-items: center;
    transition: background-color 200ms;
    gap: var(--space-2, 8px);
    color: var(--colors-neutral-300);
    border-radius: var(--rounded-xlarge, 24px);
    & > svg {
      stroke: var(--colors-neutral-300);
    }
    &:hover:not(.view--active) {
      color: var(--colors-neutral-200);
      background: var(--colors-neutral-800, #28292f);
    }
  }

  .view--active {
    background: var(--colors-neutral-800, #28292f);
    font-weight: 700;
    color: var(--colors-neutral-100);
  }

  .actions {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    color: var(--colors-neutral-100, #f9fafa);
    flex-wrap: wrap;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .action__btn {
    display: flex;
    padding: var(--space-2, 12px) var(--space-4, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--space-1, 4px);
    border-radius: var(--rounded-xlarge, 24px);
    background: var(--colors-primary-600, #217cad);
  }

  .lower {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }

  hr {
    width: 100%;
    height: 3px;
    background-color: var(--colors-neutral-800, #28292f);
    border: none;
  }
  .mode {
    display: none;
    padding: 0 var(--space-6);
    transition: opacity 0.3s ease;
  }
  .mode--visible {
    display: initial;
  }
  .mode--transition {
    opacity: 0;
  }
  .mode--calendar {
    padding: 0 var(--space-8);
  }
  .mode__container--default {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 747px;
    margin: auto;
  }

  .todo {
    display: flex;
    padding: var(--space-2, 16px) var(--space-4, 12px);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: var(--rounded-small, 8px);
    background: var(--colors-neutral-800, #28292f);
  }

  .todos-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xl);
    text-align: center;
    padding: 0 var(--space-3);
    & * {
      font-size: initial;
      font-weight: bold;
    }
  }
  .todos-empty--active {
    display: flex;
  }
  .todo__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .todo__meta__name {
    color: var(--colors-neutral-100, #f9fafa);

    font-size: var(--text-xl, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .todo__meta__deadline {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    color: var(--colors-neutral-400);
  }

  .todo__meta__deadline__icon {
    display: flex;
    align-items: center;
    stroke: currentColor;
  }

  .todo__meta__deadline__text {
    font-size: var(--text-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .todo--done {
    opacity: 0.5;
    & .todo__meta__name {
      text-decoration: line-through;
    }
    & .todo__actions {
      visibility: hidden;
    }
  }
  .todo__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
  }

  .todo__actions > * {
    transition: all 0.2s;
    opacity: 0.5;
    display: flex;
    padding: var(--space-2, 8px);
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--rounded-xlarge, 24px);
    background: var(--colors-neutral-600, #595b69);
    &:hover {
      opacity: 1;
    }
  }

  .todo__action--done {
    background: var(--colors-primary-600, #217cad);
  }

  .mode--table {
    width: 100%;
    padding: 0 3vw;
  }
  .mode--calendar {
    min-width: 800px;
  }
  .mode__container--calendar {
    min-width: 800px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .task-item {
    padding: var(--space-1);
    border-radius: var(--rounded-xsmall);
    background-color: var(--colors-neutral-800);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0px auto;
    height: calc(100vh - 300px);
    table-layout: fixed;
  }

  table,
  th,
  td {
    border: 2px solid var(--colors-neutral-700);
    vertical-align: top;
  }
  div[data-monthdate] {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .cell--active {
    color: var(--colors-alert-500);
    font-weight: bold;
  }
  .task-item {
    color: var(--colors-neutral-100);
    font-weight: normal;
  }
  /* 
  td {
    min-height: 4rem;
    height:4rem;
  } */
  th,
  td {
    padding: 12px;
    text-align: left;
    font-size: 0.9rem;
  }

  th {
    background-color: var(--colors-neutral-800);
    text-align: center;
    font-weight: 600;
    &:first-child {
      color: var(--colors-alert-400);
    }
  }
  .calendar__info {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    justify-content: space-between;
  }
  .calendar__buttons {
    display: flex;
    gap: var(--space-4);
    > * {
      border-radius: var(--rounded-full);
      background-color: var(--colors-neutral-800);
      padding: var(--space-2);
      &:active {
        background-color: var(--colors-neutral-700);
      }
    }
  }

  .tstatus {
    font-weight: bold;
  }
  @media screen and (max-width: 947px) {
    .header {
      padding-left: var(--space-6);
      width: 100%;
    }
    .panel {
      margin-left: 0;
      width: 100%;
    }
    .sidebar {
      transition: left 0.2s ease;
      left: -280px;
    }
    .sidebar--open {
      left: 0px;
    }
    #toast-drawer {
      bottom: var(--space-16);
      top: initial;
    }
    .sidebar-trigger {
      position: fixed;
      top: var(--space-2);
      left: var(--space-2);
      padding: var(--space-4);
      z-index: 5;
      background-color: var(--colors-neutral-800);
      &:active {
        background-color: var(--colors-neutral-700);
      }
    }
    .actions {
      position:fixed;
      right:var(--space-1);
      bottom:var(--space-1);
    }
  }
  @media screen and (max-width: 434px) {
    #view-tabs {
      flex-wrap: wrap;
    }
    .mode-container--kanban {
      flex-wrap: wrap;
    }
    .mode {
      padding: 0 var(--space-3);
    }
    
  }
}

.glare-effect {
  position: relative;
  overflow: hidden;
}

.glare-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: glare-sweep 0.6s ease-out forwards;
}

@keyframes glare-sweep {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

.drop-placeholder {
  display: block;
  width: 100%;
  height: 60px;
  margin: 8px 0;
  border: 3px dashed #aaa;
  border-radius: 8px;
  background-color: rgba(200, 200, 200, 0.1);
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}
.drop-placeholder:hover {
  background-color: rgba(200, 200, 200, 0.2);
}