/* ==========================================================================
   飘流幻境新世界 - 智能炼金配方寻路器样式表 (index.css) v1.9.0
   Aesthetic: 工具风 —— 扁平、素净、高信息密度、单一强调色、双主题。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
    color-scheme: light;
    --bg-page: #f5f6f8;
    --bg-card: #ffffff;
    --card-bg: #ffffff;
    --bg-inset: #f2f4f7;
    --panel-inset-bg: #f6f7f9;
    --border-color: #e3e6ea;
    --border-color-hover: #c3c9d2;
    --subtle-divider: #eef0f3;

    --primary-color: #0d9488;
    --primary-strong: #0f766e;
    --primary-soft: rgba(13, 148, 136, 0.08);
    --primary-glow: rgba(13, 148, 136, 0.16);

    --text-main: #1f2430;
    --text-muted: #68707d;
    --text-dark: #f8fbff;

    --accent-gold: #b45309;
    --accent-purple: #7c3aed;
    --danger: #dc2626;
    --success: #15803d;
    --warning: #b45309;
    --info: #2563eb;

    --badge-bg: #f0f2f5;
    --table-header-bg: #f6f7f9;
    --table-border: #eceef1;
    --table-stripe: #fafbfc;

    --input-bg: #ffffff;
    --input-bg-focus: #ffffff;
    --dropdown-bg: #ffffff;
    --control-bg: #f4f5f7;
    --control-bg-hover: #e9ecef;
    --overlay-bg: #ffffff;
    --overlay-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
    --card-shadow: none;
    --backdrop-bg: rgba(15, 23, 42, 0.45);
    --button-hover-text: #ffffff;
    --code-highlight: #a16207;

    --radius-card: 8px;
    --radius-ctrl: 6px;

    --font-outfit: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "STSong", "SimSun", serif;

    --transition-smooth: all 0.2s ease;
    --transition-quick: all 0.15s ease;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg-page: #0e1013;
    --bg-card: #16181d;
    --card-bg: #16181d;
    --bg-inset: #101216;
    --panel-inset-bg: #12141a;
    --border-color: #262a31;
    --border-color-hover: #3a404a;
    --subtle-divider: #22252b;

    --primary-color: #2dd4bf;
    --primary-strong: #5eead4;
    --primary-soft: rgba(45, 212, 191, 0.1);
    --primary-glow: rgba(45, 212, 191, 0.22);

    --text-main: #e6e8ec;
    --text-muted: #9aa1ad;
    --text-dark: #4b4f63;

    --accent-gold: #f5a524;
    --accent-purple: #a78bfa;
    --danger: #f87171;
    --success: #4ade80;
    --warning: #fbbf24;
    --info: #60a5fa;

    --badge-bg: #1e2127;
    --table-header-bg: #1a1d23;
    --table-border: #23262d;
    --table-stripe: #13161b;

    --input-bg: #101216;
    --input-bg-focus: #14171c;
    --dropdown-bg: #1a1d23;
    --control-bg: #1c1f25;
    --control-bg-hover: #262a31;
    --overlay-bg: #1a1d23;
    --overlay-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    --card-shadow: none;
    --backdrop-bg: rgba(0, 0, 0, 0.55);
    --button-hover-text: #06251f;
    --code-highlight: #facc15;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg-page);
    color: var(--text-main);
    font-family: var(--font-outfit);
    font-size: 0.92rem;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.55;
    transition: background 0.2s ease, color 0.2s ease;
}

.hidden {
    display: none !important;
}

[hidden] {
    display: none !important;
}

.muted {
    color: var(--text-muted);
}

.icon {
    font-style: normal;
}

button {
    font-family: inherit;
}

input,
select,
button {
    font-size: inherit;
}

/* --------------------------------------------------------------------------
   3. Layout: Container / Header / Footer
   -------------------------------------------------------------------------- */
.app-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 1.1rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100vh;
}

.app-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.alchemy-icon {
    font-size: 1.35rem;
    line-height: 1;
}

.app-header h1 {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.app-header h1 span {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.4rem;
}

.header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.header-tools .history-toggle-btn,
.header-tools .guide-link-btn,
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-quick);
}

.header-tools .history-toggle-btn:hover,
.header-tools .guide-link-btn:hover,
.theme-toggle-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.theme-toggle-btn {
    background: var(--bg-card);
}

body.hero-vote-open {
    overflow: hidden;
}

/* Hero route vote dialog */
.hero-vote-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.hero-vote-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: var(--backdrop-bg);
    cursor: default;
}

.hero-vote-panel {
    position: relative;
    width: min(1120px, 100%);
    max-height: min(88vh, 820px);
    overflow: auto;
    padding: 1.1rem;
    background: var(--overlay-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--overlay-shadow);
}

.hero-vote-header,
.hero-vote-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.hero-vote-header {
    border-bottom: 1px solid var(--subtle-divider);
    padding-bottom: 0.75rem;
}

.hero-vote-kicker {
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}

.hero-vote-header h2 {
    margin-top: 0.15rem;
    font-size: 1.2rem;
}

.hero-vote-intro,
.hero-vote-date {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.hero-vote-intro {
    margin: 0.8rem 0 0.35rem;
}

.hero-vote-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.9rem 0;
}

.hero-vote-option {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
}

.hero-vote-option.is-selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.hero-vote-maps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-color);
}

.hero-vote-map {
    min-width: 0;
    margin: 0;
    background: var(--bg-card);
}

.hero-vote-map-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-inset);
}

.hero-vote-map-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hero-vote-map figcaption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.35rem;
    min-height: 3.25rem;
    padding: 0.35rem 0.45rem;
    font-size: 0.7rem;
    line-height: 1.25;
}

.hero-vote-map figcaption strong {
    grid-row: 1 / 3;
    align-self: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-strong);
    line-height: 1.35rem;
    text-align: center;
}

.hero-vote-map figcaption span,
.hero-vote-map figcaption small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hero-vote-map figcaption small {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.hero-vote-marker {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--accent-gold);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.hero-vote-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}

.hero-vote-body h3 {
    font-size: 0.95rem;
}

.hero-vote-body h3 small {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
}

.hero-vote-description {
    min-height: 3.2em;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.hero-vote-meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.hero-vote-button {
    width: 100%;
    min-height: 2.25rem;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-ctrl);
    background: var(--primary-soft);
    color: var(--primary-strong);
    cursor: pointer;
    font-weight: 700;
}

.hero-vote-button:hover,
.hero-vote-button:focus-visible {
    background: var(--primary-color);
    color: var(--button-hover-text);
}

.hero-vote-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.hero-vote-footer {
    border-top: 1px solid var(--subtle-divider);
    padding-top: 0.75rem;
    font-size: 0.78rem;
}

.hero-vote-footer a {
    color: var(--primary-strong);
}

@media (max-width: 760px) {
    .hero-vote-panel {
        max-height: 92vh;
        padding: 0.85rem;
    }

    .hero-vote-options {
        grid-template-columns: 1fr;
    }

    .hero-vote-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Update History Dropdown */
.update-history-container {
    position: relative;
}

.history-content-card {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(360px, 92vw);
    max-height: 62vh;
    overflow-y: auto;
    background: var(--overlay-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--overlay-shadow);
    padding: 0.9rem;
    z-index: 300;
    animation: fadeInDown 0.18s ease-out;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--subtle-divider);
}

.history-header h3 {
    font-size: 0.92rem;
    font-weight: 700;
}

.history-header .close-btn {
    position: static;
    display: inline-flex;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.history-item {
    border-bottom: 1px solid var(--subtle-divider);
    padding-bottom: 0.6rem;
}

.history-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.history-meta {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-bottom: 0.25rem;
}

.history-ver {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--primary-color);
    background: var(--primary-soft);
    border-radius: 4px;
    padding: 0.08rem 0.4rem;
}

.history-date {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.history-details {
    list-style: none;
    margin: 0.1rem 0 0;
    padding-left: 1.05rem;
    color: var(--text-main);
    font-size: 0.8rem;
    line-height: 1.5;
}

.history-details li {
    position: relative;
    list-style: none;
}

.history-details li::before {
    content: "·";
    position: absolute;
    left: -0.8rem;
    color: var(--text-muted);
}

.history-details code {
    color: var(--code-highlight);
    font-size: 0.95em;
}

/* Module Tabs */
.module-switch {
    display: flex;
    gap: 0.15rem;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

.module-switch::-webkit-scrollbar {
    display: none;
}

.module-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.85rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-quick);
}

.module-tab:hover {
    color: var(--text-main);
}

.module-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   4. Module Search Bar (搜索常驻)
   -------------------------------------------------------------------------- */
.module-search-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.module-search-bar .search-box-container {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   5. Layout Grids (per module)
   -------------------------------------------------------------------------- */
.app-main {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
    flex: 1;
    align-items: start;
}

.panel-left,
.panel-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.monster-layout,
.collect-layout,
.union-layout,
.adventure-layout,
.quiz-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Monster: detail card is a sibling of filter card (left stack) + results right */
.monster-layout > .module-search-bar {
    grid-column: 1 / -1;
}

.monster-layout > .monster-search-card {
    grid-column: 1;
    grid-row: 2;
}

.monster-layout > .monster-detail-card {
    grid-column: 1;
    grid-row: 3;
}

.monster-layout > .monster-results-card {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: stretch;
}

.map-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.monster-layout > .card,
.collect-layout > .card,
.map-layout > .card,
.union-layout > .card,
.adventure-layout > .card,
.quiz-layout > .card {
    min-width: 0;
}

.full-width {
    grid-column: 1 / -1 !important;
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 0.95rem 1.1rem;
    position: relative;
    overflow: visible;
}

.card h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.2px;
}

.card h2 .icon {
    font-size: 1rem;
}

.card-header-with-action,
.recipes-card-header,
.recipe-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.card-header-with-action h2,
.recipes-card-header h2,
.recipe-card-header h2 {
    margin-bottom: 0;
}

.equipment-results-meta {
    min-height: 1.4rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   7. Search Box & Inputs
   -------------------------------------------------------------------------- */
.search-box-container {
    position: relative;
    margin-bottom: 0.75rem;
}

.search-box-container input {
    width: 100%;
    height: 2.6rem;
    padding: 0 2.6rem 0 0.9rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    color: var(--text-main);
    font-size: 0.95rem;
    font-family: var(--font-outfit);
    outline: none;
    transition: var(--transition-quick);
}

.search-box-container input:hover {
    border-color: var(--border-color-hover);
}

.search-box-container input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--input-bg-focus);
}

.clear-btn {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 1.15rem;
    cursor: pointer;
    transition: var(--transition-quick);
}

.clear-btn:hover {
    color: var(--text-main);
    background: var(--control-bg);
}

input[type="text"],
input[type="number"],
select {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    color: var(--text-main);
    font-family: var(--font-outfit);
    outline: none;
    transition: var(--transition-quick);
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--input-bg-focus);
}

select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 0.88rem;
    cursor: pointer;
}

input[type="number"] {
    padding: 0.45rem 0.6rem;
    font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   8. Filter Panel & Rows
   -------------------------------------------------------------------------- */
.equipment-filter-panel {
    margin-top: 0.25rem;
    font-size: 0.88rem;
}

.filter-row {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.55rem;
}

.filter-row label {
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.filter-row select {
    width: 100%;
    min-height: 2.4rem;
}

.equipment-level-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
}

.equipment-level-input {
    width: 100%;
    min-width: 0;
    min-height: 2.4rem;
}

.equipment-level-separator {
    color: var(--text-muted);
}

.filter-row select,
.sub-material-toggle {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.2rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-main) 50%),
        linear-gradient(135deg, var(--text-main) 50%, transparent 50%);
    background-position:
        calc(100% - 0.95rem) calc(50% - 0.1rem),
        calc(100% - 0.65rem) calc(50% - 0.1rem);
    background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
    background-repeat: no-repeat;
}

.filter-row-sub-materials {
    align-items: center;
}

.filter-row-sub-materials > label {
    padding-top: 0;
}

.filter-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.7rem;
    margin: 0.1rem 0 0.7rem;
}

.filter-source-grid .checkbox-container {
    margin: 0;
    min-width: 0;
}

.filter-row-rank {
    margin-bottom: 0;
}

.filter-row-rank[hidden] {
    display: none !important;
}

.filter-rank-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    min-width: 0;
}

.filter-clear-btn {
    white-space: nowrap;
}

/* Custom Checkboxes */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 26px;
    min-height: 22px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-main);
    user-select: none;
    line-height: 1.45;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color-hover);
    border-radius: 4px;
    transition: var(--transition-quick);
}

.checkbox-container:hover input ~ .checkmark {
    border-color: var(--primary-color);
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Sub-material Multi-select */
.sub-material-filter {
    position: relative;
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.sub-material-toggle {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0.45rem 2.2rem 0.45rem 0.6rem;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    color: var(--text-main);
    font-size: 0.88rem;
    font-family: var(--font-outfit);
    line-height: 1.4;
    outline: none;
    cursor: pointer;
    transition: var(--transition-quick);
}

.sub-material-toggle:hover {
    border-color: var(--border-color-hover);
}

.sub-material-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 150;
    box-shadow: var(--overlay-shadow);
}

.sub-material-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-main);
}

.sub-material-option:hover {
    background: var(--control-bg);
}

.sub-material-option input {
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.sub-material-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sub-material-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text-main);
    font-size: 0.78rem;
    line-height: 1.4;
}

.sub-material-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
}

.sub-material-tag-remove:hover {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.3rem 0.7rem;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: var(--radius-ctrl);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-quick);
}

.btn-small:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-small:disabled,
.text-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-copy {
    background: var(--primary-soft);
    border-color: transparent;
    color: var(--primary-color);
}

.btn-copy:hover {
    background: var(--primary-color);
    color: var(--button-hover-text);
    border-color: var(--primary-color);
}

.text-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    transition: var(--transition-quick);
}

.text-btn:hover {
    background: var(--primary-soft);
}

.close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    transition: var(--transition-quick);
}

.close-btn:hover {
    color: var(--text-main);
    background: var(--control-bg);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--radius-ctrl);
    cursor: pointer;
    transition: var(--transition-quick);
    font-weight: 600;
}

.btn-secondary {
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.btn-sm {
    font-size: 0.8rem;
    padding: 4px 8px;
}

.btn-group-action {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-quick);
}

.btn-group-action:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Toggle Button Groups (union / adventure / ark / skill / collect) */
.union-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.union-toggle-btn {
    width: 100%;
    min-width: 0;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.42rem 0.55rem;
    border-radius: var(--radius-ctrl);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-quick);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.union-toggle-btn:hover {
    color: var(--text-main);
    border-color: var(--border-color-hover);
}

.union-toggle-btn.active {
    background: var(--primary-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.adventure-grade-toggle-group {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.adventure-type-toggle-group {
    grid-template-columns: 1fr 1fr;
}

#skill-type-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#ark-planet-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collect-view-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.collect-view-btn {
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-quick);
    font-size: 0.82rem;
}

.collect-view-btn:hover {
    color: var(--text-main);
}

.collect-view-btn.active {
    background: var(--primary-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   10. Tables (desktop, high density)
   -------------------------------------------------------------------------- */
.equipment-results-table-wrap {
    max-height: 68vh;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
}

.equipment-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

.equipment-results-table th,
.equipment-results-table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--table-border);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-results-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--table-header-bg);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.2px;
    padding: 0.42rem 0.5rem;
}

.equipment-results-table tbody tr:nth-child(even) {
    background: var(--table-stripe);
}

.equipment-results-table tbody tr:hover,
.equipment-result-row:hover {
    background: var(--primary-soft) !important;
}

.equipment-results-table tbody tr:last-child td {
    border-bottom: none;
}

.equipment-result-name {
    border: none;
    background: none;
    color: var(--primary-color);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    white-space: normal;
    text-align: left;
}

.equipment-result-name:hover {
    text-decoration: underline;
}

.equipment-result-name.shop-buyable {
    color: var(--accent-gold);
}

.equipment-result-desc {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.equipment-material-cell {
    white-space: normal;
}

.equipment-material-link {
    border: none;
    background: none;
    color: var(--primary-color);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.equipment-material-link:hover {
    text-decoration: underline;
}

.equipment-secondary-material {
    color: var(--text-muted);
}

.equipment-material-separator {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.equipment-results-more {
    text-align: center;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   物品总目录结果工具栏：模式分段、主材质快捷、物等与排序、条件摘要
   -------------------------------------------------------------------------- */
.equipment-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
}

.equipment-results-header h2 {
    margin-bottom: 0;
}

.equipment-segmented-control {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
    background: var(--control-bg);
}

.equipment-segmented-control button {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
    padding: 0.36rem 0.85rem;
    min-height: 2rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-quick);
}

.equipment-segmented-control button + button {
    border-left: 1px solid var(--border-color);
}

.equipment-segmented-control button:hover {
    color: var(--text-main);
    background: var(--input-bg);
}

.equipment-segmented-control button:active {
    background: var(--primary-soft);
}

.equipment-segmented-control button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.equipment-segmented-control button[aria-pressed="true"] {
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
}

.equipment-segmented-control button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 主材质快捷区：全部装备主材质常驻、全部换行，禁止横向滚动/折叠 */
.equipment-material-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.32rem 0.38rem;
    margin-bottom: 0.45rem;
}

.equipment-material-shortcut {
    appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 0.22rem 0.6rem;
    min-height: 1.85rem;
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-quick);
}

.equipment-material-shortcut:hover {
    border-color: var(--border-color-hover);
    background: var(--input-bg);
}

.equipment-material-shortcut:active {
    background: var(--primary-soft);
}

.equipment-material-shortcut:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

.equipment-material-shortcut[aria-pressed="true"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
}

.equipment-material-shortcut:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* “其他材质”菜单：独立入口，只承载装备快捷区之外的材质 */
.equipment-other-material-filter {
    position: relative;
    display: inline-block;
    margin: 0 0 0.45rem;
}

.equipment-other-material-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px dashed var(--border-color-hover);
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    padding: 0.22rem 0.6rem;
    min-height: 1.85rem;
    max-width: 12rem;
    cursor: pointer;
    transition: var(--transition-quick);
}

.equipment-other-material-toggle::after {
    content: "▾";
    font-size: 0.7rem;
    color: var(--text-muted);
}

.equipment-other-material-toggle:hover {
    border-color: var(--primary-color);
    color: var(--text-main);
}

.equipment-other-material-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

.equipment-other-material-toggle.is-active {
    border-style: solid;
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 700;
}

.equipment-other-material-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: min(19rem, calc(100vw - 3rem));
    padding: 0.5rem;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 160;
    box-shadow: var(--overlay-shadow);
}

.equipment-other-material-search {
    width: 100%;
    min-height: 2.1rem;
    margin-bottom: 0.4rem;
    padding: 0 0.6rem;
}

.equipment-other-material-list {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.3rem;
    max-height: 260px;
    overflow-y: auto;
}

.equipment-other-material-group {
    flex-basis: 100%;
    margin: 0.25rem 0 0.05rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.3px;
}

.equipment-other-material-option {
    appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--control-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
    min-height: 1.75rem;
    cursor: pointer;
    transition: var(--transition-quick);
}

.equipment-other-material-option:hover {
    border-color: var(--border-color-hover);
    background: var(--input-bg);
}

.equipment-other-material-option:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

.equipment-other-material-option[aria-pressed="true"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
}

.equipment-other-material-empty {
    flex-basis: 100%;
    padding: 0.5rem 0.25rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

/* 物等范围 + 排序方向：结果工具栏内的稳定控制行 */
.equipment-results-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.45rem;
}

.equipment-results-controls .equipment-level-range {
    width: min(13rem, 100%);
}

/* 生效条件摘要：可逐项移除的标签 + 清除全部 */
.equipment-filter-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.equipment-filter-summary:empty {
    display: none;
}

.equipment-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.1rem 0.28rem 0.1rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text-main);
    font-size: 0.76rem;
    line-height: 1.45;
}

.equipment-filter-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-quick);
}

.equipment-filter-tag-remove:hover {
    background: var(--primary-soft);
    color: var(--primary-color);
}

.equipment-filter-tag-remove:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

.equipment-filter-clear-all {
    appearance: none;
    border: none;
    background: none;
    color: var(--primary-color);
    font: inherit;
    font-size: 0.76rem;
    padding: 0.15rem 0.4rem;
    min-height: 1.5rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.equipment-filter-clear-all:hover {
    color: var(--text-main);
}

.equipment-filter-clear-all:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* 左侧“更多筛选”：物品类型分段控件与扩展装备开关 */
.filter-row .filter-row-label {
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

/* 面板内分段控件占满整行并均分按钮宽度 */
.filter-row .equipment-segmented-control {
    display: flex;
    width: 100%;
}

.filter-row .equipment-segmented-control button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.36rem 0.4rem;
    text-align: center;
}

.filter-row-extended {
    margin-bottom: 0.6rem;
}

.filter-row-extended .checkbox-container {
    margin: 0;
    min-width: 0;
}

@media (max-width: 640px) {
    .equipment-results-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .equipment-results-controls .equipment-level-range {
        width: 100%;
    }

    .equipment-results-controls .equipment-segmented-control {
        align-self: flex-start;
    }

    .equipment-other-material-dropdown {
        left: 0;
        right: auto;
    }
}

.mall-series-header {
    background: var(--control-bg);
}

.mall-series-header strong {
    color: var(--text-main);
}

.mall-series-header small {
    color: var(--text-muted);
}

.series-toggle {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.72rem;
    transition: transform 0.15s ease;
}

/* Equipment Catalog Series Folding & Tree Structure */
.equipment-series-header {
    background: rgba(59, 130, 246, 0.03);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.equipment-series-header:hover {
    background: rgba(59, 130, 246, 0.08);
}

.equipment-series-header.expanded {
    background: rgba(59, 130, 246, 0.09);
    box-shadow: inset 3px 0 0 var(--primary-color, #2563eb);
}

.equipment-series-title-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.equipment-series-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    user-select: none;
    transition: transform 0.18s ease;
}

.equipment-series-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary-color, #2563eb);
    white-space: nowrap;
}


.equipment-series-detail {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .equipment-series-detail {
    background: rgba(255, 255, 255, 0.02);
}

.equipment-series-detail td[data-label="名称"] {
    position: relative;
}

.equipment-series-detail td[data-label="名称"]::before {
    content: "└";
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.8rem;
    opacity: 0.6;
}

.monster-row-selected {
    background: var(--primary-soft) !important;
    box-shadow: inset 2px 0 0 var(--primary-color);
}

/* Per-table column layouts (table-layout: fixed) */
/* 炼金装备结果: ID | 名称 | 物等 | 类别 | 数值 | 属性 | 合成 */
#alchemy-module .equipment-results-card .equipment-results-table th:nth-child(1),
#alchemy-module .equipment-results-card .equipment-results-table td:nth-child(1) { width: 4.6rem; text-align: right; }
#alchemy-module .equipment-results-card .equipment-results-table th:nth-child(2),
#alchemy-module .equipment-results-card .equipment-results-table td:nth-child(2) { width: 28%; white-space: normal; }
#alchemy-module .equipment-results-card .equipment-results-table th:nth-child(3),
#alchemy-module .equipment-results-card .equipment-results-table td:nth-child(3) { width: 3.2rem; text-align: right; }
#alchemy-module .equipment-results-card .equipment-results-table th:nth-child(4),
#alchemy-module .equipment-results-card .equipment-results-table td:nth-child(4) { width: 5.2rem; }
#alchemy-module .equipment-results-card .equipment-results-table th:nth-child(5),
#alchemy-module .equipment-results-card .equipment-results-table td:nth-child(5) { width: 17%; }

/* 怪物列表: 分类 | ID | 名称 | 等级 | 属性 | 捕捉 | HP | SPD | 掉落数 | 出现地 */
.monster-results-table th:nth-child(1),
.monster-results-table td:nth-child(1) { width: 3.6rem; text-align: right; }
.monster-results-table th:nth-child(2),
.monster-results-table td:nth-child(2) { width: 4.2rem; text-align: right; }
.monster-results-table th:nth-child(3),
.monster-results-table td:nth-child(3) { width: 18%; }
.monster-results-table th:nth-child(4),
.monster-results-table td:nth-child(4) { width: 3.2rem; text-align: right; }
.monster-results-table th:nth-child(5),
.monster-results-table td:nth-child(5) { width: 2.2rem; text-align: center; padding-left: 0.2rem; padding-right: 0.2rem; }
.monster-results-table th:nth-child(6),
.monster-results-table td:nth-child(6) { width: 4.6rem; text-align: center; padding-left: 0.2rem; padding-right: 0.2rem; }
.monster-results-table th:nth-child(7),
.monster-results-table td:nth-child(7) { width: 4rem; text-align: right; padding-left: 0.25rem; }
.monster-results-table th:nth-child(8),
.monster-results-table td:nth-child(8) { width: 3.4rem; text-align: right; }
.monster-results-table th:nth-child(9),
.monster-results-table td:nth-child(9) { width: 3.8rem; text-align: right; }

/* 题库: 序号 | 题目 | 答案 */
.quiz-results-table th:nth-child(1),
.quiz-results-table td:nth-child(1) {
    width: 4.5rem;
    text-align: right;
}

.quiz-results-table th:nth-child(2),
.quiz-results-table td:nth-child(2) {
    width: 58%;
    white-space: normal;
}

.quiz-results-table td:nth-child(3) {
    white-space: normal;
}

.quiz-version-row {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.quiz-version-row span {
    color: var(--text-main);
    font-weight: 600;
}

.quiz-conflict-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--warning);
    border-radius: 4px;
    color: var(--warning);
    font-size: 0.7rem;
    font-weight: 700;
}

.quiz-option-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.65rem;
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.quiz-option-list .is-answer {
    color: var(--primary-color);
    font-weight: 700;
}

.monster-load-more-btn {
    display: block;
    width: 100%;
    margin-top: 0.65rem;
    min-height: 2.6rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}

.monster-load-more-btn.hidden {
    display: none !important;
}

.monster-load-more-btn:hover {
    border-color: var(--primary-color);
}

/* ---------- Shop Module ---------- */

.shop-module .shop-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 0.5rem 0 0;
}

.shop-module .shop-search-card {
    position: sticky;
    top: 0.5rem;
}

.shop-module .shop-filter-panel {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.shop-module .shop-filter-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.shop-module .shop-results-card {
    min-width: 0;
}

.shop-module .shop-results-toolbar {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
}

.shop-module .shop-results-toolbar .btn-small {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}

.shop-module .shop-results-wrap {
    overflow-x: auto;
}

.shop-module .shop-group {
    margin-bottom: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--card-bg);
}

.shop-module .shop-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.8rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.shop-module .shop-group-toggle:hover {
    background: var(--primary-soft);
}

.shop-module .shop-group-toggle[aria-expanded="true"] .shop-group-toggle-icon::before {
    content: "▾";
    color: var(--primary-color);
}

.shop-module .shop-group-toggle[aria-expanded="false"] .shop-group-toggle-icon::before {
    content: "▸";
    color: var(--primary-color);
}

.shop-module .shop-group-body {
    padding: 0 0.4rem 0.4rem;
}

.shop-module .shop-group-body .shop-results-wrap {
    border-radius: var(--radius-ctrl);
    border: 1px solid var(--border-color);
}

.shop-module .shop-item-icon {
    width: 1.6rem;
    height: 1.6rem;
    vertical-align: middle;
    margin-right: 0.4rem;
    border-radius: 0.25rem;
}

.shop-module .shop-item-name {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--primary-color);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.shop-module .shop-item-name:hover {
    text-decoration: underline;
}

.shop-module .shop-price {
    color: var(--accent-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.shop-module .shop-rank-badge {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-ctrl);
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.shop-module .shop-data-error,
.shop-module .shop-empty-state {
    padding: 1.2rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    text-align: center;
}

.shop-module .shop-data-error {
    color: var(--danger-color);
}

/* ---------- Shop Purchase Summary (equipment board) ---------- */

.shop-purchase-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
    font-size: 0.78rem;
}

.shop-purchase-kind {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-ctrl);
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.shop-purchase-line {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--bg-card);
    color: var(--accent-gold);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.shop-purchase-line:hover {
    border-color: var(--accent-gold);
}

.shop-purchase-more {
    color: var(--text-secondary);
    font-weight: 400;
}

.shop-purchase-detail-row td {
    background: var(--card-bg);
    border-top: 1px dashed var(--border-color);
}

.shop-purchase-detail-cell {
    padding: 0.5rem 0.75rem;
}

.shop-purchase-detail-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    padding: 0.2rem 0;
    font-size: 0.8rem;
}

.shop-purchase-detail-line + .shop-purchase-detail-line {
    border-top: 1px dotted var(--border-color);
}

.shop-purchase-detail-line .shop-purchase-price {
    color: var(--accent-gold);
    font-weight: 700;
}

.shop-purchase-rank {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-ctrl);
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
}

.shop-purchase-limit {
    color: var(--text-secondary);
}

@media (max-width: 900px) {
    .shop-module .shop-layout {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .shop-module .shop-search-card {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        max-height: 78vh;
        z-index: 130;
        overflow-y: auto;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
        transform: translateY(105%);
        transition: transform 0.25s ease;
        overscroll-behavior: contain;
        gap: 0.9rem;
    }

    .shop-module .shop-results-card {
        width: 100%;
    }

    .shop-module .shop-results-table th,
    .shop-module .shop-results-table td {
        white-space: nowrap;
    }
}

.monster-loc-cell {
    max-width: 16rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main);
}

/* 技能列表: 名称 | 属性 | 类型 | 消耗 | 威力 | 范围 | 预计耗时 */
#skill-list-container .equipment-results-table th:nth-child(1),
#skill-list-container .equipment-results-table td:nth-child(1) { width: 28%; }
#skill-list-container .equipment-results-table th:nth-child(4),
#skill-list-container .equipment-results-table td:nth-child(4) { width: 4.2rem; text-align: right; }
#skill-list-container .equipment-results-table th:nth-child(5),
#skill-list-container .equipment-results-table td:nth-child(5) { width: 4.2rem; text-align: right; }
#skill-list-container .equipment-results-table th:nth-child(2),
#skill-list-container .equipment-results-table td:nth-child(2) { width: 4rem; }
#skill-list-container .equipment-results-table th:nth-child(3),
#skill-list-container .equipment-results-table td:nth-child(3) { width: 4rem; }
#skill-list-container .equipment-results-table th:nth-child(7),
#skill-list-container .equipment-results-table td:nth-child(7) { width: 4.8rem; text-align: right; }

#skill-list-container .equipment-results-table th.sortable-th {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#skill-list-container .equipment-results-table th.sortable-th:hover {
    color: var(--primary-color);
    background: var(--control-bg-hover);
}

#skill-list-container .equipment-results-table th.sortable-th .sort-icon {
    display: inline-block;
    margin-left: 3px;
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.45;
    font-weight: normal;
    vertical-align: baseline;
    transition: opacity 0.15s ease, color 0.15s ease;
}

#skill-list-container .equipment-results-table th.sortable-th:hover .sort-icon {
    opacity: 0.85;
}

#skill-list-container .equipment-results-table th.sort-asc,
#skill-list-container .equipment-results-table th.sort-desc {
    color: var(--primary-color);
    background: var(--primary-soft);
}

#skill-list-container .equipment-results-table th.sort-asc .sort-icon,
#skill-list-container .equipment-results-table th.sort-desc .sort-icon {
    opacity: 1;
    color: var(--primary-color);
    font-weight: bold;
}

#skill-list-container .skill-stage-title-row td {
    width: auto;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--table-border);
    background: var(--table-header-bg);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 700;
}

#skill-list-container .skill-stage-rebirth td {
    color: var(--primary-color);
    border-top: 1px solid var(--border-color);
}

/* 公会委托 / 方舟任务: 阶级(星球) | 名称 | 材料 | 奖励 */
.union-results-table th:nth-child(1),
.union-results-table td:nth-child(1) { width: 6.2rem; }
.union-results-table th:nth-child(2),
.union-results-table td:nth-child(2) { width: 26%; white-space: normal; }
.union-results-table th:nth-child(3),
.union-results-table td:nth-child(3),
.union-results-table th:nth-child(4),
.union-results-table td:nth-child(4) { white-space: normal; }

.union-task-title {
    font-weight: 600;
    color: var(--text-main);
}

/* 远征任务: 等级 | 区域/任务 | 时间/友好度 | 条件 | 奖励 */
.adventure-results-table th:nth-child(1),
.adventure-results-table td:nth-child(1) { width: 4rem; }
.adventure-results-table th:nth-child(2),
.adventure-results-table td:nth-child(2) { width: 26%; white-space: normal; }
.adventure-results-table th:nth-child(3),
.adventure-results-table td:nth-child(3) { width: 11rem; }
.adventure-results-table th:nth-child(4),
.adventure-results-table td:nth-child(4),
.adventure-results-table th:nth-child(5),
.adventure-results-table td:nth-child(5) { white-space: normal; }

/* 远征商店: 名称 | 单价 | 数量 | 解锁 */
.adventure-shop-table th:nth-child(1),
.adventure-shop-table td:nth-child(1) { width: 32%; white-space: normal; }

/* 掉落来源: 怪物 | 等级 | 槽 | 稀有度 | 地图路径 */
.drop-sources-table th:nth-child(2),
.drop-sources-table td:nth-child(2) { width: 3.6rem; text-align: right; }
.drop-sources-table th:nth-child(3),
.drop-sources-table td:nth-child(3) { width: 2.8rem; text-align: right; }
.drop-sources-table th:nth-child(4),
.drop-sources-table td:nth-child(4) { width: 5rem; text-align: center; }

.drop-route-cell {
    white-space: normal;
}

.drop-rarity-cell {
    text-align: center;
}

.drop-rare-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid rgba(194, 65, 45, 0.28);
    border-radius: 4px;
    background: rgba(194, 65, 45, 0.12);
    color: #b33f2e;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

html[data-theme="dark"] .drop-rare-badge {
    border-color: rgba(251, 113, 93, 0.32);
    background: rgba(251, 113, 93, 0.14);
    color: #fb8a76;
}

.drop-sources-wrap {
    max-height: 380px;
}

.monster-drops-wrap {
    max-height: 260px;
}

.monster-drops-table th:nth-child(1),
.monster-drops-table td:nth-child(1) { width: 3rem; text-align: right; }
.monster-drops-table th:nth-child(3),
.monster-drops-table td:nth-child(3) { width: 5rem; text-align: center; }

.map-coordinate-wrap {
    max-height: 60vh;
}

.map-coordinate-table th:nth-child(2),
.map-coordinate-table td:nth-child(2),
.map-coordinate-table th:nth-child(3),
.map-coordinate-table td:nth-child(3) {
    width: 5.4rem;
    text-align: right;
}

/* Details & craft tables (inside cards) */
.details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.details-table th,
.details-table td {
    padding: 0.4rem 0.3rem;
    border-bottom: 1px solid var(--subtle-divider);
    text-align: left;
    vertical-align: top;
}

.details-table th {
    color: var(--text-muted);
    font-weight: 500;
    width: 5.4rem;
    white-space: nowrap;
}

.details-table tr:last-child th,
.details-table tr:last-child td {
    border-bottom: none;
}

.craft-materials-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.craft-materials-table th,
.craft-materials-table td {
    padding: 0.32rem 0.4rem;
    border-bottom: 1px solid var(--table-border);
    text-align: left;
}

.craft-materials-table th {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.76rem;
}

.craft-materials-table th:last-child,
.craft-materials-table td:last-child {
    text-align: right;
    width: 3.4rem;
}

.craft-materials-table tr:last-child td {
    border-bottom: none;
}

.craft-material-qty {
    font-weight: 700;
    color: var(--text-main);
}

/* --------------------------------------------------------------------------
   11. Badges / Tags / Chips
   -------------------------------------------------------------------------- */
.item-level-badge {
    display: inline-block;
    padding: 0.14rem 0.5rem;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--primary-soft);
    color: var(--primary-color);
    white-space: nowrap;
}

.element-badge {
    display: inline-block;
    padding: 0.08rem 0.42rem;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 700;
}

.element-earth { background: rgba(180, 83, 9, 0.12); color: #b45309; }
.element-water { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.element-fire { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.element-wind { background: rgba(5, 150, 105, 0.12); color: #059669; }
.element-none { background: var(--badge-bg); color: var(--text-muted); }

html[data-theme="dark"] .element-earth { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
html[data-theme="dark"] .element-water { color: #60a5fa; background: rgba(96, 165, 250, 0.12); }
html[data-theme="dark"] .element-fire { color: #f87171; background: rgba(248, 113, 113, 0.12); }
html[data-theme="dark"] .element-wind { color: #34d399; background: rgba(52, 211, 153, 0.12); }

.union-rank-badge,
.adventure-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--badge-bg);
    color: var(--text-muted);
}

.union-rank-badge.rank-d,
.adventure-grade-badge.grade-c { background: var(--badge-bg); color: var(--text-muted); }
.union-rank-badge.rank-c,
.adventure-grade-badge.grade-b { background: rgba(5, 150, 105, 0.12); color: #059669; }
.union-rank-badge.rank-b,
.adventure-grade-badge.grade-a { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.union-rank-badge.rank-a,
.adventure-grade-badge.grade-s { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.union-rank-badge.rank-s,
.adventure-grade-badge.grade-ss { background: rgba(180, 83, 9, 0.14); color: #b45309; }

html[data-theme="dark"] .union-rank-badge.rank-c,
html[data-theme="dark"] .adventure-grade-badge.grade-b { color: #34d399; background: rgba(52, 211, 153, 0.12); }
html[data-theme="dark"] .union-rank-badge.rank-b,
html[data-theme="dark"] .adventure-grade-badge.grade-a { color: #60a5fa; background: rgba(96, 165, 250, 0.12); }
html[data-theme="dark"] .union-rank-badge.rank-a,
html[data-theme="dark"] .adventure-grade-badge.grade-s { color: #a78bfa; background: rgba(167, 139, 250, 0.12); }
html[data-theme="dark"] .union-rank-badge.rank-s,
html[data-theme="dark"] .adventure-grade-badge.grade-ss { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }

.tag-material {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.12rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--control-bg);
    color: var(--text-main);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.tag-material.tag-clickable {
    color: var(--primary-color);
    cursor: pointer;
    border-color: transparent;
    background: var(--primary-soft);
}

.tag-material.tag-clickable:hover {
    background: var(--primary-color);
    color: var(--button-hover-text);
}

.tag-reward {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.14rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text-main);
    font-size: 0.78rem;
    line-height: 1.35;
}

.tag-reward-coin {
    background: rgba(180, 83, 9, 0.1);
    border-color: rgba(180, 83, 9, 0.25);
    color: var(--accent-gold);
}

.tag-reward-reputation {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.22);
    color: var(--info);
}

.tag-reward-recipe {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.22);
    color: var(--accent-purple);
}

.tag-reward-unlock {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.tag-reward-unlock strong {
    color: var(--accent-purple);
    font-weight: 600;
}

.union-tag-list,
.adventure-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}

.avail-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    line-height: 1.3;
    vertical-align: middle;
}

.avail-tag.avail-alchemy { background: var(--primary-color); }
.avail-tag.avail-craft { background: var(--accent-purple); }
.avail-tag.avail-embed { background: #64748b; }
.avail-tag.avail-extended { background: #7c3aed; }
.avail-tag.avail-dungeon {
    background: rgba(180, 83, 9, 0.12);
    color: #b45309;
}

html[data-theme="dark"] .avail-tag.avail-dungeon {
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
}

.monster-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.14rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.monster-status-badge.is-confirmed {
    background: rgba(5, 150, 105, 0.12);
    border-color: rgba(5, 150, 105, 0.25);
    color: #059669;
}

.task-no-data {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.custom-base-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.4rem 0.18rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--primary-color);
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 600;
}

.custom-base-tag .remove-tag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: none;
    border-radius: 999px;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
}

.custom-base-tag .remove-tag-btn:hover {
    background: rgba(0, 0, 0, 0.12);
    color: var(--danger);
}

.material-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--control-bg);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-quick);
}

.material-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.material-chip.active {
    background: var(--primary-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   12. Alchemy Module: Settings / Details / Craft sections
   -------------------------------------------------------------------------- */
.setting-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.setting-group:last-child {
    margin-bottom: 0;
}

.setting-group > label {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.alchemy-rank-select {
    width: auto;
    min-width: 9rem;
}

.item-detail-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.item-detail-header h3 {
    font-size: 1.02rem;
    font-weight: 700;
    min-width: 0;
}

.item-desc {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    margin-top: 0.7rem;
}

.unified-item-sources {
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--subtle-divider);
}

.unified-source-heading h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 0.88rem;
    letter-spacing: 0;
}

.unified-source-recommendation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.12rem 0.45rem;
    margin-top: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-left: 3px solid #16836b;
    background: rgba(22, 131, 107, 0.09);
}

.unified-source-recommendation > span {
    grid-row: 1 / span 2;
    align-self: start;
    padding: 0.12rem 0.32rem;
    border-radius: 3px;
    background: #16836b;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.unified-source-recommendation strong {
    color: var(--text-main);
    font-size: 0.8rem;
}

.unified-source-recommendation p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.unified-source-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.65rem;
}

.unified-source-tab {
    min-height: 1.75rem;
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--control-bg);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
}

.unified-source-tab:hover,
.unified-source-tab:focus-visible {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.unified-source-tab.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.unified-source-list {
    margin-top: 0.35rem;
}

.unified-source-entry {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--subtle-divider);
}

.unified-source-entry:last-child {
    border-bottom: 0;
}

.unified-source-entry.is-recommended {
    padding-left: 0.55rem;
    border-left: 2px solid #16836b;
}

.unified-source-entry-head {
    display: grid;
    grid-template-columns: 1.65rem minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: start;
}

.unified-source-kind {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border-radius: 4px;
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 800;
}

.unified-source-entry-head strong {
    display: block;
    color: var(--text-main);
    font-size: 0.78rem;
    line-height: 1.3;
}

.unified-source-entry-head p {
    margin: 0.16rem 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.unified-source-drop-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.unified-source-entry-head em {
    padding: 0.12rem 0.3rem;
    border-radius: 3px;
    background: rgba(22, 131, 107, 0.12);
    color: #16836b;
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 700;
}

.unified-source-route,
.unified-source-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.45rem 0 0 2.1rem;
}

.unified-source-route span,
.unified-source-ingredients span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
    padding: 0.24rem 0.38rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--control-bg);
    color: var(--text-main);
    font-size: 0.7rem;
}

.unified-source-route b,
.unified-source-ingredients b {
    color: var(--danger-color);
}

.unified-source-route small {
    color: var(--text-muted);
    font-size: 0.64rem;
}

.unified-source-steps {
    margin: 0.45rem 0 0 3.3rem;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.55;
}

.unified-source-note {
    margin: 0.4rem 0 0 2.1rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.craft-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0.95rem 0 0.45rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--subtle-divider);
    color: var(--text-main);
}

.craft-tool-line {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}

.craft-tool-name {
    color: var(--text-main);
    font-weight: 600;
}

.craft-material-link {
    border: none;
    background: none;
    color: var(--primary-color);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.craft-material-link:hover {
    text-decoration: underline;
}

.craft-unlocks-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.craft-unlock-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem 0.5rem;
    font-size: 0.84rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--subtle-divider);
}

.craft-unlock-source-list {
    display: flex;
    flex: 1 1 14rem;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.craft-unlock-row:last-child {
    border-bottom: none;
}

.craft-unlock-source {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.craft-unlock-source-link {
    color: var(--primary-color);
    text-decoration: none;
}

.craft-unlock-source-link:hover,
.craft-unlock-source-link:focus-visible {
    text-decoration: underline;
}

.craft-unlock-link {
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 4px;
}

.item-uses-section {
    border-top: 1px solid var(--subtle-divider);
    margin-top: 0.75rem;
}

.item-uses-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    justify-content: space-between;
    padding: 0.75rem 0 0.45rem;
    text-align: left;
    width: 100%;
}

.item-uses-toggle:hover {
    color: var(--primary-color);
}

.item-uses-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

.item-uses-chevron {
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.item-uses-toggle[aria-expanded="true"] .item-uses-chevron {
    transform: rotate(90deg);
}

.item-uses-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.35rem;
}

.item-uses-group-title {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    margin-top: 0.35rem;
}

.item-uses-row {
    align-items: baseline;
    border-bottom: 1px solid var(--subtle-divider);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    gap: 0.25rem 0.55rem;
    justify-content: space-between;
    padding: 0.38rem 0;
}

.item-uses-row:last-child {
    border-bottom: 0;
}

.item-uses-meta {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.item-requirement-row {
    align-items: flex-start;
}

.item-requirement-copy {
    display: flex;
    flex: 1 1 12rem;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.item-requirement-title {
    font-size: 0.82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.item-requirement-quantity {
    flex: 0 0 auto;
    white-space: nowrap;
}

.item-uses-link {
    color: var(--primary-color);
    font: inherit;
    text-decoration: none;
}

.item-uses-link:hover {
    text-decoration: underline;
}

.custom-bases-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bases-placeholder {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   13. Recipes List (可选合成配方)
   -------------------------------------------------------------------------- */
.recipes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.recipe-option-btn {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 0.55rem 0.7rem;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    color: var(--text-main);
    font-size: 0.86rem;
    font-family: var(--font-outfit);
    line-height: 1.45;
    outline: none;
    cursor: pointer;
    transition: var(--transition-quick);
}

.recipe-option-btn:hover {
    border-color: var(--primary-color);
}

.recipe-option-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-soft);
    box-shadow: inset 2px 0 0 var(--primary-color);
}

.recipe-desc-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.recipe-desc-text {
    min-width: 0;
}

.recipe-meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.recipe-outcome-row {
    font-size: 0.8rem;
    color: var(--success);
    margin-top: 0.25rem;
    line-height: 1.35;
}

.recipe-success-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 700;
}

.recipe-success-badge.success-high { background: rgba(5, 150, 105, 0.12); color: #059669; }
.recipe-success-badge.success-medium { background: rgba(180, 83, 9, 0.12); color: #b45309; }
.recipe-success-badge.success-low,
.recipe-success-badge.success-verylow { background: rgba(220, 38, 38, 0.12); color: #dc2626; }

html[data-theme="dark"] .recipe-success-badge.success-high { color: #34d399; }
html[data-theme="dark"] .recipe-success-badge.success-medium { color: #fbbf24; }
html[data-theme="dark"] .recipe-success-badge.success-low,
html[data-theme="dark"] .recipe-success-badge.success-verylow { color: #f87171; }

.recipe-cost-badge {
    font-weight: 600;
    color: var(--accent-gold);
    font-size: 0.8rem;
}

.recipe-ingredient-link {
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 4px;
}

.recipe-ingredient-link:hover {
    color: var(--primary-strong);
}

.node-alternatives {
    color: var(--text-muted, #8b8b8b);
    font-size: 0.85em;
    margin-left: 2px;
}

.success-help-btn {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color-hover);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}

.success-help-btn svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.success-help-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.sort-selector {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.sort-selector select {
    width: auto;
}

/* --------------------------------------------------------------------------
   14. Recipe Tree
   -------------------------------------------------------------------------- */
.tree-container {
    min-height: 200px;
    max-height: 62vh;
    overflow: auto;
    position: relative;
    padding: 0.25rem;
}

.tree-node {
    margin-left: 20px;
    position: relative;
    list-style: none;
}

.tree-node::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -12px;
    width: 12px;
    height: 1px;
    background: var(--border-color-hover);
}

.tree-node::after {
    content: '';
    position: absolute;
    top: 0;
    left: -12px;
    width: 1px;
    height: 100%;
    background: var(--border-color-hover);
}

.tree-node:last-child::after {
    height: 14px;
}

.source-overview-children > .tree-node::before,
.source-overview-children > .tree-node::after {
    margin-left: 0;
}

.tree-root {
    margin-left: 0;
    padding-left: 0;
}

.tree-node-content {
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    padding: 0.4rem 0.7rem;
    margin-bottom: 0.4rem;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--transition-quick);
    font-size: 0.85rem;
    max-width: 100%;
}

.tree-node-content:hover {
    background: var(--control-bg-hover);
    border-color: var(--border-color-hover);
}

.tree-node-collapsed > ul {
    display: none;
}

.tree-toggle-icon {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.tree-node-collapsed > .tree-node-content .tree-toggle-icon {
    transform: rotate(-90deg);
}

.route-step-formula {
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.node-name {
    font-weight: 600;
    color: var(--text-main);
}

.node-level,
.node-material {
    font-size: 0.72rem;
    background: rgba(125, 125, 125, 0.1);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 0.08rem 0.42rem;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.filter-rank-controls .alchemy-rank-select {
    grid-column: 1 / -1;
    width: 100%;
}

.alchemy-skill-level-control {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.alchemy-skill-level-control input {
    width: 4.25rem;
    min-width: 0;
}

.node-req-level,
.reference-status-badge {
    font-size: 0.72rem;
    padding: 0.06rem 0.35rem;
    border-radius: 4px;
    font-weight: 600;
}

.node-req-level {
    color: var(--text-main);
    background: var(--control-bg-hover);
    border: 1px solid var(--border-color);
}

.status-structure-unverified,
.status-evidence-none {
    color: var(--text-muted);
    background: var(--control-bg-hover);
    border: 1px solid var(--border-color);
}

.status-structure-aligned,
.status-evidence-player_tested {
    color: var(--success);
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.24);
}

.status-structure-conflict {
    color: var(--danger);
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.24);
}

.status-evidence-packet_verified {
    color: var(--info);
    background: rgba(14, 116, 144, 0.1);
    border: 1px solid rgba(14, 116, 144, 0.24);
}

.reference-formula-raw {
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.reference-output-range {
    flex-basis: 100%;
    color: var(--info);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
    margin-top: 2px;
}

.node-action {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.node-action span.shop-label,
.node-action span.mine-label,
.node-action span.drop-label {
    color: var(--text-muted);
    font-weight: 500;
}
.node-action span.craft-label,
.node-action span.jump-label,
.node-action span.book-label {
    font-size: 0.72rem;
    background: rgba(125, 125, 125, 0.1);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 0.08rem 0.42rem;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.node-action span.non-synth-label {
    background: rgba(220, 38, 38, 0.1);
    color: var(--danger);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.84em;
    border: 1px solid rgba(220, 38, 38, 0.22);
    display: inline-block;
}

.book-source-label {
    color: var(--accent-gold);
    font-weight: 600;
}

.node-base-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    transition: var(--transition-quick);
}

.node-base-toggle-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    gap: 0.5rem;
}

.empty-icon {
    font-size: 2.2rem;
    opacity: 0.6;
}

/* Recipe tree calculation skeleton (shown while solveAlchemyPath runs) */
.tree-calculating {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.4rem 1.2rem;
}

.tree-calculating-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.tree-calculating-orb {
    font-size: 1.25rem;
    line-height: 1;
    animation: treeCalcPulse 1.6s ease-in-out infinite;
}

.tree-calculating-text {
    font-weight: 600;
}

.tree-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--border-color) 25%, var(--border-color-hover) 40%, var(--border-color) 60%);
    background-size: 300% 100%;
    animation: treeSkeletonWave 1.4s ease-in-out infinite;
}

/* Inline loading row when expanding a deep tree node (lazy subtree solve) */
.tree-node-loading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.tree-node-loading-orb {
    font-size: 0.95rem;
    line-height: 1;
    animation: treeCalcPulse 1.2s ease-in-out infinite;
}

.tree-node-loading-text {
    font-weight: 600;
}

@keyframes treeCalcPulse {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    50% { transform: scale(1.18); opacity: 1; }
}

@keyframes treeSkeletonWave {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tree-calculating-orb,
    .tree-skeleton-line {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   15. Breadcrumbs
   -------------------------------------------------------------------------- */
.recipe-nav-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    margin-bottom: 1rem;
    font-size: 0.82rem;
}

.breadcrumb-actions {
    display: flex;
    gap: 0.4rem;
}

.recipe-back-btn,
.recipe-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    border-radius: var(--radius-ctrl);
    border: 1px solid var(--border-color);
    background: var(--control-bg);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-quick);
}

.recipe-back-btn:hover,
.recipe-clear-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

#recipe-breadcrumbs-trail {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

#recipe-breadcrumbs-trail .trail-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

#recipe-breadcrumbs-trail .trail-item.active {
    color: var(--primary-color);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   16. Material Summary
   -------------------------------------------------------------------------- */
.summary-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 1rem;
    align-items: start;
}

.summary-list-container {
    min-width: 0;
}

.summary-materials-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.45rem;
    list-style: none;
}

.summary-materials-list li {
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    font-size: 0.82rem;
}

.mat-item-name {
    font-weight: 600;
    color: var(--text-main);
}

.mat-item-count {
    font-weight: 700;
    color: var(--primary-color);
}

.summary-materials-list li.completed .mat-item-count {
    text-decoration: line-through;
    color: var(--text-muted);
}

.mat-item-source {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.summary-cost-box {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.7rem;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
}

.cost-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cost-item span {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.cost-item strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent-gold);
    font-variant-numeric: tabular-nums;
}

.cost-item strong#summary-steps-count {
    color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   17. Material Groups (材料候选分组)
   -------------------------------------------------------------------------- */
.material-filter-controls {
    margin-top: 0.8rem;
}

.material-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    max-height: 70vh;
    overflow: auto;
    padding-right: 0.25rem;
}

.material-group-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    overflow: hidden;
}

.material-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-quick);
}

.material-group-header:hover {
    background: var(--control-bg-hover);
}

.group-title-area {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.group-arrow {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    display: inline-block;
    transform: rotate(-90deg);
}

.material-group-card.expanded .group-arrow {
    transform: rotate(0deg);
}

.group-actions-area {
    display: flex;
    gap: 0.35rem;
}

.material-group-content {
    display: none;
    padding: 0.55rem;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 0.35rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

.material-group-card.expanded .material-group-content {
    display: grid;
}

.material-group-content .material-chip {
    justify-content: center;
    text-align: center;
}

/* --------------------------------------------------------------------------
   18. Monster Module
   -------------------------------------------------------------------------- */
.monster-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

.monster-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.4rem;
}

.monster-check {
    margin-bottom: 0;
}

.monster-level-range {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.monster-level-input {
    flex: 1;
    min-width: 0;
    min-height: 2.15rem;
}

.monster-level-sep {
    color: var(--text-muted);
}

.monster-detail-card {
    margin-top: 0.9rem;
    border-top: 1px solid var(--subtle-divider);
    padding-top: 0.9rem;
}

.monster-detail-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.monster-detail-sheet-head .item-detail-header {
    flex: 1;
    min-width: 0;
}

.monster-detail-close-btn {
    display: none;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

#monster-detail-backdrop {
    display: none;
}

.monster-drop-hit {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

.monster-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.monster-stat-item {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    font-size: 0.82rem;
}

.monster-stat-item span {
    color: var(--text-muted);
}

.monster-stat-item strong {
    font-variant-numeric: tabular-nums;
}

.monster-stat-spd strong {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

.monster-stat-spd small {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.monster-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.monster-tech-grid div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    min-width: 0;
}

.monster-tech-grid span {
    color: var(--text-muted);
    flex: 0 0 auto;
}

.monster-tech-grid strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monster-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 0;
    margin-bottom: 0.3rem;
}

.monster-section-title {
    margin-top: 0.8rem;
}

.monster-location-list {
    font-size: 0.84rem;
    color: var(--text-main);
    line-height: 1.5;
}

.monster-location-detail {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--subtle-divider);
}

.monster-location-detail:last-child {
    border-bottom: none;
}

.monster-location-meta {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.monster-map-route {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   19. Collect Module
   -------------------------------------------------------------------------- */
.collect-map-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.collect-map-group {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
}

.collect-map-title {
    margin: 0;
    padding: 0.5rem 0.7rem;
    background: var(--control-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.collect-spot-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Collect minimap group header + modal */
.collect-map-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--control-bg);
    border-bottom: 1px solid var(--border-color);
}

.collect-map-group-head .collect-map-title {
    flex: 1;
}

.collect-map-view-btn {
    margin-right: 0.5rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-main, #fff);
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
}

.collect-map-view-btn:hover {
    border-color: var(--accent-color, #4a90d9);
    color: var(--accent-color, #4a90d9);
}

.collect-spot-tag-warn {
    color: #b8860b;
    border-color: #d4a72c66;
}

.collect-spot-unresolved {
    opacity: 0.75;
}

.collect-spot-flash {
    animation: collect-spot-flash 1.2s ease-out;
}

@keyframes collect-spot-flash {
    0% { background: var(--accent-color, #4a90d9); color: #fff; }
    100% { background: transparent; }
}

.collect-map-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

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

.collect-map-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 55%);
}

.collect-map-modal-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(92vw, 720px);
    max-height: 88vh;
    background: var(--bg-main, #fff);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgb(0 0 0 / 25%);
}

.collect-map-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--control-bg);
}

.collect-map-modal-head h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-main);
}

.collect-map-modal-close {
    border: none;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-sub, #666);
}

.collect-map-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    overflow: auto;
}

.collect-map-image-wrap {
    position: relative;
    align-self: center;
    width: min(100%, 560px);
}

.collect-map-image {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    image-rendering: auto;
}

.collect-map-missing {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-sub, #666);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.collect-map-point {
    position: absolute;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e74c3c;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.collect-map-point:hover {
    transform: translate(-50%, -50%) scale(1.3);
    z-index: 2;
}

.collect-map-point-index {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 2px rgb(0 0 0 / 50%);
    pointer-events: none;
}

.collect-map-point-pulse {
    animation: collect-map-point-pulse 1.1s ease-out 2;
}

@keyframes collect-map-point-pulse {
    0% { box-shadow: 0 0 0 0 rgb(52 152 219 / 80%); }
    100% { box-shadow: 0 0 0 14px rgb(52 152 219 / 0%); }
}

.collect-map-legend {
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    color: var(--text-sub, #666);
    columns: 2;
    column-gap: 1.2rem;
    list-style: none;
}

.collect-map-legend-item {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    break-inside: avoid;
    margin-bottom: 0.15rem;
    padding: 0.1rem 0.3rem;
    border-radius: 6px;
    cursor: pointer;
}

.collect-map-legend-item:hover {
    background: var(--control-bg);
}

.collect-map-legend-item.active {
    background: rgb(52 152 219 / 15%);
    color: var(--text-main);
}

.collect-map-legend-no {
    flex: none;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 2px rgb(0 0 0 / 50%);
    align-self: center;
}

@media (max-width: 640px) {
    .collect-map-legend {
        columns: 1;
    }

    .collect-map-modal-panel {
        width: 96vw;
        max-height: 92vh;
    }
}


.collect-spot-item {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid var(--table-border);
    font-size: 0.84rem;
}

.collect-spot-item:last-child {
    border-bottom: none;
}

.collect-spot-name {
    font-weight: 600;
    color: var(--text-main);
    min-width: 0;
}

.collect-spot-coord {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.collect-spot-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--badge-bg);
    color: var(--text-muted);
    white-space: nowrap;
}

.collect-treasure-group {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
}

.collect-treasure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    background: var(--control-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.collect-treasure-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.collect-treasure-item {
    border-bottom: 1px solid var(--table-border);
    font-size: 0.84rem;
}

.collect-treasure-item:last-child {
    border-bottom: none;
}

.collect-treasure-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-weight: 600;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.collect-treasure-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
}

.collect-treasure-toggle {
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 1.7rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.collect-treasure-toggle:hover,
.collect-treasure-toggle:focus-visible {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.collect-treasure-acquired {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.76rem;
    white-space: nowrap;
    cursor: pointer;
}

.collect-treasure-acquired-input {
    accent-color: var(--primary-color);
}

.collect-treasure-details {
    padding: 0.65rem 0.75rem 0.75rem 2.85rem;
    background: var(--bg-card);
}

.collect-treasure-image-wrap {
    position: relative;
    width: min(100%, 560px);
    margin-bottom: 0.55rem;
}

.monster-category-toggle {
    margin-bottom: 0.75rem;
}

.monster-activity-title {
    margin: 0.65rem 0 0;
    padding: 0.45rem 0.6rem;
    border-left: 3px solid var(--primary-color);
    background: var(--primary-soft);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 700;
}

.monster-category-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.monster-category-label.is-dungeon {
    color: var(--primary-color);
}

.monster-dungeon-group-row th,
.monster-title-group-row th {
    position: sticky;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.monster-dungeon-group-row th {
    top: 0;
    z-index: 3;
    background: var(--primary-soft);
}

.monster-title-group-row th {
    top: 2.55rem;
    z-index: 2;
    background: var(--table-header-bg);
}

.monster-dungeon-group-toggle,
.monster-title-toggle {
    display: grid;
    grid-template-columns: 0.85rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.55rem;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--primary-color);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
}

.monster-dungeon-group-toggle {
    color: var(--text-main);
    font-size: 0.88rem;
}

.monster-title-toggle {
    padding-left: 1.9rem;
    color: var(--primary-color);
    font-size: 0.82rem;
}

.monster-dungeon-group-toggle:hover,
.monster-dungeon-group-toggle:focus-visible,
.monster-title-toggle:hover,
.monster-title-toggle:focus-visible {
    background: var(--primary-soft);
}

.monster-dungeon-group-toggle-icon,
.monster-title-toggle-icon {
    width: 0;
    height: 0;
    border-top: 0.3rem solid transparent;
    border-bottom: 0.3rem solid transparent;
    border-left: 0.42rem solid currentColor;
    transition: transform 0.15s ease;
}

.monster-dungeon-group-toggle[aria-expanded="true"] .monster-dungeon-group-toggle-icon,
.monster-title-toggle[aria-expanded="true"] .monster-title-toggle-icon {
    transform: rotate(90deg);
}

.monster-dungeon-group-toggle-name,
.monster-title-toggle-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.monster-dungeon-group-toggle-count,
.monster-title-toggle-count {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.monster-level-group-row th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    background: var(--primary-soft);
}

.monster-level-toggle {
    display: grid;
    grid-template-columns: 0.85rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.55rem;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
}

.monster-level-toggle:hover,
.monster-level-toggle:focus-visible {
    background: var(--primary-soft);
}

.monster-level-toggle-icon {
    width: 0;
    height: 0;
    border-top: 0.3rem solid transparent;
    border-bottom: 0.3rem solid transparent;
    border-left: 0.42rem solid currentColor;
    transition: transform 0.15s ease;
}

.monster-level-toggle[aria-expanded="true"] .monster-level-toggle-icon {
    transform: rotate(90deg);
}

.monster-level-toggle-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.monster-level-toggle-count {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.multi-attr-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.multi-attr-tab-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 0.32rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-quick);
}

.multi-attr-tab-btn:hover,
.multi-attr-tab-btn:focus-visible {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.multi-attr-tab-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.multi-attr-material-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary-color);
    font: inherit;
    letter-spacing: 0;
    cursor: pointer;
}

.multi-attr-material-link:hover,
.multi-attr-material-link:focus-visible {
    text-decoration: underline;
}

/* Multi-attribute material board */
.multi-attr-synthesis-card {
    margin-bottom: 1rem;
    overflow: hidden;
}

.multi-attr-card-header {
    align-items: flex-start;
    padding: 0.62rem 1rem 0.55rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.multi-attr-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

.multi-attr-heading-icon {
    display: grid;
    place-items: center;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--primary-glow);
    border-radius: 6px;
    background: var(--primary-soft);
    font-size: 0.95rem;
}

.multi-attr-heading-copy {
    min-width: 0;
}

.multi-attr-close-btn {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid transparent;
    border-radius: var(--radius-ctrl);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-quick);
}

.multi-attr-close-btn:hover,
.multi-attr-close-btn:focus-visible {
    border-color: var(--border-color);
    background: var(--control-bg);
    color: var(--danger);
}

.multi-attr-eyebrow {
    display: block;
    margin-bottom: 0.05rem;
    color: var(--primary-color);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.multi-attr-card-header h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 0.98rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multi-attr-target-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.12rem;
}

.multi-attr-target-item,
.multi-attr-tab-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.multi-attr-target-btn {
    padding: 0.05rem 1.15rem 0.05rem 0.15rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--primary-color);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
}

.multi-attr-target-btn:hover,
.multi-attr-target-btn:focus-visible {
    color: var(--primary-strong);
}

.multi-attr-target-btn.active {
    border-bottom-color: var(--primary-color);
    color: var(--text-main);
}

.multi-attr-target-arrow {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.multi-attr-target-remove-btn,
.multi-attr-tab-remove-btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 0.95rem;
    height: 0.95rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1;
    cursor: pointer;
}

.multi-attr-target-remove-btn {
    top: 50%;
    right: 0.04rem;
    transform: translateY(-50%);
}

.multi-attr-target-remove-btn:hover,
.multi-attr-target-remove-btn:focus-visible,
.multi-attr-tab-remove-btn:hover,
.multi-attr-tab-remove-btn:focus-visible {
    background: var(--control-bg-hover);
    color: var(--danger);
}

.multi-attr-target-attrs {
    margin-top: 0.08rem;
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.multi-attr-child-target-attrs {
    margin-top: 0.06rem;
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.multi-attr-tabs {
    gap: 0.35rem;
    margin-bottom: 0;
    padding: 0.42rem 1rem;
    border-bottom: 1px solid var(--subtle-divider);
    background: var(--table-header-bg);
}

.multi-attr-tab-btn {
    min-height: 1.8rem;
    padding: 0.22rem 1.35rem 0.22rem 0.72rem;
    border-radius: 999px;
    background: var(--bg-card);
    font-size: 0.8rem;
}

.multi-attr-tab-remove-btn {
    top: 50%;
    right: 0.24rem;
    transform: translateY(-50%);
}

.multi-attr-tab-item:has(.multi-attr-tab-btn.active) .multi-attr-tab-remove-btn {
    color: #d7fffa;
}

.multi-attr-tab-item:has(.multi-attr-tab-btn.active) .multi-attr-tab-remove-btn:hover,
.multi-attr-tab-item:has(.multi-attr-tab-btn.active) .multi-attr-tab-remove-btn:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.multi-attr-content {
    padding: 0.55rem 1rem 0.7rem;
}

.multi-attr-filterbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    margin-bottom: 0.45rem;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.multi-attr-filterbar label {
    font-weight: 700;
    white-space: nowrap;
}

.multi-attr-filterbar input {
    width: 4.6rem;
    min-height: 1.9rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--input-bg);
    color: var(--text-main);
    font: inherit;
}

.multi-attr-filterbar input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.multi-attr-range-separator {
    color: var(--text-muted);
    font-weight: 700;
}

.multi-attr-table-container {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
}

.multi-attr-results-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.multi-attr-results-table th,
.multi-attr-results-table td {
    padding: 0.38rem 0.62rem;
    border-bottom: 1px solid var(--table-border);
    text-align: left;
    vertical-align: middle;
}

.multi-attr-results-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--table-header-bg);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.multi-attr-results-table th:nth-child(1),
.multi-attr-results-table td:nth-child(1) {
    width: 4.5rem;
    text-align: center;
}

.multi-attr-results-table th:nth-child(2),
.multi-attr-results-table td:nth-child(2) {
    width: 23%;
}

.multi-attr-results-table th:nth-child(3),
.multi-attr-results-table td:nth-child(3) {
    width: 8rem;
}

.multi-attr-results-table th:nth-child(4),
.multi-attr-results-table td:nth-child(4) {
    width: 20%;
}

.multi-attr-results-table th:nth-child(5),
.multi-attr-results-table td:nth-child(5) {
    width: 30%;
}

.multi-attr-results-table th:nth-child(6),
.multi-attr-results-table td:nth-child(6) {
    width: 3.2rem;
    text-align: center;
}

.multi-attr-results-table tbody tr:nth-child(even) {
    background: var(--table-stripe);
}

.multi-attr-results-table tbody tr:hover {
    background: var(--primary-soft);
}

.multi-attr-result-row {
    cursor: default;
}

.multi-attr-results-table tbody tr:last-child td {
    border-bottom: 0;
}

.multi-attr-level-cell strong {
    color: var(--accent-gold);
    font-weight: 700;
}

.multi-attr-name-cell {
    white-space: normal;
}

.multi-attr-name-line {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    white-space: nowrap;
}

.multi-attr-name-cell strong {
    color: var(--primary-color);
    font-weight: 700;
}

.multi-attr-target-link {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-attr-source-chips {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.2rem;
}

.multi-attr-source-chip {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid rgba(180, 83, 9, 0.24);
    border-radius: 3px;
    background: rgba(180, 83, 9, 0.1);
    color: #b45309;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.multi-attr-source-chip.is-shop {
    border-color: rgba(161, 98, 7, 0.24);
    background: rgba(234, 179, 8, 0.12);
    color: #a16207;
}

.multi-attr-source-chip:hover,
.multi-attr-source-chip:focus-visible,
.multi-attr-source-chip[aria-expanded="true"] {
    border-color: currentColor;
    outline: none;
}

.multi-attr-source-popover {
    position: fixed;
    z-index: 1400;
    width: min(21rem, calc(100vw - 1rem));
    max-height: min(18rem, calc(100vh - 1rem));
    overflow: auto;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--overlay-bg);
    color: var(--text-main);
    box-shadow: var(--overlay-shadow);
}

.multi-attr-source-detail-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    font-size: 0.78rem;
}

.multi-attr-source-detail-line + .multi-attr-source-detail-line {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dotted var(--border-color);
}

.multi-attr-source-detail-line strong {
    color: var(--accent-gold);
}

.multi-attr-source-detail-kind {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.25rem;
    border-radius: 3px;
    background: rgba(234, 179, 8, 0.12);
    color: #a16207;
    font-size: 0.66rem;
    font-weight: 700;
}

.multi-attr-source-detail-kind.is-dungeon {
    background: rgba(180, 83, 9, 0.1);
    color: #b45309;
}

html[data-theme="dark"] .multi-attr-source-chip,
html[data-theme="dark"] .multi-attr-source-detail-kind.is-dungeon {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
}

html[data-theme="dark"] .multi-attr-source-chip.is-shop,
html[data-theme="dark"] .multi-attr-source-detail-kind {
    border-color: rgba(245, 165, 36, 0.28);
    background: rgba(245, 165, 36, 0.14);
    color: #f5a524;
}

.multi-attr-name-cell strong.shop-buyable {
    color: var(--accent-gold);
}

.multi-attr-stats-cell {
    color: var(--accent-gold);
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
}

.multi-attr-type-cell {
    color: var(--text-main);
}

.multi-attr-material-links {
    display: table-cell;
    white-space: normal;
}

.multi-attr-material-link {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--primary-color);
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

.multi-attr-material-link:hover,
.multi-attr-material-link:focus-visible {
    color: var(--primary-strong);
    text-decoration: underline;
}

.multi-attr-empty-cell {
    padding: 1.4rem !important;
    color: var(--text-muted);
    text-align: center !important;
}

@media (max-width: 700px) {
    .multi-attr-card-header,
    .multi-attr-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .multi-attr-tabs {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .multi-attr-card-header h2 {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .multi-attr-results-table {
        min-width: 560px;
        font-size: 0.8rem;
    }

    .multi-attr-results-table th,
    .multi-attr-results-table td {
        padding: 0.5rem 0.55rem;
    }
}

.collect-treasure-image-wrap.is-map {
    aspect-ratio: 1;
}

.collect-treasure-image,
.collect-treasure-image-placeholder {
    display: block;
    width: min(100%, 360px);
    min-height: 84px;
    max-height: 220px;
    object-fit: contain;
    border: 1px dashed var(--border-color);
    border-radius: 3px;
    background: var(--control-bg);
}

.collect-treasure-image-wrap.is-map .collect-treasure-image,
.collect-treasure-image-wrap.is-map .collect-treasure-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.collect-treasure-map-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #d9322b;
    border-radius: 50%;
    background: rgb(217 50 43 / 22%);
    box-shadow: 0 0 0 2px #fff, 0 1px 5px rgb(0 0 0 / 55%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

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

.collect-treasure-map-marker::before {
    width: 24px;
    height: 2px;
}

.collect-treasure-map-marker::after {
    width: 2px;
    height: 24px;
}

.collect-treasure-image-placeholder {
    position: relative;
}

.collect-treasure-image-placeholder::after {
    content: "暂无图片";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.collect-treasure-coords {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.collect-treasure-path {
    display: block;
    margin-top: 0.18rem;
    overflow-wrap: anywhere;
    color: var(--text-muted);
    line-height: 1.65;
    font-variant-numeric: tabular-nums;
}

.collect-treasure-rewards {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0 0;
    border-top: 1px solid var(--table-border);
    list-style: none;
}

.collect-treasure-reward-row {
    padding: 0.18rem 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.collect-treasure-missing {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.collect-treasure-status {
    font-weight: 600;
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   20. Map Module
   -------------------------------------------------------------------------- */
.map-info-text {
    color: var(--text-main);
    font-size: 0.86rem;
    line-height: 1.55;
    margin-bottom: 0.6rem;
}

.map-info-note {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 0.5rem 0.6rem;
    background: var(--control-bg);
    border-radius: var(--radius-ctrl);
}

.map-coordinate-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.map-coordinate-group h3 {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.45rem;
}

.map-view-toggle {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 30rem);
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
}

.map-view-btn {
    min-height: 2.5rem;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-right: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.map-view-btn:last-child {
    border-right: 0;
}

.map-view-btn:hover {
    background: var(--control-bg-hover);
    color: var(--text-main);
}

.map-view-btn.active {
    background: var(--primary-color);
    color: var(--button-hover-text);
}

.map-view-btn:focus-visible,
.map-region-toggle:focus-visible,
.map-tree-toggle:focus-visible,
.map-tree-scene-button:focus-visible,
.map-detail-link:focus-visible,
.map-breadcrumb-link:focus-visible,
.map-search-result:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.map-directory-workspace {
    display: grid;
    grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
    gap: 1rem;
    align-items: start;
}

.map-directory-sidebar,
.map-scene-detail {
    min-width: 0;
}

.map-directory-sidebar {
    display: grid;
    gap: 0.6rem;
}

.map-directory-sidebar input {
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--input-bg);
    color: var(--text-main);
    padding: 0.45rem 0.6rem;
    font: inherit;
    font-size: 0.82rem;
}

.map-directory-sidebar input:focus {
    border-color: var(--primary-color);
    outline: 2px solid var(--primary-glow);
}

.map-directory-tree,
.map-scene-detail {
    min-width: 0;
    overflow-wrap: anywhere;
}

.map-directory-tree {
    max-height: 62vh;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
}

.map-directory-region + .map-directory-region,
.map-tree-row,
.map-search-result + .map-search-result {
    border-bottom: 1px solid var(--subtle-divider);
}

.map-region-toggle {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    width: 100%;
    min-height: 2.65rem;
    padding: 0.45rem 0.6rem;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.map-region-toggle:hover,
.map-tree-row:hover,
.map-search-result:hover {
    background: var(--primary-soft);
}

.map-region-toggle-icon,
.map-tree-toggle,
.map-tree-toggle-spacer {
    width: 1.5rem;
    height: 1.5rem;
}

.map-region-toggle-icon {
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 700;
}

.map-region-name {
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 700;
}

.map-region-count {
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.map-region-nodes {
    border-top: 1px solid var(--subtle-divider);
}

.map-tree-row {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    gap: 0.35rem;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.32rem 0.5rem 0.32rem calc(0.5rem + var(--map-tree-depth, 0) * 0.9rem);
}

.map-tree-toggle {
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--input-bg);
    color: var(--text-main);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.map-tree-scene-button {
    min-width: 0;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.map-tree-scene-button.active {
    color: var(--primary-strong);
    font-weight: 700;
}

.map-tree-hidden-badge,
.map-tree-exit-badge,
.map-status-badge {
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-ctrl);
    color: var(--accent-gold);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.map-search-results {
    display: grid;
}

.map-search-result {
    min-height: 2.5rem;
    padding: 0.5rem 0.65rem;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.map-directory-empty,
.map-detail-empty {
    padding: 0.8rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.map-scene-detail {
    min-height: 16rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
}

.map-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.65rem;
}

.map-breadcrumb-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.76rem;
    cursor: pointer;
}

.map-breadcrumb-link:hover {
    color: var(--primary-strong);
}

.map-breadcrumb-separator {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.map-detail-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-color);
}

.map-detail-title {
    min-width: min(100%, 12rem);
    margin: 0;
    color: var(--text-main);
    font-size: 1.05rem;
    line-height: 1.35;
}

.map-scene-id {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.map-detail-section {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--subtle-divider);
}

.map-detail-section-title {
    margin: 0 0 0.45rem;
    color: var(--text-main);
    font-size: 0.82rem;
}

.map-hidden-children .map-detail-section-title {
    color: var(--accent-gold);
}

.map-detail-link-list {
    display: grid;
    gap: 0.35rem;
}

.map-detail-link {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.map-detail-link:hover {
    border-color: var(--border-color-hover);
    background: var(--control-bg-hover);
}

.map-monster-section {
    margin-top: 0.9rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.map-monster-summary {
    min-height: 2.6rem;
    padding: 0.6rem 0.25rem;
    color: var(--text-main);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.map-monster-list {
    border-top: 1px solid var(--subtle-divider);
}

.map-monster-row + .map-monster-row {
    border-top: 1px solid var(--subtle-divider);
}

.map-monster-row-summary {
    min-height: 2.55rem;
    padding: 0.6rem 0.35rem;
    color: var(--text-main);
    font-size: 0.84rem;
    cursor: pointer;
}

.map-tree-exit-badge {
    color: var(--text-muted);
    border-color: var(--border-color);
}

.map-monster-name {
    min-width: 0;
    font-weight: 700;
}

.map-monster-element {
    color: var(--primary-strong);
}

.map-monster-body {
    padding: 0 0.45rem 0.65rem 1.35rem;
}

.map-monster-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.45rem 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.map-monster-location {
    padding: 0.4rem 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.map-monster-drops {
    border-top: 1px solid var(--subtle-divider);
}

.map-monster-drops-title {
    margin: 0;
    padding: 0.45rem 0;
    color: var(--text-main);
    font-size: 0.76rem;
}

.map-monster-drop-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    min-height: 2rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--subtle-divider);
    color: var(--text-main);
    font-size: 0.76rem;
}

.map-monster-empty {
    padding: 0.65rem 0.35rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.leveling-results-card {
    min-width: 0;
}

.leveling-recommendation-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.leveling-recommendation-header h2 {
    margin: 0;
}

.leveling-recommendation-header p {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.leveling-model-note {
    flex: 0 0 auto;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    color: var(--text-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.leveling-recommendation-workspace {
    display: grid;
    grid-template-columns: minmax(10rem, 0.7fr) minmax(13rem, 0.9fr) minmax(0, 1.5fr);
    gap: 1rem;
    align-items: start;
}

.leveling-filter-panel,
.leveling-results-panel,
.leveling-detail-panel {
    min-width: 0;
}

.leveling-filter-panel {
    display: grid;
    gap: 0.55rem;
}

.leveling-search-label {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.leveling-filter-panel input {
    width: 100%;
    min-height: 2.45rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--input-bg);
    color: var(--text-main);
    padding: 0.45rem 0.6rem;
    font: inherit;
    font-size: 0.8rem;
}

.leveling-filter-panel input:focus {
    border-color: var(--primary-color);
    outline: 2px solid var(--primary-glow);
}

.leveling-level-tabs {
    display: grid;
    gap: 0.35rem;
    max-height: 35rem;
    overflow: auto;
    padding-right: 0.1rem;
}

.leveling-level-tab {
    min-height: 2.2rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.leveling-level-tab:hover,
.leveling-level-tab.active {
    border-color: var(--primary-color);
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.leveling-results-heading {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    align-items: baseline;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border-color);
}

.leveling-results-heading h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 0.94rem;
}

.leveling-results-heading span {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-align: right;
}

.leveling-results-list {
    display: grid;
    gap: 0.45rem;
    max-height: 38rem;
    overflow: auto;
    padding-top: 0.55rem;
}

.leveling-map-card {
    width: 100%;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.leveling-map-card:hover,
.leveling-map-card.active {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}

.leveling-map-card-heading,
.leveling-monster-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 0.45rem;
    align-items: center;
}

.leveling-map-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.82rem;
}

.leveling-map-badge {
    flex: 0 0 auto;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-ctrl);
    color: var(--accent-gold);
    font-size: 0.66rem;
    white-space: nowrap;
}

.leveling-map-meta,
.leveling-monster-meta,
.leveling-monster-drops,
.leveling-speed-note,
.leveling-combo-note {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.leveling-combo-note {
    margin: 0.35rem 0 0;
}

.leveling-map-meta {
    margin-top: 0.25rem;
}

.leveling-detail-panel {
    min-height: 18rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
}

.leveling-detail-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: baseline;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-color);
}

.leveling-detail-title {
    margin: 0;
    color: var(--text-main);
    font-size: 1.05rem;
}

.leveling-scene-id {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.leveling-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--subtle-divider);
}

.leveling-summary-item {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.leveling-speed-note {
    margin: 0;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--subtle-divider);
}

.leveling-detail-groups {
    display: grid;
    gap: 0.8rem;
}

.leveling-monster-group {
    padding-top: 0.7rem;
}

.leveling-group-title {
    margin: 0 0 0.45rem;
    color: var(--text-main);
    font-size: 0.82rem;
}

.leveling-monster-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.leveling-monster-card {
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
}

.leveling-monster-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
}

.leveling-monster-level {
    flex: 0 0 auto;
    color: var(--primary-strong);
    font-size: 0.72rem;
    font-weight: 700;
}

.leveling-monster-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.65rem;
    margin-top: 0.25rem;
}

.leveling-monster-drops {
    margin-top: 0.35rem;
}

.leveling-detail-actions {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.leveling-action-button {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.leveling-action-button:hover {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}

.leveling-action-button.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.leveling-action-button.is-disabled:hover {
    border-color: var(--border-color);
    background: var(--control-bg);
}

.leveling-empty {
    margin: 0;
    padding: 0.8rem 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   21. Union / Adventure / Ark Modules
   -------------------------------------------------------------------------- */
.union-info-tip {
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(180, 83, 9, 0.25);
    border-radius: var(--radius-ctrl);
    background: rgba(180, 83, 9, 0.07);
    color: var(--accent-gold);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

.union-info-tip strong {
    font-weight: 700;
}

.adventure-task-title {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.86rem;
}

.adventure-task-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.2rem;
}

.adventure-region-text {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.adventure-intro-text {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-style: italic;
}

.adventure-cost-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.78rem;
    white-space: nowrap;
}

.adventure-cost-line + .adventure-cost-line {
    margin-top: 0.15rem;
}

.adventure-cost-label {
    color: var(--text-muted);
}

.adventure-cost-line strong {
    font-variant-numeric: tabular-nums;
}

.adventure-cost-line.highlight strong {
    color: var(--accent-gold);
}

.adventure-condition-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--control-bg);
    color: var(--text-main);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

.adventure-bonus {
    color: var(--success);
    font-size: 0.76rem;
    font-weight: 600;
}

.adventure-shop-name {
    font-weight: 600;
    color: var(--text-main);
}

.adventure-price-cell {
    white-space: nowrap;
}

/* Ark agents */
.agent-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 0.8rem;
}

.agent-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    padding: 0.9rem;
}

/* Ark planet levels */
.planet-levels-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.level-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    padding: 0.9rem;
}

.ark-subtabs-wrapper {
    grid-column: 1 / -1;
}

#ark-subtabs {
    max-width: 26rem;
}

@media (min-width: 1025px) {
    #skill-calculator-container {
        grid-column: 2;
    }
}

/* --------------------------------------------------------------------------
   22. Skill Module
   -------------------------------------------------------------------------- */
.skill-element-checkboxes label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}

.skill-element-checkbox {
    accent-color: var(--primary-color);
    width: 0.95rem;
    height: 0.95rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
    font-size: 0.84rem;
}

.stat-item span {
    color: var(--text-muted);
}

.stat-item strong {
    font-variant-numeric: tabular-nums;
}

.skill-calc-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.95rem;
}

.skill-calc-row label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.skill-calc-row select {
    width: 100%;
    min-height: 2.4rem;
}

.skill-calc-row input[type="range"] {
    display: block;
    width: 100%;
    height: 6px;
    background: var(--control-bg);
    border-radius: 3px;
    cursor: pointer;
    accent-color: var(--primary-color);
}


/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.app-footer {
    text-align: center;
    padding: 1.2rem 0 0.5rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.visit-stats-bar {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--subtle-divider);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   24. Scrollbars
   -------------------------------------------------------------------------- */
.recipes-list::-webkit-scrollbar,
.history-list::-webkit-scrollbar,
.material-grid::-webkit-scrollbar,
.equipment-results-table-wrap::-webkit-scrollbar,
.multi-attr-table-container::-webkit-scrollbar,
.tree-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.recipes-list::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track,
.material-grid::-webkit-scrollbar-track,
.equipment-results-table-wrap::-webkit-scrollbar-track,
.multi-attr-table-container::-webkit-scrollbar-track,
.tree-container::-webkit-scrollbar-track {
    background: transparent;
}

.recipes-list::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb,
.material-grid::-webkit-scrollbar-thumb,
.equipment-results-table-wrap::-webkit-scrollbar-thumb,
.multi-attr-table-container::-webkit-scrollbar-thumb,
.tree-container::-webkit-scrollbar-thumb {
    background: var(--border-color-hover);
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   25. Keyframes
   -------------------------------------------------------------------------- */

/* Page loading overlay (both themes share the dark backdrop) */
#page-loading .loading-orb {
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-loading .loading-orb-core {
    font-size: 3rem;
    line-height: 1;
    animation: float 2s ease-in-out infinite;
    filter: drop-shadow(0 6px 18px rgba(45, 212, 191, 0.35));
}

#page-loading .loading-orb-glow {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.22) 0%, rgba(45, 212, 191, 0) 65%);
    animation: loadingPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}

#page-loading .loading-orb-spark {
    position: absolute;
    font-size: 0.85rem;
    color: #5eead4;
    opacity: 0.85;
    pointer-events: none;
}

#page-loading .spark-a {
    top: 2px;
    right: 6px;
    animation: loadingSparkA 2.6s ease-in-out infinite;
}

#page-loading .spark-b {
    bottom: 6px;
    left: 0;
    animation: loadingSparkB 2.6s ease-in-out infinite;
}

#page-loading .loading-title {
    color: #e6eaf2;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

#page-loading .loading-progress {
    width: 220px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

#page-loading .loading-progress-bar {
    animation: loadingSheen 1.6s ease-in-out infinite;
}

#page-loading .loading-hint {
    color: #6b7280;
    font-size: 0.75rem;
    max-width: 260px;
    text-align: center;
    line-height: 1.5;
}

#page-loading .loading-retry-btn {
    margin-top: 0.25rem;
    padding: 0.45rem 1.4rem;
    font-size: 0.85rem;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

#page-loading .loading-retry-btn:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(248, 113, 113, 0.7);
}

#page-loading.is-error .loading-orb-core {
    filter: drop-shadow(0 6px 18px rgba(239, 68, 68, 0.35));
    animation: none;
    opacity: 0.75;
}

#page-loading.is-error .loading-orb-glow,
#page-loading.is-error .loading-orb-spark {
    display: none;
}

@keyframes loadingPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.25); opacity: 1; }
}

@keyframes loadingSheen {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.45); }
    100% { filter: brightness(1); }
}

@keyframes loadingSparkA {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    50% { transform: translate(6px, -8px) scale(1.25); opacity: 0.35; }
}

@keyframes loadingSparkB {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
    50% { transform: translate(-6px, 8px) scale(1.2); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    #page-loading .loading-orb-core,
    #page-loading .loading-orb-glow,
    #page-loading .loading-orb-spark,
    #page-loading .loading-progress-bar {
        animation: none;
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Page mode toggle */
#details-page-view {
    display: none;
}

#details-page-view.active {
    display: block;
    animation: fadeIn 0.25s ease-in-out;
}

/* Mobile drawer primitives (desktop: hidden) */
.mobile-panel-backdrop,
.mobile-edge-tab {
    display: none;
}

/* ==========================================================================
   26. Tablet & small desktop (<=1024px): single column + bottom sheet filters
   ========================================================================== */
@media (max-width: 1024px) {
    .app-container {
        padding: 0.9rem 0.9rem 1.6rem;
    }

    .app-main,
    .monster-layout,
    .collect-layout,
    .union-layout,
    .adventure-layout,
    .quiz-layout,
    .map-layout {
        grid-template-columns: minmax(0, 1fr);
        position: relative;
    }

    .map-directory-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .leveling-recommendation-workspace {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    .leveling-detail-panel {
        grid-column: 1 / -1;
        padding: 1rem 0 0;
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }

    .map-directory-tree {
        max-height: 40vh;
    }

    .map-scene-detail {
        min-height: 12rem;
        padding: 1rem 0 0;
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }

    /* Reset desktop monster left/right placement on single-column */
    .monster-layout > .module-search-bar,
    .monster-layout > .monster-search-card,
    .monster-layout > .monster-detail-card,
    .monster-layout > .monster-results-card,
    .monster-layout > .mobile-panel-backdrop {
        grid-column: 1;
        grid-row: auto;
    }

/* Search bar: sticky while scrolling (same for alchemy / monster / others) */
    .module-search-bar {
        position: sticky;
        top: 0;
        z-index: 95;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.55rem;
        margin-bottom: 0.55rem;
        padding: 0.4rem 0;
        background: var(--bg-page);
        isolation: isolate;
    }

    .module-search-bar .search-box-container {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        margin-bottom: 0 !important;
        position: relative;
    }

    .module-search-bar .mobile-edge-tab {
        flex: 0 0 auto;
        flex-shrink: 0;
        margin: 0;
        align-self: center;
        white-space: nowrap;
    }

    /* Monster: force same search/filter split as alchemy (avoid sticky collapse glue) */
    .monster-layout > .module-search-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0.55rem;
        width: 100%;
        box-sizing: border-box;
    }

    .monster-layout > .module-search-bar > .search-box-container {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none;
        margin: 0 !important;
        margin-bottom: 0 !important;
    }

    .monster-layout > .module-search-bar > .mobile-edge-tab {
        flex: 0 0 auto !important;
        width: auto;
        margin: 0 0 0 0.15rem !important;
    }

    /* Filter panels become bottom sheets */
    .app-main > .panel-left,
    .monster-layout > .monster-search-card,
    .union-layout > .union-search-card,
    .adventure-layout > .adventure-search-card,
    .quiz-layout > .quiz-search-card {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 78dvh;
        overflow-y: auto;
        z-index: 130;
        margin: 0;
        padding: 1.4rem 1rem 1.6rem;
        background: var(--bg-card);
        border: none;
        border-top: 1px solid var(--border-color);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
        transform: translateY(105%);
        transition: transform 0.25s ease;
        overscroll-behavior: contain;
        gap: 0.9rem;
    }

    /* Sheet grabber handle */
    .app-main > .panel-left::before,
    .monster-layout > .monster-search-card::before,
    .union-layout > .union-search-card::before,
    .adventure-layout > .adventure-search-card::before,
    .quiz-layout > .quiz-search-card::before,
    .shop-layout > .shop-search-card::before {
        content: "";
        position: sticky;
        top: 0;
        display: block;
        width: 40px;
        height: 4px;
        margin: -0.5rem auto 0.6rem;
        border-radius: 2px;
        background: var(--border-color-hover);
    }

    .app-main.filter-open > .panel-left,
    .monster-layout.filter-open > .monster-search-card,
    .union-layout.filter-open > .union-search-card,
    .adventure-layout.filter-open > .adventure-search-card,
    .quiz-layout.filter-open > .quiz-search-card,
    .shop-layout.filter-open > .shop-search-card {
        transform: translateY(0);
    }

    /* Backdrop */
    .mobile-panel-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 120;
        background: var(--backdrop-bg);
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .app-main.filter-open > .mobile-panel-backdrop,
    .monster-layout.filter-open > .mobile-panel-backdrop,
    .union-layout.filter-open > .mobile-panel-backdrop,
    .adventure-layout.filter-open > .mobile-panel-backdrop,
    .quiz-layout.filter-open > .mobile-panel-backdrop,
    .shop-layout.filter-open > .mobile-panel-backdrop {
        display: block;
        animation: fadeIn 0.2s ease;
    }

    /* Filter trigger button sits inline in the search bar */
    .mobile-edge-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        flex: 0 0 auto;
        height: 2.6rem;
        padding: 0 0.95rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-ctrl);
        background: var(--bg-card);
        color: var(--primary-color);
        font-size: 0.86rem;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: var(--transition-quick);
    }

    .mobile-edge-tab:hover {
        border-color: var(--primary-color);
    }

    .app-main.filter-open > .module-search-bar .mobile-edge-tab,
    .monster-layout.filter-open > .module-search-bar .mobile-edge-tab,
    .union-layout.filter-open > .module-search-bar .mobile-edge-tab,
    .adventure-layout.filter-open > .module-search-bar .mobile-edge-tab,
    .quiz-layout.filter-open > .module-search-bar .mobile-edge-tab,
    .shop-layout.filter-open > .module-search-bar .mobile-edge-tab {
        background: var(--primary-soft);
        border-color: var(--primary-color);
    }

    .app-main > .panel-right {
        width: 100%;
        min-width: 0;
    }

    .summary-content {
        grid-template-columns: 1fr;
    }

    .summary-cost-box {
        flex-direction: row;
        justify-content: space-between;
    }

    .cost-item {
        flex: 1;
    }

    .setting-group select {
        width: 100%;
    }

    .tree-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tree-node {
        min-width: 340px;
    }

    /* Monster detail as bottom sheet on tablet/phone */
    #monster-detail-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 140;
        background: var(--backdrop-bg);
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .monster-layout.detail-open > #monster-detail-backdrop {
        display: block;
    }

    .monster-layout > .monster-detail-card {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 82dvh;
        overflow-y: auto;
        z-index: 150;
        margin: 0;
        padding: 1rem 1rem 1.4rem;
        border: none;
        border-top: 1px solid var(--border-color);
        border-radius: 14px 14px 0 0;
        background: var(--bg-card);
        box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
        transform: translateY(105%);
        transition: transform 0.25s ease;
        overscroll-behavior: contain;
    }

    .monster-layout.detail-open > .monster-detail-card:not(.hidden) {
        transform: translateY(0);
    }

    .monster-detail-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   27. Phones (<=768px): dedicated mobile layout
   ========================================================================== */
@media (max-width: 768px) {
    body {
        font-size: 0.9rem;
    }

    .map-view-toggle {
        width: 100%;
    }

    .map-directory-tree {
        max-height: 48vh;
    }

    .leveling-recommendation-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .leveling-level-tabs {
        display: flex;
        gap: 0.35rem;
        max-height: none;
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }

    .leveling-level-tab {
        flex: 0 0 auto;
        min-width: 5.3rem;
        text-align: center;
    }

    .leveling-results-list {
        max-height: none;
    }

    .leveling-monster-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-container {
        padding: 0.7rem 0.7rem 1.4rem;
        gap: 0.75rem;
    }

    .app-header {
        gap: 0.4rem;
    }

    .app-header-row {
        flex-wrap: nowrap;
        gap: 0.45rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .app-header-row::-webkit-scrollbar {
        display: none;
    }

    .app-header h1 {
        font-size: 0.95rem;
    }

    .app-header h1 span {
        display: none;
    }

    .header-logo {
        flex: 0 0 auto;
    }

    .header-tools {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 0.3rem;
    }

    .header-tools .history-toggle-btn,
    .header-tools .guide-link-btn,
    .theme-toggle-btn {
        min-height: 2rem;
        padding: 0.22rem 0.5rem;
        font-size: 0.74rem;
        white-space: nowrap;
    }

    .header-tools .theme-toggle-text {
        display: none;
    }

    .history-content-card {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 78dvh;
        border-radius: 14px 14px 0 0;
        border: none;
        border-top: 1px solid var(--border-color);
    }

    /* Module tabs: sticky horizontal chip bar */
    .module-switch {
        position: sticky;
        top: 0;
        z-index: 100;
        gap: 0.3rem;
        padding: 0.3rem 0.05rem;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-page);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .module-switch::-webkit-scrollbar {
        display: none;
    }

    .module-tab {
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: var(--bg-card);
        padding: 0.28rem 0.72rem;
        min-height: 2rem;
        font-size: 0.8rem;
        flex: 0 0 auto;
    }

    /* Search bar under sticky tabs — same offset for every module (alchemy = monster) */
    .module-search-bar,
    #alchemy-module > .module-search-bar,
    .monster-layout > .module-search-bar,
    .union-layout > .module-search-bar,
    .adventure-layout > .module-search-bar,
    .ark-layout > .module-search-bar,
    .skill-layout > .module-search-bar {
        top: 2.5rem;
        z-index: 95;
        padding: 0.35rem 0;
        margin-bottom: 0.5rem;
        background: var(--bg-page);
        box-shadow: 0 1px 0 var(--border-color);
        flex-wrap: nowrap;
        gap: 0.55rem;
    }

    .module-search-bar .search-box-container {
        margin-bottom: 0 !important;
        min-width: 0;
    }

    .module-search-bar .search-box-container input {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .module-search-bar .mobile-edge-tab {
        height: 2.4rem;
        padding: 0 0.7rem;
        font-size: 0.8rem;
        margin: 0;
    }

    /* Monster filter button: shorter label space + clear gap from input */
    #monster-filter-tab {
        flex: 0 0 auto;
        margin-left: 0.1rem;
    }

    .module-tab.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--button-hover-text);
    }

    .card {
        padding: 0.85rem 0.9rem;
    }

    .card h2 {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }

    /* Dense single-row tables (alchemy + monster style): keep table, scroll X if needed */
    .equipment-results-table-wrap:not(.monster-drops-wrap):not(.map-coordinate-wrap):not(.drop-sources-wrap) {
        max-height: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-ctrl);
    }

    .equipment-results-table:not(.map-coordinate-table):not(.monster-drops-table):not(.monster-results-table):not(.craft-materials-table) {
        display: table !important;
        width: 100%;
        min-width: 560px;
        font-size: 0.78rem;
        table-layout: auto;
    }

    .equipment-results-table:not(.map-coordinate-table):not(.monster-drops-table):not(.monster-results-table):not(.craft-materials-table) thead {
        display: table-header-group !important;
    }

    .equipment-results-table:not(.map-coordinate-table):not(.monster-drops-table):not(.monster-results-table):not(.craft-materials-table) tbody {
        display: table-row-group !important;
    }

    .equipment-results-table:not(.map-coordinate-table):not(.monster-drops-table):not(.monster-results-table):not(.craft-materials-table) tbody tr {
        display: table-row !important;
        min-height: 0;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent !important;
    }

    .equipment-results-table:not(.map-coordinate-table):not(.monster-drops-table):not(.monster-results-table):not(.craft-materials-table) tbody tr:nth-child(even) {
        background: var(--table-stripe) !important;
    }

    .equipment-results-table:not(.map-coordinate-table):not(.monster-drops-table):not(.monster-results-table):not(.craft-materials-table) tbody tr:active {
        background: var(--primary-soft) !important;
    }

    .equipment-results-table:not(.map-coordinate-table):not(.monster-drops-table):not(.monster-results-table):not(.craft-materials-table) th,
    .equipment-results-table:not(.map-coordinate-table):not(.monster-drops-table):not(.monster-results-table):not(.craft-materials-table) td {
        display: table-cell !important;
        width: auto !important;
        padding: 0.28rem 0.4rem !important;
        border-bottom: 1px solid var(--table-border);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        text-align: left;
        max-width: none;
        color: inherit;
        font-size: inherit;
    }

    .equipment-results-table:not(.map-coordinate-table):not(.monster-drops-table):not(.monster-results-table):not(.craft-materials-table) td::before {
        content: none !important;
    }

    /* Monster dense table (own rules so column hide is not overridden) */
    #monster-module .monster-results-table {
        display: table !important;
        width: 100%;
        min-width: 420px;
        font-size: 0.78rem;
        table-layout: auto;
    }

    #monster-module .monster-results-table thead {
        display: table-header-group !important;
    }

    #monster-module .monster-results-table tbody {
        display: table-row-group !important;
    }

    #monster-module .monster-results-table tbody tr {
        display: table-row !important;
        background: transparent !important;
    }

    #monster-module .monster-results-table tbody tr:nth-child(even) {
        background: var(--table-stripe) !important;
    }

    #monster-module .monster-results-table th,
    #monster-module .monster-results-table td {
        display: table-cell;
        padding: 0.28rem 0.32rem !important;
        border-bottom: 1px solid var(--table-border);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        font-size: 0.78rem;
    }

    #monster-module .monster-results-table th:nth-child(5),
    #monster-module .monster-results-table td:nth-child(5),
    #monster-module .monster-results-table td[data-label="属性"] {
        width: 1.6rem !important;
        max-width: 1.8rem;
        padding-left: 0.12rem !important;
        padding-right: 0.12rem !important;
        text-align: center;
    }

    #monster-module .monster-results-table th:nth-child(6),
    #monster-module .monster-results-table td:nth-child(6),
    #monster-module .monster-results-table td[data-label="捕捉"] {
        width: 4.2rem !important;
        text-align: center;
    }

    #monster-module .monster-results-table th:nth-child(7),
    #monster-module .monster-results-table td:nth-child(7),
    #monster-module .monster-results-table td[data-label="HP"] {
        width: 3.6rem !important;
        padding-left: 0.2rem !important;
        text-align: right;
    }

    #monster-module .monster-results-wrap {
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0.15rem;
    }

    #monster-module .monster-results-card {
        padding-bottom: 1.2rem;
    }

    #monster-module .monster-load-more-btn {
        position: relative;
        z-index: 2;
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
        min-height: 2.8rem;
    }

    #monster-module .monster-results-table td::before {
        content: none !important;
    }

    /* Alchemy: hide ID, keep name/eq/category/stats/material */
    #alchemy-module .equipment-results-table th:nth-child(1),
    #alchemy-module .equipment-results-table td[data-label="ID"] {
        display: none !important;
    }

    #alchemy-module .equipment-results-table {
        min-width: 520px;
    }

    #alchemy-module .equipment-results-table td[data-label="名称"] {
        font-weight: 600;
        color: var(--text-main);
        max-width: 11rem;
    }

    #alchemy-module .equipment-results-table td[data-label="物等"] {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        text-align: right;
    }

    #alchemy-module .equipment-results-table td[data-label="数值"] {
        max-width: 9rem;
    }

    #alchemy-module .equipment-results-table td[data-label="属性"],
    #alchemy-module .equipment-results-table td.equipment-material-cell {
        max-width: 8rem;
    }

    .equipment-result-desc,
    .equipment-result-tags .avail-tag:not(.avail-dungeon):not(.avail-origin) {
        display: none;
    }

    .equipment-results-table td.equipment-results-more {
        text-align: center !important;
        padding: 0.55rem 0.4rem !important;
        white-space: normal !important;
    }

    /* Hide 分类 / ID / 掉落数 (keep 名称 等级 属性 捕捉 HP SPD 出现地) */
    #monster-module .monster-results-table th:nth-child(1),
    #monster-module .monster-results-table th:nth-child(2),
    #monster-module .monster-results-table th:nth-child(9),
    #monster-module .monster-results-table td:nth-child(1),
    #monster-module .monster-results-table td:nth-child(2),
    #monster-module .monster-results-table td:nth-child(9),
    #monster-module .monster-results-table td[data-label="记录"],
    #monster-module .monster-results-table td[data-label="ID"],
    #monster-module .monster-results-table td[data-label="掉落数"] {
        display: none !important;
    }

    #monster-module .monster-results-table .monster-dungeon-group-row th,
    #monster-module .monster-results-table .monster-title-group-row th,
    #monster-module .monster-results-table .monster-level-group-row th {
        display: table-cell !important;
        padding: 0 !important;
        white-space: normal;
        overflow: visible;
    }

    #monster-module .monster-results-table td[data-label="名称"] {
        font-weight: 600;
        color: var(--text-main);
        max-width: 9rem;
    }

    #monster-module .monster-results-table td[data-label="等级"],
    #monster-module .monster-results-table td[data-label="HP"],
    #monster-module .monster-results-table td[data-label="SPD"] {
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    #monster-module .monster-results-table .monster-loc-cell,
    #monster-module .monster-results-table td[data-label="出现地"] {
        max-width: 8rem;
    }

    #monster-module .monster-drop-hit {
        display: none;
    }

    .drop-sources-wrap,
    .monster-drops-wrap,
    .map-coordinate-wrap {
        max-height: 45vh;
        overflow: auto;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-ctrl);
    }

    /* Touch targets */
    .union-toggle-btn,
    .collect-view-btn,
    .btn-small,
    .btn,
    .recipe-back-btn,
    .recipe-clear-btn {
        min-height: 2.5rem;
    }

    .checkbox-container {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .checkmark {
        top: 5px;
    }

    .material-chip {
        min-height: 2.1rem;
        padding: 0.25rem 0.7rem;
    }

    select {
        min-height: 2.5rem;
    }

    /* Tree */
    .tree-container {
        max-height: 55vh;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.6rem;
    }

    .tree-node {
        min-width: 340px;
    }

    .tree-node-content {
        white-space: normal;
    }

    /* Breadcrumbs & headers stacking */
    .recipes-card-header,
    .recipe-card-header,
    .card-header-with-action {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .path-actions {
        display: flex;
        gap: 0.5rem;
    }

    .path-actions button {
        flex: 1;
        text-align: center;
    }

    .sort-selector,
    .path-actions {
        width: 100%;
        justify-content: space-between;
    }

    .summary-content {
        flex-direction: column;
        display: flex;
        gap: 0.9rem;
    }

    .summary-cost-box {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

    .cost-item {
        flex: 1;
    }

    .monster-filter-grid {
        grid-template-columns: 1fr;
    }

    .monster-stat-grid,
    .monster-tech-grid {
        grid-template-columns: 1fr 1fr;
    }

    .collect-spot-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .collect-spot-tag {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .app-footer {
        font-size: 0.74rem;
    }
}

/* ==========================================================================
   28. Very small phones (<=420px)
   ========================================================================== */
@media (max-width: 420px) {
    .monster-stat-grid,
    .monster-tech-grid {
        grid-template-columns: 1fr;
    }

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

    #ark-planet-toggle {
        grid-template-columns: 1fr 1fr;
    }

    .adventure-grade-toggle-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.item-name-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  vertical-align: middle;
}

.item-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  image-rendering: auto;
  background: var(--bg-inset);
  border-radius: 3px;
}

.item-icon.item-icon--missing {
  background: var(--bg-inset);
  box-shadow: inset 0 0 0 1px var(--border);
}

.item-name-text {
  min-width: 0;
}

.equipment-result-name .item-name-with-icon {
  pointer-events: none; /* click still on button */
}

/* ==========================================================================
   爬等阶梯（配方图）样式 — climb_ladders / climb_graph
   ========================================================================== */
.climb-route-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border, #ddd);
}
.climb-route-btn {
  border: 1px solid var(--border, #ccc);
  border-radius: 6px;
  background: transparent;
  color: var(--text, #333);
  padding: 3px 10px;
  font-size: 0.85em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.climb-route-btn:hover { border-color: var(--accent, #4a90d9); }
.climb-route-btn.active {
  background: rgba(74, 144, 217, 0.12);
  border-color: var(--accent, #4a90d9);
  color: var(--accent, #2c6cb0);
  font-weight: 600;
}
.route-badge {
  font-size: 0.78em;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 0 6px;
}
html[data-theme="dark"] .route-badge { background: rgba(255, 255, 255, 0.1); }
.climb-hint {
  font-size: 0.75em;
  color: #888;
  margin: -2px 0 8px 2px;
}
.climb-branch .tree-node-content { border-left: 2px solid rgba(74, 144, 217, 0.25); }
.climb-leaf .tree-node-content { border-left: 2px solid transparent; }

/* 可信度徽章 */
.cred-badge {
  font-size: 0.72em;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.cred-tested { background: rgba(5, 150, 105, 0.12); color: #059669; }
.cred-untested { background: rgba(100, 116, 139, 0.15); color: #64748b; }
.cred-reference { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.cred-avoid { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.cred-intermediate { background: rgba(147, 51, 234, 0.12); color: #9333ea; }
html[data-theme="dark"] .cred-tested { color: #34d399; }
html[data-theme="dark"] .cred-untested { color: #94a3b8; }
html[data-theme="dark"] .cred-reference { color: #60a5fa; }
html[data-theme="dark"] .cred-avoid { color: #f87171; }
html[data-theme="dark"] .cred-intermediate { color: #c084fc; }

/* 成功率 / 价格标签 */
.climb-rate-label { color: #a3be8c; font-size: 0.85em; }
.climb-price-label { color: #d4a017; font-size: 0.85em; }

/* 证据行 */
.ladder-evidence {
  font-size: 0.75em;
  color: #888;
  margin-top: 2px;
}

/* 无属徽章 */
.any-slot-badge {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 600;
  border-radius: 4px;
  padding: 1px 8px;
  background: rgba(74, 144, 217, 0.12);
  color: #2c6cb0;
  border: 1px dashed rgba(74, 144, 217, 0.5);
  vertical-align: middle;
}
.any-slot-badge.exchange-badge {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
  border-color: rgba(147, 51, 234, 0.4);
}
html[data-theme="dark"] .any-slot-badge { color: #7cb3e8; }
html[data-theme="dark"] .any-slot-badge.exchange-badge { color: #c084fc; }

/* 等价路线分隔 */
.climb-or-label {
  list-style: none;
  font-size: 0.78em;
  color: #888;
  padding: 2px 0 2px 18px;
}
.climb-or-label::before { content: "╱ "; }

/* 查询器风格: 目标行 / 区间档位 / 初炼小字 / 叶子获取 */
.climb-target-node { list-style: none; }
.climb-target-name { font-weight: 700; font-size: 1.05em; }
.climb-range-label { color: #888; font-size: 0.82em; }
.climb-minor { color: #9333ea; font-size: 0.82em; }
.climb-leaf-acquire { color: #666; }
.climb-leaf-acquire .shop-label, .climb-leaf-acquire .craft-label, .climb-leaf-acquire .drop-label { font-weight: 600; }
html[data-theme="dark"] .climb-range-label { color: #94a3b8; }
html[data-theme="dark"] .climb-minor { color: #c084fc; }
html[data-theme="dark"] .climb-leaf-acquire { color: #9ca3af; }

/* Interactive world map */
.world-map-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--card-bg);
}

.world-map-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    padding: 0.7rem;
    background: #171b1f;
}

.world-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    padding-bottom: 0.6rem;
}

.world-map-zoom-controls {
    display: grid;
    grid-template-columns: 2.25rem 4.5rem 2.25rem;
    align-items: center;
    overflow: hidden;
    border: 1px solid #4b5359;
    border-radius: var(--radius-ctrl);
    background: #252b30;
}

.world-map-zoom-controls button,
.world-map-reset {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    color: #f1f3f5;
    background: transparent;
    font: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

.world-map-zoom-controls button:hover,
.world-map-reset:hover {
    background: #3a4248;
}

.world-map-zoom-controls button:focus-visible,
.world-map-reset:focus-visible,
.world-map-marker:focus-visible,
.world-map-probe:focus-visible {
    outline: 2px solid #f6a840;
    outline-offset: 2px;
}

.world-map-zoom-controls button:disabled {
    color: #737b82;
    cursor: default;
    background: transparent;
}

.world-map-zoom-controls output {
    display: grid;
    place-items: center;
    height: 2.25rem;
    border-right: 1px solid #4b5359;
    border-left: 1px solid #4b5359;
    color: #f1f3f5;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.world-map-reset {
    border: 1px solid #4b5359;
    border-radius: var(--radius-ctrl);
    background: #252b30;
}

.world-map-viewport {
    position: relative;
    width: min(100%, 76vh);
    aspect-ratio: 2580 / 1890;
    min-width: 0;
    justify-self: center;
    overflow: hidden;
    border: 1px solid #4b5359;
    background: #0f586d;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.world-map-viewport.dragging {
    cursor: grabbing;
}

.world-map-viewport:focus-visible {
    outline: 2px solid #f6a840;
    outline-offset: -2px;
}

.world-map-scene,
.world-map-markers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.world-map-scene {
    transform-origin: 0 0;
}

#world-map-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease-out;
}

.world-map-image-ready #world-map-image {
    opacity: 1;
}

.world-map-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f1f3f5;
    background: #0f586d;
    font-size: 0.86rem;
    pointer-events: none;
}

.world-map-image-ready .world-map-loading,
.world-map-image-error .world-map-loading {
    display: none;
}

.world-map-marker,
.world-map-probe {
    --world-marker-scale: 1;
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    transform: translate(-50%, -50%) scale(var(--world-marker-scale));
    transform-origin: center;
    background: transparent;
    cursor: pointer;
}

.world-map-marker[hidden],
.world-map-probe[hidden] {
    display: none;
}

.world-map-marker-icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid #472108;
    border-radius: 50%;
    color: #321807;
    background: #f28b2f;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    line-height: 1;
}

.world-map-marker.event .world-map-marker-icon {
    border-color: #174b49;
    color: #0c3635;
    background: #51c9bb;
}

.world-map-marker.discovery .world-map-marker-icon {
    border-color: #573b72;
    color: #3d2752;
    background: #d0a8e6;
}

.world-map-marker.selected .world-map-marker-icon {
    outline: 3px solid #fff4bd;
    outline-offset: 2px;
}

.world-map-marker-label {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.2rem);
    display: none;
    max-width: 10rem;
    padding: 0.18rem 0.42rem;
    transform: translateY(-50%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 4px;
    color: #fff5a7;
    background: rgba(19, 70, 84, 0.94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    font-size: 0.72rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.show-world-map-labels .world-map-marker-label,
.world-map-marker.selected .world-map-marker-label {
    display: block;
}

.world-map-probe {
    z-index: 3;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    background: #d84c3f;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    font-size: 1rem;
    line-height: 1;
}

.world-map-sidebar {
    display: grid;
    grid-template-rows: auto auto auto minmax(12rem, 1fr);
    min-width: 0;
    max-height: calc(76vh + 3.35rem);
    border-left: 1px solid var(--border-color);
    background: var(--card-bg);
}

.world-map-detail {
    display: grid;
    gap: 0.8rem;
    min-height: 10.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.world-map-detail-heading {
    min-width: 0;
}

.world-map-kind {
    display: inline-block;
    margin-bottom: 0.28rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.world-map-kind.fixed {
    color: #c76813;
}

.world-map-kind.event {
    color: #168b80;
}

.world-map-kind.discovery {
    color: #8a54a2;
}

.world-map-kind.probe {
    color: #c53f34;
}

.world-map-detail h3 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: 1.05rem;
    line-height: 1.3;
}

.world-map-coordinate-readout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.world-map-coordinate-readout > div {
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    background: var(--control-bg);
}

.world-map-coordinate-readout span {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.world-map-coordinate-readout strong {
    display: block;
    margin-top: 0.1rem;
    overflow: hidden;
    color: var(--text-main);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
}

.world-map-detail-meta {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.world-map-copy {
    justify-self: start;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border-color-hover);
    border-radius: var(--radius-ctrl);
    color: var(--text-main);
    background: var(--control-bg);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.world-map-copy:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.world-map-layers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0.8rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--border-color);
}

.world-map-layers legend {
    grid-column: 1 / -1;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.world-map-layers label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    color: var(--text-main);
    font-size: 0.76rem;
    white-space: nowrap;
}

.world-map-layers input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--primary-color);
}

.world-map-layer-icon,
.world-map-list-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: #c76813;
}

.world-map-layer-icon.event,
.world-map-list-icon.event {
    color: #168b80;
}

.world-map-layer-icon.discovery,
.world-map-list-icon.discovery {
    color: #8a54a2;
}

#world-map-search {
    width: auto;
    min-width: 0;
    min-height: 2.4rem;
    margin: 0.75rem 1rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    color: var(--text-main);
    background: var(--control-bg);
    font: inherit;
    font-size: 0.78rem;
}

#world-map-search:focus {
    border-color: var(--primary-color);
    outline: 2px solid var(--primary-glow);
}

.world-map-location-list {
    min-height: 0;
    overflow: auto;
    border-top: 1px solid var(--border-color);
}

.world-map-location-row {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 2.7rem;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--subtle-divider);
    color: var(--text-main);
    background: transparent;
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
}

.world-map-location-row:hover,
.world-map-location-row.selected {
    background: var(--control-bg-hover);
}

.world-map-location-row.selected {
    box-shadow: 3px 0 0 var(--primary-color) inset;
}

.world-map-location-row:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.world-map-list-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.world-map-list-coordinate {
    margin-left: 0.55rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.world-map-list-empty {
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 1024px) {
    .world-map-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .world-map-sidebar {
        grid-template-rows: auto auto auto minmax(10rem, 20rem);
        max-height: none;
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }
}

@media (max-width: 768px) {
    .world-map-main {
        padding: 0.45rem;
    }

    .world-map-toolbar {
        min-height: 2.5rem;
        padding-bottom: 0.45rem;
    }

    .world-map-viewport {
        width: 100%;
    }

    .world-map-detail {
        min-height: 0;
        padding: 0.8rem;
    }

    .world-map-layers {
        padding: 0.7rem 0.8rem;
    }

    #world-map-search {
        margin: 0.65rem 0.8rem;
    }

    .world-map-location-row {
        padding-right: 0.6rem;
        padding-left: 0.6rem;
    }
}

.module-load-status {
    display: none;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.8rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-inset);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.module-load-status[hidden] {
    display: none !important;
}

.module-load-status.is-visible {
    display: flex;
}

.module-load-status.is-error {
    border-color: rgba(220, 80, 80, 0.6);
    color: var(--danger, #b43b3b);
}

.module-load-skeleton {
    width: 2.2rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
    animation: module-load-pulse 1.1s ease-in-out infinite;
}

.module-load-message {
    min-width: 0;
}

.module-load-retry {
    margin-left: auto;
    padding: 0.25rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.module-is-loading {
    min-height: 8rem;
}

@keyframes module-load-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.65; }
}
+/* Inline candidates for universal junk recipe nodes */
.junk-exclusion-badge {
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    background: rgba(180, 83, 9, 0.1);
    color: var(--accent-gold);
    font-size: 0.74rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.junk-candidate-toggle {
    min-height: 1.75rem;
    padding: 0.16rem 0.48rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--primary-soft);
    color: var(--primary-color);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}

.junk-candidate-toggle:hover,
.junk-candidate-toggle:focus-visible {
    border-color: var(--primary-color);
    background: var(--control-bg-hover);
}

.junk-candidate-panel {
    box-sizing: border-box;
    width: min(58rem, calc(100vw - 8rem));
    max-width: 100%;
    max-height: 20rem;
    margin: -0.1rem 0 0.65rem;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--control-bg);
}

.junk-candidate-panel[hidden] {
    display: none;
}

.junk-candidate-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.52rem 0.7rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--control-bg);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
}

.junk-candidate-list {
    display: grid;
}

.junk-candidate-row {
    display: grid;
    grid-template-columns: minmax(9rem, 1.35fr) minmax(5.5rem, 0.7fr) minmax(8rem, 1fr) minmax(12rem, 1.8fr);
    gap: 0.7rem;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.38rem 0.7rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.76rem;
}

.junk-candidate-row:last-child {
    border-bottom: 0;
}

.junk-candidate-name {
    color: var(--primary-color);
}

.junk-candidate-type,
.junk-candidate-source {
    color: var(--text-muted);
}

.junk-candidate-attrs {
    color: var(--text-main);
}

.junk-candidate-name,
.junk-candidate-type,
.junk-candidate-attrs,
.junk-candidate-source {
    min-width: 0;
    overflow-wrap: anywhere;
}

.junk-candidate-empty {
    padding: 1rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 720px) {
    .junk-candidate-panel {
        width: calc(100vw - 4.25rem);
        max-height: 17rem;
    }

    .junk-candidate-row {
        grid-template-columns: minmax(0, 1.4fr) minmax(5rem, 0.8fr);
        gap: 0.25rem 0.65rem;
        padding-top: 0.52rem;
        padding-bottom: 0.52rem;
    }

    .junk-candidate-attrs,
    .junk-candidate-source {
        grid-column: 1 / -1;
    }
}

/* --- Modern Refined Micro-Capsules (Option 1 - Strictly Scoped to Recipe Tree Only) --- */
.tree-container .tree-node-content,
.tree-node .tree-node-content {
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.35rem;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    cursor: pointer;
    transition: var(--transition-quick);
    font-size: 0.85rem;
    max-width: 100%;
}

.tree-container .tree-node-content:hover,
.tree-node .tree-node-content:hover {
    background: var(--control-bg-hover);
    border-color: var(--border-color-hover);
}

.tree-node .node-name {
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
}

.tree-node .node-alternatives {
    font-size: 0.76rem;
    color: var(--text-main);
    font-weight: 400;
    margin-left: 0.3rem;
}

.tree-node .node-meta-badge {
    font-size: 0.72rem;
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-main);
    border: none;
    border-radius: 9999px;
    padding: 0.1rem 0.55rem;
    font-weight: 550;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.tree-node .node-level,
.tree-node .node-material {
    font-size: 0.72rem;
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-main);
    border: none;
    border-radius: 9999px;
    padding: 0.1rem 0.55rem;
    font-weight: 550;
    white-space: nowrap;
}

.tree-node .node-req-level {
    font-size: 0.7rem;
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-main);
    border: none;
    border-radius: 9999px;
    padding: 0.08rem 0.45rem;
    font-weight: 550;
    white-space: nowrap;
}

.tree-node .node-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-main);
}

.tree-node .node-action span.book-label {
    font-size: 0.72rem;
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 9999px;
    padding: 0.08rem 0.55rem;
    font-weight: 600;
    white-space: nowrap;
}

[data-theme="dark"] .tree-node .node-action span.book-label {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.32);
}

.tree-node .node-action span.craft-label {
    font-size: 0.72rem;
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-main);
    border: none;
    border-radius: 9999px;
    padding: 0.08rem 0.55rem;
    font-weight: 550;
    white-space: nowrap;
}

.tree-node .node-action span.shop-label,
.tree-node .node-action span.mine-label,
.tree-node .node-action span.drop-label {
    font-size: 0.72rem;
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-main);
    border: none;
    border-radius: 9999px;
    padding: 0.08rem 0.55rem;
    font-weight: 550;
    white-space: nowrap;
}

.tree-node .tree-outcome-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.tree-node .rate-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.tree-node .rate-pill.rate-high {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

[data-theme="dark"] .tree-node .rate-pill.rate-high {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.tree-node .rate-pill.rate-mid {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.24);
}

[data-theme="dark"] .tree-node .rate-pill.rate-mid {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.32);
}

.tree-node .rate-pill.rate-low {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.24);
}

[data-theme="dark"] .tree-node .rate-pill.rate-low {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.32);
}

.tree-node .rate-side-text {
    color: var(--text-main);
    font-size: 0.74rem;
    font-weight: 500;
}

.tree-node .node-base-toggle-btn,
.tree-node .alchemy-note-save-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.08rem 0.5rem;
    opacity: 0.9;
    transition: var(--transition-quick);
}

.tree-node .node-base-toggle-btn:hover,
.tree-node .alchemy-note-save-step:hover {
    opacity: 1;
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: var(--control-bg-hover);
}

/* --------------------------------------------------------------------------
   Equipment & Fashion Sets Styling
   -------------------------------------------------------------------------- */
.set-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: var(--primary-color, #4f46e5);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-quick);
}

.set-link-badge:hover {
    background: rgba(99, 102, 241, 0.16);
    border-color: var(--primary-color, #4f46e5);
    transform: translateY(-1px);
}

.equipment-set-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-quick);
}

.equipment-set-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-color);
}

.equipment-set-header h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-main);
}

.set-category-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .set-category-badge {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.set-effect-box {
    background: rgba(99, 102, 241, 0.04);
    border: 1px dashed rgba(99, 102, 241, 0.28);
    border-radius: var(--radius-ctrl);
    padding: 0.75rem 0.95rem;
}

[data-theme="dark"] .set-effect-box {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.35);
}

.set-effect-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color, #4f46e5);
    margin-bottom: 0.35rem;
}

.set-effect-content {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-main);
}

.set-total-stats-box {
    margin-top: 0.6rem;
    padding: 0.45rem 0.65rem;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    font-size: 0.82rem;
    line-height: 1.4;
}

[data-theme="dark"] .set-total-stats-box {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.3);
}

.set-total-stats-label {
    font-weight: 700;
    color: #059669;
}

[data-theme="dark"] .set-total-stats-label {
    color: #34d399;
}

.set-stages-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.35rem;
    padding: 0.2rem 0;
}

.set-stage-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    line-height: 1.3;
}

.set-stage-tag {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fa541c;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .set-stage-tag {
    color: #ff7a45;
}

.set-stage-text {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-main);
    opacity: 0.9;
}

.set-parts-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.set-parts-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.set-parts-hint {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-muted);
}

.set-parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.5rem;
}

.set-part-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-ctrl);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-quick);
}

.set-part-btn:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.set-part-btn.is-active {
    background: rgba(99, 102, 241, 0.08);
    border-color: var(--primary-color, #4f46e5);
    box-shadow: 0 0 0 1px var(--primary-color, #4f46e5);
}

.set-part-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.set-part-slot {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.05);
    padding: 0.08rem 0.3rem;
    border-radius: 3px;
}

[data-theme="dark"] .set-part-slot {
    background: rgba(255, 255, 255, 0.08);
}

.set-part-level {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.set-part-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.set-part-stats {
    font-size: 0.72rem;
    color: var(--primary-color, #4f46e5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}