* { box-sizing: border-box; } body { margin:0; font-family: system-ui, sans-serif; background:#f5f6f8; color:#1c1e21; }

/* ===== Landing page ===== */
.landing { min-height:100vh; display:flex; flex-direction:column; background:#0f172a; color:#e2e8f0; }
.land-top { display:flex; align-items:center; justify-content:space-between; padding:18px 28px; }
.land-brand { font-weight:800; letter-spacing:2px; font-size:18px; color:#fbbf24; }
.land-brand span { color:#fff; font-weight:400; letter-spacing:0; margin-left:8px; font-size:13px; }
.land-login-link { color:#fbbf24; cursor:pointer; font-size:15px; text-decoration:none; border-bottom:1px solid transparent; }
.land-login-link:hover { border-bottom-color:#fbbf24; }
.land-hero { flex:1; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; padding:40px 56px 64px; max-width:1200px; margin:0 auto; width:100%;
  position:relative; border-radius:18px; overflow:hidden; min-height:420px;
  background:#0f172a url('/static/img/crew2.png') center/cover no-repeat; }
/* light scrim ONLY behind the text column so the full photo stays visible */
.land-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(105deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.30) 42%, rgba(15,23,42,0) 70%); }
.land-hero > div { position:relative; z-index:2; }
.land-hero h1 { font-size:44px; line-height:1.1; margin:0 0 16px; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.land-hero h1 em { color:#fbbf24; font-style:normal; }
.land-hero p.lead { font-size:18px; line-height:1.6; color:#e2e8f0; margin:0 0 20px; max-width:520px; text-shadow:0 1px 8px rgba(0,0,0,.3); }
.land-badges { display:flex; gap:14px; flex-wrap:wrap; }
.land-badge { background:rgba(251,191,36,.14); border:1px solid rgba(251,191,36,.4); color:#fbbf24; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.25); }
.land-photo { border-radius:16px; overflow:hidden; position:relative; min-height:380px; background:#0f172a; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.land-photo img { width:100%; height:100%; object-fit:contain; position:relative; }
.land-photo .ph-cap { position:relative; z-index:2; background:linear-gradient(transparent, rgba(15,23,42,.85)); width:100%; padding:10px 14px; font-size:12px; color:#e2e8f0; }
.land-story { background:#fff; color:#1c1e21; padding:56px 56px; }
.land-story-inner { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.land-story h2 { font-size:28px; margin:0 0 16px; color:#0f172a; }
.land-story p { font-size:16px; line-height:1.7; color:#475569; margin:0 0 14px; }
.land-story .pull { font-size:20px; font-weight:600; color:#1338be; border-left:4px solid #fbbf24; padding-left:16px; margin:8px 0 20px; }
.land-values { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.land-value { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:18px; }
.land-value .v-ico { font-size:24px; }
.land-value h3 { margin:8px 0 6px; font-size:16px; color:#0f172a; }
.land-value p { font-size:13px; color:#64748b; margin:0; line-height:1.5; }
.land-foot { background:#0f172a; color:#94a3b8; text-align:center; padding:24px; font-size:13px; }
.land-foot b { color:#fbbf24; }

@media (max-width: 820px) {
  .land-hero, .land-story-inner { grid-template-columns:1fr; }
  .land-hero { padding:24px; } .land-story { padding:36px 22px; }
  .land-values { grid-template-columns:1fr; }
  .land-hero h1 { font-size:32px; }
}
.login-screen { display:flex; align-items:center; justify-content:center; height:100vh; background:#1c1e21; }
.login-box { background:#fff; padding:32px; border-radius:12px; width:320px; text-align:center; }
.login-box h1 { margin:0 0 4px; letter-spacing:2px; }
.login-box .tagline { color:#888; margin:0 0 20px; font-size:13px; }
.login-box input { width:100%; margin:8px 0; padding:10px; border:1px solid #ddd; border-radius:8px; }
.login-box button { width:100%; padding:10px; background:#1338be; color:#fff; border:none; border-radius:8px; cursor:pointer; }
.error { color:#e5484d; font-size:13px; margin-top:8px; min-height:16px; }
.main-app { display:flex; flex-direction:column; height:100vh; }
.topbar { display:flex; align-items:center; gap:16px; background:#1338be; color:#fff; padding:10px 16px; }
.topbar .brand { font-weight:700; letter-spacing:1px; }
.global-search { flex:1; max-width:420px; padding:8px 12px; border-radius:8px; border:none; }
.user-area { margin-left:auto; display:flex; align-items:center; gap:10px; }
.user-area button { background:#fff; color:#1338be; border:none; padding:6px 12px; border-radius:6px; cursor:pointer; }
.layout { display:flex; flex:1; overflow:hidden; }
.nav { width:200px; background:#fff; border-right:1px solid #e5e7eb; padding:8px; overflow:auto; }
.nav-item { padding:9px 12px; border-radius:6px; cursor:pointer; font-size:14px; }
.nav-item:hover, .nav-item.active { background:#eef2ff; color:#1338be; }
.content { flex:1; padding:20px; overflow:auto; }
.page-title { font-size:20px; margin:0 0 12px; }
.muted { color:#888; font-size:13px; }
.grid { width:100%; border-collapse:collapse; background:#fff; }
.grid th, .grid td { border:1px solid #e5e7eb; padding:6px 10px; font-size:13px; text-align:left; }
.tree { font-size:13px; }
.tree-group { font-weight:600; margin:4px 0; cursor:pointer; }
.tree-children { margin-left:16px; }
.tree-file { padding:3px 0 3px 8px; cursor:pointer; color:#1338be; }
.tree-file:hover { text-decoration:underline; }
.sheet-grid { border-collapse:collapse; }
.sheet-grid td { border:1px solid #ccc; padding:4px 8px; min-width:60px; font-size:12px; }
.ai-wrap { max-width:640px; }
.ai-chat { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:12px; margin:10px 0; min-height:80px; white-space:pre-wrap; }
.ai-input textarea, #ai-msg { width:100%; }
.hidden { display:none !important; }
.back-btn { background:#2b6cb0; color:#fff; border:none; border-radius:4px; padding:6px 12px; cursor:pointer; margin:0 8px 8px 0; font-size:13px; }
.back-btn:hover { background:#234e7a; }
.xls { border-collapse: collapse; font-size: 12px; }
.xls th.corner { background:#e8eaed; border:1px solid #ccc; width:36px; }
.xls th.colh { background:#e8eaed; border:1px solid #ccc; padding:2px 6px; min-width:60px; text-align:center; position:sticky; top:0; z-index:2; }
.xls th.rownum { background:#e8eaed; border:1px solid #ccc; padding:2px 6px; text-align:right; position:sticky; left:0; z-index:1; }
.xls td { border:1px solid #d6d9dc; padding:2px 6px; min-width:60px; white-space:nowrap; }
.xls td:focus { outline:2px solid #1338be; background:#fff; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; margin:8px 0 16px; }
.stat-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.stat-value { font-size:24px; font-weight:700; color:#1338be; }
.stat-label { font-size:13px; color:#555; margin-top:4px; }
.stat-sub { font-size:12px; color:#888; margin-top:2px; }
.stat-note { font-size:13px; margin:6px 0; }
.stat-note .ok { color:#1a7f37; font-weight:600; }
.stat-note .warn { color:#b7791f; font-weight:600; }

/* ===== Cards & buttons (shared) ===== */
.card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin:8px 0; }
.card-head { font-weight:600; font-size:15px; margin-bottom:10px; color:#1f2937; }
.btn { background:#1338be; color:#fff; border:none; border-radius:6px; padding:8px 14px; font-size:13px; cursor:pointer; }
.btn:hover { background:#0f2da0; }
.btn-secondary { background:#eef2ff; color:#1338be; }
.btn-secondary:hover { background:#e0e7ff; }

/* ===== John Sermons workspace ===== */
.sermon-workspace { display:flex; gap:14px; align-items:stretch; }
.sermon-list-card { width:300px; flex:0 0 300px; display:flex; flex-direction:column; max-height:70vh; }
.sermon-editor-card { flex:1; display:flex; flex-direction:column; min-width:0; }
.sermon-filter { width:100%; padding:7px 10px; border:1px solid #d1d5db; border-radius:6px; margin-bottom:8px; font-size:13px; box-sizing:border-box; }
.sermon-list { overflow:auto; flex:1; }
.sermon-item { padding:7px 9px; border-radius:6px; cursor:pointer; font-size:13px; color:#1338be; }
.sermon-item:hover { background:#f3f4f6; }
.sermon-item.active { background:#eef2ff; font-weight:600; }
.sermon-doc { min-height:48vh; max-height:60vh; overflow:auto; border:1px solid #d1d5db; border-radius:8px; padding:28px 34px; background:#fff; font:15px/1.7 Georgia, 'Times New Roman', serif; color:#111827; white-space:pre-wrap; outline:none; box-shadow:inset 0 1px 3px rgba(0,0,0,.03); }
.sermon-doc:focus { border-color:#1338be; }
.sermon-editor-actions { margin-top:10px; display:flex; gap:8px; align-items:center; }
.sermon-ai-card { margin-top:14px; }
.sermon-ai-controls { margin-top:8px; }
.sermon-ai-controls textarea { width:100%; padding:8px; border:1px solid #d1d5db; border-radius:6px; font-size:13px; box-sizing:border-box; }
.sermon-ai-btns { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.ai-msg { margin:6px 0; padding:8px 10px; border-radius:8px; font-size:13px; }
.ai-user { background:#eef2ff; }
.ai-bot { background:#f0fdf4; }
.sermon-voice { margin-top:16px; padding-top:14px; border-top:1px solid #e5e7eb; }
@media (max-width: 900px){ .sermon-workspace{flex-direction:column;} .sermon-list-card{width:auto;flex:auto;max-height:none;} }

/* ===== Vault document viewer toolbars ===== */
.doc-toolbar { display:flex; gap:6px; margin:8px 0; flex-wrap:wrap; align-items:center; }
.tb-btn { font:600 13px/1 system-ui; padding:6px 10px; border:1px solid #d1d5db;
  background:#fff; border-radius:6px; cursor:pointer; min-width:30px; }
.tb-btn:hover { background:#f3f4f6; }
.tb-note { font-size:12px; color:#b7791f; font-style:italic; }
.doc-editor, .pdf-text { background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  padding:14px 18px; line-height:1.6; }
.doc-editor:focus { outline:2px solid #2563eb33; }
.pdf-text { white-space:pre-wrap; font-family:ui-monospace,Menlo,monospace; font-size:12px; }
#sheet td.edited { background:#fffbe6; }
#sheet td.sel { outline:2px solid #2563eb; background:#eff6ff; }
#sheet.freeze thead, #sheet.freeze tr:first-child { position:sticky; top:0; background:#eef2ff; z-index:2; }
.formula-bar { display:flex; gap:8px; align-items:center; margin:6px 0; padding:4px 6px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:6px; }
.formula-bar #fb-cell { font:600 12px/1 ui-monospace,monospace; color:#6b7280; min-width:36px; }
.formula-bar #fb-input { flex:1; border:1px solid #cbd5e1; border-radius:4px; padding:5px 8px; font:13px/1.4 ui-monospace,monospace; }
.tb-select { padding:5px 8px; border:1px solid #cbd5e1; border-radius:6px; font-size:13px; background:#fff; }
.tb-sep { width:1px; height:22px; background:#cbd5e1; margin:0 4px; display:inline-block; }
.tb-color { width:30px; height:28px; border:1px solid #cbd5e1; border-radius:6px; padding:0; cursor:pointer; vertical-align:middle; }
.tb-input { padding:5px 8px; border:1px solid #cbd5e1; border-radius:6px; font-size:13px; width:90px; }
#sheet td.merged { background:#eef6ff; }
#sheet td.find-hit { outline:2px solid #f59e0b; background:#fff7ed; }

/* AI Companion chat */
.ai-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:8px; }
.ai-chat { display:flex; flex-direction:column; gap:10px; height:58vh; overflow:auto; padding:10px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; }
.ai-bubble { max-width:82%; padding:10px 13px; border-radius:14px; line-height:1.45; white-space:normal; word-wrap:break-word; font-size:14px; }
.ai-ai { align-self:flex-start; background:#fff; border:1px solid #e5e7eb; border-bottom-left-radius:4px; }
.ai-user { align-self:flex-end; background:#2563eb; color:#fff; border-bottom-right-radius:4px; }
.ai-user b { color:#fff; }
.ai-typing { display:flex; gap:4px; padding:6px 4px 0 6px; }
.ai-typing.hidden { display:none; }
.ai-typing span { width:7px; height:7px; border-radius:50%; background:#94a3b8; animation:ai-bounce 1.2s infinite; }
.ai-typing span:nth-child(2){ animation-delay:.2s; } .ai-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes ai-bounce { 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-5px); opacity:1 } }
.ai-input-row { display:flex; gap:8px; margin-top:8px; align-items:flex-end; }
.ai-input-row textarea { flex:1; resize:none; padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px; font:14px/1.4 system-ui, sans-serif; }
.ai-input-row .btn { padding:10px 16px; border-radius:10px; font-size:15px; white-space:nowrap; }
.ai-input-row .btn-books { background:#15803d; font-size:13px; padding:8px 12px; }
.ai-input-row .btn-books:hover { background:#166534; }

/* Help box (per-page how-to) */
.help-box { background:#eef6ff; border:1px solid #bcd4f6; border-left:4px solid #1338be; border-radius:8px; padding:10px 14px; margin-bottom:12px; font-size:13px; color:#1e3a5f; position:relative; }
.help-box b { color:#1338be; }
.help-box .help-x { position:absolute; top:6px; right:10px; cursor:pointer; color:#90a4c4; font-weight:700; }
.help-box .help-x:hover { color:#1338be; }
.help-box ol { margin:6px 0 0; padding-left:20px; }
.help-box li { margin:3px 0; }