/* assets/css/files/base.css */
.i-files,
.bud {
  color-scheme: dark;
  --danger: #ff7b86;
}
.i-files [hidden],
.bud [hidden] {
  display: none !important;
}
.i-files button,
.i-files input,
.i-files select,
.bud button {
  font-family: inherit;
  color: inherit;
}
.i-files button,
.bud button {
  border: 0;
  cursor: pointer;
}
.i-files button:disabled,
.bud button:disabled {
  cursor: default;
}
.i-files :focus-visible,
.bud :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.i-files .ql-card:focus-visible,
.i-wa .ql-card:focus-visible,
.i-files .fd-sheet:focus-visible,
.i-files .fd-menu:focus-visible {
  outline: none;
}
.fk-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.fk-hint span {
  margin-left: 2px;
}
kbd.fk {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 0;
  border-radius: 5px;
  background: var(--fill-hover);
  box-shadow: none;
  font:
    700 10.5px/1 "Isla Heros",
    "TeX Gyre Heros",
    sans-serif;
  color: var(--ink-dim);
}

/* assets/css/files/pictures/scenes-outdoor.css */
.pic {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.pic i {
  position: absolute;
  display: block;
}
.pic-dur {
  position: absolute;
  right: 6%;
  bottom: 6%;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}
.pic-dur .ig {
  font-size: 11px;
}
.fd-sicon .pic-dur,
.fd-shelf-thumb .pic-dur,
.fd-clash-thumb .pic-dur,
.wa-media-cell .pic-dur {
  display: none;
}
.pic-sea {
  background:
    linear-gradient(
      #ef946a,
      #f6c18c 55%,
      #2c5878 55%,
      #1b3a59);
}
.pic-sea i:nth-child(1) {
  left: 57%;
  top: 33%;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff1c9;
  box-shadow: 0 0 18px 6px rgba(255, 228, 170, 0.55);
}
.pic-sea i:nth-child(2) {
  inset: 55% 0 0;
  background: repeating-linear-gradient(transparent 0 9%, rgba(255, 255, 255, 0.13) 9% 11%);
}
.pic-sea i:nth-child(3) {
  left: 59%;
  width: 11%;
  top: 56%;
  height: 30%;
  background: repeating-linear-gradient(rgba(255, 214, 160, 0.6) 0 5%, transparent 5% 11%);
}
.pic-sea i:nth-child(4) {
  left: 0;
  right: 0;
  top: 53%;
  height: 2%;
  background: rgba(255, 220, 180, 0.35);
}
.pic-ferry {
  background:
    linear-gradient(
      #8fc3e8,
      #d5ebf5 52%,
      #3b7aa6 52%,
      #24577d);
}
.pic-ferry i:nth-child(1) {
  left: 26%;
  right: 26%;
  top: 44%;
  height: 10%;
  border-radius: 2px 2px 6px 6px;
  background: #f8f8f8;
  border-bottom: 3px solid #1f1f1f;
}
.pic-ferry i:nth-child(2) {
  left: 26%;
  right: 26%;
  top: 48%;
  height: 2%;
  background: #c8352d;
}
.pic-ferry i:nth-child(3) {
  left: 36%;
  right: 42%;
  top: 37%;
  height: 8%;
  border-radius: 2px;
  background: #e6e6e6;
}
.pic-ferry i:nth-child(4) {
  inset: 58% 0 0;
  background: repeating-linear-gradient(transparent 0 10%, rgba(255, 255, 255, 0.14) 10% 12%);
}
.pic-peaks {
  background: linear-gradient(#a9b8e6, #e8d8ef);
}
.pic-peaks i:nth-child(1) {
  inset: 26% 0 0;
  background: #7f88b4;
  clip-path: polygon(0 100%, 0 70%, 28% 18%, 52% 62%, 74% 8%, 100% 64%, 100% 100%);
}
.pic-peaks i:nth-child(2) {
  inset: 52% 0 0;
  background: #4b5482;
  clip-path: polygon(0 100%, 0 40%, 22% 10%, 46% 58%, 68% 26%, 100% 70%, 100% 100%);
}
.pic-peaks i:nth-child(3) {
  left: 16%;
  top: 14%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff6e2;
}
.pic-night {
  background: linear-gradient(#141a3d, #2b2452);
}
.pic-night i:nth-child(1) {
  right: 16%;
  top: 12%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f6f0c9;
  box-shadow: 0 0 20px 6px rgba(246, 240, 201, 0.25);
}
.pic-night i:nth-child(n+2) {
  bottom: 0;
  background:
    radial-gradient(
      circle,
      #ffd56b 0 1px,
      transparent 1.6px) 3px 4px / 9px 10px,
    #0a0c1b;
}
.pic-night i:nth-child(2) {
  left: 4%;
  width: 18%;
  height: 44%;
}
.pic-night i:nth-child(3) {
  left: 24%;
  width: 14%;
  height: 62%;
}
.pic-night i:nth-child(4) {
  left: 40%;
  width: 20%;
  height: 36%;
}
.pic-night i:nth-child(5) {
  left: 62%;
  width: 12%;
  height: 54%;
}
.pic-night i:nth-child(6) {
  left: 76%;
  width: 22%;
  height: 40%;
}
.pic-garden {
  background: #2d6837;
}
.pic-garden i {
  border-radius: 50%;
  aspect-ratio: 1;
}
.pic-garden i:nth-child(1) {
  left: 30%;
  top: 30%;
  width: 50%;
  background: #5aa65a;
}
.pic-garden i:nth-child(2) {
  left: 6%;
  top: 6%;
  width: 32%;
  background: #8cc97a;
}
.pic-garden i:nth-child(3) {
  left: 66%;
  top: 2%;
  width: 28%;
  background: #3f8f4a;
}
.pic-tram {
  background: linear-gradient(#f1e2c7 70%, #c8b496 70%);
}
.pic-tram i:nth-child(1) {
  left: 26%;
  right: 26%;
  top: 20%;
  bottom: 18%;
  border-radius: 12% 12% 4% 4% / 8% 8% 3% 3%;
  background: #f3c419;
}
.pic-tram i:nth-child(2) {
  left: 31%;
  right: 31%;
  top: 33%;
  height: 18%;
  background: #262626;
}
.pic-tram i:nth-child(3) {
  left: 0;
  right: 0;
  bottom: 11%;
  height: 2%;
  background: #8c7c62;
}
.pic-tiles {
  background:
    radial-gradient(
      circle,
      #edf2fb 0 18%,
      transparent 19%) 0 0 / 25% 25%,
    conic-gradient(
      from 45deg,
      #23529f 0 25%,
      #edf2fb 0 50%,
      #23529f 0 75%,
      #edf2fb 0) 0 0 / 25% 25%;
}

/* assets/css/files/pictures/scenes-home.css */
.pic-kitchen {
  background: #e8e0d1;
}
.pic-kitchen i:nth-child(1) {
  left: 56%;
  top: 12%;
  width: 30%;
  height: 34%;
  border: 3px solid #fff;
  background: linear-gradient(#93c1e4, #cfe6f3);
}
.pic-kitchen i:nth-child(2) {
  left: 6%;
  top: 10%;
  width: 42%;
  height: 24%;
  border-radius: 3px;
  background: #6d8a7b;
}
.pic-kitchen i:nth-child(3) {
  left: 0;
  right: 0;
  top: 60%;
  height: 7%;
  background: #3a3a3a;
}
.pic-kitchen i:nth-child(4) {
  left: 0;
  right: 0;
  top: 67%;
  bottom: 0;
  background:
    repeating-linear-gradient(
      90deg,
      #7b9887 0 24%,
      #5f7a6b 24% 25%);
}
.pic-kitchen i:nth-child(5) {
  left: 18%;
  top: 46%;
  width: 10%;
  height: 14%;
  border-radius: 40% 40% 10% 10%;
  background: #b8563c;
}
.pic-hall {
  background: linear-gradient(#ddd6c9 64%, #a7896b 64%);
}
.pic-hall i:nth-child(1) {
  left: 38%;
  width: 24%;
  top: 16%;
  bottom: 36%;
  border: 3px solid #c8c0b2;
  background: #f7f4ee;
}
.pic-hall i:nth-child(2) {
  left: 56%;
  top: 42%;
  width: 3%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #8a7a5c;
}
.pic-hall i:nth-child(3) {
  left: 20%;
  right: 20%;
  top: 0;
  height: 40%;
  background:
    radial-gradient(
      ellipse at 50% 0,
      rgba(255, 246, 214, 0.75),
      transparent 70%);
}
.pic-hall i:nth-child(4) {
  left: 24%;
  right: 24%;
  bottom: 8%;
  height: 14%;
  border-radius: 50%;
  background: #8a4f4f;
}
.pic-paint {
  background: #f3f0e9;
}
.pic-paint i {
  top: 12%;
  bottom: 12%;
  width: 18%;
  border-radius: 6% / 4%;
}
.pic-paint i:nth-child(1) {
  left: 8%;
  background: #c86b4f;
}
.pic-paint i:nth-child(2) {
  left: 30%;
  background: #e0b15a;
}
.pic-paint i:nth-child(3) {
  left: 52%;
  background: #7a9b76;
}
.pic-paint i:nth-child(4) {
  left: 74%;
  background: #4d6a8f;
}
.pic-plan {
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 10% 10%,
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.07) 1px,
      transparent 1px) 0 0 / 10% 10%,
    #1e3a60;
}
.pic-plan i:nth-child(1) {
  inset: 12%;
  border: 3px solid #e8f0ff;
}
.pic-plan i:nth-child(2) {
  left: 48%;
  top: 12%;
  bottom: 40%;
  width: 3px;
  background: #e8f0ff;
}
.pic-plan i:nth-child(3) {
  left: 12%;
  right: 30%;
  top: 58%;
  height: 3px;
  background: #e8f0ff;
}
.pic-plan i:nth-child(4) {
  left: 52%;
  top: 58%;
  width: 14%;
  aspect-ratio: 1;
  border-top: 2px solid rgba(232, 240, 255, 0.6);
  border-left: 2px solid rgba(232, 240, 255, 0.6);
  border-top-left-radius: 100%;
}
.pic-shot {
  background: #1e1e1e;
}
.pic-shot i:nth-child(1) {
  left: 36%;
  right: 36%;
  top: 0;
  height: 6%;
  border-radius: 0 0 40% 40% / 0 0 100% 100%;
  background: #000;
}
.pic-shot i:nth-child(2) {
  left: 7%;
  top: 16%;
  width: 54%;
  height: 72%;
  border-radius: 4%;
  background: #2c2c2c;
}
.pic-shot i:nth-child(3) {
  left: 65%;
  top: 16%;
  width: 28%;
  height: 42%;
  border-radius: 6%;
  background: #2c2c2c;
}
.pic-shot i:nth-child(4) {
  left: 12%;
  top: 24%;
  width: 28%;
  height: 6%;
  border-radius: 99px;
  background: #49a2fe;
}
.pic-toast {
  background:
    radial-gradient(
      circle at 50% 70%,
      #4a2c18,
      #120a06 75%);
}
.pic-toast i {
  border-radius: 50%;
  aspect-ratio: 1;
  background: rgba(255, 190, 95, 0.5);
  filter: blur(1px);
}
.pic-toast i:nth-child(1) {
  left: 10%;
  top: 18%;
  width: 16%;
}
.pic-toast i:nth-child(2) {
  left: 38%;
  top: 8%;
  width: 11%;
  background: rgba(255, 228, 160, 0.55);
}
.pic-toast i:nth-child(3) {
  left: 62%;
  top: 24%;
  width: 20%;
  background: rgba(255, 150, 90, 0.4);
}
.pic-toast i:nth-child(4) {
  left: 30%;
  top: 50%;
  width: 8%;
}

/* assets/css/files/pictures/paper.css */
.paper {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 10%;
  bottom: 10%;
  display: block;
  border-radius: 4px;
  background: #f3f1ec;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  container-type: inline-size;
}
.paper i {
  position: absolute;
  display: block;
}
.paper-head {
  left: 12%;
  right: 38%;
  top: 9%;
  height: 7%;
  border-radius: 1px;
  background: #3a3a3a;
}
.paper-lines {
  left: 12%;
  right: 12%;
  top: 24%;
  bottom: 18%;
  background: linear-gradient(#c3c3c3 0 22%, transparent 22%) 0 0 / 100% 9% repeat-y;
}
.paper-text .paper-head {
  display: none;
}
.paper-text .paper-lines {
  top: 10%;
  bottom: 10%;
}
.paper-sheet .paper-head {
  left: 0;
  right: 0;
  top: 0;
  height: 13%;
  border-radius: 4px 4px 0 0;
  background: #2f8a55;
}
.paper-sheet .paper-lines {
  left: 8%;
  right: 8%;
  top: 20%;
  background:
    linear-gradient(
      90deg,
      #cfcfcf 1px,
      transparent 1px) 0 0 / 25% 100%,
    linear-gradient(#cfcfcf 1px, transparent 1px) 0 0 / 100% 12%;
}
.paper-doc .paper-head {
  background: #3d6fd0;
}
.paper-tag {
  position: absolute;
  left: 8%;
  bottom: 6%;
  padding: 0.2em 0.45em;
  border-radius: 3px;
  background: #d83a2e;
  color: #fff;
  font-size: clamp(6px, 13cqw, 15px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.paper-tag.is-sheet {
  background: #2f8a55;
}
.kindtile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  font-size: 44px;
}

/* assets/css/files/desk/frame.css */
.fd-frame {
  position: absolute;
  inset: 6px 10px 10px;
  display: flex;
  gap: 12px;
}
.fd-side {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 200px;
  padding: 10px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.fd-side-label {
  display: block;
  padding: 14px 10px 6px;
  font-size: 11px;
  line-height: 14px;
  color: var(--ink-faint);
}
.fd-place-row {
  position: relative;
  display: flex;
  align-items: center;
}
.fd-place {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  background: none;
  font-size: 14px;
  text-align: left;
  transition: background-color 140ms linear;
}
.fd-place:hover {
  background: var(--fill);
}
.fd-place.is-current {
  background: var(--fill-hover);
}
.fd-place-g {
  flex: none;
  width: 18px;
  font-size: 16px;
  text-align: center;
  color: var(--ink-dim);
}
.fd-place.is-current .fd-place-g {
  color: var(--ink);
}
.fd-place-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fd-side-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-faint);
}
.fd-eject {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: none;
  font-size: 13px;
  color: var(--ink-dim) !important;
}
.fd-eject:hover {
  background: var(--fill-hover);
  color: var(--ink) !important;
}
.fd-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding: 10px;
  font-size: 11px;
  color: var(--ink-faint);
}
.fd-usage-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--fill);
  overflow: hidden;
}
.fd-usage-bar span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ink-dim);
}

/* assets/css/files/desk/toolbar.css */
.fd-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.fd-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 40px;
}
.fd-history,
.fd-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.fd-tools {
  gap: 4px;
}
.fd-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: none;
  font-size: 18px;
  transition: background-color 140ms linear;
}
.fd-icon:hover:not(:disabled) {
  background: var(--fill);
}
.fd-icon:disabled {
  opacity: 0.3;
}
.fd-icon[aria-pressed=true] {
  background: var(--fill-hover);
}
.fd-badge {
  position: absolute;
  top: -2px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  box-shadow: 0 0 0 2px #000;
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
}
.fd-path {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 36px;
  overflow: hidden;
}
.fd-crumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.fd-crumbs.is-cut {
  justify-content: flex-end;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 40px);
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 40px);
}
.fd-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  background: none;
  font-size: 14px;
  color: var(--ink-dim) !important;
  transition: background-color 140ms linear, color 140ms linear;
}
.fd-crumb:hover {
  background: var(--fill);
  color: var(--ink) !important;
}
.fd-crumb.is-last {
  background: var(--fill);
  color: var(--ink) !important;
  font-weight: 700;
}
.fd-crumb .ig {
  font-size: 15px;
}
.fd-crumb-sep {
  flex: none;
  font-size: 14px;
  color: var(--ink-faint);
}
.fd-pathinput {
  display: none;
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: var(--fill);
  font-size: 14px;
}
.fd-path.is-editing .fd-crumbs {
  display: none;
}
.fd-path.is-editing .fd-pathinput {
  display: block;
}
.fd-pathinput:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.fd-pathinput.is-wrong {
  animation: fd-shake 320ms var(--out-cubic);
}
@keyframes fd-shake {
  25% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
}
.fd-searchbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 180px;
  height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  background: var(--fill);
  font-size: 13px;
  color: var(--ink-faint) !important;
  transition: background-color 140ms linear;
}
.fd-searchbtn:hover {
  background: var(--fill-hover);
}
.fd-searchbtn .ig {
  font-size: 16px;
  color: var(--ink-dim);
}
.fd-searchbtn span:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fd-searchbtn[aria-pressed=true] {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.has-shelf .fd-searchbtn {
  justify-content: center;
  width: 34px;
  padding: 0;
  background: none;
}
.has-shelf .fd-searchbtn:hover {
  background: var(--fill);
}
.has-shelf .fd-searchbtn span:last-child {
  display: none;
}
.has-shelf .fd-searchbtn .ig {
  font-size: 18px;
  color: var(--ink);
}

/* assets/css/files/desk/controls.css */
.fd-segs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 18px;
  background: var(--fill);
}
.fd-seg {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: none;
  font-size: 17px;
  color: var(--ink-dim) !important;
}
.fd-seg[aria-pressed=true] {
  background: var(--fill-hover);
  color: var(--ink) !important;
}
.fd-pillbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  background: var(--fill);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 140ms linear, transform 160ms var(--out-cubic);
}
.fd-pillbtn .ig {
  font-size: 15px;
}
.fd-pillbtn:hover:not(:disabled) {
  background: var(--fill-hover);
}
.fd-pillbtn:active:not(:disabled) {
  transform: scale(0.97);
}
.fd-pillbtn:disabled {
  opacity: 0.35;
}
.fd-pillbtn.is-accent {
  background: var(--accent);
  color: var(--on-accent) !important;
}
.fd-pillbtn.is-accent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 86%, #fff);
}
.fd-pillbtn.is-danger {
  color: var(--danger) !important;
}
.fd-pillbtn.is-danger-fill {
  background: #c01c28;
  color: #fff !important;
}
.fd-pillbtn.is-danger-fill:hover {
  background: #d42a37;
}
.fd-pillbtn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

/* assets/css/files/desk/listing.css */
.fd-content {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 8px;
}
.fd-browse,
.fd-searchhost,
.fd-scanhost {
  position: absolute;
  inset: 0;
}
.fd-browse {
  display: flex;
  flex-direction: column;
}
.fd-searchhost,
.fd-scanhost,
.is-searching .fd-browse,
.is-scanning .fd-browse {
  display: none;
}
.is-searching .fd-searchhost,
.is-scanning .fd-scanhost {
  display: block;
}
.fd-header,
.fd-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 104px 122px;
  align-items: center;
  column-gap: 8px;
  padding: 0 12px;
}
.fd-header {
  flex: none;
  height: 28px;
  font-size: 12px;
  color: var(--ink-faint);
}
.fd-header span:first-child {
  grid-column: 1 / 3;
}
.fd-items {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  outline: none;
}
.fd-items:focus-visible {
  outline: none;
}
.fd-row {
  height: 40px;
  border-radius: 10px;
  font-size: 14px;
  cursor: default;
}
.fd-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.fd-row.is-selected,
.fd-tile.is-selected {
  background: rgba(var(--accent-rgb), 0.24);
}
.fd-row.is-cursor,
.fd-tile.is-cursor {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.6);
}
.fd-items:focus-visible .is-cursor {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.fd-kind {
  font-size: 18px;
}
.fd-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.fd-name-text,
.fd-where {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fd-name-text {
  flex: none;
  max-width: 100%;
}
.fd-where {
  font-size: 12px;
  color: var(--ink-faint);
}
.fd-col-size,
.fd-col-when {
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}
.fd-header .fd-col-size,
.fd-header .fd-col-when {
  font-size: 12px;
  color: var(--ink-faint);
}
.fd-row.is-fresh,
.fd-tile.is-fresh {
  animation: fd-fresh 1.4s var(--out-cubic);
}
@keyframes fd-fresh {
  from {
    background: rgba(var(--accent-rgb), 0.55);
  }
}
.fd-rename {
  min-width: 0;
  height: 28px;
  margin: -4px 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--accent);
  font-size: 14px;
  outline: none;
}
.fd-tile .fd-rename {
  width: 100%;
  margin: 0;
  font-size: 12px;
  text-align: center;
}
.fd-browse.is-grid .fd-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  align-content: start;
  gap: 6px;
  padding: 4px;
}
.fd-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 14px;
  cursor: default;
}
.fd-tile:hover {
  background: rgba(255, 255, 255, 0.05);
}
.fd-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.fd-tile-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.fd-empty {
  position: absolute;
  inset: 28px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  font-size: 14px;
  color: var(--ink-dim);
}
.fd-empty:empty {
  display: none;
}
.fd-empty-g {
  font-size: 40px;
  color: var(--ink-faint);
}

/* assets/css/files/desk/status.css */
.fd-jobs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
  padding-top: 6px;
}
.fd-jobs:empty {
  display: none;
}
.fd-job {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(80px, 1fr) 28px;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 4px 0 12px;
  border-radius: 12px;
  background: var(--fill);
  font-size: 12px;
}
.fd-job-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.fd-job.is-done .i-bar-fill {
  background: var(--accent);
}
.fd-job-cancel {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: none;
  font-size: 14px;
}
.fd-job-cancel:hover {
  background: var(--fill-hover);
}
.fd-job-done {
  justify-self: center;
  font-size: 16px;
  color: var(--accent);
}
.fd-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  height: 30px;
  padding: 0 6px 0 12px;
  font-size: 12px;
  color: var(--ink-dim);
}
.is-searching .fd-status {
  visibility: hidden;
}
.fd-hints {
  display: flex;
  gap: 14px;
}
.has-shelf .fd-hints .fk-hint:first-child {
  display: none;
}

/* assets/css/files/desk/search.css */
.fd-search {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fd-sfield {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  height: 56px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--fill);
}
.fd-sfield:focus-within {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.fd-sfield-g {
  font-size: 22px;
  color: var(--ink-dim);
}
.fd-sinput {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-size: 20px;
  outline: none;
}
.fd-sinput::placeholder {
  color: var(--ink-faint);
}
.i-files .fd-sinput:focus-visible {
  outline: none;
}
.fd-schips {
  display: flex;
  gap: 6px;
  flex: none;
  margin: 10px 0 2px;
}
.fd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  font-size: 13px;
}
.fd-chip .ig {
  font-size: 14px;
  color: var(--ink-dim);
}
.fd-chip.is-on {
  background: rgba(var(--accent-rgb), 0.24);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.fd-chip.is-on .ig {
  color: var(--ink);
}
.fd-sresults {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.fd-sgroup {
  display: block;
  padding: 12px 12px 4px;
  font-size: 12px;
  color: var(--ink-faint);
}
.fd-shit {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.fd-shit.is-active {
  background: rgba(var(--accent-rgb), 0.22);
}
.fd-sicon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fill);
  font-size: 18px;
}
.fd-stext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fd-sline1 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}
.fd-sline1 b {
  font-size: 14px;
}
.fd-swhere {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--ink-dim);
}
.fd-sline2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--ink-dim);
}
.fd-sat {
  margin-right: 8px;
  color: var(--ink-faint);
}
.fd-stext mark {
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.4);
  color: var(--ink);
}
.fd-swhen {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.fd-shit.is-active .fd-swhen {
  color: var(--ink-dim);
}
.fd-snone {
  padding: 24px 12px;
  font-size: 14px;
  color: var(--ink-dim);
}

/* assets/css/files/desk/shelf.css */
.fd-shelf {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 300px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  animation: fd-shelf-in 300ms var(--out-cubic);
}
@keyframes fd-shelf-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
.fd-shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fd-shelf-head b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}
.fd-shelf-head .ig {
  font-size: 18px;
}
.fd-shelf-sub {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-faint);
}
.fd-shelf-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  margin: 10px -6px;
  overflow-y: auto;
}
.fd-shelf-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 12px;
}
.fd-shelf-item:hover {
  background: var(--fill);
}
.fd-shelf-thumb,
.fd-clash-thumb {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.fd-shelf-thumb .kindtile,
.fd-clash-thumb .kindtile {
  font-size: 20px;
}
.fd-shelf-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fd-shelf-text b,
.fd-shelf-text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fd-shelf-text b {
  font-size: 13px;
}
.fd-shelf-text span {
  font-size: 11px;
  color: var(--ink-faint);
}
.fd-shelf-x {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: none;
  font-size: 14px;
  color: var(--ink-faint) !important;
}
.fd-shelf-x:hover {
  background: var(--fill-hover);
  color: var(--ink) !important;
}
.fd-shelf-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-shelf-move {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border-radius: 21px;
  background: var(--accent);
  color: var(--on-accent) !important;
  font-size: 14px;
  font-weight: 700;
}
.fd-shelf-move:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 86%, #fff);
}
.fd-shelf-move:disabled {
  background: var(--fill);
  color: var(--ink-faint) !important;
}
.fd-shelf-move .ig {
  font-size: 17px;
}
.fd-shelf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fd-shelf-row .fd-pillbtn {
  height: 38px;
  border-radius: 19px;
}
.fd-shelf-clear {
  height: 28px;
  background: none;
  font-size: 13px;
  color: var(--ink-dim) !important;
}
.fd-shelf-clear:hover:not(:disabled) {
  color: var(--ink) !important;
}
.fd-shelf-clear:disabled {
  visibility: hidden;
}

/* assets/css/files/overlays/menus.css */
.fd-menulayer,
.fd-sheetlayer {
  position: absolute;
  inset: 0;
  display: none;
}
.fd-menulayer {
  z-index: 20;
}
.fd-menulayer.is-on {
  display: block;
}
.fd-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 232px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #1c1c1c;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  outline: none;
  animation: fd-pop 160ms var(--out-cubic);
}
@keyframes fd-pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
.fd-menu-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  background: none;
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
}
.fd-menu-row:hover,
.fd-menu-row:focus {
  background: var(--accent);
  color: var(--on-accent) !important;
  outline: none;
}
.fd-menu-row.is-danger {
  color: var(--danger) !important;
}
.fd-menu-row.is-danger:hover,
.fd-menu-row.is-danger:focus {
  background: #c01c28;
  color: #fff !important;
}
.fd-menu-g {
  font-size: 15px;
}
.fd-menu-key {
  font-size: 11.5px;
  opacity: 0.55;
}
.fd-menu-badge {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
}
.fd-menu-sep {
  height: 1px;
  margin: 5px 8px;
  background: rgba(255, 255, 255, 0.08);
}
.fd-menu-title {
  padding: 6px 10px 4px;
  font-size: 11px;
  color: var(--ink-faint);
}

/* assets/css/files/overlays/sheets.css */
.fd-sheetlayer {
  z-index: 25;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
}
.fd-sheetlayer.is-on {
  display: grid;
}
.fd-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 460px;
  max-height: calc(100% - 40px);
  padding: 20px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: #161616;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  outline: none;
  animation: fd-pop 200ms var(--out-cubic);
}
.fd-sheet h3 {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
}
.fd-sheet p {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-dim);
}
.fd-sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.fd-clashes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fd-clash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--fill);
}
.fd-clash-thumb {
  flex: none;
  width: 44px;
  height: 44px;
}
.fd-clash-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-dim);
}
.fd-clash-text b {
  font-size: 12.5px;
  color: var(--ink);
}

/* assets/css/files/overlays/print.css */
.fd-print {
  width: 500px;
}
.fd-print-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fd-print-head h3 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fd-print-g {
  font-size: 20px;
  color: var(--ink-dim);
}
.fd-print-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fd-prow {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 36px;
}
.fd-prow-label {
  font-size: 13px;
  color: var(--ink-dim);
}
.fd-select {
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: var(--fill);
  font-size: 13.5px;
}
.fd-select option {
  background: #1c1c1c;
}
.fd-select-sm {
  justify-self: start;
  min-width: 160px;
}
.fd-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fd-stepper .fd-icon {
  background: var(--fill);
  font-size: 15px;
}
.fd-stepper b {
  min-width: 24px;
  font-size: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fd-segctl {
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--fill);
}
.fd-segctl-b {
  height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  background: none;
  font-size: 13px;
  color: var(--ink-dim) !important;
  white-space: nowrap;
}
.fd-segctl-b[aria-checked=true] {
  background: rgba(255, 255, 255, 0.2);
  color: var(--ink) !important;
  font-weight: 700;
}
.fd-segctl-b:disabled {
  opacity: 0.3;
}
.fd-prange {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fd-field {
  width: 130px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--fill);
  font-size: 13px;
}
.fd-field::placeholder {
  color: var(--ink-faint);
}
.fd-pjobs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fd-pjobs:empty {
  display: none;
}
.fd-pjobs-title {
  font-size: 12px;
  color: var(--ink-faint);
}
.fd-pjob {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 110px auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.fd-pjob-g {
  font-size: 18px;
  color: var(--ink-dim);
}
.fd-pjob-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-dim);
}
.fd-pjob-text b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--ink);
}
.fd-pjob-end {
  justify-self: center;
  width: 28px;
  font-size: 18px;
  text-align: center;
  color: var(--accent);
}

/* assets/css/files/overlays/scan.css */
.fd-scan {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fd-scan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 36px;
  padding-left: 4px;
}
.fd-scan-head b {
  font-size: 16px;
}
.fd-scan-grid {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
  margin-top: 6px;
}
.fd-scan-set {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 2px;
  overflow-y: auto;
}
.fd-scanfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fd-scanfield > span:first-child {
  font-size: 12px;
  color: var(--ink-faint);
}
.fd-scanfield .fd-field {
  width: 100%;
}
.fd-scan-dev,
.fd-scan-into {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--fill);
  font-size: 13px;
}
.fd-scan-dev .ig {
  font-size: 22px;
  color: var(--ink-dim);
}
.fd-scan-dev b {
  display: block;
  font-size: 13px;
}
.fd-scan-dev small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--ink-faint);
}
.fd-scan-into .ig {
  font-size: 16px;
  color: #9db8e0;
}
.fd-scan-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.fd-glass {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 50% 40%,
      #181818,
      #0b0b0b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.fd-glass-hint {
  max-width: 260px;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: var(--ink-dim);
}
.fd-glass-page {
  position: relative;
  height: 90%;
  aspect-ratio: 210 / 297;
  animation: fd-pop 300ms var(--out-cubic);
}
.fd-glass-page .paper,
.ql-page .paper,
.fd-scan-page .paper {
  inset: 0;
}
.fd-glass-page.is-preview .paper {
  filter: blur(1.4px) saturate(0.8);
}
.is-gray .paper {
  filter: grayscale(1);
}
.is-bw .paper {
  filter: grayscale(1) contrast(2.2);
}
.is-gray .is-preview .paper,
.is-bw .is-preview .paper {
  filter: grayscale(1) blur(1.4px);
}
.fd-glass-tag {
  position: absolute;
  left: 50%;
  bottom: 10px;
  translate: -50% 0;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 11px;
  white-space: nowrap;
}
.fd-glass-busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-dim);
}
.fd-spin {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fd-spin 0.8s linear infinite;
}
@keyframes fd-spin {
  to {
    transform: rotate(1turn);
  }
}
.fd-scan-pages {
  display: flex;
  gap: 8px;
  flex: none;
}
.fd-scan-pages:empty {
  display: none;
}
.fd-scan-page {
  position: relative;
  width: 52px;
  height: 72px;
  padding: 0;
  border-radius: 8px;
  background: #111;
  overflow: hidden;
}
.fd-scan-page .paper {
  inset: 5px;
}
.fd-scan-page span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 0;
  background: rgba(0, 0, 0, 0.7);
  font-size: 10px;
}
.fd-scan-page.is-on {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.fd-scan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
}

/* assets/css/files/overlays/quick-look.css */
.ql-back {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 200ms linear;
}
.ql-back.is-on {
  opacity: 1;
}
.ql-card {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100% - 80px));
  height: calc(100% - 40px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: #1a1a1a;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  outline: none;
  animation: fd-pop 260ms var(--out-cubic);
}
.ql-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 12px 12px 12px 18px;
}
.ql-kind {
  font-size: 22px;
}
.ql-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ql-title b,
.ql-title span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ql-title b {
  font-size: 15px;
}
.ql-title span {
  font-size: 12px;
  color: var(--ink-dim);
}
.i-files .ql-open,
.i-wa .ql-open {
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.i-files .ql-close,
.i-wa .ql-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fill);
  font-size: 18px;
}
.ql-body {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  padding: 0 18px 14px;
  overflow: hidden;
}
.ql-image {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}
.ql-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.ql-media .ql-image {
  flex: 1;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.ql-player {
  display: grid;
  grid-template-columns: 32px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  flex: none;
  width: min(100%, 520px);
  height: 44px;
  padding: 0 14px 0 6px;
  border-radius: 22px;
  background: var(--fill);
}
.i-files .ql-play,
.i-wa .ql-play {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #000;
  font-size: 16px;
}
.ql-time {
  font-size: 12px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ql-sound {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
}
.ql-sound.is-quiet {
  opacity: 0.4;
}
.ql-sound.is-quiet .i-wave i {
  animation-play-state: paused;
}
.ql-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.ql-audio .kindtile,
.ql-none .kindtile {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 24px;
  font-size: 56px;
}
.ql-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 4px 0 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.ql-page {
  position: relative;
  flex: none;
  width: 66%;
  aspect-ratio: 210 / 297;
}
.ql-page span {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 11px;
  color: #8a8a8a;
}
.ql-text {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  border-radius: 12px;
  background: #0c0c0c;
  color: #e6e6e6;
  font:
    13px/1.65 ui-monospace,
    "JetBrains Mono",
    "DejaVu Sans Mono",
    monospace;
  white-space: pre-wrap;
}
.ql-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-dim);
}
.ql-none b {
  font-size: 15px;
  color: var(--ink);
}
.ql-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: none;
  height: 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

/* assets/css/files/picker/bud-frame.css */
.bud {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: -1;
  translate: -50% 0;
  pointer-events: none;
  color: var(--ink);
}
.bud-neck {
  --r: 16px;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
}
.bud-neck i {
  position: absolute;
  display: block;
}
.bud-core {
  top: 0;
  bottom: 0;
  left: var(--r);
  right: var(--r);
  background: #000;
}
.bud-f {
  width: var(--r);
  height: var(--r);
}
.bud-f-tl {
  top: 0;
  left: 0;
  background:
    radial-gradient(
      circle at 0 100%,
      transparent calc(var(--r) - 0.6px),
      #000 var(--r));
}
.bud-f-tr {
  top: 0;
  right: 0;
  background:
    radial-gradient(
      circle at 100% 100%,
      transparent calc(var(--r) - 0.6px),
      #000 var(--r));
}
.bud-f-bl {
  bottom: 0;
  left: 0;
  background:
    radial-gradient(
      circle at 0 0,
      transparent calc(var(--r) - 0.6px),
      #000 var(--r));
}
.bud-f-br {
  bottom: 0;
  right: 0;
  background:
    radial-gradient(
      circle at 100% 0,
      transparent calc(var(--r) - 0.6px),
      #000 var(--r));
}
.bud-body {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  height: 230px;
  border-radius: 28px;
  background: #000;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 0;
  pointer-events: auto;
  overflow: hidden;
}
.bud-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  height: 54px;
  padding: 0 12px 0 20px;
}
.bud-title {
  font-size: 15px;
}
.bud-chips {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.bud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: none;
  font-size: 13px;
  color: var(--ink-dim) !important;
  white-space: nowrap;
}
.bud-chip:hover {
  background: var(--fill);
  color: var(--ink) !important;
}
.bud-chip.is-on {
  background: var(--fill-hover);
  color: var(--ink) !important;
}
.bud-chip .ig {
  font-size: 14px;
}

/* assets/css/files/picker/bud-strip.css */
.bud-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: var(--fill);
  font-size: 12.5px;
  white-space: nowrap;
}
.bud-filter[aria-pressed=true] {
  background: rgba(var(--accent-rgb), 0.22);
}
.bud-strip {
  position: relative;
  display: flex;
  gap: 8px;
  flex: none;
  height: 132px;
  padding: 4px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  outline: none;
}
.bud-strip:focus-visible {
  outline: none;
}
.bud-tile {
  position: relative;
  flex: none;
  width: 124px;
  height: 124px;
  border-radius: 14px;
  background: #151515;
  overflow: hidden;
  cursor: pointer;
}
.bud-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.bud-tile.is-picked::after {
  box-shadow: inset 0 0 0 3px var(--accent);
}
.bud-strip:focus-visible .bud-tile.is-cursor {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.bud-thumb {
  position: absolute;
  inset: 0;
}
.bud-check {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px;
  font-weight: 700;
}
.bud-tile.is-picked .bud-check {
  border: 0;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
  color: var(--on-accent);
}
.bud-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 8px 6px;
  overflow: hidden;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bud-folder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  background: var(--fill);
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint);
}
.bud-folder .ig {
  font-size: 28px;
  color: #9db8e0;
}
.bud-folder b {
  font-size: 12px;
  color: var(--ink);
}
.bud-none {
  margin: auto;
  font-size: 13px;
  color: var(--ink-dim);
}
.bud-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  height: 44px;
  margin-top: auto;
  padding: 0 12px 10px 20px;
}
.bud-hints,
.bud-foot-r {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bud-count {
  font-size: 12px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.bud-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  background: var(--accent);
  color: var(--on-accent) !important;
  font-size: 14px;
  font-weight: 700;
}
.bud-attach:disabled {
  background: var(--fill);
  color: var(--ink-faint) !important;
}
.bud-attach .ig {
  font-size: 16px;
}

/* assets/css/files/reduced-motion.css */
@media (prefers-reduced-motion: reduce) {
  .fd-shelf,
  .fd-menu,
  .fd-sheet,
  .ql-card,
  .fd-glass-page,
  .fd-row.is-fresh,
  .fd-tile.is-fresh {
    animation: none;
  }
  .fd-spin {
    animation-duration: 2s;
  }
}

/* assets/css/files.css */