/* ==========================================================================
   KaiMa Spark look for KaiMa Note  (loaded LAST — overrides styles.css / ui-refresh.css)
   Palette from the KaiMa Spark Studio / KORA Pulse Halo sheet:
     deep navy field · electric blue · warm gold/amber · cyan accent · soft blue-white text
   Dark is the default; the light theme keeps the same blue/gold brand.
   ========================================================================== */

:root {
  --spark-navy-0: #040816;
  --spark-navy-1: #060d26;
  --spark-navy-2: #0a1633;
  --spark-navy-3: #0f2150;
  --spark-blue: #2f8bff;
  --spark-blue-2: #1f6bff;
  --spark-cyan: #3fd3ff;
  --spark-gold: #ffb02e;
  --spark-amber: #ff8a1f;
  --spark-line: rgba(80, 140, 255, 0.22);
  --spark-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* brand (light theme) */
  --primary: #1f6bff;
  --primary-hover: #1759d6;
  --primary-light: #e3eeff;
  --primary-muted: #8db8ff;
  --primary-deep: #0b2f78;
  --accent: #1f6bff;
  --accent-glow: rgba(47, 139, 255, 0.28);
  --ai: #0ea5e9;
  --ai-light: #e6f6ff;
  --sidebar-active: #e3eeff;
  --focus-ring: 0 0 0 3px rgba(47, 139, 255, 0.28);
  --accent-orange: #ff8a1f;
  --accent-gold: #ffb02e;
}

.dark-mode {
  --main-bg: #050b1f;
  --card-bg: #0a1633;
  --bg-hover: #0f2150;
  --bg-input: #07122c;
  --border: #1a3366;
  --border-light: #12274f;
  --text: #eaf2ff;
  --text-secondary: #a9bfe3;
  --text-muted: #7490bd;
  --text-light: #3b557f;
  --sidebar-bg: #040a1c;
  --sidebar-hover: #0d1d45;
  --sidebar-active: #12306f;
  --sidebar-text: #eaf2ff;
  --sidebar-muted: #7490bd;

  --primary: #2f8bff;
  --primary-hover: #4a9dff;
  --primary-light: rgba(47, 139, 255, 0.16);
  --primary-muted: #79b4ff;
  --primary-deep: #0b3a8f;
  --accent: #3fa1ff;
  --accent-glow: rgba(47, 139, 255, 0.38);
  --ai: #3fd3ff;
  --ai-light: rgba(63, 211, 255, 0.12);
  --focus-ring: 0 0 0 3px rgba(63, 161, 255, 0.35);

  --shadow-card: 0 0 0 1px rgba(80, 140, 255, 0.14), 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-dropdown: 0 0 0 1px rgba(80, 140, 255, 0.2), 0 12px 36px rgba(0, 0, 0, 0.6);
  --shadow-popover: 0 0 0 1px rgba(80, 140, 255, 0.22), 0 18px 48px rgba(0, 0, 0, 0.65);
  --shadow-modal: 0 0 0 1px rgba(80, 140, 255, 0.25), 0 28px 80px rgba(0, 0, 0, 0.7);
}

/* ── Atmosphere ─────────────────────────────────────────────────────────── */
body.dark-mode {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(47, 139, 255, 0.20), transparent 60%),
    radial-gradient(760px 520px at -4% 104%, rgba(255, 150, 40, 0.10), transparent 62%),
    #040a1c;
  color: var(--text);
}
.dark-mode .main-content { background: transparent; }
.dark-mode .content-header {
  background: rgba(6, 13, 38, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--spark-line);
}
.dark-mode .dashboard-widgets { background: transparent; }

h1, h2, h3, .dashboard-page-title, .kysteno-brand-name, .auth-brand-name { font-family: var(--spark-font); letter-spacing: 0.005em; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.dark-mode .sidebar {
  background: linear-gradient(180deg, #050c24 0%, #040a1c 55%, #03071a 100%);
  border-right: 1px solid var(--spark-line);
  box-shadow: 1px 0 0 rgba(47, 139, 255, 0.05), 12px 0 40px rgba(0, 0, 0, 0.35);
}
.kysteno-brand-name {
  font-weight: 700; font-size: 17px; line-height: 1.1;
  background: linear-gradient(90deg, #ffb02e 0%, #ff9a1f 40%, #3fd3ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kysteno-brand-sub { letter-spacing: 0.28em !important; font-size: 9.5px !important; color: var(--text-muted) !important; text-transform: uppercase; }
.kysteno-brand-logo, .sidebar-logo-compact { object-fit: contain; }

.sidebar-nav .nav-item, .sidebar-nav button, .sidebar-nav a { transition: background 0.18s, box-shadow 0.18s, color 0.18s; }
.dark-mode .sidebar-nav .active, .dark-mode .sidebar-nav .nav-item.active, .dark-mode .sidebar-nav [aria-current="page"] {
  background: linear-gradient(90deg, rgba(47, 139, 255, 0.22), rgba(47, 139, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(80, 140, 255, 0.35), 0 0 18px rgba(47, 139, 255, 0.16);
}
.sidebar-section-title, .sidebar-quick-title, .dashboard-section-label { letter-spacing: 0.22em; text-transform: uppercase; font-size: 10.5px; }

/* ── Header + search + create ───────────────────────────────────────────── */
.dark-mode .header-search { background: rgba(7, 18, 44, 0.8); border: 1px solid var(--spark-line); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
.dark-mode .header-search:focus-within { border-color: var(--spark-cyan); box-shadow: 0 0 0 3px rgba(63, 211, 255, 0.16), 0 0 22px rgba(47, 139, 255, 0.25); }
.header-create-btn {
  background: linear-gradient(135deg, #1f6bff 0%, #2f8bff 55%, #3fb2ff 100%) !important;
  border: 1px solid rgba(120, 190, 255, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(47, 139, 255, 0.25), 0 6px 20px rgba(47, 139, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff !important; font-weight: 600; letter-spacing: 0.01em;
  transition: transform 0.15s, box-shadow 0.2s;
}
.header-create-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.5), 0 10px 28px rgba(47, 139, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* ── Cards / widgets / tables ───────────────────────────────────────────── */
.dark-mode .dashboard-widgets > *, .dark-mode .widget, .dark-mode .dash-widget, .dark-mode .dashboard-card, .dark-mode [class*="widget-card"] {
  background: linear-gradient(160deg, rgba(14, 32, 80, 0.62), rgba(8, 18, 46, 0.72));
  border: 1px solid var(--spark-line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}
.dark-mode .daily-focus-card {
  background: linear-gradient(135deg, rgba(255, 176, 46, 0.10), rgba(47, 139, 255, 0.14));
  border: 1px solid rgba(255, 176, 46, 0.3);
  box-shadow: 0 0 40px rgba(255, 150, 40, 0.10), 0 0 60px rgba(47, 139, 255, 0.12);
}
.dashboard-page-title { font-weight: 700; }
.dark-mode table, .dark-mode .dashboard-table { border-color: var(--spark-line); }
.dark-mode thead th, .dark-mode .dash-table-head { letter-spacing: 0.16em; text-transform: uppercase; font-size: 10.5px; color: var(--text-muted); }

/* ── Buttons & inputs (generic polish) ──────────────────────────────────── */
.dark-mode input, .dark-mode textarea, .dark-mode select { background: var(--bg-input); border-color: var(--spark-line); color: var(--text); }
.dark-mode input:focus, .dark-mode textarea:focus, .dark-mode select:focus { outline: none; border-color: var(--spark-cyan); box-shadow: 0 0 0 3px rgba(63, 211, 255, 0.15); }
.dark-mode .modal, .dark-mode .modal-content { background: linear-gradient(160deg, #0b1a40, #07112c); border: 1px solid var(--spark-line); box-shadow: var(--shadow-modal); }

/* ── Login screen: a living KORA halo behind the card ───────────────────── */
.auth-screen {
  background:
    radial-gradient(900px 560px at 50% 38%, rgba(47, 139, 255, 0.22), transparent 62%),
    radial-gradient(700px 480px at 12% 100%, rgba(255, 150, 40, 0.14), transparent 62%),
    linear-gradient(180deg, #060d26, #030612) !important;
  overflow: hidden;
}
/* "Powered with KORA": the login-screen signature for every KaiMa product (bottom right of the card) */
.kora-powered { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 18px -6px -22px 0; font-size: 22px; letter-spacing: .06em; color: var(--text-muted); }
.kora-powered, .kora-powered span { white-space: nowrap; }
@media (max-width: 420px) { .kora-powered { font-size: 16px; gap: 4px; } .kora-powered-orb { width: 64px; height: 64px; } .kora-powered-orb canvas { width: 64px !important; height: 64px !important; } }
.kora-powered-name { font-weight: 700; letter-spacing: .14em; background: linear-gradient(90deg, #ffb02e, #3fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kora-powered-orb { width: 76px; height: 76px; display: inline-block; margin: -16px -4px -16px 0; }
.kora-powered-orb canvas { width: 76px !important; height: 76px !important; }
.auth-container {
  position: relative; z-index: 2;
  background: linear-gradient(160deg, rgba(12, 28, 70, 0.78), rgba(6, 14, 38, 0.86)) !important;
  border: 1px solid var(--spark-line) !important;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 80px rgba(47, 139, 255, 0.14) !important;
  backdrop-filter: blur(16px);
  color: var(--text);
}
.auth-logo-img { width: 92px !important; height: auto !important; max-height: 86px; object-fit: contain; margin: 0 auto 6px; display: block; }
.auth-brand-name { text-align: center; font-size: 26px; font-weight: 700; background: linear-gradient(90deg, #ffb02e, #ff9a1f 40%, #3fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-logo p { letter-spacing: 0.3em; text-transform: uppercase; font-size: 10.5px; color: var(--text-muted) !important; text-align: center; }
.auth-container input { background: rgba(5, 14, 38, 0.8) !important; border: 1px solid var(--spark-line) !important; color: var(--text) !important; }
.auth-container input:focus { border-color: var(--spark-cyan) !important; box-shadow: 0 0 0 3px rgba(63, 211, 255, 0.16), 0 0 20px rgba(47, 139, 255, 0.25) !important; }
.auth-container button[type="submit"], .auth-container .auth-btn, #loginBtn, #signupBtn {
  background: linear-gradient(135deg, #1f6bff, #3fb2ff) !important; border: 1px solid rgba(120, 190, 255, 0.5) !important;
  box-shadow: 0 6px 22px rgba(47, 139, 255, 0.45) !important; color: #fff !important; font-weight: 600;
}
.auth-tab { color: var(--text-muted); } .auth-tab.active { color: var(--spark-cyan) !important; border-color: var(--spark-cyan) !important; }

/* ── KORA: floating button (replaces the little brain) ──────────────────── */
.ai-chat-widget { bottom: 34px; right: 38px; }
.ai-chat-button.kora-fab-btn {
  position: relative; width: 74px; height: 74px; padding: 0; border-radius: 50%; overflow: visible; cursor: pointer;
  border: none; background: transparent; box-shadow: none;       /* the glass sphere is its own button face */
  transition: transform 0.25s ease, filter 0.3s ease;
}
.ai-chat-button.kora-fab-btn:hover { transform: scale(1.06); background: transparent; box-shadow: none; filter: brightness(1.12); }
.ai-chat-button.kora-fab-btn:focus-visible { outline: 2px solid var(--spark-cyan); outline-offset: 4px; }.kora-fab { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.kora-fab canvas { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }

/* chat window chrome */
.ai-chat-messages::before, .dark-mode .ai-chat-messages::before { background-image: none !important; }   /* old brain watermark */
.dark-mode .ai-chat-window { background: #050b1f; border-left: 1px solid var(--spark-line); box-shadow: -20px 0 80px rgba(0, 0, 0, 0.6), -2px 0 40px rgba(47, 139, 255, 0.12); }
.dark-mode .ai-chat-main, .dark-mode .ai-chat-header { background: transparent; }
.dark-mode .ai-chat-messages { background: radial-gradient(520px 360px at 50% 26%, rgba(47, 139, 255, 0.14), transparent 70%), #050b1f; }
.dark-mode .ai-sidebar, .dark-mode .ai-sidebar.expanded { background: #040a1c !important; border-right: 1px solid var(--spark-line); }
.dark-mode .ai-sidebar .ai-nav-btn:hover, .dark-mode .ai-new-chat-link:hover { background: rgba(47, 139, 255, 0.14); }
.dark-mode .ai-chat-input-container, .dark-mode .ai-input-wrapper, .dark-mode .ai-chat-input-area { background: transparent; }
.dark-mode .ai-input-box, .dark-mode .ai-chat-input-box { background: rgba(8, 20, 52, 0.9); border: 1px solid var(--spark-line); box-shadow: 0 0 24px rgba(47, 139, 255, 0.12); }
.dark-mode .ai-send-btn, .dark-mode #aiSendBtn { background: linear-gradient(135deg, #1f6bff, #3fb2ff) !important; box-shadow: 0 0 16px rgba(47, 139, 255, 0.55); }
.ai-chat-header { border-bottom: 1px solid var(--spark-line); }
.ai-header-left { display: flex; align-items: center; gap: 8px; }
.kora-header-orb { position: relative; width: 38px; height: 38px; display: inline-block; flex: none; }
.kora-header-orb canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.kora-header-name { font-family: var(--spark-font); font-weight: 700; letter-spacing: 0.22em; font-size: 13px; background: linear-gradient(90deg, #ffb02e, #3fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-chat-title { color: var(--text-muted); font-size: 13px; margin-left: 6px; }

/* empty state: "Hello! I'm KORA." */
.ai-empty-state { text-align: center; padding-top: 6vh; }
.kora-empty-orb { position: relative; width: 280px; height: 230px; margin: 0 auto; }
.kora-empty-orb canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ai-empty-state h3, .dark-mode .ai-empty-state h3 { color: transparent !important; font-family: var(--spark-font); font-size: 30px; font-weight: 700; margin: 0 0 6px; background: linear-gradient(90deg, #ffb02e, #ff9a1f 35%, #3fd3ff 75%, #2f8bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-empty-state p { color: var(--text-secondary); max-width: 44ch; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) { .ai-chat-button.kora-fab-btn, .header-create-btn { transition: none; } }
@media (max-width: 700px) { .ai-chat-widget { bottom: 18px; right: 18px; } }

/* ── Replace the old Kysteno artwork injected via CSS `content: url(...)` ───────────────────────── */
.auth-logo-img, .dark-mode .auth-logo-img { content: normal !important; }
.sidebar-logo, .dark-mode .sidebar-logo, .dashboard-logo-small, .dark-mode .dashboard-logo-small { content: url("../icons/kaima-note-mark-dark.png") !important; }
/* light theme uses the opaque white-background artwork */
body:not(.dark-mode) .kysteno-brand-logo, body:not(.dark-mode) .auth-logo-img, body:not(.dark-mode) .sidebar-logo, body:not(.dark-mode) .dashboard-logo-small { content: url("../icons/kaima-note-mark-light.png") !important; }

/* the AI button must not float over the login screen */
.ai-chat-widget[data-kora-hidden="1"], .ai-chat-widget[data-kora-hidden="1"] * { display: none !important; }
/* ==========================================================================
   PAGE VIEW · EDITOR · GUTTER · MODALS  (Spark polish)
   ========================================================================== */

/* faint KaiMa Note watermark instead of the old Kysteno artwork */
.main-content::before, .dark-mode .main-content::before { background-image: url("../icons/kaima-note-mark-dark.png") !important; opacity: 0.05 !important; filter: saturate(1.2); }
body:not(.dark-mode) .main-content::before { background-image: url("../icons/kaima-note-mark-light.png") !important; opacity: 0.028 !important; mix-blend-mode: multiply; }

/* ── page title row ─────────────────────────────────────────────────────── */
.page-editor, .page-viewer, #pageViewer { background: transparent; }
#viewerPageTitle, .page-title, .page-title-input, #editorPageTitle { font-family: var(--spark-font); font-weight: 700; letter-spacing: 0.005em; }
.dark-mode .page-icon-wrapper svg, .dark-mode .page-icon-wrapper i { filter: drop-shadow(0 0 10px rgba(63, 211, 255, 0.35)); }
.dark-mode .page-icon-wrapper [class*="badge"], .dark-mode .editing-badge, .dark-mode .page-icon-wrapper > span:not([class*="icon"]) {
  background: rgba(47, 139, 255, 0.16); color: var(--spark-cyan); border: 1px solid rgba(63, 211, 255, 0.35);
  border-radius: 999px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px;
}

/* ── editor toolbar: a floating glass instrument panel ──────────────────── */
.dark-mode .tiptap-toolbar, .dark-mode #tiptap-toolbar {
  background: linear-gradient(160deg, rgba(16, 38, 92, 0.92), rgba(7, 16, 42, 0.94));
  border: 1px solid var(--spark-line); border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(47, 139, 255, 0.10);
  backdrop-filter: blur(12px);
}
.dark-mode .tiptap-toolbar-group { border-color: var(--spark-line); }
.dark-mode .tiptap-toolbar button { border-radius: 8px; color: var(--text-secondary); transition: background 0.15s, color 0.15s, box-shadow 0.2s; }
.dark-mode .tiptap-toolbar button:hover { background: rgba(47, 139, 255, 0.18); color: #fff; }
.dark-mode .tiptap-toolbar button.is-active {
  background: linear-gradient(135deg, rgba(31, 107, 255, 0.55), rgba(63, 178, 255, 0.35));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(120, 190, 255, 0.55), 0 0 14px rgba(47, 139, 255, 0.45);
}
.dark-mode .tiptap-toolbar select { background: rgba(5, 14, 38, 0.85); border: 1px solid var(--spark-line); border-radius: 8px; color: var(--text); }
.dark-mode .tiptap-toolbar [class*="sep"], .dark-mode .tiptap-toolbar .divider { background: var(--spark-line); }

/* ── writing surface ────────────────────────────────────────────────────── */
.dark-mode .tiptap.ProseMirror { caret-color: var(--spark-cyan); color: var(--text); }
.dark-mode .tiptap.ProseMirror ::selection, .dark-mode .page-viewer ::selection, .dark-mode #pageViewer ::selection { background: rgba(63, 211, 255, 0.28); }
.dark-mode .tiptap.ProseMirror h1, .dark-mode .tiptap.ProseMirror h2, .dark-mode .tiptap.ProseMirror h3,
.dark-mode #viewerContent h1, .dark-mode #viewerContent h2, .dark-mode #viewerContent h3 { font-family: var(--spark-font); letter-spacing: 0.005em; }
.dark-mode .tiptap.ProseMirror h2, .dark-mode #viewerContent h2 { border-bottom: 1px solid rgba(80, 140, 255, 0.14); padding-bottom: 0.2em; }
.dark-mode .tiptap.ProseMirror a, .dark-mode #viewerContent a { color: var(--spark-cyan); text-decoration-color: rgba(63, 211, 255, 0.4); }
.dark-mode .tiptap.ProseMirror blockquote, .dark-mode #viewerContent blockquote {
  border-left: 3px solid transparent; border-image: linear-gradient(180deg, #ffb02e, #2f8bff) 1;
  background: linear-gradient(90deg, rgba(47, 139, 255, 0.10), transparent 80%); color: var(--text-secondary); border-radius: 0 10px 10px 0;
}
.dark-mode .tiptap.ProseMirror code, .dark-mode #viewerContent :not(pre) > code {
  background: rgba(47, 139, 255, 0.14); color: #9fe3ff; border: 1px solid rgba(80, 140, 255, 0.25); border-radius: 6px; padding: 0.08em 0.4em;
}
.dark-mode .tiptap.ProseMirror table, .dark-mode #viewerContent table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--spark-line); border-radius: 12px; overflow: hidden; }
.dark-mode .tiptap.ProseMirror th, .dark-mode #viewerContent th {
  background: rgba(47, 139, 255, 0.14); color: var(--text-secondary); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; border-color: var(--spark-line);
}
.dark-mode .tiptap.ProseMirror td, .dark-mode #viewerContent td { border-color: rgba(80, 140, 255, 0.16); }
.dark-mode .tiptap.ProseMirror hr, .dark-mode #viewerContent hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, #ffb02e, #2f8bff, transparent); opacity: 0.6; }
.dark-mode .tiptap.ProseMirror ul li::marker, .dark-mode #viewerContent ul li::marker { color: var(--spark-gold); }
.dark-mode .tiptap.ProseMirror ol li::marker, .dark-mode #viewerContent ol li::marker { color: var(--spark-cyan); }

/* ── code blocks, callouts, embeds, databases ───────────────────────────── */
.dark-mode .code-block-wrapper { background: linear-gradient(160deg, rgba(9, 22, 56, 0.9), rgba(4, 10, 28, 0.95)); border: 1px solid var(--spark-line); border-radius: 14px; box-shadow: 0 0 24px rgba(47, 139, 255, 0.08); overflow: hidden; }
.dark-mode .code-block-header, .dark-mode .code-block-wrapper > [class*="header"] { background: rgba(47, 139, 255, 0.10); border-bottom: 1px solid var(--spark-line); letter-spacing: 0.16em; text-transform: uppercase; font-size: 10.5px; }
.dark-mode .code-block-wrapper button { border-radius: 8px; border: 1px solid var(--spark-line); background: rgba(7, 18, 44, 0.8); color: var(--text-secondary); }
.dark-mode .code-block-wrapper button:hover { border-color: var(--spark-cyan); color: #fff; box-shadow: 0 0 12px rgba(63, 211, 255, 0.25); }
.dark-mode .code-block-wrapper [class*="run"], .dark-mode .code-block-wrapper button[onclick*="run" i] { background: linear-gradient(135deg, #1f6bff, #3fb2ff); color: #fff; border-color: rgba(120, 190, 255, 0.5); box-shadow: 0 0 14px rgba(47, 139, 255, 0.45); }
.dark-mode [class*="callout"] { border-radius: 12px; backdrop-filter: blur(6px); box-shadow: 0 0 22px rgba(47, 139, 255, 0.08); }
.dark-mode .tippy-box {
  background: linear-gradient(160deg, #0d1f4a, #070f2b); border: 1px solid var(--spark-line); border-radius: 14px; box-shadow: var(--shadow-popover); color: var(--text);
}

/* ── right-hand gutter ──────────────────────────────────────────────────── */
.dark-mode #pageGutter, .dark-mode .page-gutter {
  background: linear-gradient(180deg, rgba(6, 14, 38, 0.9), rgba(4, 9, 26, 0.94));
  border-left: 1px solid var(--spark-line); backdrop-filter: blur(14px);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
}
.dark-mode .gutter-section {
  background: linear-gradient(160deg, rgba(14, 32, 80, 0.55), rgba(8, 18, 46, 0.6));
  border: 1px solid var(--spark-line); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.gutter-section-title { letter-spacing: 0.22em; text-transform: uppercase; font-size: 10px; font-weight: 600; color: var(--text-muted); }
.gutter-meta-label { color: var(--text-muted); } .gutter-meta-value { color: var(--text); font-weight: 600; }
.gutter-ask-ai-btn {
  background: linear-gradient(135deg, #1f6bff 0%, #2f8bff 55%, #3fb2ff 100%) !important; border: 1px solid rgba(120, 190, 255, 0.5) !important; color: #fff !important;
  border-radius: 12px; font-weight: 600; box-shadow: 0 0 0 1px rgba(47, 139, 255, 0.25), 0 8px 22px rgba(47, 139, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gutter-ask-ai-btn:hover { box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.5), 0 12px 30px rgba(47, 139, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.dark-mode .mm-remember-btn, .dark-mode .gutter-prefill-btn, .dark-mode .gutter-suggest-btn { background: rgba(7, 18, 44, 0.8); border: 1px solid var(--spark-line); border-radius: 10px; color: var(--text-secondary); }
.dark-mode .mm-remember-btn:hover, .dark-mode .gutter-prefill-btn:hover, .dark-mode .gutter-suggest-btn:hover { border-color: var(--spark-cyan); color: #fff; box-shadow: 0 0 14px rgba(63, 211, 255, 0.2); }
.page-status-badge { border-radius: 999px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; border: 1px solid rgba(255, 176, 46, 0.5); color: var(--spark-gold); background: rgba(255, 176, 46, 0.08); padding: 3px 12px; }
.dark-mode .page-owner { background: linear-gradient(160deg, rgba(14, 32, 80, 0.55), rgba(8, 18, 46, 0.6)); border: 1px solid var(--spark-line); border-radius: 14px; }
.owner-avatar { background: linear-gradient(135deg, #ffb02e, #2f8bff) !important; color: #04102e !important; font-weight: 700; box-shadow: 0 0 14px rgba(63, 211, 255, 0.35); }
.owner-label { letter-spacing: 0.2em; text-transform: uppercase; font-size: 9.5px; color: var(--text-muted); }

/* ── modals ─────────────────────────────────────────────────────────────── */
.dark-mode .modal-overlay, .dark-mode [class*="modal-overlay"], .dark-mode .bulk-modal-overlay, .dark-mode .mm-modal-overlay { background: rgba(2, 6, 20, 0.72); backdrop-filter: blur(8px); }
.dark-mode .modal, .dark-mode .mm-panel-modal, .dark-mode .mm-confirm-modal, .dark-mode .bulk-modal, .dark-mode .api-docs-modal {
  background: linear-gradient(160deg, rgba(14, 32, 80, 0.96), rgba(6, 14, 38, 0.98)) !important;
  border: 1px solid rgba(80, 140, 255, 0.3) !important; border-radius: 20px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 80px rgba(47, 139, 255, 0.14) !important; color: var(--text);
}
.modal h2, .modal h3, .mm-modal-title, .bulk-modal-header h2, .bulk-modal-header h3 { font-family: var(--spark-font); font-weight: 700; }
.dark-mode .modal h2, .dark-mode .modal h3, .dark-mode .mm-modal-title { background: linear-gradient(90deg, #ffb02e, #ff9a1f 35%, #3fd3ff 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark-mode .modal-input, .dark-mode .modal input, .dark-mode .modal textarea, .dark-mode .modal select { background: rgba(5, 14, 38, 0.85) !important; border: 1px solid var(--spark-line) !important; border-radius: 12px; color: var(--text) !important; }
.dark-mode .modal-input:focus, .dark-mode .modal input:focus, .dark-mode .modal textarea:focus { border-color: var(--spark-cyan) !important; box-shadow: 0 0 0 3px rgba(63, 211, 255, 0.16), 0 0 20px rgba(47, 139, 255, 0.22) !important; }
.modal-actions button, .mm-modal-actions button, .bulk-modal-footer button { border-radius: 12px; font-weight: 600; transition: transform 0.15s, box-shadow 0.2s; }
.dark-mode .modal-actions button, .dark-mode .mm-modal-actions button, .dark-mode .bulk-modal-footer button { background: rgba(7, 18, 44, 0.8); border: 1px solid var(--spark-line); color: var(--text-secondary); }
.dark-mode .modal-actions button:last-child, .dark-mode .mm-modal-actions button:last-child, .dark-mode .bulk-modal-footer button:last-child {
  background: linear-gradient(135deg, #1f6bff, #3fb2ff); border-color: rgba(120, 190, 255, 0.5); color: #fff; box-shadow: 0 6px 20px rgba(47, 139, 255, 0.45);
}
.dark-mode .modal-actions button:hover, .dark-mode .mm-modal-actions button:hover { transform: translateY(-1px); }
.dark-mode .mm-modal-close, .dark-mode .bulk-modal-close { color: var(--text-muted); } .dark-mode .mm-modal-close:hover, .dark-mode .bulk-modal-close:hover { color: #fff; }

/* template picker cards (New Page) */
.dark-mode [class*="template-card"], .dark-mode .template-option { background: linear-gradient(160deg, rgba(14, 32, 80, 0.55), rgba(8, 18, 46, 0.6)); border: 1px solid var(--spark-line); border-radius: 14px; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.dark-mode [class*="template-card"]:hover, .dark-mode .template-option:hover { border-color: rgba(255, 176, 46, 0.55); box-shadow: 0 0 24px rgba(255, 150, 40, 0.14); transform: translateY(-1px); }

/* ==========================================================================
   PHONE WIDTH (≤700px)
   ========================================================================== */
@media (max-width: 700px) {
  /* announcement banner pushes the page down 38px: move the fixed hamburger with it */
  body.kymanote-has-ann .mobile-hamburger-fixed { top: 50px; }
  body.kymanote-impersonating.kymanote-has-ann .mobile-hamburger-fixed { top: 94px; }
  .dark-mode .mobile-hamburger-fixed { background: rgba(7, 18, 44, 0.92); border-color: var(--spark-line); box-shadow: 0 0 18px rgba(47, 139, 255, 0.25); backdrop-filter: blur(8px); }

  /* header: everything must fit in one row */
  .content-header { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .header-search { flex: 1 1 auto; min-width: 0; width: auto; }
  .header-search-input { min-width: 0; }
  .header-search-shortcut { display: none; }
  .header-create-btn { font-size: 0 !important; padding: 0 !important; width: 38px; min-width: 38px; height: 38px; justify-content: center; gap: 0; }
  .header-create-btn svg, .header-create-btn i { width: 18px; height: 18px; font-size: 18px; margin: 0; }
  .header-icon-btn { width: 34px; height: 34px; flex: none; }

  /* floating KORA button a little smaller and clear of the bottom edge */
  .ai-chat-widget { bottom: 14px; right: 10px; }
  .ai-chat-button.kora-fab-btn { width: 62px; height: 62px; }

  /* chat takes the whole screen */
  .ai-chat-window { width: 100vw; min-width: 0; max-width: none; }
  .kora-empty-orb { height: 190px; transform: scale(0.85); }
  .ai-empty-state h3 { font-size: 24px; }

  /* modals */
  .modal, .mm-panel-modal, .mm-confirm-modal, .bulk-modal, .api-docs-modal { width: calc(100vw - 20px) !important; max-width: none !important; max-height: calc(100vh - 28px); }
  .template-grid { grid-template-columns: 1fr 1fr; }

  /* page title row: let the action buttons wrap under the icon instead of running off-screen */
  .viewer-icon-wrapper, .page-icon-wrapper { flex-wrap: wrap; gap: 8px; }
  #viewerActions, .viewer-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 4px 6px; }
  .viewer-actions .action-btn { padding: 6px 10px; }
}

/* the announcement / impersonation banner is fixed at the top: keep the chat's header (and its close button) below it */
body.kymanote-has-ann .ai-chat-window { top: 38px; height: calc(100vh - 38px); }
body.kymanote-impersonating.kymanote-has-ann .ai-chat-window { top: 82px; height: calc(100vh - 82px); }

/* ==========================================================================
   SLASH MENU · CALLOUTS · COMMAND PALETTE
   ========================================================================== */

/* ── slash menu ─────────────────────────────────────────────────────────── */
.dark-mode .slash-menu {
  background: linear-gradient(160deg, #0d1f4a, #070f2b); border: 1px solid rgba(80, 140, 255, 0.3); border-radius: 16px; padding: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 34px rgba(47, 139, 255, 0.14);
}
.slash-menu-item { border-radius: 10px; transition: background 0.12s, box-shadow 0.15s; }
.dark-mode .slash-menu-item:hover, .dark-mode .slash-menu-item.active { background: linear-gradient(90deg, rgba(47, 139, 255, 0.26), rgba(47, 139, 255, 0.06)); box-shadow: inset 0 0 0 1px rgba(80, 140, 255, 0.35); }
.dark-mode .slash-menu-icon { background: rgba(47, 139, 255, 0.14); border: 1px solid rgba(80, 140, 255, 0.28); border-radius: 8px; color: var(--spark-cyan); }
.dark-mode .slash-menu-item.active .slash-menu-icon { border-color: rgba(255, 176, 46, 0.55); color: var(--spark-gold); box-shadow: 0 0 12px rgba(255, 150, 40, 0.25); }
.dark-mode .slash-menu-label { color: var(--text); }
.dark-mode .slash-menu::-webkit-scrollbar-thumb { background: rgba(80, 140, 255, 0.35); border-radius: 4px; }

/* ── callouts ───────────────────────────────────────────────────────────── */
.callout-panel { border-radius: 14px; border: 1px solid transparent; border-left-width: 4px; padding: 14px 18px; }
.callout-title-view, .callout-title-field { font-family: var(--spark-font); letter-spacing: 0.01em; }
.callout-info { background: #e3eeff; border-left-color: #1f6bff; }
.callout-note { border-left-color: #7c5cff; }
.dark-mode .callout-panel { backdrop-filter: blur(6px); }
.dark-mode .callout-info    { background: linear-gradient(90deg, rgba(47, 139, 255, 0.18), rgba(47, 139, 255, 0.05)); border-color: rgba(80, 140, 255, 0.28); border-left-color: #2f8bff; box-shadow: 0 0 26px rgba(47, 139, 255, 0.10); }
.dark-mode .callout-success { background: linear-gradient(90deg, rgba(47, 224, 138, 0.16), rgba(47, 224, 138, 0.04)); border-color: rgba(47, 224, 138, 0.25); border-left-color: #2fe08a; box-shadow: 0 0 26px rgba(47, 224, 138, 0.08); }
.dark-mode .callout-warning { background: linear-gradient(90deg, rgba(255, 176, 46, 0.18), rgba(255, 176, 46, 0.04)); border-color: rgba(255, 176, 46, 0.3); border-left-color: #ffb02e; box-shadow: 0 0 26px rgba(255, 150, 40, 0.10); }
.dark-mode .callout-error   { background: linear-gradient(90deg, rgba(255, 90, 110, 0.18), rgba(255, 90, 110, 0.04)); border-color: rgba(255, 90, 110, 0.3); border-left-color: #ff5a6e; box-shadow: 0 0 26px rgba(255, 90, 110, 0.08); }
.dark-mode .callout-note    { background: linear-gradient(90deg, rgba(150, 120, 255, 0.18), rgba(150, 120, 255, 0.04)); border-color: rgba(150, 120, 255, 0.3); border-left-color: #9b7bff; box-shadow: 0 0 26px rgba(150, 120, 255, 0.08); }
.dark-mode .callout-title-view, .dark-mode .callout-title-field { color: #fff; }
/* the type picker in the "insert callout" modal */
.dark-mode .callout-type-option { background: linear-gradient(160deg, rgba(14, 32, 80, 0.55), rgba(8, 18, 46, 0.6)); border: 1px solid var(--spark-line); border-radius: 14px; color: var(--text); }
.dark-mode .callout-type-option:hover { border-color: rgba(255, 176, 46, 0.55); box-shadow: 0 0 24px rgba(255, 150, 40, 0.14); }
.dark-mode .callout-type-option.callout-info { border-left: 4px solid #2f8bff; } .dark-mode .callout-type-option.callout-success { border-left: 4px solid #2fe08a; }
.dark-mode .callout-type-option.callout-warning { border-left: 4px solid #ffb02e; } .dark-mode .callout-type-option.callout-error { border-left: 4px solid #ff5a6e; }
.dark-mode .callout-type-option.callout-note { border-left: 4px solid #9b7bff; }

/* ── command palette (Ctrl/Cmd + K) ─────────────────────────────────────── */
.dark-mode .cmd-backdrop { background: rgba(2, 6, 20, 0.72); backdrop-filter: blur(8px); }
.dark-mode .cmd-palette {
  background: linear-gradient(160deg, rgba(14, 32, 80, 0.97), rgba(5, 12, 34, 0.98)); border: 1px solid rgba(80, 140, 255, 0.32); border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 80px rgba(47, 139, 255, 0.16);
}
.dark-mode .cmd-input-row { border-bottom: 1px solid var(--spark-line); }
.dark-mode .cmd-search-icon { color: var(--spark-cyan); }
.dark-mode .cmd-input { font-family: var(--spark-font); }
.dark-mode .cmd-esc-hint, .dark-mode .cmd-shortcut kbd, .dark-mode .cmd-footer kbd { background: rgba(47, 139, 255, 0.12); border-color: var(--spark-line); color: var(--text-secondary); }
.dark-mode .cmd-group { letter-spacing: 0.22em; color: var(--text-muted); }
.dark-mode .cmd-item:hover { background: rgba(47, 139, 255, 0.12); }
.dark-mode .cmd-item.is-active { background: linear-gradient(90deg, rgba(47, 139, 255, 0.28), rgba(47, 139, 255, 0.05)); box-shadow: inset 3px 0 0 var(--spark-gold); }
.dark-mode .cmd-icon { background: rgba(47, 139, 255, 0.12); border-color: rgba(80, 140, 255, 0.28); color: var(--spark-cyan); border-radius: 9px; }
.dark-mode .cmd-icon.teal, .dark-mode .cmd-icon.blue { background: rgba(47, 139, 255, 0.16); border-color: rgba(80, 140, 255, 0.35); color: #6fb4ff; }
.dark-mode .cmd-icon.orange { background: rgba(255, 176, 46, 0.14); border-color: rgba(255, 176, 46, 0.35); color: var(--spark-gold); }
.dark-mode .cmd-icon.green { background: rgba(47, 224, 138, 0.12); border-color: rgba(47, 224, 138, 0.3); color: #2fe08a; }
.dark-mode .cmd-icon.purple { background: rgba(150, 120, 255, 0.14); border-color: rgba(150, 120, 255, 0.35); color: #b8a2ff; }
.dark-mode .cmd-label mark { background: rgba(255, 176, 46, 0.22); color: var(--spark-gold); }
.dark-mode .cmd-footer { border-top: 1px solid var(--spark-line); }
.dark-mode .cmd-results::-webkit-scrollbar-thumb { background: rgba(80, 140, 255, 0.35); }
@media (max-width: 640px) {
  body.kymanote-has-ann .cmd-palette { top: 38px; max-height: calc(80vh - 38px); }
  body.kymanote-impersonating.kymanote-has-ann .cmd-palette { top: 82px; }
}

/* ==========================================================================
   IMPORT · API DOCS · BULK modals
   ========================================================================== */
.dark-mode .import-modal {
  background: linear-gradient(160deg, rgba(14, 32, 80, 0.96), rgba(6, 14, 38, 0.98));
  border: 1px solid rgba(80, 140, 255, 0.3); border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 80px rgba(47, 139, 255, 0.14);
}
.import-modal h2, .import-modal h3, .api-docs-modal-header h2, .api-docs-modal-header h3, .api-docs-modal-header [class*="title"], .bulk-modal-header h2, .bulk-modal-header h3, .bulk-modal-header [class*="title"] { font-family: var(--spark-font); font-weight: 700; }
.dark-mode .import-modal h2, .dark-mode .import-modal h3 { background: linear-gradient(90deg, #ffb02e, #ff9a1f 35%, #3fd3ff 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark-mode .api-docs-modal-header, .dark-mode .bulk-modal-header { border-bottom: 1px solid var(--spark-line); }
.dark-mode .api-docs-modal-footer, .dark-mode .bulk-modal-footer { border-top: 1px solid var(--spark-line); }

/* tabs */
.dark-mode .import-tab { color: var(--text-muted); transition: color 0.15s; }
.dark-mode .import-tab.active { color: var(--spark-cyan); border-bottom-color: transparent !important; border-image: linear-gradient(90deg, #ffb02e, #2f8bff) 1; }
.dark-mode .api-docs-source-tabs { background: rgba(5, 14, 38, 0.85) !important; border: 1px solid var(--spark-line) !important; border-radius: 12px; padding: 3px; }
.dark-mode .api-docs-source-tab { background: transparent !important; color: var(--text-secondary) !important; border-radius: 9px; transition: background 0.15s, box-shadow 0.2s; }
.dark-mode .api-docs-source-tab.active { background: linear-gradient(135deg, #1f6bff, #3fb2ff) !important; color: #fff !important; box-shadow: 0 0 16px rgba(47, 139, 255, 0.5); }

/* import steps + drop zones */
.dark-mode .import-step-num { background: linear-gradient(135deg, #ffb02e, #2f8bff) !important; color: #04102e !important; font-weight: 700; box-shadow: 0 0 12px rgba(63, 211, 255, 0.35); }
.dark-mode .import-dropzone, .dark-mode .api-docs-file-drop { border: 1.5px dashed rgba(63, 211, 255, 0.4) !important; background: rgba(47, 139, 255, 0.06) !important; border-radius: 16px; transition: border-color 0.2s, box-shadow 0.25s, background 0.2s; }
.dark-mode .import-dropzone:hover, .dark-mode .api-docs-file-drop:hover, .dark-mode .import-dropzone.dragover, .dark-mode .api-docs-file-drop.dragover { border-color: rgba(255, 176, 46, 0.7) !important; background: rgba(255, 176, 46, 0.06) !important; box-shadow: 0 0 30px rgba(255, 150, 40, 0.14), inset 0 0 30px rgba(47, 139, 255, 0.08); }
.dark-mode .import-select, .dark-mode .api-docs-url-input { background: rgba(5, 14, 38, 0.85) !important; border: 1px solid var(--spark-line) !important; border-radius: 12px; color: var(--text) !important; }
.dark-mode .import-select:focus, .dark-mode .api-docs-url-input:focus { border-color: var(--spark-cyan) !important; box-shadow: 0 0 0 3px rgba(63, 211, 255, 0.16), 0 0 20px rgba(47, 139, 255, 0.22) !important; outline: none; }
.dark-mode .api-docs-url-hint { color: var(--text-muted); }

/* API spec preview */
.dark-mode .api-docs-spec-card, .dark-mode .api-docs-stat, .dark-mode .api-docs-tag-row { background: linear-gradient(160deg, rgba(14, 32, 80, 0.55), rgba(8, 18, 46, 0.6)); border: 1px solid var(--spark-line); border-radius: 14px; }
.dark-mode .api-docs-stat-label { letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; color: var(--text-muted); }
.dark-mode .api-docs-stat-value { font-family: var(--spark-font); font-weight: 700; background: linear-gradient(90deg, #ffb02e, #3fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark-mode .api-docs-badge { background: rgba(255, 176, 46, 0.12); border: 1px solid rgba(255, 176, 46, 0.4); color: var(--spark-gold); border-radius: 999px; }
.dark-mode .api-docs-badge-teal { background: rgba(63, 211, 255, 0.12); border-color: rgba(63, 211, 255, 0.4); color: var(--spark-cyan); }
.dark-mode .api-docs-badge-mono { background: rgba(47, 139, 255, 0.12); border-color: rgba(80, 140, 255, 0.35); color: #9fc8ff; }

/* bulk select bar + dialogs */
.dark-mode #bulkActionBar, .dark-mode .bulk-bar { background: linear-gradient(160deg, rgba(14, 32, 80, 0.96), rgba(6, 14, 38, 0.98)); border: 1px solid rgba(80, 140, 255, 0.35); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(47, 139, 255, 0.16); backdrop-filter: blur(12px); }
.dark-mode .bulk-bar-count { font-family: var(--spark-font); color: var(--spark-gold); }
.dark-mode .bulk-btn { background: rgba(7, 18, 44, 0.8); border: 1px solid var(--spark-line); border-radius: 10px; color: var(--text-secondary); transition: border-color 0.15s, box-shadow 0.2s, color 0.15s; }
.dark-mode .bulk-btn:hover { border-color: var(--spark-cyan); color: #fff; box-shadow: 0 0 14px rgba(63, 211, 255, 0.22); }
.dark-mode .bulk-btn-danger { border-color: rgba(255, 90, 110, 0.4); color: #ff8a98; } .dark-mode .bulk-btn-danger:hover { border-color: #ff5a6e; box-shadow: 0 0 16px rgba(255, 90, 110, 0.3); color: #fff; }
.dark-mode .bulk-overlay { background: rgba(2, 6, 20, 0.72); backdrop-filter: blur(8px); }
.dark-mode .bulk-picker-item, .dark-mode .bulk-tag-chip, .dark-mode .bulk-delete-item, .dark-mode .bulk-export-fmt-row { background: rgba(7, 18, 44, 0.7); border: 1px solid var(--spark-line); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.2s; }
.dark-mode .bulk-picker-item:hover, .dark-mode .bulk-tag-chip:hover, .dark-mode .bulk-export-fmt-row:hover { border-color: rgba(255, 176, 46, 0.55); box-shadow: 0 0 18px rgba(255, 150, 40, 0.12); }
.dark-mode .bulk-delete-warning { background: linear-gradient(90deg, rgba(255, 90, 110, 0.16), rgba(255, 90, 110, 0.04)); border: 1px solid rgba(255, 90, 110, 0.3); border-left: 4px solid #ff5a6e; border-radius: 12px; }
.dark-mode .bulk-cb:checked, .dark-mode .bulk-cb.checked { box-shadow: 0 0 10px rgba(63, 211, 255, 0.5); }

/* keep the KORA button clear of the bulk-select bar while it is open */
body:has(#bulkActionBar.active) .ai-chat-widget { bottom: 104px; }
/* ── login: forgot / reset password ─────────────────────────────────────── */
.auth-link { display: block; width: 100%; margin-top: 12px; padding: 4px; background: none !important; border: none !important; box-shadow: none !important; color: var(--spark-cyan, #1f6bff); font-size: 13px; text-align: center; cursor: pointer; text-decoration: none; }
.auth-link:hover { text-decoration: underline; color: #fff; }
body:not(.dark-mode) .auth-link { color: var(--primary); } body:not(.dark-mode) .auth-link:hover { color: var(--primary-hover); }
.auth-form-note { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); text-align: center; }
/* ═══ Calendar — KaiMa Lane glass tiles ═══════════════════════════════ */
.mini-calendar { perspective: 900px; }
.mini-calendar .calendar-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.mini-calendar .calendar-month, .db-cal-month {
  flex:1; text-align:center; font-size:13px; font-weight:600; letter-spacing:.02em;
  padding:7px 14px; border-radius:999px; min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(235,241,252,.6));
  border:1px solid rgba(60,110,200,.18); box-shadow:0 2px 8px rgba(40,80,160,.10), inset 0 1px 0 #fff;
}
.mini-calendar .calendar-nav-btn, .db-cal-nav {
  width:30px; height:30px; flex:none; border-radius:50%; padding:0; color:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(232,238,250,.6));
  border:1px solid rgba(60,110,200,.18); box-shadow:0 2px 6px rgba(40,80,160,.12), inset 0 1px 0 #fff;
  transition:transform .15s, box-shadow .15s;
}
.mini-calendar .calendar-nav-btn:hover, .db-cal-nav:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(40,80,160,.2), inset 0 1px 0 #fff; }

.mini-calendar .calendar-grid, .db-cal-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
  background:none; border:0; border-radius:0; overflow:visible;
  transform:rotateX(6deg); transform-origin:50% 100%;
}
.mini-calendar .calendar-day-header, .db-cal-dow {
  background:none; padding:2px 0 4px; text-align:center;
  font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.6;
}
.mini-calendar .calendar-day, .db-cal-cell {
  position:relative; border-radius:10px; text-align:center; font-size:12px; font-weight:500;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(236,242,252,.65));
  border:1px solid rgba(60,110,200,.14);
  box-shadow:0 3px 8px rgba(40,80,160,.10), inset 0 1px 0 #fff;
  transition:transform .15s, box-shadow .15s;
}
.mini-calendar .calendar-day { padding:8px 2px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.mini-calendar .calendar-day:hover, .db-cal-cell:hover { transform:translateY(-2px); box-shadow:0 8px 16px rgba(40,80,160,.18), inset 0 1px 0 #fff; }
.mini-calendar .calendar-day.other-month, .db-cal-cell-empty { opacity:.4; box-shadow:none; background:rgba(235,241,252,.35); }
.mini-calendar .calendar-day.today, .db-cal-today-cell {
  color:#1f6bff; font-weight:700; background:linear-gradient(180deg,rgba(47,139,255,.18),rgba(47,139,255,.08));
  border:1.5px solid #2f8bff; box-shadow:0 0 14px rgba(47,139,255,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.mini-calendar .calendar-day.has-event::after { content:""; position:absolute; bottom:4px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#2f8bff; box-shadow:0 0 6px #2f8bff; }
.db-cal-cell { min-height:80px; text-align:left; }
.db-cal-day-num.today { background:#2f8bff; box-shadow:0 0 10px rgba(47,139,255,.6); }

.dark-mode .mini-calendar .calendar-month, .dark-mode .db-cal-month,
.dark-mode .mini-calendar .calendar-nav-btn, .dark-mode .db-cal-nav {
  background:linear-gradient(180deg,rgba(40,70,130,.45),rgba(14,28,64,.7));
  border-color:rgba(120,170,255,.22); box-shadow:0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
.dark-mode .mini-calendar .calendar-day, .dark-mode .db-cal-cell {
  background:linear-gradient(180deg,rgba(40,70,130,.40),rgba(10,22,51,.70));
  border-color:rgba(120,170,255,.16); color:var(--spark-text,#eaf2ff);
  box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09);
}
.dark-mode .mini-calendar .calendar-day:hover, .dark-mode .db-cal-cell:hover { box-shadow:0 10px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); }
.dark-mode .mini-calendar .calendar-day.other-month, .dark-mode .db-cal-cell-empty { background:rgba(10,22,51,.35); box-shadow:none; }
.dark-mode .mini-calendar .calendar-day.today, .dark-mode .db-cal-today-cell {
  color:#9fd0ff; background:linear-gradient(180deg,rgba(47,139,255,.30),rgba(47,139,255,.12));
  border-color:#4ea0ff; box-shadow:0 0 16px rgba(47,139,255,.45), inset 0 1px 0 rgba(255,255,255,.15);
}
@media (max-width:700px) {
  .mini-calendar .calendar-grid, .db-cal-grid { gap:4px; transform:none; }
  .mini-calendar .calendar-day { font-size:11px; border-radius:8px; }
  .db-cal-cell { min-height:56px; }
}

/* ═══ KORA "hold still" toggle — tiny, sits on the orb's corner ═══ */
.kora-calm-btn {
  position:absolute; right:8px; bottom:8px; width:18px; height:18px; padding:0;
  border-radius:50%; font-size:7px; line-height:1; letter-spacing:-1px; cursor:pointer; z-index:3;
  display:flex; align-items:center; justify-content:center;
  color:#cfe3ff; background:rgba(10,22,51,.85); border:1px solid rgba(120,170,255,.35);
  opacity:.45; transition:opacity .15s, transform .15s;
}
.ai-chat-button:hover .kora-calm-btn, .kora-calm-btn:focus-visible { opacity:1; }
.kora-calm-btn:hover { transform:scale(1.15); }
.ai-chat-widget[data-kora-hidden] .kora-calm-btn { display:none; }

/* ═══ User Admin panel + pending-approval screen ═══ */
.ua-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ffb02e; color: #1a1200; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ua-overlay, .ua-pending { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 18, 0.72); backdrop-filter: blur(6px); }
.ua-pending { background: radial-gradient(ellipse at 50% 30%, #0a1633, #040a1c 70%); }
.ua-panel, .ua-pending-card { width: min(760px, 100%); max-height: 90vh; display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--spark-line, rgba(80,140,255,.22)); background: linear-gradient(160deg, #0c1c46, #060e26); color: #eaf2ff; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(47,139,255,.14); }
.ua-pending-card { width: min(420px, 100%); padding: 32px 28px; text-align: center; align-items: center; }
.ua-pending-card h2 { margin: 10px 0 8px; } .ua-pending-card p { color: #8ea6cf; line-height: 1.6; margin: 0 0 20px; }
.ua-pending-logo { width: 72px; height: auto; }
.ua-pending-actions { display: flex; gap: 10px; }
.ua-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--spark-line, rgba(80,140,255,.22)); }
.ua-head h2 { margin: 0; font-size: 18px; }
.ua-x { background: none; border: 0; color: #8ea6cf; font-size: 26px; line-height: 1; cursor: pointer; }
.ua-body { padding: 16px 20px 20px; overflow: auto; }
.ua-body h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8ea6cf; margin: 18px 0 8px; }
.ua-add { display: grid; grid-template-columns: 1.4fr 1.2fr auto auto; gap: 8px; }
.ua-panel input, .ua-panel select { background: rgba(5,14,38,.85); border: 1px solid var(--spark-line, rgba(80,140,255,.22)); color: #eaf2ff; border-radius: 10px; padding: 9px 11px; font: inherit; min-width: 0; }
.ua-btn { border: 1px solid var(--spark-line, rgba(80,140,255,.3)); background: rgba(47,139,255,.10); color: #eaf2ff; border-radius: 10px; padding: 8px 13px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ua-btn:hover { background: rgba(47,139,255,.22); }
.ua-btn-primary { background: #2f8bff; border-color: #7fbcff; color: #fff; font-weight: 600; }
.ua-btn-danger { color: #ff8a8a; border-color: rgba(255,120,120,.35); }
.ua-btn:disabled { opacity: .6; cursor: default; }
.ua-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(80,140,255,.12); }
.ua-who { min-width: 0; } .ua-email { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ua-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: #8ea6cf; }
.ua-tag { padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(120,170,255,.3); font-size: 11px; }
.ua-tag-admin { color: #ffb02e; border-color: rgba(255,176,46,.5); } .ua-tag-pending { color: #3fd3ff; border-color: rgba(63,211,255,.5); } .ua-tag-off { color: #ff8a8a; border-color: rgba(255,120,120,.5); }
.ua-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ua-notice { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(47,224,138,.10); border: 1px solid rgba(47,224,138,.35); font-size: 13px; line-height: 1.6; }
.ua-notice code { background: rgba(0,0,0,.35); padding: 2px 8px; border-radius: 6px; user-select: all; }
.ua-notice-err { background: rgba(255,120,120,.10); border-color: rgba(255,120,120,.4); }
.ua-empty { color: #8ea6cf; font-size: 13px; }
@media (max-width: 700px) { .ua-add { grid-template-columns: 1fr 1fr; } .ua-row { flex-direction: column; align-items: stretch; } .ua-acts { justify-content: flex-start; } }

/* ═══ KORA Private mode ═══ */
.kora-private-btn { display: inline-flex; align-items: center; gap: 5px; width: auto !important; padding: 0 9px !important; font-size: 12px; }
.kora-private-btn span { font-weight: 600; letter-spacing: .02em; }
.kora-private-btn.active { background: rgba(255, 176, 46, .16) !important; color: #ffb02e !important; border-color: rgba(255, 176, 46, .5) !important; }
.kora-private-banner { display: none; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12px; line-height: 1.4; color: #ffd48a; background: rgba(255, 176, 46, .09); border-bottom: 1px solid rgba(255, 176, 46, .3); }
.ai-chat-widget.kora-private .kora-private-banner { display: flex; }
.ai-chat-widget.kora-private .ai-chat-header { box-shadow: inset 0 -2px 0 rgba(255, 176, 46, .55); }