/* Shared by the in-app guide and its direct-link fallback. */
:root { --guide-bg:#f6f7fb; --guide-card:#fff; --guide-ink:#1a1d32; --guide-muted:#4e536a; --guide-line:#d8dce7; --guide-link:#302dc8; }
html[data-theme="dark"] { --guide-bg:#111625; --guide-card:#1b2233; --guide-ink:#f2f4fa; --guide-muted:#c0c7d6; --guide-line:#3c465c; --guide-link:#adb5ff; }
body:has(> .expense-guide) { margin:0; background:var(--guide-bg); color:var(--guide-ink); font-family:'Helvetica Neue',Arial,sans-serif; }
.expense-guide { box-sizing:border-box; width:100%; max-width:1060px; margin:auto; padding:28px 22px 60px; color:var(--guide-ink); line-height:1.6; font-size:16px; }
.expense-guide *, .guide-standalone-back { box-sizing:border-box; }
.expense-guide a { color:var(--guide-link); text-underline-offset:3px; }
.expense-guide :is(a,video,summary):focus-visible,.guide-standalone-back:focus-visible { outline:3px solid #5768ff; outline-offset:4px; }
.expense-guide header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:22px 0; }
.expense-guide header img { width:92px; height:auto; }
html[data-theme="dark"] .expense-guide header img { background:#fff; padding:5px; border-radius:6px; }
.expense-guide :is(h1,h2,h3) { font-family:Georgia,serif; font-weight:400; line-height:1.25; color:var(--guide-ink); }
.expense-guide h1 { font-size:clamp(28px,5vw,40px); margin:0 0 14px; }
.expense-guide h2 { font-size:clamp(24px,4vw,30px); margin:6px 0 12px; }
.expense-guide h3 { font-size:23px; margin:24px 0 14px; }
.expense-guide h4 { font-size:17px; line-height:1.4; margin:0 0 6px; }
.expense-guide .intro { max-width:790px; }
.expense-guide nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:26px 0 34px; }
.expense-guide nav a { display:block; text-decoration:none; padding:18px; border:1px solid var(--guide-line); border-radius:12px; background:var(--guide-card); }
.expense-guide nav strong { display:block; font-size:17px; }
.expense-guide nav span { display:block; color:var(--guide-muted); font-size:14px; margin-top:6px; }
.expense-guide :is(.tutorial,.reference) { background:var(--guide-card); border:1px solid var(--guide-line); border-radius:14px; padding:28px; margin:28px 0; scroll-margin-top:20px; }
.expense-guide .eyebrow { font-size:14px; color:var(--guide-muted); margin:0; }
.expense-guide .player { background:#1a1d32; border-radius:12px; overflow:hidden; margin-top:22px; }
.expense-guide video { display:block; width:100%; aspect-ratio:16/9; }
.expense-guide .media-links { display:flex; flex-wrap:wrap; gap:10px 24px; font-size:15px; }
.expense-guide .written { scroll-margin-top:20px; }
.expense-guide .steps { padding-left:28px; margin:0; }
.expense-guide .steps li { padding-left:8px; margin:22px 0; }
.expense-guide .steps li::marker { color:var(--guide-link); font-weight:600; }
.expense-guide .steps p { margin:0; }
.expense-guide .tree,.expense-guide .tree ul { list-style:none; margin:0; padding-left:22px; }
.expense-guide .tree { padding:16px 0; background:transparent; border:0; max-height:none; color:var(--guide-ink); }
.expense-guide .tree li { padding:5px 0; overflow-wrap:anywhere; }
.expense-guide .tree ul { border-left:1px solid var(--guide-line); margin:6px 0 6px 8px; }
.expense-guide code { font-family:ui-monospace,Consolas,monospace; font-size:.93em; overflow-wrap:anywhere; }
.expense-guide .tree .hint { display:block; color:var(--guide-muted); font-size:14px; margin:0; padding:0; border:0; background:none; box-shadow:none; }
.expense-guide .table-wrap { overflow-x:auto; }
.expense-guide table { border-collapse:collapse; width:100%; font-size:15px; }
.expense-guide :is(th,td) { border:1px solid var(--guide-line); padding:12px; text-align:left; vertical-align:top; }
.expense-guide th { background:var(--guide-bg); }
.expense-guide details { margin:16px 0; padding:16px 0; border-bottom:1px solid var(--guide-line); }
.expense-guide summary { cursor:pointer; font-weight:600; }
.expense-guide .footer-note { font-size:14px; color:var(--guide-muted); }
.guide-standalone-back { position:sticky; top:12px; z-index:5; display:table; margin:12px auto 0 max(16px,calc((100vw - 1016px)/2)); padding:10px 16px; min-height:44px; border:1px solid var(--guide-line); border-radius:24px; background:var(--guide-card); color:var(--guide-link); font:600 15px/1.5 Arial,sans-serif; text-decoration:none; box-shadow:0 3px 16px #0002; }
body:has(> .expense-guide) .expense-guide :is(.tutorial,.reference,.written) { scroll-margin-top:84px; }
@media(max-width:650px) {
 .expense-guide { padding:16px 14px 40px; }
 .expense-guide nav { grid-template-columns:1fr; gap:10px; }
 .expense-guide nav a { padding:14px; }
 .expense-guide :is(.tutorial,.reference) { padding:20px 14px; }
 .expense-guide .steps { padding-left:22px; }
 .expense-guide .steps li { padding-left:3px; }
 .expense-guide .tree,.expense-guide .tree ul { padding-left:12px; }
 .expense-guide :is(th,td) { padding:9px; }
}