@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #14151a;
  --panel: #1e2027;
  --panel-2: #262933;
  --border: #33374233;
  --text: #e8e9ed;
  --muted: #9aa0ae;
  --accent: #e5b567;
  --accent-2: #67b5e5;
  --danger: #e46a6a;
  --ok: #6fcf8e;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .65rem 1.2rem;
  background: var(--panel);
  border-bottom: 1px solid #00000044;
  position: sticky; top: 0; z-index: 20;
}
.brand {
  font-weight: 700; letter-spacing: .5px; color: var(--accent);
  font-family: 'Courier Prime', monospace; font-size: 1.02rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand img { height: 30px; width: 30px; object-fit: contain; display: block; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: .85rem; }

.container { max-width: 900px; margin: 2.5rem auto; padding: 0 1.2rem; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.auth-card { max-width: 420px; margin: 8vh auto 0; }
h1, h2, h3 { margin-top: 0; }
h1 { font-size: 1.4rem; }
.muted { color: var(--muted); font-size: .88rem; }

label { display: block; margin: .9rem 0 .3rem; font-size: .85rem; color: var(--muted); }
input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: .6rem .7rem;
  border-radius: 7px; border: 1px solid #3a3f4d;
  background: var(--panel-2); color: var(--text);
  font-size: .95rem;
}
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

button, .btn {
  cursor: pointer; border: 0; border-radius: 7px;
  padding: .55rem 1rem; font-weight: 600; font-size: .9rem;
  background: var(--accent); color: #191204;
  display: inline-flex; align-items: center; gap: .4rem;
}
button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; }
button.secondary, .btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid #3a3f4d; }
button.danger { background: transparent; color: var(--danger); border: 1px solid #6b3a3a; }
button.small { padding: .3rem .6rem; font-size: .8rem; }
button:disabled { opacity: .5; cursor: default; }

.msg { margin-top: 1rem; padding: .7rem .9rem; border-radius: 7px; font-size: .88rem; display: none; }
.msg.ok { background: #1d3325; color: var(--ok); display: block; }
.msg.err { background: #3a2020; color: var(--danger); display: block; }
.msg code { user-select: all; word-break: break-all; }

.tabs { display: flex; gap: .3rem; margin-bottom: 1.2rem; }
.tabs button { background: transparent; color: var(--muted); border: 0; padding: .45rem .8rem; }
.tabs button.active { background: var(--panel-2); color: var(--text); border-radius: 7px; }

/* dashboard */
.script-list { list-style: none; padding: 0; margin: 0; }
.script-list li {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem .5rem; border-bottom: 1px solid var(--border);
}
.script-list li:hover { background: #ffffff06; }
.script-list .title { font-weight: 600; flex: 1; }
.script-list .meta { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.newbar { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.newbar input { flex: 1; }

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; background: #000a; z-index: 50;
  display: none; align-items: flex-start; justify-content: center; padding-top: 10vh;
}
.modal-backdrop.open { display: flex; }
.modal { background: var(--panel); border: 1px solid #3a3f4d; border-radius: var(--radius); padding: 1.4rem; width: min(560px, 92vw); }
.share-row { display: flex; align-items: center; gap: .6rem; margin: .8rem 0; }
.share-row input { flex: 1; font-size: .8rem; font-family: monospace; }

/* tables (admin) */
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.badge { padding: .12rem .5rem; border-radius: 20px; font-size: .72rem; font-weight: 600; }
.badge.ok { background: #1d3325; color: var(--ok); }
.badge.warn { background: #3a3220; color: var(--accent); }
.badge.off { background: #33262a; color: var(--danger); }

/* ---------- editor layout ---------- */
.editor-shell { display: flex; height: calc(100vh - 53px); }
.editor-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.preview-pane {
  flex: 1; min-width: 0; overflow-y: auto;
  background: #3c3f47;
  padding: 1.5rem 1rem;
  border-left: 1px solid #00000055;
  display: none;
}
.preview-on .preview-pane { display: block; }
@media (max-width: 900px) {
  .preview-on .editor-pane { display: none; } /* mobile: preview replaces editor */
}

#title-input {
  background: transparent; border: 0; color: var(--text);
  font-weight: 600; font-size: 1rem; width: 16rem; padding: .3rem .4rem; border-radius: 6px;
}
#title-input:hover, #title-input:focus { background: var(--panel-2); outline: none; }
.status { font-size: .78rem; color: var(--muted); min-width: 5.5rem; }
.status.saving { color: var(--accent); }
.status.saved { color: var(--ok); }
.peers { display: flex; }
.peer {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #14151a;
  margin-left: -6px; border: 2px solid var(--panel);
}
.readonly-pill { background: #33262a; color: var(--danger); font-size: .72rem; padding: .15rem .55rem; border-radius: 20px; }

/* ---------- CodeMirror fountain look ---------- */
.cm-editor { height: 100%; font-size: 13.5pt; }
.cm-scroller {
  font-family: 'Courier Prime', 'Courier New', monospace !important;
  line-height: 1.45;
}
.editor-pane .cm-content {
  max-width: 72ch; margin: 0 auto;
  padding: 2.5rem 1rem 45vh 1rem;
  caret-color: var(--accent);
}
.cm-editor .cm-cursor { border-left-color: var(--accent); }
.cm-editor.cm-focused { outline: none; }
.cm-line.fl-scene { font-weight: 700; text-transform: uppercase; color: #fff; }
.cm-line.fl-character { padding-left: 22ch !important; color: #ffd9a0; }
.cm-line.fl-dialogue { padding-left: 10ch !important; }
.cm-line.fl-parenthetical { padding-left: 16ch !important; color: var(--muted); }
.cm-line.fl-transition { text-align: right; text-transform: uppercase; color: #b9c3d4; }
.cm-line.fl-centered { text-align: center; }
.cm-line.fl-lyric { font-style: italic; color: #c5b3ef; }
.cm-line.fl-section { color: #8a63d2; font-weight: 700; }
.cm-line.fl-synopsis { color: #4a90d9; font-style: italic; }
.cm-line.fl-titlepage { color: #8fd0a8; }
.cm-line.fl-pagebreak { color: #666; letter-spacing: .3em; }
.cm-line.fl-boneyard, .cm-line.fl-boneyard * { color: #5d6370 !important; font-style: italic; }
.fm-bold { font-weight: 700; }
.fm-italic { font-style: italic; }
.fm-underline { text-decoration: underline; }
.fm-note { background: #4a4020; color: #ffe9a8; border-radius: 3px; }

/* remote cursors (y-codemirror.next) */
.cm-ySelection { opacity: .45; }
.cm-yLineSelection { margin: 0; }
.cm-ySelectionCaret { position: relative; }
.cm-ySelectionInfo {
  position: absolute; top: -1.3em; left: -1px;
  font-family: 'Inter', sans-serif; font-size: .62rem; font-weight: 600;
  padding: 1px 5px; border-radius: 4px; color: #14151a;
  white-space: nowrap; user-select: none; pointer-events: none; z-index: 10;
}

.center-page { display: flex; align-items: center; justify-content: center; min-height: 80vh; text-align: center; }


/* ---------- formatting toolbar ---------- */
.fmt-toolbar {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  padding: .45rem .8rem;
  background: var(--panel);
  border-bottom: 1px solid #00000044;
}
.tb-group { display: flex; gap: .3rem; }
.fmt-toolbar button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid #3a3f4d;
  padding: .32rem .6rem; font-size: .78rem; font-weight: 500;
  border-radius: 6px;
}
.fmt-toolbar button:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.editor-host { flex: 1; min-height: 0; }
.editor-host .cm-editor { height: 100%; }

/* ---------- options menu ---------- */
label.check {
  display: flex; align-items: center; gap: .6rem;
  margin: .55rem 0; font-size: .92rem; color: var(--text); cursor: pointer;
}
label.check input { width: 16px; height: 16px; accent-color: var(--accent); }