:root {
  --tile: 154px;
  --toolbar: rgba(31, 52, 68, .86);
  --toolbar-soft: rgba(228, 237, 243, .38);
  --glass: rgba(255, 255, 255, .9);
  --ink: #27323a;
  --white: #f8fbff;
  --line: rgba(255, 255, 255, .35);
  --cyan: #48c8c5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  color: var(--white);
  background: #263746;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}

body.locked { overflow: hidden; }
body.hide-file-names .file-namebar { display: none; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }
:where(button, a, input):focus-visible {
  outline: 2px solid rgba(255,255,255,.96);
  outline-offset: 3px;
}

svg {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.album-background {
  position: fixed;
  z-index: -3;
  inset: 0;
  background-color: #40576a;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.012);
  transition: background-image .35s ease, filter .25s ease;
}

.background-shade {
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 28, 38, .16), transparent 26%, transparent 73%, rgba(16, 28, 38, .28)),
    linear-gradient(90deg, rgba(16, 28, 38, .05), transparent 35%);
}

.topbar {
  position: fixed;
  z-index: 30;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 40px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}

.topbar-group { display: flex; align-items: stretch; gap: 5px; pointer-events: auto; }

.tool-button, .text-tool, .top-search {
  min-width: 42px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  background: var(--toolbar-soft);
  box-shadow: 0 8px 24px rgba(15, 26, 34, .12);
  backdrop-filter: blur(13px) saturate(125%);
  -webkit-backdrop-filter: blur(13px) saturate(125%);
}

.tool-button, .text-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .18s, transform .18s;
}

.tool-button:hover, .text-tool:hover { background: rgba(238, 246, 250, .58); }
.tool-button:active, .text-tool:active { transform: scale(.96); }
.tool-button svg { width: 19px; height: 19px; }

.menu-button { background: rgba(232, 215, 188, .72); color: #fff; }

.top-search {
  width: 198px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: rgba(255, 255, 255, .8);
  border-color: rgba(255,255,255,.1);
  background: var(--toolbar);
}

.top-search input {
  min-width: 0;
  height: 100%;
  flex: 1;
  padding: 0 8px 0 12px;
  color: #fff;
  font-size: 14px;
  border: 0;
  outline: 0;
  background: transparent;
}

.top-search input::placeholder { color: rgba(255,255,255,.66); }
.top-search svg { width: 20px; height: 20px; margin-right: 10px; flex: 0 0 auto; }

.sort-wrap { position: relative; }
.sort-button { color: rgba(255,255,255,.9); font-size: 10px; letter-spacing: .08em; }

.sort-menu {
  position: absolute;
  top: 47px;
  left: 0;
  width: 180px;
  padding: 8px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(27, 45, 59, .93);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}

.sort-menu p { margin: 4px 8px 7px; color: rgba(255,255,255,.5); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.sort-menu button { width: 100%; padding: 9px 9px; display: flex; justify-content: space-between; cursor: pointer; color: inherit; font-size: 11px; text-align: left; border: 0; border-radius: 6px; background: transparent; }
.sort-menu button:hover, .sort-menu button.active { background: rgba(255,255,255,.13); }
.sort-menu button span { color: rgba(255,255,255,.52); font-family: ui-monospace, monospace; }

.icon-list { display: none; }
body.list-mode .icon-grid { display: none; }
body.list-mode .icon-list { display: block; }

.text-tool {
  min-width: 86px;
  padding: 0 10px;
  gap: 7px;
  color: #27333c;
  font-size: 12px;
  border: 0;
  background: rgba(238, 241, 243, .42);
  text-shadow: 0 1px rgba(255,255,255,.35);
}

.text-tool svg { width: 18px; height: 18px; }

.path-bar {
  position: fixed;
  z-index: 20;
  top: 60px;
  left: 15px;
  max-width: calc(100vw - 180px);
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 4px rgba(0,0,0,.72);
}

.path-bar button {
  max-width: 180px;
  padding: 2px 0;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: transparent;
}

.path-bar button:last-child { font-weight: 700; }
.path-bar span { opacity: .7; }

.file-count {
  position: fixed;
  z-index: 20;
  top: 61px;
  right: 11px;
  padding: 6px 10px;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  border-radius: 5px;
  background: rgba(35, 49, 58, .8);
  box-shadow: 0 7px 20px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
}

.album-canvas { min-height: 100vh; padding: 122px 24px 74px; }

.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile));
  align-items: start;
  justify-content: start;
  gap: 24px;
}

.file-card {
  width: var(--tile);
  min-width: 0;
  animation: card-enter .28s ease both;
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(7px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.file-action {
  width: 100%;
  height: var(--tile);
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 30px;
  overflow: hidden;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 6px;
  background: var(--glass);
  box-shadow: 0 7px 20px rgba(17, 28, 37, .18);
  backdrop-filter: blur(11px) saturate(130%);
  transition: transform .18s ease, box-shadow .18s ease;
}

.file-action:hover { transform: translateY(-3px) scale(1.018); box-shadow: 0 13px 28px rgba(17,28,37,.24); }
.file-action:active { transform: scale(.985); }

.file-media {
  position: relative;
  min-height: 0;
  display: block;
  overflow: hidden;
  background: rgba(233, 237, 238, .96);
}

.file-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .3s ease, opacity .2s;
}

.file-action:hover .file-media img { transform: scale(1.035); }
.file-media img.failed { display: none; }

.file-placeholder {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  color: #80929a;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(226,231,232,.94));
}

.file-placeholder svg { width: 48px; height: 48px; stroke-width: 1.45; }
.kind-link .file-placeholder svg { width: 55px; height: 55px; }

.file-overlay {
  position: absolute;
  z-index: 3;
  left: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  padding: 2px 4px;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 3px;
  background: rgba(30, 45, 54, .56);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.file-namebar {
  min-width: 0;
  height: 30px;
  padding: 0 7px 0 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(250, 250, 250, .92);
}

.file-kind-icon { width: 21px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; color: #f2b44c; }
.file-kind-icon svg { width: 19px; height: 17px; fill: currentColor; stroke: none; filter: drop-shadow(0 1px 1px rgba(128, 73, 12, .2)); transition: transform .18s ease; }
.file-action:hover .file-kind-icon .folder-glyph { transform: translateY(-1px) rotate(-2deg); }
.kind-link .file-kind-icon, .kind-file .file-kind-icon, .kind-document .file-kind-icon { color: #718992; }
.kind-link .file-kind-icon svg, .kind-file .file-kind-icon svg, .kind-document .file-kind-icon svg { fill: none; stroke: currentColor; }

.folder-glyph .folder-glyph-back { fill: #ffd873; stroke: #d99527; stroke-width: .75; }
.folder-glyph .folder-glyph-face { fill: #f5aa35; stroke: #d68a1d; stroke-width: .75; }
.folder-glyph .folder-glyph-light { fill: none; stroke: rgba(255,255,255,.72); stroke-width: 1; stroke-linecap: round; }
.file-placeholder .folder-glyph { width: 58px; height: 48px; filter: drop-shadow(0 5px 6px rgba(120, 70, 15, .18)); }
.drawer-folder .folder-glyph { width: 19px; height: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }

.file-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-mark { width: 14px; height: 14px; flex: 0 0 auto; color: #617680; }

body.list-mode .files-grid { width: min(720px, 100%); display: flex; flex-direction: column; gap: 8px; }
body.list-mode .file-card { width: 100%; }
body.list-mode .file-action { height: 82px; grid-template-columns: 86px minmax(0, 1fr); grid-template-rows: 1fr; }
body.list-mode .file-namebar { height: 100%; padding: 0 16px; }
body.list-mode .file-name { font-size: 14px; text-align: left; }
body.list-mode .file-overlay { left: 98px; bottom: 9px; color: #73828a; background: transparent; text-shadow: none; }

.skeleton {
  width: var(--tile);
  height: var(--tile);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 6px;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer { to { transform: translateX(100%); } }

.empty-state {
  width: min(390px, calc(100vw - 32px));
  margin: 80px auto;
  padding: 36px;
  color: #fff;
  text-align: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  background: rgba(28, 45, 58, .68);
  box-shadow: 0 18px 45px rgba(0,0,0,.2);
  backdrop-filter: blur(18px);
}

.empty-icon { width: 64px; height: 64px; margin: auto; display: grid; place-items: center; opacity: .6; }
.empty-icon svg { width: 48px; height: 48px; }
.empty-state h1 { margin: 10px 0 7px; font-size: 19px; }
.empty-state p { margin: 0; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.6; }
.empty-state button { margin-top: 19px; padding: 9px 14px; cursor: pointer; color: #263743; border: 0; border-radius: 6px; background: rgba(255,255,255,.9); }

.statusbar {
  position: fixed;
  z-index: 18;
  left: 10px;
  right: 10px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
  color: rgba(255,255,255,.85);
  font-size: 11px;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

.album-identity, .status-actions { pointer-events: auto; }
.album-identity { padding: 3px 0; display: flex; align-items: center; gap: 5px; cursor: pointer; color: inherit; border: 0; background: transparent; text-shadow: inherit; }
.identity-badge {
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border-radius: 50%;
  background: #f44336;
  box-shadow: 0 0 0 2px rgba(244, 67, 54, .17), 0 1px 3px rgba(0,0,0,.24);
  animation: identity-hue 3s linear infinite;
}
.identity-badge b {
  display: block;
  color: #fff;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}

@keyframes identity-hue {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(-360deg); }
}
.status-actions { display: flex; align-items: center; gap: 7px; }
.status-actions [hidden] { display: none !important; }
.status-path { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }
.status-control,
.status-metric,
.source-status-link {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  background: rgba(28,43,52,.58);
  box-shadow: 0 5px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.status-control { cursor: pointer; text-shadow: inherit; transition: background-color .18s ease, transform .18s ease; }
.status-control:disabled { cursor: wait; opacity: .62; }
.status-control:hover,
.source-status-link:hover { background: rgba(28,43,52,.82); }
.status-control:active { transform: scale(.95); }
.status-control svg,
.status-metric svg,
.source-status-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.status-metric { cursor: default; font-variant-numeric: tabular-nums; }
.music-control.is-playing { color: #fff; background: rgba(36,104,96,.76); }
.music-control.is-playing svg { animation: music-turn 2.2s linear infinite; }
@keyframes music-turn { to { transform: rotate(360deg); } }
.like-control { min-width: 50px; position: relative; overflow: visible; font-variant-numeric: tabular-nums; }
.like-control svg path { transition: fill .18s ease, stroke .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1); transform-origin: center; }
.like-control.is-liked { color: #fff; background: rgba(190,57,77,.78); }
.like-control.is-liked svg path { fill: currentColor; stroke: currentColor; transform: scale(1.06); }
.like-burst {
  position: absolute;
  left: 50%;
  top: -6px;
  pointer-events: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(139,25,50,.7);
  animation: like-burst .8s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes like-burst {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); filter: blur(2px); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(1.08); filter: blur(0); }
}

.drawer-overlay {
  position: fixed;
  z-index: 39;
  inset: 0;
  background: rgba(10, 21, 29, .42);
  backdrop-filter: blur(3px);
}

.drawer {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(360px, calc(100vw - 42px));
  padding: 25px;
  display: flex;
  flex-direction: column;
  color: #f6faff;
  border-right: 1px solid rgba(255,255,255,.2);
  background: rgba(24, 42, 55, .9);
  box-shadow: 18px 0 60px rgba(0,0,0,.28);
  backdrop-filter: blur(24px) saturate(125%);
  transform: translateX(-104%);
  transition: transform .25s ease;
}

.drawer.open { transform: translateX(0); }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.drawer-header p { margin: 0 0 7px; color: rgba(255,255,255,.48); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .13em; }
.drawer-header h1 { margin: 0; font-size: 22px; font-weight: 600; }
.drawer-header button, .dialog-close, .viewer-header button { width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; color: inherit; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.06); }
.drawer-header svg, .dialog-close svg, .viewer-header button svg { width: 17px; height: 17px; }

.drawer-actions { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-actions button { padding: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; color: inherit; font-size: 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(255,255,255,.07); }
.drawer-actions button:disabled { opacity: .4; cursor: default; }
.drawer-actions svg { width: 15px; height: 15px; }

.drawer-breadcrumbs { margin-top: 18px; padding: 12px 0; display: flex; align-items: center; gap: 5px; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.11); border-bottom: 1px solid rgba(255,255,255,.11); }
.drawer-breadcrumbs button { flex: 0 0 auto; cursor: pointer; color: rgba(255,255,255,.66); font-size: 10px; border: 0; background: transparent; }
.drawer-breadcrumbs button:last-child { color: #fff; }
.drawer-breadcrumbs span { opacity: .4; }

.drawer-section { min-height: 0; margin-top: 21px; flex: 1; overflow-y: auto; }
.drawer-section h2 { margin: 0 0 9px; color: rgba(255,255,255,.45); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.drawer-folders { display: grid; gap: 3px; }
.drawer-folder { width: 100%; padding: 9px 8px; display: flex; align-items: center; gap: 9px; cursor: pointer; color: inherit; text-align: left; border: 0; border-radius: 6px; background: transparent; }
.drawer-folder:hover { background: rgba(255,255,255,.09); }
.drawer-folder svg { width: 16px; height: 16px; color: #f2b44c; fill: currentColor; stroke: none; }
.drawer-folder span { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.source-form { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.source-form label { display: block; margin-bottom: 8px; color: rgba(255,255,255,.64); font-size: 10px; }
.source-form > div { height: 39px; display: flex; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: rgba(255,255,255,.08); }
.source-form input { min-width: 0; flex: 1; padding: 0 9px; color: #fff; font-size: 10px; border: 0; outline: 0; background: transparent; }
.source-form button { width: 42px; display: grid; place-items: center; cursor: pointer; color: #21333f; border: 0; background: rgba(255,255,255,.86); }
.source-form button:disabled { cursor: wait; opacity: .55; }
.source-form svg { width: 16px; height: 16px; }
.source-form small { display: block; margin-top: 7px; color: rgba(255,255,255,.38); font-size: 8px; }

.floating-button {
  position: fixed;
  z-index: 17;
  right: 16px;
  bottom: 42px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(35, 50, 60, .62);
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
}
.floating-button svg { width: 17px; height: 17px; }

dialog { padding: 0; border: 0; }
dialog::backdrop { background: rgba(11, 20, 27, .68); backdrop-filter: blur(12px); }

.qr-dialog {
  width: min(360px, calc(100vw - 32px));
  padding: 31px;
  color: #263641;
  text-align: center;
  border-radius: 15px;
  background: rgba(251,253,254,.96);
  box-shadow: 0 30px 90px rgba(0,0,0,.32);
}
.qr-dialog .dialog-close { position: absolute; top: 12px; right: 12px; color: #3d4d56; border-color: rgba(35,50,60,.12); }
.qr-dialog > p { margin: 0 0 6px; color: #849199; font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .14em; }
.qr-dialog h2 { margin: 0; font-size: 18px; }
.qr-frame { width: 220px; height: 220px; margin: 24px auto 15px; padding: 12px; display: grid; place-items: center; border: 1px solid rgba(35,50,60,.12); border-radius: 11px; background: #fff; }
.qr-frame img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qr-dialog > span { display: block; overflow: hidden; color: #87939a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.copy-button { margin-top: 17px; padding: 9px 15px; cursor: pointer; color: #fff; border: 0; border-radius: 6px; background: #263b49; }

.viewer {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  color: #fff;
  background: rgba(9, 15, 20, .84);
}
.viewer[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.viewer-header, .viewer-footer { padding: 17px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.viewer-header p { margin: 0 0 3px; color: rgba(255,255,255,.5); font-family: ui-monospace, monospace; font-size: 9px; }
.viewer-header h2 { max-width: 70vw; margin: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.viewer-stage { min-height: 0; padding: 0 80px; display: grid; place-items: center; }
.viewer-stage img, .viewer-stage video { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 22px 70px rgba(0,0,0,.35); }
.viewer-stage audio { width: min(560px, 90%); }
.audio-preview { width: min(600px, 90%); padding: 45px; display: grid; justify-items: center; gap: 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.06); }
.audio-preview svg { width: 55px; height: 55px; }
.viewer-footer { color: rgba(255,255,255,.55); font-size: 10px; }
.viewer-footer a { color: #fff; text-underline-offset: 4px; }
.viewer-nav { position: absolute; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.05); transform: translateY(-50%); }
.viewer-nav:disabled { opacity: .2; cursor: default; }
.viewer-prev { left: 19px; }
.viewer-next { right: 19px; }

.toast {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: 28px;
  max-width: calc(100vw - 30px);
  padding: 10px 15px;
  pointer-events: none;
  color: #fff;
  font-size: 11px;
  text-align: center;
  border-radius: 6px;
  background: rgba(26,42,53,.92);
  box-shadow: 0 10px 32px rgba(0,0,0,.25);
  opacity: 0;
  transform: translate(-50%, 9px);
  transition: opacity .18s, transform .18s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

noscript { position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; padding: 12px; color: #222; text-align: center; background: #ffe38f; }

@media (max-width: 700px) {
  :root { --tile: 110px; }
  .topbar { top: 8px; left: 0; right: 7px; gap: 5px; }
  .topbar-group { gap: 3px; }
  .tool-button, .text-tool, .top-search { height: 39px; border-radius: 3px; }
  .tool-button { min-width: 42px; }
  .top-search { width: 128px; }
  .top-search input { padding-left: 7px; font-size: 13px; }
  .top-search svg { width: 18px; height: 18px; margin-right: 7px; }
  .text-tool { min-width: 40px; width: 40px; padding: 0; color: #fff; background: rgba(228,237,243,.32); }
  .text-tool span { display: none; }
  .text-tool svg { width: 18px; height: 18px; }
  .path-bar { top: 56px; left: 9px; max-width: calc(100vw - 102px); font-size: 9px; }
  .path-bar button { max-width: 95px; }
  .file-count { top: 56px; right: 7px; font-size: 11px; }
  .album-canvas { padding: 113px 16px 67px; }
  .files-grid { gap: 16px 9px; }
  .file-action { grid-template-rows: minmax(0, 1fr) 27px; }
  .file-namebar { height: 27px; padding-inline: 3px; gap: 3px; }
  .file-kind-icon { width: 18px; height: 17px; }
  .file-kind-icon svg { width: 17px; height: 15px; }
  .file-name { font-size: 10px; line-height: 27px; }
  .external-mark { width: 12px; height: 12px; }
  .file-overlay { bottom: 3px; font-size: 9px; }
  .file-placeholder svg { width: 40px; height: 40px; }
  .statusbar { left: 8px; right: 8px; bottom: 5px; gap: 8px; font-size: 9px; }
  .album-identity { min-width: 0; }
  #album-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .status-actions { gap: 4px; }
  .status-path { display: none; }
  .status-control, .status-metric, .source-status-link { min-height: 28px; padding: 0 7px; }
  .status-control .status-label, .source-status-link > span { display: none; }
  .source-status-link { width: 30px; padding: 0; }
  .status-control { width: 30px; padding: 0; }
  .fullscreen-button { right: 11px; bottom: 31px; }
  body.list-mode .file-action { height: 72px; grid-template-columns: 76px 1fr; }
  body.list-mode .file-overlay { left: 86px; }
  .viewer-stage { padding: 0 9px; }
  .viewer-header, .viewer-footer { padding: 13px; }
  .viewer-nav { top: auto; bottom: 55px; transform: none; background: rgba(10,18,24,.55); }
  .viewer-prev { left: 12px; }
  .viewer-next { right: 12px; }
}

@media (max-width: 365px) {
  :root { --tile: 103px; }
  .top-search { width: 116px; }
  .album-canvas { padding-left: 10px; padding-right: 10px; }
  .files-grid { gap: 13px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}