/* BoreMyBrain Styles (split) */
:root {
--bg: #0b0b0b;
--card: #121212;
--elev: rgba(0,0,0,.45);
--text: #ffe08a;
--muted: #e5d7a8;
--border: #473c1a;
--accent: #473c1a;
--accent-2: #2a2412;
--accent-hover: #594a21;
--tap: 48px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0; background: var(--bg); color: var(--text);
font-family: Roboto, system-ui, sans-serif;
transition: filter .15s ease, background .2s ease, color .2s ease;
}
body.dim { filter: brightness(0.65) contrast(0.95); }
body.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }


.wrap { max-width: 720px; margin: 24px auto; padding: 0 16px; }


h1 { text-align: center; margin: 0 0 12px; font-size: clamp(20px,6vw,28px); font-weight: 700; color: var(--text); }


.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px var(--elev); padding: 14px; margin-bottom: 16px; }


button, label.switch {
appearance: none; border: 1px solid var(--border);
background: var(--accent); color: var(--text);
padding: 10px 14px; border-radius: 10px; cursor: pointer;
font-weight: 700; font-size: 0.9rem; line-height: 1; min-height: var(--tap);
transition: background .15s ease, transform .05s ease, opacity .15s ease;
}
button:hover { background: var(--accent-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }


.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.center { text-align: center; justify-content: center; }
.row-right { margin-left: auto; }


.helper { margin-top: 6px; font-size: 0.85rem; color: var(--muted); }
.notice { margin-top: 6px; font-size: 0.8rem; color: var(--muted); text-align: center; }


/* Loader */
.loader { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 14px; border: 1px solid var(--border); background: #0f0f0f; border-radius: 10px; box-shadow: 0 6px 18px var(--elev); }
.loader .dots { font-size: 0.95rem; color: var(--muted); letter-spacing: 0.3px; }
.loader .bar { width: 100%; max-width: 420px; height: 10px; border-radius: 999px; background: #1a1a1a; position: relative; overflow: hidden; }
.loader .bar::after { content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,224,138,.35), transparent); animation: shimmer 1.1s infinite; }
@keyframes shimmer { 0% { left: -40%; } 100% { left: 100%; } }


.text-box { margin-top: 2rem; background:#0f0f0f; border:1px solid var(--border); border-radius:10px; box-shadow: 0 6px 18px var(--elev); padding: 14px; }
#output { text-align: justify; white-space: pre-wrap; line-height: 1.8; font-size: 1rem; color: var(--text); }


.switch { display:inline-flex; align-items:center; gap:8px; background:var(--accent-2); padding: 8px 12px; }
.switch input { appearance:none; width:40px; height:24px; border-radius:999px; background:#221c0e; position:relative; border:1px solid var(--border); }

#loaderOverlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  z-index: 9999;
}
#loaderOverlay[hidden] { display: none; }

.loader {
  padding: 16px 20px; border-radius: 12px; background: var(--card, #111);
  color: var(--fg, #eaeaea); font: 600 16px/1.2 ui-sans-serif, system-ui;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

.dots .dot { opacity: 0; animation: dot 1s infinite; }
.dots .dot:nth-child(2) { animation-delay: .2s; }
.dots .dot:nth-child(3) { animation-delay: .4s; }

@keyframes dot {
  0%, 20% { opacity: 0; }
  21%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}
#loaderOverlay[hidden] { display: none !important; opacity: 0 !important; visibility: hidden !important; }
.footer {
  margin-top: 2rem;
  padding: 16px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.footer a {
  color: var(--text);
  text-decoration: none;
  margin: 0 4px;
}
.footer a:hover { color: var(--accent-hover); }

/* Floating pill support button */
.support-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  text-decoration: none;
  transition: background .2s ease, transform .1s ease;
  z-index: 10000;
}
.support-btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.support-btn:active { transform: translateY(1px); }