:root {
      --page-bg: #20242b;
      --paper: #f8f5ea;
      --paper-raised: #fffdf7;
      --ink: #29323a;
      --muted: #6e756f;
      --line: #d7ccb3;
      --accent: #397fb3;
      --accent-soft: #e4f1f8;
      --complete: #3f8155;
      --action: #c86f32;
    }

    /* Design System & CSS Reset */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Noto Sans SC', 'Outfit', sans-serif;
      background: #20242b;
      color: #333;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding: 20px;
    }

    .site-icp {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 6px;
      text-align: center;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.58);
      z-index: 1;
    }

    .site-icp a {
      color: inherit;
      text-decoration: none;
    }

    .site-icp a:hover {
      color: #fff;
    }

    /* Main Notebook Container */
    #notebook-app {
      width: 100%;
      max-width: 1100px;
      height: 85vh;
      max-height: 800px;
      background: #fdfaf2; /* In-game parchment style */
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4),
                  inset 0 0 40px rgba(181, 151, 99, 0.15);
      border: 4px solid #b59763; /* Vintage gold border */
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    /* Header Tab Stylings */
    .notebook-header {
      background: #4682b4;
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 24px;
      border-bottom: 3px solid #b59763;
      position: relative;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .header-tab {
      background: #fdfaf2;
      height: 44px;
      margin-top: 16px;
      padding: 0 32px;
      border-radius: 8px 8px 0 0;
      border: 3px solid #b59763;
      border-bottom: none;
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 700;
      color: #3b5998;
      box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Layout Content Columns */
    .notebook-body {
      flex: 1;
      display: flex;
      overflow: hidden;
    }

    /* Left Sidebar: Quest List */
    .quest-sidebar {
      width: 380px;
      border-right: 3px solid #eadecb;
      display: flex;
      flex-direction: column;
      background-color: #f7f1e3; /* Warm beige */
    }

    /* Search Section */
    .search-box-container {
      padding: 16px;
      border-bottom: 2px solid #eadecb;
    }

    .search-box {
      width: 100%;
      height: 42px;
      padding: 0 16px;
      border: 2px solid #b59763;
      border-radius: 20px;
      font-size: 14px;
      outline: none;
      background: #fdfaf2;
      transition: all 0.3s ease;
      color: #444;
    }

    .search-box:focus {
      box-shadow: 0 0 10px rgba(70, 130, 180, 0.3);
      border-color: #4682b4;
    }

    /* Scrollable List */
    .quest-list {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
    }

    /* Scrollbar Style */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb {
      background: #cbb389;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #b59763;
    }

    /* Quest List Item Card */
    .quest-item {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      background: #fdfaf2;
      border: 2px solid #eadecb;
      border-radius: 8px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .quest-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
      border-color: #b59763;
    }

    .researcher-map-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .researcher-map-card {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 6px;
      border: 1px solid #d7ccb3;
      border-radius: 6px;
      background: #fffdf7;
      color: #397fb3;
      text-decoration: none;
      font-size: 12px;
    }

    .researcher-map-card:hover {
      border-color: #397fb3;
      box-shadow: 0 2px 6px rgba(57, 127, 179, 0.18);
    }

    .researcher-map-card img {
      display: block;
      width: 100%;
      aspect-ratio: 1.25;
      object-fit: cover;
      border: 1px solid #eadecb;
      background: #f7f1e3;
    }

    .quest-item.active, .quest-item.selected {
      background: #e9f3fc;
      border-color: #4682b4;
      box-shadow: 0 4px 12px rgba(70, 130, 180, 0.15);
    }

    /* Quest Chain Parent Header style */
    .quest-chain-header {
      background: rgba(139, 90, 43, 0.06);
      border: 2px solid rgba(139, 90, 43, 0.2);
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      font-weight: bold;
      color: #5c3a21;
      font-size: 15px;
      user-select: none;
      transition: all 0.2s;
    }

    .quest-chain-header:hover {
      background: rgba(139, 90, 43, 0.12);
      border-color: rgba(139, 90, 43, 0.4);
    }

    .quest-chain-header .chain-arrow {
      margin-right: 8px;
      width: 14px;
      display: inline-block;
      color: #8b5a2b;
    }

    .quest-chain-header .chain-title {
      color: #5c3a21;
      flex: 1;
      min-width: 0;
    }

    .quest-chain-header .chain-count {
      font-size: 12px;
      color: #8b5a2b;
      margin-left: 8px;
      font-weight: normal;
      background: rgba(139, 90, 43, 0.1);
      padding: 2px 8px;
      border-radius: 12px;
    }

    .quest-chain-header .chain-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 8px;
      flex-shrink: 0;
    }

    .quest-chain-header .chain-action-btn {
      border: 1px solid rgba(139, 90, 43, 0.28);
      background: #fffaf0;
      color: #6b421d;
      border-radius: 6px;
      padding: 3px 7px;
      font-size: 11px;
      line-height: 1.2;
      font-weight: 700;
      cursor: pointer;
    }

    .quest-chain-header .chain-action-btn:hover {
      border-color: #8b5a2b;
      background: #fff3dc;
    }

    .quest-chain-header .chain-action-btn:focus-visible {
      outline: 2px solid #4682b4;
      outline-offset: 2px;
    }

    .quest-chain-header .chain-guide-link {
      margin-left: 8px;
      color: #1e6bb8;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
    }

    .quest-chain-header .chain-guide-link:hover {
      text-decoration: underline;
    }

    /* Checkbox Badge */
    .quest-check {
      width: 24px;
      height: 24px;
      border: 2px solid #b59763;
      border-radius: 50%;
      margin-right: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
      background: #fff;
    }

    /* Checkmark SVG */
    .quest-check svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: white;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.2s ease;
    }

    /* Quest Tags & Text */
    .quest-type-tag {
      font-size: 13px;
      font-weight: bold;
      margin-right: 6px;
    }

    .quest-type-tag.main {
      color: #e53935; /* Red for Main Quest */
    }
    .quest-type-tag.side {
      color: #1e88e5; /* Blue for Side Quest */
    }
    .quest-type-tag.partner {
      color: #c33cff; /* Purple for companion/partner quests */
    }
    .quest-type-tag.unknown {
      color: #999; /* Gray for unclassified */
    }

    .search-box-stats {
      font-size: 11px;
      color: #888;
      padding: 0 16px 6px 16px;
      border-bottom: 1px solid #eadecb;
      display: flex;
      gap: 12px;
    }
    .search-box-stats span { white-space: nowrap }
    .stat-main { color: #e53935; font-weight: bold }
    .stat-side { color: #1e88e5; font-weight: bold }
    .stat-unknown { color: #999 }

    .quest-name-text {
      font-size: 15px;
      font-weight: 500;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    /* Bottom Warning Hint */
    .sidebar-footer {
      padding: 12px;
      border-top: 2px solid #eadecb;
      font-size: 13px;
      color: #a04040;
      font-weight: bold;
      text-align: center;
      background: #f1e7d2;
    }

    /* Right Main Panel: Quest Details */
    .quest-details-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 32px;
      background-color: #fdfaf2;
      overflow-y: auto;
    }

    /* Welcome / Empty State Screen */
    .empty-state {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #8b7a66;
      text-align: center;
    }

    .empty-state svg {
      width: 80px;
      height: 80px;
      fill: #cbb389;
      margin-bottom: 16px;
    }

    /* Active Quest Pane Elements */
    .details-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px dashed #b59763;
      padding-bottom: 16px;
      margin-bottom: 24px;
    }

    .details-quest-title {
      font-size: 26px;
      font-weight: 700;
      color: #2b3a56;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .details-quest-badge {
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: bold;
      color: #fff;
    }
    .details-quest-badge.main { background-color: #e53935; }
    .details-quest-badge.side { background-color: #1e88e5; }
    .details-quest-badge.partner { background-color: #c33cff; }
    .features { font-size:12px;color:#888;margin-top:2px }

    .details-quest-meta {
      font-size: 14px;
      color: #666;
      display: flex;
      gap: 16px;
    }

    .meta-badge {
      background: #eadecb;
      padding: 4px 12px;
      border-radius: 12px;
      font-weight: 500;
      color: #554433;
    }

    /* Section Frame Styling */
    .details-section {
      margin-bottom: 28px;
    }

    .detail-section {
      margin-bottom: 28px;
      min-width: 0;
    }

    .detail-section > h2 {
      margin: 0 0 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #d9c8a8;
      color: #4f4233;
      font-size: 15px;
      line-height: 1.3;
    }

    .quest-intro,
    .quest-completion,
    .detail-empty {
      color: #5e554c;
      font-size: 14px;
      line-height: 1.7;
      overflow-wrap: anywhere;
    }

    .quest-completion {
      margin-top: 12px;
      color: #4a5d3a;
    }

    .quest-steps {
      display: grid;
      gap: 0;
      margin-top: 12px;
      list-style: none;
    }

    .quest-step {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #e3ddd2;
    }

    .quest-step > span {
      display: grid;
      width: 26px;
      height: 26px;
      place-items: center;
      border: 1px solid #b59763;
      border-radius: 50%;
      color: #705b3d;
      font-size: 12px;
      font-weight: 700;
    }

    .quest-step > p {
      min-width: 0;
      color: #4f4942;
      font-size: 14px;
      line-height: 1.65;
      overflow-wrap: anywhere;
    }

    .reward-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      min-width: 0;
    }

    .reward-list .reward-item {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      width: auto;
      min-width: 0;
      min-height: 64px;
      height: auto;
      padding: 8px 10px;
      border-width: 1px;
      border-radius: 6px;
    }

    .reward-list .reward-item:hover {
      transform: none;
    }

    .reward-item-image {
      display: block;
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    .reward-item-fallback {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      color: #426f91;
      font-size: 12px;
      font-weight: 700;
    }

    .reward-item-copy,
    .reward-name {
      min-width: 0;
    }

    .reward-name {
      color: #34414b;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .reward-list .reward-value {
      margin-top: 2px;
      color: #66717a;
      font-size: 12px;
      text-align: left;
    }

    .reward-unlock {
      display: block;
      margin-top: 3px;
      color: #2f6d99;
      font-size: 11px;
      line-height: 1.3;
      text-decoration: none;
      overflow-wrap: anywhere;
    }

    .reward-unlock:hover,
    .reward-unlock:focus-visible {
      text-decoration: underline;
    }

    .section-title-line {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      position: relative;
    }

    .section-title-line::after {
      content: '';
      flex: 1;
      height: 2px;
      background: #b59763;
      margin-left: 12px;
    }

    .section-title-text {
      background: #4682b4;
      color: white;
      padding: 4px 18px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: bold;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* External guide reference (guide_reference only) */
    .external-guide-panel {
      border: 1px solid #d9c8a8;
      border-radius: 10px;
      background: #faf6ee;
      overflow: hidden;
    }

    .external-guide-panel > summary {
      list-style: none;
      cursor: pointer;
      user-select: none;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-weight: 600;
      color: #5a4630;
      background: #f3ebdc;
    }

    .external-guide-panel > summary::-webkit-details-marker {
      display: none;
    }

    .external-guide-panel > summary::before {
      content: '▸';
      color: #8a7048;
      margin-right: 6px;
    }

    .external-guide-panel[open] > summary::before {
      content: '▾';
    }

    .external-guide-summary-meta {
      font-size: 12px;
      font-weight: 500;
      color: #8b7355;
      white-space: nowrap;
    }

    .external-guide-body {
      padding: 12px 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .external-guide-card {
      border: 1px solid #e4d6ba;
      border-radius: 8px;
      background: #fffdf8;
      padding: 12px;
    }

    .external-guide-card-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .external-guide-title {
      font-weight: 700;
      color: #3d4f6f;
      font-size: 15px;
    }

    .source-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.4;
    }

    .source-badge.ref {
      background: #fff3cd;
      color: #7a5b00;
      border: 1px solid #f0d78c;
    }

    .source-badge.official {
      background: #e8f1fb;
      color: #1e5a96;
      border: 1px solid #b7d0ef;
    }

    .source-badge.bahamut {
      background: #f3e8ff;
      color: #6b21a8;
      border: 1px solid #d8b4fe;
    }

    .source-badge.chapter {
      background: #eef2f7;
      color: #475569;
      border: 1px solid #cbd5e1;
    }

    .answer-key-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
      background: #e6f4ea;
      color: #1e7a3c;
      border: 1px solid #b8e0c4;
      white-space: nowrap;
    }

    .external-guide-field {
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.55;
      color: #4a4033;
    }

    .external-guide-field-label {
      display: inline-block;
      min-width: 4.5em;
      color: #8b7355;
      font-weight: 600;
      font-size: 12px;
      margin-right: 6px;
    }

    .external-guide-walkthrough {
      white-space: pre-wrap;
      word-break: break-word;
      margin-top: 4px;
      padding: 8px 10px;
      background: #f7f1e6;
      border-radius: 6px;
      border-left: 3px solid #c4a574;
    }

    .external-guide-link {
      display: inline-block;
      margin-top: 8px;
      font-size: 13px;
      color: #1e6bb8;
      text-decoration: none;
    }

    .external-guide-link:hover {
      text-decoration: underline;
    }

    .external-guide-note {
      font-size: 12px;
      color: #8b7355;
      line-height: 1.5;
    }

    /* Action-level routes for tasks whose normal navigation is incomplete. */
    .exploration-guide-section {
      border-top: 1px solid #c8d3dc;
      border-bottom: 1px solid #c8d3dc;
      padding: 14px 0 16px;
    }

    .exploration-guide-summary {
      color: #263746;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.55;
      padding: 0 2px 12px;
    }

    .exploration-guide-actions {
      border-top: 1px solid #dce3e8;
    }

    .exploration-guide-action {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 10px;
      padding: 12px 2px;
      border-bottom: 1px solid #e5eaee;
    }

    .exploration-guide-action:last-child {
      border-bottom: 0;
    }

    .exploration-guide-index {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #315f72;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .exploration-guide-action-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .exploration-guide-instruction {
      min-width: 0;
      color: #25313a;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
      word-break: break-word;
    }

    .exploration-guide-badge {
      flex: 0 0 auto;
      padding: 2px 7px;
      border: 1px solid #b7cad4;
      border-radius: 4px;
      color: #315f72;
      background: #edf4f7;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }

    .exploration-guide-badge.navigation {
      border-color: #b9d3bf;
      background: #eef7f0;
      color: #35633f;
    }

    .exploration-guide-badge.region,
    .exploration-guide-badge.reference {
      border-color: #dec98f;
      background: #fff8e7;
      color: #765c17;
    }

    .exploration-guide-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 12px;
      margin-top: 7px;
      color: #60717e;
      font-size: 12px;
      line-height: 1.45;
    }

    .exploration-guide-coordinates {
      color: #60717e;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    .exploration-guide-map-button {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid #315f72;
      border-radius: 4px;
      padding: 6px 10px;
      background: #315f72;
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
    }

    .exploration-guide-map-button:hover,
    .exploration-guide-map-button:focus-visible {
      border-color: #244f61;
      background: #244f61;
      outline: none;
    }

    /* Inline Map Viewer & Points */
    .inline-map-card {
      margin-top: 12px;
      margin-bottom: 16px;
      background: #fafbfc;
      border: 1px solid #dce3e8;
      border-radius: 6px;
      padding: 12px;
    }

    .inline-map-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }

    .inline-map-card-title {
      font-size: 13px;
      font-weight: 700;
      color: #263746;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .inline-map-card-hint {
      font-size: 11px;
      color: #60717e;
    }

    .inline-map-wrapper {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #c8d3dc;
      background: #1e293b;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      user-select: none;
    }

    .inline-map-image {
      display: block;
      width: 100%;
      height: auto;
      vertical-align: middle;
    }

    .inline-map-marker {
      position: absolute;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #d32f2f;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
      cursor: pointer;
      z-index: 5;
      transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, z-index 0.15s ease;
    }

    .inline-map-marker:hover,
    .inline-map-marker:focus-visible,
    .inline-map-marker.active {
      transform: translate(-50%, -50%) scale(1.35);
      background: #ff3d00;
      border-color: #ffff00;
      box-shadow: 0 0 12px rgba(255, 61, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5);
      z-index: 25;
      outline: none;
    }

    .inline-map-marker-tooltip {
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(15, 23, 42, 0.94);
      color: #ffffff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.15s ease, visibility 0.15s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
      z-index: 30;
    }

    .inline-map-marker-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 4px solid transparent;
      border-top-color: rgba(15, 23, 42, 0.94);
    }

    .inline-map-marker:hover .inline-map-marker-tooltip,
    .inline-map-marker:focus-visible .inline-map-marker-tooltip,
    .inline-map-marker.active .inline-map-marker-tooltip {
      opacity: 1;
      visibility: visible;
    }

    /* Caution Callout Card */
    .caution-callout {
      background: #fff8e1;
      border: 1px solid #ffe082;
      border-left: 4px solid #ffa000;
      border-radius: 4px;
      padding: 10px 14px;
      margin: 10px 0;
      color: #5d4037;
      font-size: 13px;
      line-height: 1.5;
    }

    .caution-callout-title {
      font-weight: 700;
      color: #e65100;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* Puzzle Explanation Box */
    .puzzle-solution-box {
      background: #f0f7ff;
      border: 1px solid #bbdefb;
      border-left: 4px solid #1976d2;
      border-radius: 4px;
      padding: 10px 14px;
      margin: 10px 0;
      color: #1a365d;
      font-size: 13px;
      line-height: 1.5;
    }

    .puzzle-solution-title {
      font-weight: 700;
      color: #1565c0;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 5px;
    }


    .quest-map-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(23, 35, 42, 0.62);
    }

    .quest-map-modal[hidden] {
      display: none;
    }

    .quest-map-modal-panel {
      width: min(820px, 100%);
      max-height: min(92vh, 900px);
      overflow: auto;
      background: #fffdf8;
      border: 1px solid #c8b995;
      border-radius: 6px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
      padding: 14px;
    }

    .quest-map-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 4px;
    }

    .quest-map-modal-title {
      margin: 0;
      color: #263746;
      font-size: 18px;
      line-height: 1.35;
    }

    .quest-map-modal-close {
      width: 32px;
      height: 32px;
      border: 1px solid #b9a985;
      border-radius: 4px;
      background: #fff;
      color: #5f513b;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }

    .quest-map-modal-close:hover,
    .quest-map-modal-close:focus-visible {
      border-color: #315f72;
      color: #244f61;
      outline: none;
    }

    .quest-map-modal-meta {
      color: #6b7b86;
      font-size: 12px;
      line-height: 1.5;
      margin-bottom: 10px;
    }

    .quest-map-modal-viewport {
      overflow: auto;
      max-height: 72vh;
      background: #e7e1d4;
      border: 1px solid #d5c9b0;
    }

    .quest-map-modal-image-frame {
      position: relative;
      width: 100%;
      min-height: 220px;
    }

    .quest-map-modal-image {
      display: block;
      width: 100%;
      height: auto;
    }

    .quest-map-modal-marker {
      position: absolute;
      width: 18px;
      height: 18px;
      transform: translate(-50%, -50%);
      border: 2px solid #d32f2f;
      border-radius: 50%;
      background: rgb(211 47 47 / 22%);
      box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(0, 0, 0, 0.45);
      pointer-events: none;
    }

    .quest-description-guidance {
      margin-top: 14px;
      padding: 12px 14px;
      border-left: 3px solid var(--accent, #2d667c);
      background: rgba(45, 102, 124, 0.06);
    }

    .quest-description-guidance-title {
      margin-bottom: 6px;
      color: var(--accent, #2d667c);
      font-weight: 700;
    }

    .quest-description-guidance ul {
      margin: 0;
      padding-left: 18px;
    }

    .quest-description-guidance li + li {
      margin-top: 4px;
    }

    .quest-description-map-links {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .quest-description-map-link {
      border: 1px solid rgba(45, 102, 124, 0.35);
      border-radius: 4px;
      padding: 4px 8px;
      color: var(--accent, #2d667c);
      background: #fff;
      cursor: pointer;
      font: inherit;
    }

    .quest-description-map-link:hover,
    .quest-description-map-link:focus-visible {
      background: rgba(45, 102, 124, 0.1);
    }

    .quest-map-modal-marker::before,
    .quest-map-modal-marker::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: #d32f2f;
      transform: translate(-50%, -50%);
    }

    .quest-map-modal-marker::before {
      width: 26px;
      height: 2px;
    }

    .quest-map-modal-marker::after {
      width: 2px;
      height: 26px;
    }

    .quest-map-modal-marker[hidden] {
      display: none;
    }

    .quest-map-modal-status {
      min-height: 18px;
      margin: 8px 0 0;
      color: #765c17;
      font-size: 12px;
    }

    @media (max-width: 640px) {
      .exploration-guide-action-head {
        flex-direction: column;
        gap: 5px;
      }
    }

    .answer-candidate-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .answer-candidate-card {
      border: 1px solid #d5e3f0;
      border-radius: 8px;
      background: #f8fbff;
      padding: 12px;
    }

    .answer-candidate-q {
      font-size: 14px;
      color: #2f3f55;
      line-height: 1.5;
      margin-bottom: 8px;
    }

    .answer-candidate-a {
      font-size: 15px;
      font-weight: 700;
      color: #1b4f72;
    }

    .answer-candidate-a.unknown {
      color: #8b7355;
      font-weight: 600;
    }

    .answer-candidate-meta {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .answer-candidate-opts {
      margin-top: 6px;
      font-size: 13px;
      color: #4a5568;
      line-height: 1.45;
    }

    .answer-candidate-opts strong {
      color: #6b7280;
      font-weight: 600;
      margin-right: 4px;
    }

    .quest-quick-guide {
      display: block;
      margin: 0 0 20px;
      border: 1px solid #b9cbd7;
      border-left: 4px solid var(--accent);
      border-radius: 6px;
      background: #fff;
    }

    .quick-guide-answer {
      min-width: 0;
      padding: 14px 16px;
    }

    .quick-guide-label {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: #315f7d;
      font-size: 12px;
      font-weight: 700;
    }

    .quick-guide-label small {
      color: #7a7469;
      font-size: 11px;
      font-weight: 400;
    }

    .quick-answer-steps {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      list-style: none;
      counter-reset: quick-answer;
    }

    .quick-answer-steps li {
      display: inline-flex;
      min-width: 0;
      align-items: flex-start;
      gap: 6px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.45;
      counter-increment: quick-answer;
    }

    .quick-answer-steps li::before {
      display: inline-flex;
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      content: counter(quick-answer);
      font-size: 11px;
      line-height: 1;
    }

    .quick-answer-steps li:not(:last-child)::after {
      margin-left: 10px;
      color: #8ba4b5;
      content: '›';
      font-size: 17px;
      font-weight: 400;
      line-height: 18px;
    }

    .quick-reward-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .quick-reward-item {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
    }

    .quick-reward-icon {
      display: inline-flex;
      width: 28px;
      height: 28px;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background: #e7edf0;
      color: #315f7d;
      font-size: 10px;
      font-weight: 700;
    }

    .quick-reward-icon .material-summary-image {
      width: 24px;
      height: 24px;
    }

    .quick-reward-copy {
      display: flex;
      min-width: 0;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      line-height: 1.3;
    }

    .quick-reward-copy strong {
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--ink);
      font-size: 13px;
    }

    .quick-reward-copy > span,
    .quick-reward-fallback {
      flex: 0 0 auto;
      color: #65737c;
      font-size: 12px;
    }


    .quest-key-hints {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: -8px 0 20px;
    }

    .quest-key-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      border: 1px solid transparent;
    }

    .quest-key-chip.npc {
      background: #eef6ff;
      color: #1e4b7a;
      border-color: #c5dbf5;
    }

    .quest-key-chip.loc {
      background: #f3f7ef;
      color: #3f5d2e;
      border-color: #c9dcb8;
    }

    .quest-key-chip.fight {
      background: #fff4f0;
      color: #8a341f;
      border-color: #f0c5b5;
    }

    .quest-key-chip.puzzle {
      background: #f7f1ff;
      color: #5b3d8a;
      border-color: #d9c7f0;
    }

    .quest-key-chip.item {
      background: #fff8e8;
      color: #7a5a12;
      border-color: #edd9a2;
    }

    .quest-key-chip span.v {
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 28em;
    }

    .section-content {
      font-size: 16px;
      line-height: 1.6;
      color: #4f4233;
      padding-left: 8px;
    }

    .quest-step-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .quest-step-row {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid #e3ddd2;
    }

    .quest-step-index {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #315f7d;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .quest-step-location {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      margin-top: 7px;
      min-width: 0;
    }

    .quest-step-route,
    .quest-step-observation {
      margin-top: 6px;
      overflow-wrap: anywhere;
    }

    /* Quest acquisition: verified entry, recorded requirement, recommendation rule. */
    .acquisition-grid {
      border-top: 1px solid #c8d3dc;
    }

    .acquisition-row {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      padding: 13px 2px;
      border-bottom: 1px solid #dce3e8;
      color: #35434b;
      font-size: 14px;
      line-height: 1.55;
    }

    .acquisition-label {
      padding-top: 2px;
      color: #315f7d;
      font-size: 12px;
      font-weight: 700;
    }

    .acquisition-content,
    .acquisition-entry-action,
    .acquisition-entry-main {
      min-width: 0;
    }

    .acquisition-entry-action + .acquisition-entry-action {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed #d6dee3;
    }

    .acquisition-entry-main {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 5px;
      color: #25313a;
      font-size: 14px;
    }

    .acquisition-entry-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px 10px;
      margin-top: 7px;
    }

    .acquisition-entry-coordinates {
      color: #60717e;
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    .recommendation-compact {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px 10px;
    }

    .recommendation-compact-conditions {
      min-width: 0;
      color: #5e6d65;
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .acquisition-advisory {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px 10px;
    }

    .recommendation-level-badge,
    .acquisition-requirement-badge,
    .acquisition-no-prerequisite {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 8px;
      border-radius: 3px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
    }

    .recommendation-level-badge {
      background: #f2c3c8;
      color: #7b2634;
    }

    .acquisition-requirement-badge {
      background: #f4dfbd;
      color: #704b21;
    }

    .acquisition-no-prerequisite {
      background: #e8edf0;
      color: #53616a;
    }

    .acquisition-advisory-note {
      color: #68767d;
      font-size: 12px;
    }

    .acquisition-empty {
      margin: 0;
      color: #757d83;
      font-size: 13px;
    }

    .recommendation-panel {
      padding: 0;
      border: 0;
      background: transparent;
      color: #35463f;
    }

    .recommendation-panel.disabled {
      color: #594a3b;
    }

    .recommendation-panel.unavailable {
      color: #555d62;
    }

    .recommendation-summary {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
    }

    .recommendation-summary p {
      min-width: 0;
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .recommendation-status,
    .recommendation-logic-badge {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      min-height: 22px;
      padding: 2px 7px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
    }

    .recommendation-status.enabled {
      background: #2f7b62;
      color: #fff;
    }

    .recommendation-status.disabled {
      background: #9a6a3a;
      color: #fff;
    }

    .recommendation-status.unavailable {
      background: #757d83;
      color: #fff;
    }

    .recommendation-condition-list {
      margin-top: 11px;
      border-top: 1px solid rgba(47, 123, 98, 0.2);
    }

    .recommendation-panel.disabled .recommendation-condition-list {
      border-top-color: rgba(154, 106, 58, 0.22);
    }

    .recommendation-condition-row {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 10px;
      min-width: 0;
      padding: 8px 0;
      border-bottom: 1px solid rgba(83, 105, 95, 0.14);
    }

    .recommendation-condition-kind {
      color: #386a58;
      font-size: 12px;
      font-weight: 700;
    }

    .recommendation-panel.disabled .recommendation-condition-kind {
      color: #805b38;
    }

    .recommendation-condition-text {
      min-width: 0;
      font-size: 13px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .recommendation-condition-detail {
      margin-top: 4px;
      color: #77827c;
      font-size: 11px;
    }

    .recommendation-condition-detail summary {
      width: max-content;
      cursor: pointer;
      color: #65756d;
    }

    .recommendation-condition-detail span {
      display: block;
      margin-top: 2px;
    }

    .recommendation-any-group {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 10px;
      padding-top: 8px;
    }

    .recommendation-logic-badge {
      align-self: start;
      justify-self: start;
      background: #dcece5;
      color: #2f6954;
    }

    .recommendation-any-list .recommendation-condition-row {
      grid-template-columns: 76px minmax(0, 1fr);
      padding-top: 0;
    }

    .recommendation-base-rule {
      margin: 9px 0 0;
      color: #65736d;
      font-size: 12px;
      line-height: 1.5;
    }

    .req-list-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .req-item-badge {
      background: #fff;
      border: 1.5px solid #d4c4a8;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
      transition: all 0.2s ease;
    }

    .req-item-badge:hover {
      border-color: #b59763;
      transform: translateY(-1px);
    }

    .req-item-icon {
      width: 28px;
      height: 28px;
      background-color: #f1e7d2;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }

    /* Reward Items Grid */
    .rewards-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 10px;
    }

    /* Reward Card Base */
    .reward-card {
      width: 90px;
      height: 90px;
      background: #fff;
      border: 2px solid #6395c5; /* Blue board for items */
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .reward-card:hover {
      transform: scale(1.08) rotate(2deg);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      border-color: #4682b4;
    }

    /* EXP Card Customization */
    .reward-card.exp {
      border-color: #51c055; /* Green board for EXP */
      background: #f0fff0;
    }

    .reward-icon-container {
      width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28px;
      margin-bottom: 4px;
    }

    .exp-label {
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      font-weight: 800;
      color: #388e3c;
      letter-spacing: 0.5px;
    }

    .reward-value {
      font-size: 13px;
      color: #835c24;
      font-weight: bold;
      text-align: center;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 4px;
    }

    .reward-card.exp .reward-value {
      color: #2e7d32;
      font-size: 14px;
    }

    .reward-card.extra {
      width: auto;
      min-width: 120px;
      max-width: 220px;
      height: auto;
      min-height: 90px;
      padding: 10px 8px;
      border-color: #c48a3a;
      background: #fff8ee;
    }

    .reward-card.extra .reward-value {
      white-space: normal;
      line-height: 1.25;
      color: #9a5b12;
      font-size: 12px;
    }

    .reward-card.extra .reward-stats {
      margin-top: 4px;
      font-size: 11px;
      color: #6d4c2b;
      text-align: center;
      line-height: 1.2;
      word-break: break-word;
    }

    .reward-card.extra .reward-extra-tag {
      position: absolute;
      top: 4px;
      right: 4px;
      font-size: 10px;
      color: #a66b1d;
      background: rgba(255, 244, 224, 0.95);
      border-radius: 4px;
      padding: 1px 4px;
    }

    .combat-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .combat-card {
      min-width: 140px;
      max-width: 200px;
      background: #f3f7ff;
      border: 1px solid #8aa4c8;
      border-radius: 10px;
      padding: 8px 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .combat-card.candidate {
      background: #fff7ed;
      border-color: #d6a15e;
    }

    .combat-card-name {
      font-weight: 700;
      color: #2b3a56;
      font-size: 13px;
      margin-bottom: 4px;
    }

    .combat-card-meta {
      font-size: 12px;
      color: #4a5d7a;
      line-height: 1.35;
    }

    .combat-card-stats {
      margin-top: 4px;
      font-size: 11px;
      color: #6a7280;
      line-height: 1.3;
    }

    .combat-encounter-note {
      font-size: 12px;
      color: #6a7280;
      margin-bottom: 4px;
    }

    .combat-candidate-badge {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 5px;
      border-radius: 4px;
      background: #fff3df;
      color: #9a5b12;
      border: 1px solid #e0b06b;
      font-size: 11px;
      font-weight: 600;
    }

    /* =========================================================
       Tactical Battle Formation Grid (2x4)
       ========================================================= */
    .formation-block {
      background: #fdfdfd;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 16px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    }

    .formation-encounter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #e2e8f0;
    }

    .formation-title-group {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .formation-label {
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
    }

    .formation-summary-badge {
      font-size: 12px;
      font-weight: 600;
      color: #0369a1;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      border-radius: 6px;
      padding: 2px 8px;
    }

    /* 2x4 Board layout - true row-paired CSS Grid */
    .formation-board-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      align-items: stretch;
    }

    .board-col-header {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      text-align: center;
      padding: 4px 0 6px;
      border-bottom: 1.5px solid #cbd5e1;
    }

    /* Slot Card - 2x4 cell with high information density */
    .formation-slot {
      background: #f0f6ff;
      border: 1.5px solid #bfdbfe;
      border-radius: 8px;
      padding: 8px 10px;
      position: relative;
      transition: all 0.15s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 108px;
      box-sizing: border-box;
    }

    .formation-slot:hover {
      border-color: #60a5fa;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
    }

    .formation-slot.is-boss {
      background: #fffdf5;
      border-color: #fde68a;
    }

    .formation-slot.is-boss:hover {
      border-color: #f59e0b;
    }

    /* Header line inside slot card */
    .slot-header-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
      gap: 6px;
    }

    .slot-header-left {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .slot-header-right {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .slot-pos-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      background: #dbeafe;
      color: #1e40af;
      line-height: 1.3;
    }

    .slot-pos-badge.boss-pos {
      background: #fef08a;
      color: #854d0e;
    }

    .slot-boss-tag {
      font-size: 11px;
      font-weight: 700;
      color: #b45309;
      background: #fef3c7;
      padding: 1px 6px;
      border-radius: 4px;
      border: 1px solid #fde68a;
      line-height: 1.3;
    }

    .slot-single-tag {
      font-size: 10.5px;
      color: #94a3b8;
      background: rgba(255, 255, 255, 0.7);
      padding: 1px 5px;
      border-radius: 3px;
      border: 1px solid #e2e8f0;
    }

    /* Sequential Reinforcement Mini-Tabs */
    .slot-stage-tabs {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    .slot-stage-tab {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      padding: 1px 6px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      line-height: 1.3;
      transition: all 0.15s ease;
    }

    .slot-stage-tab:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    .slot-stage-tab.active {
      background: #2563eb;
      border-color: #1d4ed8;
      color: #ffffff;
      font-weight: 700;
      box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3);
    }

    /* Slot Stage Content */
    .slot-stage-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .slot-unit-name-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 3px;
      flex-wrap: wrap;
    }

    .slot-unit-name {
      font-size: 13.5px;
      font-weight: 700;
      color: #1e293b;
      line-height: 1.3;
    }

    .slot-reinf-step-badge {
      font-size: 10px;
      font-weight: 600;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 3px;
      padding: 0 4px;
      line-height: 1.3;
    }

    .slot-unit-meta {
      font-size: 12px;
      color: #475569;
      margin-bottom: 4px;
      line-height: 1.3;
    }

    .slot-unit-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 3px 8px;
      font-size: 11.5px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: #334155;
      line-height: 1.35;
      background: rgba(255, 255, 255, 0.55);
      padding: 3px 6px;
      border-radius: 4px;
      border: 1px solid rgba(191, 219, 254, 0.6);
    }

    .stat-cell {
      display: inline-flex;
      align-items: baseline;
      white-space: nowrap;
    }

    .stat-k {
      color: #64748b;
      font-weight: 600;
      font-size: 11px;
      margin-right: 2px;
    }

    .stat-v {
      color: #1e293b;
      font-weight: 700;
    }

    /* Element tags */
    .slot-element-tag {
      font-size: 12px;
      font-weight: 600;
    }
    .slot-element-tag.elem-地 { color: #b45309; }
    .slot-element-tag.elem-水 { color: #0284c7; }
    .slot-element-tag.elem-火 { color: #dc2626; }
    .slot-element-tag.elem-风 { color: #16a34a; }
    .slot-element-tag.elem-无 { color: #64748b; }

    /* Empty Slot */
    .formation-slot.empty {
      border: 1.5px dashed #cbd5e1;
      background: #f8fafc;
      opacity: 0.85;
      min-height: 108px;
    }

    .formation-slot.empty:hover {
      border-color: #94a3b8;
      background: #f1f5f9;
    }

    .slot-empty-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 60px;
    }

    .slot-empty-title {
      font-size: 13px;
      font-weight: 700;
      color: #94a3b8;
    }

    .slot-empty-desc {
      font-size: 11px;
      color: #94a3b8;
      margin-top: 2px;
    }

    .formation-board-footer-hint {
      margin-top: 8px;
      font-size: 11.5px;
      color: #64748b;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 10px;
      line-height: 1.4;
    }

    /* Tooltip/Item Hover Overlay */
    .reward-tooltip {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-8px);
      background: #2b3a56;
      color: #fff;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      white-space: nowrap;
      box-shadow: 0 4px 10px rgba(0,0,0,0.25);
      pointer-events: none;
      opacity: 0;
      transition: all 0.2s ease;
      z-index: 10;
    }

    .reward-card:hover .reward-tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(-2px);
    }

    /* Region Tabs & Materials Sidebar Styles */
    .region-tabs-container {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 16px;
      border-bottom: 2px solid #eadecb;
      background: #f1e7d2;
    }
    .region-tab {
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 12px;
      border: 1.5px solid #b59763;
      background: #fff;
      color: #5d4037;
      font-size: 12px;
      font-weight: bold;
      transition: all 0.2s ease;
      user-select: none;
    }
    .region-tab:hover {
      background: #fdfaf2;
      border-color: #4682b4;
    }
    .region-tab.active {
      background: #4682b4;
      color: #fff;
      border-color: #4682b4;
    }
    .guide-filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 2px 4px 0 4px;
      align-items: center;
    }
    .guide-filter-row .chain-guide-link {
      font-size: 11px;
      font-weight: normal;
      color: var(--accent);
      text-decoration: none;
      white-space: nowrap;
    }
    .guide-filter-row .chain-guide-link:hover {
      text-decoration: underline;
    }
    .guide-filter-control {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: bold;
      color: #5d4037;
    }
    .guide-filter-control select {
      min-width: 132px;
      max-width: 210px;
      height: 28px;
      border: 1.5px solid #b59763;
      border-radius: 6px;
      background: #fff;
      color: #4f4233;
      font-size: 12px;
      font-weight: 500;
      padding: 0 8px;
      outline: none;
    }
    .guide-filter-control select:focus {
      border-color: #4682b4;
      box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.15);
    }
    .guide-bulk-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }
    .btn-bulk-action {
      border: 1px solid #b59763;
      background: #fff;
      color: #5d4037;
      border-radius: 6px;
      padding: 3px 10px;
      font-size: 12px;
      font-weight: bold;
      line-height: 1.4;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
    }
    .btn-bulk-action:hover {
      border-color: #4682b4;
      background: #e9f3fc;
      color: #2f5d8a;
    }
    .btn-bulk-action:focus-visible {
      outline: 2px solid #4682b4;
      outline-offset: 2px;
    }
    .btn-bulk-action[data-mode="invert"] {
      color: #a04040;
    }
    .btn-bulk-action[data-mode="invert"]:hover {
      border-color: #a04040;
      background: #fdecec;
      color: #8a2f2f;
    }
    .quest-item.selected {
      background: #e9f3fc;
      border-color: #4682b4;
      box-shadow: 0 4px 12px rgba(70, 130, 180, 0.15);
    }
    .quest-item.completed .quest-check {
      background: #4caf50;
      border-color: #4caf50;
    }
    .quest-item.completed .quest-check svg {
      opacity: 1;
      transform: scale(1);
    }
    .quest-item.completed .quest-name-text {
      text-decoration: line-through;
      opacity: 0.6;
    }
    .materials-sidebar {
      width: 250px;
      border-left: 3px solid #eadecb;
      display: flex;
      flex-direction: column;
      background-color: #f7f1e3;
    }
    .materials-header {
      background: #4682b4;
      color: white;
      min-height: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 10px;
      font-size: 15px;
      font-weight: 700;
      border-bottom: 3px solid #b59763;
    }
    .materials-filter {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.95);
      cursor: pointer;
      user-select: none;
    }
    .materials-filter input {
      margin: 0;
      cursor: pointer;
    }
    .summary-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      gap: 4px;
    }
    .summary-tab {
      border: 1px solid rgba(255, 255, 255, 0.45);
      background: rgba(255, 255, 255, 0.16);
      color: rgba(255, 255, 255, 0.9);
      border-radius: 6px;
      padding: 5px 6px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      line-height: 1.2;
    }
    .summary-tab.active {
      background: #fffaf0;
      color: #2f5d8a;
      border-color: #fffaf0;
    }
    .summary-tab:focus-visible {
      outline: 2px solid #fffaf0;
      outline-offset: 2px;
    }
    .materials-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    .material-summary-item.quest-item {
      border-style: dashed;
      opacity: 0.92;
    }
    .material-summary-tag {
      font-size: 10px;
      color: #a04040;
      background: #f8e8e0;
      border-radius: 8px;
      padding: 1px 6px;
      margin-left: 4px;
      white-space: nowrap;
    }
    .material-summary-item {
      display: grid;
      grid-template-columns: 24px minmax(42px, 1fr) auto auto;
      align-items: center;
      padding: 8px 10px;
      background: #fdfaf2;
      border: 1.5px solid #eadecb;
      border-radius: 6px;
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 500;
      gap: 8px;
      cursor: default;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    .material-summary-item:hover {
      border-color: #b59763;
      background: #fff8ea;
      box-shadow: 0 1px 4px rgba(181, 151, 99, 0.18);
    }
    .material-summary-item:focus-visible {
      outline: 2px solid #b59763;
      outline-offset: 2px;
    }
    .material-summary-icon {
      font-size: 16px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f1e7d2;
      border-radius: 4px;
    }
    .material-summary-name {
      min-width: 0;
      color: #5d4037;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .material-summary-item:hover .material-summary-name {
      color: #3e2723;
    }
    .reward-summary-item {
      cursor: default;
    }
    .reward-summary-item .material-summary-name {
      text-decoration: none;
    }
    .reward-summary-item:hover .material-summary-name {
      text-decoration-color: transparent;
    }
    .reward-summary-source {
      font-size: 10px;
      color: #7a6251;
      background: #efe4d2;
      border-radius: 8px;
      padding: 1px 6px;
      margin-left: 4px;
      white-space: nowrap;
    }
      .material-summary-count {
        font-weight: bold;
        color: #e53935;
        background: #fde8e8;
        padding: 2px 6px;
        border-radius: 10px;
      }

      .material-source-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        min-width: 0;
      }

      .material-source-btn {
        display: inline-grid;
        min-width: 25px;
        height: 24px;
        place-items: center;
        padding: 0 5px;
        border: 1px solid #c8b28e;
        border-radius: 4px;
        background: #fffaf0;
        color: #66533e;
        font: 700 11px/1 inherit;
        letter-spacing: 0;
        cursor: pointer;
      }

      .material-source-btn:hover,
      .material-source-btn:focus-visible {
        border-color: #4682b4;
        color: #2f5d8a;
        background: #eef6fb;
      }

      .material-source-btn:focus-visible {
        outline: 2px solid rgba(70, 130, 180, 0.3);
        outline-offset: 1px;
      }

      .material-source-btn.recommended {
        border-color: #2f8b72;
        background: #e8f5ef;
        color: #19634f;
      }

      .material-source-btn.more {
        min-width: 36px;
        color: #486174;
      }

      .item-source-view {
        width: min(100%, 920px);
        margin: 0 auto;
        color: #40382f;
      }

      .source-view-back {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        margin-bottom: 18px;
        padding: 5px 10px;
        border: 1px solid #c6b28e;
        border-radius: 4px;
        background: #fffaf0;
        color: #654f35;
        font: 600 12px/1.2 inherit;
        letter-spacing: 0;
        cursor: pointer;
      }

      .source-view-back::before {
        content: "‹";
        margin-right: 6px;
        font-size: 18px;
        line-height: 0;
      }

      .source-view-back:hover,
      .source-view-back:focus-visible {
        border-color: #4682b4;
        color: #2f5d8a;
      }

      .item-source-title-row {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        padding-bottom: 18px;
        border-bottom: 2px dashed #b59763;
      }

      .item-source-title-row.has-recommendation {
        grid-template-columns: 64px minmax(0, 1fr) minmax(190px, 260px);
      }

      .item-source-title-copy {
        min-width: 0;
      }

      .item-source-title-icon {
        display: grid;
        width: 62px;
        height: 62px;
        place-items: center;
        border: 1px solid #d9c8a8;
        border-radius: 6px;
        background: #f4ecdc;
        color: #705b3d;
        font-size: 16px;
        font-weight: 700;
      }

      .item-source-title-icon img {
        width: 50px;
        height: 50px;
        object-fit: contain;
      }

      .item-source-eyebrow {
        display: block;
        margin-bottom: 3px;
        color: #2f6f99;
        font-size: 12px;
        font-weight: 700;
      }

      .item-source-title-row h1 {
        margin: 0;
        color: #25364f;
        font-size: 24px;
        line-height: 1.25;
        letter-spacing: 0;
      }

      .item-source-title-row p {
        margin: 5px 0 0;
        color: #776b5d;
        font-size: 13px;
      }

      .item-source-baseline-inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 7px;
        margin: 7px 0 0;
        color: #7d7063;
        font-size: 11px;
        line-height: 1.4;
      }

      .item-source-baseline-inline span {
        color: #9b8974;
      }

      .item-source-baseline-inline b {
        color: #5e5143;
        font-weight: 700;
      }

      .item-source-baseline-inline i {
        color: #b5a188;
        font-style: normal;
      }

      .item-source-header-recommendation {
        min-width: 0;
        padding: 9px 11px;
        border-left: 3px solid #2f8b72;
        background: #edf7f2;
      }

      .item-source-header-recommendation span {
        display: block;
        margin-bottom: 3px;
        color: #24705a;
        font-size: 11px;
        font-weight: 700;
      }

      .item-source-header-recommendation strong {
        display: block;
        overflow: hidden;
        color: #1e5c4a;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .item-source-header-recommendation p {
        margin: 3px 0 0;
        overflow-wrap: anywhere;
        color: #527066;
        font-size: 11px;
        line-height: 1.4;
      }

      .item-source-baseline,
      .item-source-list {
        margin-top: 24px;
      }

      .item-source-baseline h2 {
        margin: 0 0 10px;
        color: #645444;
        font-size: 14px;
        letter-spacing: 0;
      }

      .item-source-baseline-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .item-source-baseline-chip {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        overflow: hidden;
        border: 1px solid #d8c8ad;
        border-radius: 4px;
        background: #fffdf7;
        color: #66594c;
        font-size: 12px;
      }

      .item-source-baseline-chip strong {
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        padding: 4px 7px;
        background: #ece2cf;
        color: #564530;
      }

      .item-source-baseline-chip span {
        padding: 4px 8px;
      }

      .item-source-recommendation {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 4px 10px;
        margin-top: 18px;
        padding: 13px 15px;
        border-left: 4px solid #2f8b72;
        background: #edf7f2;
      }

      .item-source-recommendation > span {
        grid-row: 1 / span 2;
        align-self: start;
        padding: 3px 6px;
        border-radius: 3px;
        background: #2f8b72;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
      }

      .item-source-recommendation strong {
        color: #1e5c4a;
        font-size: 15px;
      }

      .item-source-recommendation p {
        margin: 0;
        color: #527066;
        font-size: 12px;
        line-height: 1.5;
      }

      .item-source-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 22px;
        padding-bottom: 10px;
        border-bottom: 1px solid #d9c8a8;
      }

      .item-source-tab {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 31px;
        padding: 5px 11px;
        border: 1px solid #cbb99b;
        border-radius: 4px;
        background: #fffaf0;
        color: #66533e;
        font: 600 12px/1.2 inherit;
        letter-spacing: 0;
        cursor: pointer;
      }

      .item-source-tab b {
        min-width: 15px;
        padding: 1px 4px;
        border-radius: 8px;
        background: #eee4d2;
        color: #7a6751;
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
      }

      .item-source-tab.active {
        border-color: #4682b4;
        background: #4682b4;
        color: #fff;
      }

      .item-source-tab.active b {
        background: rgba(255, 255, 255, 0.2);
        color: inherit;
      }

      .item-source-list {
        margin-top: 0;
      }

      .item-source-entry {
        padding: 18px 2px;
        border-bottom: 1px solid #ded4c4;
      }

      .item-source-entry.is-recommended {
        border-left: 3px solid #2f8b72;
        padding-left: 12px;
      }

      .item-source-entry-heading {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: start;
      }

      .source-type-mark {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border-radius: 4px;
        background: #e8edf0;
        color: #355a72;
        font-size: 12px;
        font-weight: 800;
      }

      .item-source-entry h3 {
        margin: 0;
        color: #334454;
        font-size: 15px;
        letter-spacing: 0;
      }

      .source-monster-level {
        margin-left: 7px;
        color: #7b6e62;
        font-size: 11px;
        font-weight: 600;
      }

      .item-source-entry-heading p {
        margin: 4px 0 0;
        color: #70665c;
        font-size: 12px;
        line-height: 1.55;
        overflow-wrap: anywhere;
      }

      .source-drop-details {
        margin: 10px 0 0 44px;
      }

      .source-drop-rarity {
        display: flex;
        align-items: center;
        margin: 0;
        font-size: 12px;
      }

      .source-drop-rarity strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        padding: 2px 6px;
        border: 1px solid rgba(165, 75, 67, 0.28);
        border-radius: 3px;
        background: rgba(165, 75, 67, 0.1);
        color: #a54b43;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
      }

      .source-map-path {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px;
        margin-top: 7px;
        color: #6d7d86;
        font-size: 11px;
        line-height: 1.45;
      }

      .source-map-path span {
        padding: 2px 5px;
        border: 1px solid #d6e0e4;
        border-radius: 3px;
        background: #f3f7f8;
      }

      .source-map-path i {
        color: #9babb2;
        font-style: normal;
      }

      .item-source-recommended-badge {
        padding: 3px 7px;
        border-radius: 3px;
        background: #e3f3ec;
        color: #24705a;
        font-size: 11px;
        font-weight: 700;
      }

      .source-ingredient-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 12px 0 0 44px;
      }

      .source-ingredient-list span {
        display: inline-flex;
        gap: 7px;
        padding: 5px 8px;
        border: 1px solid #d9ccb7;
        border-radius: 4px;
        background: #fffdf8;
        color: #66584b;
        font-size: 12px;
      }

      .source-ingredient-list b {
        color: #b54a42;
      }

      .source-route {
        margin: 14px 0 0 44px;
        padding-left: 12px;
        border-left: 2px solid #b8cad5;
      }

      .source-route ol,
      .source-steps {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .source-route-node > ol {
        margin: 5px 0 0 12px;
        padding-left: 14px;
        border-left: 1px solid #ccd8df;
      }

      .source-route-line {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
        min-height: 26px;
        color: #405262;
        font-size: 13px;
      }

      .source-route-name {
        font-weight: 700;
      }

      .source-route-count {
        color: #b54a42;
        font-weight: 700;
      }

      .source-route-meta {
        color: #8a8176;
        font-size: 11px;
      }

      .source-steps {
        display: grid;
        gap: 7px;
        margin: 13px 0 0 44px;
        counter-reset: source-step;
      }

      .source-steps li {
        position: relative;
        padding-left: 25px;
        color: #62584e;
        font-size: 13px;
        line-height: 1.55;
        counter-increment: source-step;
      }

      .source-steps li::before {
        content: counter(source-step);
        position: absolute;
        left: 0;
        top: 1px;
        display: grid;
        width: 18px;
        height: 18px;
        place-items: center;
        border-radius: 50%;
        background: #dbe9f1;
        color: #315e78;
        font-size: 10px;
        font-weight: 800;
      }

      .item-source-note {
        margin: 10px 0 0 44px;
        color: #7d6047;
        font-size: 12px;
        line-height: 1.55;
      }

      /* Mobile back button (hidden on desktop) */
      .mobile-back-btn {
        display: none;
        align-items: center;
        gap: 6px;
        background: #4682b4;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        margin-bottom: 14px;
        font-family: inherit;
        width: fit-content;
      }
      .mobile-back-btn:active {
        background: #3a6f9a;
      }

      /* Mobile materials edge tab (hidden on desktop) */
      .materials-edge-tab {
        display: none;
      }
      .materials-drawer-backdrop {
        display: none;
      }

      /* Tablet + Phone: master-detail + right edge materials tab */
      @media (max-width: 1024px) {
        body {
          padding: 10px;
          height: 100dvh;
          align-items: stretch;
        }
        #notebook-app {
          max-width: none;
          height: calc(100dvh - 20px);
          max-height: none;
          border-radius: 12px;
        }
        .notebook-body {
          flex: 1;
          min-height: 0;
          position: relative;
        }
        /* List view: full-width list only */
        #notebook-app:not(.view-detail) .quest-sidebar {
          width: 100%;
          flex: 1;
          min-height: 0;
          min-width: 0;
          border-right: none;
        }
        #notebook-app:not(.view-detail) .quest-details-pane {
          display: none;
        }
        /* Materials: off-canvas drawer, not a column */
        .materials-sidebar {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          width: min(300px, 86vw);
          max-width: 300px;
          z-index: 40;
          border-left: 3px solid #b59763;
          border-top: none;
          box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
          transform: translateX(100%);
          transition: transform 0.25s ease;
          display: flex;
        }
        #notebook-app.materials-open .materials-sidebar {
          transform: translateX(0);
        }
        .materials-header {
          min-height: 48px;
          font-size: 13px;
          flex-direction: row;
          justify-content: space-between;
          padding: 8px 12px;
          gap: 8px;
        }
        .materials-content {
          padding: 10px 12px;
          min-height: 0;
        }
        .material-summary-name {
          white-space: normal;
          overflow: visible;
          text-overflow: unset;
          overflow-wrap: anywhere;
        }
        .material-summary-item {
          grid-template-columns: 24px minmax(54px, 1fr) auto auto;
        }
        .item-source-view {
          width: 100%;
        }
        .item-source-title-row {
          grid-template-columns: 52px minmax(0, 1fr);
          gap: 12px;
        }
        .item-source-title-row.has-recommendation {
          grid-template-columns: 52px minmax(0, 1fr);
        }
        .item-source-header-recommendation {
          grid-column: 1 / -1;
        }
        .item-source-title-icon {
          width: 50px;
          height: 50px;
        }
        .item-source-title-icon img {
          width: 42px;
          height: 42px;
        }
        .item-source-title-row h1 {
          font-size: 20px;
        }
        .item-source-entry-heading {
          grid-template-columns: 30px minmax(0, 1fr) auto;
          gap: 8px;
        }
        .source-type-mark {
          width: 28px;
          height: 28px;
        }
        .source-route,
        .source-drop-details,
        .source-ingredient-list,
        .source-steps,
        .item-source-note {
          margin-left: 38px;
        }
        /* Right edge page-tab */
        .materials-edge-tab {
          display: flex;
          position: absolute;
          top: 50%;
          right: 0;
          z-index: 35;
          transform: translateY(-50%);
          writing-mode: vertical-rl;
          text-orientation: mixed;
          align-items: center;
          justify-content: center;
          gap: 6px;
          min-height: 120px;
          padding: 14px 8px;
          border: 2px solid #b59763;
          border-right: none;
          border-radius: 10px 0 0 10px;
          background: #4682b4;
          color: #fff;
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.12em;
          cursor: pointer;
          box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.18);
          font-family: inherit;
          user-select: none;
        }
        .materials-edge-tab:active {
          filter: brightness(0.95);
        }
        #notebook-app.materials-open .materials-edge-tab {
          right: min(300px, 86vw);
        }
        .materials-drawer-backdrop {
          display: none;
          position: absolute;
          inset: 0;
          z-index: 30;
          background: rgba(17, 21, 31, 0.35);
          border: none;
          padding: 0;
          cursor: pointer;
        }
        #notebook-app.materials-open .materials-drawer-backdrop {
          display: block;
        }
        /* Detail view: full-screen details */
        #notebook-app.view-detail .quest-sidebar {
          display: none;
        }
        #notebook-app.view-detail .quest-details-pane {
          display: flex;
          width: 100%;
          flex: 1;
          min-height: 0;
          min-width: 0;
          padding: 16px 14px;
        }
        #notebook-app.view-detail .materials-edge-tab {
          display: flex;
        }
        #notebook-app.view-detail .materials-sidebar {
          display: none;
        }
        #notebook-app.view-detail .materials-drawer-backdrop {
          display: none;
        }
        #notebook-app.view-detail.materials-open .materials-sidebar {
          display: flex;
        }
        #notebook-app.view-detail.materials-open .materials-drawer-backdrop {
          display: block;
        }
        .mobile-back-btn {
          display: inline-flex;
        }
        .details-title-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
        .details-quest-title {
          font-size: 20px;
          flex-wrap: wrap;
        }
        .details-quest-meta {
          flex-wrap: wrap;
          gap: 8px;
        }
        .quest-name-text {
          white-space: normal;
          overflow: visible;
          text-overflow: unset;
          overflow-wrap: anywhere;
          font-size: 14px;
          line-height: 1.35;
        }
        .section-content {
          font-size: 14px;
          padding-left: 0;
          overflow-wrap: anywhere;
        }
      }

      /* Phone: tighter chrome */
      @media (max-width: 767px) {
        body {
          padding: 0;
          height: 100dvh;
          overflow: hidden;
        }
        #notebook-app {
          width: 100%;
          height: 100dvh;
          max-height: none;
          border-radius: 0;
          border-width: 0;
        }
        .notebook-header {
          height: 48px;
          padding: 0 12px;
        }
        .header-tab {
          height: 36px;
          margin-top: 12px;
          padding: 0 18px;
          font-size: 16px;
        }
        .materials-sidebar {
          width: min(280px, 88vw);
        }
        #notebook-app.materials-open .materials-edge-tab {
          right: min(280px, 88vw);
        }
        #notebook-app.view-detail .quest-details-pane {
          padding: 14px 12px;
        }
        .search-box-container {
          padding: 10px 12px;
        }
        .search-box {
          height: 40px;
          font-size: 14px;
        }
        .search-box-stats {
          flex-wrap: wrap;
          gap: 6px 10px;
          padding: 0 12px 6px;
          font-size: 10px;
        }
        .region-tabs-container {
          padding: 8px 10px;
        }
        .quest-item {
          min-height: 44px;
          padding: 12px;
        }
        .sidebar-footer {
          font-size: 11px;
          padding: 8px 10px;
        }
        .details-quest-title {
          font-size: 18px;
          gap: 8px;
        }
        .details-quest-badge {
          font-size: 11px;
          padding: 3px 8px;
        }
        .meta-badge {
          font-size: 12px;
          padding: 3px 8px;
        }
        .section-title-text {
          font-size: 12px;
          padding: 3px 12px;
        }
        .section-content {
          font-size: 13px;
          line-height: 1.55;
        }
        .reward-card {
          width: 76px;
          height: 76px;
        }
        .guide-filter-control {
          width: 100%;
          flex-wrap: wrap;
        }
        .guide-filter-control select {
          min-width: 0;
          max-width: none;
          flex: 1;
          width: 100%;
        }
        .quest-key-chip span.v {
          white-space: normal;
          max-width: none;
        }
        .quest-step-row {
          grid-template-columns: 26px minmax(0, 1fr);
          gap: 8px;
          padding: 10px 0;
        }
        .quest-step-index {
          width: 24px;
          height: 24px;
        }
        .details-section {
          margin-bottom: 18px;
        }
      }


    /* Game-order notebook visual system */
    html,
    body {
      width: 100%;
      min-width: 0;
      min-height: 100%;
    }

    body {
      background: var(--page-bg);
      color: var(--ink);
      padding: 16px;
      letter-spacing: 0;
    }

    #notebook-app {
      width: min(1280px, calc(100vw - 32px));
      height: min(860px, calc(100dvh - 32px));
      max-width: none;
      max-height: none;
      border: 2px solid #b69c69;
      border-radius: 8px;
      background: var(--paper);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    }

    .notebook-header {
      height: 52px;
      min-height: 52px;
      padding: 0 20px;
      border-bottom: 1px solid #2f6d99;
      background: var(--accent);
      box-shadow: none;
    }

    .header-tab {
      height: auto;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #fff;
      font-size: 18px;
    }

    .notebook-body {
      display: grid;
      grid-template-columns: minmax(290px, 340px) minmax(0, 1fr) 280px;
      min-height: 0;
      overflow: hidden;
    }

    .quest-sidebar,
    .quest-details-pane,
    .materials-sidebar {
      width: auto;
      min-width: 0;
      min-height: 0;
    }

    .quest-sidebar {
      border-right: 1px solid var(--line);
      background: #f0ede3;
    }

    .search-box-container {
      padding: 12px 14px 10px;
      border-bottom: 0;
    }

    .search-box {
      height: 38px;
      padding: 0 12px;
      border: 1px solid #bcb39f;
      border-radius: 4px;
      background: var(--paper-raised);
      color: var(--ink);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .search-box:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(57, 127, 179, 0.14);
    }

    .search-box-stats {
      padding: 0 14px 10px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
    }

    .region-tabs-container {
      display: block;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: #e9e5da;
    }

    .region-tab {
      min-height: 30px;
      border: 1px solid #b9ae98;
      border-radius: 4px;
      background: var(--paper-raised);
      color: #4d555a;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .region-tab:hover {
      border-color: var(--accent);
      background: #f4f8fa;
    }

    .region-tab.active {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff;
    }

    .guide-filter-row {
      margin-top: 8px;
      gap: 8px;
    }

    .guide-filter-control {
      color: var(--muted);
    }

    .guide-filter-control select {
      min-height: 32px;
      border: 1px solid #b9ae98;
      border-radius: 4px;
      background: var(--paper-raised);
      color: var(--ink);
    }

    .chain-guide-link {
      color: var(--accent);
    }

    .quest-list {
      padding: 0 12px 12px;
    }

    .quest-item {
      min-height: 48px;
      margin: 0;
      padding: 10px 6px;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      transition: background 0.15s ease;
    }

    .quest-item:hover {
      border-color: var(--line);
      background: rgba(255, 255, 255, 0.48);
      box-shadow: none;
      transform: none;
    }

    .quest-item.active,
    .quest-item.selected {
      border-color: var(--line);
      background: var(--accent-soft);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    .quest-check {
      width: 22px;
      height: 22px;
      margin-right: 8px;
      border: 1px solid #9c927e;
      background: var(--paper-raised);
    }

    .quest-item.completed .quest-check {
      border-color: var(--complete);
      background: var(--complete);
    }

    .quest-type-tag {
      flex: 0 0 42px;
      margin-right: 2px;
      font-size: 12px;
      text-align: center;
    }

    .quest-name-text {
      min-width: 0;
      color: var(--ink);
      font-size: 14px;
    }

    .sidebar-footer {
      display: none;
    }

    .quest-details-pane {
      padding: 22px 24px 32px;
      background: var(--paper-raised);
    }

    .empty-state {
      color: var(--muted);
    }

    .empty-state svg {
      width: 52px;
      height: 52px;
      fill: #afa58f;
    }

    .empty-state h2 {
      font-size: 16px;
      font-weight: 600;
    }

    .details-title-row {
      align-items: flex-start;
      padding-bottom: 14px;
      margin-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }

    .details-quest-title {
      min-width: 0;
      color: var(--ink);
      font-size: 22px;
      line-height: 1.3;
    }

    .details-quest-title > span:last-child {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .details-quest-badge {
      flex: 0 0 auto;
      border-radius: 4px;
      font-size: 12px;
    }

    .details-quest-badge.main {
      background: #b94a43;
    }

    .details-quest-badge.side {
      background: var(--accent);
    }

    .details-quest-meta {
      min-width: 0;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
    }

    .meta-badge {
      padding: 3px 7px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: #f2efe6;
      color: #596168;
    }

    .detail-section {
      margin-bottom: 24px;
    }

    .detail-section > h2 {
      border-color: var(--line);
      color: var(--ink);
      font-size: 15px;
    }

    .quest-guide .details-section {
      margin-bottom: 20px;
    }

    .section-title-line::after {
      height: 1px;
      background: var(--line);
    }

    .section-title-text {
      padding: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #4f5960;
      font-size: 13px;
    }

    .req-item-badge,
    .external-guide-panel,
    .answer-candidate-card,
    .combat-card,
    .exploration-guide-action {
      border-radius: 6px;
    }

    .reward-list .reward-item,
    .reward-card,
    .reward-card.exp,
    .reward-card.extra {
      border-color: var(--line);
      background: #fff;
      box-shadow: none;
    }

    .reward-list .reward-item:hover,
    .reward-card:hover {
      border-color: #afc7d7;
      box-shadow: none;
      transform: none;
    }

    .mobile-back-btn,
    .nav-back-btn {
      border-radius: 4px !important;
      background: var(--accent) !important;
      color: #fff !important;
      box-shadow: none !important;
    }

    .materials-sidebar {
      border-left: 1px solid var(--line);
      background: #f0ede3;
    }

    .materials-header {
      min-height: 92px;
      padding: 12px;
      border-bottom: 1px solid #2f6d99;
      background: var(--accent);
      color: #fff;
    }

    .summary-tabs {
      gap: 0;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.52);
      border-radius: 4px;
    }

    .summary-tab {
      min-height: 30px;
      border: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.42);
      border-radius: 0;
      background: transparent;
    }

    .summary-tab:last-child {
      border-right: 0;
    }

    .summary-tab.active {
      background: #fff;
      color: #2f6d99;
    }

    .materials-content {
      padding: 8px 12px 12px;
    }

    .material-summary-item {
      min-height: 44px;
      margin: 0;
      padding: 8px 4px;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .material-summary-item:hover {
      border-color: var(--line);
      background: rgba(255, 255, 255, 0.48);
      box-shadow: none;
    }

    .material-summary-icon {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 4px;
      background: #e2ddd1;
    }

    .material-summary-image {
      display: block;
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .material-summary-name,
    .reward-name {
      min-width: 0;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .material-summary-count {
      padding: 2px 6px;
      border-radius: 4px;
      background: #f5e6e4;
      color: #a63f3b;
    }

    .material-summary-item.source-active {
      background: #fffdf6;
      box-shadow: inset 3px 0 0 #b28c4c;
    }

    .material-summary-item.source-active .material-summary-name {
      color: #765528;
      font-weight: 700;
    }

    .materials-edge-tab {
      letter-spacing: 0;
    }

    @media (max-width: 1024px) {
      body {
        padding: 8px;
      }

      #notebook-app {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        border-radius: 6px;
      }

      .notebook-body {
        display: flex;
      }

      .materials-sidebar {
        border-left: 1px solid var(--line);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
      }

      .materials-header {
        min-height: 52px;
      }

      .materials-edge-tab {
        border-color: #2f6d99;
        border-radius: 6px 0 0 6px;
        background: var(--accent);
        box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.18);
      }
    }

    @media (max-width: 640px) {
      body {
        padding: 0;
      }

      #notebook-app {
        width: 100%;
        height: 100dvh;
        border: 0;
        border-radius: 0;
      }

      .notebook-header {
        height: 46px;
        min-height: 46px;
      }

      #notebook-app.view-detail .quest-details-pane {
        padding: 14px 12px 24px;
      }

      .materials-sidebar {
        width: min(300px, calc(100vw - 56px));
        max-width: none;
      }

      #notebook-app.materials-open .materials-edge-tab {
        right: min(300px, calc(100vw - 56px));
      }

      .materials-header {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .materials-filter {
        justify-content: flex-start;
      }

      .details-title-row,
      .quest-meta,
      .reward-list {
        min-width: 0;
      }

      .quest-title,
      .material-summary-name,
      .reward-name {
        overflow-wrap: anywhere;
      }

      .reward-list {
        grid-template-columns: 1fr;
      }

      .reward-item {
        grid-template-columns: 42px minmax(0, 1fr);
      }

      .quest-quick-guide {
        grid-template-columns: minmax(0, 1fr);
      }

      .quick-guide-rewards {
        border-top: 1px solid #dce3e7;
        border-left: 0;
      }

      .quick-answer-steps {
        flex-direction: column;
        gap: 8px;
      }

      .quick-answer-steps li:not(:last-child)::after {
        display: none;
      }

      .quest-steps {
        margin-top: 8px;
      }

      .quest-step {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 8px;
      }

      .acquisition-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        padding: 12px 0;
      }

      .acquisition-label {
        padding-top: 0;
      }

      .recommendation-panel {
        padding: 0;
      }

      .recommendation-summary {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 8px;
      }

      .recommendation-condition-row,
      .recommendation-any-group {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 8px;
      }

      .recommendation-any-list .recommendation-condition-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
      }

      .recommendation-condition-detail {
        margin: 3px 0 0;
      }
    }

    /* ── Story pet series (audited declaration view) ── */
    .quest-series-role {
      display: inline-block;
      font-size: 10px;
      color: #8b5a2b;
      background: #fdf3e3;
      border: 1px solid #eadfc9;
      border-radius: 3px;
      padding: 1px 5px;
      margin-left: 6px;
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }

    .quest-item.optional-series-member {
      border-left-color: #b7791f;
    }

    .quest-series-role.optional {
      color: #8a5a10;
      background: #fff6df;
      border-color: #e7c77d;
    }