body { margin: 0; font-family: "Microsoft YaHei", system-ui, sans-serif; background: #f5f1e8; color: #2a2620; }
.head { display: flex; align-items: center; gap: 14px; padding: 14px 22px; background: #252a2a; color: #fff; }
.head .seal { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #8c2f2f; font-size: 20px; }
.head h1 { margin: 0; font-size: 20px; }
.head p { margin: 2px 0 0; font-size: 12px; opacity: .75; }
.head button { margin-left: auto; }
main { max-width: 1080px; margin: 18px auto; padding: 0 16px; }
.feedback { min-height: 20px; color: #8c2f2f; font-size: 14px; }
.feedback:not(.error) { color: #2f6b3a; }
.panel { background: #fff; border: 1px solid #e2dbcb; border-radius: 10px; padding: 18px 20px; margin-bottom: 14px; }
.panel h2 { margin: 0 0 8px; font-size: 17px; }
.muted { color: #6d6455; font-size: 13px; }
label { display: block; margin: 10px 0; font-size: 14px; }
input { display: block; width: 100%; max-width: 360px; margin-top: 4px; padding: 9px 10px; border: 1px solid #cfc7b4; border-radius: 6px; font-size: 15px; box-sizing: border-box; }
button { min-height: 44px; padding: 8px 16px; border: 1px solid #cfc7b4; background: #fff; border-radius: 6px; font-size: 14px; cursor: pointer; }
button:hover:not(:disabled) { background: #f7f4ec; }
button.primary:hover:not(:disabled) { background: #782727; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #496b80; outline-offset: 2px; }
input[readonly] { background: #f7f4ec; color: #6d6455; }
select, textarea { max-width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #cfc7b4; border-radius: 6px; font: inherit; }
select { min-height: 44px; }
textarea { display: block; width: 100%; margin-top: 4px; }
.section-head, .actions-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-head h2 { margin-right: auto; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.editor { border: 1px solid #e2dbcb; background: #fcfaf6; border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.editor[hidden] { display: none; }
.question-picker { border: 1px solid #cfc7b4; border-radius: 6px; margin-top: 12px; }
.question-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px; margin: 2px 0; border-bottom: 1px solid #eee7d8; }
.question-choice input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; }
.question-choice span { overflow-wrap: anywhere; }
button.primary { background: #8c2f2f; border-color: #8c2f2f; color: #fff; }
#navigation { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#navigation button[aria-pressed="true"] { background: #252a2a; color: #fff; border-color: #252a2a; }
.rows { display: grid; gap: 8px; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border: 1px solid #eee7d8; border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; }
.row strong { font-size: 15px; }
.row .actions { margin-left: auto; display: flex; gap: 6px; }
#ink-dialog { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
#ink-dialog[hidden] { display: none; }
.ink-box { background: #fff; border-radius: 10px; padding: 16px 20px; width: min(680px, 92vw); max-height: 92vh; overflow-y: auto; box-sizing: border-box; }
.ink-box header { display: flex; align-items: center; justify-content: space-between; }
.ink-box pre { background: #f7f4ec; border-radius: 8px; padding: 12px; white-space: pre-wrap; }
form button[type="submit"] { margin-top: 8px; }
#ink-preview { width: min(460px, 100%); margin: 12px auto; border: 1px solid #e2dbcb; }
#ink-preview svg { display: block; width: 100%; aspect-ratio: 1; }
#print-sheet { display: none; }
@media (max-width: 767px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head { padding: 12px 16px; gap: 10px; }
  .head h1 { font-size: 17px; }
  .panel { padding: 16px; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .head .seal { display: none; }
  .row .actions { flex-wrap: wrap; margin-left: 0; width: 100%; }
  main { padding: 0 10px; }
}
@media print {
  @page { size: A4; margin: 20mm; }
  body { background: #fff; }
  body > * { display: none !important; }
  body > #print-sheet { display: block !important; }
  #print-sheet svg { display: block; width: 160mm; height: 160mm; margin: 0 auto; }
}

/* One page serves both consoles; the product comes from product.js (host name). */
html[data-product="guqin"] [data-only="calligraphy"], html:not([data-product="guqin"]) [data-only="guqin"] { display: none !important; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.stat { background: #f7f4ec; border: 1px solid #e2dbcb; border-radius: 8px; padding: 10px 12px; }
.stat strong { display: block; font-size: 22px; }
.stat span { font-size: 12px; color: #6d6455; }
.panel h3 { margin: 16px 0 6px; font-size: 15px; }