/* Basic Wikipedia-like layout with Jack styling */
:root{
  --bg: #f8f9fa;
  --text: #202122;
  --muted: #54595d;
  --link: #0645ad;
  --link-visited: #0b0080;
  --border: #a2a9b1;
  --accent: #e2e4e9;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);padding-top:60px}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:36px;height:36px}
.brand-text h1{margin:0;font-size:1.4rem}
.brand-text p{margin:0;color:var(--muted);font-size:.9rem}
.topnav{display:flex;gap:12px;margin-left:auto}
.topnav a{color:var(--link);text-decoration:none}
.topnav a:hover{text-decoration:underline}
.search input{padding:6px 10px;border:1px solid var(--border);border-radius:6px;width:220px}
.container{display:grid;grid-template-columns:280px 1fr;gap:16px;padding:16px;max-width:1200px;margin:0 auto}
.sidebar{border:1px solid var(--border);background:#fff;border-radius:8px;padding:12px}
.sidebar h2{margin-top:0;font-size:1.1rem}
.sidebar-section{margin-top:12px;border-top:1px solid var(--accent);padding-top:8px}
.content{border:1px solid var(--border);background:#fff;border-radius:8px;padding:18px;min-height:50vh}
.content h1{margin-top:0}
.footer{padding:16px;color:var(--muted);text-align:center}

/* Infobox */
.infobox{float:right;border:1px solid var(--border);background:#fefefe;border-radius:8px;margin:0 0 16px 16px;width:320px}
.infobox .infobox-title{background:var(--accent);padding:10px 12px;font-weight:700;border-bottom:1px solid var(--border)}
.infobox .image{display:block;width:100%;height:auto;border-bottom:1px solid var(--accent)}
.infobox .image-caption{padding:6px 10px;color:var(--muted);text-align:center;font-size:.85rem;border-bottom:1px solid var(--accent)}
.infobox table{width:100%;border-collapse:collapse}
.infobox td{border-top:1px solid var(--accent);padding:8px 12px;vertical-align:top}
.infobox td.key{color:var(--muted);width:35%}

/* Lists and page chrome */
.page-meta{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.page-categories{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.page-categories .chip{padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:#fafbfc;color:var(--muted);font-size:.85rem}

/* Search results */
.search-results{list-style:none;margin:0;padding:0}
.search-results li{padding:8px;border-bottom:1px solid var(--accent)}
.search-results a{color:var(--link);text-decoration:none;font-weight:600}
.search-results a:hover{text-decoration:underline}
.search-results .desc{color:var(--muted);font-size:.9rem}

/* Responsive */
@media (max-width:900px){
  .container{grid-template-columns:1fr}
  .infobox{float:none;width:100%;margin:0 0 16px 0}
}

/* Top window bar */
.window-top-bar{font-family:'Lexend Giga',sans-serif;background-color:#1e1e1e;display:flex;align-items:center;padding:6px 16px;color:#d6cb72;border-bottom:2px solid #d6cb72;width:100%;position:fixed;top:0;left:0;z-index:9999;height:42px;box-sizing:border-box}
.window-title{font-size:16px;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window-controls{display:flex;gap:8px;align-items:center}
.window-controls button{background-color:#1e1e1e;color:#d6cb72;border:1px solid #d6cb72;font-size:16px;padding:0;height:30px;width:30px;display:flex;justify-content:center;align-items:center;border-radius:3px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.window-controls button:hover{background-color:#c67cf4;color:#fff}
.window-controls button.mute{background:transparent;color:#04ef04;border:none}
.window-controls button.mute:hover{color:#ff4500}
.window-controls .volume-slider{-webkit-appearance:none;appearance:none;width:120px;height:6px;border-radius:10px;background:linear-gradient(90deg,#dfcc6c,#c67cf4);box-shadow:inset 0 1px 4px rgba(255,255,255,0.2),0 0 5px rgba(198,124,244,0.4);outline:none;transition:background .3s ease,box-shadow .3s ease}
.window-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:#fff;border:2px solid #d6cb72;box-shadow:0 0 5px #d6cb72,0 0 2px #fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.window-controls .volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 8px #d6cb72,0 0 4px #fff}
.window-controls .volume-slider::-moz-range-thumb{height:16px;width:16px;border-radius:50%;background:#fff;border:2px solid #d6cb72;box-shadow:0 0 5px #d6cb72,0 0 2px #fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.window-controls .volume-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 0 8px #d6cb72,0 0 4px #fff}

@media (max-width:600px){
  .window-top-bar{padding:6px 10px;height:auto;min-height:42px;flex-wrap:wrap;gap:8px}
  .window-title{font-size:14px;width:100%}
  .window-controls{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .window-controls button{height:28px;width:28px;font-size:14px}
  .window-controls .volume-slider{width:90px}
}

/* Music tooltip */
.music-tooltip{position:fixed;background:rgba(30,30,30,0.95);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:12px 16px;color:#fff;font-family:'Lexend Giga',sans-serif;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.4);z-index:1000;pointer-events:none;max-width:250px;text-align:center;opacity:0;transition:opacity .2s ease-in-out}
.tooltip-title{font-weight:600;font-size:15px;margin-bottom:4px;color:#dfcc6c;text-shadow:0 1px 2px rgba(0,0,0,0.6)}
.tooltip-artist{font-size:12px;color:#c67cf4;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,0.6)}