:root{
  --ink:#131313;
  --window:#fcfbf7;
  --shadow:0 8px 28px rgba(0,0,0,.12);
  --accent:#00ADEF;
  --accent-ink:#052430;

  /* Taskbar themes */
  --tb-bg-dark:#0A1C24;
  --tb-border-dark:#00ADEF;
  --tb-text-dark:#E0E8EA;
  --tb-time-dark:#E0F6FF;

  /* Window bar theme (new) */
  --bar-bg-1:#0A1C24;   /* darker teal */
  --bar-bg-2:#1f4754;   /* subtle gradient */
  --bar-title:#eaf6fb;
  --bar-btn-bg:rgba(255,255,255,.08);
  --bar-btn-bd:rgba(255,255,255,.18);

  /* Icon sizing – your tuned values */
  --icon-footprint-w: 112px;
  --icon-tile: 48px;
  --icon-art: 44px;
  --icon-gap: 4px;
  --icon-label-size: 13px;
  --icon-row-step: 82px;

  --taskbar-h: 46px;
  /* Safe areas for mobile browsers (iOS/Android) */
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* WALLPAPER LAYER so we can grayscale it in lazy mode */

body { position: relative; }
/* WALLPAPER LAYER */
.wallpaper-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.wallpaper-layer .wallpaper-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
body.lazy-mode .wallpaper-layer{
  filter: grayscale(1) saturate(0) contrast(1.05) !important;
  -webkit-filter: grayscale(1) saturate(0) contrast(1.05) !important;
  will-change: filter;
}
.lazy-mode .wallpaper-img{ /* ensure image itself greyscales across browsers */
  filter: grayscale(1) saturate(0) contrast(1.05) !important;
  -webkit-filter: grayscale(1) saturate(0) contrast(1.05) !important;
}
html.lazy-mode .wallpaper-layer{ filter: grayscale(1) saturate(0) contrast(1.05) !important; }
html.lazy-mode .wallpaper-layer .wallpaper-img{ filter: grayscale(1) saturate(0) contrast(1.05) !important; }
.wallpaper-layer.lazy-on{
  filter: grayscale(1) saturate(0) contrast(1.05) !important;
  -webkit-filter: grayscale(1) saturate(0) contrast(1.05) !important;
}

/* when Lazy Mode is on, wallpaper turns B/W */


/* base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:linear-gradient(180deg,#0f2630,#163945 40%, #1a4756);
  background-position:center; background-size:cover; background-repeat:no-repeat;
}

/* ===== Desktop canvas ===== */
.desktophud{ position:fixed; inset:0; }
.desktop-area{ position:absolute; inset:0 0 var(--taskbar-h) 0; }

/* ===== Desktop icons ===== */
.desktop-icon{
  position:absolute;
  width:var(--icon-footprint-w);
  display:flex; flex-direction:column; align-items:center;
  cursor:grab; user-select:none; z-index:25; text-align:center;
}
.desktop-icon .tile{ width:var(--icon-tile); height:var(--icon-tile); display:flex; align-items:center; justify-content:center; }
.desktop-icon .tile img{ width:var(--icon-art); height:var(--icon-art); display:block; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-select:none; }
.desktop-icon .label{
  margin-top:var(--icon-gap);
  font-size:var(--icon-label-size);
  line-height:1.2;          /* avoid clipping */
  font-weight:400;          /* softer */
  color:#f0f6fb;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  max-width:var(--icon-footprint-w);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-bottom:2px;       /* descender safety */
}
.desktop-icon .tile:hover img{ filter: drop-shadow(0 0 4px rgba(0,255,255,.25)); transform: translateY(-1px); transition: .12s ease; }

/* ===== Windows ===== */
.window{
  position:absolute; min-width:360px; max-width:min(96vw,1200px);
  background:var(--window); border:1px solid rgba(255,255,255,.22); border-radius:12px; box-shadow:var(--shadow);
  z-index:50;
}
.window.hidden{ display:none; }
.titlebar{
  height:40px;
  background:linear-gradient(var(--bar-bg-1), var(--bar-bg-2));
  border-bottom:1px solid rgba(0,0,0,.25);
  border-radius:12px 12px 0 0;
  display:flex; align-items:center; gap:8px; padding:0 10px; cursor:grab; user-select:none;
}
.titlebar:active{ cursor:grabbing; }
.titlebar .title{ font-weight:700; letter-spacing:.2px; color:var(--bar-title); }
.window .content{ padding:14px; background:var(--window); border-radius:0 0 12px 12px; max-height:calc(100vh - 110px); overflow:auto; overscroll-behavior:contain; }
@media (max-width: 768px){
  .window .content{ max-height:calc(100dvh - 110px); }
}
.btns{ margin-left:auto; display:flex; gap:6px; }
.wbtn{
  width:28px; height:28px; display:grid; place-items:center;
  border:1px solid var(--bar-btn-bd); border-radius:8px;
  background:var(--bar-btn-bg); color:#ecf4f7; font-weight:700; cursor:pointer;
  backdrop-filter: blur(2px);
}
.wbtn:hover{ background:rgba(255,255,255,.14); }

/* Sections & buttons */
.section-heading{ margin:8px 0 10px; font-size:18px; }
.cta, .cta:link, .cta:visited{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none;
  border:1px solid transparent; transition: .18s ease; cursor:pointer;
}
.cta.primary{
  background:#0A1C24; color:#E0F6FF; border-color:#0A1C24; box-shadow:none;
}
.cta.primary:hover{ filter:brightness(1.03); }
/* soft, neutral button for light panels */
.cta.soft{
  background:#f1f5f6; border:1px solid rgba(0,0,0,.15); color:#0A1C24; box-shadow:none;
}
.cta.soft:hover{ background:#e8eef1; }
.cta.small{ padding:8px 12px; font-size:14px; }
.hint{ color:#7d8b92; font-size:12px; margin-top:8px; }
.setlists iframe, .setlists audio{ width:100%; margin:10px 0; border-radius:8px; overflow:hidden; }

.setlists .hint a{
  color:#0A1C24;
  text-decoration: underline;
}
.setlists .hint a:hover{
  opacity:.8;
}

/* Past events */
.past-events{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px; }
.event-card{ display:flex; gap:10px; border:1px solid rgba(0,0,0,.12); border-radius:10px; background:#f7fafb; overflow:hidden; }
.event-card .thumb{ width:96px; height:96px; object-fit:cover; flex:0 0 96px; }
.event-card .meta{ padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.event-card .name{ font-weight:700; }
.event-card .date{ color:#7d8b92; font-size:12px; }
.event-card .videos{ display:grid; gap:8px; margin-top:6px; }
.event-card .vid{ width:100%; aspect-ratio:16/9; border:0; border-radius:8px; overflow:hidden; }

/* Media grid inside events folders */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
.media-tile.video .play{ width:44px; height:44px; font-size:20px; }
@media (max-width: 768px){
  .media-grid{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:8px; }
  .media-tile.video .play{ width:36px; height:36px; font-size:18px; }
}
.media-tile{ position:relative; background:#0A1C24; border-radius:8px; overflow:hidden; aspect-ratio:16/9; display:grid; place-items:center; cursor:pointer; }
.media-tile img{ width:100%; height:100%; object-fit:cover; }
.media-tile.video .play{ position:absolute; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; color:#fff; font-size:24px; box-shadow:0 4px 10px rgba(0,0,0,.25); }
.media-tile.video .label{ position:absolute; bottom:6px; left:8px; right:8px; color:#eaf6fb; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.45); font-size:13px; }

/* About tabs */
.tabs{ display:flex; flex-direction:column; gap:10px; }
.tabbar{ display:flex; gap:8px; flex-wrap:wrap; }
.tabbtn{ border:1px solid rgba(0,0,0,.15); background:#f1f5f6; color:#0A1C24; padding:6px 12px; border-radius:12px; cursor:pointer; font-weight:700; }
.tabbtn.active{ background:#0A1C24; color:#E0F6FF; border-color:#0A1C24; }
.tabpanes{ position:relative; }
.tabpane{ display:none; }
.tabpane.active{ display:block; }

/* Clipboard textarea */
.clip{
  width:100%;
  min-height:140px;
  font-size:14px;
  padding:8px;
}

/* Sticky notes */
.sticky{
  position:absolute; width:240px; min-height:170px; padding:12px 12px 14px;
  background:linear-gradient(180deg,#fff7b0,#fff19a 60%, #ffe97a);
  border:1px solid #d5cf8b; border-radius:8px; box-shadow:0 10px 22px rgba(0,0,0,.22);
  z-index:40; cursor:grab;
}
.sticky::before{ /* tape strip */
  content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-1deg);
  width:60%; height:14px; background:rgba(255,255,200,.7);
  border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.12) inset;
}
.sticky::after{ /* subtle dog-ear */
  content:""; position:absolute; right:6px; top:6px; width:14px; height:14px;
  background:linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0) 70%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity:.6;
}
.sticky .shead{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.sticky .sdrag{ width:100%; height:8px; background:rgba(0,0,0,.08); border-radius:4px; cursor:grab; }
.sticky .sdel{ margin-left:auto; border:0; background:transparent; font-size:16px; cursor:pointer; }
.sticky .sbody{ white-space:pre-wrap; line-height:1.25; }

/* ===== Taskbar ===== */
.taskbar.dark{
  position:fixed; left:0; right:0; bottom:0; height:var(--taskbar-h);
  background:var(--tb-bg-dark);
  border-top:1px solid var(--tb-border-dark);
  display:flex; align-items:center; padding:4px 12px; gap:16px;
  color:var(--tb-text-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size:14px;
}
.start-btn{ display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; cursor:pointer; user-select:none; border-radius:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
.start-btn:active{ filter:brightness(.95); }
.system-tray{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.system-tray .icon{ font-size:16px; opacity:.95; }
.clock{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; font-size:13px; }
.taskbar.dark .clock{ color:var(--tb-time-dark); }

/* Lazy mode – dramatic B/W (iframes like SoundCloud cannot be filtered by CSS) */
body.lazy-mode{
  /* Force entire UI grayscale and swap background gradient to neutral */
  filter: grayscale(1) contrast(1.1) brightness(0.98);
  -webkit-filter: grayscale(1) contrast(1.1) brightness(0.98);
  background: linear-gradient(180deg,#1a1a1a,#273136 40%, #2f3b43) !important;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}

/* Responsive */
@media (max-width: 768px){
  :root{
    --icon-footprint-w: 104px;
    --icon-tile: 44px;
    --icon-art: 40px;
    --icon-row-step: 76px;
    --icon-label-size: 12.5px;
  }
  /* Align tighter to left on mobile */
  .desktop-icon{ align-items:flex-start; }
  .desktop-icon .tile{ justify-content:flex-start; }
  .desktop-icon .label{ text-align:left; }
}

/* ===== Explorer (Recycle Bin) ===== */
.explorer{ display:flex; flex-direction:column; gap:10px; }
.explorer-toolbar{
  background:linear-gradient(var(--bar-bg-1), var(--bar-bg-2));
  color:var(--bar-title);
  border:1px solid rgba(0,0,0,.25);
  border-radius:8px;
  padding:8px 10px;
  font-weight:600;
}
.folder-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.folder-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; height:120px; border:1px solid rgba(0,0,0,.12); border-radius:10px;
  background:#f7fafb; cursor:pointer; user-select:none;
  transition: box-shadow .15s ease, transform .06s ease;
}
.folder-item:hover{ box-shadow:0 6px 16px rgba(0,0,0,.12); }
.folder-item:active{ transform: translateY(1px); }
.folder-item .icon{ font-size:38px; line-height:1; }
.folder-item .name{ font-weight:600; color:#0A1C24; }
.folder-item .icon img{ width:36px; height:36px; object-fit:contain; }

/* Settings toggle switch */
.switch{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.switch input{ position:absolute; left:-9999px; }
.switch .track{
  width:48px; height:26px; border-radius:26px; border:1px solid rgba(10,28,36,.25);
  background:#dbe6ea; position:relative; box-shadow: inset 0 2px 6px rgba(0,0,0,.12);
  transition: background .2s ease, border-color .2s ease;
}
.switch .thumb{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:white; box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.switch input:checked + .track{ background:linear-gradient(180deg, var(--accent), #0096c9); border-color:#007aa6; }
.switch input:checked + .track .thumb{ transform: translateX(22px); }

.file-list{ margin-top:6px; border:1px solid rgba(0,0,0,.12); border-radius:8px; overflow:hidden; }
.file-row{ display:grid; grid-template-columns:28px 1fr 120px; gap:8px; align-items:center; padding:8px 10px; }
.file-row:nth-child(odd){ background:#f9fbfc; }
.file-row .icon{ text-align:center; }
.explorer-toolbar a{ color:var(--bar-title); text-decoration:underline; cursor:pointer; }

/* Lightbox */
#lb-overlay{ position:fixed; inset:0; z-index:9999; display:none; }
#lb-overlay .lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); }
#lb-overlay .lb-body{ position:absolute; inset:4% 4%; display:grid; place-items:center; overflow:auto; }
#lb-overlay .lb-content{ width:min(80vw, 1200px); height:min(80vh, 85dvh); display:grid; place-items:center; }
#lb-overlay .lb-img{ width:100%; height:100%; object-fit:contain; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.4); }
#lb-overlay .lb-actions{ position:absolute; top:10px; right:12px; display:flex; gap:8px; z-index:2; }
#lb-overlay .lb-btn{ width:36px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.45); color:#fff; font-size:18px; display:grid; place-items:center; cursor:pointer; }
#lb-overlay .lb-btn:hover{ background:rgba(0,0,0,.6); }
#lb-overlay .lb-prev, #lb-overlay .lb-next{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:60px; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.35); border-radius:8px; cursor:pointer; z-index:2; }
#lb-overlay .lb-prev{ left:12px; }
#lb-overlay .lb-next{ right:12px; }
#win-events{ width:min(98vw,1400px); max-width:min(98vw,1400px); }

@media (max-width: 768px){
  #lb-overlay .lb-content{ width:min(96vw, 1000px); height:min(90vh, 92dvh); }
}
/* Turntable */
.turntable{ position:relative; display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:center; padding:8px 0; }
.deck{ position:relative; width:320px; height:240px; background:linear-gradient(#232d33,#1b2429); border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.3), inset 0 0 8px rgba(255,255,255,.06); display:grid; place-items:center; }
.platter{ width:220px; height:220px; border-radius:50%; background:conic-gradient(from 0deg, #111 0 10deg, #0e0e0e 10deg 20deg, #111 20deg 30deg, #0e0e0e 30deg 40deg, #111 40deg 50deg, #0e0e0e 50deg 60deg, #111 60deg 70deg, #0e0e0e 70deg 80deg, #111 80deg 90deg, #0e0e0e 90deg 100deg, #111 100deg 360deg); box-shadow:inset 0 0 30px rgba(0,0,0,.6); position:relative; }
.platter::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; background:#cfd5d8; border-radius:50%; transform:translate(-50%,-50%); box-shadow:inset 0 0 2px rgba(0,0,0,.35); }
.platter.droptarget{ outline:3px dashed rgba(255,255,255,.5); outline-offset:4px; }
.platter.spinning{ animation: spin 2s linear infinite; }
.spindle{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:4px; height:16px; background:#bfc6c9; border-radius:2px; }
.tonearm{ position:absolute; right:16px; top:40px; width:120px; height:18px; background:#d6dbe0; border-radius:10px; transform-origin:0 50%; transform:rotate(-28deg); box-shadow:inset 0 0 2px rgba(0,0,0,.2); transition: transform .3s ease; }
.tonearm .head{ position:absolute; right:-6px; top:50%; width:14px; height:18px; background:#222; border-radius:2px; transform:translateY(-50%); }
.tonearm.playing{ transform:rotate(-12deg); }
@keyframes spin{ to{ transform:rotate(360deg); } }
#tt-player{ width:100%; height:220px; border:0; border-radius:8px; }
.record-shelf{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.record{ width:96px; height:96px; border-radius:50%; background:conic-gradient(from 0deg, #0f0f0f 0 10deg, #0c0c0c 10deg 20deg, #0f0f0f 20deg 30deg, #0c0c0c 30deg 40deg, #0f0f0f 40deg 360deg); position:relative; cursor:grab; user-select:none; box-shadow:0 2px 8px rgba(0,0,0,.2); display:block; }
.record::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%; background:#cfd5d8; transform:translate(-50%,-50%); box-shadow:inset 0 0 2px rgba(0,0,0,.3); }
.record .title{ position:absolute; bottom:6px; left:6px; right:6px; color:#eaf6fb; background:rgba(0,0,0,.55); font-size:11px; text-align:center; padding:2px 4px; border-radius:6px; }
.record.dragging{ animation: spin .8s linear infinite; }
@media (max-width:768px){
  .turntable{ grid-template-columns:1fr; }
  #tt-player{ height:180px; }
  .deck{ width:auto; height:220px; }
  .platter{ width:180px; height:180px; justify-self:center; }
}