:root {
    --bg-color: #1a1a1d;
    --card-bg: #2d2d35;
    --text-main: #e0e0e0;
    --text-sub: #a0a0a0;
    --accent: #4caf50;
    --accent-hover: #45a049;
    --border: #3d3d45;
    --gold: #ffd700;
    --purple: #dfa8ff
}

html {
    overflow-x: hidden;
    max-width: 100vw
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100vw
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
    border-left: 1px solid var(--border)
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 5px;
    border: 2px solid var(--bg-color)
}

::-webkit-scrollbar-thumb:hover {
    background: #4d4d55
}

::-webkit-scrollbar-thumb:active {
    background: var(--accent)
}

::-webkit-scrollbar-corner {
    background: var(--bg-color)
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-color)
}

a {
    color: #2196f3 !important;
    text-decoration: none;
    transition: color .2s, text-decoration .2s
}

a:hover {
    color: #64b5f6 !important;
    text-decoration: underline
}

a:visited {
    color: #2196f3 !important
}

h1 {
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 1.5rem)
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 15px 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

header {
    background-color: #232328;
    padding: 15px 2rem;
    border-bottom: 1px solid #333;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 101
}

header h1 {
    color: var(--text-main);
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 20px
}

.account-select-group {
    display: flex;
    align-items: center;
    gap: 8px
}

.account-select-group label {
    font-size: .9rem;
    color: var(--text-sub);
    white-space: nowrap;
    font-weight: 700
}

#account-select {
    min-width: clamp(120px, 15vw, 180px);
    flex: 1;
    padding: 5px 8px;
    background-color: var(--bg-color);
    font-size: .9rem;
    border: 1px solid #444;
    color: var(--text-main)
}

.primary-btn {
    background-color: var(--accent);
    color: #fff;
    border: none;
    padding: clamp(8px, 1.5vw, 10px) clamp(16px, 3vw, 20px);
    border-radius: 4px;
    cursor: pointer;
    font-size: clamp(.9rem, 1.8vw, 1rem);
    font-weight: 700
}

.primary-btn:hover {
    background-color: var(--accent-hover)
}

.secondary-btn {
    background-color: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: clamp(4px, 1vw, 5px) clamp(8px, 1.8vw, 10px);
    border-radius: 4px;
    cursor: pointer;
    font-size: clamp(.8rem, 1.4vw, .85rem);
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s
}

.secondary-btn:hover {
    background-color: var(--accent);
    color: #fff
}

.danger-btn {
    background-color: transparent;
    color: #ff5252;
    border: 1px solid #ff5252;
    padding: clamp(4px, 1vw, 5px) clamp(8px, 1.8vw, 10px);
    border-radius: 4px;
    cursor: pointer;
    font-size: clamp(.8rem, 1.4vw, .85rem);
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s;
    margin-left: clamp(4px, .8vw, 5px)
}

.danger-btn:hover {
    background-color: #ff5252;
    color: #fff
}

.filter-btn {
    background: 0 0;
    border: none;
    color: var(--text-sub);
    padding: clamp(6px, 1.2vw, 8px) clamp(16px, 3vw, 20px);
    border-radius: 40px;
    cursor: pointer;
    font-size: clamp(.85rem, 1.5vw, .9rem);
    font-weight: 700;
    transition: all .3s ease
}

.filter-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .05)
}

.filter-btn.active {
    background-color: var(--accent);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3)
}

#add-btn {
    position: absolute;
    right: clamp(15px, 2.5vw, 20px);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--accent);
    color: #fff;
    border: none;
    padding: clamp(6px, 1.2vw, 8px) clamp(16px, 3vw, 20px);
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(.9rem, 1.6vw, .95rem);
    box-shadow: 0 4px 6px rgba(0, 0, 0, .2);
    transition: all .2s;
    display: flex;
    align-items: center
}

#add-btn:hover {
    background-color: #54b92c;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 8px rgba(0, 0, 0, .3)
}

@media (max-width:768px) {
    #filter-bar {
        flex-direction: column;
        gap: 15px
    }

    #add-btn {
        position: static;
        transform: none
    }

    #add-btn:hover {
        transform: scale(1.05)
    }
}

.app-layout {
    display: flex;
    gap: 0;
    padding: 0;
    align-items: flex-start;
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - 80px)
}

.layout-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--bg-color)
}

#filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(12px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
    position: relative;
    background-color: #1e1e24;
    border-bottom: 1px solid var(--border);
    z-index: 10
}

.filter-capsule {
    background-color: #232328;
    padding: 5px;
    border-radius: 50px;
    display: inline-flex;
    gap: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    border: 1px solid var(--border);
    flex-wrap: wrap;
    justify-content: center
}

#equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 30vw, 300px), 1fr));
    gap: clamp(15px, 2.5vw, 20px);
    padding: clamp(15px, 2.5vw, 20px);
    margin: 0
}

.equip-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(12px, 2vw, 15px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.5vw, 10px);
    transition: transform .2s;
    position: relative;
    cursor: pointer
}

.equip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3)
}

.equip-card-equipped {
    border: 2px solid gold;
    background: linear-gradient(135deg, rgba(255, 215, 0, .05) 0, rgba(255, 215, 0, .02) 100%);
    box-shadow: 0 0 10px rgba(255, 215, 0, .2)
}

.equip-card-equipped:hover {
    box-shadow: 0 5px 20px rgba(255, 215, 0, .4)
}

.equipped-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, gold 0, #ffed4e 100%);
    color: #1a1a1d;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(255, 215, 0, .3);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px
}

.equipped-badge::before {
    content: "✓";
    font-size: .8rem
}

.card-header {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 15px);
    border-bottom: 1px solid var(--border);
    padding-bottom: clamp(8px, 1.5vw, 10px)
}

.equip-icon {
    width: clamp(50px, 8vw, 60px);
    height: clamp(50px, 8vw, 60px);
    min-width: 50px;
    min-height: 50px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #555
}

.card-title h3 {
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.1rem);
    color: #fff
}

.card-title span {
    font-size: clamp(.8rem, 1.4vw, .85rem);
    color: var(--text-sub)
}

.stat-line {
    display: flex;
    justify-content: space-between;
    font-size: clamp(.85rem, 1.5vw, .9rem);
    padding: clamp(2px, .4vw, 2px) 0
}

.main-stat {
    font-weight: 700;
    margin-bottom: 5px
}

.sub-stat {
    color: var(--text-sub)
}

.val {
    color: #fff
}

.delete-btn,
.edit-btn {
    position: absolute;
    top: clamp(8px, 1.5vw, 10px);
    background: 0 0;
    border: none;
    cursor: pointer;
    font-size: clamp(.9rem, 1.8vw, 1rem);
    color: #fff;
    opacity: .7;
    z-index: 10;
    width: clamp(24px, 4vw, 28px);
    height: clamp(24px, 4vw, 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s
}

.delete-btn {
    right: clamp(8px, 1.5vw, 10px);
    font-size: clamp(1.2rem, 2.2vw, 1.4rem)
}

.edit-btn {
    right: clamp(40px, 7vw, 46px)
}

.delete-btn:hover,
.edit-btn:hover {
    opacity: 1;
    transform: scale(1.1)
}

#simulator-panel {
    width: clamp(300px, 25vw, 410px);
    min-width: 300px;
    max-width: 410px;
    background-color: #232328;
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    padding: clamp(15px, 2vw, 20px);
    height: auto;
    overflow: visible;
    flex-shrink: 0;
    z-index: 90
}

.sim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap
}

.sim-header h2 {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.2rem);
    flex: 1;
    min-width: 0
}

#armory-select,
#class-select,
#scheme-select {
    width: auto;
    min-width: clamp(60px, 8vw, 80px);
    flex: 0 1 auto
}

.xinfa-section {
    margin-bottom: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    border-radius: 0
}

.xinfa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px
}

.xinfa-slot {
    width: 100%;
    aspect-ratio: 117/203;
    background-color: #1a1a1d;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .2s
}

.xinfa-slot:hover {
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(76, 175, 80, .3)
}

.xinfa-slot-locked {
    cursor: not-allowed;
    opacity: .7;
    pointer-events: none
}

.xinfa-slot-locked:hover {
    border-color: transparent;
    box-shadow: none
}

.xinfa-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.xinfa-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: clamp(.7rem, 1.2vw, .75rem);
    text-align: center;
    padding: clamp(12px, 2vw, 15px) clamp(2px, .4vw, 2px) clamp(3px, .6vw, 4px) clamp(2px, .4vw, 2px);
    text-shadow: 1px 1px 2px #000;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.xinfa-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    justify-content: center
}

.xinfa-select-item {
    background-color: #232328;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .2s, border-color .2s;
    display: flex;
    flex-direction: column
}

.xinfa-select-item:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
}

.xinfa-img-wrapper {
    width: 100%;
    aspect-ratio: 117/203;
    background-color: #000
}

.xinfa-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.xinfa-select-name {
    padding: 4px 0;
    text-align: center;
    font-size: .8rem;
    color: #e0e0e0;
    background-color: #2c2c32;
    border-top: 1px solid #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.stats-panel {
    background-color: #232328;
    padding: 10px;
    border-radius: 4px;
    font-size: .9rem
}

.stat-row-display {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid #333
}

.stat-row-display:last-child {
    border-bottom: none
}

.stat-label {
    color: var(--text-sub)
}

.stat-val {
    color: #fff;
    font-weight: 700
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(2px)
}

.hidden {
    display: none !important
}

.modal-content {
    background-color: #2c2c32;
    width: clamp(90%, 95vw, 650px);
    max-width: 650px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    border: 1px solid #444;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    padding: 0;
    margin: 0 auto
}

.ocr-float-window {
    position: fixed;
    width: 300px;
    max-width: 90vw;
    max-height: 80vh;
    background-color: #2c2c32;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    border: 1px solid #444;
    display: flex;
    flex-direction: column;
    z-index: 1001;
    overflow: hidden
}

.ocr-float-header {
    padding: 12px 15px;
    border-bottom: 1px solid #3d3d42;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232328
}

.ocr-float-close {
    background: 0 0;
    border: none;
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s
}

.ocr-float-close:hover {
    color: #fff
}

.ocr-float-body {
    padding: 15px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
    display: flex;
    justify-content: center;
    align-items: flex-start
}

@media (max-width:1200px) {
    .ocr-float-window {
        left: auto;
        right: 20px;
        top: 20px;
        transform: none
    }
}

.equip-detail-float-window {
    position: fixed;
    width: 320px;
    max-width: 90vw;
    max-height: 80vh;
    background-color: #2c2c32;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    border: 1px solid #444;
    display: flex;
    flex-direction: column;
    z-index: 1002;
    overflow: hidden
}

.equip-detail-float-header {
    padding: 12px 15px;
    border-bottom: 1px solid #3d3d42;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232328
}

.equip-detail-float-close {
    background: 0 0;
    border: none;
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s
}

.equip-detail-float-close:hover {
    color: #fff
}

.equip-detail-float-body {
    padding: 15px;
    overflow-y: auto;
    max-height: calc(80vh - 60px)
}

@media (max-width:1200px) {
    .equip-detail-float-window {
        left: auto;
        right: 20px;
        top: 20px;
        transform: none
    }
}

.modal-header {
    padding: clamp(12px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
    border-bottom: 1px solid #3d3d42;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background-color: #232328;
    border-radius: 12px 12px 0 0
}

.modal-header h2 {
    margin: 0;
    font-size: clamp(.95rem, 2vw, 1.1rem);
    color: var(--text-main);
    flex: 1;
    min-width: 0
}

.close-btn {
    color: var(--text-sub);
    font-size: clamp(24px, 4vw, 28px);
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: color .2s;
    flex-shrink: 0;
    min-width: clamp(24px, 4vw, 28px)
}

.close-btn:hover {
    color: #ff5252
}

.modal-body {
    padding: clamp(15px, 2.5vw, 20px);
    overflow-y: auto;
    color: var(--text-main)
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: clamp(8px, 1.5vw, 10px);
    padding: clamp(12px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
    border-top: 1px solid #3d3d42;
    background-color: #232328;
    border-radius: 0 0 12px 12px;
    margin-left: clamp(-15px, -2.5vw, -20px);
    margin-right: clamp(-15px, -2.5vw, -20px);
    margin-bottom: clamp(-15px, -2.5vw, -20px);
    margin-top: clamp(15px, 2.5vw, 20px)
}

.save-btn {
    background-color: var(--accent);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700
}

.cancel-btn {
    background-color: transparent;
    color: #ccc;
    border: 1px solid #666;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700
}

.save-btn:hover {
    opacity: .9
}

.cancel-btn:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #fff
}

.form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: flex-start
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative
}

.form-group.grow {
    flex: 2
}

.form-group.shrink {
    flex: 1.2;
    position: relative
}

.available-classes-select-display {
    background-color: #1a1a1d;
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 6px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: .85rem;
    user-select: none
}

.available-classes-select-display:hover {
    border-color: var(--accent)
}

.available-classes-select-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.available-classes-select-arrow {
    margin-left: 8px;
    font-size: .75rem;
    color: var(--text-sub)
}

.options-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 4px;
    background-color: #1a1a1d;
    border: 1px solid var(--border);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5)
}

.options-list.show {
    display: block
}

.options-list .option {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    font-size: .85rem;
    color: var(--text-main);
    transition: background-color .2s;
    user-select: none
}

.options-list .option:hover {
    background-color: rgba(255, 255, 255, .1)
}

.options-list .option input[type=checkbox] {
    margin-right: 10px;
    cursor: pointer;
    width: 14px;
    height: 14px
}

.options-list .option:first-child {
    border-bottom: 1px solid #333;
    margin-bottom: 2px;
    padding-bottom: 8px;
    font-weight: 700
}

input,
select {
    background-color: #1a1a1d;
    border: 1px solid var(--border);
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box
}

input:focus,
select:focus {
    outline: 1px solid var(--accent)
}

.input-wrapper {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    gap: 8px;
    position: relative
}

.input-inner-box {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0
}

.input-inner-box input {
    width: 100%;
    padding-right: 40px !important
}

.max-btn {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: 0 0;
    border: none;
    color: var(--accent);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 6px;
    z-index: 5;
    transition: color .2s
}

.max-btn:hover {
    color: #fff;
    transform: translateY(-50%) scale(1.1)
}

input[readonly]~.max-btn {
    display: none
}

input[readonly] {
    background-color: #26262b;
    color: gold;
    border-color: #444;
    cursor: not-allowed
}

input[readonly]:focus {
    outline: 0;
    border-color: #444
}

.unit-suffix {
    position: absolute;
    right: 25px !important;
    color: var(--text-sub);
    font-size: .8rem;
    pointer-events: none
}

.unit-suffix.hidden {
    display: none
}

.quality-tag {
    position: static;
    transform: none;
    font-size: clamp(.8rem, 1.4vw, .85rem);
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
    min-width: clamp(40px, 7vw, 45px)
}

.quality-gold {
    color: var(--gold) !important
}

.quality-purple {
    color: var(--purple) !important
}

.quality-gray {
    color: var(--text-sub) !important
}

.quality-error {
    color: #ff5252;
    font-size: .75rem
}

input.input-error {
    border-color: #ff5252;
    background-color: rgba(255, 82, 82, .1)
}

#modal-icon-preview {
    width: clamp(35px, 6vw, 40px);
    height: clamp(35px, 6vw, 40px);
    min-width: 35px;
    min-height: 35px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #555;
    background-color: #1a1a1d;
    flex-shrink: 0
}

.paste-area {
    border: 2px dashed #444;
    background-color: #232328;
    border-radius: 8px;
    padding: clamp(20px, 4vw, 30px);
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 15px;
    color: var(--text-sub);
    min-height: clamp(80px, 15vw, 100px)
}

.paste-area:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-color: var(--accent)
}

.paste-area.dragover,
.paste-area:hover {
    border-color: var(--accent);
    background-color: rgba(76, 175, 80, .05);
    color: #fff
}

#ocr-paste-area {
    caret-color: transparent
}

#ocr-paste-area:focus {
    color: transparent
}

#ocr-paste-area>* {
    color: var(--text-sub);
    pointer-events: none
}

#ocr-preview-container,
#ocr-preview-container * {
    pointer-events: auto !important;
    color: inherit !important
}

#ocr-paste-area:focus #ocr-preview-container,
#ocr-paste-area:focus #ocr-preview-container * {
    color: inherit !important;
    visibility: visible !important;
    opacity: 1 !important
}

#ocr-preview-container .ocr-status-text,
#ocr-preview-container .ocr-status-text-inline {
    color: #aaa !important
}

#ocr-paste-area:focus #ocr-preview-container .ocr-status-text,
#ocr-paste-area:focus #ocr-preview-container .ocr-status-text-inline {
    color: #aaa !important
}

#ocr-preview-container:not(.hidden):not(.ocr-preview-hidden) {
    display: block !important
}

#ocr-preview-container:not(.hidden):not(.ocr-preview-hidden) .ocr-progress-wrapper,
#ocr-preview-container:not(.hidden):not(.ocr-preview-hidden) .ocr-progress-wrapper-inline {
    display: block !important
}

#ocr-preview-container:not(.hidden):not(.ocr-preview-hidden) .ocr-status-text,
#ocr-preview-container:not(.hidden):not(.ocr-preview-hidden) .ocr-status-text-inline {
    display: block !important;
    visibility: visible !important
}

#ocr-preview-container:not(.hidden):not(.ocr-preview-hidden) .ocr-progress-fill,
#ocr-preview-container:not(.hidden):not(.ocr-preview-hidden) .ocr-progress-fill-inline {
    display: block !important;
    visibility: visible !important
}

.ocr-preview-image {
    max-width: 100%;
    max-height: clamp(200px, 40vh, 300px);
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #444;
    margin-bottom: 15px;
    display: block !important;
    margin-left: auto;
    margin-right: auto;
    visibility: visible !important;
    opacity: 1 !important
}

#ocr-preview-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important
}

.ocr-progress-wrapper {
    width: 100%;
    margin-top: 10px
}

.progress-bar-container {
    width: 100%;
    height: clamp(6px, 1.2vw, 8px);
    min-height: 6px;
    background-color: #1a1a1d;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #333;
    margin-bottom: clamp(6px, 1.2vw, 8px)
}

.ocr-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0, #66bb6a 100%);
    border-radius: 4px;
    transition: width .3s ease;
    box-shadow: 0 0 8px rgba(76, 175, 80, .4)
}

.ocr-status-text {
    font-size: .85rem;
    color: #a0a0a0;
    text-align: center;
    margin: 0;
    min-height: 20px
}

#ocr-modal {
    z-index: 1100 !important
}

.welcome-message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    min-height: calc(100vh - 80px);
    padding: 40px 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    box-sizing: border-box;
    overflow-x: hidden;
    background-color: var(--bg-color)
}

.welcome-content {
    text-align: center;
    max-width: clamp(90%, 95vw, 600px);
    width: 100%;
    padding: clamp(20px, 5vw, 40px);
    background: rgba(0, 0, 0, .3);
    border-radius: 12px;
    border: 1px solid #444;
    box-sizing: border-box;
    margin: 0 auto
}

.sim-layout-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: clamp(12px, 2vw, 15px);
    margin-bottom: clamp(12px, 2vw, 15px);
    padding: clamp(8px, 1.5vw, 10px);
    background: rgba(0, 0, 0, .2);
    border-radius: 8px;
    min-width: 0;
    overflow: hidden
}

.sim-slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(6px, 1.2vw, 8px);
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0
}

.sim-slot {
    width: 100%;
    aspect-ratio: 1;
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
    border: 2px solid #444;
    border-radius: 6px;
    background: #1a1a1d;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s
}

.sim-slot:hover {
    border-color: #999
}

.sim-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.slot-placeholder {
    font-size: clamp(.7rem, 1.2vw, .75rem);
    color: #555
}

.slot-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: clamp(9px, 1.5vw, 10px);
    text-align: center;
    padding: clamp(1px, .2vw, 1px) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sim-side-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(70px, 12vw, 85px);
    min-width: 70px;
    flex-shrink: 0;
    align-self: stretch
}

.bow-slot {
    width: clamp(50px, 9vw, 55px) !important;
    height: clamp(50px, 9vw, 55px) !important;
    min-width: clamp(50px, 9vw, 55px);
    min-height: clamp(50px, 9vw, 55px);
    border-color: #666;
    margin-bottom: clamp(8px, 1.5vw, 10px);
    border-radius: 6px;
    flex-shrink: 0
}

.sim-controls {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 1vw, 6px);
    width: 100%;
    flex: 1;
    justify-content: center
}

.mini-select {
    width: 100%;
    font-size: clamp(11px, 1.8vw, 12px);
    padding: clamp(5px, 1vw, 6px) 0;
    background-color: #222;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    outline: 0
}

.mini-select:focus {
    border-color: var(--accent)
}

.panel-check-hint {
    display: inline-block;
    padding: 4px 10px;
    background-color: rgba(160, 160, 160, .2);
    border: 1px solid rgba(160, 160, 160, .4);
    border-radius: 12px;
    color: var(--text-sub);
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    flex: 0 0 auto
}

.panel-check-hint:hover {
    background-color: rgba(160, 160, 160, .3);
    border-color: var(--text-sub);
    color: var(--text-main)
}

.graduation-banner {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    margin: clamp(12px, 2vw, 15px) 0;
    padding: clamp(10px, 1.8vw, 12px);
    background-color: rgba(0, 0, 0, .2);
    border: 1px solid #444;
    border-radius: 8px;
    clear: both;
    cursor: pointer;
    position: relative;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 215, 0, .1)
}

.graduation-banner:hover {
    background-color: rgba(255, 215, 0, .05);
    border-color: rgba(255, 215, 0, .5);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5), 0 0 20px rgba(255, 215, 0, .2)
}

.graduation-banner:active {
    transform: translateY(0);
    background-color: rgba(0, 0, 0, .3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
}

.banner-content {
    display: flex;
    justify-content: center;
    align-items: baseline;
    position: relative
}

.banner-label {
    font-size: clamp(12px, 2vw, 14px);
    color: #aaa;
    margin-right: clamp(5px, 1vw, 6px);
    transition: color .2s
}

.graduation-banner:hover .banner-label {
    color: #ddd
}

.banner-value {
    font-size: clamp(22px, 4vw, 26px);
    font-weight: 800;
    background: linear-gradient(to bottom, #fff59d, gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, .4));
    font-family: 'Segoe UI', sans-serif
}

.banner-footer {
    font-size: clamp(11px, 1.8vw, 12px);
    color: #666;
    margin-top: clamp(5px, 1vw, 6px);
    border-top: 1px dashed #333;
    padding-top: clamp(5px, 1vw, 6px);
    transition: border-color .2s
}

.graduation-banner:hover .banner-footer {
    border-top-color: rgba(255, 215, 0, .3)
}

#total-damage-display {
    color: #888;
    font-weight: 700
}

.banner-arrow {
    position: absolute;
    right: clamp(6px, 2vw, 9px);
    top: 40%;
    transform: translateY(-50%);
    font-size: clamp(48px, 4vw, 56px);
    font-weight: 700;
    color: #555;
    transition: all .2s;
    opacity: .7
}

.graduation-banner:hover .banner-arrow {
    color: var(--gold);
    opacity: 1;
    right: 10px
}

.grad-layout-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    background-color: #232328
}

.grad-left-panel {
    width: clamp(280px, 25vw, 320px);
    min-width: 280px;
    max-width: 320px;
    background-color: #1e1e24;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    position: relative;
    transition: width .3s ease, min-width .3s ease, max-width .3s ease
}

.grad-left-panel-toggle {
    display: none;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 50px;
    background-color: #1e1e24;
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    transition: all .3s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, .3)
}

.grad-left-panel-toggle:hover {
    background-color: #2a2a30;
    border-color: var(--accent)
}

.grad-left-panel-toggle .toggle-icon {
    transition: transform .3s ease
}

.grad-left-panel.collapsed .grad-left-panel-toggle .toggle-icon {
    transform: rotate(180deg)
}

.grad-left-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity .3s ease;
    width: 100%
}

.grad-left-panel.collapsed .grad-left-panel-content {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    width: 0
}

.current-rate-box {
    padding: clamp(15px, 2.5vw, 20px);
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(to bottom, #232328, #1e1e24)
}

.current-rate-box .label {
    color: var(--text-sub);
    font-size: clamp(.85rem, 1.5vw, .9rem);
    margin-bottom: 5px
}

.current-rate-box .value {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    background: linear-gradient(to bottom, #fff59d, gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.current-equip-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.grad-equip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background-color: #2a2a30;
    border: 1px solid #3d3d45;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s;
    position: relative
}

.grad-equip-item:hover {
    border-color: var(--accent);
    background-color: #33333a
}

.grad-equip-item.active {
    border-color: var(--gold);
    background-color: rgba(255, 215, 0, .1)
}

.grad-equip-item img {
    width: clamp(35px, 6vw, 40px);
    height: clamp(35px, 6vw, 40px);
    min-width: 35px;
    min-height: 35px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid #555
}

.grad-equip-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0
}

.grad-equip-name {
    font-size: .9rem;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.grad-equip-sub {
    font-size: .75rem;
    color: #888
}

.grad-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #232328;
    min-width: 0
}

.grad-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    background-color: #1a1a1d;
    -webkit-overflow-scrolling: touch
}

.grad-tab {
    padding: clamp(8px, 1.4vw, 10px) clamp(10px, 2vw, 16px);
    cursor: pointer;
    color: var(--text-sub);
    font-weight: 700;
    border-right: 1px solid #333;
    transition: all .2s;
    font-size: clamp(.8rem, 1.4vw, .82rem);
    white-space: nowrap;
    flex-shrink: 0
}

.grad-tab:hover {
    color: #fff;
    background-color: #2a2a30
}

.grad-tab.active {
    color: var(--accent);
    background-color: #232328;
    border-bottom: 2px solid var(--accent)
}

.grad-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(15px, 2.5vw, 20px);
    position: relative
}

.tab-pane {
    display: none
}

.tab-pane.active {
    display: block
}

.compare-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: clamp(12px, 2vw, 15px);
    border-bottom: 1px solid var(--border);
    margin-bottom: clamp(12px, 2vw, 15px);
    flex-wrap: nowrap;
    gap: clamp(15px, 2.5vw, 20px)
}

#compare-slot-title {
    font-size: clamp(1rem, 1.8vw, 1.1rem);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.compare-header>div {
    flex-shrink: 0
}

.chengyin-toggle {
    font-size: clamp(.85rem, 1.5vw, .9rem);
    color: #ddd;
    display: flex;
    align-items: center;
    gap: clamp(5px, 1vw, 6px);
    cursor: pointer;
    white-space: nowrap
}

.compare-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 30vw, 280px), 1fr));
    gap: clamp(12px, 2vw, 15px)
}

.compare-card {
    background-color: #2d2d35;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative
}

.diff-result {
    font-size: .95rem;
    font-weight: 700;
    text-align: right;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed #444
}

.diff-up {
    color: #ff5252
}

.diff-down {
    color: #4caf50
}

.diff-equal {
    color: #888
}

.transmute-target-card {
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 14px
}

.transmute-subs-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 16px
}

.transmute-sub-btn {
    background-color: #2d2d35;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .98rem;
    line-height: 1.2;
    color: #fff;
    min-height: 44px
}

.transmute-sub-btn.selected {
    border-color: var(--accent);
    background-color: rgba(76, 175, 80, .15);
    box-shadow: 0 0 5px rgba(76, 175, 80, .25)
}

.transmute-result-card {
    border-radius: 8px;
    padding: 14px;
    border: 1px solid #444;
    background: #232328;
    max-width: 980px;
    margin: 0 auto
}

.transmute-result-centered {
    text-align: center
}

.transmute-result-loading {
    max-width: 680px
}

.transmute-suggest-up {
    background: linear-gradient(0deg, rgba(76, 175, 80, .16), rgba(76, 175, 80, .16)), #232328;
    border-color: rgba(76, 175, 80, .5)
}

.transmute-suggest-down {
    background: linear-gradient(0deg, rgba(244, 67, 54, .16), rgba(244, 67, 54, .16)), #232328;
    border-color: rgba(244, 67, 54, .5)
}

.transmute-suggest-equal {
    background: linear-gradient(0deg, rgba(255, 193, 7, .12), rgba(255, 193, 7, .12)), #232328;
    border-color: rgba(255, 193, 7, .45)
}

.transmute-bestbuild-card {
    border-radius: 8px;
    padding: 14px;
    border: 1px solid #444;
    background: #232328;
    max-width: 980px;
    margin: 14px auto 0
}

.sim-container {
    padding: 20px;
    color: #e0e0e0
}

.sim-intro {
    background-color: #2a2a30;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid var(--accent)
}

.sim-intro ul {
    margin: 10px 0 0 20px;
    padding: 0;
    color: #aaa;
    font-size: .9rem
}

.sim-actions {
    text-align: center;
    margin-bottom: 25px
}

.sim-start-btn {
    font-size: 1.1rem;
    padding: 10px 30px;
    background: linear-gradient(135deg, #2196f3, #1976d2);
    border: none;
    box-shadow: 0 4px 10px rgba(33, 150, 243, .3)
}

.sim-start-btn:hover {
    background: linear-gradient(135deg, #42a5f5, #2196f3);
    transform: translateY(-2px)
}

.sim-results {
    background-color: #232328;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #3d3d45;
    animation: fadeIn .3s ease
}

.loading-spinner {
    text-align: center;
    color: var(--accent);
    font-weight: 700;
    padding: 20px
}

.best-build-loading {
    padding: 20px
}

.best-build-container {
    padding: 20px
}

.best-build-intro {
    margin-bottom: 20px
}

.best-build-actions {
    text-align: center;
    margin-bottom: 20px
}

.best-build-results {
    margin-top: 20px
}

.best-build-summary {
    padding: 20px
}

.best-build-solution {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, .2);
    border-radius: 8px;
    border: 1px solid var(--border)
}

.best-build-equips {
    margin-top: 15px
}

.sim-summary {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px
}

.sim-stat-box {
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
    background-color: #2d2d35;
    border: 1px solid transparent
}

.sim-stat-box.highlight {
    border-color: var(--gold);
    background-color: rgba(255, 215, 0, .05)
}

.sim-stat-box .label {
    font-size: .85rem;
    color: #888;
    margin-bottom: 5px
}

.sim-stat-box .value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff
}

.sim-stat-box.highlight .value {
    color: var(--gold)
}

.sim-chart-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px
}

.sim-limit {
    text-align: center;
    width: clamp(80px, 15vw, 100px);
    min-width: 80px;
    flex-shrink: 0
}

.sim-limit .label {
    font-size: clamp(.7rem, 1.2vw, .75rem);
    color: #888
}

.sim-limit .value {
    font-weight: 700;
    font-size: clamp(.85rem, 1.6vw, .95rem)
}

.sim-limit.min .value {
    color: #f44336
}

.sim-limit.max .value {
    color: #4caf50
}

.sim-limit .percent {
    font-size: clamp(.65rem, 1.1vw, .7rem);
    color: #666
}

.sim-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center
}

.sim-bar-bg {
    width: 100%;
    height: clamp(10px, 1.8vw, 12px);
    min-height: 10px;
    background-color: #111;
    border-radius: 6px;
    position: relative;
    overflow: hidden
}

.sim-bar-range {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f44336 0, gold 50%, #4caf50 100%);
    border-radius: 6px;
    opacity: .7
}

.sim-bar-median {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: clamp(1.5px, .3vw, 2px);
    min-width: 1.5px;
    background-color: #fff;
    box-shadow: 0 0 4px #fff;
    z-index: 2
}

.sim-bar-label {
    font-size: .75rem;
    color: #666;
    margin-top: 4px
}

.sim-details {
    border-top: 1px dashed #444;
    padding-top: 15px
}

.detail-row {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: #aaa;
    margin-bottom: 5px
}

@media (max-width:768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px
    }

    header h1 {
        font-size: 1.2rem;
        width: 100%
    }

    .header-controls {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 10px
    }

    .account-select-group {
        width: 100%;
        flex-wrap: nowrap
    }

    .account-select-group label {
        flex-shrink: 0;
        margin-bottom: 0
    }

    #account-select {
        flex: 1;
        min-width: 0
    }

    .danger-btn,
    .secondary-btn {
        font-size: .8rem;
        padding: 6px 12px
    }

    .app-layout {
        flex-direction: column;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important
    }

    .layout-left {
        width: 100%
    }

    #filter-bar {
        flex-direction: column;
        gap: 15px;
        padding: 15px
    }

    #add-btn {
        position: static;
        transform: none;
        width: 100%;
        justify-content: center
    }

    #add-btn:hover {
        transform: scale(1.02)
    }

    .filter-capsule {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 5px;
        flex-wrap: nowrap
    }

    .filter-btn {
        white-space: nowrap;
        font-size: clamp(.7rem, 2.5vw, .85rem) !important;
        padding: 4px 12px !important;
        flex-shrink: 0
    }

    #equipment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 15px
    }

    .equip-card {
        padding: 12px
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .equip-icon {
        width: 50px;
        height: 50px
    }

    #simulator-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 15px;
        order: -1
    }

    .sim-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .sim-header h2 {
        font-size: 1rem
    }

    .sim-header-controls {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 5px
    }

    #armory-select,
    #class-select,
    #scheme-select {
        width: auto !important;
        flex: 1;
        min-width: 0;
        padding-right: 20px;
        text-overflow: ellipsis
    }

    .sim-label {
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0
    }

    .xinfa-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px
    }

    .sim-slot {
        width: 100%;
        min-width: 0;
        aspect-ratio: 1
    }

    .bow-slot {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 8px;
        margin-left: auto;
        margin-right: auto
    }

    .sim-controls {
        width: 100%;
        display: flex;
        flex-direction: column !important;
        gap: 5px
    }

    .mini-select {
        width: 100%;
        font-size: 11px;
        padding: 4px 0
    }

    .graduation-banner {
        padding: 10px;
        margin: 10px 0
    }

    .banner-value {
        font-size: 22px
    }

    .banner-footer {
        flex-direction: column;
        gap: 10px;
        align-items: center
    }

    .modal-content {
        width: 95%;
        max-width: 95%;
        max-height: 95vh;
        margin: 10px
    }

    .modal-header {
        padding: 12px 15px
    }

    .modal-header h2 {
        font-size: 1rem
    }

    .modal-body {
        padding: 15px;
        overflow-x: visible
    }

    .modal-footer {
        flex-direction: column;
        gap: 10px;
        padding: 15px
    }

    .cancel-btn,
    .save-btn {
        width: 100%
    }

    .form-row {
        flex-direction: column
    }

    .stat-row {
        flex-direction: row !important;
        gap: 8px;
        align-items: flex-start;
        flex-wrap: nowrap
    }

    .form-group {
        width: 100%
    }

    .stat-row .form-group {
        width: auto;
        min-width: 0;
        flex-shrink: 1
    }

    .stat-row .form-group.grow {
        flex: 1.5 1 0;
        min-width: 0
    }

    .stat-row .form-group.shrink {
        flex: 1 0 auto;
        min-width: 0;
        max-width: 40%
    }

    .stat-row .input-wrapper {
        width: 100%;
        min-width: 0
    }

    .stat-row .quality-tag {
        min-width: 35px;
        font-size: .75rem
    }

    .stat-row .input-inner-box {
        min-width: 0;
        max-width: 100%
    }

    .grad-layout-container {
        flex-direction: row;
        height: auto;
        max-height: 90vh;
        overflow-x: visible
    }

    .grad-layout-container-inline {
        overflow: visible !important
    }

    .grad-left-panel {
        width: clamp(280px, 25vw, 320px);
        min-width: 50px;
        max-width: 320px;
        border-right: 1px solid var(--border);
        border-bottom: none;
        max-height: 90vh;
        position: relative;
        overflow: visible !important
    }

    .grad-left-panel-content {
        overflow-y: auto !important;
        overflow-x: hidden !important
    }

    .grad-left-panel-toggle {
        display: flex !important
    }

    .grad-left-panel.collapsed {
        width: 0;
        min-width: 0;
        max-width: 50px
    }

    .grad-left-panel.collapsed .grad-left-panel-toggle {
        right: -20px
    }

    .grad-right-panel {
        flex: 1;
        width: auto;
        max-height: 90vh
    }

    .grad-tabs {
        overflow-x: auto;
        flex-wrap: nowrap
    }

    .grad-tab {
        padding: 8px 12px;
        font-size: .76rem;
        white-space: nowrap;
        flex-shrink: 0
    }

    .grad-tab-content {
        padding: 15px
    }

    .compare-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .compare-list {
        grid-template-columns: 1fr
    }

    .transmute-sub-btn {
        width: 100%;
        justify-content: space-between
    }

    .sim-summary {
        flex-direction: column;
        gap: 15px
    }

    .sim-stat-box {
        width: 100%
    }

    .sim-chart-row {
        flex-direction: column;
        gap: 10px
    }

    .sim-limit {
        width: 100%;
        text-align: left
    }

    .sim-bar-container {
        width: 100%
    }

    .paste-area {
        padding: 20px;
        min-height: 80px
    }

    .welcome-content {
        padding: 20px;
        margin: 0 10px
    }

    .welcome-content h2 {
        font-size: 1.2rem
    }

    .welcome-content p {
        font-size: .95rem
    }
}

@media (max-width:480px) {
    header {
        padding: 10px
    }

    header h1 {
        font-size: 1rem
    }

    .equip-card {
        padding: 10px
    }

    .card-title h3 {
        font-size: 1rem
    }

    .stat-line {
        font-size: .85rem
    }

    .banner-value {
        font-size: 20px
    }

    .grad-tab {
        padding: 8px 12px;
        font-size: .75rem
    }

    .xinfa-grid {
        gap: 4px
    }

    .sim-slot {
        font-size: .7rem
    }

    .slot-placeholder {
        font-size: .65rem
    }
}

@media (max-width:768px) {

    .equip-card,
    .grad-equip-item,
    .grad-tab,
    .sim-slot,
    .xinfa-slot,
    button {
        min-height: 44px;
        -webkit-tap-highlight-color: rgba(76, 175, 80, 0.3);
        tap-highlight-color: rgba(76, 175, 80, 0.3)
    }

    input,
    select {
        font-size: 16px;
        padding: 10px
    }

    .grad-left-panel,
    .grad-tab-content,
    .modal-body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch
    }

    @media (hover:none) {
        .equip-card:hover {
            transform: none
        }

        .danger-btn:hover,
        .primary-btn:hover,
        .secondary-btn:hover {
            transform: none
        }

        .graduation-banner:hover {
            transform: none
        }
    }

    .card-title,
    .equip-card,
    .stat-line {
        -webkit-user-select: none;
        user-select: none
    }

    input,
    select,
    textarea {
        -webkit-user-select: text;
        user-select: text
    }

    .stat-priority-list div[style*="font-size: 0.9rem"],
    .stat-priority-list div[style*="font-size:0.9rem"] {
        font-size: .7rem !important
    }

    .stat-priority-list div[style*="font-size: 1rem"],
    .stat-priority-list div[style*="font-size:1rem"] {
        font-size: .8rem !important
    }

    .stat-priority-list>div>div[style*="padding: 8px 12px"],
    .stat-priority-list>div>div[style*="padding:8px 12px"] {
        padding: 6px 8px !important
    }
}

@media (max-width:1024px) and (orientation:landscape) {
    #simulator-panel {
        order: 0
    }

    .app-layout {
        flex-direction: row
    }

    #simulator-panel {
        width: 350px;
        border-left: 1px solid var(--border);
        border-top: none
    }

    .layout-left {
        flex: 1
    }
}

.info-icon-btn {
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    border-radius: 50%;
    color: #888;
    flex-shrink: 0
}

.info-icon-btn:hover {
    color: gold;
    background: rgba(255, 215, 0, .1);
    transform: scale(1.1)
}

.info-icon-btn:active {
    transform: scale(.95)
}

.info-icon-btn svg {
    width: 100%;
    height: 100%
}

.xinli-hint {
    font-size: .75rem;
    color: var(--text-sub);
    white-space: normal;
    margin-left: 8px;
    line-height: 1.2;
    min-width: 0;
    word-break: break-word
}

@media (max-width:768px) {
    .xinli-hint {
        font-size: .65rem;
        margin-left: 4px
    }

    header h1 {
        font-size: clamp(1rem, 2vw, 1.2rem)
    }
}

.flex-center {
    display: flex;
    align-items: center;
    gap: 10px
}

.flex-center-gap12 {
    display: flex;
    align-items: center;
    gap: 12px
}

.flex-column {
    display: flex;
    flex-direction: column
}

.flex-column-gap8 {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.flex-column-gap15 {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.flex-row {
    display: flex;
    flex-direction: row
}

.flex-between {
    display: flex;
    justify-content: space-between
}

.flex-end {
    display: flex;
    justify-content: flex-end
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-1 {
    flex: 1
}

.flex-08 {
    flex: 0.8
}

.flex-06 {
    flex: 0.6
}

.text-center {
    text-align: center
}

.text-main {
    color: var(--text-main)
}

.text-sub {
    color: var(--text-sub)
}

.text-gold {
    color: gold
}

.text-purple {
    color: #dfa8ff
}

.text-accent {
    color: var(--accent)
}

.text-gray {
    color: #888
}

.text-light-gray {
    color: #aaa
}

.text-dark-gray {
    color: #666
}

.text-white {
    color: #fff
}

.text-bbb {
    color: #bbb
}

.text-e0 {
    color: #e0e0e0
}

.text-ddd {
    color: #ddd
}

.text-a0a0a0 {
    color: #a0a0a0
}

.text-red {
    color: #f44336
}

.text-green {
    color: #4caf50
}

.text-orange {
    color: #ff9800
}

.font-bold {
    font-weight: 700
}

.font-size-08 {
    font-size: .8rem
}

.font-size-085 {
    font-size: .85rem
}

.font-size-09 {
    font-size: .9rem
}

.font-size-11 {
    font-size: 1.1rem
}

.font-size-12 {
    font-size: 1.2rem
}

.font-size-15 {
    font-size: 1.5rem
}

.mb-0 {
    margin-bottom: 0
}

.mb-4 {
    margin-bottom: 4px
}

.mb-5 {
    margin-bottom: 5px
}

.mb-8 {
    margin-bottom: 8px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-15 {
    margin-bottom: 15px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-30 {
    margin-bottom: 30px
}

.mt-5 {
    margin-top: 5px
}

.mt-6 {
    margin-top: 6px
}

.mt-15 {
    margin-top: 15px
}

.mt-20 {
    margin-top: 20px
}

.mt-50 {
    margin-top: 50px
}

.mr-auto {
    margin-right: auto
}

.mr-5 {
    margin-right: 5px
}

.mr-20 {
    margin-right: 20px
}

.p-0 {
    padding: 0
}

.p-8 {
    padding: 8px
}

.p-10-15 {
    padding: 10px 15px
}

.p-15 {
    padding: 15px
}

.p-20 {
    padding: 20px
}

.pt-6 {
    padding-top: 6px
}

.pt-22 {
    padding-top: 22px
}

.hidden {
    display: none !important
}

.block {
    display: block
}

.inline-flex {
    display: inline-flex;
    align-items: center
}

.w-full {
    width: 100%
}

.h-full {
    height: 100%
}

.min-h-0 {
    min-height: 0
}

.min-h-200 {
    min-height: 200px
}

.min-h-500 {
    min-height: 500px
}

.max-w-100 {
    max-width: 100%
}

.max-w-400 {
    max-width: 400px
}

.max-w-600 {
    max-width: 600px
}

.max-w-800 {
    max-width: 800px
}

.max-w-1000 {
    max-width: 1000px
}

.max-w-1100 {
    max-width: 1100px
}

.max-w-1200 {
    max-width: 1200px
}

.w-90 {
    width: 90%
}

.w-95 {
    width: 95%
}

.h-90vh {
    height: 90vh
}

.h-80vh {
    height: 80vh
}

.h-70vh {
    height: 70vh
}

.position-sticky {
    position: sticky
}

.bottom-0 {
    bottom: 0
}

.align-self-center {
    align-self: center
}

.border-bottom {
    border-bottom: 1px solid var(--border)
}

.border-top {
    border-top: 1px solid var(--border)
}

.border-top-dashed {
    border-top: 1px dashed #444
}

.bg-dark {
    background: rgba(0, 0, 0, .2)
}

.bg-dark-light {
    background: rgba(0, 0, 0, .1)
}

.bg-warning {
    background-color: rgba(255, 152, 0, .1);
    border: 1px solid rgba(255, 152, 0, .3)
}

.border-radius-4 {
    border-radius: 4px
}

.cursor-pointer {
    cursor: pointer
}

.white-space-nowrap {
    white-space: nowrap
}

.overflow-hidden {
    overflow: hidden
}

.overflow-y-auto {
    overflow-y: auto
}

.outline-none {
    outline: 0
}

.box-sizing-border {
    box-sizing: border-box
}

.header-title-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0
}

.header-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0
}

.welcome-title {
    color: gold;
    margin-bottom: 20px;
    font-size: 1.5rem
}

.welcome-text {
    color: #ddd;
    font-size: 1.1rem;
    margin-bottom: 30px
}

.add-btn-icon {
    font-size: 1.2rem;
    margin-right: 4px
}

.empty-equip-message {
    display: none;
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: .95rem;
    border-bottom: 1px solid var(--border)
}

.sim-header-controls {
    display: flex;
    align-items: center;
    gap: 10px
}

.sim-label {
    color: var(--text-main);
    font-size: .9rem
}

.panel-checkbox-container {
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, .2);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px
}

.panel-checkbox-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

.panel-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-main);
    font-size: .85rem
}

.panel-checkbox-input {
    width: 16px;
    height: 16px;
    cursor: pointer
}

.banner-footer-content {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #444
}

.banner-footer-text {
    font-size: .8rem;
    color: #888
}

.modal-content-small {
    max-width: 400px
}

.modal-content-medium {
    max-width: 600px
}

.modal-content-large {
    max-width: 1000px;
    width: 90%
}

.modal-content-xlarge {
    max-width: 1100px;
    height: 90vh;
    display: flex;
    flex-direction: column
}

.modal-content-export {
    max-width: 800px;
    width: 90%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.modal-content-picker {
    max-width: 500px;
    height: 70vh;
    display: flex;
    flex-direction: column
}

.modal-content-batch-result {
    max-width: 1200px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.modal-header-flex {
    display: flex;
    align-items: center;
    gap: 12px
}

.modal-title-no-margin {
    margin: 0
}

.form-row-center {
    align-items: center
}

.form-group-flex-row {
    flex: 0.6;
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    padding-top: 22px
}

.checkbox-wrapper {
    display: flex;
    align-items: center
}

.checkbox-input {
    width: auto;
    margin-right: 5px;
    cursor: pointer
}

.checkbox-label {
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: 0
}

.checkbox-label-purple {
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: 0;
    color: #dfa8ff;
    font-weight: 700
}

.modal-footer-between {
    justify-content: space-between
}

.modal-footer-left {
    display: flex;
    align-items: center;
    gap: 10px
}

.modal-footer-right {
    display: flex;
    gap: 10px
}

.equip-transmute-cd-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

.equip-transmute-cd-wrap .danger-btn,
.equip-transmute-cd-wrap .secondary-btn {
    margin-left: 0
}

.transmute-cd-remove-btn {
    flex-shrink: 0;
    align-self: flex-start;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(244, 67, 54, .45);
    border-radius: 6px;
    background: rgba(244, 67, 54, .12);
    color: #e57373;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.transmute-cd-remove-btn:hover {
    background: rgba(244, 67, 54, .28);
    color: #ffab91
}

.ocr-btn-blue {
    border-color: #2196f3;
    color: #2196f3
}

.ocr-result-info {
    font-size: .85rem;
    color: #888;
    display: none
}

.ocr-modal-z-index {
    z-index: 2000
}

.ocr-result-modal-z-index {
    z-index: 2001
}

.ocr-example-container {
    text-align: center;
    margin-bottom: 15px
}

.ocr-example-img {
    max-width: 100%;
    border: 1px solid #444;
    border-radius: 4px;
    display: block;
    margin: 0 auto
}

.ocr-example-text {
    color: #a0a0a0;
    font-size: .9rem;
    margin-top: 5px
}

.ocr-paste-area-inline {
    outline: 0;
    min-height: 200px;
    border: 2px dashed #555;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #1a1a1a
}

.ocr-preview-hidden {
    display: none !important
}

.ocr-progress-wrapper-inline {
    width: 100%;
    display: block
}

.progress-bar-container-inline {
    width: 100%;
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
    display: block
}

.ocr-progress-fill-inline {
    height: 100%;
    background: #4caf50;
    transition: width .3s;
    width: 0%;
    display: block;
    visibility: visible
}

.ocr-status-text-inline {
    color: #aaa;
    font-size: .9rem;
    margin: 0;
    display: block
}

.grad-layout-container-inline {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex: 1
}

.grad-excel-rate-box {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, .1)
}

.grad-excel-rate-text {
    font-size: .8rem;
    color: #888;
    text-align: center
}

.grad-meta-info-inline {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, .2)
}

.grad-meta-text {
    font-size: .85rem;
    color: var(--text-sub);
    margin-bottom: 8px
}

.grad-meta-item {
    margin-bottom: 4px
}

.compare-slot-title {
    margin-right: auto
}

.compare-header-controls {
    display: flex;
    gap: 15px
}

.tab-placeholder {
    color: #666;
    text-align: center;
    margin-top: 50px
}

.stat-priority-container {
    display: flex;
    gap: 20px;
    height: 100%;
    min-height: 500px
}

.stat-priority-panel {
    flex: 1;
    display: flex;
    flex-direction: column
}

.stat-priority-title-red {
    color: #f44336;
    margin-bottom: 15px;
    font-size: 1.1rem
}

.stat-priority-title-green {
    color: #4caf50;
    margin-bottom: 15px;
    font-size: 1.1rem
}

.stat-priority-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px;
    background: rgba(0, 0, 0, .2)
}

.cultivation-content-inline {
    height: 100%;
    overflow-y: auto;
    padding: 15px
}

.picker-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px
}

.float-window-title {
    font-weight: 700;
    color: var(--text-main)
}

.float-img {
    max-width: 100%;
    height: auto;
    border-radius: 4px
}

.export-import-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden
}

.export-import-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap
}

.export-import-textarea-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}

.export-import-label {
    color: var(--text-sub);
    font-size: .9rem;
    margin-bottom: 8px
}

.export-import-textarea {
    flex: 1;
    width: 100%;
    padding: 12px;
    background-color: var(--bg-color);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: monospace;
    font-size: .85rem;
    resize: none;
    border-radius: 4px;
    box-sizing: border-box;
    min-height: 0
}

.import-warning {
    display: none;
    margin-top: 15px;
    padding: 15px;
    background-color: rgba(255, 152, 0, .1);
    border: 1px solid rgba(255, 152, 0, .3);
    border-radius: 4px
}

.import-warning-title {
    color: #ff9800;
    margin: 0 0 10px 0;
    font-weight: 700
}

.import-warning-text {
    color: var(--text-main);
    margin: 0 0 10px 0
}

.batch-ocr-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden
}

.batch-ocr-text {
    color: var(--text-sub);
    font-size: .9rem;
    margin-bottom: 15px
}

.batch-ocr-form-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px
}

.batch-ocr-label {
    color: var(--text-sub);
    font-size: .9rem;
    margin-bottom: 8px;
    display: block
}

.batch-ocr-select {
    width: 100%;
    padding: 8px;
    background-color: var(--bg-color);
    border: 1px solid var(--border);
    color: var(--text-main);
    border-radius: 4px;
    font-size: .9rem
}

.batch-ocr-textarea-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}

.batch-ocr-textarea {
    flex: 1;
    width: 100%;
    padding: 12px;
    background-color: var(--bg-color);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: monospace;
    font-size: .85rem;
    resize: none;
    border-radius: 4px;
    box-sizing: border-box;
    min-height: 0
}

.batch-ocr-footer {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: flex-end
}

.batch-ocr-result-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
    position: relative
}

.batch-ocr-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    width: 100%
}

.batch-ocr-result-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-color);
    padding: 15px 0;
    margin-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end
}

@media (max-width:768px) {

    #simulator-panel .panel-checkbox-container,
    #simulator-panel .sim-layout-container,
    #simulator-panel .xinfa-section {
        display: none
    }

    #simulator-panel .scheme-controls {
        flex-wrap: wrap
    }

    #simulator-panel .scheme-controls::after {
        content: "▼ 点击展开装备、心法详情";
        display: block;
        width: 100%;
        flex-basis: 100%;
        text-align: center;
        font-size: 12px;
        color: var(--accent);
        margin-top: 5px;
        padding: 5px;
        background: rgba(0, 0, 0, .2);
        border-radius: 4px;
        cursor: pointer
    }

    #simulator-panel.expanded .sim-layout-container {
        display: flex !important
    }

    #simulator-panel.expanded .xinfa-section {
        display: block !important
    }

    #simulator-panel.expanded .panel-checkbox-container {
        display: flex !important
    }

    #simulator-panel.expanded .scheme-controls::after {
        content: "▲ 点击收起装备、心法详情"
    }
}

@media (max-width:768px) {
    #ocr-image-preview-float {
        width: 100% !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        border-radius: 12px 12px 0 0;
        max-height: 50vh
    }

    #simulator-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        left: 0 !important;
        right: 0 !important
    }

    .sim-slot {
        min-width: 40px
    }

    .sim-slots-grid {
        gap: 1px
    }

    #simulator-panel.expanded .sim-layout-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 5px !important;
        padding: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important
    }

    .sim-slots-grid {
        flex: 4 !important;
        width: auto !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: repeat(2, auto) !important;
        margin: 0 !important
    }

    .sim-slot {
        width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: 1 !important;
        height: auto !important
    }

    .sim-side-panel {
        flex: 1.6 !important;
        width: auto !important;
        min-width: 0 !important;
        align-self: stretch !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding-left: 5px !important;
        border-left: 1px dashed #444 !important;
        margin: 0 !important
    }

    .bow-slot {
        width: 45px !important;
        height: 45px !important;
        margin: 8px auto 8px auto !important
    }

    .sim-controls {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important
    }

    .mini-select {
        width: 100% !important;
        font-size: 10px !important;
        padding: 2px 0 !important;
        height: auto !important
    }
}