body {
    margin: 0;
    padding-top: 50px; /* Prevents content from being hidden behind fixed nav */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f5f7;
}

.mac-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.mac-navbar a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.mac-navbar a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.nav-left, .nav-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.logo {
    font-weight: bold;
    margin-right: 10px;
    color: #000;
}

.dock-container {
  position: fixed;
  bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;
}

.dock {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: flex-end;
  gap: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.dock-item {
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}

.dock-item img {
  width: 50px;
  height: 50px;
  display: block;
}

/* Magnification effect on hover */
.dock-item:hover {
  transform: scale(1.5) translateY(-10px);
}

.dock-divider {
  width: 1px;
  height: 40px;
  background: rgba(0, 0, 0, 0.2);
  align-self: center;
}

 :root{
    --am-bg: rgba(255,255,255,0.65);
    --am-fg: #0b0b0b;
    --am-accent: #0071e3; /* accent color */
    --am-radius: 14px;
    --am-shadow: 0 6px 18px rgba(10,10,10,0.12);
    --am-width: 340px;
    --am-height: 96px;
    --am-tab-size: 64px;
    --am-blur: 8px;
    --am-text-muted: #6b6b73;
  }

  :root{
    --am-accent: #0071e3;
    --am-bg: rgba(255,255,255,0.78);
    --am-text: #0b0b0b;
    --am-muted: #666;
    --am-shadow: 0 8px 20px rgba(10,10,10,0.12);
    --am-radius: 14px;

    /* Make the collapsed tab larger by changing this value */
    --am-tab-size: 120px;   /* <- change this to make the collapsed tab bigger/smaller */

    /* Expanded player width (will adapt on small screens) */
    --am-player-max-width: 360px;
  }

  /* base */
  * { box-sizing: border-box; }
  body { font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }

  /* container fixed at bottom-right */
  .am-root {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse; /* tab below player visually */
    align-items: flex-end;
    gap: 10px;
  }

  /* COLLAPSED TAB */
  .am-tab {
    width: var(--am-tab-size);
    height: var(--am-tab-size);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), var(--am-bg));
    box-shadow: var(--am-shadow);
    border: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
    overflow: hidden;
  }

  .am-tab .thumb {
    width: calc(var(--am-tab-size) - 26px);
    height: calc(var(--am-tab-size) - 26px);
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
  }
  .am-tab .thumb img { width:100%; height:100%; object-fit:cover; display:block; }

  .am-tab .mini-meta {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width: 0;
  }
  .am-tab .mini-title {
    font-weight:600;
    font-size:13px;
    color:var(--am-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 120px;
  }
  .am-tab .mini-artist {
    font-size:12px;
    color:var(--am-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 120px;
  }

  /* EXPANDED PLAYER */
  .am-player {
    width: min(var(--am-player-max-width), 94vw);
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--am-radius);
    background: var(--am-bg);
    box-shadow: var(--am-shadow);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden; /* ensure nothing overhangs */
  }

  .am-art {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    border-radius: 10px;
    overflow: hidden;
    background: #ddd;
  }
  .am-art img { width:100%; height:100%; object-fit:cover; display:block; }

  .am-info {
    flex:1 1 auto;
    min-width: 0; /* critical to prevent overflow of text */
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .am-title {
    font-weight:700;
    font-size:15px;
    color:var(--am-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .am-artist {
    font-size:13px;
    color:var(--am-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .am-controls {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:6px;
  }
  .am-btn {
    border:0;
    background:transparent;
    padding:6px;
    border-radius:8px;
    cursor:pointer;
  }
  .am-play {
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: white;
    border-radius:10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  }
  .am-play svg { width:18px; height:18px; }

  .am-progress {
    height:6px;
    background: rgba(0,0,0,0.06);
    border-radius:999px;
    overflow:hidden;
    margin-top:8px;
  }
  .am-fill { width:0%; height:100%; background: linear-gradient(90deg,var(--am-accent), #3fb7ff); transition:width .12s linear; }

  /* small screens adjustments */
  @media (max-width:420px){
    :root { --am-player-max-width: 320px; }
    .am-art { width:72px; height:72px; flex-basis:72px; }
    .am-tab { padding:8px; }
    .am-tab .mini-title, .am-tab .mini-artist { max-width: 80px; }
  }

  /* hidden state */
  .hidden { display:none !important; }
  
  :root{
    --w: 260px;
    --h: 320px;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(10,10,20,0.12);
    --bg-top: rgba(255,255,255,0.9);
    --caption-bg: rgba(255,255,255,0.92);
    font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  }

  .card {
    position: fixed;
    width: var(--w);
    height: var(--h);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: linear-gradient(180deg,#fbfbfc,var(--bg-top));
    border: 1px solid rgba(0,0,0,0.06);
    touch-action: none;
    z-index: 100000;
    user-select: none;
  }

  .handle {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: transparent;
    cursor: grab;
  }
  .handle:active { cursor: grabbing; }

  .title {
    font-weight: 600;
    font-size: 13px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .image-wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    height: calc(100% - 40px - 56px);
    background: #eee;
  }
  .image-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display:block;
    border-radius: 6px;
    margin: 6px;
  }

  .caption {
    height: 56px;
    padding: 10px;
    background: var(--caption-bg);
    border-top: 1px solid rgba(0,0,0,0.04);
    font-size: 13px;
    color: #111;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .caption[contenteditable="true"]{
    white-space: normal;
    outline: none;
  }
  
  :root{
    --w: 260px; --h: 320px; --radius: 12px; --shadow: 0 10px 30px rgba(10,10,20,0.12);
    --bg-top: rgba(255,255,255,0.9); --caption-bg: rgba(255,255,255,0.92);
    font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  }

  .card {
    position: fixed;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: linear-gradient(180deg,#fbfbfc,var(--bg-top));
    border: 1px solid rgba(0,0,0,0.06);
    touch-action: none;
    user-select: none;
  }
  .handle { height: 40px; display:flex; align-items:center; gap:8px; padding:8px; cursor:grab; }
  .handle:active { cursor:grabbing; }
  .title { font-weight:600; font-size:13px; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .image-wrap { display:flex; align-items:center; justify-content:center; background:#eee; }
  .image-wrap img { max-width:100%; max-height:100%; object-fit:cover; display:block; border-radius:6px; margin:6px; }
  .caption { height:56px; padding:10px; background:var(--caption-bg); border-top:1px solid rgba(0,0,0,0.04); font-size:13px; color:#111; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .caption[contenteditable="true"]{ white-space:normal; outline:none; }
  
  /* ===========================
   Retro draggable picture styles
   Paste into refreshed.css
   =========================== */

:root{
  /* retro card sizing (change per instance via JS when creating) */
  --retro-w: 260px;
  --retro-h: 320px;

  /* visual tokens */
  --retro-radius: 12px;
  --retro-shadow: 0 10px 30px rgba(10,10,20,0.12);
  --retro-bg-top: rgba(255,255,255,0.9);
  --retro-caption-bg: rgba(255,255,255,0.92);
}

/* Namespaced to avoid collisions with other site rules */
.retro-card {
  position: fixed;
  width: var(--retro-w);
  height: var(--retro-h);
  border-radius: var(--retro-radius);
  box-shadow: var(--retro-shadow);
  overflow: hidden;
  background: linear-gradient(180deg,#fbfbfc,var(--retro-bg-top));
  border: 1px solid rgba(0,0,0,0.06);
  touch-action: none;
  user-select: none;
  z-index: 100000;
}

/* Top drag handle */
.retro-card .handle {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: transparent;
  cursor: grab;
}
.retro-card .handle:active { cursor: grabbing; }

/* Title in the top chrome */
.retro-card .title {
  font-weight: 600;
  font-size: 13px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Image area */
.retro-card .image-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  height: calc(100% - 40px - 56px); /* accounts for handle + caption */
  background: #eee;
}
.retro-card .image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display:block;
  border-radius: 6px;
  margin: 6px;
}

/* Bottom caption */
.retro-card .caption {
  height: 56px;
  padding: 10px;
  background: var(--retro-caption-bg);
  border-top: 1px solid rgba(0,0,0,0.04);
  font-size: 13px;
  color: #111;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.retro-card .caption[contenteditable="true"]{
  white-space: normal;
  outline: none;
}

/* Updated retro checklist CSS — wider and fixed checkbox layering */
:root{
  --rc-width: 300px;   /* increased width (change to taste) */
  --rc-radius: 14px;
  --rc-bg: rgba(255,255,255,0.95);
  --rc-shadow: 0 12px 36px rgba(10,10,20,0.12);
  --rc-accent: #0071e3;
  --rc-muted: #6b6b73;
  --rc-gap: 10px;
  --rc-font: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

/* container anchored to right side and always shown */
.retro-checklist {
  position: fixed;
  right: 18px;
  top: 80px;
  width: var(--rc-width);
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  gap: var(--rc-gap);
  padding: 12px;
  border-radius: var(--rc-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--rc-bg));
  box-shadow: var(--rc-shadow);
  border: 1px solid rgba(0,0,0,0.06);
  font-family: var(--rc-font);
  z-index: 99999;
  overflow: auto;
  backdrop-filter: blur(6px);
}

/* header */
.retro-checklist .rc-header {
  display:flex;
  align-items:center;
  gap:10px;
}
.rc-badge {
  width:36px; height:36px;
  background: linear-gradient(180deg,#fff,#f0f5ff);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  font-weight:700; color:var(--rc-accent);
}
.rc-heading { font-weight:700; font-size:14px; color:#0b0b0b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* list */
.rc-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

/* item layout — label-based for full-clickability */
.rc-item {
  display:block;
  position: relative;
  padding: 10px 12px 10px 56px; /* more left space for larger box */
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,250,250,0.98));
  border: 1px solid rgba(0,0,0,0.04);
  font-size:14px;
  color:#111;
  cursor: pointer;
  user-select: none;
  transition: background .12s, transform .06s;
}
.rc-item:hover { transform: translateY(-1px); }

/* native checkbox invisible but clickable — placed under the visual box
   input has lower z-index; visual .rc-checkbox sits above and ignores pointer events */
.rc-item input[type="checkbox"] {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1; /* under the visual box */
}

/* visible custom box sits above the input, but doesn't intercept clicks */
.rc-checkbox {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,0.12);
  background: linear-gradient(180deg,#fff,#fafafa);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color: #fff;
  z-index: 2;                 /* above the input so checkmark is visible */
  pointer-events: none;      /* allow clicks to pass through to the input */
  transition: background .12s, border-color .12s;
}

/* checked visual state: input:checked + .rc-checkbox still works (structure: input then .rc-checkbox) */
.rc-item input[type="checkbox"]:checked + .rc-checkbox {
  background: linear-gradient(180deg,var(--rc-accent), #3fb7ff);
  border-color: transparent;
}
.rc-item input[type="checkbox"]:checked + .rc-checkbox::after {
  content: "✓";
  font-size:14px;
  line-height:1;
}

/* text */
.rc-text {
  display:block;
  margin-left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-text.small { font-size:13px; color:var(--rc-muted); }

/* footer */
.rc-footer {
  margin-top:8px;
  display:flex;
  justify-content:space-between*
}

/* small checklist override — paste after your existing checklist CSS */

:root {
  --rc-width: 280px; /* smaller overall width (was 360px) */
}

/* overall container */
.retro-checklist {
  width: var(--rc-width);
  padding: 10px;               /* a little less padding */
  gap: 8px;                    /* smaller gap between sections */
}

/* header badge slightly smaller */
.retro-checklist .rc-header { gap: 8px; }
.rc-badge { width:32px; height:32px; font-size:13px; }

/* list spacing */
.rc-list { gap: 6px; margin-top: 6px; }

/* compact item styling */
.rc-item {
  padding: 8px 10px 8px 48px;  /* left padding must leave room for checkbox */
  border-radius: 10px;
  font-size: 13px;             /* smaller text */
}

/* make visual checkbox smaller and reposition */
.rc-item input[type="checkbox"] {
  left: 16px;                  /* position relative to new padding */
  width: 20px;
  height: 20px;
}
.rc-checkbox {
  left: 12px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

/* checked mark slightly smaller */
.rc-item input[type="checkbox"]:checked + .rc-checkbox::after {
  font-size: 12px;
}

/* footer adjustments */
.rc-footer { margin-top: 6px; font-size: 12px; }

/* responsive smaller breakpoint adjust */
@media (max-width:520px){
  .retro-checklist { right:8px; top:110px; width:240px; }
  .rc-item { padding-left: 44px; }
}