:root {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --surface-blue: #eef6ff;
  --text: #17233d;
  --muted: #67738a;
  --line: #e4e9f2;
  --primary: #1769e0;
  --primary-dark: #0e4ca8;
  --primary-soft: #e9f2ff;
  --secondary: #0f223f;
  --green: #1d9a6c;
  --green-soft: #e8f8f1;
  --orange: #d47a12;
  --orange-soft: #fff4e3;
  --red: #c84444;
  --red-soft: #fff0f0;
  --violet: #7557d6;
  --violet-soft: #f1edff;
  --shadow-sm: 0 8px 24px rgba(25, 52, 92, .07);
  --shadow: 0 20px 60px rgba(25, 52, 92, .12);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --container: 1220px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.app-body { background: #f4f7fb; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .62; }
img { max-width: 100%; }
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.narrow { max-width: 820px; }
.section { padding: 96px 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow.light { color: rgba(255,255,255,.8); }
.muted { color: var(--muted); font-size: .92rem; }
.full { width: 100%; justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 18px;
  font-weight: 750;
  color: var(--text);
  background: transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; background: linear-gradient(135deg, #1d73ea, #1257c5); box-shadow: 0 10px 24px rgba(23,105,224,.22); }
.btn-primary:hover { box-shadow: 0 14px 30px rgba(23,105,224,.3); }
.btn-secondary { color: white; background: var(--secondary); }
.btn-ghost { background: white; border-color: var(--line); }
.btn-white { background: white; color: var(--primary-dark); }
.btn-large { padding: 14px 22px; border-radius: 14px; }
.btn-small { padding: 8px 12px; font-size: .86rem; }
.text-link { color: var(--primary); font-weight: 750; }
.text-link span { margin-left: 5px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(228,233,242,.8);
  backdrop-filter: blur(16px);
}
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.08rem; }
.brand small { color: var(--primary); font-weight: 800; }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  background: linear-gradient(145deg, #1b75ef, #104da7);
  box-shadow: 0 9px 22px rgba(23,105,224,.24);
}
.main-nav { display: flex; align-items: center; gap: 28px; color: #42506a; font-size: .94rem; font-weight: 650; }
.main-nav > a:not(.btn):hover { color: var(--primary); }
.nav-toggle { display: none; border: 0; background: transparent; font-size: 1.4rem; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 12% 15%, rgba(45,132,239,.12), transparent 34%),
    radial-gradient(circle at 82% 24%, rgba(105,203,184,.11), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .4;
  background-image: linear-gradient(rgba(23,105,224,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23,105,224,.035) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 72px; padding: 74px 0 88px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 999px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: .8rem; color: #52617a; font-weight: 700; }
.kicker span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); }
.hero h1 { margin: 24px 0 20px; font-size: clamp(3rem, 5vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.hero h1 em { color: var(--primary); font-style: normal; }
.hero-lead { max-width: 650px; margin: 0 0 30px; font-size: 1.15rem; color: #59667d; }
.hero-question { padding: 18px; background: white; border: 1px solid #dde5f1; border-radius: 20px; box-shadow: var(--shadow); }
.hero-question > label { display: block; margin: 0 0 10px 3px; font-size: .82rem; font-weight: 800; color: #44536c; }
.hero-input-row { display: flex; gap: 10px; }
.hero-input-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; outline: none; background: #fbfdff; }
.hero-input-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.hero-actions-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; color: var(--muted); font-size: .82rem; }
.hero-actions-row a { color: var(--primary); font-weight: 750; }
.trust-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 24px; }
.trust-row > div { display: flex; gap: 10px; align-items: center; }
.trust-row span:last-child { display: flex; flex-direction: column; }
.trust-row strong { font-size: .88rem; }
.trust-row small { color: var(--muted); }
.trust-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.hero-orb-one { width: 320px; height: 320px; right: -120px; top: 100px; background: rgba(58,137,238,.08); }
.hero-orb-two { width: 240px; height: 240px; left: 42%; bottom: -120px; background: rgba(34,166,125,.08); }

.chat-preview-wrap { position: relative; }
.chat-preview { overflow: hidden; background: white; border: 1px solid #dfe7f2; border-radius: 28px; box-shadow: 0 32px 80px rgba(31,74,131,.18); transform: rotate(.4deg); }
.chat-preview-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fcfdff; }
.chat-preview-head button { border: 0; background: transparent; color: var(--muted); letter-spacing: 2px; }
.chat-agent { display: flex; align-items: center; gap: 11px; }
.chat-agent > div { display: flex; flex-direction: column; }
.chat-agent small { color: var(--muted); }
.chat-agent small span { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--green); }
.agent-avatar, .mini-agent { display: grid; place-items: center; color: white; background: linear-gradient(145deg,#1b75ef,#104da7); font-weight: 900; }
.agent-avatar { width: 42px; height: 42px; border-radius: 14px; }
.mini-agent { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; font-size: .8rem; }
.chat-preview-body { padding: 20px; background: linear-gradient(180deg,#fafcff,#f7faff); }
.chat-date { text-align: center; color: #8b95a8; font-size: .75rem; margin-bottom: 18px; }
.chat-bubble { max-width: 87%; padding: 12px 14px; border-radius: 15px; font-size: .88rem; }
.user-bubble { margin-left: auto; color: white; background: var(--primary); border-bottom-right-radius: 5px; }
.assistant-bubble { display: flex; gap: 10px; margin-top: 14px; background: white; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.assistant-bubble p { margin: 5px 0 0; color: var(--muted); }
.instruction-card { margin-top: 14px; padding: 16px; border-radius: 17px; border: 1px solid #cfe3fb; background: white; box-shadow: var(--shadow-sm); }
.instruction-top { display: flex; align-items: center; gap: 10px; }
.instruction-top > div { flex: 1; display: flex; gap: 9px; align-items: center; }
.instruction-top small { display: block; color: var(--primary); font-size: .63rem; letter-spacing: .08em; font-weight: 900; }
.instruction-top strong { display: block; font-size: .92rem; }
.step-number { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: white; background: var(--primary); font-weight: 900; }
.instruction-card > p { color: var(--muted); font-size: .84rem; }
.instruction-check { color: var(--green); background: var(--green-soft); border-radius: 10px; padding: 8px 10px; font-size: .76rem; font-weight: 750; }
.instruction-actions { display: flex; gap: 8px; margin-top: 12px; }
.instruction-actions .btn { padding: 8px 11px; font-size: .76rem; }
.typing { margin-top: 13px; color: var(--muted); font-size: .72rem; }
.typing span { display: inline-block; width: 5px; height: 5px; margin-right: 2px; border-radius: 50%; background: #a3afc0; }
.chat-preview-input { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); color: #9aa4b6; font-size: .84rem; }
.chat-preview-input button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: white; background: var(--primary); }
.floating-card { position: absolute; display: flex; align-items: center; gap: 10px; min-width: 230px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.95); box-shadow: var(--shadow); }
.floating-card > span { font-size: 1.3rem; }
.floating-card div { display: flex; flex-direction: column; }
.floating-card small { color: var(--muted); }
.floating-safety { left: -48px; bottom: 78px; }
.floating-credit { right: -42px; top: 112px; }

.section-heading { margin-bottom: 38px; }
.section-heading h2 { margin: 8px 0 0; font-size: clamp(2rem,4vw,3.3rem); line-height: 1.08; letter-spacing: -.04em; }
.split-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 70px; }
.split-heading > p { margin: 0; color: var(--muted); font-size: 1.02rem; }
.centered-heading { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.centered-heading p { color: var(--muted); }
.category-section { background: white; }
.category-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.category-grid.large-grid { grid-template-columns: repeat(3,1fr); }
.category-card { display: flex; align-items: center; gap: 14px; min-height: 126px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 6px 22px rgba(24,50,88,.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.category-card:hover { transform: translateY(-3px); border-color: #cbdcf3; box-shadow: var(--shadow-sm); }
.category-card > div { flex: 1; }
.category-card h3 { margin: 0 0 5px; font-size: 1rem; }
.category-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.category-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; font-weight: 900; font-size: 1.2rem; }
.icon-tone-1 { color: #1769e0; background: #eaf3ff; }
.icon-tone-2 { color: #0f8c70; background: #e7f7f2; }
.icon-tone-3 { color: #7356cb; background: #f0ecff; }
.icon-tone-4 { color: #c66f0d; background: #fff1de; }
.icon-tone-5 { color: #cc4b68; background: #fff0f3; }
.icon-tone-6 { color: #177a97; background: #e8f7fb; }
.category-arrow { color: #9aa5b7; font-size: 1.2rem; }

.safety-showcase { background: linear-gradient(180deg,#f8fbff,#f4f8fd); }
.safety-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 88px; }
.safety-window { border: 1px solid #dbe5f2; border-radius: 24px; overflow: hidden; background: white; box-shadow: var(--shadow); transform: perspective(900px) rotateY(4deg) rotateX(1deg); }
.window-bar { display: flex; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fbfcff; }
.window-bar span { width: 9px; height: 9px; border-radius: 50%; background: #dfe5ee; }
.safety-window-body { position: relative; padding: 32px; }
.scan-line { position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: linear-gradient(90deg,transparent,var(--primary),transparent); box-shadow: 0 0 18px rgba(23,105,224,.7); }
.safe-file { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.safe-file > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.safe-file div { flex: 1; display: flex; flex-direction: column; }
.safe-file small { color: var(--muted); }
.safe-status { color: var(--green); font-size: .75rem; font-weight: 800; }
.analysis-lines { display: grid; gap: 10px; margin: 28px 0; }
.analysis-lines span { height: 10px; border-radius: 999px; background: linear-gradient(90deg,#e7edf5,#f4f7fb); }
.analysis-lines span:nth-child(2) { width: 82%; }
.analysis-lines span:nth-child(3) { width: 68%; }
.analysis-lines span:nth-child(4) { width: 90%; }
.safety-result { display: flex; gap: 14px; padding: 18px; border: 1px solid #cceadd; border-radius: 16px; background: var(--green-soft); }
.safety-result > span { width: 34px; height: 34px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--green); }
.safety-result p { margin: 4px 0 0; color: #537467; font-size: .86rem; }
.safety-copy h2 { margin: 10px 0 18px; font-size: clamp(2rem,4vw,3.3rem); line-height: 1.08; letter-spacing: -.04em; }
.safety-copy > p { color: var(--muted); font-size: 1.04rem; }
.feature-list { display: grid; gap: 18px; margin: 28px 0; }
.feature-list > div { display: flex; gap: 14px; }
.feature-list > div > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-weight: 900; font-size: .76rem; }
.feature-list strong { display: block; }
.feature-list p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

.how-section { background: white; }
.how-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; }
.how-card { position: relative; min-height: 230px; padding: 28px 22px; border: 1px solid var(--line); border-radius: 20px; background: #fbfdff; }
.how-number { position: absolute; right: 18px; top: 14px; color: #dbe4f1; font-size: 2.8rem; font-weight: 900; }
.how-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.how-card h3 { margin: 22px 0 8px; }
.how-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.how-connector { color: #aeb9c9; font-size: 1.4rem; }

.pricing-preview { background: #f7faff; }
.pricing-preview-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 70px; }
.pricing-copy h2 { margin: 10px 0 16px; font-size: clamp(2rem,4vw,3.2rem); line-height: 1.08; letter-spacing: -.04em; }
.pricing-copy > p { color: var(--muted); }
.check-list { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.check-list li::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 900; }
.price-cards-mini { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; align-items: center; }
.price-mini { position: relative; min-height: 220px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.price-mini span { font-weight: 800; }
.price-mini strong { margin: 8px 0; color: var(--primary); font-size: 3.2rem; line-height: 1; }
.price-mini small { color: var(--muted); }
.price-mini.featured { min-height: 270px; border-color: #9fc7f8; transform: translateY(-8px); box-shadow: var(--shadow); }
.price-mini b { position: absolute; top: 12px; right: 12px; padding: 5px 8px; border-radius: 999px; color: white; background: var(--primary); font-size: .65rem; }

.cta-section { padding: 0 0 96px; background: #f7faff; }
.cta-card { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 52px 58px; color: white; border-radius: 28px; background: linear-gradient(135deg,#0f4ba7,#1769e0 55%,#2380ec); box-shadow: 0 28px 70px rgba(23,105,224,.25); }
.cta-card h2 { margin: 8px 0 14px; font-size: clamp(2rem,4vw,3rem); line-height: 1.05; letter-spacing: -.04em; }
.cta-card p { margin: 0; color: rgba(255,255,255,.78); }
.cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.cta-actions > a:last-child { color: rgba(255,255,255,.85); font-size: .88rem; }

.site-footer { padding: 64px 0 26px; color: #b7c3d6; background: #0e1b30; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 50px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-grid h4 { margin: 0 0 8px; color: white; }
.footer-grid a:hover { color: white; }
.footer-brand { color: white; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; }

.page-main { min-height: 70vh; }
.page-hero { padding: 100px 0 70px; text-align: center; background: linear-gradient(180deg,#fbfdff,#f2f7ff); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 10px 0 16px; font-size: clamp(2.8rem,6vw,4.8rem); line-height: 1; letter-spacing: -.055em; }
.page-hero p { margin: 0 auto; max-width: 720px; color: var(--muted); font-size: 1.08rem; }
.process-stack { display: grid; gap: 18px; max-width: 960px; }
.process-stack article { display: grid; grid-template-columns: 80px 1fr; gap: 26px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow-sm); }
.process-stack article > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.process-stack h2 { margin: 0 0 8px; }
.process-stack p { margin: 0; color: var(--muted); }
.pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.pricing-card { position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-sm); }
.pricing-card.featured { border-color: #92bff6; box-shadow: var(--shadow); }
.pricing-card h2 { margin: 10px 0 8px; color: var(--primary); font-size: 2.2rem; }
.pricing-card p { color: var(--muted); }
.pricing-card ul { flex: 1; list-style: none; padding: 0; display: grid; gap: 9px; }
.pricing-card li::before { content: "✓"; margin-right: 8px; color: var(--green); }
.plan-label { color: var(--secondary); font-weight: 900; }
.popular { position: absolute; right: 14px; top: 14px; padding: 5px 9px; border-radius: 999px; color: white; background: var(--primary); font-size: .65rem; font-weight: 900; }
.info-banner { display: flex; gap: 10px; margin-top: 24px; padding: 17px 20px; border: 1px solid #cfe2fa; border-radius: 14px; background: var(--primary-soft); color: #365477; }
.info-banner.compact { margin: 0 0 18px; padding: 12px 14px; font-size: .86rem; }
.risk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.risk-card { padding: 30px; border-radius: 22px; border: 1px solid var(--line); background: white; }
.risk-card > span { display: inline-flex; padding: 6px 10px; border-radius: 999px; font-weight: 850; font-size: .75rem; }
.risk-card.green > span { color: var(--green); background: var(--green-soft); }
.risk-card.orange > span { color: var(--orange); background: var(--orange-soft); }
.risk-card.red > span { color: var(--red); background: var(--red-soft); }
.risk-card p { color: var(--muted); }
.rules-panel { margin-top: 34px; padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.rules-panel h2 { margin-top: 0; }
.rules-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.rules-grid p { color: var(--muted); margin-bottom: 0; }
.faq-list { max-width: 900px; }
.faq-list details { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; font-weight: 850; font-size: 1.05rem; }
.faq-list p { color: var(--muted); }
.prose-card { padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow-sm); }
.prose-card h2:first-child { margin-top: 0; }
.prose-card p { color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.placeholder-contact { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; padding: 16px; border: 1px dashed #b9cae0; border-radius: 14px; color: var(--primary); font-weight: 800; }
.placeholder-contact span { color: var(--muted); font-size: .8rem; font-weight: 500; }

.auth-body { background: #f6f9fd; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: .9fr 1.1fr; }
.auth-brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 56px; color: white; background: linear-gradient(145deg,#0d3f8e,#1769e0 60%,#2384ee); }
.auth-brand-panel::after { content:""; position:absolute; width:480px; height:480px; right:-200px; bottom:-210px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 60px rgba(255,255,255,.04),0 0 0 120px rgba(255,255,255,.03); }
.auth-brand-panel .brand { color: white; position: relative; z-index: 2; }
.auth-brand-panel .brand small { color: #bcdcff; }
.auth-copy { position: relative; z-index: 2; max-width: 560px; margin: auto 0; }
.auth-copy h1 { margin: 12px 0 18px; font-size: clamp(2.7rem,5vw,4.5rem); line-height: 1.02; letter-spacing: -.05em; }
.auth-copy > p { color: rgba(255,255,255,.75); font-size: 1.08rem; }
.auth-safe-card { display: flex; gap: 14px; margin-top: 28px; padding: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.auth-safe-card > span { font-size: 1.5rem; }
.auth-safe-card p { margin: 4px 0 0; color: rgba(255,255,255,.72); }
.auth-checks { list-style: none; padding: 0; display: grid; gap: 10px; }
.auth-checks li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.auth-form-panel { display: grid; place-items: center; padding: 44px; }
.auth-form-wrap { width: min(100%, 500px); }
.auth-form-wrap h2 { margin: 0 0 6px; font-size: 2rem; }
.auth-form-wrap > p { color: var(--muted); }
.auth-switch { text-align: center; margin-top: 20px; }
.auth-switch a { color: var(--primary); font-weight: 800; }
.back-link { display: block; margin-top: 24px; text-align: center; color: var(--muted); font-size: .9rem; }

.form-stack { display: grid; gap: 17px; }
.form-stack label { display: grid; gap: 7px; color: #3f4d65; font-size: .88rem; font-weight: 750; }
.form-stack label small { color: var(--muted); font-weight: 500; }
input, textarea, select { width: 100%; border: 1px solid #dce4ef; border-radius: 12px; padding: 12px 13px; color: var(--text); background: white; outline: none; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.check-row { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; }
.check-row input { width: 18px; height: 18px; margin-top: 2px; }
.check-row a { color: var(--primary); }
.form-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }

.flash { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; padding: 14px 16px; border-radius: 13px; font-weight: 700; }
.flash button { border: 0; background: transparent; font-size: 1.25rem; color: inherit; }
.flash-success { color: #176848; background: var(--green-soft); border: 1px solid #cce9dc; }
.flash-error { color: #9e3636; background: var(--red-soft); border: 1px solid #f0cccc; }
.flash-warning { color: #8d5a16; background: var(--orange-soft); border: 1px solid #f3dbb6; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0,1fr); }
.app-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 18px; color: #9fb0ca; background: #0f1d33; z-index: 40; }
.app-brand { color: white; padding: 0 8px 24px; }
.app-brand small { color: #69a8ff; }
.sidebar-nav { display: grid; gap: 4px; }
.sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; font-size: .9rem; font-weight: 650; }
.sidebar-nav a span { width: 24px; text-align: center; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: white; background: rgba(255,255,255,.08); }
.sidebar-nav a.active { box-shadow: inset 3px 0 0 #52a0ff; }
.sidebar-divider { height: 1px; margin: 10px 8px; background: rgba(255,255,255,.1); }
.sidebar-safety { margin-top: auto; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.05); }
.sidebar-safety strong { display: block; color: white; font-size: .84rem; }
.sidebar-safety p { margin: 5px 0 0; font-size: .75rem; color: #8fa2bf; }
.safety-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #36d79b; box-shadow: 0 0 0 5px rgba(54,215,155,.1); }
.admin-dot { background: #7bb5ff; }
.app-main { min-width: 0; }
.app-topbar { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 30px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.app-topbar h1 { margin: 2px 0 0; font-size: 1.55rem; letter-spacing: -.025em; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.credit-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #cfe1f7; border-radius: 999px; color: var(--primary-dark); background: var(--primary-soft); font-size: .84rem; }
.user-menu { display: flex; align-items: center; gap: 9px; }
.user-menu > div { display: flex; flex-direction: column; line-height: 1.2; }
.user-menu small { color: var(--muted); font-size: .72rem; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--secondary); font-weight: 850; }
.sidebar-toggle { display: none; border: 0; background: transparent; font-size: 1.4rem; }
.app-content { padding: 28px 30px 54px; }
.dashboard-hero { display: flex; justify-content: space-between; align-items: center; gap: 26px; margin-bottom: 22px; padding: 30px; border-radius: 22px; color: white; background: linear-gradient(135deg,#0f4ba7,#1769e0 62%,#2585ed); box-shadow: 0 18px 46px rgba(23,105,224,.2); }
.dashboard-hero h2 { margin: 5px 0 8px; font-size: 2rem; letter-spacing: -.035em; }
.dashboard-hero p { margin: 0; color: rgba(255,255,255,.75); }
.dashboard-hero .eyebrow { color: #c9e0ff; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; }
.admin-body .stats-grid { grid-template-columns: repeat(5,1fr); }
.stat-card { display: flex; align-items: center; gap: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 6px 20px rgba(25,52,92,.045); }
.stat-card > div { display: flex; flex-direction: column; }
.stat-card small { color: var(--muted); }
.stat-card strong { font-size: 1.65rem; line-height: 1.2; }
.stat-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font-weight: 900; }
.stat-icon.blue { color: var(--primary); background: var(--primary-soft); }
.stat-icon.mint { color: var(--green); background: var(--green-soft); }
.stat-icon.violet { color: var(--violet); background: var(--violet-soft); }
.stat-icon.amber { color: var(--orange); background: var(--orange-soft); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(300px,.8fr); gap: 18px; margin-bottom: 18px; }
.panel { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 5px 18px rgba(25,52,92,.04); }
.panel.span-two { min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.panel-head h3 { margin: 3px 0 0; }
.panel-head > a { color: var(--primary); font-size: .86rem; font-weight: 750; }
.session-list { display: grid; }
.session-row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.session-row:last-child { border-bottom: 0; }
.session-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.session-row small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-category { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.row-arrow { color: #a2aec0; }
.status, .risk-badge { display: inline-flex; align-items: center; white-space: nowrap; padding: 5px 9px; border-radius: 999px; font-size: .7rem; font-weight: 850; }
.status-resolved { color: var(--green); background: var(--green-soft); }
.status-waiting_user { color: var(--primary); background: var(--primary-soft); }
.status-analysis { color: var(--orange); background: var(--orange-soft); }
.status-active { color: var(--primary); background: var(--primary-soft); }
.risk-green { color: var(--green); background: var(--green-soft); }
.risk-orange { color: var(--orange); background: var(--orange-soft); }
.risk-red { color: var(--red); background: var(--red-soft); }
.quick-categories { display: grid; gap: 7px; }
.quick-categories a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; font-size: .86rem; }
.quick-categories a:hover { background: #f5f8fc; }
.quick-categories b { color: #a6b2c3; }
.device-mini-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.device-mini { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.device-mini > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.device-mini div { display: flex; flex-direction: column; min-width: 0; }
.device-mini small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.safety-dashboard { display: grid; gap: 12px; }
.safety-dashboard > div { display: flex; gap: 10px; align-items: center; }
.safety-dashboard > div > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); font-weight: 900; }
.safety-dashboard p { display: flex; flex-direction: column; margin: 0; }
.safety-dashboard small { color: var(--muted); }
.empty-state { min-height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--muted); }
.empty-state > span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 17px; color: var(--primary); background: var(--primary-soft); font-size: 1.4rem; }
.empty-state h3 { color: var(--text); margin-bottom: 4px; }
.compact-empty { padding: 30px 0; text-align: center; color: var(--muted); }
.page-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; }
.page-actions p { margin: 0; color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th { padding: 11px 10px; text-align: left; color: #78859a; border-bottom: 1px solid var(--line); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
td { padding: 13px 10px; border-bottom: 1px solid #edf1f6; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.table-sub { display: block; max-width: 340px; color: var(--muted); }
.table-link { color: var(--primary); font-weight: 800; }
.table-actions { display: flex; gap: 10px; align-items: center; }
.table-actions a, .table-actions button { color: var(--primary); border: 0; background: transparent; padding: 0; font-size: .82rem; }
.table-actions button { color: var(--red); }
.amount { font-weight: 900; }
.amount.positive { color: var(--green); }
.amount.negative { color: var(--red); }
code { color: #44536b; background: #f3f6fa; border-radius: 6px; padding: 2px 5px; font-size: .76rem; }

.wizard-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 20px; }
.form-panel { padding: 26px; }
.wizard-side { display: grid; align-content: start; gap: 16px; }
.safety-note, .privacy-note { padding: 24px; border-radius: 18px; }
.safety-note { color: white; background: linear-gradient(145deg,#0f4ba7,#1769e0); }
.safety-note > span { font-size: 1.8rem; }
.safety-note h3 { margin: 10px 0; }
.safety-note ol { padding-left: 20px; color: rgba(255,255,255,.78); }
.privacy-note { border: 1px solid #f0d8b7; background: var(--orange-soft); }
.privacy-note p { color: #7e633d; margin-bottom: 0; }

.session-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 18px; align-items: start; }
.chat-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 5px 18px rgba(25,52,92,.04); }
.session-toolbar { display: flex; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.session-toolbar h2 { margin: 7px 0 2px; font-size: 1.3rem; }
.session-toolbar p { margin: 0; color: var(--muted); font-size: .82rem; }
.session-toolbar-actions { display: flex; gap: 8px; align-items: center; }
.progress-track { height: 4px; background: #edf2f8; }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg,var(--primary),#48a2ff); }
.chat-thread { min-height: 520px; max-height: 70vh; overflow-y: auto; padding: 24px; background: linear-gradient(180deg,#fbfdff,#f8fbff); }
.chat-message { display: flex; gap: 11px; align-items: flex-end; margin-bottom: 18px; }
.chat-message.user-message { justify-content: flex-end; }
.message-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; color: white; background: linear-gradient(145deg,#1b75ef,#104da7); font-weight: 900; }
.message-avatar.ai-rob-avatar { padding: 2px; border: 1px solid #cfe0f3; background: #fff; box-shadow: 0 4px 12px rgba(20,70,135,.12); }
.message-avatar.ai-rob-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 9px; }
.message-avatar.user-avatar { background: var(--secondary); }
.message-content { max-width: min(82%,760px); }
.message-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 6px; color: var(--muted); font-size: .72rem; }
.message-meta strong { color: var(--text); }
.text-message { padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; background: white; }
.user-message .text-message { color: white; background: var(--primary); border-color: var(--primary); border-radius: 16px 16px 5px 16px; }
.upload-message { padding: 12px 14px; border: 1px solid #cfe2f9; border-radius: 14px; color: var(--primary-dark); background: var(--primary-soft); }
.step-card { overflow: hidden; border: 1px solid var(--line); border-left-width: 4px; border-radius: 18px; background: white; box-shadow: var(--shadow-sm); }
.risk-border-green { border-left-color: var(--green); }
.risk-border-orange { border-left-color: var(--orange); }
.risk-border-red { border-left-color: var(--red); }
.step-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.step-card-head > div { display: flex; align-items: center; gap: 11px; }
.step-card-head small { display: block; color: var(--primary); font-size: .62rem; letter-spacing: .08em; font-weight: 900; }
.step-card-head h3 { margin: 2px 0 0; font-size: 1rem; }
.step-instruction, .expected-result, .fallback-result { padding: 15px 18px; }
.step-instruction p, .expected-result p, .fallback-result p { margin: 0; color: var(--muted); }
.expected-result { border-top: 1px solid #edf1f6; background: #fbfdff; }
.fallback-result { border-top: 1px solid #edf1f6; background: #fffdf8; }
.expected-result strong, .fallback-result strong { display: block; margin-bottom: 4px; font-size: .8rem; }
.guardrail-list { list-style: none; margin: 0; padding: 14px 18px; border-top: 1px solid #edf1f6; color: #557063; background: var(--green-soft); font-size: .78rem; }
.chat-composer { padding: 18px; border-top: 1px solid var(--line); background: white; }
.chat-composer textarea { min-height: 92px; }
.composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 10px; }
.composer-actions span { color: var(--muted); font-size: .78rem; }
.upload-inline { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.file-button { flex: 1; display: flex; align-items: center; min-height: 38px; padding: 8px 11px; border: 1px dashed #bdcce0; border-radius: 10px; color: var(--primary); background: #f8fbff; font-size: .82rem; cursor: pointer; }
.file-button input { display: none; }
.resolved-banner { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-top: 1px solid var(--line); background: var(--green-soft); }
.resolved-banner > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); }
.resolved-banner > div { flex: 1; }
.resolved-banner p { margin: 2px 0 0; color: #5c766c; }
.session-context { display: grid; gap: 14px; }
.context-card { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.context-card h3 { margin: 7px 0; }
.context-card > p { color: var(--muted); font-size: .86rem; }
.context-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.context-row:last-child { border-bottom: 0; }
.context-row span:first-child { color: var(--muted); }
.linked-device { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.linked-device > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.linked-device div { display: flex; flex-direction: column; }
.linked-device small { color: var(--muted); }
.context-files { display: grid; gap: 8px; margin-top: 10px; }
.context-files a { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; }
.context-files div { display: flex; flex-direction: column; min-width: 0; }
.context-files strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.context-files small { color: var(--muted); }
.safety-context { display: flex; gap: 11px; color: #436b59; background: var(--green-soft); border-color: #cce8dc; }
.safety-context > span { font-size: 1.25rem; }
.safety-context p { margin: 3px 0 0; color: #5d796d; }
.summary-panel { max-width: 980px; margin: 0 auto; }
.summary-head { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.summary-head h2 { margin: 6px 0 3px; }
.summary-head p { margin: 0; color: var(--muted); }
.summary-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 20px 0; }
.summary-stats > div { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #f9fbfe; }
.summary-stats span { display: block; color: var(--muted); font-size: .78rem; }
.summary-stats strong { font-size: 1.35rem; }
.timeline { display: grid; gap: 14px; }
.timeline-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.timeline-item > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-weight: 850; font-size: .78rem; }
.timeline-item > div { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.timeline-item small { color: var(--muted); }
.timeline-item p { margin: 5px 0 0; }

.two-column-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 18px; align-items: start; }
.device-list { display: grid; gap: 12px; }
.device-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.device-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
.device-card h3 { margin: 0 0 3px; }
.device-card p { margin: 0; color: var(--muted); }
.device-card small { color: #8a96a8; }
.device-notes { margin-top: 8px !important; font-size: .82rem; }
.icon-button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: #f3f6fa; }
.icon-button.danger { color: var(--red); }
.credit-hero-panel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding: 30px; border-radius: 22px; color: white; background: linear-gradient(135deg,#0f4ba7,#1769e0); box-shadow: 0 18px 46px rgba(23,105,224,.2); }
.credit-hero-panel h2 { margin: 5px 0; font-size: 3rem; }
.credit-hero-panel p { color: rgba(255,255,255,.75); }
.big-credit { font-size: 5rem; opacity: .22; }
.app-pricing { grid-template-columns: repeat(3,1fr); margin-bottom: 18px; }
.settings-list { display: grid; }
.settings-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.settings-list > div:last-child { border-bottom: 0; }
.settings-list span:first-child { color: var(--muted); }
.message-list { display: grid; gap: 12px; }
.message-list article { display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--line); border-radius: 13px; }
.message-list small { color: var(--muted); }
.inline-form { display: flex; gap: 6px; align-items: center; min-width: 330px; }
.inline-form input { padding: 7px 8px; }
.inline-form input[type="number"] { width: 72px; }
.audit-mini { display: grid; gap: 10px; }
.audit-mini > div { display: flex; gap: 9px; }
.audit-mini > div > span { color: var(--primary); }
.audit-mini p { display: flex; flex-direction: column; margin: 0; }
.audit-mini small { color: var(--muted); }

.error-page { min-height: 65vh; display: grid; place-items: center; padding: 70px 20px; }
.error-card { max-width: 650px; text-align: center; }
.error-card > span { color: var(--primary); font-size: 5rem; line-height: 1; font-weight: 950; }
.error-card h1 { margin: 12px 0; font-size: 2.5rem; }
.error-card p { color: var(--muted); }
.error-card pre { max-height: 220px; overflow: auto; text-align: left; padding: 12px; border-radius: 12px; background: #111d30; color: #d6e5fa; }

@media (max-width: 1150px) {
  .hero-grid { gap: 40px; }
  .floating-credit { right: -10px; }
  .floating-safety { left: -10px; }
  .how-grid { grid-template-columns: repeat(2,1fr); }
  .how-connector { display: none; }
  .pricing-grid { grid-template-columns: repeat(2,1fr); }
  .admin-body .stats-grid { grid-template-columns: repeat(3,1fr); }
  .session-layout { grid-template-columns: minmax(0,1fr) 290px; }
}

@media (max-width: 960px) {
  .main-nav { display: none; position: absolute; left: 20px; right: 20px; top: 70px; padding: 18px; flex-direction: column; align-items: stretch; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
  .hero-grid, .safety-grid, .pricing-preview-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .chat-preview-wrap { max-width: 680px; margin: 0 auto; }
  .split-heading { grid-template-columns: 1fr; gap: 16px; }
  .category-grid, .category-grid.large-grid { grid-template-columns: repeat(2,1fr); }
  .how-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-preview-grid { gap: 40px; }
  .cta-card { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand-panel { min-height: 410px; padding: 34px; }
  .auth-form-panel { padding: 40px 24px; }
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position: fixed; left: -280px; width: 260px; transition: left .2s ease; box-shadow: 20px 0 50px rgba(0,0,0,.22); }
  .app-sidebar.open { left: 0; }
  .sidebar-toggle { display: block; }
  .stats-grid, .admin-body .stats-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid, .wizard-layout, .two-column-layout, .session-layout { grid-template-columns: 1fr; }
  .session-context { grid-template-columns: repeat(2,1fr); }
  .pricing-grid { grid-template-columns: repeat(2,1fr); }
  .rules-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 680px) {
  .container { width: min(100% - 26px, var(--container)); }
  .section { padding: 68px 0; }
  .hero-grid { padding-top: 52px; }
  .hero h1 { font-size: 3rem; }
  .hero-input-row { flex-direction: column; }
  .trust-row { grid-template-columns: 1fr; }
  .floating-card { display: none; }
  .category-grid, .category-grid.large-grid, .price-cards-mini, .how-grid, .pricing-grid, .risk-grid, .rules-grid, .contact-grid { grid-template-columns: 1fr; }
  .price-mini.featured { transform: none; }
  .check-list { grid-template-columns: 1fr; }
  .cta-card { padding: 36px 26px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .process-stack article { grid-template-columns: 1fr; }
  .app-topbar { padding: 14px 16px; }
  .app-topbar h1 { font-size: 1.18rem; }
  .topbar-actions .user-menu, .topbar-actions form { display: none; }
  .app-content { padding: 18px 14px 40px; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; padding: 24px; }
  .stats-grid, .admin-body .stats-grid { grid-template-columns: 1fr; }
  .session-context { grid-template-columns: 1fr; }
  .session-toolbar { flex-direction: column; }
  .chat-thread { padding: 14px; }
  .message-content { max-width: 88%; }
  .step-card-head { align-items: flex-start; flex-direction: column; }
  .composer-actions { align-items: stretch; flex-direction: column; }
  .upload-inline { align-items: stretch; flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .summary-head, .page-actions { align-items: flex-start; flex-direction: column; }
  .summary-stats { grid-template-columns: 1fr; }
  .app-pricing { grid-template-columns: 1fr; }
  .inline-form { min-width: 280px; }
}

@media print {
  .app-sidebar, .app-topbar, .page-actions, .site-header, .site-footer { display: none !important; }
  .app-shell { display: block; }
  .app-content { padding: 0; }
  .panel { box-shadow: none; border-color: #bbb; }
}

/* ===== RobHelptJou v0.2.0 homepage + brand ===== */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.brand { gap: 11px; }
.brand-logo { width: 46px; height: 46px; flex: 0 0 46px; display: block; filter: drop-shadow(0 7px 12px rgba(23,105,224,.18)); }
.brand-large .brand-logo { width: 51px; height: 51px; flex-basis: 51px; }
.brand-word { display: inline-flex; align-items: baseline; white-space: nowrap; letter-spacing: -.035em; }
.brand-word strong { color: #14213d; font-size: 1.5rem; font-weight: 850; }
.brand-word strong > span { color: #1265dc; }
.brand-word small { margin-left: 1px; color: #1265dc; font-size: 1.5rem; font-weight: 850; }
.header-inner { min-height: 84px; }
.main-nav { gap: 27px; }
.main-nav > a:not(.btn) { position: relative; }
.main-nav > a:not(.btn).active { color: var(--primary); }
.main-nav > a:not(.btn).active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -28px; height: 2px; border-radius: 999px; background: var(--primary); }
.nav-login { padding-inline: 20px; border-color: #abcaf5; color: #0f55bd; }
.home-page { background: #eef4fb; }
.home-main { background: #fff; }
.home-hero { position: relative; overflow: hidden; border-bottom: 1px solid #e3eaf4; background: linear-gradient(105deg,#fff 0%,#fff 57%,#f9fbff 100%); }
.home-hero-shape { position: absolute; left: -10%; bottom: -160px; width: 62%; height: 300px; border-radius: 50%; background: linear-gradient(155deg,rgba(226,240,255,.85),rgba(242,248,255,.25)); transform: rotate(8deg); pointer-events: none; }
.home-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .96fr 1.04fr; gap: 58px; align-items: center; min-height: 390px; padding-top: 22px; padding-bottom: 26px; }
.home-kicker { display: none; }
.home-hero-copy h1 { margin: 0 0 16px; color: #111a3b; font-size: clamp(2.6rem,4.3vw,4.65rem); line-height: 1.08; letter-spacing: -.05em; }
.home-hero-copy h1 span { color: #1265dc; }
.home-intro { max-width: 650px; margin: 0; color: #4d5973; font-size: 1.14rem; line-height: 1.55; }
.home-trust-points { display: flex; flex-wrap: wrap; gap: 22px; margin: 26px 0 24px; color: #4c5870; font-size: .92rem; }
.home-trust-points span { display: inline-flex; align-items: center; gap: 8px; }
.home-trust-points b { display: grid; place-items: center; width: 26px; height: 26px; color: #00a488; border: 2px solid #00a488; border-radius: 8px; font-size: .9rem; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.home-hero-actions .btn { min-width: 188px; }
.home-tagline { margin: 14px 0 0; color: #657188; font-size: .85rem; font-weight: 700; }
.home-chat-demo { overflow: hidden; border: 1px solid #dce5f1; border-radius: 20px; background: #fff; box-shadow: 0 18px 48px rgba(35,67,111,.14); }
.home-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid #e4e9f1; }
.home-chat-agent { display: flex; gap: 10px; align-items: center; }
.home-chat-agent img, .demo-row > img { width: 34px; height: 34px; }
.home-chat-agent div { display: flex; flex-direction: column; }
.home-chat-agent strong { font-size: .94rem; }
.home-chat-agent small { color: #6d778b; font-size: .72rem; }
.home-chat-agent small span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #10b783; }
.home-chat-tools { display: flex; gap: 4px; }
.home-chat-tools button { width: 31px; height: 31px; border: 0; border-radius: 8px; color: #62708a; background: transparent; }
.home-chat-body { min-height: 247px; padding: 15px 18px 13px; background: linear-gradient(180deg,#fbfcff,#f7faff); }
.demo-message { position: relative; border: 1px solid #dfe6ef; border-radius: 13px; color: #263248; font-size: .78rem; line-height: 1.45; }
.demo-message small { color: #8792a5; font-size: .65rem; }
.demo-user { width: 70%; margin-left: auto; padding: 12px 14px 19px; background: #edf4ff; }
.demo-user small { position: absolute; right: 10px; bottom: 6px; }
.demo-row { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: start; margin-top: 13px; }
.demo-assistant { width: 84%; padding: 12px 13px 20px; background: #fff; }
.demo-assistant strong { display: block; margin-bottom: 8px; }
.demo-assistant p { margin: 0 0 9px; }
.demo-assistant > small { position: absolute; right: 10px; bottom: 5px; }
.demo-step { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; color: #fff; border-radius: 50%; background: #1265dc; font-size: .67rem; font-weight: 900; }
.demo-safety { display: inline-flex; align-items: center; padding: 5px 8px; color: #08775e; border-radius: 7px; background: #ebfaf5; font-size: .68rem; font-weight: 750; }
.demo-check-actions { display: flex; gap: 7px; margin-top: 9px; }
.demo-check-actions button { padding: 6px 9px; border: 1px solid #b8d2f6; border-radius: 8px; color: #0f58bd; background: #fff; font-size: .67rem; font-weight: 750; }
.demo-check-actions button:first-child { color: #fff; border-color: #1265dc; background: #1265dc; }
.home-chat-input { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 10px; padding: 8px 8px 8px 13px; border: 1px solid #dfe5ee; border-radius: 999px; color: #9aa4b5; font-size: .75rem; }
.home-chat-input > div { display: flex; gap: 4px; }
.home-chat-input button { width: 29px; height: 29px; border: 0; border-radius: 50%; color: #62708a; background: transparent; }
.home-chat-input .send { color: #fff; background: #1265dc; }
.home-services { padding: 16px 0 12px; border-bottom: 1px solid #e5ebf3; background: #fff; }
.home-service-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.home-service-card { display: grid; grid-template-columns: 47px minmax(0,1fr); gap: 10px; align-items: center; min-height: 78px; padding: 12px; border: 1px solid #e0e7f0; border-radius: 12px; background: #fff; box-shadow: 0 4px 13px rgba(31,56,92,.035); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.home-service-card:hover { transform: translateY(-2px); border-color: #bed4f3; box-shadow: 0 10px 24px rgba(31,56,92,.09); }
.home-service-icon { display: grid; place-items: center; width: 45px; height: 45px; color: #fff; border-radius: 11px; font-size: 1.35rem; font-weight: 900; }
.home-service-card > span:last-child { min-width: 0; }
.home-service-card strong { display: block; color: #1b263d; font-size: .78rem; line-height: 1.2; }
.home-service-card small { display: block; margin-top: 5px; color: #657087; font-size: .65rem; line-height: 1.3; }
.service-tone-1 .home-service-icon { background: linear-gradient(145deg,#2078f1,#0751bf); }
.service-tone-2 .home-service-icon { background: linear-gradient(145deg,#14b59a,#079178); }
.service-tone-3 .home-service-icon { background: linear-gradient(145deg,#9a5ef0,#6c35c0); }
.service-tone-4 .home-service-icon { background: linear-gradient(145deg,#2a94ef,#0872c9); }
.service-tone-5 .home-service-icon { background: linear-gradient(145deg,#ff8838,#eb5d13); }
.service-tone-6 .home-service-icon { background: linear-gradient(145deg,#f6b929,#e49500); }
.home-info-section { padding: 16px 0 17px; background: #fff; }
.home-info-grid { display: grid; grid-template-columns: 1.02fr 1.12fr .96fr; gap: 14px; align-items: stretch; }
.home-info-card { padding: 20px; border: 1px solid #dfe6ef; border-radius: 13px; background: #fff; }
.home-info-card h2 { margin: 0; color: #102052; font-size: 1.06rem; }
.home-how-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 20px; }
.home-how-steps > div { position: relative; text-align: center; }
.home-how-steps > div > span { position: absolute; left: 0; top: 4px; display: grid; place-items: center; width: 24px; height: 24px; color: #185fc6; border: 1px solid #8bb8f2; border-radius: 50%; background: #fff; font-size: .72rem; font-weight: 900; }
.home-how-steps b { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 10px; color: #05a88a; border-radius: 50%; background: #e6f8f5; font-size: 1.4rem; }
.home-how-steps strong { display: block; color: #172448; font-size: .72rem; }
.home-how-steps p { margin: 5px 0 0; color: #667187; font-size: .63rem; line-height: 1.45; }
.home-tip { margin-top: 17px; padding: 10px 12px; color: #2765af; border-radius: 8px; background: #eef6ff; font-size: .68rem; font-weight: 700; }
.home-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-card-title-row > span { padding: 4px 8px; color: #1769e0; border-radius: 999px; background: #eef6ff; font-size: .62rem; font-weight: 800; }
.home-credit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px; }
.home-credit-pack { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 163px; padding: 14px 8px 10px; border: 1px solid #dfe6ef; border-radius: 9px; text-align: center; }
.home-credit-pack strong { color: #1d2844; font-size: .7rem; }
.home-credit-pack b { margin-top: 7px; color: #15244a; font-size: .87rem; }
.home-credit-pack em { margin-top: 9px; color: #14213d; font-size: 1.05rem; font-style: normal; font-weight: 900; }
.home-credit-pack small { color: #6e788c; font-size: .61rem; }
.home-credit-pack a { width: 82%; margin-top: auto; padding: 5px; color: #0e58c3; border: 1px solid #91b8ef; border-radius: 6px; font-size: .66rem; font-weight: 800; }
.home-credit-pack.featured { border: 2px solid #10b49a; box-shadow: 0 8px 20px rgba(16,180,154,.12); }
.home-credit-pack.featured i { position: absolute; left: 50%; top: -13px; width: 86%; transform: translateX(-50%); padding: 4px 5px; color: #fff; border-radius: 6px 6px 0 0; background: #10b49a; font-size: .57rem; font-style: normal; font-weight: 850; }
.home-credit-pack.featured a { color: #fff; border-color: #10b49a; background: #10b49a; }
.home-payment-note { display: flex; justify-content: center; gap: 9px; margin-top: 9px; color: #5f6a80; font-size: .61rem; }
.home-payment-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; color: #0f4aa0; font-size: .62rem; }
.promise-card-compact { display: grid; align-content: center; gap: 16px; }
.home-promise { display: grid; grid-template-columns: 39px 1fr; gap: 11px; align-items: start; }
.home-promise > span { display: grid; place-items: center; width: 38px; height: 38px; color: #0d8f7a; border-radius: 50%; background: #eaf8f5; font-size: 1.05rem; }
.home-promise strong { color: #172448; font-size: .73rem; }
.home-promise p { margin: 3px 0 0; color: #657087; font-size: .64rem; line-height: 1.4; }
.home-help-strip { padding: 13px 0; border-top: 1px solid #e3eaf2; border-bottom: 1px solid #e3eaf2; background: #f2f7fd; }
.home-help-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: #30405f; font-size: .72rem; }
.home-help-strip strong { color: #20509e; font-size: .8rem; }
.home-help-strip span { color: #3c4b65; }
.home-help-strip span::first-letter { color: #0aa47f; }
.home-help-strip a { color: #1265dc; font-weight: 850; }
.site-footer-light { padding: 30px 0 14px; color: #536079; border-top: 0; background: #fff; }
.footer-grid-light { grid-template-columns: 1.8fr repeat(4,1fr); gap: 34px; }
.footer-grid-light h4 { color: #162340; font-size: .78rem; }
.footer-grid-light a, .footer-grid-light span { font-size: .72rem; }
.footer-grid-light a:hover { color: #1265dc; }
.footer-brand-column p { margin: 9px 0 0; color: #536079; font-size: .72rem; }
.footer-bottom-light { margin-top: 22px; padding-top: 12px; color: #7a8598; border-top-color: #e5eaf1; }
.app-brand .brand-logo { width: 38px; height: 38px; flex-basis: 38px; }
.app-brand .brand-word strong, .app-brand .brand-word small { color: #fff; font-size: 1.1rem; }
.app-brand .brand-word strong > span { color: #70b4ff; }

@media (max-width: 1220px) {
  .home-service-grid { grid-template-columns: repeat(4,1fr); }
  .home-info-grid { grid-template-columns: 1fr 1fr; }
  .promise-card-compact { grid-column: 1 / -1; grid-template-columns: repeat(4,1fr); }
  .home-promise { grid-template-columns: 36px 1fr; }
  .footer-grid-light { grid-template-columns: 1.5fr repeat(2,1fr); }
}
@media (max-width: 960px) {
  .main-nav > a:not(.btn).active::after { display: none; }
  .home-hero-grid { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 42px; }
  .home-chat-demo { max-width: 760px; }
  .home-service-grid { grid-template-columns: repeat(3,1fr); }
  .home-info-grid { grid-template-columns: 1fr; }
  .promise-card-compact { grid-column: auto; grid-template-columns: repeat(2,1fr); }
  .footer-grid-light { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
  .brand-large .brand-logo { width: 43px; height: 43px; flex-basis: 43px; }
  .brand-word strong, .brand-word small { font-size: 1.25rem; }
  .home-hero-grid { gap: 34px; }
  .home-hero-copy h1 { font-size: 2.55rem; }
  .home-intro { font-size: 1rem; }
  .home-trust-points { gap: 11px 17px; }
  .home-hero-actions { flex-direction: column; }
  .home-hero-actions .btn { width: 100%; }
  .home-service-grid { grid-template-columns: 1fr; }
  .home-service-card { min-height: 70px; }
  .home-how-steps, .home-credit-grid { grid-template-columns: 1fr; }
  .home-how-steps { gap: 18px; }
  .home-how-steps > div > span { left: 22%; }
  .home-credit-pack { min-height: 145px; }
  .promise-card-compact { grid-template-columns: 1fr; }
  .footer-grid-light { grid-template-columns: 1fr; }
}

/* ===== Screenshot / knipsel-tool ===== */
.screenshot-upload-row { justify-content: space-between; gap: 10px; }
.screenshot-upload-row > form { display: flex; gap: 8px; align-items: center; }
.screenshot-open-button { border-color: #9fc4f5; color: #0f59bf; background: #eef6ff; }
.screenshot-modal[hidden] { display: none !important; }
.screenshot-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.screenshot-backdrop { position: absolute; inset: 0; background: rgba(10,24,48,.68); backdrop-filter: blur(5px); }
.screenshot-dialog { position: relative; z-index: 1; width: min(1080px,100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #dbe4f0; border-radius: 22px; background: #fff; box-shadow: 0 30px 100px rgba(4,18,42,.35); }
.screenshot-dialog-head { display: flex; justify-content: space-between; gap: 28px; padding: 24px 26px 18px; border-bottom: 1px solid #e4eaf2; }
.screenshot-dialog-head h2 { margin: 6px 0 5px; color: #14213d; font-size: 1.55rem; }
.screenshot-dialog-head p { margin: 0; color: #68748a; font-size: .9rem; }
.screenshot-close { flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 11px; color: #536078; background: #f1f4f8; font-size: 1.5rem; }
.screenshot-source-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 18px 26px; }
.screenshot-source { display: grid; grid-template-columns: 42px 1fr; gap: 4px 11px; align-items: center; padding: 14px; text-align: left; border: 1px solid #dfe6ef; border-radius: 13px; color: #1e2a45; background: #fbfdff; }
.screenshot-source:hover { border-color: #9fc4f5; background: #f3f8ff; }
.screenshot-source > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: #1265dc; background: #eaf3ff; font-size: 1.25rem; }
.screenshot-source strong { font-size: .82rem; }
.screenshot-source small { color: #69758a; font-size: .7rem; line-height: 1.35; }
.screenshot-status { margin: 0 26px 18px; padding: 14px 16px; border: 1px dashed #afc7e7; border-radius: 12px; color: #4f5d75; background: #f7faff; outline: none; }
.screenshot-status:focus { border-color: #1769e0; box-shadow: 0 0 0 4px #eaf3ff; }
.screenshot-status strong, .screenshot-status span { display: block; }
.screenshot-status strong { color: #204b8c; font-size: .82rem; }
.screenshot-status span { margin-top: 2px; font-size: .73rem; }
.screenshot-editor { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 18px; padding: 0 26px 22px; }
.screenshot-canvas-wrap { min-width: 0; padding: 12px; border: 1px solid #dfe6ef; border-radius: 14px; background: #eef3f9; }
.screenshot-canvas-wrap canvas { display: block; width: 100%; max-height: 480px; object-fit: contain; cursor: crosshair; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(27,52,88,.12); touch-action: none; }
.screenshot-canvas-wrap p { margin: 9px 2px 0; color: #667188; font-size: .7rem; }
.screenshot-editor-side { display: flex; flex-direction: column; gap: 12px; }
.screenshot-editor-side label { display: grid; gap: 6px; color: #32415d; font-size: .75rem; font-weight: 750; }
.screenshot-editor-side input { width: 100%; padding: 10px 11px; border: 1px solid #d8e0eb; border-radius: 10px; outline: none; }
.screenshot-editor-side input:focus { border-color: #1769e0; box-shadow: 0 0 0 3px #eaf3ff; }
.screenshot-selection-info { padding: 10px 11px; color: #17624f; border-radius: 10px; background: #eaf8f3; font-size: .72rem; font-weight: 750; }
.screenshot-privacy-note { margin-top: auto; padding: 14px; border: 1px solid #f0d8aa; border-radius: 12px; background: #fff8e9; }
.screenshot-privacy-note strong { color: #7d5616; font-size: .78rem; }
.screenshot-privacy-note p { margin: 5px 0 0; color: #7b6845; font-size: .69rem; line-height: 1.45; }
.screenshot-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 26px 22px; border-top: 1px solid #e4eaf2; }
body.screenshot-open { overflow: hidden; }
@media (max-width: 820px) {
  .screenshot-source-grid { grid-template-columns: 1fr; }
  .screenshot-editor { grid-template-columns: 1fr; }
  .screenshot-privacy-note { margin-top: 0; }
}
@media (max-width: 560px) {
  .screenshot-modal { padding: 0; }
  .screenshot-dialog { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; }
  .screenshot-dialog-head, .screenshot-source-grid, .screenshot-editor, .screenshot-dialog-actions { padding-left: 16px; padding-right: 16px; }
  .screenshot-status { margin-left: 16px; margin-right: 16px; }
  .screenshot-dialog-actions { flex-direction: column-reverse; }
  .screenshot-dialog-actions .btn { width: 100%; }
  .screenshot-upload-row, .screenshot-upload-row > form { align-items: stretch; flex-direction: column; }
}
.initial-screenshot-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 18px; align-items: center; padding: 16px; border: 1px solid #cfe0f5; border-radius: 14px; background: #f6faff; }
.initial-screenshot-field strong { color: #24334f; }
.initial-screenshot-field strong small { color: #7a879a; font-weight: 600; }
.initial-screenshot-field p { margin: 4px 0 0; color: #69758a; font-size: .78rem; }
.initial-screenshot-field > span { grid-column: 1 / -1; color: #0f6d58; font-size: .74rem; font-weight: 700; }
@media (max-width: 680px) { .initial-screenshot-field { grid-template-columns: 1fr; } }
.screenshot-status[data-type="success"] { border-color: #9edac8; color: #17624f; background: #effaf6; }
.screenshot-status[data-type="warning"] { border-color: #efcc87; color: #765018; background: #fff8e9; }
.screenshot-status[data-type="error"] { border-color: #efb5b5; color: #8c3131; background: #fff2f2; }

/* ===== v0.3.0: eenvoudige rechthoekselectie, tijdmeter en adminpanel ===== */
.screenshot-simple-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 16px 26px 0; }
.screenshot-simple-steps span { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 12px; color: #33445f; border-radius: 11px; background: #f4f8fd; font-size: .78rem; font-weight: 750; }
.screenshot-simple-steps b { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; color: #fff; border-radius: 50%; background: #1769e0; }
.screenshot-source-primary { border-color: #84b5f2; background: #eef6ff; box-shadow: 0 7px 18px rgba(23,105,224,.08); }
.screenshot-source-primary strong { color: #0e58c3; }
.screenshot-editor { grid-template-columns: minmax(0,1fr) 260px; }
.screenshot-editor-main { min-width: 0; }
.screenshot-select-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; padding: 13px 14px; border: 1px solid #b9d4f6; border-radius: 13px; background: #f2f7ff; }
.screenshot-select-bar strong, .screenshot-select-bar span { display: block; }
.screenshot-select-bar strong { color: #183a72; font-size: .85rem; }
.screenshot-select-bar span { margin-top: 3px; color: #60718b; font-size: .72rem; }
.screenshot-select-bar .btn { flex: 0 0 auto; }
.screenshot-select-bar .btn.is-active { box-shadow: 0 0 0 4px rgba(23,105,224,.15); }
.screenshot-canvas-wrap { position: relative; display: grid; place-items: center; min-height: 260px; overflow: auto; }
.screenshot-canvas-wrap canvas { width: auto; max-width: 100%; height: auto; max-height: 520px; cursor: default; }
.screenshot-canvas-wrap canvas.is-selecting { cursor: crosshair; outline: 4px solid rgba(23,105,224,.18); }
.screenshot-selection-hint { position: absolute; left: 50%; top: 50%; max-width: 320px; transform: translate(-50%,-50%); padding: 13px 16px; pointer-events: none; color: #fff; border-radius: 10px; background: rgba(10,34,75,.88); box-shadow: 0 8px 28px rgba(6,24,55,.25); text-align: center; font-size: .82rem; font-weight: 800; }
.screenshot-selection-hint[hidden] { display: none; }
.screenshot-dialog-actions .btn { min-width: 155px; }

.session-time-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 12px 16px; border-bottom: 1px solid #dfe7f2; background: #f8fbff; }
.session-time-item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 9px 11px; border: 1px solid #dce7f4; border-radius: 11px; background: #fff; }
.session-time-item > span:first-child { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #1265dc; border-radius: 10px; background: #eaf3ff; font-size: 1.05rem; }
.session-time-item small, .session-time-item strong { display: block; }
.session-time-item small { color: #718097; font-size: .67rem; }
.session-time-item strong { margin-top: 2px; color: #1c2c4b; font-size: .82rem; }
.session-time-item.timer-state { grid-column: span 1; }
.session-time-item.timer-state strong { color: #0c725c; }
.session-time-item.timer-state[data-state="running"] { border-color: #83cdb8; background: #effaf6; }
.session-time-item.timer-state[data-state="paused"] strong { color: #8a5b13; }
.session-time-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.session-paused-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid #efd18f; border-radius: 13px; background: #fff8e8; }
.session-paused-banner strong { color: #704a0f; }
.session-paused-banner p { margin: 3px 0 0; color: #7b6846; }
.credit-explainer { color: #52627a; font-size: .76rem; }
.credit-explainer strong { color: #183a72; }

.btn-admin { color: #fff; border-color: #3c2b83; background: linear-gradient(135deg,#3f2b96,#6b4ce6); box-shadow: 0 7px 16px rgba(63,43,150,.18); }
.btn-admin:hover { color: #fff; transform: translateY(-1px); }
.btn-danger-soft { color: #9b3434; border: 1px solid #efbaba; background: #fff2f2; }
.btn-danger-soft:hover { background: #ffe8e8; }
.status-paused { color: #80530f; background: #fff2d8; }
.role-pill { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.role-admin { color: #4e3596; background: #eee9ff; }
.role-user { color: #31506f; background: #edf3f8; }
.admin-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 22px 24px; color: #fff; background: linear-gradient(135deg,#173d78,#49359b); }
.admin-welcome .eyebrow, .admin-welcome p { color: rgba(255,255,255,.75); }
.admin-welcome h2 { margin: 5px 0; color: #fff; }
.admin-welcome p { margin: 0; }
.admin-shield { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 18px; background: rgba(255,255,255,.15); font-size: 1.8rem; }
.admin-stats-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.stat-card em { display: block; margin-top: 3px; color: #8290a5; font-size: .63rem; font-style: normal; }
.admin-credit-form { display: grid; gap: 6px; min-width: 225px; }
.admin-credit-form > div { display: grid; grid-template-columns: 1.2fr .8fr; gap: 6px; }
.admin-credit-form select, .admin-credit-form input { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid #d9e1ec; border-radius: 7px; font-size: .7rem; }
.form-grid-two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.info-banner.compact { margin: 0; padding: 13px 14px; }
.check-row span strong, .check-row span small { display: block; }
.check-row span small { margin-top: 2px; color: #758198; font-size: .68rem; font-weight: 500; }

@media (max-width: 1180px) {
  .admin-stats-grid { grid-template-columns: repeat(3,1fr); }
  .session-time-strip { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .screenshot-simple-steps { grid-template-columns: 1fr; }
  .screenshot-select-bar { align-items: stretch; flex-direction: column; }
  .screenshot-select-bar .btn { width: 100%; }
  .session-time-strip { grid-template-columns: 1fr; }
  .session-time-item.timer-state { grid-column: auto; }
  .session-time-actions { justify-content: stretch; }
  .session-time-actions form, .session-time-actions .btn { width: 100%; }
  .admin-stats-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .screenshot-simple-steps { padding-left: 16px; padding-right: 16px; }
  .screenshot-dialog-actions .btn { min-width: 0; }
  .form-grid-two, .admin-stats-grid { grid-template-columns: 1fr; }
  .admin-welcome { align-items: flex-start; }
}
.session-cost-preview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.session-cost-preview > div { display: flex; gap: 11px; align-items: flex-start; padding: 14px; border: 1px solid #cfe0f5; border-radius: 12px; background: #f7fbff; }
.session-cost-preview > div > span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #1265dc; border-radius: 10px; background: #e8f2ff; }
.session-cost-preview p, .session-cost-preview small, .session-cost-preview strong { display: block; margin: 0; }
.session-cost-preview strong { color: #203452; font-size: .78rem; }
.session-cost-preview small { margin-top: 3px; color: #6b7890; font-size: .69rem; line-height: 1.4; }
@media (max-width: 680px) { .session-cost-preview { grid-template-columns: 1fr; } }
.pricing-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.pricing-rules article { display: flex; gap: 13px; align-items: flex-start; padding: 18px; border: 1px solid #dbe5f1; border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(21,55,95,.05); }
.pricing-rules article > span { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; color: #1265dc; border-radius: 12px; background: #eaf3ff; font-size: 1.1rem; }
.pricing-rules strong { display: block; color: #203452; }
.pricing-rules p { margin: 4px 0 0; color: #68768c; font-size: .78rem; line-height: 1.5; }
.pricing-grid-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.price-main { margin: 13px 0 2px; color: #14213d; font-size: 1.9rem; font-weight: 900; }
.page-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 24px; padding: 25px 28px; color: #fff; border-radius: 18px; background: linear-gradient(135deg,#0f4ba7,#1769e0); box-shadow: 0 16px 38px rgba(23,105,224,.16); }
.page-cta .eyebrow, .page-cta p { color: rgba(255,255,255,.78); }
.page-cta h2 { margin: 5px 0; color: #fff; }
.page-cta p { margin: 0; }
.page-cta .btn { flex: 0 0 auto; color: #0f59bf; background: #fff; }
.service-cta { margin-top: 30px; }
.auth-form-wrap label small { color: #7a879a; font-size: .7rem; font-weight: 600; }
@media (max-width: 820px) {
  .pricing-rules, .pricing-grid-three { grid-template-columns: 1fr; }
  .page-cta { align-items: stretch; flex-direction: column; }
  .page-cta .btn { width: 100%; }
}
.session-limit-banner { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 18px; border: 1px solid #efc56c; border-radius: 13px; background: #fff8e6; }
.session-limit-banner strong { color: #70480c; }
.session-limit-banner p { margin: 4px 0 0; color: #7b6741; }
.session-limit-banner form { display: flex; align-items: end; gap: 8px; }
.session-limit-banner label { display: grid; gap: 5px; color: #70480c; font-size: .7rem; font-weight: 800; }
.session-limit-banner input { width: 110px; padding: 9px 10px; border: 1px solid #dfb657; border-radius: 8px; }
@media (max-width: 820px) { .session-limit-banner { grid-template-columns: 1fr; } .session-limit-banner form { align-items: stretch; flex-direction: column; } .session-limit-banner input { width: 100%; } }


/* ===== v0.3.1: eenvoudige screenshotknoppen en betrouwbare rechthoekselectie ===== */
.home-chat-input-clear {
  align-items: stretch;
  gap: 8px;
  padding: 9px 10px 10px 13px;
  border-radius: 14px;
}
.home-chat-input-clear > span { display: flex; align-items: center; min-width: 0; }
.home-chat-input-actions { display: flex; align-items: center; gap: 6px; }
.home-chat-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 9px;
  color: #24538f;
  border: 1px solid #cfdded;
  border-radius: 9px;
  background: #f7fbff;
  font-size: .68rem;
  font-weight: 800;
  text-decoration: none;
}
.home-chat-action:hover { color: #0f59bf; border-color: #98bff0; background: #eef6ff; }
.home-chat-action b { font-size: .9rem; }
.home-chat-send {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  color: #fff;
  border-radius: 50%;
  background: #1265dc;
  text-decoration: none;
  font-size: .95rem;
}

.attachment-launch-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.attachment-launch {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 72px;
  padding: 13px 15px;
  color: #203452;
  border: 1px solid #cbd9e9;
  border-radius: 13px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(24,58,104,.05);
}
.attachment-launch:hover { border-color: #82b4f0; background: #f5f9ff; transform: translateY(-1px); }
.attachment-launch-screenshot { border-color: #8dbcf3; background: #eef6ff; }
.attachment-launch-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: #fff;
  border-radius: 12px;
  background: #1769e0;
  font-size: 1.2rem;
  font-weight: 900;
}
.attachment-launch-file .attachment-launch-icon { background: #0b9a7b; }
.attachment-launch strong, .attachment-launch small { display: block; }
.attachment-launch strong { color: #183a72; font-size: .88rem; }
.attachment-launch small { margin-top: 4px; color: #66768e; font-size: .72rem; line-height: 1.4; }
.attachment-launch input { display: none; }
.attachment-upload-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.attachment-upload-button { min-width: 126px; }
.initial-screenshot-field .attachment-launch { min-width: 300px; }

.screenshot-source-grid-simple { grid-template-columns: repeat(2,minmax(0,1fr)); }
.screenshot-source-large { min-height: 96px; padding: 18px; }
.screenshot-source-large > span { width: 50px; height: 50px; border-radius: 14px; font-size: 1.45rem; }
.screenshot-source-large strong { font-size: .94rem; }
.screenshot-source-large small { font-size: .76rem; line-height: 1.5; }
.screenshot-source-secondary { grid-column: 1 / -1; min-height: 72px; opacity: .9; }
.screenshot-editor-simple { grid-template-columns: minmax(0,1fr) 280px; }
.screenshot-canvas-wrap {
  min-height: 330px;
  padding: 16px;
  border: 2px solid #c7d8ec;
  background: #eaf1f8;
}
.screenshot-canvas-wrap canvas {
  max-height: 560px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.screenshot-canvas-wrap canvas.is-selecting {
  cursor: crosshair;
  outline: 5px solid rgba(23,105,224,.16);
  box-shadow: 0 0 0 2px #1769e0, 0 10px 30px rgba(19,59,111,.18);
}
.screenshot-selection-hint {
  display: grid;
  gap: 5px;
  max-width: 390px;
  padding: 18px 22px;
  font-size: .9rem;
}
.screenshot-selection-hint strong, .screenshot-selection-hint span { display: block; }
.screenshot-selection-hint strong { font-size: 1rem; }
.screenshot-selection-hint span { font-size: .76rem; font-weight: 600; opacity: .9; }
.screenshot-selection-info { padding: 14px; font-size: .82rem; }
.screenshot-dialog-actions-large { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 12px; }
.screenshot-dialog-actions-large .screenshot-action {
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  font-size: .86rem;
}
.screenshot-action span { margin-right: 7px; font-size: 1rem; }
.screenshot-action-primary { box-shadow: 0 9px 20px rgba(23,105,224,.22); }

@media (max-width: 900px) {
  .attachment-launch-row, .screenshot-source-grid-simple, .screenshot-editor-simple { grid-template-columns: 1fr; }
  .screenshot-source-secondary { grid-column: auto; }
  .attachment-upload-form { grid-template-columns: 1fr; }
  .attachment-upload-button { width: 100%; min-height: 46px; }
  .screenshot-dialog-actions-large { grid-template-columns: 1fr; }
  .home-chat-input-clear { flex-direction: column; }
  .home-chat-input-actions { width: 100%; }
  .home-chat-action { flex: 1; justify-content: center; }
}

@media (max-width: 620px) {
  .initial-screenshot-field .attachment-launch { min-width: 0; }
  .home-chat-input-actions { flex-wrap: wrap; }
  .home-chat-send { flex: 0 0 38px; }
}


/* ===== v0.3.2: snelle Windows-knipsel- en fotowerkwijze ===== */
.screenshot-dialog-simple { width: min(860px,100%); }
.simple-capture-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  padding: 22px 26px 16px;
}
.simple-capture-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 18px;
  color: #1c2c48;
  border: 1px solid #d7e1ed;
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 7px 20px rgba(22,52,93,.06);
}
.simple-capture-option:hover,
.simple-capture-option:focus-within {
  border-color: #7cafea;
  background: #f4f9ff;
  transform: translateY(-1px);
}
.simple-capture-primary { border-color: #74a9eb; background: #eef6ff; }
.simple-capture-icon {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  color: #fff;
  border-radius: 15px;
  background: #1769e0;
  font-size: 1.45rem;
}
.simple-capture-camera .simple-capture-icon { background: #0a9b7d; }
.simple-capture-photo .simple-capture-icon { background: #7a45cf; }
.simple-capture-option strong,
.simple-capture-option small { display: block; }
.simple-capture-option strong { color: #163a70; font-size: .96rem; }
.simple-capture-option small { margin-top: 5px; color: #65758c; font-size: .76rem; line-height: 1.45; }
.simple-paste-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 26px 16px;
  padding: 15px 16px;
  border: 2px dashed #a9c7eb;
  border-radius: 14px;
  background: #f7fbff;
  outline: none;
}
.simple-paste-panel.is-waiting { border-color: #1769e0; background: #edf5ff; box-shadow: 0 0 0 4px rgba(23,105,224,.08); }
.simple-paste-panel strong,
.simple-paste-panel span { display: block; }
.simple-paste-panel strong { color: #173c74; font-size: .9rem; }
.simple-paste-panel span { margin-top: 4px; color: #63738a; font-size: .78rem; }
.simple-paste-panel kbd {
  display: inline-block;
  min-width: 27px;
  padding: 3px 6px;
  color: #23324b;
  border: 1px solid #bfcada;
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-weight: 800;
  text-align: center;
}
.simple-capture-preview {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(220px,.75fr);
  gap: 18px;
  margin: 0 26px 18px;
  padding: 16px;
  border: 1px solid #cfdceb;
  border-radius: 16px;
  background: #f8fbff;
}
.simple-capture-preview[hidden] { display: none !important; }
.simple-capture-image-wrap {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid #d7e0eb;
  border-radius: 12px;
  background: #e9eff6;
}
.simple-capture-image-wrap img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(19,46,82,.14);
}
.simple-capture-preview-info { align-self: center; }
.simple-capture-preview-info > strong { display: block; margin-top: 7px; color: #17345f; overflow-wrap: anywhere; }
.simple-capture-preview-info p { margin: 10px 0 0; color: #6f5a2f; font-size: .78rem; line-height: 1.55; }
.snipping-store-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 26px 18px;
  padding: 14px 16px;
  border: 1px solid #e8d39e;
  border-radius: 13px;
  background: #fff9eb;
}
.snipping-store-help strong { color: #6f4b0e; font-size: .84rem; }
.snipping-store-help p { margin: 4px 0 0; color: #786744; font-size: .72rem; line-height: 1.45; }
.snipping-store-help .btn { flex: 0 0 auto; }
.simple-capture-actions { display: grid; grid-template-columns: .8fr .8fr 1.4fr; gap: 12px; }
.simple-capture-actions .btn { min-height: 52px; justify-content: center; }

@media (max-width: 820px) {
  .simple-capture-grid { grid-template-columns: 1fr; }
  .simple-capture-option { min-height: 92px; }
  .simple-capture-preview { grid-template-columns: 1fr; }
  .simple-paste-panel, .snipping-store-help { align-items: stretch; flex-direction: column; }
  .simple-paste-panel .btn, .snipping-store-help .btn { width: 100%; }
}

@media (max-width: 620px) {
  .simple-capture-grid { padding: 16px; }
  .simple-paste-panel, .simple-capture-preview, .snipping-store-help { margin-left: 16px; margin-right: 16px; }
  .simple-capture-actions { grid-template-columns: 1fr; }
  .simple-capture-option { padding: 15px; }
}

/* ===== v0.3.3: één chatpagina, directe knipsel- en fotowerkflow ===== */
.start-chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: start;
}
.start-chat-panel { overflow: hidden; }
.start-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #e4edf8;
}
.start-chat-head h2 { margin: 4px 0 8px; color: #14213d; font-size: clamp(1.55rem, 2vw, 2.05rem); }
.start-chat-head p { max-width: 700px; margin: 0; color: #66758e; line-height: 1.65; }
.start-chat-thread { padding: 26px; background: linear-gradient(180deg,#f8fbff 0%,#fff 100%); }
.start-chat-agent-row { display: flex; gap: 13px; align-items: flex-start; }
.start-chat-agent-row > img { width: 40px; height: 40px; padding: 7px; border: 1px solid #cce0fb; border-radius: 13px; background: #fff; }
.start-chat-agent-message {
  max-width: 690px;
  padding: 17px 19px;
  border: 1px solid #d9e6f5;
  border-radius: 8px 18px 18px 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31,65,116,.07);
}
.start-chat-agent-message strong { color: #162441; font-size: 1rem; }
.start-chat-agent-message p { margin: 7px 0 10px; color: #55657d; line-height: 1.6; }
.start-chat-agent-message span { display: inline-flex; padding: 6px 9px; color: #0b755a; border-radius: 999px; background: #eaf9f3; font-size: .76rem; font-weight: 800; }
.start-chat-composer { padding: 0 26px 24px; }
.start-chat-composer textarea {
  width: 100%;
  min-height: 118px;
  padding: 18px 19px;
  color: #14213d;
  border: 2px solid #cddcf0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(31,65,116,.05);
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  resize: vertical;
}
.start-chat-composer textarea:focus { outline: 0; border-color: #2c79e8; box-shadow: 0 0 0 4px rgba(44,121,232,.12); }
.start-chat-attachment-status { min-height: 24px; margin: 9px 2px 0; color: #697992; font-size: .8rem; font-weight: 700; }
.start-chat-attachment-status[data-state="ready"] { color: #087259; }
.start-chat-toolbar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) minmax(170px,auto); gap: 11px; margin-top: 12px; }
.start-chat-tool {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  min-height: 70px;
  padding: 11px 13px;
  color: #213250;
  border: 1px solid #cdddf1;
  border-radius: 13px;
  background: #f8fbff;
  text-align: left;
  cursor: pointer;
}
.start-chat-tool:hover { border-color: #85b6f1; background: #eef6ff; }
.start-chat-tool > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #e7f1ff; font-size: 1.1rem; }
.start-chat-tool strong { font-size: .84rem; }
.start-chat-tool small { color: #6e7d93; font-size: .7rem; line-height: 1.35; }
.start-chat-tool-snip { border-color: #8ab8ef; background: #eff7ff; }
.start-chat-submit { min-height: 70px; align-self: stretch; }
.start-chat-footnote { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 15px 26px; color: #5e6e86; border-top: 1px solid #e5edf8; background: #f7faff; font-size: .77rem; font-weight: 700; }
.start-chat-side { display: grid; gap: 16px; }
.start-chat-side .safety-note { position: sticky; top: 94px; }
.start-chat-costs { display: grid; gap: 10px; }

.snip-quick-bar { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 18px 26px 8px; }
.snip-quick-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 58px;
  padding: 12px 14px;
  color: #243550;
  border: 1px solid #cfdef0;
  border-radius: 13px;
  background: #f8fbff;
  font: inherit;
  cursor: pointer;
}
.snip-quick-button:hover { border-color: #86b6ee; background: #eef6ff; }
.snip-quick-primary { color: #0c59c9; border-color: #8ab9f2; background: #edf6ff; }
.snip-quick-button span { font-size: 1.1rem; }
.snipping-store-help { margin: 12px 26px 0; padding: 12px 14px; border: 1px solid #dbe6f3; border-radius: 12px; background: #f8fbff; }
.snipping-store-help summary { color: #33445f; font-weight: 800; cursor: pointer; }
.snipping-store-help > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 10px; }
.snipping-store-help p { margin: 0; color: #677790; font-size: .8rem; }
.attachment-launch-photo { border-color: #b8dfd4; background: #f1fbf8; }

.home-start-chat-form { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: center; }
.home-start-question {
  min-width: 0;
  width: 100%;
  padding: 10px 4px;
  color: #22324e;
  border: 0;
  background: transparent;
  font: inherit;
}
.home-start-question:focus { outline: 0; }
.home-start-chat-form .home-chat-input-actions { position: static; }
.home-start-chat-form .home-chat-action { border: 0; font: inherit; cursor: pointer; }
.home-start-attachment-name { grid-column: 1 / -1; color: #6c7c93; font-size: .67rem; }
.home-start-attachment-name[data-state="ready"] { color: #0a7259; font-weight: 800; }

@media (max-width: 1100px) {
  .start-chat-layout { grid-template-columns: 1fr; }
  .start-chat-side { grid-template-columns: 1fr 1fr; }
  .start-chat-side .safety-note { position: static; }
  .start-chat-toolbar { grid-template-columns: repeat(3,1fr); }
  .start-chat-submit { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .start-chat-head { flex-direction: column; padding: 20px; }
  .start-chat-thread, .start-chat-composer { padding-left: 16px; padding-right: 16px; }
  .start-chat-toolbar, .snip-quick-bar, .start-chat-side { grid-template-columns: 1fr; }
  .start-chat-submit { grid-column: auto; }
  .start-chat-footnote { flex-direction: column; padding: 14px 16px; }
  .snip-quick-bar { padding-left: 16px; padding-right: 16px; }
  .snipping-store-help { margin-left: 16px; margin-right: 16px; }
  .snipping-store-help > div { align-items: stretch; flex-direction: column; }
  .home-start-chat-form { grid-template-columns: 1fr; }
  .home-start-chat-form .home-chat-input-actions { justify-content: flex-end; }
}

/* ===== v0.3.4: admin providerstatus ===== */
.admin-provider-test { display: grid; gap: 9px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.admin-provider-test small { color: var(--muted); font-size: .78rem; line-height: 1.45; }

/* ===== v0.3.4: homepage chat polish ===== */
.home-hero-grid {
  grid-template-columns: .86fr 1.14fr;
  gap: 44px;
  min-height: 420px;
  padding-top: 18px;
  padding-bottom: 22px;
}
.home-chat-demo {
  width: calc(100% + 20px);
  transform: translate(16px,-18px);
  border-radius: 22px;
  box-shadow: 0 22px 58px rgba(35,67,111,.16);
}
.home-chat-head { padding: 15px 19px; }
.home-chat-agent img, .demo-row > img { width: 37px; height: 37px; }
.home-chat-agent strong { font-size: 1rem; }
.home-chat-agent small { font-size: .76rem; }
.home-chat-tools button { width: 35px; height: 35px; }
.home-chat-body { min-height: 270px; padding: 17px 20px 15px; }
.demo-message { font-size: .82rem; line-height: 1.48; }
.demo-message small { font-size: .68rem; }
.demo-user { width: 72%; padding: 13px 15px 20px; }
.demo-row { grid-template-columns: 37px minmax(0,1fr); gap: 10px; margin-top: 15px; }
.demo-assistant { width: 88%; padding: 13px 14px 21px; }
.demo-safety { padding: 6px 9px; font-size: .71rem; }
.demo-check-actions { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.demo-check-actions button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: .71rem;
  line-height: 1.2;
}
.home-chat-input {
  min-height: 68px;
  margin: 0 12px 12px;
  padding: 10px 10px 10px 15px;
  border-radius: 17px;
  font-size: .79rem;
}
.home-chat-input-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 7px !important;
}
.home-chat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto !important;
  min-width: 104px;
  height: 40px !important;
  padding: 0 11px;
  color: #35506f !important;
  border: 1px solid #d9e4f1 !important;
  border-radius: 11px !important;
  background: #f7faff !important;
  font-size: .72rem !important;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.home-chat-action:hover { border-color: #9fc0ed !important; background: #eef6ff !important; }
.home-chat-action b { color: #1769e0; font-size: .88rem; }
.home-chat-send {
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px !important;
  height: 42px !important;
  color: #fff !important;
  border-radius: 12px !important;
  background: #1265dc !important;
  box-shadow: 0 7px 16px rgba(18,101,220,.22);
}
.home-start-question { padding: 11px 5px; font-size: .82rem; }
.home-start-attachment-name { font-size: .7rem; }

@media (min-width: 961px) and (max-width: 1220px) {
  .home-hero-grid { grid-template-columns: .9fr 1.1fr; gap: 34px; }
  .home-chat-demo { width: calc(100% + 8px); transform: translate(7px,-14px); }
  .home-chat-action { min-width: 94px; padding-inline: 9px; font-size: .69rem !important; }
}

@media (max-width: 960px) {
  .home-hero-grid { grid-template-columns: 1fr; gap: 38px; min-height: 0; padding-top: 48px; padding-bottom: 42px; }
  .home-chat-demo { width: 100%; max-width: 800px; transform: none; }
}

@media (max-width: 680px) {
  .home-chat-body { min-height: 0; padding-inline: 13px; }
  .demo-user, .demo-assistant { width: 100%; }
  .demo-check-actions { display: grid; grid-template-columns: 1fr; }
  .home-chat-input { align-items: stretch; flex-wrap: wrap; gap: 10px; border-radius: 15px; }
  .home-chat-input > span { width: 100%; }
  .home-chat-input-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; }
  .home-chat-action { min-width: 0; width: 100% !important; }
  .home-start-chat-form .home-chat-input-actions { display: grid; grid-template-columns: 1fr 1fr auto; }
}

@media (max-width: 430px) {
  .home-chat-input-actions,
  .home-start-chat-form .home-chat-input-actions { grid-template-columns: 1fr 1fr; }
  .home-chat-send { grid-column: 1 / -1; width: 100% !important; }
}

/* ===== v0.3.5: directe chatbijlagen, profiel en verificatiestatus ===== */
.chat-attachment-preview {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr) 36px;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #b8d5f5;
  border-radius: 14px;
  background: #f3f8ff;
}
.chat-attachment-preview[hidden] { display: none !important; }
.chat-attachment-preview img {
  width: 74px;
  height: 58px;
  object-fit: cover;
  border: 1px solid #d7e4f4;
  border-radius: 10px;
  background: #fff;
}
.chat-attachment-preview strong,
.chat-attachment-preview small { display: block; overflow-wrap: anywhere; }
.chat-attachment-preview strong { color: #17345f; font-size: .84rem; }
.chat-attachment-preview small { margin-top: 3px; color: #687a92; font-size: .72rem; }
.chat-attachment-preview button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #d6e0ed;
  border-radius: 10px;
  color: #6b4050;
  background: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}
.chat-attachment-preview button:hover { border-color: #e1a9b7; background: #fff3f6; }
.start-chat-attachment-status[data-state="ready"],
[data-chat-attachment-status][data-state="ready"] { color: #087259; }
[data-chat-attachment-status][data-state="waiting"] { color: #1d5fac; }
[data-chat-attachment-status][data-state="warning"] { color: #875f1e; }
[data-chat-attachment-status][data-state="error"] { color: #a13b3b; }
.chat-composer-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.chat-composer-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 12px;
  color: #24446f;
  border: 1px solid #c8daf0;
  border-radius: 11px;
  background: #f6faff;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.chat-composer-tool:hover { border-color: #86b5ed; background: #edf6ff; }
.chat-composer-tools > small { margin-left: auto; color: #6b7b91; font-size: .73rem; }
.compact-file-upload {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf1f6;
}
.chat-image-button {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 9px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cbd9eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(29,74,131,.08);
  cursor: zoom-in;
}
.chat-image-button:hover { border-color: #79ace8; box-shadow: 0 7px 18px rgba(29,74,131,.14); }
.chat-image-button:focus-visible { outline: 3px solid rgba(27,117,239,.25); outline-offset: 3px; }
.chat-image-preview {
  display: block;
  width: auto;
  max-width: min(100%, 380px);
  max-height: 260px;
  margin: 0;
  object-fit: contain;
  background: #fff;
}
.text-message-with-image { padding: 8px; }
.text-message-with-image > span { display: block; padding: 4px 7px 6px; }
.upload-message .chat-image-button { margin-bottom: 8px; }
.chat-image-lightbox[hidden] { display: none; }
.chat-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(5,18,39,.88);
  backdrop-filter: blur(4px);
}
.chat-image-lightbox img {
  max-width: min(94vw, 1400px);
  max-height: 84vh;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.chat-image-lightbox p { position: fixed; left: 24px; right: 24px; bottom: 18px; margin: 0; color: #fff; text-align: center; }
.chat-image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 15px;
  color: #fff;
  background: rgba(8,27,58,.8);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
body.chat-lightbox-open { overflow: hidden; }
.home-chat-attachment-preview {
  grid-column: 1 / -1;
  width: 100%;
  margin: 2px 0 0;
  grid-template-columns: 54px minmax(0,1fr) 32px;
  padding: 7px;
}
.home-chat-attachment-preview img { width: 54px; height: 42px; }
.profile-required-banner { margin-bottom: 18px; }
.chat-contact-required {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid #f0cf93;
  border-radius: 13px;
  color: #6f4d12;
  background: #fff8e8;
}
.chat-contact-required div { min-width: 0; }
.chat-contact-required strong, .chat-contact-required small { display: block; }
.chat-contact-required small { margin-top: 3px; color: #806733; }
.chat-contact-required .btn { flex: 0 0 auto; }

.admin-verification-stack { display: grid; gap: 4px; min-width: 170px; color: #5f6e82; }
.admin-verification-stack strong { color: #2d3d56; }

@media (max-width: 760px) {
  .chat-composer-tools { display: grid; grid-template-columns: 1fr; }
  .chat-composer-tools > small { margin-left: 0; }
  .chat-composer-tool { justify-content: center; min-height: 48px; }
  .compact-file-upload { grid-template-columns: 1fr; }
  .chat-attachment-preview { grid-template-columns: 62px minmax(0,1fr) 36px; }
  .chat-attachment-preview img { width: 62px; height: 52px; }
}

/* ===== v0.3.6: technisch logboek en veilige foutmeldingen ===== */
.error-reference { margin: 14px 0; color: #5d6d84; font-size: .86rem; }
.development-error { margin: 18px 0; text-align: left; }
.development-error summary { cursor: pointer; color: #43546f; font-weight: 800; }
.development-error pre { max-height: 260px; overflow: auto; padding: 14px; border-radius: 12px; background: #101827; color: #e9f1ff; font-size: .72rem; white-space: pre-wrap; }
.admin-system-summary { margin-top: 22px; }
.system-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.system-summary-grid-top { margin: 0 0 20px; }
.system-summary-grid > div { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #dce7f4; border-radius: 13px; background: #f8fbff; }
.system-summary-grid small { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.system-summary-grid strong { color: #17345f; font-size: 1.35rem; }
.danger-text { color: #ad2d3a !important; }
.system-log-mini { display: grid; gap: 8px; margin-top: 14px; }
.system-log-mini a { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #e2e9f2; border-radius: 11px; color: #263a58; background: #fff; }
.system-log-mini small { color: var(--muted); font-size: .7rem; }
.log-level { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 4px 8px; border-radius: 999px; font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.log-level-info { color: #155d9b; background: #e9f4ff; }
.log-level-warning { color: #7a560d; background: #fff5d8; }
.log-level-error { color: #9c2c39; background: #ffe8ec; }
.log-level-critical { color: #fff; background: #981f2d; }
.system-log-filters { display: grid; grid-template-columns: 150px 190px minmax(220px,1fr) auto auto; gap: 10px; align-items: end; margin-bottom: 20px; padding: 15px; border: 1px solid #dfe8f3; border-radius: 14px; background: #f8fbff; }
.system-log-filters label { display: grid; gap: 5px; color: #52637c; font-size: .74rem; font-weight: 800; }
.system-log-filters input,
.system-log-filters select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #cbd9ea; border-radius: 9px; background: #fff; font: inherit; }
.system-log-list { display: grid; gap: 9px; }
.system-log-entry { border: 1px solid #dfe7f1; border-left-width: 4px; border-radius: 12px; background: #fff; overflow: hidden; }
.system-log-entry-info { border-left-color: #4a96d8; }
.system-log-entry-warning { border-left-color: #d5a632; }
.system-log-entry-error { border-left-color: #d45361; }
.system-log-entry-critical { border-left-color: #8d1b28; }
.system-log-entry summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 15px; cursor: pointer; list-style: none; }
.system-log-entry summary::-webkit-details-marker { display: none; }
.system-log-main { display: grid; gap: 3px; }
.system-log-main small { color: var(--muted); font-size: .72rem; }
.system-log-entry summary code { color: #54657c; font-size: .68rem; }
.system-log-details { padding: 0 15px 15px; }
.system-log-details pre { max-height: 390px; overflow: auto; margin: 0; padding: 14px; border-radius: 10px; background: #101827; color: #dce9fb; font-size: .7rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.compact-panel { margin-top: 20px; }

@media (max-width: 900px) {
  .system-log-filters { grid-template-columns: 1fr 1fr; }
  .system-log-search { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .system-summary-grid, .system-log-filters { grid-template-columns: 1fr; }
  .system-log-search { grid-column: auto; }
  .system-log-entry summary, .system-log-mini a { grid-template-columns: auto minmax(0,1fr); }
  .system-log-entry summary code, .system-log-mini small { grid-column: 2; }
}


@media (max-width: 720px) {
  .chat-image-preview { max-width: 100%; max-height: 220px; }
  .chat-image-lightbox { padding: 16px; }
  .chat-contact-required { align-items: stretch; flex-direction: column; }
  .chat-contact-required .btn { width: 100%; }
}


/* v0.4.0 eenvoudige RobHelptJou-chat */
.rhj-chat-page{max-width:1050px;margin:0 auto;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 48px rgba(20,58,105,.09);overflow:hidden}
.rhj-chat-header{position:sticky;top:0;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}
.rhj-chat-heading,.rhj-chat-head-actions,.rhj-chat-author,.rhj-composer-bottom,.rhj-composer-tools{display:flex;align-items:center;gap:10px}.rhj-chat-heading h2{margin:3px 0 0;font-size:1.08rem}.rhj-back-link{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:13px;text-decoration:none;font-size:1.3rem}.rhj-credit-summary{padding:8px 11px;border-radius:999px;background:#edf5ff;color:#155fbf}
.rhj-session-mini-strip{display:flex;flex-wrap:wrap;gap:10px;padding:9px 20px;border-bottom:1px solid #edf1f6;background:#f8fbff;color:#65748a;font-size:.74rem}.rhj-session-mini-strip span{display:flex;align-items:center;gap:5px}.rhj-mode-pill{color:#08725a!important;font-weight:800}
.rhj-chat-thread{min-height:54vh;max-height:calc(100vh - 340px);overflow:auto;padding:28px clamp(14px,4vw,56px);background:#fbfcfe;scroll-behavior:smooth}
.rhj-chat-row{display:flex;align-items:flex-start;gap:10px;margin:0 0 23px}.rhj-chat-user{justify-content:flex-end}.rhj-chat-avatar,.rhj-user-avatar{flex:0 0 38px;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;overflow:hidden}.rhj-chat-avatar{border:1px solid #d8e4f3;background:#fff}.rhj-chat-avatar img{width:100%;height:100%;object-fit:cover}.rhj-user-avatar{background:#0a9a78;color:#fff;font-weight:900}
.rhj-chat-bubble{max-width:min(760px,82%)}.rhj-chat-user .rhj-chat-bubble{padding:12px 15px;border-radius:18px 18px 5px 18px;background:#e8f2ff}.rhj-chat-ai .rhj-chat-bubble{padding:4px 0}.rhj-chat-author{justify-content:space-between;color:#7a8798;font-size:.7rem;margin-bottom:6px}.rhj-chat-author strong{color:#1b2c45}.rhj-chat-copy{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;color:#22344e}.rhj-chat-image{display:block;max-width:260px;margin:0 0 9px;padding:0;border:0;border-radius:14px;overflow:hidden;background:none;cursor:zoom-in}.rhj-chat-image img{display:block;width:100%;max-height:190px;object-fit:cover}
.rhj-answer-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.rhj-answer-actions form{display:inline}.rhj-answer-actions button{min-height:34px;padding:6px 10px;border:1px solid #d8e3f0;border-radius:10px;background:#fff;color:#315476;font:inherit;font-size:.72rem;font-weight:750;cursor:pointer}.rhj-answer-actions button:hover{border-color:#8bb5e8;background:#eef6ff}
.rhj-chat-composer-wrap{position:sticky;bottom:0;z-index:5;padding:12px clamp(12px,4vw,40px) 18px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.75),#fff 30%)}.rhj-chat-composer{padding:10px 12px;border:1px solid #cbd9ea;border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(25,68,122,.12)}.rhj-chat-composer textarea{width:100%;min-height:62px;max-height:170px;padding:9px;border:0;resize:vertical;font:inherit}.rhj-chat-composer textarea:focus{outline:none}.rhj-composer-bottom{justify-content:space-between}.rhj-composer-tools{flex-wrap:wrap}.rhj-composer-tools button{padding:7px 9px;border:0;border-radius:10px;background:#f1f6fc;color:#315476;font:inherit;font-size:.72rem;font-weight:750;cursor:pointer}.rhj-composer-tools button.recording{color:#a31635;background:#fff0f3;animation:rhjPulse 1s infinite}.rhj-send-button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:#1769e0;color:#fff;font-size:1.2rem;cursor:pointer}.rhj-composer-status{display:flex;justify-content:space-between;gap:10px;margin:6px 4px 0;color:#728096}.rhj-composer-status small{font-size:.68rem}
.rhj-session-drawer{position:fixed;z-index:80;top:0;right:0;width:min(430px,92vw);height:100vh;padding:24px;overflow:auto;background:#fff;box-shadow:-20px 0 50px rgba(11,36,70,.22)}.rhj-drawer-backdrop{position:fixed;z-index:79;inset:0;background:rgba(11,29,53,.38)}.rhj-drawer-head{display:flex;justify-content:space-between;gap:14px}.rhj-drawer-head button{width:40px;height:40px;border:0;border-radius:12px;font-size:1.5rem}.rhj-drawer-actions{display:grid;gap:8px;margin-top:22px}.rhj-drawer-open{overflow:hidden}.package-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.package-admin-grid fieldset{border:1px solid var(--line);border-radius:14px;padding:12px}.payment-result{max-width:720px;margin:30px auto;text-align:center}
@keyframes rhjPulse{50%{box-shadow:0 0 0 6px rgba(190,25,58,.12)}}
@media(max-width:760px){.rhj-chat-header{align-items:flex-start}.rhj-chat-head-actions{flex-direction:column;align-items:flex-end}.rhj-chat-thread{max-height:none;min-height:52vh;padding:18px 12px}.rhj-chat-bubble{max-width:88%}.rhj-answer-actions{display:grid;grid-template-columns:1fr 1fr}.rhj-answer-actions button{width:100%;min-height:42px}.rhj-composer-tools button span{display:none}.rhj-composer-tools button{font-size:1rem}.package-admin-grid{grid-template-columns:1fr}}


/* ===== v0.4.1: vertrouwen, handmatige betalingen en uitgebreide footer ===== */
.footer-trust-strip{border-top:1px solid #dfe8f2;border-bottom:1px solid #dfe8f2;background:linear-gradient(180deg,#f8fbff,#fff)}
.footer-trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:23px;padding-bottom:23px}
.footer-trust-grid>div{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:10px;align-items:center}
.footer-trust-grid>div>span{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;color:#08765e;border-radius:12px;background:#e9f8f3;font-weight:900}
.footer-trust-grid strong,.footer-trust-grid small{display:block}.footer-trust-grid strong{color:#1d2c47;font-size:.8rem}.footer-trust-grid small{color:#69788e;font-size:.68rem;line-height:1.35}
.footer-grid-expanded{grid-template-columns:1.7fr repeat(4,1fr)}
.footer-payment-methods{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.footer-payment-methods span,.home-payment-logos b{padding:5px 8px;border:1px solid #d7e4f1;border-radius:7px;color:#184e94;background:#f7fbff;font-size:.65rem;font-weight:900}
.manual-payment-form{display:grid;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid #e7edf4}.manual-payment-form label{display:grid;gap:5px;color:#465775;font-size:.72rem;font-weight:800}.manual-payment-form select{width:100%;padding:9px;border:1px solid #cfdbea;border-radius:9px;background:#fff}.manual-payment-form small{color:#718097;font-size:.66rem;line-height:1.35}.btn-payment-request{color:#fff;border-color:#08765e;background:linear-gradient(135deg,#078169,#0a9c7d);box-shadow:0 8px 18px rgba(8,129,105,.18)}
.payment-status{display:inline-flex;align-items:center;width:fit-content;padding:6px 9px;border-radius:999px;color:#31506f;background:#edf3f8;font-size:.68rem;font-weight:900}.payment-status-requested{color:#8a5b13;background:#fff2d8}.payment-status-request_sent{color:#155ca9;background:#eaf3ff}.payment-status-credited,.payment-status-paid{color:#087259;background:#e7f8f2}.payment-status-cancelled,.payment-status-expired,.payment-status-failed{color:#9b3434;background:#fff0f0}
.payment-provider-summary{display:flex;flex-wrap:wrap;gap:8px}.payment-provider-summary span{padding:7px 9px;border:1px solid #dfe7f0;border-radius:9px;background:#f9fbfd;font-size:.68rem}
.payment-admin-list{display:grid;gap:12px}.payment-admin-card{padding:16px;border:1px solid #dfe7f0;border-radius:15px;background:#fff}.payment-admin-main{display:flex;justify-content:space-between;gap:18px}.payment-admin-main h4{margin:4px 0 5px;color:#172c4c}.payment-admin-main p{margin:2px 0;color:#66758a;font-size:.75rem}.payment-admin-amount{text-align:right}.payment-admin-amount strong,.payment-admin-amount small{display:block}.payment-admin-amount strong{color:#0f4e9b;font-size:1.2rem}.payment-admin-amount small{color:#68778e}.payment-admin-meta,.payment-admin-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.payment-admin-meta{padding-top:11px;border-top:1px solid #edf1f5;color:#718096;font-size:.7rem}.payment-admin-actions form{margin:0}.payment-method-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.status-overview-public{display:flex;gap:14px;align-items:flex-start}.status-overview-public>span{flex:0 0 14px;width:14px;height:14px;margin-top:8px;border-radius:50%;background:#0aa47e;box-shadow:0 0 0 6px #e5f8f2}
@media(max-width:1000px){.footer-trust-grid{grid-template-columns:repeat(2,1fr)}.footer-grid-expanded{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.footer-trust-grid,.footer-grid-expanded,.payment-method-checks{grid-template-columns:1fr}.payment-admin-main{flex-direction:column}.payment-admin-amount{text-align:left}.payment-admin-actions{align-items:stretch;flex-direction:column}.payment-admin-actions form,.payment-admin-actions .btn{width:100%}}


/* ===== v0.4.2: mobile, iPhone/Android uploads en live footer ===== */
:root{--rhj-visual-height:100dvh}
body{min-height:100vh;min-height:100dvh}
.app-shell{min-height:100vh;min-height:100dvh}
.app-sidebar,.rhj-session-drawer{height:100vh;height:100dvh}
.sidebar-close,.sidebar-backdrop,.sidebar-logout-form{display:none}
.chat-upload-progress{display:block;width:100%;height:7px;margin:8px 0 3px;overflow:hidden;border:0;border-radius:999px;background:#e6eef8;accent-color:#1769e0}
.chat-upload-progress[hidden]{display:none!important}
.rhj-chat-thread{max-height:calc(var(--rhj-visual-height,100dvh) - 340px)}
.rhj-chat-composer-wrap{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.rhj-session-drawer{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.screenshot-dialog{max-height:calc(var(--rhj-visual-height,100dvh) - 48px)}
.site-footer-live{padding:48px 0 18px;color:#c8d4e7;background:linear-gradient(160deg,#102441,#0b182c)}
.site-footer-live .footer-grid-light h4{color:#fff}
.site-footer-live .footer-grid-light a,.site-footer-live .footer-grid-light span,.site-footer-live .footer-brand-column p{color:#c8d4e7}
.site-footer-live .footer-grid-light a:hover{color:#fff}
.site-footer-live .footer-brand{color:#fff}
.site-footer-live .muted{color:#9fb0c8}
.site-footer-live .footer-payment-methods span{color:#e4efff;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08)}
.footer-bottom-live{margin-top:28px;padding-top:15px;color:#9fb0c8;border-top:1px solid rgba(255,255,255,.12)}
.footer-trust-strip{background:linear-gradient(180deg,#eef5fc,#f7faff)}

@media(max-width:960px){
  .app-sidebar{z-index:100;left:-290px;padding-top:58px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));background:#0f1d33}
  .app-sidebar.open{left:0}
  .sidebar-close{position:absolute;display:grid;place-items:center;top:12px;right:12px;width:40px;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#fff;background:rgba(255,255,255,.08);font-size:1.45rem}
  .sidebar-backdrop{position:fixed;z-index:90;inset:0;display:block;border:0;background:rgba(6,17,34,.48);backdrop-filter:blur(2px)}
  .sidebar-backdrop[hidden]{display:none!important}
  body.sidebar-open{overflow:hidden}
  .sidebar-logout-form{display:block;margin-top:4px}
  .sidebar-logout-form button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:11px 13px;border:0;border-radius:11px;color:#d7e4f7;background:transparent;font:inherit;font-weight:700;text-align:left}
  .sidebar-logout-form button:hover{color:#fff;background:rgba(255,255,255,.08)}
}

@media(max-width:760px){
  .rhj-chat-page{display:flex;min-height:calc(var(--rhj-visual-height,100dvh) - 118px);flex-direction:column;border-radius:16px}
  .rhj-chat-thread{flex:1;min-height:0;max-height:none}
  .rhj-chat-composer-wrap{position:sticky;bottom:0;padding:10px 9px calc(12px + env(safe-area-inset-bottom,0px))}
  .rhj-chat-composer{border-radius:17px}
  .rhj-chat-composer textarea{min-height:74px;font-size:1rem}
  .rhj-send-button{width:48px;height:48px;flex:0 0 48px}
  .rhj-composer-tools button,.rhj-answer-actions button{min-height:48px;padding:9px 11px}
  .rhj-composer-status small,.footer-trust-grid small,.footer-grid-light a,.footer-grid-light span,.footer-brand-column p{font-size:.78rem}
  .rhj-chat-copy{font-size:1rem;line-height:1.65}
  .rhj-chat-author{font-size:.78rem}
  .btn,.home-chat-action,.start-chat-tool{min-height:48px}
  .sidebar-nav a{min-height:48px;font-size:.96rem}
  .app-content{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
  .site-footer-live{padding-top:38px}
}

@media(max-width:680px){
  .topbar-actions .user-menu,.topbar-actions>form{display:none}
  .home-chat-input-actions,.home-start-chat-form .home-chat-input-actions{grid-template-columns:1fr 1fr}
  .home-chat-send{grid-column:1/-1}
  .footer-trust-grid{gap:10px}
  .footer-trust-grid>div{grid-template-columns:44px minmax(0,1fr);padding:7px 0}
  .footer-trust-grid>div>span{width:44px;height:44px}
}

.rhj-touch-device [data-chat-snip],.rhj-touch-device [data-desktop-snip]{display:none!important}
@media(pointer:coarse){button,a,input,select,textarea{touch-action:manipulation}}

/* ===== v0.4.3: gesloten bèta, herkenbare testcredits en heldere footer ===== */
html{background:#1763d5}
.site-footer-live{margin:0 0 -1px;padding:48px 0 calc(24px + env(safe-area-inset-bottom,0px));color:rgba(255,255,255,.88);background:linear-gradient(150deg,#1763d5 0%,#1156bf 100%)}
.site-footer-live .footer-grid-light h4{color:#fff;font-size:.88rem;letter-spacing:.01em}
.site-footer-live .footer-grid-light a,.site-footer-live .footer-grid-light span,.site-footer-live .footer-brand-column p{color:rgba(255,255,255,.9);font-size:.86rem;line-height:1.55}
.site-footer-live .footer-grid-light a{font-weight:650;text-underline-offset:3px}
.site-footer-live .footer-grid-light a:hover{color:#fff;text-decoration:underline}
.site-footer-live .footer-brand .brand-logo{filter:drop-shadow(0 8px 15px rgba(0,31,91,.18))}
.site-footer-live .footer-brand .brand-word strong,.site-footer-live .footer-brand .brand-word strong>span,.site-footer-live .footer-brand .brand-word small{color:#fff}
.site-footer-live .muted{color:rgba(255,255,255,.72)}
.site-footer-live .footer-payment-methods span{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.13);font-size:.72rem}
.footer-bottom-live{margin-top:30px;padding-top:16px;color:rgba(255,255,255,.76);border-top:1px solid rgba(255,255,255,.24)}
.footer-trust-strip{background:linear-gradient(180deg,#eef6ff,#f7fbff)}
.beta-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:2px;padding:4px 7px;border:1px solid #bdd8ff;border-radius:999px;color:#1156bf;background:#edf5ff;font-size:.58rem;font-weight:950;letter-spacing:.08em;line-height:1;text-transform:uppercase;box-shadow:0 4px 12px rgba(20,84,180,.09)}
.app-brand .beta-badge{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.12);box-shadow:none}
.site-footer-live .beta-badge-footer{color:#1763d5;border-color:#fff;background:#fff;box-shadow:0 5px 14px rgba(0,39,112,.16)}
.beta-credit-notice{display:flex;align-items:flex-start;gap:14px;margin:0 0 22px;padding:16px 18px;border:1px solid #bcd8ff;border-radius:16px;background:#edf5ff;box-shadow:0 10px 26px rgba(23,99,213,.08)}
.beta-credit-notice strong{display:block;color:#153b73}.beta-credit-notice p{margin:3px 0 0;color:#526b8f;font-size:.84rem}
.credit-origin-badge{display:inline-flex;align-items:center;width:max-content;margin:0 0 0 8px;padding:4px 7px;border:1px solid #b9d5ff;border-radius:999px;color:#1156bf;background:#edf5ff;font-size:.62rem;font-weight:900;line-height:1;white-space:nowrap}
.beta-credit-notice>.credit-origin-badge{margin:2px 0 0}
.error-card{width:min(680px,100%);padding:34px;border:1px solid #dce7f5;border-radius:24px;background:#fff;box-shadow:0 24px 60px rgba(22,67,126,.12)}
.error-card>span{font-size:4.4rem}.error-card p{max-width:560px;margin:0 auto;color:#5d6d84;font-size:1rem;line-height:1.7}
.error-actions{display:flex;justify-content:center;gap:10px;margin-top:24px}.error-reference{padding:10px 12px;border-radius:10px;background:#f3f7fc}
@media(max-width:760px){.site-footer-live .footer-grid-light a,.site-footer-live .footer-grid-light span,.site-footer-live .footer-brand-column p{font-size:.88rem}.beta-badge{padding:4px 6px;font-size:.54rem}.beta-credit-notice{flex-direction:column}.credit-origin-badge{margin-left:0;margin-top:5px}.error-card{padding:26px 20px}.error-card>span{font-size:3.8rem}.error-card h1{font-size:2rem}}

/* ===== v0.4.5: Synology-proxy, footerherstel en tijdelijk betaalverzoek ===== */
body.home-page{background:#1763d5}
.site-footer-live{margin-bottom:0;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.site-footer-live .footer-brand{gap:13px}
.site-footer-live .footer-brand .brand-logo{width:62px;height:62px;flex-basis:62px}
.site-footer-live .footer-brand .brand-word strong,.site-footer-live .footer-brand .brand-word strong>span,.site-footer-live .footer-brand .brand-word small{font-size:1.62rem}
.site-footer-live .footer-grid-light h4{font-size:.96rem}
.site-footer-live .footer-grid-light a,.site-footer-live .footer-grid-light span,.site-footer-live .footer-brand-column p{font-size:.9rem}
.footer-bottom-live{align-items:center;gap:24px}
.footer-bottom-live .footer-bottom-message{margin-left:auto;white-space:nowrap;text-align:right}
.manual-payment-beta-notice{display:flex;align-items:flex-start;gap:14px;margin:0 0 22px;padding:17px 18px;border:1px solid #b9ddcf;border-radius:16px;background:#eefaf6;box-shadow:0 10px 26px rgba(17,126,91,.07)}
.manual-payment-beta-notice>span{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;color:#fff;background:#15936d;font-weight:900}
.manual-payment-beta-notice strong{display:block;color:#155943}.manual-payment-beta-notice p{margin:3px 0 0;color:#527267;font-size:.84rem}
@media(max-width:1000px){.footer-bottom-live .footer-bottom-message{white-space:normal}}
@media(max-width:760px){.site-footer-live .footer-brand .brand-logo{width:54px;height:54px;flex-basis:54px}.site-footer-live .footer-brand .brand-word strong,.site-footer-live .footer-brand .brand-word strong>span,.site-footer-live .footer-brand .brand-word small{font-size:1.42rem}.manual-payment-beta-notice{flex-direction:column}}


/* ===== v0.4.6: e-mailverificatie en betaalverzoek per e-mail ===== */
.verification-warning{margin:18px 0;padding:14px 16px;border:1px solid #f0c87f;border-radius:13px;color:#775018;background:#fff8e9;font-size:.82rem;font-weight:750;line-height:1.5}
.verification-mail-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 0 18px;border-radius:18px;color:#1769e0;background:#eaf3ff;font-size:1.65rem}
.verification-expiry{margin:10px 0 0;color:#6d7b90;font-size:.78rem;line-height:1.5}
.verification-steps{display:grid;gap:10px;margin:24px 0}
.verification-steps>div{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid #e1e9f3;border-radius:12px;background:#f9fbfe}
.verification-steps span{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;color:#fff;background:#1769e0;font-size:.72rem;font-weight:900}
.verification-steps p{margin:2px 0 0;color:#53647d;font-size:.82rem}
.verification-resend-form{margin-top:18px}
.payment-request-open{overflow:hidden}
.payment-request-modal[hidden]{display:none!important}
.payment-request-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px}
.payment-request-backdrop{position:absolute;inset:0;background:rgba(9,28,55,.62);backdrop-filter:blur(5px)}
.payment-request-dialog{position:relative;z-index:1;width:min(100%,560px);max-height:min(90vh,720px);overflow:auto;padding:30px;border:1px solid rgba(255,255,255,.55);border-radius:22px;background:#fff;box-shadow:0 28px 80px rgba(8,31,66,.28)}
.payment-request-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;color:#52627a;background:#edf3f8;font-size:1.45rem;cursor:pointer}
.payment-request-icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:16px;border-radius:17px;color:#fff;background:linear-gradient(135deg,#08765e,#0a9c7d);font-size:1.5rem}
.payment-request-dialog h2{margin:6px 44px 10px 0;color:#15345c;font-size:1.65rem}
.payment-request-dialog>p{color:#5d6d83;line-height:1.55}
.payment-request-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.payment-request-summary>div{padding:13px;border:1px solid #dce7f1;border-radius:12px;background:#f8fbfe}
.payment-request-summary span,.payment-request-summary strong{display:block}
.payment-request-summary span{color:#748298;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.payment-request-summary strong{margin-top:4px;color:#193b65;font-size:.92rem}
.payment-request-actions{display:grid;gap:9px}
.payment-request-status{margin:14px 0 0!important;padding:11px 13px;border-radius:10px;color:#50677f!important;background:#eef5fb;font-size:.74rem!important}
.manual-payment-form a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:620px){.payment-request-modal{padding:12px}.payment-request-dialog{padding:24px 18px;border-radius:18px}.payment-request-summary{grid-template-columns:1fr}.payment-request-dialog h2{font-size:1.35rem}}
.verification-confirm-form{margin-top:24px}

/* ===== v0.4.8: klikbare footer-betaalroute ===== */
.footer-payment-methods .footer-payment-link{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border:1px solid #d7e4f1;border-radius:7px;color:#184e94;background:#f7fbff;font-size:.65rem;font-weight:900;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.site-footer-live .footer-payment-methods .footer-payment-link{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.13);font-size:.72rem;text-decoration:none}
.site-footer-live .footer-payment-methods .footer-payment-link:hover{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.22);text-decoration:none;transform:translateY(-1px)}
.site-footer-live .footer-payment-methods .footer-payment-link:focus-visible{outline:3px solid rgba(255,255,255,.85);outline-offset:3px;box-shadow:0 0 0 5px rgba(10,49,115,.22)}

/* ===== v0.4.9: privacyvriendelijk live-bezoekersscherm ===== */
.live-visitors-hero { background: linear-gradient(135deg,#123f75,#31589c); }
.live-visitors-stats { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.live-visitors-panel .panel-head p { margin: 5px 0 0; color: var(--muted); font-size: .78rem; }
.live-refresh-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 7px 10px; border-radius: 999px; color: #176848; background: var(--green-soft); font-size: .7rem; font-weight: 800; }
.live-refresh-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #18a676; box-shadow: 0 0 0 4px rgba(24,166,118,.12); }
.live-refresh-status.is-error { color: #9e3636; background: var(--red-soft); }
.live-refresh-status.is-error::before { background: #d04f4f; box-shadow: 0 0 0 4px rgba(208,79,79,.12); }
.live-visitors-table td { vertical-align: middle; }
.live-state, .device-pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 6px 9px; border-radius: 999px; font-size: .7rem; font-weight: 850; }
.live-state > span { width: 7px; height: 7px; border-radius: 50%; }
.live-state-user { color: #176848; background: var(--green-soft); }
.live-state-user > span { background: #18a676; box-shadow: 0 0 0 4px rgba(24,166,118,.12); }
.live-state-anonymous { color: #365477; background: var(--primary-soft); }
.live-state-anonymous > span { background: #1769e0; box-shadow: 0 0 0 4px rgba(23,105,224,.12); }
.device-pill { color: #4e3596; background: #eee9ff; }
@media (max-width: 820px) {
  .live-visitors-stats { grid-template-columns: 1fr !important; }
  .live-visitors-panel .panel-head { align-items: flex-start; flex-direction: column; }
}