#zw-app * { box-sizing: border-box; margin: 0; padding: 0; }
#zw-app { font-family: Arial, sans-serif; background: #f5f5f5; padding: 16px; max-width: 840px; margin: 0 auto; }
#zw-app .zw-card { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 16px; }
#zw-app h2 { font-size: 18px; font-weight: bold; margin-bottom: 16px; color: #333; }
#zw-app .zw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
#zw-app .zw-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
#zw-app label { font-size: 12px; color: #666; display: block; margin-bottom: 4px; }
#zw-app input, #zw-app select { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-family: Arial, sans-serif; color: #333; background: #fff; }
#zw-app .zw-btn { padding: 9px 16px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; font-weight: bold; cursor: pointer; background: #fff; color: #333; font-family: Arial, sans-serif; }
#zw-app .zw-btn:hover { background: #f0f0f0; }
#zw-app .zw-btn-go { background: #333; color: #fff; border: none; width: 100%; padding: 13px; font-size: 15px; margin-top: 6px; display: block; }
#zw-app .zw-btn-go:hover { background: #555; }
#zw-app .zw-hidden { display: none !important; }
#zw-app .zw-err { background: #fff0f0; color: #c00; border: 1px solid #f5a5a5; border-radius: 6px; padding: 10px; font-size: 13px; margin-top: 10px; }
#zw-app .zw-info { font-size: 12px; color: #555; background: #f9f9f9; border: 1px solid #eee; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; line-height: 2; }
#zw-app .zw-info b { color: #222; }
#zw-app .zw-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
#zw-app .zw-tab { padding: 6px 14px; font-size: 12px; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; background: #fff; color: #666; font-family: Arial, sans-serif; }
#zw-app .zw-tab.on { background: #333; color: #fff; border-color: #333; }
#zw-app .zw-chart-table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid #666; }
#zw-app .zw-palace { border: 1px solid #999; vertical-align: top; padding: 5px; min-height: 115px; cursor: pointer; background: #fff; width: 25%; }
#zw-app .zw-palace:hover { background: #f0f5ff; }
#zw-app .zw-center-cell { border: 2px solid #555; background: #f8f8f8; text-align: center; vertical-align: middle; padding: 10px 6px; }
#zw-app .zw-stars { display: flex; flex-wrap: wrap; gap: 3px; min-height: 44px; margin-bottom: 4px; }
#zw-app .zw-star { font-size: 11px; color: #222; line-height: 1.4; min-width: 20px; }
#zw-app .zw-lu   { color: green;   font-size: 10px; }
#zw-app .zw-quan { color: blue;    font-size: 10px; }
#zw-app .zw-ke   { color: #b8860b; font-size: 10px; }
#zw-app .zw-ji   { color: red;     font-size: 10px; }
#zw-app .zw-self { color: #c44;    font-size: 9px; }
#zw-app .zw-pmid { display: flex; justify-content: space-between; font-size: 10px; color: #666; margin-bottom: 2px; }
#zw-app .zw-dcur { color: red !important; font-weight: bold; }
#zw-app .zw-dname { color: #cc0000; font-weight: bold; }
#zw-app .zw-pbot { display: flex; justify-content: space-between; font-size: 10px; color: #555; border-top: 1px solid #eee; padding-top: 2px; margin-top: 2px; }
#zw-app .zw-stem { font-size: 11px; font-weight: bold; color: #333; }
#zw-app .zw-notesnip { font-size: 9px; color: #999; border-top: 1px dashed #ddd; margin-top: 2px; padding-top: 1px; }
#zw-app .zw-notepanel { background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 14px; margin-top: 12px; }
#zw-app .zw-notepanel h3 { font-size: 14px; font-weight: bold; margin-bottom: 8px; color: #333; }
#zw-app .zw-textarea { width: 100%; min-height: 80px; font-family: Arial, sans-serif; font-size: 13px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; resize: vertical; margin-top: 6px; color: #333; }
#zw-app .zw-btnrow { display: flex; gap: 8px; margin-top: 10px; }
#zw-app .zw-btnrow .zw-btn { flex: 1; }
#zw-app .zw-footnote { font-size: 12px; line-height: 2; color: #444; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#zw-app .zw-pblock { background: #f9f9f9; border: 1px solid #eee; border-radius: 6px; padding: 8px 10px; }
#zw-app .zw-pblock b { font-weight: bold; color: #222; display: block; font-size: 13px; margin-bottom: 4px; border-bottom: 1px solid #ddd; padding-bottom: 2px; }
#zw-app .zw-pblock span { display: block; font-size: 11px; color: #555; }
@media (max-width: 600px) {
  #zw-app .zw-row2, #zw-app .zw-row3 { grid-template-columns: 1fr; }
  #zw-app .zw-palace { min-height: 80px; padding: 3px; }
  #zw-app .zw-star { font-size: 10px; }
  #zw-app .zw-footnote { grid-template-columns: 1fr; }
}