:root {
  color-scheme: light;
  --canvas: #f3f6f8;
  --paper: #fffefa;
  --paper-warm: #f7f2e9;
  --ink: #182127;
  --muted: #6e7880;
  --line: #d9e0e4;
  --frame: #847565;
  --frame-dark: #67594d;
  --blue: #1178c9;
  --blue-dark: #075c9d;
  --blue-soft: #e8f4fd;
  --wood: #268b4d;
  --fire: #da2a2a;
  --earth: #805126;
  --metal: #71808a;
  --water: #1976c9;
  --day: #e6a52c;
  --hour: #ef654b;
  --qimen-frame: linear-gradient(145deg, #0a688d 0%, #164f79 48%, #14355c 100%);
  --shadow: 0 18px 50px rgba(38, 50, 58, .09);
}

.element-glyph { color: var(--element-glyph-color, currentColor) !important; font-family: "Noto Serif CJK SC", "Noto Serif CJK TC", SimSun, serif; }
.element-glyph.wood, .element-glyph[data-element="wood"] { --element-glyph-color: var(--wood); }
.element-glyph.fire, .element-glyph[data-element="fire"] { --element-glyph-color: var(--fire); }
.element-glyph.earth, .element-glyph[data-element="earth"] { --element-glyph-color: var(--earth); }
.element-glyph.metal, .element-glyph[data-element="metal"] { --element-glyph-color: var(--metal); }
.element-glyph.water, .element-glyph[data-element="water"] { --element-glyph-color: var(--water); }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 0%, rgba(17, 120, 201, .08), transparent 34rem),
    linear-gradient(180deg, #fbfcfd 0, var(--canvas) 25rem);
  font-family: Inter, "Noto Sans", "Segoe UI", Arial, sans-serif;
  overflow-x: clip;
}

button, input, select { font: inherit; }
button { color: inherit; }
h1, h2, p, dl, dd { margin: 0; }

.app-shell { width: min(1520px, calc(100% - 32px)); max-width: 100%; margin: 0 auto; padding: 18px 0 42px; overflow: clip; }

.brandbar, .brand, .control-heading, .result-toolbar, .chart-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brandbar { margin-bottom: 18px; }
.header-settings { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.shared-header-controls { min-width: 0; justify-self: end; flex-wrap: wrap; }
.header-popover { position: relative; flex: 0 0 auto; }
.header-square { width: 44px; min-width: 44px; height: 44px; padding: 0 !important; display: inline-grid !important; place-items: center; border-radius: 9px !important; }
.header-square svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alternative-view-button .alternate-filled { fill: currentColor; stroke: none; }
.alternative-view-button[aria-pressed="true"] { border-color: var(--blue); color: white; background: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent); }
.header-menu { position: absolute; z-index: 1200; top: calc(100% + 8px); right: 0; display: grid; gap: 7px; width: 210px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); box-shadow: 0 18px 50px rgba(12,30,48,.2); }
.header-menu[hidden] { display: none; }
.header-menu > b { padding: 3px 5px 6px; color: var(--muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.header-menu > p { margin: 0 5px 4px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.header-menu button { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: color-mix(in srgb,var(--canvas) 45%,var(--paper)); text-align: left; cursor: pointer; font-size: .78rem; font-weight: 720; }
.header-menu button:hover,.header-menu button.is-active { border-color: var(--blue); background: var(--blue-soft); }
.header-menu-action { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 10px; border: 1px solid #d9673e; border-radius: 8px; color: #9d321b; background: #fff0e9; text-decoration: none; font-size: .78rem; font-weight: 760; }
.diagnostic-menu { width: 270px; }
.compact-select { display: flex; align-items: center; gap: 9px; font-size: .9rem; }
.compact-select select { width: auto; min-height: 44px; padding-inline: 13px 34px; border-radius: 3px; font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: normal; }
.language-picker { position: relative; display: block; width: 44px; min-width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.language-picker:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(17, 120, 201, .12); }
.language-picker select { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.language-flag { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 1.42rem; line-height: 1; }
.icon-button, .secondary-button { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); cursor: pointer; }
.icon-button { display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; color: var(--muted); font-size: .75rem; }
.brand { justify-content: flex-start; gap: 12px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px 4px 12px 4px;
  color: white;
  background: linear-gradient(145deg, var(--blue), var(--blue-dark));
  box-shadow: 0 7px 20px rgba(17, 120, 201, .22);
  font-family: "Noto Serif CJK SC", SimSun, serif;
  font-size: 1.45rem;
}
.brand p, .section-kicker {
  color: var(--blue);
  font-size: .75rem;
  font-weight: 760;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.brand h1 { margin-top: 2px; font-size: clamp(1.35rem, 2.2vw, 1.85rem); letter-spacing: -.035em; }
.brand-title-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 10px; }
.build-label { padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: color-mix(in srgb, var(--paper) 84%, transparent); font-family: inherit; font-size: clamp(.72rem, .86vw, .86rem); font-weight: 720; line-height: 1.15; letter-spacing: -.01em; }
.version { color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; font-size: .78rem; background: rgba(255,255,255,.72); }
.telegram-account { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; padding: 4px 9px 4px 5px; border: 1px solid color-mix(in srgb, var(--wood) 45%, var(--line)); border-radius: 999px; color: var(--wood); background: color-mix(in srgb, var(--wood) 8%, var(--paper)); font-size: .72rem; font-weight: 720; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease; }
.telegram-account:hover,.telegram-account:focus-visible { color: color-mix(in srgb,var(--wood) 78%,var(--blue-dark)); border-color: color-mix(in srgb,var(--wood) 70%,var(--line)); background: color-mix(in srgb,var(--wood) 14%,var(--paper)); outline: none; }
.header-account-slot { display: inline-flex; align-items: center; flex: 0 0 auto; }
.telegram-login-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px; border: 1px solid #d66d72; border-radius: 9px; color: #a33d45; background: color-mix(in srgb, #ffe6e7 68%, var(--paper)); cursor: pointer; font-size: .74rem; font-weight: 760; white-space: nowrap; }
.telegram-login-button svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.telegram-login-button:hover { border-color: #bd4c54; background: color-mix(in srgb, #ffd7da 82%, var(--paper)); }
.telegram-login-button[hidden] { display: none; }
html[data-authenticated="true"] #telegram-auth-button { display: none !important; }
html[data-authenticated="false"] #telegram-account { display: none !important; }
.telegram-logout-button { min-height: 34px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 9px; background: transparent; color: var(--muted); font: 750 .72rem/1 system-ui; cursor: pointer; }
.telegram-logout-button:hover { border-color: var(--blue); color: var(--blue-dark); background: color-mix(in srgb, var(--blue-soft) 42%, transparent); }
.telegram-logout-button[hidden] { display: none; }
.feedback-button, .i18n-diagnostic-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border-radius: 9px; font: 800 .75rem/1 system-ui; text-decoration: none; cursor: pointer; }
.feedback-button { width: 44px; padding: 0; border: 1px solid #d9673e; background: #fff0e9; color: #9d321b; box-shadow: inset 0 0 0 1px rgba(217,103,62,.08); }
.feedback-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feedback-button:hover, .feedback-button[aria-pressed="true"] { border-color: #b94724; background: #d9673e; color: #fff; }
.i18n-diagnostic-button { min-width: 34px; border: 1px solid #d9673e; background: transparent; color: #a13a20; }
.i18n-diagnostic-button:hover, .i18n-diagnostic-button.is-active { border-color: #b94724; background: #d9673e; color: #fff; }
.feedback-button[hidden], .i18n-diagnostic-button[hidden] { display: none; }

.feedback-selection-bar { position: fixed; z-index: 1601; top: 14px; left: 50%; display: flex; align-items: center; gap: 14px; width: min(620px,calc(100% - 28px)); padding: 12px 14px; border: 1px solid #df6d3c; border-radius: 12px; color: #6e2715; background: #fff4ed; box-shadow: 0 16px 46px rgba(60,28,14,.22); transform: translateX(-50%); }
.feedback-selection-bar[hidden] { display: none; }
.feedback-selection-bar b { flex: 1; font-size: .88rem; }
.feedback-selection-bar button { padding: 7px 10px; border: 1px solid #d96538; border-radius: 8px; color: #8a2d17; background: transparent; cursor: pointer; font-size: .78rem; font-weight: 760; }
.feedback-highlight { position: fixed; z-index: 1600; pointer-events: none; border: 3px solid #ef6c32; border-radius: 8px; background: rgba(239,108,50,.11); box-shadow: 0 0 0 9999px rgba(21,29,38,.13),0 0 0 4px rgba(255,255,255,.8); }
.feedback-highlight.is-selected { z-index: 1599; border-width: 2px; background: rgba(239,108,50,.08); box-shadow: 0 0 0 2px rgba(255,255,255,.82); }
.feedback-highlight[hidden] { display: none; }
html.is-feedback-selecting, html.is-feedback-selecting * { cursor: crosshair !important; }
.feedback-dialog { width: min(620px,calc(100% - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 18px 6px 18px 6px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 90px rgba(12,25,40,.34); }
.feedback-dialog::backdrop { background: rgba(5,12,20,.58); backdrop-filter: blur(4px); }
.feedback-dialog form { display: grid; gap: 15px; padding: 20px; }
.feedback-dialog header,.feedback-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feedback-dialog header { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.feedback-dialog header small { color: #b34c27; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.feedback-dialog h2 { margin-top: 4px; font-size: 1.35rem; }
.feedback-dialog header button { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; font-size: 1.25rem; }
.feedback-dialog label { display: grid; gap: 7px; color: var(--ink); font-size: .82rem; font-weight: 720; }
.feedback-dialog select,.feedback-dialog textarea,.feedback-dialog input[type="file"] { width: 100%; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--canvas); }
.feedback-dialog select { min-height: 42px; padding: 8px 11px; }
.feedback-dialog textarea { min-height: 130px; padding: 11px; resize: vertical; line-height: 1.45; }
.feedback-dialog input[type="file"] { min-height: 44px; padding: 7px; font-size: .75rem; }
.feedback-dialog input[type="file"]::file-selector-button { min-height: 28px; margin-right: 9px; padding: 0 10px; border: 1px solid #d9673e; border-radius: 7px; color: #8a2d17; background: #fff0e9; cursor: pointer; font-weight: 760; }
.feedback-dialog textarea:focus,.feedback-dialog select:focus,.feedback-dialog input[type="file"]:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(17,120,201,.12); }
.feedback-selected-context { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid color-mix(in srgb,#df6d3c 42%,var(--line)); border-radius: 10px; background: color-mix(in srgb,#fff0e9 72%,var(--paper)); }
.feedback-selected-context span,.feedback-selected-context small,.feedback-technical-note,.feedback-status { color: var(--muted); font-size: .75rem; line-height: 1.45; }
.feedback-selected-context b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.feedback-selected-context small { overflow-wrap: anywhere; }
.feedback-selected-list { display: grid; gap: 6px; }
.feedback-selected-list article { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid color-mix(in srgb,#df6d3c 28%,var(--line)); border-radius: 8px; background: var(--paper); }
.feedback-selected-list article span { display: grid; min-width: 0; gap: 3px; }
.feedback-selected-list article button { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; }
.feedback-file-field small { color: var(--muted); font-size: .7rem; font-weight: 520; }
.feedback-element-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-element-actions button { min-height: 38px; }
.feedback-copy-gpt { border-color: #d9673e; color: #8a2d17; background: #fff0e9; }
.feedback-dialog footer { justify-content: flex-end; padding-top: 4px; }
.feedback-dialog footer button { min-height: 42px; padding-inline: 16px; }
.feedback-status { min-height: 1.1rem; color: var(--blue-dark); font-weight: 720; }
.telegram-account > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.telegram-account-separator { flex: 0 0 auto; color: color-mix(in srgb, var(--wood) 68%, var(--muted)); }
.telegram-account-avatar { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; overflow: hidden; border-radius: 50%; color: white; background: var(--wood); font-size: .7rem; }
.telegram-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.telegram-auth-gate { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(12px); }
.telegram-auth-gate[hidden] { display: none; }
.telegram-auth-card { position: relative; width: min(100%, 520px); padding: clamp(30px, 6vw, 44px); border: 1px solid var(--line); border-radius: 18px 6px 18px 6px; background: var(--paper); box-shadow: 0 28px 90px rgba(20,33,45,.24); text-align: center; }
.telegram-auth-card [hidden] { display:none !important; }
.telegram-auth-card .telegram-auth-version { position: absolute; top: 13px; right: 15px; margin: 0; color: var(--muted); font-size: .7rem; font-weight: 750; }
.telegram-auth-card .brand-mark { margin: 0 auto 18px; }
.telegram-auth-card h2 { margin: 0 0 10px; font-size: clamp(1.55rem, 5vw, 2.1rem); }
.telegram-auth-card p { color: var(--muted); font-size: 1rem; line-height: 1.55; }
.telegram-auth-card .calculate-button { width: 100%; margin-top: 22px; }
.telegram-auth-actions { display: grid; gap: 10px; margin-top: 22px; }
.google-login-button { width:100%; min-height:45px; font-weight:720; margin-top:16px; }
.google-login-button:disabled { opacity:.6; cursor:not-allowed; }
.telegram-auth-card .google-auth-availability { font-size:.82rem; margin:6px 0; }
.telegram-auth-fallback { display:block; margin-top:10px; }
.telegram-auth-actions .calculate-button { margin-top: 0; }
.telegram-auth-actions .secondary-button { min-height: 45px; width: 100%; font-weight: 720; }
.telegram-auth-card small { display: block; margin-top: 13px; color: var(--muted); line-height: 1.4; }
.telegram-auth-close { position: absolute; top: 13px; left: 13px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font: 600 1.2rem/1 system-ui; cursor: pointer; }
.telegram-auth-close:hover { color: var(--ink); border-color: var(--blue); }
.telegram-auth-pair-status { display: grid; gap: 10px; margin: 18px 0 0; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--blue) 38%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--blue-soft) 55%, var(--paper)); color: var(--ink); font-size: .88rem; line-height: 1.45; text-align: left; }
.telegram-auth-pair-status[hidden] { display: none; }
.telegram-auth-fallback { color: var(--blue-dark); font-weight: 750; text-underline-offset: 3px; }

.control-panel, .pillar-panel, .chart-panel, .service-panel, .analytics-panel, .trace {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
}

.control-panel { border-radius: 16px; padding: 18px 20px; }
.control-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.calculator-source-switch { display:flex; align-items:center; gap:5px; max-width:100%; padding:3px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--canvas) 55%,var(--paper)); overflow-x:auto; scrollbar-width:none; }
.calculator-source-switch::-webkit-scrollbar { display:none; }
.calculator-source-switch a { display:flex; align-items:center; gap:5px; min-height:34px; padding:0 11px; border-radius:7px; color:var(--muted); text-decoration:none; font-size:.71rem; font-weight:740; white-space:nowrap; }
.calculator-source-switch a:hover { color:var(--blue-dark); background:var(--blue-soft); }
.calculator-source-switch a.is-active { color:#fff; background:var(--blue); box-shadow:0 3px 9px rgba(17,120,201,.18); }
.calculator-source-switch small { padding:2px 4px; border:1px solid currentColor; border-radius:4px; font-size:.5rem; opacity:.75; }
.profile-switch { display:flex; align-items:center; gap:5px; }
.profile-switch button { display:flex; align-items:center; gap:5px; min-height:34px; padding:0 11px; border:0; border-radius:7px; color:var(--muted); background:transparent; font-size:.71rem; font-weight:740; white-space:nowrap; cursor:pointer; }
.profile-switch button:hover:not(:disabled) { color:var(--blue-dark); background:var(--blue-soft); }
.profile-switch button.is-active { color:white; background:var(--blue); }
.profile-switch button:disabled { opacity:.42; cursor:default; }
.profile-note { margin-top:9px; color:var(--muted); font-size:.71rem; line-height:1.5; }
.control-heading h2 { margin-top: 4px; font-size: 1.05rem; }
.browser-badge { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.browser-badge i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: #39a96b; box-shadow: 0 0 0 5px rgba(57,169,107,.1); }

.controls { display: grid; grid-template-columns: 1.45fr .72fr 1.5fr 1.15fr auto auto auto; gap: 11px; align-items: end; margin-top: 16px; }
.controls > label:not(.solar-control):not(.rat-control) { padding-bottom: 14px; }
.controls > .method-control, .controls > .solar-control, .controls > .rat-control, .controls > .calculate-button { margin-bottom: 14px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: .82rem; }
input, select {
  width: 100%;
  min-height: 45px;
  padding: 0 12px;
  color: var(--ink);
  background: #f8fafb;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
}
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(17, 120, 201, .12); }
.date-selects, .time-selects { display: grid; align-items: center; height: 45px; gap: 6px; }
.date-selects select, .time-selects select, .city-search-wrap, .city-search-wrap input, .method-segmented { height: 45px; min-height: 45px; }
.date-selects { grid-template-columns: .65fr 1.4fr .9fr; }
.time-selects { grid-template-columns: 1fr auto 1fr; }
.time-selects b { color: var(--muted); font-size: 1rem; }
.city-control { position: relative; display: grid; min-width: 0; grid-template-rows: auto 45px; gap: 7px; padding-bottom: 14px; color: var(--muted); font-size: .82rem; }
.city-search-wrap { position: relative; min-width: 0; }
.city-search-wrap input[type="search"] { padding-right: 34px; }
.selected-place { position: absolute; right: 0; bottom: -1px; left: 0; display: block; height: 14px; overflow: hidden; margin: 0; color: var(--muted); font-size: .62rem; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.selected-place b { color: var(--blue-dark); }
.selected-place a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.city-results { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; width: min(440px, 92vw); max-height: 300px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 18px 40px rgba(24,33,39,.2); }
.city-results button { display: grid; width: 100%; gap: 3px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.city-results button:hover { background: var(--blue-soft); }
.city-results b { color: var(--ink); font-size: .78rem; }
.city-results span, .city-results p { color: var(--muted); font-size: .66rem; }
.city-results p { padding: 9px; }

.method-control { display: grid; gap: 7px; min-width: 0; color: var(--muted); font-size: .82rem; }
.method-segmented { display: grid; grid-template-columns: 1fr 1fr; min-height: 45px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafb; }
.method-segmented button { display: grid; min-width: 0; place-content: center; gap: 1px; padding: 3px 7px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; font-size: .73rem; font-weight: 720; white-space: nowrap; }
.method-segmented button small { color: inherit; font-size: .53rem; font-weight: 780; line-height: 1; }
.method-segmented button.is-active { color: white; background: var(--blue); box-shadow: 0 3px 9px rgba(17,120,201,.2); }
.method-segmented button.is-same { color: #9b2f3d; background: #f9dfe2; box-shadow: inset 0 0 0 1px rgba(178,54,70,.3); opacity: 1; }

.solar-control, .rat-control { position: relative; display: flex; grid-template-columns: none; align-items: center; min-height: 45px; gap: 9px; padding: 0 5px; cursor: pointer; white-space: nowrap; }
.solar-control input, .rat-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.solar-control > span:last-child, .rat-control > span:last-child { display: grid; gap: 1px; color: var(--ink); }
.solar-control small, .rat-control small { color: var(--muted); font-size: .7rem; }
.switch { width: 40px; height: 23px; border: 1px solid var(--line); border-radius: 999px; background: #dfe5e8; position: relative; flex: 0 0 auto; transition: .2s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 4px; width: 15px; height: 15px; border-radius: 50%; background: #89959c; transition: .2s ease; }
.solar-control input:checked + .switch, .rat-control input:checked + .switch { background: var(--blue-soft); border-color: var(--blue); }
.solar-control input:checked + .switch::after, .rat-control input:checked + .switch::after { transform: translateX(16px); background: var(--blue); }

.calculate-button, .flip-button {
  border: 0;
  cursor: pointer;
  font-weight: 730;
  transition: .18s ease;
}
.calculate-button { min-height: 45px; padding: 0 20px; border-radius: 9px; color: white; background: linear-gradient(180deg, #2095e9, var(--blue)); box-shadow: 0 7px 16px rgba(17,120,201,.2); }
.calculate-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.form-message { min-height: 1.1em; margin-top: 8px; color: var(--fire); font-size: .83rem; }

.result-toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 22px 3px 13px; }
.calculation-summary { width: 100%; min-width: 0; padding: 11px 15px 12px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb,var(--paper) 88%,transparent); box-shadow: 0 7px 20px rgba(26,62,88,.06); }
.moment-line { display: flex; width: 100%; max-width: 100%; flex-wrap: nowrap; align-items: center; gap: 7px; margin-top: 7px; overflow-x: auto; color: var(--muted); font-size: clamp(.76rem, 1vw, .92rem); line-height: 1.25; scrollbar-width: none; }
.moment-line::-webkit-scrollbar { display: none; }
.moment-line > * { flex: 0 0 auto; }
.moment-place, .moment-date { white-space: nowrap; }
.moment-line strong { color: var(--ink); font-weight: 760; }
.moment-line i { font-style: normal; }
.moment-divider { align-self: stretch; width: 1px; min-height: 24px; margin-inline: 3px; background: color-mix(in srgb, var(--blue) 30%, var(--line)); }
.moment-divider-after-pillar { width: 2px; min-height: 31px; margin-left: 6px; }
.today-button { flex: 0 0 auto; min-height: 29px; padding: 0 11px; color: var(--blue-dark); background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 36%, var(--line)); border-radius: 7px; cursor: pointer; font-size: .74rem; font-weight: 760; }
.today-button:hover { color: white; background: var(--blue); }
.chart-action-group { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; margin: 0 14px 0 5px; }
.chart-action-button { display: grid; width: 32px; height: 32px; min-height: 32px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; transition: background .15s ease,border-color .15s ease,box-shadow .15s ease; }
.chart-action-button:hover:not(:disabled) { box-shadow: 0 3px 9px rgba(17,42,65,.12); }
.chart-action-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.favorite-star-button { color: #a96d00; border-color: color-mix(in srgb,#d29922 50%,var(--line)); background: color-mix(in srgb,#ffd76a 13%,var(--paper)); font-size: 1.15rem; line-height: 1; }
.favorite-star-button:hover:not(:disabled) { background: color-mix(in srgb, #ffd76a 25%, var(--paper)); }
.favorite-star-button.is-pinned { color: #d29922; }
.favorite-star-button:disabled { cursor: default; opacity: .66; }
.share-chart-action { color: #147e7c; border-color: color-mix(in srgb,#1ca9a6 46%,var(--line)); background: color-mix(in srgb,#40c9c5 10%,var(--paper)); }
.share-chart-action:hover { background: color-mix(in srgb,#40c9c5 20%,var(--paper)); }
.fullscreen-chart-action { color: #1178c9; border-color: color-mix(in srgb,#1178c9 44%,var(--line)); background: color-mix(in srgb,#69bfff 10%,var(--paper)); }
.fullscreen-chart-action:hover { background: color-mix(in srgb,#69bfff 20%,var(--paper)); }
.print-chart-action { color: #8055b8; border-color: color-mix(in srgb,#8055b8 44%,var(--line)); background: color-mix(in srgb,#a77add 10%,var(--paper)); }
.print-chart-action:hover { background: color-mix(in srgb,#a77add 20%,var(--paper)); }
.placeholder-chart-action { color: var(--muted); border-style: dashed; background: color-mix(in srgb,var(--muted) 7%,var(--paper)); cursor: help; opacity: .68; }
.placeholder-chart-action:hover { transform: none !important; border-color: var(--muted); box-shadow: none !important; }
.calculation-time { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 9px; }
.civil-time { font-size: clamp(.9rem, 1.25vw, 1.08rem); }
.time-range { flex: 0 0 auto; font-size: clamp(.9rem, 1.25vw, 1.08rem); letter-spacing: .015em; }
.hour-inline { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; min-width: 0; }
.hour-animal, .hour-pillar { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hour-inline small { color: var(--muted); font-size: .72rem; font-weight: 680; }
.hour-animal > b, .hour-pillar > b { display: inline-flex; gap: .16em; font-family: "Noto Serif CJK TC", "Noto Serif CJK SC", SimSun, serif; font-size: 1.35rem; line-height: 1; }
.hour-pillar > b { font-size: 1.55rem; }
.hour-divider { align-self: stretch; width: 2px; min-height: 31px; background: color-mix(in srgb, var(--blue) 30%, var(--line)); }
.calculation-time i { font-style: normal; }
.moment-note { margin-top: 6px; color: var(--muted); font-size: .72rem; }
.view-hint { color: var(--muted); font-size: .78rem; }
.flip-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; color: var(--blue-dark); background: var(--blue-soft); border: 1px solid rgba(17,120,201,.25); border-radius: 9px; }
.flip-button:hover { background: #d9edfb; }
.flip-button:disabled { opacity: .48; cursor: not-allowed; filter: grayscale(.25); }
.flip-button[aria-pressed="true"] .flip-icon { transform: rotate(180deg); }
.flip-icon { font-size: 1.1rem; transition: transform .45s ease; }

.calculation-workspace { display: grid; grid-template-columns: minmax(286px, 38.2fr) minmax(0, 61.8fr); gap: 16px; align-items: start; width: 100%; min-width: 0; }
.pillar-panel, .chart-panel { border-radius: 16px; }
.pillar-panel { padding: 19px; }
.chart-panel { width: min(100%, 980px); max-width: 100%; padding: 16px; min-width: 0; overflow: clip; justify-self: start; }
.panel-title h2, .chart-caption h2 { margin-top: 4px; font-size: 1.05rem; }

.pillar-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 17px 0; }
.pillar {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  background: var(--paper);
  border: 1px solid #cfd7db;
  border-radius: 8px;
}
.pillar.is-active { border-color: #3f6f89; box-shadow: 0 0 0 1px #3f6f89; }
.pillar-title { padding: 7px 3px; color: white; background: var(--qimen-frame); font-size: .75rem; font-weight: 760; }
.pillar.is-active .pillar-title { background: var(--qimen-frame); }
.pillar-element { min-height: 34px; display: grid; place-items: center; padding: 4px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .68rem; line-height: 1.12; }
.pillar-symbol { display: grid; place-items: center; min-height: 68px; font-family: "Noto Serif CJK SC", SimSun, serif; font-size: clamp(2.25rem, 4.3vw, 3.25rem); line-height: 1; }
.pillar-symbol + .pillar-symbol { border-top: 1px solid var(--line); }
.pillar-animal { min-height: 38px; display: grid; place-items: center; padding: 4px 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: .67rem; line-height: 1.15; }

.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: .72rem; }
.facts dd { font-size: .8rem; font-weight: 650; line-height: 1.35; }
.focus-box { margin-top: 14px; padding: 12px; border: 1px solid rgba(17,120,201,.2); border-radius: 10px; background: var(--blue-soft); }
.focus-box span { display: block; margin-bottom: 5px; color: var(--blue-dark); font-size: .7rem; font-weight: 720; }
.focus-box strong { font-size: .8rem; line-height: 1.45; }

.chart-caption { margin-bottom: 13px; }
.legend { display: flex; gap: 12px; color: var(--muted); font-size: .73rem; }
.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; }
.day-dot { background: var(--day); }
.hour-dot { background: var(--hour); }

.map-frame { position: relative; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 7px; border: 1px solid rgba(83,196,238,.32); border-radius: 13px; color: white; background: var(--qimen-frame); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 28px rgba(18,57,89,.2); }
.map-middle { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: stretch; }
.compass { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.82); font-family: "Noto Serif CJK SC", SimSun, serif; font-size: .77rem; }
.compass b { color: white; font-family: Inter, sans-serif; font-size: .67rem; letter-spacing: .03em; }
.compass-top, .compass-bottom { min-height: 31px; padding: 0 2px; }
.compass-side { flex-direction: column; padding: 13px 0; }

.palace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; min-width: 0; perspective: 1800px; }
.palace-card {
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.08 / 1;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: default;
  perspective: 900px;
  text-align: left;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
}
.palace-card:focus-visible { outline: 3px solid #50b7ff; outline-offset: 2px; }
.palace-inner { display: block; position: relative; width: 100%; height: 100%; border-radius: 7px; background: var(--paper); }
.palace-card.is-flipped .palace-inner { transform: none; }
.palace-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(100,88,76,.15);
  border-radius: 7px;
  opacity: 0;
  transform: scale(.992);
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
  background:
    radial-gradient(circle at 50% 45%, rgba(128,81,38,.035), transparent 45%),
    var(--paper);
}
.palace-front { z-index: 2; opacity: 1; transform: scale(1); }
.palace-back { z-index: 1; background: linear-gradient(145deg, #fffdf7, var(--paper-warm)); }
.palace-card.is-flipped .palace-front { z-index: 1; opacity: 0; transform: scale(.992); }
.palace-card.is-flipped .palace-back { z-index: 2; opacity: 1; transform: scale(1); }
.palace-face.focus-day { box-shadow: inset 0 0 0 2px var(--day); }
.palace-face.focus-hour { outline: 2px solid var(--hour); outline-offset: -4px; }
.palace-card.center .palace-face { background: linear-gradient(145deg, #f6f1e8, #fbf9f4); }

.symbol { position: absolute; z-index: 4; display: grid; width: 31%; gap: 1px; place-items: center; text-align: center; cursor: help; }
.symbol b { font-family: "Noto Serif CJK SC", SimSun, "Times New Roman", serif; font-size: clamp(1.55rem, 3.2vw, 2.85rem); font-weight: 520; line-height: 1; }
.symbol small { width: 100%; overflow: hidden; color: var(--muted); font-family: Inter, sans-serif; font-size: clamp(.54rem, .75vw, .67rem); font-weight: 650; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.symbol.deity { top: 13%; left: 1.5%; }
.symbol.gate { top: 13%; left: 34.5%; }
.symbol.heaven { top: 13%; right: 1.5%; }
.symbol.star { bottom: 21%; left: 1.5%; }
.symbol.earth-stem { right: 1.5%; bottom: 21%; }
.palace-name { position: absolute; left: 9px; bottom: 7px; color: #675e55; font-size: clamp(.58rem, .8vw, .72rem); font-weight: 760; }
.palace-flags { position: absolute; right: 8px; bottom: 7px; display: flex; gap: 4px; }
.mini-flag { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; color: white; font-size: .54rem; font-style: normal; font-weight: 800; }
.mini-flag.day { background: var(--day); }
.mini-flag.hour { background: var(--hour); }
.mini-flag.chief { background: var(--blue); }
.flag-short { display: none; }

.center-front { position: absolute; inset: 0; display: grid; place-content: center; gap: 5px; padding: 12px; text-align: center; }
.center-front b { color: var(--frame-dark); font-size: clamp(1.05rem, 1.8vw, 1.45rem); }
.center-front span { color: var(--muted); font-size: clamp(.58rem, .83vw, .73rem); }
.center-front .chart-number-label { color: var(--blue-dark); font-weight: 800; letter-spacing: .02em; }
.center-stem { color: var(--water); font-family: "Noto Serif CJK SC", SimSun, serif; font-size: calc(clamp(1.55rem, 3.2vw, 2.85rem) * var(--symbol-scale, 1)) !important; font-style: normal; font-weight: 620; line-height: 1; }
.alternative-center-pillars { display: none; }

html[data-chart-view="alternative"] .calculation-workspace { grid-template-columns: minmax(0, 1fr); }
html[data-chart-view="alternative"] .pillar-panel { display: none !important; }
html[data-chart-view="alternative"] .chart-panel { width: 100%; max-width: none; justify-self: stretch; }
html[data-chart-view="alternative"] .alternative-center-pillars {
  position: absolute;
  top: 7%;
  left: 6%;
  right: 6%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(3px, .6vw, 8px);
  color: var(--ink);
}
html[data-chart-view="alternative"] .palace-grid .symbol b { font-size: calc(clamp(1.62rem, 3.35vw, 2.98rem) * var(--symbol-scale, 1)); }
html[data-chart-view="alternative"] .alternative-center-pillar { display: grid; grid-template-rows: auto auto 1fr 1fr; gap: 2px; min-width: 0; place-items: center; }
html[data-chart-view="alternative"] .alternative-center-label { margin-bottom: 7px; color: var(--muted); font: 800 clamp(.5rem, .76vw, .68rem)/1.1 system-ui; letter-spacing: .02em; }
html[data-chart-view="alternative"] .alternative-center-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; width: 100%; }
html[data-chart-view="alternative"] .alternative-center-nav button { display: grid; width: 100%; min-width: 0; height: clamp(10px, 1.15vw, 15px); margin-bottom: 6px; padding: 0; place-items: center; border: 1px solid color-mix(in srgb,var(--blue) 30%,var(--line)); border-radius: 4px; color: var(--blue-dark); background: color-mix(in srgb,var(--blue-soft) 56%,var(--paper)); cursor: pointer; font: 800 clamp(.42rem, .64vw, .58rem)/1 system-ui; }
html[data-chart-view="alternative"] .alternative-center-nav button:hover { border-color: var(--blue); background: var(--blue-soft); }
html[data-chart-view="alternative"] .alternative-center-pillar > b { font-family: "Noto Serif CJK SC", SimSun, serif; font-size: clamp(1.2rem, 2.7vw, 2.65rem); font-weight: 580; line-height: .96; }
html[data-chart-view="alternative"] .alternative-center-pillar > b.wood { color: var(--wood); }
html[data-chart-view="alternative"] .alternative-center-pillar > b.fire { color: var(--fire); }
html[data-chart-view="alternative"] .alternative-center-pillar > b.earth { color: var(--earth); }
html[data-chart-view="alternative"] .alternative-center-pillar > b.metal { color: var(--metal); }
html[data-chart-view="alternative"] .alternative-center-pillar > b.water { color: var(--water); }
html[data-chart-view="alternative"] .center-front { display: block; padding: 0; }
html[data-chart-view="alternative"] .center-front > .chart-number-label,
html[data-chart-view="alternative"] .center-front > .center-pattern { position: absolute; left: 8%; right: 8%; display: block; text-align: center; }
html[data-chart-view="alternative"] .center-front > .chart-number-label { bottom: 34%; font-size: clamp(.62rem, 1vw, .95rem); }
html[data-chart-view="alternative"] .center-front > .center-pattern { bottom: 22%; font-size: clamp(.86rem, 1.55vw, 1.45rem); }
html[data-chart-view="alternative"] #palace-grid .center-front > .center-stem { right: 8px; bottom: 7px; font-size: clamp(1rem, 1.8vw, 1.75rem) !important; }
html[data-chart-view="alternative"] .center-method,
html[data-chart-view="alternative"] .center-chart-type { display: none; }

.back-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 7px; border-bottom: 1px solid var(--line); }
.back-head strong { font-size: clamp(.72rem, 1vw, .88rem); }
.back-head span { color: var(--muted); font-size: clamp(.58rem, .78vw, .68rem); }
.back-list { display: grid; gap: 5px; }
.back-row { display: grid; grid-template-columns: 38px 1fr; gap: 5px; line-height: 1.18; }
.back-row span { color: var(--muted); font-size: clamp(.53rem, .72vw, .63rem); }
.back-row b { color: var(--ink); font-size: clamp(.57rem, .77vw, .69rem); font-weight: 650; }
.future-slot { position: absolute; left: 12px; right: 12px; bottom: 9px; color: #8c8175; font-size: clamp(.51rem, .7vw, .61rem); font-style: italic; }
.state-line { display: block; margin-top: 7px; color: var(--muted); font-size: clamp(.52rem, .72vw, .64rem); line-height: 1.25; }
.state-line b { color: var(--ink); }

.wood { color: var(--wood); }
.fire { color: var(--fire); }
.earth { color: var(--earth); }
.metal { color: var(--metal); }
.water { color: var(--water); }

.card-help { margin-top: 10px; color: var(--muted); text-align: center; font-size: .72rem; }
.trace { margin-top: 16px; padding: 0 19px; border-radius: 14px; }
.trace summary { padding: 15px 0; color: var(--blue-dark); font-size: .85rem; font-weight: 730; cursor: pointer; }
.trace ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 0 0 13px; padding: 0; list-style: none; counter-reset: trace; }
.trace li { counter-increment: trace; padding: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; font-size: .7rem; line-height: 1.4; }
.trace li::before { content: counter(trace); display: grid; place-items: center; width: 19px; height: 19px; margin-bottom: 6px; color: white; background: var(--blue); border-radius: 50%; font-size: .6rem; font-weight: 800; }
.trace li strong { color: var(--ink); }
.trace > p { margin-bottom: 15px; color: var(--muted); font-size: .7rem; }

@media (max-width: 1160px) {
  .controls { grid-template-columns: repeat(3, 1fr); }
  .calculate-button { min-height: 45px; }
  .calculation-workspace { grid-template-columns: 1fr; }
  .chart-panel { order: -1; }
  .pillar-panel { display: grid; grid-template-columns: minmax(280px, .75fr) 1fr; gap: 17px; }
  .pillar-panel .panel-title { grid-column: 1 / -1; }
  .workspace-module-launchers { grid-column: 1 / -1; }
  .pillar-board { margin: 0; }
  .focus-box { grid-column: 2; }
  .trace ol { grid-template-columns: repeat(3, 1fr); }
  .symbol b { font-size: clamp(1.8rem, 5vw, 3rem); }
  .signal-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .shared-header-controls { justify-content: flex-start; }
  .app-shell { width: min(100% - 18px, 1520px); padding-top: 14px; }
  .version, .browser-badge, .view-hint { display: none; }
  .control-panel, .pillar-panel, .chart-panel { border-radius: 12px; padding: 14px; }
  .control-heading { align-items: flex-start; flex-direction:column; }
  .calculator-source-switch { width:100%; }
  .controls { grid-template-columns: 1fr 1fr; }
  .date-control, .time-control, .city-control, .method-control, .solar-control, .rat-control, .calculate-button { grid-column: 1 / -1; }
  .solar-control, .rat-control { justify-content: flex-start; }
  .result-toolbar { align-items: flex-end; gap: 10px; }
  .result-toolbar h2 { font-size: 1rem; }
  .flip-button { min-height: 38px; padding: 0 11px; }
  .flip-label { font-size: .75rem; }
  .chart-panel { padding-inline: 7px; }
  .chart-caption { padding-inline: 7px; }
  .map-frame { padding-inline: 5px; }
  .map-middle { grid-template-columns: 22px minmax(0, 1fr) 22px; }
  .compass { font-size: .65rem; }
  .compass b { font-size: .57rem; }
  .palace-grid { gap: 2px; }
  .palace-card { border-radius: 4px; }
  .palace-face { border-radius: 4px; }
  .symbol b { font-size: clamp(1.08rem, 6.6vw, 1.75rem); }
  .symbol small { display: none; }
  .palace-name { left: 5px; bottom: 4px; font-size: .5rem; }
  .palace-flags { right: 4px; bottom: 3px; gap: 2px; }
  .mini-flag { min-width: 14px; height: 14px; padding: 0 3px; font-size: .45rem; }
  .palace-back { padding: 0; }
  .back-head { padding-bottom: 4px; margin-bottom: 4px; }
  .back-head strong { font-size: .58rem; }
  .back-head span, .future-slot { display: none; }
  .state-line { margin-top: 3px; font-size: .44rem; }
  .back-list { gap: 2px; }
  .back-row { grid-template-columns: 23px 1fr; gap: 2px; }
  .back-row span { font-size: .44rem; }
  .back-row b { font-size: .47rem; }
  .pillar-panel { display: block; }
  .pillar-board { margin: 15px 0; }
  .pillar-symbol { min-height: 60px; font-size: 2.2rem; }
  .focus-box { margin-top: 13px; }
  .trace ol { grid-template-columns: 1fr; }
  html[data-chart-view="alternative"] .alternative-center-pillars { top: 5%; left: 4%; right: 4%; gap: 1px; }
  html[data-chart-view="alternative"] .alternative-center-pillar { gap: 0; }
  html[data-chart-view="alternative"] .alternative-center-label { margin-bottom: 4px; font-size: clamp(.38rem, 1.9vw, .55rem); }
  html[data-chart-view="alternative"] .alternative-center-nav { gap: 1px; }
  html[data-chart-view="alternative"] .alternative-center-nav button { height: clamp(7px, 2.2vw, 10px); margin-bottom: 4px; border-radius: 2px; font-size: clamp(.32rem, 1.35vw, .42rem); }
  html[data-chart-view="alternative"] .alternative-center-pillar > b { font-size: clamp(.78rem, 4.2vw, 1.3rem); }
  html[data-chart-view="alternative"] .center-front > .chart-number-label { bottom: 35%; font-size: clamp(.42rem, 2vw, .62rem); }
  html[data-chart-view="alternative"] .center-front > .center-pattern { bottom: 22%; font-size: clamp(.54rem, 2.8vw, .8rem); }
  html[data-chart-view="alternative"] #palace-grid .center-front > .center-stem { right: 4px; bottom: 4px; font-size: clamp(.68rem, 3.2vw, 1rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .palace-face, .flip-icon, .calculate-button { transition: none; }
}

/* Extensible appearance controls */
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0b111a;
  --paper: #172330;
  --paper-warm: #1e2b39;
  --ink: #eef3f7;
  --muted: #bac5ce;
  --line: #3a4b5d;
  --blue-soft: #1a3b53;
  --frame: #606b7c;
  --frame-dark: #c5cfda;
  --wood: #59c97b;
  --fire: #ff6e67;
  --earth: #d7a85d;
  --metal: #c5d0d9;
  --water: #58b8ff;
  --shadow: 0 20px 55px rgba(0,0,0,.28);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 92% 0%, rgba(17,120,201,.13), transparent 34rem),
    linear-gradient(180deg, #0d1420, var(--canvas) 25rem);
}
html[data-theme="dark"] .control-panel,
html[data-theme="dark"] .pillar-panel,
html[data-theme="dark"] .chart-panel,
html[data-theme="dark"] .service-panel,
html[data-theme="dark"] .analytics-panel,
html[data-theme="dark"] .trace,
html[data-theme="dark"] .release-log,
html[data-theme="dark"] .reference-entry-panel,
html[data-theme="dark"] .filters-panel { background: rgba(21,31,43,.97); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] .method-segmented { color: var(--ink); background: #1b2938; }
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .flip-button,
html[data-theme="dark"] .today-button { color: #8ad0ff; border-color: #456078; background: #1b2d3d; }
html[data-theme="dark"] .version { color: #dce8f2; border-color: #456078; background: #1b2d3d; }
html[data-theme="dark"] .method-segmented button:not(.is-active):not(.is-same),
html[data-theme="dark"] .segment:not(.is-active),
html[data-theme="dark"] .display-presets button,
html[data-theme="dark"] .school-button.is-active { color: #8ad0ff; }
html[data-theme="dark"] .segment:not(.is-active) small { color: #ff9f94; }
html[data-theme="dark"] .method-segmented button.is-same { color: #ffb5bf; background: #512832; box-shadow: inset 0 0 0 1px #a94b59; }
html[data-theme="dark"] .palace-face { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.025), transparent 45%), var(--paper); }
html[data-theme="dark"] .palace-back,
html[data-theme="dark"] .palace-card.center .palace-face { background: linear-gradient(145deg, #18212d, #111923); }
html[data-theme="dark"] .pillar { background: #111925; border-color: #344252; }
html[data-theme="dark"] .pillar-title { background: var(--qimen-frame); }
html[data-theme="dark"] .palace-name,
html[data-theme="dark"] .center-front b,
html[data-theme="dark"] .future-slot { color: #b7c1ca; }
html[data-theme="dark"] .center-front .chart-number-label { color: #69bfff; }
html[data-theme="dark"] .focus-row em,
html[data-theme="dark"] .analysis-chip-list em,
html[data-theme="dark"] .analysis-focus-card > header em,
html[data-theme="dark"] .analysis-step[open] summary,
html[data-theme="dark"] .analysis-stop b,
html[data-theme="dark"] .methodology-placeholder b,
html[data-theme="dark"] .pinned-open strong,
html[data-theme="dark"] .pinned-action { color: #a9dcff; }
html[data-theme="dark"] .analysis-step[open] summary { background: #203b50; }
html[data-theme="dark"] .analysis-chip-list > span,
html[data-theme="dark"] .analysis-stop,
html[data-theme="dark"] .methodology-placeholder { background: #1c3345; }

html[data-theme="chinese"] {
  color-scheme: light;
  --canvas: #efe5cf;
  --paper: #fffaf0;
  --paper-warm: #f3e5c6;
  --ink: #2d231b;
  --muted: #756452;
  --line: #cbb996;
  --frame: #8d2f2b;
  --frame-dark: #671d1d;
  --blue: #a52f2b;
  --blue-dark: #7e211f;
  --blue-soft: #f4ded2;
  --qimen-frame: linear-gradient(145deg, #7e211f, #9c302a 52%, #4f1d22);
  --shadow: 0 18px 46px rgba(81,43,24,.14);
}
html[data-theme="chinese"] body {
  background:
    linear-gradient(90deg, rgba(145,43,38,.035) 1px, transparent 1px),
    linear-gradient(rgba(145,43,38,.035) 1px, transparent 1px),
    radial-gradient(circle at 88% 0%, rgba(176,129,44,.16), transparent 32rem),
    linear-gradient(180deg, #fff9ec, var(--canvas));
  background-size: 32px 32px, 32px 32px, auto, auto;
}
html[data-theme="chinese"] .control-panel,
html[data-theme="chinese"] .pillar-panel,
html[data-theme="chinese"] .chart-panel,
html[data-theme="chinese"] .service-panel,
html[data-theme="chinese"] .analytics-panel,
html[data-theme="chinese"] .trace,
html[data-theme="chinese"] .reference-entry-panel,
html[data-theme="chinese"] .filters-panel { background: rgba(255,250,240,.95); }
html[data-theme="chinese"] .brand-mark { border-radius: 4px; background: linear-gradient(145deg, #bd3b32, #7e211f); box-shadow: inset 0 0 0 2px rgba(255,221,151,.55), 0 7px 20px rgba(126,33,31,.22); }
html[data-theme="chinese"] .map-frame { border-color: rgba(222,183,98,.62); background: var(--qimen-frame); }
html[data-theme="chinese"] .palace-card.center .palace-face,
html[data-theme="chinese"] .palace-back { background: linear-gradient(145deg, #f2e3c5, #fff9ec); }
html[data-theme="chinese"] .pillar-title { background: var(--qimen-frame); }

.service-panel, .analytics-panel { margin-top: 16px; border-radius: 16px; padding: 18px 20px; }
.analytics-panel.info-disclosure { padding: 0; }
.workspace-module-launchers { display: grid; gap: 10px; margin-top: 14px; }
.workspace-module-launcher { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--blue-dark); background: color-mix(in srgb,var(--paper) 92%,var(--blue-soft)); cursor: pointer; text-align: left; }
.workspace-module-launcher:hover,.workspace-module-launcher.is-active { border-color: color-mix(in srgb,var(--blue) 55%,var(--line)); background: var(--blue-soft); }
.workspace-module-launcher .disclosure-title { display: grid; min-width: 0; gap: 3px; }
.workspace-module-launcher b { color: var(--blue-dark); font-size: .88rem; line-height: 1.25; }
.workspace-module-launcher .disclosure-hint { overflow: hidden; color: var(--muted); font-size: .82rem; font-weight: 520; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.workspace-module-launcher > i { flex: 0 0 auto; color: var(--blue); font-size: 1.35rem; font-style: normal; font-weight: 800; line-height: 1; transform: rotate(90deg); transition: transform .18s ease; }
.workspace-module-launcher[aria-expanded="true"] > i { transform: rotate(-90deg); }
.workspace-expansions { width: 100%; min-width: 0; }
.workspace-expansion-panel { width: 100%; margin-top: 16px; }
.workspace-expansion-panel[hidden] { display: none; }
.filters-panel.workspace-expansion-panel { padding: 18px 20px; }
.workspace-expansion-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.workspace-expansion-heading .disclosure-title { display: inline-flex; align-items: baseline; min-width: 0; gap: .35em; }
.workspace-expansion-heading b { color: var(--blue-dark); font-size: 1rem; }
.workspace-expansion-heading .disclosure-hint { color: var(--muted); font-size: .82rem; }
.workspace-expansion-heading > button { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--paper); cursor: pointer; font-size: 1.15rem; }
.workspace-expansion-heading > button:hover { border-color: var(--blue); color: var(--blue-dark); }
.analytics-disclosure-body { padding: 0; }
.service-heading, .analytics-heading, .module-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.service-heading h2, .analytics-heading h2 { margin-top: 4px; font-size: 1.05rem; }
.service-heading > small { color: var(--muted); font-size: .65rem; }
.service-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-facts div { min-width: 0; padding: 11px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-facts dt { margin-bottom: 5px; color: var(--muted); font-size: .68rem; }
.service-facts dd { font-size: .78rem; font-weight: 680; line-height: 1.35; }
.module-badge, .premium-label, .module-version { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border: 1px solid rgba(17,120,201,.25); border-radius: 999px; color: var(--blue-dark); background: var(--blue-soft); font-size: .64rem; font-weight: 750; }
.analytics-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 16px; overflow: visible; }
.analytics-tab { display: grid; flex: 1 1 135px; max-width: 210px; min-height: 46px; place-content: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--paper); cursor: pointer; }
.analytics-tab.group-people { background: color-mix(in srgb, #5aa6d9 7%, var(--paper)); }
.analytics-tab.group-resources { background: color-mix(in srgb, #d6a13a 7%, var(--paper)); }
.analytics-tab.group-situational { background: color-mix(in srgb, #8d70b9 6%, var(--paper)); }
.analytics-tab.is-ready { border-color: color-mix(in srgb, #2f9360 34%, var(--line)); background: color-mix(in srgb, #63c88f 13%, var(--paper)); }
.analytics-tab.is-source { border-color: color-mix(in srgb, #b38324 34%, var(--line)); background: color-mix(in srgb, #e3bd66 13%, var(--paper)); }
.analytics-tab.is-development { border-color: color-mix(in srgb, #c65b63 29%, var(--line)); background: color-mix(in srgb, #df777d 11%, var(--paper)); }
.analytics-tab:hover { filter: brightness(.98); }
.analytics-tab.is-ready.is-active { color: white; border-color: #287b50; background: linear-gradient(145deg, #3f9d68, #256d49); box-shadow: 0 8px 20px rgba(39,122,79,.2); }
.analytics-tab.is-source.is-active { color: white; border-color: #936d21; background: linear-gradient(145deg, #bd8e32, #7f5d1c); box-shadow: 0 8px 20px rgba(127,93,28,.2); }
.analytics-tab.is-development.is-active { color: white; border-color: #a4454d; background: linear-gradient(145deg, #c8646b, #963b44); box-shadow: 0 8px 20px rgba(150,59,68,.18); }
.analytics-tab span { font-size: .88rem; font-weight: 760; }
.analytics-content { margin-top: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--paper) 88%, var(--canvas)); }
.analytics-content[hidden] { display: none; }
.reference-admin-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 11px; color: var(--ink); background: color-mix(in srgb, var(--blue-soft) 72%, var(--paper)); text-decoration: none; }
.reference-admin-link[hidden] { display: none; }
.reference-admin-link:hover { border-color: var(--blue); transform: translateY(-1px); }
.reference-admin-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--blue); font-family: "Noto Serif CJK TC", SimSun, serif; font-size: 1.15rem; }
.reference-admin-link b, .reference-admin-link small { display: block; }
.reference-admin-link b { font-size: .86rem; }
.reference-admin-link small { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.reference-entry-panel, .filters-panel { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.reference-entry-panel[hidden] { display: none; }
.reference-direct-link { min-height: 66px; padding: 10px 15px; text-decoration: none; }
.reference-direct-link > span:last-child { margin-left: auto; color: var(--blue); font-size: 1.15rem; font-weight: 800; }
.disclosure-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.reference-entry-panel .reference-admin-link { margin-top: 14px; }
.filters-body { display: grid; gap: 12px; padding-top: 14px; }
.filter-module-button { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 2px 11px; min-height: 54px; padding: 8px 13px; border: 1px solid color-mix(in srgb,var(--blue) 30%,var(--line)); border-radius: 10px; color: var(--ink); background: color-mix(in srgb,var(--blue-soft) 55%,var(--paper)); text-align: left; cursor: pointer; }
.filter-module-button > span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: white; background: var(--blue); font-family: "Noto Serif CJK TC",SimSun,serif; font-size: 1.05rem; }
.filter-module-button b { font-size: .82rem; }
.filter-module-button small { color: var(--muted); font-size: .66rem; }
.structure-search-panel { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb,var(--canvas) 50%,var(--paper)); }
.structure-search-panel[hidden] { display: none; }
.structure-search-controls { display: grid; grid-template-columns: minmax(260px,1fr) auto; align-items: end; gap: 10px; }
.structure-search-controls .calculate-button { min-width: 145px; }
.structure-search-status { margin-top: 11px; color: var(--muted); font-size: .75rem; }
.structure-search-status b { color: var(--blue-dark); font-family: "Noto Serif CJK TC",SimSun,serif; font-size: 1rem; }
.structure-search-results { display: grid; grid-template-columns: repeat(auto-fill,minmax(185px,1fr)); gap: 7px; margin-top: 11px; }
.structure-search-results article { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.structure-search-results b, .structure-search-results span, .structure-search-results small { display: block; }
.structure-search-results b { font-size: .72rem; }
.structure-search-results span { margin-top: 3px; color: var(--ink); font-size: .67rem; }
.structure-search-results small { margin-top: 3px; color: var(--muted); font-size: .59rem; }
.module-intro h3 { margin: 7px 0 4px; font-size: 1rem; }
.module-intro p, .focus-preset p, .module-result-preview p, .module-placeholder p { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.focus-preset { display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: 18px; align-items: center; margin-top: 14px; padding: 12px; border: 1px solid rgba(17,120,201,.2); border-radius: 10px; background: var(--blue-soft); }
.focus-preset > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.focus-preset small { width: 100%; color: var(--blue-dark); font-size: .65rem; font-weight: 750; }
.focus-preset strong { padding: 5px 8px; border-radius: 7px; color: white; background: var(--blue); font-size: .68rem; }
.signal-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 14px 0 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; }
.signal-selector legend { padding: 0 7px; color: var(--muted); font-size: .68rem; font-weight: 720; }
.signal-option { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); cursor: pointer; font-size: .68rem; }
.signal-option input { width: 15px; min-height: 15px; margin: 0; accent-color: var(--blue); }
.signal-option small { grid-column: 2; color: var(--muted); font-size: .55rem; }
.signal-option.is-future { opacity: .58; cursor: not-allowed; }
.module-result-preview, .module-placeholder { margin-top: 13px; padding: 12px; border-left: 3px solid var(--blue); background: var(--paper); }
.module-result-preview b, .module-placeholder b { display: block; margin-bottom: 4px; font-size: .75rem; }

.structures-intro { align-items: center; }
.structure-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.structure-legend > span { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; font-size: .62rem; font-weight: 760; }
.structure-legend > small { margin-left: auto; color: var(--muted); font-size: .62rem; }
.structure-legend .rating-favorable { color: #17643b; border-color: rgba(39,140,84,.35); background: rgba(77,181,111,.14); }
.structure-legend .rating-unfavorable { color: #8d3038; border-color: rgba(185,67,78,.34); background: rgba(213,90,99,.13); }
.structure-legend .rating-neutral { color: var(--muted); border-color: var(--line); background: color-mix(in srgb, var(--paper-warm) 80%, var(--canvas)); }

.structures-layout { display: grid; grid-template-columns: minmax(310px, .9fr) minmax(390px, 1.1fr); gap: 15px; align-items: start; margin-top: 13px; }
.structure-map-panel { position: sticky; top: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.structure-map-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.structure-map-heading strong { font-size: .76rem; }
.structure-map-heading small { max-width: 66%; color: var(--muted); font-size: .58rem; line-height: 1.35; text-align: right; }
.structure-mini-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 5px; border-radius: 10px; background: linear-gradient(145deg, #0a688d 0%, #164f79 48%, #14355c 100%); }
.structure-mini-palace { appearance: none; position: relative; width: 100%; min-width: 0; aspect-ratio: 1.08 / 1; overflow: hidden; border: 1px solid transparent; border-radius: 5px; color: var(--ink); background: var(--paper); cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.structure-mini-palace:disabled { cursor: default; opacity: 1; }
.structure-mini-palace.rating-favorable { background: color-mix(in srgb, #58bd78 8%, var(--paper)); }
.structure-mini-palace.rating-unfavorable { background: color-mix(in srgb, #df6a72 8%, var(--paper)); }
.structure-mini-palace.rating-neutral { background: color-mix(in srgb, #d2cec4 6%, var(--paper)); }
.structure-mini-palace.center { background: linear-gradient(145deg, var(--paper-warm), var(--paper)); }
.structure-mini-palace .symbol b { font-size: clamp(.82rem, 1.45vw, 1.55rem); }
.structure-mini-palace .symbol small { display: none; }
.structure-mini-palace .palace-name { left: 5px; bottom: 4px; font-size: .48rem; }
.structure-mini-palace .palace-flags { right: 4px; bottom: 3px; }
.structure-mini-palace .mini-flag { min-width: 13px; height: 13px; padding: 0 3px; font-size: .42rem; }
.structure-mini-palace .strength-mark { display: none; }
.structure-mini-palace .center-front { gap: 2px; padding: 6px; }
.structure-mini-palace .center-front b { font-size: .78rem; }
.structure-mini-palace .center-front span { font-size: .43rem; }
.structure-mini-palace .center-stem { font-size: 1.15rem !important; }
.structure-mini-palace .palace-corner-marks { right: 4px; bottom: 20px; }
.structure-mini-palace.is-day-focus { box-shadow: inset 0 0 0 3px var(--day); }
.structure-mini-palace.is-hour-focus { z-index: 4; border: 0; border-radius: 0; background: color-mix(in srgb, #3998d6 11%, var(--paper)); clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%); box-shadow: inset 0 0 0 3px #267db6; }
.structure-mini-palace.is-hour-focus::after { content: ""; position: absolute; top: 6px; right: -3px; z-index: 12; width: 22px; height: 4px; pointer-events: none; background: #267db6; transform: rotate(45deg); }
.structure-mini-palace.is-structure-selected { z-index: 3; transform: translateY(-1px); }
.structure-mini-palace.is-structure-selected:not(.is-hour-focus) { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--blue) 80%, var(--ink)); }
.structure-mini-palace.is-day-focus.is-structure-selected:not(.is-hour-focus) { box-shadow: inset 0 0 0 3px var(--day), inset 0 0 0 6px color-mix(in srgb, var(--blue) 76%, transparent); }
.structure-mini-palace.is-structure-selected .symbol.heaven b,
.structure-mini-palace.is-structure-selected .symbol.earth-stem b { transform: scale(1.08); border-color: currentColor; background: color-mix(in srgb, currentColor 10%, var(--paper)); box-shadow: 0 2px 8px color-mix(in srgb, currentColor 28%, transparent); }
.structure-stack-count { position: absolute; top: 4px; right: 4px; z-index: 8; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: var(--blue-dark); font-size: .52rem; font-weight: 820; }

.structure-list { display: grid; gap: 7px; overflow: visible; }
.structure-card { appearance: none; display: grid; gap: 5px; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 9px; color: var(--ink); background: var(--paper); cursor: pointer; text-align: left; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.structure-card:hover, .structure-card:focus-visible, .structure-card.is-current { transform: translateY(-1px); box-shadow: 0 7px 17px rgba(24,33,39,.1); }
.structure-card.rating-favorable { border-left-color: #31935a; }
.structure-card.rating-unfavorable { border-left-color: #c64e58; }
.structure-card.rating-neutral { border-left-color: #aaa59b; }
.structure-card.rating-favorable.is-current { border-color: #31935a; background: color-mix(in srgb, #4db56f 10%, var(--paper)); }
.structure-card.rating-unfavorable.is-current { border-color: #c64e58; background: color-mix(in srgb, #d55a63 9%, var(--paper)); }
.structure-card.rating-neutral.is-current { border-color: #aaa59b; background: color-mix(in srgb, #c9c5bb 10%, var(--paper)); }
.structure-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.structure-code { display: inline-flex; min-width: 0; align-items: center; gap: 7px; }
.structure-code b { display: grid; min-width: 31px; height: 25px; place-items: center; border-radius: 6px; color: #fff; background: var(--blue-dark); font-size: .64rem; }
.structure-code strong { flex: 0 0 auto; font-family: "Noto Serif CJK SC", SimSun, serif; font-size: 1.12rem; font-weight: 600; letter-spacing: .08em; }
.structure-code > i { flex: 0 0 auto; color: var(--muted); font-style: normal; }
.structure-location { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .61rem; font-weight: 700; }
.structure-focus-badge { display: inline-grid; min-height: 18px; place-items: center; padding: 0 6px; border-radius: 999px; color: white; font-size: .51rem; }
.structure-focus-badge.day { background: var(--day); }
.structure-focus-badge.hour { background: var(--hour); }
.structure-title { min-width: 0; font-size: .72rem; font-weight: 790; line-height: 1.25; }
.structure-description { direction: ltr; color: var(--muted); font-size: .68rem; line-height: 1.48; text-align: left; }

.analysis-template-intro { align-items: center; }
.analysis-workspace { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(390px, 1.1fr); gap: 15px; align-items: start; margin-top: 14px; }
.analysis-left-rail { position: sticky; top: 12px; display: grid; gap: 11px; min-width: 0; align-self: start; }
.analysis-main-column { display: grid; gap: 14px; min-width: 0; }
.analysis-map-panel, .analysis-focus-panel { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.analysis-mini-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 5px; border-radius: 10px; background: linear-gradient(145deg, #0a688d 0%, #164f79 48%, #14355c 100%); direction: ltr; }
.analysis-mini-palace { position: relative; min-width: 0; aspect-ratio: 1.08 / 1; overflow: hidden; border: 1px solid transparent; border-radius: 5px; color: var(--ink); background: var(--paper); }
.analysis-mini-palace.has-focus { border-color: transparent; background: var(--paper); }
.analysis-mini-palace.center { background: linear-gradient(145deg, var(--paper-warm), var(--paper)); }
.analysis-mini-palace .symbol b { font-size: clamp(.76rem, 1.35vw, 1.42rem); }
.analysis-mini-palace .symbol small, .analysis-mini-palace .strength-mark, .analysis-mini-palace .palace-flags { display: none; }
.analysis-mini-palace .palace-name { left: 5px; bottom: 4px; font-size: .46rem; }
.analysis-mini-palace .palace-corner-marks { right: 4px; bottom: 18px; }
.analysis-mini-palace .center-front { gap: 2px; padding: 6px; }
.analysis-mini-palace .center-front b { font-size: .76rem; }
.analysis-mini-palace .center-front span { font-size: .42rem; }
.analysis-mini-palace .center-stem { font-size: 1.05rem !important; }
.focus-tone-0 { --focus-color: #e55353; }
.focus-tone-1 { --focus-color: #2b89d6; }
.focus-tone-2 { --focus-color: #269a63; }
.focus-tone-3 { --focus-color: #b873d1; }
.focus-tone-4 { --focus-color: #e49b28; }
.focus-tone-5 { --focus-color: #16a4a4; }
.focus-tone-6 { --focus-color: #d05b9d; }
.focus-tone-7 { --focus-color: #7288d8; }
.analysis-focus-symbol > b { padding: 1px 3px; border-radius: 5px; outline: 2px solid var(--focus-color); outline-offset: 1px; background: color-mix(in srgb, var(--focus-color) 13%, var(--paper)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-color) 9%, transparent); }
.analysis-focus-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.analysis-focus-legend > strong { margin-right: 3px; color: var(--muted); font-size: .7rem; }
.analysis-focus-legend > span { display: inline-flex; align-items: center; gap: 5px; min-height: 27px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--focus-color) 42%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--focus-color) 8%, var(--paper)); }
.analysis-focus-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--focus-color); }
.analysis-focus-legend b { font-family: "Noto Serif CJK SC", SimSun, serif; font-size: .72rem; }
.analysis-focus-legend small { color: var(--muted); font-size: .62rem; }
.analysis-section-menu { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.analysis-section-menu strong { padding: 3px 5px 7px; color: var(--muted); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.analysis-section-menu a { min-height: 35px; padding: 8px 9px; border-radius: 7px; color: var(--blue-dark); font-size: .74rem; font-weight: 720; text-decoration: none; }
.analysis-section-menu a:hover, .analysis-section-menu a:focus-visible { background: var(--blue-soft); outline: none; }
.analysis-focus-panel { display: grid; gap: 14px; }
.focus-group { display: grid; gap: 7px; }
.focus-group + .focus-group { padding-top: 12px; border-top: 1px solid var(--line); }
.focus-group h4 { margin: 0; color: var(--muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.focus-group > p { color: var(--muted); font-size: .72rem; }
.focus-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 45px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: color-mix(in srgb, var(--paper) 85%, var(--canvas)); cursor: pointer; }
.focus-row.is-primary { grid-template-columns: minmax(0, 1fr) auto; border-left: 3px solid var(--blue); cursor: default; }
.focus-row input { width: 18px; min-height: 18px; margin: 0; }
.focus-row span { display: grid; min-width: 0; gap: 2px; }
.focus-row b { font-family: "Noto Serif CJK SC", Inter, sans-serif; font-size: .86rem; }
.focus-row small { color: var(--muted); font-size: .65rem; line-height: 1.3; }
.focus-row em { color: var(--blue-dark); font-size: .63rem; font-style: normal; font-weight: 750; white-space: nowrap; }
.analysis-steps { display: grid; gap: 8px; margin-top: 0; }
.analysis-steps > h3 { margin: 0 0 2px; font-size: 1rem; }
.analysis-step { scroll-margin-top: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); overflow: hidden; }
.analysis-step summary { padding: 11px 13px; cursor: pointer; font-size: .78rem; font-weight: 790; }
.analysis-step[open] summary { border-bottom: 1px solid var(--line); color: var(--blue-dark); background: color-mix(in srgb, var(--blue-soft) 54%, var(--paper)); }
.analysis-step-body { padding: 12px; color: var(--ink); font-size: .74rem; line-height: 1.5; }
.analysis-step-body ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.analysis-step-body li i { color: var(--muted); font-style: normal; }
.analysis-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.analysis-facts div { min-width: 0; padding: 8px 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analysis-facts dt { margin-bottom: 3px; color: var(--muted); font-size: .62rem; }
.analysis-facts dd { font-size: .72rem; font-weight: 650; line-height: 1.4; }
.analysis-chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.analysis-chip-list > span { display: grid; min-width: 150px; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--blue) 5%, var(--paper)); }
.analysis-chip-list b { font-size: .88rem; }
.analysis-chip-list em { color: var(--blue-dark); font-size: .62rem; font-style: normal; font-weight: 750; }
.analysis-focus-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.analysis-focus-card { min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--paper) 90%, var(--canvas)); overflow: hidden; }
.analysis-focus-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--paper); }
.analysis-focus-card > header b { font-family: "Noto Serif CJK SC", Inter, sans-serif; font-size: 1rem; }
.analysis-focus-card > header span { color: var(--muted); font-size: .64rem; }
.analysis-focus-card > header em { color: var(--blue-dark); font-size: .62rem; font-style: normal; font-weight: 760; }
.analysis-focus-card > p { padding: 10px; color: var(--muted); font-size: .72rem; }
.analysis-focus-card .analysis-facts { grid-template-columns: 1fr; border: 0; border-radius: 0; }
.analysis-focus-card .analysis-facts div { border-right: 0; }
.focus-card-plain { display: grid; gap: 8px; padding: 11px; }
.focus-card-plain p { margin: 0; color: var(--ink); font-size: .74rem; line-height: 1.52; }
.focus-card-plain p b { color: var(--blue-dark); }
.focus-technical-details { border-top: 1px solid var(--line); }
.focus-technical-details > summary { padding: 9px 11px; color: var(--muted); cursor: pointer; font-size: .67rem; font-weight: 720; }
#analysis-advanced > .analysis-step-body { display: grid; gap: 7px; background: color-mix(in srgb, var(--canvas) 55%, var(--paper)); }
#analysis-advanced > .analysis-step-body > .analysis-step { background: var(--paper); }
.analysis-table-wrap { width: 100%; overflow-x: auto; }
.analysis-table-wrap table { width: 100%; border-collapse: collapse; font-size: .7rem; }
.analysis-table-wrap th, .analysis-table-wrap td { padding: 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.analysis-table-wrap th { color: var(--muted); background: color-mix(in srgb, var(--paper-warm) 70%, var(--paper)); }
.analysis-stop, .methodology-placeholder { display: grid; gap: 4px; padding: 13px; border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--blue-soft) 46%, var(--paper)); }
.analysis-stop b, .methodology-placeholder b { color: var(--blue-dark); font-size: .76rem; }
.analysis-stop span, .methodology-placeholder p { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.methodology-placeholder { margin-top: 15px; }
.source-template-panel { display: grid; gap: 10px; margin-top: 15px; }
.source-template-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #b38324 34%, var(--line)); border-radius: 9px; background: color-mix(in srgb, #e3bd66 10%, var(--paper)); }
.source-template-meta b { color: var(--ink); font-size: .76rem; }
.source-template-meta span { color: var(--muted); font-size: .72rem; }
.source-template-panel details { border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.source-template-panel summary { padding: 11px 13px; color: var(--ink); font-size: .78rem; font-weight: 760; cursor: pointer; }
.source-template-panel ul { display: grid; gap: 7px; margin: 0; padding: 0 18px 13px 30px; color: var(--muted); font-size: .73rem; line-height: 1.5; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.pinned-charts { grid-column: 1 / -1; min-width: 0; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line); }
.pinned-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pinned-heading strong { color: var(--ink); font-size: .78rem; }
.pinned-count { color: var(--muted); font-size: .68rem; font-weight: 760; white-space: nowrap; }
.pinned-list { display: grid; gap: 4px; margin-top: 7px; }
.pinned-card { display: grid; grid-template-columns: auto minmax(0, 1fr) 34px 34px; align-items: center; min-width: 0; min-height: 35px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); overflow: hidden; }
.pinned-card.is-active { border-color: var(--blue); background: color-mix(in srgb, var(--blue-soft) 42%, var(--paper)); }
.pinned-open { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 34px; padding: 5px 8px; border: 0; color: var(--ink); background: transparent; cursor: pointer; }
.pinned-identifiers { display: grid; gap: 2px; text-align: left; }
.pinned-identifiers small { color: var(--muted); font-size: .55rem; font-weight: 720; white-space: nowrap; }
.pinned-open strong { color: var(--blue-dark); font-size: .78rem; white-space: nowrap; }
.pinned-note { overflow: hidden; min-width: 0; color: var(--ink); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.pinned-note.is-empty { color: var(--muted); font-style: italic; }
.pinned-action { align-self: stretch; width: 34px; border: 0; border-left: 1px solid var(--line); color: var(--blue-dark); background: color-mix(in srgb, var(--paper-warm) 68%, var(--paper)); cursor: pointer; font-size: .9rem; }
.pinned-action:hover, .pinned-open:hover { background: var(--blue-soft); }
.pinned-action.remove { color: #b64c4c; font-size: .82rem; }
.pin-edit-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; padding: 7px; border-top: 1px solid var(--line); }
.pin-edit-form[hidden] { display: none; }
.pin-edit-form input { min-width: 0; min-height: 32px; font-size: .7rem; }
.pin-edit-form button { min-height: 32px; padding-inline: 8px; font-size: .66rem; }
.pinned-message { min-height: 0; margin-top: 4px; color: #b64c31; font-size: .64rem; }
.pinned-message:empty { display: none; }

.release-log { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); overflow: hidden; }
.release-log > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; cursor: pointer; list-style: none; }
.release-log > summary::-webkit-details-marker { display: none; }
.release-log > summary b { font-size: .92rem; }
.release-log > summary .disclosure-hint,
.release-log > summary .disclosure-hint span { color: var(--muted); font-size: .82rem; }
.release-log > summary .disclosure-title > b { color: #1178c9; }
.release-log-body { display: grid; gap: 7px; padding: 0 18px 18px; border-top: 1px solid var(--line); }
.release-date { border-bottom: 1px solid var(--line); }
.release-date summary { padding: 11px 3px; cursor: pointer; color: var(--blue-dark); font-size: .75rem; font-weight: 780; }
.release-items { display: grid; gap: 8px; padding: 0 0 12px; }
.release-item { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.release-item b { font-size: .7rem; }
.release-item p, .release-item ul { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.release-item ul { display: grid; gap: 4px; padding-left: 18px; }

.map-frame, .structure-mini-map, .pillar-board { direction: ltr; }

.modebar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 13px 2px 0; }
.mode-group, .display-settings { display: flex; align-items: center; gap: 9px; }
.mode-group > span, .display-settings label > span { color: var(--muted); font-size: .74rem; }
.mode-group { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mode-group > .mode-label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border: 0; border-radius: 8px; color: var(--ink); background: var(--paper-warm); font-size: .78rem; font-weight: 820; }
.segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: min(390px, 100%); padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--paper) 82%, var(--canvas)); }
.segment { width: 100%; min-height: 40px; padding: 3px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; font-size: .79rem; font-weight: 740; }
.segment span, .segment small { display: block; }
.segment small { margin-top: 2px; color: #a64334; font-size: .55rem; font-weight: 780; line-height: 1; opacity: 1; }
.segment.is-active { color: white; background: var(--blue); }
.segment.is-active small { color: white; }
.segment:disabled { opacity: .42; cursor: not-allowed; }
.display-settings label { display: flex; align-items: center; gap: 7px; }
.display-settings select { min-height: 36px; width: auto; padding-block: 0; font-size: .76rem; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; color: var(--blue-dark); font-size: .76rem; font-weight: 700; }

.legend-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.legend-panel > span { display: inline-flex; align-items: center; gap: 7px; }
.legend-panel i { font-style: normal; font-size: .7rem; color: var(--muted); }
.frame-sample { width: 20px; height: 20px; border: 2px solid var(--blue); border-radius: 5px; }
.void-sample, .horse-sample { display: inline-grid; place-items: center; min-width: 16px; color: var(--ink); background: transparent; border: 0; font-style: normal; }
.void-sample { font-size: .66rem; }
.horse-sample { font-size: 1.05rem; }
.element-key { gap: 9px !important; font-family: "Noto Serif CJK SC", SimSun, serif; font-size: 1rem; }
.strength-key { gap: 4px !important; }
.strength-key b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: #fff; font-family: "Noto Serif CJK TC", SimSun, serif; font-size: .7rem; }
.strength-key i { margin-left: 4px; }

.pillar-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--qimen-frame); }
.pillar-nav button { min-height: 25px; border: 0; border-radius: 5px; color: white; background: rgba(255,255,255,.16); cursor: pointer; font-size: 1rem; line-height: 1; }
.pillar-nav button:hover:not(:disabled) { background: rgba(255,255,255,.28); }
.pillar-nav button:disabled { opacity: .25; cursor: not-allowed; }
.pillar.is-active .pillar-nav { background: var(--qimen-frame); }

.map-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; min-width: 0; }
.edge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 38px; }
.edge-top, .edge-bottom { min-height: 34px; }
.edge-side { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.edge-marker { display: grid; place-content: center; justify-items: center; line-height: 1; }
.edge-marker b { font-family: "Noto Serif CJK TC", "Noto Serif CJK SC", SimSun, serif; font-size: 1rem; font-weight: 560; }
.edge-marker small, .corner-direction { color: rgba(255,255,255,.9); font-family: Inter, sans-serif; font-size: 1rem; font-weight: 760; line-height: 1; }
.edge-side .edge-marker { align-content: center; }
.edge-marker.cardinal { display: flex; align-items: center; justify-content: center; gap: 5px; }
.edge-marker.side-cardinal { gap: 3px; }
.corner-direction { position: absolute; z-index: 2; }
.corner-se { top: 11px; left: 11px; }
.corner-sw { top: 11px; right: 11px; }
.corner-ne { bottom: 11px; left: 11px; }
.corner-nw { right: 11px; bottom: 11px; }

.symbol b { display: inline-block; position: relative; padding: 3px 4px; border: 2px solid transparent; border-radius: 6px; transform-origin: center; transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease; }
.symbol small { font-size: clamp(.5rem, .7vw, .62rem); }
.symbol.is-chief-star b { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent); }
.symbol.is-chief-deity b { background: color-mix(in srgb, var(--blue) 10%, transparent); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.symbol.is-chief-gate b { border-color: var(--day); box-shadow: 0 0 0 2px color-mix(in srgb, var(--day) 18%, transparent); }
.symbol:hover { z-index: 7; }
.symbol:hover b, .symbol.is-highlighted b, .symbol[data-highlighted="true"] b { transform: translateY(-1px) scale(1.07); background: color-mix(in srgb, var(--blue-soft) 82%, var(--paper)); box-shadow: 0 4px 12px rgba(17,120,201,.2); }
.symbol.is-framed b, .symbol[data-framed="true"] b { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 20%, transparent); }
.symbol-pair { display: flex; gap: .08em; }
.symbol-pair i { font-style: normal; }
.symbol b, .symbol b *, .edge-marker b, .pillar-symbol { font-style: normal; }
.lodged-stem { position: absolute; right: -.48em; bottom: -.24em; font-family: "Noto Serif CJK SC", SimSun, serif; font-size: .43em; font-style: normal; font-weight: 650; line-height: 1; }
.palace-face.is-chief-palace { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 44%, transparent); }
.palace-flags { z-index: 4; }
.strength-mark { position: absolute; top: 5px; left: 6px; z-index: 7; display: block; width: 28px; height: 6px; overflow: hidden; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.strength-mark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.strength-wang { background: #16834b; }
.strength-xiang { background: #38a8a0; }
.strength-xiu { background: #d2a72b; }
.strength-qiu { background: #d57631; }
.strength-si { background: #b74444; }
.palace-corner-marks { position: absolute; right: 7px; bottom: 29px; z-index: 6; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; min-height: 16px; color: var(--ink); line-height: 1; pointer-events: none; }
.horse-mark, .void-mark { position: static; display: inline-grid; place-items: center; width: auto; height: auto; color: inherit; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-style: normal; font-weight: 800; line-height: 1; }
.horse-mark { font-size: 1rem; }
.void-mark { font-family: Inter, sans-serif; font-size: .64rem; }
.palace-face.is-void::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(18,25,32,.08) 0 1px, transparent 1px 5px); border: 1px solid rgba(18,25,32,.32); box-shadow: inset 0 0 20px rgba(18,25,32,.08); }
.palace-face.is-void .palace-name,
.palace-face.is-void .palace-flags,
.palace-face.is-void .palace-corner-marks,
.palace-face.is-void .horse-mark,
.palace-face.is-void .void-mark { z-index: 5; }

html[data-theme="dark"] .palace-face.is-void::after {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.075) 0 1px, transparent 1px 5px);
  border-color: rgba(142,211,244,.46);
  box-shadow: inset 0 0 24px rgba(116,199,239,.1);
}
html[data-theme="dark"] .palace-corner-marks,
html[data-theme="dark"] .horse-mark,
html[data-theme="dark"] .void-mark { color: var(--ink); }

.chart-type-status { display: grid; min-height: min(56vw, 520px); place-content: center; gap: 9px; padding: 28px; border: 1px dashed color-mix(in srgb, var(--blue) 48%, var(--line)); border-radius: 13px; text-align: center; background: color-mix(in srgb, var(--blue-soft) 38%, var(--paper)); }
.chart-type-status[hidden] { display: none; }
.chart-type-status strong { color: var(--ink); font-size: clamp(1rem, 1.8vw, 1.35rem); }
.chart-type-status p { max-width: 660px; color: var(--muted); font-size: .83rem; line-height: 1.5; }
.chart-type-status small { color: var(--blue-dark); font-size: .72rem; font-weight: 720; }

html[data-symbol-size="compact"] { --symbol-scale: .84; }
html[data-symbol-size="standard"] { --symbol-scale: 1; }
html[data-symbol-size="large"] { --symbol-scale: 1.16; }
.symbol b { font-size: calc(clamp(1.45rem, 3vw, 2.65rem) * var(--symbol-scale, 1)); }

.chart-panel:fullscreen { overflow: auto; padding: 18px; background: var(--canvas); }
.chart-panel:fullscreen .map-frame { width: min(100%, calc(100dvh - 105px)); }
.chart-panel:fullscreen .chart-caption { max-width: 1200px; margin-inline: auto; }

@media (max-width: 1160px) {
  .map-frame { width: 100%; }
  .chart-panel { width: 100%; }
  .modebar { align-items: flex-start; }
  .service-facts { grid-template-columns: 1fr 1fr; }
  .signal-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .structures-layout { grid-template-columns: minmax(280px, .82fr) minmax(350px, 1.18fr); }
}

@media (max-width: 740px) {
  .app-shell { width: 100%; padding-inline: 8px; }
  .brandbar { align-items: flex-start; }
  .header-settings { flex-wrap: wrap; }
  .header-settings .version { display: none; }
  .icon-button b, .compact-select > span { display: none; }
  .language-picker > .language-flag { display: grid; }
  .modebar { align-items: stretch; flex-direction: column; }
  .mode-group, .display-settings { justify-content: space-between; }
  .segmented { flex: 1; }
  .segment { flex: 1; padding-inline: 5px; }
  .display-settings { flex-wrap: wrap; }
  .result-toolbar { align-items: flex-start; flex-direction: column; }
  .calculation-summary { width: 100%; }
  .moment-line { overflow-x: auto; scrollbar-width: thin; }
  .map-frame { width: 100%; }
  .map-row { grid-template-columns: 27px minmax(0, 1fr) 27px; }
  .edge-grid { padding-inline: 27px; }
  .edge-top, .edge-bottom { min-height: 29px; }
  .edge-marker b { font-size: .78rem; }
  .edge-marker small, .corner-direction { font-size: .78rem; }
  .corner-se, .corner-sw { top: 9px; }
  .corner-ne, .corner-nw { bottom: 9px; }
  .corner-se, .corner-ne { left: 8px; }
  .corner-sw, .corner-nw { right: 8px; }
  .flag-long { display: none; }
  .flag-short { display: inline; }
  .palace-corner-marks { right: 4px; bottom: 21px; gap: 3px; min-height: 12px; }
  .horse-mark { font-size: .74rem; }
  .void-mark { font-size: .5rem; }
  .service-panel, .analytics-panel { padding: 14px; border-radius: 12px; }
  .pinned-charts { padding-top: 9px; }
  .pin-edit-form { grid-template-columns: 1fr auto auto; }
  .service-facts { grid-template-columns: 1fr 1fr; }
  .analytics-tab { flex-basis: 128px; max-width: none; min-height: 44px; }
  .module-intro, .analytics-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .focus-preset { grid-template-columns: 1fr; gap: 8px; }
  .signal-selector { grid-template-columns: 1fr 1fr; }
  .structures-layout { grid-template-columns: 1fr; }
  .analysis-workspace, .analysis-focus-cards { grid-template-columns: 1fr; }
  .analysis-left-rail { position: static; }
  .analysis-facts { grid-template-columns: 1fr; }
  .release-item { grid-template-columns: 1fr; gap: 4px; }
  .structure-map-panel { position: static; }
  .structure-list { max-height: none; overflow: visible; }
  .structure-map-heading { align-items: flex-start; flex-direction: column; }
  .structure-map-heading small { max-width: none; text-align: left; }
}

/* v0.9: compact controls, period-school slots, print and layer visibility */
.control-panel { padding-block: 13px; }
.control-heading { min-height: 0; }
.control-heading h2 { margin: 0; }
.controls { margin-top: 11px; }
.method-segmented.is-disabled { opacity: .48; }
.method-segmented button:disabled { cursor: not-allowed; }

.school-panel { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.school-panel[hidden] { display: none; }
.school-panel > div:first-child { display: grid; gap: 3px; }
.school-panel strong { font-size: .76rem; }
.school-panel small { color: var(--muted); font-size: .62rem; line-height: 1.35; }
.school-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.school-button { display: grid; min-height: 42px; place-content: center; gap: 2px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--paper); cursor: pointer; }
.school-button span { font-size: .72rem; font-weight: 720; }
.school-button small { font-family: "Noto Serif CJK TC", SimSun, serif; font-size: .7rem; }
.school-button em { color: #b64c31; font-size: .55rem; font-style: normal; font-weight: 780; text-transform: uppercase; }
.school-button.is-active { color: var(--blue-dark); border-color: var(--blue); background: var(--blue-soft); }

.chart-type-status.is-draft { min-height: 0; place-content: stretch; gap: 5px; margin-bottom: 10px; padding: 10px 13px; border-style: solid; border-color: rgba(199,91,46,.42); text-align: left; background: color-mix(in srgb, #c75b2e 8%, var(--paper)); }
.chart-type-status.is-draft strong { color: #b64c31; font-size: .73rem; letter-spacing: .055em; }
.chart-type-status.is-draft p { max-width: none; font-size: .68rem; line-height: 1.4; }

.display-panel { margin-top: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.display-panel[hidden] { display: none; }
.display-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.display-presets strong { margin-right: auto; font-size: .76rem; }
.display-presets button { min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--blue-dark); background: var(--blue-soft); cursor: pointer; font-size: .65rem; font-weight: 720; }
.display-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.display-options label { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: .66rem; cursor: pointer; }
.display-options input { width: 14px; min-height: 14px; margin: 0; accent-color: var(--blue); }

.print-dialog { width: min(390px,calc(100% - 24px)); padding: 0; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--paper); box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.print-dialog::backdrop { background: rgba(5,12,20,.6); backdrop-filter: blur(4px); }
.print-dialog form { display: grid; gap: 0; padding: 14px; }
.print-dialog header,.print-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.print-dialog header { margin-bottom: 7px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.print-dialog header strong { font-size: .9rem; }
.print-dialog header button { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 1.5rem; }
.print-dialog label { display: flex; align-items: center; gap: 9px; padding: 10px 4px; color: var(--ink); font-size: .82rem; }
.print-dialog label input { width: 17px; min-height: 17px; margin: 0; accent-color: var(--blue); }
.print-dialog footer { justify-content: flex-end; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.print-dialog footer button { min-width: 110px; }

.hidden-jia-stem { position: absolute; top: -.28em; left: -.48em; font-family: "Noto Serif CJK TC", SimSun, serif; font-size: .43em; font-style: normal; font-weight: 720; line-height: 1; }
.center-stem { position: relative; display: inline-block; justify-self: center; }
#palace-grid .palace-card.center .center-front > .center-stem { position: absolute; right: 9px; bottom: 7px; left: auto; display: inline-block; justify-self: auto; text-align: right; }

html[data-show-labels="false"] .symbol small { display: none; }
html[data-show-palace-names="false"] .palace-name { display: none; }
html[data-show-statuses="false"] .palace-corner-marks,
html[data-show-statuses="false"] .palace-face.is-void::after { display: none; }
html[data-show-focus="false"] .palace-flags { display: none; }
html[data-show-focus="false"] .palace-face.focus-day { box-shadow: none; }
html[data-show-focus="false"] .palace-face.focus-hour { outline: 0; }
html[data-show-strength="false"] .strength-mark { display: none; }
html[data-show-jia="false"] .hidden-jia-stem { display: none; }
html[data-show-directions="false"] .edge-marker small,
html[data-show-directions="false"] .corner-direction { visibility: hidden; }
html[data-show-chief="false"] .symbol.is-chief-star b,
html[data-show-chief="false"] .symbol.is-chief-deity b,
html[data-show-chief="false"] .symbol.is-chief-gate b,
html[data-show-chief="false"] .palace-face.is-chief-palace { border-color: transparent; box-shadow: none; }

@media (max-width: 900px) {
  .display-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-panel { grid-template-columns: 1fr; }
}

/* v0.21: compact narrow layout and unified disclosure blocks */
.info-disclosure { overflow: hidden; }
.info-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 49px; padding: 13px 18px; color: var(--blue-dark); cursor: pointer; list-style: none; }
.info-disclosure > summary::-webkit-details-marker { display: none; }
.info-disclosure > summary::after { content: "›"; flex: 0 0 auto; color: var(--blue); font-size: 1.35rem; font-weight: 800; line-height: 1; transform: rotate(90deg); transition: transform .18s ease; }
.info-disclosure[open] > summary::after { transform: rotate(-90deg); }
.info-disclosure > summary b, .info-disclosure > summary h2 { margin: 0; color: var(--blue-dark); font-size: .88rem; font-weight: 760; line-height: 1.25; }
.info-disclosure > summary .disclosure-title { display: inline-flex; align-items: baseline; min-width: 0; gap: .35em; white-space: nowrap; }
.info-disclosure > summary .disclosure-hint { min-width: 0; overflow: hidden; color: var(--muted); font-size: .82rem; font-weight: 520; line-height: 1.25; text-overflow: ellipsis; }
.info-disclosure > summary small { display: block; margin-top: 3px; color: var(--muted); font-size: .66rem; font-weight: 500; line-height: 1.3; }
.internal-panel { border-color: #e3aaa4; background: color-mix(in srgb, #fff1ef 74%, var(--paper)); }
.internal-panel > summary { color: var(--blue-dark); }
.internal-panel > summary::after { color: #c15a5c; }
.internal-panel > summary b, .internal-panel > summary h2 { color: var(--blue-dark); }
.reference-entry-panel.internal-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 49px; padding: 13px 18px; border-color: #e3aaa4; background: color-mix(in srgb, #fff1ef 74%, var(--paper)); }
.reference-entry-panel.internal-panel[hidden] { display: none; }
.reference-entry-panel.internal-panel::after { content: "›"; flex: 0 0 auto; color: #c15a5c; font-size: 1.35rem; font-weight: 800; line-height: 1; }
.reference-entry-panel .disclosure-title { display: inline-flex; width: 100%; align-items: baseline; justify-content: flex-start; min-width: 0; gap: .35em; margin-right: auto; text-align: left; white-space: nowrap; }
.reference-entry-panel .disclosure-title > b { color: #1178c9; font-size: .88rem; font-weight: 760; }
.reference-entry-panel .disclosure-hint { min-width: 0; overflow: hidden; color: var(--muted); font-size: .82rem; font-weight: 520; text-overflow: ellipsis; }
.release-log.internal-panel > summary .disclosure-title > b { color: #1178c9; }
html[data-theme="dark"] .internal-panel,
html[data-theme="dark"] .reference-entry-panel.internal-panel { border-color: #70464d; background: #2c2023; }
html[data-theme="dark"] .internal-panel > summary,
html[data-theme="dark"] .internal-panel > summary b,
html[data-theme="dark"] .internal-panel > summary h2 { color: #8ad0ff; }
html[data-theme="dark"] .internal-panel > summary::after,
html[data-theme="dark"] .reference-entry-panel.internal-panel::after { color: #ff918f; }
html[data-theme="dark"] .reference-entry-panel .disclosure-title > b,
html[data-theme="dark"] .release-log.internal-panel > summary .disclosure-title > b { color: #8ad0ff; }
html[data-theme="dark"] .info-disclosure > summary .disclosure-hint,
html[data-theme="dark"] .info-disclosure > summary .disclosure-hint span,
html[data-theme="dark"] .reference-entry-panel .disclosure-hint,
html[data-theme="dark"] .reference-entry-panel .disclosure-hint span { color: #dce8f2; font-size: .82rem; }
.engine-version-detail { display: block; padding: 0 18px 10px; color: var(--muted); font-size: .68rem; }
.trace { padding: 0; }
.trace > summary { padding-inline: 18px; }
.trace > ol, .trace > p { margin-inline: 18px; }
.service-panel { padding: 0; }
.service-panel > summary { padding-inline: 18px; }
.service-panel .service-facts { margin: 0 18px 18px; }
.release-log > summary { padding: 13px 18px; color: var(--blue-dark); }
.release-log > summary b { color: inherit; }
[data-moved-to-profile] { display: none !important; }

.header-settings .compact-select select,
.header-settings .icon-button,
.header-settings .version,
.header-settings .telegram-account,
.header-settings .telegram-login-button,
.header-settings .telegram-logout-button, .header-settings .feedback-button, .header-settings .i18n-diagnostic-button { min-height: 44px; height: 44px; border-radius: 9px; }
.header-settings .version, .header-settings .telegram-account { display: inline-flex; align-items: center; }
.header-settings .header-account { margin-left: 2px; }
.header-settings [hidden] { display: none !important; }
.secondary-button { min-height: 45px; border-radius: 9px; }
.mode-group > .mode-label { min-height: 45px; border-radius: 9px; }
.segmented { min-height: 45px; }
.segment { min-height: 39px; }
.display-settings select { min-height: 45px; height: 45px; border-radius: 9px; }
.city-search-wrap, .city-search-wrap > input { min-height: 45px; height: 45px; }

@media (max-width: 1320px) {
  .controls { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .date-control { grid-column: span 4; }
  .time-control { grid-column: span 2; }
  .method-control { grid-column: span 3; }
  .controls > .calculate-button { grid-column: span 3; }
  .city-control { grid-column: span 6; }
  .solar-control, .rat-control { grid-column: span 3; }
}

@media (max-width: 1160px) {
  .map-frame { margin-inline: 0 auto; }
  .chart-caption { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .controls { grid-template-columns: 1fr 1fr; }
  .date-control, .time-control, .city-control, .method-control, .solar-control, .rat-control, .controls > .calculate-button { grid-column: 1 / -1; }
  .info-disclosure > summary { padding-inline: 14px; }
  .service-panel .service-facts { margin-inline: 14px; }
  .release-log > summary .disclosure-hint, .reference-entry-panel .disclosure-hint { display: none; }
  .structure-search-controls { grid-template-columns: 1fr; }
  .structure-search-controls .calculate-button { width: 100%; }
  .feedback-button { flex: 0 0 44px; }
  .feedback-dialog footer { align-items: stretch; flex-direction: column-reverse; }
  .feedback-dialog footer button { width: 100%; }
}

@media print {
  @page { size: landscape; margin: 9mm; }
  html, body { color: #111; background: #fff !important; }
  .app-shell { width: 100%; padding: 0; }
  .brandbar, .control-panel, .pinned-charts, .modebar, .school-panel, .legend-panel, .display-panel, .chart-action-group, .trace, .feedback-selection-bar, .feedback-highlight { display: none !important; }
  .result-toolbar { padding: 0 0 8px; }
  .calculation-workspace { grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr); gap: 8px; }
  .pillar-panel, .chart-panel, .service-panel, .analytics-panel { border: 0; box-shadow: none; }
  .map-frame { width: min(100%, 175mm); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html[data-print-scope="chart"] .pillar-panel,
  html[data-print-scope="chart"] .service-panel,
  html[data-print-scope="chart"] .analytics-panel { display: none !important; }
  html[data-print-scope="chart"] .calculation-workspace { display: block; }
  html[data-print-scope="chart-bazi"] .service-panel,
  html[data-print-scope="chart-bazi"] .analytics-panel { display: none !important; }
}