:root {
  color-scheme: light;
  --bg: #e8e0d5;
  --card: #eee0cd;
  --text: #2f2419;
  --primary: #2e67d6;
  --line: #c5af95;
  --panel-border: #ad8c6d;
  --panel-shadow: rgba(55, 36, 19, 0.2);
  --heading-band: #634027;
  --heading-band-soft: #7a5739;
  --accent-gold: #d7bb84;
  --surface-soft: #f6eddf;
  --menu-surface: #4f3522;
  --ui-section-vertical-space: 14px;
  --ui-card-padding: 10px;
  --ui-card-radius: 12px;
  --ui-title-font-size: 1.5rem;
  --ui-body-font-size: 16px;
  --ui-button-height: 38px;
  --ui-button-radius: 8px;
  --ui-icon-size: 16px;
  --ui-mobile-card-columns: 2;
  --ui-desktop-max-width: 920px;
  --mobile-bottom-nav-height: 60px;
  --mobile-bottom-nav-item-bg: linear-gradient(180deg, #f9efdf 0%, #ead8c0 100%);
  --mobile-bottom-nav-item-border: #bfa082;
  --mobile-bottom-nav-item-text: #4a311f;
  --mobile-bottom-nav-item-active-bg: linear-gradient(180deg, #f5dfba 0%, #e8cba1 100%);
  --mobile-bottom-nav-item-active-border: #866143;
  --mobile-bottom-nav-item-active-text: #332112;
  --mobile-bottom-nav-item-active-accent: #9a6f49;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: var(--ui-body-font-size);
  background: linear-gradient(180deg, #f1ece3 0%, var(--bg) 56%, #ddd2c3 100%);
  color: var(--text);
}

body.is-modal-open {
  overflow: hidden;
}

.app {
  max-width: var(--ui-desktop-max-width);
  margin: 0 auto;
  padding: 14px;
  padding-top: 72px;
  padding-bottom: calc(14px + var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
}

.app.is-home-mode {
  padding-bottom: 14px;
}

.app.is-admin-bazaar-mode {
  max-width: min(1380px, calc(100vw - 24px));
}

.hamburger-button {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, #f8f1e4 0%, #ead9c1 100%);
  color: #4f3522;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  z-index: 1002;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(37, 23, 11, 0.5);
  z-index: 1000;
}

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: min(80vw, 320px);
  height: 100%;
  max-height: 100dvh;
  background: linear-gradient(180deg, #6b4a31 0%, var(--menu-surface) 100%);
  border-right: 1px solid #3e2819;
  box-shadow: 2px 0 18px rgba(30, 17, 8, 0.3);
  padding: 16px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  z-index: 1001;
}

.side-menu.is-open {
  transform: translateX(0);
}

.side-menu-header h2 {
  margin: 8px 0 12px;
  font-size: 1.1rem;
  color: #fdf2df;
  border-bottom: 1px solid rgba(245, 219, 176, 0.42);
  padding-bottom: 10px;
}

.side-menu-nav {
  display: grid;
  gap: 8px;
}

.side-menu-group {
  border: 1px solid rgba(239, 213, 176, 0.3);
  border-radius: 10px;
  padding: 8px;
  background: rgba(46, 29, 17, 0.2);
}

.side-menu-group-title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: #f7e5c7;
  letter-spacing: 0.06em;
}

.side-menu-sub-list {
  display: grid;
  gap: 6px;
}

.side-menu-item {
  width: 100%;
  text-align: left;
  border: 1px solid #89674a;
  background: linear-gradient(180deg, #f4e7d5 0%, #e5d1b7 100%);
  color: #422b1b;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 700;
  border-left: 3px solid var(--accent-gold);
}

.side-menu-sub-item {
  padding: 10px 12px;
  font-size: 0.92rem;
}

.app-header h1 {
  margin: 0 0 8px;
  font-size: var(--ui-title-font-size);
  color: #4f3522;
  letter-spacing: 0.01em;
}

.app-header-subtitle {
  margin: 0 0 6px;
  font-size: 0.86rem;
  color: #5f4028;
}

.app-header p {
  margin: 0;
  color: #4f3a29;
}

#contentSiteIntro,
#contentSiteSummary {
  max-width: 44em;
  line-height: 1.5;
}

#contentSiteIntro,
#contentSiteSummary {
  font-size: 0.92rem;
}

#contentSiteSummary {
  margin-top: 4px;
  white-space: pre-line;
}

.app-header-price-note {
  margin: 0 0 5px;
  padding: 5px 7px;
  border: 1px solid #d7c3a8;
  border-radius: 8px;
  background: rgba(247, 239, 227, 0.72);
  color: rgba(72, 51, 33, 0.82);
  font-size: 0.75rem;
  line-height: 1.5;
}

.app-header {
  margin-bottom: calc(var(--ui-section-vertical-space) - 2px);
  padding: 9px 11px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: linear-gradient(180deg, #f2e7d7 0%, #e4d0b7 100%);
  box-shadow: 0 4px 14px var(--panel-shadow);
}

.site-search {
  margin-top: 10px;
  position: relative;
}

.site-search.is-hidden {
  display: none;
}

.site-search-field {
  margin: 0;
}

.site-search-field span {
  font-size: 0.82rem;
}

.site-search-field input {
  font-size: 0.95rem;
}

.site-search-result-wrap {
  margin-top: 6px;
  display: grid;
  gap: 6px;
}

.home-shortcut-note {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #ccb391;
  border-radius: 10px;
  background: rgba(251, 245, 236, 0.86);
}

.home-shortcut-note h3 {
  margin: 0 0 5px;
  font-size: 0.9rem;
  color: #503422;
}

.home-shortcut-note p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #5c4330;
}

.home-shortcut-note-sub {
  margin-top: 4px !important;
  font-size: 0.76rem !important;
  color: #6a4f3a !important;
}

.home-shortcut-note.is-collapsed {
  display: none;
}

.home-shortcut-note-bottom {
  margin-top: calc(var(--ui-section-vertical-space) + 8px);
  margin-bottom: 6px;
  border-color: #d7c5ad;
  background: rgba(248, 243, 235, 0.86);
}

.site-search-result-item {
  width: 100%;
  text-align: left;
  border: 1px solid #c2a27f;
  border-radius: 10px;
  background: #fff9f0;
  padding: 8px 10px;
  color: #3f2a1a;
}

.site-search-result-main {
  margin: 0;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.4;
}

.site-search-result-meta {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.site-search-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.72rem;
  line-height: 1.2;
  border: 1px solid #ceb08f;
  background: #f8efe2;
  color: #5a3c25;
}

.site-search-chip-type {
  background: #f3e2c6;
  border-color: #cba272;
  color: #4f3018;
  font-weight: 700;
}

.site-search-empty {
  margin: 0;
  border: 1px dashed #cdb089;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 0.8rem;
  color: #6d4c31;
  background: rgba(255, 249, 240, 0.9);
}

.assist-search-candidate-wrap {
  margin-top: 6px;
  display: grid;
  gap: 6px;
  max-height: min(48vh, 360px);
  overflow: auto;
  overscroll-behavior: contain;
}

.assist-search-candidate-wrap[hidden] {
  display: none !important;
}

.assist-search-candidate-item {
  min-height: 48px;
}

.assist-search-candidate-note {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #6a4d36;
  white-space: normal;
}

.assist-search-empty {
  margin-top: 0;
}

.tool-site-search-dock {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 920;
  display: none;
  justify-items: end;
  gap: 6px;
}

.tool-site-search-dock.is-visible {
  display: grid;
}

.tool-site-search-toggle {
  min-height: 40px;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.84rem;
}

.tool-site-search-panel {
  width: min(360px, calc(100vw - 24px));
  border: 1px solid #d6c1a9;
  border-radius: 10px;
  background: #fffaf3;
  box-shadow: 0 8px 20px rgba(50, 33, 20, 0.2);
  padding: 8px;
}

.app-header.is-collapsed {
  display: none;
}

.top-quick-access {
  margin-bottom: var(--ui-section-vertical-space);
  padding: 10px;
  border: 1px solid #bfa384;
  border-radius: 12px;
  background: rgba(247, 238, 224, 0.9);
}

.top-quick-access.is-collapsed {
  display: none;
}

.top-quick-access h2,
.top-update-list h2 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #4f3522;
}

.top-tool-grid {
  display: grid;
  gap: 10px;
}

.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.home-quick-card {
  border: 1px solid #b89470;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7ecdb 0%, #ead7bc 100%);
  min-height: 74px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #3f2a1a;
  font-weight: 700;
  font-size: 0.72rem;
  text-align: center;
}

.home-quick-card-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.home-quick-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(96, 63, 40, 0.08);
  color: #5a3c27;
  font-size: 0.78rem;
}

.side-menu-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.home-pin-toggle {
  border: 1px solid #89674a;
  border-radius: 10px;
  padding: 8px 7px;
  min-width: 66px;
  background: linear-gradient(180deg, #f5e6cf 0%, #ead2b2 100%);
  color: #422b1b;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}

.home-pin-toggle[aria-pressed="true"] {
  border-color: #7a522c;
  background: linear-gradient(180deg, #f8dc9b 0%, #e9bf72 100%);
}

.top-quick-access-note {
  margin: -2px 0 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #5a3c27;
}

.top-quick-access-note-sub {
  margin-top: -6px;
  margin-bottom: 8px;
  font-size: 0.71rem;
}

.top-quick-access-note-memo {
  margin-top: -2px;
  padding: 7px 9px;
  border: 1px solid rgba(184, 148, 112, 0.7);
  border-radius: 10px;
  background: rgba(255, 250, 242, 0.82);
  color: #5a3c27;
}

.top-tool-card {
  display: grid;
  gap: 4px;
  border-radius: 12px;
  text-align: left;
}

.top-tool-card strong {
  font-size: 0.98rem;
}

.top-tool-card span {
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 500;
}

.top-tool-card-group {
  border: 1px solid #bfa384;
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f4e7d5 0%, #e5d1b7 100%);
}

.top-tool-card-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: #422b1b;
}

.top-tool-card-description {
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #4a3120;
}

.top-tool-link-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.top-tool-link-button {
  text-align: center;
  padding: 10px 8px;
}

.top-update-list {
  margin-top: 0;
  margin-bottom: var(--ui-section-vertical-space);
}

.top-update-list.is-collapsed {
  display: none;
}

.top-update-list ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}

.top-update-list li {
  font-size: 0.83rem;
  line-height: 1.5;
}

.top-update-view-all-button {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #89674a;
  background: linear-gradient(180deg, #f4e7d5 0%, #e5d1b7 100%);
  border-left: 3px solid var(--accent-gold);
  color: #422b1b;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.updates-page-header {
  margin: 0 0 12px;
}

.updates-page-actions {
  margin-bottom: 12px;
}

.top-update-list time {
  font-weight: 700;
  margin-right: 6px;
}

.tab-content > h2 {
  margin: 0 0 var(--ui-section-vertical-space);
  border: 1px solid #795338;
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--heading-band-soft) 0%, var(--heading-band) 100%);
  color: #fff8ec;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1px rgba(255, 232, 194, 0.25);
}

.tab-heading-note {
  display: block;
  margin-top: 6px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255, 247, 234, 0.9);
  font-weight: 500;
}

.tab-heading-note br {
  display: block;
}

.assist-section-title {
  margin: 0 0 12px;
  border: 1px solid #5d6e63;
  border-radius: 10px;
  padding: 11px 12px;
  background: linear-gradient(180deg, #8ea296 0%, #74877d 100%);
  color: #f7f3ea;
  box-shadow: inset 0 0 0 1px rgba(240, 248, 239, 0.22);
  text-align: center;
  font-weight: 800;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 3px 10px;
}

.assist-section-title-main {
  color: #fdf9f1;
  line-height: 1.2;
}

.assist-section-title-note {
  font-size: 0.69rem;
  line-height: 1.35;
  color: rgba(246, 252, 246, 0.9);
  letter-spacing: 0;
  font-weight: 700;
}

.tab-content {
  display: none;
  scroll-margin-top: 10px;
}

.tab-content.active {
  display: block;
}

.monster-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  row-gap: 12px;
  column-gap: 12px;
  align-items: stretch;
}
.monster-info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: #111;
  margin: 0;
  padding-bottom: 40px;
  border: 1px solid var(--monster-card-border, rgba(150, 118, 82, 0.22));
  background: linear-gradient(180deg, var(--monster-card-bg, #fffdfa) 0%, #fff 100%);
  box-shadow: inset 0 4px 0 var(--monster-card-accent, rgba(201, 174, 139, 0.22));
}
.monster-info-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: var(--monster-card-accent, rgba(201, 174, 139, 0.22));
}

.monster-info-card-toggle {
  display: block;
  cursor: pointer;
  color: inherit;
}
.monster-info-card p {
  margin: 0 0 5px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}
.monster-info-title-area {
  min-height: 1.7em;
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #c9b9a5;
}
.monster-info-name {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  word-break: normal;
  overflow-wrap: normal;
}
.monster-info-line {
  margin-top: 0;
}
.monster-type {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--monster-chip-bg, #f2ece5);
  border: 1px solid var(--monster-chip-border, rgba(120, 95, 62, 0.18));
  font-size: 0.72rem;
  color: var(--monster-chip-color, #111);
}
.monster-type-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.monster-type-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}
.monster-type-text {
  line-height: 1.1;
}
.monster-type[data-type="スライム系"] {
  background: #d8f0ff;
  border-color: rgba(69, 153, 204, 0.36);
  color: #185677;
}
.monster-type[data-type="水系"] {
  background: #d3e7ff;
  border-color: rgba(54, 106, 183, 0.36);
  color: #1b4f95;
}
.monster-type[data-type="植物系"] {
  background: #dcf3df;
  border-color: rgba(88, 161, 104, 0.32);
  color: #2f6e3c;
}
.monster-type[data-type="虫系"] {
  background: #e9f3ba;
  border-color: rgba(117, 145, 23, 0.34);
  color: #4c5f10;
}
.monster-type[data-type="あくま系"] {
  background: #eadbff;
  border-color: rgba(131, 86, 179, 0.32);
  color: #5b358b;
}
.monster-type[data-type="エレメント系"] {
  background: #dcf4ed;
  border-color: rgba(87, 163, 143, 0.32);
  color: #276d62;
}
.monster-type[data-type="けもの系"] {
  background: #ffe7ce;
  border-color: rgba(183, 127, 59, 0.34);
  color: #86501e;
}
.monster-type[data-type="ゾンビ系"] {
  background: #e6ddd5;
  border-color: rgba(122, 96, 77, 0.34);
  color: #5d4739;
}
.monster-type[data-type="ドラゴン系"] {
  background: #ffdcd5;
  border-color: rgba(194, 93, 74, 0.34);
  color: #8d3326;
}
.monster-type[data-type="マシン系"] {
  background: #dde6ec;
  border-color: rgba(100, 121, 138, 0.34);
  color: #435766;
}
.monster-type[data-type="物質系"] {
  background: #e7e7e7;
  border-color: rgba(120, 120, 120, 0.34);
  color: #4c4c4c;
}
.monster-type[data-type="怪人系"] {
  background: #f1dde1;
  border-color: rgba(157, 97, 111, 0.34);
  color: #7a4050;
}
.monster-type[data-type="鳥系"] {
  background: #e5f3ff;
  border-color: rgba(110, 159, 197, 0.34);
  color: #355f84;
}
.monster-info-card-theme-slime {
  --monster-card-bg: #ecf8ff;
  --monster-card-accent: #66bde9;
  --monster-card-border: rgba(102, 189, 233, 0.34);
  --monster-chip-bg: #d8f0ff;
  --monster-chip-border: rgba(69, 153, 204, 0.36);
  --monster-chip-color: #185677;
}
.monster-info-card-theme-water {
  --monster-card-bg: #e4f1ff;
  --monster-card-accent: #4b88d9;
  --monster-card-border: rgba(75, 136, 217, 0.32);
  --monster-chip-bg: #d3e7ff;
  --monster-chip-border: rgba(54, 106, 183, 0.36);
  --monster-chip-color: #1b4f95;
}
.monster-info-card-theme-plant {
  --monster-card-bg: #edf9ef;
  --monster-card-accent: #68b979;
  --monster-card-border: rgba(104, 185, 121, 0.3);
  --monster-chip-bg: #dcf3df;
  --monster-chip-border: rgba(88, 161, 104, 0.32);
  --monster-chip-color: #2f6e3c;
}
.monster-info-card-theme-bug {
  --monster-card-bg: #f4f9de;
  --monster-card-accent: #84a81f;
  --monster-card-border: rgba(132, 168, 31, 0.34);
  --monster-chip-bg: #e9f3ba;
  --monster-chip-border: rgba(117, 145, 23, 0.34);
  --monster-chip-color: #4c5f10;
}
.monster-info-card-theme-demon {
  --monster-card-bg: #f6eeff;
  --monster-card-accent: #9a72c8;
  --monster-card-border: rgba(154, 114, 200, 0.3);
  --monster-chip-bg: #eadbff;
  --monster-chip-border: rgba(131, 86, 179, 0.32);
  --monster-chip-color: #5b358b;
}
.monster-info-card-theme-element {
  --monster-card-bg: #eef9f6;
  --monster-card-accent: #6ebda7;
  --monster-card-border: rgba(110, 189, 167, 0.3);
  --monster-chip-bg: #dcf4ed;
  --monster-chip-border: rgba(87, 163, 143, 0.32);
  --monster-chip-color: #276d62;
}
.monster-info-card-theme-beast {
  --monster-card-bg: #fff3e6;
  --monster-card-accent: #d39a59;
  --monster-card-border: rgba(211, 154, 89, 0.32);
  --monster-chip-bg: #ffe7ce;
  --monster-chip-border: rgba(183, 127, 59, 0.34);
  --monster-chip-color: #86501e;
}
.monster-info-card-theme-undead {
  --monster-card-bg: #f2ede8;
  --monster-card-accent: #8d7661;
  --monster-card-border: rgba(141, 118, 97, 0.32);
  --monster-chip-bg: #e6ddd5;
  --monster-chip-border: rgba(122, 96, 77, 0.34);
  --monster-chip-color: #5d4739;
}
.monster-info-card-theme-dragon {
  --monster-card-bg: #fff0eb;
  --monster-card-accent: #de7a68;
  --monster-card-border: rgba(222, 122, 104, 0.32);
  --monster-chip-bg: #ffdcd5;
  --monster-chip-border: rgba(194, 93, 74, 0.34);
  --monster-chip-color: #8d3326;
}
.monster-info-card-theme-machine {
  --monster-card-bg: #edf2f5;
  --monster-card-accent: #748ca0;
  --monster-card-border: rgba(116, 140, 160, 0.32);
  --monster-chip-bg: #dde6ec;
  --monster-chip-border: rgba(100, 121, 138, 0.34);
  --monster-chip-color: #435766;
}
.monster-info-card-theme-material {
  --monster-card-bg: #f3f3f3;
  --monster-card-accent: #909090;
  --monster-card-border: rgba(144, 144, 144, 0.3);
  --monster-chip-bg: #e7e7e7;
  --monster-chip-border: rgba(120, 120, 120, 0.34);
  --monster-chip-color: #4c4c4c;
}
.monster-info-card-theme-humanoid {
  --monster-card-bg: #faf0f1;
  --monster-card-accent: #b77b87;
  --monster-card-border: rgba(183, 123, 135, 0.3);
  --monster-chip-bg: #f1dde1;
  --monster-chip-border: rgba(157, 97, 111, 0.34);
  --monster-chip-color: #7a4050;
}
.monster-info-card-theme-bird {
  --monster-card-bg: #f4faff;
  --monster-card-accent: #86b8de;
  --monster-card-border: rgba(134, 184, 222, 0.3);
  --monster-chip-bg: #e5f3ff;
  --monster-chip-border: rgba(110, 159, 197, 0.34);
  --monster-chip-color: #355f84;
}
.monster-drop-normal { color: #111; }
.monster-drop-rare { color: #2d6a4f; }
.monster-drop-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25;
}
.monster-drop-row-detail {
  justify-content: space-between;
}
.monster-drop-item-name {
  font-weight: 700;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.monster-drop-price {
  color: #4f3928;
  font-size: 0.85em;
  line-height: 1.2;
  flex: 0 0 auto;
}
.monster-drop-detail {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #d7c3aa;
  border-radius: 10px;
  background: #fff9f0;
}
.monster-drop-action-row {
  margin-top: 6px;
}
.monster-drop-title {
  margin: 0 0 4px;
  font-weight: 700;
}
.monster-label {
  color: inherit;
  flex: 0 0 auto;
}
.monster-info-more { color: #111; font-size: 0.75rem; }
.monster-info-habitat {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.3;
}

.monster-info-card-memo-button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0;
  z-index: 1;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.72rem;
}
.monster-info-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.monster-info-modal-overlay[hidden] {
  display: none !important;
}
.monster-info-modal {
  width: min(680px, 100%);
  max-height: min(82vh, 700px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  position: relative;
}
.monster-info-modal,
.monster-info-modal p,
.monster-info-modal li,
.monster-info-modal h3,
.monster-info-modal strong {
  color: #111;
}
.monster-info-modal-type {
  margin: 0 0 8px;
}
.monster-info-modal-close { position: sticky; top: 0; margin-left: auto; display: block; }
.monster-info-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.monster-info-chip { background: #f4f4f4; border-radius: 999px; padding: 2px 8px; font-size: .82rem; }
.monster-info-equipment-link,
.monster-info-nav-link {
  border: 1px solid #c7ad8d;
  color: #3f2a1a;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.monster-info-equipment-link:hover,
.monster-info-nav-link:hover {
  background: #f3e7d7;
}
.equipment-db-monster-link-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.equipment-db-monster-link {
  min-height: 28px;
  line-height: 1.2;
}
.monster-info-habitat-list { padding-left: 1.1rem; margin: 0; }

@media (max-width: 640px) {
  .monster-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 9px;
    column-gap: 9px;
  }
  .monster-info-card {
    padding: 7px 7px 42px;
  }
  .monster-info-card p {
    margin-bottom: 4px;
    font-size: 0.74rem;
    line-height: 1.2;
  }
  .monster-info-title-area {
    min-height: 1.65em;
    margin-bottom: 4px;
    padding-bottom: 4px;
  }
  .monster-info-name {
    font-size: clamp(0.62rem, 2.8vw, 0.78rem);
    line-height: 1.12;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .monster-type {
    font-size: 0.64rem;
    padding: 1px 6px;
  }
  .monster-type-icon {
    width: 18px;
    height: 18px;
  }
  .monster-info-more {
    font-size: 0.68rem;
  }

  .routine-controls {
    gap: 8px;
  }

  .routine-type-tabs {
    gap: 6px;
  }

  .routine-type-tab-button {
    padding: 6px 10px;
    font-size: 0.84rem;
  }

  .routine-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .routine-reset-description {
    font-size: 0.74rem;
    line-height: 1.45;
  }

  .routine-action-row button {
    min-height: 36px;
    font-size: 0.8rem;
    padding: 6px 8px;
  }

  .routine-progress-text,
  .routine-task-reset-timing {
    font-size: 0.84rem;
  }

  .routine-task-card {
    padding: 8px 9px;
  }

  .routine-task-card-header {
    gap: 8px;
    margin-bottom: 0;
  }

  .routine-task-title {
    font-size: 0.92rem;
  }

  .routine-task-version,
  .routine-task-tool-badge,
  .routine-task-summary {
    font-size: 0.76rem;
  }

  .routine-task-check {
    font-size: 0.78rem;
  }

  .equipment-db-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 9px;
    column-gap: 9px;
  }

  .equipment-db-card-toggle {
    padding: 7px;
  }

  .equipment-db-card-name {
    font-size: clamp(0.62rem, 2.8vw, 0.78rem);
    line-height: 1.12;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
    margin-bottom: 4px;
  }

  .equipment-db-card-meta,
  .equipment-db-stats-list li,
  .equipment-db-stats-list li strong,
  .equipment-db-material-cost,
  .equipment-db-traits-title,
  .equipment-db-traits-list,
  .equipment-db-trait-empty {
    font-size: 0.74rem;
    line-height: 1.2;
  }

  .equipment-db-card-meta-row {
    margin-top: 3px;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 8px;
  }

  .equipment-db-open-profit-button {
    min-height: 26px;
    font-size: 0.68rem;
    padding: 2px 6px;
  }

  .equipment-db-card-actions {
    padding: 0 7px 7px;
  }

  .equipment-db-card-traits {
    padding: 7px 7px 42px;
  }
}

.field-farming-description {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
}

.field-farming-beginner-note {
  color: #5c4027;
}

.field-farming-party-note {
  display: inline-block;
  margin-top: 2px;
  color: #4f2f16;
}

.field-farming-control-wrap {
  margin-top: 0;
  margin-bottom: 10px;
  padding: 8px 10px;
}

.field-farming-sort-field {
  max-width: 380px;
  margin-bottom: 0;
}

.field-farming-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-farming-card {
  background: #f1e3cf;
  border: 1px solid #bda282;
  border-radius: 12px;
  padding: 9px 10px;
  box-shadow: 0 3px 10px rgba(70, 45, 24, 0.14);
}

.field-farming-rank {
  margin: 0 0 4px;
  font-weight: 800;
  color: #5b3a1f;
}

.field-farming-monster-area {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: #2f2419;
}

.field-farming-map-trigger {
  appearance: none;
  border: 0;
  background: none;
  color: #4a3120;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  padding: 0;
  cursor: pointer;
}

.field-farming-map-trigger-disabled {
  text-decoration: none;
  cursor: default;
}

.field-farming-area-label {
  font-size: 0.88rem;
  color: #5f4a37;
  font-weight: 500;
}

.field-farming-hp,
.field-farming-drop,
.field-farming-note {
  margin: 4px 0 0;
  font-size: 0.87rem;
  line-height: 1.4;
}

.field-farming-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
  row-gap: 2px;
}

.field-farming-drop-label {
  font-weight: 700;
}

.field-farming-drop-material {
  color: #3d2e20;
}

.field-farming-drop-divider {
  color: #7f664d;
}

.field-farming-rare-price {
  font-weight: 700;
  color: #5d4a36;
}

.field-farming-drop-normal strong {
  color: #7b1f1f;
}

.field-farming-drop-rare {
  color: #5d4a36;
}

.field-farming-price-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid #ab8a67;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  margin-left: 4px;
}

.field-farming-price-link-normal {
  background: #efdfc6;
  color: #5d371c;
}

.field-farming-price-link-rare {
  background: #efe0f2;
  border-color: #a986b4;
  color: #573466;
}

.field-farming-price-link-disabled {
  background: #e3d8cc;
  border-color: #b9a996;
  color: #7c6c58;
}

.field-farming-note {
  color: #4a3d31;
  font-size: 0.8rem;
  line-height: 1.35;
}

.field-farming-map-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 15, 9, 0.56);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px;
  z-index: 1210;
}

.field-farming-map-modal-overlay.is-open {
  display: flex;
}

.field-farming-map-modal {
  width: min(920px, 100%);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid #9e7d5f;
  border-radius: 12px;
  background: #f6ead9;
  box-shadow: 0 12px 34px rgba(22, 13, 7, 0.32);
  padding: 10px;
  position: relative;
}

.field-farming-map-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #b89370;
  background: #fff9f0;
  color: #4a3120;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
}

.field-farming-map-modal-title {
  margin: 0 44px 8px 0;
  font-size: 0.92rem;
  color: #5a402c;
}

.field-farming-map-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid #c5ab8d;
  border-radius: 8px;
  background: #fffdf8;
}

.field-farming-map-image-wrap {
  min-height: 180px;
}

.field-farming-map-image.is-hidden {
  display: none;
}

.field-farming-map-image-fallback {
  margin: 0;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c5ab8d;
  border-radius: 8px;
  background: #fffdf8;
  color: #80583b;
  font-size: 0.9rem;
}

.field-farming-map-image-fallback[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .field-farming-map-modal {
    width: min(860px, 100%);
  }

  .field-farming-map-image {
    max-height: 72vh;
    object-fit: contain;
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--panel-border);
  border-radius: var(--ui-card-radius);
  padding: var(--ui-card-padding);
  margin: var(--ui-section-vertical-space) 0;
  box-shadow: 0 4px 12px var(--panel-shadow);
}

.compact-card {
  margin: 8px 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 9px;
}

.field span {
  font-size: 0.84rem;
  font-weight: 600;
  color: #533d2b;
}

input,
select,
button {
  font-size: 16px;
}

input,
select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  min-height: var(--ui-button-height);
  background: #ffffff;
  color: var(--text);
}

button {
  border: none;
  border-radius: var(--ui-button-radius);
  background: var(--primary);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
  min-height: var(--ui-button-height);
}

/* aタグのリンクでも既存ボタンと近い見た目にして、デザイン差分を最小化 */
.market-link-button {
  display: inline-block;
  border-radius: 8px;
  border: 1px solid #bda283;
  background: linear-gradient(180deg, #f5e7d2 0%, #e9d4b8 100%);
  color: #57361e;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 8px;
}

/* 見出しとボタンを同じ行に置きつつ、狭い画面では折り返して崩れを防ぐ */
.card-header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.card-header-inline .market-link-button {
  margin-bottom: 0;
}

.recipe-section-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.recipe-section-header h3 {
  margin: 0;
  color: #563b27;
}

.card > h3,
.favorites-section > h3 {
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e3d0b3;
  color: #5b3f2a;
  font-size: 1rem;
}

.recipe-cost-note {
  margin: 0;
  color: rgba(34, 34, 34, 0.68);
  font-size: 0.74rem;
  line-height: 1.3;
}

.tool-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tool-toggle-button {
  background: linear-gradient(180deg, #8a6243 0%, #6f4a31 100%);
  border: 1px solid #7a5638;
  color: #fff8ef;
  padding: 8px 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.tool-toggle-note {
  margin: 0;
  color: #5f4633;
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.35;
}

.tool-detail-wrap[hidden] {
  display: none;
}

.search-toggle-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
}

.search-toggle-group {
  margin-bottom: 0;
}

.search-toggle-button {
  width: 100%;
  text-align: left;
  background: linear-gradient(180deg, #8a6243 0%, #6f4a31 100%);
  border: 1px solid #7a5638;
  color: #fff8ef;
  padding: 8px 12px;
  line-height: 1.2;
}

.search-field-collapsible {
  margin-top: 8px;
  margin-bottom: 0;
}

.search-field-collapsible[hidden] {
  display: none;
}

.assist-sub-search {
  margin: 8px 0 10px;
}

.assist-sub-search-label {
  margin: 0 0 6px;
  color: #5e4631;
  font-size: 0.75rem;
  font-weight: 700;
}

.search-toggle-note {
  margin: 2px 0 8px;
  color: #6b5240;
  font-size: 0.74rem;
  line-height: 1.35;
}

.filter-reset-wrap {
  margin-top: 8px;
}

.filter-reset-button {
  width: 100%;
  min-height: 40px;
  background: linear-gradient(180deg, #f2e3c9 0%, #e2c69f 100%);
  border: 1px solid #b48a60;
  color: #5b3f2a;
  font-weight: 700;
}

.filter-reset-button[hidden] {
  display: none !important;
}

.filter-reset-button:hover,
.filter-reset-button:focus-visible {
  background: linear-gradient(180deg, #f7ead4 0%, #e8cfab 100%);
}

.material-header-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.profit-reset-actions {
  margin-top: 10px;
}

.profit-reset-button {
  width: 100%;
}


.recipe-total-cost {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 8px;
  color: #5b3f2a;
}

.recipe-total-cost span {
  font-size: 0.82rem;
  color: rgba(34, 34, 34, 0.72);
}

.recipe-total-cost strong {
  font-size: 1rem;
}

.material-data-transfer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.helper-text {
  margin: 2px 0 8px;
  color: #6a5340;
  font-size: 0.82rem;
}

.inline-field {
  margin-bottom: 0;
  min-width: 130px;
}

.inline-field input {
  min-width: 120px;
}

.profit-value {
  font-weight: 800;
}

.profit-value.is-positive {
  color: #1f8a3b;
}

.profit-value.is-negative {
  color: #d93025;
}

.grid-2 {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.search-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  align-items: end;
}

.profit-armor-set-assist[hidden] {
  display: none;
}

.profit-armor-set-assist-card {
  margin-bottom: 10px;
  border: 1px solid #d4bc95;
  background: #f9f1e4;
}

.profit-armor-set-assist-title {
  margin: 0;
  font-size: 1rem;
}

.profit-armor-set-assist-note {
  margin: 6px 0 0;
  color: #5f4a35;
  font-size: 0.86rem;
}

.profit-armor-set-assist-error {
  margin: 8px 0 0;
  color: #b42318;
  font-size: 0.84rem;
  font-weight: 700;
}

.profit-armor-set-assist-parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.profit-armor-set-part-button {
  min-height: 42px;
  border: 1px solid #c9ad8b;
  border-radius: 10px;
  background: #fff8ef;
  color: #4d341f;
  font-weight: 700;
  font-size: 0.94rem;
}

.sale-input-list {
  display: grid;
  gap: 8px;
}

.sale-input-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 86px;
  gap: 6px;
  align-items: end;
  border: 1px solid #ceb59a;
  border-radius: 10px;
  background: #f9f1e4;
  padding: 7px;
}

.sale-star-badge {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #543a26;
  background: #efe3cf;
  border: 1px solid #d4bc95;
  border-radius: 999px;
  padding: 4px 7px;
  align-self: center;
}

.sale-input-row .field {
  margin-bottom: 0;
}

.sale-price-field span {
  font-size: 0.8rem;
}

.sale-price-field small {
  font-size: 0.72rem;
  color: #627089;
}

.sale-price-field input {
  font-size: 1rem;
  font-weight: 700;
}

.sale-price-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.sale-price-reset-button {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid #c8ab88;
  border-radius: 999px;
  background: #fff8ef;
  color: #5a3c24;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.sale-price-reset-button:hover {
  background: #f4e7d4;
}

.sale-count-field span {
  font-size: 0.76rem;
}

.sale-count-field input {
  text-align: right;
}

.summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.summary-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.summary-header h3 {
  margin: 0;
}

.summary-header small {
  color: #715943;
  font-size: 0.8rem;
}

.summary-column h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: #5b3f29;
}

.summary-column p {
  margin: 4px 0;
  font-size: 0.88rem;
}

.warning-text {
  margin: 0 0 10px;
  color: #d93025;
  font-weight: 700;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

#recipeTableWrap {
  overflow-x: auto;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 8px;
  vertical-align: middle;
}

.recipe-market-link-header {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.recipe-market-link-cell {
  text-align: right !important;
  white-space: nowrap;
}

.recipe-market-link-button {
  margin: 0;
  padding: 7px 11px;
  font-size: 0.84rem;
  white-space: nowrap;
}

.inline-input {
  width: 96px;
}

.small-btn {
  background: #dc3545;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.bazaar-list {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.bazaar-paused-section {
  margin-top: 10px;
  padding: 10px 10px 8px;
  border: 1px solid #cbc0b3;
  border-radius: 12px;
  background: linear-gradient(180deg, #f2efea 0%, #e6e0d7 100%);
}

.bazaar-paused-heading {
  margin: 0 0 4px;
  font-size: 0.94rem;
  color: #554b42;
}

.bazaar-paused-note {
  margin: 0 0 8px;
  font-size: 0.74rem;
  line-height: 1.4;
  color: #6c6157;
}

.bazaar-paused-controls {
  margin: 0 0 8px;
}

.bazaar-paused-category-field {
  max-width: 220px;
}

.bazaar-paused-empty {
  margin: 0;
  color: #5d5248;
  font-size: 0.82rem;
}

.bazaar-list-paused {
  gap: 6px;
}

.bazaar-paused-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #bdb1a4;
  border-radius: 10px;
  background: rgba(255, 250, 243, 0.78);
  color: #55483d;
  padding: 8px 10px;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: left;
}

.bazaar-paused-toggle-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
}

.bazaar-control-wrap {
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.bazaar-page-note {
  margin-bottom: 8px;
  padding: 9px 10px;
  background: rgba(247, 239, 228, 0.9);
}

.bazaar-page-note p {
  margin: 0;
  color: #644d39;
  font-size: 0.8rem;
  line-height: 1.45;
}

.bazaar-page-note p + p {
  margin-top: 4px;
}

.bazaar-page-note-highlight {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(181, 135, 69, 0.14);
  color: #6a4318;
  font-weight: 800;
}

.bazaar-category-field {
  margin-bottom: 0;
}

.bazaar-category-field span,
.bazaar-sort-field span {
  font-size: 0.82rem;
  color: #6e553e;
}

.bazaar-search-field {
  margin-bottom: 0;
}

.bazaar-search-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.bazaar-search-field span {
  font-size: 0.82rem;
  color: #6e553e;
}

.bazaar-search-input-wrap {
  display: block;
  flex: 1 1 280px;
}

.bazaar-search-input-wrap input {
  width: 100%;
  min-height: 42px;
  background: #fff;
}

.bazaar-favorite-filter-inline {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
  align-self: flex-end;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}

.bazaar-favorite-filter-inline input {
  width: auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
}

.bazaar-favorite-filter-inline span {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: #5f4a36;
}

.bazaar-search-clear-button {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid #cfbba2;
  border-radius: 10px;
  background: #fff;
  color: #5f4a36;
  font-size: 1rem;
  font-weight: 700;
  padding: 0 10px;
}

.bazaar-search-clear-button:disabled {
  opacity: 0.5;
}

.bazaar-search-candidates {
  margin-top: 6px;
  border: 1px solid #cfb59a;
  border-radius: 10px;
  background: #fff;
  max-height: 188px;
  overflow-y: auto;
  display: grid;
  gap: 1px;
  padding: 2px;
}

.bazaar-search-candidate-button {
  width: 100%;
  min-height: 42px;
  border: none;
  border-radius: 8px;
  background: #f7efe4;
  color: #452f1f;
  text-align: left;
  padding: 8px 10px;
  font-size: 0.9rem;
  line-height: 1.3;
}

.bazaar-search-empty {
  margin: 0;
  padding: 10px;
  color: #6c5440;
  font-size: 0.84rem;
}

.bazaar-favorite-filter-field,
.bazaar-monitoring-filter-field {
  margin-bottom: 0;
  gap: 8px;
}

.bazaar-favorite-filter-field span,
.bazaar-monitoring-filter-field span {
  font-size: 0.82rem;
  color: #6e553e;
}

.bazaar-filter-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.bazaar-category-field select,
.bazaar-sort-field select {
  background: #fff;
}

.bazaar-card {
  position: relative;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  border-color: #b79876;
  background: linear-gradient(180deg, #f5e8d8 0%, #e8d6bf 100%);
  padding: 10px 10px 40px;
  box-shadow: 0 4px 12px rgba(68, 45, 24, 0.16);
  overflow: hidden;
}

.bazaar-card.is-focused {
  border-color: #8a623d;
  box-shadow: 0 0 0 2px rgba(138, 98, 61, 0.22);
}

.bazaar-card.is-paused {
  border-color: #b7ada1;
  background: linear-gradient(180deg, #f1ede7 0%, #e4ddd4 100%);
  box-shadow: 0 3px 9px rgba(68, 45, 24, 0.08);
}

.bazaar-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.bazaar-card-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.bazaar-card-title-group {
  min-width: 0;
}

.bazaar-card-header h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.25;
}

.bazaar-material-name-button {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.bazaar-category {
  margin: 2px 0 0;
  color: #6c5540;
  font-size: 0.8rem;
  line-height: 1.2;
}

.bazaar-category-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.bazaar-category-icon {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.9;
}

.bazaar-category-icon-fallback {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(116, 89, 66, 0.16);
  color: #745942;
  font-size: 0.7rem;
  line-height: 1;
  flex-shrink: 0;
}

.bazaar-favorite-button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #725742;
  background: #8a6a52;
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.bazaar-favorite-button:hover {
  background: #7d5f49;
  color: #ffffff;
}

.bazaar-favorite-button.is-active {
  border-color: #c67a9d;
  background: #fff2f8;
  color: #ea4f9f;
}

.bazaar-favorite-button.is-active:hover {
  background: #fde8f3;
  color: #d93d8e;
}

.bazaar-main {
  margin-top: 5px;
  display: grid;
  gap: 4px;
}

.bazaar-main > * {
  min-width: 0;
}

.bazaar-card-summary-toggle {
  border-radius: 8px;
  outline: none;
  touch-action: pan-y;
}

.bazaar-card-summary-toggle.is-expandable {
  cursor: pointer;
}

.bazaar-sub-row {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bazaar-updated-at {
  margin: 0;
  color: #6c5440;
  font-size: 0.76rem;
  line-height: 1.2;
  white-space: nowrap;
}

.bazaar-footer-row {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.bazaar-actions {
  display: flex;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-top: 1px;
}

.bazaar-official-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 35px;
  padding: 6px 10px;
  border: 1px solid #ccb08d;
  border-radius: 8px;
  background: #f7ebdb;
  color: #5a3c25;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.bazaar-quick-actions {
  margin-top: 4px;
}

.bazaar-official-link-button-compact {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.72rem;
}

.bazaar-official-link-button-desktop {
  display: none;
  margin-top: 6px;
  min-height: 28px;
  padding: 4px 9px;
  font-size: 0.7rem;
  align-self: flex-start;
}

.bazaar-official-link-button::after {
  content: "↗";
  font-size: 0.9em;
  line-height: 1;
}

.bazaar-official-link-button:hover {
  background: #f2e2cc;
}

.bazaar-official-link-button:focus-visible {
  outline: 2px solid #2463eb;
  outline-offset: 2px;
}

.bazaar-primary {
  min-width: 0;
}

.bazaar-mini-chart-wrap {
  display: none;
  min-width: 0;
  overflow: hidden;
}

.bazaar-mini-chart-canvas {
  flex: 1;
  min-width: 0;
}

.bazaar-mini-chart-plot {
  display: flex;
  align-items: stretch;
  gap: 7px;
  width: 100%;
}

.bazaar-mini-chart-svg {
  width: 100%;
  height: 96px;
  display: block;
}

.bazaar-mini-chart-line {
  fill: none;
  stroke-width: 1.9;
  vector-effect: non-scaling-stroke;
}

.bazaar-mini-chart-point {
  fill: currentColor;
  opacity: 0.45;
}

.bazaar-mini-chart-latest-point {
  fill: currentColor;
  stroke: #fff8ef;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.bazaar-mini-chart-grid-line {
  stroke: rgba(112, 84, 58, 0.1);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.bazaar-mini-chart-grid-line.is-edge {
  stroke-dasharray: none;
  stroke: rgba(112, 84, 58, 0.15);
}

.bazaar-mini-chart-reference-line {
  stroke: rgba(68, 89, 129, 0.55);
  stroke-width: 1.1;
  stroke-dasharray: 4 3;
}

.bazaar-mini-chart-axis-label,
.bazaar-mini-chart-axis-date {
  fill: rgba(106, 79, 57, 0.86);
  font-weight: 500;
  dominant-baseline: middle;
  paint-order: stroke fill;
  stroke: rgba(255, 250, 242, 0.92);
  stroke-width: 2.4px;
  stroke-linejoin: round;
}

.bazaar-mini-chart-axis-label {
  font-size: 7px;
}

.bazaar-mini-chart-axis-date {
  font-size: 7px;
  dominant-baseline: auto;
}

.bazaar-mini-chart-axis-date-middle {
  opacity: 0.9;
}

.bazaar-mini-chart-svg.is-positive .bazaar-mini-chart-line {
  stroke: #2d8b4a !important;
}

.bazaar-mini-chart-svg.is-negative .bazaar-mini-chart-line {
  stroke: #c95f2b !important;
}

.bazaar-mini-chart-svg.is-neutral .bazaar-mini-chart-line {
  stroke: #7a644f !important;
}

.bazaar-mini-chart-svg.is-positive .bazaar-mini-chart-point {
  color: #2d8b4a;
}

.bazaar-mini-chart-svg.is-negative .bazaar-mini-chart-point {
  color: #c95f2b;
}

.bazaar-mini-chart-svg.is-neutral .bazaar-mini-chart-point {
  color: #7a644f;
}

.bazaar-mini-chart-meta,
.bazaar-mini-chart-empty,
.bazaar-mobile-chart-latest {
  margin: 4px 0 0;
  color: #6d5643;
  font-size: 0.72rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.bazaar-mobile-chart-panel {
  display: none;
}

.bazaar-today-price {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #3f2d1d;
  line-height: 1.1;
}

.bazaar-today-price span {
  font-size: 0.78rem;
  font-weight: 700;
}

.bazaar-today-price.is-fixed {
  color: #574b3f;
}

.bazaar-today-price.is-shop-fixed {
  color: #5b544c;
}

.bazaar-price-status-badge {
  margin: 3px 0 0;
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid #b8a186;
  background: rgba(248, 241, 232, 0.82);
  color: #655649;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.bazaar-price-status-badge.is-fixed {
  color: #6b6157;
  border-color: #bba995;
}

.bazaar-price-status-badge.is-shop-fixed {
  color: #736a60;
  border-color: #c2b2a0;
  background: rgba(238, 233, 225, 0.9);
}

.bazaar-price-comment {
  margin: 2px 0 0;
  color: #6d5643;
  font-size: 0.74rem;
  line-height: 1.2;
  font-weight: 600;
}

.bazaar-price-comment.is-fixed {
  color: #71645a;
}

.bazaar-price-comment.is-shop-fixed {
  color: #786e64;
}

.bazaar-change-rate {
  margin: 1px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.bazaar-change-value,
.bazaar-change-arrow {
  font-weight: 800;
}

.bazaar-change-value.is-positive,
.bazaar-change-arrow.is-positive {
  color: #1f8a3b;
}

.bazaar-change-value.is-neutral,
.bazaar-change-arrow.is-neutral {
  color: #4f5d75;
}

.bazaar-change-value.is-negative,
.bazaar-change-arrow.is-negative {
  color: #d93025;
}

.bazaar-change-value.is-unavailable {
  color: var(--text);
}

.bazaar-change-arrow {
  font-size: 1.12em;
  line-height: 1;
  opacity: 0.82;
}

.bazaar-previous-price {
  margin: 1px 0 0;
  color: #6d5643;
  font-size: 0.78rem;
  line-height: 1.2;
}

.recipe-favorite-action {
  margin-top: -2px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.recipe-favorite-toggle-button {
  width: auto;
  min-height: 38px;
  border: 1px solid #c9ad8b;
  border-radius: 12px;
  background: #fbf0e0;
  color: #4d341f;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 7px 12px;
}

.recipe-favorite-toggle-button.is-active {
  border-color: #b58142;
  background: #f9e3bf;
  color: #6e4315;
}

.recipe-favorite-toggle-button:disabled {
  opacity: 0.6;
}

.recipe-filter-reset-button {
  width: auto;
  min-height: 38px;
  padding: 7px 12px;
  font-size: 0.84rem;
  white-space: nowrap;
}

.craft-ideal-value-wrap[hidden] {
  display: none;
}

.craft-ideal-card {
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid #c7ab88;
  border-radius: 10px;
  background: #f8efdf;
}

.craft-ideal-tolerance {
  margin: 0;
  color: #5b3f2a;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.craft-ideal-grid {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.craft-ideal-grid-cell {
  min-height: 30px;
  border: 1px solid #ccb496;
  border-radius: 7px;
  background: #fff9ef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4d341f;
  font-weight: 700;
  font-size: 0.9rem;
}

.craft-ideal-grid-cell.is-unused {
  background: #efe5d6;
  color: #b29a83;
}

.favorites-layout {
  display: grid;
  gap: 12px;
}

.favorites-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.favorites-tab-button {
  min-height: 46px;
  border: 1px solid #c9b59a;
  border-radius: 10px;
  background: #f8ecdb;
  color: #644a34;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 12px;
}

.favorites-tab-button.is-active {
  border-color: #8f6846;
  background: #ecd7bd;
  color: #3f2b1b;
}

.favorites-panel {
  display: none;
}

.favorites-panel.is-active {
  display: block;
}

.favorites-section h3 {
  margin-top: 0;
}

.favorites-empty {
  margin: 6px 0 0;
  color: #715942;
}

.favorites-list {
  display: grid;
  gap: 10px;
}

.present-code-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.present-code-card {
  background: linear-gradient(180deg, #f6ecdc 0%, #ead7bd 100%);
  border: 1px solid #b69473;
  border-radius: 10px;
  padding: 8px 10px 9px;
  box-shadow: 0 2px 8px rgba(70, 45, 24, 0.16);
}

.present-code-label {
  margin: 0 0 1px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #795438;
  letter-spacing: 0.03em;
  line-height: 1.35;
}

.present-code-name,
.present-code-reward,
.present-code-expire,
.present-code-note {
  margin: 0 0 5px;
  line-height: 1.4;
}

.present-code-name {
  margin-bottom: 4px;
}

.present-code-link {
  color: #1b4ea9;
  font-size: 0.96rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  word-break: break-all;
}

.present-code-link:hover {
  color: #163f87;
}

.present-code-link-note {
  margin: 0 0 5px;
  font-size: 0.68rem;
  color: #6d533c;
}

.present-code-reward,
.present-code-expire,
.present-code-note {
  font-size: 0.8rem;
  color: #3f2c1d;
  word-break: break-word;
}

.present-code-note {
  margin-bottom: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #5c4531;
}

.present-code-card.is-url .present-code-link {
  font-size: 0.88rem;
  font-weight: 700;
}

.favorite-item-card {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px;
  background: #f1e3d1;
  box-shadow: 0 3px 10px rgba(77, 53, 31, 0.12);
}

.favorite-item-card.is-pending-removal,
.favorite-material-card.is-pending-removal {
  opacity: 0.62;
}

.favorite-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.favorite-item-title-button {
  border: none;
  background: transparent;
  color: #4b3322;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  padding: 0;
}

.favorite-item-title-button:hover {
  text-decoration: underline;
  cursor: pointer;
}

.favorite-item-meta {
  margin: 8px 0 0;
  color: #705844;
  font-size: 0.88rem;
}

.favorite-link-button {
  display: inline-block;
  margin-top: 10px;
  border-radius: 8px;
  background: #8c623e;
  color: #fff9f1;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.favorite-sub-action-button {
  margin-top: 8px;
  border: 1px solid #9c7858;
  border-radius: 8px;
  background: #f8efe2;
  color: #6b4a2f;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}

.favorite-sub-action-button:hover {
  cursor: pointer;
  background: #f4e7d6;
}

.favorite-sub-action-button.is-restore {
  border-color: #4f7d58;
  color: #2e5f38;
  background: #edf8ef;
}

.favorite-pending-note {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #775f48;
}

.favorite-materials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.favorite-material-card {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 9px;
  background: #f0e1ce;
  display: grid;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(77, 53, 31, 0.1);
}

.favorite-material-header {
  display: flex;
}

.favorite-material-title-button {
  width: 100%;
  min-height: 44px;
  border: none;
  background: #e9d8c3;
  border-radius: 8px;
  color: #4a3221;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  padding: 9px 10px;
}

.favorite-material-title-button:hover {
  cursor: pointer;
  text-decoration: underline;
}

.favorite-material-price,
.favorite-material-change {
  margin: 0;
  color: #715942;
  font-size: 0.82rem;
  line-height: 1.25;
}

.favorite-material-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.favorite-material-change-value,
.favorite-material-change-arrow {
  font-weight: 800;
}

.favorite-material-change-value.is-positive,
.favorite-material-change-arrow.is-positive {
  color: #1f8a3b;
}

.favorite-material-change-value.is-neutral,
.favorite-material-change-arrow.is-neutral {
  color: #4f5d75;
}

.favorite-material-change-value.is-negative,
.favorite-material-change-arrow.is-negative {
  color: #d93025;
}

.favorite-material-change-value.is-unavailable,
.favorite-material-change-arrow.is-unavailable {
  color: var(--text);
}

.favorite-material-change-arrow {
  font-size: 1.05em;
  line-height: 1;
}

.bazaar-detail-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 15, 9, 0.52);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  z-index: 1190;
}

.bazaar-detail-modal-overlay.is-open {
  display: flex;
}

.bazaar-detail-modal {
  width: min(620px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid #997656;
  border-radius: 16px;
  background: #f6ead9;
  box-shadow: 0 12px 34px rgba(22, 13, 7, 0.32);
  padding: 16px 14px 14px;
  position: relative;
  transform: translateY(18px);
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.bazaar-detail-modal-overlay.is-open .bazaar-detail-modal {
  transform: translateY(0);
  opacity: 1;
}

.bazaar-detail-modal-handle {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(87, 57, 34, 0.28);
  margin: 0 auto 10px;
  touch-action: none;
  cursor: grab;
}

.bazaar-detail-modal.is-swipe-dragging {
  transition: none;
}

.bazaar-detail-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #b89370;
  background: #fff9f0;
  color: #4a3120;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
}

.bazaar-detail-modal-title {
  margin: 0 40px 8px 0;
  font-size: 1.05rem;
  color: #4b321f;
}

.bazaar-detail-modal-header {
  margin-bottom: 8px;
}

.bazaar-detail-modal-header .bazaar-detail-modal-title {
  margin: 0;
}

.bazaar-detail-modal-updated-at,
.bazaar-detail-modal-previous,
.bazaar-detail-modal-period,
.bazaar-detail-modal-chart-empty {
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: #654d39;
}

.bazaar-detail-modal-latest {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: #4f3726;
}

.bazaar-detail-modal-latest strong {
  color: #3b2819;
  font-size: 1.04rem;
}

.bazaar-detail-modal-chart {
  border: 1px solid #c4ac8f;
  border-radius: 8px;
  background: #fffdf8;
  padding: 6px;
  margin-bottom: 8px;
}

.bazaar-detail-modal-chart .bazaar-mini-chart-svg {
  height: 188px;
}

.bazaar-detail-modal-chart .bazaar-mini-chart-axis-label,
.bazaar-detail-modal-chart .bazaar-mini-chart-axis-date {
  font-size: 9px;
}

.bazaar-detail-month-control {
  margin: 0 0 8px;
}

.bazaar-detail-month-field {
  margin: 0;
}

.bazaar-detail-month-field span {
  font-size: 0.78rem;
}

.bazaar-detail-month-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}

.bazaar-detail-month-summary p {
  margin: 0;
  border: 1px solid #d7c0a2;
  border-radius: 8px;
  background: rgba(255, 251, 243, 0.78);
  padding: 6px 8px;
  display: grid;
  gap: 2px;
}

.bazaar-detail-month-summary span {
  font-size: 0.72rem;
  color: #725841;
}

.bazaar-detail-month-summary strong {
  font-size: 0.9rem;
  color: #442c1b;
}

.bazaar-detail-modal-link {
  display: inline-flex;
  margin-top: 2px;
  border-radius: 8px;
  border: 1px solid #b79068;
  background: #ead5b7;
  color: #56371f;
  padding: 9px 11px;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.bazaar-detail-modal-link::after {
  content: "↗";
  margin-left: 4px;
}

.bazaar-detail-modal-link:hover {
  background: #e6cda9;
}

.bazaar-detail-related-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #e0cfb7;
}

.bazaar-detail-related-title {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: #4b321f;
}

.bazaar-detail-related-list {
  display: grid;
  gap: 8px;
}

.bazaar-detail-related-list-compact {
  gap: 10px;
}

.bazaar-detail-related-group {
  display: grid;
  gap: 6px;
}

.bazaar-detail-related-group-title,
.bazaar-detail-related-count {
  margin: 0;
  font-size: 0.82rem;
  color: #6b5039;
}

.bazaar-detail-related-chip-list {
  gap: 5px;
}

.bazaar-detail-related-chip {
  border: 1px solid #d0b695;
  color: #5b3b23;
  cursor: pointer;
}

.bazaar-detail-related-item {
  padding: 8px 10px;
  border: 1px solid #ddc6a9;
  border-radius: 10px;
  background: #fffaf2;
}

.bazaar-detail-related-name,
.bazaar-detail-related-note,
.bazaar-detail-related-more,
.bazaar-detail-related-empty {
  margin: 0;
}

.bazaar-detail-related-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #4a301b;
}

.bazaar-detail-related-note,
.bazaar-detail-related-more,
.bazaar-detail-related-empty {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #6f553d;
}

.bazaar-detail-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.bazaar-detail-related-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #ccb08e;
  background: #f5e5cf;
  color: #5b3b23;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.bazaar-detail-related-link:hover {
  background: #eed8ba;
}

.bazaar-detail-related-toggle {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7a5330;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.favorite-material-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 15, 9, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
}

.favorite-material-modal-overlay.is-open {
  display: flex;
}

.favorite-material-modal {
  width: min(420px, 100%);
  max-height: min(78vh, 560px);
  overflow: auto;
  border: 1px solid #997656;
  border-radius: 12px;
  background: #f6ead9;
  box-shadow: 0 12px 34px rgba(22, 13, 7, 0.32);
  padding: 14px;
  position: relative;
}

.favorite-material-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #b89370;
  background: #fff9f0;
  color: #4a3120;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
}

.favorite-material-modal-title {
  margin: 0 40px 10px 0;
  font-size: 1.05rem;
  color: #4b321f;
}

.favorite-material-modal-price,
.favorite-material-modal-previous,
.favorite-material-modal-chart-meta,
.favorite-material-modal-chart-empty {
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: #654d39;
}

.favorite-material-modal-price strong {
  color: #3b2819;
  font-size: 1rem;
}

.favorite-material-modal-chart {
  border: 1px solid #c4ac8f;
  border-radius: 8px;
  background: #fffdf8;
  padding: 4px 5px;
}

.favorite-material-modal-link {
  display: inline-flex;
  margin-top: 2px;
  border-radius: 8px;
  border: 1px solid #b79068;
  background: #ead5b7;
  color: #56371f;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 768px) {
  .favorite-materials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1040px) {
  .favorite-materials-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {

  .app-header {
    padding: 8px 9px;
    margin-bottom: 8px;
  }

  .app-header h1 {
    margin-bottom: 5px;
    font-size: calc(var(--ui-title-font-size) * 0.84);
    line-height: 1.16;
  }

  #contentSiteIntro,
  #contentSiteSummary {
    font-size: 0.8rem;
    line-height: 1.38;
  }

  .app-header-subtitle {
    margin-bottom: 4px;
    font-size: 0.82rem;
  }

  .app-header-price-note {
    padding: 4px 6px;
    margin-bottom: 3px;
    font-size: 0.69rem;
    line-height: 1.32;
  }

  .home-shortcut-note {
    margin-top: 8px;
    padding: 8px 9px;
  }

  .home-shortcut-note h3 {
    font-size: 0.86rem;
  }

  .home-shortcut-note p {
    font-size: 0.76rem;
    line-height: 1.45;
  }

  .home-shortcut-note-bottom {
    margin-top: 12px;
    margin-bottom: 2px;
    padding: 7px 8px;
  }

  .top-quick-access {
    padding: 9px;
  }

  .top-quick-access-note-sub {
    display: none;
  }

  .home-quick-card {
    min-height: 68px;
  }

  .field-farming-control-wrap {
    padding: 8px;
  }

  .field-farming-sort-field select {
    min-height: 44px;
  }

  .field-farming-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .field-farming-card {
    padding: 8px 9px;
  }

  .field-farming-rank {
    margin-bottom: 3px;
  }

  .field-farming-monster-area {
    line-height: 1.3;
  }

  .field-farming-hp,
  .field-farming-drop,
  .field-farming-note {
    margin-top: 3px;
    line-height: 1.35;
  }

  .field-farming-price-link {
    min-height: 28px;
    padding: 2px 8px;
    font-size: 0.71rem;
  }

  .field-farming-map-modal-overlay {
    padding: 8px;
  }

  .field-farming-map-modal {
    max-height: 92vh;
    padding: 8px;
  }

  .field-farming-map-modal-title {
    font-size: 0.86rem;
  }

  .favorite-materials-grid {
    grid-template-columns: 1fr;
  }

  .favorite-material-card {
    padding: 10px;
  }

  .favorite-material-title-button {
    min-height: 46px;
  }

  .favorites-tabs {
    gap: 6px;
    margin-bottom: 8px;
  }

  .favorites-tab-button {
    min-height: 48px;
    font-size: 0.92rem;
    padding: 10px;
  }

  .present-code-list {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  }

  .present-code-card {
    padding: 8px 9px;
  }

  .present-code-link {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .present-code-card.is-url .present-code-link {
    font-size: 0.84rem;
  }

  .present-code-reward,
  .present-code-expire,
  .present-code-note {
    font-size: 0.77rem;
  }

  .bazaar-list {
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bazaar-paused-section {
    margin-top: 8px;
    padding: 8px 8px 7px;
    border-radius: 10px;
  }

  .bazaar-paused-heading {
    font-size: 0.86rem;
  }

  .bazaar-paused-toggle {
    padding: 7px 8px;
    font-size: 0.76rem;
    min-height: 40px;
  }

  .bazaar-paused-note {
    margin-bottom: 6px;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .bazaar-paused-category-field {
    max-width: 100%;
  }

  .bazaar-paused-empty {
    font-size: 0.74rem;
  }

  .bazaar-control-wrap {
    padding-bottom: 6px;
    margin-bottom: 6px;
    gap: 6px;
  }

  .bazaar-page-note {
    margin-bottom: 6px;
    padding: 7px 8px;
  }

  .bazaar-page-note p {
    font-size: 0.7rem;
    line-height: 1.4;
  }

  .bazaar-page-note-highlight {
    padding: 2px 7px;
  }

  .bazaar-category-field span,
  .bazaar-sort-field span,
  .bazaar-search-field span,
  .bazaar-favorite-filter-field span,
  .bazaar-monitoring-filter-field span {
    font-size: 0.75rem;
  }

  .bazaar-search-input-wrap input,
  .bazaar-search-clear-button,
  .bazaar-search-candidate-button {
    min-height: 44px;
  }

  .bazaar-card {
    position: relative;
    padding: 7px 8px 6px;
    border-radius: 10px;
  }

  .bazaar-card.is-mobile-expanded {
    grid-column: 1 / -1;
    border-color: #8a623d;
    box-shadow: 0 0 0 1px rgba(138, 98, 61, 0.22), 0 6px 14px rgba(68, 45, 24, 0.2);
  }

  .recipe-favorite-toggle-button {
    min-height: 38px;
    font-size: 0.84rem;
    padding: 7px 10px;
  }

  .recipe-filter-reset-button {
    min-height: 38px;
    font-size: 0.82rem;
    padding: 7px 10px;
  }

  .bazaar-card-header {
    gap: 6px;
  }

  .bazaar-favorite-button {
    width: 34px;
    height: 34px;
    font-size: 1.02rem;
  }

  .bazaar-card-header h3 {
    font-size: 0.84rem;
    line-height: 1.2;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .bazaar-card-header-actions {
    position: static;
  }

  .bazaar-card-memo-button {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.72rem;
    z-index: 1;
  }

  .bazaar-card {
    padding-bottom: 42px;
  }

  .bazaar-category {
    font-size: 0.68rem;
  }

  .bazaar-category-icon,
  .bazaar-category-icon-fallback {
    width: 18px;
    height: 18px;
  }

  .bazaar-updated-at {
    font-size: 0.68rem;
  }

  .bazaar-main {
    margin-top: 2px;
  }

  .bazaar-footer-row {
    display: none;
  }

  .bazaar-quick-actions {
    margin-top: 3px;
  }

  .bazaar-official-link-button-compact {
    min-height: 32px;
    width: 100%;
    font-size: 0.68rem;
    padding: 4px 7px;
  }

  .bazaar-today-price {
    font-size: 0.96rem;
  }

  .bazaar-today-price span {
    font-size: 0.7rem;
  }

  .bazaar-change-rate {
    font-size: 0.72rem;
    gap: 3px;
  }

  .bazaar-previous-price {
    font-size: 0.68rem;
    margin-top: 0;
  }

}

@media (max-width: 380px) {
  .present-code-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 699px) {
  .orb-card-grid {
    grid-template-columns: repeat(var(--ui-mobile-card-columns), minmax(0, 1fr));
    gap: 8px;
  }

  .orb-card-toggle {
    padding: 10px 10px 42px;
  }

  .orb-card-monsters {
    padding: 8px 10px 10px;
  }

  .orb-monster-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 6px;
  }

  .orb-monster-list li {
    min-width: 0;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.2;
    min-height: 42px;
    max-height: calc(11px * 1.2 * 2);
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .field-farming-list {
    grid-template-columns: 1fr;
  }

  .bazaar-material-name-button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  .bazaar-mini-chart-wrap {
    display: none !important;
  }

  .bazaar-detail-modal-overlay {
    padding: 10px 8px;
  }

  .bazaar-detail-modal {
    border-radius: 16px 16px 12px 12px;
    width: 100%;
    max-height: 84vh;
    padding-bottom: 16px;
  }

  .bazaar-detail-modal-chart .bazaar-mini-chart-svg {
    height: 206px;
  }

  .bazaar-detail-modal-chart .bazaar-mini-chart-axis-label,
  .bazaar-detail-modal-chart .bazaar-mini-chart-axis-date {
    font-size: 9.6px;
  }

  .bazaar-detail-month-summary {
    gap: 5px;
  }

  .bazaar-detail-month-summary p {
    padding: 5px 6px;
  }

  .bazaar-detail-month-summary span {
    font-size: 0.68rem;
  }

  .bazaar-detail-month-summary strong {
    font-size: 0.84rem;
  }

  .bazaar-detail-related-section {
    margin-top: 12px;
    padding-top: 8px;
  }

  .bazaar-detail-related-item {
    padding: 7px 8px;
  }

  .bazaar-detail-related-links {
    gap: 5px;
  }

  .bazaar-detail-related-chip-list {
    gap: 4px;
  }

  .bazaar-detail-related-chip {
    font-size: 0.76rem;
  }

  .bazaar-detail-related-link {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 0.78rem;
  }

  .bazaar-detail-related-toggle {
    font-size: 0.78rem;
  }
}

@media (min-width: 700px) {
  .bazaar-detail-modal-overlay {
    align-items: center;
  }

  .bazaar-detail-modal {
    border-radius: 16px;
  }

  .bazaar-detail-modal-handle {
    display: none;
  }
}

@media (min-width: 700px) {
  .bazaar-list {
    grid-template-columns: 1fr;
  }

  .bazaar-main {
    grid-template-columns: minmax(184px, 1fr) minmax(0, 1.6fr);
    column-gap: 10px;
    align-items: stretch;
  }

  .bazaar-mini-chart-wrap {
    display: block;
    border-left: 1px dashed rgba(111, 79, 50, 0.28);
    padding-left: 8px;
    width: 100%;
  }

  .bazaar-mini-chart-canvas .bazaar-mini-chart-svg {
    height: 104px;
  }

  .bazaar-mini-chart-canvas .bazaar-mini-chart-axis-date {
    font-size: 0.66rem;
  }

  .bazaar-mini-chart-canvas .bazaar-mini-chart-axis-label {
    font-size: 0.62rem;
  }

  .bazaar-mobile-chart-panel {
    display: none !important;
  }

  .bazaar-quick-actions {
    display: none;
  }

  .bazaar-official-link-button-desktop {
    display: inline-flex;
  }
}

@media (min-width: 560px) {
  .bazaar-control-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bazaar-search-field {
    grid-column: 1 / -1;
  }
}

@media (min-width: 920px) {
  .bazaar-control-wrap {
    grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1fr) minmax(380px, 1.8fr);
    align-items: start;
  }

  .bazaar-search-toolbar {
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  .bazaar-search-field {
    grid-column: auto;
  }
}

@media (min-width: 700px) {
  .app {
    padding-top: 76px;
  }

  .hamburger-button {
    top: 16px;
    left: 16px;
  }

  .app-header h1 {
    font-size: 1.8rem;
  }

  .app-header {
    margin-bottom: 20px;
    padding: 16px 18px;
  }

  .tool-site-search-dock {
    top: 16px;
    right: 16px;
  }

  .tool-site-search-panel {
    width: min(420px, calc(100vw - 32px));
  }

  .admin-fab-wrap {
    left: 12px;
    bottom: 12px;
  }

  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .search-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .grid-3-on-desktop {
    grid-template-columns: repeat(3, 1fr);
  }

  .sale-input-row {
    grid-template-columns: auto 2fr 1fr;
    gap: 8px;
  }

  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 370px) {
  .search-filter-grid {
    grid-template-columns: 1fr;
  }

  .sale-input-row {
    grid-template-columns: 1fr;
  }

  .sale-price-input-wrap {
    gap: 5px;
  }

  .sale-price-reset-button {
    min-width: 30px;
    min-height: 30px;
  }

  .sale-star-badge {
    justify-self: start;
  }

  .tool-toggle-button {
    width: 100%;
    white-space: normal;
  }

  .assist-section-title-note {
    font-size: 0.64rem;
  }
}

.recipe-table-desktop {
  display: none;
}

.recipe-cards-mobile {
  display: grid;
  gap: 6px;
}

.recipe-material-card {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 7px 8px;
  background: #fffdf9;
}

.recipe-material-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.recipe-material-name {
  margin: 0 0 4px;
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 700;
  min-width: 0;
}

.recipe-material-link {
  color: #5a3a23;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.recipe-material-link:hover {
  color: #7a4c28;
}

.recipe-material-count-line {
  margin: 0 0 1px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 0.77rem;
  color: #6b5440;
  line-height: 1.2;
}

.recipe-material-count-line strong {
  font-size: 0.98rem;
  color: #4f3524;
  font-weight: 800;
}

.recipe-material-price-row {
  margin-top: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.recipe-material-price-field {
  margin: 0;
  min-width: 0;
}

.material-price-input-mobile {
  width: min(100%, 132px);
  min-height: 36px;
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}

.recipe-material-price-field--embedded {
  position: relative;
  display: block;
}

.recipe-material-price-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.73rem;
  color: #7a624c;
  font-weight: 700;
  pointer-events: none;
}

.material-price-input-mobile--with-prefix {
  padding-left: 48px;
}

.recipe-material-subtotal {
  margin: 0;
  text-align: right;
  display: grid;
  gap: 1px;
}

.recipe-material-subtotal span {
  font-size: 0.72rem;
  color: #6c5440;
  font-weight: 600;
}

.recipe-material-subtotal strong {
  font-size: 1.06rem;
  line-height: 1.1;
}

.recipe-material-subtotal strong span {
  font-size: 0.76rem;
  color: #7a624c;
  font-weight: 600;
}

.recipe-material-market-link-wrap {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 699px) {
  .recipe-cards-mobile {
    gap: 5px;
  }

  .profit-equipment-performance {
    padding: 7px 8px;
    gap: 5px;
  }

  .profit-equipment-stat-list {
    gap: 4px 8px;
  }

  .profit-equipment-stat-list li {
    font-size: 0.76rem;
  }

  .profit-equipment-stat-list strong {
    font-size: 0.83rem;
  }

  .profit-equipment-traits-label {
    font-size: 0.72rem;
  }

  .profit-equipment-traits-list {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .recipe-material-card {
    padding: 6px 7px;
    border-radius: 9px;
  }

  .recipe-material-header {
    gap: 5px;
    margin-bottom: 2px;
  }

  .recipe-material-name {
    margin-bottom: 0;
    font-size: 0.88rem;
    line-height: 1.15;
  }

  .recipe-material-count-line {
    margin-bottom: 0;
    gap: 4px;
    font-size: 0.72rem;
    line-height: 1.15;
  }

  .recipe-material-count-line strong {
    font-size: 0.88rem;
  }

  .recipe-material-price-row {
    margin-top: 3px;
    gap: 5px;
    align-items: end;
  }

  .material-price-input-mobile {
    width: min(100%, 108px);
    min-height: 32px;
    font-size: 0.92rem;
  }

  .recipe-material-price-prefix {
    left: 10px;
    font-size: 0.67rem;
  }

  .material-price-input-mobile--with-prefix {
    padding-left: 42px;
  }

  .recipe-material-subtotal {
    gap: 0;
  }

  .recipe-material-subtotal span {
    font-size: 0.66rem;
  }

  .recipe-material-subtotal strong {
    font-size: 0.9rem;
  }

  .recipe-material-market-link-wrap {
    margin-top: 4px;
  }

  .recipe-market-link-button {
    padding: 5px 8px;
    font-size: 0.72rem;
    min-height: 28px;
  }

  .recipe-market-link-button-mobile {
    align-self: flex-start;
    padding: 3px 7px;
    min-height: 24px;
    font-size: 0.68rem;
    flex: 0 0 auto;
  }

  .profit-reset-actions {
    margin-top: 8px;
  }

  .profit-reset-button {
    min-height: 42px;
  }
}

.orb-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.whitebox-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.equipment-db-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.routine-controls {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.routine-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.routine-type-tab-button {
  border: 1px solid #c8b399;
  border-radius: 999px;
  background: #fffaf3;
  color: #5f4734;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.routine-type-tab-button.is-active {
  background: #e7d6c2;
  color: #4b3626;
  border-color: #b4926f;
}

.routine-toolbar {
  display: grid;
  gap: 10px;
}

.routine-toolbar-main {
  display: grid;
  gap: 8px;
}

.routine-progress-text {
  margin: 0;
  color: #4d3827;
  font-weight: 700;
}

.routine-reset-description {
  margin: 0;
  color: #6b5240;
  font-size: 0.8rem;
  line-height: 1.5;
}

.routine-reset-description-note {
  display: inline;
  color: #7b6048;
}

.routine-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.routine-action-row button {
  min-height: 38px;
}

@media (min-width: 860px) {
  .routine-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: end;
    column-gap: 16px;
  }

  .routine-reset-description {
    align-self: end;
  }
}

.routine-card-list {
  display: grid;
  gap: 4px;
  margin: 0;
}

.routine-task-card {
  border-color: #d7c5ae;
  background: #fffaf5;
  padding: 9px 10px;
  margin: 0;
}

.routine-task-card.is-complete {
  border-color: #b9c9ae;
  background: #f3f7ef;
}

.routine-task-card.is-complete .routine-task-title {
  color: #526347;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.routine-task-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
}

.routine-task-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.routine-task-title-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.routine-task-title {
  margin: 0;
  color: #3f2f22;
  font-size: 1rem;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.routine-task-version {
  color: #8b7664;
  font-size: 0.78rem;
  white-space: nowrap;
}

.routine-task-tool-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border: 1px solid #d3c1a6;
  border-radius: 999px;
  background: #f7efe3;
  color: #6a523f;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.routine-task-reset-timing {
  margin: 4px 0 0;
  color: #6a523f;
  font-size: 0.76rem;
  line-height: 1.35;
}

.routine-task-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 9px;
  margin: 4px 0 0;
  color: #5a4635;
  font-size: 0.84rem;
  line-height: 1.4;
}

.routine-task-summary-item {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.routine-task-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #4a3625;
  font-weight: 700;
  white-space: nowrap;
}

.routine-task-check input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.routine-status-card {
  padding: 14px;
  color: #4d3827;
}

.equipment-db-type-tabs {
  display: flex;
  gap: 8px;
}

.equipment-db-type-tab-button {
  border: 1px solid #c8b399;
  border-radius: 999px;
  background: #fffaf3;
  color: #5f4734;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.equipment-db-type-tab-button.is-active {
  background: #e7d6c2;
  color: #4b3626;
  border-color: #b4926f;
}

.whitebox-type-tabs {
  display: flex;
  gap: 8px;
}

.whitebox-type-tab-button {
  border: 1px solid #c8b399;
  border-radius: 999px;
  background: #fffaf3;
  color: #5f4734;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.whitebox-type-tab-button.is-active {
  background: #e7d6c2;
  color: #4b3626;
  border-color: #b4926f;
}

.whitebox-filter-grid {
  margin-top: 0;
}

.whitebox-filter-field {
  margin-bottom: 0;
}

.equipment-db-filter-grid {
  margin-top: 0;
}

.equipment-db-filter-field {
  margin-bottom: 0;
}

.orb-search-field {
  margin-bottom: 0;
}

.orb-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.orb-category-button {
  border: 1px solid #c8b399;
  border-radius: 999px;
  background: #fffaf3;
  color: #5f4734;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.orb-category-button.is-active {
  background: #e7d6c2;
  color: #4b3626;
  border-color: #b4926f;
}

.orb-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--ui-mobile-card-columns), minmax(0, 1fr));
  gap: 10px;
}

.whitebox-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--ui-mobile-card-columns), minmax(0, 1fr));
  gap: 10px;
}

.equipment-db-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 12px;
  column-gap: 12px;
  align-items: start;
}

.ui-settings-control-list {
  display: grid;
  gap: 8px;
}

.ui-setting-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 8px;
  align-items: end;
}

.ui-setting-number-field {
  margin-bottom: 0;
}

.ui-settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ui-settings-note {
  margin-top: 0;
}

.content-editor-textarea {
  min-height: 72px;
  resize: vertical;
}

[data-content-key].is-content-edit-target {
  outline: 1px dashed #c68f59;
  outline-offset: 2px;
  cursor: text;
  position: relative;
}

[data-content-key].is-content-edit-target::after {
  content: "✎";
  position: absolute;
  top: -10px;
  right: -4px;
  font-size: 0.72rem;
  color: #8a5b2c;
  background: #fff;
  border: 1px solid #e0c29f;
  border-radius: 999px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.updates-editor-list {
  display: grid;
  gap: 8px;
}

.updates-editor-item {
  border: 1px solid #e0d0b9;
  border-radius: 8px;
  padding: 8px;
  background: #fffdfa;
}

.updates-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.updates-editor-text-field {
  grid-column: 1 / -1;
}

.updates-editor-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-fab-wrap {
  position: fixed;
  left: 10px;
  right: auto;
  top: auto;
  bottom: calc(var(--mobile-bottom-nav-height) + 12px + env(safe-area-inset-bottom));
  z-index: 80;
  display: grid;
  gap: 6px;
  justify-items: start;
}

#adminFab,
#adminFab[hidden] {
  display: none !important;
}

.admin-fab-button {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.admin-fab-panel {
  width: min(300px, calc(100vw - 20px));
  background: #fffaf3;
  border: 1px solid #d6c1a9;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(50, 33, 20, 0.2);
  padding: 10px;
}

.admin-fab-note {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: #6b5440;
}

.admin-pin-gate,
.admin-action-list {
  display: grid;
  gap: 8px;
}

.memo-dock {
  position: fixed;
  right: 10px;
  bottom: calc(var(--mobile-bottom-nav-height) + 16px + env(safe-area-inset-bottom));
  z-index: 1300;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.history-back-button,
.memo-dock-button {
  pointer-events: auto;
  min-width: 58px;
  min-height: 46px;
  padding: 8px 12px;
}

.history-back-button {
  position: fixed;
  left: 10px;
  right: auto;
  bottom: calc(var(--mobile-bottom-nav-height) + 16px + env(safe-area-inset-bottom));
  border: 1px solid #b7926d;
  border-radius: 999px;
  background: #fff5df;
  color: #5a3d25;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(35, 22, 10, 0.16);
  z-index: 1250;
}

.memo-dock-button {
  border: 1px solid #b88b45;
  border-radius: 10px 10px 4px 10px;
  background: linear-gradient(180deg, #ffe49a 0%, #edc968 100%);
  color: #4a321c;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(35, 22, 10, 0.2);
}

.memo-dock-hint {
  position: absolute;
  right: 0;
  bottom: 54px;
  width: min(230px, calc(100vw - 34px));
  padding: 9px 12px 9px 10px;
  border: 1px solid #d3b38a;
  border-radius: 12px;
  background: rgba(255, 248, 236, 0.98);
  color: #5a3c27;
  box-shadow: 0 10px 24px rgba(35, 22, 10, 0.18);
}

.memo-dock-hint p {
  margin: 0;
  padding-right: 18px;
  font-size: 0.76rem;
  line-height: 1.45;
}

.memo-dock-hint-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid #ccb089;
  border-radius: 999px;
  background: #fffaf0;
  color: #5a3c27;
  font-size: 0.88rem;
  line-height: 1;
}

body.memo-panel-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.memo-toast {
  position: absolute;
  right: 0;
  bottom: 54px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(71, 49, 29, 0.94);
  color: #fff8ef;
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(19, 12, 7, 0.18);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.memo-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.memo-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(35, 24, 14, 0.38);
  pointer-events: auto;
}

.memo-panel {
  pointer-events: auto;
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(var(--mobile-bottom-nav-height) + 10px + env(safe-area-inset-bottom));
  width: min(620px, calc(100vw - 16px));
  max-height: min(78vh, 680px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border: 1px solid #b8946e;
  border-radius: 16px 16px 12px 12px;
  background: #fff5df;
  box-shadow: 0 14px 36px rgba(28, 17, 8, 0.28);
  padding: 10px;
  transform: translateY(calc(100% + 90px));
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

@media (max-width: 640px) {
  .top-quick-access-note-memo {
    padding: 6px 8px;
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .memo-dock-hint {
    right: 2px;
    bottom: 52px;
    width: min(220px, calc(100vw - 28px));
    padding: 8px 10px;
  }

  .memo-dock-hint p {
    font-size: 0.72rem;
  }
}

.memo-panel.is-open {
  transform: translateY(0);
  opacity: 1;
}

.memo-panel[hidden] {
  display: none !important;
}

.memo-panel.is-swipe-dragging {
  transition: none;
}

.memo-panel-handle {
  width: 46px;
  height: 4px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: rgba(88, 58, 30, 0.28);
  touch-action: none;
}

.memo-panel-header,
.memo-target-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}

.memo-panel-header h2,
.memo-target-header h3 {
  margin: 0;
}

.memo-target-header {
  padding-top: 4px;
  padding-right: 108px;
  margin: 0 0 8px;
  min-height: 36px;
}

.memo-target-header .memo-add-button {
  position: absolute;
  top: 1px;
  right: 50px;
  margin-top: 0;
  flex: 0 0 auto;
}

.bazaar-card-memo-button,
.bazaar-detail-memo-button,
.profit-memo-add-button {
  flex: 0 0 auto;
}

.memo-panel-actions {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

.memo-panel-close-button,
.memo-clear-all-button,
.memo-add-button,
.memo-delete-button,
.memo-detail-button,
.memo-move-button,
.memo-note-toggle-button,
.memo-note-save-button,
.memo-note-cancel-button {
  border: 1px solid #b7926d;
  background: #fffaf0;
  color: #4d3421;
  font-weight: 700;
}

.memo-panel-close-button {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.1rem;
}

.memo-clear-all-button,
.memo-add-button,
.memo-delete-button,
.memo-detail-button,
.memo-move-button,
.memo-note-toggle-button,
.memo-note-save-button,
.memo-note-cancel-button {
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.memo-panel-status {
  min-height: 1.2em;
  margin: 6px 0;
  color: #6a5038;
  font-size: 0.78rem;
}

.memo-panel-help {
  margin: 6px 0 4px;
  color: #7a5b3d;
  font-size: 0.76rem;
  line-height: 1.45;
}

.memo-move-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.memo-list-wrap {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.memo-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #c8ab88;
  border-radius: 10px;
  color: #6a5038;
  background: rgba(255, 251, 243, 0.8);
}

.memo-card {
  border: 1px solid #d5bd9d;
  border-radius: 10px;
  background: #fffdf8;
  padding: 9px;
  cursor: pointer;
  transition: background 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out;
}

.memo-card:hover,
.memo-card:focus-visible {
  background: #fff8ee;
  border-color: #c9a978;
  box-shadow: 0 4px 12px rgba(52, 33, 17, 0.1);
  outline: none;
}

.memo-card-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.memo-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  flex: 0 0 auto;
  max-width: 150px;
}

.memo-card-type {
  margin: 0 0 2px;
  color: #7a5b3d;
  font-size: 0.72rem;
  font-weight: 700;
}

.memo-card h3 {
  margin: 0;
  color: #3f2b1c;
  font-size: 0.92rem;
}

.memo-card-body {
  margin-top: 7px;
}

.memo-card-body p,
.memo-card-more {
  margin: 0 0 4px;
  color: #4d3a2a;
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.memo-card-more {
  color: #806247;
}

.memo-user-note {
  margin-top: 7px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #fff6e5;
  border: 1px solid rgba(183, 146, 109, 0.42);
}

.memo-user-note p {
  margin: 0;
  color: #4d3a2a;
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.memo-user-note .memo-user-note-label {
  margin-bottom: 3px;
  color: #7a5b3d;
  font-size: 0.72rem;
  font-weight: 700;
}

.memo-note-editor {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.memo-note-editor-label {
  color: #6a5038;
  font-size: 0.76rem;
  font-weight: 700;
}

.memo-note-editor textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 64px;
  border: 1px solid #d0b493;
  border-radius: 9px;
  padding: 8px;
  color: #3f2b1c;
  background: #fffdf8;
  font: inherit;
  font-size: 0.86rem;
}

.memo-note-editor-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.monster-info-card-memo-button,
.equipment-db-memo-button,
.bazaar-card-memo-button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0;
  z-index: 1;
}

.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: min(var(--ui-desktop-max-width), 100%);
  z-index: 950;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(123, 92, 62, 0.35);
  background: rgba(250, 241, 228, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 -2px 8px rgba(61, 39, 24, 0.12);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-bottom-nav.has-back-slot {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mobile-bottom-nav.is-disabled {
  display: none;
}

.mobile-bottom-nav.is-hidden {
  transform: translateY(calc(100% + env(safe-area-inset-bottom)));
  opacity: 0.08;
  pointer-events: none;
}

.mobile-bottom-nav-item {
  min-height: 48px;
  border: 1px solid var(--mobile-bottom-nav-item-border);
  border-radius: 8px;
  background: var(--mobile-bottom-nav-item-bg);
  color: var(--mobile-bottom-nav-item-text);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  position: relative;
  overflow: hidden;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.mobile-bottom-nav-item[data-bottom-nav-action="back"] {
  display: none;
}

.mobile-bottom-nav.has-back-slot .mobile-bottom-nav-item[data-bottom-nav-action="back"] {
  display: inline-flex;
}

.mobile-bottom-nav-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
}

.mobile-bottom-nav-item.is-active {
  border-color: var(--mobile-bottom-nav-item-active-border);
  background: var(--mobile-bottom-nav-item-active-bg);
  color: var(--mobile-bottom-nav-item-active-text);
  box-shadow: inset 0 0 0 1px rgba(134, 97, 67, 0.34);
}

.mobile-bottom-nav-item.is-active::before {
  background: var(--mobile-bottom-nav-item-active-accent);
}

.mobile-bottom-nav-icon {
  font-size: 1rem;
  line-height: 1;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.15s ease;
}

.mobile-bottom-nav-item.is-active .mobile-bottom-nav-icon {
  transform: scale(1.06);
}

.mobile-bottom-nav-label {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 420px) {
  .mobile-bottom-nav {
    gap: 2px;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav-item {
    min-height: 46px;
    gap: 2px;
    padding: 3px 1px;
  }

  .mobile-bottom-nav-icon {
    font-size: 0.95rem;
  }

  .mobile-bottom-nav-label {
    font-size: 0.61rem;
  }
}

.whitebox-card {
  padding: 0;
  overflow: hidden;
  border-color: #d6c5ad;
  background: #fffaf5;
}

.whitebox-card.whitebox-card-type-weapon {
  border-color: #d4a88b;
  background: #f6e4da;
}

.whitebox-card.whitebox-card-type-armor {
  border-color: #5f646d;
  background: #444a54;
}

.whitebox-card-toggle {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 12px;
  cursor: pointer;
  color: #3f2f22;
}

.whitebox-card.whitebox-card-type-armor .whitebox-card-toggle {
  color: #f2f5fb;
}

.whitebox-card-name {
  margin: 0 0 6px;
  font-size: 0.98rem;
  color: #3c2d20;
}

.whitebox-card.whitebox-card-type-armor .whitebox-card-name {
  color: #f7f9ff;
}

.whitebox-card-meta {
  margin: 0;
  color: #5a4635;
  font-size: 0.82rem;
  line-height: 1.45;
}

.equipment-type-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.equipment-type-icon {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex-shrink: 0;
  object-fit: contain;
  vertical-align: middle;
  opacity: 0.88;
}

.selected-equipment-type-meta {
  margin: -6px 0 6px;
  min-height: 20px;
}

.selected-equipment-summary {
  display: grid;
  gap: 6px;
}

.selected-equipment-type-chip {
  font-size: 0.82rem;
  color: #7b634d;
}

.profit-equipment-performance {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #dec7aa;
  border-radius: 10px;
  background: rgba(255, 250, 242, 0.9);
}

.profit-equipment-stat-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.profit-equipment-stat-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #5f4836;
  font-size: 0.8rem;
}

.profit-equipment-stat-list strong {
  color: #4a301c;
  font-size: 0.88rem;
}

.profit-equipment-traits {
  display: grid;
  gap: 4px;
}

.profit-equipment-traits-label {
  color: #6d5238;
  font-size: 0.76rem;
  font-weight: 700;
}

.profit-equipment-traits-list {
  margin: 0;
  padding-left: 16px;
  color: #4f3928;
  font-size: 0.8rem;
  line-height: 1.4;
}

.profit-equipment-traits-list li + li {
  margin-top: 2px;
}

@media (min-width: 700px) {
  .selected-equipment-summary {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  .selected-equipment-type-chip {
    align-self: start;
    white-space: nowrap;
  }

  .profit-equipment-performance {
    min-width: 0;
  }
}

.whitebox-card.whitebox-card-type-armor .whitebox-card-meta {
  color: #dde3ee;
}

.whitebox-card-monsters {
  border-top: 1px solid #dcc7ad;
  background: rgba(255, 255, 255, 0.62);
  padding: 10px 12px 12px;
}

.whitebox-card.whitebox-card-type-weapon .whitebox-card-monsters {
  border-top-color: #d9b39b;
  background: rgba(255, 248, 243, 0.8);
}

.whitebox-card.whitebox-card-type-armor .whitebox-card-monsters {
  border-top-color: rgba(196, 205, 220, 0.36);
  background: rgba(23, 27, 34, 0.26);
}

.whitebox-monster-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: #5f4734;
  font-size: 0.84rem;
}

.whitebox-card.whitebox-card-type-armor .whitebox-monster-title {
  color: #edf1fb;
}

.whitebox-monster-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  color: #4f3e2f;
  font-size: 0.82rem;
}

.whitebox-monster-list li {
  border: 1px solid rgba(93, 70, 52, 0.16);
  border-radius: 7px;
  background: rgba(255, 253, 249, 0.82);
  padding: 4px 6px;
  line-height: 1.35;
}

.whitebox-card.whitebox-card-type-armor .whitebox-monster-list {
  color: #eff3fd;
}

.whitebox-card.whitebox-card-type-armor .whitebox-monster-list li {
  border-color: rgba(214, 223, 238, 0.24);
  background: rgba(32, 38, 48, 0.5);
}

.whitebox-monster-empty {
  margin: 0;
  color: #7f6852;
  font-size: 0.8rem;
}

.whitebox-card.whitebox-card-type-armor .whitebox-monster-empty {
  color: #d8dfec;
}

.whitebox-empty {
  grid-column: 1 / -1;
}

.equipment-db-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d6c5ad;
  border-radius: 12px;
  background: #fffaf5;
  box-shadow: 0 1px 3px rgba(63, 47, 34, 0.08);
}

.equipment-db-card-weapon {
  border-color: #d98767;
  background: #fff7f3;
}

.equipment-db-card-armor {
  border-color: #8cb9de;
  background: #f4fbff;
}

.equipment-db-card-toggle {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 9px 9px 8px;
  cursor: pointer;
  color: #3f2f22;
}

.equipment-db-card-name {
  margin: 0 0 5px;
  font-size: 0.95rem;
  color: #3c2d20;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.equipment-db-card-meta {
  margin: 0;
  color: #5a4635;
  font-size: 0.74rem;
  line-height: 1.2;
}

.equipment-db-card-meta-row {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.equipment-db-stats-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.equipment-db-stats-list li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.74rem;
  color: #4d3a2b;
  border: 1px solid rgba(93, 70, 52, 0.14);
  border-radius: 7px;
  background: rgba(255, 253, 249, 0.86);
  padding: 3px 6px;
}

.equipment-db-stats-list li span {
  color: #6a5240;
}

.equipment-db-stats-list li strong {
  font-size: 0.74rem;
  color: #3f2f22;
}

.equipment-db-card-traits {
  border-top: 1px solid #dcc7ad;
  background: rgba(255, 255, 255, 0.62);
  padding: 8px 9px 44px;
  position: relative;
}

.equipment-db-card-actions {
  padding: 0 9px 8px;
}

.equipment-db-material-cost {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.2;
  color: #4d3a2b;
  white-space: nowrap;
}

.equipment-db-open-profit-button {
  width: auto;
  min-height: 28px;
  border: 1px solid rgba(78, 59, 44, 0.24);
  background: rgba(255, 255, 255, 0.88);
  color: #463426;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 3px 7px;
  border-radius: 8px;
  flex-shrink: 0;
}

.equipment-db-open-profit-button:hover {
  background: rgba(255, 255, 255, 0.96);
}

.equipment-db-card-weapon .equipment-db-card-traits {
  border-top-color: #e0b29e;
  background: rgba(255, 248, 244, 0.84);
}

.equipment-db-card-armor .equipment-db-card-traits {
  border-top-color: #bad5ea;
  background: rgba(247, 252, 255, 0.92);
}

.equipment-db-card-armor .equipment-db-open-profit-button {
  border-color: rgba(68, 104, 134, 0.34);
}

.equipment-db-traits-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: #5f4734;
  font-size: 0.74rem;
}

.equipment-db-traits-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  color: #4f3e2f;
  font-size: 0.74rem;
}

.equipment-db-traits-list li {
  border: 1px solid rgba(93, 70, 52, 0.16);
  border-radius: 7px;
  background: rgba(255, 253, 249, 0.82);
  padding: 4px 6px;
  line-height: 1.35;
}

.equipment-db-traits-list-collapsed {
  margin-top: 7px;
  gap: 3px;
  font-size: 0.73rem;
}

.equipment-db-traits-list-collapsed li {
  padding: 3px 5px;
  line-height: 1.3;
}

.equipment-db-trait-empty {
  margin: 0;
  color: #7f6852;
  font-size: 0.74rem;
}

.equipment-db-trait-empty-collapsed {
  margin-top: 7px;
  font-size: 0.73rem;
}

.equipment-db-detail-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(135, 105, 78, 0.22);
}

.equipment-db-detail-section-first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 10px;
}


.equipment-db-armor-part-grid {
  margin: 0;
  display: grid;
  gap: 4px;
}

.equipment-db-armor-part-grid div {
  display: grid;
  grid-template-columns: 4.8em minmax(0, 1fr) max-content;
  gap: 6px;
  align-items: baseline;
  border: 1px solid rgba(93, 70, 52, 0.14);
  border-radius: 7px;
  background: rgba(255, 253, 249, 0.86);
  padding: 3px 6px;
}

.equipment-db-armor-part-grid dt {
  margin: 0;
  color: #6a5240;
  font-size: 0.74rem;
  font-weight: 700;
}

.equipment-db-armor-part-grid .is-highlighted {
  background: rgba(248, 232, 201, 0.92);
  border-color: rgba(184, 138, 79, 0.34);
}

.equipment-db-armor-part-grid dd {
  margin: 0;
  color: #3f2f22;
  font-size: 0.74rem;
  line-height: 1.35;
}

.equipment-db-armor-part-name {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  line-break: strict;
}

.equipment-db-armor-part-cost {
  white-space: nowrap;
  text-align: right;
}

.equipment-db-armor-part-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(187, 138, 79, 0.18);
  color: #7a4f1e;
  font-size: 0.65rem;
  font-weight: 700;
  vertical-align: middle;
}
.equipment-db-armor-drop-list {
  display: grid;
  gap: 8px;
}

.equipment-db-armor-drop-slot {
  display: grid;
  gap: 4px;
}

.equipment-db-armor-drop-slot-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #5a4635;
}

.equipment-db-armor-item-name {
  font-weight: 700;
}

.armor-set-detail-modal {
  width: min(820px, 100%);
  max-height: min(86vh, 760px);
}

.equipment-db-armor-part-grid-modal div {
  grid-template-columns: 4.8em minmax(0, 1fr) max-content max-content;
  gap: 8px;
  padding: 5px 8px;
}

.equipment-db-armor-part-action {
  white-space: nowrap;
  text-align: right;
}

.equipment-db-armor-set-level {
  color: #3f2f22;
}

@media (max-width: 640px) {
  .equipment-db-armor-part-grid div {
    grid-template-columns: 4.4em minmax(0, 1fr);
  }

  .equipment-db-armor-part-cost {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 4.4em;
  }

  .equipment-db-armor-part-grid-modal div {
    grid-template-columns: 4.4em minmax(0, 1fr);
  }

  .equipment-db-armor-part-grid-modal .equipment-db-armor-part-cost {
    grid-column: 1 / -1;
    padding-left: 4.4em;
  }

  .equipment-db-armor-part-action {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 4.4em;
  }

  .armor-set-detail-modal {
    width: min(100%, 740px);
  }
}

.equipment-db-empty {
  grid-column: 1 / -1;
}

.orb-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-color: #d6c5ad;
  background: #fffaf5;
}

.orb-card-toggle {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 12px 72px 12px 12px;
  cursor: pointer;
  color: #3f2f22;
}

.orb-memo-button {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: auto;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.74rem;
  margin: 0;
  z-index: 2;
}

.orb-card-category {
  margin: 0;
  font-size: 0.74rem;
  color: #5f4734;
  font-weight: 700;
}

.orb-card-category-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.orb-card-category-icon {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex-shrink: 0;
  object-fit: contain;
}

.orb-card-category-label {
  display: inline-block;
}

.orb-card-name {
  margin: 4px 0 6px;
  font-size: 1.02rem;
  color: #3c2d20;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.orb-card-effect {
  margin: 0;
  color: #5a4635;
  font-size: 0.86rem;
  line-height: 1.45;
}

.orb-card-monsters {
  border-top: 1px solid #dcc7ad;
  background: rgba(255, 255, 255, 0.62);
  padding: 10px 12px 12px;
}

.orb-monster-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: #5f4734;
  font-size: 0.84rem;
}

.orb-monster-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
  gap: 4px 8px;
  color: #4f3e2f;
  font-size: 0.82rem;
}

.orb-monster-list li {
  border: 1px solid rgba(93, 70, 52, 0.16);
  border-radius: 7px;
  background: rgba(255, 253, 249, 0.82);
  padding: 4px 6px;
  line-height: 1.35;
}

.orb-monster-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: #3f2a1a;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.orb-monster-link:hover {
  color: #7a4f1e;
}

.orb-monster-empty {
  margin: 0;
  color: #7f6852;
  font-size: 0.8rem;
}

.orb-empty {
  grid-column: 1 / -1;
}

.orb-card-category-fire {
  background: #f7e3df;
}

.orb-card-category-water {
  background: #e2f2fb;
}

.orb-card-category-wind {
  background: #e6f4e4;
}

.orb-card-category-light {
  background: #faf4cf;
}

.orb-card-category-dark {
  background: #ece8e4;
}

.orb-card-category-other {
  background: #f6efe8;
}

.bazaar-admin-layout {
  display: grid;
  gap: 12px;
}

.bazaar-admin-panel {
  display: grid;
  gap: 10px;
}

.bazaar-admin-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: end;
}

.bazaar-admin-category-field {
  min-width: 180px;
}

.bazaar-admin-list-wrap {
  display: grid;
  gap: 8px;
}

.bazaar-admin-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
}

.bazaar-admin-display-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.bazaar-admin-section {
  display: grid;
  gap: 8px;
}

.bazaar-admin-section h3 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.bazaar-admin-section-excluded {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #d6c2ab;
}

.bazaar-admin-button-help {
  margin: 0;
  padding-left: 18px;
}

.bazaar-admin-row {
  border: 1px solid #d6c2ab;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: #fffaf4;
}

.bazaar-admin-row.is-success {
  border-color: #7bbf79;
}

.bazaar-admin-row.is-extract-fail {
  border-color: #d17070;
}

.bazaar-admin-row.is-excluded {
  border-color: #8a8a8a;
  background: #f7f7f7;
}

.bazaar-admin-row-main {
  min-width: 0;
}

.bazaar-admin-material {
  margin: 0;
  font-weight: 700;
}

.bazaar-admin-meta,
.bazaar-admin-status {
  margin: 4px 0 0;
  font-size: 0.82rem;
}

.bazaar-admin-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #d6c2ab;
  background: #f8ecde;
  font-weight: 600;
}

.bazaar-admin-row.is-success .bazaar-admin-status {
  background: #e7f4e6;
  border-color: #7bbf79;
}

.bazaar-admin-row.is-extract-fail .bazaar-admin-status {
  background: #fbe9e9;
  border-color: #d17070;
}

.bazaar-admin-row.is-excluded .bazaar-admin-status {
  background: #f0f0f0;
  border-color: #8a8a8a;
}

.bazaar-admin-row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.bazaar-admin-paste-field {
  width: min(360px, 100%);
}

.bazaar-admin-paste-hint,
.bazaar-admin-paste-status {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  line-height: 1.4;
}

.bazaar-admin-paste-hint {
  color: #6b5440;
}

.bazaar-admin-paste-status {
  min-height: 1.4em;
  color: #4f5d75;
}

.bazaar-admin-paste-status.is-success {
  color: #2f6f42;
}

.bazaar-admin-paste-status.is-error {
  color: #b34b3b;
}

.bazaar-admin-paste-field textarea {
  width: 100%;
  min-height: 52px;
}

.admin-checklist-panel {
  display: grid;
  gap: 10px;
  align-self: start;
}

.admin-checklist-header {
  align-items: start;
}

.admin-checklist-note {
  margin: 4px 0 0;
}

.admin-checklist-wrap {
  display: grid;
  gap: 10px;
}

.admin-checklist-group {
  border: 1px solid #d6c2ab;
  border-radius: 12px;
  background: #fffaf4;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.admin-checklist-group-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}

.admin-checklist-group-header h4 {
  margin: 0;
  font-size: 1rem;
}

.admin-checklist-toggle-button {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  color: inherit;
}

.admin-checklist-toggle-copy {
  min-width: 0;
}

.admin-checklist-toggle-summary {
  display: grid;
  gap: 6px;
  justify-items: end;
  flex-shrink: 0;
}

.admin-checklist-period {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #6f5741;
}

.admin-checklist-deadline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f6ecdf;
  color: #664830;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-checklist-deadline.is-complete {
  background: #e3f1e2;
  color: #2f6b39;
}

.admin-checklist-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-checklist-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3e5d2;
  color: #5b3d24;
  font-weight: 700;
  font-size: 0.84rem;
}

.admin-checklist-reset-button {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 0.82rem;
}

.admin-checklist-items {
  display: grid;
  gap: 8px;
}

.admin-checklist-items[hidden] {
  display: none;
}

.admin-checklist-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #e2d3c1;
  border-radius: 10px;
  background: #fffdf9;
}

.admin-checklist-item input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.admin-checklist-item-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-checklist-item-label {
  font-weight: 700;
  color: #4a311f;
}

.admin-checklist-item-memo {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #6c5540;
}

@media (min-width: 900px) {
  .bazaar-admin-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 20px;
  }

  .admin-checklist-panel {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 96px);
    overflow: auto;
  }

  .equipment-type-icon {
    width: 18px;
    height: 18px;
  }

  .orb-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .whitebox-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .equipment-db-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .app.is-admin-bazaar-mode {
    max-width: min(1400px, calc(100vw - 40px));
    padding-left: 20px;
    padding-right: 20px;
  }

  .bazaar-admin-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
  }

  .bazaar-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    align-items: start;
    gap: 14px;
  }

  .bazaar-admin-row-actions {
    width: 100%;
    align-items: stretch;
  }

  .bazaar-admin-row-actions > button,
  .bazaar-admin-row-actions > .bazaar-admin-paste-field {
    width: 100%;
  }

  .bazaar-admin-paste-field {
    width: 100%;
    max-width: none;
  }

  .bazaar-list {
    grid-template-columns: 1fr;
  }

  .equipment-db-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .recipe-table-desktop {
    display: block;
  }

  .recipe-cards-mobile {
    display: none;
  }

  .mobile-bottom-nav {
    display: none;
  }

  .memo-dock {
    bottom: 18px;
    right: 18px;
  }

  .history-back-button {
    left: 18px;
    bottom: 18px;
  }

  .memo-panel {
    bottom: 18px;
    right: 18px;
    left: auto;
    margin: 0;
    max-height: min(78vh, 680px);
  }

  .app {
    padding-bottom: 14px;
  }
}

@media (max-width: 699px) {
  .bazaar-admin-layout {
    gap: 10px;
  }

  .admin-checklist-group {
    padding: 9px;
  }

  .admin-checklist-group-header {
    flex-direction: column;
  }

  .admin-checklist-toggle-button {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-checklist-toggle-summary {
    justify-items: start;
  }

  .admin-checklist-group-actions {
    width: 100%;
    justify-content: space-between;
  }

  .admin-checklist-reset-button {
    min-height: 40px;
    padding: 8px 10px;
  }

  .admin-checklist-item {
    padding: 9px;
    gap: 8px;
  }

  .admin-checklist-item-memo {
    font-size: 0.77rem;
  }
}


@media (max-width: 640px) {
  .recipe-total-cost {
    justify-content: flex-start;
  }
}

.site-footer {
  margin: 16px auto 20px;
  padding: 0 14px;
  max-width: 920px;
}

.site-footer-inner {
  border: 1px solid #c8b399;
  border-radius: 10px;
  background: rgba(244, 235, 221, 0.86);
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(70, 48, 30, 0.12);
}

.site-footer p {
  margin: 0;
  color: #5d4532;
  font-size: 0.73rem;
  line-height: 1.55;
}

.site-footer-disclaimer {
  color: #5a4331;
}

.site-footer p + p {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(121, 91, 63, 0.24);
}

@media (max-width: 640px) {
  .history-back-button,
  .memo-dock-button {
    min-height: 44px;
    padding: 7px 11px;
  }

  .monster-info-card-memo-button,
  .equipment-db-memo-button,
  .bazaar-card-memo-button {
    right: 7px;
    bottom: 7px;
    min-height: 26px;
    padding: 3px 7px;
    font-size: 0.68rem;
  }

  .orb-memo-button {
    top: 7px;
    right: 7px;
    bottom: auto;
    min-height: 26px;
    padding: 3px 7px;
    font-size: 0.68rem;
  }

  .site-footer {
    margin-top: 14px;
    padding: 0 12px 16px;
  }

  .site-footer-inner {
    padding: 9px 10px;
  }

  .site-footer p {
    font-size: 0.69rem;
    line-height: 1.6;
  }
}