.realm-selector{position:relative;flex-shrink:0;margin-inline:8px;font:14px/1.5 "Noto Sans TC",sans-serif;color:#e8e1d0}.realm-selector summary{cursor:pointer;white-space:nowrap;padding:8px;border:1px solid #323239;border-radius:16px}.realm-selector label{position:absolute;right:0;top:48px;z-index:100;width:176px;padding:16px;background:#131318f5;backdrop-filter:blur(16px);border:1px solid #323239;border-radius:16px;display:grid;gap:8px}.realm-selector select,.realm-market select,.realm-market input{min-height:40px;max-width:100%;border:1px solid #323239;border-radius:16px;padding:8px 16px;background:#0b0b0f;color:#e8e1d0}.realm-market{margin:24px 0;padding:24px;border:1px solid #323239;border-radius:24px;background:#131318;color:#e8e1d0;font:14px/1.6 "Noto Sans TC",sans-serif}.realm-market-heading{display:flex;gap:16px;justify-content:space-between;align-items:center}.realm-market h3{font-size:18px;margin:0 0 16px}.realm-market p{color:#aaa9b1}.realm-market label{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.realm-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}.realm-status-grid>div,.realm-status-grid>section{padding:16px;background:#1a1a1f;border:1px solid #323239;border-radius:16px;overflow-wrap:anywhere}.realm-table{overflow:auto;margin:24px 0}.realm-table table{border-collapse:collapse;width:100%;text-align:left}.realm-table td,.realm-table th{padding:16px;border-bottom:1px solid #323239;white-space:nowrap}.realm-empty{padding:16px;border:1px dashed #323239;border-radius:16px}.realm-market button,.realm-status-grid button{padding:8px 16px;border-radius:16px;transition:transform .18s cubic-bezier(.2,.8,.2,1)}.realm-market button:active,.realm-status-grid button:active{transform:scale(.97)}[data-realm=tw] [data-realm-only=global],[data-realm=tw] [data-global-external]{display:none!important}#realm-status:not(:empty){position:fixed;bottom:24px;left:16px;right:16px;z-index:120;background:#1a1a1ff5;padding:16px;border:1px solid #323239;border-radius:16px;backdrop-filter:blur(16px)}.realm-account-note{max-width:1328px;margin:24px auto;padding:16px;color:#aaa9b1;font-size:14px}.community-header:has(.realm-selector) .header-search{max-width:160px}.realm-market [hidden]{display:none!important}@media(max-width:1120px){.site-header:has(.realm-selector) .header-search{display:none}.community-header:has(.realm-selector){gap:8px}}@media(max-width:760px){.realm-selector{font-size:12px;margin:0}.realm-selector summary{padding:8px;font-size:0}.realm-selector summary span{font-size:12px}.realm-market{padding:16px}.realm-status-grid{grid-template-columns:1fr}.community-header:has(.realm-selector){padding-inline:8px;gap:8px}.community-header:has(.realm-selector) .community-brand img{width:88px}.community-header:has(.realm-selector) .user-menu summary{max-width:48px}.site-header:has(.realm-selector){gap:8px}.site-header:has(.realm-selector) .brand-language{display:none}.realm-market-heading{align-items:flex-start}.realm-selector label{right:0}}@media(prefers-reduced-motion:reduce){.realm-market button,.realm-status-grid button{transition:none}}

.realm-selector-direct select{cursor:pointer;border:0;border-radius:8px;background:transparent;padding:8px 0;font:12px/1.5 "Noto Sans TC",sans-serif;color:#aaa9b1;min-height:40px}
.realm-selector-direct select:hover{color:#d4af7c}.realm-selector-direct option{background:#111216;color:#e8e1d0}
.realm-selector-direct [data-realm-save]{margin:0}

.back-to-top{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:45;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(212,175,124,.24);border-radius:16px;background:rgba(20,21,25,.9);backdrop-filter:blur(16px);color:#d4af7c;font:24px/1.5 sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.08);transition:transform 180ms cubic-bezier(.2,.8,.2,1),background 180ms ease}
.back-to-top[hidden]{display:none}.back-to-top:hover{background:#202127}.back-to-top:active{transform:scale(.94)}.back-to-top:focus-visible{outline:2px solid #d4af7c;outline-offset:4px}.admin-signed-in .back-to-top{bottom:96px}
@media(max-width:600px){.back-to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* Shared presentation tokens; loaded after legacy page themes. */
:root,[data-theme="dark"] {
  --surface-page:#0B0B0F; --surface-section:#0E0F13; --surface-card:#131418;
  --surface-elevated:#17181D; --surface-overlay:#1A1B20; --surface-input:#0F1014;
  --border-default:rgba(255,255,255,.06); --border-brand:rgba(212,175,124,.14);
  --border-control:rgba(255,255,255,.10); --border-selected:rgba(212,175,124,.36);
  --color-bg-primary:var(--surface-page); --color-bg-secondary:var(--surface-section); --color-bg-panel:var(--surface-card);
  --color-border:var(--border-default); --color-border-hover:rgba(212,175,124,.22);
  --color-text-muted:#96938E; --color-text-caption:#96938E;
  --color-gold-primary:#D4AF7C; --color-gold-hover:#E2C18C;
  --color-text-primary:#E8E1D0; --color-text-secondary:#A8A6A2;
  --color-success:#62B985; --color-error:#CF5A5A;
  --bg:var(--surface-page); --panel:var(--surface-section); --panel2:var(--surface-card);
  --surface:var(--surface-card); --surface2:var(--surface-elevated); --border:var(--border-default); --line:var(--border-default);
  --text:var(--color-text-primary); --muted:var(--color-text-secondary); --gold:var(--color-gold-primary); --gold2:var(--color-gold-hover);
  --radius-sm:6px; --radius-control:8px; --radius-card:10px; --radius-large:12px; --radius-dialog:14px;
  --space-0-5:4px; --space-1:8px; --space-1-5:12px; --space-2:16px; --space-2-5:20px;
  --space-3:24px; --space-4:32px; --space-5:40px; --space-6:48px; --space-8:64px; --space-10:80px;
  --shadow-xs:0 1px 2px rgb(0 0 0 / .05); --shadow-sm:0 4px 14px rgb(0 0 0 / .08);
  --shadow-md:0 12px 32px rgb(0 0 0 / .10); --shadow-focus:0 0 0 3px rgb(212 175 124 / .12);
  --shadow-soft:var(--shadow-sm); --shadow:var(--shadow-sm);
  --duration-fast:120ms; --duration-normal:180ms; --duration-slow:240ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1); --ease-enter:cubic-bezier(.16,1,.3,1);
  --transition-fast:var(--duration-normal); --ease-out:var(--ease-standard);
  --font-ui:Inter,"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Microsoft JhengHei",sans-serif;
  --font-display:Cinzel,"Noto Serif TC",serif; --font-hero:"Noto Serif TC",serif;
  --font-number:Inter,"Roboto Mono",sans-serif;
  --text-display:clamp(40px,5vw,64px); --text-h1:clamp(28px,3.2vw,40px);
  --text-h2:clamp(24px,2.4vw,32px); --text-h3:20px; --text-body:16px; --text-small:14px; --text-caption:12px;
}

/* One presentation layer for the guide, community and planner shells. */
body {font-family:var(--font-ui);line-height:1.6}
button,input,select,textarea,.badge,.chips,.tabs {font-family:var(--font-ui);line-height:1.6}
button,.button,.brand-button,.compact-button,.btnlink,.source-link,.guide-shortcut,.admin-login,.planner-nav-entry {
  border-radius:var(--radius-control);
  transition:color var(--duration-fast) ease-out,background-color var(--duration-normal) ease-out,border-color var(--duration-normal) ease-out,transform var(--duration-fast) var(--ease-standard);
}
button:active,.button:active,.brand-button:active,.compact-button:active,.btnlink:active,.source-link:active,.guide-shortcut:active,.admin-login:active,.hero-shortcuts a:active,.back-to-top:active {transform:translateY(1px)}
button:disabled,button:disabled:hover,button:disabled:active,.poe-provider:disabled,.poe-provider:disabled:hover {
  opacity:.5;cursor:not-allowed;transform:none;filter:none;box-shadow:none;
}
button:disabled:hover {background:var(--surface-elevated);border-color:var(--border-control);color:var(--muted)}
button:disabled,.poe-provider:disabled,.poe-provider:disabled:hover {background:var(--surface-elevated);border-color:var(--border-control);color:var(--muted)}
button[aria-busy=true] {position:relative;cursor:wait}
button[aria-busy=true]::after {content:"";position:absolute;bottom:4px;left:calc(50% - 8px);width:16px;height:2px;background:currentColor;animation:ui-busy 1s ease-in-out infinite}
@keyframes ui-busy {50%{opacity:.25}}
.brand-button,.compact-button,.button:not(.primary):not(.gold),button:not(.primary):not(.gold):not([aria-pressed=true]):not([aria-selected=true]) {border-color:var(--border-control)}
.brand-button--primary,.button.primary,button.primary,button.gold,.button.gold {background:var(--gold);color:var(--bg);border-color:var(--gold)}
.brand-button--primary:hover,.button.primary:hover,button.primary:hover,button.gold:hover,.button.gold:hover {background:var(--gold2);color:var(--bg)}
.brand-button--primary:active,.button.primary:active,button.primary:active,button.gold:active {filter:brightness(.94)}
.tertiary,.clear-search,.global-search button {border-color:transparent;background:transparent;color:var(--muted)}
input:not([type=checkbox]):not([type=radio]),select,textarea,#plan-title,.realm-market input,.realm-market select {
  border-radius:var(--radius-control);background-color:var(--surface-input);border-color:rgba(255,255,255,.08);
  transition:border-color var(--duration-normal) ease-out,background-color var(--duration-normal) ease-out;
}
input::placeholder,textarea::placeholder {color:var(--color-text-caption);opacity:1}
input:focus,select:focus,textarea:focus {border-color:rgba(212,175,124,.45);box-shadow:var(--shadow-focus)}
:focus-visible {outline:2px solid var(--gold2);outline-offset:3px}
.global-search:focus-within {border-color:rgba(212,175,124,.45);box-shadow:var(--shadow-focus)}
.global-search input:focus {box-shadow:none;background:transparent}
.global-search:focus-within>span,.header-search:focus-within .search-glyph {color:var(--gold)}
option {background:var(--surface-elevated);color:var(--text)}
body>header,.site-header,.community-header,body[data-page=home]:has(#home.active) .site-header {
  background:rgba(8,9,11,.76);backdrop-filter:blur(10px);border-bottom-color:rgba(255,255,255,.03);
  transition:background-color 200ms ease-out,border-color 200ms ease-out,backdrop-filter 200ms ease-out;
}
html.ui-scrolled body>header,html.ui-scrolled .site-header,html.ui-scrolled .community-header,
html.ui-scrolled body[data-page=home]:has(#home.active) .site-header {background:rgba(8,9,11,.94);backdrop-filter:blur(16px);border-bottom-color:rgba(212,175,124,.10)}
.primary-tab,.community-header nav a {color:var(--muted);background:transparent}
.primary-tab[aria-current=page],.community-header nav a[aria-current=page] {color:var(--gold);background:transparent;box-shadow:inset 0 -2px var(--gold);border-color:transparent}
.build-entry-nav {border-radius:var(--radius-control);background:var(--surface-section)}
.build-entry-nav a {border-radius:var(--radius-sm);transition:color var(--duration-fast) ease-out,background-color var(--duration-normal) ease-out}
.build-entry-nav a[aria-current=page] {background:transparent;box-shadow:inset 0 -2px var(--gold)}
.build-entry-nav a:active {transform:translateY(1px)}
#home {--home-line:var(--border-default);--home-surface:var(--surface-card);--home-hover:var(--surface-elevated)}
.card,.panel,.build-card,#home .build-card,.strategy-card,.compact-resource,.auth-card,.connection-card,.realm-market,.market-panel {
  background-color:var(--surface-card);border-color:var(--border-default);border-radius:var(--radius-card);box-shadow:var(--shadow-xs);
}
.auth-card--login {background-color:rgba(19,20,24,.96);border-radius:var(--radius-dialog);box-shadow:var(--shadow-md)}
.card,.panel,.card-body {padding:var(--space-3)}
.build-grid,#home .build-grid,.resource-grid,.strategy-grid,.compact-resource-grid,.compact-tool-grid {gap:var(--space-2)}
.home-sections,#home .home-sections {gap:var(--space-8)}
.platform-section-heading h2,#home .platform-section-heading h2 {font-size:var(--text-h2);line-height:1.5}
.strategy-card-heading h3 {font-size:var(--text-h3)}
.build-card h2,.strategy-card h3,.compact-resource strong {font-family:var(--font-ui)}
.build-card h2 a {color:var(--text)}
.build-card,.strategy-card,.compact-resource,a.card {transition:background-color var(--duration-normal) ease-out,border-color var(--duration-normal) ease-out,transform var(--duration-normal) var(--ease-standard)}
.build-card:focus-within,.strategy-card:focus-visible,.compact-resource:focus-visible {border-color:var(--border-selected)}
.strategy-card:active,.compact-resource:active,a.card:active {transform:translateY(1px);background:var(--surface-elevated)}
.card[aria-selected=true],.card[aria-pressed=true] {border-color:var(--border-selected);background:rgba(212,175,124,.035)}
.tabs {border-radius:var(--radius-control);background:var(--surface-section)}
.tabs button[aria-selected=true],.exp-tab[aria-selected=true] {background:transparent;color:var(--text);border-color:transparent;box-shadow:inset 0 -2px var(--gold)}
.chips span,.badge,.neutral-badge,#home .build-card .badge,#home .build-card .chips span {min-height:24px;line-height:22px;padding:0 8px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:var(--text-caption)}
.market-filters button[aria-pressed=true],.pill-tabs button[aria-pressed=true] {background:rgba(212,175,124,.035);border-color:var(--border-brand);color:var(--gold)}
.realm-status-grid>div,.realm-status-grid>section,.aux-detail,.user-menu nav {background:var(--surface-elevated);border-color:var(--border-default);border-radius:var(--radius-control)}
.realm-market {border-radius:var(--radius-large)}
.realm-market :is(td,th),.home-market-table :is(td,th) {height:56px;border-color:var(--border-default)}
td,.metrics,.data-count {font-family:var(--font-number);font-variant-numeric:tabular-nums}
thead th {position:sticky;top:0;background:rgba(14,15,19,.96);backdrop-filter:blur(8px);border-bottom-color:var(--border-default)}
.global-results,.search-results,.user-menu nav,.tree-tooltip,[role=tooltip],[popover] {background:var(--surface-overlay);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-control);box-shadow:var(--shadow-sm);backdrop-filter:blur(10px)}
.global-results:not([hidden]),.search-results:not([hidden]),.user-menu[open] nav {animation:ui-popover var(--duration-normal) var(--ease-enter)}
.tree-tooltip:not([hidden]),[role=tooltip]:not([hidden]) {animation:ui-tooltip 140ms ease-out}
@keyframes ui-popover {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes ui-tooltip {from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
dialog,.release-dialog {background:var(--surface-elevated);border-color:var(--border-default);border-radius:var(--radius-dialog);box-shadow:var(--shadow-md)}
dialog[open] {animation:ui-dialog 200ms var(--ease-enter)}
dialog::backdrop {background:rgba(0,0,0,.68);backdrop-filter:blur(3px)}
@keyframes ui-dialog {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ui-state,.empty-state {min-height:128px;padding:24px;display:flex;align-items:center;justify-content:center;gap:16px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-card);text-align:left;color:var(--muted)}
.ui-state-copy {min-width:0;flex:1}
.ui-state h3 {margin:0 0 8px;font:600 16px/1.5 var(--font-ui);color:var(--text)}
.ui-state p {margin:0;font-size:14px;line-height:1.6}
.ui-state-icon {flex-shrink:0;width:24px;height:24px;color:var(--muted)}
.ui-state--error .ui-state-icon {color:var(--color-error)}
.ui-state-actions {display:flex;flex-wrap:wrap;gap:8px}
.ui-state details {margin-top:8px;overflow-wrap:anywhere}
.ui-skeleton {display:block;background:#16171B;border-radius:var(--radius-sm);overflow:hidden;position:relative;min-height:16px}
[data-realm-build-list][aria-busy=true],[data-realm-home-builds][aria-busy=true],[data-realm-market][aria-busy=true] {overflow:hidden}
#home .home-build-empty .ui-state-actions {margin-left:auto;flex:0 0 auto}
.ui-skeleton::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);animation:ui-shimmer 1.8s ease-in-out infinite;transform:translateX(-100%)}
@keyframes ui-shimmer {to{transform:translateX(100%)}}
.ui-skeleton-title {height:24px;width:72%;margin:16px 0 8px}
.ui-skeleton-meta {height:16px;width:48%}
.ui-skeleton-copy {height:48px;margin-bottom:16px}
.ui-skeleton-tags {display:flex;gap:8px}.ui-skeleton-tags span {height:24px;width:64px}
.ui-build-skeleton .ui-skeleton-cover {height:144px;border-radius:0}
.ui-build-skeleton .card-bottom {min-height:40px}
.ui-market-skeleton .ui-skeleton {width:80%;min-width:48px}
.build-cover {display:block;min-height:144px;background:#16171B;transition:opacity 150ms ease-out,filter 150ms ease-out}
.ui-image-frame {position:relative;min-height:144px;background:#16171B;overflow:hidden}
.ui-image-frame .build-cover {width:100%;height:144px}
.ui-image-frame[data-image-state=pending] .build-cover {opacity:0}
.ui-image-frame[data-image-state=error] .build-cover {visibility:hidden}
.ui-image-fallback {position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px}
.ui-image-fallback[hidden] {display:none}
#app-status:not(:empty),#realm-status:not(:empty) {left:auto;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));transform:none;max-width:min(440px,calc(100% - 32px));background:var(--surface-elevated);border:1px solid var(--border-default);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);padding:16px 24px;animation:ui-popover var(--duration-normal) ease-out}
#app-status[data-tone=success] {border-left:2px solid var(--color-success)}
#app-status[data-tone=error] {border-left:2px solid var(--color-error)}
#save-status,[data-save-status] {font-size:var(--text-small);transition:opacity var(--duration-normal) ease-out}
.prose-block a,.resource-list a,.footer a {color:#C8C8C8;text-underline-offset:4px}
* {scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
@media(hover:hover) and (pointer:fine) {
  .primary-tab:hover,.community-header nav a:hover {color:var(--text);background:transparent}
  body[data-page=home]:has(#home.active) .primary-tab:hover {color:var(--text)}
  .strategy-card:hover,.compact-resource:hover,a.card:hover,.build-card:hover,#home .build-card:hover {transform:translateY(-1px);background:var(--surface-elevated);border-color:rgba(212,175,124,.22);box-shadow:var(--shadow-sm)}
  .build-card:hover .build-cover {filter:brightness(1.04);transform:none}
  .connection-card:hover {background:var(--surface-elevated);border-color:var(--border-brand)}
  tbody tr:hover {background:rgba(255,255,255,.025)}
  .global-results a:hover,.search-results button:hover,.user-menu nav a:hover {background:rgba(255,255,255,.04)}
  .prose-block a:hover,.resource-list a:hover,.footer a:hover {color:var(--gold2)}
}
@media(hover:none) {
  .strategy-card:hover,.compact-resource:hover,.build-card:hover,a.card:hover {transform:none;box-shadow:var(--shadow-xs)}
}
@media(max-width:760px) {
  .ui-state {flex-wrap:wrap;padding:16px;gap:16px}.ui-state-actions {width:100%;padding-left:40px}
  #home .home-build-empty {display:flex}
  #home .home-build-empty .ui-state-actions {margin-left:0;flex-basis:100%}
  #app-status:not(:empty),#realm-status:not(:empty) {left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:none}
  .toolbar.menu-open {animation:ui-drawer var(--duration-slow) var(--ease-standard)}
  @keyframes ui-drawer {from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto!important}
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .strategy-card:hover,.compact-resource:hover,.build-card:hover,a.card:hover,button:active,.button:active,.brand-button:active,.compact-button:active,.btnlink:active,.source-link:active,.guide-shortcut:active,.admin-login:active,.hero-shortcuts a:active,.back-to-top:active,.build-entry-nav a:active {transform:none!important}
}