:root{
  --bg:#0b0b0d;
  --panel:#0f1113;
  --muted:#9aa0a6;
  --accent:#7bd389;
  --accent-2:#7aa2ff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:linear-gradient(180deg,#070708, #0b0b0d);color:#e9eef3;}
body.landing-page{overflow:hidden}

.page{height:100vh;position:relative;overflow:visible}
#landing{display:flex;align-items:center;justify-content:center;text-align:center}

/* headline image */
#title {
    width: 96vw;
    height: auto;
    display: block;
    opacity: 0.85;
}
#bg-overlay{position:absolute;inset:0;background-size:cover;background-position:center;filter:contrast(110%) brightness(.90);transform:translateZ(0);transition:opacity 900ms ease}
.center-content{position:relative;z-index:3}
/* generic heading rule (not applied to #title) */
.center-content h1:not(#title){font-size:3rem;letter-spacing:2px;margin:0}

.tag{color:var(--muted);margin-top:.5rem}

.floating-nav{position:fixed;inset:0;pointer-events:none;z-index:20}
.nav-btn{width:64px;height:64px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);color:#000;font-weight:700;text-decoration:none;transition:box-shadow .2s ease;border:0;cursor:pointer;font-size:.75rem;pointer-events:auto;position:relative;transform:rotate(var(--rot,0deg))}
.nav-btn::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:16px 8px 20px rgba(0,0,0,0.7);pointer-events:none;transform:rotate(calc(-1 * var(--rot,0deg)))}
.nav-btn:hover{box-shadow:0 12px 30px rgba(0,0,0,.6);filter:brightness(1.2)}
.nav-music{background:none;border-radius:0;width:109px;height:109px;box-shadow:none;backdrop-filter:none;}
.nav-music::after{display:none;}
.nav-music img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(var(--shadow-x,20px) var(--shadow-y,20px) 24px rgba(0,0,0,0.9));}
.nav-music:hover{box-shadow:none;filter:none;}
.nav-about{background:none;border-radius:0;width:264px;height:264px;box-shadow:none;backdrop-filter:none;transform-origin:76% 42%;}
.nav-about::after{display:none;}
.nav-about img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(var(--shadow-x,20px) var(--shadow-y,20px) 24px rgba(0,0,0,0.9));}
.nav-about:hover{box-shadow:none;filter:none;}
.nav-images{background:none;border-radius:0;width:342px;height:342px;box-shadow:none;backdrop-filter:none;}
.nav-images::after{display:none;}
.nav-images img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(var(--shadow-x,20px) var(--shadow-y,20px) 24px rgba(0,0,0,0.9));}
.nav-images:hover{box-shadow:none;filter:none;}
.nav-upload{background:#2299ff;}



/* nav dropdown */
.hidden{display:none}
.site-nav{position:relative;display:inline-block}
.site-nav-toggle{background:none;border:none;color:#e9eef3;cursor:pointer;font-size:4.5rem;padding:0 8px;line-height:1}
.site-nav-toggle:hover{color:#fff}
.site-nav-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--panel);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:6px 0;z-index:100;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.site-nav.open .site-nav-dropdown{display:block}
.site-nav-dropdown a{display:block;padding:9px 18px;color:#c8cfd6;text-decoration:none;font-size:1rem}
.site-nav-dropdown a:hover{color:#fff}
.site-nav-fixed{position:fixed;top:16px;left:16px;z-index:50}

/* modal (kept for about edit modal) */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,6,.6), rgba(5,5,6,.8));backdrop-filter:blur(4px)}
.modal-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:18px;border-radius:12px;width:40vw;min-width:320px;max-width:920px;box-shadow:0 10px 40px rgba(2,6,23,.7)}
.modal-close{position:absolute;right:8px;top:8px;background:transparent;border:0;color:var(--muted);font-size:18px}

.btn{padding:8px 12px;border-radius:8px;border:0;background:rgba(255,255,255,0.04);color:var(--muted);cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#021217}

.drop-area{border:2px dashed rgba(255,255,255,0.08);padding:18px;border-radius:8px;text-align:center;cursor:pointer;margin:12px 0}
.drop-area.hover{border-color:rgba(255,255,255,0.3)}
.preview-grid{display:flex;flex-wrap:wrap;gap:8px}
.preview-grid img{width:96px;height:72px;object-fit:cover;border-radius:6px}
.img-thumb-wrap{position:relative;display:inline-block}
.img-thumb-wrap img{width:96px;height:72px;object-fit:cover;border-radius:6px;display:block}
.img-delete-btn{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,0.7);color:#fff;border:none;cursor:pointer;font-size:10px;line-height:18px;text-align:center;padding:0;opacity:0;transition:opacity .15s}
.img-thumb-wrap:hover .img-delete-btn{opacity:1}

/* upload page */
.up-help-btn{margin-left:auto;border-radius:50%;width:32px;height:32px;padding:0;font-weight:700;font-size:1rem;flex-shrink:0}
.up-help-card{max-width:520px}
.up-help-body h4{font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.up-help-body h4:first-child{margin-top:0}
.up-help-body p,.up-help-body ol{font-size:0.9rem;line-height:1.6;color:#c8cfd6;margin:0 0 8px}
.up-help-body ol{padding-left:20px}
.up-help-body li{margin-bottom:4px}
.up-gate{max-width:400px;margin:60px auto;text-align:center}
.up-gate input{width:100%;padding:8px 12px;margin:12px 0;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#e9eef3;font-size:1rem}
.up-section{margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,0.04)}
.up-section:last-child{border-bottom:none}
.up-section h3{margin:0 0 14px;font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.up-existing{margin-bottom:12px;min-height:20px}
.up-audio-list{margin-bottom:12px}
.up-audio-item{margin-bottom:16px}
.up-audio-item audio{width:100%;display:block;margin-top:4px}
.up-audio-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.up-audio-row .track-name{margin:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-delete-btn{background:rgba(255,60,60,0.15);color:#ff6060;border:1px solid rgba(255,60,60,0.3);padding:2px 8px;border-radius:6px;cursor:pointer;font-size:0.8rem;flex-shrink:0}
.up-delete-btn:hover{background:rgba(255,60,60,0.35)}
.up-attach-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:10px;background:rgba(255,255,255,0.02);border-radius:8px;border:1px solid rgba(255,255,255,0.06)}
.up-attach-label{font-size:0.8rem}
.up-thumb-input{font-size:0.8rem;color:var(--muted)}
.up-thumb-status{font-size:0.8rem}
.up-track-radio{flex-shrink:0;accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
.up-audio-thumb{width:48px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0}
.up-rating-badge{font-size:0.75rem;color:var(--muted);flex-shrink:0;white-space:nowrap}

.container{max-width:1100px;margin:0 auto;padding:0 16px}
.poll-bar{display:flex;align-items:center;gap:48px;padding:6px 0;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.06)}
.poll-title{margin:0;font-size:0.95rem;font-weight:700;color:#e9eef3;white-space:nowrap}
.poll-controls{display:flex;align-items:center;gap:40px}
.poll-slider-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.poll-col-label{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);font-weight:600;text-align:center}
.poll-slider-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:64px;overflow:visible}
.poll-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;text-align:center;font-weight:700}
.poll-music{color:#4af}
.poll-sfx{color:#bfbfbf}
.poll-slider{-webkit-appearance:none;appearance:none;width:64px;flex-shrink:0;transform:rotate(270deg);cursor:pointer;margin:0;border-radius:2px;height:4px}
.poll-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);width:16px;height:16px;border-radius:50%;margin-top:-6px}
.poll-slider::-moz-range-track{background:#555;border-radius:2px;height:4px}
.poll-slider::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}
.poll-slider-avg{cursor:default;opacity:0.75}
.poll-slider-avg::-webkit-slider-thumb{background:var(--accent)}
.poll-slider-avg::-moz-range-progress{background:var(--accent)}
.poll-slider-val{position:absolute;left:calc(100% + 28px);top:50%;transform:translateY(-50%);font-size:0.8rem;color:#e9eef3;white-space:nowrap}
.poll-vote-btn{font-size:1rem;border:3px solid #e03030;background:rgba(224,48,48,0.12);color:#fff;letter-spacing:0.08em;font-weight:700;margin-left:36px}
.tracks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.playback-controls{display:flex;gap:10px;margin-bottom:18px;align-items:center}
.playback-controls .btn{color:#e9eef3}
.playback-controls .btn.primary{color:#e9eef3}
.playback-controls .btn.active{background:transparent;color:#e9eef3;border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent)}
.playback-controls .btn-next{background:rgba(255,255,255,0.06)}
.track-card{background:var(--panel);padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);display:flex;align-items:flex-start;gap:12px;transition:border-color .2s}
.track-card.playing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.track-thumb{width:80px;height:80px;object-fit:cover;border-radius:6px;flex-shrink:0}
.track-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.track-top-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.track-name{margin:0;font-size:0.85rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--fg);opacity:0.7;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-info audio{width:100%;display:block;color-scheme:dark;height:36px}
audio::-webkit-media-controls-enclosure{border-radius:4px;height:36px;min-height:36px}
audio::-webkit-media-controls-panel{border-radius:4px;height:36px}
.track-rating{display:flex;align-items:center;gap:4px;flex-shrink:0}
.rate-btn{background:none;border:none;cursor:pointer;font-size:0.7rem;padding:2px 4px;line-height:1;transition:filter .15s}
.rate-btn:hover{filter:brightness(1.4)}
.rate-btn.up{color:#4caf50}
.rate-btn.down{color:#e53935}
.rate-num{font-size:0.8rem;color:var(--muted);min-width:16px;text-align:center}
.audio-preview-name{margin:4px 0;font-size:0.85rem;color:var(--muted);}

.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.image-grid img{width:100%;height:220px;object-fit:cover;border-radius:8px;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;cursor:pointer}
.image-grid img.visible{opacity:1;transform:none}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:rgba(0,0,0,0.95);overflow-y:auto}
.lightbox.hidden{display:none}
.lightbox-header{display:flex;justify-content:flex-end;padding:12px 16px;flex-shrink:0}
.lightbox-close{background:none;border:none;color:#aaa;font-size:2rem;cursor:pointer;line-height:1;padding:4px 12px}
.lightbox-close:hover{color:#fff}
.lightbox-body{display:flex;align-items:center;justify-content:center;flex:1;padding:0 56px;position:relative;min-height:50vh}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#aaa;font-size:3.5rem;cursor:pointer;padding:8px 16px;line-height:1;user-select:none}
.lightbox-prev{left:0}.lightbox-next{right:0}
.lightbox-prev:hover,.lightbox-next:hover{color:#fff}
#lightboxImg{max-width:100%;max-height:58vh;object-fit:contain;border-radius:4px;display:block}
.lightbox-footer{padding:16px 56px 28px;flex-shrink:0}
.lightbox-caption-wrap{display:flex;gap:8px;align-items:flex-start}
.lightbox-caption{flex:1;background:transparent;border:none;border-radius:6px;color:#c8cfd6;padding:4px 0;font-family:inherit;font-size:0.9rem;resize:none;min-height:48px;line-height:1.5;cursor:default}
.lightbox-caption:not([readonly]){background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);padding:8px;resize:vertical;cursor:text}
.lightbox-caption-btns{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.lightbox-edit-btn,.lightbox-save-btn{flex-shrink:0}
.lightbox-edit-btn.hidden,.lightbox-save-btn.hidden{display:none}

.topbar{display:flex;align-items:center;gap:12px;padding:6px 14px;background:transparent}
.about-box{background:var(--panel);padding:18px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);white-space:pre-wrap;line-height:1.7}
.modal-card textarea{width:100%;background:rgba(255,255,255,0.04);color:#e9eef3;border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:10px;resize:vertical;font-family:inherit;font-size:.95rem}

/* Text page accordion */
.text-list{display:flex;flex-direction:column}
.text-entry{border-bottom:1px solid rgba(0,0,0,0.08);background:#f0f0f0;border-radius:6px;margin-bottom:10px;padding:0 14px}
.text-entry-header{display:flex;align-items:baseline;gap:10px;padding:7px 0;cursor:pointer;user-select:none}
.text-entry-header:hover .text-entry-title{color:#000}
.text-entry-arrow{color:#555;font-size:1.4rem;transition:transform .2s;flex-shrink:0;line-height:1;display:inline-block}
.text-entry.open .text-entry-arrow{transform:rotate(90deg)}
.text-entry-title{font-weight:700;color:#111;flex:1}
.text-entry-body{height:0;overflow:hidden;transition:height .25s ease}
.text-entry-content{padding:4px 0 20px 22px;color:#222;line-height:1.7}
.text-entry-content p{margin:0 0 1em}
.text-entry-content h1,.text-entry-content h2{color:#000;margin:0 0 .5em}
.text-entry-content a{color:#1a5fa8}
.text-entry-content ul,.text-entry-content ol{padding-left:1.5em;margin:0 0 1em}
.text-entry.pinned{border-left:3px solid #555}
.text-entry-pin-indicator{display:inline-block;width:10px;height:10px;background:#c0392b;border-radius:1px;flex-shrink:0;margin-left:6px;vertical-align:middle}
.text-entry-btn-row{display:flex;justify-content:flex-end;gap:6px;margin-top:12px}
.text-entry-edit-btn{font-size:0.8rem;background:rgba(0,0,0,0.08);color:#333}
/* Quill editor dark theme */
.ql-snow.ql-toolbar{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.1)!important;border-radius:6px 6px 0 0}
.ql-snow.ql-container{border-color:rgba(255,255,255,0.1)!important;border-radius:0 0 6px 6px;background:rgba(255,255,255,0.02)}
.ql-editor{color:#e9eef3;min-height:160px}
.ql-editor.ql-blank::before{color:var(--muted)}
.ql-snow .ql-stroke{stroke:var(--muted)!important}
.ql-snow .ql-fill{fill:var(--muted)!important}
.ql-snow .ql-picker{color:var(--muted)!important}
.ql-snow .ql-picker-options{background:var(--panel);border-color:rgba(255,255,255,0.1)!important}
.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke{stroke:#fff!important}
.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill{fill:#fff!important}

/* Utility */
.muted{color:var(--muted);font-size:0.9rem;margin:8px 0 0}
.row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.modal-card h3{margin:0 0 14px;color:#e9eef3}
.modal-card input[type="text"],.modal-card input[type="url"]{width:100%;padding:8px 12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#e9eef3;font-size:1rem;font-family:inherit}

/* Fun page — link cards */
.link-list{display:flex;flex-direction:column;gap:10px}
.link-card{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:12px 14px}
.link-favicon{width:20px;height:20px;flex-shrink:0;border-radius:3px}
.link-body{flex:1;min-width:0}
.link-title{font-weight:700;color:#e9eef3;text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-title:hover{color:#fff;text-decoration:underline}
.link-desc{font-size:0.875rem;color:#9aa0a6;margin:3px 0 0}
.link-domain{font-size:0.75rem;color:#5a6370;margin:4px 0 0}
.link-edit-btn{font-size:0.8rem;flex-shrink:0}
.link-drag-handle{color:#444;cursor:grab;font-size:1.1rem;flex-shrink:0;padding:0 4px;user-select:none}
.link-drag-handle:active{cursor:grabbing}
.link-card.dragging{opacity:0.4}
.link-form{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.link-form label{font-size:0.8rem;color:var(--muted);margin-bottom:-2px}

@media(max-width:600px){
  .nav-btn{width:52px;height:52px}
  .nav-music{width:90px;height:90px}
  .nav-about{width:142px;height:142px}
  .nav-images{width:200px;height:200px}
  .center-content h1{font-size:2rem}
  .poll-bar{gap:8px}
  .poll-controls{gap:12px}
  .poll-slider-val{left:calc(100% + 6px);font-size:0.7rem}
  .poll-vote-btn{margin-left:0;padding:6px 8px;font-size:0.85rem;border-width:2px}
}