:root {
  --ink: #f5ead5;
  --ink-2: #dfe8ee;
  --jade: #9cc8df;
  --gold: #e9c47d;
  --gold-soft: rgba(233, 196, 125, .17);
  --paper: #020a11;
  --surface: rgba(7, 22, 33, .88);
  --line: rgba(132, 171, 193, .46);
  --muted: #aebdca;
  --danger: #efaa91;
  --shadow: 0 18px 55px rgba(0, 0, 0, .38);
  color-scheme: dark;
  color: var(--ink);
  background: var(--paper);
}

html { background: #020a11; }

/* Gieo đồng xu: cùng bảng màu đêm và ánh vàng của ứng dụng. */
.casting-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}
.casting-method{min-height:135px;text-align:left;padding:17px;border:1px solid var(--line);border-radius:18px;background:rgba(9,29,43,.78);display:flex;flex-direction:column;gap:7px;cursor:pointer}
.casting-method.selected{border-color:var(--gold);background:linear-gradient(145deg,rgba(233,196,125,.17),rgba(8,30,43,.92));box-shadow:inset 0 0 0 1px rgba(233,196,125,.25)}
.casting-method>span,.cast-ritual__eyebrow{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.15em}
.casting-method b{font-size:17px}.casting-method small{color:var(--muted);line-height:1.4}
#manualCast[hidden],#digitalCast[hidden]{display:none!important}
.digital-cast{margin:20px 0}.cast-ritual{position:relative;overflow:hidden;text-align:center;border:1px solid rgba(233,196,125,.38);border-radius:26px;padding:30px 18px 22px;background:radial-gradient(circle at 50% 46%,rgba(199,157,77,.18),transparent 53%),linear-gradient(150deg,#0e2b3d,#06131f 75%);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.cast-ritual:before{content:"";position:absolute;inset:15px;border:1px solid rgba(233,196,125,.17);border-radius:19px;pointer-events:none}
.cast-ritual h2{font-family:Georgia,serif;font-size:24px;color:var(--ink);margin:11px 0 6px}.cast-ritual p{color:var(--muted);min-height:3em;line-height:1.5;margin:0 auto;max-width:380px}
.coin-tray{display:flex;justify-content:center;align-items:center;gap:11px;min-height:190px;perspective:700px}
.coin{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;border:3px solid #e8c77d;box-shadow:inset 0 0 0 4px #73582d,inset 0 0 0 6px #cba85c,0 12px 24px rgba(0,0,0,.45);background:radial-gradient(circle at 34% 26%,#f9e3a4,#c79943 58%,#7d582d);color:#382812;font-size:15px;font-weight:900;backface-visibility:hidden}
.coin:nth-child(2){transform:translateY(-17px)}.coin:nth-child(3){transform:translateY(5px)}
.coin.settled{animation:coin-land .35s ease-out}.coin-tray.tossing .coin{animation:coin-toss 1.05s ease-in-out both}.coin-tray.tossing .coin:nth-child(2){animation-delay:.08s}.coin-tray.tossing .coin:nth-child(3){animation-delay:.14s}
@keyframes coin-toss{0%{transform:translateY(20px) rotateY(0)}35%{transform:translateY(-63px) rotateY(540deg)}70%{transform:translateY(-18px) rotateY(980deg)}100%{transform:translateY(0) rotateY(1080deg)}}
@keyframes coin-land{from{transform:scale(1.2)}to{transform:scale(1)}}
.coin-key{font-size:12px;color:var(--muted);margin:-7px 0 18px}.coin-key span{color:var(--gold);padding:0 6px}
.cast-ritual .continue-button{max-width:340px;margin:0 auto;background:linear-gradient(120deg,#ae7933,#edc982);color:#1c1a16}
.digital-result__stack{display:flex;flex-direction:column;gap:8px;margin:16px 0}.digital-result__row{display:grid;grid-template-columns:55px minmax(40px,1fr) 25px 90px;align-items:center;gap:10px;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:7px 13px;background:var(--surface)}.digital-result__row>span:first-child,.digital-result__row small{color:var(--muted)}.digital-result__row b{color:var(--gold)}.digital-result__row .line-shape{max-width:110px;width:100%}
.digital-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.digital-actions button{background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 13px;color:var(--muted)}.digital-actions button:disabled{opacity:.4}
@media(max-width:480px){.casting-methods{gap:8px}.casting-method{padding:13px;min-height:148px}.casting-method b{font-size:15px}.coin{width:68px;height:68px}.digital-result__row{grid-template-columns:48px 1fr 20px 82px;gap:7px;font-size:12px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.coin-tray.tossing .coin,.coin.settled{animation:none}}

body {
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(1, 8, 14, .06), #020a11 42%, #020a11),
    url("assets/kinh-dich-night.png") center top / min(100vw, 945px) auto no-repeat,
    #020a11;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 8%, rgba(233, 196, 125, .11), transparent 22%),
    linear-gradient(90deg, rgba(2, 10, 17, .35), transparent 34%, rgba(2, 10, 17, .18));
}

button, input, textarea { color: inherit; }
h1, h2, h3, .top-title b, .brand b { color: #f8edd8; }
h1, h2, h3 { text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }

main { position: relative; }
.view { padding-top: 18px; }
.view:not(#view-home) { min-height: calc(100vh - 148px); }

.topbar {
  height: 84px;
  padding: 14px 20px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(2, 10, 17, .95), rgba(2, 10, 17, .72));
  border-bottom: 1px solid rgba(139, 175, 194, .24);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
}

.mobile-seal, .brand-seal {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(233, 196, 125, .62);
  border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle, rgba(233, 196, 125, .12), rgba(2, 10, 17, .72));
  box-shadow: inset 0 0 18px rgba(233, 196, 125, .09), 0 0 20px rgba(233, 196, 125, .08);
  font-family: Georgia, serif;
  font-size: 28px;
}

.top-title b { font-size: 20px; font-weight: 600; }
.top-title small { color: #b6c6d3; font-size: 12px; }
.avatar, .icon-button {
  color: #f8edd8;
  background: rgba(4, 15, 24, .8);
  border: 1px solid rgba(191, 215, 227, .72);
  box-shadow: inset 0 0 12px rgba(155, 197, 216, .08);
}
.back-button { border-color: transparent; background: transparent; }

.welcome-card {
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px 24px 26px;
  border: 1px solid rgba(166, 199, 216, .68);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(2, 10, 17, .96) 0%, rgba(2, 10, 17, .73) 50%, rgba(2, 10, 17, .15) 100%),
    linear-gradient(0deg, rgba(2, 10, 17, .88), transparent 60%),
    url("assets/kinh-dich-night.png") 65% 10% / cover no-repeat;
  box-shadow: inset 0 0 36px rgba(130, 175, 198, .08), 0 20px 52px rgba(0, 0, 0, .48);
}
.welcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 24%, transparent 70%, rgba(233,196,125,.05));
}
.welcome-card::after { content: none; }
.welcome-card > div, .welcome-card > button { position: relative; z-index: 1; }
.welcome-card .eyebrow { color: #f0d8ad; letter-spacing: .25em; }
.welcome-card h1 { max-width: 470px; font-size: clamp(36px, 9.5vw, 52px); line-height: 1.04; }
.welcome-card p { max-width: 500px; color: #e1e6e7; font-size: 17px; }

.primary-action, .continue-button {
  min-height: 58px;
  color: #17130c;
  border: 1px solid #ffe6a8;
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 50%),
    linear-gradient(110deg, #d5aa63, #f2d594 52%, #c99248);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 30px rgba(224, 177, 91, .22);
}
.primary-action:hover, .continue-button:hover { filter: brightness(1.06); }
.continue-button:disabled {
  color: #73828c;
  border-color: rgba(133, 160, 174, .28);
  background: rgba(18, 36, 47, .82);
}

.experience-banner, .case-card, .timeline-card, .verify-card, .account-card,
.quick-grid button, .choice-card, .topic-button, .assistant-card, .line-stack,
.number-pad button, .hex-card, .sequence-item, .insight-card, .action-plan,
.invite-card, .settings-list, .history-list button, .source-section {
  color: var(--ink);
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(21, 42, 56, .72), rgba(3, 14, 23, .9)),
    radial-gradient(circle at 100% 0, rgba(117, 164, 188, .13), transparent 42%);
  box-shadow: inset 0 0 28px rgba(129, 172, 194, .035), 0 12px 34px rgba(0, 0, 0, .28);
}
.experience-banner {
  min-height: 112px;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(3, 14, 23, .96), rgba(10, 31, 44, .7)),
    url("assets/kinh-dich-night.png") 80% 53% / 125% auto no-repeat;
}
.round-icon, .quick-icon {
  color: var(--gold);
}
.round-icon {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(233, 196, 125, .52);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 196, 125, .17), rgba(4, 15, 24, .92));
}
.experience-banner b, .quick-grid b { font-family: Georgia, serif; font-size: 18px; }
.experience-banner small, .quick-grid small { color: #bcc8d1; }
.chevron { color: var(--gold); }

.section-heading { position: relative; }
.section-heading::after {
  content: "";
  flex: 1;
  order: 1;
  height: 1px;
  margin: 2px 14px 0;
  background: linear-gradient(90deg, rgba(233,196,125,.85), transparent);
}
.section-heading h2 { order: 0; color: #f4e6cc; font-size: 27px; }
.section-heading button { order: 2; color: #a9c8df; white-space: nowrap; }

.case-card {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4, 17, 27, .96), rgba(7, 26, 39, .63)),
    url("assets/kinh-dich-night.png") 70% 72% / cover no-repeat;
}
.case-card h3 { font-family: Georgia, serif; font-size: 22px; }
.case-card p, .timeline-card p, .verify-card p { color: #b9c7d1; }
.topic-pill { color: #d8eff9; border: 1px solid rgba(115, 196, 229, .45); background: rgba(44, 131, 163, .24); }
.topic-pill.secondary { color: #f5dab1; background: rgba(176, 125, 43, .2); }
.due-pill { color: #f5dcad; border: 1px solid rgba(233,196,125,.35); background: rgba(175, 127, 50, .18); }
.neutral-pill { color: #c3ced5; background: rgba(141,161,173,.14); }
.progress-line { background: rgba(157, 180, 192, .16); }
.progress-line span { background: linear-gradient(90deg, #d2a65e, #f4d28b); }
.case-card footer b { color: #f6ead6; }

.quick-grid { gap: 12px; }
.quick-grid button { min-height: 158px; border-radius: 18px; }
.quick-grid button:hover, .topic-button:hover, .history-list button:hover { border-color: rgba(233,196,125,.7); }
.quick-icon { font-size: 31px; }

.intro-orbit span:first-child { color: #d9e7ef; }
.intro-orbit span:last-child { color: var(--gold); mix-blend-mode: normal; }
.choice-card.featured, .hex-card.primary {
  border-color: rgba(233, 196, 125, .72);
  background: linear-gradient(135deg, rgba(63, 48, 27, .62), rgba(4, 16, 25, .92));
}
.privacy-note, .source-warning {
  color: #c3d1d9;
  border: 1px solid rgba(128, 166, 185, .35);
  background: rgba(10, 29, 41, .78);
}

.stepper .step { color: #9fb0bb; border-color: var(--line); background: #071722; }
.stepper .step.active, .stepper .step.done { color: #241c10; border-color: var(--gold); background: var(--gold); }
.stepper i { background: rgba(136, 174, 193, .38); }
.topic-button span { color: var(--gold); }
.topic-button.selected, .chip.selected {
  color: #17130c;
  border-color: #f0d18e;
  background: linear-gradient(135deg, #e6bd72, #f5db9d);
  box-shadow: 0 0 24px rgba(233, 196, 125, .14);
}
.topic-button b { color: #f6ebd9; }
.topic-button.selected b { color: #17130c; }

.text-input, textarea, .chip, .rating-grid button {
  color: #e9edf0;
  border-color: rgba(132, 171, 193, .4);
  background: rgba(2, 12, 20, .84);
}
.text-input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233, 196, 125, .1); }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.field-label-row .field-label { margin:0; }
.inline-voice-button { flex:0 0 auto; min-height:40px; padding:8px 12px; border:1px solid rgba(233,196,125,.5); border-radius:999px; color:#f3d99f; background:rgba(81,57,23,.3); font-weight:800; }
.inline-voice-button.listening { color:#fff; border-color:#cf765f; background:#a64737; animation:pulse 1s infinite; }
.question-voice-status { display:block; margin:8px 2px 0; color:#aac0cc; line-height:1.45; }
.field-help { display:block; margin:-8px 0 18px; color:#9fb0bb; line-height:1.45; }
.empty-state { display:grid; place-items:center; min-height:180px; padding:28px; border:1px dashed rgba(132,171,193,.4); border-radius:18px; color:#aebdca; text-align:center; background:rgba(4,16,25,.68); }
.empty-state span { color:var(--gold); font-size:32px; }
.empty-state p { max-width:420px; }
.rating-grid button.selected { color:#17130c; border-color:#f0d18e; background:linear-gradient(135deg,#e6bd72,#f5db9d); }
[data-open-case] { cursor:pointer; }
.assistant-title { border-color: rgba(132, 171, 193, .25); }
.tree-root {
  margin: 0 0 18px;
  padding: 15px 16px;
  border: 1px solid rgba(233, 196, 125, .38);
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(114, 78, 28, .3), rgba(4, 16, 25, .7));
}
.tree-root small, .tree-branch > span {
  display: block;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
}
.tree-root p { margin: 8px 0 0; font-family: Georgia, serif; line-height: 1.5; }
.tree-branch { padding: 18px 0; border-top: 1px solid rgba(132, 171, 193, .22); }
.tree-branch > span { margin-bottom: 8px; }
.tree-branch label { margin: 0 0 10px; line-height: 1.45; }
.tree-branch > small { display: block; margin: 10px 0; color: #9fb0bb; line-height: 1.45; }
.tree-branch textarea, .tree-branch input { margin-top: 8px; }
.source-report-heading { margin:28px 0 2px; padding:20px; border:1px solid rgba(233,196,125,.34); border-radius:18px; background:linear-gradient(135deg,rgba(83,58,24,.48),rgba(4,16,25,.86)); }
.source-report-title { margin:7px 0 6px; font-size:22px; }
.source-report-heading p { margin:0; color:#aebdc7; line-height:1.55; }
.source-title em { color:var(--gold); font-size:10px; font-style:normal; font-weight:900; letter-spacing:.12em; }
.synthesis-body h4 { margin:20px 0 7px; color:#ead3a6; font-size:16px; }
.synthesis-body h4 + p { margin-top:0; }
.oracle-thread { padding:14px 16px; border-left:3px solid var(--gold); background:rgba(233,196,125,.08); }
.scenario-example { margin:18px 0; padding:18px; border:1px solid rgba(233,196,125,.36); border-radius:15px; background:linear-gradient(135deg,rgba(75,54,25,.34),rgba(4,16,25,.76)); }
.scenario-example > b { color:var(--gold); font-family:Georgia,serif; font-size:18px; }
.scenario-example p { margin:10px 0; }
.scenario-example small { color:#9fb0bb; }
.option-grid { display:grid; gap:12px; }
.option-grid > div { padding:15px; border:1px solid rgba(132,171,193,.28); border-radius:13px; background:rgba(2,12,20,.55); }
.option-grid b { color:#f1d8a6; }
.option-grid p { margin:8px 0 0; }
.locked-question {
  border-left-color: var(--gold);
  color: #f6ead7;
  background: linear-gradient(90deg, rgba(112, 76, 29, .32), rgba(4, 16, 25, .85));
}
.locked-question span { color: #e8c27a; }
.confirm-row { color: #c3ced5; }
.confirm-row input { accent-color: #d8ad62; }
.voice-panel {
  border: 1px solid rgba(132, 171, 193, .45);
  background: linear-gradient(145deg, rgba(10, 34, 48, .96), rgba(2, 12, 20, .92));
}
.mic-button { color: #19130a; border-color: rgba(255,255,255,.2); background: var(--gold); }
.mic-button { display:grid; place-items:center; font-size:22px; touch-action:manipulation; }
.mic-button.listening { color:#fff4dd; background:#b94f3b; }
.voice-result { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:12px 15px; border:1px solid rgba(233,196,125,.38); border-radius:13px; background:rgba(82,58,24,.24); }
.voice-result span { color:var(--gold); font-size:11px; font-weight:900; letter-spacing:.12em; }
.voice-result b { color:#f7ead4; font-size:18px; letter-spacing:.08em; }
.line-shape i { background: #ecd29f; }
.line-shape.moving i { background: #e7795f; box-shadow: 0 0 9px rgba(231,121,95,.72); }
.sequence-item { display:grid; grid-template-columns:1fr 58px; align-items:center; gap:10px; }
.sequence-item .mini-hex { width:54px; }
.subtle-button { color: #b6d5e6; }

.report-head { padding: 24px 10px 8px; }
.report-actions { flex-wrap:wrap; }
.report-actions button { min-height:42px; }
#exportMobile { color:#17130c; border-color:#f0d18e; background:linear-gradient(135deg,#e6bd72,#f5db9d); }
.report-head h1 { color: #f7ecd9; }
.report-actions button { color: #e3ebef; border-color: var(--line); background: rgba(7, 23, 34, .82); }
.sequence-item span, .eyebrow { color: var(--gold); }
.insight-card p, .source-body { color: #c7d1d7; }
.synthesis-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.synthesis-heading .eyebrow { margin: 0; }
.engine-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(233,196,125,.34);
  border-radius: 999px;
  color: #edd39e;
  background: rgba(151,104,38,.15);
  font-size: 11px;
  font-weight: 800;
}
.synthesis-body { display: grid; gap: 4px; }
.synthesis-body section { padding: 15px 0; border-top: 1px solid rgba(132, 171, 193, .22); }
.synthesis-body h3 { margin-bottom: 8px; font-family: Georgia, serif; }
.synthesis-body p { margin: 0; color: #c7d1d7; line-height: 1.7; }
.synthesis-body ul { margin: 0; padding-left: 20px; color: #c7d1d7; line-height: 1.7; }
.synthesis-body li + li { margin-top: 7px; }
.action-plan li, .source-body, .assistant-title { border-color: rgba(132, 171, 193, .25); }
.action-plan li > span, .source-index { color: #241a0c; background: var(--gold); }
.source-section summary::after { color: var(--gold); }
.source-title small, .source-citation, .action-plan small, .report-disclaimer { color: #9eafba; }
.source-empty { color: #efc2b2; border-color: rgba(221,139,111,.42); background: rgba(74,29,22,.42); }

.mini-timeline span { border-color: rgba(142,175,191,.5); background: #06141f; }
.mini-timeline span.done { border-color: var(--gold); background: var(--gold); }
.mini-timeline i { background: rgba(142,175,191,.32); }
.date-block { border-color: rgba(132,171,193,.28); }
.big-avatar { color: #1c160d; background: linear-gradient(135deg, #e4b970, #f7dda0); }
.invite-card { background: linear-gradient(145deg, rgba(75, 53, 25, .52), rgba(4, 16, 25, .93)); }
.settings-list button { border-color: rgba(132, 171, 193, .25); }

.bottom-nav {
  height: 82px;
  color: #9eb0bf;
  border-top: 1px solid rgba(126, 161, 180, .35);
  background: rgba(2, 11, 18, .96);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .34);
}
.bottom-nav button, .side-nav nav button { color: #9eb0bf; }
.bottom-nav button span { font-size: 24px; }
.bottom-nav button.active { color: #f0d194; text-shadow: 0 0 16px rgba(233,196,125,.45); }
.toast { color: #19130b; border: 1px solid #ffe3a4; background: #e8c37d; }

@media (min-width: 900px) {
  body { background-size: cover; background-attachment: fixed; }
  .app-shell { grid-template-columns: 270px minmax(0, 1fr); }
  .side-nav {
    color: var(--ink);
    border-right: 1px solid rgba(132, 171, 193, .3);
    background:
      linear-gradient(180deg, rgba(2, 10, 17, .92), rgba(2, 10, 17, .99)),
      url("assets/kinh-dich-night.png") 59% top / auto 100% no-repeat;
  }
  .brand { color: #f7ecd8; }
  .brand-seal { width: 54px; height: 54px; font-size: 31px; }
  .side-nav nav button { color: #aebdc8; }
  .side-nav nav button.active { color: #f2d79f; border: 1px solid rgba(233,196,125,.28); background: rgba(233,196,125,.09); }
  .source-note { border-color: rgba(132, 171, 193, .24); }
  .source-note small, .brand small { color: #98aeba; }
  .topbar { padding-left: 42px; padding-right: 42px; }
  .mobile-seal { display: none; }
  .welcome-card { min-height: 520px; display: flex; padding: 48px; background-position: 70% 12%; }
  .welcome-card > div { max-width: 58%; }
  .welcome-card .primary-action { width: min(440px, 100%); }
  .quick-grid button { min-height: 180px; }
}

@media (max-width: 520px) {
  .topbar { padding-inline: 14px; }
  .mobile-seal { width: 43px; height: 43px; font-size: 25px; }
  .top-title b { font-size: 18px; }
  .welcome-card { min-height: 500px; background-position: 63% 10%; }
  .welcome-card p { font-size: 16px; }
  .section-heading h2 { font-size: 25px; }
  .quick-grid button { min-height: 155px; padding: 16px; }
  .quick-grid b { font-size: 17px; }
  .bottom-nav button { font-size: 10px; }
}

.trial-counter {
  flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(233,196,125,.55);
  border-radius: 999px; color: #f3d99f; background: rgba(90,61,20,.32);
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.trial-counter.exhausted { color:#ffd3c5; border-color:rgba(239,170,145,.6); background:rgba(139,52,38,.28); }
.app-dialog {
  width: min(calc(100% - 28px), 480px); max-height: min(90vh, 760px); overflow: auto;
  padding: 28px 22px 24px; color: var(--ink); border: 1px solid rgba(166,199,216,.64);
  border-radius: 24px; background: linear-gradient(145deg,rgba(7,25,37,.98),rgba(2,12,20,.98));
  box-shadow: 0 28px 80px rgba(0,0,0,.72), inset 0 0 34px rgba(129,172,194,.05);
}
.app-dialog::backdrop { background: rgba(0,7,12,.8); backdrop-filter: blur(5px); }
.app-dialog h2 { margin: 0 34px 12px 0; font: 30px/1.2 Georgia,serif; }
.app-dialog p { color:#bdcbd4; line-height:1.55; }
.dialog-close { position:absolute; top:16px; right:16px; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; color:#e8dfd1; background:rgba(8,24,35,.9); font-size:26px; line-height:1; }
.qr-frame { width:min(100%,300px); margin:22px auto; padding:14px; border-radius:20px; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.35); }
.qr-frame img { display:block; width:100%; height:auto; }
.invite-link-label { display:block; margin:0 0 8px; color:#e7d7ba; font-size:13px; font-weight:800; }
.invite-link { width:100%; padding:13px; border:1px solid var(--line); border-radius:12px; color:#dce8ed; background:rgba(1,9,15,.85); font-size:13px; }
.invite-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.invite-actions button,.download-qr { min-height:48px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(233,196,125,.5); border-radius:13px; color:#f1d79d; background:rgba(94,65,25,.27); font-weight:800; text-decoration:none; }
.download-qr { width:100%; margin-top:10px; color:#17130c; border-color:#ffe6a8; background:linear-gradient(110deg,#d5aa63,#f2d594 52%,#c99248); }
.limit-dialog { text-align:center; }
.limit-symbol { display:grid; place-items:center; width:70px; height:70px; margin:0 auto 20px; border:1px solid rgba(233,196,125,.62); border-radius:50%; color:var(--gold); font-size:38px; }
.limit-dialog h2 { margin-right:0; }
.limit-dialog .primary-action { width:100%; margin-top:22px; }
.guest-mode [data-view="account"],.guest-mode #view-account { display:none!important; }
.case-dossier { margin:16px 0; border:1px solid rgba(132,171,193,.34); border-radius:21px; background:linear-gradient(145deg,rgba(9,31,44,.95),rgba(2,12,20,.96)); overflow:hidden; box-shadow:0 16px 36px rgba(0,0,0,.22); }
.case-dossier > summary { display:block; padding:19px; cursor:pointer; list-style:none; }
.case-dossier > summary::-webkit-details-marker { display:none; }
.case-dossier > summary h2 { margin:13px 0 7px; color:#f7ecd9; font:700 22px/1.35 Georgia,serif; }
.case-dossier > summary p { margin:0; color:#aebdc7; line-height:1.5; }
.dossier-toggle { display:flex; align-items:center; justify-content:space-between; margin-top:15px; padding-top:13px; border-top:1px solid rgba(132,171,193,.2); color:#e7c77f; font-size:13px; font-weight:850; }
.dossier-toggle i { font-style:normal; font-size:19px; transition:transform .2s ease; }
.case-dossier[open] .dossier-toggle i { transform:rotate(180deg); }
.case-cast-history { padding:0 14px 16px; border-top:1px solid rgba(132,171,193,.24); }
.case-cast-history h3 { margin:17px 5px 12px; color:#ead3a6; font:700 17px/1.3 Georgia,serif; }
.case-cast-row { width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) 18px; align-items:center; gap:11px; padding:13px 10px; border:0; border-top:1px solid rgba(132,171,193,.18); color:#e7eef1; background:transparent; text-align:left; }
.case-cast-row:first-of-type { border-top:0; }
.case-cast-row:hover,.case-cast-row:focus-visible { border-radius:12px; background:rgba(233,196,125,.08); outline:none; }
.cast-number { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(233,196,125,.5); border-radius:50%; color:#18130c; background:var(--gold); font-weight:900; }
.case-cast-row > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:4px; }
.case-cast-row b { color:#f2e7d5; font-size:14px; line-height:1.35; }
.case-cast-row small { color:#9fb0bb; font-size:12px; line-height:1.4; }
.cast-chevron { color:#e4c27d; font-size:24px; }
.case-cast-row[data-archived="true"] .cast-number { color:#e6ca91; background:rgba(233,196,125,.12); }
.case-journal { padding:21px 19px 19px; border-top:1px solid rgba(233,196,125,.3); background:rgba(1,9,15,.32); }
.case-journal-title { margin-bottom:17px; }
.case-journal-title .eyebrow { margin-bottom:7px; }
.case-journal-title h3 { margin:0 0 7px; color:#f0d6a1; font:700 20px/1.3 Georgia,serif; }
.case-journal-title p { margin:0; color:#aebdc7; line-height:1.55; }
.faq-list { display:grid; gap:20px; }
.faq-group { padding:18px; border:1px solid rgba(132,171,193,.3); border-radius:20px; background:rgba(4,16,25,.78); }
.faq-group h2 { margin:0 0 10px; color:#efd39a; font:700 20px/1.3 Georgia,serif; }
.faq-item { border-top:1px solid rgba(132,171,193,.22); }
.faq-item:first-of-type { border-top:0; }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 2px; color:#f0e6d6; font-size:16px; font-weight:800; line-height:1.45; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary span { color:#e3bd73; font-size:21px; transition:transform .2s ease; }
.faq-item[open] summary span { transform:rotate(45deg); }
.faq-item p { margin:-2px 0 17px; color:#bcc9d1; line-height:1.7; white-space:pre-line; }
.faq-question-card,.faq-editor-card,.faq-inbox-card,.faq-admin-login { margin-top:24px; padding:21px; border:1px solid rgba(233,196,125,.32); border-radius:22px; background:linear-gradient(145deg,rgba(75,53,25,.36),rgba(4,16,25,.94)); }
.faq-question-card h2,.faq-editor-card h2,.faq-inbox-card h2 { color:#f3e5cf; font-family:Georgia,serif; }
.faq-question-card form,.faq-editor-card form { display:grid; gap:15px; }
.faq-question-card label,.faq-editor-card label,.faq-inquiry label { color:#e9dbc3; font-size:14px; font-weight:800; }
.faq-question-card input,.faq-question-card textarea,.faq-admin-login input,.faq-editor-card input,.faq-editor-card textarea,.faq-editor-card select,.faq-inquiry input,.faq-inquiry textarea { width:100%; margin-top:8px; padding:12px 13px; border:1px solid rgba(132,171,193,.38); border-radius:12px; color:#edf2f4; background:rgba(1,9,15,.82); font:inherit; font-weight:400; color-scheme:dark; }
.faq-question-card form > p { margin:0; color:#aebdc7; font-size:13px; line-height:1.55; }
.faq-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.faq-submit-result { margin-top:14px; padding:13px 15px; border-radius:12px; line-height:1.5; }
.faq-submit-result.success { color:#dff4e6; border:1px solid rgba(114,197,144,.45); background:rgba(35,100,59,.32); }
.faq-submit-result.error { color:#ffd6cb; border:1px solid rgba(220,119,91,.45); background:rgba(104,39,25,.38); }
.faq-admin-login p { color:#bdcbd4; line-height:1.55; }
.faq-admin-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0; padding:12px 15px; border:1px solid rgba(132,171,193,.28); border-radius:13px; color:#dce8ed; background:rgba(4,16,25,.72); }
.faq-admin-toolbar button,.faq-editor-actions button:last-child,.faq-admin-row button,.faq-inquiry-actions button { min-height:40px; padding:8px 12px; border:1px solid rgba(233,196,125,.4); border-radius:10px; color:#e9ce98; background:rgba(93,64,25,.24); font-weight:800; }
.faq-editor-grid { display:grid; grid-template-columns:1fr 100px 140px; gap:10px; }
.faq-editor-actions { display:flex; align-items:center; gap:10px; }
.faq-editor-actions .continue-button { width:auto; min-width:160px; margin:0; }
.faq-admin-list,.faq-inbox { display:grid; gap:10px; margin-top:20px; }
.faq-admin-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid rgba(132,171,193,.24); border-radius:14px; background:rgba(2,12,20,.55); }
.faq-admin-row > div:first-child { min-width:0; display:grid; gap:5px; }
.faq-admin-row > div:last-child { display:flex; gap:7px; flex:0 0 auto; }
.faq-admin-row b { color:#f0e6d6; line-height:1.4; }
.faq-admin-row small { color:#91a6b2; }
.faq-admin-status { display:inline-flex; width:max-content; padding:4px 8px; border-radius:99px; color:#f0d39b; background:rgba(157,109,40,.22); font-size:11px; font-weight:900; }
.faq-admin-status.published,.faq-admin-status.answered { color:#caeed7; background:rgba(43,122,72,.28); }
.faq-admin-status.hidden,.faq-admin-status.closed { color:#bdc7cd; background:rgba(108,122,131,.23); }
.faq-email-state { color:#aebdc7; line-height:1.55; }
.faq-inquiry { padding:16px; border:1px solid rgba(132,171,193,.26); border-radius:16px; background:rgba(2,12,20,.6); }
.faq-inquiry header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.faq-inquiry time { color:#8fa3af; font-size:12px; }
.faq-inquiry h3 { margin:13px 0 7px; color:#f2e7d5; line-height:1.45; }
.faq-inquiry > a { display:inline-block; margin-bottom:14px; color:#e6c47d; }
.faq-inquiry > label { display:block; margin-top:12px; }
.faq-inquiry-options { display:grid; grid-template-columns:1fr 180px; align-items:center; gap:10px; margin-top:12px; }
.faq-inquiry-options label { display:flex; align-items:center; gap:8px; color:#c9d3d8; font-size:13px; }
.faq-inquiry-options input[type="checkbox"] { width:18px; height:18px; margin:0; accent-color:#d8ad62; }
.faq-inquiry-options input[type="text"] { margin:0; }
.faq-inquiry-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.verification-intro {
  margin: 0 0 22px; padding: 17px 18px; border-left: 3px solid var(--gold);
  border-radius: 0 15px 15px 0; background: rgba(233,196,125,.08);
}
.verification-intro p { margin:0; color:#c5d0d6; line-height:1.65; }
.verification-intro p + p { margin-top:8px; }
.journal-card {
  margin-bottom:22px; padding:22px; border:1px solid rgba(132,171,193,.34); border-radius:22px;
  background:linear-gradient(145deg,rgba(9,31,44,.95),rgba(2,12,20,.96)); box-shadow:0 18px 42px rgba(0,0,0,.24);
}
.journal-card h2 { margin:15px 0 7px; color:#f7ecd9; font:700 25px/1.32 Georgia,serif; }
.journal-latest { margin:0 0 18px; color:#aebdc7; }
.journal-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:24px; }
.journal-meta > div { min-width:0; padding:12px; border:1px solid rgba(132,171,193,.22); border-radius:13px; background:rgba(2,12,20,.55); }
.journal-meta small,.journal-meta b { display:block; }
.journal-meta small { margin-bottom:5px; color:#91a6b2; font-size:11px; }
.journal-meta b { color:#ead3a6; font-size:14px; overflow-wrap:anywhere; }
.journal-timeline { margin:0 0 20px; }
.journal-timeline h3 { margin:0 0 14px; color:#f0d6a1; font:700 18px/1.3 Georgia,serif; }
.journal-timeline .empty-state { min-height:116px; }
.journal-entry { position:relative; margin-left:7px; padding:0 0 20px 22px; border-left:1px solid rgba(233,196,125,.35); }
.journal-entry::before { content:""; position:absolute; top:3px; left:-5px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(233,196,125,.12); }
.journal-entry:last-child { padding-bottom:5px; }
.journal-entry time { display:block; margin-bottom:6px; color:#e5c681; font-size:12px; font-weight:850; letter-spacing:.06em; }
.journal-entry p { margin:0; color:#d0d9de; line-height:1.65; white-space:pre-line; }
.journal-entry small { display:block; margin-top:6px; color:#8fa3af; }
.journal-form { display:grid; grid-template-columns:180px minmax(0,1fr); gap:12px; padding:17px; border:1px solid rgba(233,196,125,.28); border-radius:17px; background:rgba(99,70,29,.16); }
.journal-form label { color:#e9dbc3; font-size:13px; font-weight:800; }
.journal-form input,.journal-form textarea { width:100%; margin-top:8px; padding:12px 13px; border:1px solid rgba(132,171,193,.38); border-radius:12px; color:#edf2f4; background:rgba(1,9,15,.82); font:inherit; font-weight:400; color-scheme:dark; }
.journal-form textarea { min-height:122px; resize:vertical; line-height:1.55; }
.journal-form .continue-button { grid-column:2; justify-self:start; min-height:46px; padding:10px 18px; }
.journal-continue { width:100%; min-height:54px; display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:12px 18px; border:1px solid #f0d18e; border-radius:15px; color:#18130c; background:linear-gradient(110deg,#d5aa63,#f2d594 52%,#c99248); font-weight:900; }
.journal-continue span { font-size:23px; }
.journal-continue:disabled { cursor:wait; opacity:.68; }
@media(max-width:460px){
  .topbar .trial-counter { max-width:82px; overflow:hidden; text-overflow:ellipsis; }
  .topbar:has(.trial-counter:not([hidden])) .avatar { display:none; }
  .app-dialog { padding:24px 18px 20px; }
  .journal-card { padding:17px 14px; border-radius:18px; }
  .journal-card h2 { font-size:21px; }
  .journal-meta { grid-template-columns:1fr 1fr; }
  .journal-form { grid-template-columns:1fr; padding:14px; }
  .journal-form .continue-button { grid-column:1; width:100%; }
  .case-dossier > summary { padding:16px; }
  .case-cast-history { padding-inline:8px; }
  .case-cast-row { grid-template-columns:36px minmax(0,1fr) 14px; gap:9px; padding-inline:7px; }
  .case-journal { padding:19px 12px 14px; }
  .faq-group,.faq-question-card,.faq-editor-card,.faq-inbox-card,.faq-admin-login { padding:16px 14px; }
  .faq-editor-grid,.faq-inquiry-options { grid-template-columns:1fr; }
  .faq-editor-actions,.faq-admin-row { align-items:stretch; flex-direction:column; }
  .faq-editor-actions .continue-button { width:100%; }
  .faq-admin-row > div:last-child { width:100%; }
  .faq-admin-row button { flex:1; }
}

@media print {
  @page { size: A4; margin: 16mm; }
  :root { color-scheme: light; --ink: #1e2530; --muted: #56616d; --line: #cbd2d8; --surface: #fff; --paper: #fff; }
  body, body::before { color: #1e2530 !important; background: #fff !important; }
  .side-nav, .topbar, .bottom-nav, .toast, .report-actions, #saveReport { display: none !important; }
  .app-shell, main { display: block !important; width: 100% !important; max-width: none !important; padding: 0 !important; }
  .view { display: none !important; padding: 0 !important; }
  #view-report { display: block !important; }
  h1, h2, h3, .report-head h1 { color: #15202a !important; text-shadow: none !important; }
  p, small, li, .source-body, .synthesis-body p, .synthesis-body ul { color: #35414c !important; }
  .report-head { padding-top: 0; }
  .report-head::before { content: "KINH DỊCH ỨNG DỤNG"; display: block; margin-bottom: 8px; color: #8a6428; font-family: Georgia, serif; font-size: 13px; letter-spacing: .18em; }
  .report-sequence { grid-template-columns: repeat(2, 1fr); }
  .sequence-item, .source-section, .insight-card, .action-plan {
    color: #1e2530 !important;
    border: 1px solid #cbd2d8 !important;
    background: #fff !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .source-section { break-inside: auto; }
  .source-section:not([open]) .source-body { display: block !important; }
  .source-section summary::after { display: none; }
  .source-body { white-space: pre-line; }
  .topic-pill, .engine-badge { color: #6c4c18 !important; border-color: #c6a66d !important; background: #fff8e8 !important; }
  .eyebrow, .sequence-item span, .source-citation { color: #8a6428 !important; }
  .action-plan li > span, .source-index { color: #fff !important; background: #8a6428 !important; }
  .report-disclaimer::after { content: "\A Created by Vu Ninh"; white-space: pre; display: block; margin-top: 8px; font-family: Georgia, serif; color: #8a6428; }
}