.page-recycle-bin {
  --recycle-line: rgb(69 180 230 / 0.24);
  --recycle-blue: #e8f8ff;
  --recycle-blue-strong: #0a8bb7;
  --recycle-danger: #fff0f0;
  --recycle-danger-line: rgb(196 57 47 / 0.24);
  min-height: calc(100vh - 52px);
  padding: 18px;
  background:
    radial-gradient(circle at 10% 0%, rgb(176 225 255 / 0.45), transparent 28rem),
    radial-gradient(circle at 82% 10%, rgb(223 248 238 / 0.5), transparent 28rem),
    linear-gradient(135deg, #f5fbff 0%, #effbff 50%, #fff7fb 100%);
}

:root[data-mode="night"] .page-recycle-bin {
  background:
    radial-gradient(circle at 12% 0%, rgb(255 106 42 / 0.08), transparent 28rem),
    radial-gradient(circle at 82% 8%, rgb(255 136 74 / 0.05), transparent 28rem),
    linear-gradient(135deg, #070707 0%, #11100f 54%, #15100d 100%) !important;
}
.page-recycle-bin .recycle-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--recycle-line);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 14px 42px rgb(54 111 139 / 0.08);
  backdrop-filter: blur(14px);
}
.page-recycle-bin .recycle-search {
  min-width: min(420px, 100%);
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--recycle-line);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.84);
  color: var(--ink);
}
.page-recycle-bin .recycle-bulk-actions,
.page-recycle-bin .recycle-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.page-recycle-bin .recycle-count {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.page-recycle-bin .recycle-shell {
  display: grid;
  gap: 10px;
}
.page-recycle-bin .recycle-section {
  border: 1px solid var(--recycle-line);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 16px 45px rgb(54 111 139 / 0.08);
  overflow: hidden;
}
.page-recycle-bin .recycle-section.empty {
  opacity: 1;
  border-color: rgb(69 180 230 / 0.14);
  background: rgb(244 252 255 / 0.7);
  box-shadow: none;
}
.page-recycle-bin .recycle-section.selected {
  background: rgb(255 255 255 / 0.88);
  box-shadow: 0 0 0 2px rgb(53 189 234 / 0.18), 0 18px 52px rgb(54 111 139 / 0.13);
}
.page-recycle-bin .recycle-section-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(90deg, rgb(239 251 255 / 0.9), rgb(255 255 255 / 0.68));
  cursor: pointer;
}
.page-recycle-bin .recycle-section.empty .recycle-section-head {
  cursor: default;
}
.page-recycle-bin .recycle-check {
  width: 16px;
  height: 16px;
  accent-color: var(--recycle-blue-strong);
}
.page-recycle-bin:not(:has(.selection-mode)) .recycle-check {
  display: none;
}
.page-recycle-bin:not(:has(.selection-mode)) .recycle-section-head {
  grid-template-columns: 1fr auto auto;
}
.page-recycle-bin .recycle-pill {
  display: none;
}
.page-recycle-bin .recycle-title strong {
  display: block;
  font-size: 16px;
}
.page-recycle-bin .recycle-section.empty .recycle-title strong {
  color: rgb(33 48 66 / 0.48);
}
.page-recycle-bin .recycle-section.empty .recycle-title span,
.page-recycle-bin .recycle-section.empty .recycle-section-count {
  color: rgb(92 110 130 / 0.58);
}
.page-recycle-bin .recycle-title span {
  color: var(--muted);
  font-size: 12px;
}
.page-recycle-bin .recycle-section-count {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.page-recycle-bin .recycle-expand {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--recycle-blue-strong);
  background: #eefbff;
  border: 1px solid var(--recycle-line);
  font-size: 24px;
  line-height: 1;
}
.page-recycle-bin .recycle-expand:disabled {
  color: rgb(92 110 130 / 0.45);
  background: rgb(246 251 254 / 0.72);
  cursor: not-allowed;
}
.page-recycle-bin .recycle-section-body {
  display: none;
  padding: 0 12px 12px;
}
.page-recycle-bin .recycle-section.open .recycle-section-body {
  display: block;
}
.page-recycle-bin .recycle-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--recycle-line);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.78);
}
.page-recycle-bin .recycle-table th,
.page-recycle-bin .recycle-table td {
  padding: 8px;
  border-bottom: 1px solid rgb(64 100 126 / 0.12);
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
}
.page-recycle-bin .recycle-table th {
  color: var(--muted);
  background: #f5fbff;
  font-size: 12px;
}
.page-recycle-bin .recycle-table-no-actions th,
.page-recycle-bin .recycle-table-no-actions td {
  grid-template-columns: none;
}
.page-recycle-bin .recycle-thumb {
  width: 52px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: #eaf7ff;
  border: 1px solid var(--recycle-line);
}
.page-recycle-bin .recycle-item-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-recycle-bin .recycle-item-cell.no-thumb {
  gap: 0;
}
.page-recycle-bin .recycle-item-title {
  font-weight: 600;
}
.page-recycle-bin .recycle-danger-action {
  background: var(--recycle-danger);
  color: #b42318;
  border-color: var(--recycle-danger-line);
   font-weight: 600;
    font-size: 12px;
}
.page-recycle-bin .recycle-restore-action {
  background: var(--recycle-blue);
  color: var(--recycle-blue-strong);
      font-weight: 600;
    font-size: 12px;
}
.page-recycle-bin .recycle-empty {
  padding: 18px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--recycle-line);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.5);
}
.topbar-actions .recycle-choice {
  position: relative;
  width: min(260px, 28vw);
}
.topbar-actions .recycle-choice-trigger {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.9);
  color: var(--ink);
  font-weight: 800;
  text-align: left;
  box-shadow: 0 10px 26px rgb(47 111 221 / 0.06);
}
.topbar-actions .recycle-choice-trigger svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
}
.topbar-actions .recycle-choice-menu {
  display: none;
  position: absolute;
  z-index: 12030;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: min(300px, 52vh);
  overflow: auto;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgb(22 47 70 / 0.18);
}
.topbar-actions .recycle-choice.open .recycle-choice-menu {
  display: grid;
  gap: 4px;
}
.topbar-actions .recycle-choice-option {
  min-height: 34px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}
.topbar-actions .recycle-choice-option:hover,
.topbar-actions .recycle-choice-option.active {
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary-strong);
}
.topbar-actions .recycle-restore-action,
.topbar-actions .recycle-danger-action {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
}
.topbar-actions .recycle-restore-action {
  background: #ecfdf3;
  color: #15803d;
  border-color: rgb(22 163 74 / 0.32);
}
.topbar-actions .recycle-danger-action {
  background: #fff1f2;
  color: #b91c1c;
  border-color: rgb(220 38 38 / 0.32);
}
.topbar-actions .recycle-restore-action:disabled,
.topbar-actions .recycle-danger-action:disabled {
  opacity: 0.48;
}
.topbar-actions .recycle-restore-action svg,
.topbar-actions .recycle-danger-action svg,
.topbar-actions [data-action="recycle-select-visible"] svg {
  width: 19px;
  height: 19px;
}
.topbar-actions [data-action="recycle-select-visible"].active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary-strong);
}
.recycle-confirm-backdrop {
  position: fixed;
  top: calc(-1 * var(--recycle-overlay-offset-y, 0px));
  left: calc(-1 * var(--recycle-overlay-offset-x, 0px));
  width: 100vw;
  height: 100dvh;
  z-index: 12060;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(15 23 42 / 0.42);
}
.recycle-confirm-open {
  overflow: hidden !important;
}
.recycle-confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: min(86dvh, 520px);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(15 23 42 / 0.22);
}
.recycle-confirm-dialog h3,
.recycle-confirm-dialog p {
  margin: 0;
}
.recycle-confirm-dialog p {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}
.recycle-confirm-dialog .recycle-confirm-error {
  color: #b42318;
}
.recycle-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:root[data-mode="night"] .page-recycle-bin .recycle-toolbar,
:root[data-mode="night"] .page-recycle-bin .recycle-section,
:root[data-mode="night"] .page-recycle-bin .recycle-section.empty,
:root[data-mode="night"] .page-recycle-bin .recycle-section.selected,
:root[data-mode="night"] .page-recycle-bin .recycle-section-head,
:root[data-mode="night"] .page-recycle-bin .recycle-section-body,
:root[data-mode="night"] .page-recycle-bin .recycle-empty,
:root[data-mode="night"] .recycle-confirm-dialog {
  border-color: rgb(255 136 74 / 0.24);
  background: rgb(18 18 18 / 0.94);
  color: #f5eee8;
  box-shadow: none;
}

:root[data-mode="night"] .page-recycle-bin .recycle-table th,
:root[data-mode="night"] .page-recycle-bin .recycle-table td {
  border-color: rgb(255 136 74 / 0.16);
  background: rgb(14 14 14 / 0.9);
  color: #f5eee8;
}

:root[data-mode="night"] .page-recycle-bin .recycle-table th {
  background: rgb(30 23 20 / 0.96);
  color: #ffd2bd;
}

:root[data-mode="night"] .page-recycle-bin input,
:root[data-mode="night"] .page-recycle-bin select,
:root[data-mode="night"] .page-recycle-bin textarea,
:root[data-mode="night"] .page-recycle-bin .recycle-search,
:root[data-mode="night"] .page-recycle-bin .recycle-expand,
:root[data-mode="night"] .page-recycle-bin .recycle-thumb,
:root[data-mode="night"] .topbar-actions .recycle-choice-trigger,
:root[data-mode="night"] .topbar-actions .recycle-choice-menu {
  border-color: rgb(255 136 74 / 0.26) !important;
  background: rgb(14 14 14 / 0.96) !important;
  color: #f5eee8 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

:root[data-mode="night"] .topbar-actions .recycle-choice-option {
  color: #f5eee8;
}

:root[data-mode="night"] .topbar-actions .recycle-choice-option:hover,
:root[data-mode="night"] .topbar-actions .recycle-choice-option.active {
  background: rgb(255 106 42 / 0.18);
  color: #ffd2bd;
}

:root[data-mode="night"] .topbar-actions [data-action="recycle-select-visible"].active {
  border-color: rgb(255 136 74 / 0.42);
  background: rgb(44 28 21 / 0.96);
  color: #ffd2bd;
}

:root[data-mode="night"] .topbar-actions .recycle-restore-action {
  border-color: rgb(74 222 128 / 0.32);
  background: rgb(20 83 45 / 0.24);
  color: #bbf7d0;
}

:root[data-mode="night"] .topbar-actions .recycle-danger-action {
  border-color: rgb(248 113 113 / 0.34);
  background: rgb(127 29 29 / 0.28);
  color: #fecaca;
}
@media (max-width: 760px) {
  .page-recycle-bin .recycle-toolbar,
  .page-recycle-bin .recycle-bulk-actions,
  .page-recycle-bin .recycle-toolbar-left {
    align-items: stretch;
    flex-direction: column;
  }
  .page-recycle-bin .recycle-section-head {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
  }
  .page-recycle-bin:not(:has(.selection-mode)) .recycle-section-head {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .page-recycle-bin .recycle-title {
    min-width: 0;
  }
  .page-recycle-bin .recycle-title strong,
  .page-recycle-bin .recycle-title span {
    overflow-wrap: normal;
    word-break: normal;
  }
  .page-recycle-bin .recycle-section-count {
    font-size: 13px;
  }
  .page-recycle-bin .recycle-table {
    min-width: 760px;
  }
  .page-recycle-bin .recycle-section-body {
    overflow-x: auto;
  }
  .topbar-actions .recycle-choice {
    width: min(180px, 58vw);
  }
  table.recycle-table svg {
    width: 16px;
    height: 16px;
}
}