:root {
  --canvas: #e4e9eb;
  --ink: #171b1d;
  --muted: #738087;
  --panel: #fff;
  --line: transparent;
  background: var(--canvas);
}

#viewport { background: var(--canvas); }
#app svg { stroke-width: 2px; }
button:hover { background: #f3f6f7; }

.topbar {
  top: 25px;
  left: 31px;
  right: 31px;
  min-height: 42px;
}
.collection-brand {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 130px;
  height: 33px;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
}
.home-button,
.bottom-left .icon-button,
.zoom-control,
.top-right .icon-button {
  background: #fff;
  box-shadow: 0 6px 18px #53636b13;
}
.home-button,
.bottom-left .icon-button { width: 42px; height: 42px; }
.home-button svg { width: 21px; height: 21px; color: #050505; }
.home-button:hover,
.bottom-left .icon-button:hover,
.top-right .icon-button:hover,
.zoom-control button:hover { background: #f4f7f8; }
.top-right { gap: 8px; }
.top-right .icon-button { width: 39px; height: 39px; }
#app:has(#popover:not([hidden])) .top-right [data-action="settings"]::after { display: none; }
.save-status { margin-right: 9px; }
.save-status b { color: #7d898e; font-size: 11px; }
.save-status > span { background: #82a795; }

.media-shell {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 13px 26px #3b4b551d;
}
.node:hover .media-shell { box-shadow: 0 19px 35px #3b4b5529; }
.node.selected .media-shell { outline-color: #cfd4d7; }
.node-label { color: #58656b; font-size: 11px; }
.type-tag,
.node-more { background: #fff; color: #1d292f; }
.collection-label {
  color: #4e5a60;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}

.folder-node { overflow: visible; text-align: center; cursor: grab; }
.folder-node:hover,
.folder-node.folder-drop { z-index: 20 !important; }
.folder-node.dragging { cursor: grabbing; z-index: 100 !important; }
.folder-art { width: 100%; aspect-ratio: 5 / 4; position: relative; }
.folder-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.folder-image-back { z-index: 1; filter: drop-shadow(0 6px 9px #5b67701a); }
.folder-image-front { z-index: 3; clip-path: polygon(0 28%, 12% 28%, 13% 25%, 44% 25%, 52% 35%, 100% 35%, 100% 100%, 0 100%); }
.folder-photos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.folder-photo { position: absolute; overflow: hidden; padding: 4px; border-radius: 10px; background: #fff; box-shadow: 0 5px 12px #28343e35; pointer-events: auto; transition: transform .48s cubic-bezier(.2,.8,.2,1); }
.folder-photo .media-visual { width: 100%; height: 100%; border-radius: 6px; }
.folder-photo .media-visual img { width: 100%; height: 100%; object-fit: cover; }
.folder-photo-center { left: 35%; top: 8%; width: 30%; height: 38%; transform: rotate(1deg); z-index: 2; }
.folder-photo-left { left: 7%; top: 31%; width: 27%; height: 42%; transform: rotate(-13deg); }
.folder-photo-right { right: 5%; top: 27%; width: 27%; height: 42%; transform: rotate(11deg); }
.folder-node:hover .folder-photo-center,
.folder-node.folder-drop .folder-photo-center { transform: translateY(-100%) rotate(1deg); }
.folder-node:hover .folder-photo-left,
.folder-node.folder-drop .folder-photo-left { transform: translateY(-145%) rotate(-13deg); }
.folder-node:hover .folder-photo-right,
.folder-node.folder-drop .folder-photo-right { transform: translateY(-135%) rotate(11deg); }
.folder-drop .folder-art { outline: none; }
.folder-drop::after { content: none; }
.folder-name {
  display: flex;
  max-width: 100%;
  min-height: 27px;
  margin: 5px auto 0;
  padding: 0 4px;
  overflow: hidden;
  background: none;
  color: #111;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-name:hover { background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.folder-count {
  display: table;
  margin: 5px auto 0;
  padding: 2px 11px 3px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #ffffffb8;
  color: #818891;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.folder-more { top: 27%; right: 7%; }

.bottom-left { left: 30px; bottom: 25px; }
.bottom-right { right: 30px; bottom: 29px; }
.zoom-control { height: 38px; border-radius: 13px; color: #1a1f28; }
.zoom-control button { height: 38px; }
.zoom-control button:not(#zoom-label) { width: 36px; }
.zoom-control svg { width: 17px; height: 17px; }
.zoom-control #zoom-label { color: #1a1f28; font-size: 11px; }
.dock {
  bottom: 25px;
  gap: 9px;
  padding: 8px 9px;
  background: #202527;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 12px 28px #1b272e45;
}
.dock button { width: 39px; height: 38px; border-radius: 10px; color: #bec7cb; }
.dock .dock-icon { display: block; width: 24px; height: 24px; flex: none; opacity: .8; }
.dock button.active .dock-icon,
.dock button:hover .dock-icon { opacity: 1; }
.dock button.active { background: #394145; color: #fff; }
.dock button:hover { background: #384044; color: #fff; }
.dock > span { display: none; }

#selection-bar,
#popover,
#toast,
dialog,
.theme-dark #popover,
.theme-dark dialog,
.theme-dark #toast {
  background: #fff;
  color: #1a1f28;
  border: 0;
  box-shadow: 0 17px 45px #3b4a5429;
  backdrop-filter: none;
}
#selection-bar,
#popover { border-radius: 20px; }
#selection-bar { top: 79px; }
#popover { width: 238px; max-width: calc(100vw - 24px); padding: 9px; }
#popover button { min-height: 43px; padding: 10px 12px; border-radius: 10px; color: #1a1f28; font-size: 13px; }
#popover button:hover,
.theme-dark #popover button:hover { background: #f1f5f6; }
#popover hr { display: none; }
#popover small { padding: 8px 12px 5px; color: #7a8599; font-size: 11px; }
#popover button svg { color: #1a1f28; }
#app #popover .danger,
#app #selection-bar > span,
#app #modal :is(h2, p, small, span, kbd, button:not(.primary)),
#app #toast { color: #1a1f28; }
#app :is(#popover, #selection-bar, #modal, #toast) svg,
#app .zoom-control svg { stroke-width: 1.5px; color: #1a1f28; }
#app #modal .primary,
#app #modal .primary svg { color: #fff; }
#toast { border-radius: 16px; }
dialog { border-radius: 24px; }
dialog::backdrop { background: #41515a61; backdrop-filter: blur(8px); }
#lightbox,
.theme-dark #lightbox { background: #e4e9eb; box-shadow: none; }
#lightbox::backdrop { background: #e4e9eb; }
#preview-media { pointer-events: none; }
#preview-media > * { pointer-events: auto; }
#preview-media > img,
#preview-media > video { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.play-mark { pointer-events: auto; cursor: pointer; }
#lightbox.video-preview .preview-arrow,
#lightbox.video-preview .lightbox-bottom { display: none; }
.text-input { border-color: #e1e7e9; }
#modal.search-modal,
#modal.folder-modal,
#modal.simple-modal,
#modal.formats-modal { width: min(425px, calc(100vw - 32px)); border-radius: 24px; }
#modal.search-modal { min-height: 482px; max-height: calc(100dvh - 48px); }
#modal.search-modal #modal-content { padding: 30px 25px 25px; }
#modal.search-modal .modal-close,
#modal.folder-modal .modal-close,
#modal.simple-modal .modal-close,
#modal.formats-modal .modal-close { top: 22px; right: 22px; width: 28px; height: 28px; color: #1a1f28; }
#modal.search-modal .modal-close svg,
#modal.folder-modal .modal-close svg,
#modal.simple-modal .modal-close svg,
#modal.formats-modal .modal-close svg { width: 17px; height: 17px; }
#modal.search-modal .search-title { margin: 0 0 17px 5px; color: #1a1f28; font-size: 22px; font-weight: 600; line-height: 26px; }
#modal.search-modal .search-input { display: block; width: 100%; height: 50px; margin: 0 0 19px; padding: 0 23px; border: 1px solid #f4f4f4; border-radius: 16px; background: #fff; box-shadow: 0 0 20px #0000000a; color: #1a1f28; font-size: 14px; }
#modal.search-modal .search-input::placeholder { color: #a3acb8; }
#modal.search-modal .search-input:focus { border-color: #c9d1d5; box-shadow: 0 7px 25px #202c3b10; }
#modal.search-modal .search-results { max-height: min(55dvh, 330px); overflow-y: auto; scrollbar-width: thin; }
#modal.search-modal .search-result { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 13px; width: 100%; min-height: 61px; padding: 8px 5px; border-radius: 8px; text-align: left; color: #1a1f28; }
#modal.search-modal .search-result:hover { background: #f2f5f6; }
#modal.search-modal .search-thumb { display: grid; place-items: center; width: 40px; height: 43px; flex: none; overflow: hidden; border-radius: 4px; }
#modal.search-modal .search-thumb .media-visual { width: 100%; height: 100%; }
#modal.search-modal .search-thumb .media-visual img { width: 100%; height: 100%; object-fit: cover; }
#modal.search-modal .search-folder-thumb { overflow: visible; }
#app #modal.search-modal .search-folder-thumb svg { display: block; width: 20px; height: 20px; transform: none; stroke-width: 1.5px; }
#modal.search-modal .search-result-name { min-width: 0; overflow: hidden; color: #1a1f28; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#app #modal.search-modal .search-result small { color: #98a2ac; font-size: 9px; }
#modal.search-modal .search-empty { padding: 22px 8px; text-align: center; }
#modal.folder-modal #modal-content,
#modal.simple-modal #modal-content,
#modal.formats-modal #modal-content { padding: 30px 25px 27px; }
#modal.folder-modal h2,
#modal.simple-modal h2,
#modal.formats-modal h2 { margin: 0 0 17px 5px; color: #1a1f28; font-size: 22px; font-weight: 600; line-height: 26px; letter-spacing: 0; }
#modal.folder-modal .text-input,
#modal.simple-modal .text-input { display: block; height: 50px; margin: 0; padding: 0 23px; border: 1px solid #f4f4f4; border-radius: 16px; background: #fff; box-shadow: 0 0 20px #0000000a; color: #1a1f28; font-size: 14px; }
#modal.folder-modal .text-input::placeholder,
#modal.simple-modal .text-input::placeholder { color: #a3acb8; }
#modal.folder-modal .modal-actions,
#modal.simple-modal .modal-actions { gap: 13px; margin-top: 19px; }
#modal.folder-modal .modal-actions button,
#modal.simple-modal .modal-actions button { height: 41px; font-size: 14px; }
#app #modal.folder-modal .secondary,
#app #modal.simple-modal .secondary { padding: 0 8px; color: #7a8599; }
#modal.simple-modal .label-delete { margin-right: auto; }
#modal.folder-modal .primary,
#modal.simple-modal .primary { padding: 0 21px; border-radius: 12px; background: #000; }
#modal.formats-modal h2 { margin-bottom: 24px; }
#modal.formats-modal .format-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
#app #modal.formats-modal .format-chips span { padding: 10px 13px; border-radius: 8px; background: #f0f3f4; color: #82909c; font-size: 14px; }
.primary { background: #202527; border-radius: 7px; }
.secondary { border-radius: 7px; }
.format-row { border-bottom: 0; }
.format-chips span { border: 0; background: #f1f5f6; }
.theme-dark .home-button,
.theme-dark .bottom-left .icon-button,
.theme-dark .zoom-control,
.theme-dark .top-right .icon-button { color: #172126; background: #fff; }
.theme-dark .save-status b { color: #d6dfe3; }
.theme-dark .collection-brand { filter: invert(1); }
.collection-brand-eyes { display: none; }
.theme-dark .collection-brand-eyes { display: block; filter: none; clip-path: inset(17% 66.5% 20% 13%); }
.theme-dark .collection-label,
.theme-dark .folder-name,
.theme-dark .node-label { color: #fff; }
.theme-dark .folder-count { color: #fff; background: #ffffff26; border-color: #ffffff50; }
.theme-dark .dock { background: #fff; box-shadow: 0 12px 28px #0003; }
.theme-dark .dock button { color: #000; }
.theme-dark .dock .dock-icon { filter: brightness(0); opacity: 1; }
.theme-dark .dock button.active,
.theme-dark .dock button:hover { background: #f5f7fa; color: #000; }
.shared-view .top-right,
.shared-view .dock,
.shared-view #selection-bar,
.shared-view .node-more,
.shared-view .resize-handle,
.shared-view .type-tag { display: none !important; }
.shared-view .folder-name { pointer-events: none; }
.shared-view .node { cursor: pointer; }

@media (max-width: 800px) {
  .topbar { top: 18px; left: 17px; right: 17px; }
  .collection-brand { width: 109px; height: 28px; top: 4px; }
  .home-button,
  .bottom-left .icon-button { width: 38px; height: 38px; }
  .top-right .icon-button { width: 35px; height: 35px; }
  .top-right { gap: 4px; }
  .bottom-left { left: 17px; bottom: 17px; }
  .bottom-right { right: 16px; bottom: 18px; }
  .dock { bottom: 76px; gap: 2px; }
  .dock button { width: 35px; height: 37px; }
  .zoom-control { height: 35px; }
  .zoom-control button { height: 35px; }
  #selection-bar { top: 72px; }
}

@media (max-width: 390px) {
  .collection-brand { width: 94px; left: 48%; }
  .top-right .icon-button { width: 31px; height: 31px; }
  .top-right .icon-button svg { width: 16px; height: 16px; }
}