/* ═══════════════════════════════════════════════════════════
   MAC OS X LEOPARD DESKTOP  —  style.css
   Pixel-faithful recreation: space-purple wallpaper, Aqua
   chrome, Finder windows, glossy dock with reflections
   ═══════════════════════════════════════════════════════════ */

:root {
  --font: 'Mona Sans', -apple-system, 'Lucida Grande', 'Helvetica Neue', sans-serif;

  /* Wallpaper palette — deep space purple/black */
  --wp-dark:   #05000f;
  --wp-purple: #2a0a5e;
  --wp-mid:    #16063a;
  --wp-blue:   #0a1840;

  /* Aqua chrome */
  --aqua-titlebar: linear-gradient(180deg,
      rgba(255,255,255,0.88) 0%,
      rgba(205,220,242,0.78) 35%,
      rgba(175,200,232,0.68) 65%,
      rgba(148,178,218,0.62) 100%);
  --aqua-border:   rgba(130,160,200,0.5);
  --aqua-toolbar:  linear-gradient(180deg, #dce8f4 0%, #ccdaee 100%);

  /* Traffic lights */
  --btn-close: #ff5f57;
  --btn-min:   #febc2e;
  --btn-max:   #28c840;

  /* Sidebar */
  --sidebar-bg:  linear-gradient(180deg, #dfe5ef 0%, #cdd5e4 100%);
  --sidebar-txt: #444c5a;

  /* Window */
  --win-bg:   #f4f5f8;
  --win-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 6px 20px rgba(0,0,0,0.4),
                0 0 0 0.5px rgba(255,255,255,0.1);

  /* Dock */
  --dock-glass: rgba(255,255,255,0.10);
  --dock-border: rgba(255,255,255,0.18);

  /* Ease */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   CURSOR — CLEAN BLACK MAC-STYLE CURSOR
   ═══════════════════════════════════════════════════════════ */

#cursor {
  display: none;
}

/* Black default arrow */
html,
body,
*,
*::before,
*::after {
  cursor:
    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 2L18 15.2L11.2 16.1L8.4 22L4 2Z' fill='black' stroke='white' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,
    default !important;
}

/* Black pointer cursor for clickable elements */
a,
button,
.desktop-icon,
.fw-file,
.dock-item,
.fw-sidebar-item,
.fw-list-row,
.fw-list-link,
.menubar__menu,
.menubar__apple,
.fw-btn,
.fw-nav-btn,
.fw-view-btn,
.project-btn {
  cursor:
    url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 3.5C10.6 3.5 11.4 4.3 11.4 5.4V12.2L12.3 11.4C12.9 10.8 13.9 10.8 14.5 11.4C14.9 11.8 15 12.3 15 12.8L15.8 12.1C16.4 11.5 17.4 11.5 18 12.1C18.4 12.5 18.6 13 18.5 13.5L19.1 13C19.7 12.4 20.7 12.4 21.3 13C21.7 13.4 21.9 13.9 21.9 14.5V17.7C21.9 21 19.4 23.5 16.1 23.5H13.2C11.4 23.5 9.8 22.8 8.6 21.5L5.1 17.7C4.4 16.9 4.4 15.8 5.2 15.1C5.9 14.4 7 14.4 7.8 15.1L8.1 15.4V5.4C8.1 4.3 8.5 3.5 9.5 3.5Z' fill='black' stroke='white' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 9 4,
    pointer !important;
}

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

button {
  border: none;
  background: none;
  font-family: var(--font);
}
/* ═══════════════════════════════════════════════════════════
   MENU BAR
   ═══════════════════════════════════════════════════════════ */
.menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.92) 0%,
    rgba(208,222,244,0.84) 40%,
    rgba(182,202,232,0.80) 70%,
    rgba(160,185,222,0.78) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(100,140,200,0.38);
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 1px 8px rgba(0,0,0,0.18);
  /* Pinstripe texture */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(160,185,222,0.78) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.04) 1px, rgba(255,255,255,0.04) 2px);
}

.menubar__left, .menubar__right {
  display: flex; align-items: center; gap: 4px;
}

.menubar__apple {
  font-size: 15px; line-height: 1;
  margin-right: 2px;
  opacity: 0.85;
}

.menubar__appname {
  font-weight: 700;
  font-size: 13px;
  color: #111;
  margin-right: 6px;
}

.menubar__menus { display: flex; }

.menubar__menu {
  font-size: 13px;
  font-weight: 400;
  color: #111;
  padding: 0 8px;
  height: 22px;
  display: flex;
  align-items: center;
  border-radius: 3px;
  transition: background 80ms;
}

.menubar__menu:hover,
.menubar__menu.active { background: rgba(0,0,0,0.08); }

.menubar__icon {
  display: flex; align-items: center;
  color: #222;
  padding: 0 4px;
  opacity: 0.75;
}

.menubar__time {
  font-size: 13px;
  font-weight: 500;
  color: #111;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  padding: 0 4px;
}


/* ═══════════════════════════════════════════════════════════
   DESKTOP
   ═══════════════════════════════════════════════════════════ */
.desktop {
  position: fixed;
  inset: 22px 0 0 0;
  overflow: visible; /* must NOT clip windows */
}

/* is-zoomed sizing is handled by wm.zoom() inline styles. */
/* ── Wallpaper ── */
.wallpaper {
  position: absolute; inset: 0; z-index: 0;
}

.wp-base {
  position: absolute; inset: 0;
  background-image: url('assets/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.wp-stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════
   DESKTOP ICONS (folders on the desktop)
   ═══════════════════════════════════════════════════════════ */
.desktop-icons { position: absolute; inset: 0; z-index: 10; }

.desktop-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 96px;
  border-radius: 8px;
  padding: 8px 5px;
  transition: background 120ms, transform 160ms var(--spring);
}

.desktop-icon:hover { background: rgba(255,255,255,0.08); }
.desktop-icon.selected { background: rgba(100,160,255,0.28); }

.icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms var(--spring), filter 200ms;
}

.desktop-icon:hover .icon-img { transform: scale(1.08); }
.desktop-icon.opening .icon-img { animation: iconBounce 0.45s var(--spring); }

@keyframes iconBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.9); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.icon-img {
  width: 86px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 500px;
}

/* New Aqua-inspired folder */
.aqua-folder {
  position: relative;
  width: 78px;
  height: 58px;
  border-radius: 9px 12px 12px 12px;
  background:
    linear-gradient(180deg,
      #38b8f0 0%,
      #1e9fe0 38%,
      #147dcc 72%,
      #0c5faf 100%);
  box-shadow:
    0 9px 18px rgba(0,0,0,0.46),
    0 2px 4px rgba(0,0,0,0.28),
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -10px 20px rgba(0,70,150,0.28) inset;
  overflow: visible;
  transform: translateZ(0);
}

/* Back tab */
.aqua-folder::before {
  content: '';
  position: absolute;
  left: 0;
  top: -12px;
  width: 46px;
  height: 24px;
  border-radius: 10px 16px 0 0;
  background:
    linear-gradient(180deg,
      #42c7f6 0%,
      #1b98dc 74%,
      #147bc6 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 -4px 8px rgba(0,70,140,0.16) inset;
  z-index: -1;
}

/* Front glossy face */
.aqua-folder::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  bottom: 0;
  border-radius: 11px 11px 12px 12px;
  background:
    linear-gradient(180deg,
      rgba(150,230,255,0.88) 0%,
      rgba(74,195,240,0.88) 42%,
      rgba(38,162,220,0.9) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 12px 20px rgba(255,255,255,0.08) inset,
    0 -7px 14px rgba(0,80,150,0.18) inset;
}

/* Subtle white highlight band */
.aqua-folder .folder-gloss {
  display: none;
}

.desktop-icon:hover .aqua-folder {
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-2px) scale(1.04);
}

.desktop-icon.opening .aqua-folder {
  animation: iconBounce 0.45s var(--spring);
}

.icon-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95),
    0 0 7px rgba(0,0,0,0.8);
  line-height: 1.25;
  word-break: break-word;
  max-width: 86px;
  padding: 2px 5px;
  border-radius: 4px;
}

.desktop-icon.selected .icon-label {
  background: #2563eb;
  color: white;
}


/* ═══════════════════════════════════════════════════════════
   FINDER WINDOW
   ═══════════════════════════════════════════════════════════ */
.finder-window,
.textedit-window {
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--win-shadow);
  border: 1px solid rgba(200,210,230,0.6);
  animation: winOpen 0.28s var(--smooth) both;
  min-width: 300px;
  min-height: 200px;
}

@keyframes winOpen {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Title bar ── */
.fw-titlebar {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  gap: 0;
  background: var(--aqua-titlebar);
  border-bottom: 1px solid var(--aqua-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset;
  position: relative;
  flex-shrink: 0;
  cursor: move;
  /* Pinstripe */
  background-image: var(--aqua-titlebar),
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0.05) 2px);
}

.fw-titlebar.inactive {
  background: linear-gradient(180deg, #e8e8e8 0%, #d4d4d4 100%);
}

.fw-title {
  position: absolute; left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #3a3a3a;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 90px;
}

.fw-titlebar-right { flex: 1; }

/* ── Toolbar ── */
.fw-toolbar {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  gap: 10px;
  background: var(--aqua-toolbar);
  border-bottom: 1px solid rgba(150,175,210,0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
  flex-shrink: 0;
}

.fw-toolbar-btns { display: flex; gap: 2px; }

.fw-nav-btn {
  width: 22px; height: 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background: linear-gradient(180deg, #f0f4f8 0%, #dde4ee 100%);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background 80ms;
}
.fw-nav-btn:hover { background: linear-gradient(180deg, #e0e8f0 0%, #ccd4e0 100%); }

.fw-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: #555;
}
.fw-bc-icon { font-size: 13px; }
.fw-bc-sep  { color: #999; }
.fw-bc-item { font-weight: 500; color: #333; }

.fw-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.fw-view-btns { display: flex; gap: 1px; }

.fw-view-btn {
  width: 24px; height: 20px;
  background: linear-gradient(180deg, #edf1f6 0%, #dce3ee 100%);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 3px;
  font-size: 11px; color: #666;
  display: flex; align-items: center; justify-content: center;
  transition: background 80ms;
}

.fw-view-btn:hover { background: linear-gradient(180deg, #dce6f0 0%, #ccd4e0 100%); }
.fw-view-active {
  background: linear-gradient(180deg, #8cb4d8 0%, #5a90c0 100%) !important;
  color: white !important;
  border-color: rgba(0,0,0,0.25) !important;
}

.fw-view-btn:disabled,
.fw-view-disabled {
  cursor: default !important;
  color: rgba(76, 88, 104, 0.38) !important;
  background: linear-gradient(180deg, rgba(238,243,248,0.72), rgba(214,224,236,0.66)) !important;
  border-color: rgba(88, 106, 128, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.52) !important;
  opacity: 0.62;
}

.fw-view-btn:disabled:hover,
.fw-view-disabled:hover {
  background: linear-gradient(180deg, rgba(238,243,248,0.72), rgba(214,224,236,0.66)) !important;
}

/* ── Body (sidebar + content) ── */
.fw-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar ── */
.fw-sidebar {
  width: 140px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(140,165,200,0.4);
  padding: 8px 0;
  overflow-y: auto;
}

.fw-sidebar-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7a8898;
  padding: 6px 12px 3px;
  text-transform: uppercase;
}

.fw-sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  font-size: 12px;
  color: var(--sidebar-txt);
  border-radius: 4px;
  margin: 1px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 80ms;
}

.fw-sidebar-item:hover { background: rgba(100,140,200,0.12); }
.fw-sidebar-active {
  background: rgba(80,130,220,0.22) !important;
  color: #1a4a8a;
}

/* ── Content pane ── */
.fw-content {
  flex: 1;
  background: var(--win-bg);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Icon view */
.fw-icon-view {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  padding: 16px;
}

.fw-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 80px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: none;
  transition: background 100ms;
}

.fw-file:hover { background: rgba(60,120,220,0.10); }
.fw-file.selected { background: rgba(60,120,220,0.22); }

/* Document icon */
.fw-file-icon {
  position: relative;
  width: 52px; height: 62px;
  background: linear-gradient(160deg, #e8f0fa 0%, #c8d8f0 100%);
  border-radius: 4px 12px 4px 4px;
  border: 1px solid rgba(100,140,200,0.3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.15));
  transition: transform 150ms var(--spring);
}

.fw-file:hover .fw-file-icon { transform: scale(1.06) translateY(-2px); }

.fw-doc-fold {
  position: absolute;
  top: 0; right: 0;
  width: 14px; height: 14px;
  background: linear-gradient(225deg, white 50%, rgba(100,140,200,0.4) 50%);
  border-radius: 0 12px 0 0;
  border-left: 1px solid rgba(100,140,200,0.3);
  border-bottom: 1px solid rgba(100,140,200,0.3);
}

.fw-file-icon--txt  { background: linear-gradient(160deg, #f5f5f0 0%, #e5e5da 100%); }
.fw-file-icon--green { background: linear-gradient(160deg, #e5f5e0 0%, #c0e0b0 100%); }
.fw-file-icon--purple { background: linear-gradient(160deg, #f0e8f8 0%, #d8c0f0 100%); }
.fw-file-icon--red  { background: linear-gradient(160deg, #fae8e8 0%, #f0c0c0 100%); }
.fw-file-icon--orange { background: linear-gradient(160deg, #faf0e0 0%, #f0d8a0 100%); }

.fw-doc-ext {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(80,100,140,0.7);
}

.fw-file-label {
  font-size: 11px;
  font-weight: 400;
  color: #2a2a2a;
  text-align: center;
  word-break: break-all;
  line-height: 1.3;
  max-width: 76px;
}

/* List view */
.fw-list-view {
  display: flex;
  flex-direction: column;
}

.fw-list-header {
  display: grid;
  grid-template-columns: 1fr 160px 60px 100px;
  gap: 0;
  padding: 4px 12px;
  background: linear-gradient(180deg, #dde5f0 0%, #cfd8ea 100%);
  border-bottom: 1px solid rgba(0,0,0,0.10);
  font-size: 11px;
  font-weight: 600;
  color: #5a6070;
}

.fw-list-row {
  display: grid;
  grid-template-columns: 20px 1fr 160px 60px 100px;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 12px;
  color: #222;
  transition: background 60ms;
}

.fw-list-row:hover { background: rgba(60,120,220,0.08); }
.fw-list-link { cursor: none; }
.fw-list-link:hover { background: rgba(60,120,220,0.14); }

.fw-lr-date, .fw-lr-size, .fw-lr-kind { color: #666; }

/* Status bar */
.fw-statusbar {
  height: 22px;
  background: linear-gradient(180deg, #dde4f0 0%, #ccd4e4 100%);
  border-top: 1px solid rgba(140,165,200,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #5a6070;
  flex-shrink: 0;
}

.fw-statusbar-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   TEXTEDIT WINDOW
   ═══════════════════════════════════════════════════════════ */
.textedit-window { background: white; }

.textedit-window .fw-toolbar {
  gap: 6px;
}

.aqua-toolbar-pill {
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(220,230,245,0.7) 100%);
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 5px;
  padding: 2px 10px;
  font-size: 11px;
  color: #444;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}

.textedit-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.75;
  color: #1a1a1a;
  white-space: pre-wrap;
  background: white;
  tab-size: 2;
}


/* ═══════════════════════════════════════════════════════════
   DOCK
   ═══════════════════════════════════════════════════════════ */
.dock {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 700;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 14px 0;

  /* Aqua shelf */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.07) 50%,
    rgba(0,0,0,0.12) 100%);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-top: 1px solid var(--dock-border);
  border-left: 1px solid rgba(255,255,255,0.10);
  border-right: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px 18px 0 0;
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.12) inset,
    0 20px 60px rgba(0,0,0,0.6),
    0 4px 16px rgba(0,0,0,0.4);

  animation: dockUp 0.6s var(--spring) both;
}

@keyframes dockUp {
  from { opacity: 0; transform: translateX(-50%) translateY(60px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: none;
  padding-bottom: 3px;
}

/* Tooltip */
.dock-item::before {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,15,25,0.88);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
  z-index: 10;
}
.dock-item:hover::before { opacity: 1; }

.dock-icon-wrap {
  position: relative;
  width: 56px; height: 56px;
  transition: transform 0.3s var(--spring);
  transform-origin: bottom center;
}

.dock-svg {
  width: 56px; height: 56px;
  border-radius: 13px;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55))
          drop-shadow(0 1px 3px rgba(0,0,0,0.35));
}

/* Gloss highlight */
.dock-shine {
  position: absolute;
  top: 2px; left: 6%; right: 6%;
  height: 44%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.60) 0%,
    rgba(255,255,255,0.08) 100%);
  border-radius: 12px 12px 50% 50%;
  pointer-events: none;
}

/* Reflection strip */
.dock-ref {
  width: 56px; height: 16px;
  overflow: hidden;
  flex-shrink: 0;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.28), transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.28), transparent);
}
.dock-ref svg { width: 56px; height: 56px; }

.dock-sep {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.28), transparent);
  align-self: center;
  margin: 0 4px;
  flex-shrink: 0;
}

/* Bounce animation for clicking */
.dock-item.bounce .dock-icon-wrap {
  animation: dockBounce 0.6s var(--spring);
}
@keyframes dockBounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-18px) scale(1.15); }
  60%  { transform: translateY(-6px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* Running indicator dot */
.dock-item.running::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255,255,255,0.5);
}


/* ═══════════════════════════════════════════════════════════
   SCROLLBARS
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: #e8edf5; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b0c0d8 0%, #8a9ab8 100%);
  border-radius: 7px;
  border: 3px solid #e8edf5;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #9ab0cc 0%, #7a8aa8 100%); }
/* ═══════════════════════════════════════════════════════════
   PROJECT PREVIEW WINDOW
   ═══════════════════════════════════════════════════════════ */

.project-window {
  min-width: 620px;
  min-height: 420px;
}

.project-body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.8), transparent 26%),
    linear-gradient(180deg, #f7f8fb 0%, #e6ebf4 100%);
}

.project-hero {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(120,140,170,0.24);
  background:
    radial-gradient(circle at 50% 35%, rgba(80,140,255,0.18), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.5), rgba(205,218,238,0.36));
}

.project-preview-card {
  width: 100%;
  max-width: 340px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(70,90,130,0.22);
  box-shadow:
    0 24px 60px rgba(30,50,90,0.24),
    0 2px 0 rgba(255,255,255,0.85) inset;
  background: #fff;
}

.project-browser-bar {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: linear-gradient(180deg, #eef3f9 0%, #d6e0ee 100%);
  border-bottom: 1px solid rgba(100,120,150,0.25);
}

.project-browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.16) inset;
}

.project-browser-bar span:nth-child(1) { background: #ff5f57; }
.project-browser-bar span:nth-child(2) { background: #febc2e; }
.project-browser-bar span:nth-child(3) { background: #28c840; }

.project-preview-art {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(20,30,60,0.95), rgba(35,8,70,0.95)),
    radial-gradient(circle at 50% 40%, rgba(80,160,255,0.65), transparent 38%);
}

.project-preview-art::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  box-shadow: 0 0 60px rgba(90,160,255,0.14) inset;
}

.project-art-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(80,150,255,0.22);
  filter: blur(18px);
  animation: projectGlow 4s ease-in-out infinite alternate;
}

@keyframes projectGlow {
  from { transform: scale(0.9); opacity: 0.55; }
  to { transform: scale(1.15); opacity: 0.9; }
}

.project-art-title {
  position: relative;
  z-index: 1;
  color: white;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-shadow:
    0 2px 10px rgba(0,0,0,0.65),
    0 0 24px rgba(100,180,255,0.5);
}

.project-info {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.project-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4072b8;
  margin-bottom: 8px;
}

.project-info h2 {
  font-size: 28px;
  line-height: 1.05;
  color: #162033;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}

.project-info p {
  font-size: 13px;
  line-height: 1.65;
  color: #4a5568;
  margin-bottom: 18px;
}

.project-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.project-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(120,140,170,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}

.project-meta span {
  font-size: 11px;
  font-weight: 700;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-meta strong {
  font-size: 12px;
  color: #1d2738;
  text-align: right;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 20px;
}

.project-tags span {
  font-size: 11px;
  font-weight: 700;
  color: #285a98;
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #eef6ff 0%, #d8e9ff 100%);
  border: 1px solid rgba(80,120,180,0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}

.project-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.project-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #2d3748;
  background: linear-gradient(180deg, #ffffff 0%, #dbe4f0 100%);
  border: 1px solid rgba(80,100,130,0.25);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 8px 18px rgba(30,50,90,0.12);
  transition: transform 120ms var(--spring), filter 120ms;
}

.project-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.project-btn-primary {
  color: white;
  background: linear-gradient(180deg, #5aa7ff 0%, #176bd6 100%);
  border-color: rgba(0,60,140,0.36);
}

.project-btn[aria-disabled="true"] {
  opacity: 0.72;
  pointer-events: none;
}

/* Better mobile behavior for the Mac desktop concept */
@media (max-width: 760px) {
  .project-window {
    left: 12px !important;
    top: 42px !important;
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 110px) !important;
    min-width: 0;
  }

  .project-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .project-hero {
    min-height: 260px;
    border-right: none;
    border-bottom: 1px solid rgba(120,140,170,0.24);
  }

  .project-info {
    overflow: visible;
  }

  .project-info h2 {
    font-size: 24px;
  }

  .project-actions {
    flex-direction: column;
  }

  .dock {
    transform: translateX(-50%) scale(0.82);
    transform-origin: bottom center;
  }

  .desktop-icon {
    transform: scale(0.92);
  }
}
/* ═══════════════════════════════════════════════════════════
   PHASE 2A — FUNCTIONAL FINDER LOCATION STYLES
   ═══════════════════════════════════════════════════════════ */

.fw-nav-disabled,
.fw-nav-btn:disabled {
  opacity: 0.42;
  filter: grayscale(0.4);
  pointer-events: none;
}

/* Mini folder icons used inside Finder windows */
.fw-folder-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.18));
  transition: transform 150ms var(--spring);
}

.fw-file:hover .fw-folder-icon {
  transform: scale(1.06) translateY(-2px);
}

.fw-folder-mini {
  position: relative;
  width: 52px;
  height: 39px;
  border-radius: 6px 8px 8px 8px;
  background:
    linear-gradient(180deg,
      #37b8f0 0%,
      #1e9fe0 38%,
      #147dcc 72%,
      #0c5faf 100%);
  box-shadow:
    0 5px 10px rgba(0,0,0,0.25),
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -6px 12px rgba(0,70,150,0.24) inset;
}

.fw-folder-mini::before {
  content: '';
  position: absolute;
  left: 0;
  top: -8px;
  width: 31px;
  height: 17px;
  border-radius: 7px 11px 0 0;
  background:
    linear-gradient(180deg,
      #42c7f6 0%,
      #1b98dc 74%,
      #147bc6 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 -3px 6px rgba(0,70,140,0.16) inset;
  z-index: -1;
}

.fw-folder-mini::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  bottom: 0;
  border-radius: 7px 7px 8px 8px;
  background:
    linear-gradient(180deg,
      rgba(150,230,255,0.88) 0%,
      rgba(74,195,240,0.88) 42%,
      rgba(38,162,220,0.9) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 8px 14px rgba(255,255,255,0.08) inset,
    0 -5px 10px rgba(0,80,150,0.18) inset;
}

/* Silver system folders for Disk view */
.fw-folder-icon--silver .fw-folder-mini {
  background:
    linear-gradient(180deg,
      #e9eef6 0%,
      #cfd8e8 46%,
      #aebbd0 100%);
}

.fw-folder-icon--silver .fw-folder-mini::before {
  background:
    linear-gradient(180deg,
      #f5f8fc 0%,
      #d7e0ee 100%);
}

.fw-folder-icon--silver .fw-folder-mini::after {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.9) 0%,
      rgba(220,230,244,0.92) 45%,
      rgba(190,202,220,0.95) 100%);
}
/* ═══════════════════════════════════════════════════════════
   FINDER SIDEBAR ACTIVE STATES
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   FINDER SIDEBAR ACTIVE STATES — CLASSIC GREY SELECTION
   ═══════════════════════════════════════════════════════════ */

.fw-sidebar-active {
  background: linear-gradient(180deg, #d8dee8 0%, #c4ccd9 100%) !important;
  color: #263547 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.65) inset,
    0 0 0 1px rgba(90,110,140,0.14) inset;
}

.fw-sidebar-active span {
  filter: saturate(1.08);
}

/* ═══════════════════════════════════════════════════════════
   PHASE 2B — DRAGGABLE DESKTOP FOLDERS
   ═══════════════════════════════════════════════════════════ */

.desktop-icon {
  touch-action: none;
}

.desktop-icon--pressed {
  background: rgba(255,255,255,0.10);
}

.desktop-icon--dragging {
  z-index: 60;
  opacity: 0.92;
  transform: scale(1.04);
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.35));
}

.desktop-icon--dragging .icon-img {
  transform: scale(1.08);
}

.desktop-icon--dragging .icon-label {
  background: rgba(37, 99, 235, 0.92);
  color: #fff;
}
/* ═══════════════════════════════════════════════════════════
   PHASE 2C — OPERATIONAL TOP MENU BAR
   ═══════════════════════════════════════════════════════════ */

.menubar-dropdown {
  position: fixed;
  z-index: 2000;
  min-width: 210px;
  padding: 5px 0;
  border-radius: 0 0 7px 7px;
  background:
    linear-gradient(180deg, rgba(250,252,255,0.96), rgba(222,230,242,0.96));
  border: 1px solid rgba(80,100,130,0.28);
  border-top: none;
  box-shadow:
    0 18px 38px rgba(0,0,0,0.32),
    0 1px 0 rgba(255,255,255,0.86) inset;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
  animation: menuDrop 120ms ease-out both;
}

@keyframes menuDrop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menubar-dropdown__item {
  width: 100%;
  height: 24px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 13px;
  color: #17202d;
  text-align: left;
  border-radius: 0;
}

.menubar-dropdown__item:hover:not(.is-disabled) {
  color: #fff;
  background: linear-gradient(180deg, #5fa7f5 0%, #1c6ed7 100%);
}

.menubar-dropdown__item.is-disabled {
  color: rgba(40,50,65,0.38);
}

.menubar-dropdown__item kbd {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: rgba(40,50,65,0.52);
}

.menubar-dropdown__item:hover:not(.is-disabled) kbd {
  color: rgba(255,255,255,0.82);
}

.menubar-dropdown__separator {
  height: 1px;
  margin: 4px 0;
  background: rgba(70,90,120,0.18);
}

/* Finder list mode triggered from View menu */
.fw-list-compact {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;
}

.fw-list-compact .fw-file {
  width: 100%;
  min-height: 32px;
  padding: 5px 12px;
  display: grid;
  grid-template-columns: 34px 1fr 110px 80px;
  align-items: center;
  gap: 10px;
  border-radius: 0;
  border-bottom: 1px solid rgba(0,0,0,0.045);
}

.fw-list-compact .fw-file::after {
  content: 'Portfolio Item';
  font-size: 11px;
  color: #6b7280;
  justify-self: end;
}

.fw-list-compact .fw-file-icon,
.fw-list-compact .fw-folder-icon {
  width: 28px;
  height: 28px;
  transform: none !important;
  filter: none;
}

.fw-list-compact .fw-file-icon {
  border-radius: 3px 7px 3px 3px;
  padding-bottom: 3px;
}

.fw-list-compact .fw-doc-fold {
  width: 8px;
  height: 8px;
}

.fw-list-compact .fw-doc-ext {
  font-size: 6px;
}

.fw-list-compact .fw-folder-mini {
  width: 28px;
  height: 21px;
}

.fw-list-compact .fw-folder-mini::before {
  width: 18px;
  height: 10px;
  top: -5px;
}

.fw-list-compact .fw-folder-mini::after {
  top: 5px;
}

.fw-list-compact .fw-file-label {
  max-width: none;
  text-align: left;
  font-size: 12px;
  word-break: normal;
}

/* About window */
.about-window {
  min-width: 360px;
  min-height: 240px;
}

.about-body {
  flex: 1;
  padding: 26px 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(120,180,255,0.28), transparent 38%),
    linear-gradient(180deg, #f7f9fc 0%, #e2e8f3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-orb {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: white;
  font-weight: 900;
  letter-spacing: -0.04em;
  background:
    linear-gradient(180deg, #5ec7ff 0%, #1377dd 100%);
  box-shadow:
    0 14px 28px rgba(20,90,180,0.32),
    0 1px 0 rgba(255,255,255,0.72) inset;
}

.about-body h2 {
  font-size: 20px;
  color: #172033;
  margin-bottom: 8px;
}

.about-body p {
  max-width: 320px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #4b5565;
  margin-bottom: 14px;
}

.about-version {
  font-size: 11px;
  color: #7a8494;
}

/* ═══════════════════════════════════════════════════════════
   NATIVE MAC / AQUA-STYLE CSS DOCK ICONS
   Replaces inline SVG dock icons with CSS-built icons
   ═══════════════════════════════════════════════════════════ */

.dock-icon-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.3s var(--spring), filter 160ms ease;
  transform-origin: bottom center;
}

.native-icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.42),
    0 2px 4px rgba(0,0,0,0.28),
    0 1px 0 rgba(255,255,255,0.74) inset,
    0 -10px 18px rgba(0,0,0,0.14) inset;
}

.native-icon::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 3px;
  height: 48%;
  border-radius: 13px 13px 20px 20px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.82) 0%,
      rgba(255,255,255,0.36) 52%,
      rgba(255,255,255,0.04) 100%);
  z-index: 20;
  pointer-events: none;
}

.native-icon::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.32) inset,
    0 0 0 2px rgba(0,0,0,0.08) inset;
  z-index: 25;
  pointer-events: none;
}

.dock-item:hover .native-icon {
  filter: saturate(1.08) brightness(1.04);
}

.native-ref {
  transform: scaleY(-1);
  opacity: 0.32;
  filter: blur(0.2px);
  box-shadow: none;
}

.native-ref::before,
.native-ref::after {
  opacity: 0.45;
}

.dock-ref {
  width: 58px;
  height: 17px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.32), transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.32), transparent);
}

.dock-shine {
  display: none;
}

/* Hide any old SVGs if they remain accidentally */
.dock-svg {
  display: none !important;
}

/* ═══ Finder Icon ═══ */

.native-finder {
  background:
    linear-gradient(180deg, #69d5ff 0%, #279cf0 48%, #086dd6 100%);
}

.finder-face {
  position: absolute;
  top: 9px;
  bottom: 7px;
  width: 50%;
  z-index: 4;
}

.finder-face-left {
  left: 7px;
  border-radius: 13px 0 0 13px;
  background:
    linear-gradient(135deg, #f1fbff 0%, #b9e6ff 45%, #58aef2 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
}

.finder-face-right {
  right: 7px;
  border-radius: 0 13px 13px 0;
  background:
    linear-gradient(135deg, #effcff 0%, #c7edff 45%, #75c0f9 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 88%, 0 100%);
}

.finder-line {
  position: absolute;
  top: 10px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  background: rgba(0,78,145,0.35);
  transform: translateX(-50%);
  z-index: 6;
}

.finder-eye {
  position: absolute;
  top: 24px;
  width: 4px;
  height: 9px;
  border-radius: 999px;
  background: #10233e;
  box-shadow:
    0 1px 2px rgba(255,255,255,0.45) inset,
    0 1px 2px rgba(0,0,0,0.25);
  z-index: 8;
}

.finder-eye-left {
  left: 20px;
}

.finder-eye-right {
  right: 20px;
}

.finder-smile {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 12px;
  height: 15px;
  border-bottom: 4px solid #10233e;
  border-radius: 0 0 999px 999px;
  z-index: 9;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.35));
}

/* ═══ Mail Icon ═══ */

.native-mail {
  background:
    linear-gradient(180deg, #2f9dff 0%, #17c2f4 52%, #08a3de 100%);
}

.mail-envelope {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 18px;
  height: 25px;
  border-radius: 5px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef5fb 52%, #cddae4 100%);
  box-shadow:
    0 6px 12px rgba(0,42,100,0.24),
    0 1px 0 rgba(255,255,255,0.75) inset;
  z-index: 8;
}

.mail-flap {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background:
    linear-gradient(135deg, transparent 0 49%, rgba(85,105,130,0.28) 50%, transparent 52%),
    linear-gradient(225deg, transparent 0 49%, rgba(85,105,130,0.28) 50%, transparent 52%);
}

.mail-flap::before {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 1px;
  height: 18px;
  clip-path: polygon(0 0, 50% 72%, 100% 0);
  background:
    linear-gradient(180deg, #ffffff 0%, #dce7ef 100%);
  filter: drop-shadow(0 2px 1px rgba(80,90,110,0.18));
}

.mail-left-fold,
.mail-right-fold {
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 18px;
  background: rgba(255,255,255,0.42);
}

.mail-left-fold {
  left: 0;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.mail-right-fold {
  right: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* ═══ Safari Icon ═══ */

.native-safari {
  background:
    linear-gradient(180deg, #ffffff 0%, #f6f7f9 55%, #d7d9dd 100%);
}

.safari-dial {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 38%, #45c7ff 0%, #149ae8 48%, #0868c2 100%);
  box-shadow:
    0 3px 8px rgba(0,55,130,0.35),
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 2px rgba(255,255,255,0.92) inset;
  z-index: 7;
}

.safari-ticks {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,0.95) 0deg 3deg,
      transparent 3deg 12deg
    );
  mask-image: radial-gradient(circle, transparent 0 62%, #000 64% 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 62%, #000 64% 100%);
}

.safari-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 26px;
  transform-origin: 50% 100%;
  z-index: 9;
}

.safari-needle-red {
  background: linear-gradient(180deg, #ff5045 0%, #c11123 100%);
  clip-path: polygon(50% 0, 100% 100%, 50% 82%, 0 100%);
  transform: translate(-50%, -100%) rotate(44deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.28));
}

.safari-needle-white {
  background: linear-gradient(180deg, #ffffff 0%, #dce3ea 100%);
  clip-path: polygon(50% 0, 100% 100%, 50% 82%, 0 100%);
  transform: translate(-50%, -100%) rotate(224deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18));
}

.safari-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 2px #0d62ae,
    0 2px 3px rgba(0,0,0,0.25);
  z-index: 10;
}

/* ═══ Music Icon ═══ */

.native-music {
  background:
    linear-gradient(180deg, #ff7fa6 0%, #fa326f 46%, #bf0d55 100%);
}

.music-note {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.music-stem {
  position: absolute;
  left: 33px;
  top: 14px;
  width: 5px;
  height: 30px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff0f6 100%);
  box-shadow: 0 2px 4px rgba(80,0,50,0.22);
}

.music-beam {
  position: absolute;
  left: 33px;
  top: 13px;
  width: 16px;
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff0f6 100%);
  transform: rotate(-18deg);
  transform-origin: left center;
}

.music-head {
  position: absolute;
  width: 14px;
  height: 11px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff0f6 100%);
  box-shadow: 0 2px 4px rgba(80,0,50,0.22);
}

.music-head-left {
  left: 20px;
  bottom: 13px;
  transform: rotate(-18deg);
}

.music-head-right {
  left: 34px;
  bottom: 22px;
  transform: rotate(-18deg);
}

/* ═══ Trash Icon ═══ */

.native-trash {
  background:
    linear-gradient(180deg, #f7f9fc 0%, #d8dde6 52%, #9da7b6 100%);
}

.trash-lid {
  position: absolute;
  left: 17px;
  top: 14px;
  width: 22px;
  height: 6px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #ffffff 0%, #cfd6df 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 2px 4px rgba(0,0,0,0.15);
  z-index: 8;
}

.trash-lid::before {
  content: '';
  position: absolute;
  left: 7px;
  top: -5px;
  width: 8px;
  height: 5px;
  border-radius: 3px 3px 0 0;
  background: #eef2f6;
}

.trash-can {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 22px;
  bottom: 10px;
  border-radius: 3px 3px 7px 7px;
  background:
    linear-gradient(180deg, #ffffff 0%, #d5dbe4 55%, #aab3c0 100%);
  box-shadow:
    0 3px 7px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.78) inset;
  z-index: 7;
}

.trash-can span {
  position: absolute;
  top: 6px;
  bottom: 5px;
  width: 2px;
  border-radius: 999px;
  background: rgba(110,120,135,0.68);
}

.trash-can span:nth-child(1) {
  left: 7px;
}

.trash-can span:nth-child(2) {
  left: 50%;
  transform: translateX(-50%);
}

.trash-can span:nth-child(3) {
  right: 7px;
}
/* ═══════════════════════════════════════════════════════════
   1:1 NATIVE IMAGE DOCK ICONS
   Finder / Mail / Music use real image assets
   Safari stays CSS-built
   ═══════════════════════════════════════════════════════════ */

.dock-icon-image-wrap {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
}

.dock-icon-image-wrap::before,
.dock-icon-image-wrap::after {
  display: none !important;
}

.dock-native-img {
  width: 58px;
  height: 58px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 8px 12px rgba(0,0,0,0.34))
    drop-shadow(0 2px 3px rgba(0,0,0,0.22));
}

.dock-native-img-ref {
  transform: scaleY(-1);
  opacity: 0.28;
  filter: blur(0.35px);
}

.dock-ref {
  width: 58px;
  height: 17px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.34), transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.34), transparent);
}

.dock-item:hover .dock-native-img {
  filter:
    brightness(1.04)
    saturate(1.05)
    drop-shadow(0 10px 14px rgba(0,0,0,0.38))
    drop-shadow(0 2px 3px rgba(0,0,0,0.24));
}

/* =============================================================
   WINDOW CONTROLS + MAXIMIZE STATE
   One authoritative block for the traffic lights.
   ============================================================= */
.finder-window,
.textedit-window,
.project-window,
.about-window {
  will-change: left, top, width, height, transform, opacity;
}

.finder-window.is-zoomed,
.textedit-window.is-zoomed,
.project-window.is-zoomed,
.about-window.is-zoomed {
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
}

.finder-window.is-zoomed .fw-titlebar,
.textedit-window.is-zoomed .fw-titlebar,
.project-window.is-zoomed .fw-titlebar,
.about-window.is-zoomed .fw-titlebar {
  cursor: default;
}

.fw-titlebar {
  position: relative;
  z-index: 5;
}

.fw-title {
  pointer-events: none !important;
}

.fw-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
  user-select: none;
}

.fw-btn {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 13px;
  z-index: 21;
  pointer-events: auto !important;
  touch-action: manipulation;
  transition: filter 100ms ease;
}

.fw-close { background: radial-gradient(circle at 40% 35%, #ff8480, #ff5f57 55%, #bf2a25); }
.fw-min   { background: radial-gradient(circle at 40% 35%, #ffde6a, #febc2e 55%, #c89000); }
.fw-zoom  { background: radial-gradient(circle at 40% 35%, #6ae878, #28c840 55%, #1a9030); }

.fw-btn:hover { filter: brightness(0.85); }

.fw-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25);
  pointer-events: none;
}

.fw-close::after,
.fw-min::after,
.fw-zoom::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  opacity: 0;
  transition: opacity 100ms;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.fw-controls:hover .fw-close::after,
.fw-controls:hover .fw-min::after,
.fw-controls:hover .fw-zoom::after { opacity: 1; }

.fw-close::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 1.5l5 5M6.5 1.5l-5 5' stroke='%237a1500' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fw-min::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 4h6' stroke='%235a3e00' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fw-zoom::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 5.5V1.5h4M6.5 2.5v4h-4' stroke='%23003a00' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.finder-window:not(.active) .fw-btn,
.textedit-window:not(.active) .fw-btn,
.project-window:not(.active) .fw-btn,
.about-window:not(.active) .fw-btn {
  filter: grayscale(1) opacity(0.55);
}
/* =============================================================
   POLISHED FOLDERS AND TRASH APP
   ============================================================= */
.aqua-folder {
  width: 82px;
  height: 60px;
  border-radius: 8px 14px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #72d8ff 0%, #39bff0 48%, #1597d9 100%);
  box-shadow:
    0 14px 22px rgba(0,0,0,0.36),
    0 4px 8px rgba(0,0,0,0.24),
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 -14px 20px rgba(0,87,155,0.18) inset;
  overflow: visible;
}

.aqua-folder::before {
  left: 1px;
  top: -10px;
  width: 40px;
  height: 18px;
  border-radius: 8px 12px 0 0;
  background:
    linear-gradient(180deg, #80ddff 0%, #37b9ec 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.62) inset,
    0 -4px 8px rgba(20,120,190,0.18) inset;
}

.aqua-folder::after {
  left: 0;
  right: 0;
  top: 11px;
  bottom: 0;
  border-radius: 11px 11px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #65d5ff 0%, #35b8ee 45%, #168fd3 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.82) inset,
    0 0 0 1px rgba(0,76,140,0.16) inset,
    0 -9px 16px rgba(0,73,145,0.16) inset;
}

.desktop-icon:hover .aqua-folder {
  filter: brightness(1.05) saturate(1.04);
  transform: translateY(-2px);
}

.fw-folder-mini {
  width: 56px;
  height: 40px;
  border-radius: 6px 9px 9px 9px;
  background: linear-gradient(180deg, #70d7ff 0%, #2fb4e9 100%);
  box-shadow:
    0 8px 14px rgba(30,70,110,0.24),
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 -8px 12px rgba(0,90,150,0.18) inset;
}

.fw-folder-mini::before {
  top: -7px;
  left: 0;
  width: 29px;
  height: 13px;
  border-radius: 6px 8px 0 0;
  background: linear-gradient(180deg, #8ee3ff 0%, #43bee9 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.62) inset;
}

.fw-folder-mini::after {
  top: 8px;
  border-radius: 8px 8px 9px 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 64%),
    linear-gradient(180deg, #5fcfff 0%, #2baee5 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 0 0 1px rgba(0,84,145,0.13) inset;
}

.fw-folder-icon--silver .fw-folder-mini,
.fw-folder-icon--silver .fw-folder-mini::before,
.fw-folder-icon--silver .fw-folder-mini::after {
  filter: saturate(0.28) brightness(1.18);
}

.is-trashed {
  display: none !important;
}

.trash-dock-icon {
  position: relative;
}

.trash-badge {
  position: absolute;
  right: -2px;
  top: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 800;
  background: linear-gradient(180deg, #ff6b63 0%, #d9322a 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.55) inset;
  z-index: 5;
}

.trash-badge.has-items {
  display: flex;
}

.trash-window {
  min-width: 420px;
  min-height: 300px;
}

.trash-toolbar {
  gap: 8px;
  justify-content: flex-end;
}

.trash-toolbar-btn {
  height: 23px;
  padding: 0 10px;
  border-radius: 5px;
  color: #263244;
  font-size: 11.5px;
  font-weight: 650;
  background: linear-gradient(180deg, #f9fbff 0%, #d9e3ef 100%);
  border: 1px solid rgba(70,95,130,0.28);
  box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset;
}

.trash-toolbar-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #cad8e8 100%);
}

.trash-toolbar-btn--danger {
  color: #7b201b;
}

.trash-body {
  flex: 1;
  background: linear-gradient(180deg, #f8fafc 0%, #e8eef6 100%);
  overflow: auto;
  position: relative;
}

.trash-empty-state {
  min-height: 100%;
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #5c6674;
}

.trash-empty-state.is-hidden {
  display: none;
}

.trash-empty-icon {
  width: 82px;
  height: 82px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.22));
}

.trash-empty-state h2 {
  font-size: 18px;
  color: #172033;
  margin-bottom: 6px;
}

.trash-empty-state p {
  max-width: 310px;
  font-size: 12px;
  line-height: 1.45;
}

.trash-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 12px;
  padding: 18px;
}

.trash-list.is-empty {
  display: none;
}

.trash-item {
  min-height: 96px;
  padding: 8px 6px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #1f2937;
  background: rgba(255,255,255,0.36);
  border: 1px solid rgba(80,110,150,0.08);
}

.trash-item.is-selected {
  background: rgba(69,137,230,0.22);
  border-color: rgba(38,99,180,0.26);
}

.trash-item-icon {
  width: 44px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trash-item-label {
  max-width: 80px;
  font-size: 11.5px;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}

.trash-drag-ghost {
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  padding: 6px 9px;
  border-radius: 7px;
  color: white;
  font-size: 12px;
  font-weight: 700;
  background: rgba(20,28,42,0.78);
  box-shadow: 0 10px 24px rgba(0,0,0,0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* =============================================================
   FINAL NATIVE MAC FOLDERS
   Square canvas, tiny flap, thin top slit.
   ============================================================= */
.icon-img {
  width: 92px !important;
  height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.desktop-icon:hover .icon-img {
  transform: translateY(-1px) scale(1.01) !important;
}

.aqua-folder {
  position: relative !important;
  width: 88px !important;
  height: 88px !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: url('assets/folder-native.svg') center / contain no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.aqua-folder::before,
.aqua-folder::after {
  display: none !important;
  content: none !important;
}

.desktop-icon:hover .aqua-folder {
  filter: brightness(1.02) saturate(1.01) !important;
  transform: none !important;
}

.desktop-icon.opening .aqua-folder {
  animation: iconBounce 0.45s var(--spring);
}

.fw-file:hover .fw-folder-icon {
  transform: translateY(-1px) scale(1.01) !important;
}

.fw-folder-icon {
  width: 58px !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: none !important;
}

.fw-folder-mini {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: url('assets/folder-native.svg') center / contain no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.fw-folder-mini::before,
.fw-folder-mini::after {
  display: none !important;
  content: none !important;
}

.fw-folder-icon--silver {
  filter: none !important;
}

.fw-folder-icon--silver .fw-folder-mini {
  filter: none !important;
  background: url('assets/folder-system.svg') center / contain no-repeat !important;
  box-shadow: none !important;
}

.fw-folder-icon--silver .fw-folder-mini::before,
.fw-folder-icon--silver .fw-folder-mini::after {
  display: none !important;
  content: none !important;
}

.fw-list-compact .fw-folder-icon {
  width: 30px !important;
  height: 30px !important;
  filter: none !important;
}

.fw-list-compact .fw-folder-mini {
  width: 30px !important;
  height: 30px !important;
  border-radius: 0 !important;
  background-size: contain !important;
}

.fw-list-compact .fw-folder-mini::before,
.fw-list-compact .fw-folder-mini::after {
  display: none !important;
  content: none !important;
}
/* =============================================================
   FINAL MENU BAR APPLE MARK
   Use an SVG instead of the private-use Apple glyph.
   ============================================================= */
.menubar__apple {
  width: 18px !important;
  height: 22px !important;
  margin-right: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  line-height: 0 !important;
}

.menubar__apple-img {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  object-fit: contain !important;
}
/* =============================================================
   FINAL FINDER FUNCTIONALITY
   Navigation links, list rows, and large-icon view.
   ============================================================= */
.fw-nav-btn:disabled,
.fw-nav-disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

.fw-bc-link {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 2px;
}

.fw-bc-link:hover {
  background: rgba(70, 110, 160, 0.12);
}

/* =============================================================
   FINAL UNIFIED FINDER LIST VIEW
   Matches the cleaner About Me folder list style.
   ============================================================= */

.fw-file-list-view {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #f6f7fa !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Header: Name / Date Modified / Size / Kind */
.fw-file-list-header {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) 140px 74px 132px !important;
  align-items: center !important;
  min-height: 27px !important;
  padding: 0 12px 0 54px !important;
  background: linear-gradient(180deg, #dce5f1 0%, #cbd6e6 100%) !important;
  border-bottom: 1px solid rgba(115, 135, 165, 0.34) !important;
  color: #5d6674 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Rows */
.fw-file-list-row {
  width: 100% !important;
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(220px, 1fr) 140px 74px 132px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(130, 145, 165, 0.14) !important;
  background: transparent !important;
  color: #30343a !important;
}

/* Slight Finder-style hover */
.fw-file-list-row:hover {
  background: rgba(72, 123, 190, 0.10) !important;
}

/* Selected row */
.fw-file-list-row.selected {
  background: linear-gradient(180deg, #7fb3e4 0%, #5b98d0 100%) !important;
  color: #fff !important;
}

/* Icon column */
.fw-list-row-icon {
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
}

/* Name should be the strongest black text */
.fw-lr-name {
  color: #1f2329 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Metadata columns should be softer grey */
.fw-lr-date,
.fw-lr-size,
.fw-lr-kind {
  color: #6d737b !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Selection color override */
.fw-file-list-row.selected .fw-lr-name,
.fw-file-list-row.selected .fw-lr-date,
.fw-file-list-row.selected .fw-lr-size,
.fw-file-list-row.selected .fw-lr-kind {
  color: #fff !important;
}

/* Compact icons inside list rows */
.fw-file-list-row .fw-folder-icon,
.fw-file-list-row .fw-folder-mini {
  width: 30px !important;
  height: 30px !important;
  transform: none !important;
  filter: none !important;
}

.fw-file-list-row .fw-file-icon {
  width: 22px !important;
  height: 27px !important;
  transform: none !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.14)) !important;
}

.fw-file-list-row .fw-doc-fold {
  width: 7px !important;
  height: 7px !important;
}

.fw-file-list-row .fw-doc-ext {
  font-size: 5px !important;
  line-height: 1 !important;
}

/* About avatar thumbnail should match row rhythm */
.fw-file-list-row .about-avatar-thumb {
  width: 26px !important;
  height: 26px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.fw-list-row-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fw-file-list-row .fw-folder-icon,
.fw-file-list-row .fw-folder-mini {
  width: 30px !important;
  height: 30px !important;
}

.fw-file-list-row .fw-file-icon {
  width: 22px !important;
  height: 27px !important;
  transform: none !important;
}

.fw-file-list-row .fw-doc-ext {
  font-size: 5px !important;
}

.fw-lr-date,
.fw-lr-size,
.fw-lr-kind {
  color: #6d737b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fw-xl-icon-view {
  align-content: flex-start;
  gap: 22px 28px !important;
  padding: 24px !important;
}

.fw-xl-icon-view .fw-file {
  width: 118px !important;
  gap: 8px !important;
}

.fw-xl-icon-view .fw-folder-icon,
.fw-xl-icon-view .fw-folder-mini {
  width: 86px !important;
  height: 86px !important;
}

.fw-xl-icon-view .fw-file-icon {
  width: 72px !important;
  height: 86px !important;
}

.fw-xl-icon-view .fw-doc-ext {
  font-size: 11px !important;
}

.fw-xl-icon-view .fw-file-label {
  max-width: 118px !important;
  font-size: 12px !important;
}

.about-avatar-thumb {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, #eef3f9 0%, #d5dee9 100%);
  border: 1px solid rgba(70, 95, 125, 0.24);
  box-shadow: 0 1px 2px rgba(0,0,0,0.16);
}

.about-avatar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fw-file-list-row .about-avatar-thumb {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  box-shadow: none;
}

.fw-xl-icon-view .about-avatar-thumb {
  width: 86px;
  height: 86px;
  border-radius: 8px;
}

.image-preview-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #eef1f5;
}

.image-preview-frame {
  width: min(100%, 320px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(90,105,125,0.24);
  box-shadow: 0 8px 22px rgba(40,55,80,0.16);
}

.image-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* =============================================================
   PDF FILE ICON
   Used for resume PDF inside About Me.
   ============================================================= */

.fw-file-icon--pdf {
  background: linear-gradient(160deg, #fff1f1 0%, #f7b4b4 100%) !important;
}

.fw-file-icon--pdf .fw-doc-ext {
  color: #9f1d1d !important;
  font-weight: 900 !important;
}
/* =============================================================
   INTERNAL PDF VIEWER
   Opens resume PDF inside the Mac clone machine.
   ============================================================= */

.pdf-viewer-body {
  padding: 0 !important;
  overflow: hidden !important;
  background: #d8dde6 !important;
  white-space: normal !important;
}

.pdf-viewer-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: white;
}
/* =============================================================
   GLOBAL WINDOW RESIZE HANDLES
   Adds native-feeling resizing to every Mac window.
   ============================================================= */

.finder-window,
.textedit-window,
.project-window,
.about-window,
.trash-window {
  min-width: 360px;
  min-height: 240px;
}

/* Base invisible resize handles */
.window-resize-handle {
  position: absolute;
  z-index: 999999;
  pointer-events: auto;
  background: transparent;
}

/* Edges */
.window-resize-n {
  top: -4px;
  left: 10px;
  right: 10px;
  height: 8px;
  cursor: ns-resize !important;
}

.window-resize-s {
  bottom: -4px;
  left: 10px;
  right: 10px;
  height: 8px;
  cursor: ns-resize !important;
}

.window-resize-e {
  top: 10px;
  right: -4px;
  bottom: 10px;
  width: 8px;
  cursor: ew-resize !important;
}

.window-resize-w {
  top: 10px;
  left: -4px;
  bottom: 10px;
  width: 8px;
  cursor: ew-resize !important;
}

/* Corners */
.window-resize-ne,
.window-resize-nw,
.window-resize-se,
.window-resize-sw {
  width: 14px;
  height: 14px;
}

.window-resize-ne {
  top: -5px;
  right: -5px;
  cursor: nesw-resize !important;
}

.window-resize-nw {
  top: -5px;
  left: -5px;
  cursor: nwse-resize !important;
}

.window-resize-se {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize !important;
}

.window-resize-sw {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize !important;
}

/* Subtle Mac-style bottom-right grip */
.window-resize-se::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  opacity: 0.34;
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(60,70,85,0.7) 46% 54%, transparent 55%),
    linear-gradient(135deg, transparent 0 65%, rgba(60,70,85,0.55) 66% 74%, transparent 75%);
  pointer-events: none;
}

/* No resize handles while maximized */
.is-zoomed .window-resize-handle {
  display: none !important;
}
/* =============================================================
   FUNCTIONAL TEXTEDIT WRITING MODE
   Makes Window > TextEdit open a usable blank document.
   ============================================================= */

.textedit-editable {
  outline: none !important;
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  white-space: pre-wrap !important;
}

.textedit-editable:empty::before {
  content: attr(data-placeholder);
  color: rgba(0, 0, 0, 0.35);
}


/* =============================================================
   FINAL PORTFOLIO PROJECT SLIDESHOW + LIST TEXT POLISH
   ============================================================= */

.project-window {
  min-width: 680px;
  min-height: 500px;
}

.project-preview-card {
  max-width: 392px;
  border-radius: 10px;
}

.project-preview-art {
  min-height: 330px;
  padding: 14px;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
  background: linear-gradient(180deg, #f7f9fc 0%, #e9eef6 100%) !important;
}

.project-preview-art::before,
.project-art-glow,
.project-art-title {
  display: none !important;
}

.project-slide-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(234,239,247,0.96)),
    #eef3f8;
  border: 1px solid rgba(94, 112, 140, 0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 12px 26px rgba(40,56,88,0.14);
}

.project-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-slide-copy {
  min-height: 74px;
  padding: 11px 4px 9px;
  color: #2d333c;
}

.project-slide-copy strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  color: #1f2329;
}

.project-slide-copy span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: #68717d;
}

.project-slide-controls {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.project-slide-btn {
  width: 30px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(86, 105, 132, 0.34);
  background: linear-gradient(180deg, #ffffff 0%, #dbe4ef 100%);
  color: #344152;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255,255,255,0.86) inset;
}

.project-slide-btn:hover {
  filter: brightness(1.04);
}

.project-slide-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.project-slide-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(80, 98, 125, 0.36);
  background: rgba(112, 126, 148, 0.32);
}

.project-slide-dot.is-active {
  width: 18px;
  background: linear-gradient(180deg, #6ab8f3 0%, #2f8dd4 100%);
  border-color: rgba(36, 106, 166, 0.58);
}

.project-info h2 {
  letter-spacing: 0 !important;
}

.project-btn[aria-disabled="true"] {
  opacity: 0.86;
}

.fw-list-view {
  background: #f6f7fa !important;
  color: #30343a !important;
  overflow-x: hidden !important;
}

.fw-list-header {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) 112px 54px 118px !important;
  align-items: center !important;
  min-height: 27px !important;
  padding: 0 12px 0 54px !important;
  background: linear-gradient(180deg, #dce5f1 0%, #cbd6e6 100%) !important;
  border-bottom: 1px solid rgba(115, 135, 165, 0.34) !important;
  color: #5d6674 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.fw-list-row {
  width: 100% !important;
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(150px, 1fr) 112px 54px 118px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(130, 145, 165, 0.14) !important;
  background: transparent !important;
  color: #30343a !important;
}

.fw-list-row:hover {
  background: rgba(72, 123, 190, 0.10) !important;
}

.fw-list-row .fw-lr-icon {
  justify-self: center;
  width: 26px;
  text-align: center;
}

.fw-lr-name {
  color: #1f2329 !important;
  font-weight: 500 !important;
}

.fw-lr-date,
.fw-lr-size,
.fw-lr-kind {
  color: #6d737b !important;
  font-weight: 400 !important;
}

@media (max-width: 760px) {
  .project-preview-card {
    max-width: 100%;
  }

  .project-preview-art {
    min-height: 300px;
  }
}


/* =============================================================
   FINAL MENU + WINDOW RESCUE POLISH
   ============================================================= */

.menubar__appname[data-menu] {
  height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  margin-right: 2px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.menubar__appname[data-menu]:hover,
.menubar__appname[data-menu].active {
  background: rgba(0,0,0,0.08);
}

.window-move-grip {
  position: absolute;
  right: 22px;
  bottom: 14px;
  width: 34px;
  height: 16px;
  z-index: 999998;
  border-radius: 999px;
  border: 1px solid rgba(72, 88, 112, 0.22);
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(202,214,231,0.42));
  box-shadow: 0 1px 0 rgba(255,255,255,0.64) inset, 0 2px 5px rgba(22,34,58,0.12);
  opacity: 0.24;
  cursor: move !important;
  transition: opacity 120ms ease, transform 120ms ease;
}

.window-move-grip::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 4px;
  height: 6px;
  border-top: 1px solid rgba(61, 73, 92, 0.42);
  border-bottom: 1px solid rgba(61, 73, 92, 0.32);
}

.finder-window:hover .window-move-grip,
.textedit-window:hover .window-move-grip,
.project-window:hover .window-move-grip,
.about-window:hover .window-move-grip,
.trash-window:hover .window-move-grip,
.window-move-grip:hover {
  opacity: 0.58;
}

.window-move-grip:hover {
  transform: translateY(-1px);
}

.is-zoomed .window-move-grip {
  display: none !important;
}


/* =============================================================
   FINAL IMMERSION CLEANUP
   Removes rescue grip, softens image presentation, and lets windows sit flush under the menu bar.
   ============================================================= */

.window-move-grip {
  display: none !important;
}

.project-preview-card {
  background: rgba(235, 242, 250, 0.94) !important;
  border: 1px solid rgba(75, 96, 125, 0.22) !important;
  box-shadow:
    0 22px 46px rgba(28, 42, 64, 0.20),
    0 1px 0 rgba(255,255,255,0.85) inset !important;
}

.project-preview-art {
  padding: 16px !important;
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,0.92), transparent 43%),
    radial-gradient(circle at 14% 86%, rgba(84, 161, 255, 0.22), transparent 36%),
    linear-gradient(145deg, #edf3fa 0%, #d4dfec 100%) !important;
}

.project-slide-frame {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 9px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(53, 67, 88, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05)),
    linear-gradient(135deg, #26364b 0%, #111925 100%) !important;
  box-shadow:
    0 18px 34px rgba(24, 35, 52, 0.28),
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 -1px 0 rgba(0,0,0,0.45) inset !important;
  isolation: isolate;
}

.project-slide-frame::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 2;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 30%);
}

.project-slide-frame::after {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: 3;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset;
}

.project-slide-img {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  background: #0f1724 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12),
    0 14px 24px rgba(0,0,0,0.26) !important;
}

.project-slide-copy {
  padding-left: 2px !important;
  padding-right: 2px !important;
}


/* =============================================================
   FINAL DESKTOP MULTI-SELECT
   Windows-style marquee selection and selected-group dragging.
   ============================================================= */

.desktop-selection-box {
  position: absolute;
  z-index: 18;
  pointer-events: none;
  border: 1px solid rgba(100, 171, 255, 0.78);
  background: rgba(82, 151, 255, 0.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20) inset;
  border-radius: 3px;
}

.desktop-icon--group-dragging {
  opacity: 0.94;
}

.desktop-icon--group-dragging .icon-img {
  transform: scale(1.04) translateY(-1px);
}

.desktop-icon.selected {
  background: rgba(100,160,255,0.28);
  box-shadow: 0 0 0 1px rgba(180,215,255,0.16) inset;
}


/* =============================================================
   FINAL MOBILE READINESS
   Keeps the desktop concept usable on phone-sized screens.
   ============================================================= */

@media (max-width: 760px) {
  .finder-window:not(.is-zoomed),
  .textedit-window:not(.is-zoomed),
  .project-window:not(.is-zoomed),
  .about-window:not(.is-zoomed),
  .trash-window:not(.is-zoomed) {
    left: 10px !important;
    top: 34px !important;
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 118px) !important;
    height: calc(100dvh - 118px) !important;
    min-width: 0 !important;
    min-height: 320px !important;
    max-width: none !important;
  }

  .fw-toolbar {
    min-width: 0;
  }

  .fw-breadcrumb {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .fw-breadcrumb .fw-bc-item {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fw-sidebar {
    width: 124px !important;
  }

  .fw-sidebar-item {
    font-size: 12px !important;
    padding-left: 10px !important;
    padding-right: 8px !important;
  }

  .fw-icon-view {
    gap: 8px !important;
    padding: 12px !important;
  }

  .fw-list-header {
    grid-template-columns: minmax(128px, 1fr) 92px 44px 96px !important;
    padding-left: 46px !important;
  }

  .fw-list-row {
    grid-template-columns: 28px minmax(128px, 1fr) 92px 44px 96px !important;
    gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .project-window:not(.is-zoomed) {
    height: calc(100vh - 92px) !important;
    height: calc(100dvh - 92px) !important;
  }

  .project-body {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
  }

  .project-hero {
    min-height: 0 !important;
    padding: 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(120,140,170,0.22) !important;
  }

  .project-preview-card {
    max-width: min(100%, 430px) !important;
  }

  .project-preview-art {
    min-height: 0 !important;
  }

  .project-slide-frame {
    aspect-ratio: 4 / 3 !important;
  }

  .project-info {
    padding: 18px !important;
    overflow: visible !important;
  }
}

@media (max-width: 520px) {
  .menubar__menu:nth-of-type(n+5),
  .menubar__right .menubar__icon:not(.menubar__time) {
    display: none !important;
  }

  .fw-sidebar {
    width: 108px !important;
  }

  .fw-sidebar-section {
    padding-left: 10px !important;
  }

  .fw-sidebar-item {
    gap: 5px !important;
  }

  .fw-view-btn {
    width: 22px !important;
  }

  .project-info h2 {
    font-size: 23px !important;
  }

  .project-slide-copy {
    min-height: 0 !important;
  }
}


/* =============================================================
   FINAL PROJECT PREVIEW REFINEMENT
   Cleaner portfolio artboard; no bulky inner device frame.
   ============================================================= */

.project-preview-card {
  max-width: 430px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(238,244,251,0.82)) !important;
  border: 1px solid rgba(122, 142, 168, 0.30) !important;
  box-shadow:
    0 18px 38px rgba(35, 52, 78, 0.15),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}

.project-browser-bar {
  display: none !important;
}

.project-preview-art {
  padding: 18px 18px 14px !important;
  min-height: 318px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.72), transparent 45%),
    linear-gradient(180deg, #f4f8fc 0%, #e2ebf5 100%) !important;
}

.project-slide-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  padding: 0 !important;
  border-radius: 13px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

.project-slide-frame::before {
  display: none !important;
}

.project-slide-frame::after {
  display: none !important;
}

.project-slide-img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  border-radius: 13px !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow:
    0 0 0 1px rgba(86, 105, 132, 0.28),
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 14px 28px rgba(32, 47, 70, 0.16) !important;
}

.project-slide-copy {
  padding: 14px 3px 10px !important;
}

.project-slide-copy strong {
  color: #1f2835 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

.project-slide-copy span {
  color: #667384 !important;
  font-size: 12px !important;
}

.project-slide-controls {
  margin-top: 2px !important;
}


/* =============================================================
   FINAL WINDOW REACHABILITY + MUSIC APP
   Keeps resize corners accessible and adds the functional player.
   ============================================================= */

.finder-window,
.textedit-window,
.project-window,
.about-window,
.trash-window,
.music-window {
  max-width: calc(100vw - 2px) !important;
  max-height: calc(100vh - 96px) !important;
}

.project-window {
  min-width: min(560px, calc(100vw - 24px)) !important;
  min-height: min(420px, calc(100vh - 120px)) !important;
}

.window-resize-s {
  bottom: -7px !important;
  height: 16px !important;
}

.window-resize-e {
  right: -7px !important;
  width: 16px !important;
}

.window-resize-se,
.window-resize-sw,
.window-resize-ne,
.window-resize-nw {
  width: 24px !important;
  height: 24px !important;
}

.window-resize-se {
  right: -8px !important;
  bottom: -8px !important;
}

.window-resize-sw {
  left: -8px !important;
  bottom: -8px !important;
}

.music-window {
  min-width: min(280px, calc(100vw - 24px)) !important;
  min-height: min(330px, calc(100vh - 120px)) !important;
}

.music-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 12%, rgba(255,255,255,0.82), transparent 34%),
    linear-gradient(180deg, #f4f7fb 0%, #dce7f2 100%);
}

.music-now-playing {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.music-cover-shell {
  width: 148px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.82), transparent 34%),
    linear-gradient(145deg, #2a3d58 0%, #0d1420 100%);
  border: 1px solid rgba(65, 82, 108, 0.32);
  box-shadow:
    0 18px 34px rgba(28, 42, 64, 0.24),
    0 1px 0 rgba(255,255,255,0.36) inset;
}

.music-cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.music-meta {
  min-width: 0;
}

.music-kicker {
  display: block;
  margin-bottom: 8px;
  color: #6b7a8d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.music-meta h2 {
  margin: 0 0 6px;
  color: #172033;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
}

.music-meta p {
  margin: 0;
  color: #5e6c7f;
  font-size: 14px;
  line-height: 1.35;
}

.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.music-btn {
  width: 42px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(86, 105, 132, 0.30);
  background: linear-gradient(180deg, #ffffff 0%, #dfe8f2 100%);
  color: #273346;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.88) inset,
    0 9px 18px rgba(36, 52, 76, 0.12);
}

.music-btn:hover {
  filter: brightness(1.04);
}

.music-btn--play {
  width: 58px;
  height: 52px;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(180deg, #62b7f3 0%, #1f7fd0 100%);
  border-color: rgba(28, 103, 170, 0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}

.music-progress-wrap {
  display: grid;
  gap: 7px;
}

.music-progress,
.music-volume {
  width: 100%;
  accent-color: #2d8fd7;
}

.music-time,
.music-volume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #697789;
  font-size: 12px;
  font-weight: 700;
}

.music-volume-row {
  gap: 12px;
}

.music-volume-row span {
  flex: 0 0 auto;
}

.music-track-list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
}

.music-track {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(102, 122, 150, 0.22);
  background: rgba(255,255,255,0.52);
  color: #202938;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset;
}

.music-track:hover {
  background: rgba(255,255,255,0.76);
}

.music-track.is-active {
  background: linear-gradient(180deg, rgba(98, 181, 242, 0.24), rgba(44, 137, 212, 0.18));
  border-color: rgba(48, 131, 204, 0.34);
}

.music-track-index {
  color: #7a8798;
  font-size: 12px;
  font-weight: 900;
}

.music-track-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.music-track-copy strong {
  overflow: hidden;
  color: #1d2634;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-track-copy span,
.music-track-status {
  color: #687589;
  font-size: 12px;
  line-height: 1.2;
}

.music-track-status {
  font-weight: 800;
}

@media (max-width: 520px) {
  .music-now-playing {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
  }

  .music-cover-shell {
    width: 112px;
    border-radius: 18px;
  }

  .music-body {
    padding: 16px;
  }

  .music-meta h2 {
    font-size: 22px;
  }
}

/* =============================================================
   COMPACT GLASS MUSIC PLAYER
   ============================================================= */

.music-window.finder-window {
  border-radius: 20px !important;
  overflow: hidden;
  background: rgba(222, 235, 249, 0.34) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    0 24px 58px rgba(12, 21, 36, 0.26),
    0 8px 22px rgba(12, 21, 36, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
}

.music-window .fw-titlebar {
  height: 34px;
  min-height: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(196, 214, 235, 0.38)),
    rgba(208, 226, 244, 0.28);
  border-bottom: 1px solid rgba(122, 146, 174, 0.24);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.music-window .fw-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  color: rgba(31, 42, 58, 0.7);
}

.music-body {
  gap: 10px;
  padding: 13px;
  cursor: grab;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.62), transparent 42%),
    linear-gradient(150deg, rgba(238, 246, 255, 0.54), rgba(192, 214, 235, 0.32));
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.music-body:active {
  cursor: grabbing;
}

.music-body button,
.music-body input {
  cursor: pointer;
}

.music-now-playing {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.music-cover-shell {
  width: 76px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    0 12px 26px rgba(11, 25, 43, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.music-cover {
  object-fit: cover;
}

.music-kicker {
  margin-bottom: 3px;
  color: #5d7086;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.music-meta h2 {
  color: #172233;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: 0;
}

.music-meta p {
  margin-top: 4px;
  color: #69778a;
  font-size: 12px;
  line-height: 1.25;
}

.music-controls {
  justify-content: center;
  gap: 9px;
  padding: 2px 0 0;
}

.music-btn {
  width: 32px;
  height: 30px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(117, 143, 173, 0.28);
  color: #1f3b58;
  box-shadow:
    0 8px 18px rgba(28, 56, 86, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.music-btn:hover {
  background: rgba(255, 255, 255, 0.78);
}

.music-btn:focus {
  outline: none;
}

.music-btn:focus-visible {
  outline: 2px solid rgba(65, 154, 220, 0.4);
  outline-offset: 2px;
}

.music-btn--play {
  width: 40px;
  height: 36px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(180deg, #66bdf0, #227fc6);
  border-color: rgba(35, 119, 189, 0.44);
  box-shadow:
    0 12px 24px rgba(31, 126, 196, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.music-progress-wrap {
  gap: 5px;
}

.music-progress,
.music-volume {
  height: 16px;
}

.music-time,
.music-volume-row {
  color: #687789;
  font-size: 11px;
}

.music-volume-row {
  gap: 9px;
}

.music-volume-row span {
  font-size: 11px;
}

.music-track-list {
  gap: 6px;
  min-height: 0;
  padding-right: 1px;
}

.music-track {
  min-height: 42px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(121, 146, 174, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.music-track:hover {
  background: rgba(255, 255, 255, 0.62);
}

.music-track.is-active {
  background: rgba(76, 166, 226, 0.22);
  border-color: rgba(43, 133, 201, 0.32);
}

.music-track-index {
  font-size: 11px;
}

.music-track-copy strong {
  font-size: 12px;
}

.music-track-copy span {
  font-size: 11px;
}

.music-track-status {
  display: none;
}

@media (max-width: 520px) {
  .music-window {
    min-width: min(270px, calc(100vw - 18px)) !important;
  }

  .music-body {
    padding: 12px;
  }

  .music-now-playing {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
  }

  .music-cover-shell {
    width: 70px;
    border-radius: 14px;
  }

  .music-meta h2 {
    font-size: 17px;
  }
}

/* =============================================================
   MUSIC LIBRARY WINDOW + MINI PLAYER
   ============================================================= */

.music-window {
  min-width: min(560px, calc(100vw - 24px)) !important;
  min-height: min(360px, calc(100vh - 120px)) !important;
}

.music-window.finder-window {
  border-radius: 10px !important;
  overflow: hidden;
  background: rgba(235, 242, 250, 0.94) !important;
  border: 1px solid rgba(112, 132, 154, 0.36) !important;
  box-shadow:
    0 26px 72px rgba(9, 16, 29, 0.28),
    0 9px 26px rgba(9, 16, 29, 0.16);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.music-window .fw-titlebar {
  height: 35px;
  min-height: 35px;
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.88), rgba(205, 219, 235, 0.72)),
    rgba(230, 239, 249, 0.8);
  border-bottom: 1px solid rgba(125, 147, 171, 0.34);
}

.music-window .fw-title {
  color: #30333a;
  font-size: 13px;
  font-weight: 800;
}

.music-body {
  flex: 1;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  cursor: default;
  background: rgba(246, 249, 253, 0.92);
}

.music-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px 10px;
  background:
    linear-gradient(180deg, rgba(224, 233, 244, 0.92), rgba(204, 216, 232, 0.88));
  border-right: 1px solid rgba(121, 145, 169, 0.36);
}

.music-sidebar-section {
  display: grid;
  gap: 6px;
}

.music-sidebar-label {
  padding: 0 8px;
  color: #7d8794;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.music-sidebar-item {
  width: 100%;
  height: 34px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #334155;
  text-align: left;
  font: inherit;
}

.music-sidebar-icon {
  width: 22px;
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
}

.music-sidebar-item strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-sidebar-item em {
  color: rgba(255, 255, 255, 0.96);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.music-sidebar-item.is-active {
  color: #fff;
  background: linear-gradient(180deg, #57a8f4, #287bd8);
  border-color: rgba(28, 104, 185, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.music-library {
  min-width: 0;
  display: grid;
  grid-template-rows: 36px minmax(0, 1fr) 50px;
  background: rgba(247, 249, 252, 0.96);
}

.music-library-toolbar {
  display: grid;
  grid-template-columns: max-content max-content minmax(120px, 190px);
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  color: #1f2937;
  background: rgba(250, 252, 255, 0.82);
  border-bottom: 1px solid rgba(132, 151, 173, 0.3);
}

.music-library-toolbar strong {
  font-size: 13px;
  font-weight: 850;
}

.music-library-toolbar span {
  color: #697589;
  font-size: 12px;
  font-weight: 700;
}

.music-search {
  justify-self: end;
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  color: #98a2b3;
  font-size: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(232, 238, 247, 0.9));
  border: 1px solid rgba(137, 153, 171, 0.36);
}

.music-table {
  min-height: 0;
  overflow: hidden;
}

.music-table-head,
.music-track {
  display: grid;
  grid-template-columns: minmax(150px, 1.6fr) minmax(120px, 1fr) 92px 56px;
  align-items: center;
}

.music-table-head {
  height: 27px;
  padding: 0 12px;
  color: #647084;
  font-size: 12px;
  font-weight: 850;
  background: linear-gradient(180deg, #edf2f8, #dce6f1);
  border-bottom: 1px solid rgba(132, 151, 173, 0.28);
}

.music-track-list {
  display: block;
  overflow-y: auto;
  padding: 0;
}

.music-track {
  width: 100%;
  min-height: 31px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.72);
  color: #1f2937;
  text-align: left;
  box-shadow: none;
}

.music-track:nth-child(even) {
  background: rgba(242, 246, 251, 0.72);
}

.music-track:hover {
  background: rgba(219, 235, 249, 0.8);
}

.music-track.is-active {
  color: #fff;
  background: linear-gradient(180deg, #55a6ee, #2b83d2);
}

.music-track-title,
.music-track-copy,
.music-track-kind,
.music-track-duration {
  overflow: hidden;
  min-width: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-track-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.music-track-note {
  width: 18px;
  color: currentColor;
  opacity: 0.82;
  text-align: center;
  font-size: 15px;
  line-height: 1;
}

.music-track-copy span,
.music-track-kind,
.music-track-duration {
  color: inherit;
  opacity: 0.74;
  font-weight: 650;
}

.music-player-strip {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 122px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.92), rgba(214, 225, 238, 0.9));
  border-top: 1px solid rgba(124, 145, 169, 0.32);
}

.music-controls {
  justify-content: flex-start;
  gap: 5px;
  padding: 0;
}

.music-btn {
  width: 31px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(105, 126, 150, 0.34);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(220,229,240,0.94));
  color: #283546;
  font-size: 18px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.76),
    0 1px 2px rgba(20, 37, 56, 0.1);
}

.music-btn:hover {
  background: linear-gradient(180deg, #fff, #e8eff8);
}

.music-btn:focus {
  outline: none;
}

.music-btn:focus-visible {
  outline: 2px solid rgba(62, 143, 215, 0.36);
  outline-offset: 2px;
}

.music-btn--play {
  width: 34px;
  height: 28px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #64baf3, #237fcf);
  border-color: rgba(29, 103, 171, 0.48);
}

.music-progress-wrap {
  min-width: 0;
  gap: 3px;
}

.music-progress,
.music-volume {
  width: 100%;
  height: 14px;
  accent-color: #2f8bd3;
}

.music-time,
.music-volume-row {
  color: #667487;
  font-size: 10px;
  font-weight: 800;
}

.music-volume-row {
  gap: 7px;
}

.music-volume-row span {
  flex: 0 0 auto;
  font-size: 10px;
  text-transform: uppercase;
}

.music-mini-player {
  position: absolute;
  z-index: 1200;
  width: 166px;
  min-height: 186px;
  display: none;
  grid-template-columns: 1fr;
  grid-template-rows: 14px 88px minmax(32px, auto) 32px;
  align-items: start;
  justify-items: center;
  gap: 8px;
  padding: 10px 10px 12px;
  border-radius: 24px;
  color: #102033;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.86), transparent 48%),
    linear-gradient(145deg, rgba(246, 250, 255, 0.72), rgba(218, 231, 244, 0.54));
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    0 20px 44px rgba(7, 14, 28, 0.22),
    0 7px 18px rgba(7, 14, 28, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(30px) saturate(128%);
  -webkit-backdrop-filter: blur(30px) saturate(128%);
  user-select: none;
  cursor: grab;
}

.music-mini-player:active {
  cursor: grabbing;
}

.music-mini-traffic {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-left: 2px;
}

.music-mini-dot {
  width: 11px;
  height: 11px;
  display: block;
  border: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.54),
    0 1px 2px rgba(0,0,0,0.18);
  cursor: pointer;
}

.music-mini-dot--close {
  background: linear-gradient(180deg, #ff7770, #ff4f45);
}

.music-mini-dot--min {
  background: linear-gradient(180deg, #ffd86b, #ffbd2e);
}

.music-mini-dot--zoom {
  background: linear-gradient(180deg, #4fe175, #27c94c);
}

.music-mini-dot:focus {
  outline: none;
}

.music-mini-dot:focus-visible {
  outline: 2px solid rgba(70, 145, 220, 0.36);
  outline-offset: 2px;
}

.music-mini-cover {
  width: 88px;
  height: 88px;
  display: block;
  object-fit: cover;
  border-radius: 21px;
  border: 1px solid rgba(255,255,255,0.64);
  box-shadow:
    0 12px 26px rgba(14, 26, 43, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.music-mini-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 3px;
  align-self: center;
  text-align: center;
}

.music-mini-copy strong,
.music-mini-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-mini-copy strong {
  color: #122037;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.music-mini-copy span {
  color: #647289;
  font-size: 10px;
  font-weight: 750;
}

.music-mini-controls {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.music-mini-btn {
  width: 30px;
  height: 29px;
  border: 1px solid rgba(105, 128, 153, 0.28);
  border-radius: 50%;
  color: #18324d;
  background: rgba(255,255,255,0.56);
  font-size: 17px;
  font-weight: 900;
  box-shadow:
    0 8px 16px rgba(18, 39, 62, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.6);
  cursor: pointer;
}

.music-mini-btn:hover {
  background: rgba(255,255,255,0.78);
}

.music-mini-btn:focus {
  outline: none;
}

.music-mini-btn:focus-visible {
  outline: 2px solid rgba(61, 146, 218, 0.36);
  outline-offset: 2px;
}

.music-mini-btn--play {
  color: #fff;
  background: linear-gradient(180deg, #68c0f5, #2385d4);
  border-color: rgba(31, 113, 184, 0.38);
}

@media (max-width: 680px) {
  .music-window {
    min-width: min(320px, calc(100vw - 18px)) !important;
  }

  .music-body {
    grid-template-columns: 1fr;
  }

  .music-sidebar {
    display: none;
  }

  .music-library {
    grid-template-rows: 36px minmax(0, 1fr) 58px;
  }

  .music-library-toolbar {
    grid-template-columns: max-content max-content 1fr;
  }

  .music-table-head,
  .music-track {
    grid-template-columns: minmax(120px, 1fr) 74px 52px;
  }

  .music-table-head span:nth-child(3),
  .music-track-kind {
    display: none;
  }

  .music-player-strip {
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .music-volume-row {
    display: none;
  }
}

/* =============================================================
   FINAL MUSIC APP POLISH
   ============================================================= */

.music-sidebar-item {
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.music-sidebar-item:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(122, 145, 170, 0.22);
}

.music-sidebar-item:active {
  transform: scale(0.985);
}

.music-sidebar-icon {
  filter: saturate(0.9);
}

.music-table[data-music-view="covers"] {
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.76), transparent 38%),
    rgba(248, 251, 255, 0.96);
}

.music-table[data-music-view="covers"] .music-table-head {
  display: none;
}

.music-table[data-music-view="covers"] .music-track-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 16px;
  padding: 18px;
}

.music-cover-card {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 13px 10px;
  border: 1px solid rgba(139, 158, 181, 0.22);
  border-radius: 16px;
  color: #1d2737;
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.68),
    0 10px 22px rgba(22, 38, 58, 0.08);
  font: inherit;
  text-align: center;
}

.music-cover-card:hover {
  background: rgba(255, 255, 255, 0.78);
}

.music-cover-card.is-active {
  border-color: rgba(45, 134, 210, 0.38);
  background: rgba(75, 164, 232, 0.18);
}

.music-cover-card img {
  width: 82px;
  height: 82px;
  display: block;
  object-fit: cover;
  border-radius: 18px;
  box-shadow:
    0 12px 22px rgba(15, 28, 44, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.music-cover-card strong,
.music-cover-card span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-cover-card strong {
  color: #1d2737;
  font-size: 13px;
  font-weight: 900;
}

.music-cover-card span {
  color: #667487;
  font-size: 11px;
  font-weight: 750;
}

.music-mini-player {
  box-sizing: border-box;
  width: 178px;
  height: 178px;
  min-height: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 12px 74px 24px 30px;
  align-items: center;
  justify-items: center;
  gap: 5px;
  padding: 10px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 0%, rgba(255,255,255,0.92), transparent 44%),
    linear-gradient(145deg, rgba(248, 251, 255, 0.76), rgba(215, 229, 242, 0.58));
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow:
    0 24px 54px rgba(7, 14, 28, 0.24),
    0 8px 20px rgba(7, 14, 28, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.74);
  backdrop-filter: blur(32px) saturate(136%);
  -webkit-backdrop-filter: blur(32px) saturate(136%);
}

.music-mini-traffic {
  width: 100%;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 0 0 2px;
  visibility: visible;
  opacity: 1;
}

.music-mini-dot {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}

.music-mini-cover {
  width: 74px;
  height: 74px;
  border-radius: 20px;
}

.music-mini-copy {
  align-self: center;
  gap: 2px;
}

.music-mini-copy strong {
  font-size: 12px;
  line-height: 1.1;
}

.music-mini-copy span {
  font-size: 10px;
  line-height: 1.1;
}

.music-mini-controls {
  grid-template-columns: repeat(3, 30px);
  gap: 6px;
}

.music-mini-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 17px;
}

.music-mini-btn--play {
  font-size: 14px;
}

/* =============================================================
   MINI PLAYER - IOS GLASS REFINEMENT
   ============================================================= */

.music-mini-player {
  width: 172px;
  height: 172px;
  grid-template-rows: 12px 72px 26px 30px;
  gap: 5px;
  padding: 9px 10px 11px;
  overflow: hidden;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.54), rgba(232,242,252,0.28)),
    rgba(238, 247, 255, 0.26);
  border: 1px solid rgba(255,255,255,0.54);
  box-shadow:
    0 22px 46px rgba(7, 14, 28, 0.22),
    0 7px 18px rgba(7, 14, 28, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.58),
    inset 0 -1px 0 rgba(96,118,144,0.08);
  backdrop-filter: blur(36px) saturate(118%) brightness(1.05);
  -webkit-backdrop-filter: blur(36px) saturate(118%) brightness(1.05);
}

.music-mini-traffic {
  opacity: 0.92;
}

.music-mini-dot {
  width: 10px;
  height: 10px;
  flex-basis: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.36),
    0 1px 2px rgba(0,0,0,0.12);
}

.music-mini-cover {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.54);
  box-shadow:
    0 12px 24px rgba(12, 24, 40, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

.music-mini-copy {
  gap: 1px;
}

.music-mini-copy strong {
  color: rgba(18, 27, 42, 0.92);
  font-size: 12px;
  font-weight: 850;
}

.music-mini-copy span {
  color: rgba(78, 92, 112, 0.78);
  font-size: 10px;
  font-weight: 750;
}

.music-mini-controls {
  gap: 7px;
}

.music-mini-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.36);
  color: rgba(20, 34, 52, 0.88);
  box-shadow:
    0 7px 16px rgba(13, 27, 44, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.5);
  backdrop-filter: blur(14px) saturate(112%);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
}

.music-mini-btn:hover {
  background: rgba(255,255,255,0.5);
}

.music-mini-btn--play {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(82, 174, 236, 0.9), rgba(33, 130, 205, 0.9));
  border-color: rgba(255,255,255,0.46);
  box-shadow:
    0 9px 18px rgba(31, 118, 190, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.38);
}

/* =============================================================
   MINI PLAYER - BREATHING ROOM PASS
   ============================================================= */

.music-mini-player {
  width: 188px;
  height: 212px;
  grid-template-rows: 14px 86px 34px 36px;
  gap: 8px;
  padding: 12px 13px 14px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.42), rgba(238,247,255,0.16)),
    rgba(244, 250, 255, 0.16);
  border-color: rgba(255,255,255,0.46);
  box-shadow:
    0 24px 54px rgba(7, 14, 28, 0.20),
    0 8px 20px rgba(7, 14, 28, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.48);
  backdrop-filter: blur(42px) saturate(108%) brightness(1.08);
  -webkit-backdrop-filter: blur(42px) saturate(108%) brightness(1.08);
}

.music-mini-traffic {
  height: 14px;
  padding-left: 1px;
}

.music-mini-cover {
  width: 86px;
  height: 86px;
  border-radius: 22px;
}

.music-mini-copy {
  align-self: center;
  gap: 3px;
}

.music-mini-copy strong {
  font-size: 13px;
  line-height: 1.15;
}

.music-mini-copy span {
  font-size: 11px;
  line-height: 1.15;
}

.music-mini-controls {
  align-self: end;
  grid-template-columns: repeat(3, 36px);
  gap: 10px;
}

.music-mini-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.34);
  border-color: rgba(255,255,255,0.48);
}

.music-mini-btn--play {
  background: linear-gradient(180deg, rgba(80, 174, 236, 0.88), rgba(28, 132, 208, 0.88));
}

/* =============================================================
   MINI PLAYER - INTEGRATED CONTROL SHELF
   ============================================================= */

.music-mini-player {
  width: 190px;
  height: 214px;
  grid-template-rows: 14px 86px 32px 42px;
  gap: 7px;
  padding: 12px 12px 13px;
  background:
    radial-gradient(circle at 22% 0%, rgba(255,255,255,0.52), transparent 42%),
    radial-gradient(circle at 80% 100%, rgba(76, 161, 222, 0.18), transparent 46%),
    linear-gradient(145deg, rgba(247, 251, 255, 0.34), rgba(218, 232, 247, 0.16)),
    rgba(238, 247, 255, 0.12);
  border-color: rgba(255,255,255,0.42);
  box-shadow:
    0 24px 54px rgba(7, 14, 28, 0.18),
    0 8px 22px rgba(7, 14, 28, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.44),
    inset 0 -1px 0 rgba(68, 89, 112, 0.07);
  backdrop-filter: blur(46px) saturate(104%) brightness(1.1);
  -webkit-backdrop-filter: blur(46px) saturate(104%) brightness(1.1);
}

.music-mini-cover {
  box-shadow:
    0 12px 24px rgba(12, 24, 40, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.music-mini-copy strong {
  color: rgba(16, 24, 38, 0.9);
  font-weight: 820;
}

.music-mini-copy span {
  color: rgba(66, 79, 98, 0.72);
}

.music-mini-controls {
  width: 100%;
  height: 42px;
  align-self: end;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  justify-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(230,242,253,0.14)),
    rgba(104, 166, 218, 0.10);
  border: 1px solid rgba(255,255,255,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 8px 18px rgba(13, 27, 44, 0.08);
  backdrop-filter: blur(18px) saturate(110%);
  -webkit-backdrop-filter: blur(18px) saturate(110%);
}

.music-mini-btn {
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(22, 36, 54, 0.82);
  box-shadow: none;
  font-size: 17px;
}

.music-mini-btn:hover {
  background: rgba(255,255,255,0.22);
}

.music-mini-btn--play {
  width: 36px;
  height: 36px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(88, 181, 240, 0.9), rgba(31, 132, 209, 0.9));
  border: 1px solid rgba(255,255,255,0.36);
  box-shadow:
    0 8px 16px rgba(35, 128, 202, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.music-mini-btn--play:hover {
  background:
    linear-gradient(180deg, rgba(96, 190, 246, 0.92), rgba(34, 139, 216, 0.92));
}

/* =============================================================
   DISK APPLICATIONS + SYSTEM SETTINGS PANEL
   ============================================================= */

.fw-app-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 10px 14px rgba(18, 31, 48, 0.16));
  transition: transform 0.16s ease, filter 0.16s ease;
}

.fw-file:hover .fw-app-icon {
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 12px 18px rgba(18, 31, 48, 0.22));
}

.fw-app-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 18px;
}

.fw-app-icon > span {
  font-size: 28px;
  line-height: 1;
}

.fw-app-icon--blue {
  background: linear-gradient(180deg, #6fc7ff, #237ed1);
}

.fw-app-icon--gray,
.fw-app-icon--silver {
  background: linear-gradient(180deg, #f3f6fa, #b6c4d5);
}

.fw-app-icon--sky {
  background: linear-gradient(180deg, #eef8ff, #9ed8ff);
}

.fw-app-icon--paper {
  background: linear-gradient(180deg, #fffdf5, #e4eaf2);
}

.fw-app-icon--purple {
  background: linear-gradient(180deg, #dcc8ff, #7b6fd7);
}

.fw-file[data-app-action="textedit"] .fw-file-icon {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,251,0.92)) !important;
  border-color: rgba(126, 149, 174, 0.24);
  box-shadow:
    0 10px 16px rgba(18, 31, 48, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.9);
  filter: drop-shadow(0 8px 12px rgba(18, 31, 48, 0.10));
}

.fw-file[data-app-action="textedit"] .fw-doc-ext {
  color: #72809a;
}

.fw-file-list-row .fw-app-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  filter: drop-shadow(0 2px 3px rgba(18, 31, 48, 0.12)) !important;
}

.fw-file-list-row .fw-app-icon > span {
  font-size: 16px;
}

.fw-xl-icon-view .fw-app-icon {
  width: 86px !important;
  height: 86px !important;
  border-radius: 20px !important;
}

.fw-xl-icon-view .fw-app-icon > span {
  font-size: 42px;
}

.system-settings-content {
  padding: 0 !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.76), transparent 34%),
    linear-gradient(180deg, rgba(248,251,255,0.98), rgba(234,241,249,0.98)) !important;
}

.system-settings-panel {
  min-height: 100%;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  color: #1d2737;
}

.system-settings-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 8px;
  background:
    linear-gradient(180deg, rgba(219,231,244,0.92), rgba(200,214,231,0.88));
  border-right: 1px solid rgba(122, 145, 169, 0.36);
}

.system-settings-search {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 4px;
  border-radius: 8px;
  color: #8a95a6;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(132, 153, 176, 0.24);
}

.system-settings-item {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 32px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border-radius: 8px;
  color: #344255;
  font-size: 12.5px;
}

.system-settings-item:hover {
  background: rgba(255,255,255,0.34);
}

.system-settings-item:focus-visible {
  outline: 2px solid rgba(67, 143, 216, 0.38);
  outline-offset: 2px;
}

.system-settings-item span {
  display: grid;
  place-items: center;
  font-size: 15px;
}

.system-settings-item strong {
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-settings-item.is-active {
  color: #fff;
  background: linear-gradient(180deg, #57a8f3, #2f83d4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
}

.system-settings-detail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  animation: systemDetailIn 0.18s ease both;
}

@keyframes systemDetailIn {
  from { opacity: 0.72; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.system-device-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-bottom: 2px;
}

.system-hero-card,
.system-storage-card,
.system-network-header {
  border: 1px solid rgba(134, 154, 178, 0.20);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,251,255,0.58));
  box-shadow:
    0 14px 30px rgba(18, 31, 48, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.84);
}

.system-hero-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
  padding: 15px;
}

.system-hero-card .system-device-icon {
  width: 42px;
  height: 38px;
  border-radius: 12px;
  font-size: 21px;
}

.system-device-icon {
  width: 54px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(218,231,245,0.74));
  border: 1px solid rgba(126, 149, 174, 0.24);
  box-shadow: 0 12px 26px rgba(17, 31, 48, 0.10);
}

.system-kicker {
  color: #6d7b8d;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.system-device-card h2 {
  margin: 2px 0 3px;
  color: #182235;
  font-size: 24px;
  line-height: 1.08;
}

.system-hero-card h2 {
  margin: 2px 0 3px;
  color: #182235;
  font-size: 21px;
  line-height: 1.08;
}

.system-device-card p,
.system-hero-card p,
.system-network-header p {
  margin: 0;
  color: #617086;
  font-size: 12.5px;
  line-height: 1.36;
}

.system-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 9px;
}

.system-info-card,
.system-status-list {
  border: 1px solid rgba(134, 154, 178, 0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.68);
}

.system-info-card {
  display: grid;
  gap: 5px;
  padding: 11px;
}

.system-info-card span {
  color: #718096;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.system-info-card strong {
  color: #1d2737;
  font-size: 12.5px;
  line-height: 1.28;
}

.system-status-list {
  overflow: hidden;
}

.system-status-list div {
  min-height: 39px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(134, 154, 178, 0.16);
}

.system-status-list div:last-child {
  border-bottom: 0;
}

.system-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fcf63;
  box-shadow: 0 0 0 3px rgba(47,207,99,0.16);
}

.system-status-list strong {
  color: #253247;
  font-size: 13px;
}

.system-status-list em {
  color: #68778d;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.system-storage-panel,
.system-network-panel {
  gap: 10px;
}

.system-storage-card {
  padding: 16px;
}

.system-storage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.system-storage-head h2,
.system-network-header h2 {
  margin: 2px 0 0;
  color: #172033;
  font-size: 22px;
  line-height: 1.08;
}

.system-storage-head strong {
  flex: 0 0 auto;
  color: #2c79d8;
  font-size: 13px;
  font-weight: 900;
}

.system-storage-bar {
  height: 28px;
  display: flex;
  overflow: hidden;
  border-radius: 8px;
  background: #dfe7f0;
  border: 1px solid rgba(111, 132, 157, 0.26);
  box-shadow:
    inset 0 1px 2px rgba(30, 45, 64, 0.12),
    0 1px 0 rgba(255,255,255,0.84);
}

.system-storage-segment {
  min-width: 2px;
}

.system-storage-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  color: #67758a;
  font-size: 11px;
  font-weight: 800;
}

.system-storage-list,
.system-network-list {
  overflow: hidden;
  border: 1px solid rgba(134, 154, 178, 0.20);
  border-radius: 14px;
  background: rgba(255,255,255,0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
}

.system-storage-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(134, 154, 178, 0.14);
}

.system-storage-row:last-child {
  border-bottom: 0;
}

.system-storage-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.62);
}

.system-storage-row strong,
.system-network-row strong {
  min-width: 0;
  overflow: hidden;
  color: #223047;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-storage-row em,
.system-network-row em {
  color: #6d7a8e;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.system-network-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
}

.system-network-switch {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(180deg, #6dc8ff, #2c86de);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.44),
    0 8px 18px rgba(44, 134, 222, 0.20);
}

.system-network-row {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(134, 154, 178, 0.14);
  background: transparent;
  cursor: default;
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.system-network-row:last-child {
  border-bottom: 0;
}

.system-network-row:hover {
  background: rgba(255,255,255,0.48);
  box-shadow: inset 3px 0 0 rgba(45, 142, 230, 0.36);
}

.system-network-row.is-connected {
  background: rgba(67, 151, 232, 0.12);
}

.system-network-row.is-connected:hover {
  background: rgba(67, 151, 232, 0.16);
}

.system-network-row.is-connected em {
  color: #2677c9;
}

.system-network-bars {
  height: 18px;
  display: flex;
  align-items: end;
  gap: 2px;
}

.system-network-bars span {
  width: 4px;
  border-radius: 4px;
  background: rgba(110, 127, 148, 0.26);
}

.system-network-bars span:nth-child(1) { height: 6px; }
.system-network-bars span:nth-child(2) { height: 9px; }
.system-network-bars span:nth-child(3) { height: 13px; }
.system-network-bars span:nth-child(4) { height: 17px; }

.system-network-bars .is-on {
  background: #2d8ee6;
}

.system-network-lock {
  color: #8090a5;
  font-size: 11px;
  text-align: right;
}

@media (max-width: 680px) {
  .system-settings-panel {
    grid-template-columns: 1fr;
  }

  .system-settings-menu {
    display: none;
  }

  .system-info-grid {
    grid-template-columns: 1fr;
  }

  .system-storage-meta {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   MINI PLAYER - FINAL GLASS CONTROL POLISH
   ============================================================= */

.music-mini-player {
  width: 188px !important;
  height: 208px !important;
  grid-template-rows: 14px 86px 42px 34px !important;
  gap: 7px !important;
  padding: 12px 12px 16px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255,255,255,0.42), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,0.24), rgba(228,239,251,0.10)),
    rgba(235, 245, 255, 0.12) !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
  box-shadow:
    0 22px 46px rgba(8, 15, 30, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
  backdrop-filter: blur(42px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(42px) saturate(118%) !important;
}

.music-mini-controls {
  width: calc(100% - 4px) !important;
  height: 34px !important;
  align-self: start !important;
  grid-template-columns: 1fr 34px 1fr !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  border-radius: 19px !important;
  transform: translateY(-3px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)),
    rgba(225, 239, 252, 0.10) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 8px 18px rgba(8, 18, 32, 0.08) !important;
  overflow: visible !important;
  backdrop-filter: blur(22px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(118%) !important;
}

.music-mini-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  color: rgba(20, 31, 48, 0.78) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.music-mini-btn:hover {
  background: rgba(255,255,255,0.18) !important;
  transform: translateY(-1px);
}

.music-mini-btn--play {
  width: 34px !important;
  height: 34px !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(82, 178, 238, 0.92), rgba(33, 139, 216, 0.92)) !important;
  border: 1px solid rgba(255,255,255,0.34) !important;
  box-shadow:
    0 8px 16px rgba(27, 122, 196, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.34) !important;
}

.music-mini-btn--play:hover {
  background: linear-gradient(180deg, rgba(89, 185, 244, 0.94), rgba(37, 145, 222, 0.94)) !important;
}

/* =============================================================
   MINI PLAYER - SQUARED IOS TILE FIX
   ============================================================= */

.music-mini-player {
  width: 166px !important;
  height: 190px !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  grid-template-rows: 12px 72px 34px 30px !important;
  gap: 6px !important;
  padding: 10px 12px 12px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)),
    rgba(236, 246, 255, 0.08) !important;
  border: 1px solid rgba(255,255,255,0.36) !important;
  box-shadow:
    0 18px 38px rgba(8, 15, 30, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.34) !important;
  backdrop-filter: blur(44px) saturate(122%) !important;
  -webkit-backdrop-filter: blur(44px) saturate(122%) !important;
}

.music-mini-traffic {
  height: 12px !important;
  gap: 6px !important;
  padding-left: 0 !important;
}

.music-mini-dot {
  width: 8px !important;
  height: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 1px 2px rgba(0,0,0,0.12) !important;
}

.music-mini-cover {
  width: 72px !important;
  height: 72px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  box-shadow: 0 9px 18px rgba(8, 18, 32, 0.12) !important;
}

.music-mini-copy {
  height: 34px !important;
  align-self: start !important;
  align-content: center !important;
  gap: 2px !important;
}

.music-mini-copy strong {
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
}

.music-mini-copy span {
  font-size: 10px !important;
  line-height: 1.1 !important;
  color: rgba(63, 76, 95, 0.72) !important;
}

.music-mini-controls {
  width: 118px !important;
  height: 30px !important;
  align-self: start !important;
  justify-self: center !important;
  grid-template-columns: 26px 30px 26px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
    rgba(223, 238, 252, 0.08) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24) !important;
  overflow: hidden !important;
}

.music-mini-btn {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: rgba(22, 32, 48, 0.78) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

.music-mini-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  transform: none !important;
}

.music-mini-btn--play {
  width: 30px !important;
  height: 30px !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(78, 177, 238, 0.94), rgba(31, 137, 216, 0.94)) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow:
    0 6px 12px rgba(28, 120, 196, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

.music-mini-btn--play:hover {
  background: linear-gradient(180deg, rgba(82, 184, 246, 0.96), rgba(34, 145, 224, 0.96)) !important;
}

/* =============================================================
   LIVE GIF VIEWER
   ============================================================= */

.about-gif-thumb {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(235, 244, 255, 0.64);
  border: 1px solid rgba(126, 149, 174, 0.26);
  box-shadow:
    0 10px 18px rgba(18, 31, 48, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.78);
}

.about-gif-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gif-viewer-window {
  min-width: 390px;
  min-height: 330px;
  background: rgba(232, 241, 250, 0.92) !important;
}

.gif-toolbar {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  background:
    linear-gradient(180deg, rgba(251,253,255,0.72), rgba(218,231,246,0.64));
  border-bottom: 1px solid rgba(126, 149, 174, 0.22);
  backdrop-filter: blur(16px) saturate(1.14);
}

.gif-tool-btn {
  min-width: 50px;
  height: 24px;
  padding: 0 11px;
  border-radius: 8px;
  color: #405169;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(112, 133, 158, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 5px 12px rgba(24, 41, 66, 0.06);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.gif-tool-btn:hover {
  background: rgba(255,255,255,0.62);
  transform: translateY(-1px);
}

.gif-tool-btn:focus {
  outline: none;
}

.gif-tool-btn:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 0 0 2px rgba(75, 156, 226, 0.28);
}

.gif-tool-btn.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(89, 169, 240, 0.96), rgba(45, 130, 212, 0.96));
  border-color: rgba(31, 111, 190, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 7px 16px rgba(45, 130, 212, 0.2);
}

.gif-viewer-body {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.72), transparent 30%),
    linear-gradient(145deg, rgba(247,251,255,0.9), rgba(213,227,244,0.82));
}

.gif-stage {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --gif-bg: url("assets/imagegif.gif");
  position: relative;
  width: min(100%, 370px);
  height: min(100%, 300px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  background: rgba(234, 243, 252, 0.28);
  border: 1px solid rgba(125, 149, 176, 0.28);
  box-shadow:
    0 22px 50px rgba(18, 31, 48, 0.16),
    0 0 0 1px rgba(255,255,255,0.34),
    inset 0 1px 0 rgba(255,255,255,0.82);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: zoom-in;
}

.gif-stage::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -2;
  background: var(--gif-bg) center / cover no-repeat;
  filter: blur(18px) saturate(1.18);
  opacity: 0.34;
  transform: scale(1.08);
}

.gif-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36), rgba(224,236,249,0.26)),
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.28), transparent 32%);
}

.gif-viewer-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 16px;
  box-shadow:
    0 14px 30px rgba(19, 35, 58, 0.16),
    0 0 0 1px rgba(255,255,255,0.4);
  transform: scale(0.96);
  transition: width 0.2s ease, height 0.2s ease, transform 0.2s ease, border-radius 0.2s ease;
}

.gif-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.32), transparent 28%);
  mix-blend-mode: screen;
}

.gif-fill .gif-viewer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  transform: scale(1);
}

.gif-glow .gif-stage {
  box-shadow:
    0 26px 58px rgba(60, 145, 220, 0.25),
    0 0 0 1px rgba(92, 176, 245, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

.gif-zoomed .gif-viewer-img {
  transform: scale(1.12);
}

.gif-zoomed .gif-stage {
  cursor: zoom-out;
}

/* =============================================================
   FINAL CONTROL HITBOX + IMAGE VIEWER POLISH
   ============================================================= */

.fw-titlebar {
  z-index: 12 !important;
}

.fw-controls {
  gap: 6px !important;
  padding: 0 3px;
  z-index: 40 !important;
}

.fw-btn {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  padding: 0 !important;
  border: 0 !important;
  transition: filter 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.fw-btn:hover {
  filter: brightness(0.96) saturate(1.12) !important;
  transform: scale(1.04);
}

.fw-btn:active {
  filter: brightness(0.88) saturate(1.08) !important;
  transform: scale(0.94);
}

.fw-btn:focus {
  outline: none;
}

.window-resize-handle {
  z-index: 3 !important;
}

.window-resize-n {
  top: -2px !important;
  left: 24px !important;
  right: 24px !important;
  height: 4px !important;
}

.window-resize-e {
  right: -4px !important;
  width: 8px !important;
}

.window-resize-w {
  left: -4px !important;
  width: 8px !important;
}

.window-resize-s {
  bottom: -5px !important;
  height: 10px !important;
}

.window-resize-ne,
.window-resize-nw {
  top: -3px !important;
  width: 10px !important;
  height: 10px !important;
}

.window-resize-nw {
  left: -3px !important;
}

.window-resize-ne {
  right: -3px !important;
}

.window-resize-se,
.window-resize-sw {
  width: 16px !important;
  height: 16px !important;
}

.window-resize-se {
  right: -6px !important;
  bottom: -6px !important;
}

.window-resize-sw {
  left: -6px !important;
  bottom: -6px !important;
}

.music-mini-controls {
  width: 108px !important;
  height: 28px !important;
  grid-template-columns: 22px 28px 22px !important;
  gap: 6px !important;
  padding: 0 7px !important;
  border-radius: 15px !important;
  overflow: visible !important;
}

.music-mini-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.music-mini-btn--play {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 13px !important;
}

.about-imageviewer-thumb {
  width: 52px;
  height: 52px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(245,250,255,0.95), rgba(211,228,245,0.82));
  border: 1px solid rgba(116, 143, 172, 0.26);
  box-shadow:
    0 10px 18px rgba(18, 31, 48, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.78);
}

.about-imageviewer-thumb img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.about-imageviewer-fallback {
  position: absolute;
  inset: 9px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.82), transparent 34%),
    linear-gradient(145deg, rgba(71, 181, 237, 0.95), rgba(40, 122, 212, 0.92));
}

.about-imageviewer-fallback::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 9px;
  height: 12px;
  border-radius: 3px 3px 7px 7px;
  background:
    linear-gradient(135deg, transparent 0 32%, rgba(255,255,255,0.94) 33% 48%, transparent 49%),
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(220,244,255,0.72));
}

.about-imageviewer-fallback::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
}

.gif-viewer-window {
  background: rgba(232, 241, 250, 0.9) !important;
}

.gif-tool-btn {
  min-width: 48px !important;
}

.gif-fill .gif-viewer-img,
.gif-viewer-window.gif-fill .gif-viewer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  transform: scale(1);
}

.gif-filter-1 .gif-stage {
  box-shadow:
    0 26px 58px rgba(60, 145, 220, 0.25),
    0 0 0 1px rgba(92, 176, 245, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

.gif-filter-1 .gif-viewer-img {
  filter: saturate(1.22) contrast(1.04);
}

.gif-filter-2 .gif-viewer-img {
  filter: sepia(0.22) saturate(1.08) contrast(1.03);
}

.gif-filter-3 .gif-viewer-img {
  filter: hue-rotate(24deg) saturate(1.28) brightness(1.02);
}

.gif-filter-4 .gif-viewer-img {
  filter: grayscale(0.22) contrast(1.12) brightness(1.04);
}

.gif-filter-5 .gif-viewer-img {
  filter: saturate(0.9) contrast(1.18) brightness(0.96);
}

.gif-viewer-img {
  filter: none;
}
/* =============================================================
   CLEAN IMAGE VIEWER APP ICON
   Makes Image Viewer look like a real app icon in About Me.
   ============================================================= */

.about-app-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(206,226,244,0.9));
  border: 1px solid rgba(90, 120, 155, 0.26);
  box-shadow:
    0 8px 16px rgba(18, 31, 48, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -10px 18px rgba(90,130,170,0.14);
}

.about-app-icon__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 44%, transparent 45%),
    radial-gradient(circle at 26% 18%, rgba(255,255,255,0.62), transparent 34%);
  pointer-events: none;
}

.about-app-icon__photo {
  position: relative;
  width: 34px;
  height: 28px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, #8ed7ff 0%, #4aa6e8 58%, #2874c9 100%);
  border: 1px solid rgba(35, 80, 130, 0.24);
  box-shadow:
    0 2px 5px rgba(18,31,48,0.18),
    inset 0 1px 0 rgba(255,255,255,0.58);
}

.about-app-icon__sun {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff6a8;
  box-shadow: 0 0 8px rgba(255,246,168,0.8);
}

.about-app-icon__mountain {
  position: absolute;
  bottom: -1px;
  width: 24px;
  height: 17px;
  transform: rotate(45deg);
  border-radius: 3px;
}

.about-app-icon__mountain--one {
  left: 2px;
  background: linear-gradient(135deg, #ffffff 0%, #dff1ff 45%, #8ab7df 100%);
}

.about-app-icon__mountain--two {
  right: -5px;
  bottom: -3px;
  background: linear-gradient(135deg, #e8f7ff 0%, #9ac8e9 55%, #5d92c2 100%);
}

/* Make it flush in Finder list view */
.fw-file-list-row .about-app-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.fw-file-list-row .about-app-icon__photo {
  width: 17px !important;
  height: 14px !important;
  border-radius: 3px !important;
}

.fw-file-list-row .about-app-icon__sun {
  width: 4px !important;
  height: 4px !important;
  top: 3px !important;
  right: 3px !important;
}

.fw-file-list-row .about-app-icon__mountain {
  width: 12px !important;
  height: 9px !important;
}

/* Large icon view support */
.fw-xl-icon-view .about-app-icon {
  width: 86px !important;
  height: 86px !important;
  border-radius: 22px !important;
}

.fw-xl-icon-view .about-app-icon__photo {
  width: 56px !important;
  height: 46px !important;
  border-radius: 9px !important;
}