:root {
    --primary-color: #0d5c7a;
    --secondary-color: #f0ead6;
    --light-bg: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --text-color: #1a1a2e;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --button-bg: rgba(13, 92, 122, 0.9);
    --button-text-color: #fff;
    --button-bg-hover: rgba(13, 92, 122, 1);
    --input-bg: rgba(255, 255, 255, 0.6);
    --header-color: #0d5c7a;
    --card-bg: rgba(255, 255, 255, 0.25);
    --border-color: rgba(255, 255, 255, 0.4);
    --input-border: rgba(13, 92, 122, 0.5);
    --checkbox-bg: rgba(255, 255, 255, 0.8);
    --gallery-bg: rgba(255, 255, 255, 0.3);
    --gallery-header-bg: rgba(255, 255, 255, 0.4);
    --ocr-results-bg: linear-gradient(135deg, rgba(232, 245, 233, 0.8) 0%, rgba(200, 230, 201, 0.8) 100%);
    --ocr-results-border: rgba(165, 214, 167, 0.6);
    --success-color: #2e7d32;
    --footer-bg: rgba(13, 66, 90, 0.95);
    --footer-text: #f0ead6;
    
    /* Glassmorphism specific */
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    --glass-blur: blur(16px);
    
    /* ============================================
       Typography System
       ============================================ */
    /* Font Family */
    --font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font Sizes - Consistent scale */
    --font-size-xs: 10px;      /* Micro text, badges */
    --font-size-sm: 11px;      /* Small labels, captions */
    --font-size-base: 13px;    /* Body text, standard labels */
    --font-size-md: 14px;      /* Standard UI text */
    --font-size-lg: 15px;      /* Emphasized text, inputs */
    --font-size-xl: 16px;      /* Section labels */
    --font-size-2xl: 18px;     /* Subheadings */
    --font-size-3xl: 20px;     /* Card headings */
    --font-size-4xl: 24px;     /* Page headings */
    --font-size-5xl: 28px;     /* Main title */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-color: #4fc3f7;
    --secondary-color: #0a0a0a;
    --light-bg: linear-gradient(135deg, #0a0a0a 0%, #121212 50%, #0d0d0d 100%);
    --text-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.7);
    --button-bg: rgba(79, 195, 247, 0.25);
    --button-text-color: #fff;
    --button-bg-hover: rgba(79, 195, 247, 0.4);
    --input-bg: rgba(255, 255, 255, 0.05);
    --header-color: #4fc3f7;
    --card-bg: rgba(255, 255, 255, 0.04);
    --border-color: rgba(255, 255, 255, 0.1);
    --input-border: rgba(79, 195, 247, 0.35);
    --checkbox-bg: rgba(255, 255, 255, 0.06);
    --gallery-bg: rgba(255, 255, 255, 0.03);
    --gallery-header-bg: rgba(255, 255, 255, 0.05);
    --ocr-results-bg: linear-gradient(135deg, rgba(20, 45, 35, 0.6) 0%, rgba(10, 35, 25, 0.6) 100%);
    --ocr-results-border: rgba(40, 80, 55, 0.5);
    --success-color: #4caf50;
    --footer-bg: rgba(5, 5, 5, 0.95);
    --footer-text: #4fc3f7;
    
    /* Dark glassmorphism specific - more black */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    --glass-blur: blur(20px);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    background: var(--light-bg);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 30%);
    pointer-events: none;
    z-index: 0;
}

[class^="leveltmp"] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px 0px;
    column-gap: 10px;
}

h1.calc-header {
    color: var(--primary-color);
    text-align: center;
    font-size: var(--font-size-5xl);
    padding-top: 10px;
    margin-bottom: 10px;
    font-weight: var(--font-weight-bold);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.5px;
}

/* Site Logo */
.site-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    margin-bottom: 8px;
}

.site-logo__image {
    height: 56px;
    width: auto;
    color: var(--text-color);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
}

.site-logo__wolf {
    height: 60px;
    object-fit: contain;
}

.site-logo__text {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--header-color);
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.site-logo__image:hover {
    transform: scale(1.05);
}

/* Dark mode logo adjustments */
[data-theme="dark"] .site-logo__image {
    filter: drop-shadow(0 2px 12px rgba(79, 195, 247, 0.3));
}

[data-theme="dark"] .site-logo__text {
    text-shadow: 0 2px 12px rgba(79, 195, 247, 0.2);
}

.leveltmp1 {
    margin-top: 15px;
}

#generatebychoice {
    max-width: 306px;
}
.temps {
    padding: 0;
    height: 38px;
    background: var(--input-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 7px 12px;
    border: 1px solid var(--input-border);
    box-sizing: border-box;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 14px;
    cursor: pointer;
}

.temps:focus,
.temps:focus-visible {
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--text-color) !important;
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 92, 122, 0.15);
}

/* Color-coded options for template quality */
.temps option[value="poor"] {
    color: #A9A9A9;
}
.temps option[value="common"] {
    color: #32CD32;
}
.temps option[value="fine"] {
    color: #0070DD;
}
.temps option[value="exquisite"] {
    color: #A335EE;
}
.temps option[value="epic"] {
    color: #FF8000;
}
.temps option[value="legendary"] {
    color: #E5CC80;
}

.quality-select {
    position: relative;
    flex: 0 0 50px;
    z-index: 1;
}

.quality-select.open {
    z-index: 9999;
}

.quality-select__native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.quality-select__display {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 36px;
    border: 1px solid var(--input-border);
    border-radius: 12px;
    background: var(--input-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0 14px;
    margin-top: 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
    transition: all 0.3s ease;
}
button.quality-select__display:hover {
    background: initial;
}
.quality-select__display:focus {
    outline: none;
    border-color: var(--button-bg);
    box-shadow: 0 0 0 2px rgba(8, 103, 133, 0.25);
}

.quality-select.open .quality-select__display {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.quality-select__swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--primary-color);
    background: transparent;
    flex-shrink: 0;
}

.quality-select__swatch--empty {
    border-color: #d0d0d0;
    background: transparent;
}

.quality-select__label {
    flex: 1;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.quality-select__chevron {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--primary-color);
    transition: transform 0.2s ease;
    margin-left: auto;
}

.quality-select.open .quality-select__chevron {
    transform: rotate(180deg);
}

.quality-select__options {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--glass-shadow), 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    padding: 6px 0;
}

.quality-select.open .quality-select__options {
    display: flex;
}

.quality-select__option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
    text-transform: capitalize;
}

.quality-select__option:hover {
    background: var(--light-bg);
}

.quality-select__option:focus {
    outline: none;
    background: rgba(8, 103, 133, 0.12);
}

.quality-select__option.selected {
    background: var(--primary-color);
    color: #fff;
}

.quality-select__option.selected .quality-select__option-label {
    color: #fff;
}

.quality-select__option-label {
    flex: 1;
}

.quality-select__option[data-quality="poor"]:not(.selected) .quality-select__option-label {
    color: #A9A9A9;
}

.quality-select__option[data-quality="common"]:not(.selected) .quality-select__option-label {
    color: #32CD32;
}

.quality-select__option[data-quality="fine"]:not(.selected) .quality-select__option-label {
    color: #0070DD;
}

.quality-select__option[data-quality="exquisite"]:not(.selected) .quality-select__option-label {
    color: #A335EE;
}

.quality-select__option[data-quality="epic"]:not(.selected) .quality-select__option-label {
    color: #FF8000;
}

.quality-select__option[data-quality="legendary"]:not(.selected) .quality-select__option-label {
    color: #E5CC80;
}

.quality-select__display[data-quality-value="poor"] .quality-select__label {
    color: #545454;
}

.quality-select__display[data-quality-value="common"] .quality-select__label {
    color: #1f8a1f;
}

.quality-select__display[data-quality-value="fine"] .quality-select__label {
    color: #0054a7;
}

.quality-select__display[data-quality-value="exquisite"] .quality-select__label {
    color: #6f24b9;
}

.quality-select__display[data-quality-value="epic"] .quality-select__label {
    color: #bf5b00;
}

.quality-select__display[data-quality-value="legendary"] .quality-select__label {
    color: #c39b2b;
}
select#scaleSelect {
	width: 100%;
	margin-top: 10px;
}
select#scaleSelect option {
	text-align: center;
}
.material-choices .materials-list {
	margin-top: 10px;
}
.warlord-toggle {
    position: relative;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.warlord-toggle ~ p.odds-info {
    margin-bottom: -5px;
    font-size: 15px;
}
.warlord-toggle ~ p.odds-info span {
    display: block;
    font-size: 13px;
}

p.craft-extra-info {
    margin-bottom: -5px;
    font-size: 15px;
    text-align: center;
}

.materials-warning {
    background: rgba(255, 247, 230, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(240, 195, 109, 0.5);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 30px 0 16px 0;
    color: #8a5a00;
    font-size: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.score-explanation {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    margin: 20px 0;
    padding: 20px 22px;
    line-height: 1.6;
    color: var(--text-color);
    box-shadow: var(--glass-shadow);
}

.score-explanation h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    position: relative;
}
.section-title:before {
    content: "";
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    width: 100%;
    position: absolute;
    height: 1px;
    opacity: 0.4;
    z-index: 0;
}

.checkbox-header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 2px 8px;
    z-index: 1;
    display: flex;
}

.items-header {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    align-items: center;
    margin-top: 8px;
}
.items-header h4 {
    margin: 0;
}
.items-header button#itemsInfoBtn {
    position: absolute;
    right: 0;
    height: 20px;
    width: 20px;
    margin: 0 6px 0 0;
}

.items-header button#itemsInfoBtn svg:hover {
    transform: rotate(0deg);
    fill: var(--button-bg-hover);
}

.items-header button#itemsInfoBtn svg {
    fill: var(--primary-color);
}

.section-title span {
    position: relative;
    padding: 0 10px;
    font-size: var(--font-size-md);
    background: var(--glass-bg);
    z-index: 1;
}

[data-theme="dark"] .section-title span {
    background: #0d0d0d;
}

.info-btn {
    background: none;
    border: none;
    padding: 4px;
    margin-left: 5px;
    margin-top: 0px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    fill: var(--primary-color);
    width: 24px;
    height: 24px;
    position: relative;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.info-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .info-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.info-btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* Info Popover Styles */
.info-popover {
    display: none;
    position: fixed;
    width: max-content;
    max-width: 280px;
    padding: 12px 14px;
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    color: #e0e0e0;
    z-index: 99999; /* Very high z-index to ensure it's above everything */
    text-align: left;
    pointer-events: auto;
}

/* Popovers appended to body get active styling */
body > .info-popover.active {
    display: block;
}

.info-popover.active {
    display: block;
    animation: popoverFadeIn 0.15s ease;
}

@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-popover b {
    color: var(--primary-color);
    display: block;
    margin-top: 8px;
}

.info-popover b:first-child {
    margin-top: 0;
}

.info-popover i {
    opacity: 0.7;
    font-size: var(--font-size-sm);
}

/* Light theme popover - only when NOT in dark mode */
:root:not([data-theme="dark"]) .info-popover {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.12);
    color: #333;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

:root:not([data-theme="dark"]) .info-popover b {
    color: var(--primary-color);
}

/* Popover wrapper */
.info-btn-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 10;
}

.info-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    z-index: 10000; /* High z-index to appear above all content */
}

/* When visible, use flexbox for centering */
.info-overlay[style*="display: flex"],
.info-overlay.visible {
    display: flex !important;
}

.info-overlay .info-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    padding: 24px;
    max-width: 400px;
    max-height: 85vh; /* Limit height to viewport */
    overflow-y: auto; /* Scroll if content is too tall */
    position: relative;
    font-size: 14px;
    color: var(--text-color);
    margin: 20px; /* Ensure some margin from edges */
}

.info-overlay .close-popup {
    position: absolute;
    background: none;
    cursor: pointer;
    top: 0px;
    right: 0;
    float: right;
    margin: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    z-index: 10;
}

button.info-btn:hover {
    background: initial;
}

.info-overlay .close-popup svg {
	max-width: 20px;
	fill: var(--button-bg-hover);
	height: 20px;
}

.info-overlay .close-popup:hover svg {
    transform: rotate(90deg);
    transition: 0.2s;
}

.wrapper {
    width: calc(100% - 24px);
    max-width: 1000px; /* Increased for wider content */
    margin: 16px auto;
    padding: 20px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    position: relative;
    z-index: 1;
    overflow: visible; /* Allow content to show properly */
}

.update-log-trigger button {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.update-log-trigger button svg {
    width: 18px;
    height: 18px;
    fill: var(--primary-color);
}

.update-log-trigger button[data-has-update="true"]::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--button-bg);
    box-shadow: 0 0 0 2px #fff;
}

.update-log-trigger button:hover,
.update-log-trigger button:focus-visible {
    background: rgba(255, 255, 255, 0.4);
    border-color: var(--primary-color);
    transform: scale(1.05);
    outline: none;
}

.changelog-overlay .info-content {
    max-width: 480px;
    max-height: 80vh; /* Slightly less to account for padding */
    text-align: left;
}

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

.changelog-entry {
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.changelog-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
}

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

.changelog-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
button.changelog-toggle:hover {
    background: initial;
}

.changelog-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease-in-out;
    fill: currentColor;
}

.changelog-toggle[aria-expanded="true"] .changelog-arrow {
    transform: rotate(180deg);
}

.changelog-panel {
    padding: 0 14px 14px 14px;
    display: none;
}

.changelog-panel.open {
    display: block;
}

.changelog-overlay .info-content h2 {
    font-size: 20px;
    margin: 0 0 12px 0;
    color: var(--primary-color);
}

.changelog-overlay .info-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.changelog-overlay .info-content ul {
    margin: 12px 0 16px 0;
    padding-left: 20px;
}

.changelog-overlay .info-content li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.changelog-overlay .info-content li strong {
    color: var(--primary-color);
}

.changelog-footer {
    margin: 0;
    font-size: 13px;
    color: #555;
}

h3, h4 {
    color: var(--primary-color);
    cursor: pointer;
    user-select: none; /* estä tekstivalinta */
}

h3:hover {
    text-decoration: underline;
}

input[type="number"],
input[type="text"].numeric-input {
    background: var(--input-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 14px;
    border: 1px solid var(--input-border);
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 14px;
}

input[type="number"]:focus,
input[type="text"].numeric-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 92, 122, 0.15);
    background: rgba(255, 255, 255, 0.8);
}

button {
    background: var(--button-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--button-text-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 18px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    display: block;
    margin-right: 10px;
    font-size: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

button:hover {
    background: var(--button-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

footer {
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    column-gap: 20px;
    display: flex;
    justify-content: center;
    height: 60px;
    background: var(--footer-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
    position: relative;
}
footer svg {
    height: 25px;
    fill: #e5dfbc;
    cursor: pointer;
}
footer p {
    margin: 0;
    font-style: italic;
    color: #e5dfbc;
}
footer a {
    color: #e5dfbc;
    text-decoration: none;
    font-style: italic;
}
footer a:hover {
    text-decoration: underline;
}
footer div {
    width: 300px;
}

/* Tulosten tyyli */
#results {
    position: relative;
}

#closeResults, #closeMaterials {
    position: absolute;
    top: -25px;
    right: -22px;
    cursor: pointer;
    background: none;
    width: max-content;
}
.materials-warning ~ button#closeResults {
    top: -50px;
}
div#results h3 ~ #closeResults {
    margin: 0;
    top: -40px;
    right: -20px;
}
#results .items {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

#results svg {
    height: 25px;
    fill: var(--button-bg);
    transition: 0.2s;
}

#results svg:hover {
    fill: var(--button-bg-hover);
    transform: rotate(90deg);
}

#results .level-group img {

        object-fit: scale-down;
        border-radius: 0;
}
#results img{
        width: 50px;
        height: 50px;
        object-fit: scale-down;
}


.results-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 10px;
}


.results-actions button#saveInfoBtn {
    position: absolute;
    right: 0;
    height: 20px;
    width: 20px;
    margin: 0 6px 0 0;
}

.results-actions button#saveInfoBtn svg:hover {
	transform: none;
}

.results-actions__group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 100%;
    justify-content: center;
}

.results-actions__button {
    width: auto;
    min-width: 100px;
    margin-top: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.results-actions__button:disabled {
    opacity: 0.75;
    cursor: default;
}

.results-actions__save {
    background-color: var(--button-bg);
}

.results-actions__save:hover {
    background-color: var(--button-bg-hover);
}

.results-actions__clear {
    background-color: #b63a3a;
}

.results-actions__clear:hover {
    background-color: #992f2f;
}

.results-actions__new {
    background: var(--primary-color);
    color: white;
    padding: 12px 24px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.results-actions__new:hover {
    background: var(--button-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 92, 122, 0.3);
}

.results-actions__info {
    margin-left: auto;
}

.results-actions__info svg:hover {
    transform: none;
}

.materials {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
}

.materials, .items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Väli materiaalien/itemien välillä */
    justify-content: center;
    margin-bottom: 20px; /* Väli materiaaliluetteloiden ja item-luetteloiden välillä */
    align-items: stretch;
}

.material, .item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.material img, .item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px; /* Väli kuvan ja tekstin välillä */
}

#results .material {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.materials p, .items p {
    margin-top: 10px;
}


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

.level-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.level-group > div {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    align-items: center;
    flex: 1 1 20%;
    justify-content: space-between;
}
.level-group .opacity {
    opacity: 0.5;
}
.items h3, h4 {
    cursor: text;
	font-size: 20px;
}

h4{
	margin-bottom: 0;
	margin-top: 8px;
}


.materials:before {
    content: "Materials";
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: var(--primary-color);
    font-size: 20px;
    font-weight: bold;
}

.materials > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(100% / 6);
    flex: 1 1 10%;
    justify-content: space-between;
}

@media only screen and (max-width: 620px) {
  .materials > div {
  flex: 1 1 20%;
  max-width: initial;
  }
}

@media only screen and (max-width: 420px) {
  .materials > div {
  flex: 1 1 25%;
  max-width: initial;
  }
}

@media only screen and (max-width: 325px) {
  .materials > div {
  flex: 1 1 30%;
  max-width: initial;
  }
}


h2 {
    margin: 0 auto;
    text-align: center;
    color: var(--primary-color);
    font-weight: bold;
}

.generate {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}
#manualInput{
	display: none;	
}
#manualInput button {
    margin-right: 10px;
}

.materials p.material-name {
    display: block;
    text-align: center;
    font-size: 14px;
    font-style: italic;
    color: var(--text-color);
    margin-bottom: 0;
}
.materials p.season-id {
    text-align: center;
    margin: 0;
    font-style: italic;
}

.level-group p.name {
    text-align: center;
    margin-bottom: 0px;
}
.level-group p.set-name,
.level-group p.season-info {
    text-align: center;
    margin: 0;
	font-size: 14px;
}
.level-group p.season-info {
    font-style: italic;
    margin-bottom: 4px;
}

button.multiplier-btn {
    margin-bottom: 20px;
}

#generatebychoice {
	position: relative;
	
}

#generatebychoice #closeMaterials svg {
	height: 20px;
	
}

.materials-list img {
    width: 45px;
    min-width: 45px;
    height: 45px;
    object-fit: scale-down;
    box-sizing: border-box;
}

.materials-list .my-material {
    display: flex;
    flex-direction: row;
    padding-bottom: 8px;
    column-gap: 17px;
    align-items: center;
    justify-content: space-between;
}

.materials-list .my-material > div, .templateAmountWrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.materials-list .my-material > div span, .templateAmountWrap label {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--primary-color);
    position: absolute;
    z-index: 1;
    font-size: 14px;
    top: 10px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.materials-list .my-material.active span, .templateAmountWrap.active label {
    top: -5px;
    left: 3px;
    font-size: 10px;
}

.materials-list .my-material > div input::placeholder {
    color: #fff;
        transition: color .3s;
}

.materials-list .my-material.active input::placeholder {
    color: var(--primary-color);
}

#advMaterials select {
    padding: 7px 10px;
    border: 1px solid var(--primary-color);
    background: transparent;
    border-radius: 4px;
    height: 31px;
    width: 110px;
    box-sizing: border-box;
}

#advMaterials h4 {
	margin: 10px 0;
	cursor: pointer;
	color: var(--primary-color);
	font-weight: bold;
	display: flex;
	align-items: center;
	width: 100%;
	font-size: 16px;
}

.adv-toggle {
    margin-top: 35px;
    cursor: pointer;
    color: var(--primary-color);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    user-select: none;
}


.toggle-arrow {
    width: 0.8em;
    height: 0.8em;
    margin-left: 5px;
    transition: transform 0.2s ease;
    fill: currentColor;
}

.adv-toggle.open .toggle-arrow,
#advMaterials h4.open .toggle-arrow {
    transform: rotate(180deg);
}


.level-select-container {
    margin-top: 10px;
}
.level-select-container p{
	margin-bottom: 5px;
}

.level-dropdown {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 5px;
    justify-content: center;
}

.level-dropdown div {
    padding: 10px 15px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.level-dropdown div:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.level-dropdown div.selected {
    background: var(--button-bg);
    color: #fff;
    border: 1px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(13, 92, 122, 0.3);
}

.season-zero-section {
    margin-top: 20px;
}

.season-zero-slider {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    margin-bottom: 18px;
}

.season-zero-slider__input {
    width: 100%;
    margin: 0;
    display: block;
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.season-zero-slider__input:focus-visible {
    outline: none;
}

.season-zero-slider__input::-webkit-slider-runnable-track {
    height: 6px;
    background: #d6dce1;
    border-radius: 999px;
}

.season-zero-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(8, 66, 90, 0.35);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    margin-top: -6px;
}

.season-zero-slider__input:hover::-webkit-slider-thumb,
.season-zero-slider__input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px rgba(8, 66, 90, 0.2);
    transform: scale(1.05);
}

.season-zero-slider__input::-moz-range-track {
    height: 6px;
    background: #d6dce1;
    border-radius: 999px;
}

.season-zero-slider__input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(8, 66, 90, 0.35);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.season-zero-slider__input:hover::-moz-range-thumb,
.season-zero-slider__input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 6px rgba(8, 66, 90, 0.2);
    transform: scale(1.05);
}

.season-zero-slider__labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    font-size: 12px;
    color: #666;
    margin-top: 3px;
}

.season-zero-slider__labels span {
    text-align: center;
}
.season-zero-slider__labels span:nth-child(1) {
    text-align: left;
}

.season-zero-slider__labels span:nth-child(2) {
    padding-left: 16px;
    text-align: left;
}

.season-zero-slider__labels span:nth-child(3) {
    padding-left: 20px;
}

.season-zero-slider__labels span:nth-child(4) {
    text-align: right;
}

#generatebychoice h4 {
    margin-bottom: 20px;
}

.materials-list .my-material > div input {
    background: var(--input-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 12px 14px;
    border: 1px solid var(--input-border);
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.materials-list .my-material > div input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.15);
    background: var(--input-bg);
}

.templateAmountWrap {
    width: 100%;
    max-width: 100%;
}

.templateAmountWrap input::placeholder {
    color: var(--primary-color);
}

.materials p.amount {
    color: #920b0b;
    font-style: italic;
    margin-bottom: 0;
    font-size: 14px;
}

.materials p.available-materials {
    color: var(--primary-color);
    margin-top: 5px;
}

.materials p {
    font-size: 15px;
}

.missing-input {
    animation: blink-animation 3s ease-in-out infinite;
}

.item-mats {
    display: none;
}

.materials p.remaining-to-use {
    display: none;
}

/* ================================================
   Loading Spinner / Overlay
   ================================================ */
.spinner-wrap {
    position: fixed;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    inset: 0;
    z-index: 9999;
    user-select: none;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.spinner-wrap.active {
    display: flex;
}

.spinner-wrap .loading {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    animation: loaderFadeIn 0.3s ease;
}

@keyframes loaderFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animated Loader */
.loader-animation {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    animation: loaderSpin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loader-ring:nth-child(1) {
    width: 80px;
    height: 80px;
    animation-delay: -0.45s;
    border-top-color: var(--primary-color);
    opacity: 0.3;
}

.loader-ring:nth-child(2) {
    width: 64px;
    height: 64px;
    animation-delay: -0.3s;
    border-top-color: var(--primary-color);
    opacity: 0.5;
}

.loader-ring:nth-child(3) {
    width: 48px;
    height: 48px;
    animation-delay: -0.15s;
    border-top-color: var(--primary-color);
    opacity: 0.8;
}

@keyframes loaderSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader-icon {
    color: var(--primary-color);
    animation: loaderPulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes loaderPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.spinner-wrap .loading-message {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    letter-spacing: 0.5px;
}

.spinner-progress {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.spinner-progress.is-active {
    opacity: 1;
}

.spinner-progress__track {
    position: relative;
    height: 6px;
    background: rgba(13, 92, 122, 0.15);
    border-radius: 999px;
    overflow: hidden;
}

.spinner-progress__bar {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--primary-color), #4fc3f7);
    width: 0%;
    transition: width 0.15s ease;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(13, 92, 122, 0.4);
}

.spinner-progress__label {
    display: block;
    margin-top: 10px;
    font-size: var(--font-size-sm);
    text-align: center;
    color: var(--text-color);
    opacity: 0.7;
}
.donate-header {
    /* width: 70%; */
    /* display: flex; */
    /* justify-content: center; */
    float: right;
}

.donate-header button#openGiftFromHeader {
    background: #fff;
    color: #08425a;
    column-gap: 10px;
    margin: 0;
    padding-top: 5px;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: flex-end;
}
.donate-header button#openGiftFromHeader:hover span {
    text-decoration: underline;
}

.donate-header button#openGiftFromHeader svg {
    width: 20px;
    fill: #08425a;
}

.gift {
    display: none;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 24px 28px;
    position: relative;
    box-shadow: var(--glass-shadow);
}

.gift button.close {
    background: #fff;
    gap: 20px;
    margin-top: 0px;
    position: absolute;
    top: -18px;
    right: -18px;
    width: 40px;
}

.gift button.close:hover svg {
	transform: rotate(90deg);	
}
.gift button.close svg {
    height: 20px;
    fill: #08425a;
	transition: 0.2s;
}
.gift a:active {
    color: #08425a;
}

.gift p span {
    width: 100%;
    font-size: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #08425a;
    padding: 10px 0px;
}

@keyframes blink-animation {
    0% {border: 2px solid #d52121;}
    25% {border: 2px solid var(--primary-color); }
        50% {border: 2px solid #d52121;}
	75% {border: 2px solid var(--primary-color); }
    100% {border: 2px solid #d52121;}
}

@media (max-width: 600px) {
	body {
		min-height: initial;
	}
}

/* Custom animated checkbox */
.checkbox-wrapper-30 .checkbox {
  --bg: #fff;
  --brdr: #d1d6ee;
  --brdr-actv: #1e2235;
  --brdr-hovr: #bbc1e1;
  --size: 1;
  --dur: calc((var(--size, 2)/2) * 1s);
  display: inline-block;
  width: calc(var(--size, 1) * 20px);
  position: relative;
}
.checkbox-wrapper-30 .checkbox:after {
  content: "";
  width: 100%;
  padding-top: 100%;
  display: block;
}
.checkbox-wrapper-30 .checkbox > * {
  position: absolute;
}
.checkbox-wrapper-30 .checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  background-color: var(--bg);
  border-radius: calc(var(--size, 1) * 4px);
  border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
  color: var(--newBrdrClr, var(--brdr));
  outline: none;
  margin: 0;
  padding: 0;
  transition: all calc(var(--dur) / 3) linear;
}
.checkbox-wrapper-30 .checkbox input:hover,
.checkbox-wrapper-30 .checkbox input:checked {
  --newBrdr: calc(var(--size, 1) * 2);
}
.checkbox-wrapper-30 .checkbox input:hover {
  --newBrdrClr: var(--brdr-hovr);
}
.checkbox-wrapper-30 .checkbox input:checked {
  --newBrdrClr: var();
  --newBrdrClr: var(--primary-color);
}
.checkbox-wrapper-30 .checkbox input:checked + svg {
  --dashArray: 16 93;
  --dashOffset: 109;
}
.checkbox-wrapper-30 .checkbox svg {
  fill: none;
  left: 0;
  pointer-events: none;
  stroke: var(--stroke, var(--border-active));
  stroke-dasharray: var(--dashArray, 93);
  stroke-dashoffset: var(--dashOffset, 94);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  top: 0;
  transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
}
.checkbox-wrapper-30 .checkbox svg,
.checkbox-wrapper-30 .checkbox input {
  display: block;
  height: 100%;
  width: 100%;
}
.checkbox-wrapper-30 label {
  cursor: pointer;
  margin-left: 8px;
  user-select: none;
  font-size: 14px;
}

/* Dark theme checkbox overrides */
[data-theme="dark"] .checkbox-wrapper-30 .checkbox {
  --bg: var(--checkbox-bg);
  --brdr: #333;
  --brdr-actv: #4fc3f7;
  --brdr-hovr: #444;
}

/* Header Actions (Update Log + Theme Toggle) */
.header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* Theme Toggle */
.theme-toggle button {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-toggle button:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: var(--primary-color);
}

/* Show moon in light mode, sun in dark mode */
.theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

/* Screenshot Upload Section */
.screenshot-upload-section {
    margin-bottom: 20px;
}

.screenshot-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.screenshot-upload-area:hover {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.screenshot-upload-area.drag-over {
    border-color: var(--primary-color);
    background: rgba(13, 92, 122, 0.15);
    border-style: solid;
    transform: scale(1.02);
}

[data-theme="dark"] .screenshot-upload-area.drag-over {
    background: rgba(79, 195, 247, 0.1);
}

.upload-content {
    pointer-events: none;
}

.upload-icon {
    width: 48px;
    height: 48px;
    fill: var(--primary-color);
    margin-bottom: 12px;
    opacity: 0.7;
}

.upload-text {
    font-size: 14px;
    color: var(--text-color);
    margin: 0 0 8px 0;
}

.upload-text span {
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

.upload-hint {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.6;
    margin: 0;
}

/* Screenshots Gallery */
.screenshots-gallery {
    margin-top: 16px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--gallery-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gallery-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gallery-header-bg);
    border-bottom: 1px solid var(--glass-border);
}

.gallery-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.add-more-btn,
.clear-all-btn {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-more-btn {
    background: var(--button-bg);
    color: var(--button-text-color);
    border: none;
    margin-left: auto;
}

.add-more-btn:hover {
    background: var(--button-bg-hover);
}

.clear-all-btn {
    background: transparent;
    color: #d32f2f;
    border: 1px solid #d32f2f;
}

.clear-all-btn:hover {
    background: #d32f2f;
    color: white;
}

.gallery-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
}

.gallery-image-item {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    flex-shrink: 0;
}

.gallery-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-image-item .remove-image-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}

.gallery-image-item .remove-image-btn:hover {
    background: #d32f2f;
}

.gallery-image-item .remove-image-btn svg {
    width: 12px;
    height: 12px;
    fill: white;
}

.gallery-image-item .scan-status {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px;
    font-size: 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

.gallery-image-item .scan-status:empty {
    display: none;
}

.gallery-thumbnail {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border-color);
}

.gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbnail .status-indicator {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.gallery-thumbnail .status-indicator.pending {
    background: #ffc107;
}

.gallery-thumbnail .status-indicator.processing {
    background: #2196f3;
}

.gallery-thumbnail .status-indicator.done {
    background: #4caf50;
    color: white;
}

.gallery-thumbnail .status-indicator.done::after {
    content: "✓";
}

/* OCR Progress */
.ocr-progress {
    margin-top: 16px;
    padding: 18px;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
}

.ocr-progress-bar {
    height: 8px;
    background: var(--input-bg);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.ocr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--button-bg), var(--primary-color));
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.ocr-status {
    font-size: 13px;
    color: var(--text-color);
    margin: 0;
    text-align: center;
}

/* OCR Results */
.ocr-results {
    margin-top: 16px;
    padding: 18px;
    background: var(--ocr-results-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ocr-results-border);
    border-radius: 16px;
}

.ocr-results-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--success-color);
    margin: 0 0 12px 0;
}

/* OCR Accordion */
.ocr-accordion {
    margin-bottom: 16px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
}

.ocr-accordion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(76, 175, 80, 0.15);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ocr-accordion-header:hover {
    background: rgba(76, 175, 80, 0.25);
}

.ocr-accordion-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--success-color);
}

.ocr-accordion-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.7;
    margin-left: auto;
}

.ocr-accordion-arrow {
    color: var(--success-color);
    transition: transform 0.3s ease;
}

.ocr-accordion-header[aria-expanded="true"] .ocr-accordion-arrow {
    transform: rotate(180deg);
}

.ocr-accordion-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.ocr-accordion-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}

.detected-material-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 8px var(--shadow-color);
}

.detected-material-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.detected-material-item .material-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.detected-material-item .season-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    white-space: nowrap;
}

.detected-material-item .material-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.detected-material-item .tier-breakdown {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.7;
    margin-left: 8px;
}

/* Material selection checkbox */
.detected-material-item .material-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

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

.detected-material-item .material-checkbox .checkmark {
    height: 20px;
    width: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.detected-material-item .material-checkbox:hover .checkmark {
    background-color: rgba(255, 255, 255, 0.5);
}

.detected-material-item .material-checkbox input:checked ~ .checkmark {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.detected-material-item .material-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.detected-material-item .material-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Excluded material styling */
.detected-material-item.excluded {
    opacity: 0.5;
    background: rgba(128, 128, 128, 0.2);
}

.detected-material-item.excluded img {
    filter: grayscale(100%);
}

.detected-material-item.excluded .material-amount {
    text-decoration: line-through;
    color: var(--text-color);
}

/* Suspicious OCR value styling */
.detected-material-item.suspicious-value {
    border-color: #f0ad4e;
    background: rgba(240, 173, 78, 0.15);
}

.detected-material-item .material-amount.suspicious {
    color: #f0ad4e;
    text-decoration: underline wavy;
}

.detected-material-item .ocr-warning {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #f0ad4e;
    background: rgba(240, 173, 78, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: auto;
    white-space: nowrap;
}

.detected-material-item .ocr-warning .warning-icon {
    font-size: 12px;
}

.detected-material-item .ocr-warning .warning-text {
    font-size: 10px;
}

/* Auto-corrected OCR value styling */
.detected-material-item.auto-corrected {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.1);
}

.detected-material-item .ocr-corrected {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #28a745;
    background: rgba(40, 167, 69, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: auto;
    white-space: nowrap;
}

.detected-material-item .ocr-corrected .corrected-icon {
    font-size: 12px;
}

.detected-material-item .ocr-corrected .corrected-text {
    font-size: 10px;
}

/* OCR Confidence indicator */
.detected-material-item .ocr-confidence {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.detected-material-item .ocr-confidence.high {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.detected-material-item .ocr-confidence.medium {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.detected-material-item .ocr-confidence.low {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

/* Low confidence value styling */
.detected-material-item.low-confidence {
    border-color: #dc3545;
    border-style: dashed;
}

/* Selection controls */
.ocr-selection-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.ocr-selection-controls button {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ocr-selection-controls button:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Season headers in OCR results */
.ocr-season-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin: 16px 0 8px 0;
    background: linear-gradient(135deg, var(--primary-color), rgba(13, 92, 122, 0.8));
    border-radius: 10px;
    color: white;
}

.ocr-season-header:first-of-type {
    margin-top: 0;
}

.ocr-season-header .season-name {
    font-size: 14px;
    font-weight: 600;
}

.ocr-season-header .season-count {
    font-size: 11px;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Season materials container */
.ocr-season-materials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apply-materials-btn {
    width: 100%;
    padding: 12px;
    background: var(--success-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apply-materials-btn:hover {
    filter: brightness(1.1);
}

/* OCR Debug */
/* OCR Status Bar */
.ocr-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.ocr-source-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ocr-source-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ocr-source-badge.ocrspace {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.ocr-source-badge.tesseract {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #333;
}

.ocr-quota-display {
    font-size: 12px;
}

.ocr-quota-display .quota-ok {
    color: #28a745;
}

.ocr-quota-display .quota-medium {
    color: #ffc107;
}

.ocr-quota-display .quota-low {
    color: #dc3545;
}

.ocr-quota-display .quota-unlimited {
    color: #17a2b8;
}

/* OCR Settings */
.ocr-settings {
    margin-top: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.ocr-settings summary {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.05);
    user-select: none;
}

.ocr-settings summary:hover {
    background: rgba(0, 0, 0, 0.1);
}

.ocr-settings-content {
    padding: 14px;
}

.ocr-api-key-section {
    margin-bottom: 12px;
}

.ocr-api-key-section label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-color);
}

.api-key-input-wrapper {
    display: flex;
    gap: 6px;
}

.api-key-input-wrapper input {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
}

.toggle-visibility-btn {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 14px;
}

.api-key-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.save-key-btn, .clear-key-btn {
    padding: 6px 14px;
    font-size: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.save-key-btn {
    background: var(--primary-color);
    color: white;
}

.save-key-btn:hover {
    filter: brightness(1.1);
}

.clear-key-btn {
    background: rgba(128, 128, 128, 0.2);
    color: var(--text-color);
}

.clear-key-btn:hover {
    background: rgba(128, 128, 128, 0.3);
}

.api-key-status {
    font-size: 11px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 4px;
}

.api-key-status.success {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.api-key-status.error {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

/* API Key Help */
.api-key-help {
    margin-top: 12px;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
}

.api-key-help summary {
    font-size: 12px;
    color: var(--primary-color);
    cursor: pointer;
    padding: 8px 12px;
}

.api-key-help-content {
    padding: 12px;
    font-size: 12px;
    line-height: 1.6;
}

.api-key-help-content ol, .api-key-help-content ul {
    padding-left: 20px;
    margin: 8px 0;
}

.api-key-help-content li {
    margin-bottom: 4px;
}

.api-key-help-content a {
    color: var(--primary-color);
}

.privacy-note {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.7;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.ocr-debug {
    margin-top: 12px;
}

.ocr-debug summary {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.6;
    cursor: pointer;
    padding: 4px 0;
}

.ocr-debug pre {
    font-size: 11px;
    background: var(--input-bg);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    max-height: 200px;
    margin: 8px 0 0 0;
    color: var(--text-color);
}

/* Dark theme - Wrapper and body backgrounds */
.wrapper {
    background: var(--glass-bg);
}

[data-theme="dark"] body {
    background: var(--light-bg);
    background-attachment: fixed;
}

[data-theme="dark"] body::before {
    background: 
        radial-gradient(circle at 20% 80%, rgba(79, 195, 247, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(79, 195, 247, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.02) 0%, transparent 30%);
}

[data-theme="dark"] .wrapper {
    box-shadow: var(--glass-shadow);
    border-color: var(--glass-border);
}

[data-theme="dark"] footer {
    background: var(--footer-bg);
    border-top-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] footer p {
    color: var(--footer-text);
}

[data-theme="dark"] .info-overlay .info-content {
    background: var(--glass-bg);
    color: var(--text-color);
    border-color: var(--glass-border);
}

[data-theme="dark"] .temps {
    background: var(--input-bg);
    color: var(--text-color);
    border-color: var(--input-border);
}

[data-theme="dark"] .temps:focus,
[data-theme="dark"] .temps:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-color) !important;
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"] {
    background: var(--input-bg);
    color: var(--text-color);
    border-color: var(--input-border);
}

[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="text"]:focus {
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] input::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

[data-theme="dark"] .gift {
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    border-color: var(--glass-border);
}

[data-theme="dark"] .gift p {
    color: var(--text-color);
}

[data-theme="dark"] .loading {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

[data-theme="dark"] .loading-message {
    color: var(--text-color);
}

[data-theme="dark"] .section-title:before {
    background: var(--button-bg-hover);
}

[data-theme="dark"] .checkbox-header {
    background: transparent;
}

[data-theme="dark"] .changelog-content {
    background: var(--glass-bg);
}

[data-theme="dark"] .changelog-toggle {
    color: var(--text-color);
}

[data-theme="dark"] .changelog-panel ul li {
    color: var(--text-color);
}

[data-theme="dark"] .changelog-entry {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .materials-list .my-material > div span,
[data-theme="dark"] .templateAmountWrap label {
    background: rgba(10, 10, 10, 0.9);
}

[data-theme="dark"] .materials-list .my-material > div input:focus {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.25);
}

[data-theme="dark"] .level-dropdown div {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .level-dropdown div:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .level-dropdown div.selected {
    background: var(--button-bg);
    box-shadow: 0 4px 15px rgba(79, 195, 247, 0.15);
}

[data-theme="dark"] .detected-material-item {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .detected-material-item.excluded {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .detected-material-item.suspicious-value {
    border-color: #f0ad4e;
    background: rgba(240, 173, 78, 0.15);
}

[data-theme="dark"] .detected-material-item .ocr-warning {
    background: rgba(240, 173, 78, 0.25);
}

[data-theme="dark"] .detected-material-item .ocr-confidence.high {
    background: rgba(40, 167, 69, 0.3);
}

[data-theme="dark"] .detected-material-item .ocr-confidence.medium {
    background: rgba(255, 193, 7, 0.3);
}

[data-theme="dark"] .detected-material-item .ocr-confidence.low {
    background: rgba(220, 53, 69, 0.3);
}

[data-theme="dark"] .detected-material-item.auto-corrected {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.15);
}

[data-theme="dark"] .detected-material-item .ocr-corrected {
    background: rgba(40, 167, 69, 0.25);
}

[data-theme="dark"] .detected-material-item .material-checkbox .checkmark {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .ocr-selection-controls button {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .screenshot-upload-area {
    background: var(--glass-bg);
}

[data-theme="dark"] .screenshot-upload-area:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .quality-select__display {
    background: var(--input-bg);
}

[data-theme="dark"] .quality-select__options {
    background: var(--glass-bg);
}

/* Dark mode quality label colors - brighter for visibility */
[data-theme="dark"] .quality-select__display[data-quality-value="poor"] .quality-select__label {
    color: #9a9a9a;
}

[data-theme="dark"] .quality-select__display[data-quality-value="common"] .quality-select__label {
    color: #5aff5a;
}

[data-theme="dark"] .quality-select__display[data-quality-value="fine"] .quality-select__label {
    color: #4da6ff;
}

[data-theme="dark"] .quality-select__display[data-quality-value="exquisite"] .quality-select__label {
    color: #c77dff;
}

[data-theme="dark"] .quality-select__display[data-quality-value="epic"] .quality-select__label {
    color: #ff9f40;
}

[data-theme="dark"] .quality-select__display[data-quality-value="legendary"] .quality-select__label {
    color: #ffd966;
}

/* Dark mode quality option colors */
[data-theme="dark"] .quality-select__option[data-quality="fine"]:not(.selected) .quality-select__option-label {
    color: #4da6ff;
}

[data-theme="dark"] .quality-select__option[data-quality="exquisite"]:not(.selected) .quality-select__option-label {
    color: #c77dff;
}

/* Dark mode template card borders - brighter */
[data-theme="dark"] .template-card[data-quality="poor"] {
    border-color: rgba(154, 154, 154, 0.6);
}

[data-theme="dark"] .template-card[data-quality="common"] {
    border-color: rgba(90, 255, 90, 0.5);
}

[data-theme="dark"] .template-card[data-quality="fine"] {
    border-color: rgba(77, 166, 255, 0.6);
}

[data-theme="dark"] .template-card[data-quality="exquisite"] {
    border-color: rgba(199, 125, 255, 0.6);
}

[data-theme="dark"] .template-card[data-quality="epic"] {
    border-color: rgba(255, 159, 64, 0.6);
}

[data-theme="dark"] .template-card[data-quality="legendary"] {
    border-color: rgba(255, 217, 102, 0.6);
}

[data-theme="dark"] .spinner-wrap {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .spinner-wrap .loading {
    background: rgba(20, 25, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .spinner-progress__track {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .spinner-progress__bar {
    background: linear-gradient(90deg, var(--primary-color), #4fc3f7);
}

[data-theme="dark"] .materials-warning {
    background: rgba(139, 90, 43, 0.3);
    border-color: rgba(240, 195, 109, 0.3);
    color: #f0c36d;
}

/* ================================================
   WIZARD UI STYLES
   ================================================ */

/* Wizard Progress Indicator */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 20px 0 30px;
    padding: 16px 20px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
}

.wizard-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 12px;
}

.wizard-progress__step:hover {
    background: rgba(255, 255, 255, 0.2);
}

.wizard-progress__number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid var(--glass-border);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.wizard-progress__step.active .wizard-progress__number,
.wizard-progress__step.completed .wizard-progress__number {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 15px rgba(13, 92, 122, 0.4);
}

.wizard-progress__step.completed .wizard-progress__number {
    font-size: 0; /* Hide the number */
}

.wizard-progress__step.completed .wizard-progress__number::after {
    content: '✓';
    font-size: 14px; /* Show checkmark at proper size */
}

.wizard-progress__label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    opacity: 0.7;
}

.wizard-progress__step.active .wizard-progress__label {
    opacity: 1;
    color: var(--primary-color);
}

.wizard-progress__connector {
    width: 40px;
    height: 2px;
    background: var(--glass-border);
    margin: 0 4px;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}

.wizard-progress__step.completed + .wizard-progress__connector {
    background: var(--primary-color);
}

/* Wizard Content Container */
.wizard-content {
    position: relative;
    min-height: 400px;
    overflow: visible;
    width: 100%;
}

/* Wizard Steps */
.wizard-step {
    display: none;
    animation: wizardFadeIn 0.4s ease;
}

.wizard-step.active {
    display: block;
}

@keyframes wizardFadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wizard-step__header {
    text-align: center;
    margin-bottom: 24px;
}

.wizard-step__header h2 {
    color: var(--primary-color);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 8px;
}

.wizard-step__header p {
    color: var(--text-color);
    opacity: 0.8;
    font-size: 14px;
    margin: 0;
}

/* Wizard Navigation */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border);
}

.wizard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    width: auto;
    margin: 0;
}

.wizard-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.wizard-btn--prev {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    border-color: var(--glass-border);
}

.wizard-btn--prev:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.35);
    transform: translateX(-2px);
}

.wizard-btn--prev:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wizard-btn--next {
    background: var(--button-bg);
    color: #fff;
    margin-left: auto;
}

.wizard-btn--next:hover {
    background: var(--button-bg-hover);
    transform: translateX(2px);
    box-shadow: 0 6px 20px rgba(13, 92, 122, 0.3);
}

.wizard-btn--calculate {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
    color: #fff;
    flex: 1;
    max-width: 200px;
}

.wizard-btn--calculate:hover {
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
    transform: translateY(-2px);
}

.wizard-btn--new {
    background: var(--button-bg);
    color: #fff;
}

.wizard-btn--new:hover {
    background: var(--button-bg-hover);
}

/* Glass Card Base */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    width: 100%;
}

/* Scale Card */
.scale-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}

.scale-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scale-card__label {
    font-weight: 600;
    color: var(--primary-color);
}

.scale-select {
    width: auto;
    min-width: 180px;
}

/* Materials Card */
.materials-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.materials-card__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}

/* Materials Grid - Wider items for better input visibility */
.materials-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    width: 100%;
}

/* Extra small screens (phones in portrait) */
@media (min-width: 360px) {
    .materials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Small screens (large phones, small tablets) */
@media (min-width: 520px) {
    .materials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Medium screens (tablets) */
@media (min-width: 700px) {
    .materials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

/* Large screens (small laptops) */
@media (min-width: 900px) {
    .materials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Extra large screens (desktops) */
@media (min-width: 1200px) {
    .materials-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

.material-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    min-height: 65px;
    overflow: hidden;
}

.material-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.material-item.focused {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.2);
}

.material-item img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.material-item__input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.material-item__input span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: 0.85;
}

.material-item__input input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    max-width: 100%;
}

.material-item__input input::placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

/* ============================================
   Common Material Input Component
   Used by both Basic Materials and Gear Materials
   for consistent styling across the application
   ============================================ */
.material-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: left;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.material-input::placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

.material-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.15);
    background: var(--input-bg);
}

/* Dark mode for common material input */
[data-theme="dark"] .material-input:focus {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.25);
}

/* Apply common styles to material-item__input input (Basic Materials) */
.material-item__input input {
    /* Extend common material input styles */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: left;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    box-sizing: border-box;
    transition: all 0.2s ease;
    max-width: 100%;
}

.material-item__input input::placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

.material-item__input input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.15);
    background: var(--input-bg);
}

/* Dark mode for basic materials input */
[data-theme="dark"] .material-item__input input:focus {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.25);
}

/* Responsive adjustments for material items */
@media (max-width: 479px) {
    .material-item {
        flex-direction: column;
        text-align: center;
        padding: 10px 8px;
    }
    
    .material-item img {
        width: 28px;
        height: 28px;
    }
    
    .material-item__input {
        align-items: center;
        width: 100%;
    }
    
    .material-item__input span {
        text-align: center;
    }
    
    .material-item__input input {
        text-align: center;
        max-width: 90px;
    }
}

@media (min-width: 640px) {
    .material-item img {
        width: 36px;
        height: 36px;
    }
    
    .material-item__input span {
        font-size: 11px;
    }
    
    .material-item__input input {
        font-size: 15px;
        padding: 10px 12px;
    }
}

/* Accordion Toggle (div with role="button") */
.accordion-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
    margin: 0;
    gap: 12px;
}

.accordion-toggle:hover {
    background: rgba(255, 255, 255, 0.02);
}

.accordion-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.accordion-toggle__label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.accordion-toggle .ms-section-total {
    margin-left: auto;
    flex-shrink: 0;
}

.accordion-arrow {
    width: 16px;
    height: 16px;
    fill: var(--primary-color);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.accordion-toggle[aria-expanded="true"] .accordion-arrow {
    transform: rotate(180deg);
}

/* Info button inside accordion toggle label */
.accordion-toggle .ms-accordion-info {
    position: relative;
    z-index: 10;
}

.accordion-toggle .ms-accordion-info .info-popover {
    left: 0;
    right: auto;
    min-width: 250px;
}

/* Section Total in Accordion Headers */
.ms-section-total {
    margin-left: auto;
    margin-right: 12px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--success-color);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(56, 142, 60, 0.2));
    border: 1px solid rgba(76, 175, 80, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
}

/* Category Total in Sub-sections */
.ms-category-total {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--success-color);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(56, 142, 60, 0.15));
    border: 1px solid rgba(76, 175, 80, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
}

/* Base March Size Total Display */
.ms-base-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%);
    border: 2px solid var(--accent-green);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}

.ms-base-total__main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ms-base-total__label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.ms-base-total__value {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--accent-green);
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.ms-base-total__breakdown {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.ms-breakdown__flat {
    color: var(--text-primary);
}

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

.ms-breakdown__pct {
    color: var(--accent-gold);
    font-weight: var(--font-weight-semibold);
}

.ms-base-total__pct {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    justify-content: center;
}

.ms-base-total__pct-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.ms-base-total__pct-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--accent-gold);
    font-family: 'JetBrains Mono', monospace;
}

.accordion-content {
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

/* Gear Materials Specific Styles */
.gear-materials-card {
    padding: 16px 20px 20px;
}

.gear-materials-card .accordion-toggle {
    padding: 0;
    margin: 0;
    border-bottom: none;
    min-height: auto;
}

.gear-materials-card .accordion-content {
    display: none;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--glass-border);
}

/* Gear Materials Container */
#advMaterials {
    display: block;
}

#advMaterials[style*="block"] {
    display: block !important;
}

/* Season Headers in Gear Materials */
#advMaterials h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin: 0 0 12px 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#advMaterials h4:hover {
    background: rgba(255, 255, 255, 0.25);
}

#advMaterials h4 .toggle-arrow {
    width: 14px;
    height: 14px;
    fill: var(--primary-color);
    transition: transform 0.3s ease;
}

#advMaterials h4.open .toggle-arrow {
    transform: rotate(180deg);
}

/* Season Content Container - Grid Layout matching Basic Materials */
#advMaterials > div:not(.section-title):not(.level-select-container) {
    display: none;
    margin-bottom: 16px;
}

#advMaterials > div[style*="block"]:not(.section-title):not(.level-select-container) {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

@media (min-width: 360px) {
    #advMaterials > div[style*="block"]:not(.section-title):not(.level-select-container) {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (min-width: 700px) {
    #advMaterials > div[style*="block"]:not(.section-title):not(.level-select-container) {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (min-width: 1200px) {
    #advMaterials > div[style*="block"]:not(.section-title):not(.level-select-container) {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* Gear Material Items - Same Layout as Basic Materials */
#advMaterials .my-material {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    min-height: 65px;
    box-sizing: border-box;
    overflow: hidden;
}

#advMaterials .my-material:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#advMaterials .my-material img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

#advMaterials .my-material > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

#advMaterials .my-material > div span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    max-width: 100%;
    position: static;
    background: none;
    padding: 0;
}

#advMaterials .my-material > div input {
    /* Uses common material input styles */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    box-sizing: border-box;
    text-align: left;
    transition: all 0.2s ease;
}

#advMaterials .my-material > div input::placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

#advMaterials .my-material > div input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.15);
    background: var(--input-bg);
}

/* Dark mode for gear materials input */
[data-theme="dark"] #advMaterials .my-material > div input:focus {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.25);
}

#advMaterials .my-material.active > div span {
    color: var(--primary-color);
}

/* Gear Materials Section Title & Level Select */
.gear-levels-header {
    grid-column: 1 / -1; /* Span all columns in grid */
    margin-bottom: 12px;
}

.gear-levels-title {
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
    margin-bottom: 8px;
}

.gear-levels-description {
    font-size: var(--font-size-base);
    color: var(--text-color);
    opacity: 0.85;
    margin: 0 0 8px;
    line-height: var(--line-height-normal);
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

[data-theme="dark"] .gear-levels-description {
    background: rgba(255, 255, 255, 0.05);
}

#advMaterials .section-title {
    margin: 16px 0 12px;
    justify-content: flex-start;
}

#advMaterials .section-title:before {
    display: none; /* Hide the line in gear materials */
}

#advMaterials .section-title .checkbox-header {
    background: transparent;
    padding: 0;
}

#advMaterials .section-title span {
    background: transparent;
    padding: 0;
    font-size: 13px;
}

#advMaterials .level-select-container {
    grid-column: 1 / -1; /* Span all columns */
    margin-bottom: 10px;
}

#advMaterials .level-dropdown {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#advMaterials .level-dropdown div {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#advMaterials .level-dropdown div:hover {
    background: rgba(255, 255, 255, 0.25);
}

#advMaterials .level-dropdown div.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Responsive Gear Materials on Small Screens */
@media (max-width: 479px) {
    #advMaterials .my-material {
        flex-direction: column;
        text-align: center;
        padding: 10px 8px;
    }
    
    #advMaterials .my-material img {
        width: 28px;
        height: 28px;
    }
    
    #advMaterials .my-material > div {
        align-items: center;
        width: 100%;
    }
    
    #advMaterials .my-material > div span {
        text-align: center;
    }
    
    #advMaterials .my-material > div input {
        text-align: center;
        max-width: 90px;
    }
    
    #advMaterials h4 {
        padding: 10px 12px;
        font-size: 13px;
    }
}

@media (min-width: 640px) {
    #advMaterials .my-material img {
        width: 36px;
        height: 36px;
    }
    
    #advMaterials .my-material > div span {
        font-size: var(--font-size-sm);
    }
    
    #advMaterials .my-material > div input {
        font-size: var(--font-size-lg);
        padding: 10px 12px;
    }
}

/* Dark theme for gear materials */
[data-theme="dark"] #advMaterials .my-material {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] #advMaterials .my-material:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ============================================
   Optimizer Section
   ============================================ */
.optimizer-section {
    margin-bottom: 24px;
    padding: 20px;
}

.optimizer-goals__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin-bottom: 16px;
    text-align: center;
}

.optimizer-goals__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .optimizer-goals__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.optimizer-goal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.optimizer-goal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.optimizer-goal-card.active {
    background: linear-gradient(135deg, rgba(13, 92, 122, 0.15) 0%, rgba(13, 92, 122, 0.25) 100%);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 92, 122, 0.2);
}

.optimizer-goal-card__icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.optimizer-goal-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.optimizer-goal-card__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
}

.optimizer-goal-card__desc {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
}

/* Optimizer Results */
.optimizer-results {
    background: linear-gradient(135deg, rgba(232, 245, 233, 0.6) 0%, rgba(200, 230, 201, 0.6) 100%);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

[data-theme="dark"] .optimizer-results {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.2) 0%, rgba(27, 94, 32, 0.2) 100%);
}

.optimizer-results__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.optimizer-results__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--success-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.optimizer-results__icon {
    font-size: 20px;
}

.optimizer-results__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.optimizer-summary-stat {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

[data-theme="dark"] .optimizer-summary-stat {
    background: rgba(0, 0, 0, 0.2);
}

.optimizer-summary-stat__label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.optimizer-summary-stat__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

/* Optimizer Pieces Grid */
.optimizer-pieces {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 600px) {
    .optimizer-pieces {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .optimizer-pieces {
        grid-template-columns: repeat(6, 1fr);
    }
}

.optimizer-piece-card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .optimizer-piece-card {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.optimizer-piece-card__icon {
    font-size: 28px;
    margin-bottom: 6px;
}

.optimizer-piece-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin-bottom: 8px;
}

.optimizer-piece-card__level {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin-bottom: 4px;
}

.optimizer-piece-card__count {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--success-color);
}

.optimizer-piece-card__count-label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
}

.optimizer-piece-card__bottleneck {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.6;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Optimizer Actions */
.optimizer-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.optimizer-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.optimizer-btn--apply {
    background: var(--success-color);
    color: white;
}

.optimizer-btn--apply:hover {
    background: #1b5e20;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.optimizer-btn--customize {
    background: var(--glass-bg);
    color: var(--text-color);
    border: 1px solid var(--glass-border);
}

.optimizer-btn--customize:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: var(--primary-color);
}

.optimizer-btn--back {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 10px 20px;
}

.optimizer-btn--back:hover {
    background: var(--primary-color);
    color: white;
}

/* Optimizer Empty State */
.optimizer-empty {
    text-align: center;
    padding: 30px 20px;
}

.optimizer-empty__icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.optimizer-empty__text {
    font-size: var(--font-size-md);
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 16px;
}

/* Templates Section Toggle */
.templates-section {
    margin-top: 20px;
}

.templates-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.templates-toggle:hover {
    background: rgba(255, 255, 255, 0.35);
}

.templates-toggle[aria-expanded="true"] {
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}

.templates-toggle__text {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
}

.templates-toggle__arrow {
    transition: transform 0.3s ease;
}

.templates-toggle[aria-expanded="true"] .templates-toggle__arrow {
    transform: rotate(180deg);
}

.templates-content {
    padding: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.templates-section__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 16px;
}

/* ============================================
   Template Planner Section
   ============================================ */
.planner-section {
    margin-bottom: 24px;
    padding: 20px;
}

.planner-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.planner-control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.planner-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
}

.planner-hint {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.6;
    margin: 0;
}

/* Slider */
.planner-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.planner-slider {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--glass-border);
    outline: none;
    -webkit-appearance: none;
}

.planner-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.planner-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

.planner-slider-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    min-width: 50px;
    text-align: center;
}

/* Level Buttons */
.planner-level-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.planner-level-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    color: var(--text-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.planner-level-btn:hover {
    border-color: var(--primary-color);
    background: rgba(13, 92, 122, 0.1);
}

.planner-level-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Select */
.planner-select {
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    font-size: var(--font-size-md);
    color: var(--text-color);
    cursor: pointer;
    max-width: 300px;
}

/* Buttons */
.planner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.planner-btn--generate {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 100%;
    max-width: 400px;
    align-self: center;
}

.planner-btn--generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.planner-btn--apply {
    background: var(--success-color);
    color: white;
}

.planner-btn--apply:hover {
    background: #1b5e20;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

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

.planner-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: var(--primary-color);
}

.planner-btn--text {
    background: transparent;
    color: var(--primary-color);
    padding: 12px 16px;
}

.planner-btn--text:hover {
    background: rgba(13, 92, 122, 0.1);
}

.planner-btn--back {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 10px 20px;
}

.planner-btn--back:hover {
    background: var(--primary-color);
    color: white;
}

/* Planner Results */
.planner-results {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.planner-section-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
}

.planner-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.planner-section-icon {
    font-size: 20px;
}

.planner-section-desc {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
    margin: 0 0 12px 0;
}

/* Crafting Plan */
.planner-plan {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.planner-level-group {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 12px;
}

[data-theme="dark"] .planner-level-group {
    background: rgba(0, 0, 0, 0.2);
}

.planner-level-header {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.planner-piece-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.planner-piece-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    padding: 4px 0;
}

.planner-piece-count {
    font-weight: var(--font-weight-bold);
    color: var(--success-color);
    min-width: 50px;
    text-align: right;
}

.planner-piece-name {
    flex: 1;
}

.planner-piece-arrow {
    color: var(--text-color);
    opacity: 0.4;
}

/* Material Summary */
.planner-materials {
    overflow-x: auto;
}

.planner-materials table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.planner-materials th,
.planner-materials td {
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid var(--glass-border);
}

.planner-materials th {
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    opacity: 0.7;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
}

.planner-materials th:first-child,
.planner-materials td:first-child {
    text-align: left;
}

.planner-materials td {
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
}

.planner-materials .mat-code {
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
}

.planner-materials .mat-remaining {
    color: var(--success-color);
}

.planner-materials .mat-used {
    color: var(--primary-color);
}

/* Planner Stats */
.planner-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.planner-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.planner-stat__label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.6;
    text-transform: uppercase;
}

.planner-stat__value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.planner-stat__value.excellent {
    color: var(--success-color);
}

/* Cascade Projection */
.cascade-projection {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cascade-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    min-width: 70px;
}

[data-theme="dark"] .cascade-stage {
    background: rgba(0, 0, 0, 0.2);
}

.cascade-stage.final {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.2) 0%, rgba(27, 94, 32, 0.3) 100%);
    border: 2px solid var(--success-color);
}

.cascade-level {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    opacity: 0.7;
}

.cascade-count {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.cascade-stage.final .cascade-count {
    color: var(--success-color);
}

.cascade-arrow {
    color: var(--text-color);
    opacity: 0.3;
    font-size: var(--font-size-lg);
}

/* Planner Actions */
.planner-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 10px;
}

/* Planner Empty State */
.planner-empty {
    text-align: center;
    padding: 30px 20px;
}

.planner-empty__icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.planner-empty__text {
    font-size: var(--font-size-md);
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 16px;
}

/* ============================================
   Strategy Settings Section (Step 2 - Above Cascade)
   ============================================ */
.strategy-settings {
    margin-bottom: 28px;
}

.strategy-settings__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Settings Row - Horizontal layout for compact settings */
.settings-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

/* 2-column variant for settings */
.settings-row--2col {
    grid-template-columns: repeat(2, 1fr);
}

/* 3-column variant for settings */
.settings-row--3col {
    grid-template-columns: repeat(3, 1fr);
}

/* 4-column variant for more settings */
.settings-row--4col {
    grid-template-columns: repeat(4, 1fr);
}

.settings-row > .glass-card {
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .settings-row--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .settings-row--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .settings-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .settings-row,
    .settings-row--2col,
    .settings-row--3col,
    .settings-row--4col {
        grid-template-columns: 1fr;
    }
}

/* Compact settings card */
.settings-card--compact.glass-card {
    padding: 16px 18px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .settings-card--compact.glass-card {
        padding: 14px 16px;
    }
}

.settings-card--compact .settings-card__header {
    padding: 0;
    margin-bottom: 16px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.settings-card--compact .settings-card__header > span:first-child {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    white-space: nowrap;
    overflow: visible;
}

.settings-card--compact .settings-card__content {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

/* Usage slider card - Horizontal layout */
.settings-card--usage.glass-card {
    padding: 12px 16px;
}

.settings-card--usage .settings-card__content {
    padding: 0;
}

/* Horizontal layout for Material Usage */
.usage-horizontal {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.usage-horizontal__slider {
    flex: 1;
    min-width: 200px;
}

.usage-horizontal__label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.usage-horizontal__summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 280px;
}

.usage-summary-inline {
    display: flex;
    gap: 16px;
}

.usage-summary-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.usage-summary-item__icon {
    font-size: 14px;
}

.usage-summary-item__used {
    color: var(--primary-color);
    font-weight: 600;
    font-family: var(--font-family-mono);
}

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

.usage-summary-item__total {
    color: var(--text-muted);
    font-family: var(--font-family-mono);
}

.usage-horizontal__toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.usage-horizontal__toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

.usage-horizontal__toggle .toggle-arrow {
    transition: transform 0.2s ease;
}

.usage-horizontal__toggle.open .toggle-arrow {
    transform: rotate(180deg);
}

/* Material detail when expanded */
.settings-card--usage .material-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
}

/* Responsive: Stack on mobile */
@media (max-width: 800px) {
    .usage-horizontal {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .usage-horizontal__slider {
        min-width: auto;
    }
    
    .usage-horizontal__summary {
        min-width: auto;
    }
    
    .usage-horizontal__toggle {
        align-self: flex-end;
        margin-left: 0;
        margin-top: -8px;
    }
}

.usage-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.usage-slider__input {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(13, 92, 122, 0.3) 0%, rgba(13, 92, 122, 0.1) 100%);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.usage-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0a4a5e 100%);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.usage-slider__input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════
   CRAFTING SETTINGS - Three Card Layout
   ═══════════════════════════════════════════════════════════════ */

.crafting-settings {
    margin-bottom: 24px;
}

.crafting-settings__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin-bottom: 16px;
}

.crafting-settings__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    align-items: start;
}

/* Material Usage spans full width on top */
.crafting-settings__grid .settings-card--usage {
    grid-column: 1 / -1;
}

/* Legacy - keep for any old references */
.strategy-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Card 1: Gear Levels */
.settings-card--gear-levels.glass-card {
    padding: 14px 16px;
    overflow: visible !important;
}

.settings-card--gear-levels .settings-card__header {
    padding: 0;
    margin-bottom: 10px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.settings-card--gear-levels .settings-card__header > span:first-child {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
}

.settings-card--gear-levels .settings-card__content {
    padding: 0;
}

.gear-levels-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-select-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.quick-select-row .quick-select-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.quick-select-row .quick-select-btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    border: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-color) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

.quick-select-row .quick-select-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--primary-color) !important;
}

.quick-select-row .quick-select-btn--clear {
    color: var(--text-muted);
    padding: 4px 8px !important;
}

/* Card 2: Preferences */
.settings-card--preferences.glass-card {
    padding: 14px 16px;
    overflow: visible !important;
}

.settings-card--preferences .settings-card__header {
    padding: 0;
    margin-bottom: 10px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.settings-card--preferences .settings-card__header > span:first-child {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
}

.settings-card--preferences .settings-card__content {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Preference rows */
.pref-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pref-row__label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 36px;
    flex-shrink: 0;
}

.pref-row__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.pref-row__controls--slider {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

/* Inline checkbox style */
.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    transition: all 0.2s ease;
    font-size: 12px;
}

.checkbox-inline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.checkbox-inline input[type="checkbox"] {
    display: none;
}

.checkbox-inline__box {
    width: 14px;
    height: 14px;
    border: 2px solid var(--glass-border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-inline input[type="checkbox"]:checked + .checkbox-inline__box {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-inline input[type="checkbox"]:checked + .checkbox-inline__box::after {
    content: '✓';
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.checkbox-inline__label {
    color: var(--text-color);
    white-space: nowrap;
}

/* Disabled checkbox state */
.checkbox-inline.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Preference slider */
.pref-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.pref-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.pref-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.pref-slider__labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    padding: 0 2px;
}

/* Responsive: Two-column to single column */
@media (max-width: 700px) {
    .crafting-settings__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .crafting-settings__grid .settings-card--usage {
        grid-column: 1;
    }
    
    .strategy-settings {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .settings-card--gear-levels.glass-card,
    .settings-card--preferences.glass-card,
    .settings-card--usage.glass-card {
        padding: 12px 14px;
    }
    
    .pref-row__controls {
        flex-wrap: wrap;
    }
    
    .checkbox-inline {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 60px;
    }
}

@media (max-width: 500px) {
    .quick-select-row .quick-select-label {
        display: none;
    }
    
    .pref-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .pref-row__label {
        min-width: auto;
    }
    
    .pref-row__controls {
        width: 100%;
    }
    
    .checkbox-inline {
        flex: 1;
        padding: 6px 8px;
        font-size: 11px;
    }
    
    .checkbox-inline__box {
        width: 12px;
        height: 12px;
    }
}

/* Season gear layout */
.season-gear-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Quick select button group */
.quick-select-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-select-label {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
    font-weight: var(--font-weight-medium);
}

.quick-select-btn {
    padding: 8px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
    min-height: 36px;
}

.quick-select-btn:hover {
    background: rgba(13, 92, 122, 0.15);
    border-color: var(--primary-color);
}

.quick-select-btn:active {
    transform: scale(0.96);
}

.quick-select-btn--clear {
    color: var(--text-color);
    opacity: 0.7;
}

.quick-select-btn--clear:hover {
    opacity: 1;
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.5);
    color: #dc3545;
}

[data-theme="dark"] .quick-select-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .quick-select-btn:hover {
    background: rgba(79, 195, 247, 0.15);
}

/* Toggle Button Group (for CTW, etc.) */
.toggle-btn-group {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
}

.toggle-btn {
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
    opacity: 0.7;
    position: relative;
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-btn:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--glass-border);
}

.toggle-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

.toggle-btn.active {
    background: var(--button-bg);
    color: #fff;
    opacity: 1;
}

.toggle-btn.active::after {
    display: none;
}

[data-theme="dark"] .toggle-btn-group {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .toggle-btn.active {
    background: var(--button-bg);
    box-shadow: 0 2px 8px rgba(79, 195, 247, 0.2);
}

@media (max-width: 600px) {
    .toggle-btn {
        padding: 12px 10px;
        font-size: var(--font-size-base);
    }
}

/* Inline gear levels selector */
.gear-levels-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.gear-levels-inline .level-dropdown--inline {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 550px;
}

.gear-levels-inline .level-btn {
    padding: 10px 8px;
    border: 2px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gear-levels-inline .level-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.gear-levels-inline .level-btn.selected {
    background: var(--button-bg);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 3px 10px rgba(13, 92, 122, 0.25);
}

[data-theme="dark"] .gear-levels-inline .level-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .gear-levels-inline .level-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .gear-levels-inline .level-btn.selected {
    background: var(--button-bg);
    box-shadow: 0 4px 15px rgba(79, 195, 247, 0.2);
}

/* Tablet: 5 columns for level buttons */
@media (max-width: 768px) {
    .gear-levels-inline .level-dropdown--inline {
        grid-template-columns: repeat(5, 1fr);
        max-width: 100%;
    }
    
    .gear-levels-inline .level-btn {
        padding: 12px 6px;
        font-size: var(--font-size-sm);
    }
}

/* Mobile: 3 columns for level buttons */
@media (max-width: 480px) {
    .gear-levels-inline .level-dropdown--inline {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gear-levels-inline .level-btn {
        padding: 14px 8px;
        min-height: 48px;
    }
    
    .quick-select-group {
        justify-content: center;
        width: 100%;
    }
    
    .quick-select-btn {
        flex: 1;
        justify-content: center;
        min-height: 40px;
    }
}

.usage-slider__input::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0a4a5e 100%);
    cursor: pointer;
    border: none;
}

.usage-slider__value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    min-width: 70px;
    text-align: right;
}

.usage-slider__hint {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.6;
    margin: 10px 0 0 0;
}

/* Material Summary Display */
.material-summary {
    margin-top: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(100, 180, 220, 0.2);
}

[data-theme="dark"] .material-summary {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(100, 180, 220, 0.3);
}

.material-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 12px;
}

.material-summary__row:first-child {
    padding-top: 0;
}

.material-summary__label {
    color: var(--text-color);
    opacity: 0.8;
    font-size: 11px;
}

.material-summary__values {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-weight: 600;
}

.material-summary__used {
    color: var(--primary-color);
    font-size: var(--font-size-base);
}

.material-summary__separator {
    color: var(--text-color);
    opacity: 0.4;
}

.material-summary__total {
    color: var(--text-color);
    opacity: 0.7;
}

/* Usage Progress Bar */
.material-summary__bar {
    margin-top: 12px;
    height: 8px;
    background: rgba(100, 100, 100, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.material-summary__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color) 0%, var(--primary-color) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Color variations based on usage level */
.material-summary__bar-fill.low {
    background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
}

.material-summary__bar-fill.medium {
    background: linear-gradient(90deg, #FF9800 0%, #FFC107 100%);
}

.material-summary__bar-fill.high {
    background: linear-gradient(90deg, #f44336 0%, #FF5722 100%);
}

/* Material Detail Toggle Button */
.material-detail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    background: rgba(100, 180, 220, 0.1);
    border: 1px solid rgba(100, 180, 220, 0.3);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.material-detail-toggle:hover {
    background: rgba(100, 180, 220, 0.2);
}

.material-detail-toggle .toggle-arrow {
    transition: transform 0.2s ease;
}

.material-detail-toggle.expanded .toggle-arrow {
    transform: rotate(180deg);
}

/* Material Detail Section */
.material-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(100, 180, 220, 0.2);
}

.material-detail__section {
    margin-bottom: 16px;
}

.material-detail__section:last-child {
    margin-bottom: 0;
}

.material-detail__section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(100, 180, 220, 0.15);
}

.material-detail__grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Individual Material Row */
.material-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .material-row {
    background: rgba(255, 255, 255, 0.05);
}

.material-row:hover {
    background: rgba(100, 180, 220, 0.1);
}

.material-row__name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.material-row__icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: contain;
}

.material-row__usage {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
}

.material-row__used {
    color: var(--primary-color);
    font-weight: 600;
}

.material-row__separator {
    color: var(--text-color);
    opacity: 0.4;
}

.material-row__total {
    color: var(--text-color);
    opacity: 0.7;
}

.material-row__remaining {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: var(--success-color);
    opacity: 0.9;
    min-width: 70px;
    text-align: right;
}

.material-row__remaining.zero {
    color: var(--text-color);
    opacity: 0.4;
}

/* Compact mode for many materials */
@media (max-width: 500px) {
    .material-row {
        grid-template-columns: 1fr auto;
        gap: 4px;
    }
    
    .material-row__remaining {
        display: none;
    }
    
    .material-row__icon {
        width: 16px;
        height: 16px;
    }
}

/* Compact checkbox group */
.checkbox-group--compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}

.checkbox-group--inline .checkbox-item--small {
    padding: 6px 10px;
}

/* Disabled state for checkbox items */
.checkbox-item--small.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.checkbox-item--small.disabled .checkbox-item__label {
    color: var(--text-muted);
}

.checkbox-item--small {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    gap: 10px;
}

.checkbox-item--small .checkbox-item__label {
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.checkbox-item--small .checkbox-item__checkmark {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Override the default checkmark styling for small checkboxes */
.checkbox-item--small input[type="checkbox"]:checked + .checkbox-item__checkmark::after {
    content: '✓';
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Compact season zero slider */
.season-zero-slider--compact {
    margin: 0;
    padding: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.season-zero-slider--compact .season-zero-slider__input {
    height: 8px;
    width: 100%;
    min-width: 100%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    display: block;
}

.season-zero-slider--compact .season-zero-slider__input::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
}

.season-zero-slider--compact .season-zero-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    margin-top: -6px;
}

.season-zero-slider--compact .season-zero-slider__input::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
}

.season-zero-slider--compact .season-zero-slider__input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

.season-zero-slider--compact .season-zero-slider__labels {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.season-zero-slider--compact .season-zero-slider__labels span {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
}

/* Small info button */
.info-btn--small {
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-btn--small:hover {
    background: rgba(255, 255, 255, 0.2);
}

.info-btn--small svg {
    width: 12px;
    height: 12px;
    fill: var(--text-color);
    opacity: 0.7;
}

/* Compact popover */
.info-popover--compact {
    font-size: var(--font-size-xs);
    padding: 10px 12px;
    min-width: 180px;
    line-height: 1.4;
}

/* Wide popover for detailed documentation */
.info-popover--wide {
    font-size: var(--font-size-xs);
    padding: 14px 16px;
    min-width: 320px;
    max-width: 400px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .info-popover--wide {
        min-width: 280px;
        max-width: 90vw;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Info button wrapper in compact settings */
.settings-card--compact .info-btn-wrapper {
    position: relative;
    flex-shrink: 0;
}

.settings-card--compact .info-btn-wrapper .info-popover {
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 8px;
}

/* ============================================
   Cascade Section (Step 2)
   ============================================ */
.cascade-section {
    margin-bottom: 24px;
    padding: 24px;
}

.cascade-section__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cascade-section__icon {
    font-size: 24px;
}

.cascade-section__desc {
    font-size: var(--font-size-md);
    color: var(--text-color);
    opacity: 0.7;
    margin: 0 0 16px 0;
}

/* Cascade Controls */
.cascade-controls {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cascade-control-group {
    flex: 1;
    min-width: 250px;
}

.cascade-control-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin-bottom: 6px;
    display: block;
}

.cascade-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cascade-slider {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--glass-border);
    outline: none;
    -webkit-appearance: none;
}

.cascade-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.cascade-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

.cascade-slider-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    min-width: 50px;
    text-align: center;
}

.cascade-control-hint {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.6;
    margin: 4px 0 0 0;
}

.cascade-btn--update {
    background: var(--primary-color);
    color: white;
    padding: 10px 20px;
    white-space: nowrap;
}

.cascade-btn--update:hover {
    background: var(--button-bg-hover);
    transform: translateY(-1px);
}

/* Quality Legend */
.cascade-quality-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

[data-theme="dark"] .cascade-quality-legend {
    background: rgba(0, 0, 0, 0.15);
}

.quality-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quality-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.quality-label {
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.quality-legendary .quality-dot {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.quality-exquisite .quality-dot {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    box-shadow: 0 0 6px rgba(155, 89, 182, 0.5);
}

.quality-fine .quality-dot {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 0 6px rgba(52, 152, 219, 0.5);
}

.quality-common .quality-dot {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    box-shadow: 0 0 6px rgba(39, 174, 96, 0.5);
}

/* Quality indicators on cascade cards */
.cascade-stage-card.quality-legendary {
    border-color: #FFD700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.cascade-stage-card.quality-exquisite {
    border-color: #9b59b6;
    box-shadow: 0 0 8px rgba(155, 89, 182, 0.3);
}

.cascade-stage-card.quality-fine {
    border-color: #3498db;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}

.cascade-stage-card.quality-common {
    border-color: #27ae60;
    box-shadow: 0 0 8px rgba(39, 174, 96, 0.3);
}

/* Cascade Visual */
.cascade-visual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    margin-bottom: 20px;
}

[data-theme="dark"] .cascade-visual {
    background: rgba(0, 0, 0, 0.15);
}

.cascade-stage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    min-width: 90px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

[data-theme="dark"] .cascade-stage-card {
    background: rgba(0, 0, 0, 0.25);
}

.cascade-stage-card.start {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-color: rgba(102, 126, 234, 0.5);
}

.cascade-stage-card.final {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.2) 0%, rgba(27, 94, 32, 0.3) 100%);
    border-color: var(--success-color);
}

.cascade-stage-card__level {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.cascade-stage-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    object-fit: contain;
}

.cascade-stage-card__count {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.cascade-stage-card.final .cascade-stage-card__count {
    color: var(--success-color);
    font-size: var(--font-size-2xl);
}

.cascade-stage-card__label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.6;
}

.cascade-arrow-icon {
    font-size: 24px;
    color: var(--text-color);
    opacity: 0.3;
    padding: 0 4px;
}

/* ============================================
   NEW: Cascade Stages with Piece Breakdown
   ============================================ */

.cascade-stages {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    overflow-x: auto;
}

.cascade-stage {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    border: 2px solid transparent;
    min-width: 120px;
    max-width: 140px;
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

[data-theme="dark"] .cascade-stage {
    background: rgba(0, 0, 0, 0.25);
}

.cascade-stage.start {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-color: rgba(102, 126, 234, 0.4);
}

.cascade-stage.final {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(27, 94, 32, 0.2) 100%);
    border-color: var(--success-color);
}

/* Quality colors for cascade stages */
.cascade-stage.quality-legendary {
    border-color: #FFD700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.cascade-stage.quality-exquisite {
    border-color: #9b59b6;
    box-shadow: 0 0 8px rgba(155, 89, 182, 0.2);
}

.cascade-stage.quality-fine {
    border-color: #3498db;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.2);
}

.cascade-stage.quality-common {
    border-color: #27ae60;
    box-shadow: 0 0 8px rgba(39, 174, 96, 0.2);
}

.cascade-stage__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .cascade-stage__header {
    background: rgba(0, 0, 0, 0.2);
}

.cascade-stage__level {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.cascade-stage__total {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.cascade-stage.final .cascade-stage__total {
    color: var(--success-color);
}

.cascade-stage__quality {
    font-size: 9px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cascade-stage__pieces {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    max-height: 400px;
    overflow-y: auto;
}

/* Individual piece item */
.cascade-piece {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
}

[data-theme="dark"] .cascade-piece {
    background: rgba(255, 255, 255, 0.05);
}

.cascade-piece:hover {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .cascade-piece:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cascade-piece__img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

.cascade-piece__count {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    min-width: 32px;
}

.cascade-piece__name {
    display: none; /* Hide name to keep cards narrow */
}

.cascade-piece--cascade {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px 8px;
}

.cascade-piece--cascade .cascade-piece__img {
    width: 40px;
    height: 40px;
}

.cascade-piece--cascade .cascade-piece__count {
    font-size: var(--font-size-md);
    min-width: auto;
}

/* Arrow between stages */
.cascade-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-color);
    opacity: 0.3;
    padding: 0 2px;
    align-self: center;
    flex-shrink: 0;
}

/* Responsive: horizontal scroll on smaller screens */
@media (max-width: 768px) {
    .cascade-stages {
        padding: 12px;
    }
    
    .cascade-stage {
        min-width: 100px;
        max-width: 120px;
    }
}

/* Scrollbar for pieces */
.cascade-stage__pieces::-webkit-scrollbar {
    width: 4px;
}

.cascade-stage__pieces::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.cascade-stage__pieces::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

[data-theme="dark"] .cascade-stage__pieces::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

/* Cascade Summary */
.cascade-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(232, 245, 233, 0.6) 0%, rgba(200, 230, 201, 0.6) 100%);
    border-radius: 10px;
}

[data-theme="dark"] .cascade-summary {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(27, 94, 32, 0.15) 100%);
}

.cascade-summary__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cascade-summary__label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.cascade-summary__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--success-color);
}

/* Cascade Empty State */
.cascade-empty {
    text-align: center;
    padding: 40px 20px;
}

.cascade-empty__icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.cascade-empty__text {
    font-size: var(--font-size-md);
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 20px;
}

.cascade-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.cascade-btn--back {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.cascade-btn--back:hover {
    background: var(--primary-color);
    color: white;
}

/* ============================================
   Template Plan Section (Combined Cascade + Manual)
   ============================================ */
.template-plan {
    margin-bottom: 24px;
    padding: 24px;
}

.template-plan__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.template-plan__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.template-plan__icon {
    font-size: 24px;
}

.template-plan__reset {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-plan__reset:hover {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.5);
    color: #dc3545;
}

.template-plan__reset svg {
    fill: currentColor;
}

.template-plan__desc {
    font-size: var(--font-size-md);
    color: var(--text-color);
    opacity: 0.7;
    margin: 0 0 20px 0;
}

/* Template Plan Legend */
.template-plan__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

[data-theme="dark"] .template-plan__legend {
    background: rgba(0, 0, 0, 0.15);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-item--legendary .legend-dot {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}

.legend-item--exquisite .legend-dot {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    box-shadow: 0 0 4px rgba(155, 89, 182, 0.5);
}

.legend-item--fine .legend-dot {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 0 4px rgba(52, 152, 219, 0.5);
}

.legend-item--common .legend-dot {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    box-shadow: 0 0 4px rgba(39, 174, 96, 0.5);
}

/* Template Cards Grid - 4 per row */
.template-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Template Card Wrapper (includes external label) */
.template-card-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent grid blowout */
    position: relative;
}

/* JS fallback: add class to wrapper when dropdown is open */
.template-card-wrapper.dropdown-open {
    z-index: 1000 !important;
}

/* External Level Label */
.template-card__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-align: center;
    opacity: 0.8;
}

/* Template Card */
.template-card {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    /* Don't set z-index here - let it auto-stack */
}

/* When quality dropdown is open, raise the card's z-index */
.template-card:has(.quality-select.open),
.template-card.dropdown-open {
    z-index: 1000 !important;
}

/* Also raise the wrapper when dropdown is open */
.template-card-wrapper:has(.quality-select.open),
.template-card-wrapper:has(.dropdown-open) {
    z-index: 1000 !important;
    position: relative;
}

[data-theme="dark"] .template-card {
    background: rgba(30, 30, 35, 0.85);
    border-color: rgba(200, 200, 100, 0.5);
}

.template-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Template Card with calculated results from production plan */
.template-card.calculated {
    border-color: var(--success-color, #4CAF50);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.template-card.calculated .template-card__pieces {
    border-color: var(--success-color, #4CAF50);
}

.template-card.calculated::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--success-color, #4CAF50);
    color: white;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Locked Template Card - shows lock icon when user has manually set a value */
.template-card[data-locked="true"] {
    border-color: #f39c12;
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.3);
}

.template-card[data-locked="true"]::before {
    content: '🔒';
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 12px;
    z-index: 5;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* Locked input styling */
.template-card[data-locked="true"] .template-card__input {
    border-color: #f39c12;
    background: rgba(243, 156, 18, 0.15);
}

[data-theme="dark"] .template-card[data-locked="true"] {
    border-color: #f39c12;
    box-shadow: 0 0 12px rgba(243, 156, 18, 0.4);
}

[data-theme="dark"] .template-card[data-locked="true"] .template-card__input {
    border-color: #f39c12;
    background: rgba(243, 156, 18, 0.2);
}

/* Template Card Input */
.template-card__input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid rgba(100, 180, 220, 0.5);
    border-radius: 6px;
    background: rgba(80, 80, 90, 0.7);
    color: var(--text-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

[data-theme="dark"] .template-card__input {
    background: rgba(70, 70, 80, 0.9);
    border-color: rgba(100, 180, 220, 0.6);
}

.template-card__input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13, 92, 122, 0.2);
}

.template-card__input::placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

/* Template Card Quality Select */
.template-card__quality {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(100, 180, 220, 0.4);
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    background: rgba(60, 65, 75, 0.9);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    margin-bottom: 0;
    text-align: center;
}

[data-theme="dark"] .template-card__quality {
    background: rgba(50, 55, 65, 0.95);
    border-color: rgba(100, 180, 220, 0.5);
}

/* Pieces Container - Horizontal Scroll Strip */
.template-card__pieces {
    position: relative;
    background: rgba(45, 50, 60, 0.8);
    border: 1px solid rgba(100, 180, 220, 0.4);
    border-radius: 0 0 6px 6px;
    border-top: none;
    margin-bottom: 0;
    overflow: hidden;
    margin-top: 0;
    min-height: 100px; /* Ensure space for piece cards */
}

[data-theme="dark"] .template-card__pieces {
    background: rgba(40, 45, 55, 0.95);
    border-color: rgba(100, 180, 220, 0.5);
}

/* Horizontal Scroll Strip */
.pieces-strip {
    display: flex;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    align-items: center;
    min-height: 95px;
}

.pieces-strip::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Piece Card */
.piece-card {
    flex: 0 0 auto;
    width: 90px;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    background: rgba(60, 70, 85, 0.7);
    border: 1px solid rgba(80, 180, 200, 0.3);
    border-radius: 8px;
    transition: all 0.2s ease;
    scroll-snap-align: start;
    cursor: pointer;
}

.piece-card:hover {
    background: rgba(70, 85, 100, 0.9);
    border-color: rgba(80, 180, 200, 0.6);
    transform: translateY(-1px);
}

.piece-card:active {
    transform: scale(0.97);
}

/* Piece Card Image */
.piece-card__img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Piece Card Name */
.piece-card__name {
    font-size: 10px;
    color: var(--text-color);
    font-weight: var(--font-weight-medium);
    text-align: center;
    margin-bottom: 3px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.9;
    line-height: 1.2;
}

/* Piece Card Count */
.piece-card__count {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: #4ecdc4;
}

/* Scroll Indicator - Minimal */
.pieces-nav {
    display: none; /* Hidden - keep scrolling simple */
}

/* Swipe hint text */
.swipe-hint {
    font-size: 9px;
    color: var(--text-color);
    opacity: 0.4;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.2);
}

.swipe-hint__arrow {
    animation: swipeHint 1.5s ease-in-out infinite;
}

@keyframes swipeHint {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(4px); opacity: 1; }
}

/* Page Dots */
.page-dots {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.page-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    padding: 0;
}

.page-dot:hover {
    background: rgba(255, 255, 255, 0.4);
}

.page-dot.active {
    background: #4ecdc4;
}

/* Navigation Arrows */
.nav-arrows {
    display: none;
}

.nav-arrow {
    display: none;
}

/* Hide old nav container */
.template-card__nav {
    display: none;
}

/* Mobile optimizations */
@media (max-width: 600px) {
    .piece-card {
        width: 80px;
        padding: 8px 6px;
    }
    
    .piece-card__img {
        width: 40px;
        height: 40px;
    }
    
    .piece-card__name {
        font-size: 9px;
    }
    
    .piece-card__count {
        font-size: var(--font-size-sm);
    }
    
    .nav-arrow {
        width: 36px;
        height: 36px;
    }
    
    .page-dot {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 400px) {
    .piece-card {
        width: 72px;
    }
    
    .swipe-hint {
        display: none;
    }
}

/* Quality border colors for cards */
.template-card[data-quality="legendary"] {
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.template-card[data-quality="exquisite"] {
    border-color: #9b59b6;
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.2);
}

.template-card[data-quality="fine"] {
    border-color: #3498db;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.2);
}

.template-card[data-quality="common"] {
    border-color: #27ae60;
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.2);
}

.template-card[data-quality="poor"] {
    border-color: #9a9a9a;
}

.template-card[data-quality="epic"] {
    border-color: #e67e22;
    box-shadow: 0 0 15px rgba(230, 126, 34, 0.2);
}

.template-card.focused {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 92, 122, 0.2);
}

/* Piece indicators (dots) */
.piece-indicators {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.piece-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.piece-indicator.active {
    background: #f1c40f;
    transform: scale(1.2);
}

/* Legacy template-chip support (for backward compatibility) */
.template-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.template-chip {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
}

.template-chip__input,
.template-chip__quality {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    margin-bottom: 8px;
}

.template-chip__auto {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.5;
    text-align: center;
}

/* Template Cards Responsive */
@media (max-width: 1400px) {
    .template-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
}

@media (max-width: 1100px) {
    .template-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .template-card {
        padding: 10px;
    }
    
    .piece-card {
        width: 75px;
    }
    
    .piece-card__img {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 800px) {
    .template-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .template-card {
        padding: 8px;
    }
    
    .template-card__input {
        font-size: var(--font-size-md);
        padding: 6px 8px;
    }
    
    .template-card__quality {
        font-size: var(--font-size-xs);
        padding: 4px 6px;
        margin-bottom: 0;
    }
    
    .pieces-strip {
        padding: 8px;
        gap: 8px;
        min-height: 110px;
    }
    
    .piece-card {
        width: 90px;
        min-width: 90px;
        padding: 8px 6px;
    }
    
    .piece-card__img {
        width: 56px;
        height: 56px;
    }
    
    .piece-card__name {
        font-size: 10px;
    }
    
    .piece-card__count {
        font-size: 13px;
    }
}

@media (max-width: 500px) {
    .template-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .template-card {
        padding: 8px;
    }
    
    .template-card__label {
        font-size: 11px;
        margin-bottom: 4px;
    }
    
    .template-card__input {
        font-size: var(--font-size-sm);
        padding: 4px 6px;
        margin-bottom: 4px;
    }
    
    .template-card__quality {
        font-size: 10px;
        padding: 3px 4px;
        margin-bottom: 0;
    }
    
    .pieces-strip {
        padding: 8px;
        gap: 8px;
        min-height: 100px;
    }
    
    .piece-card {
        width: 85px;
        min-width: 85px;
        padding: 8px 6px;
        border-radius: 8px;
    }
    
    .piece-card__img {
        width: 52px;
        height: 52px;
        margin-bottom: 4px;
    }
    
    .piece-card__name {
        font-size: 10px;
        margin-bottom: 3px;
        line-height: 1.2;
    }
    
    .piece-card__count {
        font-size: 13px;
        font-weight: 700;
    }
}

/* Template Plan Summary */
.template-plan__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(27, 94, 32, 0.15) 100%);
    border-radius: 12px;
    border: 1px solid rgba(46, 125, 50, 0.3);
}

[data-theme="dark"] .template-plan__summary {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(27, 94, 32, 0.2) 100%);
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.summary-stat__label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.summary-stat__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--success-color);
}

/* Template Plan Empty State */
.template-plan__empty {
    text-align: center;
    padding: 40px 20px;
    display: none;
}

.template-plan__empty.visible {
    display: block;
}

.template-plan__empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.template-plan__empty-text {
    font-size: var(--font-size-md);
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 20px;
}

.template-plan__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
}

.template-plan__back-btn:hover {
    background: var(--primary-color);
    color: white;
}

/* Template Plan Responsive */
@media (max-width: 900px) {
    .template-chips {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .template-chips {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .template-plan__header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .template-plan__legend {
        gap: 10px;
    }
    
    .legend-item {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 480px) {
    .template-chips {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .template-chip {
        padding: 12px;
    }
    
    .template-chip__input {
        padding: 8px 10px;
        font-size: var(--font-size-md);
    }
    
    .template-plan__summary {
        gap: 16px;
        padding: 16px;
    }
    
    .summary-stat__value {
        font-size: var(--font-size-xl);
    }
}

/* ============================================
   Crafting Plan Section (Piece Breakdown)
   ============================================ */
.crafting-plan-section {
    margin-bottom: 24px;
}

.crafting-plan-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.crafting-level-group {
    margin-bottom: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    border-left: 4px solid transparent;
}

[data-theme="dark"] .crafting-level-group {
    background: rgba(0, 0, 0, 0.2);
}

.crafting-level-group.quality-legendary {
    border-left-color: #FFD700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, transparent 30%);
}

.crafting-level-group.quality-exquisite {
    border-left-color: #9b59b6;
    background: linear-gradient(90deg, rgba(155, 89, 182, 0.1) 0%, transparent 30%);
}

.crafting-level-group.quality-fine {
    border-left-color: #3498db;
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.1) 0%, transparent 30%);
}

.crafting-level-group.quality-common {
    border-left-color: #27ae60;
    background: linear-gradient(90deg, rgba(39, 174, 96, 0.1) 0%, transparent 30%);
}

.crafting-level-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.crafting-level-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.crafting-level-total {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
}

.crafting-level-quality {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: 10px;
    opacity: 0.8;
}

.quality-legendary .crafting-level-quality {
    background: rgba(255, 215, 0, 0.3);
    color: #b8860b;
}

.quality-exquisite .crafting-level-quality {
    background: rgba(155, 89, 182, 0.3);
    color: #7d3c98;
}

.quality-fine .crafting-level-quality {
    background: rgba(52, 152, 219, 0.3);
    color: #2471a3;
}

.quality-common .crafting-level-quality {
    background: rgba(39, 174, 96, 0.3);
    color: #1e8449;
}

.crafting-pieces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

@media (max-width: 600px) {
    .crafting-pieces-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

.crafting-piece-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .crafting-piece-card {
    background: rgba(0, 0, 0, 0.2);
}

.crafting-piece-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.crafting-piece-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
    object-fit: contain;
}

.crafting-piece-count {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin-bottom: 2px;
}

.crafting-piece-name {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   Cascade Progression Section (L10 → L45 flow)
   ============================================ */
.cascade-progression-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.cascade-progression-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cascade-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

[data-theme="dark"] .cascade-flow {
    background: rgba(0, 0, 0, 0.15);
}

.cascade-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    min-width: 70px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

[data-theme="dark"] .cascade-stage {
    background: rgba(0, 0, 0, 0.25);
}

.cascade-stage.start {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-color: rgba(102, 126, 234, 0.5);
}

.cascade-stage.final {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.2) 0%, rgba(27, 94, 32, 0.3) 100%);
    border-color: var(--success-color);
}

.cascade-stage.quality-legendary {
    border-color: #FFD700;
}

.cascade-stage.quality-exquisite {
    border-color: #9b59b6;
}

.cascade-stage.quality-fine {
    border-color: #3498db;
}

.cascade-stage.quality-common {
    border-color: #27ae60;
}

.cascade-stage__level {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 4px;
}

.cascade-stage__count {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.cascade-stage.final .cascade-stage__count {
    color: var(--success-color);
}

.cascade-stage__quality {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: 6px;
    margin-top: 4px;
    font-weight: var(--font-weight-semibold);
}

.cascade-stage.quality-legendary .cascade-stage__quality {
    background: rgba(255, 215, 0, 0.3);
    color: #b8860b;
}

.cascade-stage.quality-exquisite .cascade-stage__quality {
    background: rgba(155, 89, 182, 0.3);
    color: #7d3c98;
}

.cascade-stage.quality-fine .cascade-stage__quality {
    background: rgba(52, 152, 219, 0.3);
    color: #2471a3;
}

.cascade-stage.quality-common .cascade-stage__quality {
    background: rgba(39, 174, 96, 0.3);
    color: #1e8449;
}

.cascade-arrow-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 4px;
}

.cascade-arrow {
    font-size: 20px;
    color: var(--text-color);
    opacity: 0.4;
}

.cascade-arrow-rate {
    font-size: 9px;
    color: var(--text-color);
    opacity: 0.5;
}

/* Cascade error message */
.cascade-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-color);
    opacity: 0.6;
    font-size: var(--font-size-md);
}

/* Summary stat highlight */
.cascade-summary__stat.highlight .cascade-summary__value {
    font-size: var(--font-size-3xl);
    color: var(--primary-color);
}

.cascade-summary__stat.highlight .cascade-summary__label {
    font-weight: var(--font-weight-semibold);
}

/* ============================================
   Material Combination Guide
   ============================================ */
.material-combination-guide {
    margin: 24px 0;
    padding: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.combination-guide__header {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.combination-guide__desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.combination-guide__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .combination-guide__legend {
    background: rgba(255, 255, 255, 0.05);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-item.legendary .legend-dot { background: #FFD700; }
.legend-item.exquisite .legend-dot { background: #9b59b6; }
.legend-item.fine .legend-dot { background: #3498db; }
.legend-item.common .legend-dot { background: #27ae60; }

.combination-guide__section {
    margin-bottom: 24px;
}

.combination-guide__section:last-of-type {
    margin-bottom: 16px;
}

.combination-guide__section-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.combination-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* Force 4 columns on wider screens */
@media (min-width: 1100px) {
    .combination-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.combination-material-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .combination-material-card {
    background: rgba(0, 0, 0, 0.25);
}

.combination-material-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.combination-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}

.combination-card__img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
}

.combination-card__name-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.combination-card__name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    line-height: 1.2;
}

.combination-card__tiers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.combination-tier {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.combination-tier.tier-legendary {
    background: rgba(255, 215, 0, 0.15);
    border-left: 3px solid #FFD700;
}

.combination-tier.tier-exquisite {
    background: rgba(155, 89, 182, 0.15);
    border-left: 3px solid #9b59b6;
}

.combination-tier.tier-fine {
    background: rgba(52, 152, 219, 0.15);
    border-left: 3px solid #3498db;
}

.combination-tier.tier-common {
    background: rgba(39, 174, 96, 0.15);
    border-left: 3px solid #27ae60;
}

.tier-count {
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    font-size: var(--font-size-sm);
}

.tier-poor {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin-left: auto;
}

.combination-card__total {
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-size: var(--font-size-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-theme="dark"] .combination-card__total {
    background: rgba(255, 255, 255, 0.05);
}

.combination-card__total span {
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    font-size: var(--font-size-sm);
}

.combination-guide__summary {
    margin-top: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.15) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    text-align: center;
}

.combination-guide__summary .summary-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.combination-guide__summary .summary-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.combination-guide__summary .summary-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .combination-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .combination-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .combination-guide__legend {
        flex-direction: column;
        gap: 6px;
    }
    
    .tier-poor {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .material-combination-guide {
        padding: 12px;
    }
    
    .combination-material-card {
        padding: 10px;
    }
}

/* ============================================
   Test Data Toggle (DEV)
   ============================================ */
.test-data-toggle {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
    align-items: center;
}

.test-data-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.test-data-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}

.test-data-select {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(155, 89, 182, 0.4);
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1) 0%, rgba(142, 68, 173, 0.15) 100%);
    color: var(--text-color);
    min-width: 200px;
}

.test-data-select:hover {
    border-color: rgba(155, 89, 182, 0.6);
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.15) 0%, rgba(142, 68, 173, 0.2) 100%);
}

.test-data-select:focus {
    outline: none;
    border-color: rgba(155, 89, 182, 0.8);
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.15);
}

.test-data-select optgroup {
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    background: var(--glass-bg);
}

.test-data-select option {
    padding: 8px;
    background: var(--glass-bg);
    color: var(--text-color);
}

[data-theme="dark"] .test-data-select {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.15) 0%, rgba(142, 68, 173, 0.2) 100%);
    border-color: rgba(187, 107, 217, 0.4);
}

[data-theme="dark"] .test-data-select:hover {
    border-color: rgba(187, 107, 217, 0.6);
}

[data-theme="dark"] .test-data-select optgroup,
[data-theme="dark"] .test-data-select option {
    background: #2a2a3e;
}

/* Templates Grid */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}

@media (min-width: 400px) {
    .templates-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (min-width: 520px) {
    .templates-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (min-width: 700px) {
    .templates-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
}

@media (min-width: 900px) {
    .templates-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }
}

@media (min-width: 1100px) {
    .templates-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
    }
}

/* Quality color indicators on template cards */
.template-card[data-quality="poor"] {
    border-color: rgba(169, 169, 169, 0.5);
}

.template-card[data-quality="common"] {
    border-color: rgba(50, 205, 50, 0.5);
}

.template-card[data-quality="fine"] {
    border-color: rgba(0, 112, 221, 0.5);
}

.template-card[data-quality="exquisite"] {
    border-color: rgba(163, 53, 238, 0.5);
}

.template-card[data-quality="epic"] {
    border-color: rgba(255, 128, 0, 0.5);
}

.template-card[data-quality="legendary"] {
    border-color: rgba(229, 204, 128, 0.5);
}

/* Info Link Button */
.info-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 0;
    margin-top: 16px;
    width: auto;
}

.info-link-btn:hover {
    background: none;
    text-decoration: underline;
}

.info-link-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--primary-color);
}

/* Settings Card */
.settings-card {
    padding: 0;
    overflow: hidden;
}

.settings-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    margin: 0;
    border-bottom: none;
}

.settings-card__header .accordion-toggle {
    display: flex;
    align-items: center;
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
}

.settings-card__header .accordion-toggle span {
    flex: 1;
    text-align: left;
}

.settings-card__header .info-btn-wrapper {
    margin-left: auto;
}

.settings-card__content {
    padding: 0 20px 20px;
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.checkbox-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.checkbox-item input[type="checkbox"] {
    display: none;
}

.checkbox-item__checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-item input[type="checkbox"]:checked + .checkbox-item__checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-item input[type="checkbox"]:checked + .checkbox-item__checkmark::after {
    content: '✓';
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.checkbox-item__label {
    font-size: var(--font-size-md);
    color: var(--text-color);
}

/* Results Container */
.results-container {
    min-height: 200px;
}

.results-container:empty::after {
    content: 'Click "Calculate" to see your crafting plan';
    display: block;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color);
    opacity: 0.6;
    font-size: 14px;
}

/* ================================================
   RESPONSIVE BREAKPOINTS
   ================================================ */

/* Mobile Devices (phones, <768px) */
@media (max-width: 767px) {
    /* Strategy settings for mobile */
    .strategy-settings__title {
        font-size: var(--font-size-lg);
    }
    
    /* Checkbox improvements for mobile */
    .checkbox-item--small {
        padding: 12px 14px;
        min-height: 48px;
    }
    
    .checkbox-item--small .checkbox-item__checkmark {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
    
    .checkbox-item--small .checkbox-item__label {
        font-size: var(--font-size-base);
    }
    
    /* Usage slider for mobile */
    .usage-slider-row {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .usage-slider__value {
        font-size: var(--font-size-2xl);
        min-width: 60px;
    }
    
    .usage-slider__input {
        width: 100%;
        height: 12px;
    }
    
    .usage-slider__input::-webkit-slider-thumb {
        width: 30px;
        height: 30px;
    }
}

/* Extra Small Devices (phones, <400px) */
@media (max-width: 399px) {
    .wrapper {
        padding: 12px;
        margin: 10px;
        border-radius: 16px;
    }
    
    h1.calc-header {
        font-size: 20px;
        padding-top: 8px;
        margin-bottom: 8px;
    }
    
    .site-logo {
        padding: 10px 0;
        gap: 8px;
    }
    
    .site-logo__image {
        height: 40px;
    }
    
    .site-logo__wolf {
        height: 44px;
    }
    
    .site-logo__text {
        font-size: 18px;
    }
    
    .wizard-progress {
        padding: 8px;
        margin: 12px 0 16px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .wizard-progress::-webkit-scrollbar {
        display: none;
    }
    
    .wizard-progress__step {
        padding: 4px 6px;
        min-width: 50px;
        flex-shrink: 0;
    }
    
    .wizard-progress__number {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
    
    .wizard-progress__step.completed .wizard-progress__number::after {
        font-size: 11px;
    }
    
    .wizard-progress__label {
        font-size: 8px;
    }
    
    .wizard-progress__connector {
        width: 12px;
        margin-bottom: 14px;
    }
    
    .wizard-step__header h2 {
        font-size: 18px;
    }
    
    .wizard-step__header p {
        font-size: 12px;
    }
    
    .glass-card {
        padding: 12px;
        border-radius: 12px;
    }
    
    .wizard-navigation {
        flex-direction: column;
        gap: 8px;
    }
    
    .wizard-btn {
        width: 100%;
        padding: 12px;
        font-size: 13px;
    }
    
    .wizard-btn--prev {
        order: 1;
    }
    
    
    .wizard-btn--next,
    .wizard-btn--calculate {
        order: 0;
    }
    
    .template-card {
        padding: 10px 8px;
    }
    
    .template-card__level {
        font-size: 10px;
    }
    
    .template-card__input {
        padding: 8px;
        font-size: 14px;
    }
    
    .template-card__quality {
        font-size: 10px;
        padding: 6px;
    }
}

/* Small Devices (phones, 400px - 599px) */
@media (min-width: 400px) and (max-width: 599px) {
    .wrapper {
        padding: 16px;
        margin: 12px;
    }
    
    h1.calc-header {
        font-size: 22px;
        padding-top: 10px;
    }
    
    .site-logo__image {
        height: 44px;
    }
    
    .site-logo__wolf {
        height: 48px;
    }
    
    .site-logo__text {
        font-size: 20px;
    }
    
    .wizard-progress {
        padding: 10px 12px;
        margin: 14px 0 20px;
    }
    
    .wizard-progress__step {
        padding: 6px 8px;
        min-width: 55px;
    }
    
    .wizard-progress__number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .wizard-progress__step.completed .wizard-progress__number::after {
        font-size: 12px;
    }
    
    .wizard-progress__label {
        font-size: 9px;
    }
    
    .wizard-progress__connector {
        width: 16px;
        margin-bottom: 16px;
    }
    
    .wizard-navigation {
        flex-wrap: wrap;
    }
    
    .wizard-btn {
        padding: 12px 16px;
        font-size: 13px;
    }
    
    .wizard-btn--calculate {
        order: -1;
        flex: 1 1 100%;
        max-width: none;
        margin-bottom: 8px;
    }
}

/* Medium Devices (tablets, 600px - 899px) */
@media (min-width: 600px) and (max-width: 899px) {
    .wrapper {
        padding: 20px;
        max-width: 850px;
    }
    
    h1.calc-header {
        font-size: 26px;
    }
    
    .site-logo__image {
        height: 50px;
    }
    
    .site-logo__wolf {
        height: 54px;
    }
    
    .site-logo__text {
        font-size: 22px;
    }
    
    .wizard-progress {
        padding: 14px 16px;
    }
    
    .wizard-progress__step {
        padding: 8px 12px;
    }
    
    .wizard-progress__number {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    
    .wizard-progress__step.completed .wizard-progress__number::after {
        font-size: 13px;
    }
    
    .wizard-progress__label {
        font-size: 11px;
    }
    
    .wizard-progress__connector {
        width: 30px;
    }
}

/* Large Devices (laptops, 900px - 1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
    .wrapper {
        padding: 24px;
        max-width: 950px;
    }
    
    h1.calc-header {
        font-size: 28px;
    }
    
    .site-logo__image {
        height: 54px;
    }
    
    .site-logo__wolf {
        height: 58px;
    }
    
    .site-logo__text {
        font-size: 24px;
    }
    
    .wizard-progress {
        padding: 16px 20px;
    }
    
    .wizard-progress__step {
        padding: 10px 16px;
    }
    
    .wizard-progress__number {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .wizard-progress__label {
        font-size: 12px;
    }
    
    .wizard-progress__connector {
        width: 40px;
    }
}

/* Extra Large Devices (desktops, 1200px+) */
@media (min-width: 1200px) {
    .wrapper {
        padding: 28px;
        max-width: 1100px;
    }
    
    h1.calc-header {
        font-size: 30px;
    }
    
    .site-logo__image {
        height: 60px;
    }
    
    .site-logo__wolf {
        height: 64px;
    }
    
    .site-logo__text {
        font-size: 26px;
    }
    
    .wizard-progress {
        padding: 18px 24px;
    }
    
    .wizard-progress__step {
        padding: 12px 20px;
    }
    
    .wizard-progress__number {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }
    
    .wizard-progress__step.completed .wizard-progress__number::after {
        font-size: 15px;
    }
    
    .wizard-progress__label {
        font-size: 13px;
    }
    
    .wizard-progress__connector {
        width: 50px;
    }
}

/* Touch Device Improvements */
@media (hover: none) and (pointer: coarse) {
    .material-item,
    .template-card,
    .checkbox-item,
    .wizard-btn {
        min-height: 44px;
    }
    
    .material-item__input input,
    .template-card__input,
    .template-card__quality {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    .wizard-btn {
        padding: 14px 20px;
    }
}

/* High DPI / Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .material-item img,
    #advMaterials .my-material img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Landscape Phone Orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .wizard-progress {
        margin: 8px 0 12px;
        padding: 8px 12px;
    }
    
    .wizard-step__header {
        margin-bottom: 12px;
    }
    
    .wizard-step__header h2 {
        font-size: 18px;
        margin-bottom: 4px;
    }
}

/* Dark theme wizard overrides */
[data-theme="dark"] .wizard-progress__step:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .wizard-progress__number {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .wizard-btn--prev {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .wizard-btn--prev:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .material-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .material-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .checkbox-item {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .checkbox-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Results Section Enhanced Styles */
#results {
    position: relative;
    overflow: visible; /* Allow hover transforms to show */
    padding: 4px; /* Prevent clipping on edges */
    width: 100%;
    box-sizing: border-box;
}

#results .glass-card,
#results .result-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--glass-shadow);
}

#results h3 {
    color: var(--primary-color);
    font-size: 18px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Results Materials Section - Override all old flex styles */
#results .materials {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    padding: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
}

/* Remove the old ::before "Materials" header - we use section header now */
#results .materials::before {
    display: none !important;
    content: none !important;
}

/* Override old .materials > div styles that limit width */
#results .materials > div,
#results .materials > .materials-table-row {
    max-width: none !important;
    flex: unset !important;
    width: 100% !important;
    align-items: unset !important;
}

@media (min-width: 600px) {
    #results .materials {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 900px) {
    #results .materials {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Section Header for Materials */
#results .materials-section-header {
    grid-column: 1 / -1;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin: 0 0 8px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

/* Hide the old table header completely */
.materials-table-header {
    display: none !important;
}

/* Material Card */
.materials-table-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: all 0.2s ease;
    overflow: hidden;
    width: 100%; /* Fill grid cell */
    min-width: 0; /* Allow shrinking */
}

.materials-table-row:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .materials-table-row {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .materials-table-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Material Header (Image + Name) */
.materials-table-row .col-material {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    background: rgba(13, 92, 122, 0.1);
    border-bottom: 1px solid var(--glass-border);
}

[data-theme="dark"] .materials-table-row .col-material {
    background: rgba(13, 92, 122, 0.15);
}

.materials-table-row .col-material img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.material-name-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.materials-table-row .material-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.materials-table-row .season-badge {
    font-size: var(--font-size-xs);
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    opacity: 0.9;
}

/* Data Values - Stacked with labels */
.materials-table-row .col-remaining,
.materials-table-row .col-starting,
.materials-table-row .col-used {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.materials-table-row .col-used {
    border-bottom: none;
}

.materials-table-row .col-remaining::before {
    content: 'Remaining';
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    opacity: 0.6;
    color: var(--text-color);
}

.materials-table-row .col-starting::before {
    content: 'Starting';
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    opacity: 0.6;
    color: var(--text-color);
}

.materials-table-row .col-used::before {
    content: 'Used';
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    opacity: 0.6;
    color: var(--text-color);
}

.materials-table-row .col-remaining {
    color: var(--primary-color);
}

.materials-table-row .col-starting {
    color: var(--text-color);
    opacity: 0.85;
}

.materials-table-row .col-used {
    color: #d32f2f;
}

[data-theme="dark"] .materials-table-row .col-used {
    color: #ff6b6b;
}

/* Single column on very small screens */
@media (max-width: 399px) {
    #results .materials {
        grid-template-columns: 1fr;
    }
}

/* Results Items Section */
#results .items {
    margin-bottom: 24px;
}

#results .items h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin: 20px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

#results .items h4:first-child {
    margin-top: 0;
}

#results .level-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 16px;
    padding: 0;
    background: transparent;
}

@media (min-width: 500px) {
    #results .level-group {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 700px) {
    #results .level-group {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (min-width: 900px) {
    #results .level-group {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* Item Card - matches material card style */
#results .item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

#results .item-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#results .item-card.opacity {
    opacity: 0.4;
    transform: scale(0.98);
}

#results .item-card.item-ctw {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.05);
}

[data-theme="dark"] #results .item-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #results .item-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] #results .item-card.item-ctw {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.08);
}

/* Item image */
#results .item-card img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Item name */
#results .item-card .item-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Item quantity - emphasized */
#results .item-card .item-quantity {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin: 4px 0 0;
    font-variant-numeric: tabular-nums;
}

/* Hide item materials by default */
#results .item-card .item-mats {
    display: none;
}

#results .level-group img {
    width: 45px;
    height: 45px;
}

#results .results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

#results .results-actions button {
    flex: 1;
    min-width: 120px;
}

/* Support Link */
.support-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 16px;
}

.support-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.support-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Fix for old styles compatibility */
.materials-list {
    display: none;
}

#generatebychoice {
    display: none !important;
}

/* Ensure wrapper has proper z-index */
.wrapper {
    position: relative;
    z-index: 1;
}

/* ================================================
   History Modal Styles
   ================================================ */

.history-trigger button {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.history-trigger button:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.history-trigger button svg {
    width: 18px;
    height: 18px;
    fill: var(--primary-color);
}

/* History Modal Overlay */
.history-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.history-modal__content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.history-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
}

.history-modal__header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.history-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    font-size: 18px;
    font-weight: 300;
    color: var(--text-color);
    line-height: 1;
}

.history-modal__close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

[data-theme="dark"] .history-modal__close {
    color: #ffffff;
}

.history-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* History List */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-color);
    opacity: 0.6;
}

.history-empty svg {
    margin-bottom: 16px;
    opacity: 0.4;
}

.history-empty p {
    margin: 0 0 4px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.history-empty span {
    font-size: var(--font-size-sm);
    opacity: 0.7;
}

/* History Item */
.history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--primary-color);
}

.history-item__main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    min-width: 0;
}

.history-item__icon {
    width: 40px;
    height: 40px;
    background: rgba(13, 92, 122, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.history-item__icon svg {
    fill: var(--primary-color);
}

.history-item__info {
    flex: 1;
    min-width: 0;
}

.history-item__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin-bottom: 2px;
}

.history-item__details {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item__time {
    font-size: var(--font-size-xs);
    color: var(--primary-color);
    margin-top: 2px;
}

.history-item__delete {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.history-item__delete:hover {
    background: rgba(220, 53, 69, 0.2);
    opacity: 1;
}

.history-item__delete svg {
    fill: #dc3545;
}

/* History Modal Footer */
.history-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--glass-border);
    gap: 12px;
}

.history-actions {
    display: flex;
    gap: 8px;
}

.history-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-btn--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

.history-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.history-btn--danger {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

.history-btn--danger:hover {
    background: rgba(220, 53, 69, 0.2);
}

/* Dark mode adjustments */
[data-theme="dark"] .history-modal__content {
    background: rgba(20, 25, 30, 0.95);
}

[data-theme="dark"] .history-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .history-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .history-item__icon {
    background: rgba(13, 92, 122, 0.25);
}

/* Responsive */
@media (max-width: 479px) {
    .history-modal__content {
        max-height: 90vh;
        border-radius: 16px;
    }
    
    .history-modal__header {
        padding: 16px 20px;
    }
    
    .history-modal__footer {
        flex-direction: column;
        padding: 12px 16px;
    }
    
    .history-actions {
        width: 100%;
        justify-content: center;
    }
    
    .history-btn--danger {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   NEW CALCULATION MODAL
   ============================================ */

.new-calc-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.new-calc-modal__content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
    overflow: hidden;
}

.new-calc-modal__header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
}

.new-calc-modal__header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.new-calc-modal__body {
    padding: 20px 24px;
}

.new-calc-modal__body p {
    margin: 0 0 16px 0;
    color: var(--text-color);
    opacity: 0.8;
}

.new-calc-modal__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.new-calc-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    border: 2px solid var(--glass-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.new-calc-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.new-calc-option svg {
    fill: var(--primary-color);
}

.new-calc-option .option-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.new-calc-option .option-desc {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.7;
}

.new-calc-option--continue {
    border-color: rgba(13, 92, 122, 0.3);
    background: rgba(13, 92, 122, 0.1);
}

.new-calc-option--continue:hover {
    border-color: var(--primary-color);
    background: rgba(13, 92, 122, 0.2);
}

.new-calc-option--fresh {
    border-color: rgba(220, 53, 69, 0.2);
    background: rgba(220, 53, 69, 0.05);
}

.new-calc-option--fresh:hover {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

.new-calc-option--fresh svg {
    fill: #dc3545;
}

.new-calc-modal__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: center;
}

.new-calc-modal__cancel {
    padding: 10px 24px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.new-calc-modal__cancel:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Dark mode */
[data-theme="dark"] .new-calc-modal__content {
    background: rgba(20, 25, 30, 0.95);
}

[data-theme="dark"] .new-calc-option {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .new-calc-option--continue {
    background: rgba(13, 92, 122, 0.15);
}

[data-theme="dark"] .new-calc-option--fresh {
    background: rgba(220, 53, 69, 0.1);
}

[data-theme="dark"] .new-calc-modal__cancel:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (min-width: 480px) {
    .new-calc-modal__options {
        flex-direction: row;
    }
    
    .new-calc-option {
        flex: 1;
    }
}

/* ============================================
   MARCH SIZE CALCULATOR STYLES
   ============================================ */

/* Calculator Mode Selector */
.calculator-mode-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding: 6px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.calc-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.calc-mode-btn:hover {
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.1);
}

.calc-mode-btn.active {
    opacity: 1;
    background: var(--button-bg);
    color: var(--button-text-color);
    box-shadow: 0 4px 12px rgba(13, 92, 122, 0.3);
}

.calc-mode-btn svg {
    fill: currentColor;
}

/* Calculator Sections */
.calculator-section {
    display: none;
}

.calculator-section.active {
    display: block;
}

/* March Size Scenario Selection */
/* Scenario Sections */
.ms-scenario-section {
    margin-bottom: 28px;
}

.ms-scenario-section__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--glass-border);
    display: flex;
    align-items: center;
}

.ms-scenario-section__title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.ms-scenario-section__icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    flex-shrink: 0;
    object-fit: contain;
}

.ms-scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.ms-scenario-grid--section {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .ms-scenario-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 500px) {
    .ms-scenario-grid {
        grid-template-columns: 1fr;
    }
    
    .ms-scenario-section {
        margin-bottom: 24px;
    }
}

.ms-scenario-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    border: 2px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    gap: 10px;
}

.ms-scenario-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-color);
}

.ms-scenario-card.active {
    border-color: var(--primary-color);
    background: rgba(13, 92, 122, 0.1);
}

.ms-scenario-card__icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-scenario-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ms-scenario-card__content h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--header-color);
    margin: 0;
    line-height: 1.3;
}

.ms-scenario-card__content p {
    font-size: 10px;
    color: var(--text-color);
    opacity: 0.75;
    line-height: 1.3;
}

.ms-scenario-card__check {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    color: var(--success-color);
}

.ms-scenario-card.active .ms-scenario-card__check {
    opacity: 1;
    transform: scale(1);
}

/* Disabled Scenario Cards - Under Construction */
.ms-scenario-card--disabled {
    position: relative;
    cursor: not-allowed;
    opacity: 0.6;
    filter: grayscale(40%);
}

.ms-scenario-card--disabled:hover {
    transform: none;
    border-color: var(--glass-border);
}

.ms-scenario-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 10;
}

.ms-scenario-card__overlay span {
    background: rgba(255, 193, 7, 0.9);
    color: #1a1a1a;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Account Configuration Section */
.ms-account-config {
    margin-top: 32px;
    margin-bottom: 16px;
    text-align: center;
    padding: 20px;
    border-top: 1px solid var(--glass-border);
}

.ms-account-config__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
    margin-bottom: 4px;
}

.ms-account-config__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
}

/* Quick Modifiers */
.ms-modifiers-card {
    padding: 20px;
}

.ms-modifiers-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
    margin-bottom: 16px;
}

.ms-modifiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.ms-modifier-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ms-modifier-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.ms-modifier-item input[type="checkbox"] {
    display: none;
}

.ms-modifier-item__checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ms-modifier-item input[type="checkbox"]:checked + .ms-modifier-item__checkmark {
    background: var(--primary-color);
}

.ms-modifier-item input[type="checkbox"]:checked + .ms-modifier-item__checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.ms-modifier-item__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ms-modifier-item__label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
}

.ms-modifier-item__value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--success-color);
}

/* Inline Modifier (inside Building/Heroes sections) */
.ms-modifier-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(13, 92, 122, 0.1);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.ms-modifier-inline:hover {
    background: rgba(13, 92, 122, 0.15);
}

.ms-modifier-inline input[type="checkbox"] {
    display: none;
}

.ms-modifier-inline__checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ms-modifier-inline input[type="checkbox"]:checked + .ms-modifier-inline__checkmark {
    background: var(--primary-color);
}

.ms-modifier-inline input[type="checkbox"]:checked + .ms-modifier-inline__checkmark::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: bold;
}

.ms-modifier-inline__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ms-modifier-inline__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
}

.ms-modifier-inline__value {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--success-color);
}

.ms-modifier-inline--highlight {
    background: rgba(46, 125, 50, 0.1);
    border-color: var(--success-color);
}

.ms-modifier-inline--highlight:hover {
    background: rgba(46, 125, 50, 0.15);
}

.ms-modifier-inline--highlight .ms-modifier-inline__checkmark {
    border-color: var(--success-color);
}

.ms-modifier-inline--highlight input[type="checkbox"]:checked + .ms-modifier-inline__checkmark {
    background: var(--success-color);
}

/* Hero modifier section */
.ms-hero-modifier {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.ms-building-item--modifier {
    grid-column: span 2;
}

@media (max-width: 600px) {
    .ms-building-item--modifier {
        grid-column: span 1;
    }
}

/* March Size Input Cards */
.ms-input-card {
    margin-bottom: 16px;
}

.ms-input-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
}

.ms-input-card__header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
    margin-bottom: 4px;
}

.ms-input-card__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
}

/* Old Gear Grid (hidden) */
.ms-gear-grid {
    display: none;
}

/* ============================================
   SOP TITLE CARD
   ============================================ */
.ms-title-card {
    position: relative;
    margin-bottom: 24px;
}

.ms-title-card__bonus {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(56, 142, 60, 0.3));
    border: 1px solid var(--success-color);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--success-color);
    z-index: 1;
}

.ms-title-card .ms-input-card__header {
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.ms-title-selection {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
}

.ms-title-selection__icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(139, 69, 19, 0.3));
    border: 2px solid var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ms-title-selection__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ms-title-selection__controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ms-title-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ms-title-select:hover,
.ms-title-select:focus {
    border-color: var(--accent-gold);
    outline: none;
}

.ms-title-bonus {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(139, 69, 19, 0.15));
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.ms-title-bonus__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold);
}

.ms-title-bonus__label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .ms-title-card__bonus {
        font-size: 0.75rem;
        padding: 4px 8px;
        top: 8px;
        right: 8px;
    }
    
    .ms-title-selection {
        flex-direction: column;
        text-align: center;
    }
    
    .ms-title-selection__icon {
        width: 60px;
        height: 60px;
    }
}

/* ============================================
   BASE MARCH SIZE VERIFICATION CARD
   ============================================ */
.ms-base-verification-card {
    margin-bottom: 24px;
}

.ms-base-verification-card .ms-input-card__header {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 20px;
}

.ms-base-verification {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ms-base-verification__calculated {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(13, 92, 122, 0.1), rgba(13, 92, 122, 0.2));
    border: 1px solid var(--primary-color);
    border-radius: 12px;
}

.ms-base-verification__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ms-base-verification__value {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin-bottom: 16px;
}

.ms-base-verification__pct-breakdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 8px;
}

.ms-verification__flat {
    color: var(--text-color);
}

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

.ms-verification__pct {
    color: var(--success-color);
}

.ms-base-verification__pct-total {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.ms-base-verification__pct-total strong {
    color: var(--success-color);
}

.ms-instructions-box {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 10px;
}

[data-theme="dark"] .ms-instructions-box {
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.2);
}

.ms-instructions-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ms-instructions-text {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.ms-instructions-text strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
}

.ms-instructions-text ol {
    margin: 0;
    padding-left: 20px;
}

.ms-instructions-text li {
    margin-bottom: 4px;
}

.ms-base-verification__override {
    padding: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}

.ms-override-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
}

.ms-override-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.ms-override-input-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.ms-override-input-group label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 8px;
}

.ms-override-input {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    background: var(--input-bg);
    border: 2px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-color);
    text-align: center;
    transition: border-color 0.2s ease;
}

.ms-override-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.ms-override-input::placeholder {
    color: var(--text-muted);
    font-weight: normal;
}

.ms-override-diff {
    display: block;
    margin-top: 8px;
    font-size: var(--font-size-sm);
    text-align: center;
}

.ms-override-diff.positive {
    color: var(--success-color);
}

.ms-override-diff.negative {
    color: var(--danger-color);
}

@media (max-width: 600px) {
    .ms-base-verification__value {
        font-size: 1.5rem;
    }
    
    .ms-base-verification__breakdown {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    
    .ms-instructions-box {
        flex-direction: column;
        text-align: center;
    }
}

/* Gear Card Container */
.ms-gear-card {
    overflow: visible;
    padding: 0 !important; /* Remove padding to gain more room */
}

.ms-gear-card .ms-input-card__header {
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
    padding: 20px 20px 16px 20px; /* Add padding back to header only */
    margin-bottom: 0;
}

/* Visual Gear Layout */
.ms-gear-visual {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    padding: 24px;
    align-items: start;
    overflow: hidden;
}

.ms-gear-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    min-width: 0;
}

.ms-gear-column--left {
    align-items: flex-end;
    justify-content: flex-start;
}

.ms-gear-column--right {
    align-items: flex-start;
    justify-content: flex-start;
}

.ms-gear-center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
}

.ms-gear-center__avatar {
    width: 100px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 2px solid var(--glass-border);
}

.ms-gear-center__image {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    opacity: 0.6;
}

.ms-gear-slot-visual {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    transition: all 0.2s ease;
    width: 100%;
    max-width: 400px;
    min-height: 140px;
    position: relative;
}

.ms-gear-slot-visual:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: var(--primary-color);
}

.ms-gear-slot-visual__bonus {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(56, 142, 60, 0.3));
    border: 1px solid var(--success-color);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--success-color);
    z-index: 1;
}

/* Right column uses same layout as left column */

.ms-gear-slot-visual__image {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(128, 128, 128, 0.3);
    border: 3px solid var(--glass-border);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* Quality-based background colors for gear images */
.ms-gear-slot-visual[data-quality="poor"] .ms-gear-slot-visual__image {
    background: linear-gradient(135deg, rgba(128, 128, 128, 0.4) 0%, rgba(80, 80, 80, 0.6) 100%);
    border-color: #808080;
}

.ms-gear-slot-visual[data-quality="common"] .ms-gear-slot-visual__image {
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.3) 0%, rgba(34, 139, 34, 0.5) 100%);
    border-color: #32CD32;
}

.ms-gear-slot-visual[data-quality="fine"] .ms-gear-slot-visual__image {
    background: linear-gradient(135deg, rgba(0, 112, 221, 0.3) 0%, rgba(0, 70, 140, 0.5) 100%);
    border-color: #0070DD;
}

.ms-gear-slot-visual[data-quality="exquisite"] .ms-gear-slot-visual__image {
    background: linear-gradient(135deg, rgba(163, 53, 238, 0.3) 0%, rgba(120, 40, 180, 0.5) 100%);
    border-color: #A335EE;
}

.ms-gear-slot-visual[data-quality="epic"] .ms-gear-slot-visual__image {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.3) 0%, rgba(184, 115, 51, 0.5) 100%);
    border-color: #CD7F32;
}

.ms-gear-slot-visual[data-quality="legendary"] .ms-gear-slot-visual__image {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(218, 165, 32, 0.5) 100%);
    border-color: #FFD700;
}

.ms-gear-slot-visual__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.ms-gear-slot-visual__image img.has-gear {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.ms-gear-slot-visual:hover .ms-gear-slot-visual__image img {
    transform: scale(1.08);
}

.ms-gear-slot-visual__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* Right column text stays left-aligned */

.ms-gear-slot-visual__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ms-gear-slot-visual__select {
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: var(--input-bg);
    color: var(--text-color);
    cursor: pointer;
    width: 100%;
}

.ms-gear-slot-visual__select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.ms-gear-slot-visual__row {
    display: flex;
    gap: 6px;
}

/* Right column row layout stays the same as left */

.ms-gear-slot-visual__level-select,
.ms-gear-slot-visual__quality {
    padding: 6px 8px;
    font-size: var(--font-size-xs);
    border-radius: 5px;
    border: 1px solid var(--glass-border);
    background: var(--input-bg);
    color: var(--text-color);
    cursor: pointer;
    flex: 1;
}

.ms-gear-slot-visual__level-select:focus,
.ms-gear-slot-visual__quality:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Quality-specific border colors for gear images */
.ms-gear-slot-visual[data-quality="common"] .ms-gear-slot-visual__image { border-color: #32CD32; }
.ms-gear-slot-visual[data-quality="fine"] .ms-gear-slot-visual__image { border-color: #0070DD; }
.ms-gear-slot-visual[data-quality="exquisite"] .ms-gear-slot-visual__image { border-color: #A335EE; }
.ms-gear-slot-visual[data-quality="epic"] .ms-gear-slot-visual__image { border-color: #FF8000; }
.ms-gear-slot-visual[data-quality="legendary"] .ms-gear-slot-visual__image { border-color: #E5CC80; }

/* Dragon Trinket slot - special dragon-themed styling */
.ms-gear-slot-visual--dragon-trinket {
    background: linear-gradient(135deg, rgba(255, 100, 50, 0.08) 0%, rgba(139, 69, 19, 0.12) 100%);
    border-color: rgba(255, 100, 50, 0.3);
}

.ms-gear-slot-visual--dragon-trinket:hover {
    background: linear-gradient(135deg, rgba(255, 100, 50, 0.15) 0%, rgba(139, 69, 19, 0.2) 100%);
    border-color: rgba(255, 100, 50, 0.5);
}

.ms-gear-slot-visual--dragon-trinket .ms-gear-slot-visual__label {
    color: #ff6432;
}

/* Old gear slot styles (kept for compatibility) */
.ms-gear-slot {
    display: none;
}

.ms-gear-slot__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
}

.ms-gear-slot__label span.icon {
    font-size: 20px;
}

.ms-gear-slot__selects {
    display: flex;
    gap: 8px;
}

.ms-gear-slot__piece,
.ms-gear-slot__quality {
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ms-gear-slot__piece {
    flex: 2;
}

.ms-gear-slot__quality {
    flex: 1;
    min-width: 100px;
}

.ms-gear-slot__piece:focus,
.ms-gear-slot__quality:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 92, 122, 0.2);
}

/* Buildings/Armories Grid */
.ms-buildings-grid,
.ms-armories-grid,
.ms-dragon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px;
}

.ms-section-description {
    grid-column: 1 / -1;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(13, 92, 122, 0.1);
    border-radius: 6px;
    border-left: 3px solid var(--primary-color);
}

.ms-stat-hint {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
    opacity: 0.8;
}

/* Select dropdown styling for enhancements */
.ms-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}

.ms-select:hover {
    border-color: var(--primary-color);
}

.ms-select option {
    background: var(--card-bg);
    color: var(--text-color);
    padding: 8px;
}

.ms-building-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ms-building-item__icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 92, 122, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(13, 92, 122, 0.3);
}

.ms-building-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.ms-building-item__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.ms-armory-icon {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.ms-dragon-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ms-building-item label,
.ms-armory-item label,
.ms-dragon-item label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Armory Categories Layout */
.ms-armories-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
}

.ms-armory-category {
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.ms-armory-category__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ms-armory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Vertical Card Layout */
.ms-armory-grid.ms-armory-grid--vertical {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Building Cards - Horizontal layout for Buildings & Enhancements */
.ms-building-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 800px;
}

.ms-building-grid.ms-building-grid--3col {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
}

.ms-building-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: all 0.2s ease;
}

.ms-building-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ms-building-card__image {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
    padding: 16px;
}

.ms-building-card__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ms-building-card__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ms-building-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--header-color);
    text-align: center;
}

.ms-building-card__slider {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.ms-building-card__slider .ms-armory-slider {
    width: 100%;
}

.ms-building-card__slider .ms-armory-value {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    min-width: 140px;
    text-align: center;
}

/* Picker Wheel Styles */
.ms-building-card--expandable {
    cursor: pointer;
    position: relative;
}

.ms-building-card--expanded {
    min-height: 250px;
}

.ms-building-card__picker-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
}

.ms-building-card__picker-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.15;
    filter: blur(8px);
}

.ms-building-card__picker-background img {
    max-width: 200%;
    max-height: 200%;
    object-fit: contain;
}

.ms-picker-wheel {
    position: relative;
    display: flex;
    width: 100%;
    height: 200px;
    z-index: 2;
    padding: 0;
    justify-content: center;
}

.ms-picker-wheel__column {
    width: 100%;
    max-width: 300px;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y proximity;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding: 80px 0;
    box-sizing: border-box;
}

.ms-picker-wheel__column::-webkit-scrollbar {
    display: none;
}

.ms-picker-wheel__column {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ms-picker-wheel__item {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    font-size: var(--font-size-base);
    color: var(--text-color);
    transition: all 0.2s ease;
    user-select: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.ms-picker-wheel__item.selected {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

.ms-picker-wheel__item.selected span {
    color: var(--success-color);
    font-weight: var(--font-weight-semibold);
}

.ms-picker-wheel__selection {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 40px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ms-picker-wheel__column::before,
.ms-picker-wheel__column::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 4;
    pointer-events: none;
}

.ms-picker-wheel__column::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}

.ms-picker-wheel__column::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Responsive for building cards */
@media (max-width: 900px) {
    .ms-building-grid.ms-building-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ms-building-grid,
    .ms-building-grid.ms-building-grid--3col {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .ms-building-card__image {
        height: 120px;
    }
    
    .ms-building-card--expanded {
        min-height: 250px;
    }
    
    .ms-building-card__picker-container {
        min-height: 180px;
    }
    
    .ms-picker-wheel {
        height: 180px;
    }
    
    .ms-picker-wheel__column {
        padding: 70px 0;
    }
    
    .ms-picker-wheel__item {
        height: 40px;
        font-size: var(--font-size-base);
    }
    
    .ms-picker-wheel__item.selected {
        font-size: var(--font-size-lg);
    }
    
    .ms-picker-wheel__selection {
        height: 40px;
    }
    
    .ms-picker-wheel__column::before,
    .ms-picker-wheel__column::after {
        height: 70px;
    }
}

.ms-armory-item.ms-armory-item--vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    gap: 12px;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.ms-armory-item.ms-armory-item--vertical:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ms-armory-item--expandable {
    cursor: pointer;
}

.ms-armory-item--expandable.ms-armory-item--expanded {
    min-height: 250px;
}

.ms-armory-item__picker-container {
    position: relative;
    width: 100%;
    height: 220px;
    margin-top: 12px;
    border-radius: 12px;
    overflow: visible;
    background: rgba(0, 0, 0, 0.4);
}

.ms-armory-item__picker-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.15;
    filter: blur(8px);
}

.ms-armory-item__picker-background img {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
}

.ms-armory-item.ms-armory-item--vertical > label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--header-color);
    line-height: 1.2;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Standard armory images - full width to match slider */
.ms-armory-item.ms-armory-item--vertical > .ms-armory-icon {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
}

/* Trinket icons container */
.ms-armory-item.ms-armory-item--vertical > .ms-armory-icons {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    height: 80px;
    box-sizing: border-box;
}

.ms-armory-item.ms-armory-item--vertical > .ms-armory-icons .ms-armory-icon {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain;
    padding: 0;
    background: none;
    flex-shrink: 1;
}

.ms-armory-slider-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ms-armory-slider-group .ms-armory-slider {
    width: 100%;
}

.ms-armory-slider-group .ms-armory-value {
    text-align: center;
    min-width: auto;
}

/* Legacy horizontal layout */
.ms-armory-grid .ms-armory-item {
    display: flex;
    align-items: stretch;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    min-width: 0;
}

.ms-armory-grid .ms-armory-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary-color);
    transform: scale(1.02);
}

.ms-armory-grid .ms-armory-item .ms-armory-icon {
    flex-shrink: 0;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.ms-armory-icons {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 240px;
    min-width: 240px;
}

.ms-armory-icons .ms-armory-icon {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain;
}

/* Icon container for consistent sizing */
.ms-armory-icon-container {
    flex-shrink: 0;
    width: 240px;
    height: 240px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.ms-armory-icon-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Trinket icons group */
.ms-armory-icons-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    width: 240px;
    height: 240px;
    min-width: 240px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.ms-armory-icons-group .ms-armory-icon-mini {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain;
}

/* Armory/Building Slider */
.ms-armory-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ms-armory-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.ms-armory-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.ms-armory-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ms-armory-value {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    min-width: 120px;
    text-align: center;
    white-space: nowrap;
}

/* Wrapper for label and input on the right side */
.ms-armory-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 60px;
    gap: 8px;
}

.ms-armory-grid .ms-armory-item label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--header-color);
    text-align: left;
}

.ms-armory-grid .ms-armory-item .ms-input {
    padding: 10px 14px;
    font-size: var(--font-size-base);
    width: 150px;
    flex-shrink: 0;
}

/* Responsive for vertical card layout (Armories) */
@media (max-width: 1200px) {
    .ms-armories-content {
        padding: 16px;
        overflow: hidden;
    }
    
    .ms-armory-category {
        padding: 12px;
        overflow: hidden;
    }
    
    .ms-armory-grid.ms-armory-grid--vertical {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .ms-armory-item.ms-armory-item--vertical {
        padding: 12px 10px;
        min-width: 0;
    }
    
    .ms-armory-item.ms-armory-item--vertical > .ms-armory-icons {
        height: 70px;
        width: auto;
        max-width: 100%;
        align-self: center;
        justify-content: center;
        align-items: center;
        gap: 4px;
        box-sizing: border-box;
        padding: 8px 12px;
    }
    
    .ms-armory-item.ms-armory-item--vertical > .ms-armory-icons .ms-armory-icon {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        flex-shrink: 1;
    }
}

@media (max-width: 900px) {
    .ms-armory-grid.ms-armory-grid--vertical {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .ms-armory-grid.ms-armory-grid--vertical {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .ms-armory-item.ms-armory-item--vertical {
        padding: 12px 8px;
        gap: 10px;
    }
    
    .ms-armory-item.ms-armory-item--vertical > label {
        font-size: var(--font-size-xs);
        min-height: 2em;
    }
    
    .ms-armory-item.ms-armory-item--vertical > .ms-armory-icon {
        padding: 6px;
    }
    
    .ms-armory-item.ms-armory-item--vertical > .ms-armory-icons {
        height: 60px;
    }
    
    .ms-armory-item.ms-armory-item--vertical > .ms-armory-icons .ms-armory-icon {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }
}

/* Single column layout for armories at 600px */
@media (max-width: 600px) {
    .ms-armory-grid.ms-armory-grid--vertical {
        grid-template-columns: 1fr; /* Single column for better readability */
        gap: 12px;
    }
    
    .ms-armory-item.ms-armory-item--vertical {
        padding: 12px;
        gap: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .ms-armory-item.ms-armory-item--vertical > label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        min-height: auto;
        line-height: 1.2;
        margin-bottom: 0;
        padding-bottom: 0;
        color: var(--primary-color);
    }
    
    /* Full width icons for single column layout */
    .ms-armory-item.ms-armory-item--vertical > .ms-armory-icon {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-width: 100%;
        padding: 8px;
        object-fit: contain;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
    }
    
    .ms-armory-item.ms-armory-item--vertical > .ms-armory-icons {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 80px;
        padding: 12px;
        display: flex;
        justify-content: center;
        gap: 8px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
    }
    
    .ms-armory-item.ms-armory-item--vertical > .ms-armory-icons .ms-armory-icon {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
        padding: 0;
        background: none;
    }
    
    /* Slider group */
    .ms-armory-item.ms-armory-item--vertical > .ms-armory-slider-group {
        width: 100%;
        align-items: center;
    }
    
    .ms-armory-slider-group .ms-armory-value {
        text-align: center !important;
        width: 100%;
        display: block;
        font-size: var(--font-size-base);
    }
}

/* Legacy horizontal layout responsive */
@media (max-width: 1200px) {
    .ms-armory-grid:not(.ms-armory-grid--vertical) {
        grid-template-columns: 1fr;
    }
    
    .ms-armory-grid:not(.ms-armory-grid--vertical) .ms-armory-item .ms-armory-icon {
        width: 280px;
    }
    
    .ms-armory-grid:not(.ms-armory-grid--vertical) .ms-armory-icons {
        width: 280px;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .ms-armory-grid:not(.ms-armory-grid--vertical) .ms-armory-item {
        flex-direction: column;
        align-items: center;
        padding: 12px;
        gap: 12px;
    }
    
    .ms-armory-grid:not(.ms-armory-grid--vertical) .ms-armory-item .ms-armory-icon {
        width: 100%;
        max-width: 400px;
    }
    
    .ms-armory-icons {
        width: 100%;
        max-width: 400px;
        min-width: auto;
    }
    
    .ms-armory-icons .ms-armory-icon {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }
    
    .ms-armory-info {
        align-items: center;
        width: 100%;
    }
    
    .ms-armory-grid .ms-armory-item label {
        text-align: center;
    }
    
    .ms-armory-grid .ms-armory-item .ms-input {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .ms-armory-grid .ms-armory-item .ms-armory-icon {
        width: 100%;
        max-width: 100%;
    }
    
    .ms-armory-icons {
        max-width: 100%;
    }
}

.ms-input {
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: var(--font-size-base);
    width: 100%;
    transition: all 0.2s ease;
}

.ms-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 92, 122, 0.2);
}

.ms-input--large {
    font-size: var(--font-size-2xl);
    padding: 16px 20px;
    text-align: center;
    font-weight: var(--font-weight-bold);
}

/* Research Grid - 3 column layout for research categories */
.ms-research-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .ms-research-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ms-research-grid {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
    }
    
    .ms-research-category {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .ms-research-grid {
        padding: 8px;
        gap: 10px;
    }
    
    .ms-research-category {
        padding: 8px;
    }
    
    .ms-research-slider-item {
        padding: 5px 6px;
        gap: 6px;
    }
    
    .ms-research-items {
        gap: 6px;
    }
}

.ms-research-category {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden; /* Prevent content from overflowing */
    box-sizing: border-box;
    max-width: 100%; /* Ensure it doesn't exceed container */
}

.ms-research-category__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--glass-border);
}

.ms-research-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    padding: 4px;
    background: rgba(13, 92, 122, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(13, 92, 122, 0.3);
}

.ms-research-category h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
}

.ms-research-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ms-research-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ms-research-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ms-research-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.ms-research-item span {
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

/* Research Sliders - single column within each category */
.ms-research-sliders {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ms-research-slider-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ms-research-slider-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.ms-research-slider-item--expandable {
    cursor: pointer;
    position: relative;
}

.ms-research-slider-item--expandable.ms-research-slider-item--expanded {
    flex-direction: column;
}

.ms-research-slider-item--expanded {
    min-height: 250px;
}

.ms-research-slider-item__picker-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
}

.ms-research-slider-item__picker-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.15;
    filter: blur(8px);
}

.ms-research-slider-item__picker-background img {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
}

.ms-research-slider-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.ms-research-slider-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ms-research-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}

.ms-research-slider-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-research-slider-value {
    font-size: 10px;
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    min-width: 120px;
    text-align: right;
}

.ms-research-range {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ms-research-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.ms-research-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.ms-research-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Heroes Grid - Game-style Layout */
.ms-heroes-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 600px) {
    .ms-heroes-content {
        padding: 12px;
        gap: 12px;
    }
}

/* Hero Categories */
.ms-heroes-category {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.ms-heroes-category:last-of-type {
    margin-bottom: 0;
}

.ms-heroes-category__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.ms-heroes-category__icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ms-heroes-category[data-category="council"] .ms-heroes-category__title {
    color: var(--accent-gold);
}

.ms-heroes-category[data-category="marching"] .ms-heroes-category__title {
    color: var(--accent-red);
}

.ms-heroes-category[data-category="hall"] .ms-heroes-category__title {
    color: var(--accent-purple);
}

.ms-section-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-style: italic;
    margin-top: 8px;
    text-align: center;
}

/* Hall of Heroes Container */
.ms-hall-heroes-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

/* Rising Adventurer Card - Dark Theme Style */
.ms-rising-adventurer-card {
    background: linear-gradient(180deg, 
        rgba(20, 20, 30, 0.95) 0%, 
        rgba(30, 30, 50, 0.9) 50%, 
        rgba(20, 20, 30, 0.95) 100%);
    border: 2px solid rgba(79, 195, 247, 0.4);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(79, 195, 247, 0.1),
        inset 0 1px 0 rgba(79, 195, 247, 0.1);
    max-width: 420px;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ms-rising-adventurer-card:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 195, 247, 0.6);
    box-shadow: 
        0 6px 25px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(79, 195, 247, 0.2),
        inset 0 1px 0 rgba(79, 195, 247, 0.15);
}

.ms-rising-adventurer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(79, 195, 247, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(138, 43, 226, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.ms-rising-adventurer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.ms-rising-adventurer-icon {
    font-size: 18px;
    color: #4fc3f7;
    text-shadow: 0 0 10px rgba(79, 195, 247, 0.6);
}

.ms-rising-adventurer-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #e0e0e0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.ms-rising-adventurer-bonus {
    font-size: 14px;
    font-weight: 700;
    color: #4fc3f7;
    text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
    font-family: 'JetBrains Mono', monospace;
}

/* Hero Deck - Row of Portraits */
.ms-hero-deck {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: linear-gradient(180deg, 
        rgba(0, 0, 0, 0.4) 0%,
        rgba(10, 10, 20, 0.3) 50%,
        rgba(0, 0, 0, 0.4) 100%);
    border-radius: 8px;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(79, 195, 247, 0.15);
    border-bottom: 1px solid rgba(79, 195, 247, 0.15);
}

.ms-hero-deck__portrait {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(79, 195, 247, 0.3);
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.25s ease;
    position: relative;
}

.ms-hero-deck__portrait::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(79, 195, 247, 0.1) 0%, 
        transparent 50%);
    pointer-events: none;
}

.ms-hero-deck__portrait:hover {
    transform: scale(1.15);
    border-color: #4fc3f7;
    box-shadow: 0 0 15px rgba(79, 195, 247, 0.5);
    z-index: 10;
}

.ms-hero-deck__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Common (Green) Hero Portraits */
.ms-hero-deck__portrait--common {
    border-color: rgba(76, 175, 80, 0.7);
    background: rgba(27, 94, 32, 0.3);
}

.ms-hero-deck__portrait--common:hover {
    border-color: #4caf50;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
}

.ms-hero-deck__portrait--common::after {
    background: linear-gradient(135deg, 
        rgba(76, 175, 80, 0.15) 0%, 
        transparent 50%);
}

/* Extra slot (+1 More) with initial */
.ms-hero-deck__portrait--extra {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, 
        rgba(46, 125, 50, 0.6) 0%, 
        rgba(27, 94, 32, 0.8) 100%);
}

.ms-hero-deck__initial {
    font-size: 14px;
    font-weight: 700;
    color: #c8e6c9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

/* Tooltip on hover */
.ms-hero-deck__portrait[data-hero]:hover::before {
    content: attr(data-hero);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #e0e0e0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    border: 1px solid rgba(76, 175, 80, 0.5);
}

/* Hall Slider Controls */
.ms-hall-controls {
    width: 100%;
    max-width: 420px;
}

.ms-hall-controls label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
}

.ms-hall-slider-group {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.ms-hall-slider-group--expandable {
    cursor: pointer;
    flex-direction: column;
    align-items: stretch;
}

.ms-hall-slider-group--expandable.ms-hall-slider-group--expanded {
    min-height: 250px;
}

.ms-hall-slider-group__picker-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
}

.ms-hall-slider-group__picker-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.15;
    filter: blur(8px);
}

.ms-hall-slider-group__picker-background img {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
}

.ms-hall-slider {
    flex: 1;
    height: 6px;
}

.ms-hall-value {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    min-width: 160px;
}

/* Marching Hero Container */
.ms-marching-hero-container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    max-width: 400px;
    margin: 0 auto;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.ms-marching-hero-container:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.ms-marching-hero__visual {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent-gold);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    flex-shrink: 0;
}

.ms-marching-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ms-marching-hero__controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ms-marching-hero__controls label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.ms-marching-slider-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.ms-marching-slider-group--expandable {
    cursor: pointer;
}

.ms-marching-slider-group--expandable.ms-marching-slider-group--expanded {
    min-height: 250px;
}

.ms-marching-slider-group__picker-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
}

.ms-marching-slider-group__picker-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.15;
    filter: blur(8px);
}

.ms-marching-slider-group__picker-background img {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
}

.ms-marching-slider {
    width: 100%;
    height: 8px;
}

.ms-marching-value {
    font-size: var(--font-size-sm);
    color: var(--accent-green);
    font-family: 'JetBrains Mono', monospace;
    font-weight: var(--font-weight-semibold);
}

.ms-heroes-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ms-heroes-row--single {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin: 0 auto;
}

.ms-hero-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: all 0.2s ease;
    min-width: 140px;
}

.ms-hero-slot--expandable {
    cursor: pointer;
}

.ms-hero-slot--expandable.ms-hero-slot--expanded {
    min-height: 350px;
}

.ms-hero-slot:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
}

.ms-hero-slot--wide {
    max-width: 300px;
    flex-direction: row;
    gap: 16px;
}

.ms-hero-slot__visual {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(13, 92, 122, 0.3);
    border: 3px solid var(--glass-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ms-hero-slot.hero-selected .ms-hero-slot__visual {
    border-color: #3182ce;
    background: rgba(49, 130, 206, 0.2);
    box-shadow: 0 0 12px rgba(49, 130, 206, 0.5);
}

/* Exquisite hero border (purple) - max level 50 */
.ms-hero-slot.hero-exquisite .ms-hero-slot__visual {
    border: 3px solid #A335EE !important;
    background: rgba(163, 53, 238, 0.15);
    box-shadow: 0 0 15px rgba(163, 53, 238, 0.6), 0 0 30px rgba(163, 53, 238, 0.3);
}

.ms-hero-slot.hero-exquisite {
    border-color: rgba(163, 53, 238, 0.5);
    background: rgba(163, 53, 238, 0.08);
}

.ms-hero-slot.hero-exquisite .ms-hero-slot__title {
    color: #A335EE;
}

/* Legendary hero border (gold) - max level 60 */
.ms-hero-slot.hero-legendary .ms-hero-slot__visual {
    border: 3px solid #E5CC80 !important;
    background: rgba(229, 204, 128, 0.15);
    box-shadow: 0 0 15px rgba(229, 204, 128, 0.6), 0 0 30px rgba(229, 204, 128, 0.3);
}

.ms-hero-slot.hero-legendary {
    border-color: rgba(229, 204, 128, 0.5);
    background: rgba(229, 204, 128, 0.08);
}

.ms-hero-slot.hero-legendary .ms-hero-slot__title {
    color: #E5CC80;
}

/* Light mode - Darker colors for better visibility */
:root:not([data-theme="dark"]) .ms-hero-slot.hero-exquisite .ms-hero-slot__title {
    color: #7B2D9E;  /* Darker purple for light mode */
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-legendary .ms-hero-slot__title {
    color: #9A7B2D;  /* Darker gold for light mode */
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-exquisite .ms-hero-level-display {
    color: #7B2D9E;
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-legendary .ms-hero-level-display {
    color: #9A7B2D;
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-exquisite {
    border-color: rgba(123, 45, 158, 0.6);
    background: rgba(123, 45, 158, 0.1);
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-legendary {
    border-color: rgba(154, 123, 45, 0.6);
    background: rgba(154, 123, 45, 0.1);
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-exquisite .ms-hero-slot__visual {
    border-color: #7B2D9E !important;
    box-shadow: 0 0 12px rgba(123, 45, 158, 0.5);
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-legendary .ms-hero-slot__visual {
    border-color: #9A7B2D !important;
    box-shadow: 0 0 12px rgba(154, 123, 45, 0.5);
}

.ms-hero-slot__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ms-hero-slot.hero-selected .ms-hero-slot__image {
    transform: scale(1.05);
}

.ms-hero-slot__image.has-hero {
    border-color: var(--primary-color);
}

.ms-hero-slot__controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: center;
}

.ms-hero-slot--wide .ms-hero-slot__controls {
    align-items: flex-start;
    flex: 1;
}

.ms-hero-slot__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
    text-align: center;
}

.ms-hero-slot--wide .ms-hero-slot__title {
    text-align: left;
}

.ms-hero-select {
    width: 100%;
    font-size: var(--font-size-xs);
    padding: 6px 8px;
}

.ms-hero-level {
    width: 60px;
    text-align: center;
    font-size: var(--font-size-sm);
}

.ms-hero-slot--wide .ms-hero-level {
    width: 80px;
}

.ms-hero-slot__bonus {
    font-size: var(--font-size-xs);
    color: var(--success-color);
    font-weight: var(--font-weight-medium);
    text-align: center;
    min-height: 18px;
    display: block;
    margin-top: 4px;
}

.ms-hero-slot__bonus:empty {
    display: none;
}

/* Hero Level Slider */
.ms-hero-slider-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.ms-hero-slider-wrapper--expandable {
    cursor: pointer;
}

.ms-hero-slider-wrapper--expandable.ms-hero-slider-wrapper--expanded {
    flex-direction: column;
}

.ms-hero-slot__picker-container {
    position: relative;
    width: 100%;
    min-height: 250px;
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
}

.ms-hero-slot__picker-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.15;
    filter: blur(8px);
}

.ms-hero-slot__picker-background img {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
}

.ms-picker-wheel-dual {
    position: relative;
    display: flex;
    width: 100%;
    height: 250px;
    z-index: 2;
    padding: 0;
    justify-content: center;
    gap: 4px;
}

.ms-picker-wheel-dual .ms-picker-wheel {
    flex: 1;
    max-width: calc(50% - 2px);
    position: relative;
}

/* Make hero picker wider and level picker narrower */
.ms-picker-wheel-dual .ms-picker-wheel--hero {
    flex: 3;
    max-width: calc(75% - 2px);
}

.ms-picker-wheel-dual .ms-picker-wheel--level {
    flex: 1;
    max-width: calc(25% - 2px);
}

.ms-picker-wheel-dual .ms-picker-wheel__column {
    width: 100%;
    max-width: 100%;
}

/* Allow text wrapping for hero names in picker wheels */
.ms-picker-wheel--hero .ms-picker-wheel__item {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    padding: 8px 4px;
    text-align: center;
    hyphens: auto;
}

/* Level picker items can stay single line */
.ms-picker-wheel--level .ms-picker-wheel__item {
    white-space: nowrap;
    font-size: 0.9em;
}

.ms-hero-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ms-hero-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.ms-hero-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.ms-hero-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Exquisite slider thumb (purple) */
.ms-hero-slot.hero-exquisite .ms-hero-slider::-webkit-slider-thumb {
    background: #A335EE;
}

.ms-hero-slot.hero-exquisite .ms-hero-slider::-moz-range-thumb {
    background: #A335EE;
}

/* Legendary slider thumb (gold) */
.ms-hero-slot.hero-legendary .ms-hero-slider::-webkit-slider-thumb {
    background: #E5CC80;
}

.ms-hero-slot.hero-legendary .ms-hero-slider::-moz-range-thumb {
    background: #E5CC80;
}

/* Light mode - Darker slider thumbs */
:root:not([data-theme="dark"]) .ms-hero-slot.hero-exquisite .ms-hero-slider::-webkit-slider-thumb {
    background: #7B2D9E;
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-exquisite .ms-hero-slider::-moz-range-thumb {
    background: #7B2D9E;
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-legendary .ms-hero-slider::-webkit-slider-thumb {
    background: #9A7B2D;
}

:root:not([data-theme="dark"]) .ms-hero-slot.hero-legendary .ms-hero-slider::-moz-range-thumb {
    background: #9A7B2D;
}

/* Disabled slider state */
.ms-hero-slider:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ms-hero-slider:disabled::-webkit-slider-thumb {
    background: #666;
    cursor: not-allowed;
}

.ms-hero-slider:disabled::-moz-range-thumb {
    background: #666;
    cursor: not-allowed;
}

.ms-hero-level-display {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    font-weight: var(--font-weight-semibold);
    min-width: 200px;
    text-align: center;
    white-space: nowrap;
}

.ms-hero-slot.hero-exquisite .ms-hero-level-display {
    color: #A335EE;
}

.ms-hero-slot.hero-legendary .ms-hero-level-display {
    color: #E5CC80;
}

.ms-heroes-aggregate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(13, 92, 122, 0.15);
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    margin-top: 20px;
}

.ms-heroes-aggregate span {
    font-size: var(--font-size-base);
    color: var(--text-color);
    font-weight: var(--font-weight-medium);
}

.ms-heroes-aggregate strong {
    font-size: var(--font-size-lg);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

/* Legacy icon style - keep for compatibility */
.ms-hero-slot__icon {
    font-size: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 92, 122, 0.2);
    border-radius: 8px;
    flex-shrink: 0;
}

.ms-hero-slot__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ms-hero-slot__hint {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-hero-input {
    width: 60px;
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .ms-heroes-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ms-heroes-row {
        grid-template-columns: 1fr;
    }
    
    .ms-hero-slot {
        padding: 10px;
    }
    
    .ms-hero-slot__icon {
        font-size: 20px;
        width: 32px;
        height: 32px;
    }
}

/* Legacy Heroes Grid (can be removed) */
.ms-heroes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding: 20px;
}

.ms-hero-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}

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

.ms-hero-item__name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
}

.ms-hero-item__position {
    font-size: var(--font-size-xs);
    color: var(--primary-color);
    background: rgba(13, 92, 122, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.ms-hero-item__level {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms-hero-item__level label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
}

.ms-hero-item__level input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: var(--font-size-sm);
}

/* Manual Total */
.ms-manual-total {
    padding: 20px;
    text-align: center;
}

.ms-manual-total label {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
    margin-bottom: 8px;
}

.ms-manual-total__hint {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 16px;
}

/* Results - Total Card */
.ms-total-card {
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.ms-total-card__main {
    margin-bottom: 20px;
}

.ms-total-card__label {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 8px;
}

.ms-total-card__value {
    display: block;
    font-size: 56px;
    font-weight: var(--font-weight-bold);
    color: var(--header-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
}

.ms-total-card__breakdown {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border);
}

.ms-breakdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ms-breakdown-item__label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
}

.ms-breakdown-item__value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

/* Recommendations Card */
.ms-recommendations-card {
    padding: 16px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .ms-recommendations-card {
        padding: 12px;
    }
}

@media (max-width: 600px) {
    .ms-recommendations-card {
        padding: 8px;
    }
}

.ms-recommendations-card__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
    margin-bottom: 4px;
}

.ms-recommendations-card__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 16px;
}

.ms-recommendations-grid {
    width: 100%;
}

/* Recommendation Visual Layout - matching Equipped Gear */
.ms-rec-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ms-rec-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ms-rec-logo {
    width: 120px;
    height: auto;
    opacity: 0.6;
}

.ms-rec-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    position: relative;
    min-height: 90px;
}

.ms-rec-slot--right .ms-rec-slot__info {
    text-align: left;
}

/* Quality-based backgrounds for recommendation slots */
.ms-rec-slot[data-quality="poor"] .ms-rec-slot__image {
    background: linear-gradient(135deg, rgba(128, 128, 128, 0.4) 0%, rgba(80, 80, 80, 0.6) 100%);
}

.ms-rec-slot[data-quality="common"] .ms-rec-slot__image {
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.3) 0%, rgba(34, 139, 34, 0.5) 100%);
}

.ms-rec-slot[data-quality="fine"] .ms-rec-slot__image {
    background: linear-gradient(135deg, rgba(0, 112, 221, 0.3) 0%, rgba(0, 70, 140, 0.5) 100%);
}

.ms-rec-slot[data-quality="exquisite"] .ms-rec-slot__image {
    background: linear-gradient(135deg, rgba(163, 53, 238, 0.3) 0%, rgba(120, 40, 180, 0.5) 100%);
}

.ms-rec-slot[data-quality="epic"] .ms-rec-slot__image {
    background: linear-gradient(135deg, rgba(255, 128, 0, 0.3) 0%, rgba(200, 100, 0, 0.5) 100%);
}

.ms-rec-slot[data-quality="legendary"] .ms-rec-slot__image {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(218, 165, 32, 0.5) 100%);
}

.ms-rec-slot--dragon {
    background: linear-gradient(135deg, rgba(255, 100, 50, 0.08) 0%, rgba(139, 69, 19, 0.12) 100%);
    border-color: rgba(255, 100, 50, 0.3);
}

.ms-rec-slot--dragon .ms-rec-slot__label {
    color: #ff6432;
}

.ms-rec-slot__progression {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.ms-rec-slot__image {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(128, 128, 128, 0.3);
    border: 3px solid var(--glass-border);
    flex-shrink: 0;
}

.ms-rec-slot__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ms-rec-slot__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.ms-rec-slot__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ms-rec-slot__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-rec-slot__quality {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Responsive for Recommendations */
@media (max-width: 1100px) {
    .ms-rec-slot {
        padding: 10px 12px;
        gap: 10px;
        min-height: 80px;
    }
    
    .ms-rec-slot__image {
        width: 60px;
        height: 60px;
    }
    
    .ms-rec-slot__name {
        font-size: 0.8rem;
    }
}

@media (max-width: 1000px) {
    .ms-rec-slot {
        padding: 8px 10px;
        min-height: 70px;
    }
    
    .ms-rec-slot__image {
        width: 50px;
        height: 50px;
    }
    
    .ms-rec-slot__label {
        font-size: 0.6rem;
    }
    
    .ms-rec-slot__name {
        font-size: 0.75rem;
    }
}

@media (max-width: 900px) {
    .ms-recommendations-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .ms-rec-center {
        display: none;
    }
    
    .ms-rec-column {
        gap: 10px;
    }
    
    .ms-rec-slot {
        padding: 10px;
        padding-top: 28px;
        gap: 8px;
        min-height: auto;
    }
    
    .ms-rec-slot__image {
        width: 50px;
        height: 50px;
    }
    
    .ms-rec-slot__progression {
        top: 6px;
        right: 6px;
        font-size: 0.6rem;
        padding: 2px 5px;
    }
    
    .ms-rec-slot__label {
        font-size: 0.6rem;
    }
    
    .ms-rec-slot__name {
        font-size: 0.7rem;
    }
    
    .ms-rec-slot__quality {
        font-size: 0.65rem;
    }
    
    .ms-rec-slot--right .ms-rec-slot__info {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .ms-recommendations-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .ms-rec-slot {
        padding: 8px;
        padding-top: 8px;
        gap: 10px;
        flex-direction: row;
        align-items: center;
    }
    
    .ms-rec-slot__image {
        width: 45px;
        height: 45px;
        flex-shrink: 0;
    }
    
    .ms-rec-slot__info {
        flex: 1;
    }
    
    .ms-rec-slot__progression {
        top: 50%;
        transform: translateY(-50%);
        right: 8px;
    }
    
    .ms-rec-slot__label {
        font-size: 0.55rem;
    }
    
    .ms-rec-slot__name {
        font-size: 0.7rem;
    }
    
    .ms-rec-slot__quality {
        font-size: 0.6rem;
    }
}

@media (max-width: 400px) {
    .ms-rec-slot__image {
        width: 35px;
        height: 35px;
    }
    
    .ms-rec-slot__progression {
        font-size: 0.55rem;
        padding: 1px 4px;
    }
}

/* ============================================
   GEAR OPTIMIZATION GUIDE
   ============================================ */

.ms-optimization-guide {
    padding: 16px 0;
    width: 100%;
    box-sizing: border-box;
}

.ms-opt-intro {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.ms-opt-intro h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.ms-opt-intro p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ms-opt-intro strong {
    color: var(--success-color);
}

.ms-opt-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.ms-opt-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.ms-opt-slot:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ms-opt-slot--optimal {
    border-color: rgba(76, 175, 80, 0.4);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(76, 175, 80, 0.02));
}

.ms-opt-slot--upgrade {
    border-color: rgba(255, 193, 7, 0.5);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 152, 0, 0.04));
}

.ms-opt-badge {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.ms-opt-badge--optimal {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.ms-opt-badge--upgrade {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.ms-opt-badge--current {
    background: rgba(158, 158, 158, 0.2);
    color: var(--text-secondary);
    border: 1px solid rgba(158, 158, 158, 0.3);
}

.ms-opt-badge--warning {
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.ms-opt-slot--downgrade {
    border-color: rgba(255, 152, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.05), rgba(255, 87, 34, 0.02));
}

.ms-opt-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-style: italic;
}

.ms-opt-current-only {
    display: flex;
    justify-content: center;
}

.ms-opt-comparison {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.ms-opt-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0 8px;
}

.ms-opt-gear {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    text-align: center;
}

/* Current gear display - label at top */
.ms-opt-gear--current {
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ms-opt-gear--current .ms-opt-gear__label {
    order: -1;
    margin-bottom: 8px;
    width: 100%;
}

.ms-opt-gear--current .ms-opt-gear__image {
    order: 0;
    margin-bottom: 8px;
}

.ms-opt-gear--current .ms-opt-gear__info {
    order: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ms-opt-gear__label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}


/* Larger images for better visibility - 80px for both current and recommended */
.ms-opt-gear__image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid;
    flex-shrink: 0;
}

/* Recommended gear - label at top */
.ms-opt-gear--recommended {
    border: 1px dashed rgba(255, 193, 7, 0.4);
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ms-opt-gear--recommended .ms-opt-gear__label {
    position: static;
    order: -1;
    margin-bottom: 8px;
    width: 100%;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 193, 7, 0.9);
}

.ms-opt-gear--recommended .ms-opt-gear__image {
    margin-left: 0;
    order: 0;
    margin-bottom: 8px;
}

.ms-opt-gear--recommended .ms-opt-gear__info {
    order: 1;
    width: 100%;
    padding-right: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ms-opt-gear__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ms-opt-gear__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ms-opt-gear__name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.ms-opt-gear__quality {
    font-size: 0.65rem;
}

.ms-opt-gear__value {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.ms-opt-gear__effective {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--success-color);
}

.ms-opt-gear__note {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
}

.ms-opt-breakeven__info {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-align: center;
}

.ms-opt-breakeven__info strong {
    color: #FF9800;
}

/* Breakeven Bar */
.ms-opt-breakeven {
    margin-bottom: 12px;
}

.ms-opt-breakeven__bar {
    height: 8px;
    background: rgba(100, 100, 100, 0.3);
    border-radius: 4px;
    position: relative;
    overflow: visible;
    margin-bottom: 6px;
}

.ms-opt-breakeven__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color), #8BC34A);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.ms-opt-breakeven__marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    background: #FF9800;
    border-radius: 1px;
    transform: translateX(-50%);
}

.ms-opt-breakeven__marker::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #FF9800;
}

.ms-opt-breakeven__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

/* Requirements List */
.ms-opt-requirements {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px;
}

.ms-opt-req-header {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.ms-opt-req-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ms-opt-req-item {
    display: grid;
    grid-template-columns: 16px 1fr auto auto;
    gap: 8px;
    align-items: center;
    font-size: 0.7rem;
    padding: 4px 6px;
    border-radius: 4px;
}

.ms-opt-req-item--beats {
    background: rgba(76, 175, 80, 0.1);
}

.ms-opt-req-item--fails {
    background: rgba(244, 67, 54, 0.1);
    opacity: 0.7;
}

.ms-opt-req-check {
    font-weight: bold;
}

.ms-opt-req-item--beats .ms-opt-req-check {
    color: var(--success-color);
}

.ms-opt-req-item--fails .ms-opt-req-check {
    color: #F44336;
}

.ms-opt-req-value {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.ms-opt-req-diff {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.ms-opt-req-item--beats .ms-opt-req-diff {
    color: var(--success-color);
}

.ms-opt-req-item--fails .ms-opt-req-diff {
    color: #F44336;
}

/* Summary Section */
.ms-opt-summary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
}

.ms-opt-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.ms-opt-summary__row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ms-opt-summary__row--gain {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid rgba(76, 175, 80, 0.3);
}

.ms-opt-summary__value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.ms-opt-summary__value--optimized {
    color: var(--primary-color);
}

.ms-opt-summary__value--gain {
    color: var(--success-color);
    font-size: 1.1rem;
}

.ms-opt-summary__row--loss .ms-opt-summary__value--loss {
    color: #f44336;
}

/* Projected total row */
.ms-opt-summary__row--total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid rgba(var(--accent-rgb), 0.4);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
    padding: 12px;
    border-radius: 8px;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -12px;
}

.ms-opt-summary__value--total {
    color: var(--accent-color);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Same as equipped state */
.ms-opt-slot--same {
    border-color: rgba(158, 158, 158, 0.4);
    background: linear-gradient(135deg, rgba(158, 158, 158, 0.05), rgba(128, 128, 128, 0.02));
}

.ms-opt-badge--same {
    background: rgba(158, 158, 158, 0.2);
    color: var(--text-secondary);
    border: 1px solid rgba(158, 158, 158, 0.4);
}

.ms-opt-badge--downgrade {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.ms-opt-badge--optimal {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.ms-opt-slot--optimal {
    border-color: rgba(76, 175, 80, 0.3);
}

/* Title Section Styles */
.ms-opt-title-section {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-sizing: border-box;
}

.ms-opt-title-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.ms-opt-title-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.ms-opt-title-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ms-opt-title-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ms-opt-title-controls label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ms-opt-title-select {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.ms-opt-title-bonus {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 8px;
}

.ms-opt-title-bonus__label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ms-opt-title-bonus__value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--success-color);
}

.ms-opt-base-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ms-opt-base-info strong {
    color: var(--primary-color);
    font-weight: 600;
}

/* Header with gain display */
.ms-opt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.ms-opt-header__title {
    flex-shrink: 0;
}

.ms-opt-header__gain {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.ms-opt-gain--positive {
    color: var(--success-color);
    background: rgba(76, 175, 80, 0.15);
}

.ms-opt-gain--negative {
    color: #f44336;
    background: rgba(244, 67, 54, 0.15);
}

.ms-opt-gain--neutral {
    color: var(--text-muted);
    background: rgba(158, 158, 158, 0.15);
}

/* Interactive Gear Select in Recommended Section */
.ms-opt-gear-select {
    width: 100%;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    margin-bottom: 8px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ms-opt-gear-select:hover,
.ms-opt-gear-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.ms-opt-gear__selectors {
    display: flex;
    gap: 8px;
    width: 100%;
}

.ms-opt-level-select,
.ms-opt-quality-select {
    flex: 1;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    min-width: 0;
}

.ms-opt-level-select:hover,
.ms-opt-quality-select:hover,
.ms-opt-level-select:focus,
.ms-opt-quality-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Min Requirements Row - Redesigned */
.ms-opt-minreqs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ms-opt-minreqs__label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ms-opt-minreqs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ms-opt-minreq {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: help;
    border: 1px solid;
    position: relative;
}

.ms-opt-minreq__level {
    font-weight: 600;
    color: var(--text-primary);
}

.ms-opt-minreq__quality {
    font-weight: 500;
}

.ms-opt-minreq__check {
    font-size: 0.65rem;
    margin-left: 2px;
    color: var(--success-color);
}

/* Responsive Optimization Guide */
@media (max-width: 1000px) {
    .ms-opt-slots {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .ms-opt-comparison {
        flex-direction: row;
        gap: 8px;
    }
    
    .ms-opt-vs {
        padding: 4px 8px;
        font-size: 1rem;
    }
    
    .ms-opt-gear {
        flex: 1;
        flex-direction: column;
        text-align: center;
        padding: 10px;
        min-width: 0;
    }
    
    .ms-opt-gear__label {
        margin-bottom: 6px;
        font-size: 0.6rem;
    }
    
    .ms-opt-gear__info {
        width: 100%;
    }
    
    .ms-opt-gear__image {
        width: 70px;
        height: 70px;
        margin-bottom: 8px;
    }
    
    .ms-opt-gear--recommended .ms-opt-gear__image {
        width: 70px;
        height: 70px;
        margin-bottom: 8px;
    }
    
    .ms-opt-title-card {
        flex-wrap: wrap;
    }
    
    .ms-opt-title-select {
        max-width: 100%;
    }
    
    .ms-opt-title-bonus {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 8px;
    }
    
    .ms-opt-header {
        font-size: 0.75rem;
    }
    
    .ms-opt-header__gain {
        font-size: 0.7rem;
    }
}

@media (max-width: 600px) {
    .ms-optimization-guide {
        padding: 10px;
    }
    
    .ms-opt-intro h3 {
        font-size: 1rem;
    }
    
    .ms-opt-intro p {
        font-size: 0.75rem;
    }
    
    .ms-opt-slot {
        padding: 10px;
    }
    
    .ms-opt-header {
        font-size: 0.7rem;
        gap: 6px;
    }
    
    .ms-opt-header__gain {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    
    .ms-opt-comparison {
        flex-direction: column;
        gap: 8px;
    }
    
    .ms-opt-gear {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }
    
    .ms-opt-gear--current {
        flex-direction: column;
        text-align: center;
    }
    
    .ms-opt-gear--current .ms-opt-gear__label {
        order: -1;
        margin-bottom: 6px;
        width: 100%;
    }
    
    .ms-opt-gear--current .ms-opt-gear__image {
        order: 0;
        margin-bottom: 8px;
    }
    
    .ms-opt-gear--current .ms-opt-gear__info {
        order: 1;
        width: 100%;
    }
    
    .ms-opt-gear__image {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        margin-bottom: 8px;
    }
    
    .ms-opt-gear--recommended {
        flex-direction: column;
        text-align: center;
    }
    
    .ms-opt-gear--recommended .ms-opt-gear__label {
        position: static;
        order: -1;
        margin-bottom: 8px;
        width: 100%;
    }
    
    .ms-opt-gear--recommended .ms-opt-gear__image {
        margin-left: 0;
        order: 0;
        width: 60px;
        height: 60px;
        margin-bottom: 8px;
    }
    
    .ms-opt-gear--recommended .ms-opt-gear__info {
        order: 1;
        padding-right: 0;
        width: 100%;
    }
    
    .ms-opt-gear__name {
        font-size: 0.7rem;
    }
    
    .ms-opt-gear__label {
        font-size: 0.6rem;
    }
    
    .ms-opt-gear__effective {
        font-size: 0.75rem;
    }
    
    .ms-opt-vs {
        padding: 2px 0;
        font-size: 0.8rem;
    }
    
    .ms-opt-summary {
        padding: 10px;
    }
    
    .ms-opt-summary__row {
        font-size: 0.75rem;
    }
    
    .ms-opt-summary__value {
        font-size: 0.85rem;
    }
    
    .ms-opt-title-section {
        padding: 10px;
    }
    
    .ms-opt-title-card {
        gap: 8px;
    }
    
    .ms-opt-title-icon {
        width: 35px;
        height: 35px;
    }
    
    .ms-opt-title-controls label {
        font-size: 0.65rem;
    }
    
    .ms-opt-title-select {
        font-size: 0.8rem;
        padding: 6px 8px;
    }
    
    .ms-opt-gear-select {
        font-size: 0.75rem;
        padding: 6px 8px;
    }
    
    .ms-opt-gear__selectors {
        flex-direction: row;
        gap: 6px;
    }
    
    .ms-opt-level-select,
    .ms-opt-quality-select {
        font-size: 0.7rem;
        padding: 5px 6px;
    }
    
    .ms-opt-minreqs {
        gap: 6px;
        padding-top: 8px;
        margin-top: 8px;
    }
    
    .ms-opt-minreqs__label {
        font-size: 0.6rem;
    }
    
    .ms-opt-minreqs__list {
        gap: 4px;
    }
    
    .ms-opt-minreq {
        font-size: 0.6rem;
        padding: 3px 6px;
        gap: 3px;
    }
    
    .ms-opt-minreq__check {
        font-size: 0.55rem;
    }
}

@media (max-width: 400px) {
    .ms-opt-slot {
        padding: 10px;
    }
    
    .ms-opt-header {
        font-size: 0.7rem;
        gap: 4px;
    }
    
    .ms-opt-badge {
        font-size: 0.6rem;
        padding: 3px 6px;
    }
    
    .ms-opt-gear__label {
        font-size: 0.6rem;
        margin-bottom: 6px;
    }
    
    .ms-opt-gear__image {
        width: 55px;
        height: 55px;
        margin-bottom: 6px;
    }
    
    .ms-opt-gear--recommended .ms-opt-gear__image {
        width: 55px;
        height: 55px;
        margin-bottom: 6px;
    }
    
    .ms-opt-gear__name {
        font-size: 0.7rem;
        line-height: 1.3;
    }
    
    .ms-opt-gear-select {
        font-size: 0.7rem;
        padding: 6px 8px;
        margin-bottom: 6px;
    }
    
    .ms-opt-level-select,
    .ms-opt-quality-select {
        font-size: 0.65rem;
        padding: 5px 6px;
    }
    
    .ms-opt-gear__effective {
        font-size: 0.7rem;
    }
    
    .ms-opt-comparison {
        gap: 8px;
    }
}

/* Legacy recommendation item styles (kept for compatibility) */
.ms-recommendation-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.ms-recommendation-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.ms-recommendation-item.is-suggestion {
    border-style: dashed;
    opacity: 0.8;
}

.ms-recommendation-item__image {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid var(--glass-border);
    flex-shrink: 0;
}

.ms-recommendation-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ms-recommendation-item__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ms-recommendation-item__slot {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ms-recommendation-item__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-recommendation-item__quality {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.ms-recommendation-item__badge {
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(79, 195, 247, 0.2);
    color: var(--primary-color);
    border-radius: 4px;
    align-self: flex-start;
    margin-top: 4px;
}

.ms-recommendation-item__stats-inline {
    display: flex;
    gap: 8px;
    font-size: var(--font-size-xs);
    color: var(--success-color);
    font-weight: var(--font-weight-semibold);
}

.ms-recommendation-item__stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
}

.ms-recommendation-item__stat {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
}

.ms-recommendation-item__stat-label {
    color: var(--text-color);
    opacity: 0.7;
}

.ms-recommendation-item__stat-value {
    color: var(--success-color);
    font-weight: var(--font-weight-semibold);
}

/* Breakdown Chart */
.ms-breakdown-card {
    padding: 20px;
}

.ms-breakdown-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--header-color);
    margin-bottom: 20px;
}

.ms-breakdown-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ms-chart-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ms-chart-bar__label {
    min-width: 100px;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.ms-chart-bar__track {
    flex: 1;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.ms-chart-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #4fc3f7);
    border-radius: 12px;
    transition: width 0.5s ease;
}

.ms-chart-bar__value {
    min-width: 70px;
    text-align: right;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

/* March Size Navigation */
.ms-navigation {
    margin-top: 24px;
}

/* Dark Mode Adjustments for March Size */
[data-theme="dark"] .ms-scenario-card.active {
    background: rgba(79, 195, 247, 0.1);
    border-color: var(--primary-color);
}

[data-theme="dark"] .ms-scenario-section__title {
    color: var(--text-color);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .ms-modifier-item {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .ms-modifier-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .ms-research-item {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .ms-research-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .ms-hero-item {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .ms-recommendation-item {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .ms-recommendation-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Responsive for Gear Visual Layout */
@media (max-width: 1100px) {
    .ms-gear-slot-visual {
        max-width: 360px;
    }
    
    .ms-gear-slot-visual__image {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 1000px) {
    .ms-gear-slot-visual {
        max-width: 320px;
        padding: 12px;
        gap: 12px;
    }
    
    .ms-gear-slot-visual__image {
        width: 80px;
        height: 80px;
    }
    
    .ms-gear-slot-visual__label {
        font-size: 0.7rem;
    }
}

@media (max-width: 900px) {
    .ms-gear-visual {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 16px;
    }

    .ms-gear-center {
        display: none;
    }

    .ms-gear-column {
        gap: 10px;
    }

    .ms-gear-column--left,
    .ms-gear-column--right {
        align-items: stretch;
    }

    .ms-gear-slot-visual {
        max-width: none;
        width: 100%;
        min-height: auto;
        padding: 12px;
        padding-top: 36px;
        gap: 8px;
        flex-direction: row;
        align-items: flex-start;
    }

    .ms-gear-slot-visual__image {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .ms-gear-slot-visual__info {
        flex: 1;
        min-width: 0;
    }

    .ms-gear-slot-visual__label {
        font-size: 0.65rem;
        margin-bottom: 4px;
    }

    .ms-gear-slot-visual__select {
        font-size: 0.7rem;
        padding: 5px 6px;
        width: 100%;
    }

    .ms-gear-slot-visual__row {
        gap: 4px;
        flex-wrap: wrap;
    }

    .ms-gear-slot-visual__level-select,
    .ms-gear-slot-visual__quality {
        font-size: 0.65rem;
        padding: 4px 5px;
        flex: 1;
        min-width: 60px;
    }

    .ms-gear-slot-visual__bonus {
        font-size: 0.7rem;
        padding: 3px 8px;
        top: 8px;
        right: 8px;
    }
}

@media (max-width: 600px) {
    .ms-gear-visual {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }

    .ms-gear-slot-visual {
        flex-direction: row;
        align-items: center;
        padding: 8px;
        gap: 10px;
    }

    .ms-gear-slot-visual__image {
        position: static;
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .ms-gear-slot-visual__info {
        padding-left: 0;
        min-height: auto;
        flex: 1;
    }

    .ms-gear-slot-visual__label {
        font-size: 0.6rem;
    }

    .ms-gear-slot-visual__select {
        font-size: 0.7rem;
        padding: 4px 6px;
    }

    .ms-gear-slot-visual__row {
        flex-direction: row;
        gap: 4px;
    }

    .ms-gear-slot-visual__level-select,
    .ms-gear-slot-visual__quality {
        font-size: 0.65rem;
        padding: 3px 4px;
        flex: 1;
    }

    .ms-gear-slot-visual__bonus {
        font-size: 0.6rem;
        padding: 2px 4px;
        top: 4px;
        right: 4px;
    }
}

@media (max-width: 400px) {
    .ms-gear-slot-visual__image {
        width: 35px;
        height: 35px;
    }

    .ms-gear-slot-visual__row {
        flex-direction: column;
        gap: 3px;
    }

    .ms-gear-slot-visual__level-select,
    .ms-gear-slot-visual__quality {
        width: 100%;
    }
}

/* Responsive for March Size */
@media (max-width: 600px) {
    .calculator-mode-selector {
        flex-direction: column;
    }
    
    .ms-scenario-section {
        margin-bottom: 20px;
    }
    
    .ms-scenario-section__title {
        font-size: var(--font-size-md);
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    
    .ms-scenario-section__title svg {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }
    
    .ms-scenario-section__icon {
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }
    
    .ms-scenario-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .ms-scenario-card {
        padding: 8px 10px;
    }
    
    .ms-scenario-card__icon {
        width: 52px;
        height: 52px;
    }
    
    .ms-scenario-card__content h3 {
        font-size: 11px;
    }
    
    .ms-total-card__value {
        font-size: 40px;
    }
    
    .ms-total-card__breakdown {
        flex-direction: column;
        gap: 16px;
    }
    
    .ms-gear-grid {
        grid-template-columns: 1fr;
    }
    
    .ms-gear-slot__selects {
        flex-direction: column;
    }
    
    .ms-gear-slot__quality {
        min-width: auto;
    }
}

@media (max-width: 400px) {
    .calc-mode-btn {
        font-size: var(--font-size-sm);
        padding: 10px 12px;
    }
    
    .calc-mode-btn svg {
        display: none;
    }
}

/* ============================================
   March Size Calculator - Mobile Enhancements
   ============================================ */

/* Tablet breakpoint (768px) */
@media (max-width: 768px) {
    .ms-account-config {
        padding: 16px 12px;
    }
    
    .ms-base-total {
        padding: 16px;
    }
    
    .ms-base-total__value {
        font-size: 32px;
    }
    
    .ms-marching-hero-container {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .ms-marching-hero__controls {
        align-items: center;
    }
    
    .ms-marching-hero__controls label {
        text-align: center;
    }
}

/* Mobile breakpoint (600px) */
@media (max-width: 600px) {
    .ms-scenario-section__title {
        font-size: var(--font-size-base);
    }
    
    .ms-scenario-card__icon {
        width: 48px;
        height: 48px;
    }
    
    .ms-rising-adventurer-card {
        padding: 10px 12px;
        max-width: 100%;
    }
    
    .ms-rising-adventurer-header {
        gap: 8px;
        margin-bottom: 10px;
    }
    
    .ms-rising-adventurer-title {
        font-size: 13px;
    }
    
    .ms-rising-adventurer-bonus {
        font-size: 12px;
    }
    
    .ms-hero-deck {
        gap: 4px;
        padding: 8px 6px;
    }
    
    .ms-hero-deck__portrait {
        width: 36px;
        height: 36px;
        border-width: 1.5px;
    }
    
    .ms-hall-controls {
        max-width: 100%;
    }
    
    .ms-hall-value {
        min-width: 140px;
        font-size: 10px;
    }
    
    .ms-marching-hero__visual {
        width: 64px;
        height: 64px;
    }
    
    .ms-marching-value {
        font-size: var(--font-size-xs);
    }
    
    .ms-hero-slot {
        min-width: auto;
        padding: 10px 8px;
    }
    
    .ms-hero-slot__visual {
        width: 52px;
        height: 52px;
    }
    
    .ms-hero-level-display {
        min-width: auto;
        font-size: 10px;
    }
    
    .ms-heroes-aggregate {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 12px;
    }
    
    .ms-category-total {
        font-size: 10px;
    }
    
    .ms-section-description {
        font-size: 11px;
    }
}

/* Small mobile breakpoint (480px) */
@media (max-width: 480px) {
    .ms-account-config__title {
        font-size: var(--font-size-lg);
    }
    
    .ms-base-total__value {
        font-size: 28px;
        letter-spacing: -1px;
    }
    
    .ms-base-total__label {
        font-size: var(--font-size-xs);
    }
    
    .ms-scenario-card {
        padding: 8px 10px;
        gap: 8px;
    }
    
    .ms-scenario-card__icon {
        width: 40px;
        height: 40px;
    }
    
    .ms-scenario-card__overlay span {
        font-size: 9px;
        padding: 4px 8px;
    }
    
    .ms-hero-deck__portrait {
        width: 32px;
        height: 32px;
        border-radius: 4px;
    }
    
    .ms-hero-deck__portrait[data-hero]:hover::before {
        font-size: 9px;
        padding: 3px 6px;
    }
    
    .accordion-toggle {
        padding: 1px;
        font-size: var(--font-size-sm);
    }
    
    .ms-section-total {
        margin-right: 0px;
    }

    
    .ms-heroes-category {
        padding: 12px;
    }
    
    .ms-heroes-category__title {
        font-size: var(--font-size-sm);
        flex-wrap: wrap;
    }
    
    .ms-hero-select {
        font-size: 10px;
        padding: 5px 6px;
    }
    
    .ms-hero-slider-wrapper {
        gap: 3px;
    }
}

/* Extra small mobile (360px) */
@media (max-width: 360px) {
    .ms-hero-deck__portrait {
        width: 28px;
        height: 28px;
        gap: 3px;
    }
    
    .ms-rising-adventurer-title {
        font-size: 12px;
    }
    
    .ms-scenario-card__content h3 {
        font-size: 10px;
    }
    
    .ms-base-total__value {
        font-size: 24px;
    }
}

/* ============================================
   STORAGE BUTTONS & NOTIFICATIONS
   ============================================ */

/* Header Storage Trigger */
.ms-storage-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms-storage-trigger button {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ms-storage-trigger button:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.ms-storage-trigger svg {
    width: 18px;
    height: 18px;
}

.ms-storage-trigger #msSaveConfigHeader svg {
    fill: var(--success-color);
}

.ms-storage-trigger #msSaveConfigHeader:hover {
    border-color: var(--success-color);
}

.ms-storage-trigger #msExportConfigHeader svg {
    fill: #2196F3;
}

.ms-storage-trigger #msExportConfigHeader:hover {
    border-color: #2196F3;
}

.ms-storage-trigger #msImportConfigHeader svg {
    fill: #FF9800;
}

.ms-storage-trigger #msImportConfigHeader:hover {
    border-color: #FF9800;
}

/* Storage Notification Toast */
.ms-storage-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.ms-storage-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.ms-storage-notification__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 600;
}

.ms-storage-notification__message {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.ms-storage-notification--success .ms-storage-notification__icon {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
}

.ms-storage-notification--error .ms-storage-notification__icon {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.ms-storage-notification--info .ms-storage-notification__icon {
    background: rgba(33, 150, 243, 0.2);
    color: #2196F3;
}

/* Responsive storage notification */
@media (max-width: 600px) {
    .ms-storage-notification {
        left: 20px;
        right: 20px;
        bottom: 10px;
    }
    
    .ms-storage-trigger {
        gap: 4px;
    }
    
    .ms-storage-trigger button {
        padding: 6px;
    }
    
    .ms-storage-trigger svg {
        width: 14px;
        height: 14px;
    }
}