.home-shell,

.license-shell,

.convert-shell,

.app-container {

    position: relative;

    z-index: 1;

}



.wuxia-home .home-shell {

    width: min(1120px, calc(100% - 2rem));

    padding-top: 0;

}



.wuxia-home .home-header {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    isolation: isolate;

    margin-bottom: 0.75rem;

    padding: 1rem 1rem 0.75rem;

}



.wuxia-home .home-panel {

    border-radius: 6px;

}



.wuxia-home .panel-heading h2::after {

    content: "";

    display: block;

    width: 2.2rem;

    height: 2px;

    margin-top: 0.45rem;

    background: var(--purple);

    opacity: 0.68;

}



.wuxia-home .status-badge {

    border-radius: 3px;

}



.wuxia-home .home-main-role {

    border: 1px solid var(--border);

    border-radius: 4px;

}



.wuxia-home .btn {

    min-height: 2.75rem;

    border-radius: 4px;

}



.wuxia-home .module-grid {

    gap: 0;

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

}



.wuxia-home .module-card {

    position: relative;

    border: 0;

    border-right: 1px solid var(--border);

    border-radius: 0;

    background: transparent;

}



.wuxia-home .module-card:last-child {

    border-right: 0;

}



.wuxia-home .module-card::after {

    content: "";

    position: absolute;

    inset: auto 1rem 0;

    height: 2px;

    background: var(--purple);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 180ms ease;

}



.wuxia-home .module-card:hover::after {

    transform: scaleX(1);

}



.wuxia-license .license-header {
    position: relative;
    display: flex;
    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.wuxia-simulator .app-container {
    max-width: 900px;

}



.wuxia-simulator .app-header {

    position: relative;

    padding: 3.2rem 1rem 2rem;

}



.wuxia-simulator .sim-nav {

    gap: 0.1rem;

    margin-top: 1rem;

}



.wuxia-simulator .sim-nav a {

    position: relative;

    padding: 0.32rem 0.42rem;

}



.wuxia-simulator .btn,

.wuxia-simulator .btn-upgrade-zz,

.wuxia-simulator .talent-lock-btn,

.wuxia-simulator .talent-exchange-btn {

    min-height: 2.65rem;

    border-radius: 4px;

}



.wuxia-simulator .exchange-sequence-modal {

    width: min(940px, calc(100vw - 2rem));

    height: min(94vh, 980px);

    max-height: min(94vh, 980px);

    border-radius: 10px;

}



.wuxia-simulator .exchange-sequence-modal .modal-header,

.wuxia-simulator #purpleModal .modal-header {

    position: relative;

    min-height: 3.8rem;

    padding: 1rem 1.35rem 0.9rem 1.7rem;

}



.wuxia-simulator .exchange-sequence-modal .modal-header::before,

.wuxia-simulator #purpleModal .modal-header::before {

    content: "";

    position: absolute;

    left: 1.15rem;

    top: 1rem;

    bottom: 0.9rem;

    width: 3px;

    border-radius: 2px;

    background: var(--purple);

}



.wuxia-simulator .exchange-sequence-modal .modal-close-btn,

.wuxia-simulator #purpleModal .modal-close-btn {

    width: 2.25rem;

    height: 2.25rem;

    border: 1px solid transparent;

    border-radius: 50%;

    line-height: 1;

}



.wuxia-simulator .exchange-sequence-body {

    min-height: 0;

    gap: 1rem;

    padding: 1rem 1.25rem 1.15rem;

}



.wuxia-simulator .exchange-sequence-controls {

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 0.85rem 0.75rem;

    padding: 1rem;

}



.wuxia-simulator .exchange-sequence-controls label:nth-child(1),

.wuxia-simulator .exchange-sequence-controls label:nth-child(5) {

    grid-column: span 2;

}



.wuxia-simulator .exchange-sequence-controls label:nth-child(2) {

    grid-column: span 3;

}



.wuxia-simulator .exchange-sequence-controls label:nth-child(3),

.wuxia-simulator .exchange-sequence-controls label:nth-child(4) {

    grid-column: span 1;

}



.wuxia-simulator .exchange-sequence-controls > button {

    grid-column: span 4;

}



.wuxia-simulator .exchange-sequence-controls label {

    gap: 0.42rem;

}



.wuxia-simulator .exchange-sequence-controls select,

.wuxia-simulator .exchange-sequence-controls input,

.wuxia-simulator .exchange-sequence-controls .btn-wash-gold {

    min-height: 2.7rem;

    border-radius: 6px;

}



.wuxia-simulator .exchange-sequence-controls select,

.wuxia-simulator .exchange-sequence-controls input {

    padding-inline: 0.7rem;

}



.wuxia-simulator .exchange-sequence-mode {

    padding: 0.72rem 0.9rem;

    border-left-width: 3px;

    border-radius: 5px;

}



.wuxia-simulator .exchange-sequence-selection {

    gap: 0;

    flex-shrink: 0;

    overflow: hidden;

}



.wuxia-simulator .exchange-sequence-selection > div {

    min-height: 4.1rem;

    padding: 0.78rem 0.95rem;

    border: 0;

    border-right: 1px solid var(--border-color);

    border-radius: 0;

}



.wuxia-simulator .exchange-sequence-selection > div:last-child {

    border-right: 0;

}



.wuxia-simulator .exchange-sequence-status {

    position: relative;

    flex-shrink: 0;

    min-height: 1.35rem;

    padding-left: 0;

}



.wuxia-simulator .exchange-sequence-results {

    flex: 1 0 18rem;

    min-height: 18rem;

}



.wuxia-simulator .exchange-sequence-result-head {

    min-height: 3.1rem;

    padding: 0.75rem 0.95rem;

}



.wuxia-simulator .exchange-sequence-empty {

    padding: 3rem 1rem;

}



.wuxia-simulator .exchange-sequence-footer {

    padding: 0.8rem 1.25rem;

}



.wuxia-simulator #purpleModal .modal-split {

    width: min(1120px, calc(100vw - 2rem));

    border-radius: 10px;

}



.wuxia-simulator #purpleModal .modal-header {

    border-radius: 10px 10px 0 0;

}



.wuxia-simulator #purpleModal .purple-pane {

    gap: 0.85rem;

    padding: 0.85rem 1rem 1rem;

}



.wuxia-simulator #purpleModal .modal-toolbar {

    display: grid;

    grid-template-columns: minmax(180px, 1.25fr) auto;

    gap: 0.75rem 1rem;

    padding: 0.75rem 0.8rem;

}



.wuxia-simulator #purpleModal .search-box input {

    width: 100%;

    min-height: 2.45rem;

}



.wuxia-simulator #purpleModal .filter-box {

    align-items: center;

    gap: 0.85rem;

}



.wuxia-simulator #purpleModal .stats-summary {

    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    gap: 0.25rem;

    margin-left: 0;

    padding-top: 0.65rem;

}



.wuxia-simulator #purpleModal .stats-summary .btn {

    min-height: 2.2rem;

    margin-left: auto;

}



.wuxia-simulator #purpleModal .route-preview-setting {

    display: inline-flex;

    align-items: center;

    gap: 0.3rem;

    margin-left: 0.6rem;

    padding-left: 0.7rem;

}



.wuxia-simulator #purpleModal .route-preview-setting input {

    width: 3.4rem;

    min-height: 2rem;

    padding: 0.25rem 0.4rem;

}



.wuxia-simulator #purpleModal .btn-select-exchange {

    min-height: 2rem;

}



.wuxia-simulator #purpleModal .exchange-analysis-block .block-header {

    min-height: 2.75rem;

}



.wuxia-simulator #purpleModal .exchange-analysis-block .block-empty {

    display: grid;

    min-height: 12rem;

    place-items: center;

    padding: 2rem;

}



.wuxia-simulator #purpleModal .modal-footer {

    align-items: flex-end;

    padding: 0.8rem 1rem;

    border-radius: 0 0 10px 10px;

}



.wuxia-simulator #purpleModal #btnRefreshPurpleAnalysis {

    flex: 0 0 auto;

    min-height: 2.7rem;

}



html[data-theme="care"] body {

    position: relative;

    isolation: isolate;

    background:

        linear-gradient(180deg, rgba(7, 9, 12, 0.08), rgba(11, 13, 17, 0.96) 50rem),

        linear-gradient(105deg, #0a0c10 0%, #12151b 48%, #0b0d11 100%);

}



html[data-theme="care"] body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    background: url("./ink-mist-characters-care.webp") center top / cover no-repeat;

    filter: contrast(1.04) saturate(0.82);

    opacity: 0.82;

    pointer-events: none;

}



html[data-theme="care"] body::after {

    content: "";

    pointer-events: none;

}



.theme-switch {

    position: absolute;

    top: 0.85rem;

    right: 0;

    z-index: 30;

    display: inline-flex;

    gap: 0.2rem;

    padding: 0.22rem;

    border: 1px solid var(--border, #343a48);

    border-radius: 999px;

    background: color-mix(in srgb, var(--panel, #1a1d24) 90%, transparent);

    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(9px);

}



.theme-switch button {

    min-width: 3.7rem;

    min-height: 2rem;

    padding: 0.3rem 0.72rem;

    border: 0;

    border-radius: 999px;

    background: transparent;

    color: var(--muted, #9ba3b3);

    cursor: pointer;

    font: 600 0.75rem "Noto Sans SC", "Microsoft YaHei", sans-serif;

    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;

}



.theme-switch button:hover {

    color: var(--text, #edf0f5);

}



.theme-switch button:focus-visible {

    outline: 2px solid var(--purple, #b98be8);

    outline-offset: 2px;

}



html[data-theme] .theme-switch button[aria-pressed="true"] {

    background: rgba(155, 107, 201, 0.22);

    color: #d7b3fa;

    box-shadow: 0 3px 10px rgba(155, 107, 201, 0.18);

}



html[data-theme="bright"] .theme-switch {

    border-color: var(--wuxia-hairline);

    background: rgba(251, 248, 239, 0.9);

    box-shadow: 0 7px 22px var(--wuxia-shadow);

}



html[data-theme="bright"] .theme-switch button {

    color: var(--wuxia-ink-soft);

}



html[data-theme="bright"] .theme-switch button:hover {

    color: var(--wuxia-ink);

}



html[data-theme="bright"] .theme-switch button:focus-visible {

    outline-color: var(--wuxia-cinnabar);

}



html[data-theme="bright"] .theme-switch button[aria-pressed="true"] {

    background: var(--wuxia-cinnabar);

    color: #fffaf0;

    box-shadow: 0 3px 10px rgba(132, 49, 38, 0.18);

}



@media (max-width: 460px) {

    html[data-theme="care"] body::before {

        opacity: 0.42;

    }



    .theme-switch {

        top: 0.55rem;

        right: 0.5rem;

    }



    .theme-switch button {

        min-width: 3.25rem;

        min-height: 1.9rem;

        padding-inline: 0.58rem;

    }

}



@media (max-width: 760px) {

    .wuxia-home .home-shell {

        width: min(100% - 1rem, 1120px);

    }



    .wuxia-home .home-header {

        padding-top: 3.25rem;

    }



    .wuxia-home .module-card:nth-child(2n) {

        border-right: 0;

    }



    .wuxia-home .module-card {

        border-bottom: 1px solid var(--border);

    }



    .wuxia-home .module-card:last-child {

        border-bottom: 0;

    }



    .wuxia-simulator .exchange-sequence-controls {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .wuxia-simulator .exchange-sequence-controls label:nth-child(n),

    .wuxia-simulator .exchange-sequence-controls > button {

        grid-column: span 1;

    }



    .wuxia-simulator .exchange-sequence-controls > button {

        grid-column: span 2;

    }



    .wuxia-simulator .exchange-sequence-selection > div {

        border-right: 0;

        border-bottom: 1px solid var(--border-color);

    }



    .wuxia-simulator .exchange-sequence-selection > div:last-child {

        border-bottom: 0;

    }



    .wuxia-simulator #purpleModal .purple-pane-seq {

        border-right: 0;

    }

}



@media (max-width: 460px) {

    .wuxia-home .home-header {

        padding-inline: 0;

    }



    .wuxia-home .module-grid {

        border-bottom: 0;

    }



    .wuxia-home .module-card {

        border-right: 0;

    }



    .wuxia-simulator .exchange-sequence-modal {
        width: calc(100vw - 0.75rem);

        height: calc(100vh - 0.75rem);

        max-height: calc(100vh - 0.75rem);

    }



    .wuxia-simulator .exchange-sequence-body,

    .wuxia-simulator .exchange-sequence-controls {

        padding: 0.8rem;

    }



    .wuxia-simulator .exchange-sequence-controls {

        grid-template-columns: 1fr;

    }



    .wuxia-simulator .exchange-sequence-controls label:nth-child(n),

    .wuxia-simulator .exchange-sequence-controls > button {

        grid-column: span 1;

    }



    .wuxia-simulator .exchange-sequence-results {

        min-height: 13rem;

    }



    .wuxia-simulator #purpleModal .modal-split {

        width: calc(100vw - 0.75rem);

        max-height: calc(100vh - 0.75rem);

    }



    .wuxia-simulator #purpleModal .modal-toolbar {

        grid-template-columns: 1fr;

    }



    .wuxia-simulator #purpleModal .stats-summary {

        grid-column: auto;

    }



    .wuxia-simulator #purpleModal .modal-footer {

        align-items: stretch;

        flex-direction: column;

    }



    .wuxia-simulator #purpleModal #btnRefreshPurpleAnalysis {

        width: 100%;

    }

}



@media (prefers-reduced-motion: reduce) {

    .theme-switch button {

        transition: none;

    }

}