/* Shared outer frame; reading, forms and charts keep their own inner measure. */
:root {
    --site-width: 80rem;
    --site-gutter: 1rem;
    --site-header-height: 3.5rem;
    --site-panel: #272727;
    --site-gold: #c9a063;
}
.site-page { min-width: 0; }
.site-page *, .site-page *::before, .site-page *::after { box-sizing: border-box; }
.site-shell {
    width: 100%;
    max-width: var(--site-width) !important;
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--site-gutter) !important;
}
.site-shell > * { min-width: 0; }
body.site-page:has(> .site-desktop-nav) { width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
.site-page :where(fieldset, input, select, textarea) { min-width: 0; max-width: 100%; }
.site-page :where(p, h1, h2, h3, label, button, summary) { overflow-wrap: anywhere; }
.site-page :where(.flex-1, .flex-grow) { min-width: 0; }
.site-page :where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--site-gold); outline-offset: 3px; }
.site-desktop-nav {
    display: none;
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    padding-top: env(safe-area-inset-top);
    background: rgba(39, 39, 39, .97);
    border-bottom: 1px solid rgba(201, 160, 99, .24);
    backdrop-filter: blur(12px);
}
.site-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--site-header-height); }
.site-brand { display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0; color: var(--site-gold); font-size: 1.25rem; font-weight: 700; letter-spacing: .14em; text-decoration: none; white-space: nowrap; }
.site-nav-links { display: flex; align-items: center; gap: 1.5rem; }
.site-nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: #b7bbc1; font-size: .9375rem; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.site-nav-links a:hover, .site-nav-links a[aria-current="page"] { color: var(--site-gold); border-bottom-color: var(--site-gold); }
.site-mobile-nav { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: .35rem max(.25rem, env(safe-area-inset-left)) calc(.35rem + env(safe-area-inset-bottom)); background: rgba(39,39,39,.98); border-top: 1px solid #444; }
.site-mobile-nav a { display: flex; min-width: 0; min-height: 3.3rem; gap: .3rem; align-items: center; justify-content: center; flex-direction: column; color: #afb4bd; font-size: .75rem; text-decoration: none; border-top: 2px solid transparent; }
.site-mobile-nav i { font-size: 1.2rem; }
.site-mobile-nav a[aria-current="page"] { color: var(--site-gold); border-top-color: var(--site-gold); }
.site-skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 200; padding: .75rem 1rem; background: var(--site-gold); color: #171717; border-radius: .4rem; }
.site-skip-link:focus { top: .5rem; }
.site-desktop-nav ~ main.site-shell {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-gutter: stable;
    padding-top: calc(var(--site-header-height) + 1.5rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-top: calc(var(--site-header-height) + 1rem);
}
.site-page > main.site-shell::-webkit-scrollbar { display: block; width: 8px; }
.site-page > main.site-shell::-webkit-scrollbar-thumb { background: #565656; border: 2px solid #1a1a1a; border-radius: 8px; }
.site-page > main.site-shell::-webkit-scrollbar-track { background: transparent; }
.site-page > header > div:first-child { max-width: var(--site-width); margin-inline: auto; padding-inline: var(--site-gutter); }
.site-page--profile .tab-btn { min-width: 0; min-height: 3.5rem; flex-wrap: wrap; padding-inline: .3rem; }
.site-page--profile .tab-btn i { flex-shrink: 0; }
.site-page--tool main.site-shell > * { width: 100%; max-width: min(100%, 48rem); margin-inline: auto; }
.site-page--tool main.site-shell > script { display: none; }
.site-page--tool > header { border-radius: 0; }
.site-page--auth {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto !important;
    padding-block: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-bottom));
}
.site-page--auth > main { flex-shrink: 0; }
.site-page--status { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; font-family: system-ui, "Microsoft JhengHei", sans-serif; }
.site-page--status > main { width: calc(100% - var(--site-gutter) * 2); max-width: 34rem; margin: 2rem auto; padding: clamp(1rem, 5vw, 2rem); overflow-wrap: anywhere; }
.site-page--training .shell { width: 100%; max-width: var(--site-width); padding-inline: var(--site-gutter); }
.site-page--training .header-inner { min-width: 0; }
.site-page--consult .app-container { width: 100%; max-width: var(--site-width); margin-inline: auto; }
.site-page--legal .site-shell { padding-top: calc(var(--site-header-height) + 1.5rem + env(safe-area-inset-top)); }
.site-page--legal main.site-shell > * { max-width: 60rem; margin-inline: auto; }
.site-page.ops { background: #1a1a1a; color: #e5e5e5; font-family: "Noto Serif TC", "Microsoft JhengHei", serif; }
.site-page.ops .card { background: #252525; border-color: rgba(201,160,99,.3); }
.site-page .swal2-popup { max-width: calc(100vw - 2rem); }
@media (min-width: 40rem) { :root { --site-gutter: 1.5rem; } }
@media (min-width: 48rem) {
    .site-desktop-nav { display: block; }
    .site-mobile-nav, .site-page > header.md\:hidden { display: none !important; }
    .site-desktop-nav ~ main.site-shell { padding-bottom: 3rem !important; }
}
@media (max-width: 25rem) {
    .site-page--profile main > section.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-page--profile main > section:first-of-type { padding: 1rem; }
    .site-page--training .header-links { gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .site-page { scroll-behavior: auto; } }
.pwa-install-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1.5rem; padding: 1rem; border: 1px solid rgba(201,160,99,.25); border-radius: 1rem; background: #242424; }
.pwa-install-card h2 { font-size: 1rem; font-weight: 700; color: #e5c38e; }
.pwa-install-card p { margin-top: .3rem; font-size: .875rem; color: #b7bbc1; line-height: 1.6; }
.pwa-install-card button, .pwa-install-dialog button { min-height: 44px; padding: .6rem 1rem; border-radius: .65rem; background: #c9a063; color: #171717; font-weight: 700; }
.pwa-install-card[hidden], .pwa-connection-status[hidden] { display: none; }
.pwa-install-dialog { width: calc(100% - 2rem); max-width: 28rem; max-height: calc(100dvh - 3rem); margin: auto; padding: 1.25rem; overflow: auto; border: 1px solid #77603e; border-radius: 1.15rem; background: #272727; color: #ededed; }
.pwa-install-dialog::backdrop { background: rgba(0,0,0,.65); }
.pwa-install-dialog h2 { font-size: 1.2rem; font-weight: 700; color: #e5c38e; }
.pwa-install-dialog p { margin-block: 1rem; line-height: 1.7; }
.pwa-install-dialog form { text-align: right; }
.pwa-connection-status { position: fixed; z-index: 90; left: 50%; bottom: calc(5rem + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); padding: .75rem 1rem; border: 1px solid #77603e; border-radius: .8rem; background: #292722; color: #f0e7d7; font: 14px/1.6 system-ui,sans-serif; box-shadow: 0 4px 20px #0005; pointer-events: none; }
@media (min-width: 48rem) { .pwa-connection-status { bottom: 1rem; } }
@media (max-width: 47.999rem) { .pwa-keyboard-open .site-mobile-nav { display: none; } .pwa-keyboard-open .pwa-connection-status { bottom: 1rem; } }