/* =========================================================
   D2RE Trade — trade.css
   All styles for the Path of Exile trade layout
   ========================================================= */

/* ---------------------------------------------------------
   Announcement Bar
   --------------------------------------------------------- */
.announce-bar {
    width: 100%;
    background: #2e1020;
    border-bottom: 1px solid #7a2a48;
    color: #e8a8c0;
    font-size: 13px;
    text-align: center;
    padding: 7px 16px;
    box-sizing: border-box;
    letter-spacing: 0.3px;
}

.announce-link {
    color: #f0b8cc;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.announce-link:hover {
    color: #fff;
}

/* ---------------------------------------------------------
   CSS Variables
   --------------------------------------------------------- */
:root {
    --bg:              #0c0a06;
    --bg-panel:        #13100a;
    --bg-section:      #0f0d08;
    --bg-header:       #1a160f;
    --bg-input:        #080705;
    --bg-hover:        #211c12;
    --border:          #2e2416;
    --border-mid:      #3d3120;
    --border-bright:   #5a4528;
    --gold:            #b99a5a;
    --gold-bright:     #d4b46a;
    --gold-dim:        #7a6238;
    --text-dim:        #5a4e38;
    --text-mid:        #8a7a5a;
    --text:            #a89870;
    --text-bright:     #c8b488;
    --text-white:      #e0cfa8;
    --tab-active:      #201a10;
    --tab-border:      #b99a5a;
    --r-sock:          #8b1f1f;
    --g-sock:          #1f5c2a;
    --b-sock:          #1f308b;
    --w-sock:          #4a4a4a;
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero {
    position: relative;
    height: 140px;
    background: #080608;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 100% at 5%  50%, rgba(120, 40, 160, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 40% 100% at 95% 50%, rgba(120, 40, 160, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 50% 110%, rgba(60, 20, 80, 0.6)   0%, transparent 70%);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 25% 60% at 12% 30%, rgba(180, 80, 220, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 25% 60% at 88% 70%, rgba(180, 80, 220, 0.12) 0%, transparent 60%);
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hero-emblem {
    width: 44px;
    height: 44px;
}

.hero-emblem svg {
    width: 100%;
    height: 100%;
}

.hero-title {
    font-family: 'Fontin', 'Georgia', serif;
    font-size: 28px;
    color: var(--gold-bright);
    letter-spacing: 3px;
    text-align: center;
    line-height: 1;
    text-shadow: 0 0 30px rgba(200, 160, 80, 0.4);
}

.hero-sub {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   Tab Bar
   --------------------------------------------------------- */
.tab-bar {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    height: 38px;
    flex-shrink: 0;
}

.tab-left {
    display: flex;
    align-items: stretch;
}

.tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    color: var(--text-mid);
    font-size: 13px;
    cursor: pointer;
    border-right: 1px solid var(--border);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    user-select: none;
}

.tab:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.tab.active {
    background: var(--tab-active);
    color: var(--gold-bright);
    border-bottom-color: var(--tab-border);
}

.tab-icon {
    font-size: 14px;
    opacity: 0.8;
}

.tab-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-right: 4px;
}

.tab-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    height: 100%;
    border-left: 1px solid var(--border);
    transition: color 0.15s;
    user-select: none;
}

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

/* ---------------------------------------------------------
   Search Bar
   --------------------------------------------------------- */
.search-bar {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-dim);
    font-size: 14px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    border-right: none;
    color: var(--text-bright);
    padding: 6px 10px 6px 32px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    height: 32px;
}

.search-input::placeholder {
    color: var(--text-dim);
}

.search-input:focus {
    border-color: var(--border-bright);
}

.search-dropdowns {
    display: flex;
    align-items: center;
}

.search-dd {
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    border-left: none;
    color: var(--text);
    padding: 0 22px 0 8px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    height: 32px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%235a4528'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 90px;
}

.search-dd:focus {
    outline: none;
    border-color: var(--border-bright);
}

.search-dd + .search-dd {
    border-left: 1px solid var(--border);
}

/* ---------------------------------------------------------
   Main Layout
   --------------------------------------------------------- */
.trade-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    align-items: flex-start;
}

/* ---------------------------------------------------------
   Filters Column (left panel)
   --------------------------------------------------------- */
.filters-col {
    flex: 0 0 25%;
    min-width: 0;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------
   Filter Section (collapsible block)
   --------------------------------------------------------- */
.fs {
    border-bottom: 1px solid var(--border);
}

.fs-head {
    display: flex;
    align-items: center;
    padding: 0 10px 0 0;
    height: 30px;
    background: var(--bg-header);
    cursor: pointer;
    user-select: none;
}

.fs-head:hover {
    background: #1e1912;
}

.fs-check {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 11px;
}

.fs-check.on {
    color: var(--gold);
}

.fs-title {
    flex: 1;
    font-family: 'Fontin', 'Georgia', serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--gold);
    padding: 0 10px;
    text-transform: uppercase;
}

.fs-arrow {
    color: var(--text-dim);
    font-size: 10px;
    transition: transform 0.2s;
}

.fs.collapsed .fs-arrow {
    transform: rotate(-90deg);
}

.fs-body {
    padding: 8px 12px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fs.collapsed .fs-body {
    display: none;
}

/* ---------------------------------------------------------
   Filter Rows
   --------------------------------------------------------- */
.fr {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fr-label {
    font-size: 12px;
    color: var(--text-mid);
    min-width: 130px;
    flex-shrink: 0;
}

/* utility wrapper for full-width control groups */
.fr-full {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

/* ---------------------------------------------------------
   Two-column Filter Grid
   --------------------------------------------------------- */
.fr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
}

.fr-grid-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fr-grid-label {
    font-size: 12px;
    color: var(--text-mid);
    min-width: 110px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------
   Filter Input
   --------------------------------------------------------- */
.fi {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-bright);
    font-size: 12px;
    font-family: inherit;
    padding: 0 6px;
    height: 26px;
    outline: none;
    transition: border-color 0.15s;
    min-width: 0;
}

.fi:focus {
    border-color: var(--border-bright);
}

.fi::placeholder {
    color: var(--text-dim);
    font-size: 11px;
}

.fi.mini {
    width: 52px;
    flex-shrink: 0;
    text-align: center;
}

.fi.wide {
    flex: 1;
}

/* ---------------------------------------------------------
   Filter Select
   --------------------------------------------------------- */
.fsel {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    padding: 0 22px 0 8px;
    height: 26px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%235a4528'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    outline: none;
    cursor: pointer;
    min-width: 0;
}

.fsel:focus {
    border-color: var(--border-bright);
}

.fsel.wide {
    flex: 1;
}

/* ---------------------------------------------------------
   Socket Buttons
   --------------------------------------------------------- */
.sock-btns {
    display: flex;
    gap: 2px;
}

.sock-btn {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: opacity 0.15s, filter 0.15s;
}

.sock-btn:hover {
    filter: brightness(1.3);
}

.sock-btn.R { background: var(--r-sock); }
.sock-btn.G { background: var(--g-sock); }
.sock-btn.B { background: var(--b-sock); }
.sock-btn.W { background: var(--w-sock); }

/* ---------------------------------------------------------
   Ad Column (right panel)
   --------------------------------------------------------- */
.ad-col {
    display: none;
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    background: var(--bg-panel);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-width: 0;
    overflow: hidden;
}

.ad-placeholder {
    width: 300px;
    min-height: 600px;
    background: var(--bg-section);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 0.05em;
}

.stat-head {
    display: flex;
    align-items: center;
    height: 30px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    padding: 0 10px 0 0;
}

.stat-head-check {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    color: var(--gold);
    font-size: 11px;
}

.stat-head-title {
    flex: 1;
    font-family: 'Fontin', 'Georgia', serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--gold);
    padding: 0 10px;
    text-transform: uppercase;
}

.stat-head-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-icon-btn {
    background: none;
    border: 1px solid var(--border-mid);
    color: var(--text-mid);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: border-color 0.15s, color 0.15s;
}

.stat-icon-btn:hover {
    border-color: var(--gold-dim);
    color: var(--gold);
}

.stat-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------------------------------------------------------
   Stat Filter Group
   --------------------------------------------------------- */
.stat-group {
    border: 1px solid var(--border);
    background: var(--bg-section);
}

.stat-group-head {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    gap: 6px;
}

.stat-group-label {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
}

.stat-group-sel {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-mid);
    font-size: 11px;
    font-family: inherit;
    padding: 2px 20px 2px 6px;
    height: 22px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%235a4528'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    outline: none;
    min-width: 90px;
}

.stat-group-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    padding: 0 2px;
    transition: color 0.15s;
}

.stat-group-close:hover {
    color: #c04040;
}

/* ---------------------------------------------------------
   Stat Filter Item (single stat row)
   --------------------------------------------------------- */
.stat-filter-item {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid var(--border);
}

.stat-filter-item:last-child {
    border-bottom: none;
}

.stat-filter-top {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-filter-name {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-bright);
    font-size: 12px;
    font-family: inherit;
    padding: 3px 8px;
    height: 24px;
    outline: none;
    transition: border-color 0.15s;
}

.stat-filter-name:focus {
    border-color: var(--border-bright);
}

.stat-filter-name::placeholder {
    color: var(--text-dim);
    font-size: 11px;
}

.stat-filter-del {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    padding: 0 3px;
    line-height: 1;
    transition: color 0.15s;
}

.stat-filter-del:hover {
    color: #c04040;
}

.stat-filter-bottom {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---------------------------------------------------------
   Stat Add / Close Buttons
   --------------------------------------------------------- */
.stat-add-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.stat-add-main {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    border-right: none;
    color: var(--text-mid);
    font-size: 12px;
    font-family: inherit;
    padding: 6px 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.stat-add-main:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.stat-add-arrow {
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    color: var(--text-dim);
    width: 28px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    transition: background 0.15s, color 0.15s;
}

.stat-add-arrow:hover {
    background: var(--bg-hover);
    color: var(--text-mid);
}

.stat-close-btn {
    background: none;
    border: 1px solid var(--border-mid);
    color: var(--text-dim);
    padding: 5px 16px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s, color 0.15s;
}

.stat-close-btn:hover {
    border-color: var(--border-bright);
    color: var(--text-mid);
}

/* ---------------------------------------------------------
   Ad / Discord Banner
   --------------------------------------------------------- */
.stat-ad {
    margin-top: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.stat-ad-link {
    display: block;
    text-decoration: none;
}

.stat-ad-img {
    display: block;
    width: 100%;
    height: auto;
}

.stat-ad-discord {
    display: block;
    background: #5865F2;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-family: 'Fontin', 'Georgia', serif;
    letter-spacing: 1px;
    padding: 6px 0;
    transition: background 0.15s;
}

.stat-ad-link:hover .stat-ad-discord {
    background: #4752c4;
}

/* ---------------------------------------------------------
   Scrollbar
   --------------------------------------------------------- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-mid); }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* ---------------------------------------------------------
   Stat Autocomplete Dropdown
   --------------------------------------------------------- */
.stat-autocomplete {
    position: absolute;
    z-index: 9999;
    background: var(--bg-panel);
    border: 1px solid var(--border-bright);
    max-height: 300px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
    min-width: 280px;
}

.stat-autocomplete.visible {
    display: block;
}

.stat-ac-group {
    /* groups sit flush with no extra wrapper spacing */
}

.stat-ac-category {
    background: var(--bg-header);
    padding: 4px 10px;
    font-size: 10px;
    color: var(--gold-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.stat-ac-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s, color 0.1s;
    gap: 6px;
}

.stat-ac-item:last-child {
    border-bottom: none;
}

.stat-ac-item:hover,
.stat-ac-item.focused {
    background: var(--bg-hover);
    color: var(--text-bright);
}

.stat-ac-text {
    flex: 1;
}

.stat-ac-text mark {
    background: transparent;
    color: var(--gold-bright);
    font-weight: 600;
}

.stat-ac-badge {
    flex-shrink: 0;
    font-size: 9px;
    padding: 1px 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid;
}

.stat-ac-badge.lod {
    color: #8ab4e8;
    border-color: #2a4a6a;
    background: rgba(42, 74, 106, 0.2);
}

.stat-ac-badge.row {
    color: #c47aaa;
    border-color: #5a2a4a;
    background: rgba(90, 42, 74, 0.2);
}

.stat-ac-empty {
    padding: 12px 10px;
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    font-style: italic;
}

/* highlight stat inputs that have a value selected */
.stat-filter-name.stat-filled {
    color: #88cc88;
    border-color: #2a4a2a;
}

/* ---------------------------------------------------------
   Item Search Autocomplete Dropdown
   --------------------------------------------------------- */
.item-autocomplete {
    display: none;
    position: absolute;
    z-index: 9999;
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.7);
    max-height: 380px;
    overflow-y: auto;
    min-width: 320px;
}

.item-autocomplete.visible {
    display: block;
}

.item-ac-group {
    /* category groups sit flush */
}

.item-ac-category {
    background: var(--bg-header);
    padding: 4px 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-mid);
    position: sticky;
    top: 0;
    z-index: 1;
}

.item-ac-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
}

.item-ac-item:last-child {
    border-bottom: none;
}

.item-ac-item:hover,
.item-ac-item.focused {
    background: var(--bg-hover);
}

/* Item name with quality colouring */
.item-ac-name {
    flex: 1;
    font-weight: 500;
}

.item-ac-name mark {
    background: transparent;
    font-weight: 700;
}

.item-q-unique mark { color: #ffd17a; }
.item-q-set    mark { color: #88cc88; }
.item-q-runeword mark { color: #c8a86a; }

/* Gold for unique names */
.item-q-unique {
    color: var(--gold-bright);
}

/* Green for set item names */
.item-q-set {
    color: #88cc88;
}

/* Tan/brown for runeword names */
.item-q-runeword {
    color: #c8a86a;
}

.item-ac-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
}

.item-ac-badges {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Quality badge */
.item-ac-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 2px;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.item-ac-badge.unique {
    color: var(--gold-bright);
    border-color: var(--gold-dim);
    background: rgba(90, 70, 20, 0.25);
}

.item-ac-badge.set {
    color: #88cc88;
    border-color: #2a5a2a;
    background: rgba(42, 90, 42, 0.2);
}

.item-ac-badge.runeword {
    color: #c8a86a;
    border-color: #5a4020;
    background: rgba(90, 64, 32, 0.2);
}

.item-ac-badge--tier {
    color: #a0a0a0;
    border-color: #404040;
    background: rgba(64, 64, 64, 0.3);
}

/* White/gray for base item names */
.item-q-base {
    color: #c8c8c8;
}
.item-q-base mark { color: #e8e8e8; }

.item-ac-empty {
    padding: 12px 10px;
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    font-style: italic;
}

/* ---------------------------------------------------------
   Layout order (filters+stats | results | ad)
   --------------------------------------------------------- */
.filters-col { order: 1; }
.results-col  { order: 2; flex: 1 1 auto; }
.ad-col       { order: 3; }

/* ---------------------------------------------------------
   Results Column (center panel)
   --------------------------------------------------------- */
.results-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow-y: auto;
    min-width: 0;
}

.results-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
}

.results-placeholder-icon {
    font-size: 40px;
    opacity: 0.2;
}

.results-placeholder-text {
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}

.results-header {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    padding: 0 14px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.results-title {
    font-family: 'Fontin', Georgia, serif;
    font-size: 15px;
    color: var(--gold-bright);
    letter-spacing: 1px;
}

.results-count {
    font-size: 11px;
    color: var(--text-dim);
}

.live-search-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 3px 10px 3px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 10px;
    font-family: 'Fontin', Georgia, serif;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.live-search-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.live-search-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.live-search-btn--active {
    border-color: #4caf50;
    color: #4caf50;
}
.live-search-btn--active .live-search-dot {
    animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.6); }
}

.listing-row--new {
    animation: listing-new-flash 2.5s ease-out forwards;
}
@keyframes listing-new-flash {
    0%   { background: rgba(76, 175, 80, 0.18); }
    100% { background: transparent; }
}

.results-loading,
.results-empty {
    padding: 40px;
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
    font-size: 13px;
}

.load-more-btn {
    display: block;
    width: calc(100% - 28px);
    margin: 10px 14px 14px;
    padding: 8px;
    background: var(--bg-section);
    border: 1px solid var(--border-mid);
    color: var(--gold);
    font-family: 'Fontin', 'Georgia', serif;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.load-more-btn:hover:not(:disabled) {
    border-color: var(--gold-dim);
    background: var(--bg-hover);
}
.load-more-btn:disabled {
    color: var(--text-dim);
    cursor: default;
}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */
.results-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.pag-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--gold);
    font-family: 'Fontin', Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 5px 14px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.pag-btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold-bright);
}

.pag-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.pag-info {
    font-size: 12px;
    color: var(--text-dim);
    min-width: 90px;
    text-align: center;
}

/* ---------------------------------------------------------
   Listing Cards — 3-column card
   --------------------------------------------------------- */
.results-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.listing-row {
    display: flex;
    flex-direction: row;
    border: 1px solid #3e2a10;
    background: #0c0903;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
    min-height: 110px;
}

.listing-row:hover {
    border-color: #7a5828;
    background: #0f0c06;
}

/* ── Col 1: Icon ─────────────────────────────────── */
.lr-col-icon {
    width: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #08060300;
    border-right: 1px solid #251808;
    padding: 14px 10px;
}

.lr-icon-svg {
    width: 44px;
    height: 44px;
    opacity: 0.28;
    flex-shrink: 0;
}

.lr-item-img {
    max-width: 54px;
    max-height: 54px;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.lr-item-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Col 2: Item Details ─────────────────────────── */
.lr-col-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 16px 10px 14px;
    min-width: 0;
    border-right: 1px solid #251808;
}

.lr-item-name {
    font-family: 'Fontin', Georgia, serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin-bottom: 2px;
}
.lr-item-name.q-unique   { color: #d4a832; }
.lr-item-name.q-set      { color: #88cc88; }
.lr-item-name.q-runeword { color: #c8a86a; }
.lr-item-name.q-rare     { color: #d4cc44; }
.lr-item-name.q-magic    { color: #8888ee; }
.lr-item-name.q-normal,
.lr-item-name.q-misc,
.lr-item-name.q-rune     { color: var(--text-bright); }

.lr-item-base {
    font-size: 11px;
    color: var(--text-mid);
    font-style: italic;
    margin-bottom: 7px;
}

.lr-divider {
    height: 1px;
    background: linear-gradient(90deg, #3a2810 0%, transparent 80%);
    margin-bottom: 8px;
    flex-shrink: 0;
}

.lr-mods {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.lr-mod {
    font-size: 12px;
    color: #8891cc;
    line-height: 1.5;
}

.lr-tags {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.lr-tag {
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lr-tag-eth {
    color: #9999dd;
    border-color: #2a2a55;
    background: rgba(50, 50, 110, 0.25);
}

.lr-tag-sock {
    color: var(--text-mid);
    border-color: var(--border-mid);
    background: rgba(30, 20, 10, 0.4);
}

.lr-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.lr-tag-platform {
    color: #7ab8d4;
    border-color: #1e3d50;
    background: rgba(20, 50, 70, 0.35);
}

.lr-tag-mode {
    color: #c8a44a;
    border-color: #4a3510;
    background: rgba(60, 40, 10, 0.35);
}

.lr-tag-region {
    color: #7fb87f;
    border-color: #1e3d1e;
    background: rgba(20, 50, 20, 0.35);
}

/* ── Col 3: Price / Seller ───────────────────────── */
.lr-col-price {
    width: 195px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    background: #080603;
}

.lr-price-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.lr-price-value {
    font-family: 'Fontin', Georgia, serif;
    font-size: 19px;
    color: var(--gold-bright);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
}

.lr-price-curr {
    font-size: 13px;
    color: var(--gold);
    font-weight: 400;
}

.lr-price-offers {
    font-size: 14px;
    color: var(--text-mid);
    font-weight: 400;
    font-style: italic;
}

.lr-seller-block {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 8px;
    border-top: 1px solid #1e1408;
}

.lr-seller-name {
    font-size: 12px;
    color: var(--text-bright);
}

.lr-listed-time {
    font-size: 11px;
    color: var(--text-dim);
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}
.status-dot--online  { background: #4caf50; box-shadow: 0 0 4px #4caf5088; }
.status-dot--away    { background: #ff9800; box-shadow: 0 0 4px #ff980088; }
.status-dot--offline { background: #e53935; }

.lr-btn-chat {
    margin-top: 7px;
    padding: 5px 10px;
    font-size: 11px;
    background: #130f07;
    border: 1px solid #4a3418;
    color: var(--gold);
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: inherit;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    width: 100%;
    text-align: center;
}

.lr-btn-chat:hover {
    background: #221808;
    border-color: var(--gold);
    color: var(--gold-bright);
}

.lr-btn-chat:active {
    background: #1c2010;
    border-color: #4a7a28;
    color: #88cc66;
}

.lr-notes {
    font-size: 11px;
    color: var(--text-mid);
    font-style: italic;
    line-height: 1.4;
    margin-top: 5px;
    border-top: 1px solid #1e1408;
    padding-top: 5px;
}

/* =========================================================
   Nav — auth state additions
   ========================================================= */

.nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    height: 100%;
    font-size: 12px;
    color: var(--text-mid);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.1s, border-color 0.1s;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
}

.nav-tab:hover {
    color: var(--text);
    border-bottom-color: var(--border-bright);
}

.nav-tab--active {
    color: var(--gold);
    border-bottom-color: var(--tab-border);
}

.nav-tab--post {
    color: #88bb55;
    border-bottom-color: transparent;
}

.nav-tab--post:hover {
    color: #aad470;
    border-bottom-color: #4a7a28;
}

.nav-tab-icon {
    font-style: normal;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 10px;
}

.nav-user-tag {
    font-size: 12px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.nav-logout-btn {
    font-size: 11px;
    color: var(--text-mid);
    background: none;
    border: 1px solid var(--border);
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.1s, border-color 0.1s;
}

.nav-logout-btn:hover {
    color: var(--text);
    border-color: var(--border-mid);
}

/* =========================================================
   Auth / Login page
   ========================================================= */

.auth-wrap {
    max-width: 520px;
    margin: 50px auto 80px;
    padding: 0 16px;
}

.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}

.auth-tab {
    flex: 1;
    padding: 10px 14px;
    font-size: 12px;
    font-family: inherit;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-mid);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-bottom: none;
    cursor: pointer;
    transition: color 0.1s, background 0.1s;
    margin-right: -1px;
}

.auth-tab:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.auth-tab--active {
    color: var(--gold);
    background: var(--bg-section);
    border-bottom: 1px solid var(--bg-section);
    position: relative;
    z-index: 1;
}

.auth-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-top: none;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.auth-panel--hidden {
    display: none;
}

.auth-panel-icon {
    font-size: 28px;
    color: var(--gold-dim);
    margin-bottom: 16px;
}

.auth-panel-title {
    font-family: 'Fontin', serif;
    font-size: 22px;
    color: var(--text-white);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.auth-panel-sub {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.65;
    max-width: 380px;
    margin-bottom: 28px;
}

.auth-panel-sub strong {
    color: var(--text);
}

.auth-error {
    background: #1a0808;
    border: 1px solid #6a1f1f;
    color: #cc6666;
    font-size: 12px;
    padding: 10px 14px;
    margin-bottom: 18px;
    width: 100%;
    text-align: left;
}

.bnet-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 28px;
    background: #00aeff;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    margin-bottom: 18px;
}

.bnet-btn:hover {
    background: #0090dd;
}

.bnet-btn--secondary {
    background: var(--bg-section);
    border: 1px solid var(--border-mid);
    color: var(--text);
}

.bnet-btn--dev {
    background: #2a1a00;
    border: 1px dashed #a0522d;
    color: #cd853f;
    font-size: 0.85em;
    opacity: 0.85;
}
.bnet-btn--dev:hover {
    background: #3a2600;
    border-color: #cd853f;
    color: #daa520;
    opacity: 1;
}

.bnet-btn--secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-bright);
    color: var(--text-bright);
}

.bnet-logo {
    width: 18px;
    height: 18px;
}

.auth-note {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
}

.auth-link {
    color: var(--gold-dim);
    text-decoration: none;
}

.auth-link:hover {
    color: var(--gold);
}

.auth-tag-ex {
    color: var(--gold);
    font-family: monospace;
    font-size: 13px;
}

.auth-feature-list {
    list-style: none;
    text-align: left;
    font-size: 12px;
    color: var(--text-mid);
    margin-bottom: 24px;
    width: 100%;
    max-width: 340px;
}

.auth-feature-list li {
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
}

.auth-feature-list li:last-child {
    border-bottom: none;
}

.auth-info-box {
    background: var(--bg-section);
    border: 1px solid var(--border);
    padding: 14px 16px;
    margin-bottom: 24px;
    text-align: left;
    width: 100%;
    max-width: 380px;
}

.auth-info-row {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-mid);
    line-height: 1.6;
}

.auth-info-icon {
    font-size: 16px;
    color: #c8a040;
    flex-shrink: 0;
    margin-top: 2px;
}

.auth-info-row strong {
    color: var(--text);
    display: block;
    margin-bottom: 4px;
}

/* =========================================================
   Post Item form
   ========================================================= */

.post-wrap {
    max-width: 720px;
    margin: 30px auto 80px;
    padding: 0 16px;
}

.post-errors {
    background: #1a0808;
    border: 1px solid #6a1f1f;
    color: #cc6666;
    font-size: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.post-errors ul {
    margin: 6px 0 0 16px;
}

.post-section {
    margin-bottom: 18px;
    border: 1px solid var(--border);
}

.post-section-head {
    background: var(--bg-header);
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold-dim);
    border-bottom: 1px solid var(--border);
}

.post-section-body {
    background: var(--bg-panel);
    padding: 16px 20px;
}

.post-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.post-row:last-child {
    margin-bottom: 0;
}

.post-row--inline {
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.post-label {
    flex-shrink: 0;
    width: 110px;
    font-size: 12px;
    color: var(--text-mid);
    padding-top: 6px;
    line-height: 1.3;
}

.post-req {
    color: #cc6644;
}

.post-hint {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 14px;
    line-height: 1.5;
}

.post-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    padding: 6px 10px;
    outline: none;
    transition: border-color 0.1s;
}

.post-input:focus {
    border-color: var(--border-bright);
}

.post-input--wide {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.post-input--small {
    width: 70px;
}

.post-select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    padding: 6px 10px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.1s;
}

.post-select:focus {
    border-color: var(--border-bright);
}

.post-select--wide {
    flex: 1;
    min-width: 0;
}

.post-textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    padding: 8px 10px;
    resize: vertical;
    outline: none;
    flex: 1;
    min-width: 0;
    transition: border-color 0.1s;
    line-height: 1.5;
}

.post-textarea:focus {
    border-color: var(--border-bright);
}

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

.post-inline-group--grow {
    flex: 1;
}

.post-inline-group .post-label {
    padding-top: 0;
    width: auto;
}

/* Toggle switch */
.post-toggle {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.post-toggle input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.post-toggle-track {
    display: inline-block;
    width: 36px;
    height: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}

.post-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: var(--text-dim);
    transition: left 0.15s, background 0.15s;
}

.post-toggle input[type="checkbox"]:checked + .post-toggle-track {
    background: #1c2a10;
    border-color: #4a7a28;
}

.post-toggle input[type="checkbox"]:checked + .post-toggle-track::after {
    left: 19px;
    background: #88cc55;
}

/* Autocomplete */
.post-autocomplete-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.post-autocomplete-drop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-top: none;
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.post-autocomplete-drop.open {
    display: block;
}

.post-ac-item {
    padding: 7px 10px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    transition: background 0.08s;
}

.post-ac-item:hover,
.post-ac-item.focused {
    background: var(--bg-hover);
}

.post-ac-name {
    color: var(--text-white);
}

.post-ac-base {
    color: var(--text-dim);
    font-size: 11px;
    text-align: right;
}

/* Stat rows */
.post-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
}

.post-stat-input-wrap {
    flex: 1;
    position: relative;
}

.post-stat-input {
    width: 100%;
}

.post-stat-drop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-top: none;
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.post-stat-drop.open {
    display: block;
}

.post-stat-option {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.08s;
}

.post-stat-option:hover,
.post-stat-option.focused {
    background: var(--bg-hover);
}

.post-stat-val {
    width: 80px;
    flex-shrink: 0;
}

.post-stat-val2 {
    width: 80px;
    flex-shrink: 0;
}

.post-stat-remove {
    width: 24px;
    height: 24px;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.1s, border-color 0.1s;
    font-family: inherit;
}

.post-stat-remove:hover {
    color: #cc4444;
    border-color: #6a2020;
}

.post-add-stat-btn {
    font-size: 12px;
    color: var(--gold-dim);
    background: var(--bg-section);
    border: 1px solid var(--border);
    padding: 6px 14px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.5px;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
}

.post-add-stat-btn:hover {
    color: var(--gold);
    border-color: var(--border-bright);
    background: var(--bg-hover);
}

/* Actions */
.post-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.post-cancel-btn {
    font-size: 12px;
    color: var(--text-mid);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    transition: color 0.1s, border-color 0.1s;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.post-cancel-btn:hover {
    color: var(--text);
    border-color: var(--border-mid);
}

.post-submit-btn {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Fontin', serif;
    color: var(--bg);
    background: var(--gold);
    border: 1px solid var(--gold-bright);
    padding: 10px 28px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.1s, color 0.1s;
}

.post-submit-btn:hover {
    background: var(--gold-bright);
}

/* ── Screenshot upload zone ─────────────────────────────────────── */
.post-screenshot-zone {
    border: 2px dashed var(--gold);
    border-radius: 6px;
    padding: 18px 24px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.post-screenshot-zone:hover,
.post-screenshot-zone.drag-over,
.post-screenshot-zone:focus {
    background: rgba(200, 160, 60, 0.08);
    border-color: var(--gold-bright);
    outline: none;
}

.post-screenshot-prompt {
    color: var(--text-mid);
    font-size: 0.95rem;
}

.post-screenshot-browse {
    background: none;
    border: none;
    color: var(--gold);
    cursor: pointer;
    text-decoration: underline;
    font-size: inherit;
    padding: 0;
}

.post-screenshot-browse:hover {
    color: var(--gold-bright);
}

.post-screenshot-loading {
    color: var(--gold);
    font-style: italic;
    font-size: 0.95rem;
}

.post-screenshot-error {
    color: #e05555;
    font-size: 0.9rem;
    margin-top: 4px;
}

/* =========================================================
   My Listings Page
   ========================================================= */
.my-listings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.my-listings-title {
    font-family: 'Fontin', 'Georgia', serif;
    font-size: 20px;
    color: var(--gold);
    font-weight: normal;
    letter-spacing: 0.04em;
}
.my-listings-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: none;
    border: 1px solid #4a7a28;
    color: #88bb55;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.my-listings-post-btn:hover { background: #1a2a10; border-color: #6aaa44; }

.my-listings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    color: var(--text-dim);
    font-size: 14px;
    gap: 8px;
}
.my-listings-empty-icon {
    font-size: 28px;
    color: var(--border-mid);
    margin-bottom: 4px;
}

.post-flash {
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    border-radius: 2px;
}
.post-flash--ok {
    background: #1a2a10;
    border: 1px solid #4a7a28;
    color: #88bb55;
}
.post-flash--err {
    background: #2a1010;
    border: 1px solid #7a2828;
    color: #cc6666;
}

.my-listings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-listing-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
    transition: border-color 0.15s;
}
.my-listing-card:hover { border-color: var(--border-mid); }

.my-listing-info {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.my-listing-name {
    font-family: 'Fontin', 'Georgia', serif;
    font-size: 16px;
    color: var(--text);
}
.my-listing-name.q-unique  { color: #d4a832; }
.my-listing-name.q-set     { color: #88cc88; }
.my-listing-name.q-runeword{ color: #c8a86a; }

.my-listing-meta {
    font-size: 12px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.my-listing-sep { color: var(--border-mid); }
.my-listing-eth { color: #8ab4d4; }

.my-listing-price {
    font-size: 13px;
    color: var(--gold);
    margin-top: 2px;
}
.my-listing-negotiable { color: var(--text-dim); font-style: italic; }

.my-listing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.my-listing-stat {
    font-size: 11px;
    color: var(--text-mid);
    background: var(--bg-section);
    border: 1px solid var(--border);
    padding: 1px 6px;
}
.my-listing-stat--more { color: var(--text-dim); border-style: dashed; }

.my-listing-date {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

.my-listing-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border-left: 1px solid var(--border);
    min-width: 110px;
}
.my-listing-actions form { display: contents; }

.my-btn {
    padding: 5px 10px;
    font-size: 12px;
    font-family: inherit;
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    color: var(--text);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
.my-btn:hover { background: var(--bg-hover); border-color: var(--border-bright); color: var(--text-bright); }
.my-btn--edit  { color: #8ab4d4; border-color: #2a4a64; }
.my-btn--edit:hover { background: #0e1e2e; border-color: #4a84b4; }
.my-btn--price { color: var(--gold); border-color: #4a3a10; }
.my-btn--price:hover { background: #1e1600; border-color: #8a6820; }
.my-btn--danger { color: #cc6666; border-color: #4a2020; }
.my-btn--danger:hover { background: #2a0e0e; border-color: #884444; }
.my-btn--save  { color: #88bb55; border-color: #3a5a20; }
.my-btn--save:hover { background: #1a2a10; border-color: #5a9a30; }

.my-price-form {
    width: 100%;
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    background: var(--bg-section);
}
.my-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.my-price-row .post-input {
    width: 90px;
    flex-shrink: 0;
}
.my-price-row .post-select {
    flex-shrink: 0;
}

/* =========================================================
   Mobile Responsive (≤768px)
   ========================================================= */

/* Overlay backdrop — hidden on desktop, shown via JS on mobile */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 998;
    touch-action: none;
}
.mobile-overlay.visible { display: block; }

/* Pull tabs — hidden on desktop */
.stat-pull-tab  { display: none; }
.filter-pull-tab { display: none; }

@media (max-width: 768px) {

    /* Hide My Listings nav tab */
    .nav-my-listings { display: none; }

    /* Shrink hero */
    .hero { height: 70px; }
    .hero-title { font-size: 18px; }
    .hero-sub { display: none; }
    .hero-emblem { width: 32px; height: 32px; }

    /* Filters col becomes a fixed left drawer on mobile */
    .filters-col {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(85vw, 340px);
        flex: none !important;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.7);
    }
    .filters-col.open { transform: translateX(0); }

    /* Hide pull-tab when panel is open */
    .filters-col.open .filter-pull-tab { display: none !important; }

    /* Pull tab — vertical text tab at left edge */
    .filter-pull-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 997;
        background: var(--bg-panel);
        border: 1px solid var(--border-bright);
        border-left: none;
        border-radius: 0 4px 4px 0;
        color: var(--gold);
        font-size: 11px;
        font-family: 'Fontin', 'Georgia', serif;
        padding: 10px 5px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: translateY(-50%) rotate(180deg);
        cursor: pointer;
        letter-spacing: 0.08em;
        transition: background 0.15s;
        user-select: none;
    }
    .filter-pull-tab:hover { background: var(--bg-hover); }

    /* Results column takes full width */
    .results-col {
        flex: 1 1 100%;
        min-width: 0;
        order: 1;
        border-right: none;
    }

    /* Hide ad column on mobile */
    .ad-col { display: none !important; }

    /* Search bar: stack on very small screens */
    @media (max-width: 480px) {
        .search-bar { flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
        .search-dropdowns { width: 100%; }
        .search-dd { flex: 1; min-width: 0; }
    }
}

/* ---------------------------------------------------------
   Listing Success Lightbox
   --------------------------------------------------------- */
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.lb-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(185, 154, 90, 0.12);
}

/* Placeholder image area — swap with <img> later */
.lb-img-placeholder {
    width: 100%;
    height: 180px;
    background: linear-gradient(160deg, #1a110a 0%, #0f0a06 60%, #120d08 100%);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-dim);
}

.lb-img-icon {
    font-size: 36px;
    color: var(--gold-dim);
    opacity: 0.5;
}

.lb-img-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.lb-body {
    padding: 24px 28px 28px;
}

.lb-title {
    font-family: 'Fontin', 'Georgia', serif;
    font-size: 20px;
    color: var(--gold-bright);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.lb-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-bright);
    margin-bottom: 16px;
}

.lb-steps {
    list-style: decimal;
    padding-left: 20px;
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lb-steps li {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}

.lb-steps strong { color: var(--text-white); }

kbd {
    display: inline-block;
    background: var(--bg-header);
    border: 1px solid var(--border-mid);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    font-family: monospace;
    color: var(--text-bright);
}

.lb-cmd-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.lb-cmd-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.lb-cmd-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    border-radius: 3px;
    color: var(--gold);
    font-family: monospace;
    font-size: 13px;
    padding: 7px 10px;
    outline: none;
    cursor: default;
    user-select: all;
}

.lb-copy-btn {
    background: var(--bg-header);
    border: 1px solid var(--border-bright);
    border-radius: 3px;
    color: var(--gold);
    font-size: 12px;
    padding: 0 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.lb-copy-btn:hover {
    background: var(--bg-hover);
    color: var(--gold-bright);
}

.lb-copy-confirm {
    height: 16px;
    font-size: 11px;
    color: #6aaa44;
    margin-bottom: 22px;
}

.lb-understand-btn {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, #2a1e0e 0%, #1c1408 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 3px;
    color: var(--gold-bright);
    font-family: 'Fontin', 'Georgia', serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    padding: 11px 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lb-understand-btn:hover {
    background: linear-gradient(180deg, #3a2a12 0%, #2a1e0e 100%);
    border-color: var(--gold);
    color: var(--gold-bright);
}

/* ═══════════════════════════════════════════════
   ADMIN PAGES
   ═══════════════════════════════════════════════ */

.admin-wrap {
    padding: 28px 28px 60px;
}

/* Sub-nav ------------------------------------------------------------ */
.admin-subnav {
    display: flex;
    gap: 2px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.admin-subnav-tab {
    padding: 9px 20px;
    font-size: 13px;
    font-family: 'Fontin', 'Georgia', serif;
    letter-spacing: 0.05em;
    color: var(--text-mid);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-bottom: none;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-radius: 3px 3px 0 0;
}

.admin-subnav-tab:hover {
    color: var(--gold);
    background: var(--bg-hover);
}

.admin-subnav-tab--active {
    color: var(--gold-bright);
    background: var(--bg-section);
    border-color: var(--gold-dim);
    cursor: default;
}

/* Flash messages ----------------------------------------------------- */
.admin-flash {
    padding: 10px 16px;
    border-radius: 3px;
    margin-bottom: 18px;
    font-size: 13px;
}

.admin-flash--ok {
    background: #0d2010;
    border: 1px solid #2a5a2a;
    color: #6aaa44;
}

.admin-flash--err {
    background: #200a0a;
    border: 1px solid #6a2020;
    color: #cc4444;
}

/* Sections (SEO form) ------------------------------------------------ */
.admin-section {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-bottom: 18px;
    overflow: hidden;
}

.admin-section-head {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
    font-family: 'Fontin', 'Georgia', serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--gold);
    text-transform: uppercase;
}

.admin-section-body {
    padding: 18px 16px 6px;
}

.admin-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

/* Toolbar ------------------------------------------------------------ */
.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.admin-search-input {
    flex: 1;
    min-width: 0;
}

.admin-search-btn {
    padding: 7px 16px;
    background: var(--bg-header);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--gold);
    font-size: 12px;
    font-family: 'Fontin', 'Georgia', serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.admin-search-btn:hover {
    border-color: var(--gold-dim);
    color: var(--gold-bright);
}

.admin-clear-btn {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-mid);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.admin-clear-btn:hover {
    color: var(--text);
    border-color: var(--gold-dim);
}

.admin-count {
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Table -------------------------------------------------------------- */
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table thead tr {
    background: var(--bg-header);
}

.admin-table th {
    text-align: left;
    padding: 9px 12px;
    font-family: 'Fontin', 'Georgia', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--gold);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.admin-table td {
    padding: 8px 12px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover td {
    background: var(--bg-hover);
}

.admin-td-id {
    color: var(--text-dim);
    font-size: 11px;
    width: 48px;
}

.admin-td-btag {
    color: var(--gold);
    font-size: 12px;
}

.admin-td-date {
    color: var(--text-dim);
    font-size: 11px;
    white-space: nowrap;
}

.admin-status {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}

.admin-status--active  { background: #0d2010; color: #6aaa44; border: 1px solid #2a5a2a; }
.admin-status--sold    { background: #0e1520; color: #5a88cc; border: 1px solid #1a3a6a; }
.admin-status--expired { background: #1a1410; color: #886644; border: 1px solid #3a2a18; }

.admin-delete-btn {
    padding: 4px 11px;
    background: #1a0808;
    border: 1px solid #6a2020;
    border-radius: 2px;
    color: #cc4444;
    font-size: 11px;
    font-family: 'Fontin', 'Georgia', serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.admin-delete-btn:hover {
    background: #2a0c0c;
    border-color: #cc4444;
    color: #ff6666;
}

.admin-empty {
    padding: 40px;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
}

.admin-pagination {
    margin-top: 18px;
    display: flex;
    justify-content: center;
}

.admin-pagination .pagination {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-pagination .page-item .page-link {
    display: block;
    padding: 5px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-mid);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.admin-pagination .page-item .page-link:hover {
    color: var(--gold);
    border-color: var(--gold-dim);
}

.admin-pagination .page-item.active .page-link {
    color: var(--gold-bright);
    border-color: var(--gold-dim);
    background: var(--bg-section);
}

.admin-pagination .page-item.disabled .page-link {
    color: var(--text-dim);
    opacity: 0.5;
    cursor: default;
}

/* Admin Item-link / Edit-btn ----------------------------------------- */
.admin-item-link {
    color: var(--gold);
    text-decoration: none;
}
.admin-item-link:hover { text-decoration: underline; }

.admin-edit-btn {
    padding: 4px 11px;
    font-size: 11px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-mid);
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.admin-edit-btn:hover {
    border-color: var(--gold-dim);
    color: var(--gold);
}

/* Quality colours in item list --------------------------------------- */
.admin-td-quality          { font-size: 12px; }
.admin-td-quality--unique  { color: #c8843a; }
.admin-td-quality--set     { color: #47a547; }
.admin-td-quality--rare    { color: #d4bc30; }
.admin-td-quality--magic   { color: #6060dd; }
.admin-td-quality--normal  { color: var(--text-mid); }
.admin-td-dim { color: var(--text-dim); font-size: 12px; }

/* Mod entry: view / edit toggle -------------------------------------- */
.admin-section-body--mods { padding: 0; }

.mod-entry {
    border-bottom: 1px solid var(--border);
}
.mod-entry:last-child { border-bottom: none; }

.mod-entry-view {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
}
.mod-entry--editing .mod-entry-view { display: none; }

.mod-entry-ord {
    width: 28px;
    text-align: right;
    color: var(--text-dim);
    font-size: 11px;
    flex-shrink: 0;
}
.mod-entry-text {
    flex: 1;
    font-size: 13px;
}
.mod-entry-stat,
.mod-entry-range {
    width: 110px;
    font-size: 11px;
    text-align: right;
    flex-shrink: 0;
}
.mod-entry-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mod-entry-edit {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 14px;
    background: var(--bg-section);
    border-top: 1px solid var(--border);
}
.mod-entry--editing .mod-entry-edit { display: flex; }

/* Shared edit-form rows (used in both edit and add) ------------------ */
.mod-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mod-edit-row--actions { margin-top: 4px; }
.mod-edit-row--wrap {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
}

.mod-edit-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mod-edit-col--grow { flex: 1; min-width: 200px; }
.mod-edit-col--action { flex-shrink: 0; }

.admin-field-error {
    color: #cc4444;
    font-size: 11px;
    margin-top: 2px;
}

.mod-edit-label {
    width: 120px;
    font-size: 12px;
    color: var(--text-mid);
    flex-shrink: 0;
}
.mod-edit-col .mod-edit-label { width: auto; }
.mod-edit-label--inline { width: auto; }

.mod-edit-input-sm  { width: 80px;  }
.mod-edit-input-md  { width: 240px; }
.mod-edit-input-lg  { flex: 1; min-width: 200px; }

.mod-hash-hint {
    color: var(--text-dim);
    font-size: 11px;
    font-style: italic;
}
.mod-save-btn { font-size: 13px; padding: 7px 18px; }

/* # placeholder highlight -------------------------------------------- */
.mod-hash {
    color: var(--gold-bright);
    font-weight: 700;
    font-family: monospace;
}

/* Admin mod header --------------------------------------------------- */
.admin-mod-header {
    margin-bottom: 16px;
}
.admin-back-link {
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 6px;
}
.admin-back-link:hover { color: var(--gold); }

.admin-mod-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.admin-mod-item-name {
    font-size: 20px;
    font-weight: 700;
}
.admin-mod-item-meta {
    font-size: 12px;
    color: var(--text-dim);
}
.admin-mod-hint {
    font-size: 12px;
    color: var(--text-dim);
    padding: 7px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 3px;
    display: inline-block;
}
.admin-mod-hint code {
    font-family: monospace;
    background: none;
    padding: 0;
}

/* ── Admin Online ─────────────────────────────────────────────────────────── */
.admin-online-window {
    color: var(--text-dim);
    font-size: 11px;
}
.admin-online-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
}
.admin-online-badge--user {
    background: #1a3a1a;
    color: #6dbf6d;
    border: 1px solid #2e5e2e;
}
.admin-online-badge--guest {
    background: #1e1e2e;
    color: #888;
    border: 1px solid #333;
}
.admin-td-ip  { font-family: monospace; font-size: 12px; color: var(--text-dim); }
.admin-td-ua  { font-size: 11px; color: var(--text-dim); max-width: 320px; }

/* ── Item Mods Panel (post form) ──────────────────────────────────────────── */
.post-item-mods {
    display: none;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 12px;
}

.post-item-mods.visible {
    display: block;
}

.item-mods-loading {
    color: var(--text-dim);
    font-style: italic;
}

.item-mods-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.item-mods-title {
    color: var(--gold);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.item-mods-prefill-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.item-mods-prefill-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
}

.item-mods-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-mod-row {
    color: var(--text-mid);
    padding: 2px 0;
    line-height: 1.4;
}

.item-mod-row.mappable {
    color: var(--text);
}