.qimen-view { min-width:0; padding:32px 0 56px; --qimen-metal:#86641c; --qimen-wood:#39714f; --qimen-water:#326e9e; --qimen-fire:#b3473e; --qimen-earth:#876047; }
:root[data-theme="dark"] .qimen-view { --qimen-metal:#dfc27a; --qimen-wood:#9ac7a4; --qimen-water:#8bb9df; --qimen-fire:#e7a19a; --qimen-earth:#c9aa8d; }
.qimen-view :is(h1,h2,h3,h4,strong) { font-weight:400; }
.qimen-header { display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); margin-bottom:24px; padding-bottom:22px; }
.qimen-header h1 { margin:10px 0; font-size:clamp(29px,3vw,38px); line-height:1.55; letter-spacing:.09em; }
.qimen-eyebrow { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; letter-spacing:.09em; }
.qimen-eyebrow::before { content:''; width:24px; height:1px; background:var(--red); }
.qimen-intro { max-width:42em; font-size:14px; line-height:1.95; color:var(--muted); }
.qimen-ornament { flex:0 0 auto; width:100px; aspect-ratio:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; color:var(--accent-text); opacity:.7; transform:rotate(-5deg); }
.qimen-ornament span { display:grid; place-items:center; font-size:15px; border:1px solid var(--line); }
.qimen-toolbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin:20px 0; font-size:12px; color:var(--muted); }
.qimen-toolbar p { margin:0; }
.qimen-button { min-height:40px; padding:8px 14px; border:1px solid var(--line); border-radius:5px; background:transparent; color:var(--ink); font-size:13px; font-weight:400; line-height:1.7; }
.qimen-button:hover { background:var(--soft); border-color:var(--border-hover); }
.qimen-sheet { padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:7px; }
.qimen-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.qimen-field { min-width:0; }
.qimen-field>label { display:block; margin-bottom:8px; font-size:13px; line-height:1.8; }
.qimen-field :is(input,select,textarea) { min-height:46px; border-radius:5px; background:var(--paper); font-size:15px; }
.qimen-field textarea { resize:vertical; padding:12px; }
.qimen-wide { grid-column:1/-1; }
.qimen-time-input { display:flex; align-items:stretch; gap:8px; }
.qimen-time-input input { min-width:0; flex:1; }
.qimen-time-input button { flex:0 0 auto; }
.qimen-hint { margin:10px 0; color:var(--muted); font-size:12px; line-height:1.95; overflow-wrap:anywhere; }
.qimen-settings { margin:22px 0; padding:16px 0; border-block:1px solid var(--line); }
.qimen-settings summary,.qimen-rules summary,.qimen-records>summary { font-size:13px; line-height:1.8; cursor:pointer; }
.qimen-settings .qimen-form-grid { margin-top:20px; }
.qimen-preview { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; border-left:2px solid var(--accent-line); padding:8px 16px; margin:22px 0; }
.qimen-preview>span { color:var(--muted); font-size:12px; }
.qimen-preview strong { font-size:17px; font-variant-numeric:tabular-nums; }
.qimen-submit-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.qimen-save { display:flex; align-items:center; gap:9px; font-size:13px; }
.qimen-save input { width:17px; height:17px; margin:0; }
.qimen-primary { min-width:190px; min-height:54px; background:var(--action-bg); border-color:var(--action-bg); color:var(--action-text); font-size:16px; letter-spacing:.1em; }
.qimen-primary:hover { background:var(--action-hover); border-color:var(--action-hover); }
.qimen-primary span { margin-left:24px; }
.qimen-error { padding:14px; border:1px solid var(--error-line); background:var(--error-bg); font-size:13px; line-height:1.8; }
.qimen-result { margin-top:32px; scroll-margin-top:110px; }
.qimen-result-heading { display:flex; gap:16px; align-items:baseline; justify-content:space-between; margin:24px 0; }
.qimen-result-heading h2 { margin:0; font-size:27px; letter-spacing:.06em; }
.qimen-method { font-size:12px; color:var(--muted); }
.qimen-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:24px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.qimen-summary-item { display:flex; flex-direction:column; gap:8px; min-width:0; }
.qimen-summary-item>span { color:var(--muted); font-size:12px; }
.qimen-summary-item strong { font-size:15px; line-height:1.8; overflow-wrap:anywhere; }
.qimen-pillars { display:flex; flex-wrap:wrap; gap:18px 28px; margin:20px 0; }
.qimen-pillars>span { display:flex; align-items:baseline; gap:10px; font-size:16px; }
.qimen-pillars>span>span:first-child { font-size:12px; color:var(--muted); }
.qimen-key-markers { display:flex; flex-wrap:wrap; gap:8px 12px; margin:12px 0 20px; font-size:12px; line-height:1.8; }
.qimen-key-markers dt { color:var(--muted); }
.qimen-key-markers dd { margin:0 14px 0 0; }
.qimen-recorded-question { border-left:2px solid var(--accent-line); padding:10px 16px; font-size:14px; line-height:1.9; overflow-wrap:anywhere; white-space:pre-wrap; }
.qimen-board-layout { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(190px,1fr); gap:28px; align-items:start; }
.qimen-board-wrap { min-width:0; }
.qimen-axis { margin:10px 0; color:var(--muted); text-align:center; font-size:11px; letter-spacing:.2em; }
.qimen-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; padding:1px; background:var(--line); border-radius:5px; overflow:hidden; }
.qimen-palace { display:flex; flex-direction:column; gap:9px; min-width:0; min-height:185px; padding:14px; border:0; border-radius:0; background:var(--panel); text-align:left; color:var(--ink); }
.qimen-palace:hover { background:var(--paper); }
.qimen-palace[aria-pressed="true"] { background:var(--soft); box-shadow:inset 0 0 0 2px var(--accent-line); }
.qimen-palace-top { display:flex; gap:4px; justify-content:space-between; color:var(--muted); font-size:11px; }
.qimen-palace-god { font-size:12px; color:var(--muted); line-height:1.8; }
.qimen-palace-main { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; line-height:1.9; }
.qimen-palace-star { font-size:15px; }
.qimen-palace-door { font-size:13px; color:var(--accent-text); }
.qimen-palace-stems { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; font-size:23px; font-weight:350; line-height:1.5; }
.qimen-stem-separator { color:var(--line); font-size:14px; }
.qimen-palace-marks { display:flex; gap:6px; min-height:21px; margin-top:auto; }
.qimen-palace-marks i { display:inline-grid; place-items:center; min-width:20px; padding:1px 4px; border:1px solid var(--line); border-radius:3px; color:var(--muted); font-size:10px; font-style:normal; }
.qimen-palace-center { background:var(--paper); }
.qimen-palace-detail { min-width:0; padding:22px; margin-top:36px; border-top:2px solid var(--accent-line); background:var(--panel); }
.qimen-palace-detail h3 { font-size:21px; margin:12px 0 20px; }
.qimen-detail-list { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 18px; font-size:13px; line-height:1.8; }
.qimen-detail-list dt { color:var(--muted); }
.qimen-detail-list dd { margin:0; overflow-wrap:anywhere; }
.qimen-tag { display:inline-block; margin:8px 6px 0 0; padding:3px 7px; color:var(--muted); background:var(--soft); border-radius:3px; font-size:11px; }
.qimen-patterns { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.qimen-patterns h3 { font-size:21px; }
.qimen-pattern { padding:12px 0; border-bottom:1px solid var(--line); }
.qimen-pattern strong { font-size:14px; }
.qimen-rules { margin-top:28px; padding:20px 0; border-block:1px solid var(--line); }
.qimen-sources { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:12px; color:var(--muted); }
.qimen-sources a { display:inline-flex; align-items:center; min-height:40px; text-decoration:underline; text-underline-offset:4px; }
.qimen-records { margin-top:32px; padding:22px 0; border-block:1px solid var(--line); }
#qimen-record-list { list-style:none; padding:0; }
.qimen-record { display:flex; justify-content:space-between; align-items:start; gap:18px; padding:16px 0; border-top:1px solid var(--line); }
.qimen-record>div { min-width:0; }
.qimen-record strong { font-size:14px; }
.qimen-record-actions { display:flex; flex-wrap:wrap; gap:7px; flex-shrink:0; }
.qimen-glyph[data-element="metal"] { color:var(--qimen-metal); }
.qimen-glyph[data-element="wood"] { color:var(--qimen-wood); }
.qimen-glyph[data-element="water"] { color:var(--qimen-water); }
.qimen-glyph[data-element="fire"] { color:var(--qimen-fire); }
.qimen-glyph[data-element="earth"] { color:var(--qimen-earth); }
@media(max-width:1100px) { .qimen-board-layout { grid-template-columns:minmax(0,1fr); } .qimen-palace-detail { margin-top:0; } }
@media(max-width:650px) {
 .qimen-view { padding-top:25px; } .qimen-header { gap:16px; } .qimen-header h1 { font-size:29px; } .qimen-ornament { width:70px; } .qimen-ornament span { font-size:12px; } .qimen-intro { font-size:13px; }
 .qimen-form-grid { grid-template-columns:minmax(0,1fr); gap:18px; } .qimen-sheet { padding:20px 16px; } .qimen-field :is(input,select,textarea) { font-size:16px; padding-inline:10px; }
 .qimen-primary { width:100%; } .qimen-result-heading { flex-direction:column; gap:7px; } .qimen-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; padding:18px 14px; }
 .qimen-summary-item strong { font-size:14px; } .qimen-palace { min-height:175px; gap:7px; padding:9px 7px; } .qimen-palace-top { font-size:10px; } .qimen-palace-god { font-size:11px; } .qimen-palace-star { font-size:13px; } .qimen-palace-door { font-size:12px; } .qimen-palace-stems { gap:3px; font-size:21px; } .qimen-palace-marks { gap:3px; } .qimen-palace-marks i { min-width:16px; font-size:9px; padding:1px 3px; }
 .qimen-record { flex-direction:column; gap:8px; } .qimen-record-actions { flex-shrink:1; } .qimen-detail-list { gap:10px 14px; } .qimen-toolbar { align-items:start; }
}

.qimen-palace-lodged { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }

.qimen-palace { overflow-wrap:anywhere; }
.qimen-pattern-locations { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.qimen-pattern-locations .qimen-button { min-height:36px; padding:5px 9px; font-size:11px; }