:root { --system-gold:#d0aa55; --system-paper:#e9dfc9; --system-paper-alt:#d8c9a8; --system-red:#79291c; }

.system-page-main { width:min(1500px, calc(100% - 24px)); }
.system-frame { padding:14px; }
.system-guide-content { padding:clamp(14px,2vw,24px); }
.system-catalog { overflow:hidden; border:1px solid #4a3618; border-radius:9px; color:#2b2114; background:var(--system-paper); font:14px/1.6 "PMingLiU", "新細明體", "MingLiU", serif; }
.system-catalog *, .system-catalog *::before, .system-catalog *::after { box-sizing:border-box; }
.system-catalog, .system-catalog * { font-style:normal; }
.system-catalog button, .system-catalog input { font:inherit; }
.system-catalog button { cursor:pointer; }
.system-catalog-heading { min-height:118px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 30px; color:#fff6d5; border-bottom:3px solid var(--system-gold); background:radial-gradient(circle at 82% 50%,rgba(194,145,53,.22),transparent 34%),linear-gradient(115deg,#080705,#2a1b0c 65%,#0b0906); }
.system-catalog-heading p { margin:0 0 7px; color:var(--system-gold); font-weight:bold; font-size:11px; letter-spacing:.24em; }
.system-catalog-heading h1 { margin:0; color:#fff4cf; font-size:clamp(27px,3vw,42px); letter-spacing:.08em; text-shadow:0 3px #000; }
.system-catalog-heading span { display:block; margin-top:8px; color:#cbbd9d; }
.system-catalog-heading>strong { min-width:130px; padding:12px 18px; border:1px solid #8d6a31; color:#d6c08f; background:rgba(0,0,0,.35); text-align:center; }
.system-catalog-heading>strong b { display:block; color:#f6d77e; font:34px/1 Georgia,serif; }

.system-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:20px 22px; border-bottom:1px solid #a37e39; background:#ddd0b4; }
.system-index a { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:16px 18px; border:1px solid #987438; color:#392714; background:#f8f2e4; text-decoration:none; }
.system-index a:hover { border-color:#4a2e0d; background:#fff1c8; transform:translateY(-1px); }
.system-index-number { display:grid; place-items:center; width:44px; height:44px; color:#f1cf78; background:#21180d; font:bold 18px Georgia,serif; }
.system-index b { display:block; color:#72261a; font-size:17px; letter-spacing:.04em; }
.system-index small { display:block; overflow:hidden; margin-top:5px; color:#716044; font-size:12px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.system-index em { padding:7px 10px; border:1px solid #b98b43; color:#6c3d13; background:#f2dfaf; font-style:normal; font-weight:bold; white-space:nowrap; }

.system-detail { margin:22px; scroll-margin-top:78px; border:1px solid #987438; background:#f8f2e4; box-shadow:0 2px 9px #51391522; }
.system-detail>header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; color:#f5d98d; background:linear-gradient(90deg,#25190c,#4b3517); }
.system-detail>header p { margin:0; color:#ad9870; font-size:9px; letter-spacing:.18em; }
.system-detail>header h2 { margin:2px 0 0; color:#ffe3a0; font-size:22px; }
.system-detail>header a { padding:7px 10px; border:1px solid #9f7834; color:#f2d27e; text-decoration:none; white-space:nowrap; }
.system-body { padding:18px; }
.system-intro-grid, .system-stat-grid, .system-rule-grid { display:grid; gap:12px; }
.system-intro-grid { grid-template-columns:minmax(210px,.65fr) 1.35fr; }
.system-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.system-rule-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.system-panel, .system-stat, .system-rule, .system-subsection { border:1px solid #b89961; background:#f8f2e4; }
.system-panel, .system-stat, .system-rule { padding:15px; }
.system-panel h3, .system-subsection>h3 { margin:0; color:#6e2619; font-size:17px; }
.system-panel p, .system-rule p { margin:7px 0 0; color:#5d4b33; }
.system-panel ol, .system-panel ul { margin:8px 0 0; padding-left:22px; }
.system-panel li { margin:5px 0; }
.system-media { text-align:center; color:#ead69e; background:#21180d; }
.system-media img { display:block; width:100%; height:118px; object-fit:contain; margin-bottom:7px; background:#0b0906; image-rendering:auto; }
.system-media small { display:block; color:#9d8a65; }
.system-stat b, .system-stat strong, .system-stat small { display:block; }
.system-stat b { color:#79633d; font-size:11px; }
.system-stat strong { margin:7px 0; color:#7b291b; font-size:19px; }
.system-stat small { color:#716147; }
.system-notice { margin:13px 0 0; padding:12px 15px; border-left:4px solid #9d3522; color:#5e452b; background:#f4e5cb; }
.system-notice b { color:#822b1c; }
.system-tools { position:sticky; top:66px; z-index:3; display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin:15px 0; padding:12px; color:#efd58e; background:#21180d; box-shadow:0 4px 12px #1a0e0440; }
.system-tools label { display:grid; flex:1; min-width:220px; gap:4px; font-size:11px; }
.system-tools input { min-height:38px; padding:8px 10px; border:1px solid #9a773a; color:#271d11; background:#fffaf0; }
.system-tools strong { margin-left:auto; white-space:nowrap; }
.system-tabs { display:flex; flex-wrap:wrap; gap:7px; }
.system-tabs button { padding:8px 13px; border:1px solid #9d793c; color:#5d4223; background:#f8f0de; font-weight:bold; }
.system-tabs button.active { color:#f4d882; border-color:#b98c44; background:#332211; }

.system-subsection { margin-top:14px; }
.system-subsection>h3 { display:flex; justify-content:space-between; padding:11px 14px; color:#f0d487; background:#3a2914; }
.system-subsection>h3 small { color:#cfba87; }
.system-row { display:grid; grid-template-columns:170px 1fr; border-top:1px solid #ddcba5; }
.system-row:nth-child(odd) { background:#eee1c7; }
.system-row>* { padding:10px 13px; }
.system-row b { color:#742619; }
.system-row span { min-width:0; color:#4f402c; }
.system-row-values { display:flex; flex-wrap:wrap; gap:6px; }
.system-value { display:inline-block; padding:3px 7px; border:1px solid #d1ae6c; color:#7b291b; background:#fffaf0; font-style:normal; font-weight:bold; }
.system-ability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.system-ability-grid article { min-height:62px; padding:10px 12px; border-right:1px solid #d0bd93; border-bottom:1px solid #d0bd93; }
.system-ability-grid article:nth-child(3n) { border-right:0; }
.system-ability-grid span { display:block; color:#5b482c; }
.system-ability-grid strong { display:block; margin-top:5px; color:#812d1d; font-size:16px; }

.system-table-wrap { overflow:auto; }
.system-table { width:100%; min-width:760px; border-collapse:collapse; }
.system-table th { padding:9px 10px; color:#6b4d25; background:#dfd0b2; text-align:left; white-space:nowrap; }
.system-table td { padding:9px 10px; border-top:1px solid #ddcba5; color:#4d3a20; }
.system-table tr:nth-child(even) { background:#f0e4cc; }
.system-table td:first-child { color:#6f2619; font-weight:bold; }
.system-table img { width:30px; height:30px; margin-right:7px; object-fit:contain; vertical-align:middle; }
.system-rank-card { margin-top:12px; border:1px solid #9a773a; }
.system-rank-head { display:grid; grid-template-columns:1fr auto; gap:4px; padding:12px 15px; background:#dfd0b2; }
.system-rank-head span { color:#8a6a34; font-size:10px; }
.system-rank-head h4 { margin:0; color:#712719; font-size:19px; }
.system-rank-head>b { grid-row:1/3; grid-column:2; align-self:center; color:#5b3d17; }
.system-rank-bonuses { padding:7px 14px; }
.system-rank-bonuses div { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid #e1d0ad; }
.system-rank-bonuses div:last-child { border:0; }
.system-rank-bonuses strong { color:#852b1b; }
.system-empty, .system-loading { margin:22px; padding:60px 20px; border:1px solid #a98b53; color:#6d5c3d; background:#f8f2e4; text-align:center; }
.dark-drop-image { display:block; width:100%; height:76px; margin:12px auto 0; border:1px solid #9f7b42; background:#21180d; object-fit:contain; }
.dark-advanced { margin-top:28px; padding-top:22px; border-top:2px solid #9e7738; }
.dark-advanced>h3 { margin:0 0 5px; color:#68281b; font-size:23px; }
.dark-advanced>p { margin:0; color:#635039; }
.dark-item-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.dark-item-card { padding:14px; border:1px solid #b89961; background:#f8f2e4; }
.dark-item-head { display:flex; align-items:center; gap:11px; padding-bottom:10px; border-bottom:1px solid #e5d2ac; }
.dark-item-head img { width:46px; height:46px; object-fit:contain; }
.dark-item-head h4 { margin:0; color:#68281b; font-size:16px; }
.dark-item-head p, .dark-item-card>p { margin:4px 0 0; color:#755c36; font-size:12px; }
.dark-item-card ul { margin:8px 0 0; padding-left:20px; }
.dark-advanced-table { min-width:930px; }
.dark-advanced-table th:not(:first-child):not(:last-child), .dark-advanced-table td:not(:first-child):not(:last-child) { text-align:center; }

@media(max-width:900px) {
  .system-index { grid-template-columns:1fr; }
  .system-stat-grid, .system-rule-grid { grid-template-columns:1fr; }
  .dark-item-grid { grid-template-columns:1fr; }
  .system-ability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .system-ability-grid article:nth-child(3n) { border-right:1px solid #d0bd93; }
  .system-ability-grid article:nth-child(2n) { border-right:0; }
}
@media(max-width:700px) {
  .system-page-main { width:100%; padding-top:14px; }
  .system-catalog-heading { min-height:105px; padding:18px; }
  .system-catalog-heading>strong { min-width:90px; }
  .system-index { padding:10px; }
  .system-index a { grid-template-columns:minmax(0,1fr); gap:8px; padding:14px; }
  .system-index em { display:none; }
  .system-detail { margin:14px 10px; }
  .system-body { padding:10px; }
  .system-intro-grid { grid-template-columns:1fr; }
  .system-row { grid-template-columns:1fr; }
  .system-row span { padding-top:0; }
  .system-tools { position:relative; top:auto; }
  .system-page-footer { width:100%; }
}
@media(max-width:500px) {
  .system-catalog-heading span { display:none; }
  .system-ability-grid { grid-template-columns:1fr; }
  .system-ability-grid article, .system-ability-grid article:nth-child(3n) { border-right:0; }
}