/* Website shell only. The App login keeps its compact, existing layout. */
html:not([data-app-login]) {
  --page: #f3f5f7;
  --surface-soft: #edf1f5;
  --text: #1d2d3e;
  --muted: #596a7b;
  --line: #dce3e9;
  --line-strong: #b8c5d1;
  --accent-text: #285477;
  --portal-width: 1200px;
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"]:not([data-app-login]) {
  --page: #111c29;
  --surface: #192838;
  --surface-soft: #213244;
  --surface-strong: #293d51;
  --text: #e8eef4;
  --muted: #b0bfcd;
  --line: #354657;
  --line-strong: #667b8f;
  --accent-text: #b2cfe9;
  --accent: #c1b18a;
}
.auth-intro { display: none; }
html:not([data-app-login]) body { min-height: 100dvh; }
html:not([data-app-login]) :is(h1, h2, h3) { text-wrap: balance; }
html:not([data-app-login]) .header-inner { width: min(var(--portal-width), calc(100% - 4rem)); min-height: 76px; }
html:not([data-app-login]) .site-header { background: #10283f; backdrop-filter: none; border-bottom: 1px solid #2f455a; }
html:not([data-app-login]) .brand-division { font-weight: 500; letter-spacing: .04em; font-size: .8rem; }
html:not([data-app-login]) .utility-button { font-weight: 600; }
html:not([data-app-login]) .site-footer { width: min(var(--portal-width), calc(100% - 4rem)); margin: auto auto 0; padding: 1.5rem 0; min-height: 72px; color: var(--muted); background: transparent; border-top: 1px solid var(--line); font-size: .75rem; }
html:not([data-app-login]) .site-footer strong { color: var(--muted); font-weight: 500; }
html:not([data-app-login]) .auth-shell { width: min(1080px, calc(100% - 4rem)); min-height: calc(100dvh - 150px); margin: auto; padding: 4rem 0; grid-template-columns: 1fr 440px; align-items: center; gap: clamp(2rem, 7vw, 7rem); }
html:not([data-app-login]) .auth-intro { display: block; }
.portal-kicker { display: block; margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--accent-text); }
.auth-intro h2 { margin: 1.25rem 0; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.5; font-weight: 600; letter-spacing: -.03em; }
.auth-intro > p:not(.portal-kicker) { color: var(--muted); font-size: 1rem; line-height: 1.9; }
.auth-highlights { display: grid; gap: 1rem; padding: 1.8rem 0 0; margin: 1.8rem 0; list-style: none; border-top: 1px solid var(--line); }
.auth-highlights li { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .875rem; font-weight: 600; }
.auth-highlights span { color: var(--muted); font-weight: 400; }
.auth-intro-note { color: var(--muted); font-size: .75rem; }
html:not([data-app-login]) .auth-card { border-radius: 18px; padding: 2rem; border: 1px solid var(--line); box-shadow: 0 16px 48px rgb(25 49 74 / 6%); }
html:not([data-app-login]) .auth-heading h1 { font-size: 1.4rem; line-height: 1.5; font-weight: 600; }
.workspace-nav { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 40; background: var(--page); width: min(var(--portal-width), calc(100% - 4rem)); margin: 0 auto; display: flex; align-items: center; gap: 1.8rem; border-bottom: 1px solid var(--line); }
.workspace-nav a { min-height: 62px; display: inline-flex; align-items: center; position: relative; text-decoration: none; font-size: .9rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
.workspace-nav a[aria-current="page"] { color: var(--text); font-weight: 650; }
.workspace-nav a[aria-current="page"]::after { position: absolute; content: ""; height: 3px; bottom: -1px; inset-inline: 0; border-radius: 3px 3px 0 0; background: var(--accent-text); }
.workspace-nav a:hover { color: var(--accent-text); }
html:not([data-app-login]) .workspace-hero { width: min(var(--portal-width), calc(100% - 4rem)); margin: 0 auto; padding: 2.75rem 0 2.5rem; border: 0; color: var(--text); background: transparent; }
html:not([data-app-login]) .workspace-hero h1 { margin: .65rem 0 0; font-family: inherit; font-size: clamp(1.75rem, 2.7vw, 2.25rem); font-weight: 600; line-height: 1.5; letter-spacing: -.025em; }
html:not([data-app-login]) .eyebrow { color: var(--accent-text); font-weight: 600; font-size: .75rem; letter-spacing: .06em; }
html:not([data-app-login]) .workspace-summary { margin-top: .6rem; color: var(--muted); font-size: .9375rem; }
.portal-insights, html:not([data-app-login]) .workspace-tools, .workspace-section { width: min(var(--portal-width), calc(100% - 4rem)); margin-inline: auto; }
.portal-section-heading { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.portal-section-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.portal-section-heading p { margin: 0; color: var(--muted); font-size: .8125rem; }
.insight-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.25rem; }
.insight-link { min-height: 230px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.75rem 2rem; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; background: var(--surface); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.insight-link--news { background: linear-gradient(110deg, var(--surface), var(--surface-soft)); }
.insight-copy { position: relative; z-index: 1; }
.insight-copy h3 { font-size: 1.65rem; font-weight: 600; margin: .6rem 0; letter-spacing: -.02em; }
.insight-copy p { font-size: .875rem; line-height: 1.8; color: var(--muted); margin: 0; }
.insight-action { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.5rem; min-height: 30px; color: var(--accent-text); font-size: .875rem; font-weight: 600; }
.insight-action span { font-size: 1.25rem; transition: transform 200ms ease; }
.insight-art { width: clamp(70px, 9vw, 125px); flex-shrink: 0; stroke: var(--accent-text); stroke-width: 1.25; opacity: .5; transform: rotate(-5deg); }
.insight-link--coop .insight-art { transform: none; }
.insight-link:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgb(25 49 74 / 6%); transform: translateY(-2px); }
.insight-link:hover .insight-action span { transform: translate(2px, -2px); }
.insight-link:active { transform: translateY(0); }
html:not([data-app-login]) .workspace-tools { padding-top: 2.5rem; }
html:not([data-app-login]) .workspace-heading { align-items: center; gap: 1rem; margin-bottom: 1rem; }
html:not([data-app-login]) .workspace-heading h2 { font-family: inherit; font-size: 1rem; font-weight: 600; }
.workspace-tools-description { margin: .25rem 0 0; color: var(--muted); font-size: .8125rem; }
html:not([data-app-login]) .workspace-heading .utility-button { background: transparent; border: 0; color: var(--muted); font-size: .8125rem; }
html:not([data-app-login]) .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
html:not([data-app-login]) .tool-card { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
html:not([data-app-login]) .tool-card::before { display: none; }
html:not([data-app-login]) .tool-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 6px 18px rgb(25 49 74 / 5%); }
html:not([data-app-login]) .tool-card-link { min-height: 138px; padding: 1.25rem 1.5rem; }
html:not([data-app-login]) .tool-icon { width: 42px; height: 42px; color: var(--accent-text); background: var(--surface-soft); border-radius: 10px; }
html:not([data-app-login]) .tool-icon svg { width: 25px; height: 25px; stroke-width: 1.7; }
html:not([data-app-login]) .tool-card h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
html:not([data-app-login]) .tool-purpose { font-size: .8125rem; margin-top: .25rem; line-height: 1.65; }
html:not([data-app-login]) .tool-link { margin-left: 3.625rem; font-size: .75rem; font-weight: 600; min-height: 35px; padding-top: .7rem; }
html:not([data-app-login]) .tool-link svg { width: 16px; height: 16px; }
.tools-empty { padding: 1.25rem; margin: 0; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 12px; }
.workspace-section { padding-top: 1.25rem; scroll-margin-top: 144px; }
[data-workspace-home] h1 { scroll-margin-top: 160px; }
.workspace-section:focus, [data-workspace-home] h1:focus { outline: none; }
.workspace-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 1rem; color: var(--muted); font-size: .8125rem; text-decoration: none; }
.workspace-back:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; }
.workspace-section .financial-news { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.workspace-section .financial-news__heading { font-size: clamp(1.75rem, 2.7vw, 2.25rem); font-weight: 600; letter-spacing: -.025em; }
.workspace-section .financial-news__eyebrow { display: none; }
.workspace-section .financial-news__description { font-size: .9375rem; line-height: 1.8; }
.workspace-section .financial-news__controls { margin-top: 1.5rem; border-radius: 12px; box-shadow: none; border-color: var(--line); background: var(--surface); }
.workspace-section .financial-news__field { color: var(--muted); font-size: .8125rem; }
.workspace-section .financial-news__item { min-height: 250px; box-shadow: none; border-radius: 12px; padding: 1.5rem; }
.workspace-section .financial-news__item::before { display: none; }
.workspace-section .financial-news__item:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgb(25 49 74 / 6%); }
.workspace-section .financial-news__title { font-size: 1.125rem; font-weight: 600; line-height: 1.7; }
.workspace-section .financial-news__category { margin-top: 1.25rem; }
.workspace-section .financial-news__more { width: auto; min-width: 180px; margin: 1.75rem auto; }
.workspace-section .cooperatives { font-family: inherit; --coop-heading-font: inherit; --coop-scroll-offset: calc(156px + env(safe-area-inset-top, 0px)); }
.workspace-section .cooperatives h1 { font-size: clamp(1.75rem, 2.7vw, 2.25rem); font-weight: 600; }
.workspace-section .cooperatives .toolbar { border-color: var(--line); box-shadow: none; }
@media (max-width: 1000px) {
  html:not([data-app-login]) .auth-shell { grid-template-columns: 1fr 410px; gap: 2rem; }
  .insight-link { padding: 1.5rem; }
  .insight-art { display: none; }
  .desktop-break { display: none; }
}
@media (max-width: 760px) {
  html:not([data-app-login]) .auth-shell { width: min(440px, calc(100% - 2rem)); grid-template-columns: 1fr; padding-top: 2rem; gap: 0; }
  html:not([data-app-login]) .auth-intro { display: none; }
  html:not([data-app-login]) .auth-card { padding: 1.5rem; }
  html:not([data-app-login]) .header-inner, html:not([data-app-login]) .workspace-hero, html:not([data-app-login]) .workspace-tools, html:not([data-app-login]) .site-footer, .workspace-nav, .portal-insights, .workspace-section { width: calc(100% - 2rem); }
  .workspace-nav { gap: 1.5rem; }
  .workspace-nav a { min-height: 54px; font-size: .875rem; }
  html:not([data-app-login]) .workspace-hero { padding: 1.75rem 0; }
  html:not([data-app-login]) .workspace-hero h1 { font-size: 1.5rem; }
  .insight-grid, html:not([data-app-login]) .tool-grid { grid-template-columns: 1fr; }
  .insight-link { min-height: 208px; }
  .insight-art { display: block; width: 75px; }
  .insight-copy h3 { font-size: 1.4rem; }
  .insight-action { margin-top: .85rem; }
  html:not([data-app-login]) .workspace-tools { padding-top: 2rem; }
  html:not([data-app-login]) .tool-card-link { padding: 1.1rem; }
  .portal-section-heading { gap: .75rem; }
  .workspace-section .financial-news__item { min-height: 240px; padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .insight-link, .insight-action span { transition: none; transform: none !important; }
}