:root {
  --bg: var(--jl-bg, #fbf6f4);
  --white: var(--jl-surface, #fff);
  --border: var(--jl-line, #efe1dc);
  --text: var(--jl-ink, #200c0d);
  --text-dim: var(--jl-ink-dim, #6b5552);
  --accent: var(--jl-red, #e5243f);
  --accent-dark: var(--jl-red-dark, #b81830);
  --accent-light: var(--jl-red-soft, #fde7ea);
  --veil: var(--jl-veil, rgba(251, 246, 244, 0.6));
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

.logo,
.hero h1 span,
h1 span,
.keystat .num {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
}
html body .start-btn,
html body .code-login-btn,
html body #prechat-mount .start-btn,
html body #prechat-mount .code-login-btn {
  background: var(--accent);
}
html body .start-btn:hover,
html body #prechat-mount .start-btn:hover {
  background: var(--accent-dark);
}
html body .prefs-lock,
html body #prechat-mount .prefs-lock {
  background: var(--veil);
}
.room-cta {
  background: var(--accent);
  box-shadow: none;
}
.chat-btn { border-color: var(--border); color: var(--accent-dark); }
.chat-btn:hover { border-color: var(--accent); background: var(--accent-light); }
.video-link { color: var(--text-dim); }
.video-link a { color: var(--accent-dark); }
.shots img,
.c-split img {
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.18));
}
.c-text p { color: var(--text); }
.c-faq details p { color: var(--text-dim); }

.bar-fill,
.bar-fill.top { background: linear-gradient(90deg, var(--jl-red-dark, #b81830), var(--jl-red, #e5243f)); }
.day-bar,
.hour-bar { background: linear-gradient(180deg, var(--jl-coral, #ff7a45), var(--jl-red, #e5243f)); }
.day-bar.peak,
.hour-bar.peak { background: linear-gradient(180deg, var(--jl-red-dark, #b81830), var(--jl-coral, #ff7a45)); }
.cta-box,
.interest-btn { background: linear-gradient(135deg, var(--jl-red, #e5243f), var(--jl-coral, #ff7a45)); }
.report-card:hover,
.interest-btn:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
.orb {
  background: radial-gradient(circle at 35% 30%, #ffd3da 0%, var(--jl-red, #e5243f) 45%, var(--jl-red-dark, #b81830) 100%);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--jl-coral, #ff7a45), 0 12px 30px rgba(229, 36, 63, 0.35);
}
.badge-soon { background: linear-gradient(135deg, var(--jl-coral, #ff7a45), var(--jl-red, #e5243f)); }
.live-banner { background: var(--accent-light); border-color: var(--border); }

.jl-f-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 14px; padding: 12px 14px; text-align: left;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--white);
  font: inherit; color: var(--text); cursor: pointer;
}
.jl-f-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jl-f-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-light); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; }
.jl-f-tx { flex: 1; min-width: 0; font-size: .86rem; line-height: 1.3; }
.jl-f-tx b { display: block; }
.jl-f-tx > span { color: var(--text-dim); font-size: .76rem; }
.jl-f-chips { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.jl-f-chips i { font-style: normal; background: var(--accent-light); color: var(--accent-dark); border-radius: 99px; padding: 2px 9px; font-size: .72rem; font-weight: 700; }
.jl-f-ar { flex: none; display: flex; align-items: center; color: var(--accent-dark); }
.jl-f-ic svg, .jl-f-ar svg { display: block; }
.jl-f-chips i svg { display: inline-block; vertical-align: -2px; }

.jl-f-veil { position: fixed; inset: 0; z-index: 9990; background: rgba(0, 0, 0, .42); opacity: 0; pointer-events: none; transition: opacity .2s; }
.jl-f-veil.show { opacity: 1; pointer-events: auto; }
.jl-f-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9991;
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--white); color: var(--text);
  border-radius: 18px 18px 0 0; box-shadow: 0 -12px 34px rgba(0, 0, 0, .28);
  transform: translateY(105%); transition: transform .28s cubic-bezier(.3, 1, .4, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; text-align: left;
}
.jl-f-sheet.show { transform: translateY(0); }
@media (min-width: 700px) {
  .jl-f-sheet { left: 50%; right: auto; width: 460px; bottom: 24px; border-radius: 18px; transform: translate(-50%, 120%); }
  .jl-f-sheet.show { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .jl-f-sheet, .jl-f-veil { transition: none; } }
.jl-f-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 10px; }
.jl-f-t { font-weight: 800; font-size: 1.05rem; }
.jl-f-s { font-size: .78rem; color: var(--text-dim); margin: 2px 0 10px; }

.jl-f-sheet .prefs-wrapper { position: relative; margin: 0; padding: 0; border: 0; background: none; }
.jl-f-sheet .prefs-wrapper .form-group { margin-bottom: 10px; }
.jl-f-sheet .prefs-wrapper .form-group label { display: block; font-size: .78rem; font-weight: 700; margin-bottom: 5px; color: var(--text); }
.jl-f-sheet .prefs-wrapper select { width: 100%; padding: 8px 12px; background: var(--bg); border: 2px solid var(--border); border-radius: 12px; color: var(--text); font-size: .9rem; font-family: inherit; }
.jl-f-sheet .prefs-wrapper select { opacity: .4; pointer-events: none; }
.jl-f-sheet .prefs-wrapper.unlocked select { opacity: 1; pointer-events: auto; }
.jl-f-sheet .prefs-wrapper .tags-group { display: flex; flex-wrap: wrap; gap: 5px; }
.jl-f-sheet .prefs-wrapper .tag-pill { padding: 4px 10px; font-size: .76rem; border: 1.5px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--text-dim); cursor: pointer; user-select: none; -webkit-user-select: none; }
.jl-f-sheet .prefs-wrapper .tag-pill.selected { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); font-weight: 600; }
.jl-f-sheet .prefs-lock { position: absolute; inset: -4px; z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--veil); backdrop-filter: blur(1.5px); border-radius: 14px; cursor: pointer; }
.jl-f-sheet .prefs-wrapper.unlocked .prefs-lock { display: none; }
.jl-f-sheet .prefs-lock span { background: var(--white); padding: 8px 16px; border-radius: 10px; font-size: .85rem; font-weight: 600; color: var(--accent-dark); border: 1px solid var(--border); }

.jl-f-nocode { margin-top: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg); font-size: .8rem; line-height: 1.45; color: var(--text-dim); }
.jl-f-nocode b { color: var(--text); }
.jl-f-have { margin-top: 8px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: .8rem; cursor: pointer; }
.jl-f-save { display: block; width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; }
.jl-f-save.off { opacity: .45; }

.jl-omt { margin-top: 12px; padding: 12px; border: 1.5px solid var(--accent); border-radius: 14px; background: linear-gradient(180deg, var(--accent-light), transparent 75%); }
.jl-omt h4 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: 7px; color: var(--text); }
.jl-omt-k { font-size: .62rem; font-weight: 800; letter-spacing: .04em; background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 7px; }
.jl-omt-k.wait { background: var(--text-dim); }
.jl-omt p { margin: 6px 0 0; font-size: .78rem; line-height: 1.45; color: var(--text-dim); }
.jl-omt p b { color: var(--text); }
.jl-omt-rw { display: flex; gap: 6px; margin-top: 9px; }
.jl-omt-in { flex: 1; min-width: 0; padding: 9px 11px; border: 2px solid var(--border); border-radius: 11px; background: var(--white); color: var(--text); font: inherit; font-size: .82rem; }
.jl-omt-in:focus { outline: none; border-color: var(--accent); }
.jl-omt-bt { flex: none; padding: 9px 13px; border: 0; border-radius: 11px; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: .82rem; cursor: pointer; }
.jl-omt-bt:disabled { opacity: .5; }
.jl-omt-err { margin-top: 6px; font-size: .74rem; font-weight: 600; color: var(--accent-dark); }
.jl-omt-err:empty { display: none; }
.jl-omt-fn { margin-top: 6px; font-size: .68rem; color: var(--text-dim); overflow-wrap: anywhere; }
.jl-omt-ok { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 9px 11px; background: var(--white); border: 1px solid var(--border); border-radius: 11px; font-size: .8rem; }
.jl-omt-ok small { color: var(--text-dim); font-size: .72rem; }
.jl-omt-sw { flex: none; margin-left: auto; width: 40px; height: 24px; border: 0; border-radius: 12px; background: var(--accent); position: relative; cursor: pointer; }
.jl-omt-sw::after { content: ''; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: right .15s; }
.jl-omt-sw.off { background: var(--border); }
.jl-omt-sw.off::after { right: 19px; }

html body .code-input-row input { min-width: 0; }
html body .code-login-btn { flex-shrink: 0; }