/* ─── Theme variables ─────────────────────────────────────────────────────── */
:root {
  --bg:              #12121e;
  --bg-surface:      #1a1a2e;
  --bg-raised:       #1c1c30;
  --bg-control:      #1e1e3a;
  --bg-hover:        #28285a;
  --bg-active:       #1e1e34;
  --bg-drag-over:    #1e2a4e;
  --border:          #3a3a6e;
  --border-dim:      #2a2a4e;
  --border-faint:    #252540;
  --border-row:      #1e1e38;
  --text:            #d4d4e8;
  --text-2:          #a0a0cc;
  --text-3:          #c0c0e0;
  --text-em:         #d4d4ff;
  --text-h1:         #a0a0ff;
  --text-h2:         #8080cc;
  --text-sub:        #7070a0;
  --text-hint:       #9090b8;
  --text-muted:      #888;
  --text-dim:        #666;
  --text-faint:      #555;
  --accent:          #7eb8ff;
  --accent-hover:    #b3d4ff;
  --color-ok:        #60e060;
  --color-ok-dim:    #80d080;
  --color-warn:      #c08020;
  --color-urgent:    #e08020;
  --color-err:       #e06060;
  --color-crit:      #e04040;
  --color-gold:      #d4aa44;
  --color-star:      #6a6a8a;
  --bg-action:       #1e3a5a;
  --bg-action-hover: #284a70;
  --border-action:   #3a6a9e;
  --bg-update:       #1a3a1a;
  --border-update:   #2a5a2a;
  --text-update:     #80d080;
  --badge-high-bg:   #1a3a1a;
  --badge-high-bd:   #2a5a2a;
  --badge-high-text: #60e060;
  --badge-med-bg:    #2a2a1a;
  --badge-med-bd:    #4a4a2a;
  --badge-med-text:  #d4aa44;
  --row-high:        rgba(0,200,100,0.07);
  --row-med:         rgba(255,190,0,0.06);
  --row-hover:       rgba(255,255,255,0.03);
}

[data-theme="light"] {
  --bg:              #f0f0f8;
  --bg-surface:      #ffffff;
  --bg-raised:       #e8e8f5;
  --bg-control:      #dcdcf0;
  --bg-hover:        #c4c4de;
  --bg-active:       #d0d0ec;
  --bg-drag-over:    #c0cce8;
  --border:          #8888c8;
  --border-dim:      #b0b0cc;
  --border-faint:    #c8c8dc;
  --border-row:      #d8d8ec;
  --text:            #1a1a2e;
  --text-2:          #4040a0;
  --text-3:          #303078;
  --text-em:         #12123a;
  --text-h1:         #2828a0;
  --text-h2:         #4040a8;
  --text-sub:        #5858a0;
  --text-hint:       #7070a0;
  --text-muted:      #606080;
  --text-dim:        #808090;
  --text-faint:      #9898a8;
  --accent:          #1a4ab8;
  --accent-hover:    #0a36a0;
  --color-ok:        #1a8a1a;
  --color-ok-dim:    #2a9a2a;
  --color-warn:      #a06010;
  --color-urgent:    #c05010;
  --color-err:       #c02020;
  --color-crit:      #a01010;
  --color-gold:      #907020;
  --color-star:      #9090a8;
  --bg-action:       #1a50c0;
  --bg-action-hover: #1040a0;
  --border-action:   #0838a0;
  --bg-update:       #d8f0d8;
  --border-update:   #60a060;
  --text-update:     #1a5a1a;
  --badge-high-bg:   #d8f0d8;
  --badge-high-bd:   #60a060;
  --badge-high-text: #1a5a1a;
  --badge-med-bg:    #f0f0d0;
  --badge-med-bd:    #a09020;
  --badge-med-text:  #706010;
  --row-high:        rgba(0,150,50,0.1);
  --row-med:         rgba(180,130,0,0.1);
  --row-hover:       rgba(0,0,0,0.04);
}

[data-theme="tibia"] {
  /* Parchment content on dark-navy outer — mirrors tibia.com's palette */
  --bg:              #f1e0c6;  /* outer container / page bg (lighter parchment) */
  --bg-surface:      #d4c0a1;  /* card / panel fill (darker parchment) */
  --bg-raised:       #5f4d41;  /* dark section-header bars */
  --bg-control:      #d4c0a1;  /* chips, non-action controls */
  --bg-hover:        #c4b091;
  --bg-active:       #b4a081;
  --bg-drag-over:    #c8dcf8;
  --border:          #5f6f6f;  /* tibia.com stone grey border */
  --border-dim:      #7a8a8a;
  --border-faint:    #9aacac;
  --border-row:      #8a9898;  /* row dividers */
  --text:            #5a2800;  /* dark reddish-brown text on parchment */
  --text-2:          #6a3810;
  --text-3:          #5a3010;
  --text-em:         #3a1800;
  --text-h1:         #ffffff;  /* white on dark section-header bars */
  --text-h2:         #f0e8d8;
  --text-sub:        #7a5030;
  --text-hint:       #8a6040;
  --text-muted:      #9a7050;
  --text-dim:        #b08060;
  --text-faint:      #c09070;
  --accent:          #004294;  /* Tibia link blue */
  --accent-hover:    #003070;
  --color-ok:        #287a18;
  --color-ok-dim:    #389a28;
  --color-warn:      #a86010;
  --color-urgent:    #c05010;
  --color-err:       #b02020;
  --color-crit:      #901010;
  --color-gold:      #b87c08;
  --color-star:      #8a7040;
  --bg-action:       #0025d9;  /* Tibia blue — primary action buttons */
  --bg-action-hover: #1a35e0;
  --border-action:   #eed663;  /* gold button border */
  --bg-update:       #d0e8c0;
  --border-update:   #5a9030;
  --text-update:     #1a5810;
  --badge-high-bg:   #d0e8c0;
  --badge-high-bd:   #5a9030;
  --badge-high-text: #1a5810;
  --badge-med-bg:    #f0e890;
  --badge-med-bd:    #9a8828;
  --badge-med-text:  #5a4808;
  --row-high:        rgba(40,160,40,0.12);
  --row-med:         rgba(160,110,0,0.12);
  --row-hover:       rgba(0,0,0,0.06);
}

/* ── Tibia theme overrides ────────────────────────────────────────────────── */
[data-theme="tibia"] body { background: #051122; }

/* Cards: stone grey border + thin black outline matching tibia.com */
[data-theme="tibia"] .card {
  border-color: #5f6f6f !important;
  box-shadow: 0 0 0 1px #1a1a1a !important;
}
/* Text inputs and textareas: white bg */
[data-theme="tibia"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="tibia"] textarea {
  background: #ffffff !important;
  color: #3a1800 !important;
  border-color: #5f6f6f !important;
}
/* Selects / dropdowns: light grey */
[data-theme="tibia"] select {
  background: #e9e9ed !important;
  color: #3a1800 !important;
  border-color: #5f6f6f !important;
}
/* Primary action buttons: blue with gold border + inset glow */
[data-theme="tibia"] .btn,
[data-theme="tibia"] .trigger-btn,
[data-theme="tibia"] .settings-save-btn {
  background: #0025d9 !important;
  border-color: #eed663 !important;
  color: #eed663 !important;
  box-shadow: inset 0 0 0 1px rgba(238,214,99,0.35), inset 0 1px 4px rgba(238,214,99,0.2) !important;
}
[data-theme="tibia"] .btn:hover,
[data-theme="tibia"] .trigger-btn:hover:not(:disabled),
[data-theme="tibia"] .settings-save-btn:hover:not(:disabled) {
  background: #1a35e0 !important;
  border-color: #f5d830 !important;
}
/* Alternating data rows: odd = card fill, even = lighter container fill */
[data-theme="tibia"] tbody tr:nth-child(odd)  { background: #d5c0a1; }
[data-theme="tibia"] tbody tr:nth-child(even) { background: #f1e0c6; }

/* Tasks FAB */
[data-theme="tibia"] #tasks-fab { color: #ffffff; }

/* Listing section: thicker stone border */
[data-theme="tibia"] .listing-section { border-width: 2px; border-color: #5f6f6f; }
[data-theme="tibia"] .listing-section #tab-active,
[data-theme="tibia"] .listing-section #tab-history { background: #f1e0c5; padding: 12px; }

/* Tab bar: dark section header with link-blue text */
[data-theme="tibia"] .main-tab-bar { background: #5f4d41; border-bottom-color: #5f6f6f; }
[data-theme="tibia"] .tab-btn { color: #b0a090 !important; background: transparent !important; }
[data-theme="tibia"] .tab-btn.active { color: #ffffff !important; background: transparent !important; border-bottom-color: #eed663; }
[data-theme="tibia"] .tab-btn:hover { color: #d0c0b0 !important; }

/* Filter panel header bar */
[data-theme="tibia"] .fp-header-title { color: #ffffff; }
[data-theme="tibia"] .fp-header-count { color: #f1e0c6; }
[data-theme="tibia"] .fp-header:hover { background: var(--bg-raised); }

/* Mobile character cards */
[data-theme="tibia"] .char-card { box-shadow: 3px 3px 0 rgba(95, 77, 65, 0.54); border-color: #5f6f6f; }
[data-theme="tibia"] .char-card:active { background: var(--bg-surface) !important; }
[data-theme="tibia"] .card-stats { background: #f1e0c5 !important; border: 1px solid #1a1a1a !important; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5) !important; }

/* Desktop cards */
[data-theme="tibia"] .desktop-card { box-shadow: 3px 3px 0 rgba(95, 77, 65, 0.54); border-color: #5f6f6f; }
[data-theme="tibia"] .desktop-card:hover { background: var(--bg-surface) !important; border-color: #5f6f6f; }
[data-theme="tibia"] .dc-stats { background: #f1e0c5; border: 1px solid #1a1a1a; border-radius: 3px; padding: 6px 10px; margin-top: 8px; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); }

/* Chips: lighter parchment fill */
[data-theme="tibia"] .voc-chip  { background: #f1e0c5; }
[data-theme="tibia"] .extra-chip { background: #d5c0a1; }
[data-theme="tibia"] .item-chip { background: #d5c0a1; border-color: #9a8a7a; color: var(--text-3); }

/* Filter panel + preset buttons: Tibia blue/gold */
[data-theme="tibia"] #filter-count { color: var(--text-2); }
[data-theme="tibia"] .fp-footer > button,
[data-theme="tibia"] .presets-bar button:not(.preset-del-btn) {
  background: #0025d9 !important; border-color: #eed663 !important; color: #eed663 !important;
}
[data-theme="tibia"] .fp-footer > button:hover,
[data-theme="tibia"] .presets-bar button:not(.preset-del-btn):hover:not(:disabled) {
  background: #1a35e0 !important;
}

/* Detail page: heading bars, info cards, chips */
[data-theme="tibia"] header h1,
[data-theme="tibia"] #detail-modal-header h1 { color: #ffffff !important; }
[data-theme="tibia"] header .score-cell,
[data-theme="tibia"] #detail-modal-header .score-cell { color: #ffffff !important; }
[data-theme="tibia"] .info-card { background: #d4c0a1 !important; border-color: #5f6f6f; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); }
[data-theme="tibia"] .comp-btn { background: #d4c0a1; border-color: #5f6f6f; }
[data-theme="tibia"] .media-card { border-color: #5f6f6f; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); }
[data-theme="tibia"] .items-grid { max-height: 280px; overflow-y: auto; padding-right: 4px; }
[data-theme="tibia"] .item-chip.chip-market { color: #2a7a2a !important; border-color: #4a7a4a !important; }
[data-theme="tibia"] .item-chip.chip-proxy  { color: #1a6080 !important; border-color: #2a7090 !important; }
[data-theme="tibia"] h2 {
  background: none !important; color: #5a2800 !important;
  padding-bottom: 6px; border-radius: 0; border-bottom-color: #9a8a7a;
}
[data-theme="tibia"] table thead th { background: #5f4d41 !important; color: #ffffff !important; }
[data-theme="tibia"] .val-gp  { color: #316631; }
[data-theme="tibia"] .val-bid { color: #000; }
[data-theme="tibia"] .val-min-bid { color: #555; }
[data-theme="tibia"] .card-sub,
[data-theme="tibia"] .card-world-row,
[data-theme="tibia"] .dc-sub { font-weight: bold; }
[data-theme="tibia"] .comp-card { background: #d4c0a1 !important; border-color: #5f6f6f !important; }
/* Prices page — TC section + world cards */
[data-theme="tibia"] #tc-section { background: #d5c0a1; border-radius: 4px; padding: 14px 16px; }
[data-theme="tibia"] #tc-section .info-card { background: #f1e0c6 !important; }
/* Prices page — darken inline-colored table cells */
[data-theme="tibia"] #tbl-wrap td:nth-child(2) { color: var(--text-sub) !important; }
[data-theme="tibia"] #tbl-wrap td:nth-child(4) { color: #2a6a2a !important; }
[data-theme="tibia"] #tbl-wrap td:nth-child(6) { color: #7a5000 !important; }
[data-theme="tibia"] #tbl-wrap td:nth-child(7) { color: #0025d9 !important; }
[data-theme="tibia"] #tbl-wrap td:nth-child(8) { color: #3a2a8a !important; }
[data-theme="tibia"] #tbl-wrap td:nth-child(9) { color: var(--text-sub) !important; }
/* Prices page — filter bar label text white (bar is dark bg-raised) */
[data-theme="tibia"] .filter-bar label { color: #ffffff !important; }
/* Alerts — matches modal: darken voc/world/bid/ends spans */
[data-theme="tibia"] #matches-modal .matches-row:not(.matches-hdr) span { color: var(--text) !important; }

*, *::before, *::after { box-sizing: border-box; }
#update-banner {
  position: sticky; top: 0; z-index: 500;
  background: var(--bg-update); border-bottom: 1px solid var(--border-update);
  color: var(--text-update); padding: 8px 20px; font-size: 0.85em;
  display: flex; align-items: center; gap: 12px;
}
#update-banner button { background: var(--bg-update); border: 1px solid var(--border-update); border-radius: 3px;
  color: var(--text-update); padding: 3px 12px; cursor: pointer; font-size: 0.9em; }
#update-banner button:hover { filter: brightness(1.15); }
body   { margin: 0; background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; font-size: 14px; }
a      { color: var(--accent); }
a:hover { color: var(--accent-hover); }
header { background: var(--bg-raised); padding: 16px 24px; border-bottom: 2px solid var(--border);
         display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
         position: sticky; top: 0; z-index: 200; }
header h1 { margin: 0; font-size: 1.4rem; color: var(--text-h1); }
.updated  { color: var(--text-dim); font-size: 0.8rem; }
main  { padding: 20px 24px; }
h2    { color: var(--text-h2); border-bottom: 1px solid var(--border-dim); padding-bottom: 6px; margin-top: 30px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th    { background: var(--bg-control); padding: 9px 10px; text-align: left; white-space: nowrap;
        cursor: pointer; user-select: none; }
th:hover { background: var(--bg-hover); }
td    { padding: 7px 10px; border-bottom: 1px solid var(--border-row); vertical-align: top; }
tr:hover td { background: var(--row-hover); }
.score-high td { background: var(--row-high); }
.score-med  td { background: var(--row-med); }
.score-cell { font-weight: bold; font-size: 1.05em; color: var(--text-em); }
.badge        { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 0.78em; margin: 1px; }
.badge-high   { background: #3d1540; color: #f0a0e0; }
.badge-medium { background: #143320; color: #70d090; }
.badge-low    { background: #102040; color: #70a8d8; }
.status-active    { color: var(--color-ok);   font-weight: bold; }
.status-ended     { color: var(--color-warn); font-weight: bold; }
.status-cancelled { color: var(--color-err);  font-weight: bold; }
.status-sold      { color: var(--text-muted); }
.muted { color: var(--text-faint); }
.btn { display: inline-block; padding: 6px 14px; background: var(--bg-control); border: 1px solid var(--border);
       border-radius: 4px; color: var(--accent); text-decoration: none; font-size: 0.85em; }
.btn:hover { background: var(--bg-hover); color: var(--accent-hover); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 16px 0; }
.info-card { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: 6px; padding: 12px; }
.info-card .label { color: var(--text-dim); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; }
.info-card .value { font-size: 1.05em; color: var(--text-em); margin-top: 4px; font-weight: bold; }
.items-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.item-chip  { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: 4px; padding: 4px 10px; font-size: 0.82em; }
.item-chip .qty { color: var(--text-muted); font-size: 0.85em; margin-left: 4px; }
.item-chip.chip-market   { border-color: #2a5a2a; color: #8fdb8f; }
.item-chip.chip-proxy    { border-color: #1a5060; color: #5eb8d0; }
.item-chip.chip-npc      { border-color: #5a4a1a; color: #d4aa44; }
.item-chip.chip-unpriced { border-color: #252535; color: #505065; }
.item-chip.chip-store    { border-color: #3a2a5a; color: #925be5; }
.item-chip.chip-proxy .qty, .item-chip.chip-npc .qty, .item-chip.chip-unpriced .qty { color: inherit; opacity: 0.7; }
.item-legend { display:flex; gap:18px; margin:10px 0 6px; font-size:0.78em; }
.item-legend .leg-m { color:#8fdb8f; } .item-legend .leg-p { color:#5eb8d0; } .item-legend .leg-n { color:#d4aa44; } .item-legend .leg-u { color:#505065; }
.star-btn { background: none; border: none; cursor: pointer; font-size: 1.05em; padding: 0; line-height: 1;
  transition: transform 0.1s; color: var(--color-star); }
.star-btn:hover { transform: scale(1.35); color: var(--color-gold); }
.row-chk { cursor: pointer; accent-color: var(--accent); width: 14px; height: 14px; }
.scrape-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center;
              background:var(--bg-surface); border:1px solid var(--border-dim); border-radius:6px;
              padding:8px 14px; margin-bottom:10px; }
.scrape-bar button { background:var(--bg-control); border:1px solid var(--border); border-radius:3px;
  color:var(--accent); padding:4px 12px; cursor:pointer; font-size:0.82em; }
.scrape-bar button:hover:not(:disabled) { background:var(--bg-hover); }
.scrape-bar button:disabled { opacity:0.4; cursor:default; }
.scrape-bar .sel-count { color:var(--text-muted); font-size:0.82em; }
.scrape-bar .scrape-status { font-size:0.82em; }
.scrape-bar .scrape-status.ok  { color:var(--color-ok); }
.scrape-bar .scrape-status.err { color:var(--color-err); }
.pagination { display: flex; align-items: center; gap: 10px; margin: 6px 0 22px; font-size: 0.83em; color: var(--text-muted); }
.pagination button { background: var(--bg-control); border: 1px solid var(--border); border-radius: 3px;
  color: var(--accent); padding: 3px 12px; cursor: pointer; font-size: 0.9em; }
.pagination button:hover:not(:disabled) { background: var(--bg-hover); }
.pagination button:disabled { opacity: 0.35; cursor: default; }
.sort-val-btn { background: var(--bg-control); border: 1px solid var(--border); border-radius: 3px;
  color: var(--accent); padding: 2px 9px; cursor: pointer; font-size: 0.75em;
  margin-left: 10px; vertical-align: middle; }
.sort-val-btn:hover { background: var(--bg-hover); }
@media (max-width: 900px) { table { font-size: 12px; } }
th { position: relative; }
.col-resize-handle { position:absolute; right:0; top:0; bottom:0; width:5px;
  cursor:col-resize; user-select:none; z-index:1; }
.col-resize-handle:hover, .col-resize-handle.dragging { background:rgba(126,184,255,0.35); }
.countdown-urgent { color: var(--color-urgent); }
.countdown-critical { color: var(--color-crit); font-weight: bold; }
.tab-bar { display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid var(--border-dim); }
.tab-btn { background:none; border:none; border-bottom:2px solid transparent;
           color:var(--text-2); padding:8px 22px; cursor:pointer; font-size:0.88em;
           margin-bottom:-1px; transition:color 0.15s; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.listing-section { border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.listing-section .tab-bar { margin-bottom:0; }
.menu-toggle { background:none; border:none; cursor:pointer; font-size:1.35em;
               color:var(--text-h1); padding:2px 6px; line-height:1; border-radius:3px; }
.menu-toggle:hover { background:var(--border-dim); }
#menu-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:900; }
#menu-overlay.open { display:block; }
#side-menu { position:fixed; top:0; left:0; height:100%; width:230px;
             background:var(--bg-surface); border-right:1px solid var(--border);
             transform:translateX(-100%); transition:transform 0.22s ease;
             z-index:901; padding:0; overflow-y:auto; }
#side-menu.open { transform:translateX(0); }
.menu-header { display:flex; justify-content:space-between; align-items:center;
               padding:14px 16px; border-bottom:1px solid var(--border-dim); }
.menu-title { color:var(--text-h1); font-size:0.95em; font-weight:bold; }
.menu-close { background:none; border:none; color:var(--text-muted); font-size:1.1em;
              cursor:pointer; padding:0; }
.menu-close:hover { color:var(--text); }
.side-nav { display:flex; flex-direction:column; padding:12px 0; }
.side-nav a { color:var(--text-3); text-decoration:none; padding:10px 20px;
              font-size:0.9em; transition:background 0.12s; display:block; }
.side-nav a:hover { background:var(--border-dim); color:var(--accent); }
.nav-group-label { color:var(--text-faint); font-size:0.7em; text-transform:uppercase;
  letter-spacing:0.09em; padding:10px 20px 3px; display:block; }
.side-nav a.nav-sub { padding-left:30px; color:var(--text-2); }
.side-nav a.nav-sub:hover { background:var(--border-dim); color:var(--accent); }
.hist-batch-nav { display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-size:0.83em; color:var(--text-muted); }
.hist-batch-nav button { background:var(--bg-control); border:1px solid var(--border); border-radius:3px;
  color:var(--accent); padding:3px 10px; cursor:pointer; font-size:0.82em; }
.hist-batch-nav button:hover:not(:disabled) { background:var(--bg-hover); }
.hist-batch-nav button:disabled { opacity:0.35; cursor:default; }
th[data-col] { cursor: grab; }
th[data-col]:active { cursor: grabbing; }
.col-dragging { opacity: 0.4; }
.col-drag-over { box-shadow: inset 2px 0 0 var(--accent); background: var(--bg-drag-over) !important; }
#tasks-fab { position:fixed; bottom:20px; right:20px; background:var(--bg-action);
  border:1px solid var(--border-action); border-radius:20px; color:var(--accent);
  padding:8px 16px; font-size:0.85em; cursor:pointer; z-index:200;
  transition:bottom 0.25s ease; }
#tasks-fab:hover { background:var(--bg-action-hover); }
#tasks-fab.action-bar-up { bottom:76px; }
#tasks-badge { background:#4a8a4a; color:#fff; border-radius:10px;
  padding:1px 6px; font-size:0.78em; margin-left:6px; }
#tasks-panel { position:fixed; bottom:64px; right:20px; width:300px;
  background:var(--bg-surface); border:1px solid var(--border-dim); border-radius:8px;
  padding:14px 16px; z-index:200; display:none; box-shadow:0 4px 20px rgba(0,0,0,0.6); }
#tasks-panel h4 { margin:0 0 10px; font-size:0.85em; color:var(--text-2);
  text-transform:uppercase; letter-spacing:0.05em; }
.task-item { padding:6px 0; border-bottom:1px solid var(--border-row); font-size:0.82em; }
.task-item:last-child { border-bottom:none; }
.task-name a { color:var(--text); text-decoration:none; }
.task-name a:hover { color:var(--accent); }
.task-meta { font-size:0.78em; margin-top:2px; }
.task-meta.running { color:var(--accent); }
.task-meta.queued  { color:var(--color-gold); }
#comps-modal {
  display: none; position: fixed; inset: 0; z-index: 900;
  align-items: center; justify-content: center;
}
#comps-modal.open { display: flex; }
#comps-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.65);
}
#comps-panel {
  position: relative; z-index: 1; background: var(--bg);
  border: 1px solid var(--border-dim); border-radius: 8px;
  width: min(860px, 97vw); max-height: 88vh;
  display: flex; flex-direction: column;
}
#comps-panel-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
}
#comps-panel-title { flex: 1; color: var(--text-em); font-size: 1em; font-weight: bold; }
#comps-panel-close {
  background: none; border: none; color: var(--text-sub); cursor: pointer;
  font-size: 1.1em; padding: 2px 6px; border-radius: 3px; line-height: 1;
}
#comps-panel-close:hover { background: var(--bg-surface); color: var(--color-err); }
.comp-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--border-dim);
  font-size: 0.82em; flex-shrink: 0;
}
.comp-filters label { display: flex; align-items: center; gap: 4px; color: var(--text-2); }
.comp-filters input[type=number], .comp-filters input[type=text] {
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  color: var(--text); padding: 3px 5px;
}
.comp-filters select {
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  color: var(--text); padding: 3px 5px;
}
#comps-panel-results { overflow-y: auto; flex: 1; }
.comp-btn {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--accent); cursor: pointer; font-size: 0.72em; padding: 1px 5px;
  margin-left: 5px; vertical-align: middle; white-space: nowrap;
}
.comp-btn:hover { background: var(--bg-surface); }
.comp-section-filters { margin-bottom: 10px; }
/* ── Comparable sales card list ───────────────────────────────────────────── */
/* Detail page: always show cards, hide table */
#comp-section #comp-results table { display: none !important; }
#comp-section #comp-results { max-height: 420px; overflow-y: auto; }
#comp-section .comp-cards-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* Side panel: hide cards (table used there) */
.comp-cards-list { display: none; }
/* Comp-card base styles for detail page (outside mobile-only media query) */
#comp-section .comp-card {
  background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: 7px; padding: 10px 12px;
}
#comp-section .comp-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
#comp-section .comp-card-name { font-size: 0.95em; color: var(--accent); font-weight: bold; text-decoration: none; }
#comp-section .comp-card-price { font-size: 0.95em; color: var(--text); font-weight: bold; white-space: nowrap; }
#comp-section .comp-card-meta { font-size: 0.8em; color: var(--text-muted); margin-top: 2px; }
/* Base value color classes (dark-theme defaults; overridden per theme below) */
.val-gp  { color: #c8ffc8; }
.val-bid { color: #e8e8f8; }
.val-min-bid { color: #999; }
/* ── Tap-to-show tooltip popup ───────────────────────────────────────────── */
.tip-popup {
  position: fixed; z-index: 9999; max-width: 240px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 10px; font-size: 0.82em; color: var(--text); pointer-events: none;
  opacity: 0; transition: opacity 0.12s ease;
}
.tip-popup.visible { opacity: 1; }
/* ── Form / trigger shared (scrape, schedule, prices, settings pages) ─────── */
.scrape-form { max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.form-section { background:var(--bg-surface); border:1px solid var(--border-dim); border-radius:6px; padding:16px 20px; }
.form-section h3 { margin:0 0 12px; font-size:0.88em; color:var(--text-2); text-transform:uppercase; letter-spacing:0.05em; }
.form-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:8px; }
.form-row label { font-size:0.82em; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.form-row input[type=text], .form-row input[type=number] {
  background:var(--bg); border:1px solid var(--border); border-radius:3px;
  color:var(--text); padding:3px 6px; width:80px; }
.form-row select { background:var(--bg); border:1px solid var(--border); border-radius:3px;
  color:var(--text); padding:3px 6px; }
.mode-toggle { display:flex; gap:0; }
.mode-toggle input { display:none; }
.mode-toggle label { background:var(--bg-control); border:1px solid var(--border); color:var(--text-2);
  padding:6px 20px; cursor:pointer; font-size:0.85em; transition:background 0.15s; }
.mode-toggle label:first-of-type { border-radius:4px 0 0 4px; }
.mode-toggle label:last-of-type  { border-radius:0 4px 4px 0; border-left:none; }
.mode-toggle input:checked + label { background:var(--bg-hover); color:var(--accent); border-color:var(--border); }
.trigger-btn { background:var(--bg-action); border:1px solid var(--border-action); border-radius:4px;
  color:var(--accent); padding:10px 28px; font-size:0.95em; cursor:pointer; align-self:flex-start; }
.trigger-btn:hover:not(:disabled) { background:var(--bg-action-hover); }
.trigger-btn:disabled { opacity:0.45; cursor:default; }
.trigger-status { font-size:0.85em; margin-top:4px; }
.trigger-status.ok  { color:var(--color-ok); }
.trigger-status.err { color:var(--color-err); }
.price-refresh-btn { background:var(--bg-surface); border:1px solid var(--border-dim); border-radius:3px;
  color:var(--accent); padding:3px 10px; font-size:0.8em; cursor:pointer; }
.price-refresh-btn:hover { background:var(--bg-raised); }
/* ── Chip selectors (voc, world, be, pvp) — shared across all pages ─────── */
.voc-chips { display:flex; flex-wrap:wrap; gap:3px; }
.world-chips-scroll { max-height:120px; overflow-y:auto; }
.voc-chip { background:var(--bg-control); border:1px solid var(--border); border-radius:3px;
  color:var(--text-2); padding:2px 7px; font-size:0.78em; cursor:pointer;
  white-space:nowrap; transition:background 0.1s,color 0.1s; }
.voc-chip:hover { background:var(--bg-hover); }
.voc-chip.active { background:var(--bg-hover); border-color:var(--accent); color:var(--accent); }
.form-row .chip-group { font-size:0.82em; color:var(--text-2); display:flex;
  flex-direction:column; gap:4px; }

/* ── Floating action bar ─────────────────────────────────────────────────── */
.action-bar {
  position:fixed; bottom:-80px; left:50%; transform:translateX(-50%);
  background:var(--bg-surface); border:1px solid var(--border); border-radius:8px 8px 0 0;
  padding:10px 20px; display:flex; align-items:center; gap:12px;
  z-index:150; transition:bottom 0.25s ease; white-space:nowrap;
  box-shadow:0 -4px 20px rgba(0,0,0,0.4);
}
.action-bar.visible { bottom:0; }
.action-bar button { background:var(--bg-control); border:1px solid var(--border); border-radius:3px;
  color:var(--accent); padding:5px 14px; cursor:pointer; font-size:0.85em; }
.action-bar button:hover:not(:disabled) { background:var(--bg-hover); }
.action-bar button:disabled { opacity:0.4; cursor:default; }
.action-bar .sel-count { color:var(--text-3); font-size:0.85em; font-weight:bold; }
.action-bar .sel-warn { color:var(--color-gold); font-size:0.8em; }
.action-bar .scrape-status { font-size:0.82em; }
.action-bar .scrape-status.ok  { color:var(--color-ok); }
.action-bar .scrape-status.err { color:var(--color-err); }

/* ── Card sort bar (desktop) + mobile sort bar ───────────────────────────── */
.mobile-sort-label { color:var(--text-muted); font-size:0.78em; white-space:nowrap; }
.mobile-sort-bar { display:none; }
.mobile-sort-bar select,
.card-sort-bar select { background:var(--bg); border:1px solid var(--border); border-radius:3px;
  color:var(--text); padding:5px 8px; font-size:0.85em; }

.card-sort-bar { display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:4px 0 10px; }
.card-sort-right { display:flex; align-items:center; gap:8px; }
.card-sort-select-all { display:flex; align-items:center; gap:6px;
  font-size:0.82em; color:var(--text-2); cursor:pointer; white-space:nowrap; user-select:none; }
.card-sort-select-all input[type=checkbox] { cursor:pointer; }

/* ── Desktop card list ───────────────────────────────────────────────────── */
/* Table is hidden — it serves as the data model for JS filtering/sorting only */
#tab-active table, #tab-history table { display:none !important; }

.desktop-card-list { display:grid; grid-template-columns: repeat(2, 1fr); gap:5px; margin:0 0 12px; }
.desktop-card {
  border-left: 3px solid transparent;
  background:var(--bg-surface); border:1px solid var(--border-faint); border-radius:6px;
  padding:10px 14px 9px; cursor:pointer; transition:border-color 0.12s, background 0.12s;
}
.desktop-card:hover { background:var(--bg-raised); border-color:var(--border); }
.desktop-card.score-high { border-left:3px solid rgba(0,200,100,0.5); }
.desktop-card.score-med  { border-left:3px solid rgba(255,190,0,0.4); }

.dc-top { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.dc-identity { flex:1; min-width:0; }
.dc-name { font-size:1em; font-weight:600; color:var(--text-em); margin-right:5px; }
.dc-sub { display:block; font-size:0.8em; color:var(--text-sub); margin-top:2px; }

.score-badge { display:inline-block; padding:2px 8px; border-radius:3px;
  font-size:0.82em; font-weight:600; white-space:nowrap; }
.score-badge.score-high { background:var(--badge-high-bg); color:var(--badge-high-text); border:1px solid var(--badge-high-bd); }
.score-badge.score-med  { background:var(--badge-med-bg);  color:var(--badge-med-text);  border:1px solid var(--badge-med-bd); }

.dc-stats { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.dc-stat { display:flex; flex-direction:column; min-width:54px; }
.dc-comp { margin-left:auto; }

/* ── Mobile card list (hidden at desktop) ────────────────────────────────── */
.card-list { display:none; }

@media (max-width:640px) {
  .card-sort-bar { display:none; }
  .desktop-card-list { display:none !important; }
  .mobile-sort-bar { display:flex; align-items:center; gap:8px; margin:4px 0 10px; }
  .mobile-sort-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
  .card-list { display:flex; flex-direction:column; gap:10px; margin:0 0 12px; }
  .voc-chip { padding:5px 12px; font-size:0.85em; }
  main { padding-bottom:70px; }
  .scrape-bar { display:none; }
  .char-card {
    background:var(--bg-surface); border:1px solid var(--border-dim); border-radius:8px;
    padding:12px; cursor:pointer; transition:border-color 0.15s;
    -webkit-tap-highlight-color:transparent;
  }
  .char-card:active { border-color:var(--border); background:var(--bg-active); }
  .card-top { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
  .card-chk-wrap { padding-top:2px; flex-shrink:0; }
  .card-chk-wrap input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
  .card-main { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
  .card-name { font-size:1em; color:var(--text-em); font-weight:bold;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card-sub { font-size:0.82em; color:var(--text-2); }
  .card-world-row { font-size:0.82em; color:var(--text); }
  .card-be-text { font-size:0.85em; }
  .card-stats {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
    background:var(--bg); border:1px solid var(--border-dim);
    border-radius:3px; padding:8px; margin-top:8px;
  }
  .card-stat { display:flex; flex-direction:column; gap:2px; }
  .card-footer { display:flex; justify-content:flex-end; margin-top:8px; }
  .stat-lbl { font-size:0.72em; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; font-weight:600; }
  .stat-val { font-size:0.9em; color:var(--text); }
  #comp-results table, #comps-panel-results table { display:none !important; }
  .comp-cards-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .comp-card {
    background:var(--bg-raised); border:1px solid var(--border-dim); border-radius:7px; padding:10px 12px;
  }
  .comp-card-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; }
  .comp-card-name { font-size:0.95em; color:var(--accent); font-weight:bold; text-decoration:none; }
  .comp-card-price { font-size:0.95em; color:var(--text); font-weight:bold; white-space:nowrap; }
  .comp-card-meta { font-size:0.8em; color:var(--text-muted); margin-top:2px; }
  #comp-results, #comps-panel-results { max-height:60vh; overflow-y:auto; }
  .comp-filters { flex-wrap:wrap; gap:5px; padding:8px 10px; font-size:0.78em; }
  .comp-filters input[type=number] { width:2.5rem !important; }
  .comp-filters input[type=text]   { width:5rem   !important; }
}

/* ── Detail modal ─────────────────────────────────────────────────────────── */
#detail-modal {
  display: none; position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 250; flex-direction: column; background: var(--bg);
}
#detail-modal.open { display: flex; }
#detail-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; border-bottom: 2px solid var(--border);
  background: var(--bg-raised); flex-shrink: 0;
}
#detail-modal-header h1 { margin: 0; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#detail-modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
[data-theme="tibia"] #detail-modal { background: #051122; }
[data-theme="tibia"] #detail-modal-header,
[data-theme="tibia"] #detail-modal-body { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
[data-theme="tibia"] #detail-modal-body { background: #f1e0c6; }

/* ── Extra data chips (imbuements, titles, quests, achievements) ─────────── */
.chip-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.chip-scroll { max-height:160px; overflow-y:auto; border:1px solid var(--border-dim); border-radius:4px; padding:6px; margin-top:8px; }
.chip-scroll .chip-row { margin-top:0; }
.extra-chip {
  background:var(--bg-control); border:1px solid var(--border-dim); border-radius:4px;
  padding:3px 9px; font-size:0.82em; color:var(--text-3);
}
.chip-secret { border-color:var(--border); color:#c090e0; font-style:italic; }

/* ── Detail page sections ─────────────────────────────────────────────────── */
.detail-sections-row { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.detail-sections-row .detail-section { flex:1 1 200px; min-width:0; margin-bottom:0; }
.detail-section { border:1px solid var(--border-dim); border-radius:4px; padding:10px 14px; margin-bottom:12px; }
.detail-section h2 { margin-top:0; }
[data-theme="tibia"] .detail-section { border-color:#5f6f6f; background:#f1e0c6; }

/* ── Mount / outfit image grid ───────────────────────────────────────────── */
.media-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  gap:8px; margin-top:6px;
}
.media-card {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--bg-surface); border:1px solid var(--border-faint); border-radius:5px;
  padding:6px 4px 5px;
}
.media-card img { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; }
.media-label {
  font-size:0.65em; color:var(--text-hint); text-align:center;
  line-height:1.2; overflow-wrap:anywhere;
}
.media-subhead {
  margin:10px 0 4px; font-size:0.82em; color:var(--text-hint);
  font-weight:normal; border:none; padding:0;
}

/* ── Settings page ────────────────────────────────────────────────────────── */
.settings-form { max-width:560px; display:flex; flex-direction:column; gap:18px; }
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.theme-opt { cursor:pointer; border:2px solid var(--border-dim); border-radius:6px;
  padding:12px 10px; text-align:center; transition:border-color 0.15s; }
.theme-opt:hover { border-color:var(--border); }
.theme-opt.selected { border-color:var(--accent); }
.theme-swatch { height:32px; border-radius:4px; margin-bottom:7px; }
.theme-label { font-size:0.82em; color:var(--text-2); }
.settings-save-btn { background:var(--bg-action); border:1px solid var(--border-action);
  border-radius:4px; color:var(--accent); padding:9px 28px; font-size:0.92em;
  cursor:pointer; align-self:flex-start; }
.settings-save-btn:hover:not(:disabled) { background:var(--bg-action-hover); }
.settings-save-btn:disabled { opacity:0.45; cursor:default; }
.settings-status { font-size:0.85em; margin-top:4px; }
.settings-status.ok  { color:var(--color-ok); }
.settings-status.err { color:var(--color-err); }
.pw-reqs { list-style:none; margin:4px 0 10px; padding:0; font-size:0.8em; }
.pw-reqs li { padding:1px 0; color:var(--text-faint); }
.pw-reqs li::before { content:'○ '; }
.pw-reqs li.met { color:var(--color-ok); }
.pw-reqs li.met::before { content:'✓ '; }
.settings-input { background:var(--bg); border:1px solid var(--border); border-radius:3px;
  color:var(--text); padding:5px 8px; font-size:0.88em; width:100%; }
.settings-input:focus { outline:1px solid var(--accent); }
.default-filters-preview { background:var(--bg); border:1px solid var(--border-dim);
  border-radius:4px; padding:8px 10px; font-size:0.8em; color:var(--text-hint);
  margin-top:6px; font-family:monospace; max-height:80px; overflow-y:auto; }