/*
 * ISO/IEC 42001-ALIGNED CHANGE CONTROL
 * ISO/IEC 42001 record timestamp: 2026-08-02T09:07:37Z
 * Current version: 2.4.9
 * Change owner: Milo Wiseman
 *
 * Version history:
 * - 2.4.9 — Corrected Master credit wording and repaired personalisation layout.
 * - 2.4.8 — Remastered the complete responsive interface and answer settings.
 * - 2.4.7 — Required verified parent or guardian email confirmation for under-13 use.
 * - 2.4.6 — Blocked dangerous prompts disguised through reversed text.
 * - 2.4.5 — Added a mandatory age-band welcome step and expanded legal terms.
 * - 2.4.4 — Added age-adapted reports and universal server-side safety checks.
 * - 2.4.3 — Added permanent change-control metadata and validation.
 * - 2.4.2 — Redesigned the email sign-in masthead.
 * - 2.4.1 — Made investigation searches one credit and claim improvement free.
 */
:root {
  --canvas: #fff4d8; --paper: #fff8e7; --paper-deep: #ffe8ad;
  --ink: #17285b; --ink-soft: #516080; --hero-ink: #17285b; --hero-soft: #516080;
  --forest: #2448d8; --sage: #31b7a9; --sage-pale: #d9fff4;
  --rust: #ff7043; --rust-deep: #c94122; --mustard: #ffd52e; --blue: #006f9b;
  --line: #e2b95f; --white: #fffdf7; --red: #bf2f45; --green: #138a65;
  --shadow: 8px 9px 0 rgba(36,72,216,.16); --note-bg: #fff0a6; --note-border: #e9b91b;
  --note-ink: #614c00; --input-bg: #fffef9; --input-border: #9d92b3;
  --point-bg: #fff8dd; --point-border: #ead691; --source-bg: #daf8ff;
  --disclaimer-bg: #fff0bd; --disclaimer-ink: #63531d; --panel-bg: #fff6d8;
  --panel-border: #e8ca72; --evidence-bg: #dffff2; --topbar-muted: #dce5ff;
  --head-muted: #eaf0ff; --button-shadow: #ffbea7;
  --texture-image: radial-gradient(rgba(36,72,216,.13) 1.1px, transparent 1.2px), linear-gradient(125deg, rgba(255,213,46,.24), transparent 43%, rgba(255,112,67,.13));
  --texture-size: 15px 15px, 100% 100%;
  --surface-texture: radial-gradient(rgba(255,112,67,.05) .8px, transparent .9px);
  --serif: "Inter", Arial, sans-serif;
  --sans: "Open Sans", Arial, sans-serif;
}

html[data-theme="berry"] {
  --canvas: #ffe8f1; --paper: #fff5f9; --paper-deep: #ffcfe0;
  --ink: #40133f; --ink-soft: #76516f; --hero-ink: #40133f; --hero-soft: #76516f;
  --forest: #8d176d; --sage: #27c9bd; --sage-pale: #d7fff8;
  --rust: #f04472; --rust-deep: #a20f4a; --mustard: #ffcf4a; --blue: #007b82;
  --line: #d99ab7; --white: #fffafd; --red: #b72249; --green: #087e65;
  --shadow: 10px 10px 0 rgba(141,23,109,.17); --note-bg: #ffd8e6; --note-border: #d977a0;
  --note-ink: #681e4d; --input-bg: #fffafd; --input-border: #b4769f;
  --point-bg: #fff0f7; --point-border: #e6b4ca; --source-bg: #dffff9;
  --disclaimer-bg: #fff0c9; --disclaimer-ink: #684d12; --panel-bg: #ffeaf3;
  --panel-border: #dfa8c1; --evidence-bg: #dcfff7; --topbar-muted: #ffd9ef;
  --head-muted: #ffe2f2; --button-shadow: #ffb1ca;
  --texture-image: repeating-linear-gradient(7deg, transparent 0 23px, rgba(141,23,109,.055) 24px 25px), radial-gradient(circle at 12% 20%, rgba(39,201,189,.21), transparent 24rem), radial-gradient(circle at 89% 80%, rgba(240,68,114,.18), transparent 28rem);
  --texture-size: auto, 100% 100%, 100% 100%;
  --surface-texture: repeating-linear-gradient(-4deg, transparent 0 11px, rgba(141,23,109,.025) 12px 13px);
  --serif: "Inter", Arial, sans-serif;
  --sans: "Open Sans", Arial, sans-serif;
}

html[data-theme="sky"] {
  --canvas: #ddf5ff; --paper: #f2fbff; --paper-deep: #bfeaff;
  --ink: #063354; --ink-soft: #486a7f; --hero-ink: #063354; --hero-soft: #486a7f;
  --forest: #087bc1; --sage: #4bd6a6; --sage-pale: #d9fff1;
  --rust: #ff6659; --rust-deep: #c73435; --mustard: #ffe04a; --blue: #00639a;
  --line: #8ac9e7; --white: #ffffff; --red: #c93345; --green: #07885f;
  --shadow: 6px 7px 0 rgba(8,123,193,.18); --note-bg: #dbf5ff; --note-border: #66bde5;
  --note-ink: #134c6b; --input-bg: #ffffff; --input-border: #6fadd0;
  --point-bg: #eefaff; --point-border: #aedcf0; --source-bg: #ddfff2;
  --disclaimer-bg: #fff5bc; --disclaimer-ink: #615517; --panel-bg: #e8f8ff;
  --panel-border: #9bd5ef; --evidence-bg: #dffff2; --topbar-muted: #d8f3ff;
  --head-muted: #e7f8ff; --button-shadow: #ffbeb7;
  --texture-image: linear-gradient(rgba(8,123,193,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(8,123,193,.075) 1px, transparent 1px), linear-gradient(135deg, rgba(75,214,166,.18), transparent 44%, rgba(255,102,89,.12));
  --texture-size: 28px 28px, 28px 28px, 100% 100%;
  --surface-texture: linear-gradient(rgba(8,123,193,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(8,123,193,.025) 1px, transparent 1px);
  --serif: "Inter", Arial, sans-serif;
  --sans: "Open Sans", Arial, sans-serif;
}

html[data-theme="garden"] {
  --canvas: #e9ffd6; --paper: #f7ffec; --paper-deep: #ccefaa;
  --ink: #183b2b; --ink-soft: #50705e; --hero-ink: #183b2b; --hero-soft: #50705e;
  --forest: #237d48; --sage: #76c84d; --sage-pale: #e6ffd2;
  --rust: #ef5946; --rust-deep: #b5322c; --mustard: #ffd23f; --blue: #007d78;
  --line: #9cc877; --white: #fffdf3; --red: #bd3442; --green: #16834b;
  --shadow: 9px 10px 0 rgba(35,125,72,.17); --note-bg: #fff0a5; --note-border: #d6aa25;
  --note-ink: #594b10; --input-bg: #fffef7; --input-border: #82a96d;
  --point-bg: #efffe2; --point-border: #b7db99; --source-bg: #d9fff3;
  --disclaimer-bg: #fff0bb; --disclaimer-ink: #635214; --panel-bg: #efffdf;
  --panel-border: #acd18b; --evidence-bg: #e1ffd1; --topbar-muted: #dcffd9;
  --head-muted: #e7ffe5; --button-shadow: #f5b5a7;
  --texture-image: radial-gradient(ellipse at 15% 10%, rgba(118,200,77,.24) 0 4px, transparent 4.5px), radial-gradient(ellipse at 90% 75%, rgba(255,210,63,.22) 0 3px, transparent 3.5px), linear-gradient(120deg, rgba(35,125,72,.08), transparent 44%);
  --texture-size: 46px 54px, 63px 57px, 100% 100%;
  --surface-texture: radial-gradient(ellipse at 95% 8%, rgba(118,200,77,.09) 0 12%, transparent 12.5%);
  --serif: "Inter", Arial, sans-serif;
  --sans: "Open Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background-color: var(--canvas);
  background-image: var(--texture-image);
  background-size: var(--texture-size);
  font-family: var(--sans);
  transition: background-color .25s ease, color .25s ease;
}

button, textarea, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid rgba(199,98,66,.28); outline-offset: 3px; }

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 15px clamp(20px, 5vw, 76px);
  color: var(--paper);
  background: var(--forest);
  border-bottom: 5px solid var(--mustard);
}
.topbar::after { content: ""; position: absolute; right: 9%; bottom: -5px; width: 13%; height: 5px; background: var(--rust); }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--forest);
  background: var(--mustard);
  border: 2px solid var(--paper);
  border-radius: 50% 48% 43% 52%;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 900;
  transform: rotate(-4deg);
}
.brand-name { display: block; font-family: var(--serif); font-size: 1.28rem; font-weight: 700; letter-spacing: .01em; }
.brand-note { display: block; margin-top: 2px; color: var(--topbar-muted); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.edition { color: var(--topbar-muted); font-family: var(--serif); font-size: .82rem; font-style: italic; }
.appearance-toggle { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 8px 12px; color: var(--paper); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.34); border-radius: 2px; font-size: .76rem; font-weight: 800; }
.appearance-toggle:hover, .appearance-toggle[aria-expanded="true"] { color: var(--forest); background: var(--mustard); border-color: var(--mustard); }
.appearance-toggle i { display: grid; grid-template-columns: repeat(2, 6px); gap: 2px; }
.appearance-toggle i span { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }

.appearance-panel { position: fixed; z-index: 20; top: 92px; right: clamp(16px, 4vw, 64px); width: min(430px, calc(100% - 32px)); padding: 24px; color: var(--ink); background-color: var(--white); background-image: var(--surface-texture); border: 1px solid var(--line); box-shadow: 9px 11px 0 rgba(0,0,0,.18); }
.appearance-panel::before { content: ""; position: absolute; top: -8px; right: 45px; width: 16px; height: 16px; background: var(--white); border-top: 1px solid var(--line); border-left: 1px solid var(--line); transform: rotate(45deg); }
.appearance-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.appearance-head h2 { margin: 0; font-family: var(--serif); font-size: 1.32rem; }
.appearance-head p { margin: 5px 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }
.appearance-close { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 50%; font-weight: 900; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 19px; }
.theme-choice { min-height: 112px; padding: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 3px; text-align: left; }
.theme-choice:hover { transform: translateY(-2px); box-shadow: 3px 4px 0 rgba(0,0,0,.11); }
.theme-choice[aria-pressed="true"] { border: 3px solid var(--rust); padding: 11px; }
.theme-choice strong { display: block; margin-top: 9px; font-family: var(--serif); font-size: .94rem; }
.theme-choice small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .68rem; line-height: 1.35; }
.swatches { display: flex; gap: 5px; }
.swatches span { width: 24px; height: 20px; border: 1px solid rgba(0,0,0,.18); border-radius: 50% 45% 48% 42%; }
.theme-citrus .swatches span:nth-child(1) { background: #2448d8; } .theme-citrus .swatches span:nth-child(2) { background: #ff7043; } .theme-citrus .swatches span:nth-child(3) { background: #ffd52e; } .theme-citrus .swatches span:nth-child(4) { background: #fff4d8; }
.theme-berry .swatches span:nth-child(1) { background: #8d176d; } .theme-berry .swatches span:nth-child(2) { background: #f04472; } .theme-berry .swatches span:nth-child(3) { background: #27c9bd; } .theme-berry .swatches span:nth-child(4) { background: #ffe8f1; }
.theme-sky .swatches span:nth-child(1) { background: #087bc1; } .theme-sky .swatches span:nth-child(2) { background: #ff6659; } .theme-sky .swatches span:nth-child(3) { background: #4bd6a6; } .theme-sky .swatches span:nth-child(4) { background: #ddf5ff; }
.theme-garden .swatches span:nth-child(1) { background: #237d48; } .theme-garden .swatches span:nth-child(2) { background: #ffd23f; } .theme-garden .swatches span:nth-child(3) { background: #ef5946; } .theme-garden .swatches span:nth-child(4) { background: #e9ffd6; }
.appearance-foot { margin: 15px 0 0; padding-top: 12px; color: var(--ink-soft); border-top: 1px dashed var(--line); font-size: .7rem; }
.layout-chooser { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--line); }
.layout-chooser > strong { margin-right: auto; font-size: .75rem; }
.layout-choice { min-height: 34px; padding: 7px 11px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; font-weight: 850; }
.layout-choice[aria-pressed="true"] { color: var(--paper); background: var(--forest); border-color: var(--forest); }
.calm-choice { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:12px; padding:11px 12px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; font-size:.7rem; font-weight:800; }
.calm-choice::after { content:"Off"; min-width:38px; padding:4px 7px; color:var(--ink-soft); background:var(--white); border:1px solid var(--line); border-radius:999px; font-size:.62rem; text-align:center; }
.calm-choice[aria-pressed="true"]::after { content:"On"; color:var(--white); background:var(--forest); border-color:var(--forest); }

main { width: min(1080px, calc(100% - 34px)); margin: 0 auto; padding: 58px 0 76px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr); gap: clamp(26px, 6vw, 74px); align-items: center; margin: 0 auto 35px; color: var(--hero-ink); }
.kicker { margin: 0 0 13px; color: var(--rust-deep); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 720px; margin: 0; font-family: var(--serif); font-size: clamp(3rem, 7vw, 5.8rem); font-weight: 700; line-height: .95; letter-spacing: -.045em; }
h1 em { color: var(--rust); font-weight: 400; }
.hero-copy { max-width: 670px; margin: 22px 0 0; color: var(--hero-soft); font-size: 1.04rem; line-height: 1.7; }
.field-note {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  box-shadow: 5px 7px 0 rgba(151,68,46,.15);
  transform: rotate(1.5deg);
}
.field-note::before { content: ""; position: absolute; top: -13px; left: 34%; width: 86px; height: 28px; background: rgba(255,255,255,.58); border: 1px solid rgba(100,80,40,.12); transform: rotate(-3deg); }
.field-note strong { display: block; margin-bottom: 9px; font-family: var(--serif); font-size: 1.12rem; }
.field-note p { margin: 0; color: var(--note-ink); font-family: var(--serif); line-height: 1.55; }

.route { display: flex; align-items: center; gap: 0; max-width: 800px; margin: 28px 0 0; color: var(--hero-soft); font-size: .78rem; font-weight: 700; }
.route-step { display: flex; align-items: center; gap: 8px; }
.route-step b { display: grid; place-items: center; width: 29px; height: 29px; color: var(--paper); background: var(--forest); border-radius: 50%; font-family: var(--serif); }
.route-line { flex: 1 1 34px; min-width: 22px; height: 1px; margin: 0 10px; background: var(--line); }

.sheet {
  position: relative;
  max-width: 930px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 48px);
  background-color: var(--white);
  background-image: var(--surface-texture);
  border: 1px solid var(--line);
  border-radius: 3px 18px 6px 14px;
  box-shadow: var(--shadow);
}
.sheet::before { content: "CASE NOTE 01"; position: absolute; top: 24px; right: 25px; padding: 7px 9px; color: var(--rust-deep); border: 2px solid rgba(151,68,46,.55); font-size: .63rem; font-weight: 900; letter-spacing: .13em; transform: rotate(2deg); }
.sheet-label { display: block; max-width: 72%; margin-bottom: 11px; font-family: var(--serif); font-size: 1.42rem; font-weight: 700; }
.claim-input {
  width: 100%;
  min-height: 155px;
  resize: vertical;
  padding: 19px 20px;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-bottom: 4px solid var(--forest);
  border-radius: 4px;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
}
.claim-input:focus { border-color: var(--rust); outline-color: rgba(199,98,66,.22); }
.claim-input.placeholder-changing::placeholder { animation: placeholder-swap .48s ease both; }
@keyframes placeholder-swap { 0% { opacity: 1; } 45% { opacity: 0; transform: translateY(-5px); } 55% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; } }
.under-input { display: flex; justify-content: space-between; gap: 12px; margin: 9px 2px 19px; color: var(--ink-soft); font-size: .76rem; }
.examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 22px; }
.example { position: relative; min-width: 0; min-height: 95px; overflow: hidden; padding: 12px 12px 18px; color: var(--ink); background: var(--sage-pale); border: 1px solid var(--sage); border-radius: 8px 18px 8px 18px; text-align: left; }
.example-category { display: block; margin-bottom: 7px; color: var(--forest); font-size: .61rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.example-claim { display: block; font-family: var(--serif); font-size: .73rem; font-weight: 700; line-height: 1.35; }
.example::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: var(--rust); transform-origin: left; animation: example-clock 10s linear infinite; }
.example:nth-child(2)::after { background: var(--sage); }
.example:nth-child(3)::after { background: var(--mustard); }
.example:hover { filter: saturate(1.12) brightness(.98); transform: translateY(-2px) rotate(-.3deg); }
.example.is-changing .example-claim { animation: example-swap .48s ease both; }
@keyframes example-clock { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes example-swap { 0% { opacity: 1; transform: translateY(0); } 45% { opacity: 0; transform: translateY(-7px); } 55% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: translateY(0); } }
.primary-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 13px 20px;
  color: var(--paper);
  background: var(--rust);
  border: 0;
  border-radius: 3px;
  box-shadow: 4px 5px 0 var(--button-shadow);
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 700;
}
.primary-btn:hover { background: var(--rust-deep); transform: translate(-1px, -1px); }
.primary-btn:disabled { cursor: wait; opacity: .68; transform: none; }
.message { min-height: 21px; margin: 14px 0 0; color: var(--red); font-size: .86rem; font-weight: 800; }

.loading { max-width: 930px; margin: 26px auto 0; padding: 42px; text-align: center; background-color: var(--white); background-image: var(--surface-texture); border: 1px solid var(--line); box-shadow: var(--shadow); }
.loader { display: flex; justify-content: center; gap: 7px; margin-bottom: 18px; }
.loader i { width: 11px; height: 11px; background: var(--rust); border-radius: 50%; animation: bounce .9s infinite alternate; }
.loader i:nth-child(2) { background: var(--mustard); animation-delay: .18s; }
.loader i:nth-child(3) { background: var(--sage); animation-delay: .36s; }
@keyframes bounce { to { transform: translateY(-10px); } }
.loading h2 { margin: 0 0 8px; font-family: var(--serif); }
.loading p { margin: 0; color: var(--ink-soft); }
.loading-case { max-width: 560px; margin: 0 auto; text-align: left; }
.loading-topline { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.loading-topline h2 { margin: 0; }
.loading-percent { color: var(--rust-deep); font-family: var(--serif); font-size: 2.4rem; font-weight: 800; line-height: 1; }
.loading-track { height: 15px; padding: 3px; overflow: hidden; background: var(--sage-pale); border: 1px solid var(--line); border-radius: 999px; }
.loading-bar { width: 6%; height: 100%; background: linear-gradient(90deg, var(--rust), var(--mustard)); border-radius: inherit; transition: width .75s ease; }
.loading-caption { margin-top: 13px !important; font-family: var(--serif); font-size: .9rem; }

.result-card { max-width: 930px; margin: 27px auto 0; background-color: var(--white); background-image: var(--surface-texture); border: 1px solid var(--line); box-shadow: var(--shadow); }
.result-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 23px; align-items: center; padding: 31px clamp(24px, 5vw, 45px); background: var(--forest); color: var(--paper); border-bottom: 5px solid var(--mustard); }
.verdict { display: grid; place-items: center; min-width: 128px; min-height: 88px; padding: 13px 15px; color: var(--forest); background: color-mix(in srgb, var(--mustard) 72%, var(--paper)); border: 2px solid var(--paper); border-radius: 50% 46% 49% 44%; font-family: var(--serif); font-size: 1.08rem; font-weight: 700; text-align: center; transform: rotate(-2deg); }
.verdict.true, .verdict.mostly-true { background: color-mix(in srgb, var(--green) 42%, var(--paper)); }
.verdict.false, .verdict.mostly-false { color: var(--rust-deep); background: color-mix(in srgb, var(--rust) 45%, var(--paper)); }
.result-head h2 { margin: 0 0 5px; font-family: var(--serif); font-size: 1.55rem; }
.result-head p { margin: 0; color: var(--head-muted); line-height: 1.55; }
.result-body { padding: clamp(26px, 5vw, 47px); }
.summary { max-width: 760px; margin: 0 0 28px; font-family: var(--serif); font-size: clamp(1.25rem, 2.7vw, 1.62rem); font-weight: 700; line-height: 1.45; }
.accuracy-card { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 25px; align-items: center; margin: 6px 0 31px; padding: 22px; background: var(--panel-bg); border: 1px solid var(--panel-border); }
.accuracy-chart { --accuracy: 0; position: relative; display: grid; width: 124px; height: 124px; place-items: center; background: conic-gradient(var(--rust) calc(var(--accuracy) * 1%), var(--sage-pale) 0); border-radius: 50%; }
.accuracy-chart::before { content: ""; width: 88px; height: 88px; background: var(--white); border-radius: 50%; }
.accuracy-chart strong { position: absolute; font-family: var(--serif); font-size: 1.6rem; }
.accuracy-copy h3 { margin: 0 0 7px; font-family: var(--serif); font-size: 1.14rem; }
.accuracy-copy p { margin: 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.55; }
.result-section { margin-top: 29px; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--serif); font-size: 1.12rem; }
.section-title::before { content: ""; width: 25px; height: 3px; background: var(--rust); }
.explanation { margin: 0; color: var(--ink-soft); line-height: 1.75; white-space: pre-wrap; }
.rich-link { color: var(--blue); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rich-link:hover { color: var(--rust-deep); }
.points { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.points li { position: relative; padding: 15px 16px 15px 43px; color: var(--ink); background: var(--point-bg); border: 1px solid var(--point-border); border-radius: 2px 10px 3px 8px; line-height: 1.5; }
.points li::before { content: "✓"; position: absolute; left: 16px; top: 14px; color: var(--green); font-weight: 900; }
.sources { display: grid; gap: 9px; }
.source { display: block; padding: 12px 15px; color: var(--blue); background: var(--source-bg); border-left: 4px solid var(--sage); font-family: var(--serif); font-weight: 700; overflow-wrap: anywhere; text-decoration: none; }
.source:hover { color: var(--rust-deep); border-left-color: var(--rust); text-decoration: underline; }
.result-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding-top: 18px; color: var(--ink-soft); border-top: 1px dashed #bdb5a6; font-size: .8rem; }
.disclaimer { margin: 20px 0 0; padding: 14px 16px; color: var(--disclaimer-ink); background: var(--disclaimer-bg); border-left: 5px solid var(--mustard); font-family: var(--serif); font-size: .86rem; line-height: 1.5; }

.optional-area { margin-top: 30px; padding-top: 27px; border-top: 1px solid var(--line); }
.optional-label { margin: 0 0 6px; color: var(--rust-deep); font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.optional-copy { margin: 0 0 16px; color: var(--ink-soft); font-family: var(--serif); font-size: .94rem; line-height: 1.55; }
.optional-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.optional-btn { min-height: 53px; padding: 11px 14px; color: var(--forest); background: var(--paper); border: 1px solid var(--input-border); border-radius: 2px; font-family: var(--serif); font-weight: 700; }
.optional-btn:hover, .optional-btn[aria-expanded="true"] { color: var(--paper); background: var(--blue); border-color: var(--blue); }
.optional-panel { position: relative; margin-top: 15px; padding: clamp(21px, 4vw, 30px); background: var(--panel-bg); border: 1px solid var(--panel-border); }
.optional-panel::before { content: ""; position: absolute; top: -1px; right: 28px; width: 62px; height: 5px; background: var(--mustard); }
.optional-panel h3 { margin: 0 0 7px; font-family: var(--serif); font-size: 1.34rem; }
.panel-intro { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.55; }
.suggested-label { margin: 21px 0 9px; font-size: .73rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.question-choices { display: grid; gap: 8px; }
.question-choice { padding: 12px 14px; color: var(--ink); background: var(--white); border: 1px solid var(--panel-border); border-radius: 2px; text-align: left; line-height: 1.5; }
.question-choice:hover { border-color: var(--rust); box-shadow: 3px 3px 0 var(--button-shadow); }
.follow-form { margin-top: 20px; }
.follow-form label, .email-form label { display: block; margin-bottom: 8px; font-family: var(--serif); font-weight: 700; }
.follow-input { width: 100%; min-height: 105px; padding: 14px; resize: vertical; color: var(--ink); background: var(--white); border: 1px solid var(--input-border); border-bottom: 3px solid var(--forest); border-radius: 2px; line-height: 1.55; }
.panel-btn { min-height: 47px; margin-top: 10px; padding: 10px 18px; color: var(--paper); background: var(--rust); border: 0; border-radius: 2px; font-family: var(--serif); font-weight: 700; box-shadow: 3px 3px 0 var(--button-shadow); }
.panel-btn:hover { background: var(--rust-deep); }
.panel-btn:disabled { cursor: wait; opacity: .62; }
.panel-status { min-height: 20px; margin: 10px 0 0; color: var(--ink-soft); font-size: .84rem; font-weight: 700; }
.panel-status.error { color: var(--red); }
.panel-status.success { color: var(--green); }
.evidence-note { margin-top: 22px; padding: 15px 18px; background: var(--evidence-bg); border-left: 4px solid var(--sage); }
.evidence-note h4 { margin: 0 0 8px; font-family: var(--serif); }
.gaps { margin: 0; padding-left: 21px; color: var(--ink-soft); }
.gaps li { margin-bottom: 6px; line-height: 1.5; }
.follow-answer { margin-top: 22px; padding: 23px; background: var(--white); border: 1px solid var(--panel-border); border-left: 6px solid var(--rust); box-shadow: 4px 4px 0 color-mix(in srgb, var(--forest) 12%, transparent); }
.follow-answer .answer-number { margin: 0 0 7px; color: var(--rust-deep); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.follow-answer h4 { margin: 0 0 12px; font-family: var(--serif); font-size: 1.12rem; }
.follow-answer p { margin: 0; color: var(--ink-soft); line-height: 1.7; white-space: pre-wrap; }
.answer-points { margin: 14px 0 0; padding-left: 21px; color: var(--ink-soft); }
.answer-points li { margin-bottom: 6px; }
.answer-sources { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.answer-sources a { padding: 6px 9px; color: var(--blue); background: var(--source-bg); font-size: .75rem; font-weight: 700; text-decoration: none; }
.answer-sources a:hover { text-decoration: underline; }
.answer-confidence { display: block; margin-top: 13px; color: var(--ink-soft); font-size: .75rem; }

.email-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: end; }
.email-field { min-width: 0; }
.email-input { width: 100%; min-height: 49px; padding: 11px 13px; color: var(--ink); background: var(--white); border: 1px solid var(--input-border); border-bottom: 3px solid var(--forest); border-radius: 2px; }
.email-send { min-height: 49px; padding: 10px 20px; color: var(--paper); background: var(--blue); border: 0; border-radius: 2px; font-family: var(--serif); font-weight: 700; }
.email-send:hover { background: var(--forest); }
.email-send:disabled { cursor: wait; opacity: .62; }
.email-status { grid-column: 1 / -1; min-height: 20px; margin: 10px 0 0; color: var(--ink-soft); font-size: .84rem; font-weight: 700; }
.email-status.success { color: var(--green); }
.email-status.error { color: var(--red); }
.again-btn { width: 100%; min-height: 50px; margin-top: 25px; color: var(--forest); background: transparent; border: 1px solid var(--input-border); border-radius: 2px; font-family: var(--serif); font-weight: 700; }
.again-btn:hover { background: var(--sage-pale); }

footer { max-width: 930px; margin: 32px auto 0; padding-top: 18px; color: var(--hero-soft); border-top: 1px solid var(--line); font-family: var(--serif); font-size: .78rem; line-height: 1.6; text-align: center; }

.how-dialog { width: min(760px, calc(100% - 30px)); padding: 0; color: var(--ink); background: var(--paper); border: 0; border-radius: 18px; box-shadow: 0 26px 70px rgba(0,0,0,.35); }
.how-dialog::backdrop { background: rgba(8,24,21,.72); backdrop-filter: blur(3px); }
.how-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 28px 30px 22px; color: var(--paper); background: var(--forest); }
.how-head p { margin: 0 0 5px; color: var(--mustard); font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.how-head h2 { margin: 0; font-family: var(--serif); font-size: 2rem; }
.how-close { width: 39px; height: 39px; color: var(--paper); background: transparent; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-size: 1.5rem; }
.how-body { padding: 30px; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
.how-step { padding: 18px; background: var(--white); border-top: 5px solid var(--rust); }
.how-step:nth-child(2) { border-top-color: var(--mustard); }
.how-step:nth-child(3) { border-top-color: var(--sage); }
.how-step b { display: grid; width: 28px; height: 28px; margin-bottom: 13px; place-items: center; color: var(--paper); background: var(--forest); border-radius: 50%; }
.how-step strong { display: block; margin-bottom: 7px; font-family: var(--serif); }
.how-step span { color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.how-note { margin: 22px 0 0; padding: 15px 17px; color: var(--ink-soft); background: var(--disclaimer-bg); border-left: 4px solid var(--mustard); font-size: .84rem; line-height: 1.55; }
.terms-dialog { width: min(780px, calc(100% - 28px)); max-height: min(780px, calc(100vh - 34px)); padding: 0; color: var(--ink); background: var(--paper); border: 0; border-radius: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.42); }
.terms-dialog::backdrop { background: rgba(8,24,21,.76); backdrop-filter: blur(3px); }

.age-gate-dialog { width:min(880px,calc(100% - 28px)); max-height:calc(100vh - 28px); padding:0; overflow:auto; color:var(--ink); background:var(--white); border:0; border-radius:28px; box-shadow:0 38px 120px rgba(8,28,31,.52); }
.age-gate-dialog::backdrop { background-color:#102f2d; background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(135deg,rgba(243,189,75,.13),transparent 40%,rgba(52,169,154,.14)); background-size:18px 18px,100% 100%; backdrop-filter:blur(4px); }
.age-gate-card { margin:0; }
.age-gate-head { position:relative; padding:34px clamp(26px,6vw,64px) 31px; overflow:hidden; color:#fffdf8; background:linear-gradient(118deg,#183b3a 0 62%,#245c59 100%); border-bottom:7px solid var(--mustard); }
.age-gate-head::after { content:"?"; position:absolute; right:clamp(18px,5vw,58px); bottom:-52px; color:rgba(255,255,255,.07); font:900 220px/1 "Inter",Arial,sans-serif; transform:rotate(8deg); }
.age-gate-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; margin-bottom:30px; }
.age-gate-brand strong { font:800 1.05rem/1 "Inter",Arial,sans-serif; }
.age-gate-brand strong span { color:var(--mustard); }
.age-gate-lens { width:28px; height:28px; border:6px solid var(--mustard); border-radius:50%; box-shadow:7px 7px 0 -4px var(--mustard); }
.age-gate-head > p { position:relative; z-index:1; margin:0 0 8px; color:var(--mustard); font-size:.7rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.age-gate-head h2 { position:relative; z-index:1; max-width:610px; margin:0 0 10px; color:#fffdf8; font:800 clamp(2rem,5vw,3.7rem)/1.02 "Inter",Arial,sans-serif; letter-spacing:-.045em; }
.age-gate-head > span { position:relative; z-index:1; display:block; max-width:680px; color:#dbe9e5; font-size:.9rem; line-height:1.55; }
.age-band-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0; padding:30px clamp(22px,5vw,52px) 18px; border:0; }
.age-band-grid legend { width:100%; padding:0 0 13px; color:var(--ink); font:800 .84rem/1.3 "Inter",Arial,sans-serif; }
.age-band-card { position:relative; display:block; min-width:0; cursor:pointer; }
.age-band-card input { position:absolute; width:1px; height:1px; opacity:0; }
.age-band-card span { display:flex; min-height:130px; padding:18px 16px; flex-direction:column; justify-content:space-between; color:var(--ink); background:#f7f4ec; border:2px solid #d9d2c6; border-radius:17px; transition:transform .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease; }
.age-band-card b,.age-band-card small { display:block; }
.age-band-card b { font:850 1.1rem/1.15 "Inter",Arial,sans-serif; }
.age-band-card small { color:var(--ink-soft); font-size:.69rem; line-height:1.45; }
.age-band-card:hover span { border-color:var(--sage); transform:translateY(-2px); }
.age-band-card input:checked + span { color:#fff; background:var(--forest); border-color:var(--forest); box-shadow:inset 0 -6px 0 var(--mustard),0 10px 22px rgba(20,52,49,.18); transform:translateY(-3px); }
.age-band-card input:checked + span small { color:#dceae6; }
.age-band-card input:focus-visible + span { outline:4px solid color-mix(in srgb,var(--mustard) 70%,transparent); outline-offset:3px; }
.age-thirteen-choice { display:flex; align-items:center; gap:9px; margin:0 clamp(22px,5vw,52px) 15px; padding:14px 16px; background:#eef4f3; border:1px solid #c8d7d3; border-radius:13px; }
.age-thirteen-choice[hidden] { display:none; }
.age-thirteen-choice legend { width:100%; margin-bottom:9px; padding:0; color:var(--ink); font:800 .76rem/1.4 "Inter",Arial,sans-serif; }
.age-thirteen-choice label { cursor:pointer; }
.age-thirteen-choice label input { position:absolute; opacity:0; }
.age-thirteen-choice label span { display:block; padding:9px 13px; color:var(--ink); background:var(--white); border:1px solid #b8cac5; border-radius:999px; font-size:.7rem; font-weight:800; }
.age-thirteen-choice label input:checked + span { color:#fff; background:var(--forest); border-color:var(--forest); }
.age-thirteen-choice label input:focus-visible + span { outline:3px solid var(--mustard); outline-offset:2px; }
.guardian-confirmation { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; margin:0 clamp(22px,5vw,52px) 15px; padding:16px; color:var(--ink); background:#fff3d9; border:2px solid var(--mustard); border-radius:14px; cursor:pointer; }
.guardian-confirmation[hidden] { display:none; }
.guardian-confirmation input { width:22px; height:22px; margin:1px 0 0; accent-color:var(--forest); }
.guardian-confirmation b { display:block; margin-bottom:4px; font:850 .78rem/1.3 "Inter",Arial,sans-serif; }
.guardian-confirmation span { font-size:.7rem; line-height:1.5; }
.age-guidance { min-height:48px; margin:0 clamp(22px,5vw,52px) 17px; padding:13px 15px; color:#39524f; background:#eaf5ef; border-left:4px solid var(--sage); border-radius:0 10px 10px 0; font-size:.75rem; line-height:1.45; }
.age-gate-continue { display:block; width:calc(100% - clamp(44px,10vw,104px)); min-height:58px; margin:0 auto; color:#fff; background:var(--rust); border:0; border-radius:13px; font:850 .92rem/1 "Inter",Arial,sans-serif; transition:filter .15s ease,transform .15s ease; }
.age-gate-continue:hover:not(:disabled) { filter:brightness(.94); transform:translateY(-1px); }
.age-gate-continue:disabled { color:#7b837e; background:#e0ded8; cursor:not-allowed; }
.age-gate-legal { margin:14px clamp(22px,5vw,52px) 30px; color:var(--ink-soft); font-size:.67rem; line-height:1.5; text-align:center; }
.age-gate-legal .legal-link { font-size:inherit; }
.selected-age { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 10px; min-width:210px; padding:10px 12px; background:var(--input-bg); border:1px solid var(--input-border); border-radius:10px; }
.selected-age > span { grid-column:1/-1; color:var(--ink-soft); font-size:.65rem; font-weight:700; }
.selected-age strong { font-family:"Inter",Arial,sans-serif; font-size:.78rem; }
.selected-age button { padding:5px 8px; color:var(--forest); background:transparent; border:1px solid currentColor; border-radius:999px; font-size:.61rem; font-weight:800; }
.guardian-login-notice { margin:0 0 17px; padding:14px 16px; color:#5c4614; background:#fff1c9; border-left:5px solid var(--mustard); border-radius:0 10px 10px 0; font-size:.74rem; line-height:1.5; }
.guardian-login-notice strong { display:block; margin-bottom:3px; color:var(--ink); font-family:"Inter",Arial,sans-serif; }
.terms-content { max-height: calc(100vh - 185px); padding: 29px 32px 34px; overflow-y: auto; }
.terms-content h3 { margin: 25px 0 7px; font-family: var(--serif); font-size: 1.04rem; }
.terms-content p, .terms-content li { color: var(--ink-soft); font-size: .82rem; line-height: 1.62; }
.terms-content ul { padding-left: 21px; }
.terms-updated { margin-top: 0 !important; font-weight: 800; }
.guest-time-dialog { width: min(520px, calc(100% - 28px)); padding: 0; color: var(--ink); background: var(--paper); border: 0; border-radius: 20px; box-shadow: 0 30px 85px rgba(0,0,0,.44); }
.guest-time-dialog::backdrop { background: rgba(8,24,21,.76); backdrop-filter: blur(3px); }
.guest-time-body { padding: 29px 32px 34px; }
.guest-time-body h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.65rem; }
.guest-time-body p { margin: 0 0 20px; color: var(--ink-soft); line-height: 1.6; }
.guest-time-actions { display: grid; gap: 10px; }
.guest-time-primary { min-height: 52px; color: var(--paper); background: var(--rust); border: 0; font-family: var(--serif); font-weight: 800; }
.guest-time-secondary { min-height: 45px; color: var(--forest); background: transparent; border: 1px solid var(--input-border); font-weight: 800; }
.daily-timer { margin: 18px 0 22px; padding: 20px; color: var(--paper); background: var(--forest); font-family: var(--serif); font-size: 2.25rem; font-weight: 800; letter-spacing: .04em; text-align: center; }
.bug-dialog { width: min(570px, calc(100% - 28px)); padding: 0; color: var(--ink); background: var(--paper); border: 0; border-radius: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.42); }
.bug-dialog::backdrop { background: rgba(8,24,21,.76); backdrop-filter: blur(3px); }
.bug-body { padding: 27px 32px 32px; }
.bug-input { width: 100%; min-height: 130px; padding: 13px; resize: vertical; color: var(--ink); background: var(--white); border: 1px solid var(--input-border); border-bottom: 3px solid var(--forest); line-height: 1.5; }
.bug-input.short { min-height: 90px; }

.session-badge { display: none; color: var(--ink-soft); font-size: .76rem; font-weight: 800; }
.session-badge.visible { display: inline-flex; align-items: center; gap: 7px; }
.session-badge::before { content: ""; width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.credit-badge { display:none; padding:8px 12px; color:var(--forest); background:var(--mustard); border:1px solid rgba(0,0,0,.12); border-radius:999px; font-size:.74rem; font-weight:900; white-space:nowrap; box-shadow:0 2px 0 rgba(0,0,0,.12); }
.credit-badge.visible { display:inline-flex; align-items:center; }
.credit-badge.low { color:#fff; background:var(--rust); }
.credit-badge:hover { transform:translateY(-1px); box-shadow:0 4px 0 rgba(0,0,0,.12); }
.logout-button { display: none; padding: 8px 12px; color: var(--ink); background: transparent; border: 1px solid var(--ink-soft); border-radius: 999px; font-size: .74rem; font-weight: 800; }
.logout-button.visible { display: inline-block; }
.logout-button:hover { color: var(--paper); background: var(--rust); border-color: var(--rust); }

.login-dialog { width: min(510px, calc(100% - 28px)); padding: 0; color: var(--ink); background: var(--white); border: 1px solid color-mix(in srgb,var(--forest) 22%,var(--line)); border-radius: 24px; box-shadow: 0 32px 90px rgba(0,0,0,.38); overflow:hidden; }
.login-dialog::backdrop { background-color: #13221e; background-image: radial-gradient(rgba(255,255,255,.055) .7px, transparent .8px); background-size: 8px 8px; }
.login-head { position:relative; padding:26px 32px 24px; color:var(--ink); background:linear-gradient(135deg,var(--paper) 0 72%,color-mix(in srgb,var(--mustard) 24%,var(--paper)) 100%); border-bottom:1px solid var(--line); overflow:hidden; }
.login-head::after { content:""; position:absolute; right:0; bottom:0; left:0; height:6px; background:linear-gradient(90deg,var(--rust) 0 34%,var(--mustard) 34% 67%,var(--sage) 67%); }
.login-masthead { display:flex; align-items:center; gap:14px; }
.login-masthead > span:last-child { min-width:0; }
.login-mark { position:relative; flex:0 0 54px; width:54px; height:54px; background:var(--rust); border-radius:16px 6px 16px 6px; box-shadow:7px 7px 0 color-mix(in srgb,var(--mustard) 55%,transparent); transform:rotate(-2deg); }
.login-mark::before { content:""; position:absolute; width:20px; height:20px; top:11px; left:11px; border:4px solid var(--white); border-radius:50%; }
.login-mark::after { content:""; position:absolute; width:17px; height:5px; top:33px; left:31px; background:var(--white); border-radius:4px; transform:rotate(45deg); transform-origin:left center; }
.login-mark i { position:absolute; top:8px; right:7px; width:5px; height:5px; background:var(--mustard); border-radius:50%; box-shadow:-1px 34px 0 var(--sage); }
.login-brand { display:block; margin:0; font-family:"Inter",Arial,sans-serif; font-size:1.1rem; font-weight:850; letter-spacing:-.025em; }
.login-brand-note { display:block; margin-top:3px; color:var(--ink-soft); font-family:"Open Sans",Arial,sans-serif; font-size:.68rem; font-weight:650; letter-spacing:.025em; }
.login-welcome { margin-top:25px; }
.login-head .login-welcome p { display:inline-block; margin:0 0 9px; padding:5px 9px; color:var(--rust-deep); background:color-mix(in srgb,var(--rust) 10%,var(--white)); border:1px solid color-mix(in srgb,var(--rust) 25%,transparent); border-radius:999px; font-size:.62rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.login-head h2 { max-width:390px; margin:0; font-family:"Inter",Arial,sans-serif; font-size:2rem; font-weight:800; line-height:1.08; letter-spacing:-.045em; }
.login-welcome > span { display:block; max-width:390px; margin-top:9px; color:var(--ink-soft); font-size:.78rem; line-height:1.5; }
.login-route { display:grid; grid-template-columns:auto 1fr auto 1fr auto; gap:9px; align-items:center; margin-top:22px; color:var(--ink-soft); font-size:.64rem; font-weight:750; }
.login-route span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.login-route b { display:grid; width:20px; height:20px; place-items:center; color:var(--white); background:var(--forest); border-radius:50%; font-size:.58rem; }
.login-route i { height:1px; background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 9px); }
.login-body { padding:28px 32px 32px; background:var(--white); }
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 23px; }
.role-option { min-height: 47px; color: var(--ink); background: var(--white); border: 1px solid var(--line); font-weight: 800; }
.role-option[aria-pressed="true"] { color: var(--paper); background: var(--forest); border-color: var(--forest); }
.login-field { display: block; margin-bottom: 17px; }
.login-field span { display: block; margin-bottom: 7px; font-family: var(--serif); font-size: .86rem; font-weight: 700; }
.login-input { width: 100%; min-height: 50px; padding: 12px 14px; color: var(--ink); background: var(--white); border: 1px solid var(--input-border); border-bottom: 3px solid var(--forest); }
.login-input[readonly] { color: var(--ink-soft); background: var(--sage-pale); }
.login-submit { width: 100%; min-height: 52px; margin-top: 3px; color: var(--paper); background: var(--rust); border: 0; font-family: var(--serif); font-weight: 800; }
.login-submit:hover { background: var(--rust-deep); }
.login-submit:disabled { cursor: wait; opacity: .65; }
.code-input { font-family: var(--serif); font-size: 1.8rem; font-weight: 800; letter-spacing: .28em; text-align: center; }
.code-sent { margin: 0 0 18px; color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.login-back { width: 100%; margin-top: 13px; padding: 8px; color: var(--forest); background: transparent; border: 0; font-size: .78rem; font-weight: 800; text-decoration: underline; }
.login-message { min-height: 21px; margin: 13px 0 0; color: var(--red); font-size: .82rem; font-weight: 800; }
.login-help { margin: 9px 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.45; }
.terms-consent { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; margin: 17px 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.45; }
.terms-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--forest); }
.legal-link { padding: 0; color: var(--rust-deep); background: transparent; border: 0; font: inherit; font-weight: 850; text-decoration: underline; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 9px; }
footer .legal-link { color: var(--mustard); }

/* Wide editorial workspace: restrained geometry and horizontal reading flow. */
.topbar { min-height: 70px; padding-top: 10px; padding-bottom: 10px; }
.brand-mark { width: 38px; height: 38px; border-radius: 1px; font-family: var(--sans); font-size: 1.05rem; transform: none; }
.brand-name { font-family: var(--sans); font-size: 1.02rem; letter-spacing: .01em; }
.brand-note { font-size: .62rem; }
.appearance-toggle { border-radius: 1px; }

.appearance-panel { top: 70px; right: 0; left: 0; width: 100%; padding: 19px clamp(24px, 4vw, 72px) 21px; border-right: 0; border-left: 0; box-shadow: 0 16px 28px rgba(0,0,0,.16); }
.appearance-panel::before { display: none; }
.appearance-head { align-items: center; }
.appearance-head > div { display: flex; align-items: baseline; gap: 14px; }
.appearance-head h2 { font-family: var(--sans); font-size: 1rem; }
.appearance-head p { margin: 0; }
.theme-grid { grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 14px; }
.theme-choice { min-height: 92px; border-radius: 1px; }
.theme-choice strong { font-family: var(--sans); }

main { width: min(1560px, calc(100% - 42px)); padding: 32px 0 48px; }
.hero { grid-template-columns: minmax(360px, .72fr) minmax(340px, 1.28fr); gap: 40px; align-items: end; margin: 0 0 24px; padding: 0 0 24px; border-bottom: 1px solid color-mix(in srgb, var(--hero-soft) 34%, transparent); }
.kicker { margin-bottom: 7px; }
h1 { max-width: none; font-family: var(--sans); font-size: clamp(2rem, 3.3vw, 3.35rem); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; }
.hero-copy { max-width: 720px; margin: 0; padding-bottom: 3px; font-size: .98rem; }

.workspace { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 22px; align-items: start; }
.sheet { position: sticky; top: 20px; max-width: none; margin: 0; padding: 28px; color: var(--ink); border-radius: 0; box-shadow: 0 10px 28px rgba(20,30,27,.09); }
.sheet::before { display: none; }
.sheet-label { max-width: none; font-family: var(--sans); font-size: 1.08rem; }
.claim-input { min-height: 190px; padding: 22px 24px; border-left: 4px solid var(--forest); border-radius: 28px 8px 28px 8px; font-family: var(--sans); font-size: .96rem; transition: border-radius .25s ease, background-color .25s ease, transform .25s ease; }
.example { border-radius: 1px; }
.primary-btn { border-radius: 0; box-shadow: none; font-family: var(--sans); font-size: .92rem; }
.primary-btn:hover { transform: none; }

.empty-state, .loading, .result-card { max-width: none; min-width: 0; margin: 0; color: var(--ink); background-color: var(--white); background-image: var(--surface-texture); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 10px 28px rgba(20,30,27,.09); }
.empty-state { min-height: 480px; padding: clamp(38px, 6vw, 82px); }
.empty-label { margin: 0 0 13px; color: var(--rust-deep); font-size: .7rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.empty-state h2 { max-width: 700px; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.9rem); font-weight: 500; line-height: 1.08; }
.empty-state > p:not(.empty-label) { max-width: 700px; margin: 20px 0 0; color: var(--ink-soft); line-height: 1.7; }
.empty-state .route { max-width: 720px; margin-top: 38px; color: var(--ink-soft); }
.method-note { display: grid; grid-template-columns: auto 1fr; gap: 16px; max-width: 720px; margin-top: 42px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-note strong { color: var(--forest); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.method-note span { color: var(--ink-soft); font-family: var(--serif); }

.loading { min-height: 330px; padding: 90px 35px; }
.result-card { color: var(--ink); }
.result-head { grid-template-columns: 120px minmax(0,1fr); padding: 25px 32px; }
.verdict { min-width: 0; min-height: 58px; padding: 10px; border: 0; border-left: 4px solid var(--mustard); border-radius: 0; font-family: var(--sans); font-size: .86rem; transform: none; }
.result-head h2 { font-family: var(--sans); font-size: 1.15rem; }
.result-body { padding: clamp(27px, 4vw, 46px); }
.summary { max-width: 940px; font-size: clamp(1.22rem, 2vw, 1.62rem); }
.section-title, .optional-panel h3, .follow-answer h4, .follow-form label, .email-form label { font-family: var(--sans); }
.points li, .source, .optional-btn, .question-choice, .follow-input, .panel-btn, .email-input, .email-send, .again-btn { border-radius: 0; }
.optional-panel { border-radius: 0; }
.panel-btn { box-shadow: none; }
.again-btn { font-family: var(--sans); }
footer { max-width: none; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; gap: 14px; }
  .workspace { grid-template-columns: 1fr; }
  .sheet { position: static; }
  .claim-input { min-height: 140px; }
  .appearance-panel { max-height: calc(100vh - 82px); overflow-y: auto; }
  .theme-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .edition { display: none; }
  .appearance-toggle .appearance-text { display: none; }
  .appearance-toggle { width: 42px; justify-content: center; padding: 8px; }
  .appearance-panel { top: 70px; right: 0; }
  main { padding-top: 39px; }
  .hero { grid-template-columns: 1fr; }
  .route { align-items: flex-start; flex-direction: column; gap: 8px; }
  .route-line { width: 1px; min-width: 1px; height: 13px; min-height: 13px; margin: 0 0 0 14px; }
  .result-head { grid-template-columns: 1fr; }
  .verdict { min-height: 65px; }
  .points, .optional-actions, .email-form { grid-template-columns: 1fr; }
  .email-status { grid-column: 1; }
  .sheet-label { max-width: 100%; }
}

@media (max-width: 470px) {
  .theme-grid { grid-template-columns: 1fr; }
  .appearance-panel { max-height: calc(100vh - 105px); overflow-y: auto; }
  .brand-note { display: none; }
}

/* Brand-led shell inspired by the reference composition, with an original palette and artwork. */
body { background-color: #19221f; background-image: radial-gradient(rgba(255,255,255,.035) .7px, transparent .8px); background-size: 8px 8px; }
.topbar, main { width: min(1580px, calc(100% - 56px)); }
.topbar { min-height: 86px; margin: 30px auto 0; padding: 14px clamp(25px, 4vw, 62px); color: var(--ink); background: var(--white); border: 0; border-radius: 24px 24px 0 0; }
.topbar::after { display: none; }
.brand { min-width: 245px; }
.brand-mark { position: relative; width: 30px; height: 30px; color: transparent; background: transparent; border: 4px solid var(--forest); border-radius: 50%; }
.brand-mark::after { content: ""; position: absolute; right: -10px; bottom: -7px; width: 13px; height: 4px; background: var(--rust); border-radius: 3px; transform: rotate(47deg); transform-origin: left center; }
.brand-name { color: var(--ink); font-size: 1.26rem; font-weight: 850; letter-spacing: -.035em; }
.brand-dot { color: var(--rust); }
.brand-note { color: var(--ink-soft); letter-spacing: .08em; }
.top-nav { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3.2vw, 48px); }
.top-nav a, .top-nav button { position: relative; padding: 9px 0; color: var(--ink-soft); background: transparent; border: 0; font-size: .82rem; font-weight: 700; text-decoration: none; }
.top-nav a:hover, .top-nav button:hover { color: var(--forest); }
.top-nav a:first-child { color: var(--ink); }
.top-nav a:first-child::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 3px; background: var(--rust); }
.appearance-toggle { color: var(--ink); background: transparent; border-color: var(--ink-soft); border-radius: 999px; }
.appearance-toggle:hover, .appearance-toggle[aria-expanded="true"] { color: var(--white); background: var(--forest); border-color: var(--forest); }

.appearance-panel { top: 116px; right: 50%; left: auto; width: min(1450px, calc(100% - 90px)); border: 0; border-radius: 16px; transform: translateX(50%); }

main { margin: 0 auto 30px; padding: 0 42px 52px; background: var(--white); border-radius: 0 0 24px 24px; }
.hero { position: relative; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); min-height: 410px; margin: 0; padding: clamp(45px, 6vw, 82px) clamp(35px, 5vw, 76px); color: var(--paper); background-color: var(--forest); background-image: radial-gradient(circle at 18% 30%, rgba(255,255,255,.08) 0 1px, transparent 1.5px), linear-gradient(125deg, rgba(255,255,255,.045), transparent 45%); background-size: 9px 9px, 100% 100%; border: 0; border-radius: 0 0 36px 36px; overflow: visible; }
.hero-words { position: relative; z-index: 2; max-width: 760px; }
.hero .kicker { color: var(--mustard); }
.hero h1 { max-width: 780px; color: var(--paper); font-family: var(--sans); font-size: clamp(3.1rem, 5.5vw, 5.7rem); font-weight: 850; line-height: .98; letter-spacing: -.06em; }
.hero h1 span { display: table; margin-top: 10px; padding: 2px 13px 8px; color: var(--white); background: var(--rust); border-radius: 7px; box-shadow: 7px 8px 0 rgba(15,35,31,.28); }
.hero .hero-copy { max-width: 620px; margin-top: 25px; color: var(--head-muted); font-size: 1rem; }
.hero-action { display: inline-flex; align-items: center; gap: 24px; margin-top: 28px; padding: 12px 20px; color: var(--ink); background: var(--mustard); border: 2px solid var(--mustard); border-radius: 999px; font-size: .84rem; font-weight: 850; text-decoration: none; box-shadow: 4px 5px 0 rgba(15,35,31,.25); }
.hero-action:hover { background: var(--paper); border-color: var(--paper); transform: translateY(-2px); }
.hero-visual { position: relative; min-height: 330px; isolation: isolate; }
.case-card { position: absolute; width: 210px; min-height: 126px; padding: 18px 20px; color: var(--ink); background: var(--paper); border: 2px solid rgba(14,42,36,.22); border-radius: 14px; box-shadow: 11px 13px 0 rgba(10,28,24,.22); }
.case-card span { display: block; margin-bottom: 10px; color: var(--rust); font-size: .65rem; font-weight: 900; letter-spacing: .18em; }
.case-card b { display: block; font-family: var(--serif); font-size: 1.18rem; line-height: 1.06; }
.case-card i { display: block; width: 82%; height: 5px; margin-top: 13px; background: rgba(18,39,35,.18); border-radius: 4px; }
.case-card i:last-child { width: 55%; margin-top: 8px; }
.case-card-one { z-index: 2; top: -12px; right: 6%; transform: rotate(5deg); }
.case-card-two { z-index: 1; top: 168px; left: -1%; background: var(--mustard); transform: rotate(-8deg); }
.case-card-two span { color: var(--forest); }
.case-card-three { z-index: 2; right: -5%; bottom: -26px; color: var(--paper); background: var(--rust); border-color: rgba(255,255,255,.28); transform: rotate(7deg); }
.case-card-three span { color: var(--mustard); }
.case-card-three i { background: rgba(255,255,255,.35); }
.magnifier-ui { position: absolute; z-index: 4; top: 48px; left: 22%; display: grid; width: 205px; height: 205px; place-items: center; color: var(--mustard); background: rgba(255,255,255,.08); border: 23px solid var(--paper); border-radius: 50%; box-shadow: 13px 16px 0 rgba(10,28,24,.22), inset 0 0 0 2px rgba(255,255,255,.22); transform: rotate(-4deg); }
.magnifier-ui::after { content: ""; position: absolute; right: -128px; bottom: -66px; width: 155px; height: 28px; background: var(--paper); border-radius: 20px; box-shadow: 7px 8px 0 rgba(10,28,24,.18); transform: rotate(47deg); transform-origin: left center; }
.magnifier-ui span { font-family: var(--serif); font-size: 6.4rem; font-weight: 800; line-height: 1; transform: translateY(-4px); }
.case-stamp { position: absolute; z-index: 5; right: 2%; top: 136px; padding: 7px 9px 5px; color: var(--mustard); border: 3px solid currentColor; font-size: .68rem; font-weight: 950; line-height: .95; letter-spacing: .14em; text-align: center; transform: rotate(13deg); }

.workspace { margin-top: 92px; }
.sheet, .empty-state, .loading, .result-card { border-color: color-mix(in srgb, var(--line) 72%, transparent); box-shadow: 0 15px 36px rgba(20,30,27,.10); }
.sheet { border-top: 7px solid var(--rust); }
.empty-state { border-top: 7px solid var(--mustard); }
.empty-state h2 { font-weight: 700; letter-spacing: -.025em; }
.result-card { border-top: 7px solid var(--mustard); }

/* Each palette also changes shape, typography and the detective desk itself. */
html[data-theme] body { background-color: var(--canvas); background-image: var(--texture-image); background-size: var(--texture-size); }
html[data-theme] main { background-color: color-mix(in srgb, var(--white) 94%, var(--canvas)); }
html[data-theme="citrus"] .topbar { border-radius: 0 0 22px 22px; }
html[data-theme="citrus"] .hero { padding: 27px 32px; background-color: var(--forest); background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.2px), linear-gradient(120deg, transparent 58%, rgba(255,213,46,.18)); background-size: 13px 13px, 100% 100%; border: 2px solid var(--mustard); border-radius: 26px 8px 26px 8px; }
html[data-theme="citrus"] .hero h1 span { display: inline; padding: 0 .13em; color: var(--ink); background: var(--mustard); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
html[data-theme="citrus"] .sheet, html[data-theme="citrus"] .empty-state, html[data-theme="citrus"] .loading, html[data-theme="citrus"] .result-card { border-radius: 18px 5px 18px 5px; }
html[data-theme="citrus"] .primary-btn, html[data-theme="citrus"] .panel-btn, html[data-theme="citrus"] .email-send { border-radius: 999px; }
html[data-theme="citrus"] .claim-input { border-radius: 30px 9px 30px 9px; }
html[data-theme="citrus"] .magnifier-ui { border-color: var(--mustard); background: var(--forest); }
html[data-theme="citrus"] .magnifier-ui::after { background: var(--mustard); }

html[data-theme="berry"] .topbar { border-radius: 0 0 50% 18px / 0 0 20px 18px; }
html[data-theme="berry"] .hero { padding: 30px 34px; background: linear-gradient(128deg, var(--forest), #6d145d 62%, var(--rust)); border: 3px solid var(--mustard); border-radius: 34px 34px 90px 34px; box-shadow: 10px 10px 0 rgba(39,201,189,.28); }
html[data-theme="berry"] h1 { font-family: var(--serif); font-style: italic; letter-spacing: -.055em; }
html[data-theme="berry"] .hero h1 span { display: inline; padding: 0 .08em; color: var(--paper); background: transparent; box-shadow: none; text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: .13em; text-underline-offset: .1em; }
html[data-theme="berry"] .sheet, html[data-theme="berry"] .empty-state, html[data-theme="berry"] .loading, html[data-theme="berry"] .result-card { border-radius: 28px 9px 34px 13px; }
html[data-theme="berry"] .primary-btn, html[data-theme="berry"] .panel-btn, html[data-theme="berry"] .email-send, html[data-theme="berry"] .optional-btn { border-radius: 18px 5px 18px 5px; }
html[data-theme="berry"] .claim-input { border-radius: 38px; border-width: 2px 2px 5px 5px; }
html[data-theme="berry"] .case-card { border-radius: 26px 7px 28px 8px; }
html[data-theme="berry"] .magnifier-ui { border-color: #fff4fb; box-shadow: 14px 16px 0 rgba(64,19,63,.25), inset 0 0 0 6px var(--sage); }

html[data-theme="sky"] .topbar { border-bottom-width: 8px; box-shadow: 0 8px 0 rgba(75,214,166,.55); }
html[data-theme="sky"] .hero { padding: 28px 32px; color: var(--ink); background-color: rgba(255,255,255,.86); background-image: linear-gradient(rgba(8,123,193,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(8,123,193,.08) 1px, transparent 1px); background-size: 28px 28px; border: 2px solid var(--forest); border-radius: 0; box-shadow: 7px 7px 0 rgba(8,123,193,.19); }
html[data-theme="sky"] .hero h1 { color: var(--ink); }
html[data-theme="sky"] .hero .hero-copy { color: var(--ink-soft); }
html[data-theme="sky"] .hero .kicker { color: var(--rust-deep); }
html[data-theme="sky"] h1 { font-family: var(--sans); font-weight: 900; letter-spacing: -.06em; text-transform: uppercase; }
html[data-theme="sky"] .hero h1 span { color: var(--white); }
html[data-theme="sky"] .sheet, html[data-theme="sky"] .empty-state, html[data-theme="sky"] .loading, html[data-theme="sky"] .result-card, html[data-theme="sky"] .primary-btn, html[data-theme="sky"] .optional-btn { border-radius: 0; }
html[data-theme="sky"] .claim-input { border-radius: 18px 0 18px 0; border-left-width: 6px; }
html[data-theme="sky"] .case-card { border-radius: 0; box-shadow: 8px 8px 0 rgba(6,51,84,.18); }
html[data-theme="sky"] .magnifier-ui { border-radius: 8px; border-color: var(--white); background: var(--forest); }
html[data-theme="sky"] .magnifier-ui::after { border-radius: 3px; }

html[data-theme="garden"] .topbar { border-radius: 0 0 38px 38px; }
html[data-theme="garden"] .hero { padding: 30px 35px; background-color: var(--forest); background-image: radial-gradient(ellipse at 12% 18%, rgba(255,210,63,.18) 0 5px, transparent 5.5px), radial-gradient(ellipse at 88% 75%, rgba(118,200,77,.28) 0 7px, transparent 7.5px); background-size: 56px 61px, 72px 67px; border: 2px solid var(--sage); border-radius: 58px 18px 58px 18px; }
html[data-theme="garden"] h1 { font-family: var(--serif); font-weight: 700; letter-spacing: -.045em; }
html[data-theme="garden"] .hero h1 span { color: var(--paper); }
html[data-theme="garden"] .sheet, html[data-theme="garden"] .empty-state, html[data-theme="garden"] .loading, html[data-theme="garden"] .result-card { border-radius: 30px 12px 30px 12px; }
html[data-theme="garden"] .primary-btn, html[data-theme="garden"] .panel-btn, html[data-theme="garden"] .email-send { border-radius: 7px 28px 7px 28px; }
html[data-theme="garden"] .claim-input { border-radius: 44px 12px 44px 12px; }
html[data-theme="garden"] .case-card { border-radius: 44% 56% 48% 52% / 22% 27% 73% 78%; }
html[data-theme="garden"] .magnifier-ui { border-color: var(--mustard); background: rgba(35,125,72,.9); border-radius: 50% 48% 53% 46%; }

.feature-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 0 0 14px; }
.tool-btn { min-height: 43px; padding: 9px 10px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 12px 4px 12px 4px; font-size: .7rem; font-weight: 850; }
.tool-btn:hover { color: var(--paper); background: var(--forest); border-color: var(--forest); transform: translateY(-2px); }
.claim-parts { margin: 0 0 28px; padding: 20px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 18px 5px 18px 5px; }
.claim-parts h3 { margin: 0 0 7px; font-family: var(--serif); }
.claim-parts p { margin: 0 0 13px; color: var(--ink-soft); font-size: .82rem; }
.claim-parts-list { display: grid; gap: 8px; }
.claim-part { padding: 11px 13px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--rust); text-align: left; }
.claim-part:hover { border-color: var(--forest); }
.evidence-breakdown { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 25px; align-items: center; }
.accuracy-card { display: block; }
.score-grid { display: grid; gap: 9px; }
.score-row { display: grid; grid-template-columns: 126px minmax(80px,1fr) 40px; gap: 9px; align-items: center; color: var(--ink-soft); font-size: .74rem; }
.score-track { height: 9px; overflow: hidden; background: color-mix(in srgb, var(--sage-pale) 75%, var(--white)); border-radius: 99px; }
.score-fill { height: 100%; background: var(--forest); border-radius: inherit; }
.score-row:nth-child(2) .score-fill { background: var(--rust); }
.score-row:nth-child(3) .score-fill { background: var(--mustard); }
.score-row:nth-child(4) .score-fill { background: var(--sage); }
.score-row:nth-child(5) .score-fill { background: var(--blue); }
.evidence-map { position: relative; display: grid; grid-template-columns: minmax(160px,.75fr) minmax(0,1.25fr); gap: 18px; align-items: center; padding: 22px; background: var(--panel-bg); border: 1px solid var(--panel-border); }
.map-claim { padding: 18px; color: var(--paper); background: var(--forest); border-radius: 50% 18px 50% 18px; font-family: var(--serif); font-weight: 700; line-height: 1.45; text-align: center; }
.map-nodes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.map-node { position: relative; padding: 11px 12px; background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--sage); font-size: .72rem; line-height: 1.35; }
.map-node.supports { border-left-color: var(--green); } .map-node.contradicts { border-left-color: var(--red); } .map-node.context { border-left-color: var(--mustard); } .map-node.inconclusive { border-left-color: var(--ink-soft); }
.map-node b { display: block; margin-bottom: 3px; }
.source-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 14px; padding: 15px 16px; color: var(--ink); background: var(--source-bg); border: 1px solid var(--line); border-left: 6px solid var(--sage); text-decoration: none; }
.source-card.supports { border-left-color: var(--green); } .source-card.contradicts { border-left-color: var(--red); } .source-card.context { border-left-color: var(--mustard); }
.source-card strong { font-family: var(--serif); }
.source-card small { grid-column: 1/-1; color: var(--ink-soft); line-height: 1.45; }
.source-tags { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.source-tags span { padding: 4px 7px; background: var(--white); border: 1px solid var(--line); border-radius: 99px; font-size: .62rem; font-weight: 850; }
.feature-dialog { width: min(820px, calc(100% - 28px)); max-height: calc(100vh - 36px); padding: 0; color: var(--ink); background: var(--paper); border: 0; border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.42); }
.feature-dialog::backdrop { background: rgba(8,24,21,.78); backdrop-filter: blur(3px); }
.feature-body { max-height: calc(100vh - 150px); padding: 28px 32px 34px; overflow: auto; }
.feature-form { display: grid; gap: 14px; }
.feature-form label { font-family: var(--serif); font-weight: 700; }
.feature-form textarea, .feature-form input { width: 100%; min-height: 50px; margin-top: 7px; padding: 13px 14px; color: var(--ink); background: var(--white); border: 1px solid var(--input-border); border-bottom: 3px solid var(--forest); }
.feature-form textarea { min-height: 110px; resize: vertical; }
.feature-result { margin-top: 20px; padding: 20px; background: var(--white); border-left: 6px solid var(--rust); line-height: 1.6; }
.case-list, .achievement-grid, .extracted-list { display: grid; gap: 10px; }
.case-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; padding: 15px; background: var(--white); border: 1px solid var(--line); }
.case-row button, .extracted-claim { color: var(--ink); background: transparent; border: 0; text-align: left; }
.case-row strong { display: block; margin-bottom: 4px; font-family: var(--serif); }
.case-row small { color: var(--ink-soft); }
.case-actions { display: flex; align-items: center; gap: 8px; }
.case-recheck { padding: 7px 9px; color: var(--forest); background: var(--sage-pale); border: 1px solid var(--sage); font-size: .7rem; font-weight: 850; }
.case-delete { color: var(--red) !important; font-size: .72rem; font-weight: 800; }
.achievement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.achievement { padding: 16px; opacity: .52; background: var(--panel-bg); border: 1px dashed var(--line); }
.achievement.unlocked { opacity: 1; background: var(--white); border: 2px solid var(--mustard); box-shadow: 4px 4px 0 var(--button-shadow); }
.achievement b { display: block; font-family: var(--serif); }
.achievement span { display: block; margin-top: 5px; color: var(--ink-soft); font-size: .74rem; line-height: 1.45; }
.achievement-toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: 330px; padding: 18px 20px; color: var(--paper); background: var(--forest); border: 3px solid var(--mustard); box-shadow: 8px 8px 0 rgba(0,0,0,.25); animation: toast-in .45s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(18px) rotate(2deg); } to { opacity: 1; transform: none; } }
.challenge-card { margin-top: 15px; padding: 20px; background: var(--white); border-left: 7px solid var(--rust); }
.response-settings { display:grid; grid-template-columns:max-content max-content 1fr; align-items:end; gap:10px 14px; margin:12px 0 16px; color:var(--ink-soft); }
.response-settings label { display:grid; gap:5px; font-size:.76rem; font-weight:700; }
.response-settings select { min-width:150px; padding:9px 34px 9px 11px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:9px; }
.response-settings small { align-self:center; max-width:390px; font-size:.72rem; line-height:1.45; }
.audience-note { margin:10px 0; padding:9px 12px; color:var(--ink-soft); background:var(--head-muted); border-left:4px solid var(--sage); font-size:.82rem; }
@media (max-width:720px) { .response-settings { grid-template-columns:1fr 1fr; } .response-settings small { grid-column:1 / -1; } .response-settings select { width:100%; min-width:0; } }
.coach-panel, .result-tool { margin:12px 0 16px; padding:18px; background:var(--panel-bg); border:1px solid var(--panel-border); }
.coach-panel h3, .result-tool h3 { margin:0 0 8px; font-family:var(--serif); }
.coach-choices { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.coach-choice { padding:9px 12px; color:var(--ink); background:var(--white); border:1px solid var(--line); text-align:left; }
.timeline-list, .stat-list, .trail-list { display:grid; gap:10px; }
.timeline-item, .stat-item, .trail-item { padding:13px 15px; background:var(--point-bg); border-left:5px solid var(--sage); }
.timeline-item b, .stat-item b, .trail-item b { display:block; margin-bottom:4px; font-family:var(--serif); }
.timeline-item p, .stat-item p { margin:4px 0; line-height:1.5; }
.challenge-loading { margin-top:15px; padding:18px; background:var(--panel-bg); border:1px solid var(--panel-border); }
.mini-progress { height:13px; overflow:hidden; margin:9px 0; background:var(--paper-deep); border:1px solid var(--line); border-radius:20px; }
.mini-progress > span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--rust),var(--mustard),var(--sage)); transition:width .35s ease; }
.watch-explainer { margin:10px 0 0; padding:11px 14px; color:var(--ink-soft); background:var(--paper); border-left:4px solid var(--blue); font-size:.76rem; line-height:1.5; }
.watch-explainer strong { color:var(--ink); }
.image-inspector { margin:12px 0; padding:12px; background:var(--panel-bg); border:1px solid var(--panel-border); }
#image-canvas { display:block; width:100%; max-height:390px; object-fit:contain; background:#111; cursor:crosshair; touch-action:none; }
.image-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.provenance-card { margin-top:12px; padding:15px; background:var(--evidence-bg); border:1px solid var(--sage); }
.status-error { color:var(--red); font-weight:800; }
.speech-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.upload-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.watch-list { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1120px) {
  .top-nav { display: none; }
  .hero { grid-template-columns: minmax(0,1fr) 330px; }
  .magnifier-ui { left: 10%; transform: scale(.86) rotate(-4deg); }
  .case-card { transform-origin: center; }
  .case-card-one { right: -5%; transform: scale(.88) rotate(5deg); }
  .case-card-two { left: -8%; transform: scale(.88) rotate(-8deg); }
  .case-card-three { right: -10%; transform: scale(.88) rotate(7deg); }
}

@media (max-width: 840px) {
  .topbar, main { width: min(100% - 24px, 1580px); }
  .topbar { margin-top: 12px; border-radius: 15px 15px 0 0; }
  main { padding: 0 18px 35px; border-radius: 0 0 15px 15px; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 43px 28px 0; border-radius: 0 0 25px 25px; overflow: hidden; }
  .hero h1 { font-size: clamp(2.65rem, 11vw, 4.4rem); }
  .hero-visual { width: min(510px, 100%); min-height: 330px; margin: 24px auto 0; }
  .magnifier-ui { left: 27%; transform: scale(.9) rotate(-4deg); }
  .case-card-one { right: 3%; }
  .case-card-two { left: 2%; }
  .case-card-three { right: 2%; bottom: -12px; }
  .workspace { margin-top: 28px; }
  .appearance-panel { top: 95px; width: calc(100% - 34px); }
}

@media (max-width: 520px) {
  .brand { min-width: 0; }
  .brand-name { font-size: 1.02rem; }
  .brand-note { display: none; }
  .hero h1 span { padding-right: 8px; padding-left: 8px; }
  .hero-visual { left: 50%; width: 440px; min-height: 285px; margin-left: -220px; transform: scale(.78); transform-origin: center top; }
  .accuracy-card { grid-template-columns: 1fr; text-align: center; }
  .accuracy-chart { margin: 0 auto; }
  .how-steps { grid-template-columns: 1fr; }
  .session-badge { display: none !important; }
  .login-head, .login-body { padding-right: 23px; padding-left: 23px; }
  .examples { grid-template-columns: 1fr; }
  .example { min-height: 74px; }
  .feature-strip { grid-template-columns: repeat(2,1fr); }
  .evidence-breakdown, .evidence-map { grid-template-columns: 1fr; }
  .map-nodes, .achievement-grid { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 105px minmax(60px,1fr) 36px; }
}

/* Manual display selector: Auto uses the media queries above. */
html[data-layout="mobile"] body { min-width: 0; }
html[data-layout="mobile"] .topbar, html[data-layout="mobile"] main { width: min(100% - 24px, 760px); }
html[data-layout="mobile"] .topbar { min-height: 72px; margin-top: 12px; padding: 10px 18px; border-radius: 15px 15px 0 0; }
html[data-layout="mobile"] main { padding: 0 18px 35px; border-radius: 0 0 15px 15px; }
html[data-layout="mobile"] .top-nav { display: none; }
html[data-layout="mobile"] .brand-note, html[data-layout="mobile"] .edition { display: none; }
html[data-layout="mobile"] .hero { grid-template-columns: 1fr; min-height: auto; padding: 40px 26px 0; border-radius: 0 0 25px 25px; overflow: hidden; }
html[data-layout="mobile"] .hero h1 { font-size: clamp(2.5rem, 9vw, 4rem); }
html[data-layout="mobile"] .hero-visual { width: min(510px,100%); min-height: 320px; margin: 24px auto 0; }
html[data-layout="mobile"] .workspace { grid-template-columns: 1fr; margin-top: 28px; }
html[data-layout="mobile"] .sheet { position: static; }
html[data-layout="mobile"] .appearance-panel { top: 92px; width: calc(100% - 24px); }
html[data-layout="mobile"] .evidence-breakdown, html[data-layout="mobile"] .evidence-map { grid-template-columns: 1fr; }
html[data-layout="mobile"] .accuracy-chart { margin: 0 auto 18px; }

html[data-layout="desktop"] body { min-width: 1180px; }
html[data-layout="desktop"] .topbar, html[data-layout="desktop"] main { width: min(1580px, calc(100% - 56px)); }
html[data-layout="desktop"] .topbar { min-height: 86px; margin-top: 30px; padding: 14px clamp(25px,4vw,62px); border-radius: 24px 24px 0 0; }
html[data-layout="desktop"] main { padding: 0 42px 52px; border-radius: 0 0 24px 24px; }
html[data-layout="desktop"] .top-nav { display: flex; }
html[data-layout="desktop"] .brand-note { display: block; }
html[data-layout="desktop"] .hero { grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr); min-height: 410px; padding: clamp(45px,6vw,82px) clamp(35px,5vw,76px); overflow: visible; }
html[data-layout="desktop"] .hero-visual { width: auto; min-height: 330px; margin: 0; transform: none; }
html[data-layout="desktop"] .workspace { grid-template-columns: minmax(360px,440px) minmax(0,1fr); margin-top: 92px; }
html[data-layout="desktop"] .sheet { position: sticky; top: 20px; }
html[data-layout="desktop"] .evidence-breakdown { grid-template-columns: 145px minmax(0,1fr); text-align: left; }
html[data-layout="desktop"] .evidence-map { grid-template-columns: minmax(160px,.75fr) minmax(0,1.25fr); }

/* 2026 editorial redesign: a calmer, human-made evidence desk. */
html[data-theme] { --serif:"Inter",Arial,sans-serif; --sans:"Open Sans",Arial,sans-serif; }
html[data-theme] .hero { padding:64px clamp(30px,5vw,76px); background:linear-gradient(115deg,color-mix(in srgb,var(--forest) 86%,#071823),var(--forest)); border:0; border-radius:0 0 34px 34px; }
html[data-theme] .hero h1 { font-style:normal; text-transform:none; letter-spacing:-.055em; }
html[data-theme] .sheet,html[data-theme] .empty-state,html[data-theme] .loading,html[data-theme] .result-card { border-radius:22px !important; }
html[data-theme] .claim-input,html[data-theme] .primary-btn,html[data-theme] .panel-btn,html[data-theme] .email-send { border-radius:14px !important; }
html[data-theme="citrus"] {
  --canvas:#e9e4da; --paper:#f7f3eb; --white:#fffdf8; --ink:#183044; --ink-soft:#61717a;
  --forest:#183044; --rust:#eb6546; --rust-deep:#c34830; --mustard:#f3bd4b; --sage:#34a99a;
  --line:#cfc7b8; --input-border:#a9b2ad; --shadow:0 18px 45px rgba(28,42,45,.11);
  --surface-texture:repeating-linear-gradient(0deg,rgba(24,48,68,.018) 0 1px,transparent 1px 5px);
  --texture-image:radial-gradient(circle at 1px 1px,rgba(24,48,68,.08) 1px,transparent 0),linear-gradient(135deg,rgba(243,189,75,.11),transparent 42%,rgba(52,169,154,.08));
  --texture-size:18px 18px,100% 100%; --sans:"Open Sans",Arial,sans-serif;
}
body { font-family:"Open Sans",Arial,sans-serif; letter-spacing:.005em; }
h1,h2,h3,h4,h5,h6,.brand-name,.verdict,.loading-percent,.accuracy-chart strong,.daily-timer { font-family:"Inter",Arial,sans-serif !important; }
button,input,textarea,select,label,.top-nav,.session-badge,.appearance-panel { font-family:"Roboto",Arial,sans-serif !important; }
.topbar { width:min(1460px,calc(100% - 48px)); min-height:76px; margin:24px auto 0; padding:12px 24px; color:var(--ink); background:rgba(255,253,248,.94); border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0; backdrop-filter:blur(12px); }
.topbar::after { right:auto; left:24px; bottom:-1px; width:128px; height:4px; background:var(--rust); }
.brand-mark { color:var(--white); background:var(--rust); border:0; border-radius:50%; box-shadow:inset 0 0 0 7px var(--white),0 0 0 2px var(--rust); }
.brand-name { color:var(--ink); font-family:var(--sans); font-weight:850; }
.brand-note,.edition { color:var(--ink-soft); }
.appearance-toggle,.logout-button { color:var(--ink); background:transparent; border-color:var(--line); border-radius:999px; }
.appearance-toggle:hover,.appearance-toggle[aria-expanded="true"] { color:var(--white); background:var(--forest); border-color:var(--forest); }
main { width:min(1460px,calc(100% - 48px)); padding:0 42px 60px; background:rgba(247,243,235,.91); border:1px solid var(--line); border-top:0; border-radius:0 0 22px 22px; box-shadow:0 28px 80px rgba(24,48,68,.16); }
.hero { min-height:420px; padding:64px clamp(30px,5vw,76px); color:var(--white); background:linear-gradient(115deg,#17334a 0 57%,#205b62 100%); border:0; border-radius:0 0 34px 34px; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.32; background:repeating-linear-gradient(116deg,transparent 0 39px,rgba(255,255,255,.045) 40px 41px); }
.hero-copy,.route { color:#dce7e6; }
.kicker { color:#ffc964; }
.hero h1 { max-width:760px; font-family:var(--sans); font-size:clamp(3rem,5.8vw,5.8rem); font-weight:850; letter-spacing:-.055em; }
.hero h1 span { display:inline; padding:0 .1em; color:#183044; background:#f3bd4b; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hero-action { color:var(--white); background:var(--rust); border-color:var(--rust); box-shadow:none; }
.workspace { gap:28px; margin-top:42px; }
.sheet,.empty-state,.loading,.result-card { background-color:var(--white); border:1px solid #d8d1c5; border-radius:22px !important; box-shadow:var(--shadow); }
.sheet { padding:30px; border-top:5px solid var(--rust); }
.sheet::before { content:"CASE INTAKE"; top:19px; border:0; font-family:var(--sans); }
.sheet-label,.result-section h3,.optional-area h3 { font-family:var(--sans); font-weight:800; }
.claim-input { min-height:132px; padding:18px; background:#fbfaf6; border:1px solid #b9c1bb; border-bottom:3px solid var(--forest); border-radius:14px !important; font-family:var(--sans); }
.example,.tool-btn { border-radius:12px !important; }
.feature-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.tool-btn { min-height:45px; padding:10px 12px; color:var(--ink); background:#f5f2eb; border-color:#d6cec0; font-size:.72rem; }
.primary-btn { min-height:60px; padding:15px 20px; background:var(--rust); border-radius:14px !important; }
.result-card { overflow:hidden; border-top:0; }
.loading { overflow:hidden; }
.loading-case { max-width:820px; padding:clamp(24px,4vw,42px); }
.loading-case .loader { display:none; }
.loading-topline h2 { font-family:"Inter",Arial,sans-serif; font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.12; }
.loading-percent { flex:0 0 auto; font-size:clamp(1.65rem,3.6vw,2.5rem); }
.evidence-network { position:relative; width:100%; margin:16px 0 10px; padding:7px 0; overflow:hidden; background:linear-gradient(180deg,rgba(52,169,154,.05),rgba(243,189,75,.06)); border:1px solid #ddd6c9; border-radius:18px; }
.evidence-network svg { display:block; width:100%; height:auto; max-height:250px; }
.scatter-grid line { stroke:rgba(24,48,68,.10); stroke-width:1.5; stroke-dasharray:4 7; }
.scatter-grid line:nth-child(-n+2) { stroke:rgba(24,48,68,.27); stroke-width:2; stroke-dasharray:none; }
.network-lines line { stroke:#b8c4c0; stroke-width:3.5; stroke-linecap:round; stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset .8s ease,stroke .35s ease; }
.network-lines line.active { stroke:var(--sage); stroke-dashoffset:0; }
.network-nodes g { opacity:.13; transition:opacity .35s ease,filter .35s ease; }
.network-nodes g.active { opacity:1; filter:drop-shadow(0 6px 6px rgba(24,48,68,.18)); }
.network-nodes circle { fill:var(--white); stroke:#b8c4c0; stroke-width:4; transform-box:fill-box; transform-origin:center; transition:fill .35s ease,stroke .35s ease; }
.network-nodes g.active circle { animation:network-pop .46s cubic-bezier(.2,.9,.25,1.35) both; }
.network-nodes g.active circle { fill:var(--mustard); stroke:var(--forest); }
.network-nodes g:last-child.active circle { fill:var(--sage); }
.network-nodes text { fill:var(--ink); font-family:"Roboto",Arial,sans-serif; font-size:12px; font-weight:700; text-anchor:middle; }
@keyframes network-pop { from { transform:scale(.25); } to { transform:scale(1); } }
.estimated-progress { margin:14px 0 1px !important; color:var(--ink) !important; font-family:"Roboto",Arial,sans-serif; font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.loading-caption { margin-top:2px !important; }
.result-head { padding:25px 32px; background:var(--forest); border-bottom:6px solid var(--mustard); }
.result-head h2,.result-head p { color:var(--white); }
.verdict { color:var(--ink); background:var(--mustard); border:0; border-radius:999px; }
.result-body { padding:clamp(26px,4vw,48px); }
.summary { font-family:var(--sans); font-size:clamp(1.25rem,2.3vw,2rem); font-weight:750; line-height:1.35; }
.result-section { margin-top:32px; padding-top:28px; border-top:1px solid #ded8ce; }
.result-section + .result-section { margin-top:26px; }
.result-section .section-title { margin-bottom:14px; font-size:1.05rem; }
.explanation { max-width:860px; font-size:.96rem; line-height:1.75; }
.accuracy-card,.claim-parts,.result-section,.optional-panel,.coach-panel,.result-tool { border-radius:16px !important; }
.points { grid-template-columns:repeat(2,minmax(0,1fr)); }
.points li,.source-card,.timeline-item,.stat-item,.trail-item { border-radius:12px; }
.advanced-evidence { margin-top:30px; border-top:1px solid #d9d2c7; border-bottom:1px solid #d9d2c7; }
.advanced-evidence > summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 3px; cursor:pointer; list-style:none; }
.advanced-evidence > summary::-webkit-details-marker { display:none; }
.advanced-evidence > summary strong,.advanced-evidence > summary small { display:block; }
.advanced-evidence > summary strong { font-family:"Inter",Arial,sans-serif; font-size:.96rem; }
.advanced-evidence > summary small { margin-top:4px; color:var(--ink-soft); font-size:.72rem; }
.advanced-evidence > summary svg,.more-tools-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.advanced-evidence[open] > summary svg,.more-tools-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.advanced-evidence-body { padding:4px 0 25px; }
.advanced-evidence-body > .result-section:first-child { margin-top:10px; }
.optional-area { margin-top:36px; padding:0; background:transparent; border:0; border-radius:0; }
.optional-label { color:var(--rust-deep); }
.primary-result-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.result-action,.specialist-action { display:flex; align-items:center; gap:12px; min-width:0; color:var(--ink); background:var(--white); border:1px solid #d3ccc1; border-radius:13px; text-align:left; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease; }
.result-action { min-height:76px; padding:14px 15px; }
.result-action:hover,.specialist-action:hover { border-color:var(--sage); box-shadow:0 8px 18px rgba(24,48,68,.09); transform:translateY(-2px); }
.result-action:active,.specialist-action:active { box-shadow:none; transform:translateY(0); }
.result-action:focus-visible,.specialist-action:focus-visible,.more-tools-toggle:focus-visible,.advanced-evidence > summary:focus-visible { outline:3px solid color-mix(in srgb,var(--mustard) 70%,transparent); outline-offset:3px; }
.result-action:disabled,.specialist-action:disabled { cursor:wait; opacity:.62; transform:none; box-shadow:none; }
.action-icon { flex:0 0 auto; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.result-action > span,.specialist-action > span { min-width:0; }
.result-action strong,.result-action small,.specialist-action strong,.specialist-action small { display:block; }
.result-action strong,.specialist-action strong { font-family:"Inter",Arial,sans-serif; font-size:.8rem; }
.result-action small,.specialist-action small { margin-top:4px; color:var(--ink-soft); font-size:.65rem; line-height:1.35; }
.result-action:hover small,.specialist-action:hover small { color:var(--ink-soft); }
.more-tools-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:12px; padding:13px 3px; color:var(--ink-soft); background:transparent; border:0; border-top:1px solid #ddd6cb; font-size:.73rem; font-weight:700; }
.more-tools-toggle:hover { color:var(--ink); }
.more-tools-panel { padding:5px 0 8px; }
.specialist-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.specialist-action { min-height:72px; padding:13px; background:#f7f4ed; }
.specialist-action[data-active="true"] { color:var(--white); background:var(--forest); border-color:var(--forest); }
.specialist-action[data-active="true"] small { color:color-mix(in srgb,var(--white) 76%,transparent); }
.optional-btn { min-height:54px; padding:11px 14px; color:var(--ink); background:var(--white); border:1px solid #cbc4b9; border-radius:12px !important; font-family:var(--sans); font-size:.76rem; font-weight:800; text-align:left; }
.optional-btn:hover,.optional-btn[aria-expanded="true"] { color:var(--white); background:var(--forest); }
.watch-explainer { margin-top:10px; border-radius:10px; }
.panel-status,.email-status,.audio-status { transition:color .15s ease; }
.panel-status:not(:empty),.email-status:not(:empty) { padding:9px 11px; background:#f5f2eb; border-radius:8px; }
.status-error,.message:not(:empty) { color:var(--red); }
.sources { gap:9px; }
.source-card { background:transparent; border:1px solid #ddd7cd; border-left:4px solid var(--sage); border-radius:10px; }
.source-card:hover { background:#f7f5ef; border-color:var(--sage); transform:translateX(2px); }
.again-btn { border-radius:12px !important; }
footer { border-radius:16px; }

.audio-dialog { width:min(560px,calc(100% - 28px)); padding:0; color:var(--ink); background:#fffdf8; border:0; border-radius:26px; box-shadow:0 32px 100px rgba(10,25,34,.48); }
.audio-dialog::backdrop { background:rgba(13,31,42,.76); backdrop-filter:blur(5px); }
.audio-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:25px 28px 18px; }
.audio-head p { margin:0 0 5px; color:var(--rust-deep); font-size:.67rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.audio-head h2 { margin:0; font-family:var(--sans); font-size:1.55rem; }
.audio-close { width:36px; height:36px; color:var(--ink); background:#f1ede4; border:0; border-radius:50%; font-size:1.2rem; }
.audio-body { padding:10px 34px 34px; text-align:center; }
.audio-case { margin:0 0 24px; color:var(--ink-soft); font-size:.82rem; line-height:1.5; }
.audio-main-button { display:grid; place-items:center; width:112px; height:112px; margin:0 auto 24px; color:var(--white); background:var(--rust); border:9px solid #ffe1d7; border-radius:50%; box-shadow:0 12px 26px rgba(195,72,48,.28); }
.audio-main-button svg { width:42px; height:42px; fill:currentColor; }
.audio-main-button.loading { animation:audio-pulse 1.1s ease-in-out infinite; }
@keyframes audio-pulse { 50% { transform:scale(.95); box-shadow:0 6px 14px rgba(195,72,48,.18); } }
.audio-skip-row { display:flex; justify-content:center; align-items:center; gap:18px; margin-bottom:22px; }
.audio-skip { min-width:104px; padding:10px 14px; color:var(--ink); background:#f2eee6; border:1px solid #d5cec2; border-radius:999px; font-weight:850; }
.audio-timeline { width:100%; accent-color:var(--rust); }
.audio-time { display:flex; justify-content:space-between; margin:5px 2px 20px; color:var(--ink-soft); font-variant-numeric:tabular-nums; font-size:.72rem; }
.speed-group { display:flex; justify-content:center; gap:7px; }
.speed-button { min-width:58px; padding:8px 10px; color:var(--ink-soft); background:transparent; border:1px solid #d5cec2; border-radius:999px; font-weight:800; }
.speed-button[aria-pressed="true"] { color:var(--white); background:var(--forest); border-color:var(--forest); }
.audio-status { min-height:22px; margin:17px 0 0; color:var(--ink-soft); font-size:.76rem; }
.audio-disclosure { margin:8px 0 0; color:var(--ink-soft); font-size:.65rem; }
.skip-link { position:fixed; z-index:1000; top:8px; left:8px; padding:10px 14px; color:#fff; background:#111; border-radius:8px; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.draft-status { display:block; min-height:18px; margin-top:5px; color:var(--ink-soft); font-size:.7rem; }
.account-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }
.account-stat { padding:14px; background:var(--paper-soft,#f5f1e8); border:1px solid #d8d1c5; border-radius:13px; }
.account-stat b,.account-stat span { display:block; }
.account-stat b { margin-bottom:4px; color:var(--ink); }
.account-stat span { color:var(--ink-soft); font-size:.72rem; }
.account-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.account-actions button { padding:12px 16px; border:1px solid #bdb5a7; border-radius:10px; font-weight:800; }
.account-actions .danger { color:#fff; background:#a83c31; border-color:#a83c31; }
.delete-confirmation { margin-top:20px; padding:16px; background:#fff0ed; border:1px solid #e7b4aa; border-radius:13px; }
.delete-confirmation label { display:block; margin-bottom:8px; font-weight:800; }
.delete-confirmation input { width:100%; padding:12px; border:1px solid #af9f93; border-radius:9px; }
.buy-credit-link { padding:11px 15px; color:var(--forest); background:var(--mustard); border:0; border-radius:10px; font-weight:900; }
.credit-packages { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
.credit-packages button { display:flex; min-height:124px; padding:19px; align-items:flex-start; justify-content:space-between; gap:16px; color:var(--ink); background:var(--white); border:2px solid var(--line); border-radius:16px; text-align:left; box-shadow:0 6px 0 rgba(23,34,31,.08); }
.credit-packages button:hover { border-color:var(--rust); transform:translateY(-2px); box-shadow:0 9px 0 rgba(23,34,31,.08); }
.credit-packages span,.credit-packages strong,.credit-packages small { display:block; }
.credit-packages strong { margin-bottom:7px; font-size:1.05rem; }
.credit-packages small { color:var(--ink-soft); line-height:1.45; }
.credit-packages b { flex:none; padding:7px 10px; color:var(--paper); background:var(--forest); border-radius:9px; font-size:1rem; }
.credit-smallprint { color:var(--ink-soft); font-size:.72rem; }
.payment-toast { position:fixed; z-index:1200; right:22px; bottom:22px; max-width:390px; padding:16px 19px; color:#fff; background:var(--forest); border-left:6px solid var(--mustard); border-radius:12px; box-shadow:0 18px 45px rgba(0,0,0,.28); font-weight:800; }
.payment-toast.error { background:#8f332b; }
html[data-calm="true"] body,html[data-calm="true"] main,html[data-calm="true"] .sheet,html[data-calm="true"] .result-card,html[data-calm="true"] .empty-state { background-image:none !important; }
html[data-calm="true"] .hero::before,html[data-calm="true"] .hero-visual { display:none; }
html[data-calm="true"] .hero { grid-template-columns:1fr; min-height:auto; }
html[data-calm="true"] .sheet,html[data-calm="true"] .result-card,html[data-calm="true"] .empty-state,html[data-calm="true"] .loading { box-shadow:none; }
html[data-calm="true"] *,html[data-calm="true"] *::before,html[data-calm="true"] *::after { animation:none !important; transition-duration:.01ms !important; }
@media(max-width:980px){.primary-result-actions,.specialist-actions{grid-template-columns:1fr}.points{grid-template-columns:1fr;}}
@media(max-width:560px){.topbar,main{width:calc(100% - 20px);}.topbar{margin-top:10px;padding:10px 14px}.audio-body{padding:8px 22px 27px}.audio-main-button{width:96px;height:96px}.primary-result-actions{position:sticky;z-index:8;bottom:8px;grid-template-columns:repeat(3,minmax(0,1fr));padding:7px;background:rgba(255,253,248,.94);border:1px solid #d4cdc1;border-radius:16px;box-shadow:0 12px 28px rgba(24,48,68,.18);backdrop-filter:blur(8px)}.result-action{flex-direction:column;justify-content:center;gap:5px;min-height:64px;padding:8px 5px;text-align:center}.result-action small{display:none}.result-action strong{font-size:.65rem}.specialist-action{min-height:68px}.network-nodes text{font-size:10px}}
@media(max-width:700px){.account-summary,.credit-packages{grid-template-columns:1fr 1fr}.credit-packages button{min-height:112px;padding:15px}.payment-toast{right:12px;bottom:12px;left:12px;max-width:none}}
@media(max-width:700px){.age-band-grid{grid-template-columns:1fr 1fr}.age-band-card span{min-height:110px}.age-gate-head{padding:27px 24px 25px}.age-gate-brand{margin-bottom:22px}}
@media(max-width:420px){.age-band-grid{grid-template-columns:1fr}.age-band-card span{min-height:82px}.age-gate-dialog{max-height:calc(100vh - 14px)}.age-gate-head h2{font-size:2rem}}

/* v2.4.8 interface remaster: one coherent visual system across every screen. */
:root {
  --ui-radius:20px;
  --ui-radius-small:13px;
  --ui-shadow:0 20px 55px rgba(19,39,49,.12);
  --ui-shadow-soft:0 9px 25px rgba(19,39,49,.09);
  --ui-focus:0 0 0 4px color-mix(in srgb,var(--mustard) 58%,transparent);
  --accent-two:var(--sage);
  --page-art:radial-gradient(circle at 8% 9%,color-mix(in srgb,var(--mustard) 25%,transparent) 0 10%,transparent 27%),radial-gradient(circle at 92% 19%,color-mix(in srgb,var(--sage) 18%,transparent) 0 8%,transparent 24%);
  --hero-art:radial-gradient(circle at 88% 20%,rgba(255,255,255,.15) 0 1px,transparent 1.5px),linear-gradient(135deg,rgba(255,255,255,.07),transparent 46%);
  --card-art:linear-gradient(rgba(20,45,55,.025) 1px,transparent 1px);
}
html[data-theme="citrus"] { --canvas:#f2eee5;--paper:#f8f5ed;--white:#fffefa;--ink:#17344b;--ink-soft:#60727d;--forest:#2459b8;--rust:#ff6647;--rust-deep:#d9482f;--mustard:#ffd33f;--sage:#24bda6;--sage-pale:#dffaf3;--line:#d8d1c3;--accent-two:#24bda6;--source-bg:#e9f8ff;--panel-bg:#fff6dc;--panel-border:#ead18a;--head-muted:#dfeaff;--button-shadow:rgba(255,102,71,.22); }
html[data-theme="berry"] { --canvas:#f4e9f3;--paper:#fbf4fa;--white:#fffaff;--ink:#411a49;--ink-soft:#745b78;--forest:#7c2cc4;--rust:#f04482;--rust-deep:#bd2862;--mustard:#ffd052;--sage:#16c6b2;--sage-pale:#dbfbf6;--line:#dec9dc;--accent-two:#16c6b2;--source-bg:#f1e7ff;--panel-bg:#fff0f7;--panel-border:#eeb7cf;--head-muted:#f2def5;--page-art:radial-gradient(circle at 7% 12%,rgba(240,68,130,.19),transparent 25%),radial-gradient(circle at 91% 22%,rgba(22,198,178,.17),transparent 24%);--hero-art:radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1px,transparent 0),linear-gradient(125deg,rgba(240,68,130,.28),transparent 48%); }
html[data-theme="sky"] { --canvas:#e9f4fb;--paper:#f3faff;--white:#ffffff;--ink:#123958;--ink-soft:#58758a;--forest:#087cca;--rust:#ff6257;--rust-deep:#d94239;--mustard:#ffcf3f;--sage:#34c997;--sage-pale:#ddf8ef;--line:#bfd9e8;--accent-two:#34c997;--source-bg:#e5f7ff;--panel-bg:#edf8ff;--panel-border:#abd8ef;--head-muted:#dcefff;--page-art:linear-gradient(rgba(8,124,202,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(8,124,202,.05) 1px,transparent 1px);--hero-art:linear-gradient(120deg,rgba(255,255,255,.18),transparent 44%),radial-gradient(circle at 82% 25%,rgba(52,201,151,.25),transparent 24%); }
html[data-theme="garden"] { --canvas:#edf3df;--paper:#f7faef;--white:#fffef8;--ink:#163f37;--ink-soft:#5d766f;--forest:#16845f;--rust:#ff6845;--rust-deep:#d84a2c;--mustard:#ffd33f;--sage:#76c84d;--sage-pale:#e8f9d9;--line:#cbd9b9;--accent-two:#76c84d;--source-bg:#e9f8e4;--panel-bg:#fff6d8;--panel-border:#dfca78;--head-muted:#dff2e5;--page-art:radial-gradient(ellipse at 12% 15%,rgba(118,200,77,.18),transparent 24%),radial-gradient(ellipse at 92% 20%,rgba(255,211,63,.21),transparent 23%);--hero-art:radial-gradient(ellipse at 10% 20%,rgba(255,211,63,.22) 0 4px,transparent 5px),radial-gradient(ellipse at 84% 72%,rgba(118,200,77,.27) 0 6px,transparent 7px); }

html { scroll-behavior:smooth; }
body { min-width:0; color:var(--ink); background-color:var(--canvas); background-image:var(--page-art); background-attachment:fixed; background-size:auto; }
body::before { opacity:.32; background-size:22px 22px; }
button,a,select,textarea,input { -webkit-tap-highlight-color:transparent; }
button { transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease; }
button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible { outline:none; box-shadow:var(--ui-focus); }

.topbar { position:relative; z-index:30; width:min(1500px,calc(100% - 40px)); min-height:82px; margin:20px auto 0; padding:13px clamp(18px,3vw,38px); color:var(--ink); background:color-mix(in srgb,var(--white) 92%,transparent); border:1px solid color-mix(in srgb,var(--line) 82%,transparent); border-bottom:0; border-radius:24px 24px 0 0; box-shadow:none; backdrop-filter:blur(18px); }
.topbar::after { right:auto; bottom:0; left:clamp(18px,3vw,38px); width:112px; height:4px; background:linear-gradient(90deg,var(--rust),var(--mustard),var(--sage)); border-radius:999px; }
.brand { gap:13px; }
.brand-mark { width:42px; height:42px; color:transparent; background:var(--forest); border:0; border-radius:14px; box-shadow:none; transform:none; }
.brand-mark::before { content:""; position:absolute; width:17px; height:17px; border:4px solid var(--mustard); border-radius:50%; }
.brand-mark::after { content:""; position:absolute; top:27px; right:auto; bottom:auto; left:27px; width:11px; height:4px; background:var(--mustard); border-radius:99px; transform:rotate(45deg); transform-origin:left center; }
.brand-name { font:850 1.05rem/1.1 "Inter",Arial,sans-serif; letter-spacing:-.025em; }
.brand-note { margin-top:3px; font-size:.62rem; letter-spacing:.035em; }
.top-nav { gap:4px; padding:4px; background:color-mix(in srgb,var(--paper) 78%,transparent); border:1px solid color-mix(in srgb,var(--line) 80%,transparent); border-radius:999px; }
.top-nav a,.top-nav button { padding:8px 13px; border-radius:999px; }
.top-nav a:hover,.top-nav button:hover { color:var(--white); background:var(--forest); }
.top-actions { gap:8px; }
.appearance-toggle,.logout-button,.credit-badge { min-height:39px; border-radius:999px; }

main { width:min(1500px,calc(100% - 40px)); margin:0 auto 24px; padding:0 clamp(20px,3vw,48px) 52px; background:color-mix(in srgb,var(--paper) 93%,transparent); border:1px solid color-mix(in srgb,var(--line) 82%,transparent); border-top:0; border-radius:0 0 24px 24px; box-shadow:0 35px 90px rgba(20,42,50,.14); }
.hero { position:relative; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:clamp(30px,5vw,80px); min-height:430px; margin:0 calc(clamp(20px,3vw,48px) * -1); padding:clamp(48px,6vw,84px) clamp(30px,6vw,92px); overflow:hidden; color:#fff; background-color:var(--forest); background-image:var(--hero-art); background-size:12px 12px,100% 100%; border:0; border-radius:0 0 38px 38px; }
.hero::after { content:""; position:absolute; right:-70px; bottom:-125px; width:340px; height:340px; border:45px solid color-mix(in srgb,var(--mustard) 30%,transparent); border-radius:50%; }
.hero-words { max-width:760px; }
.kicker,.hero .kicker { margin-bottom:13px; color:var(--mustard); font-size:.7rem; letter-spacing:.18em; }
.hero h1 { max-width:820px; color:#fff; font:850 clamp(3.1rem,5.8vw,6rem)/.96 "Inter",Arial,sans-serif; letter-spacing:-.06em; }
.hero h1 span { display:inline; padding:0 .08em .05em; color:var(--ink); background:var(--mustard); border-radius:7px; box-shadow:none; }
.hero .hero-copy { max-width:650px; margin-top:25px; color:rgba(255,255,255,.82); font-size:1rem; line-height:1.72; }
.hero-action { gap:28px; min-height:50px; margin-top:27px; padding:12px 18px 12px 21px; color:#fff; background:var(--rust); border:0; border-radius:999px; box-shadow:0 10px 23px rgba(10,25,35,.22); }
.hero-action span { display:grid; width:28px; height:28px; place-items:center; color:var(--ink); background:var(--mustard); border-radius:50%; }
.hero-action:hover { color:#fff; background:var(--rust-deep); transform:translateY(-2px); }

.workspace { grid-template-columns:minmax(430px,500px) minmax(0,1fr); gap:30px; align-items:start; margin-top:46px; }
.sheet,.empty-state,.loading,.result-card { min-width:0; background-color:var(--white); background-image:var(--card-art); background-size:100% 6px; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); border-radius:var(--ui-radius) !important; box-shadow:var(--ui-shadow-soft); }
.sheet { position:sticky; top:18px; padding:clamp(25px,3vw,36px); border-top:0; }
.sheet::before { display:block; content:""; top:0; right:auto; left:0; width:100%; height:7px; padding:0; background:linear-gradient(90deg,var(--rust) 0 34%,var(--mustard) 34% 67%,var(--sage) 67%); border:0; border-radius:var(--ui-radius) var(--ui-radius) 0 0; transform:none; }
.intake-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.intake-heading > div > span { display:block; margin-bottom:5px; color:var(--rust-deep); font-size:.62rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.intake-heading > b { flex:0 0 auto; padding:7px 10px; color:var(--forest); background:var(--sage-pale); border:1px solid color-mix(in srgb,var(--sage) 58%,var(--line)); border-radius:999px; font-size:.62rem; }
.sheet-label { display:block; max-width:none; margin:0; color:var(--ink); font:800 clamp(1.3rem,2.2vw,1.75rem)/1.15 "Inter",Arial,sans-serif; letter-spacing:-.035em; }
.claim-input { width:100%; min-height:168px; padding:20px 21px; color:var(--ink); background:color-mix(in srgb,var(--white) 82%,var(--paper)); border:1px solid color-mix(in srgb,var(--input-border) 72%,var(--line)); border-bottom:4px solid var(--forest); border-left-width:1px; border-radius:17px !important; font:500 .98rem/1.65 "Open Sans",Arial,sans-serif; box-shadow:inset 0 1px 0 rgba(255,255,255,.85); }
.claim-input::placeholder { color:color-mix(in srgb,var(--ink-soft) 58%,transparent); }
.claim-input:focus { background:var(--white); border-color:var(--forest); box-shadow:var(--ui-focus); }
.under-input { align-items:flex-start; margin:9px 3px 17px; font-size:.69rem; }
.under-input > span:last-child { flex:0 0 auto; font-variant-numeric:tabular-nums; }

.response-settings { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:11px; margin:0 0 24px; padding:14px; color:var(--ink-soft); background:color-mix(in srgb,var(--paper) 82%,var(--white)); border:1px solid color-mix(in srgb,var(--line) 78%,transparent); border-radius:16px; }
.response-settings label { display:grid; gap:6px; min-width:0; font-size:.66rem; font-weight:850; }
.language-setting > span:first-child,.selected-age > span { color:var(--ink-soft); font-size:.62rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.select-shell { position:relative; display:block; min-width:0; }
.response-settings .select-shell select { width:100%; min-width:0; min-height:54px; margin:0; padding:12px 46px 12px 15px; appearance:none; color:#fff; background:linear-gradient(135deg,var(--forest),color-mix(in srgb,var(--forest) 72%,var(--accent-two))); border:0; border-radius:12px; font:800 .83rem/1 "Roboto",Arial,sans-serif; cursor:pointer; box-shadow:0 8px 17px color-mix(in srgb,var(--forest) 18%,transparent); }
.select-shell svg { position:absolute; top:50%; right:14px; width:21px; height:21px; pointer-events:none; fill:none; stroke:var(--mustard); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transform:translateY(-50%); }
.selected-age { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 9px; min-width:0; min-height:80px; padding:11px 12px 10px 15px; background:var(--white); border:1px solid color-mix(in srgb,var(--line) 90%,transparent); border-radius:12px; }
.selected-age > span { grid-column:1/-1; }
.selected-age strong { min-width:0; overflow:hidden; font:800 .82rem/1.25 "Inter",Arial,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.selected-age button { padding:7px 10px; color:var(--forest); background:var(--sage-pale); border:1px solid color-mix(in srgb,var(--sage) 70%,var(--line)); border-radius:999px; font-size:.6rem; }
.selected-age button:hover { color:#fff; background:var(--forest); border-color:var(--forest); }
.settings-explainer { display:flex; grid-column:1/-1; align-items:flex-start; gap:9px; max-width:none !important; margin:1px 2px 0; color:var(--ink-soft); font-size:.66rem !important; line-height:1.5 !important; }
.settings-explainer > span { display:grid; flex:0 0 auto; width:19px; height:19px; place-items:center; color:#fff; background:var(--sage); border-radius:50%; font:850 .6rem/1 "Inter",Arial,sans-serif; }

.section-intro { display:flex; align-items:end; justify-content:space-between; gap:14px; margin:0 2px 10px; }
.section-intro span,.section-intro strong { display:block; }
.section-intro span { margin-bottom:2px; color:var(--rust-deep); font-size:.58rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.section-intro strong { font:800 .78rem/1.2 "Inter",Arial,sans-serif; }
.section-intro small { color:var(--ink-soft); font-size:.58rem; }
.tools-intro { margin-top:22px; }
.examples { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:0; }
.example { min-height:120px; padding:14px 13px 20px; color:var(--ink); background:var(--sage-pale); border:1px solid color-mix(in srgb,var(--sage) 76%,var(--line)); border-radius:14px !important; box-shadow:none; }
.example:nth-child(2) { background:color-mix(in srgb,var(--mustard) 18%,var(--white)); border-color:color-mix(in srgb,var(--mustard) 72%,var(--line)); }
.example:nth-child(3) { background:color-mix(in srgb,var(--rust) 11%,var(--white)); border-color:color-mix(in srgb,var(--rust) 55%,var(--line)); }
.example-category { margin-bottom:8px; color:var(--forest); font-size:.57rem; }
.example-claim { font:750 .7rem/1.42 "Inter",Arial,sans-serif; }
.example:hover { filter:none; border-color:var(--forest); box-shadow:0 9px 20px rgba(20,45,55,.1); transform:translateY(-3px); }
.example::after { height:5px; }

.feature-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.tool-btn { position:relative; min-height:62px; padding:12px 10px 12px 36px; color:var(--ink); background:var(--white); border:1px solid color-mix(in srgb,var(--line) 90%,transparent); border-radius:12px !important; font-size:.65rem; line-height:1.3; text-align:left; }
.tool-btn::before { position:absolute; top:50%; left:12px; color:var(--rust); font:900 1rem/1 "Inter",Arial,sans-serif; transform:translateY(-50%); }
#open-upload::before { content:"+"; } #open-compare::before { content:"↔"; } #open-headline::before { content:"≡"; } #coach-button::before { content:"✦"; } #open-cases::before { content:"□"; } #open-achievements::before { content:"★"; }
.tool-btn:hover { color:#fff; background:var(--forest); border-color:var(--forest); box-shadow:0 9px 18px color-mix(in srgb,var(--forest) 20%,transparent); transform:translateY(-2px); }
.tool-btn:hover::before { color:var(--mustard); }
.primary-btn { min-height:62px; padding:14px 18px 14px 21px; color:#fff; background:linear-gradient(135deg,var(--rust),var(--rust-deep)); border:0; border-radius:14px !important; box-shadow:0 10px 22px color-mix(in srgb,var(--rust) 25%,transparent); font:800 .85rem/1.2 "Inter",Arial,sans-serif; }
.primary-btn span:last-child { padding:7px 10px; color:var(--ink); background:var(--mustard); border-radius:999px; font-size:.61rem; }
.primary-btn:hover { background:linear-gradient(135deg,var(--rust-deep),var(--rust)); box-shadow:0 14px 28px color-mix(in srgb,var(--rust) 30%,transparent); transform:translateY(-2px); }

.empty-state { min-height:570px; padding:clamp(42px,6vw,86px); overflow:hidden; }
.empty-state::after { content:"?"; position:absolute; right:-10px; bottom:-75px; color:color-mix(in srgb,var(--forest) 6%,transparent); font:900 330px/1 "Inter",Arial,sans-serif; }
.empty-label { color:var(--rust-deep); }
.empty-state h2 { max-width:740px; font:800 clamp(2.15rem,4vw,4.2rem)/1.03 "Inter",Arial,sans-serif; letter-spacing:-.05em; }
.empty-state > p:not(.empty-label) { max-width:690px; }
.method-note { border-color:color-mix(in srgb,var(--line) 85%,transparent); }
.loading { min-height:500px; padding:clamp(45px,7vw,92px) clamp(24px,5vw,68px); }
.loading-case { max-width:850px; }
.evidence-network { border-radius:18px; }

.result-card { overflow:hidden; }
.result-head { grid-template-columns:minmax(110px,150px) minmax(0,1fr); gap:24px; padding:29px clamp(25px,4vw,48px); color:#fff; background:linear-gradient(135deg,var(--forest),color-mix(in srgb,var(--forest) 75%,var(--accent-two))); border-bottom:7px solid var(--mustard); }
.verdict { min-height:68px; color:var(--ink); background:var(--mustard); border:0; border-radius:14px; font:850 .78rem/1.2 "Inter",Arial,sans-serif; }
.result-head h2 { font:800 1.3rem/1.2 "Inter",Arial,sans-serif; }
.result-head p { color:rgba(255,255,255,.8); }
.result-body { padding:clamp(27px,4vw,50px); }
.summary { font:750 clamp(1.25rem,2.3vw,2rem)/1.35 "Inter",Arial,sans-serif; letter-spacing:-.025em; }
.accuracy-card { background:color-mix(in srgb,var(--mustard) 12%,var(--white)); border-color:color-mix(in srgb,var(--mustard) 62%,var(--line)); }
.accuracy-chart { box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
.points li,.source-card,.timeline-item,.stat-item,.trail-item,.claim-parts,.evidence-map { border-radius:13px !important; }
.source-card { background:color-mix(in srgb,var(--source-bg) 72%,var(--white)); }
.optional-area { padding-top:7px; }
.result-action,.specialist-action { border-radius:14px; }

.appearance-panel { top:101px; right:20px; left:20px; width:auto; max-width:1460px; max-height:calc(100vh - 116px); margin:0 auto; padding:22px clamp(22px,3vw,40px); overflow:auto; background:color-mix(in srgb,var(--white) 96%,transparent); border:1px solid var(--line); border-radius:0 0 20px 20px; box-shadow:var(--ui-shadow); backdrop-filter:blur(18px); transform:none; overscroll-behavior:contain; }
.appearance-head > div { display:block; }
.theme-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.theme-choice { min-width:0; min-height:108px; overflow:hidden; background:var(--white); border-radius:13px; }
.theme-choice[aria-pressed="true"] { padding:11px; border:3px solid var(--rust); box-shadow:0 8px 18px color-mix(in srgb,var(--rust) 14%,transparent); }
.swatches span { border-radius:7px; }
.layout-chooser { display:grid; grid-template-columns:minmax(120px,1fr) repeat(3,auto); gap:9px; align-items:center; }
.layout-chooser > strong { min-width:0; }
.calm-choice { min-height:52px; }

.how-dialog,.terms-dialog,.login-dialog,.guest-time-dialog,.bug-dialog,.feature-dialog,.audio-dialog { color:var(--ink); background:var(--white); border:0; border-radius:22px; box-shadow:0 35px 110px rgba(8,25,35,.5); }
.how-dialog::backdrop,.terms-dialog::backdrop,.login-dialog::backdrop,.guest-time-dialog::backdrop,.bug-dialog::backdrop,.feature-dialog::backdrop,.audio-dialog::backdrop { background:rgba(11,31,40,.76); backdrop-filter:blur(6px); }
.how-head,.audio-head { color:#fff; background:linear-gradient(135deg,var(--forest),color-mix(in srgb,var(--forest) 76%,var(--accent-two))); border-bottom:6px solid var(--mustard); }
.how-head h2,.how-head p,.audio-head h2,.audio-head p { color:#fff; }
.how-close,.audio-close { color:var(--ink); background:var(--mustard); border:0; }
.feature-body,.how-body,.bug-body,.terms-content { background:var(--white); }
.feature-form textarea,.feature-form input,.login-input,.email-input,.follow-input { background:color-mix(in srgb,var(--white) 82%,var(--paper)); border:1px solid color-mix(in srgb,var(--input-border) 75%,var(--line)); border-bottom:3px solid var(--forest); border-radius:12px; }
.login-submit,.email-send,.panel-btn,.again-btn { border-radius:12px; }
.login-head { background:linear-gradient(145deg,var(--white),color-mix(in srgb,var(--sage-pale) 65%,var(--white))); }

footer { max-width:none; margin-top:42px; padding:25px; color:var(--ink-soft); background:color-mix(in srgb,var(--forest) 7%,var(--white)); border:1px solid var(--line); border-radius:16px; }
footer .legal-link { color:var(--rust-deep); }

@media(max-width:1180px) {
  .top-nav { display:none; }
  .workspace,html[data-layout="auto"] .workspace { grid-template-columns:1fr; }
  .sheet { position:relative; top:auto; width:100%; }
  .empty-state,.loading,.result-card { min-height:auto; }
  .response-settings { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media(max-width:840px) {
  .topbar,main { width:calc(100% - 20px); }
  .topbar { min-height:72px; margin-top:10px; padding:10px 14px; border-radius:18px 18px 0 0; }
  main { padding:0 14px 34px; border-radius:0 0 18px 18px; }
  .hero { grid-template-columns:1fr; min-height:auto; margin:0 -14px; padding:44px 27px 0; border-radius:0 0 28px 28px; }
  .hero h1 { font-size:clamp(2.7rem,11vw,4.5rem); }
  .hero-visual { width:min(520px,100%); min-height:300px; margin:22px auto 0; transform:scale(.88); transform-origin:center top; }
  .workspace { margin-top:26px; }
  .sheet { padding:24px; }
  .appearance-panel { top:82px; right:10px; left:10px; max-height:calc(100vh - 95px); overflow:auto; }
  .theme-grid { grid-template-columns:1fr 1fr; }
  .feature-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px) {
  .brand-note,.session-badge { display:none !important; }
  .appearance-text { display:none; }
  .appearance-toggle { width:40px; padding:8px; }
  .hero { padding:38px 22px 0; }
  .hero-visual { display:none; }
  .hero { padding-bottom:40px; }
  .hero h1 { font-size:clamp(2.45rem,13vw,3.7rem); }
  .hero .hero-copy { font-size:.88rem; }
  .intake-heading { align-items:center; }
  .sheet { padding:21px 17px 23px; }
  .claim-input { min-height:145px; padding:17px; }
  .response-settings { grid-template-columns:1fr; padding:11px; }
  .settings-explainer { grid-column:1; }
  .examples { grid-template-columns:1fr; }
  .example { min-height:86px; }
  .section-intro small { display:none; }
  .feature-strip { grid-template-columns:1fr 1fr; }
  .tool-btn { min-height:56px; }
  .primary-btn { display:grid; grid-template-columns:1fr auto; gap:10px; padding:12px 12px 12px 16px; font-size:.76rem; }
  .result-head { grid-template-columns:1fr; }
  .verdict { justify-self:start; min-width:135px; }
  .result-body { padding:24px 18px; }
  .theme-grid { grid-template-columns:1fr; }
  .layout-chooser { grid-template-columns:1fr 1fr; }
  .layout-chooser > strong { grid-column:1/-1; }
  .layout-choice { width:100%; }
  .appearance-head p,.theme-choice small { display:none; }
  .age-thirteen-choice { align-items:stretch; flex-direction:column; }
}
@media(max-width:390px) {
  .top-actions { gap:4px; }
  .credit-badge { padding-right:8px; padding-left:8px; }
  .feature-strip { grid-template-columns:1fr; }
  .under-input { flex-direction:column; }
  .intake-heading > b { display:none; }
}

html[data-layout="mobile"] .response-settings { grid-template-columns:1fr; }
html[data-layout="mobile"] .settings-explainer { grid-column:1; }
html[data-layout="mobile"] .examples { grid-template-columns:1fr; }
html[data-layout="mobile"] .feature-strip { grid-template-columns:1fr 1fr; }
html[data-layout="mobile"] .hero-visual { display:none; }
html[data-layout="mobile"] .hero { padding-bottom:42px; }
html[data-layout="desktop"] .workspace { grid-template-columns:minmax(430px,500px) minmax(0,1fr); margin-top:46px; }
html[data-layout="desktop"] .sheet { position:sticky; top:18px; }