.fluent-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: var(--icon) center/contain no-repeat;
  -webkit-mask: var(--icon) center/contain no-repeat;
  vertical-align: middle;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button:disabled {
  cursor: default;
}
aside {
  background: #24242bd9;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.navigation-buttons {
  display: flex;
  gap: 3px;
}
.navigation-buttons button {
  padding: 6px;
}
.command-bar button:first-child {
  border-radius: 5px;
}
.cards .explorer-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  min-height: 180px;
  cursor: default;
}
.explorer-item .file-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cards .file-name {
  flex-wrap: wrap;
}
.cards .file-name img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 5px;
}
.cards .file-name > .fluent-icon {
  width: 40px;
  height: 40px;
  margin: 16px auto;
}
.file-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
}
.cards .file-name strong {
  width: 100%;
  line-height: 1.5;
}
.type-folder {
  color: #efbf58;
}
.type-image {
  color: #80bdad;
}
.type-video {
  color: var(--accent);
}
.type-application,
.type-text {
  color: var(--accent);
}
.select-check {
  accent-color: var(--accent);
  width: 16px !important;
  height: 16px;
  cursor: default;
}
.cards .select-check {
  position: absolute;
  left: 9px;
  top: 9px;
  z-index: 1;
  opacity: 0;
}
.explorer-item:hover .select-check,
.explorer-item.selected .select-check,
.select-check:focus {
  opacity: 1;
}
.card.selected {
  background: rgb(var(--accent-rgb) / 15%) !important;
  border-color: rgb(var(--accent-rgb) / 50%) !important;
}
.status-badge {
  align-self: flex-start;
  font-size: 11px;
  border-radius: 5px;
  padding: 4px 8px;
  margin-top: 10px;
  background: rgb(var(--accent-rgb) / 13%);
  color: #bdc3d0;
}
.status-badge.editing {
  background: #e1b95420;
  color: #e1c58b;
}
.status-badge.ready {
  background: #6ac9a020;
  color: #95d4b7;
}
.status-badge.published {
  background: rgb(var(--accent-rgb) / 13%);
  color: var(--accent);
}
.status-badge:empty {
  display: none;
}
.details-list {
  overflow: auto;
  --columns: minmax(220px, 2fr) minmax(155px, 1fr) minmax(90px, 0.6fr)
    minmax(85px, 0.5fr) minmax(110px, 0.7fr);
}
.details-heading,
.details-list .card {
  display: grid;
  grid-template-columns: 28px var(--columns);
  align-items: center;
  gap: 10px;
  min-width: 780px;
}
.details-heading {
  position: sticky;
  top: 0;
  background: #28282d;
  z-index: 2;
  border-radius: 5px;
  padding: 8px 12px;
}
.details-heading:before {
  content: "";
}
.details-heading > div {
  resize: horizontal;
  overflow: auto;
  min-width: 60px;
}
.details-heading button {
  background: none;
  border: 0;
  white-space: nowrap;
}
.details-list .card {
  padding: 10px 12px;
  border-radius: 5px;
  background: transparent;
  min-height: 48px;
}
.details-list .file-name strong {
  white-space: nowrap;
}
.details-list .card > span {
  font-size: 12px;
  color: #aaa;
}
.details-list .status-badge {
  margin: 0;
  align-self: center;
  color: #c8c9d8;
}
.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 210px;
  padding: 5px;
  background: #2b2b32f5;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  box-shadow: 0 12px 40px #0006;
  backdrop-filter: blur(20px);
}
.context-menu button {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  background: none;
  border: 0;
  padding: 9px 12px;
}
.context-menu button:hover {
  background: #ffffff10;
}
.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  gap: 12px;
  grid-column: 1/-1;
}
.drop-zone .fluent-icon {
  width: 48px;
  height: 48px;
  color: var(--accent);
}
.drop-zone p {
  font-size: 12px;
  margin: 0;
}
.dragging .drop-zone {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 8%);
}
#status-bar {
  display: flex;
  align-items: center;
  min-height: 36px;
  font-size: 12px;
  letter-spacing: 0;
}
#toast button {
  margin-left: 12px;
  background: none;
  color: inherit;
}
#content:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
.search::after {
  content: "Ctrl+F";
}
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] main {
  background: #f5f6f9;
  color: #242632;
}
html[data-theme="light"] aside {
  background: #e9ebf0d9;
}
html[data-theme="light"] button,
html[data-theme="light"] .library,
html[data-theme="light"] .card,
html[data-theme="light"] .overview-card,
html[data-theme="light"] .address-bar,
html[data-theme="light"] .search,
html[data-theme="light"] dialog,
html[data-theme="light"] .month-panel,
html[data-theme="light"] .agenda-panel,
html[data-theme="light"] .session-card,
html[data-theme="light"] .context-menu,
html[data-theme="light"] .details-heading {
  background: #fff;
  color: #272936;
  border-color: #dde0e9;
}
html[data-theme="light"] nav button,
html[data-theme="light"] #folders button {
  background: transparent;
  color: #444857;
}
html[data-theme="light"] button:hover,
html[data-theme="light"] nav button.active {
  background: var(--accent-soft);
}
html[data-theme="light"] .primary {
  background: var(--accent);
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color: #242632;
  background: transparent;
}
html[data-theme="light"] .intro #subtitle,
html[data-theme="light"] .toolbar h2,
html[data-theme="light"] .details-list .card > span,
html[data-theme="light"] .storage p,
html[data-theme="light"] .empty {
  color: #626879;
}
html[data-theme="light"] .status-badge {
  color: #4b5265;
}
html[data-theme="light"] header {
  background: #f5f6f9;
}
html[data-theme="light"] .brand {
  color: #252735;
}
@media (max-width: 750px) {
  .navigation-buttons {
    order: -1;
  }
  .command-bar {
    gap: 0;
  }
  .command-bar button {
    font-size: 11px;
  }
  .command-bar button span:not(.fluent-icon) {
    display: none;
  }
  .cards .file-name img {
    height: 100px;
  }
  .cards .explorer-item {
    padding: 12px;
  }
  .search::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.details-heading > div {
  position: relative;
  resize: none;
  overflow: visible;
}
.resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.resize-handle:hover {
  background: rgb(var(--accent-rgb) / 38%);
}

.search-symbol {
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url(/icons/search.svg) center/contain no-repeat;
  -webkit-mask: url(/icons/search.svg) center/contain no-repeat;
}
.command-bar button[data-command]:disabled {
  opacity: 0.35;
}
.details-list .file-name {
  overflow: hidden;
}
.details-heading button {
  width: 100%;
  justify-content: flex-start;
}
#toast.show {
  pointer-events: auto;
  z-index: 1001;
}
.toolbar .fluent-icon {
  display: inline-block;
  background: currentColor;
  padding: 0;
  border-radius: 0;
}
.details-list .select-check {
  opacity: 0.35;
}
.details-list .card:hover .select-check,
.details-list .card.selected .select-check {
  opacity: 1;
}

.command-bar #upload {
  margin: 0 8px 0 0;
  background: var(--accent);
  color: #161b32;
  border: 0;
  border-radius: 5px;
}
.command-bar #upload span {
  display: inline-block;
}
html[data-theme="light"] .overview-card strong {
  color: var(--accent);
}
html[data-theme="light"] .status-badge.raw {
  color: #5b6173;
}
html[data-theme="light"] .status-badge.editing {
  color: #806326;
}
html[data-theme="light"] .status-badge.ready {
  color: #27765a;
}
html[data-theme="light"] .status-badge.published {
  color: var(--accent);
}
html[data-theme="light"] .toolbar .fluent-icon {
  color: var(--accent);
}