:root {
    --bg-base: #090d16;
    --bg-panel: #111827;
    --bg-input: #1f2937;
    --border-color: #374151;
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    
    --accent-blue: #3b82f6;
    --accent-orange: #f97316;
    --accent-green: #10b981;
    
    --font-stack: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: var(--font-stack);
    font-size: 14px;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#app {
    display: flex;
    flex: 1;
    height: calc(100vh - 52px);
    width: 100vw;
    overflow: hidden;
}

.sidebar {
    width: 280px;
    background-color: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 16px 20px 30px 20px;
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar-header {
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-header h2 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.sidebar-header p {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}

.section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.form-group select {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-main);
    padding: 8px 12px;
    font-family: var(--font-stack);
    outline: none;
    cursor: pointer;
    font-size: 13.5px;
    transition: border-color 0.15s ease;
}

.form-group select:focus {
    border-color: var(--accent-blue);
}

.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
    background-color: var(--bg-base);
}

.card-selection-section {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.deck-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.deck-slot {
    background-color: var(--bg-base);
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    min-height: 116px;
    position: relative;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.slot-number {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.search-container {
    width: 100%;
    position: relative;
}

.card-search-input {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-main);
    padding: 6px 10px;
    font-size: 13px;
    font-family: var(--font-stack);
    outline: none;
}

.card-search-input:focus {
    border-color: var(--accent-blue);
}

.suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 250px;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    margin-top: 4px;
}

.suggestions-dropdown .suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.suggestions-dropdown .suggestion-item:hover {
    background-color: var(--bg-input);
}

.suggestions-dropdown .suggestion-item .item-title {
    font-weight: 600;
    color: var(--text-main);
}

.suggestions-dropdown .suggestion-item .item-meta {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}

.selected-card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.card-frame {
    width: 75px;
    height: 100px;
    border-radius: 4px;
    position: relative;
    background-size: cover;
    background-position: center top;
    border: 1px solid var(--border-color);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.4) 65%, transparent);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selected-card-info .remove-card-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.85);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    transition: background 0.2s ease, transform 0.1s ease;
    z-index: 10;
}

.selected-card-info .remove-card-btn:hover {
    background: rgba(220, 38, 38, 1);
    transform: scale(1.1);
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
}

.card-title {
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-main);
    text-decoration: none;
}
.card-title:hover {
    color: #60a5fa;
    text-decoration: underline;
}

.card-rarity {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 2px;
    background-color: #374151;
    color: #fff;
    flex-shrink: 0;
}

.card-details {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.card-type {
    font-weight: 500;
}

.remove-card-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
}

.remove-card-btn:hover {
    color: #ef4444;
}

.chain-event-choices {
    margin-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.07);
    padding-top: 5px;
}

.chain-event-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.chain-event-btn-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chain-event-choice-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    font-family: var(--font-stack);
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
    width: 100%;
}

.chain-event-choice-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.chain-event-choice-btn.active {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.45);
}

.choice-index {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-right: 2px;
    flex-shrink: 0;
}

.chain-event-choice-btn.active .choice-index {
    color: #60a5fa;
}

.choice-skill-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    cursor: help;
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.choice-skill-pill.gold {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

.choice-skill-pill.white {
    background: rgba(156, 163, 175, 0.1);
    border: 1px solid rgba(156, 163, 175, 0.25);
    color: #d1d5db;
}

.choice-skill-pill.unknown {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.results-section {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.tab-buttons {
    display: flex;
    gap: 16px;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-stack);
    font-size: 13px;
    font-weight: 500;
    padding-bottom: 10px;
    cursor: pointer;
    position: relative;
    outline: none;
}

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

.tab-btn.active {
    color: var(--text-main);
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--accent-blue);
}

.sort-selector-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.sort-selector-container select {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-main);
    padding: 4px 8px;
    font-family: var(--font-stack);
    outline: none;
    font-size: 11px;
    cursor: pointer;
}

.tab-panes {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tab-pane {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.tab-pane.active {
    display: flex;
}

.list-headers {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr 1.2fr 1.2fr;
    border-bottom: 1px solid var(--border-color);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

#pane-green .list-headers,
#pane-debuff .list-headers {
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 2fr;
}

#pane-stamina .list-headers {
    grid-template-columns: 2fr 1fr 1fr 1.2fr 1.2fr 2fr;
}

#pane-deck .list-headers {
    grid-template-columns: 2fr 0.8fr 1fr 1fr 1.2fr 1fr 1.2fr 1.2fr;
}

.skills-list {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}

.skill-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr 1.2fr 1.2fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
    align-items: center;
    font-size: 13.5px;
    transition: background-color 0.15s ease;
}

#pane-green .skill-row,
#pane-debuff .skill-row {
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 2fr;
}

#pane-stamina .skill-row {
    grid-template-columns: 2fr 1fr 1fr 1.2fr 1.2fr 2fr;
}

#pane-deck .skill-row {
    grid-template-columns: 2fr 0.8fr 1fr 1fr 1.2fr 1fr 1.2fr 1.2fr;
}

.skill-row:hover {
    background-color: rgba(255, 255, 255, 0.01);
}

.skill-name-cell {
    display: flex;
    flex-direction: column;
}

.skill-name-jp {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text-main);
}

.skill-name-en {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.skill-stat-cell {
    font-family: monospace;
    font-size: 13.5px;
}

.stat-highlight-sp {
    color: var(--accent-blue);
    font-weight: 600;
}

.stat-highlight-raw {
    color: #a855f7;
    font-weight: 600;
}

.skill-desc-cell {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.sources-dropdown-container {
    display: flex;
    gap: 16px;
    margin-top: 4px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.sources-dropdown {
    flex: 1;
    min-width: 280px;
    margin-top: 0;
    display: block;
}

.sources-summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 500;
    user-select: none;
    outline: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    transition: color 0.15s ease;
}

.sources-summary::-webkit-details-marker {
    display: none;
}

.sources-summary:hover {
    color: var(--text-main);
}

.sources-summary::after {
    content: "▼";
    font-size: 8px;
    display: inline-block;
    transition: transform 0.15s ease;
    color: var(--text-muted);
}

.sources-dropdown[open] .sources-summary::after {
    transform: rotate(180deg);
}

.sources-dropdown .skill-sources {
    margin-top: 6px;
    padding: 6px;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    border: 1px dashed var(--border-color);
}

.skill-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.source-badge {
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 2px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: all 0.15s ease;
}
.source-badge:hover {
    color: var(--text-main);
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #60a5fa;
    box-shadow: 0 0 4px rgba(96, 165, 250, 0.2);
}

.source-badge.badge-hint {
    border-color: rgba(59, 130, 246, 0.3);
}

.source-badge.badge-event {
    border-color: rgba(249, 115, 22, 0.3);
}

.source-badge.badge-innate {
    border-color: rgba(16, 185, 129, 0.3);
}

.source-badge.badge-awakening {
    border-color: rgba(139, 92, 246, 0.3);
}

.source-badge.badge-evo {
    border-color: rgba(236, 72, 153, 0.3);
}

.penalty-tag {
    font-size: 10px;
    font-weight: 700;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background-color: rgba(239, 68, 68, 0.05);
    border-radius: 2px;
    padding: 1px 3px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    cursor: help;
}
.penalty-tag[data-mismatch="normal"] {
    color: var(--text-muted);
    border-color: var(--border-color);
    background-color: transparent;
}
.penalty-tag[data-mismatch="moderate"], .penalty-tag[data-mismatch="dependent"], .penalty-tag[data-mismatch="complex"], .penalty-tag[data-mismatch="gap"] {
    color: var(--accent-orange);
    border-color: rgba(249, 115, 22, 0.35);
    background-color: rgba(249, 115, 22, 0.06);
}

.btn {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: none;
    color: var(--text-main);
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--font-stack);
    outline: none;
    font-size: 12px;
    transition: background-color 0.15s ease;
}

.btn:hover {
    background-color: var(--bg-input);
}

.btn-secondary {
    border-color: var(--border-color);
}

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

.hidden {
    display: none !important;
}

body.server-en .lang-ja {
    display: none !important;
}

.type-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    display: inline-block;
}

.type-speed {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.type-stamina {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.type-accel {
    background-color: rgba(249, 115, 22, 0.1);
    color: var(--accent-orange);
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.type-hybrid {
    background-color: rgba(168, 85, 247, 0.1);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.skill-row.top-accel-highlight {
    background-color: rgba(249, 115, 22, 0.03);
    border-left: 3px solid var(--accent-orange);
}

.skill-row.top-accel-highlight:hover {
    background-color: rgba(249, 115, 22, 0.06);
}

.top-recommended-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-orange);
    border: 1px solid rgba(249, 115, 22, 0.4);
    background-color: rgba(249, 115, 22, 0.1);
    border-radius: 2px;
    padding: 1px 4px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

.connection-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-blue);
    border: 1px solid rgba(59, 130, 246, 0.4);
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 2px;
    padding: 1px 4px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    cursor: help;
}

.current-speed-tag {
    font-size: 10px;
    font-weight: 700;
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.4);
    background-color: rgba(168, 85, 247, 0.1);
    border-radius: 2px;
    padding: 1px 4px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    cursor: help;
}

.stamina-cost-tag {
    font-size: 10px;
    font-weight: 700;
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.4);
    background-color: rgba(249, 115, 22, 0.1);
    border-radius: 2px;
    padding: 1px 4px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    cursor: help;
}

.skills-list::-webkit-scrollbar {
    width: 6px;
}
.skills-list::-webkit-scrollbar-track {
    background: transparent;
}
.skills-list::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}

.skill-row {
    transition: background-color 0.15s ease, border-left-color 0.15s ease;
    cursor: pointer;
}

.skill-row:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.header-stat.active-sort {
    color: var(--text-main) !important;
    font-weight: 700 !important;
}

.header-stat.active-sort::after {
    content: " ▼";
    color: var(--accent-blue);
    font-size: 8px;
    margin-left: 2px;
    display: inline-block;
    vertical-align: middle;
}

.header-stat.header-raw, .header-stat.header-sp {
    cursor: help;
    text-decoration: underline dotted rgba(255, 255, 255, 0.2);
}

.skill-tooltip {
    position: absolute;
    background: rgba(18, 18, 24, 0.96);
    border: 1px solid #3f3f46;
    border-radius: 6px;
    padding: 14px;
    z-index: 9999;
    width: 340px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.1);
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-stack);
    pointer-events: none;
    transition: opacity 0.1s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    backdrop-filter: blur(8px);
}

.tooltip-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 6px;
    margin-bottom: 2px;
}

.tooltip-title-jp {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    display: block;
}

.tooltip-title-en {
    font-size: 10px;
    color: var(--accent-blue);
    display: block;
    margin-top: 1px;
}

.tooltip-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 6px;
}

.tooltip-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tooltip-meta-label {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.tooltip-meta-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
}

.tooltip-desc-section {
    line-height: 1.4;
}

.tooltip-desc-title {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    margin-bottom: 2px;
    display: block;
}

.tooltip-desc-text-ja {
    color: #e4e4e7;
    margin-bottom: 4px;
    display: block;
}

.tooltip-desc-text-en {
    color: #a1a1aa;
    font-style: italic;
    display: block;
}

.gold-skill-highlight {
    border-left: 3px solid #eab308 !important;
    background: rgba(234, 179, 8, 0.04) !important;
}
.gold-skill-highlight:hover {
    background: rgba(234, 179, 8, 0.08) !important;
}

button.tab-btn[data-tab="deck"] {
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    background: rgba(139, 92, 246, 0.06) !important;
    color: #c4b5fd !important;
}
button.tab-btn[data-tab="deck"]:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #ddd6fe !important;
}
button.tab-btn[data-tab="deck"].active {
    background: #8b5cf6 !important;
    color: #ffffff !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.45) !important;
}

.valuable-skill-highlight {
    border-left: 3px solid #eab308 !important;
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.03) 0%, rgba(234, 179, 8, 0) 100%) !important;
}
.valuable-skill-highlight:hover {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.06) 0%, rgba(234, 179, 8, 0.02) 100%) !important;
}

.valuable-skill-badge {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fef08a;
    border: 1px solid rgba(234, 179, 8, 0.35);
    font-size: 9.5px;
    padding: 1.5px 5px;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

#advanced-toggles-container.unlocked {
    opacity: 1 !important;
    pointer-events: auto !important;
    background-color: rgba(59, 130, 246, 0.04) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}
#advanced-toggles-container.unlocked label {
    cursor: pointer !important;
    color: var(--text-main) !important;
}
#advanced-toggles-container.unlocked label:hover {
    color: #60a5fa !important;
}

#advanced-sliders-container.unlocked {
    opacity: 1 !important;
    pointer-events: auto !important;
    background-color: rgba(59, 130, 246, 0.04) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}
#advanced-sliders-container.unlocked .slider-group span {
    color: var(--text-main) !important;
}
#advanced-sliders-container.unlocked input[type="range"] {
    cursor: pointer !important;
}

.opening-leg-tag {
    background-color: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
    border: 1px solid rgba(45, 212, 191, 0.35);
    font-size: 9.5px;
    padding: 1.5px 5px;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.tooltip-groups-divider {
    grid-column: span 3;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-blue);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 8px;
    padding-top: 6px;
    letter-spacing: 0.5px;
}

.tooltip-group-item {
    grid-column: span 3;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 6px 8px;
    margin-top: 4px;
    font-size: 10px;
}

.tooltip-group-item.active-best-group {
    background-color: rgba(168, 85, 247, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.group-title {
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 4px;
}

.group-score {
    font-weight: 700;
    color: var(--accent-orange);
}

.group-best-badge {
    background-color: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.4);
    font-size: 8px;
    padding: 0px 4px;
    border-radius: 2px;
    font-weight: 700;
}

.group-condition {
    color: var(--text-muted);
    margin-bottom: 4px;
}
.cond-code { display: block; font-family: monospace; font-size: 11px; line-height: 1.45; color: #d4d4d8; background: rgba(0, 0, 0, 0.25); padding: 3px 6px; border-radius: 4px; white-space: normal; word-break: normal; overflow-wrap: anywhere; }

.group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-main);
    font-size: 9px;
    font-weight: 500;
}

.mid-leg-tag {
    font-size: 9px;
    font-weight: 600;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 4px;
    padding: 1px 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.skill-row:has(.cell-stacked-top) {
    align-items: stretch !important;
}

.cell-stacked-top,
.cell-stacked-bottom {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

.skill-row:has(.cell-stacked-top) .skill-stat-cell {
    justify-content: flex-start !important;
    align-self: flex-start !important;
    gap: 4px !important;
    padding-top: 0px !important;
    margin-top: 0px !important;
}

.skill-row:has(.cell-stacked-top) .skill-stat-cell .cell-stacked-top,
.skill-row:has(.cell-stacked-top) .skill-stat-cell .cell-stacked-bottom {
    align-items: center;
    text-align: center;
    width: 100%;
}

.sidebar-dropdown {
    width: 100%;
}

.sidebar-dropdown-summary::-webkit-details-marker {
    display: none;
}

.sidebar-dropdown-summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sidebar-dropdown-summary:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-main);
}

.sidebar-dropdown[open] .sidebar-dropdown-summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
}

.sidebar-dropdown[open] .dropdown-arrow {
    transform: rotate(180deg);
}

.sidebar-dropdown > div {
    border: 1px solid var(--border-color);
    border-top: none !important;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-top: 0 !important;
}

.popularity-tag {
    font-size: 10px;
    font-weight: 700;
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.4);
    background-color: rgba(245, 158, 11, 0.1);
    border-radius: 2px;
    padding: 1px 4px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    cursor: help;
}

.suggestion-item .item-stars {
    color: #fbbf24;
    font-size: 11px;
    margin-left: auto;
}

.browser-track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}
.browser-track-header:hover {
    background: rgba(255, 255, 255, 0.06);
}

.browser-course-item {
    padding: 4px 12px;
    font-size: 10.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 3px;
    margin: 2px 0 2px 8px;
    transition: background 0.15s ease;
}

.browser-race-link {
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    margin: 1px 0 1px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    transition: background 0.15s ease, color 0.15s ease;
}
.browser-race-link:hover {
    background: rgba(96, 165, 250, 0.1);
    color: var(--text-main);
}

.grade-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 1px 4.5px;
    border-radius: 3px;
    text-transform: uppercase;
    line-height: 1;
}
.grade-g1 { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.grade-g2 { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
.grade-g3 { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.grade-l  { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.grade-op { background: rgba(156, 163, 175, 0.15); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.3); }

.app-header-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0f1015;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 24px;
    position: sticky;
    top: 0;
    z-index: 500;
}
.nav-tab-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-family: var(--font-stack);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}
.nav-tab-btn.active {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(168, 85, 247, 0.2));
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.3);
}

.page-container {
    width: 100%;
    flex: 1;
    height: calc(100vh - 52px);
    overflow: hidden;
}
.page-container.hidden {
    display: none !important;
}

#lineage-planner-page {
    padding: 10px 20px;
    height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);
    background-color: #0b0c10;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.lineage-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(24, 24, 27, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 16px;
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}
.lineage-toolbar-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lineage-toolbar label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}
.lineage-select, .lineage-input {
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}
#lineage-plan-select {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#lineage-plan-name {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    flex-shrink: 0;
}
.lineage-btn {
    background: #2563eb;
    border: none;
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.lineage-btn:hover { background: #1d4ed8; }
.lineage-btn.btn-danger { background: #dc2626; }
.lineage-btn.btn-danger:hover { background: #b91c1c; }

.lineage-canvas-wrapper {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#lineage-tree-canvas {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 33px;
    height: 100%;
    width: 100%;
    max-width: 1628px;
    padding: 14px 0 10px 0;
}

.lineage-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.lineage-section.upper {
    gap: 33px;
}

.lineage-section.lower {
    gap: 33px;
}

.lineage-tier-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.lineage-tier-header {
    font-size: 10px;
    font-weight: 800;
    color: #60a5fa;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.85;
}

.lineage-tier {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 79px;
    width: 100%;
}

.lineage-half {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
    gap: 35px;
}

.lineage-quarter {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
    gap: 18px;
}

.lineage-p-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 771px;
}

.lineage-g-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 368px;
}

.lineage-pair, .lineage-gg-slot {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 175px;
}

.lineage-pair {
    gap: 7px;
}

.lineage-card {
    background: #161822;
    border: 1.5px solid #2e3448;
    border-radius: 8px;
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    position: relative;
    user-select: none;
}
.lineage-card.tier-1 { width: 231px; padding: 6px 9px; }
.lineage-card.tier-2 { width: 198px; padding: 4px 7px; }
.lineage-card.tier-3 { width: 171px; padding: 4px 6px; }
.lineage-card.compact { width: 143px; padding: 15px 7px; gap: 7px; }
.lineage-card.mini { width: 84px; padding: 13px 6px; gap: 7px; }

.lineage-card:hover {
    border-color: #60a5fa;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(96, 165, 250, 0.3);
}

.lineage-card[draggable="true"] {
    cursor: grab;
}
.lineage-card.dragging {
    opacity: 0.55;
    border-style: dashed !important;
    border-color: #60a5fa !important;
    cursor: grabbing;
}
.lineage-card.drag-over {
    border: 2px dashed #22c55e !important;
    background: rgba(34, 197, 94, 0.15) !important;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.6) !important;
    transform: scale(1.05);
}
.lineage-card.drag-over * {
    pointer-events: none;
}

.lineage-card-header {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.lineage-uma-img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3b4256;
    background: #0f1015;
}
.tier-2 .lineage-uma-img { width: 66px; height: 66px; }
.tier-3 .lineage-uma-img { width: 59px; height: 59px; }
.lineage-uma-img.compact { width: 57px; height: 57px; border-width: 1.5px; }
.lineage-uma-img.mini { width: 51px; height: 51px; border-width: 1.5px; }

@media (max-width: 900px) {
    #lineage-tree-canvas { max-width: 100%; }
    .lineage-tier { gap: 24px; }
    .lineage-half { gap: 10px; }
    .lineage-quarter { gap: 4px; }
    .lineage-pair { gap: 2px; }
    .lineage-card.tier-1 { width: 170px; }
    .lineage-card.tier-2 { width: 145px; }
    .lineage-card.tier-3 { width: 120px; }
    .lineage-card.compact { width: 80px; }
    .lineage-card.mini { width: 46px; }
    .lineage-uma-img { width: 36px; height: 36px; }
    .tier-2 .lineage-uma-img { width: 32px; height: 32px; }
    .tier-3 .lineage-uma-img { width: 28px; height: 28px; }
    .lineage-uma-img.compact { width: 26px; height: 26px; }
    .lineage-uma-img.mini { width: 18px; height: 18px; }
}

@media (max-width: 600px) {
    .lineage-canvas-wrapper { padding: 4px; }
    #lineage-tree-canvas { min-width: 560px; }
    .lineage-tier { gap: 16px; }
    .lineage-half { gap: 6px; }
    .lineage-card.tier-1 { width: 140px; }
    .lineage-card.tier-2 { width: 120px; }
    .lineage-card.tier-3 { width: 100px; }
    .lineage-card.compact { width: 64px; }
    .lineage-card.mini { width: 38px; padding: 2px 1px; }
    .lineage-uma-img { width: 30px; height: 30px; }
    .tier-2 .lineage-uma-img { width: 26px; height: 26px; }
    .tier-3 .lineage-uma-img { width: 22px; height: 22px; }
    .lineage-uma-img.compact { width: 20px; height: 20px; }
    .lineage-uma-img.mini { width: 14px; height: 14px; }
}

.lineage-affinity-badge {
    position: absolute;
    bottom: -4px;
    background: #166534;
    color: #4ade80;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid #22c55e;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    white-space: nowrap;
    z-index: 2;
}

.lineage-affinity-badge.compact {
    font-size: 8px;
    padding: 0px 4px;
    bottom: -5px;
}

.lineage-apt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    width: 100%;
    margin-top: 2px;
}
.lineage-apt-item {
    background: #101118;
    border-radius: 4px;
    padding: 2px 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 9px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.lineage-apt-item.affected {
    background: rgba(236, 72, 153, 0.22) !important;
    border: 1.5px solid rgba(244, 114, 182, 0.7) !important;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.35) !important;
}
.lineage-apt-item.affected .lineage-apt-label {
    color: #fbcfe8 !important;
    font-weight: 700 !important;
}
.lineage-apt-item.upgraded {
    background: rgba(34, 197, 94, 0.25) !important;
    border: 1.5px solid #22c55e !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.55) !important;
}
.lineage-apt-item.upgraded .lineage-apt-label {
    color: #86efac !important;
    font-weight: 800 !important;
}
.lineage-apt-item.upgraded .lineage-apt-rank {
    font-weight: 900 !important;
    text-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.lineage-apt-label { color: #94a3b8; font-weight: 600; font-size: 8.5px; }
.lineage-apt-val { font-weight: 800; font-size: 11px; margin-top: 1px; }

.rank-S { color: #facc15; }
.rank-A { color: #f43f5e; }
.rank-B { color: #fb923c; }
.rank-C { color: #4ade80; }
.rank-D { color: #38bdf8; }
.rank-E { color: #818cf8; }
.rank-F { color: #c084fc; }
.rank-G { color: #9ca3af; }

.lineage-factor-picker { width: 100%; }
.lineage-factor-btn {
    width: 100%;
    background: #232736;
    border: 1px solid #3b4256;
    color: #f1f5f9;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s ease;
}
.lineage-factor-btn.compact {
    padding: 2px 4px;
    font-size: 9px;
}
.lineage-factor-btn.mini {
    padding: 2px 2px;
    font-size: 8.5px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    line-height: 1.15;
    width: 100%;
}
.lineage-factor-btn.mini .apt-name {
    font-size: 8.5px;
    font-weight: 700;
    color: #f1f5f9;
}
.lineage-factor-btn.mini .stars {
    color: #ec4899;
    font-weight: 800;
    font-size: 8.5px;
}
.lineage-factor-btn:hover { background: #2d3246; border-color: #60a5fa; }
.lineage-factor-btn .stars { color: #ec4899; font-weight: bold; font-size: 10px; }

.lineage-factor-btn.has-warning {
    border-color: #854d0e !important;
    background: rgba(180, 115, 20, 0.12) !important;
    color: #d9a046 !important;
}

.lineage-factor-btn.has-warning:hover {
    background: rgba(180, 115, 20, 0.22) !important;
    border-color: #b45309 !important;
    color: #fbbf24 !important;
}

.lineage-uma-name {
    font-size: 11px;
    font-weight: 700;
    color: #f8fafc;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    cursor: pointer;
}

.lineage-compact-tag, .lineage-mini-tag {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 600;
}

.lineage-popover {
    position: absolute;
    z-index: 1000;
    background: #1e202a;
    border: 1px solid #3b4256;
    border-radius: 8px;
    padding: 12px;
    width: 180px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.popover-title { font-size: 11px; font-weight: 700; color: #fff; }
.popover-group { display: flex; flex-direction: column; gap: 4px; }
.popover-group label { font-size: 10px; color: #94a3b8; }
.popover-group select { background: #0f1015; border: 1px solid #334155; color: #fff; padding: 4px; border-radius: 4px; font-size: 11px; }
.popover-actions { display: flex; gap: 6px; margin-top: 4px; }
.popover-apply-btn { flex: 1; background: #16a34a; border: none; color: #fff; padding: 4px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
.popover-clear-btn { flex: 1; background: #475569; border: none; color: #fff; padding: 4px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }

.lineage-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lineage-modal-overlay.hidden { display: none; }
.lineage-modal-content {
    background: #161822;
    border: 1px solid #334155;
    border-radius: 12px;
    width: 550px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lineage-modal-header {
    padding: 14px 20px;
    background: #1e202e;
    border-bottom: 1px solid #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lineage-modal-title { font-size: 15px; font-weight: 700; color: #fff; }
.lineage-modal-close { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; }
.lineage-modal-search { padding: 12px 20px; border-bottom: 1px solid #282c3c; }
.lineage-modal-search input { width: 100%; background: #0f1015; border: 1px solid #334155; color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.lineage-modal-list {
    padding: 14px 20px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-height: 450px;
}
.lineage-modal-card {
    background: #1e202e;
    border: 1px solid #2e3448;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.lineage-modal-card:hover { background: #2b2e42; border-color: #60a5fa; }
.modal-uma-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.modal-uma-info { display: flex; flex-direction: column; overflow: hidden; }
.modal-uma-title { font-size: 10px; color: #94a3b8; }
.modal-uma-name { font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1200px) {
    .deck-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (max-width: 900px) {
    body {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    #app {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        width: 100vw;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        overflow-y: visible;
    }

    .main-content {
        width: 100%;
        overflow-y: visible;
        padding: 12px;
    }

    .results-controls-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .results-controls {
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
    }

    .skill-search-container, .sort-selector-container {
        flex: 1;
        min-width: 140px;
    }

    .skill-search-container input, .sort-selector-container select {
        width: 100%;
    }

    .tab-buttons {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        gap: 6px;
    }

    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .tab-pane {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .list-headers, .skills-list {
        min-width: 780px;
    }

    .pane-filters-row {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .deck-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .deck-toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .strat-btn-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        width: 100%;
    }

    .strat-deck-wrapper {
        width: 100%;
        justify-content: space-between;
    }

    .load-strat-deck-btn {
        flex: 1;
        text-align: center;
    }

    .pane-filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .pane-filters-row select {
        width: 100%;
    }

    .card-selection-section {
        padding: 10px;
    }
}

#lineage-tree-canvas.list-mode {
    max-width: 1400px;
    width: 100%;
    height: auto;
    overflow-y: auto;
}

.lineage-mobile-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    width: 100%;
    padding: 8px 4px;
    align-items: start;
}

.lineage-mobile-list .sec-p1 { grid-column: 1; grid-row: 1; }
.lineage-mobile-list .sec-ace { grid-column: 2; grid-row: 1; }
.lineage-mobile-list .sec-p2 { grid-column: 3; grid-row: 1; }

@media (max-width: 960px) {
    #lineage-tree-canvas.list-mode {
        max-width: 650px;
    }
    .lineage-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .lineage-mobile-list .sec-ace { order: 1; }
    .lineage-mobile-list .sec-p1 { order: 2; }
    .lineage-mobile-list .sec-p2 { order: 3; }
}

.lineage-list-section {
    background: #12141d;
    border: 1.5px solid #2e3448;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.lineage-list-header {
    font-size: 12px;
    font-weight: 800;
    color: #60a5fa;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px dashed #2e3448;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lineage-list-header.small {
    font-size: 11px;
    color: #94a3b8;
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 4px;
}

.lineage-list-card-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.lineage-list-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #181a26;
    border: 1px solid #2a2e3f;
    border-radius: 8px;
    padding: 10px;
}

.lineage-list-subgroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: #10121a;
    border: 1px solid #222634;
    border-radius: 6px;
    padding: 8px;
}

.lineage-list-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
}

.lineage-list-pairs {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 2px;
}

.affinity-breakdown-content {
    width: 500px;
    max-width: 95vw;
    background: #141620;
    border: 1.5px solid #2e3448;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75);
}

.affinity-breakdown-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #11131a;
}

.aff-bd-card.ace-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #1a1d2b;
    border: 1.5px solid #3b4256;
    border-radius: 12px;
    padding: 12px 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.aff-bd-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #475569;
    background: #090a0d;
}

.aff-bd-img.large {
    width: 60px;
    height: 60px;
    border-color: #60a5fa;
}

.aff-bd-img.mini {
    width: 32px;
    height: 32px;
}

.aff-bd-total-badge {
    background: #15803d;
    color: #86efac;
    font-size: 16px;
    font-weight: 800;
    padding: 4px 16px;
    border-radius: 20px;
    border: 1.5px solid #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.aff-bd-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.aff-bd-item {
    flex: 1;
    background: #181b27;
    border: 1px solid #2d3345;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.aff-bd-item.center {
    border-color: #475569;
    background: #1c2030;
}

.aff-bd-pair-imgs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aff-bd-pair-imgs .aff-bd-img + .aff-bd-img {
    margin-left: -10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.aff-bd-badge {
    background: #166534;
    color: #4ade80;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid #22c55e;
}

.aff-bd-label {
    font-size: 9.5px;
    color: #94a3b8;
    font-weight: 600;
    text-align: center;
}

#deck-builder-section.collapsed .deck-toolbar-row,
.deck-builder-section.collapsed .deck-toolbar-row {
    display: none !important;
}

#deck-builder-section.collapsed .deck-grid,
.deck-builder-section.collapsed .deck-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
    min-height: auto !important;
}

@media (max-width: 1200px) {
    #deck-builder-section.collapsed .deck-grid,
    .deck-builder-section.collapsed .deck-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    #deck-builder-section.collapsed .deck-grid,
    .deck-builder-section.collapsed .deck-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

#deck-builder-section.collapsed .deck-slot,
.deck-builder-section.collapsed .deck-slot {
    padding: 4px 8px !important;
    min-height: auto !important;
    height: 36px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: rgba(24, 24, 27, 0.7) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

#deck-builder-section.collapsed .deck-slot:hover,
.deck-builder-section.collapsed .deck-slot:hover {
    border-color: rgba(96, 165, 250, 0.5) !important;
    background: rgba(30, 41, 59, 0.85) !important;
}

#deck-builder-section.collapsed .slot-number,
.deck-builder-section.collapsed .slot-number {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #93c5fd !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

#deck-builder-section.collapsed .card-frame,
.deck-builder-section.collapsed .card-frame,
#deck-builder-section.collapsed .remove-card-btn,
.deck-builder-section.collapsed .remove-card-btn,
#deck-builder-section.collapsed .chain-event-choices,
.deck-builder-section.collapsed .chain-event-choices,
#deck-builder-section.collapsed .chain-event-label,
.deck-builder-section.collapsed .chain-event-label,
#deck-builder-section.collapsed .chain-event-btn-row,
.deck-builder-section.collapsed .chain-event-btn-row,
#deck-builder-section.collapsed .card-date,
.deck-builder-section.collapsed .card-date,
#deck-builder-section.collapsed .card-type,
.deck-builder-section.collapsed .card-type,
#deck-builder-section.collapsed .card-rarity,
.deck-builder-section.collapsed .card-rarity,
#deck-builder-section.collapsed .slot-filters,
.deck-builder-section.collapsed .slot-filters,
#deck-builder-section.collapsed .card-search-input,
.deck-builder-section.collapsed .card-search-input,
#deck-builder-section.collapsed .suggestions-dropdown,
.deck-builder-section.collapsed .suggestions-dropdown,
#deck-builder-section.collapsed .source-badge,
.deck-builder-section.collapsed .source-badge,
#deck-builder-section.collapsed .card-text-container > div > div,
.deck-builder-section.collapsed .card-text-container > div > div {
    display: none !important;
}

#deck-builder-section.collapsed .search-container.hidden,
.deck-builder-section.collapsed .search-container.hidden {
    display: none !important;
}

#deck-builder-section.collapsed .search-container:not(.hidden),
.deck-builder-section.collapsed .search-container:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#deck-builder-section.collapsed .search-container:not(.hidden)::after,
.deck-builder-section.collapsed .search-container:not(.hidden)::after {
    content: "Empty Slot";
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

#deck-builder-section.collapsed .selected-card-info.hidden,
.deck-builder-section.collapsed .selected-card-info.hidden {
    display: none !important;
}

#deck-builder-section.collapsed .selected-card-info:not(.hidden),
.deck-builder-section.collapsed .selected-card-info:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#deck-builder-section.collapsed .card-row,
.deck-builder-section.collapsed .card-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
    position: static !important;
}

#deck-builder-section.collapsed .card-text-container,
.deck-builder-section.collapsed .card-text-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

#deck-builder-section.collapsed .card-text-container > div,
.deck-builder-section.collapsed .card-text-container > div {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    overflow: hidden !important;
}

#deck-builder-section.collapsed .card-title,
.deck-builder-section.collapsed .card-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    color: #f4f4f5 !important;
    text-decoration: none !important;
    width: 100% !important;
}

.rare-new-skill-tag {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(249, 115, 22, 0.25)) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(234, 179, 8, 0.45) !important;
    font-size: 9.5px !important;
    padding: 1.5px 5px !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.15) !important;
}

.skill-row.rare-new-skill-highlight {
    border-left: 4px solid #fbbf24 !important;
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.08) 0%, rgba(24, 24, 27, 0) 100%) !important;
    box-shadow: inset 0 0 12px rgba(234, 179, 8, 0.03) !important;
}

.rare-unique-tag {
    background-color: rgba(168, 85, 247, 0.15) !important;
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    font-size: 10px !important;
    padding: 1.5px 5px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

.planning-ahead-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    user-select: none;
}
.form-group .planning-ahead-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    cursor: pointer;
}
.form-group select.planning-ahead-months {
    width: auto;
    padding: 1px 4px;
    font-size: 11px;
    border-radius: 3px;
}
.form-group select.planning-ahead-months:disabled {
    opacity: 0.5;
    cursor: default;
}
@media (max-width: 900px) {
    .planning-ahead-row, .form-group .planning-ahead-label { font-size: 13px; }
    .form-group select.planning-ahead-months { font-size: 13px; padding: 4px 6px; }
}

.planning-ahead-tag {
    background-color: rgba(96, 165, 250, 0.15) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    font-size: 10px !important;
    padding: 1.5px 5px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

.deck-grid,
#deck-builder-section .deck-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.deck-slot { min-width: 0; }
.deck-slot .selected-card-info,
.deck-slot .card-details,
.deck-slot .selected-card-info > div { min-width: 0; }
.choice-skill-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1200px) {
    .deck-grid,
    #deck-builder-section .deck-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mobile-recommend-bar { display: none; }

@media (max-width: 900px) {
    body { font-size: 14px; }
    #app { width: 100%; overflow: visible; overflow-x: hidden; overflow-x: clip; }
    .main-content { padding: 12px; min-width: 0; }

    .app-header-nav { padding: 8px 12px !important; gap: 8px !important; }
    .nav-tab-btn { flex: 1; padding: 8px 10px !important; font-size: 13px !important; }

    .sidebar { padding: 14px 14px 18px 14px; }
    .sidebar .form-group { margin-bottom: 10px; }
    .sidebar select, .sidebar input[type="text"] { min-height: 40px; font-size: 15px; }
    .track-params-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
    .track-params-grid > .form-group.full-width { grid-column: 1 / -1; }

    .card-selection-section { min-width: 0 !important; width: 100%; }
    #cm-preset-banner { width: 100% !important; }
    #character-search { font-size: 15px !important; min-height: 40px; }

    .deck-grid,
    #deck-builder-section .deck-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
    #deck-builder-section.collapsed .deck-grid,
    .deck-builder-section.collapsed .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .deck-slot { min-height: 0; padding: 8px 10px; }
    .card-search-input { min-height: 40px; font-size: 15px; }
    .suggestions-dropdown { width: 100% !important; max-width: calc(100vw - 48px); }
    .deck-builder-section .section-header { flex-wrap: wrap; gap: 8px; }

    .results-controls-row { flex-direction: column !important; align-items: stretch !important; gap: 10px; }
    .results-controls { align-items: stretch !important; width: 100%; }
    .results-controls > div:first-child { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
    .skill-search-container, .sort-selector-container {
        flex-direction: column !important; align-items: stretch !important; gap: 4px !important; min-width: 0 !important;
    }
    #skill-search, #metric-selector { width: 100% !important; font-size: 15px !important; min-height: 40px; padding: 8px 10px !important; }

    .tab-buttons { gap: 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
    .tab-buttons::-webkit-scrollbar { display: none; }
    .tab-btn {
        scroll-snap-align: start; border: 1px solid var(--border-color) !important; border-radius: 999px !important;
        padding: 7px 12px !important; font-size: 12.5px !important;
    }
    .tab-btn.active { background: rgba(59, 130, 246, 0.18) !important; border-color: var(--accent-blue) !important; }

    .tab-pane { overflow-x: visible !important; }
    .list-headers { display: none !important; }
    .skills-list { min-width: 0 !important; }
    .skill-row,
    #pane-speed .skill-row, #pane-accel .skill-row, #pane-unique .skill-row,
    #pane-green .skill-row, #pane-debuff .skill-row, #pane-stamina .skill-row, #pane-deck .skill-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        row-gap: 8px; column-gap: 8px;
        padding: 12px !important;
        margin-bottom: 10px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--bg-panel);
    }
    .skill-row > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        row-gap: 8px; column-gap: 8px; padding: 4px 0 !important;
    }
    .skill-row[style*="flex-direction: column"] { padding: 10px 12px !important; }
    .skill-name-cell { grid-column: 1 / -1; min-width: 0; }
    .skill-stat-cell {
        display: flex; flex-direction: column; gap: 2px; text-align: left !important;
        font-size: 14px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); min-width: 0;
    }
    .skill-stat-cell::before {
        font-family: var(--font-stack); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--text-muted);
    }
    .skill-stat-cell:empty { display: none; }
    .sources-dropdown-container { flex-wrap: wrap; gap: 6px 12px; }

    :is(#pane-speed, #pane-accel, #pane-unique) .skill-stat-cell:nth-child(2)::before { content: "Duration"; }
    :is(#pane-speed, #pane-accel, #pane-unique) .skill-stat-cell:nth-child(3)::before { content: "Value"; }
    :is(#pane-speed, #pane-accel, #pane-unique) .skill-stat-cell:nth-child(4)::before { content: "Lengths"; }
    :is(#pane-speed, #pane-accel, #pane-unique) .skill-stat-cell:nth-child(5)::before { content: "SP Cost"; }
    :is(#pane-speed, #pane-accel, #pane-unique) .skill-stat-cell:nth-child(6)::before { content: "Score"; }
    :is(#pane-speed, #pane-accel, #pane-unique) .skill-stat-cell:nth-child(7)::before { content: "SP Efficiency"; }

    #pane-green .skill-stat-cell:nth-child(2)::before { content: "Stat"; }
    #pane-green .skill-stat-cell:nth-child(3)::before { content: "Value"; }
    #pane-green .skill-stat-cell:nth-child(4)::before { content: "SP Cost"; }
    #pane-green .skill-stat-cell:nth-child(5)::before { content: "Score"; }
    #pane-green .skill-stat-cell:nth-child(6)::before { content: "SP Efficiency"; }
    #pane-green .skill-stat-cell:nth-child(7)::before { content: "Track Match"; }

    #pane-debuff .skill-stat-cell:nth-child(2)::before { content: "Type"; }
    #pane-debuff .skill-stat-cell:nth-child(3)::before { content: "Value"; }
    #pane-debuff .skill-stat-cell:nth-child(4)::before { content: "SP Cost"; }
    #pane-debuff .skill-stat-cell:nth-child(5)::before { content: "Score"; }
    #pane-debuff .skill-stat-cell:nth-child(6)::before { content: "SP Efficiency"; }
    #pane-debuff .skill-stat-cell:nth-child(7)::before { content: "Status"; }

    #pane-stamina .skill-stat-cell:nth-child(2)::before { content: "Recovery"; }
    #pane-stamina .skill-stat-cell:nth-child(3)::before { content: "SP Cost"; }
    #pane-stamina .skill-stat-cell:nth-child(4)::before { content: "Score"; }
    #pane-stamina .skill-stat-cell:nth-child(5)::before { content: "SP Efficiency"; }
    #pane-stamina .skill-stat-cell:nth-child(6)::before { content: "Status"; }

    #pane-deck .skill-stat-cell:nth-child(2)::before { content: "Type"; }
    #pane-deck .skill-stat-cell:nth-child(3)::before { content: "Duration"; }
    #pane-deck .skill-stat-cell:nth-child(4)::before { content: "Value"; }
    #pane-deck .skill-stat-cell:nth-child(5)::before { content: "Lengths"; }
    #pane-deck .skill-stat-cell:nth-child(6)::before { content: "SP Cost"; }
    #pane-deck .skill-stat-cell:nth-child(7)::before { content: "Score"; }
    #pane-deck .skill-stat-cell:nth-child(8)::before { content: "SP Efficiency"; }

    #pane-green .skill-stat-cell:nth-child(7),
    #pane-debuff .skill-stat-cell:nth-child(7),
    #pane-stamina .skill-stat-cell:nth-child(6) { grid-column: 1 / -1; }

    .mobile-recommend-bar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(9, 9, 11, 0.92); backdrop-filter: blur(10px);
        border-top: 1px solid var(--border-color);
    }
    .mobile-recommend-bar button {
        flex: 1; min-height: 46px; font-size: 15px; font-weight: 700; border-radius: 10px;
        background-color: var(--accent-blue); border: 1px solid var(--accent-blue); color: #fff; cursor: pointer;
    }
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    #skill-tooltip { max-width: calc(100vw - 24px) !important; }
}

.deck-slot .card-text-container { min-width: 0; }
.deck-slot .card-frame { flex-shrink: 0; }
.deck-slot .card-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

@media (max-width: 900px) {
    .app-header-nav { padding: 8px 10px !important; gap: 8px !important; }
    .nav-tab-btn {
        flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
        padding: 8px 6px !important; font-size: 12.5px !important; gap: 4px !important; height: auto !important;
    }
    .sidebar #recommend-btn { display: none; }
    .sidebar-header { margin-bottom: 8px; }

    #pane-deck .skill-stat-cell:nth-child(2) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
    .skill-stat-cell > span, .skill-stat-cell > .badge { align-self: flex-start; width: auto !important; }

    :is(#pane-green, #pane-debuff, #pane-stamina) :is(.skill-row, .skill-row > div[style*="grid-template-columns"]) > :last-child:not(.skill-name-cell) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 901px) and (max-width: 1500px) {
    .deck-slot .card-frame { width: 54px !important; height: 72px !important; }
    .deck-slot .card-text-container { height: 72px !important; padding-right: 16px !important; }
    .deck-slot .card-date { white-space: nowrap; }
}

@media (max-width: 900px) {
    #skill-tooltip {
        position: fixed !important;
        left: 12px !important; right: 12px !important; top: auto !important;
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
        width: auto !important; max-width: none !important;
        max-height: 55vh; overflow-y: auto; z-index: 950 !important;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
    }
    .deck-toolbar-row { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
    .strat-btn-group { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
    .strat-deck-wrapper { width: 100%; justify-content: space-between; }
    .load-strat-deck-btn { flex: 1; min-height: 36px; font-size: 12.5px !important; }
    .save-strat-deck-btn { min-height: 36px; }
    .results-section { scroll-margin-top: 64px; }
}

body:has(#spark-suggestions-page.hidden) .mobile-recommend-bar { display: none !important; }
@media (max-width: 900px) {
    body:has(#spark-suggestions-page.hidden) { padding-bottom: 0; }
    .lineage-toolbar { flex-wrap: wrap !important; gap: 8px !important; padding: 10px !important; }
    .lineage-toolbar-group { flex-wrap: wrap !important; gap: 6px !important; width: 100%; }
    .lineage-toolbar-group > * { flex: 1 1 auto; min-height: 36px; }
    #lineage-plan-name, #lineage-plan-select { min-width: 0; flex: 1 1 40%; }
    #lineage-tree-canvas.list-mode { max-width: 100%; padding: 0; }
    .lineage-mobile-list { padding: 4px 0; }
}
@media (max-width: 760px) {
    .lineage-canvas-wrapper.list-mode { align-items: stretch !important; padding-left: 12px !important; padding-right: 12px !important; }
    #lineage-tree-canvas.list-mode { min-width: 0 !important; width: 100% !important; }
    .lineage-mobile-list, .lineage-list-section, .lineage-list-card-wrapper { min-width: 0 !important; width: 100% !important; }
}

.cost-original { margin-left: 6px; font-size: 0.82em; color: var(--text-muted); text-decoration: line-through; font-weight: 400; }

.stamina-check-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border-color); background: rgba(24, 24, 27, 0.6); font-size: 12px; line-height: 1.45; }
.stamina-check-banner.hidden { display: none; }
.stamina-check-title { font-weight: 700; margin-bottom: 6px; }
.stamina-check-detail { color: var(--text-muted); }
.stamina-check-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 6px; }
.stamina-check-bar span { display: block; height: 100%; border-radius: 3px; }
.stamina-check-banner.level-ok { border-color: rgba(34, 197, 94, 0.45); }
.stamina-check-banner.level-ok .stamina-check-title { color: #4ade80; }
.stamina-check-banner.level-ok .stamina-check-bar span { background: #22c55e; }
.stamina-check-banner.level-tight { border-color: rgba(234, 179, 8, 0.5); }
.stamina-check-banner.level-tight .stamina-check-title { color: #facc15; }
.stamina-check-banner.level-tight .stamina-check-bar span { background: #eab308; }
.stamina-check-banner.level-short { border-color: rgba(239, 68, 68, 0.55); }
.stamina-check-banner.level-short .stamina-check-title { color: #f87171; }
.stamina-check-banner.level-short .stamina-check-bar span { background: #ef4444; }

.card-lb-select {
    font-size: 10px;
    padding: 1px 2px;
    height: auto;
    width: auto;
    max-width: 64px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}
@media (max-width: 900px) {
    .card-lb-select { font-size: 13px; padding: 4px 4px; max-width: none; }
}

.skill-parts-summary {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.event-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rival-chips { margin-top: 6px; align-items: center; }
.rival-chips-label { font-size: 12px; color: var(--text-muted); margin-right: 2px; }
.event-chip {
    flex: 1 1 auto;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.event-chip.active {
    border-color: var(--accent-blue);
    color: var(--text-main);
    background: rgba(96, 165, 250, 0.12);
    font-weight: 600;
}
.field-summary { font-size: 10.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; }
.field-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px dashed rgba(250, 204, 21, 0.6);
    color: #facc15;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .event-chip { font-size: 14px; padding: 9px 12px; }
}
.roll-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    margin-left: 4px;
}
.roll-tag.stable { border: 1px solid rgba(74, 222, 128, 0.45); color: #4ade80; }
.roll-tag.swingy { border: 1px solid rgba(251, 146, 60, 0.6); color: #fb923c; }
.why-roll { display: flex; gap: 8px; margin: 10px 0 4px; }
.why-roll > div { flex: 1; text-align: center; padding: 6px 4px; border-radius: 6px; border: 1px solid var(--border-color); }
.why-roll > div.on { border-color: var(--accent-blue); background: rgba(96, 165, 250, 0.12); }
.why-roll .k { display: block; font-size: 10.5px; color: var(--text-muted); }
.why-roll .v { font-weight: 600; font-variant-numeric: tabular-nums; }

.share-dialog-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.share-dialog-overlay.hidden { display: none; }
.share-dialog {
    width: 100%; max-width: 560px;
    background: var(--bg-secondary, #18181b);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.share-dialog-header { display: flex; justify-content: space-between; align-items: center; }
.share-dialog-title { font-weight: 700; font-size: 15px; color: var(--text-main); }
.share-dialog-close { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.share-dialog-note { font-size: 12px; color: var(--text-muted); margin: 8px 0 12px; }
.share-dialog-row { display: flex; gap: 8px; }
.share-dialog-row input { flex: 1; min-width: 0; font-size: 12px; padding: 8px; }
.share-dialog-status { font-size: 12px; color: #6ee7b7; margin-top: 8px; min-height: 16px; }
@media (max-width: 900px) {
    .share-dialog-row { flex-direction: column; }
    .share-dialog-row input { font-size: 14px; }
}

.why-btn {
    margin-top: 4px;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.45);
    background: rgba(59, 130, 246, 0.08);
    color: #93c5fd;
    cursor: pointer;
    align-self: flex-start;
}
.why-btn:hover { background: rgba(59, 130, 246, 0.2); }
.why-dialog { max-width: 620px; max-height: calc(100vh - 32px); overflow-y: auto; }
.why-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.why-title { font-weight: 700; font-size: 15px; color: var(--text-main); }
.why-sub { font-size: 11px; color: var(--text-muted); }
.why-close { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.why-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(60px, 1fr) 72px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.why-label { display: flex; flex-direction: column; font-size: 12.5px; color: var(--text-main); }
.why-detail { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.why-bar-cell { height: 8px; background: rgba(255, 255, 255, 0.04); border-radius: 4px; overflow: hidden; }
.why-bar { display: block; height: 100%; border-radius: 4px; }
.why-bar.pos { background: #60a5fa; }
.why-bar.neg { background: #f87171; }
.why-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; color: #93c5fd; }
.why-val.neg { color: #fca5a5; }
.why-total { border-top: 1px solid rgba(255, 255, 255, 0.25); font-weight: 700; }
.why-total .why-val { font-size: 14px; }
.why-foot { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }
.why-notes { margin: 10px 0 0; padding-left: 18px; font-size: 11.5px; color: var(--text-muted); }
.why-method { font-size: 10.5px; color: var(--text-muted); margin: 10px 0 0; }
.why-empty { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
@media (max-width: 900px) {
    .why-row { grid-template-columns: minmax(0, 1fr) 64px; }
    .why-bar-cell { display: none; }
    .why-btn { font-size: 12px; padding: 4px 10px; }
}

.header-stat.sortable-header { cursor: pointer; user-select: none; border-radius: 4px; }
.header-stat.sortable-header:hover { color: var(--text-main); background: rgba(96, 165, 250, 0.08); }
.header-stat.sortable-header:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }

:root { --ped-line: #3a4357; --ped-card: #141823; --ped-border: #2a3142; --ped-pink: #ec4899; }

.lineage-canvas-wrapper.ped-mode { align-items: stretch; }
#lineage-tree-canvas.ped-mode { display: block; height: auto; max-width: none; padding: 6px 0 20px; gap: 0; }
.ped-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; color: var(--text-muted); margin: 0 auto 8px; max-width: 1180px; }
.ped-legend b { color: var(--text-main); }
.ped-scroll { width: max-content; margin: 0 auto; }
.ped-heads, .ped-grid {
    display: grid;
    grid-template-columns: 236px 228px 228px 196px 182px;
    column-gap: 32px;
}
.ped-heads { margin-bottom: 6px; }
.ped-head { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #60a5fa; display: flex; flex-direction: column; gap: 1px; }
.ped-head-sub { font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.ped-grid { grid-template-rows: repeat(16, 60px); row-gap: 0; }
.ped-cell { position: relative; display: flex; align-items: center; min-width: 0; padding: 2px 0; }
.ped-cell.has-parents::after { content: ""; position: absolute; left: 100%; top: 50%; width: 16px; border-top: 2px solid var(--ped-line); }
.ped-cell.has-parents::before { content: ""; position: absolute; left: calc(100% + 16px); width: 16px; top: 25%; height: 50%; border: 2px solid var(--ped-line); border-right: none; border-radius: 8px 0 0 8px; }
.ped-cell.is-focus.has-parents::after, .ped-cell.is-focus.has-parents::before { border-color: #60a5fa; }
.ped-cell.is-source.has-parents::before, .ped-cell.is-source.has-parents::after { border-color: rgba(236, 72, 153, 0.7); }
.ped-cell.is-dim .ped-card { opacity: 0.42; }
.ped-cell.is-focus .ped-card { border-color: #60a5fa; box-shadow: 0 0 0 1px #60a5fa inset; }
.ped-cell.is-source .ped-card { border-color: var(--ped-pink); box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.6) inset; }

.ped-card { width: 100%; min-width: 0; background: var(--ped-card); border: 1px solid var(--ped-border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.12s, opacity 0.12s, box-shadow 0.12s; }
.ped-card.empty { border-style: dashed; background: rgba(20, 24, 35, 0.55); }
.ped-card.dragging { opacity: 0.4; }
.ped-card.drag-over { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5); }
.ped-card[draggable="true"] { cursor: grab; }
.ped-card-top { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ped-portrait { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #334155; background: #0d1018; padding: 0; overflow: hidden; cursor: pointer; display: grid; place-items: center; color: #64748b; }
.ped-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ped-portrait:hover, .ped-name:hover { border-color: #60a5fa; color: #93c5fd; }
.ped-plus { font-size: 20px; line-height: 1; }
.ped-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ped-name { all: unset; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-name:focus-visible, .ped-portrait:focus-visible, .ped-chip:focus-visible, .ped-aff:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.ped-add { color: var(--text-muted); font-weight: 600; font-size: 12px; }
.ped-title { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ped-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #f9a8d4; background: rgba(236, 72, 153, 0.12); border: 1px solid rgba(236, 72, 153, 0.55); border-radius: 999px; padding: 2px 8px; cursor: pointer; white-space: nowrap; max-width: 100%; }
.ped-chip:hover { background: rgba(236, 72, 153, 0.22); }
.ped-chip.empty { color: var(--text-muted); background: transparent; border-style: dashed; border-color: #475569; font-weight: 600; }
.ped-chip.warn { color: #fcd34d; border-color: rgba(245, 158, 11, 0.7); background: rgba(245, 158, 11, 0.12); }
.ped-chip.tiny { font-size: 10px; padding: 1px 6px; }
.ped-stars { color: var(--ped-pink); letter-spacing: -1px; }
.ped-chip.warn .ped-stars { color: #f59e0b; }
.ped-warn { color: #f59e0b; font-size: 11px; }
.ped-aff { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 7px; border: 1px solid #334155; background: #1b2030; color: var(--text-main); cursor: default; }
.ped-aff[data-act] { cursor: pointer; }
.ped-aff-sym { font-size: 12px; }
.ped-aff.rank-sym-dbl { border-color: rgba(34, 197, 94, 0.6); color: #86efac; }
.ped-aff.rank-sym-single { border-color: rgba(96, 165, 250, 0.6); color: #93c5fd; }
.ped-aff.rank-sym-tri { border-color: rgba(148, 163, 184, 0.5); color: #cbd5e1; }
.ped-apts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.ped-apt { background: #1b2030; border: 1px solid transparent; border-radius: 5px; text-align: center; padding: 2px 0 1px; display: flex; flex-direction: column; line-height: 1.15; }
.ped-apt-l { font-size: 9px; color: #94a3b8; font-weight: 600; }
.ped-apt-r { font-size: 12px; font-weight: 800; }
.ped-apt-s { font-size: 9px; color: var(--ped-pink); font-weight: 700; }
.ped-apt.fed { background: rgba(236, 72, 153, 0.08); }
.ped-apt.up { border-color: rgba(34, 197, 94, 0.55); }
.ped-xl .ped-portrait { width: 64px; height: 64px; }
.ped-xl .ped-name { font-size: 15px; }
.ped-lg .ped-portrait { width: 52px; height: 52px; }
.ped-md { padding: 7px; gap: 5px; }
.ped-md .ped-portrait { width: 44px; height: 44px; }
.ped-sm { padding: 6px 8px; }
.ped-sm .ped-portrait { width: 40px; height: 40px; }
.ped-sm .ped-name { font-size: 12px; }
.ped-xs { padding: 4px 6px; border-radius: 8px; }
.ped-xs .ped-card-top { gap: 6px; }
.ped-xs .ped-portrait { width: 34px; height: 34px; border-width: 1.5px; }
.ped-xs .ped-name { font-size: 11.5px; }
.ped-xs .ped-info { gap: 2px; }

.lineage-popover.pk { position: fixed; z-index: 10050; width: 340px; max-width: calc(100vw - 16px); background: #151a26; border: 1px solid #334155; border-radius: 12px; padding: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; gap: 10px; color: var(--text-main); }
.pk.sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; }
.pk-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 10040; }
.pk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pk-title { font-size: 14px; font-weight: 800; }
.pk-sub { font-size: 11px; color: var(--text-muted); }
.pk-close { background: none; border: none; color: #94a3b8; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pk-group { display: flex; flex-direction: column; gap: 5px; }
.pk-group-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-chip, .pk-star, .pk-none { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; min-height: 32px; border-radius: 999px; border: 1px solid #334155; background: #1b2030; color: var(--text-main); font-size: 12px; font-weight: 600; cursor: pointer; }
.pk-chip:hover, .pk-star:hover, .pk-none:hover { border-color: #64748b; }
.pk-chip.on, .pk-star.on { border-color: var(--ped-pink); background: rgba(236, 72, 153, 0.18); }
.pk-none.on { border-color: #94a3b8; background: #2a3142; }
.pk-chip.warn { border-style: dashed; }
.pk-rank { font-weight: 800; }
.pk-star { color: var(--ped-pink); letter-spacing: -1px; }
.pk-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10.5px; color: var(--text-muted); }
.pk-done { background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 700; cursor: pointer; flex: 0 0 auto; }

.lineage-remove-bar { padding: 6px 20px; background: rgba(239, 68, 68, 0.08); border-bottom: 1px solid rgba(239, 68, 68, 0.2); display: flex; justify-content: flex-end; }
.lineage-remove-bar button { background: none; border: 1px solid #ef4444; color: #fca5a5; font-size: 12px; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
button.lineage-modal-card { font: inherit; color: inherit; text-align: left; width: 100%; }
.lineage-modal-card.current { border-color: #60a5fa; box-shadow: 0 0 0 1px #60a5fa inset; }
.modal-uma-info { display: flex; flex-direction: column; min-width: 0; }
.modal-uma-soon { font-size: 10px; color: #fcd34d; }
.lineage-modal-empty { padding: 24px; text-align: center; color: var(--text-muted); grid-column: 1 / -1; }
.lineage-btn.armed { background: #7f1d1d !important; box-shadow: 0 0 0 2px #ef4444; }
.aff-bd-note { font-size: 11px; color: var(--text-muted); margin: 0 0 10px; text-align: center; }

#lineage-tree-canvas.list-mode { display: block; height: auto; }
.lm { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 680px; margin: 0 auto; padding: 4px 0 24px; }
.lm-ace { display: flex; flex-direction: column; gap: 8px; }
.lm-breakdown { align-self: flex-start; background: none; border: 1px solid #334155; color: #93c5fd; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.lm-branch { background: var(--bg-panel); border: 1px solid var(--ped-border); border-radius: 12px; padding: 0 10px 10px; }
.lm-branch > summary, .lm-deeper > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lm-branch > summary::-webkit-details-marker, .lm-deeper > summary::-webkit-details-marker { display: none; }
.lm-branch > summary { padding: 12px 2px; min-height: 44px; }
.lm-branch > summary::before, .lm-deeper > summary::before { content: "▸"; color: #60a5fa; margin-right: 4px; transition: transform 0.15s; display: inline-block; }
.lm-branch[open] > summary::before, .lm-deeper[open] > summary::before { transform: rotate(90deg); }
.lm-branch-title { font-size: 14px; font-weight: 800; flex: 1; }
.lm-count { font-size: 11px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.lm-children { margin: 8px 0 0 16px; padding-left: 12px; border-left: 2px solid var(--ped-border); display: flex; flex-direction: column; gap: 8px; }
.lm-node { display: flex; flex-direction: column; min-width: 0; }
.lm-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; background: var(--ped-card); border: 1px solid var(--ped-border); border-radius: 10px; padding: 8px; min-height: 56px; }
.lm-row.empty { border-style: dashed; background: rgba(20, 24, 35, 0.55); }
.lm-pic { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #334155; background: #0d1018; padding: 0; overflow: hidden; display: grid; place-items: center; color: #64748b; cursor: pointer; }
.lm-pic img { width: 100%; height: 100%; object-fit: cover; }
.lm-main { all: unset; cursor: pointer; display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.lm-slot { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #60a5fa; }
.lm-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-row.empty .lm-name { color: var(--text-muted); font-weight: 600; }
.lm-title { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lm-side .ped-chip { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.lm-apts { grid-column: 1 / -1; }
.lm-deeper { margin-top: 6px; }
.lm-deeper > summary { font-size: 12px; color: #cbd5e1; padding: 8px 4px; min-height: 40px; }
.lm-pair { gap: 6px; }
.lm-row.gen-4 { min-height: 50px; padding: 6px 8px; grid-template-columns: 36px minmax(0, 1fr) auto; }
.lm-row.gen-4 .lm-pic { width: 36px; height: 36px; }
.lm-help { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin: 4px 2px 0; }

@media (max-width: 760px) {
    #lineage-planner-page { height: auto !important; max-height: none !important; overflow: visible !important; padding: 8px 12px 96px !important; }
    .lineage-canvas-wrapper { overflow: visible !important; padding: 8px 0 !important; }
    .lineage-toolbar-group label { flex: 1 1 100%; }
    .lm-row .ped-aff { font-size: 12px; padding: 3px 8px; }
    .pk-chip, .pk-star, .pk-none { min-height: 40px; padding: 6px 12px; font-size: 13px; }
    #lineage-char-modal .lineage-modal-content { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; }
    #lineage-char-modal .lineage-modal-list { grid-template-columns: 1fr !important; }
    #lineage-char-modal .lineage-modal-card { min-height: 56px; }
    .lineage-modal-close { font-size: 28px !important; padding: 4px 8px; }
}
.lm-row { grid-template-columns: 44px minmax(0, 1fr); }
.lm-side { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.lm-row.gen-4 { grid-template-columns: 36px minmax(0, 1fr); }
.ped-grid { grid-template-rows: repeat(16, 56px); }
@media (max-width: 760px) {
    .lineage-toolbar-group label { min-height: 0 !important; flex: 1 1 100%; }
}

.ped-chip.wins { color: #fde68a; background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.55); }
.ped-chip.wins:hover { background: rgba(234, 179, 8, 0.22); }
.ped-chip.wins.empty { color: var(--text-muted); background: transparent; border-style: dashed; border-color: #475569; }
.ped-wins-bonus { color: #86efac; font-weight: 800; }
.wn { position: fixed; z-index: 10050; background: #151a26; border: 1px solid #334155; color: var(--text-main); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; }
.wn.dialog { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border-radius: 14px; }
.wn.sheet { left: 0; right: 0; bottom: 0; max-height: 92dvh; border-radius: 16px 16px 0 0; }
.wn-inner { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; min-height: 0; flex: 1; }
.wn.sheet .wn-inner { padding: 14px 12px calc(12px + env(safe-area-inset-bottom)); }
.wn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.wn-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.wn-count { font-size: 12px; font-weight: 800; color: #1a1300; background: #facc15; border-radius: 999px; padding: 1px 8px; }
.wn-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.wn-links { background: #10141e; border: 1px solid #263044; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.wn-links-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.wn-links-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wn-link { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid #334155; background: #1b2030; white-space: nowrap; }
.wn-link b { color: #60a5fa; }
.wn-link.hit { border-color: rgba(34, 197, 94, 0.6); }
.wn-link.none { white-space: normal; border-style: dashed; color: var(--text-muted); }
.wn-plus { color: #86efac; font-weight: 800; text-transform: none; letter-spacing: 0; }
.wn-tools { display: flex; flex-direction: column; gap: 6px; }
.wn-toolrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wn-tl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); min-width: 40px; }
.wn-tool, .wn-copy { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-main); background: #1b2030; border: 1px solid #334155; border-radius: 999px; padding: 5px 11px; min-height: 30px; cursor: pointer; }
.wn-copy { border-radius: 8px; padding: 4px 8px; }
.wn-tool:hover { border-color: #64748b; }
.wn-tool.on { border-color: #facc15; background: rgba(234, 179, 8, 0.16); color: #fde68a; }
.wn-tool.clear { color: #fca5a5; }
.wn-tool:disabled { opacity: 0.4; cursor: default; }
.wn-segs { display: inline-flex; border: 1px solid #334155; border-radius: 8px; overflow: hidden; }
.wn-seg { font: inherit; font-size: 12px; font-weight: 600; background: #1b2030; color: var(--text-muted); border: none; padding: 5px 12px; min-height: 30px; cursor: pointer; }
.wn-seg + .wn-seg { border-left: 1px solid #334155; }
.wn-seg.on { background: #2563eb; color: #fff; }
.wn-cal { overflow: auto; min-height: 0; flex: 1; border-top: 1px solid #263044; padding-top: 8px; }
.wn-also-tag { font-size: 10px; font-weight: 800; color: #93c5fd; border: 1px solid rgba(96, 165, 250, 0.5); border-radius: 4px; padding: 0 4px; }
.wn-also-tag.hit { color: #86efac; border-color: rgba(34, 197, 94, 0.7); background: rgba(34, 197, 94, 0.12); }
.wn-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10.5px; color: var(--text-muted); }
.wn-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px; }
.wn.sheet .wn-tool, .wn.sheet .wn-seg { min-height: 36px; }
.wn.sheet .wn-links-row { flex-wrap: nowrap; overflow-x: auto; }
.wn.sheet .wn-foot > span { display: none; }
.wn.sheet .wn-foot { justify-content: flex-end; }
.wn.sheet .pk-done { width: 100%; padding: 12px; }
.aff-bd-sub { font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: center; margin: 12px 0 6px; }
.aff-bd-row.races { flex-wrap: wrap; }
.aff-bd-row.bottom, .aff-bd-row.races { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.aff-bd-row.races .aff-bd-badge { background: rgba(234, 179, 8, 0.16); color: #fde68a; }
.aff-bd-row.bottom .aff-bd-item, .aff-bd-row.races .aff-bd-item { min-width: 0; }
.aff-bd-row.bottom .aff-bd-label, .aff-bd-row.races .aff-bd-label { text-align: center; }
.aff-bd-row.bottom .aff-bd-img { width: 34px; height: 34px; }
.aff-bd-row.races .aff-bd-img { width: 38px; height: 38px; }
.wn-cal { padding-top: 0; }

.wn-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #10141e; border: 1px solid #263044; border-radius: 10px; padding: 8px 10px; }
.wn-mode.is-own { border-color: rgba(96, 165, 250, 0.45); }
.wn-mode-segs .wn-seg { display: inline-flex; align-items: center; gap: 6px; }
.wn-seg-sub { font-size: 10.5px; font-weight: 700; opacity: 0.8; }
.wn-mode-txt { flex: 1 1 320px; font-size: 11.5px; color: #cbd5e1; line-height: 1.45; }
.wn-mode-txt b { color: #fde68a; }
.wn-mode-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.wn-tl-show { margin-left: 8px; }
.ped-chip.wins.own { border-style: solid; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35); }

.wn.dialog { width: min(1040px, calc(100vw - 32px)); }
.wn.sheet .wn-mode-txt { flex-basis: 100%; }
.wn.sheet .wn-mode-segs { flex: 1 1 100%; }
.wn.sheet .wn-mode-segs .wn-seg { flex: 1; justify-content: center; }
.wn.sheet .wn-inner { overflow-y: auto; }

.wn .wn-inner { overflow-y: auto; }
.wn .wn-cal { overflow: visible; flex: none; border-top: none; padding: 0; }
.wr-board { background: #10141e; border: 1px solid #263044; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.wr-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #0b0e15; border: 1px solid #263044; border-radius: 10px; padding: 3px; gap: 3px; }
.wr-tab { font: inherit; font-size: 13px; font-weight: 800; color: var(--text-muted); background: transparent; border: none; border-radius: 8px; padding: 8px 6px; min-height: 36px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.wr-tab:hover { color: var(--text-main); background: #1b2030; }
.wr-tab.on { background: #2563eb; color: #fff; }
.wr-tab-n { font-size: 11px; font-weight: 800; color: #1a1300; background: #facc15; border-radius: 999px; padding: 0 6px; }
.wr-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px 8px; }
.wr-cell { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font: inherit; color: inherit; background: none; border: none; padding: 0; text-align: center; min-width: 0; }
button.wr-cell { cursor: pointer; }
.wr-slot { position: relative; aspect-ratio: 2 / 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden; }
.wr-cell.none .wr-slot { background: #151a26; border: 1px solid #1c2232; }
.wr-cell.open .wr-slot { background: #1b2030; border: 1px dashed #3b4a63; }
.wr-cell.open:hover .wr-slot { border-color: #60a5fa; background: #1e2a44; }
.wr-cell.picked .wr-slot { border: 2px solid #facc15; box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.15); }
.wr-cell.picked:hover .wr-slot { border-color: #fde68a; }
.wr-plus { font-size: 22px; font-weight: 900; color: #60a5fa; line-height: 1; }
.wr-n { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.wr-rel { position: absolute; top: 3px; right: 4px; font-size: 9px; font-weight: 800; color: #86efac; }
.wr-lab { font-size: 11px; font-weight: 700; color: #cbd5e1; white-space: nowrap; }
.wr-cell.none .wr-lab { color: #475569; font-weight: 600; }
.wr-banner { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.wr-banner.dirt { background: linear-gradient(135deg, #78350f, #b45309); }
.wr-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wr-banner-txt { display: none; padding: 0 4px; font-size: 10.5px; font-weight: 800; line-height: 1.15; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.wr-banner.nobanner .wr-banner-txt { display: block; }
.wr-flag { position: absolute; z-index: 1; font-size: 10px; font-weight: 900; border-radius: 999px; padding: 0 5px; line-height: 15px; }
.wr-flag.hit { top: 3px; right: 3px; background: #166534; color: #bbf7d0; }
.wr-flag.low { top: 3px; left: 3px; background: #9f1239; color: #fff; }
.wr-key { font-size: 10px; font-weight: 900; border-radius: 999px; padding: 0 5px; }
.wr-key.plus { color: #60a5fa; } .wr-key.rel { color: #86efac; } .wr-key.hit { background: #166534; color: #bbf7d0; } .wr-key.low { background: #9f1239; color: #fff; }
.wr-pick { position: fixed; z-index: 10070; background: #151a26; border: 1px solid #3b4a63; color: var(--text-main); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.wr-pick.pop { width: 420px; max-width: calc(100vw - 16px); border-radius: 12px; }
.wr-pick.sheet { left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; max-height: 75dvh; overflow-y: auto; }
.wr-pick-inner { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.wr-pick.sheet .wr-pick-inner { padding: 14px 12px calc(12px + env(safe-area-inset-bottom)); }
.wr-pick-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.wr-pick-title { font-size: 14px; font-weight: 800; }
.wr-pick-sub { font-size: 11px; color: var(--text-muted); }
.wr-opts { display: flex; flex-direction: column; gap: 6px; }
.wr-opt { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 22px; gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--text-main); background: #1b2030; border: 1px solid #334155; border-radius: 10px; padding: 6px; cursor: pointer; min-height: 60px; }
.wr-opt:hover { border-color: #64748b; }
.wr-opt.on { border-color: #facc15; background: rgba(234, 179, 8, 0.12); }
.wr-opt.low:not(.on) { opacity: 0.6; }
.wr-opt .wr-banner { position: relative; inset: auto; width: 96px; height: 48px; border-radius: 6px; overflow: hidden; }
.wr-opt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wr-opt-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-g1 { flex: 0 0 auto; font-size: 10px; font-weight: 900; color: #fff; background: #2563eb; border-radius: 999px; padding: 0 7px; line-height: 16px; }
.wr-opt-course { font-size: 11px; color: var(--text-muted); }
.wr-opt-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wr-apt { font-size: 10.5px; font-weight: 800; color: #cbd5e1; background: #0f1320; border: 1px solid #334155; border-radius: 6px; padding: 0 6px; line-height: 17px; }
.wr-apt.bad { color: #fecdd3; border-color: #be123c; background: rgba(190, 18, 60, 0.18); }
.wr-note { font-size: 10.5px; color: #93c5fd; }
.wr-opt-tick { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #475569; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #1a1300; }
.wr-opt.on .wr-opt-tick { background: #facc15; border-color: #facc15; }
.wr-pick-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wr-pick.sheet .pk-done { flex: 1; padding: 12px; }
@media (max-width: 760px) {
    .wr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
    .wr-tab { min-height: 42px; font-size: 14px; }
    .wr-board { padding: 8px; }
    .wr-lab { font-size: 11.5px; }
}

:root { --srv-jp: #e11d48; --srv-en: #2563eb; }
.nav-short { display: none; }
.srv-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-left: auto; flex: 0 0 auto;
    background: #0b0c10; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 3px; min-width: 132px; isolation: isolate; }
.srv-opt { position: relative; z-index: 1; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--text-muted);
    background: none; border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; transition: color 0.2s; }
.srv-opt:hover { color: var(--text-main); }
.srv-sub { font-size: 9.5px; font-weight: 700; opacity: 0.75; letter-spacing: 0; }
.srv-opt.on { color: #fff; }
.srv-knob { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
    background: var(--srv-jp); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); transition: transform 0.22s ease, background-color 0.22s ease; }
.srv-switch[data-server="EN"] .srv-knob { transform: translateX(100%); background: var(--srv-en); }
.srv-opt:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.app-header-nav { border-bottom: 2px solid var(--srv-edge, rgba(255, 255, 255, 0.08)); }
body[data-server="JP"] { --srv-edge: rgba(225, 29, 72, 0.55); }
body[data-server="EN"] { --srv-edge: rgba(37, 99, 235, 0.6); }

.m-bar { display: none; }
.m-sheet { display: contents; }
.m-sheet-head, .m-sheet-foot, .m-backdrop { display: none; }

@media (max-width: 900px) {
    .nav-long { display: none; }
    .nav-short { display: inline; }
    .nav-tab-btn { flex: 0 1 auto !important; }
    body:has(#spark-suggestions-page:not(.hidden)) .app-header-nav { position: static; }
    body:has(#spark-suggestions-page:not(.hidden)) .app-header-nav .srv-switch { display: none; }
    .srv-switch { min-width: 0; }
    .srv-opt { padding: 6px 12px; min-height: 32px; }
    .srv-sub { display: none; }

    .m-bar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 44px auto; gap: 6px; align-items: stretch;
        position: sticky; top: 0; z-index: 800; padding: 8px 10px; background: rgba(12, 13, 18, 0.94); backdrop-filter: blur(10px);
        border-bottom: 2px solid var(--srv-edge, var(--border-color)); transition: transform 0.22s ease; }
    .m-bar.hide { transform: translateY(-110%); }
    .m-bar-btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; min-height: 46px;
        font: inherit; color: var(--text-main); background: #171a24; border: 1px solid #2a3142; border-radius: 10px; padding: 4px 10px; cursor: pointer; text-align: left; }
    .m-bar-btn:active { background: #1e2433; }
    .m-bar-btn.need { border-color: #f59e0b; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) inset; }
    .m-bar-k { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #60a5fa; }
    .m-bar-btn.need .m-bar-k { color: #fbbf24; }
    .m-bar-v { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .m-deck-thumbs { display: flex; gap: 2px; }
    .m-deck-thumbs i { width: 16px; height: 21px; border-radius: 3px; background: #2a3142 center / cover no-repeat; border: 1px solid #3b4a63; }
    .m-deck-thumbs i.empty { background: transparent; border-style: dashed; }
    .m-gear { align-items: center; font-size: 20px; padding: 0; }
    .m-bar .srv-switch { align-self: center; }

    #app { flex-direction: column; height: auto; }
    .sidebar { padding: 0 !important; border: none !important; background: none !important; width: 100% !important; min-height: 0; overflow: visible !important; }
    .sidebar > :not(.m-sheet) { display: none !important; }
    .m-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 960; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
        background: #12151e; border-top: 1px solid #334155; border-radius: 16px 16px 0 0; padding: 0 14px calc(14px + env(safe-area-inset-bottom));
        box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.6); transform: translateY(105%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; }
    .m-sheet.open { transform: none; visibility: visible; transition: transform 0.25s ease, visibility 0s; }
    .m-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 5;
        margin: 0 -14px 8px; padding: 12px 14px 10px; background: #12151e; border-bottom: 1px solid #222838; }
    .m-sheet-head::before { content: ""; position: absolute; top: 5px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #334155; }
    .m-sheet-title { font-size: 15px; font-weight: 800; }
    .m-sheet-done { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--accent-blue); border: none; border-radius: 8px; padding: 8px 16px; min-height: 38px; cursor: pointer; }
    .m-sheet-foot { display: block; position: sticky; bottom: calc(-14px - env(safe-area-inset-bottom)); margin: 12px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #12151e; border-top: 1px solid #222838; }
    .m-sheet-foot button { width: 100%; min-height: 46px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--accent-blue); border: none; border-radius: 10px; cursor: pointer; }
    .m-backdrop { display: block; position: fixed; inset: 0; z-index: 955; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
    .m-backdrop.open { opacity: 1; pointer-events: auto; }
    body.m-sheet-open { overflow: hidden; }
    .m-sheet .sidebar-dropdown { margin-top: 8px !important; }
    .m-sheet .section-title:first-of-type { margin-top: 0; }
    #sheet-race #recommend-btn { display: none; }
    #sheet-deck > div:first-of-type { margin-top: 4px; }
    .main-content { padding-top: 10px; }
    body.calc-done .mobile-recommend-bar { display: none !important; }
    body.calc-done { padding-bottom: env(safe-area-inset-bottom); }
    .results-section { scroll-margin-top: 70px; }
}
.ph-row .ph-desk { display: none; }
body.guide-off .ph-row .ph-desk { display: block; }
body.guide-off .ph-setup { display: none !important; }
.ph-setup { display: flex; flex-direction: column; gap: 10px; text-align: left; max-width: 560px; margin: 0 auto; width: 100%; }
.ph-setup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ph-setup-title { font-size: 15px; font-weight: 800; color: var(--text-main); }
.ph-setup-msg { font-size: 13px; color: #fcd34d; }
.ph-setup-hint { font-size: 12px; color: var(--text-muted); }
.ph-step { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--text-main);
    background: #171a24; border: 1px solid #f59e0b; border-radius: 12px; padding: 10px 14px; cursor: pointer; text-align: left; }
.ph-step:hover { background: #1d2130; }
.ph-step small { font-weight: 600; color: var(--text-muted); }
.ph-n { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #f59e0b; color: #1a1300; font-weight: 900; }
.ph-step.done { border-color: #2a3142; }
.ph-step.done .ph-n { background: #16a34a; color: #fff; }
.ph-step[data-guide="ace"]:not(.done) { border-color: #3b4458; }
.ph-step[data-guide="ace"]:not(.done) .ph-n { background: #3b4458; color: var(--text-main); }
.ph-guide-hide, .ph-guide-show { font: inherit; font-size: 12px; background: none; border: none; color: #93c5fd; cursor: pointer; padding: 4px 6px; text-decoration: underline; }
.ph-go { font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent-blue); border: none; border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.g-mob { display: none; }
@media (max-width: 900px) {
    .g-mob { display: inline; }
    .g-desk { display: none; }
}
@media (max-width: 900px) {
    .skill-row.ph-row { grid-template-columns: minmax(0, 1fr) !important; }
    .ph-row .ph-setup { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    #spark-suggestions-page { overflow: visible !important; height: auto !important; }
}

.sk-sum, .sk-details-btn, .m-results-bar, .m-filter-row { display: none; }
.skill-row.cap-hidden { display: none !important; }
.list-more { display: block; width: 100%; margin: 10px 0 4px; min-height: 40px; font: inherit; font-size: 13px; font-weight: 700; color: #93c5fd;
    background: rgba(37, 99, 235, 0.1); border: 1px dashed rgba(96, 165, 250, 0.5); border-radius: 10px; cursor: pointer; }
.list-more:hover { background: rgba(37, 99, 235, 0.18); }
button.stamina-check-title { display: block; width: 100%; text-align: left; font: inherit; font-weight: 700; color: inherit; background: none; border: none; padding: 0; margin-bottom: 6px; cursor: default; }

@media (max-width: 900px) {
    .m-results-bar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 44px; gap: 6px; margin-bottom: 8px; }
    .m-results-bar select { min-height: 42px; font-size: 14px; font-weight: 700; padding: 6px 8px; border-radius: 10px; background: #171a24; color: var(--text-main); border: 1px solid #2a3142; min-width: 0; }
    .m-icon-btn { min-height: 42px; font-size: 17px; background: #171a24; border: 1px solid #2a3142; border-radius: 10px; cursor: pointer; }
    .m-icon-btn[aria-expanded="true"] { border-color: var(--accent-blue); }
    .m-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .m-chip { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-muted); background: transparent; border: 1px solid #2a3142; border-radius: 999px; padding: 6px 12px; min-height: 34px; cursor: pointer; }
    .m-chip.on { color: #fff; background: rgba(37, 99, 235, 0.25); border-color: var(--accent-blue); }
    .m-chip.m-hp { margin-left: auto; }
    .m-chip.m-hp[data-level="ok"] { color: #4ade80; border-color: rgba(74, 222, 128, 0.45); }
    .m-chip.m-hp[data-level="tight"] { color: #facc15; border-color: rgba(250, 204, 21, 0.5); }
    .m-chip.m-hp[data-level="short"] { color: #f87171; border-color: rgba(248, 113, 113, 0.55); }
    .results-section .results-controls-row, .results-section .results-toolbar { display: none !important; }
    .results-section.m-search-open .results-controls-row { display: block !important; border: none !important; margin-bottom: 8px !important; padding: 0 !important; }
    .results-section.m-search-open .results-controls-row > h3, .results-section.m-search-open .sort-selector-container,
    .results-section.m-search-open .show-zero-scores-container, .results-section.m-search-open .skill-search-container > label { display: none !important; }
    .results-section { padding-top: 12px !important; }

    .skill-row.has-sum { padding: 0 !important; margin-bottom: 6px !important; row-gap: 0 !important; overflow: hidden; }
    .skill-row.has-sum:not(.open) > :not(.sk-sum) { display: none !important; }
    .skill-row.has-sum.open { padding: 0 12px 12px !important; row-gap: 8px !important; border-color: #3b4a63 !important; }
    .skill-row.has-sum.open[style*="flex-direction"] { padding: 0 0 6px !important; }
    .sk-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; width: 100%; grid-column: 1 / -1;
        font: inherit; color: var(--text-main); background: none; border: none; text-align: left; padding: 10px 12px; min-height: 56px; cursor: pointer; }
    .skill-row.has-sum.open .sk-sum { margin: 0 -12px; width: calc(100% + 24px); border-bottom: 1px solid #222838; }
    .skill-row.has-sum.open[style*="flex-direction"] .sk-sum { margin: 0; width: 100%; order: -1; }
    .sk-sum-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .sk-sum-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sk-sum-pair { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-left: 6px; }
    .sk-sum-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
    .sk-sum-tags > * { white-space: nowrap; }
    .sk-sum-tags:empty { display: none; }
    .sk-mini { font-size: 9.5px !important; padding: 0 4px !important; line-height: 15px !important; flex: 0 0 auto; }
    .sk-sum-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
    .sk-sum-num b { font-size: 17px; font-weight: 800; color: #60a5fa; font-variant-numeric: tabular-nums; }
    .sk-sum-num small { font-size: 9.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
    .sk-sum-num .sk-sum-sec { text-transform: none; letter-spacing: 0; font-weight: 600; margin-top: 2px; white-space: nowrap; }
    .sk-chev { color: #64748b; font-size: 18px; transition: transform 0.15s; }
    .skill-row.open .sk-chev { transform: rotate(90deg); }
    .sk-details-btn { display: inline-flex; align-items: center; font: inherit; font-size: 12px; font-weight: 700; color: #93c5fd; background: none;
        border: 1px solid rgba(96, 165, 250, 0.45); border-radius: 999px; padding: 4px 12px; margin: 6px 6px 0 0; min-height: 30px; cursor: pointer; }
    .skill-row.gold-skill-highlight .sk-sum-name { color: #fcd34d; }
    .stamina-check-banner:not(.open) .stamina-check-detail { display: none; }
    button.stamina-check-title { cursor: pointer; }
    button.stamina-check-title::after { content: " ▸"; color: var(--text-muted); }
    .stamina-check-banner.open button.stamina-check-title::after { content: " ▾"; }
}
@media (max-width: 900px) { .sk-sum { order: -1; } }
@media (max-width: 900px) {
    :is(#pane-speed, #pane-accel, #pane-unique, #pane-green, #pane-debuff, #pane-stamina, #pane-deck) .skill-row.has-sum { padding: 0 !important; margin-bottom: 6px !important; row-gap: 0 !important; }
    :is(#pane-speed, #pane-accel, #pane-unique, #pane-green, #pane-debuff, #pane-stamina, #pane-deck) .skill-row.has-sum.open { padding: 0 12px 12px !important; row-gap: 8px !important; }
    :is(#pane-speed, #pane-accel, #pane-unique, #pane-green, #pane-debuff, #pane-stamina, #pane-deck) .skill-row.has-sum.open[style*="flex-direction"] { padding: 0 0 6px !important; }
    .sk-sum { min-height: 54px; padding: 8px 12px; }
}
@media (max-width: 900px) {
    .skill-row.has-sum.open > div[style*="grid-template-columns"] { padding: 8px 12px 4px !important; }
    .skill-row.has-sum.open > div[style*="border-top"] { margin: 0 12px !important; }
    .sk-details-btn { align-self: flex-start; width: auto; }
    .skill-name-cell { display: flex; flex-direction: column; align-items: flex-start; }
    .skill-name-cell > div { align-self: stretch; }
}

@media (min-width: 901px) {
    .skill-row .skill-name-cell { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; min-width: 0; }
    .skill-row .skill-name-cell > * { flex: 0 0 auto; max-width: 100%; }
    .skill-row .skill-name-cell > div:first-child { flex: 1 0 100%; margin-bottom: 0 !important; }
    .skill-row .skill-name-cell > .skill-parts-summary { flex-basis: 100%; }
    .skill-row .skill-name-cell .sources-dropdown-container { display: contents; }
    .skill-row .skill-name-cell .sources-dropdown { flex: 0 0 auto; min-width: 0; }
    .skill-row .skill-name-cell .sources-dropdown[open] { flex-basis: 100%; order: 5; }
    .skill-row .skill-name-cell .why-btn { margin-top: 0; }
    .skill-row .skill-name-cell .skill-name-en { font-size: 11px; }
    .skills-list > .skill-row { padding-top: 8px; padding-bottom: 8px; }
    .skill-row > div[style*="grid-template-columns"] { padding-top: 8px !important; padding-bottom: 6px !important; }
}
@media (min-width: 901px) {
    .skill-row .skill-name-cell .sources-dropdown[open] .skill-sources { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
    .skill-row .skill-name-cell .source-badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
}

.strat-btn-group[hidden] { display: none !important; }
.build-panel { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.build-head { display: flex; align-items: center; gap: 8px; }
.build-srv { font-size: 10.5px; font-weight: 900; color: #fff; border-radius: 999px; padding: 1px 8px; background: var(--srv-jp); }
.build-srv.srv-EN { background: var(--srv-en); }
.build-state { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.build-state.custom { color: #fde68a; }
.build-reset { margin-left: auto; font: inherit; font-size: 11px; font-weight: 700; color: #93c5fd; background: none; border: 1px solid rgba(96, 165, 250, 0.45); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.build-reset:disabled { opacity: 0.35; cursor: default; }
.build-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.build-field { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; min-width: 0; }
.build-field input { width: 100%; min-width: 0; font: inherit; font-size: 13px; font-weight: 700; text-transform: none; color: var(--text-main); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; padding: 5px 4px; text-align: center; -moz-appearance: textfield; }
.build-field input::-webkit-outer-spin-button, .build-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.build-field.changed input { border-color: #facc15; color: #fde68a; }
.build-effects { font-size: 11px; color: #cbd5e1; }
.build-note { font-size: 10.5px; color: var(--text-muted); line-height: 1.45; }
.deck-preset { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deck-preset select { font: inherit; font-size: 12px; color: var(--text-main); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; padding: 4px 8px; color-scheme: dark; }
.deck-preset .btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 900px) {
    .build-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .build-field input { font-size: 16px; min-height: 40px; }
    .deck-preset { width: 100%; }
    .deck-preset select { flex: 1 1 100%; min-height: 40px; font-size: 14px; }
    .deck-preset .btn { flex: 1; min-height: 38px; font-size: 13px; }
}

.sb-sec { border-bottom: 1px solid var(--border-color); }
.sb-sec-head { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 12px 0 10px; user-select: none; position: relative; padding-right: 18px; }
.sb-sec-head::-webkit-details-marker { display: none; }
.sb-sec-head::after { content: "▾"; position: absolute; right: 2px; top: 12px; color: var(--text-muted); transition: transform 0.15s; }
.sb-sec:not([open]) > .sb-sec-head::after { transform: rotate(-90deg); }
.sb-sec-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sb-sec-head:hover .sb-sec-title { color: var(--text-main); }
.sb-sec-sum { font-size: 11.5px; color: #93c5fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-sec[open] > .sb-sec-head .sb-sec-sum { display: none; }
.sb-sec-body { padding-bottom: 12px; }
.sidebar #recommend-btn { display: none !important; }
.sb-cta { position: sticky; top: -16px; z-index: 20; margin: 0 -20px 4px; padding: 12px 20px 12px; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); }
.sb-cta-btn { width: 100%; min-height: 42px; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--accent-blue); border: 1px solid var(--accent-blue); border-radius: 8px; cursor: pointer; }
.sb-cta-btn:hover { filter: brightness(1.1); }
.sb-cta-btn.incomplete { background: rgba(37, 99, 235, 0.25); border-color: rgba(96, 165, 250, 0.6); }
.sb-cta-hint { margin-top: 6px; font-size: 11px; color: #fbbf24; }
.sb-cta-btn:not(.incomplete) + .sb-cta-hint { color: #86efac; }
.sb-cta-done { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: #86efac; }
.sb-cta-refresh { font: inherit; font-size: 15px; line-height: 1; color: #93c5fd; background: none; border: 1px solid rgba(96, 165, 250, 0.45); border-radius: 999px; width: 30px; height: 28px; cursor: pointer; }
.sb-cta-refresh:hover { background: rgba(59, 130, 246, 0.15); }
.sb-sec-body > .section-title:first-child { display: none; }
@media (max-width: 900px) {
    .sb-cta { display: none !important; }
    .m-sheet .sb-sec-head { min-height: 48px; justify-content: center; }
    #sheet-race .sb-sec > .sb-sec-head { pointer-events: none; }
    #sheet-race .sb-sec > .sb-sec-head::after { display: none; }
}

.km-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.1); }
.km-head { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.km-title { font-size: 12px; font-weight: 600; color: var(--text-main); }
.km-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 999px; background: rgba(24, 24, 27, 0.6); border: 1px solid var(--border-color); flex: 0 0 auto; }
.km-opt { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.km-opt:hover { color: var(--text-main); }
.km-opt.active { background: var(--accent-blue); color: #fff; }
.km-block.km-custom .km-opt.active { background: #d97706; }
.km-opt:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.km-note { font-size: 11px; line-height: 1.45; color: var(--text-muted); margin: 6px 0 2px; }
.km-block.km-custom .km-note { color: #fcd34d; }
@media (max-width: 900px) {
    .km-opt { padding: 8px 14px; font-size: 13px; min-height: 36px; }
    .km-title { font-size: 13px; }
}

.xo-list { display: flex; flex-direction: column; gap: 8px; }
.xo-row { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-muted); font-weight: 500; cursor: pointer; user-select: none; }
.xo-row:hover { color: var(--text-main); }
.xo-row input { accent-color: var(--accent-blue); cursor: pointer; margin: 1px 0 0; flex: 0 0 auto; }
.xo-row small { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted); opacity: 0.8; margin-top: 2px; line-height: 1.4; }
.xo-sub { margin: 12px 0 6px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.1); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-blue); }
@media (max-width: 900px) {
    .xo-row { font-size: 14px; min-height: 36px; align-items: center; }
    .xo-row input { width: 18px; height: 18px; margin: 0; }
    .xo-row small { font-size: 12px; }
}
.beta-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: #fbbf24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.35); vertical-align: 1px; }
.heal-tag { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; color: #6ee7b7; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35); white-space: nowrap; }

.sk-sum-en { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.choice-skill-pill .pill-en { display: block; font-size: 9px; font-weight: 500; opacity: 0.75; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.evo-tag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; color: #f0abfc; background: rgba(192, 38, 211, 0.14); border: 1px solid rgba(217, 70, 239, 0.4); white-space: nowrap; cursor: help; }
.xo-jp { font-size: 9px; padding: 0 5px; margin-left: 4px; border-radius: 999px; color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.4); font-weight: 600; letter-spacing: 0; text-transform: none; }
.xo-select { flex-direction: column; align-items: stretch !important; gap: 6px; cursor: default; }
.xo-select select { font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 6px; background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-color); }
.evo-panel { margin-top: 10px; border-radius: 8px; border: 1px solid rgba(217, 70, 239, 0.28); background: rgba(192, 38, 211, 0.05); font-size: 12px; }
.evo-panel[hidden] { display: none; }
.evo-sum { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; user-select: none; }
.evo-sum::-webkit-details-marker { display: none; }
.evo-sum::after { content: "▾"; margin-left: auto; color: var(--text-muted); transition: transform 0.15s; }
.evo-fold:not([open]) > .evo-sum::after { transform: rotate(-90deg); }
.evo-sum-t { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #f0abfc; white-space: nowrap; }
.evo-sum-s { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-fold[open] .evo-sum-s { display: none; }
.evo-body { padding: 0 12px 10px; }
.evo-h { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #f0abfc; margin: 4px 0 6px; }
.evo-h:not(:first-child) { margin-top: 10px; }
.evo-sub { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-left: 6px; }
.evo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.evo-list li { padding: 8px; border-radius: 6px; background: rgba(24, 24, 27, 0.45); border: 1px solid var(--border-color); }
.evo-gold { display: flex; align-items: baseline; gap: 8px; font-weight: 600; color: var(--text-main); }
.evo-name { min-width: 0; }
.evo-name small { margin-left: 5px; font-weight: 400; font-size: 10.5px; color: var(--text-muted); }
.evo-score { margin-left: auto; font-family: var(--font-mono, monospace); color: #60a5fa; font-weight: 600; white-space: nowrap; padding-left: 8px; }
.evo-score.dim { color: var(--text-muted); }
.evo-picks { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.evo-pick { font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); cursor: pointer; }
.evo-pick:hover { color: var(--text-main); border-color: rgba(217, 70, 239, 0.5); }
.evo-pick.on { background: rgba(192, 38, 211, 0.22); border-color: rgba(217, 70, 239, 0.7); color: #fff; }
.evo-pick small { color: inherit; opacity: 0.8; }
.evo-pick:disabled { opacity: 0.45; cursor: not-allowed; }
.evo-opt { margin-top: 4px; }
.evo-opt .evo-pick { display: flex; align-items: baseline; width: 100%; text-align: left; border-radius: 6px; padding: 5px 8px; color: var(--text-main); }
.evo-opt.chosen .evo-pick { border-color: rgba(217, 70, 239, 0.6); }
.evo-note { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.evo-note.bad { color: #f87171; }
.evo-conds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.evo-c { font-size: 10.5px; padding: 0 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.04); color: var(--text-muted); cursor: help; }
.evo-c.met { color: #86efac; }
.evo-c.failed { color: #fca5a5; }
.evo-dead { margin-top: 5px; font-size: 10.5px; color: var(--text-muted); opacity: 0.75; }
.evo-scen-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.evo-scen-select { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 6px; background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-color); }
.evo-scen-auto { flex: 0 0 auto; font: inherit; font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); cursor: pointer; }
.evo-scen-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px; }
.evo-scen-item { display: flex; align-items: baseline; gap: 6px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-color); cursor: pointer; }
.evo-scen-item input { align-self: center; }
.evo-scen-item.on { border-color: rgba(217, 70, 239, 0.55); background: rgba(192, 38, 211, 0.08); }
@media (max-width: 900px) {
    .evo-panel { font-size: 13px; }
    .evo-sum { padding: 12px; min-height: 44px; align-items: center; }
    .evo-list, .evo-scen-list { grid-template-columns: 1fr; }
    .evo-pick { padding: 7px 12px; font-size: 13px; }
    .evo-opt .evo-pick { padding: 8px 10px; }
    .evo-name small { display: block; margin-left: 0; }
    .evo-scen-item { min-height: 40px; align-items: center; }
    .evo-scen-select { font-size: 14px; padding: 8px; }
}
@media (min-width: 901px) { .evo-scen-select { flex: 0 1 360px; } }
.evo-legend { font-size: 10.5px; color: var(--text-muted); margin: -2px 0 6px; }
.evo-gain { margin-left: 6px; font-size: 10.5px; font-weight: 600; }
.evo-gain.up { color: #86efac; }
.evo-gain.down { color: #fca5a5; }
.evo-sum::after { content: "▾"; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 16px; color: var(--text-main); background: rgba(255, 255, 255, 0.03); }
.evo-sum:hover::after { border-color: rgba(217, 70, 239, 0.6); }
.evo-sum { align-items: center; }
@media (min-width: 901px) {
    .results-section { min-height: 520px; }
    .main-content > :not(.results-section) { flex-shrink: 0; }
}
.evo-info { display: none; font: inherit; font-size: 14px; line-height: 1; padding: 4px 6px; margin-left: 4px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.evo-opt { display: flex; align-items: center; gap: 2px; }
.evo-opt .evo-pick { flex: 1 1 auto; }
[data-tip-skill] { cursor: help; }
@media (max-width: 900px) { .evo-info { display: inline-block; } }
@media (max-width: 900px) {
    body:has(.m-sheet.open) #skill-tooltip { z-index: 980 !important; }
}
.evo-dead .evo-why { color: #fbbf24; opacity: 0.9; }
.evo-warn { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; font-size: 11.5px; color: #fde68a; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.4); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.evo-switch { font: inherit; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.18); color: #fde68a; cursor: pointer; }
.evo-strat-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: #f0abfc; border: 1px solid rgba(217, 70, 239, 0.4); white-space: nowrap; margin-left: 6px; }
.evo-strat-tag.warn { color: #fde68a; border-color: rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.12); }
@media (max-width: 900px) { .evo-switch { padding: 7px 12px; font-size: 13px; } .evo-warn { font-size: 13px; } }
.suggestion-item .evo-strat-tag { align-self: flex-start; margin-left: 0; margin-top: 2px; }

.d-bar, .sb-rail, .sb-collapse-btn { display: none; }
@media (min-width: 901px) {
    .sidebar-header { position: relative; padding-right: 34px; }
    .sb-collapse-btn { display: grid; place-items: center; position: absolute; top: 0; right: 0; width: 30px; height: 30px; border-radius: 8px;
        border: 1px solid var(--border-color); background: rgba(255,255,255,0.03); color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; }
    .sb-collapse-btn:hover { color: var(--text-main); border-color: rgba(96,165,250,0.5); }
    body.sb-collapsed #spark-suggestions-page .sidebar { width: 48px; padding: 12px 6px; overflow: hidden; }
    body.sb-collapsed #spark-suggestions-page .sidebar > :not(.sb-rail) { display: none !important; }
    body.sb-collapsed .sb-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; flex: 1; background: none; border: none;
        color: var(--text-muted); cursor: pointer; padding: 6px 0; font: inherit; border-radius: 8px; }
    body.sb-collapsed .sb-rail:hover { color: var(--text-main); background: rgba(255,255,255,0.04); }
    .sb-rail-arrow { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 8px; font-size: 18px; }
    .sb-rail-label { writing-mode: vertical-rl; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

    .d-bar { display: none; align-items: stretch; gap: 8px; position: sticky; top: -20px; z-index: 30; margin: -20px -20px 16px; padding: 8px 20px;
        background: rgba(13, 15, 22, 0.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
    .d-bar-item { display: flex; flex-direction: column; justify-content: center; min-width: 0; text-align: left; font: inherit; color: var(--text-main);
        background: #171a24; border: 1px solid #2a3142; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
    .d-bar-item:hover { border-color: rgba(96,165,250,0.5); }
    .d-bar-item.need { border-color: #f59e0b; }
    .d-race { flex: 1 1 260px; }
    .d-ace { flex: 0 1 200px; }
    .d-deck { flex: 0 0 auto; }
    .d-k { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
    .d-bar-item.need .d-k { color: #fbbf24; }
    .d-v { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .d-v small { font-weight: 500; color: var(--text-muted); margin-left: 4px; }
    .d-bar .m-deck-thumbs { display: flex; gap: 3px; margin-top: 2px; }
    .d-bar .m-deck-thumbs i { width: 20px; height: 26px; border-radius: 3px; background-size: cover; background-position: center; display: block; }
    .d-bar .m-deck-thumbs i.empty { border: 1px dashed #3b4458; }
    .d-bar-cta { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700; border-radius: 8px; padding: 0 16px; cursor: pointer; color: #fff;
        background: var(--accent-blue); border: 1px solid var(--accent-blue); }
    .d-bar-cta.incomplete { background: rgba(59,130,246,0.15); color: #93c5fd; }
    .d-bar-cta.done { background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.45); color: #86efac; font-weight: 600; }

    #deck-builder-section.collapsed .deck-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    #deck-builder-section.collapsed .deck-slot { cursor: pointer !important; }
    #deck-builder-section.collapsed .deck-slot .card-name, #deck-builder-section.collapsed .deck-slot .selected-card-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 901px) {
    .main-content > section, .main-content #deck-builder-section, .main-content .results-section { scroll-margin-top: 76px; }
    #character-search, #deck-builder-section .card-search-input { scroll-margin-top: 90px; }
}

.assumed-heals-note { font-size: 12px; color: #a7f3d0; background: rgba(16,185,129,0.08); border: 1px solid rgba(52,211,153,0.3);
    border-radius: 8px; padding: 7px 10px; margin: 0 0 10px; line-height: 1.45; }
.assumed-heals-note b { color: #d1fae5; }
.assumed-heals-note .ahn-sub { color: var(--text-muted); }
.assumed-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #6ee7b7;
    background: rgba(16,185,129,0.12); border: 1px solid rgba(52,211,153,0.4); white-space: nowrap; }
@media (max-width: 900px) { .assumed-heals-note { margin: 0 0 8px; font-size: 12.5px; } }

@media (min-width: 901px) {
    body.dbar-on .d-bar { display: flex; }
    .ace-row .section-header { display: flex; justify-content: space-between; gap: 8px; }
    .ace-collapsed-label { display: none; font-size: 13px; font-weight: 600; color: #93c5fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ace-row.collapsed .ace-collapsed-label { display: inline; }
    .ace-row.collapsed #ace-section { padding-top: 10px; padding-bottom: 10px; }
    .ace-row.collapsed #ace-section .section-header { margin-bottom: 0 !important; }
    .ace-row.collapsed #ace-section > :not(.section-header), .ace-row.collapsed .cm-preset-banner { display: none !important; }
}
@media (max-width: 900px) { .ace-collapse-btn, .ace-collapsed-label { display: none !important; } }

.deck-mode-note { font-size: 12px; color: #fde68a; background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.3);
    border-radius: 8px; padding: 7px 10px; margin: 0 0 10px; line-height: 1.5; }
.deck-mode-note b { color: #fef3c7; }
.deck-mode-note .ahn-sub { color: var(--text-muted); }
.anycard-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #fcd34d;
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4); white-space: nowrap; }
@media (max-width: 900px) { .deck-mode-note { font-size: 12.5px; margin: 0 0 8px; } }

.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--text-main); }
.meta-row small { display: block; font-size: 10.5px; color: var(--text-muted); }
.meta-row select { flex: 0 0 auto; max-width: 58%; font-size: 12px; padding: 5px 6px; background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 6px; }
.meta-row select:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 900px) { .meta-row { font-size: 14px; } .meta-row select { font-size: 16px; min-height: 40px; } }
.meta-row.in-toggles { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255,255,255,0.08); font-size: 11px; }

.learn-btn { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(96,165,250,0.45); background: rgba(59,130,246,0.08);
    color: #93c5fd; font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.learn-btn:hover { background: rgba(59,130,246,0.2); }
.learn-btn.on { background: #16a34a; border-color: #16a34a; color: #fff; }
.learn-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #86efac; background: rgba(22,163,74,0.14); border: 1px solid rgba(22,163,74,0.45); white-space: nowrap; }
.skill-row.in-learn { box-shadow: inset 3px 0 0 #16a34a; }
.skill-row.over-budget { opacity: 0.45; }
.skill-row.over-budget:hover { opacity: 0.8; }
.learn-footer { position: sticky; bottom: -20px; z-index: 20; margin: 10px -16px -16px; padding: 8px 14px; background: rgba(13,15,22,0.96);
    border-top: 1px solid var(--border-color); backdrop-filter: blur(6px); border-radius: 0 0 6px 6px; font-size: 12px; color: var(--text-main); }
.lf-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.lf-toggle { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-main); background: none; border: none; cursor: pointer; padding: 2px 0; }
.lf-toggle:disabled { cursor: default; color: var(--text-muted); }
.lf-toggle b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #16a34a; color: #fff; font-size: 11px; margin-left: 2px; }
.learn-footer.empty .lf-toggle b { background: #3b4458; }
.lf-hint { color: var(--text-muted); }
.lf-hint b { color: #93c5fd; }
.lf-sp b, .lf-score b { font-size: 13px; }
.lf-budget { width: 76px; font: inherit; font-size: 12px; padding: 3px 6px; background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 5px; }
.lf-left { color: #86efac; font-weight: 600; }
.lf-left.neg { color: #fca5a5; }
.lf-score b { color: #60a5fa; }
.lf-rerank { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); cursor: pointer; margin-left: auto; }
.lf-clear { font: inherit; font-size: 12px; color: #fca5a5; background: none; border: 1px solid rgba(239,68,68,0.35); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.lf-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 140px; overflow-y: auto; }
.lf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 14px; background: #171a24; border: 1px solid #2a3142; }
.lf-chip.off { opacity: 0.55; }
.lf-chip small { color: var(--text-muted); }
.lf-x { width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(255,255,255,0.06); color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; }
.lf-x:hover { background: rgba(239,68,68,0.25); color: #fff; }
@media (max-width: 900px) {
    .learn-footer { bottom: 0; margin: 10px -12px 0; border-radius: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); font-size: 13px; }
    .lf-rerank { margin-left: 0; }
    .lf-budget { width: 84px; font-size: 16px; }
    .learn-btn { width: 30px; height: 30px; font-size: 16px; }
}
.lf-list[hidden], .learn-footer[hidden] { display: none !important; }

@media (max-width: 900px) {
    .lineage-canvas-wrapper.ped-mode { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

.uma-filter { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.uma-filter-label { font-size: 12px; color: #93c5fd; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }
#unique-uma-filter { background: #18181b; border: 1.5px solid var(--accent-blue); border-radius: 6px; color: var(--text-main); padding: 6px 10px; font-size: 12px; width: 190px; outline: none; color-scheme: dark; }
#unique-uma-filter:focus { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35); }
.uma-rank { display: inline-block; min-width: 26px; margin-right: 6px; padding: 0 5px; border-radius: 4px; background: rgba(96, 165, 250, 0.18); border: 1px solid rgba(96, 165, 250, 0.45); color: #bfdbfe; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle; }
@media (max-width: 900px) {
    #pane-unique .pane-filters-row { flex-wrap: wrap; justify-content: flex-start !important; }
    .uma-filter { flex: 1 1 100%; margin-right: 0; }
    #pane-unique .uf-icon { display: none; }
    #unique-uma-filter { flex: 1; width: auto; min-width: 0; font-size: 16px; }
}