:root {
  --bg: #19110b;
  --panel: #2b2117;
  --panel-2: #352719;
  --line: #685037;
  --line-soft: #443321;
  --text: #f4e6c8;
  --muted: #b5a383;
  --gold: #c89443;
  --gold-bright: #efc979;
  --green: #7f9660;
  --red: #c16f64;
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: var(--font-body); }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
  position: relative;
  isolation: isolate;
  background: #080a09;
}
.app-shell::before {
  content: "";
  position: fixed;
  inset: 0 0 0 260px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,10,8,.72), rgba(7,10,8,.91)),
    radial-gradient(circle at 80% 78%, rgba(58,83,63,.24), transparent 30%),
    url("assets/castle-wall-painted.jpg") center / cover;
}
.sidebar, main { position: relative; z-index: 1; }

.sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  border-right: 1px solid #273129;
  background: linear-gradient(180deg, rgba(10,14,12,.985), rgba(8,11,10,.97));
  box-shadow: 8px 0 32px rgba(0,0,0,.2);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.sidebar-close, .sidebar-backdrop { display: none; }
.brand {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  padding: 0 8px;
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #526154;
  border-radius: 8px;
  background: linear-gradient(145deg, #202923, #111613);
  color: #c5d0c7;
  font: 700 13px var(--font-display);
  letter-spacing: -.5px;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.brand strong, .brand small { display: block; }
.brand strong { font: 600 14px var(--font-display); letter-spacing: -.2px; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.nav-list { display: grid; gap: 5px; margin-top: 27px; }
.nav-item {
  width: 100%; height: 43px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 7px;
  background: none; color: #a6aaa6;
  display: flex; align-items: center; gap: 12px;
  text-align: left; cursor: pointer;
}
.nav-item > span { width: 20px; color: #777f79; font-size: 20px; }
.nav-item:hover { color: var(--text); background: #151a17; }
.nav-item.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(105,139,113,.15), rgba(105,139,113,.035));
  border-color: rgba(111,145,118,.18);
  box-shadow: inset 2px 0 #718f78;
}
.nav-item.active > span { color: #9eb5a3; }
.nav-item kbd, .nav-item em, .nav-item b {
  margin-left: auto; color: #747b76; font-size: 10px;
  font-style: normal; font-weight: 600;
}
.nav-item em { padding: 3px 7px; border-radius: 10px; background: #202621; }
.nav-item b { min-width: 20px; text-align: center; }
.side-section { border-top: 1px solid var(--line-soft); margin-top: 21px; padding: 22px 7px; }
.section-label { color: #687069; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 10px; }
.recent-list { display: grid; gap: 3px; }
.recent-list button {
  border: 0; border-radius: 6px; padding: 8px 6px;
  color: #9ba19c; background: transparent; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.recent-list button:hover { background: #151a17; color: var(--text); }
.empty-note { padding: 7px; color: #5f6861; font-size: 12px; }
.sidebar-bottom { display: grid; gap: 13px; margin-top: auto; }
.server-card {
  display: flex; align-items: center; gap: 9px;
  padding: 10px; border: 1px solid #263129; border-radius: 8px;
  background: rgba(16,21,18,.9);
}
.server-card strong, .server-card small { display: block; }
.server-card strong { font-size: 11px; }
.server-card small { margin-top: 2px; color: #727a74; font-size: 9px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #72ad7f; box-shadow: 0 0 0 3px rgba(111,183,128,.1); }
.live { margin-left: auto; color: #7caa87; font-size: 8px; letter-spacing: 1px; }
.profile {
  display: flex; align-items: center; gap: 10px; padding: 14px 3px 0;
  border: 0; border-top: 1px solid #263129; background: none;
  color: var(--text); text-align: left;
}
.profile > span:last-child { margin-left: auto; color: #6d756f; }
.profile strong, .profile small { display: block; font-size: 11px; }
.profile small { margin-top: 2px; color: #6f7771; font-size: 9px; }
.avatar { width: 31px; height: 31px; border: 1px solid #39483e; border-radius: 50%; display: grid; place-items: center; background: #202722; color: #a9bbad; font-size: 10px; }
.logo-avatar { overflow:hidden; }
.logo-avatar img { width:100%;height:100%;object-fit:cover; }
.logo-avatar>span { font-weight:700; }

main { min-width: 0; }
.topbar {
  height: 64px; display: flex; align-items: center; padding: 0 29px;
  position: sticky; top: 0; z-index: 8;
  border-bottom: 1px solid rgba(97,113,101,.2);
  background: rgba(8,11,9,.78); backdrop-filter: blur(16px);
}
.crumb { display: flex; gap: 10px; color: #727a74; font-size: 12px; }
.crumb i { color: #444b46; font-style: normal; }
.crumb strong { color: #bbc1bc; }
.top-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.region-pill { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; gap: 7px; color: #afb6b0; font-size: 10px; }
.region-pill i { width: 6px; height: 6px; border-radius: 50%; background: #6daf7d; }
.icon-button { width: 31px; height: 31px; border: 1px solid #263129; border-radius: 6px; background: #111713; color: #929a94; cursor: pointer; }
.menu-button { display: none; margin-right: 10px; }

.hero {
  min-height: calc(100vh - 64px); padding: 10.5vh 32px 40px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(circle at 50% 12%, rgba(133,155,138,.08), transparent 30%);
}
.hero::before {
  content: ""; position: absolute; width: 620px; height: 620px; top: -390px;
  border: 1px solid rgba(133,155,138,.08); border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(111,137,116,.018), 0 0 0 160px rgba(111,137,116,.012);
}
.hero::after { content: ""; position: absolute; right: -12%; bottom: -22%; width: 48%; height: 48%; pointer-events: none; background: radial-gradient(ellipse, rgba(42,70,48,.18), transparent 67%); filter: blur(20px); }
.crest {
  width: 54px; height: 54px; margin-bottom: 20px; z-index: 1;
  display: grid; place-items: center; border: 1px solid rgba(135,158,140,.36); border-radius: 50%;
  background: linear-gradient(145deg, rgba(105,133,111,.14), rgba(11,15,12,.35));
  color: #a7b7aa; font-size: 23px;
  box-shadow: 0 0 0 7px rgba(92,118,98,.025), inset 0 1px rgba(255,255,255,.04);
}
.logo-crest { overflow:hidden; }
.logo-crest img { width:100%;height:100%;object-fit:cover; }
.logo-crest>span { font:700 13px var(--font-display); }
.eyebrow { color: #97aa9b; font-size: 9px; font-weight: 700; letter-spacing: 2.2px; }
.hero h1 { z-index: 1; margin: 13px 0 12px; font: 600 clamp(32px,4vw,52px)/1.08 var(--font-display); letter-spacing: -2.3px; text-align: center; }
.hero-copy { z-index: 1; max-width: 620px; margin: 0 0 34px; color: #9ba39d; font-size: 15px; line-height: 1.7; text-align: center; }
.search-box {
  width: min(760px,100%); height: 68px; padding: 8px; z-index: 3;
  position: relative; display: flex; align-items: center;
  border: 1px solid #3b4840; border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,27,23,.96), rgba(14,19,16,.97));
  box-shadow: 0 28px 80px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.035);
}
.search-box:focus-within { border-color: #667c6b; box-shadow: 0 0 0 3px rgba(112,145,120,.08), 0 30px 85px rgba(0,0,0,.5); }
.search-icon { margin: 0 13px 0 8px; color: #8fa596; font-size: 25px; }
.search-box input { height: 100%; flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.search-box input::placeholder { color: #68716a; }
.clear-search { display: none; margin-right: 5px; border: 0; background: none; color: #747d76; font-size: 20px; cursor: pointer; }
.search-button { height: 49px; padding: 0 18px; display: flex; align-items: center; gap: 16px; border: 1px solid #607665; border-radius: 8px; background: linear-gradient(180deg,#405345,#304038); color: #f0f2ed; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.08),0 7px 18px rgba(0,0,0,.22); }
.search-button:hover { filter: brightness(1.13); transform: translateY(-1px); }
.suggestions { display: none; position: absolute; top: 75px; left: 0; right: 0; padding: 7px; border: 1px solid #39483e; border-radius: 8px; background: rgba(15,21,17,.985); box-shadow: 0 18px 50px #000; z-index: 20; }
.suggestions.visible { display: block; }
.suggestions button { width: 100%; padding: 11px 12px; border: 0; border-radius: 6px; display: flex; justify-content: space-between; background: none; color: #d5dad6; text-align: left; cursor: pointer; }
.suggestions button:hover { background: #202b24; }
.suggestions small { color: #747d76; }
.catalog-status { z-index: 1; margin-top: 12px; display: flex; align-items: center; gap: 7px; color: #7d857f; font-size: 10px; }
.catalog-status i { width: 6px; height: 6px; border-radius: 50%; background: #8d754d; box-shadow: 0 0 0 3px rgba(199,157,83,.08); }
.catalog-status.ready i { background: #7ca586; box-shadow: 0 0 0 3px rgba(124,165,134,.09); }
.catalog-status.error i { background: #b16c61; }
.quick-searches { z-index: 1; margin-top: 19px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.quick-searches > span { margin-right: 3px; color: #667069; font-size: 8px; letter-spacing: 1.3px; }
.quick-searches button { padding: 6px 10px; border: 1px solid #2e3831; border-radius: 15px; background: rgba(15,20,17,.78); color: #929a94; font-size: 10px; cursor: pointer; }
.quick-searches button:hover { border-color: #5b7161; color: #bed0c1; }
.market-strip { z-index: 1; margin-top: auto; padding-top: 50px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 25px; color: #6e7971; font-size: 10px; }
.market-strip .black-market { color: #a58f69; }

.results { max-width: 1500px; margin: auto; padding: 50px clamp(24px,5vw,76px) 40px; }
.results-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
.results-head .eyebrow { margin: 24px 0 8px; }
.results-head h2 { margin: 0 0 8px; font: 600 30px var(--font-display); letter-spacing: -.8px; }
.results-head p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.back-button { padding: 0; border: 0; background: none; color: #929a94; font-size: 11px; cursor: pointer; }
.back-button:hover { color: #bdc9bf; }
.watch-button { padding: 10px 14px; border: 1px solid #435148; border-radius: 7px; background: rgba(17,23,19,.82); color: #b8c6bb; cursor: pointer; }
.filters { margin-bottom: 15px; padding: 11px; display: flex; flex-wrap: wrap; gap: 9px; border: 1px solid #263129; border-radius: 9px; background: rgba(12,17,14,.86); backdrop-filter: blur(12px); }
.filters label { padding-left: 7px; display: flex; align-items: center; gap: 7px; color: #6d756f; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.filters select { height: 34px; padding: 0 28px 0 9px; border: 1px solid #2a3730; border-radius: 6px; outline: none; background: #151c18; color: #c0c6c1; font-size: 11px; }
.stats-grid { margin: 15px 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.stat-card { padding: 17px; border: 1px solid #27332b; border-radius: 9px; background: linear-gradient(145deg,rgba(20,27,23,.94),rgba(12,17,14,.94)); box-shadow: inset 0 1px rgba(255,255,255,.02); }
.stat-card span { color: #778079; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.stat-card strong { display: block; margin: 8px 0 4px; font: 600 21px var(--font-display); letter-spacing: -.6px; }
.stat-card small { color: #6e776f; font-size: 10px; }
.stat-card.gold strong { color: #c9ae7b; }
.stat-card.positive strong { color: #8fac96; }
.data-card { min-height: 280px; position: relative; overflow: hidden; border: 1px solid #2a362e; border-radius: 10px; background: rgba(13,18,15,.95); box-shadow: 0 22px 65px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
.card-title { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.card-title h3 { margin: 0 0 5px; font: 600 15px var(--font-display); }
.card-title p { margin: 0; color: #737c75; font-size: 10px; }
.data-note { color: #707971; font-size: 9px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); background: #0c110e; color: #69726b; font-size: 8px; letter-spacing: 1px; text-align: left; text-transform: uppercase; }
td { padding: 14px 16px; border-bottom: 1px solid #1d2420; color: #b8bfb9; font-size: 11px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #151c18; }
.city-cell { display: flex; align-items: center; gap: 8px; color: #e0e4e0; font-weight: 600; }
.city-icon { width: 24px; height: 24px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid #465349; border-radius: 4px; background: #172019; color: #94a898; }
.city-icon span { transform: rotate(-45deg); font-size: 10px; }
.variant { color: #b9c9bc; }
.quality { padding: 3px 7px; border: 1px solid #39423b; border-radius: 10px; font-size: 9px; }
.price { color: #e3e7e3; font-weight: 700; }
.buy-price { color: #a3aaa4; }
.spread-positive { color: #84ad8e; }
.spread-negative { color: #b86d64; }
.volume-bar { display: flex; align-items: center; gap: 7px; }
.volume-bar i { width: 34px; height: 3px; overflow: hidden; border-radius: 2px; background: #29312b; }
.volume-bar i::before { content: ""; display: block; width: var(--w); height: 100%; background: #829b87; }
.fresh { color: #80a389; }
.stale { color: #8d7765; }
.loading-state, .empty-state { position: absolute; inset: 72px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: #0e1310; text-align: center; }
.loading-state span, .empty-state p { max-width: 390px; color: #717a73; font-size: 10px; line-height: 1.5; }
.empty-state > span { color: #74877a; font-size: 27px; }
.spinner { width: 27px; height: 27px; margin-bottom: 5px; border: 2px solid #2c342e; border-top-color: #829b87; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.disclaimer { margin: 20px auto 0; color: #58615a; font-size: 9px; line-height: 1.5; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 50; padding: 11px 16px; transform: translate(-50%,20px); border: 1px solid #4c5d50; border-radius: 7px; background: #182019; color: #d8ded9; font-size: 11px; opacity: 0; pointer-events: none; transition: .25s; box-shadow: 0 12px 35px #000; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
body.soft-light { filter: sepia(.03) brightness(1.08); }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell::before { left: 0; }
  .sidebar { width: 260px; position: fixed; left: -270px; z-index: 31; transition: .25s; background: rgba(9,13,10,.99); box-shadow: 20px 0 60px #000; }
  .sidebar.open { left: 0; }
  .sidebar-close { width: 32px; height: 32px; position: absolute; top: 10px; right: 10px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: #151b17; color: #a9b0aa; font-size: 20px; cursor: pointer; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 30; border: 0; background: rgba(0,0,0,.58); backdrop-filter: blur(2px); }
  .sidebar-backdrop.open { display: block; }
  .menu-button { display: block; }
  .topbar { padding: 0 16px; }
  .results { padding: 35px 18px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .data-note { display: none; }
  body.menu-open { overflow: hidden; }
}

@media (max-width: 600px) {
  .hero { padding: 8vh 18px 25px; }
  .hero h1 { letter-spacing: -1.5px; }
  .search-box { height: auto; padding: 8px; display: grid; grid-template-columns: 36px 1fr 25px; }
  .search-box input { height: 47px; }
  .search-icon { margin: 0; }
  .search-button { grid-column: 1 / -1; justify-content: center; margin-top: 5px; }
  .quick-searches > span { width: 100%; text-align: center; }
  .market-strip { display: none; }
  .results-head { align-items: flex-start; gap: 15px; }
  .watch-button { font-size: 0; }
  .watch-button::first-letter { font-size: 18px; }
  .filters label { flex: 1; justify-content: space-between; }
  .filters select { min-width: 110px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 13px; }
  .stat-card strong { font-size: 16px; }
  .card-title p { display: none; }
}

/* Warm illustrated medieval theme */
.app-shell { background: #19110b; }
.app-shell::before {
  background:
    linear-gradient(180deg, rgba(25,16,9,.52), rgba(20,13,8,.76)),
    radial-gradient(circle at 18% 30%, rgba(210,145,58,.13), transparent 30%),
    url("assets/castle-wall-painted.jpg") center / cover;
}
.sidebar {
  border-right: 2px solid #73502d;
  background:
    linear-gradient(90deg, rgba(255,208,117,.035), transparent 9%, transparent 91%, rgba(0,0,0,.16)),
    linear-gradient(180deg,#2b1d11,#1f150d);
  box-shadow: inset -4px 0 rgba(22,12,6,.4), 9px 0 26px rgba(13,8,4,.35);
}
.brand-mark {
  border: 2px solid #997045;
  border-radius: 12px 12px 16px 16px;
  background: linear-gradient(145deg,#76502e,#3c2818);
  color: #f2d69d;
  box-shadow: inset 0 2px rgba(255,225,158,.12),0 3px #1b1008;
}
.brand small,.section-label,.empty-note { color:#9f896c; }
.nav-item { color:#c6b493;border-radius:10px; }
.nav-item:hover { background:#3a2818;color:#f6e6c8; }
.nav-item.active {
  color:#fff0d0;
  border-color:#7b5b36;
  background:linear-gradient(180deg,#49331f,#362416);
  box-shadow:inset 3px 0 #d09b4b,inset 0 1px rgba(255,225,155,.08),0 2px #160d07;
}
.nav-item.active>span { color:#efc979; }
.nav-item em { background:#4a3622;color:#bda67f; }
.side-section,.profile { border-color:#4c3521; }
.recent-list button { color:#bda98a; }
.recent-list button:hover { background:#382719;color:#f4e4c6; }
.server-card { border-color:#67482b;background:#2c1e12;box-shadow:inset 0 1px rgba(255,220,150,.05); }
.topbar { border-bottom:2px solid #614324;background:rgba(34,23,14,.92);box-shadow:0 3px 12px rgba(11,7,4,.3); }
.crumb { color:#9c886c; }.crumb strong { color:#e6d4b2; }
.region-pill,.icon-button { border-color:#684b2e;background:#302116;color:#d8bd8c; }
.hero { background:radial-gradient(circle at 18% 27%,rgba(222,152,62,.1),transparent 31%); }
.hero::before { border-color:rgba(230,179,89,.1);box-shadow:0 0 0 80px rgba(180,119,48,.025),0 0 0 160px rgba(180,119,48,.015); }
.hero::after { background:radial-gradient(ellipse,rgba(83,103,49,.18),transparent 67%); }
.crest { border:2px solid #9c7342;background:linear-gradient(145deg,#5c3e23,#342216);color:#efc979;box-shadow:0 0 0 7px rgba(94,61,30,.2),inset 0 2px rgba(255,226,165,.08); }
.eyebrow { color:#d0a557; }
.hero-copy { color:#c2af91; }
.search-box {
  border:2px solid #745438;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(55,40,25,.98),rgba(39,27,17,.98));
  box-shadow:0 7px 0 #160d07,0 24px 54px rgba(12,7,3,.36),inset 0 2px rgba(255,225,157,.06);
}
.search-box:focus-within { border-color:#b3864d;box-shadow:0 7px 0 #160d07,0 0 0 4px rgba(197,143,66,.1),0 24px 54px rgba(12,7,3,.36); }
.search-icon { color:#e3b767; }
.search-box input { color:#f7e9cc; }.search-box input::placeholder { color:#9d896c; }
.search-button { border:2px solid #d09a4b;border-radius:11px;background:linear-gradient(180deg,#a86f32,#744520);color:#fff0cf;box-shadow:inset 0 2px rgba(255,228,160,.15),0 4px #3d230f; }
.suggestions { border:2px solid #755438;background:#302116;box-shadow:0 7px 0 #160d07,0 18px 40px #0d0804; }
.suggestions button { color:#f1dfbd;align-items:center; }.suggestions button:hover { background:#49331f; }
.suggestion-main { display:flex;align-items:center;gap:10px;min-width:0; }
.suggestion-main img { width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.suggestion-main b { font-weight:600; }
.suggestions small { color:#a99170; }
.catalog-status,.market-strip { color:#9e8a6c; }.catalog-status.ready i { background:#91a65f; }
.quick-searches>span { color:#927e61; }.quick-searches button { border:1px solid #65492f;background:#302116;color:#bea98a;box-shadow:0 2px #140c07; }.quick-searches button:hover { border-color:#b17e40;color:#f0d39a;background:#47301c; }
.market-strip .black-market { color:#e0b565; }
.results-head h2,.watchlist-heading h2 { color:#faedcf; }
.result-title-row { display:flex;align-items:center;gap:16px;margin-top:17px; }
.result-title-row .eyebrow { margin:0 0 7px; }
.item-portrait { width:68px;height:68px;display:grid;place-items:center;border:2px solid #8a6238;border-radius:16px;background:radial-gradient(circle,#5a4026,#2b1d12);box-shadow:inset 0 2px rgba(255,222,154,.08),0 4px #160d07; }
.item-portrait img { width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(0,0,0,.4)); }
.watch-button,.watchlist-search { border:2px solid #84613b;border-radius:10px;background:linear-gradient(180deg,#4d3621,#352316);color:#eacb92;box-shadow:0 3px #180e07; }
.watch-button.selected { border-color:#d5a14e;background:linear-gradient(180deg,#795023,#543314);color:#ffe5a8; }
.filters { border:2px solid #694c31;background:rgba(48,33,20,.95);box-shadow:0 4px #160d07; }
.filters label { color:#b39a78; }.filters select { border:1px solid #765539;background:#3a2819;color:#f0dfc0; }
.stat-card { border:2px solid #65492f;background:linear-gradient(145deg,rgba(62,44,27,.97),rgba(38,26,16,.97));box-shadow:0 4px #160d07,inset 0 2px rgba(255,223,157,.04); }
.stat-card span { color:#aa9270; }.stat-card small { color:#a99171; }.stat-card.gold strong { color:#efc979; }
.data-card { border:2px solid #694b2f;background:rgba(43,29,18,.97);box-shadow:0 6px #160d07,0 22px 50px rgba(13,8,4,.28); }
.card-title,.table-wrap th,td { border-color:#4d3723; }.card-title p,.data-note { color:#9e896b; }
th { background:#2a1c11;color:#a9906f; }td { color:#d2bea0; }tbody tr:hover { background:#49321f; }
.city-icon { transform:none;border:2px solid #80603e;border-radius:9px;background:#4a321e;color:#efc979;box-shadow:0 2px #1a0f08; }.city-icon span { transform:none; }
.quality { border-color:#735538;background:#392719; }.price { color:#faeac9; }.variant { color:#e2b96d; }
.volume-bar i { background:#4c3927; }.volume-bar i::before { background:#b88945; }
.loading-state,.empty-state { background:#2c1e13; }.spinner { border-color:#61472e;border-top-color:#e0a957; }
.toast { border:2px solid #8b653d;background:#49321f;color:#fae7c4;box-shadow:0 4px #160d07,0 12px 30px #0e0804; }

.watchlist-view { max-width:1280px;margin:0 auto;padding:58px clamp(24px,5vw,76px) 50px; }
.watchlist-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px; }
.watchlist-heading h2 { margin:8px 0;font:700 34px var(--font-display);letter-spacing:-1px; }
.watchlist-heading>div>p:last-child { margin:0;color:#b9a486;font-size:13px; }
.watchlist-search { padding:10px 15px;cursor:pointer; }
.watchlist-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.watch-card { position:relative;min-height:144px;border:2px solid #6d4e31;border-radius:16px;background:linear-gradient(145deg,rgba(67,47,29,.97),rgba(42,28,17,.97));box-shadow:0 5px #160d07,inset 0 2px rgba(255,225,161,.05);overflow:hidden; }
.watch-card-open { width:100%;height:100%;padding:18px;display:flex;align-items:center;gap:15px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer; }
.watch-card:hover { transform:translateY(-2px);border-color:#9d7040;box-shadow:0 7px #160d07,0 14px 30px rgba(15,8,3,.2); }
.watch-card-image { width:84px;height:84px;flex:0 0 84px;display:grid;place-items:center;border:2px solid #785638;border-radius:14px;background:radial-gradient(circle,#604529,#2b1d12); }
.watch-card-image img { width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(0,0,0,.4)); }
.watch-card-copy { min-width:0;display:flex;flex-direction:column; }.watch-card-copy small { color:#a38b69;font-size:9px;text-transform:uppercase;letter-spacing:.8px; }.watch-card-copy strong { margin:6px 0;color:#f4e3c1;font:700 16px var(--font-display); }.watch-card-copy em { color:#d0a65e;font-size:10px;font-style:normal; }
.watch-card-remove { position:absolute;right:9px;top:8px;width:27px;height:27px;border:1px solid #765435;border-radius:8px;background:#382519;color:#bda581;cursor:pointer; }.watch-card-remove:hover { background:#6b3526;color:#ffe4c2; }
.watchlist-empty { max-width:500px;margin:12vh auto;text-align:center;padding:38px;border:2px dashed #715336;border-radius:18px;background:rgba(49,33,20,.78); }.watchlist-empty>span { color:#e0af5c;font-size:42px; }.watchlist-empty h3 { margin:12px 0 7px;font:700 20px var(--font-display); }.watchlist-empty p { color:#ad997c;font-size:12px; }.watchlist-empty button { margin-top:10px;padding:10px 16px;border:2px solid #a2733c;border-radius:10px;background:#795028;color:#ffe9bd;cursor:pointer;box-shadow:0 3px #1a0f08; }

@media(max-width:1000px){.watchlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.watchlist-heading{align-items:flex-start;flex-direction:column}.watchlist-grid{grid-template-columns:1fr}.result-title-row{gap:12px}.item-portrait{width:58px;height:58px}.item-portrait img{width:66px;height:66px}}