:root {
  --ty-bg: #f3efe6; --ty-card: #fbf9f4; --ty-text: #2b2622; --ty-muted: #6f6458; --ty-faint: #74695c;
  --ty-line: #cfc5b2; --ty-sub: #4a4239; --ty-split: #e6dfd0; --ty-center: #f6f2ea;
  --ty-tag-bg: #efe9dc; --ty-input-bg: #ffffff; --ty-input-line: #d9d1c0; --ty-shadow: rgba(0,0,0,.06);
  --ty-primary: #b3361f; --ty-primary-hover: #9a2d19; --ty-on-primary: #ffffff; --ty-disabled: #b9af9f;
  --ty-accent: #b3361f; --ty-danger: #b91c1c; --ty-sel-bg: #f6e9e2; --ty-focus: #b45309;
  --ty-tip-bg: rgba(43, 38, 34, .95); --ty-tip-fg: #fbf9f4;

  --ty-cell: #fbf9f4; --ty-cell-jian: #f6f2ea; --ty-cell-inner: #efe9dc; --ty-ty-bg: #fbefc4; --ty-sel-line: #b3361f;

  --ty-mk-taiyi: #9a2d19; --ty-mk-wc: #1a3e6e; --ty-mk-sj: #8a2a6e; --ty-mk-dm: #1a5e40; --ty-mk-js: #7c4a03; --ty-mk-hs: #355a12; --ty-mk-ts: #4b3f8a;
  --ty-mk-jiang: #4a4239; --ty-mk-base: #5f554a; --ty-pending: #9a4a00;
}
[data-theme="dark"] {
  --ty-bg: #16130f; --ty-card: #211d18; --ty-text: #ece4d6; --ty-muted: #aa9e8f; --ty-faint: #998c7b;
  --ty-line: #4a4238; --ty-sub: #d6cbb9; --ty-split: #3a332a; --ty-center: #1c1915;
  --ty-tag-bg: #2a251f; --ty-input-bg: #16130f; --ty-input-line: #3a332a; --ty-shadow: rgba(0,0,0,.4);
  --ty-primary: #c2452c; --ty-primary-hover: #ab3a24; --ty-on-primary: #ffffff; --ty-disabled: #4a4238;
  --ty-accent: #e0a34a; --ty-danger: #f87171; --ty-sel-bg: #33291d; --ty-focus: #e0a34a;
  --ty-tip-bg: rgba(236, 228, 214, .96); --ty-tip-fg: #16130f;
  --ty-cell: #211d18; --ty-cell-jian: #1c1915; --ty-cell-inner: #2a251f; --ty-ty-bg: #3f3411; --ty-sel-line: #e0a34a;
  --ty-mk-taiyi: #f59e7a; --ty-mk-wc: #8cb8ff; --ty-mk-sj: #f0a0d8; --ty-mk-dm: #5fd3a0; --ty-mk-js: #f0b86b; --ty-mk-hs: #b5dc7a; --ty-mk-ts: #c4b5fd;
  --ty-mk-jiang: #d6cbb9; --ty-mk-base: #bfb3a3; --ty-pending: #f5c06b;
  color-scheme: dark;
}
body { margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--ty-bg); color: var(--ty-text); }
.ty-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ty-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 0 16px; box-sizing: border-box; }
.ty-left, .ty-right { min-width: 0; }

.ty-card { background: var(--ty-card); border-radius: 8px; padding: 14px; margin-bottom: 14px; box-shadow: 0 1px 3px var(--ty-shadow); outline: 1px solid var(--ty-input-line); outline-offset: -1px; }
.ty-card-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ty-sub); }
.ty-form-card { position: relative; padding-right: 52px; background-image: url(ty1.png); background-repeat: no-repeat; background-size: auto; background-position: right top;}
.ty-theme-btn { position: absolute; top: 5px; right: 5px; width: 31px; height: 31px; border-radius: 50%; border: 1px solid var(--ty-input-line); background: var(--ty-card); color: var(--ty-text); font-size: 14px; line-height: 1; cursor: pointer; }
.ty-theme-btn:hover { border-color: var(--ty-accent); }
.ty-form { display: flex; flex-direction: column; gap: 10px; }
.ty-form fieldset { margin: 0; padding: 6px 10px 10px; border: 1px solid var(--ty-split); border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.ty-form legend { padding: 0 4px; color: var(--ty-sub); font-size: 13px; }
.ty-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; cursor: pointer; }
.ty-pill input { margin: 0; accent-color: var(--ty-primary); }
.ty-f { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; }
.ty-form select, .ty-form input[type="number"] { padding: 5px 6px; font-size: 14px; font-family: inherit; background: var(--ty-input-bg); color: var(--ty-text); border: 1px solid var(--ty-input-line); border-radius: 4px; }
#ty-f-y { width: 5em; }
#ty-f-i { width: 3.4em; }
.ty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ty-btn { padding: 7px 22px; border: 0; border-radius: 6px; background: var(--ty-primary); color: var(--ty-on-primary); font-size: 14px; font-family: inherit; cursor: pointer; }
.ty-btn:hover:not(:disabled) { background: var(--ty-primary-hover); }
.ty-btn:disabled { background: var(--ty-disabled); cursor: not-allowed; }
.ty-btn-sm { flex: none; padding: 3px 9px; border: 1px solid var(--ty-accent); border-radius: 5px; background: var(--ty-card); color: var(--ty-accent); font-size: 12px; font-family: inherit; cursor: pointer; }
.ty-error { color: var(--ty-danger); font-size: 14px; }
.ty-error:not(:empty) { margin-top: 8px; }
.ty-empty { margin: 0; font-size: 13px; color: var(--ty-muted); }
.ty-btn:focus-visible, .ty-btn-sm:focus-visible, .ty-theme-btn:focus-visible, .ty-tab:focus-visible, .ty-panel:focus-visible,
.ty-form select:focus-visible, .ty-form input:focus-visible, .ty-panel summary:focus-visible { outline: 2px solid var(--ty-focus); outline-offset: 1px; }
.ty-pill input:focus-visible + span { outline: 2px solid var(--ty-focus); outline-offset: 2px; border-radius: 3px; }

.ty-side { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--ty-split); }
.ty-side-panel[hidden] { display: none; }
.ty-side-panel:focus { outline: none; }
.ty-side-panel:focus-visible { outline: 2px solid var(--ty-focus); outline-offset: 2px; }
.ty-side-tabs .ty-h-count { margin-left: 2px; }
.ty-h-count { font-weight: normal; color: var(--ty-faint); }
.ty-h-note { margin: 0 0 6px; font-size: 12px; color: var(--ty-faint); }
.ty-h-list { list-style: none; margin: 0; padding: 0; }
.ty-h-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--ty-split); font-size: 13px; }
.ty-h-item:first-child { border-top: 0; }
.ty-h-text { color: var(--ty-sub); min-width: 0; overflow-wrap: anywhere; }
.ty-h-ops { flex: none; display: flex; gap: 6px; }
.ty-h-del { border-color: var(--ty-danger); color: var(--ty-danger); }
.ty-h-empty { font-size: 13px; color: var(--ty-faint); padding: 4px 0; }

.ty-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--ty-split); margin-bottom: 10px; }
.ty-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 9px 8px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--ty-muted); cursor: pointer; font-family: inherit; }
.ty-tab:hover { color: var(--ty-text); }
.ty-tab[aria-selected="true"] { color: var(--ty-accent); border-bottom-color: var(--ty-accent); }
.ty-panel { font-size: 14px; line-height: 1.75; }
.ty-panel[hidden] { display: none; }
.ty-panel h3 { margin: 12px 0 4px; font-size: 14px; color: var(--ty-sub); }
.ty-panel h3:first-child { margin-top: 0; }
.ty-panel p { margin: 4px 0; }
.ty-panel ul, .ty-panel ol { margin: 4px 0; padding-left: 20px; }
.ty-panel details { margin: 6px 0; padding: 4px 10px; border-radius: 6px; background: var(--ty-center); outline: 1px solid var(--ty-split); outline-offset: -1px; }
.ty-panel summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ty-accent); }
.ty-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ty-tbl th, .ty-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--ty-split); text-align: left; vertical-align: top; }
.ty-tbl th { color: var(--ty-sub); font-weight: 600; white-space: nowrap; }
.ty-num { font-size: 16px; font-weight: 700; }
.ty-tags { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.ty-tag { padding: 0 6px; border-radius: 9px; background: var(--ty-tag-bg); color: var(--ty-sub); font-size: 12px; line-height: 1.7; }
.ty-note { font-size: 12px; color: var(--ty-muted); }
.ty-pend { display: inline-block; margin-left: 3px; padding: 0 4px; border: 1px solid var(--ty-pending); border-radius: 4px; color: var(--ty-pending); font-size: 11px; line-height: 1.4; font-weight: 600; vertical-align: 1px; }
.ty-geju { margin: 8px 0; padding: 6px 10px; border-left: 3px solid var(--ty-accent); background: var(--ty-center); border-radius: 0 6px 6px 0; }
.ty-geju-h { margin: 0; font-weight: 700; }
.ty-geju .ty-note { margin: 2px 0; }
.ty-geju-src { font-size: 12px; color: var(--ty-muted); }
.ty-quote { margin: 4px 0 0; font-size: 13px; color: var(--ty-sub); }

.ty-tip { position: fixed; z-index: 1000; max-width: min(260px, calc(100vw - 8px)); box-sizing: border-box; padding: 5px 9px; border-radius: 6px;
          background: var(--ty-tip-bg); color: var(--ty-tip-fg); font-size: 12px; line-height: 1.5; pointer-events: none; }
.ty-tip[hidden] { display: none; }
.ty-tip::after { content: ''; position: absolute; left: var(--ty-tip-ax, 50%); top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ty-tip-bg); }
.ty-tip.ty-tip-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ty-tip-bg); }

@media (min-width: 1010px) {
  .ty-wrap { flex-direction: row; align-items: flex-start; }
  .ty-left { flex: 0 0 340px; }
  .ty-right { flex: 1 1 0; }
}
@media (max-width: 479px) {
  .ty-wrap { padding: 10px; }
  .ty-card { padding: 10px; }
  .ty-form-card { padding-right: 44px; }
  .ty-tab { padding: 6px 6px 8px; font-size: 13px; }
  .ty-tbl th, .ty-tbl td { padding: 3px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}