:root {
            --bg-color: #121212;
            --panel-bg: #1e1e1e;
            --gold: #d4af37;
            --gold-dim: #8a7322;
            --text: #e0e0e0;
            --border: #333;
        }

        .shared-market-progress {
            width: 100%;
            margin-top: 12px;
            padding: 12px;
            border: 1px solid var(--gold-dim);
            border-radius: 8px;
            background: #171717;
            box-sizing: border-box;
        }
        .shared-market-progress[hidden] { display: none; }
        .shared-market-progress-heading {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 8px;
            color: var(--text);
            font-size: 13px;
        }
        #sharedMarketProgressBar {
            display: block;
            width: 100%;
            height: 12px;
            accent-color: var(--gold);
        }
        #sharedMarketProgressBar.is-stalled { accent-color: #f87171; }
        #sharedMarketProgressHint {
            margin: 8px 0 0;
            color: #aaa;
            font-size: 12px;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text);
            margin: 0;
            padding: 20px;
        }

        h1, h2, h3 { color: var(--gold); }

        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 16px;
        }
        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: max-content;
        }
        .brand h1 {
            margin: 8px 0;
        }
        .brand-mark {
            color: var(--gold);
            font-size: 26px;
        }
        .header-item-search {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            width: min(520px, 48vw);
        }
        .header-item-search label {
            margin-bottom: 2px;
            color: var(--gold);
            font-size: 12px;
            font-weight: bold;
        }
        .header-item-search input {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 12px;
            margin: 0;
        }
        .header-search-results {
            position: absolute;
            z-index: 1100;
            top: calc(100% + 3px);
            right: 0;
            left: 0;
            display: grid;
            grid-template-columns: 1fr;
            max-height: min(55vh, 420px);
            padding: 5px;
            overflow-y: auto;
            border: 1px solid var(--gold-dim);
            border-radius: 6px;
            background: #1b1b1b;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65);
        }
        .header-search-results[hidden] {
            display: none;
        }
        .market-price-alerts {
            margin: 0 0 14px;
            padding: 10px 14px;
            border: 1px solid #b7791f;
            border-radius: 6px;
            background: #33250f;
            color: #f6c453;
            font-size: 13px;
        }
        .market-price-alerts[hidden] {
            display: none;
        }
        .market-price-alert-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 5px;
        }
        .market-price-alert-link,
        .market-price-alert-dismiss {
            margin: 0;
            padding: 2px 4px;
            border: 0;
            background: transparent;
            text-align: left;
            cursor: pointer;
        }
        .market-price-alert-link {
            color: #ffe29a;
        }
        .market-price-alert-dismiss {
            flex: 0 0 auto;
            color: #aaa;
            text-decoration: underline;
        }
        .market-item-page-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .market-item-page-heading h2,
        .market-item-page-heading p {
            margin-bottom: 6px;
        }

        /* Navigation / Onglets */
        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--gold-dim);
            padding-bottom: 10px;
            flex-wrap: wrap;
        }

        .tab-btn {
            background: var(--panel-bg);
            color: var(--text);
            border: 1px solid var(--border);
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px 5px 0 0;
            transition: 0.3s;
        }

        .tab-btn:hover { background: #2a2a2a; }
        .tab-btn.active { background: var(--gold-dim); color: #fff; border-color: var(--gold); }

        .tab-content { display: none; }
        .tab-content.active { display: block; }

        /* Panneaux et Formulaires */
        .panel {
            background: var(--panel-bg);
            padding: 20px;
            border-radius: 8px;
            border: 1px solid var(--border);
            margin-bottom: 20px;
        }

        input, select, button {
            background: #2a2a2a;
            color: white;
            border: 1px solid var(--border);
            padding: 8px;
            border-radius: 4px;
            margin: 5px 0;
        }
        
        input[type="color"] { padding: 0; height: 35px; width: 50px; }

        button.action-btn {
            background: var(--gold-dim);
            color: white;
            border: 1px solid var(--gold);
            cursor: pointer;
            padding: 8px 15px;
            font-weight: bold;
        }
        button.action-btn:hover { background: var(--gold); color: #000; }

        button.danger-btn {
            background: #5a1a1a; border-color: #ff4444; color: white; cursor: pointer; border-radius: 4px;
        }
        button.danger-btn:hover { background: #ff4444; color: #fff; }
        
        button.edit-btn {
            background: #2a4b7c; border-color: #3b82f6; color: white; cursor: pointer; border-radius: 4px;
        }
        button.edit-btn:hover { background: #3b82f6; color: #fff; }

        /* Modal d'?dition */
        .modal {
            display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.7); align-items: center; justify-content: center;
        }
        .modal.show { display: flex; }
        .modal-content {
            background: var(--panel-bg); padding: 25px; border: 1px solid var(--gold);
            border-radius: 8px; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: 0 5px 20px rgba(0,0,0,0.9);
        }

        /* Table / Encyclop?die */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        .data-table th {
            background: #111;
            color: var(--gold);
            text-align: left;
            padding: 12px;
            border-bottom: 2px solid var(--gold-dim);
        }
        .data-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--border);
            vertical-align: middle;
        }
        .data-table tr:hover { background: #2a2a2a; }
        .data-table img { width: 40px; height: 40px; border-radius: 4px; background: #000; vertical-align: middle; }
        
        .badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }

        /* Custom Dropdown (Images + Couleurs) */
        .custom-select { position: relative; display: inline-block; width: 100%; user-select: none; }
        .select-selected { 
            background: #2a2a2a; color: white; padding: 8px 12px; border: 1px solid var(--border); 
            border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 10px; 
            min-height: 24px;
        }
        .select-selected img { width: 28px; height: 28px; border-radius: 4px; background: #000; }
        .select-items { 
            position: absolute; background: #1e1e1e; border: 1px solid var(--gold-dim); 
            border-radius: 4px; z-index: 99; top: 100%; left: 0; right: 0; 
            max-height: 250px; overflow-y: auto; display: none; margin-top: 2px;
            box-shadow: 0px 4px 12px rgba(0,0,0,0.8);
        }
        .select-items.select-show { display: block; }
        .select-search-input {
            position: sticky;
            top: 0;
            z-index: 3;
            width: 100%;
            box-sizing: border-box;
            border-radius: 0;
            border-width: 0 0 1px;
            border-color: var(--gold-dim);
            background: #252525;
        }
        .searchable-select-items .select-group-label { top: 39px; }
        .od-select-items {
            top: auto;
            bottom: calc(100% + 2px);
            margin-top: 0;
        }
        .select-item { 
            padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; 
            border-bottom: 1px solid #333; transition: 0.2s; font-weight: bold;
        }
        .select-item:hover { background: #333; }
        .select-item img { width: 32px; height: 32px; border-radius: 4px; background: #000; }
        .select-group-label { 
            padding: 6px 12px; background: #111; font-weight: bold; font-size: 12px; 
            color: var(--gold); text-transform: uppercase; position: sticky; top: 0; z-index: 2;
            border-bottom: 1px solid var(--gold-dim);
        }
        .chart-range-buttons {
            display: flex;
            gap: 6px;
        }
        .chart-range-btn {
            padding: 7px 10px;
            font-size: 12px;
        }
        .chart-range-btn.active {
            background: var(--gold-dim);
            border-color: var(--gold);
            color: #fff;
        }
        .market-stat-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 12px;
            margin: 18px 0;
        }
        .market-stat-card {
            display: flex;
            flex-direction: column;
            gap: 7px;
            padding: 15px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: #171717;
        }
        .market-stat-card > span,
        .market-item-detail-grid > div > span {
            color: #aaa;
            font-size: 12px;
        }
        .market-stat-card strong {
            color: var(--gold);
            font-size: 20px;
        }
        .market-stat-card small {
            color: #777;
            font-size: 11px;
        }
        .market-global-chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 22px;
        }
        .market-global-chart-header h3 {
            margin: 0;
        }
        .market-chart-status,
        .market-empty {
            color: #aaa;
            font-size: 13px;
        }
        .market-chart-container {
            height: 360px;
            box-sizing: border-box;
            padding: 18px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: #1a1a1a;
        }
        .market-chart-container[hidden] {
            display: none;
        }
        .market-movers {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 18px;
            margin-top: 22px;
        }
        .market-mover-column {
            min-width: 0;
        }
        .market-mover-column h3 {
            margin: 0 0 8px;
        }
        .market-mover-row {
            display: grid;
            grid-template-columns: minmax(100px, 1fr) auto auto;
            align-items: center;
            gap: 10px;
            width: 100%;
            margin: 0;
            padding: 9px 10px;
            border: 1px solid #333;
            border-radius: 4px;
            background: #181818;
            text-align: left;
            cursor: pointer;
        }
        .market-mover-row:hover,
        .market-item-search-result:hover,
        .market-item-search-result[aria-selected="true"] {
            border-color: var(--gold-dim);
            background: #242424;
        }
        .market-mover-name,
        .market-search-result-name {
            overflow: hidden;
            font-weight: bold;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .market-empty {
            margin: 8px 0;
        }
        .market-item-search-label {
            display: block;
            margin: 16px 0 5px;
            color: var(--gold);
            font-weight: bold;
        }
        .market-item-search {
            width: 100%;
            max-width: 720px;
            box-sizing: border-box;
            padding: 11px;
        }
        .market-item-search-results {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 6px;
            max-height: 300px;
            overflow-y: auto;
            margin-top: 8px;
        }
        .market-item-search-result {
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr);
            align-items: center;
            column-gap: 9px;
            width: 100%;
            margin: 0;
            padding: 7px;
            border: 1px solid #333;
            border-radius: 5px;
            background: #181818;
            text-align: left;
            cursor: pointer;
        }
        .market-item-search-result img {
            grid-row: span 2;
            width: 36px;
            height: 36px;
            border-radius: 4px;
            background: #000;
            object-fit: contain;
        }
        .market-search-result-meta {
            overflow: hidden;
            color: #888;
            font-size: 11px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .market-item-details {
            margin-top: 20px;
            padding-top: 18px;
            border-top: 1px solid #333;
        }
        .market-item-details[hidden] {
            display: none;
        }
        .market-item-detail-header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 16px;
        }
        .market-item-detail-image {
            display: grid;
            width: 64px;
            height: 64px;
            flex: 0 0 64px;
            place-items: center;
            border: 1px solid;
            border-radius: 7px;
            background-color: #111;
        }
        .market-item-detail-image img {
            width: 56px;
            height: 56px;
            object-fit: contain;
        }
        .market-item-detail-header h3 {
            margin: 0 0 5px;
        }
        .market-item-detail-header span {
            color: #aaa;
            font-size: 12px;
        }
        .market-item-detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 8px;
        }
        .market-item-detail-grid > div {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
            padding: 11px;
            border: 1px solid #333;
            border-radius: 5px;
            background: #181818;
        }
        .market-item-detail-grid strong {
            overflow-wrap: anywhere;
        }
        .market-item-preferences {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin: 16px 0;
            padding: 12px;
            border: 1px solid #333;
            border-radius: 6px;
            background: #181818;
        }
        .market-favorite-toggle[aria-pressed="true"] {
            color: #111;
            background: var(--gold);
        }
        .market-price-alert-setting {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            color: #ddd;
            font-size: 13px;
        }
        .market-price-alert-setting input {
            width: 145px;
            box-sizing: border-box;
        }
        .market-price-alert-hint {
            flex-basis: 100%;
            margin: 0;
            color: #888;
            font-size: 11px;
        }
        .market-item-period-stats {
            margin-top: 18px;
        }
        .market-item-period-stats h3 {
            margin-bottom: 10px;
        }
        .market-item-detail-updated {
            color: #777;
            font-size: 11px;
        }
        .profitability-table-wrapper {
            overflow-x: auto;
        }
        .profitability-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1020px;
        }
        .profitability-table th,
        .profitability-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #333;
            text-align: right;
            white-space: nowrap;
        }
        .profitability-table th:nth-child(2),
        .profitability-table td:nth-child(2) {
            text-align: left;
        }
        .profitability-table th {
            color: var(--gold);
            background: #151515;
        }
        .profitability-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .profitability-item-link {
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }
        .profitability-item-link:hover > span:last-child {
            text-decoration: underline;
        }
        .profitability-item-link:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
        }
        .profitability-item img {
            width: 32px;
            height: 32px;
            object-fit: contain;
            border-radius: 4px;
        }
        .profit-positive { color: #4ade80; font-weight: bold; }
        .profit-negative { color: #f87171; }
        .profitability-empty {
            padding: 24px !important;
            color: #888;
            text-align: center !important;
        }
        .profitability-budget {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 18px;
        }
        .profitability-budget label {
            color: var(--gold);
            font-weight: bold;
        }
        .profitability-budget input {
            width: min(260px, 55vw);
            box-sizing: border-box;
        }
        .profitability-budget img {
            width: 22px;
            height: 22px;
            object-fit: contain;
        }
        .profitability-budget .action-btn.active {
            background: var(--gold-dim);
            border-color: var(--gold);
            color: #fff;
        }
        .profitability-outlier-setting {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #ddd;
        }
        .profitability-outlier-setting input {
            width: 100px;
            box-sizing: border-box;
        }
        .profitability-outlier-details[hidden] { display: none; }
        .profitability-outliers-modal { max-width: 1000px; }
        .profitability-outliers-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
        .profitability-outliers-heading h2 { margin-top: 0; }
        .profitability-outliers-description {
            color: #aaa;
            font-size: 13px;
        }
        .profitability-outliers-table-wrapper { overflow-x: auto; }
        .profitability-outliers-table {
            width: 100%;
            min-width: 680px;
            border-collapse: collapse;
        }
        .profitability-outliers-table th,
        .profitability-outliers-table td {
            padding: 10px;
            border-bottom: 1px solid var(--border);
            text-align: left;
            white-space: nowrap;
        }
        .profitability-outliers-table th {
            color: var(--gold);
            background: #151515;
        }
        .profitability-outlier-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: inherit;
            text-decoration: none;
        }
        .profitability-outlier-item:hover { text-decoration: underline; }
        .profitability-outlier-item img {
            width: 32px;
            height: 32px;
            object-fit: contain;
            border-radius: 4px;
        }
        @media (max-width: 700px) {
            .profitability-budget { flex-wrap: wrap; }
        }

        /* Arbre de craft */
        .tree {
            list-style: none;
            padding-left: 20px;
            border-left: 1px dashed var(--gold-dim);
        }
        .tree-node {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #1a1a1a;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid var(--border);
            border-radius: 5px;
            flex-wrap: wrap;
        }
        .tree-node[data-bottleneck="true"] {
            outline: 2px solid #f87171;
            outline-offset: 2px;
        }
        .bottleneck-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            min-height: 36px;
            color: #f87171;
            font-size: 13px;
            cursor: pointer;
        }
        .bottleneck-toggle input {
            margin: 0;
        }
        .bottleneck-summary {
            margin-top: 10px;
            color: #f87171;
            font-size: 14px;
            text-align: left;
        }
        .tree-node img { width: 32px; height: 32px; border-radius: 4px; }
        .price-input { width: 85px; text-align: right; }
        .stock-input { width: 65px; text-align: right; border-color: #3b82f6; }
        .total-price { font-weight: bold; color: var(--gold); min-width: 100px; text-align: right; }

        .shopping-list {
            margin-bottom: 15px;
            padding: 15px;
            background: #1a1a1a;
            border: 1px solid var(--gold-dim);
            border-radius: 5px;
        }
        .shopping-list-toggle {
            margin-bottom: 12px;
        }
        .shopping-list[hidden] {
            display: none;
        }
        .shopping-list h3 {
            margin: 0 0 6px;
        }
        .shopping-list-description,
        .shopping-list-empty {
            margin: 0 0 10px;
            color: #aaa;
            font-size: 13px;
        }
        .shopping-list-items {
            display: flex;
            flex-direction: column;
            gap: 6px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .shopping-list-item {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding: 8px;
            background: #222;
            border-radius: 4px;
        }
        .shopping-list-item .rarity-image {
            display: block;
            border-radius: 4px;
        }
        .shopping-list-item > input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin: 0;
            accent-color: var(--gold);
        }
        .shopping-list-item-info {
            display: flex;
            flex: 1 1 180px;
            flex-direction: column;
            gap: 4px;
            min-width: 160px;
        }
        .shopping-list-name {
            font-weight: bold;
        }
        .shopping-list-breakdown {
            color: #aaa;
            font-size: 12px;
        }
        .shopping-list-recommendation {
            color: var(--gold);
            font-size: 12px;
        }
        .shopping-list-control {
            display: flex;
            flex-direction: column;
            gap: 3px;
            color: #aaa;
            font-size: 11px;
        }
        .shopping-list-control input {
            width: 115px;
            box-sizing: border-box;
            margin: 0;
        }
        .shopping-list-subtotal {
            min-width: 105px;
            color: var(--gold);
            text-align: right;
        }
        .shopping-list-total {
            margin: 12px 0 0;
            text-align: right;
            color: var(--gold);
        }
        .shopping-list-total span,
        .shopping-list-warning {
            color: #aaa;
            font-size: 12px;
        }
        .shopping-list-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 12px;
        }
        #shoppingListCopyStatus {
            color: #aaa;
            font-size: 12px;
        }
        .shopping-list-completed {
            margin-top: 14px;
            color: #aaa;
        }
        .shopping-list-completed summary {
            cursor: pointer;
            color: var(--gold);
        }
        .shopping-list-completed ul {
            padding-left: 20px;
        }
        .shopping-list-completed-item {
            margin: 6px 0;
        }
        .shopping-list-completed-item span {
            margin-left: 8px;
            color: #777;
            font-size: 12px;
        }
        
        .recipe-builder-row {
            display: flex; gap: 10px; align-items: center; margin-bottom: 8px;
        }

        .expand-btn {
            background: #333;
            color: #fff;
            border: 1px solid var(--border);
            border-radius: 3px;
            cursor: pointer;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .expand-btn:hover { background: #444; }

        .sortable-item {
            display: flex; align-items: center; justify-content: space-between;
            background: #222; padding: 10px 15px; margin: 6px 0; border-radius: 4px;
            border: 1px solid var(--border);
        }

        .rarity-background-config {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 12px;
            margin-top: 15px;
        }
        .rarity-background-setting {
            display: flex;
            flex-direction: column;
            gap: 6px;
            color: #ddd;
            font-size: 13px;
        }
        .rarity-background-setting input {
            width: 100%;
            box-sizing: border-box;
        }
    
        
        /* Styles pour la grille d'encyclop?die */
        .encyclopedia-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .item-card {
            background: #161616;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: transform 0.2s, border-color 0.2s;
            position: relative;
            cursor: pointer;
        }
        
        .item-card:hover {
            transform: translateY(-2px);
            border-color: var(--gold);
        }
        
        .item-card img {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background: #000;
            margin-bottom: 10px;
        }

        .item-card-image-container {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
            margin-bottom: 10px;
            border-radius: 8px;
            background: #000;
            flex: 0 0 64px;
        }

        .item-card-open {
            color: inherit;
            cursor: pointer;
        }

        .item-card-open:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
        }

        .item-card-image-container.item-card-open {
            box-sizing: border-box;
        }

        .item-card img.item-card-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 4px;
            background: transparent;
            margin: 0;
        }

        .item-card-name-button {
            border: 0;
            padding: 0;
            margin-bottom: 6px;
            background: transparent;
            font-weight: bold;
        }

        .item-card-name-button:hover {
            color: var(--gold);
        }

        .item-card-open-hint {
            display: block;
            margin-top: 4px;
            color: #aaa;
            font-size: 10px;
            font-weight: normal;
        }

        .item-card-name-button:hover .item-card-open-hint {
            color: var(--gold);
        }

        .item-card-name-button .od-transmutation-icon {
            width: 1em;
            height: 1em;
            margin: 0 0 0 4px;
            border-radius: 0;
            background: transparent;
            object-fit: contain;
            vertical-align: -0.15em;
        }

        .item-card-rarity {
            font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }
        
        .item-card-category {
            font-size: 10px;
            color: #aaa;
            background: #222;
            padding: 2px 6px;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .item-card-inputs {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-top: auto;
            border-top: 1px solid #333;
            padding-top: 10px;
            text-align: left;
        }

        .item-card-inputs label {
            font-size: 10px;
            color: #888;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .currency-icon {
            display: inline-block;
            object-fit: contain;
            vertical-align: middle;
            border-radius: 0;
            background: transparent;
            margin: 0;
        }

        .item-card-inputs input {
            padding: 4px;
            font-size: 11px;
            width: 60px;
            text-align: right;
            background: #222;
        }
        
        .item-card-inputs input.id-input {
            width: 80px;
        }

        .item-exchange-summary {
            width: 100%;
            margin-top: 10px;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #333;
            border-radius: 5px;
            background: #1d1d1d;
            color: #aaa;
            font-size: 10px;
            line-height: 1.6;
            text-align: left;
        }

        .item-exchange-summary strong {
            color: #e0e0e0;
        }

        .item-exchange-summary-title {
            margin-bottom: 3px;
            color: var(--gold);
            font-weight: bold;
        }

        .item-card-actions {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
            gap: 5px;
        }
        
        .item-card-actions button {
            flex: 1;
            padding: 4px;
            font-size: 11px;
        }

        .item-create-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
            gap: 28px;
            align-items: start;
        }

        .item-create-fields {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px 20px;
            align-content: start;
        }

        .item-create-fields input,
        .item-create-fields select {
            width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 12px 14px;
        }

        .item-create-options {
            min-width: 0;
        }

        .item-create-od-panel {
            margin: 0 0 30px;
            background: #161616;
            padding: 16px;
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .item-create-od-panel > label {
            gap: 8px;
        }

        .item-create-od-panel input[type="checkbox"] {
            margin: 0;
        }

        .item-create-od-panel #odCreateOptions {
            margin-top: 14px !important;
        }

        .item-create-od-panel .custom-select {
            margin-top: 8px;
        }

        .item-create-od-panel .select-items {
            max-height: 220px;
        }

        .item-create-options > h3 {
            margin: 0 0 10px !important;
        }

        .item-create-options > p {
            line-height: 1.5;
            margin: 0 0 18px !important;
        }

        .item-create-options > .action-btn {
            margin-top: 14px;
        }

        @media (max-width: 760px) {
            .topbar {
                align-items: stretch;
                flex-direction: column;
                gap: 8px;
            }
            .header-item-search {
                width: 100%;
            }
            .brand h1 {
                font-size: 24px;
            }
            .item-create-layout {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 520px) {
            .item-create-fields {
                grid-template-columns: 1fr;
            }
        }

        /* Styles pour les bordures de raret? et le texte */
        .rarity-image-wrapper {
            display: inline-block;
            border-radius: 8px;
            padding: 2px;
            background-color: transparent;
        }
        .rarity-image {
            display: block;
            border-radius: 6px;
        }
        .rarity-text {
            font-weight: bold;
        }