body {
            /* padding: 20px; */ /* Removed */
            line-height: 1.5;
        }
        .container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        @media (min-width: 768px) {
            .container {
                grid-template-columns: 1fr 1fr; /* Make columns equal width */
            }
        }
        h1, h2, h3 {
            color: rgba(231, 237, 246, 0.96);
            margin-bottom: 10px;
            font-family: var(--rh-font-display);
            letter-spacing: 0.01em;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: var(--rh-muted);
        }
        select, input[type="text"], input[type="number"], button {
            padding: 8px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(15, 19, 26, 0.78);
            color: var(--rh-text);
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        select:focus, input[type="text"]:focus, input[type="number"]:focus {
            outline: none;
            border-color: rgba(94, 230, 255, 0.45);
            box-shadow: 0 0 0 3px rgba(94, 230, 255, 0.12);
        }
         button {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(200, 210, 226, 0.92) 100%);
            cursor: pointer;
            transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
            color: #0b0f14;
            font-weight: bold;
            border-color: rgba(255, 255, 255, 0.18);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
         }
         button:hover {
             transform: translateY(-1px);
             filter: brightness(1.05);
             border-color: rgba(94, 230, 255, 0.5);
             box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
         }
         button:disabled {
             background: rgba(255, 255, 255, 0.03);
             color: rgba(163, 175, 194, 0.65);
             border-color: rgba(255, 255, 255, 0.08);
             box-shadow: none;
             cursor: not-allowed;
         }

        .card {
            background: var(--rh-card);
            border-radius: 16px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            margin-bottom: 20px;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
        }

        
        .inventory-layout {
            display: grid;
            grid-template-areas:
                "torso neck mythical cloak helm"
                "arms . . . hands"
                "jewel . . . waist"
                "l_ring . . . r_ring"
                "l_wrist . . . r_wrist"
                "legs . . . feet"
                "l_hand r_hand . two_hand ranged"; 
            grid-template-columns: repeat(5, 1fr);
            gap: 5px; /* Reduced gap */
            padding: 10px;
            background: rgba(15, 19, 26, 0.45);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            min-height: 600px;
        }

        
        
        .slot-item[data-grid-area="mythical"] { grid-area: mythical; }
        .slot-item[data-grid-area="neck"] { grid-area: neck; }
        .slot-item[data-grid-area="cloak"] { grid-area: cloak; }
        .slot-item[data-grid-area="torso"] { grid-area: torso; }
        .slot-item[data-grid-area="helm"] { grid-area: helm; }
        .slot-item[data-grid-area="arms"] { grid-area: arms; }
        .slot-item[data-grid-area="hands"] { grid-area: hands; }
        .slot-item[data-grid-area="jewel"] { grid-area: jewel; }
        .slot-item[data-grid-area="waist"] { grid-area: waist; }
        .slot-item[data-grid-area="l_ring"] { grid-area: l_ring; }
        .slot-item[data-grid-area="r_ring"] { grid-area: r_ring; }
        .slot-item[data-grid-area="l_wrist"] { grid-area: l_wrist; }
        .slot-item[data-grid-area="r_wrist"] { grid-area: r_wrist; }
        .slot-item[data-grid-area="legs"] { grid-area: legs; }
        .slot-item[data-grid-area="feet"] { grid-area: feet; }
        .slot-item[data-grid-area="l_hand"] { grid-area: l_hand; }
        .slot-item[data-grid-area="r_hand"] { grid-area: r_hand; }
        .slot-item[data-grid-area="two_hand"] { grid-area: two_hand; } 
        .slot-item[data-grid-area="ranged"] { grid-area: ranged; } 


        .slot-item {
            background: rgba(15, 19, 26, 0.72);
            border-radius: 6px; /* Slightly smaller radius */
            padding: 8px; /* Reduced padding */
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease; 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 70px; /* Reduced min-height */
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Slightly reduced shadow */
            border: 1px solid rgba(255, 255, 255, 0.10);
        }

        .slot-item:hover {
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-2px); 
        }

         .slot-item:active {
             transform: translateY(0); 
         }

         
         .slot-item.equipped {
             border-color: rgba(94, 230, 255, 0.35);
             background: rgba(94, 230, 255, 0.10);
             box-shadow: 0 12px 30px rgba(94, 230, 255, 0.14);
         }


        .slot-item strong {
            font-size: 0.9em; 
            color: rgba(94, 230, 255, 0.92);
            margin-bottom: 5px; 
        }
        .slot-item .item-name {
            font-size: 0.9em;
            color: #e2e8f0;
            min-height: 1.2em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .slot-item .item-name.empty {
             color: rgba(163, 175, 194, 0.9);
             font-style: italic;
        }

        
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.8); 
            padding-top: 60px;
        }
        .modal-content {
            background: rgba(10, 13, 18, 0.92);
            margin: 5% auto; 
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 16px;
            width: 90%; 
            max-width: 800px;
            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: #e2e8f0;
            text-decoration: none;
            cursor: pointer;
        }
         .modal-controls {
             display: flex;
             gap: 10px;
             margin-bottom: 15px;
             flex-wrap: wrap; 
         }
         .modal-controls select,
         .modal-controls input[type="text"] {
             flex-grow: 1; 
             width: auto; 
         }

        .modal-item-list {
            max-height: 400px; 
            overflow-y: auto;
            margin-top: 15px;
        }
        .modal-item {
            padding: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.10);
            cursor: pointer;
        }
        .modal-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }
        .modal-item h4 {
            font-size: 1.1em;
            color: rgba(231, 237, 246, 0.96);
            font-family: var(--rh-font-display);
        }
        .modal-item p {
            font-size: 0.8em;
            color: rgba(163, 175, 194, 0.98);
        }
         .modal-item .item-details {
             margin-top: 5px;
             padding-top: 5px;
             border-top: 1px solid rgba(255, 255, 255, 0.10);
             font-size: 0.8em;
             color: rgba(231, 237, 246, 0.9);
         }
         .modal-item .item-details strong {
             color: rgba(94, 230, 255, 0.92);
         }
         .modal-item .delve-text-preview {
             font-size: 0.7em;
             color: rgba(163, 175, 194, 0.92);
             white-space: pre-wrap;
             margin-top: 5px;
             max-height: 60px; 
             overflow: hidden;
             text-overflow: ellipsis;
             cursor: pointer; 
         }
         .modal-item .full-delve-text {
             font-size: 0.8em;
             color: rgba(231, 237, 246, 0.9);
             white-space: pre-wrap;
             margin-top: 5px;
             border-top: 1px solid rgba(255, 255, 255, 0.10);
             padding-top: 5px;
         }
         .modal-item.unusable {
             opacity: 0.5;
             cursor: not-allowed;
             background: rgba(255, 255, 255, 0.06);
         }
         .modal-item.unusable:hover {
             background: rgba(255, 255, 255, 0.06);
         }
         .modal-item.unusable h4, .modal-item.unusable p {
             color: rgba(163, 175, 194, 0.72);
         }


        
        .stats-display {
            margin-top: 20px;
        }
        .stats-display h3 {
            margin-bottom: 10px;
        }
         
         #total-stats-summary {
             margin-bottom: 20px;
             padding-bottom: 15px;
             border-bottom: 1px solid rgba(255, 255, 255, 0.10);
         }
         #total-stats-summary h4 {
             color: rgba(94, 230, 255, 0.92);
             font-size: 1em;
             margin-bottom: 10px;
         }
         #total-stats-summary .total-stat-item {
             font-size: 0.9em;
             color: rgba(231, 237, 246, 0.9);
             margin-bottom: 3px;
         }
         #total-stats-summary .total-stat-item strong {
             color: rgba(231, 237, 246, 0.96);
         }


        
        #individual-stats-list {
            display: flex; 
            flex-direction: column;
            gap: 15px; 
        }
        .item-stats-block {
            background: rgba(15, 19, 26, 0.72);
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
            overflow: hidden; 
        }
         .item-stats-header {
             padding: 10px;
             background: rgba(255, 255, 255, 0.06);
             cursor: pointer;
             display: flex;
             justify-content: space-between;
             align-items: center;
             transition: background-color 0.2s ease;
         }
         .item-stats-header:hover {
             background: rgba(255, 255, 255, 0.08);
         }
         .item-stats-header strong {
             color: rgba(94, 230, 255, 0.92);
             font-size: 1em;
             margin-bottom: 0; 
         }
         .item-stats-header .toggle-icon {
             transition: transform 0.2s ease;
         }
         .item-stats-block.collapsed .toggle-icon {
             transform: rotate(-90deg); 
         }


        .item-stats-content {
            padding: 10px;
            padding-top: 0; 
            max-height: 1000px; 
            transition: max-height 0.3s ease-out; 
        }
        .item-stats-block.collapsed .item-stats-content {
            max-height: 0; 
            padding-top: 0; 
            padding-bottom: 0; 
        }


         .item-stats-block h4 { 
             color: rgba(231, 237, 246, 0.96);
             font-size: 0.9em;
             margin-top: 8px;
             margin-bottom: 4px;
             border-bottom: 1px dotted rgba(255, 255, 255, 0.14);
             padding-bottom: 3px;
         }
        .item-stats-block .stat-item {
             background-color: transparent; 
             border-radius: 0;
             padding: 0;
             border: none;
             font-size: 0.9em;
             color: rgba(231, 237, 246, 0.9);
             margin-bottom: 3px; 
        }
         .item-stats-block .stat-item strong {
             color: rgba(231, 237, 246, 0.96);
             font-size: 0.9em;
             display: inline; 
             margin-bottom: 0;
         }
         .item-stats-block .item-full-details {
             font-size: 0.8em;
             color: rgba(231, 237, 246, 0.9);
             white-space: pre-wrap; 
             margin-top: 5px;
             border-top: 1px solid rgba(255, 255, 255, 0.10);
             padding-top: 5px;
         }
         .item-stats-block .item-full-details strong {
             color: rgba(231, 237, 246, 0.96);
             font-size: 0.9em;
         }
          .item-stats-block ul {
              list-style: disc;
              margin-left: 15px;
              margin-top: 5px;
          }
          .item-stats-block ul li {
              margin-bottom: 3px;
          }