/* Visual language follows ricacorp-poster.vercel.app: light grey canvas, Ricacorp navy, borderless white cards. */
:root {
  --bg:#f5f5f5; --fg:#1a1a1a; --muted:#666; --card:#fff; --navy:#003478; --navy-soft:#e8eef7;
  --line:rgba(0,52,120,.3); --line-soft:#e5e7eb; --err:#b42318; --radius:16px;
}
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 -apple-system,system-ui,"Segoe UI",Roboto,"PingFang HK","Noto Sans HK",sans-serif; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }

nav { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding:14px max(16px, calc((100% - 848px) / 2)); background:var(--card); border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:1; }
nav strong { margin-right:auto; color:var(--navy); font-size:18px; }
nav a { color:var(--navy); text-decoration:none; font-weight:700; padding:4px 0; border-bottom:2px solid transparent; }
nav a[aria-current] { border-bottom-color:var(--navy); }
.credit { font-size:14px; font-weight:700; color:var(--navy); padding:4px 12px; border-radius:999px; background:var(--navy-soft); white-space:nowrap; }

main { max-width:880px; margin:0 auto; padding:24px 16px 48px; display:flex; flex-direction:column; gap:24px; }
.lead { margin:0; color:var(--muted); }
h2 { margin:0 0 16px; font-size:18px; }

.steps { list-style:none; margin:0; padding:20px 12px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--card); border-radius:var(--radius); }
.steps li { position:relative; min-width:0; text-align:center; font-size:14px; color:var(--muted); }
.steps li:not(:last-child)::before { content:""; position:absolute; top:17px; left:calc(50% + 24px); width:calc(100% - 48px); height:2px; background:var(--line-soft); }
.steps b { display:flex; flex-direction:column; align-items:center; gap:8px; }
.steps .step-number { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:var(--bg); }
.steps .step-description { display:block; margin-top:4px; font-size:13px; }
.steps li[aria-current] { color:var(--navy); }
.steps li[aria-current] .step-number { border:2px solid var(--navy); background:var(--navy-soft); box-shadow:0 0 0 4px var(--navy-soft); }
.steps li[aria-current]::after { content:"目前步驟"; color:var(--navy); font-weight:700; font-size:13px; }
.steps li:has(~ [aria-current]) { color:var(--navy); }
.steps li:has(~ [aria-current])::before { background:var(--navy); }
.steps li:has(~ [aria-current]) .step-number { position:relative; color:transparent; background:var(--navy); border-color:var(--navy); }
.steps li:has(~ [aria-current]) .step-number::after { content:""; position:absolute; width:7px; height:12px; border:solid var(--card); border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); }

.card { background:var(--card); border-radius:var(--radius); padding:20px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.generation-settings { margin-top:20px; }
label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700; }
label.wide { margin-top:16px; }
input, select, textarea { font:inherit; font-weight:400; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--fg); width:100%; }
input:focus, select:focus { outline:2px solid var(--navy); outline-offset:-1px; }

button { font:inherit; cursor:pointer; border-radius:8px; }
button.primary { margin-top:20px; padding:12px 20px; background:var(--navy); color:#fff; border:0; font-weight:700; }
button.secondary { padding:8px 16px; background:#fff; color:var(--navy); border:1px solid var(--navy); font-weight:700; }
button:disabled { opacity:.5; cursor:not-allowed; }

.badges { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; font-size:14px; }
.badges button { padding:4px 12px; border-radius:999px; background:var(--navy-soft); color:var(--navy); border:1px solid transparent; }
.badges button:hover { border-color:var(--navy); }

.result { display:flex; flex-direction:row; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--line-soft); border-radius:12px; margin-top:10px; font-weight:400; font-size:16px; cursor:pointer; }
.result:has(input:checked) { border:2px solid var(--navy); padding:13px; }
.result input { width:auto; margin-top:5px; accent-color:var(--navy); }
.result b { color:var(--navy); }
.result small { color:var(--muted); display:block; font-size:14px; }
.result a { color:var(--navy); }
.score { display:flex; align-items:center; gap:8px; margin:6px 0 2px; font-size:14px; }
.score-track { flex:0 1 160px; height:8px; border-radius:999px; background:var(--navy-soft); overflow:hidden; }
.score-track span { display:block; height:100%; background:var(--navy); border-radius:inherit; }
.badge { font-style:normal; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--err); color:#fff; vertical-align:middle; }
.score b { color:var(--navy); font-variant-numeric:tabular-nums; }

.error { color:var(--err); }
.muted { color:var(--muted); }
.loading::before { content:""; display:inline-block; width:1em; height:1em; margin-right:8px; vertical-align:-.15em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:loading-spin .8s linear infinite; }
@keyframes loading-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .loading::before { animation:none; } }
pre { white-space:pre-wrap; word-break:break-word; background:var(--bg); padding:14px; border-radius:8px; margin:6px 0; font:15px/1.7 inherit; font-family:inherit; }
.row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.row h2 { margin:0; }

#output .output-header { gap:16px; margin-bottom:20px; }
#output h2 { color:var(--navy); }
#content, #analysis textarea { margin:0; padding:20px; font:16px/1.85 -apple-system,system-ui,"Segoe UI",Roboto,"PingFang HK","Noto Sans HK",sans-serif; overflow-wrap:anywhere; }
#share { anchor-name:--share; }
#share, #copy { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; min-height:44px; font-size:14px; }
#share:hover, #copy:hover { background:var(--navy-soft); }
#output svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
#share:focus-visible, 
details { border-top:1px solid var(--line-soft); padding:12px 0; }
details:first-child { border-top:0; }
summary { cursor:pointer; }
summary b { color:var(--navy); }
.pager { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; }
.pager button { white-space:nowrap; }
.pager span { font-size:14px; text-align:center; }

@media (max-width:600px) {
  main { gap:16px; padding-top:16px; }
  .steps { padding:16px 4px; }
  .steps .step-description, .steps li[aria-current]::after { display:none; }
  #output .output-header { margin-bottom:16px; }
  #content, #analysis textarea { padding:16px; }
  .grid { grid-template-columns:1fr 1fr; gap:12px; }
  .grid label:first-child { grid-column:1 / -1; }
  nav strong { width:100%; }
}
.credit.credit-error { color:var(--err); background:#fdecea; white-space:normal; }
button.primary { display:inline-flex; align-items:center; gap:10px; }
.cost:empty { display:none; }
.cost { font-size:13px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.18); }
#content, #analysis textarea { background:var(--bg); border-radius:8px; }
.md > :first-child { margin-top:0; }
.md > :last-child { margin-bottom:0; }
.md p, .md ul { margin:0 0 12px; }
.md ul { padding-left:1.4em; }
.md h3 { margin:16px 0 8px; font-size:16px; color:var(--navy); }
.md a { color:var(--navy); word-break:break-all; }
.actions { display:flex; gap:8px; flex-shrink:0; }
#share:focus-visible, #copy:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
#shareMsg { margin:0 0 12px; padding:10px 12px; border-radius:8px; background:var(--navy-soft); color:var(--navy); font-size:14px; font-weight:700; }
#shareMsg:empty { display:none; }
.tip-wrap { position:relative; display:inline-block; margin-top:20px; }
.tip-wrap button.primary { margin-top:0; }
.tip { position:absolute; left:0; bottom:calc(100% + 8px); width:max-content; max-width:min(320px, calc(100vw - 32px)); padding:8px 12px; border-radius:8px; background:var(--fg); color:#fff; font-size:13px; line-height:1.6; white-space:pre-line; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s; z-index:2; }
.tip:empty { display:none; }
.tip::after { content:""; position:absolute; left:20px; top:100%; border:6px solid transparent; border-top-color:var(--fg); }
.tip-wrap:hover .tip, .tip-wrap:focus-within .tip { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .tip { transition:none; } }
#shareMenu { position-anchor:--share; inset:auto; top:anchor(bottom); right:anchor(right); margin:8px 0 0; border:0; border-radius:var(--radius); padding:8px; width:200px; max-width:calc(100vw - 32px); background:var(--card); color:var(--fg); box-shadow:0 8px 28px rgba(0,52,120,.16); }
#shareMenu button { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:10px 12px; background:var(--card); color:var(--fg); border:0; text-align:left; font-size:14px; font-weight:700; }
#shareMenu button:hover { background:var(--navy-soft); color:var(--navy); }
#shareMenu button:focus-visible { outline:2px solid var(--navy); outline-offset:-2px; }
#shareMenu svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--navy); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#confirmSpend { border:0; border-radius:var(--radius); padding:24px; width:min(360px, calc(100vw - 32px)); color:var(--fg); box-shadow:0 16px 48px rgba(0,0,0,.2); }
#confirmSpend::backdrop { background:rgba(26,26,26,.45); }
#confirmSpend h2 { margin:0 0 16px; }
#confirmSpend dl { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; }
#confirmSpend dt { color:var(--muted); }
#confirmSpend dd { margin:0; font-weight:700; text-align:right; }
#confirmSpend .error { margin:12px 0 0; font-weight:700; }
#confirmSpend .error:empty { display:none; }
.dialog-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
.dialog-actions button { margin:0; min-height:44px; min-width:88px; }
textarea { resize:vertical; line-height:1.6; }

.table-wrap { overflow-x:auto; margin:0 -4px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; vertical-align:top; padding:10px 8px; border-bottom:1px solid var(--line-soft); }
th { color:var(--muted); font-weight:600; white-space:nowrap; }
td:first-child { white-space:nowrap; }
td:last-child { white-space:nowrap; }
td details + details { margin-top:6px; }
td summary { cursor:pointer; color:var(--navy); }
.pre { white-space:pre-wrap; margin-top:6px; padding:8px; background:var(--bg); border-radius:8px; }
.tag { font-size:12px; padding:1px 6px; border-radius:999px; background:var(--navy-soft); color:var(--navy); white-space:nowrap; }
#back, table a { color:var(--navy); }
#detail { display:flex; flex-direction:column; gap:24px; overflow-wrap:anywhere; }
.history-meta { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 20px; margin:0; }
.history-meta dt { color:var(--muted); }
.history-meta dd { margin:0; }
.history-property + .history-property { border-top:1px solid var(--line-soft); padding-top:12px; }
.history-property p { margin:4px 0 12px; }
.history-filter { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:20px; }
.history-filter label { flex:1 1 240px; }
.history-filter button { margin:0; min-height:48px; }
#analysis textarea { field-sizing:content; margin-bottom:8px; resize:none; }
#analysis h3 { margin:16px 0 8px; }