:root { --bg:#0B0D12; --panel:#151821; --line:#272B38; --text:#F4F1EA; --muted:#A3A6B3; --accent:#7C3AED; --accent-text:#B794F6; --good:#4ADE80; --warn:#FBBF24; --bad:#F87171; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:1120px; margin:0 auto; padding:20px 16px 48px; }
header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.mark { display:inline-flex; align-items:center; gap:3px; height:24px; }
.mark i { display:block; width:4px; height:24px; background:var(--text); border-radius:1px; }
.mark i:nth-child(3) { background:var(--accent); }
.word { font-weight:800; letter-spacing:.08em; }
.spacer { flex:1; }
h2 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:28px 0 10px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td.wrap { white-space:normal; min-width:220px; }
tr:last-child td { border-bottom:0; }
th { color:var(--muted); font-weight:500; font-size:13px; }
.empty { padding:14px 12px; color:var(--muted); }
.good { color:var(--good); } .warn { color:var(--warn); } .bad { color:var(--bad); } .muted { color:var(--muted); }
.banner { padding:10px 14px; border-radius:8px; margin-bottom:10px; border:1px solid var(--line); background:var(--panel); }
.banner.warn { border-color:var(--warn); } .banner.bad { border-color:var(--bad); } .banner.good-line { border-color:var(--good); }
input.amount { width:88px; padding:6px 8px; }
.actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.setup { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); }
.setup div { background:var(--panel); padding:10px 12px; }
.setup small { display:block; color:var(--muted); font-size:13px; }
.span { grid-column:1 / -1; }
.hint { color:var(--muted); font-size:13px; margin:0; }
a.button { display:inline-block; text-decoration:none; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:7px 12px; }
button { font:inherit; color:var(--text); background:var(--accent); border:0; border-radius:6px; padding:7px 12px; cursor:pointer; }
button.quiet { background:transparent; border:1px solid var(--line); }
input, select { font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px 10px; width:100%; }
input[type=checkbox] { width:auto; }
label { display:block; font-size:13px; color:var(--muted); }
.form { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; padding:14px; }
.form .check { display:flex; align-items:center; gap:8px; align-self:end; padding-bottom:9px; }
code { word-break:break-all; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px 10px; display:block; }
form.inline { display:inline; }
a { color:var(--accent-text); }
.narrow { max-width:420px; }
.pad { padding:14px; }
.single { grid-template-columns:1fr; }
.gap-top { margin-top:14px; }

/* Clip page */
.buttons { display:grid; gap:14px; margin-top:16px; }
.tap { padding:32px 16px; font-size:24px; font-weight:700; border-radius:12px; }
.tap small { display:block; font-size:14px; font-weight:400; margin-top:6px; }
.tap.sermon { background:var(--panel); border:2px solid var(--accent); }
.tap:disabled { opacity:.45; cursor:default; }
#status { min-height:24px; margin-top:16px; text-align:center; }
.editor-intro { margin-bottom:18px; }
.editor-intro h1 { font-size:28px; margin:0 0 10px; }
.editor-intro ol { font-size:17px; padding-left:22px; margin:0 0 10px; }
.editor-intro li { margin:4px 0; }
.editor-links { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
.editor-section { background:var(--panel); border:1px solid var(--line); border-radius:8px; margin-bottom:10px; }
.editor-section summary { padding:16px 18px; font-size:18px; font-weight:600; cursor:pointer; min-height:44px; }
.editor-note { padding:0 18px; }
.editor-form { padding:6px 18px 18px; }
.editor-field { display:block; margin-top:14px; font-weight:600; font-size:15px; }
.editor-field .hint { display:block; font-weight:400; }
.editor-field input, .editor-field textarea { display:block; width:100%; margin-top:6px; min-height:46px; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:400 16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
.editor-save { margin-top:18px; min-height:48px; padding:10px 22px; font-size:16px; font-weight:600; }
.hint { color:var(--muted); }
button:disabled { opacity:.45; cursor:not-allowed; }