/*
 * DayFlipping forged interface layer
 *
 * Bespoke material, border and control craft for the compact application.
 * Layout dimensions and table geometry remain owned by styles.css.
 */
:root {
  --mmorpg-iron: #0c0f0d;
  --mmorpg-iron-raised: #181a15;
  --mmorpg-iron-pressed: #080a08;
  --mmorpg-brass-dark: #5d3510;
  --mmorpg-brass: #bd7d24;
  --mmorpg-brass-light: #f2ca70;
  --mmorpg-hairline: rgba(229, 171, 72, 0.23);
  --mmorpg-texture: url("brand/forged-charcoal.webp");
  --mmorpg-control-surface:
    linear-gradient(180deg, rgba(38, 36, 27, 0.98) 0%, rgba(20, 23, 18, 0.98) 46%, rgba(8, 11, 9, 0.99) 100%),
    var(--mmorpg-texture);
}

/* Environmental hero: visible GE architecture with protected content zones. */
.site-header {
  border-bottom-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 223, 147, 0.13),
    inset 0 -7px 12px rgba(0, 0, 0, 0.54),
    0 8px 30px rgba(0, 0, 0, 0.48);
}

.site-header::before {
  background: #050606 url("brand/grand-exchange-hero.webp") center 44% / cover no-repeat;
  opacity: 1;
}

.site-header::after {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(2, 3, 3, 0.56) 0%, rgba(2, 3, 3, 0.18) 39%, transparent 67%),
    linear-gradient(90deg, rgba(2, 3, 3, 0.72) 0%, rgba(2, 3, 3, 0.49) 33%, rgba(2, 3, 3, 0.28) 64%, rgba(2, 3, 3, 0.46) 100%),
    linear-gradient(180deg, rgba(2, 3, 3, 0.12), rgba(2, 3, 3, 0.62));
}

.header-tool-context,
.header-brand,
.view-navigation {
  position: relative;
}

.header-tool-context::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  width: 5px;
  border-left: 1px solid rgba(231, 178, 82, 0.52);
  border-block: 1px solid rgba(231, 178, 82, 0.28);
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.86);
  pointer-events: none;
}

.header-brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 72px;
  border-top: 1px solid rgba(232, 176, 77, 0.22);
  border-bottom: 1px solid rgba(109, 62, 17, 0.38);
  background: radial-gradient(ellipse 270px 72px at 50% 50%, rgba(8, 9, 7, 0.88), rgba(5, 6, 5, 0.47) 52%, transparent 73%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.44));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.header-tool-title h1 {
  color: #e8b957;
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: #e8b957;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.84);
}

.header-metrics small {
  font-size: 8.5px;
  line-height: 1.1;
  letter-spacing: 0.075em;
}

.item-header-description {
  font-size: 10px;
}

.item-header-meta {
  font-size: 8.5px;
  letter-spacing: 0.09em;
  text-shadow: 0 1px 1px #000;
}

.item-meta-access.members {
  color: #e8b957;
}

.item-meta-access.free {
  color: #a9c4e8;
}

.brand-logo {
  filter:
    drop-shadow(0 1px 0 rgba(255, 224, 148, 0.26))
    drop-shadow(0 3px 9px rgba(206, 123, 12, 0.42))
    drop-shadow(0 7px 13px rgba(0, 0, 0, 0.64));
}

/* Full-window forged frame: an overlay only, so no geometry changes. */
#market-view,
.recipe-view {
  background-color: #050706;
  background-image:
    linear-gradient(rgba(5, 7, 6, 0.82), rgba(5, 7, 6, 0.94)),
    var(--mmorpg-texture);
}

.market-shell,
.recipe-shell {
  position: relative;
  isolation: isolate;
  padding: 4px;
  background-color: #090c0a;
  background-image:
    linear-gradient(rgba(9, 12, 10, 0.91), rgba(6, 8, 7, 0.96)),
    var(--mmorpg-texture);
}

.market-shell::after,
.recipe-shell::after {
  content: "";
  position: absolute;
  z-index: 18;
  inset: 0;
  border: 12px solid transparent;
  border-image: url("brand/deco-frame.svg") 12 / 12px stretch;
  opacity: 0.88;
  pointer-events: none;
}

/* Layered bars replace flat fills with charcoal, inlay and a gold seam. */
.toolbar,
.recipe-search-row {
  background-color: #090b09;
  background-image:
    url("brand/gilded-divider.svg"),
    linear-gradient(180deg, rgba(25, 25, 19, 0.94), rgba(8, 11, 9, 0.98)),
    var(--mmorpg-texture);
  background-position: center bottom, 0 0, 0 0;
  background-size: 100% 7px, auto, 256px 256px;
  background-repeat: no-repeat, repeat, repeat;
  background-blend-mode: normal, normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 168, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.88);
}

.recipe-filter-grid {
  background-color: #090b09;
  background-image:
    linear-gradient(180deg, rgba(19, 20, 16, 0.96), rgba(8, 11, 9, 0.98)),
    var(--mmorpg-texture);
  background-position: 0 0, 0 0;
  background-size: auto, 256px 256px;
  background-repeat: repeat, repeat;
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(230, 172, 67, 0.08),
    inset 0 -1px 0 rgba(121, 77, 18, 0.48);
}

.table-meta {
  background-color: #090b09;
  background-image:
    linear-gradient(180deg, rgba(19, 20, 16, 0.96), rgba(8, 11, 9, 0.98)),
    var(--mmorpg-texture);
  background-position: 0 0, 0 0;
  background-size: auto, 256px 256px;
  background-repeat: repeat, repeat;
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(230, 172, 67, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.92);
}

/* Recessed fields and selects. */
.search-box,
select,
.filter-toggle,
.market-watchlist-picker-toggle,
.recipe-level-field input,
.recipe-reset,
.header-filter-control,
.header-filter-control input,
.header-access-filter select {
  border-color: rgba(190, 128, 39, 0.44);
  border-radius: 3px;
  background-color: var(--mmorpg-iron-raised);
  background-image: var(--mmorpg-control-surface);
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 169, 0.09),
    inset 0 -2px 0 rgba(0, 0, 0, 0.76),
    inset 1px 0 0 rgba(255, 255, 255, 0.018),
    0 1px 2px rgba(0, 0, 0, 0.72);
}

select {
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23d5a34a' stroke-width='1.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(38, 36, 27, 0.98), rgba(8, 11, 9, 0.99)),
    var(--mmorpg-texture);
  background-position: right 9px center, 0 0, 0 0;
  background-size: 10px 7px, auto, 256px 256px;
  background-repeat: no-repeat, repeat, repeat;
}

.search-box:focus-within,
select:focus,
.recipe-level-field input:focus {
  border-color: rgba(242, 198, 103, 0.74);
  box-shadow:
    0 0 0 2px rgba(229, 161, 50, 0.08),
    inset 0 1px 0 rgba(255, 238, 195, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.72);
}

/* One tactile construction shared by the two front-page control systems. */
:where(
  .view-navigation button,
  .filter-toggle,
  .market-watchlist-picker-toggle,
  .pagination button,
  .table-config-toggle,
  .recipe-reset,
  .market-watchlist-create button,
  .saved-filter-create button,
  .filter-action-reset,
  .filter-action-save,
  .filter-action-apply,
  .quick-chart-button
) {
  position: relative;
  border-color: rgba(191, 130, 41, 0.46);
  border-radius: 3px;
  background-color: var(--mmorpg-iron-raised);
  background-image: var(--mmorpg-control-surface);
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 174, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.82),
    inset 1px 0 0 rgba(255, 255, 255, 0.025),
    0 2px 4px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 1px #000;
  transition: color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

:where(
  .view-navigation button,
  .filter-toggle,
  .market-watchlist-picker-toggle,
  .pagination button,
  .table-config-toggle,
  .recipe-reset,
  .market-watchlist-create button,
  .saved-filter-create button,
  .filter-action-reset,
  .filter-action-save,
  .filter-action-apply,
  .quick-chart-button
):hover:not(:disabled) {
  border-color: rgba(241, 193, 99, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 206, 0.17),
    inset 0 -2px 0 rgba(0, 0, 0, 0.82),
    0 3px 7px rgba(0, 0, 0, 0.62),
    0 0 11px rgba(220, 146, 31, 0.10);
}

:where(
  .view-navigation button,
  .filter-toggle,
  .market-watchlist-picker-toggle,
  .pagination button,
  .table-config-toggle,
  .recipe-reset,
  .market-watchlist-create button,
  .saved-filter-create button,
  .filter-action-reset,
  .filter-action-save,
  .filter-action-apply,
  .quick-chart-button
):active {
  background-image:
    linear-gradient(180deg, rgba(8, 10, 8, 0.98), rgba(24, 23, 17, 0.98)),
    var(--mmorpg-texture);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.86),
    inset 0 -1px 0 rgba(255, 222, 149, 0.07);
}

.view-navigation button::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(222, 167, 68, 0.15);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  pointer-events: none;
}

.view-navigation button.active {
  color: #ffe19a;
  border-color: #d9992f;
  background-color: #3b270d;
  background-image:
    linear-gradient(180deg, rgba(112, 73, 19, 0.93), rgba(52, 31, 8, 0.96) 54%, rgba(20, 14, 7, 0.99)),
    var(--mmorpg-texture);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 195, 0.27),
    inset 0 -2px 0 rgba(21, 9, 1, 0.96),
    inset 0 0 18px rgba(226, 153, 38, 0.15),
    0 0 0 1px rgba(78, 42, 8, 0.84),
    0 4px 11px rgba(0, 0, 0, 0.48),
    0 0 15px rgba(224, 150, 31, 0.13);
}

.view-navigation button.active::before {
  border-color: rgba(255, 218, 133, 0.40);
}

/* The expanded row's trigger is lit like the primary navigation it mirrors. */
.quick-chart-button::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(222, 167, 68, 0.15);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  pointer-events: none;
}

.quick-chart-button.active {
  color: #ffe19a;
  border-color: #d9992f;
  background-color: #3b270d;
  background-image:
    linear-gradient(180deg, rgba(112, 73, 19, 0.93), rgba(52, 31, 8, 0.96) 54%, rgba(20, 14, 7, 0.99)),
    var(--mmorpg-texture);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 195, 0.27),
    inset 0 -2px 0 rgba(21, 9, 1, 0.96),
    inset 0 0 18px rgba(226, 153, 38, 0.15),
    0 0 0 1px rgba(78, 42, 8, 0.84),
    0 4px 11px rgba(0, 0, 0, 0.48),
    0 0 15px rgba(224, 150, 31, 0.13);
}

.quick-chart-button.active::before {
  border-color: rgba(255, 218, 133, 0.40);
}

.pagination button.active,
.pagination button:hover:not(:disabled) {
  color: #241202;
  border-color: #f3ca72;
  background-color: #d99525;
  background-image:
    linear-gradient(180deg, #f5ce74 0%, #dda43b 42%, #ad6417 100%),
    var(--mmorpg-texture);
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 224, 0.56),
    inset 0 -2px 0 rgba(89, 41, 4, 0.72),
    0 2px 7px rgba(0, 0, 0, 0.62),
    0 0 12px rgba(225, 150, 30, 0.18);
  text-shadow: 0 1px 0 rgba(255, 228, 166, 0.36);
}

/* Data parchment/iron surface: still compact, but no longer flat web rows. */
thead,
.table-rail-cap {
  background-color: #12140f;
  background-image:
    url("brand/gilded-divider.svg"),
    linear-gradient(180deg, rgba(33, 32, 24, 0.98), rgba(12, 15, 12, 0.99)),
    var(--mmorpg-texture);
  background-position: center bottom, 0 0, 0 0;
  background-size: 100% 7px, auto, 256px 256px;
  background-repeat: no-repeat, repeat, repeat;
  background-blend-mode: normal, normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(252, 224, 160, 0.08),
    0 2px 0 rgba(75, 42, 10, 0.76),
    0 7px 17px rgba(0, 0, 0, 0.32);
}

th {
  color: #d0bf95;
  text-shadow: 0 1px 1px #000;
}

.market-table thead > tr:first-child > th:not(:last-child),
.recipe-table thead > tr > th:not(:last-child) {
  border-right-color: rgba(203, 150, 56, 0.20);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.38);
}

.column-filter-row {
  background-color: #0b0d0b;
  background-image:
    linear-gradient(rgba(12, 15, 12, 0.92), rgba(8, 10, 8, 0.98)),
    var(--mmorpg-texture);
}

tbody tr,
tbody tr:nth-child(odd) {
  background-color: #0c0f0d;
  background-image:
    linear-gradient(90deg, rgba(17, 20, 17, 0.95), rgba(9, 12, 10, 0.96)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
}

tbody tr:nth-child(odd) {
  background-image:
    linear-gradient(90deg, rgba(20, 22, 18, 0.96), rgba(11, 14, 11, 0.97)),
    var(--mmorpg-texture);
}

tbody tr:hover {
  background-color: #1a1c16;
  background-image:
    linear-gradient(90deg, rgba(45, 38, 23, 0.78), rgba(20, 22, 17, 0.96) 24%, rgba(13, 16, 13, 0.98)),
    var(--mmorpg-texture);
  box-shadow:
    inset 3px 0 0 rgba(237, 183, 77, 0.76),
    inset 0 1px 0 rgba(255, 220, 143, 0.025);
}

td {
  border-bottom-color: rgba(171, 118, 40, 0.20);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.26);
}

.item-cell strong,
.recipe-product strong {
  color: #f3d88f;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(225, 158, 47, 0.06);
}

.member-badge,
.recipe-skill-badge {
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 231, 174, 0.035), 0 1px 1px rgba(0, 0, 0, 0.64);
}

/* Secondary states use the same frame, texture and divider vocabulary. */
.table-config-menu,
.market-watchlist-menu,
.row-watchlist-popover,
.saved-filter-menu,
.filter-popover {
  border: 7px solid transparent;
  border-image: url("brand/ornate-frame.svg") 16 / 7px stretch;
  border-radius: 2px;
  background-color: #0b0e0c;
  background-image:
    linear-gradient(rgba(15, 18, 14, 0.94), rgba(7, 9, 8, 0.98)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(72, 42, 13, 0.92),
    inset 0 1px 0 rgba(255, 225, 156, 0.06);
}

.table-config-heading,
.saved-filter-heading,
.row-watchlist-heading,
.filter-section-heading,
.filter-popover-actions {
  background-image:
    linear-gradient(180deg, rgba(37, 34, 24, 0.98), rgba(12, 15, 11, 0.98)),
    var(--mmorpg-texture);
  background-position: 0 0, 0 0;
  background-size: auto, 256px 256px;
  background-repeat: repeat, repeat;
  border-bottom-color: rgba(196, 135, 42, 0.32);
}

/* Individual item workspace: same forged system, preserved chart semantics. */
.item-detail-page {
  background-color: #050706;
  background-image:
    linear-gradient(rgba(5, 7, 6, 0.84), rgba(5, 7, 6, 0.96)),
    url("brand/forged-charcoal.webp");
}

.item-detail-shell {
  position: relative;
  isolation: isolate;
  padding: 4px;
  background-color: #080b09;
  background-image:
    linear-gradient(rgba(9, 12, 10, 0.93), rgba(5, 8, 7, 0.98)),
    var(--mmorpg-texture);
}

.item-detail-shell::after {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 0;
  border: 12px solid transparent;
  border-image: url("brand/deco-frame.svg") 12 / 12px stretch;
  opacity: 0.88;
  pointer-events: none;
}

.workspace-topbar {
  border-bottom-color: rgba(193, 133, 42, 0.34);
  background-color: #0b0e0c;
  background-image:
    linear-gradient(180deg, rgba(28, 27, 20, 0.97), rgba(9, 12, 10, 0.99)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 173, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.86);
}

.item-back,
.watch-star,
.external-link-box,
.timeframe-tabs button,
.rail-tabs button,
.watchlist-form button,
.trade-actions button {
  border-color: rgba(191, 130, 41, 0.46);
  border-radius: 3px;
  color: #c8bda8;
  background-color: var(--mmorpg-iron-raised);
  background-image: var(--mmorpg-control-surface);
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 174, 0.11),
    inset 0 -2px 0 rgba(0, 0, 0, 0.80),
    0 2px 4px rgba(0, 0, 0, 0.48);
  text-shadow: 0 1px 1px #000;
  transition: color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.item-back:hover,
.watch-star:hover,
.watch-star:focus-visible,
.external-link-box:hover,
.external-link-box:focus-visible,
.timeframe-tabs button:hover,
.rail-tabs button:hover,
.rail-tabs button:focus-visible,
.watchlist-form button:hover,
.trade-actions button:hover {
  color: #f2ca70;
  border-color: rgba(241, 193, 99, 0.76);
  background-image: var(--mmorpg-control-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 206, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.82),
    0 3px 7px rgba(0, 0, 0, 0.58),
    0 0 11px rgba(220, 146, 31, 0.09);
}

.item-back:active,
.watch-star:active,
.external-link-box:active,
.timeframe-tabs button:active,
.rail-tabs button:active,
.watchlist-form button:active,
.trade-actions button:active {
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.86);
}

.watch-star.watched {
  color: #f2ca70;
  border-color: #d9992f;
  background-image:
    linear-gradient(180deg, rgba(91, 59, 16, 0.96), rgba(24, 16, 7, 0.99)),
    var(--mmorpg-texture);
}

.detail-metrics {
  background: rgba(174, 116, 32, 0.31);
}

.metric {
  background-color: #0b0e0c;
  background-image:
    linear-gradient(180deg, rgba(21, 22, 17, 0.97), rgba(9, 12, 10, 0.99)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow: inset 0 1px 0 rgba(255, 230, 169, 0.035);
}

.metric small {
  color: #958a76;
}

.metric strong {
  color: #f1e5cf;
  text-shadow: 0 1px 1px #000;
}

.trading-workspace,
.workspace-chart,
.chart-card {
  background-color: #070a09;
  background-image:
    linear-gradient(rgba(7, 10, 9, 0.96), rgba(6, 9, 8, 0.99)),
    var(--mmorpg-texture);
}

.chart-card {
  border-bottom-color: rgba(185, 127, 39, 0.32);
}

.chart-controls {
  border-bottom-color: rgba(190, 130, 40, 0.28);
  background-color: #0b0e0c;
  background-image:
    linear-gradient(180deg, rgba(27, 27, 20, 0.97), rgba(9, 12, 10, 0.99)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow: inset 0 1px 0 rgba(255, 233, 176, 0.05);
}

.timeframe-tabs {
  border-color: rgba(184, 124, 36, 0.48);
  border-radius: 4px;
  background-color: #070907;
  background-image:
    linear-gradient(rgba(8, 10, 8, 0.95), rgba(4, 6, 5, 0.98)),
    var(--mmorpg-texture);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.82);
}

.timeframe-tabs button {
  border: 1px solid transparent;
  box-shadow: none;
}

.timeframe-tabs button.active {
  color: #241202;
  border-color: #f0c66b;
  background-color: #d99525;
  background-image:
    linear-gradient(180deg, #f3ca70 0%, #d89c35 45%, #a45c14 100%),
    var(--mmorpg-texture);
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 224, 0.54),
    inset 0 -2px 0 rgba(89, 41, 4, 0.70),
    0 2px 7px rgba(0, 0, 0, 0.56);
  text-shadow: 0 1px 0 rgba(255, 228, 166, 0.32);
}

.overlay-controls label,
.chart-heading .kicker,
.rail-heading .kicker {
  color: #b79a61;
}

.chart-heading .kicker,
.legend {
  text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.9);
}

.chart-heading h3,
.rail-heading h3,
.setup-card h3 {
  color: #f1ddaa;
  font-family: "Cinzel", Georgia, serif;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.78);
}

.chart-inspector {
  border-color: rgba(176, 119, 34, 0.44);
  border-radius: 3px;
  color: #948a79;
  background-color: #0b0e0c;
  background-image:
    linear-gradient(rgba(15, 18, 14, 0.95), rgba(8, 11, 9, 0.98)),
    var(--mmorpg-texture);
  box-shadow: inset 0 1px 0 rgba(255, 228, 166, 0.04);
}

.chart-inspector > div {
  border-left-color: rgba(171, 116, 35, 0.25);
}

.inspector-date {
  background: rgba(38, 31, 19, 0.66);
}

.setup-card,
.indicator-grid {
  border-color: rgba(183, 124, 37, 0.46);
  border-radius: 3px;
  background-color: #0b0e0c;
  background-image:
    linear-gradient(rgba(16, 19, 15, 0.95), rgba(7, 10, 8, 0.99)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 170, 0.045),
    0 5px 15px rgba(0, 0, 0, 0.32);
}

.indicator {
  border-right-color: rgba(164, 110, 33, 0.25);
  border-bottom-color: rgba(164, 110, 33, 0.25);
  background-image:
    linear-gradient(rgba(16, 18, 14, 0.82), rgba(8, 11, 9, 0.92)),
    var(--mmorpg-texture);
}

.research-rail {
  border-left-color: rgba(198, 138, 43, 0.48);
  background-color: #080b09;
  background-image:
    linear-gradient(rgba(10, 13, 10, 0.91), rgba(6, 9, 7, 0.98)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow: inset 1px 0 0 rgba(255, 223, 151, 0.035);
}

.rail-tabs {
  border-bottom-color: rgba(187, 127, 38, 0.32);
  background-color: #080a08;
  background-image:
    linear-gradient(180deg, rgba(23, 23, 17, 0.96), rgba(7, 10, 8, 0.99)),
    var(--mmorpg-texture);
}

.rail-tabs button {
  border-color: rgba(179, 120, 35, 0.26);
}

.rail-tabs button.active {
  color: #f5d781;
  border-color: rgba(224, 167, 65, 0.62);
  background-image:
    linear-gradient(180deg, rgba(84, 55, 16, 0.94), rgba(25, 18, 8, 0.98)),
    var(--mmorpg-texture);
  box-shadow:
    inset 0 1px 0 rgba(255, 237, 189, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.78),
    0 0 10px rgba(218, 144, 27, 0.08);
}

.rail-section {
  border-bottom-color: rgba(174, 117, 35, 0.28);
  background-image:
    linear-gradient(rgba(9, 12, 10, 0.84), rgba(6, 9, 7, 0.92)),
    var(--mmorpg-texture);
}

.price-check-card,
.research-field,
.flip-calculation,
.price-submission-card,
.trade-card,
.watchlist-row {
  border-color: rgba(172, 116, 35, 0.40);
  border-radius: 3px;
  background-color: #0b0e0c;
  background-image:
    linear-gradient(rgba(16, 19, 15, 0.94), rgba(7, 10, 8, 0.98)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow: inset 0 1px 0 rgba(255, 231, 174, 0.035);
}

.recent-price-card {
  border-left-color: rgba(98, 216, 255, 0.72);
}

.instant-check-card {
  border-left-color: rgba(48, 213, 138, 0.68);
}

.research-field input,
.order-form input,
.order-edit-grid input,
.watchlist-form input {
  border-color: rgba(165, 111, 33, 0.48);
  border-radius: 3px;
  color: #e8dfcf;
  background-color: #060806;
  background-image:
    linear-gradient(180deg, rgba(5, 7, 6, 0.98), rgba(10, 12, 9, 0.98)),
    var(--mmorpg-texture);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.76),
    0 1px 0 rgba(255, 228, 164, 0.025);
}

.research-field:focus-within,
.price-check-card:focus-within {
  background-color: #0d110d;
  background-image:
    linear-gradient(rgba(20, 22, 17, 0.95), rgba(9, 12, 9, 0.98)),
    var(--mmorpg-texture);
  box-shadow: 0 0 0 2px rgba(211, 147, 45, 0.09);
}

.info-tooltip-trigger,
.check-card-heading > span {
  border-color: rgba(191, 132, 43, 0.50);
  color: #d7ae59;
  background-color: rgba(35, 27, 15, 0.72);
}

.info-tooltip-trigger:hover,
.info-tooltip-trigger:focus-visible {
  color: #ffe19a;
  border-color: rgba(241, 193, 99, 0.76);
  background: rgba(104, 68, 18, 0.34);
}

.flip-calculation > div {
  border-right-color: rgba(164, 110, 33, 0.28);
  background-color: rgba(6, 9, 7, 0.86);
  background-image: var(--mmorpg-texture);
}

.ticket-actions button,
.rail-primary,
.order-form .primary-action {
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -2px 0 rgba(0, 0, 0, 0.34),
    0 3px 7px rgba(0, 0, 0, 0.38);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.10);
}

.instant-submit,
.rail-primary,
.order-form .primary-action {
  border-color: #38d695;
  background: linear-gradient(180deg, #40cf91, #23845e 60%, #15513b);
}

.rail-primary.recent-submit {
  border-color: #53c7e8;
  background: linear-gradient(180deg, #58bedb, #2d829e 60%, #1c5368);
}

.checker-divider span {
  background: #090c0a;
}

.rail-subheading {
  border-top-color: rgba(169, 113, 34, 0.28);
}

.rail-empty {
  border-color: rgba(154, 103, 31, 0.42);
  border-radius: 3px;
  color: #817868;
  background: rgba(7, 10, 8, 0.62);
}

.core-tooltip {
  border-color: rgba(199, 139, 44, 0.58);
  border-radius: 3px;
  color: #dfd5c2;
  background-color: #0b0e0c;
  background-image:
    linear-gradient(rgba(18, 20, 15, 0.97), rgba(7, 10, 8, 0.99)),
    var(--mmorpg-texture);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.72);
}

@media (max-width: 760px) {
  .header-brand::before {
    width: 180px;
  }

  .site-header::before {
    background-position: 64% 44%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .view-navigation button,
    .filter-toggle,
    .market-watchlist-picker-toggle,
    .pagination button,
    .table-config-toggle,
    .recipe-reset
  ) {
    transition: none;
  }
}

/* Player population modal: the same forged plate, deco frame and gilded seams
   the shells use, so the popover reads as part of the same interface. */
.population-dialog {
  border: 12px solid transparent;
  border-image: url("brand/deco-frame.svg") 12 / 12px stretch;
  border-radius: 0;
  background-color: #090c0a;
  background-image:
    linear-gradient(rgba(9, 12, 10, 0.93), rgba(6, 8, 7, 0.97)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow:
    0 30px 92px rgba(0, 0, 0, 0.82),
    0 0 0 1px rgba(72, 42, 13, 0.9);
}

.population-dialog::backdrop {
  background: rgba(3, 4, 3, 0.8);
  backdrop-filter: blur(5px);
}

.population-modal-header {
  border-bottom-color: rgba(196, 135, 42, 0.32);
  background-color: #090b09;
  background-image:
    url("brand/gilded-divider.svg"),
    linear-gradient(180deg, rgba(25, 25, 19, 0.94), rgba(8, 11, 9, 0.98)),
    var(--mmorpg-texture);
  background-position: center bottom, 0 0, 0 0;
  background-size: 100% 7px, auto, 256px 256px;
  background-repeat: no-repeat, repeat, repeat;
  background-blend-mode: normal, normal, soft-light;
}

.population-modal-header h2 {
  color: #e8b957;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.population-modal-header > button {
  border-color: rgba(191, 130, 41, 0.46);
  border-radius: 3px;
  color: #c9a45c;
  background-color: var(--mmorpg-iron-raised);
  background-image: var(--mmorpg-control-surface);
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 174, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.82),
    0 2px 4px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 1px #000;
}

.population-modal-header > button:hover {
  color: #ffe19a;
  border-color: rgba(241, 193, 99, 0.76);
}

.population-summary,
.population-chart-controls {
  border-bottom-color: rgba(121, 77, 18, 0.48);
  background-color: #090b09;
  background-image:
    linear-gradient(180deg, rgba(19, 20, 16, 0.96), rgba(8, 11, 9, 0.98)),
    var(--mmorpg-texture);
  background-position: 0 0, 0 0;
  background-size: auto, 256px 256px;
  background-repeat: repeat, repeat;
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 1px 0 rgba(230, 172, 67, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.9);
}

.population-summary > div {
  border-right-color: rgba(121, 77, 18, 0.34);
}

.population-summary small {
  color: #b08c48;
}

.population-summary strong {
  color: #f2e2be;
}

.population-summary span,
.population-chart-controls > span {
  color: #8a7c62;
}

.population-inspector {
  border-color: rgba(146, 96, 24, 0.46);
  border-radius: 2px;
  color: #a8916a;
  background-color: #0b0e0c;
  background-image:
    linear-gradient(180deg, rgba(15, 18, 14, 0.94), rgba(7, 9, 8, 0.98)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow: inset 0 1px 0 rgba(255, 225, 156, 0.05);
}

.population-inspector > div {
  border-left-color: rgba(146, 96, 24, 0.36);
}

.population-inspector small {
  color: #8a7c62;
}

.population-inspector strong {
  color: #f2e2be;
}

.population-chart-wrap {
  background: #070a09;
}

.population-source-note {
  border-top-color: rgba(121, 77, 18, 0.42);
  color: #8a7c62;
  background-color: #090b09;
  background-image:
    linear-gradient(180deg, rgba(15, 18, 14, 0.94), rgba(7, 9, 8, 0.98)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
}

.population-source-note > span {
  color: var(--mmorpg-brass-light);
}

.population-source-note a {
  color: #e8b957;
}

/* Removal confirmation wears the same forged plate as the other dialogs. */
.confirm-dialog {
  border: 12px solid transparent;
  border-image: url("brand/deco-frame.svg") 12 / 12px stretch;
  border-radius: 0;
  background-color: #090c0a;
  background-image:
    linear-gradient(rgba(9, 12, 10, 0.94), rgba(6, 8, 7, 0.98)),
    var(--mmorpg-texture);
  background-blend-mode: normal, soft-light;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.8);
}

.confirm-dialog::backdrop {
  background: rgba(3, 4, 3, 0.76);
}

.confirm-shell h2 {
  color: #e8b957;
}

.confirm-actions button {
  border-color: rgba(191, 130, 41, 0.46);
  border-radius: 3px;
  color: #c9a45c;
  background-color: var(--mmorpg-iron-raised);
  background-image: var(--mmorpg-control-surface);
  background-blend-mode: normal, soft-light;
  text-shadow: 0 1px 1px #000;
}

.confirm-actions button:hover {
  color: #ffe19a;
  border-color: rgba(241, 193, 99, 0.76);
}

.confirm-actions .confirm-accept,
.confirm-actions .confirm-accept:hover {
  color: #2a0a0d;
  border-color: #d9535f;
  background-image: linear-gradient(180deg, #f07984, #b9313d);
  text-shadow: none;
}