@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Manrope:wght@400;600;700&display=swap');

:root {
  --bg: #05050a;
  --glass-fill: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.12);
  --dust: #f2c879;
  --blue: #4a9eff;
  --text: #f5f3ee;
  --text-muted: #9c99aa;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 30% 20%, #14141f 0%, #05050a 60%);
  color: var(--text);
  font-family: var(--font-body);
}

a { color: inherit; text-decoration: none; }

/* Layered above the icon grid on purpose — icons can sit partially behind
   this on a dense desktop, same as a real OS taskbar/icons interaction. */
.topbar-ribbon {
  display: flex;
  align-items: center;
  flex: 0 0 auto; /* fixed height within .webtop-page's flex column, doesn't stretch or shrink */
  padding: 6px 20px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(10px);
}

.topbar-ribbon[hidden] {
  display: none;
}

.topbar-ribbon__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto; /* shrinks to make room for the right side, never the other way around */
  min-width: 0; /* required for a flex child to actually be allowed to shrink below its content's natural width */
}

.topbar-ribbon__logo {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding-right: 4px;
}

.topbar-ribbon__logo:hover {
  color: var(--dust);
}

.topbar-ribbon__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto; /* fixed — always fully visible, the left side yields to it */
  margin-left: 12px;
}

.topbar-ribbon__right[hidden] {
  display: none;
}

/* ---------- Minimal top bar shared by webtop + signup ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid var(--glass-border);
}

.topbar__logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 1rem;
}

.topbar__link {
  font-size: 0.9rem;
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 8px 18px;
}

.webtop-logout {
  display: inline-flex;
  align-items: center;
  height: 30px;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0 16px;
  backdrop-filter: blur(10px);
}

.webtop-logout:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
}

.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  backdrop-filter: blur(10px);
  text-decoration: none;
}

.account-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
}

.account-btn__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-btn svg {
  width: 16px;
  height: 16px;
}

/* #account-btn-icon wraps whichever icon is currently shown (plain
   silhouette, or a plan badge once subscribed) so it can be swapped via
   JS. Without this, the svg inside it falls back to normal inline
   baseline alignment instead of being centered as a flex item — visibly
   pushing it above the button's text, regardless of which icon it is. */
#account-btn-icon {
  display: inline-flex;
  align-items: center;
}

/* The checkmark badge specifically still sits a little high within the
   account button even after the flex-centering fix above — nudged down
   manually. Scoped to this context only, not the same checkmark's other
   use in the plan panels, which didn't have this problem. */
#account-btn-icon .badge-icon-check {
  transform: translateY(2px);
}

/* ---------- Chat ---------- */
.chat-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  cursor: pointer;
}

.chat-toggle-btn[hidden] {
  display: none;
}

.chat-toggle-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
}

.chat-toggle-btn svg {
  width: 15px;
  height: 15px;
}

.chat-toggle-btn__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff5a5a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  line-height: 1.4;
}

.chat-panel {
  position: fixed;
  top: 5px;
  left: 8px;
  z-index: 800;
  width: 260px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background: #16161f;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
}

.chat-panel__section {
  border-bottom: 1px solid var(--glass-border);
}

.chat-panel__section:last-child {
  border-bottom: none;
}

.chat-panel__section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 9px 14px;
  cursor: pointer;
}

.chat-panel__count {
  background: rgba(255, 90, 90, 0.2);
  color: #ffb4b4;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
}

.chat-panel__close-icon {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}

.chat-panel__close-icon:hover {
  color: var(--text);
}

.chat-panel__list {
  list-style: none;
  margin: 0;
  padding: 4px 8px 8px;
}

.chat-panel__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.chat-panel__item--action {
  width: calc(100% - 16px);
  margin: 4px 8px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  text-align: left;
}

.chat-panel__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.chat-panel__username {
  flex: 1 1 auto;
  font-size: 0.85rem;
}

.chat-panel__unread {
  background: #ff5a5a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

.chat-panel__decline {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 4px;
}

.chat-panel__decline:hover {
  color: #ff8080;
}

.chat-panel__empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 4px 8px 10px;
  list-style: none;
}

.chat-windows {
  position: fixed;
  left: 272px;
  z-index: 800;
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

.chat-window {
  width: 280px;
  height: 380px;
  display: flex;
  flex-direction: column;
  background: #16161f;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.chat-window__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--glass-border);
  flex: 0 0 auto;
  cursor: pointer;
}

.chat-window__title {
  font-family: var(--font-display);
  font-size: 0.88rem;
}

.chat-window__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-window__badge {
  background: #ff5a5a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

.chat-window__friend-btn {
  background: rgba(242, 200, 121, 0.15);
  color: var(--dust);
  border: 1px solid rgba(242, 200, 121, 0.3);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
}

.chat-window__friend-btn:hover {
  background: rgba(242, 200, 121, 0.25);
}

.chat-window__friend-btn--pending {
  cursor: pointer;
  opacity: 0.6;
}

.chat-window__friend-btn--pending:hover {
  background: rgba(242, 200, 121, 0.15);
}

.chat-window__close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
}

.chat-window__close:hover {
  color: var(--text);
}

.chat-window--minimized {
  height: auto;
  width: auto;
  min-width: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: none;
}

.chat-window--minimized .chat-window__header {
  border-bottom: none;
  justify-content: flex-start;
}

.chat-window--minimized .chat-window__messages,
.chat-window--minimized .chat-window__compose {
  display: none;
}

.chat-window__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox */
}

.chat-window__messages::-webkit-scrollbar {
  width: 8px;
}

.chat-window__messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-window__messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.chat-window__messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

.chat-message {
  align-self: flex-start;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px 12px 12px 4px;
  padding: 7px 11px;
  font-size: 0.85rem;
  word-break: break-word;
}

.chat-message--card {
  padding: 0;
  background: transparent;
}

.chat-share-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  max-width: 100%;
}

.chat-share-card__badge {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dust);
  background: rgba(242, 200, 121, 0.15);
  border: 1px solid rgba(242, 200, 121, 0.3);
  border-radius: 999px;
  padding: 1px 7px;
}

.chat-share-card__badge--edit {
  color: #7ddc8c;
  background: rgba(125, 220, 140, 0.15);
  border-color: rgba(125, 220, 140, 0.35);
}

.chat-share-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.chat-share-card__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}

.chat-share-card__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.chat-share-card__label {
  flex: 1 1 auto;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message__body {
  flex: 1 1 auto;
}

.chat-message__time {
  font-size: 0.6rem;
  color: var(--text-muted);
}

.chat-message--mine {
  align-self: flex-end;
  background: rgba(242, 200, 121, 0.18);
  border-radius: 12px 12px 4px 12px;
}

.chat-message--card.chat-message--mine {
  background: transparent;
}

.chat-window__compose {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--glass-border);
  flex: 0 0 auto;
}

.chat-window__input {
  flex: 1 1 auto;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.chat-window__input:focus {
  outline: 2px solid var(--dust);
  outline-offset: 1px;
}

.chat-window__send {
  background: var(--dust);
  color: #0a0a0f;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

/* ---------- Webtop page shell ---------- */
/* Scoped to the webtop page specifically (not shared with signup/signin) —
   caps the page at exactly the viewport height and makes .webtop a flex
   item that shrinks to fit whatever's left below the verify-banner,
   instead of the banner just adding extra height on top of an
   independently-sized .webtop and pushing the whole page taller than the
   viewport (which is what was causing both scrollbars to appear whenever
   the banner showed).
   */
.webtop-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.webtop {
  padding: 0;
  flex: 1 1 0; /* fills whatever's left below the banner inside .webtop-page —
                  flex-basis 0, not auto: with auto, this element's own size
                  partly derives from its content (.icon-grid's explicit,
                  JS-set height), which fed back into itself — an inflated
                  icon-grid height inflated .webtop's own computed height,
                  which recalcCellSize() then read as if it were real
                  available space, computing an even larger grid next time.
                  flex-basis 0 makes this fill available space purely from
                  its own parent, with zero dependency on its content's size. */
  min-height: 0; /* required for a flex child to actually be allowed to shrink below its content size */
  width: 100%;
  position: relative;
  overflow: auto; /* icons placed beyond the viewport scroll into view rather
                      than reflowing the whole layout — see design note in
                      webtop.html for why */
  user-select: none; /* avoid native text-selection artifacts while marquee-dragging */
}

.icon-grid {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

.icon {
  position: absolute;
  width: 76px;
  /* Stretches to fill the actual, current cell height (set as a CSS
     custom property by recalcCellSize() on #icon-grid) rather than a
     fixed size — cells can be taller than the minimum an icon needs, and
     without this, that extra height showed up as visible empty space
     below the last row of icons instead of the icons themselves filling
     it. Falls back to the static content-height minimum in contexts
     where the variable was never set — folder windows and the preview
     window both reuse this class outside #icon-grid, so it never
     inherits there. */
  min-height: var(--cell-height, 84px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 6px;
  user-select: none;
}

.icon--drag-image {
  top: -9999px;
  left: -9999px;
}

.icon:hover {
  background: rgba(255, 255, 255, 0.06);
}

.icon--selected,
.icon--selected:hover {
  background: rgba(0, 120, 215, 0.35);
  outline: 1px solid rgba(0, 120, 215, 0.7);
}

.icon--dragging {
  opacity: 0.4;
  z-index: 950; /* above folder windows (200+) while dragging */
  pointer-events: none; /* so mouseup resolves whatever is actually underneath (e.g. a folder window), not this element itself */
}

.marquee-rect {
  position: fixed;
  z-index: 960; /* above folder windows (200+) — matters for marquee-select inside an open folder */
  background: rgba(0, 120, 215, 0.15);
  border: 1px solid rgba(0, 120, 215, 0.6);
  pointer-events: none; /* never intercept the mousemove/mouseup driving it */
}

.icon__glyph {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.icon__link-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.85rem;
  filter: none;
}

.icon__edit-badge {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7ddc8c;
  border: 1.5px solid rgba(20, 20, 28, 0.9);
}

.icon__glyph img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.icon__label {
  font-size: 0.8rem;
  color: var(--text);
  text-align: center;
  width: 68px; /* icon is 76px wide with 4px horizontal padding each side — this keeps the label from ever touching the cell edge */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.context-menu {
  position: fixed;
  min-width: 200px;
  z-index: 1000; /* above folder windows (200+), modals, everything */
  background: rgba(20, 20, 28, 0.92);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 6px;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
}

.context-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.context-menu__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.context-menu__item[disabled] {
  color: var(--text-muted);
  cursor: default;
}

.context-menu__item[disabled]:hover {
  background: transparent;
}

.context-menu__item--danger {
  color: #ff8080;
}

.context-menu__item--danger:hover {
  background: rgba(255, 90, 90, 0.12);
}

.upgrade-pill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--dust), #e8a34f);
  color: #0a0a0f;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 7px 18px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 32px -10px rgba(242, 200, 121, 0.5);
}

.upgrade-pill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  transform: translateX(-250%) skewX(-20deg);
  animation: upgrade-shine 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes upgrade-shine {
  0% { transform: translateX(-250%) skewX(-20deg); }
  12% { transform: translateX(350%) skewX(-20deg); }
  100% { transform: translateX(350%) skewX(-20deg); }
}

.verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(242, 200, 121, 0.1);
  border-bottom: 1px solid rgba(242, 200, 121, 0.3);
  color: var(--dust);
  font-size: 0.88rem;
  padding: 12px 40px;
}

/* Author styles beat the browser's default [hidden] behavior, so without
   this the banner stayed visible even with the hidden attribute set. */
.verify-banner[hidden] {
  display: none;
}

.verify-banner button {
  background: transparent;
  border: 1px solid rgba(242, 200, 121, 0.5);
  color: var(--dust);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.verify-banner button:hover {
  background: rgba(242, 200, 121, 0.15);
}

.verify-banner button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Signup form ---------- */
.signup-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 73px);
  padding: 40px 20px;
}

.signup-card {
  width: 100%;
  max-width: 400px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 36px;
  backdrop-filter: blur(12px);
}

.signup-card h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 8px;
}

.signup-card p.sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 28px;
}

.form-error {
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.35);
  color: #ffb4b4;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0 0 20px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.field input:focus {
  outline: 2px solid var(--dust);
  outline-offset: 1px;
}

.signup-submit {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--dust), #e8a34f);
  color: #0a0a0f;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 6px;
}

.signup-foot {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Rename (inline input on the desktop icon) ---------- */
.icon__label-input {
  width: 100%;
  font-size: 0.8rem;
  font-family: var(--font-body);
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--dust);
  border-radius: 4px;
  color: var(--text);
  padding: 1px 2px;
}

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900; /* above folder windows (200+) */
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Author styles beat the browser's default [hidden] behavior — without
   this, display:flex above kept the overlay visible (and blocking every
   click) regardless of the hidden attribute. */
.modal-overlay[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 380px;
  background: rgba(20, 20, 28, 0.96);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 28px;
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}

.modal--share {
  position: relative;
}

.modal--plans {
  max-width: 640px;
}

/* This modal is specifically the one used for confirm()/alert()-style
   dialogs (showConfirm/showAlert), which are meant to interrupt whatever
   else is open — e.g. confirming "Remove access?" from within the
   Permissions modal. showDialog() deliberately doesn't close other modals
   first, so both can end up visible in #modal-overlay's shared flex
   container at once — which, without this, lays them out side by side as
   flex siblings rather than stacking one on top of the other. Taking this
   one out of that flex flow and centering it independently makes it
   render as a true overlay on top, regardless of what else is open
   underneath it.
*/
#modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 901; /* above modal-overlay (900) and everything within its normal flex layout */
}

.modal__close-x {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 4px;
}

.modal__close-x:hover {
  color: var(--text);
}

.modal h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 20px;
}

.dialog-message {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.modal .field {
  margin-bottom: 16px;
}

.modal-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: -4px 0 12px;
}

.modal-error {
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.35);
  color: #ffb4b4;
  font-size: 0.82rem;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 0 0 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.share-mode-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.share-mode-choice__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
}

.share-mode-choice__option--active {
  border-color: var(--dust);
  background: rgba(242, 200, 121, 0.08);
}

.share-can-edit-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.share-can-edit-toggle[hidden] {
  display: none;
}

.share-can-edit-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--dust);
  cursor: pointer;
}

.share-via-btn {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 0.95rem;
}

.modal-btn {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}

.modal-btn[disabled] {
  cursor: default;
  opacity: 0.6;
}

.modal-btn[disabled]:hover {
  color: var(--text-muted);
  border-color: var(--glass-border);
}

.modal-btn--primary {
  background: linear-gradient(135deg, var(--dust), #e8a34f);
  border: none;
  color: #0a0a0f;
}

.modal-btn--primary:hover {
  color: #0a0a0f;
  opacity: 0.9;
}

.modal-btn--danger {
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.4);
  color: #ff8080;
}

.modal-btn--danger:hover {
  background: rgba(255, 90, 90, 0.2);
}

/* ---------- Account page ---------- */
.account-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 60px 20px 100px;
}

.account-page__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin: 0 0 32px;
}

.account-section {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.account-section h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.account-section .account-section__subheading {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
}

.account-section--danger {
  border-color: rgba(255, 90, 90, 0.3);
}

.account-section__hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 16px;
  line-height: 1.5;
}

.account-section__hint--pending {
  color: var(--dust);
}

.account-form-row {
  display: flex;
  gap: 10px;
}

.profile-actions {
  margin-bottom: 24px;
}

.account-form-row input {
  flex: 1 1 auto;
}

.account-form-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.account-page input {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.account-page input:focus {
  outline: 2px solid var(--dust);
  outline-offset: 1px;
}

.account-message {
  font-size: 0.85rem;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
}

.account-message--success {
  background: rgba(120, 200, 140, 0.12);
  border: 1px solid rgba(120, 200, 140, 0.35);
  color: #9be3ac;
}

.account-message--error {
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.35);
  color: #ffb4b4;
}

.account-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--glass-border);
}

.account-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 10px 4px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-right: 20px;
}

.account-tab:hover {
  color: var(--text);
}

.account-tab--active {
  color: var(--text);
  border-bottom-color: var(--dust);
}

.visibility-toggle {
  display: flex;
  gap: 12px;
}

.visibility-option {
  flex: 1 1 0;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.visibility-option strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.visibility-option span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.visibility-option--selected {
  border-color: var(--dust);
  background: rgba(242, 200, 121, 0.08);
}

.access-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
}

.access-list__username {
  flex: 1 1 auto;
  font-size: 0.9rem;
}

.permissions-edit-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.permissions-edit-toggle input {
  cursor: pointer;
}

.access-list__status {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.access-list__status--allowed {
  background: rgba(120, 200, 140, 0.15);
  color: #9be3ac;
}

.access-list__status--blocked {
  background: rgba(255, 90, 90, 0.15);
  color: #ffb4b4;
}

.access-list__remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 6px;
}

.access-list__remove:hover {
  color: #ff8080;
}

.access-list__empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  list-style: none;
}

.typeahead {
  position: relative;
}

.typeahead input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.typeahead input:focus {
  outline: 2px solid var(--dust);
  outline-offset: 1px;
}

.typeahead__results {
  position: fixed;
  z-index: 950;
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  background: #16161f;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
}

.typeahead__result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
}

.typeahead__result:hover {
  background: rgba(255, 255, 255, 0.06);
}

.typeahead__result-friend-badge {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--dust);
}

.share-recipient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.share-recipient-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: rgba(242, 200, 121, 0.1);
  border: 1px solid rgba(242, 200, 121, 0.3);
  font-size: 0.82rem;
  color: var(--text);
}

.share-recipient-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.65rem;
  cursor: pointer;
}

.share-recipient-chip button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

.share-send-btn {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  padding: 10px;
}

.typeahead__result span:first-child {
  flex: 1 1 auto;
  font-size: 0.9rem;
}

.typeahead__status {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.typeahead__empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 8px 10px;
  list-style: none;
}

.editable-value {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  font-size: 0.92rem;
  word-break: break-all;
  cursor: pointer;
}

.modal-static-value {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.editable-value[hidden] {
  display: none;
}

.editable-value:hover {
  border-color: var(--glass-border);
}

.editable-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--dust);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
}

/* ---------- Icon picker (Add + Properties modals) ---------- */
.icon-picker-trigger {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}

.icon-picker-trigger:hover {
  border-color: var(--dust);
}

.icon-picker-trigger__preview {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.icon-picker-trigger__preview img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.icon-picker-popover {
  position: fixed;
  z-index: 910; /* above modal-overlay (900) */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  max-height: 420px;
  background: rgba(20, 20, 28, 0.97);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px);
  animation: icon-picker-grow 0.12s ease-out;
}

.icon-picker-search {
  flex-shrink: 0; /* stays put — never gives up space to the grid below when the popover is short on room */
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}

.icon-picker-search::placeholder {
  color: var(--text-muted);
}

.icon-picker-search:focus {
  outline: none;
  border-color: var(--dust);
}

.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 44px);
  grid-auto-rows: min-content;
  gap: 6px;
  overflow-y: auto;
  min-height: 0; /* required for a flex child this tall to actually shrink and scroll, rather than overflowing its parent */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(242, 200, 121, 0.35) rgba(255, 255, 255, 0.04); /* Firefox */
}

.icon-picker-grid::-webkit-scrollbar {
  width: 10px;
}

.icon-picker-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

.icon-picker-grid::-webkit-scrollbar-thumb {
  background: rgba(242, 200, 121, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.icon-picker-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(242, 200, 121, 0.55);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.icon-picker-empty {
  grid-column: 1 / -1;
  padding: 24px 8px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.icon-picker-category {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
}

.icon-picker-category:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.icon-picker-category__chevron {
  font-size: 0.65rem;
  width: 10px;
  text-align: center;
  flex-shrink: 0;
}

.icon-picker-category:first-child {
  padding-top: 2px;
}

.icon-picker-popover[hidden] {
  display: none;
}

@keyframes icon-picker-grow {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.icon-picker-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.icon-picker-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.icon-picker-option--selected {
  border-color: var(--dust);
  background: rgba(242, 200, 121, 0.12);
}

.icon-picker-option__glyph {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.icon-picker-option__glyph img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.background-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* ---------- Drop-into-folder highlight (live, during drag) ---------- */
.icon--drop-target {
  background: rgba(242, 200, 121, 0.22);
  outline: 2px solid var(--dust);
  border-radius: 8px;
}

/* ---------- Folder windows ---------- */
.folder-window {
  position: fixed;
  min-width: 280px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 28, 0.97);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

/* Resize handles — invisible, positioned at each edge/corner of the
   window. Corners sit above edges (higher z-index) so the small overlap
   area at each corner resolves to the corner's diagonal cursor/behavior
   rather than whichever edge happens to be layered on top by DOM order. */
.folder-window__resize-handle {
  position: absolute;
  z-index: 1;
}

.folder-window__resize-handle--n,
.folder-window__resize-handle--s {
  left: 8px;
  right: 8px;
  height: 6px;
  cursor: ns-resize;
}

.folder-window__resize-handle--n { top: -3px; }
.folder-window__resize-handle--s { bottom: -3px; }

.folder-window__resize-handle--e,
.folder-window__resize-handle--w {
  top: 8px;
  bottom: 8px;
  width: 6px;
  cursor: ew-resize;
}

.folder-window__resize-handle--e { right: -3px; }
.folder-window__resize-handle--w { left: -3px; }

.folder-window__resize-handle--ne,
.folder-window__resize-handle--nw,
.folder-window__resize-handle--se,
.folder-window__resize-handle--sw {
  z-index: 2;
  width: 14px;
  height: 14px;
}

.folder-window__resize-handle--ne { top: -3px; right: -3px; cursor: nesw-resize; }
.folder-window__resize-handle--nw { top: -3px; left: -3px; cursor: nwse-resize; }
.folder-window__resize-handle--se { bottom: -3px; right: -3px; cursor: nwse-resize; }
.folder-window__resize-handle--sw { bottom: -3px; left: -3px; cursor: nesw-resize; }

.folder-window__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--glass-border);
  cursor: grab;
  user-select: none;
  flex: 0 0 auto; /* stays a fixed height as the window is resized */
}

.folder-window__preview-badge {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--dust);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-window__add-to-webtop-btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.folder-window__add-to-webtop-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.folder-window__body--preview {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  padding: 10px;
  overflow: auto;
}

/* Icons in the preview aren't individually positioned (no grid_col/row to
   place them at, and there's nothing to drag them to anyway) — this
   overrides the normal absolute positioning so they just flow in the
   flex-wrap layout above instead of stacking on top of each other at
   their unset default position. */
.folder-window__body--preview .icon {
  position: static;
}

.icon--preview-disabled {
  opacity: 0.5;
  cursor: default;
}

.folder-window__header:active {
  cursor: grabbing;
}

.folder-window__ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--glass-border);
  flex: 0 0 auto;
}

.folder-window__ribbon label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.folder-window__owner-label {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.folder-window__shared-by-badge {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.folder-window__edit-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #7ddc8c;
  background: rgba(125, 220, 140, 0.15);
  border: 1px solid rgba(125, 220, 140, 0.35);
  border-radius: 999px;
  padding: 1px 7px;
}

.folder-window__share-btn {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}

.folder-window__share-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.folder-window__sort,
.folder-window__view {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

.folder-window__permissions-btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}

.folder-window__sort-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.folder-window__sort-group[hidden] {
  display: none;
}

.folder-window__permissions-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.folder-window__empty-bin {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: #ff8080;
  background: rgba(255, 90, 90, 0.1);
  border: 1px solid rgba(255, 90, 90, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}

.folder-window__empty-bin:hover {
  background: rgba(255, 90, 90, 0.18);
}

/* Browsers render the OPEN dropdown popup with native/OS styling by
   default — the select's own color/background only affects the closed
   box. Without this, the popup shows near-black text on a white
   background regardless of the rules above. */
.folder-window__sort option,
.folder-window__view option {
  background: #16161f;
  color: var(--text);
}

.folder-window--drop-target {
  outline: 2px solid var(--dust);
  box-shadow: 0 0 0 6px rgba(242, 200, 121, 0.12);
}

.folder-window__close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 0 0;
}

.folder-window__close:hover {
  color: #ffb4b4;
  border-color: rgba(255, 90, 90, 0.5);
  background: rgba(255, 90, 90, 0.12);
}

.folder-window__maximize {
  flex: 0 0 auto;
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 0 0;
}

.folder-window__maximize:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.folder-window__title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-window__title--editable:hover {
  cursor: text;
}

.folder-window__title-input {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  color: var(--text);
  padding: 1px 4px;
  min-width: 0;
  flex: 0 1 auto;
}

.folder-window__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 200, 121, 0.35) rgba(255, 255, 255, 0.04);
}

/* Chrome, Edge, Safari */
.folder-window__body::-webkit-scrollbar {
  width: 10px;
}

.folder-window__body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

.folder-window__body::-webkit-scrollbar-thumb {
  background: rgba(242, 200, 121, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.folder-window__body::-webkit-scrollbar-thumb:hover {
  background: rgba(242, 200, 121, 0.55);
  border: 2px solid transparent;
  background-clip: padding-box;
}


.folder-window__grid-inner {
  position: relative;
}

.folder-window__body--list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.folder-window__body--list .folder-item {
  width: 100%;
}

.folder-window__empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  width: fit-content;
  max-width: 100%;
}

.folder-item--drag-source {
  width: 76px; /* matches .icon's fixed width — a long name stays truncated instead of stretching the selection rectangle wide */
  max-width: 76px;
}

.folder-item-ghost {
  position: fixed;
  width: 76px;
  z-index: 1000; /* above folder windows and everything else while dragging */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 8px;
  background: rgba(20, 20, 28, 0.95);
  border: 1px solid var(--dust);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
  pointer-events: none; /* never intercept the mousemove/mouseup driving it */
  opacity: 0.9;
}

.folder-item-ghost__count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--dust);
  color: #0a0a0f;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.3;
}

.folder-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.folder-item__glyph {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.folder-item__glyph img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.folder-item__label {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-item__label-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  font-family: var(--font-body);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--dust);
  border-radius: 4px;
  color: var(--text);
  padding: 1px 4px;
}

/* Plan panels — Premium/Platinum side by side. Shared structure between
   the webtop Upgrade modal and the account page's Billing tab. */
.plan-panels {
  display: flex;
  gap: 16px;
  margin-top: 14px;
}

.plan-panel {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plan-panel__badge {
  width: 40px;
  height: 40px;
  color: var(--blue);
  flex-shrink: 0;
}

/* The checkmark/star badges read slightly off-center within this
   specific 40px context, distinct from their other use in the smaller
   account button (which has its own separate, independently-tuned
   nudge). Found by direct visual comparison at this actual size, not
   converted from that other context's calibration. */
.plan-panel__badge .badge-icon-check {
  transform: translateY(3px);
}

.plan-panel__badge .badge-icon-star {
  transform: translateY(-3px);
}

.plan-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-panel__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 !important;
}

.plan-panel__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.plan-panel__features li {
  padding-left: 20px;
  position: relative;
}

.plan-panel__features li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: var(--dust);
}

.plan-panel__prices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.plan-panel__price-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.plan-panel__price-btn:hover {
  border-color: var(--blue);
}

.plan-panel__price-btn--current {
  border-color: var(--blue);
  background: rgba(74, 158, 255, 0.12);
  cursor: default;
}

.plan-panel__price-btn__interval {
  color: var(--text-muted);
  font-weight: 400;
}

/* Plan panel price buttons — loading state while a checkout/change-plan
   request is in flight (these can take a real moment; without this,
   nothing visibly happened yet, which is what invited clicking other
   buttons before the first request even resolved). */
.plan-panel__price-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.plan-panel__price-btn__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: plan-btn-spin 0.7s linear infinite;
}

@keyframes plan-btn-spin {
  to { transform: rotate(360deg); }
}