/* RMT pages (Web Storage / Web Shop / My Trades) — dark GeniusOrc-style. */
.rmt-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 64px; }
.rmt-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: #1b1b1b; border: 1px solid #2a2a2a; border-radius: 10px; padding: 14px 16px; margin: 18px 0;
}
.rmt-toolbar label { color: #9a9a9a; font-size: 13px; margin-right: 6px; }
.rmt-toolbar select, .rmt-toolbar input {
  background: #111; border: 1px solid #333; color: #eee; border-radius: 8px; padding: 8px 10px; font-size: 14px;
}
.rmt-toolbar input[type="number"] { width: 120px; }
.rmt-spacer { flex: 1; }

.rmt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rmt-card {
  background: #1a1a1a; border: 1px solid #2c2c2c; border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s;
}
.rmt-card:hover { border-color: #2a3eef; transform: translateY(-2px); }
.rmt-card .rmt-title { font-weight: 700; color: #f3f3f3; font-size: 15px; line-height: 1.3; }
.rmt-enh { color: #ffd451; font-weight: 700; }

/* item icon (2D) + name header, mirroring the in-game inventory tile */
.rmt-cardhead { display: flex; align-items: center; gap: 10px; }
.rmt-cardhead .rmt-title { flex: 1; min-width: 0; }
.rmt-icon-wrap {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #111; border: 1px solid #2c2c2c; border-radius: 8px;
}
.rmt-icon { max-width: 40px; max-height: 40px; image-rendering: auto; }
.rmt-icon-ph { background: repeating-linear-gradient(45deg, #161616, #161616 6px, #1c1c1c 6px, #1c1c1c 12px); }
.rmt-icon-stack {
  position: absolute; right: 1px; bottom: 0; padding: 0 4px;
  font-size: 11px; font-weight: 800; color: #fff; line-height: 15px;
  background: rgba(0,0,0,.78); border-radius: 6px; pointer-events: none;
}
.rmt-card .rmt-line { color: #9a9a9a; font-size: 13px; display: flex; justify-content: space-between; }
.rmt-card .rmt-price { color: #6df0a8; font-weight: 800; font-size: 16px; }
.rmt-card .rmt-seller { color: #7aa2ff; font-weight: 600; }
.rmt-sockets { color: #c08bff; font-size: 12px; }

/* upgrade badges (enchant % / combine / refine), decoded from item_value */
.rmt-card .rmt-line.rmt-upg-row { justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
.rmt-upg { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.rmt-upg-enc { background: rgba(255,212,81,.16); color: #ffd451; }
.rmt-upg-com { background: rgba(122,162,255,.16); color: #9ab6ff; }
.rmt-upg-ref { background: rgba(192,139,255,.16); color: #c08bff; }
.rmt-upg-xp  { background: rgba(109,240,168,.16); color: #6df0a8; }
.rmt-icon-xp { background: rgba(20,90,55,.92); }
.rmt-trades { color: #6df0a8; font-size: 12px; font-weight: 700; white-space: nowrap; }
.rmt-card .rmt-line.rmt-dim { color: #6a6a6a; font-size: 12px; }
.rmt-card .rmt-line.rmt-note { color: #b9b9b9; font-style: italic; }
.rmt-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.rmt-actions button { flex: 1; min-width: 90px; }

.rmt-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.rmt-ok     { background: rgba(109,240,168,.14); color: #6df0a8; }
.rmt-info   { background: rgba(122,162,255,.14); color: #7aa2ff; }
.rmt-warn   { background: rgba(255,212,81,.16);  color: #ffd451; }
.rmt-danger { background: rgba(255,99,99,.16);   color: #ff8a8a; }
.rmt-muted  { background: rgba(160,160,160,.12); color: #b0b0b0; }

.rmt-section { margin: 26px 0; }
.rmt-section > h2 { color: #f3f3f3; font-size: 18px; margin-bottom: 12px; border-left: 3px solid #2a3eef; padding-left: 10px; }
.rmt-empty { color: #8a8a8a; font-style: italic; padding: 10px 0; }

.rmt-row {
  background: #181818; border: 1px solid #2a2a2a; border-radius: 10px; padding: 12px 14px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap;
}
.rmt-row .rmt-row-main { flex: 1; min-width: 220px; }
.rmt-row .rmt-row-main .t { color: #f0f0f0; font-weight: 700; }
.rmt-row .rmt-row-main .s { color: #8f8f8f; font-size: 13px; }
.rmt-row .rmt-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.rmt-pager { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 20px 0; }
.rmt-pager span { color: #9a9a9a; }

.rmt-notif { background: #181818; border: 1px solid #2a2a2a; border-left-width: 3px; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.rmt-notif.unread { border-left-color: #2a3eef; }
.rmt-notif.read { opacity: .6; }
.rmt-notif-body { color: #e8e8e8; font-size: 14px; }
.rmt-notif-meta { display: flex; gap: 8px; align-items: center; color: #777; font-size: 12px; margin-top: 4px; }

.btn-go { background: #2a3eef; color: #fff; border: none; border-radius: 8px; padding: 9px 14px; font-weight: 700; cursor: pointer; font-size: 14px; }
.btn-go:hover { background: #3a4eff; }
.btn-go.ghost { background: transparent; border: 1px solid #3a3a3a; color: #ddd; }
.btn-go.ghost:hover { border-color: #2a3eef; color: #fff; }
.btn-go.danger { background: #b53a3a; }
.btn-go.danger:hover { background: #c94545; }
.btn-go:disabled { opacity: .5; cursor: not-allowed; }

.rmt-caveat { background: rgba(255,212,81,.08); border: 1px solid rgba(255,212,81,.3); color: #d9c07a; border-radius: 10px; padding: 12px 14px; font-size: 13px; margin: 16px 0; }
.rmt-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 100; }
.rmt-modal-bg.open { display: flex; }
.rmt-modal { background: #1c1c1c; border: 1px solid #333; border-radius: 12px; padding: 22px; width: 360px; max-width: 92vw; }
.rmt-modal h3 { color: #fff; margin-bottom: 14px; }
.rmt-modal .form-group { margin-bottom: 12px; }
.rmt-modal label { display: block; color: #9a9a9a; font-size: 13px; margin-bottom: 5px; }
.rmt-modal input, .rmt-modal select, .rmt-modal textarea {
  width: 100%; background: #111; border: 1px solid #333; color: #eee; border-radius: 8px; padding: 9px 10px;
}
.rmt-modal .rmt-modal-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ---- My Trades 2x2 dashboard ---------------------------------------------- */
.rmt-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 760px) { .rmt-quad { grid-template-columns: 1fr; } }
.rmt-box {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 14px;
  display: flex; flex-direction: column; min-height: 240px; overflow: hidden;
}
.rmt-box-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid #242424; background: #1b1b1b;
}
.rmt-box-head h2 { color: #f3f3f3; font-size: 16px; font-weight: 700; flex: 1; }
.rmt-box-head .rmt-count { color: #8a8a8a; font-size: 12px; font-weight: 700; }
.rmt-box-scrollbtns { display: flex; gap: 6px; }
.rmt-box-scrollbtns button {
  width: 26px; height: 24px; border-radius: 6px; border: 1px solid #3a3a3a;
  background: #232323; color: #ddd; cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
}
.rmt-box-scrollbtns button:hover { border-color: #2a3eef; color: #fff; }
.rmt-box-scrollbtns button:disabled { opacity: .35; cursor: default; }
.rmt-box-body { padding: 12px 14px; overflow-y: auto; flex: 1; max-height: 340px; scroll-behavior: smooth; }
.rmt-box-body::-webkit-scrollbar { width: 8px; }
.rmt-box-body::-webkit-scrollbar-thumb { background: #333; border-radius: 8px; }

/* Sales box flashes when a new sale notification arrives */
.rmt-box.flash { animation: rmtFlash 1s ease-in-out 6; border-color: #ffd451; }
@keyframes rmtFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,212,81,0); }
  50% { box-shadow: 0 0 0 3px rgba(255,212,81,.65); border-color: #ffd451; }
}
.rmt-box-head .rmt-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #ff5a5a; display: none;
  box-shadow: 0 0 6px #ff5a5a; animation: rmtPulse 1s infinite;
}
.rmt-box.flash .rmt-box-head .rmt-dot { display: inline-block; }
@keyframes rmtPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- live toast (bottom-left) --------------------------------------------- */
#rmt-toast-host { position: fixed; left: 18px; bottom: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.rmt-toast {
  display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 360px;
  background: #1d1d22; border: 1px solid #2a3eef; border-left: 4px solid #2a3eef;
  border-radius: 12px; padding: 12px 14px; color: #f0f0f0; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,.5); transform: translateX(-120%); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.rmt-toast.show { transform: translateX(0); opacity: 1; }
.rmt-toast-icon { font-size: 20px; animation: rmtPulse 1.2s infinite; }
.rmt-toast-body { font-size: 13px; line-height: 1.35; }