:root {
  --bg-color: #fafafa;
  --link-color: #3178ca;
  --text-color: #222;
  --shade-color: #dadada;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #303030;
    --link-color: #5da5fd;
    --text-color: #fafafa;
    --shade-color: #525252;
  }
}

body {
  font-family: Inter, system-ui, sans-serif;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 6px;
  background: var(--bg-color);
  color: var(--text-color);
}

header {
  background: var(--bg-color);
  position: sticky;
  top: 0;
  padding: 20px 0 10px;
}

h1 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.listing {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.listing .item {
  align-items: center;
  padding: 6px 10px;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing .item:hover {
  background-color: var(--shade-color);
  border-radius: 4px;
}

.item > div {
  padding: 0 8px;
}

.item > div:first-child {
  padding-left: 0px;
}

.item > div:last-child {
  padding-right: 0px;
}
.item .icon {
  width: 32px;
}

.item .icon.folder {
  content: url("data:image/svg+xml,%3Csvg version='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' enable-background='new 0 0 48 48'%3E%3Cpath fill='%23FFA000' d='M40,12H22l-4-4H8c-2.2,0-4,1.8-4,4v8h40v-4C44,13.8,42.2,12,40,12z'/%3E%3Cpath fill='%23FFCA28' d='M40,12H8c-2.2,0-4,1.8-4,4v20c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V16C44,13.8,42.2,12,40,12z'/%3E%3C/svg%3E");
}

.item .icon.opened-folder {
  content: url('data:image/svg+xml,%3Csvg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48"%3E%3Cpath fill="%23FFA000" d="M38,12H22l-4-4H8c-2.2,0-4,1.8-4,4v24c0,2.2,1.8,4,4,4h31c1.7,0,3-1.3,3-3V16C42,13.8,40.2,12,38,12z"/%3E%3Cpath fill="%23FFCA28" d="M42.2,18H15.3c-1.9,0-3.6,1.4-3.9,3.3L8,40h31.7c1.9,0,3.6-1.4,3.9-3.3l2.5-14C46.6,20.3,44.7,18,42.2,18z"/%3E%3C/svg%3E');
}

.item .icon.file {
  content: url('data:image/svg+xml,%3Csvg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48"%3E%3Cpolygon fill="%2390CAF9" points="40,45 8,45 8,3 30,3 40,13"/%3E%3Cpolygon fill="%23E1F5FE" points="38.5,14 29,14 29,4.5"/%3E%3C/svg%3E');
}

.item .icon.text-file {
  content: url("data:image/svg+xml,%3Csvg version='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' enable-background='new 0 0 48 48'%3E%3Cpolygon fill='%2390CAF9' points='40,45 8,45 8,3 30,3 40,13'/%3E%3Cpolygon fill='%23E1F5FE' points='38.5,14 29,14 29,4.5'/%3E%3Cg fill='%231976D2'%3E%3Crect x='16' y='21' width='17' height='2'/%3E%3Crect x='16' y='25' width='13' height='2'/%3E%3Crect x='16' y='29' width='17' height='2'/%3E%3Crect x='16' y='33' width='13' height='2'/%3E%3C/g%3E%3C/svg%3E");
}

.item .icon.audio-file {
  content: url("data:image/svg+xml,%3Csvg version='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' enable-background='new 0 0 48 48'%3E%3Crect x='204' fill='none' width='48' height='48'/%3E%3Cpolygon fill='%2390CAF9' points='244,45 212,45 212,3 234,3 244,13'/%3E%3Cpolygon fill='%23E1F5FE' points='242.5,14 233,14 233,4.5'/%3E%3Cg fill='%231976D2'%3E%3Ccircle cx='227' cy='30' r='4'/%3E%3Cpolygon points='234,21 229,19 229,30 231,30 231,22.9 234,24'/%3E%3C/g%3E%3Cpolygon fill='%2390CAF9' points='40,45 8,45 8,3 30,3 40,13'/%3E%3Cpolygon fill='%23E1F5FE' points='38.5,14 29,14 29,4.5'/%3E%3Cg fill='%231976D2'%3E%3Ccircle cx='23' cy='30' r='4'/%3E%3Cpolygon points='30,21 25,19 25,30 27,30 27,22.9 30,24'/%3E%3C/g%3E%3C/svg%3E");
}

.item .icon.image-file {
  content: url("data:image/svg+xml,%3Csvg version='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' enable-background='new 0 0 48 48'%3E%3Cpolygon fill='%2390CAF9' points='40,45 8,45 8,3 30,3 40,13'/%3E%3Cpolygon fill='%23E1F5FE' points='38.5,14 29,14 29,4.5'/%3E%3Cpolygon fill='%231565C0' points='21,23 14,33 28,33'/%3E%3Cpolygon fill='%231976D2' points='28,26.4 23,33 33,33'/%3E%3Ccircle fill='%231976D2' cx='31.5' cy='24.5' r='1.5'/%3E%3C/svg%3E");
}

.item .icon.video-file {
  content: url("data:image/svg+xml,%3Csvg version='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' enable-background='new 0 0 48 48'%3E%3Cpolygon fill='%2390CAF9' points='40,45 8,45 8,3 30,3 40,13'/%3E%3Cpolygon fill='%23E1F5FE' points='38.5,14 29,14 29,4.5'/%3E%3Cpolygon fill='%231976D2' points='30,28 20,22 20,34'/%3E%3C/svg%3E");
}

.item .icon.archive-file {
  content: url("data:image/svg+xml,%3Csvg version='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' enable-background='new 0 0 48 48'%3E%3Cpath fill='%23FF9800' d='M38,42H10c-2.2,0-4-1.8-4-4V10c0-2.2,1.8-4,4-4h28c2.2,0,4,1.8,4,4v28C42,40.2,40.2,42,38,42z'/%3E%3Cpath fill='%238A5100' d='M29.5,16h-11c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h11c0.8,0,1.5,0.7,1.5,1.5v0 C31,15.3,30.3,16,29.5,16z'/%3E%3C/svg%3E");
}

.item .name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item .size {
  flex-basis: 10%;
  text-align: end;
}

.item .modified {
  flex-basis: 10%;
  text-align: end;
}
