/* EXTRAS */
.extras-desktop { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.win { background:var(--bg2); border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; font-family:'IBM Plex Mono',monospace; }
.win-bar { display:flex; align-items:center; justify-content:space-between; background:var(--bg3); border-bottom:1px solid var(--border); padding:7px 12px; flex-shrink:0; }
.win-title { font-size:10px; letter-spacing:.15em; color:var(--accent); text-transform:uppercase; }
.win-close { width:18px; height:18px; background:transparent; border:1px solid var(--border); color:var(--dim); font-size:11px; cursor:none; display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s; flex-shrink:0; }
.win-close:hover { background:var(--white); color:var(--bg); }
.win-body { padding:14px; flex:1; }
.draw-controls { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.draw-btn { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; border:1px solid var(--border); background:transparent; color:var(--dim); padding:3px 10px; cursor:none; transition:background .2s,color .2s; }
.draw-btn:hover { background:var(--white); color:var(--bg); }
.draw-label { font-size:10px; color:var(--dim); letter-spacing:.1em; display:flex; align-items:center; gap:6px; }
.draw-color { width:28px; height:18px; border:1px solid var(--border); background:var(--white); cursor:none; padding:0; }
.draw-size { font-size:10px; color:var(--dim); letter-spacing:.1em; display:flex; align-items:center; gap:8px; }
.draw-range { width:100px; accent-color:var(--blue); cursor:none; }
#drawCanvas { width:100%; aspect-ratio:4/3; background:#fff; display:block; cursor:crosshair; border:1px solid var(--border); }
.draw-send { width:100%; margin-top:10px; padding:10px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.15em; background:transparent; border:1px solid var(--border); color:var(--dim); cursor:none; transition:background .2s,color .2s; text-transform:uppercase; }
.draw-send:hover { background:var(--white); color:var(--bg); }
.draw-sent-msg { text-align:center; font-size:10px; color:#5a5; letter-spacing:.1em; margin-top:6px; height:16px; }
.gallery-win { display:flex; flex-direction:column; }
.gal-viewer { background:#111; position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gal-viewer canvas { max-width:100%; max-height:100%; display:block; image-rendering:pixelated; }
.gal-empty { font-size:10px; color:var(--dim); letter-spacing:.1em; text-align:center; }
.gal-nav { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-top:1px solid var(--border); }
.gal-nav-btn { border:1px solid var(--border); background:transparent; color:var(--dim); width:28px; height:28px; font-size:14px; cursor:none; display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s; }
.gal-nav-btn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.gal-counter { font-size:10px; color:var(--dim); letter-spacing:.1em; }
.gal-view-all { width:100%; padding:9px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.15em; background:transparent; border:none; border-top:1px solid var(--border); color:var(--dim); cursor:none; transition:background .2s,color .2s; text-transform:lowercase; }
.gal-view-all:hover { background:var(--bg3); color:var(--white); }
.gal-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:500; align-items:center; justify-content:center; padding:40px; }
.gal-modal.open { display:flex; }
.gal-modal-inner { background:var(--bg2); border:1px solid var(--border); width:100%; max-width:800px; max-height:80vh; display:flex; flex-direction:column; }
.gal-modal-bar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); }
.gal-modal-title { font-size:11px; letter-spacing:.15em; color:var(--accent); text-transform:uppercase; }
.gal-modal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:2px; overflow-y:auto; padding:12px; flex:1; }
.gal-thumb { aspect-ratio:4/3; background:#111; border:1px solid var(--border); overflow:hidden; cursor:none; position:relative; }
.gal-thumb canvas { width:100%; height:100%; display:block; image-rendering:pixelated; }
.gal-modal-empty { padding:40px; text-align:center; color:var(--dim); font-size:11px; letter-spacing:.1em; }

/* Spotify 4 boxes */
.spotify-win { grid-column:1/-1; }
.spotify-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.sp-box {
  background:var(--bg3); border:1px solid var(--border);
  padding:20px 22px; display:flex; flex-direction:column; gap:12px;
  cursor:none; transition:border-color .3s; min-height:100px;
  position:relative; overflow:hidden;
}
.sp-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue2), var(--blue));
  opacity:0; transition:opacity .3s;
}
.sp-box:hover { border-color:var(--blue2); }
.sp-box:hover::before { opacity:1; }
.sp-box-num { font-size:9px; color:var(--blue); letter-spacing:.2em; }
.sp-box-name { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.06em; color:var(--white); }
.sp-box-handle { font-size:9px; color:var(--dim); letter-spacing:.1em; }
.sp-box-link {
  font-size:9px; letter-spacing:.15em; color:var(--dim); text-decoration:none;
  border:1px solid var(--border); padding:4px 12px; display:inline-block;
  transition:border-color .2s, color .2s; text-transform:uppercase; width:fit-content;
}
.sp-box-link:hover { border-color:var(--blue); color:var(--blue); }