:root{
  --bg: #000000;
  --panel: #0b0b0b;
  --muted: #bfbfbf;
  --accent: #ffffff;
  --danger: #e9e9e9;
  --glass: rgba(255,255,255,0.03);
  font-family: "Times New Roman", Times, serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html{overflow-x:hidden}
html,body{overflow-y:auto}

body{
  margin:0;
  background:
    radial-gradient(800px 300px at 10% 10%, rgba(255,255,255,0.03), transparent 8%),
    linear-gradient(180deg,#000000 0%, #0b0b0b 100%);
  color:var(--accent);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:18px;
}

/* App container: compact, high-contrast, eerie vignette */
.app{
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 auto;
  min-height:480px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), repeating-linear-gradient(0deg, rgba(255,255,255,0.01) 0 2px, transparent 2px 6px);
  border-radius:12px;
  padding:18px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 40px rgba(0,0,0,0.9), inset 0 3px 0 rgba(255,255,255,0.02);
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:visible;
}

/* Subtle film-grain overlay for horror texture */
.app::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  border-radius:12px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="g"><feTurbulence baseFrequency="0.9" numOctaves="1" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23g)" opacity="0.03" fill="%23000000"/></svg>');
  mix-blend-mode: overlay;
  opacity:0.9;
}

/* Masthead: spooky serif, inverted, scratched line */
.topbar{
  text-align:center;
  padding:8px 6px 12px;
  border-bottom:2px dashed rgba(255,255,255,0.06);
}
.topbar h1{
  margin:0;
  font-size:34px;
  color:var(--accent);
  letter-spacing:-1px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.8);
  font-weight:700;
}
.topbar .subtitle{
  margin:6px 0 0;
  font-size:12px;
  color:var(--muted);
  font-variant: small-caps;
  opacity:0.9;
}

/* Filebox: torn paper look */
.filebox{
  position:relative;
  display:block;
  background: linear-gradient(180deg,#0b0b0b, #080808);
  border-radius:8px;
  padding:14px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 -8px 24px rgba(0,0,0,0.8);
  cursor:pointer;
  overflow:hidden;
}
/* visually hide native file input UI while keeping it clickable */
.filebox input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:2;
}

/* layout for content inside the filebox */
.file-inner{display:flex;flex-direction:column;gap:12px;z-index:1;pointer-events:none;align-items:center;text-align:center}

/* filename display between selector and controls */
.file-name{
  margin:10px 0 12px;
  font-size:13px;
  color:var(--accent);
  opacity:0.95;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:8px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
  text-align:center;
}

/* allow the CTA and filename/placeholder to wrap to next line instead of overflowing */
.file-cta{
  font-weight:700;
  color:var(--accent);
  font-size:16px;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  max-width:100%;
  text-align:center;
}

/* hint below, also wrap-safe */
.file-hint{
  font-size:12px;
  color:var(--muted);
  white-space:normal;
  word-break:break-word;
  max-width:100%;
  text-align:center;
}

/* Controls panel: backlit card with white-on-black accents */
.controls{
  margin-top:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  padding:18px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 20px rgba(0,0,0,0.7);
}

/* rows */
.row{display:flex;align-items:center;gap:12px;margin:12px 0}
.row label{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;font-size:14px;color:var(--muted);gap:12px;padding:0}
.row input[type=range]{margin:0;width:48%;margin-left:auto}

/* effect toggle: minimal white square with scratched style when checked */
.row input[type="checkbox"].effect-toggle{
  -webkit-appearance:none;
  appearance:none;
  width:22px;height:22px;border:2px solid var(--muted);border-radius:3px;background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;order:-1;
}
.row input[type="checkbox"].effect-toggle:checked{
  background:var(--accent);border-color:var(--accent);
  box-shadow: 0 0 12px rgba(255,255,255,0.08), inset 0 -2px 0 rgba(0,0,0,0.4);
}
.row input[type="checkbox"].effect-toggle:checked::after{
  content:"✟";color:#000;font-weight:900;font-size:12px;
}

/* sliders: white track on black, stark thumb */
.row input[type=range]{
  -webkit-appearance:none;appearance:none;height:8px;background:linear-gradient(90deg,#111 0%, #1a1a1a 100%);border-radius:999px;outline:none;
}
.row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #000;margin-top:-5px;box-shadow:0 6px 18px rgba(0,0,0,0.6);
}
.row input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:transparent}
.row input[type=range]::-moz-range-progress{background:linear-gradient(90deg,#fff 0%, #e9e9e9 100%);height:8px;border-radius:999px}
.row input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #000}

/* range bubble */
.range-value-bubble{
  position:fixed;pointer-events:none;transform:translate(-50%,-150%);background:#111;color:#fff;padding:8px 10px;border-radius:8px;font-weight:700;font-size:15px;border:1px solid rgba(255,255,255,0.04);opacity:0;transition:opacity 120ms;
  z-index:9999;white-space:nowrap;
}
.range-value-bubble.visible{opacity:1;transform:translate(-50%,-170%)}

/* actions/buttons */
.actions{justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px dashed rgba(255,255,255,0.04);display:flex;gap:12px;align-items:center}
.btn{
  background:transparent;color:var(--accent);border:1px solid rgba(255,255,255,0.06);padding:10px 12px;border-radius:8px;font-weight:700;min-width:28%;
}
.btn.icon{min-width:unset;width:44px;padding:8px;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
.btn.primary{background:#fff;color:#000;border-color:#fff}
.btn:disabled{opacity:0.35;pointer-events:none}

/* progress: white bar on black tube */
.progress{height:8px;background:rgba(255,255,255,0.04);border-radius:999px;overflow:hidden;margin:8px 0}
.bar{height:100%;background:linear-gradient(90deg,#fff 0%, #dcdcdc 100%);width:0%}

/* player */
.player audio{width:100%;margin-top:6px;border-radius:6px;background:transparent;filter:grayscale(1) contrast(1.1)}

/* footer: small pale text */
.footer{margin-top:auto;text-align:center;font-size:11px;color:var(--muted)}
.footer a{color:var(--accent);text-decoration:underline}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;pointer-events:none}
.modal[aria-hidden="true"]{display:none}
.modal[aria-hidden="false"]{pointer-events:auto}
.modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.9))}
.modal-panel{position:relative;z-index:2;background:#090909;border-radius:12px;padding:14px;min-width:260px;max-width:90%;color:var(--accent);border:1px solid rgba(255,255,255,0.04)}

/* responsive tweaks */
@media (max-width:420px){
  body{padding:8px}
  .app{border-radius:10px;padding:12px}
  .file-cta{font-size:15px}
}