:root {
  --font-size-scale: 1.1;
  --app-title-icon-size: 22.5px;
  --mobile-app-title-icon-size: 21px;
  --item-icon-size: 40px;
  --supplement-icon-size: 16px;
  --small-check-size: 16px;
  --large-check-size: 22px;
  --discord-icon-size: 14px;
  --recipe-check-size: 14px;
  --item-name-base-size: 14px;
  --job-label-base-size: 12px;
  --job-icon-base-size: 17.78px;
  --render-small-check-size: calc(var(--small-check-size) * 1.1);
  --render-large-check-size: calc(var(--large-check-size) * 1.1);
  --render-recipe-check-size: calc(var(--recipe-check-size) * 1.1);
  --bg: #1a1a1a;
  --surface: #252525;
  --border: #3a3a3a;
  --accent: #c8a84b;
  --text: #e0e0e0;
  --muted: #888;
  --soft-text: #b8b8b8;
  --surplus: #6abf69;
  --craft: #c8a84b;
  --gather: #5b9bd5;
  --hunt: #d57b5b;
  --buy: #9b7fd5;
  --hover-bg: #2e2e2e;
  --active-bg: #2a2a1a;
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --footer-space: 22px;
  --app-layout-viewport-height: 100vh;
  --app-viewport-height: 100vh;
  --app-viewport-width: 100vw;
}
@supports (height: 100dvh) {
  :root {
    --app-layout-viewport-height: 100dvh;
    --app-viewport-height: 100dvh;
    --app-viewport-width: 100dvw;
  }
}
:root[data-font-size-level="1"],
[data-font-size-level="1"] {
  --font-size-scale: 0.88;
  --app-title-icon-size: 18px;
  --mobile-app-title-icon-size: 17px;
  --item-icon-size: 32px;
  --supplement-icon-size: 13px;
  --small-check-size: 13px;
  --large-check-size: 18px;
  --discord-icon-size: 11px;
  --recipe-check-size: 11px;
}
:root[data-font-size-level="2"],
[data-font-size-level="2"] {
  --font-size-scale: 0.99;
  --app-title-icon-size: 20px;
  --mobile-app-title-icon-size: 19px;
  --item-icon-size: 36px;
  --supplement-icon-size: 14px;
  --small-check-size: 14px;
  --large-check-size: 20px;
  --discord-icon-size: 13px;
  --recipe-check-size: 13px;
}
:root[data-font-size-level="3"],
[data-font-size-level="3"] {
  --font-size-scale: 1.1;
  --app-title-icon-size: 22.5px;
  --mobile-app-title-icon-size: 21px;
  --item-icon-size: 40px;
  --supplement-icon-size: 16px;
  --small-check-size: 16px;
  --large-check-size: 22px;
  --discord-icon-size: 14px;
  --recipe-check-size: 14px;
}
:root[data-font-size-level="4"],
[data-font-size-level="4"] {
  --font-size-scale: 1.21;
  --app-title-icon-size: 25px;
  --mobile-app-title-icon-size: 23px;
  --item-icon-size: 44px;
  --supplement-icon-size: 18px;
  --small-check-size: 18px;
  --large-check-size: 24px;
  --discord-icon-size: 15px;
  --recipe-check-size: 15px;
}
:root[data-font-size-level="5"],
[data-font-size-level="5"] {
  --font-size-scale: 1.32;
  --app-title-icon-size: 27px;
  --mobile-app-title-icon-size: 25px;
  --item-icon-size: 48px;
  --supplement-icon-size: 19px;
  --small-check-size: 19px;
  --large-check-size: 26px;
  --discord-icon-size: 17px;
  --recipe-check-size: 17px;
}
:root[data-font-size-level="6"],
[data-font-size-level="6"] {
  --font-size-scale: 1.43;
  --app-title-icon-size: 29px;
  --mobile-app-title-icon-size: 27px;
  --item-icon-size: 52px;
  --supplement-icon-size: 21px;
  --small-check-size: 21px;
  --large-check-size: 29px;
  --discord-icon-size: 18px;
  --recipe-check-size: 18px;
}
:root[data-font-size-level="7"],
[data-font-size-level="7"] {
  --font-size-scale: 1.54;
  --app-title-icon-size: 32px;
  --mobile-app-title-icon-size: 29px;
  --item-icon-size: 56px;
  --supplement-icon-size: 22px;
  --small-check-size: 22px;
  --large-check-size: 31px;
  --discord-icon-size: 20px;
  --recipe-check-size: 20px;
}
:root[data-font-size-level="8"],
[data-font-size-level="8"] {
  --font-size-scale: 1.65;
  --app-title-icon-size: 34px;
  --mobile-app-title-icon-size: 32px;
  --item-icon-size: 60px;
  --supplement-icon-size: 24px;
  --small-check-size: 24px;
  --large-check-size: 33px;
  --discord-icon-size: 21px;
  --recipe-check-size: 21px;
}
:root[data-font-size-level="9"],
[data-font-size-level="9"] {
  --font-size-scale: 1.76;
  --app-title-icon-size: 36px;
  --mobile-app-title-icon-size: 34px;
  --item-icon-size: 64px;
  --supplement-icon-size: 26px;
  --small-check-size: 26px;
  --large-check-size: 35px;
  --discord-icon-size: 22px;
  --recipe-check-size: 22px;
}
:root[data-font-size-level="10"],
[data-font-size-level="10"] {
  --font-size-scale: 1.87;
  --app-title-icon-size: 38px;
  --mobile-app-title-icon-size: 36px;
  --item-icon-size: 68px;
  --supplement-icon-size: 27px;
  --small-check-size: 27px;
  --large-check-size: 37px;
  --discord-icon-size: 24px;
  --recipe-check-size: 24px;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hidden {
  display: none !important;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Base layout */
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Yu Gothic", "Meiryo", sans-serif;
  font-size: calc(14px * var(--font-size-scale));
  display: flex;
  flex-direction: column;
  height: var(--app-layout-viewport-height);
  min-height: var(--app-layout-viewport-height);
  overflow: hidden;
  position: relative;
}

header {
  --header-logo-height: clamp(26px, calc(32px * var(--font-size-scale)), 48px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.header-primary-row {
  display: contents;
}
.app-title {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.app-title:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.app-title-icon {
  width: var(--app-title-icon-size);
  height: var(--app-title-icon-size);
  flex-shrink: 0;
}
header h1 {
  margin: 0;
  line-height: 0;
}
.app-name-logo {
  display: block;
  width: auto;
  height: var(--header-logo-height);
}
#appVersion {
  font-size: calc(11px * var(--font-size-scale));
  color: var(--muted);
  white-space: nowrap;
}
.header-info {
  --header-info-base-font-size: min(
    calc(12px * var(--font-size-scale)),
    calc(var(--header-logo-height) * 0.4545)
  );
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--header-logo-height);
  color: var(--muted);
  font-size: var(--header-info-base-font-size);
  line-height: 1.1;
}
.header-info > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
#headerAppFullName {
  font-size: var(--header-full-name-font-size, var(--header-info-base-font-size));
}
#loadStatus {
  font-size: var(--header-patch-font-size, var(--header-info-base-font-size));
  text-overflow: ellipsis;
}
#loadingOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}
#loadingOverlay.open {
  display: flex;
}
html[data-browser-support="blocked"],
html[data-browser-support="blocked"] body {
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-browser-support="blocked"] [data-app-content] {
  display: none;
}
html[data-browser-support="blocked"] #loadingOverlay {
  overflow: hidden;
  touch-action: none;
  background: var(--bg);
}
.loading-card {
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.loading-title {
  color: var(--accent);
  font-weight: bold;
}
.loading-detail {
  margin-top: 8px;
  color: var(--muted);
  font-size: calc(12px * var(--font-size-scale));
  white-space: pre-line;
}
.loading-progress-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(280px, calc(100vw - 64px));
  margin-top: 10px;
}
.loading-progress-row[hidden],
.loading-progress-percent[hidden] {
  display: none;
}
.loading-progress {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 12px;
  accent-color: var(--accent);
}
.loading-progress-percent {
  flex: 0 0 auto;
  min-width: 3.5ch;
  color: var(--muted);
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1;
  text-align: right;
}
.background-status {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 26px));
  z-index: 650;
  max-width: min(360px, calc(100vw - 24px));
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.5);
  color: var(--accent);
  font-size: calc(12px * var(--font-size-scale));
}
.loading-error-detail {
  margin-top: 8px;
  color: #d57b5b;
  font-size: calc(12px * var(--font-size-scale));
  overflow-wrap: anywhere;
}
#popupBtn {
  margin-left: auto;
  background: #252525;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: calc(12px * var(--font-size-scale));
  cursor: pointer;
  white-space: nowrap;
}
#popupBtn:hover {
  background: var(--active-bg);
}
#mobileBackBtn {
  display: none;
}
.main {
  display: flex;
  flex: 1;
  min-height: 0;
  height: auto;
}
.mobile-panel-track {
  display: contents;
}
.panel-left {
  --panel-left-width: 328px;
  flex: 0 0 var(--panel-left-width);
  width: var(--panel-left-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}
.panel-left-resize-handle {
  position: relative;
  z-index: 10;
  flex: 0 0 1px;
  width: 1px;
  background: var(--border);
  cursor: col-resize;
  touch-action: none;
}
.panel-left-resize-handle::before {
  content: "";
  position: absolute;
  inset: 0 -4px;
}
.panel-left-resize-handle:hover,
.panel-left-resize-handle.resizing {
  background: var(--accent);
}
body.panel-left-resizing,
body.panel-left-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
.panel-left-header {
  position: relative;
  padding: 8px 10px 4px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  transition: padding-top 180ms ease;
}
.search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  max-height: none;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
  transform-origin: top;
  transition:
    max-height 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}
.panel-left-header.favorite-material-selection-active {
  padding-top: 0;
}
.panel-left-header.favorite-material-selection-active .search-row {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}
.search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
#searchBox {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 30px 5px 8px;
  border-radius: 3px;
  font-size: calc(13px * var(--font-size-scale));
  width: 100%;
}
#searchBox:focus {
  outline: none;
  border-color: var(--accent);
}
#searchBox:disabled {
  color: var(--muted);
  background: #202020;
  cursor: not-allowed;
  opacity: 0.65;
}
#searchClearBtn {
  display: none;
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 1.25em;
  height: 1.25em;
  border: none;
  background: none;
  color: var(--muted);
  font-size: calc(18px * var(--font-size-scale));
  line-height: 1;
  cursor: pointer;
}
#searchClearBtn.visible {
  display: block;
}
#searchClearBtn:hover {
  color: var(--text);
}
#equipmentSearchToggle {
  flex: 0 0 auto;
  align-self: stretch;
  width: 2em;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1;
}
#equipmentSearchToggle:hover,
#equipmentSearchToggle.active {
  border-color: var(--accent);
  background: var(--active-bg);
}
#equipmentSearchToggle:disabled {
  border-color: var(--border);
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.65;
}
.panel-left-header.equipment-search-active #favBtn,
.panel-left-header.equipment-search-active .checked-favorite-materials-actions {
  display: none;
}
.equipment-search-panel {
  display: grid;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 180ms ease,
    opacity 180ms ease,
    margin-top 180ms ease;
}
.equipment-search-panel.open {
  max-height: none;
  margin-top: 6px;
  opacity: 1;
  overflow: visible;
  border-radius: 4px;
  background: rgba(201, 170, 72, 0.045);
  padding: 6px;
}
.equipment-search-grid {
  display: grid;
  grid-template-columns: minmax(max(120px, 6em), 1fr) max-content;
  gap: 6px;
  font-size: calc(13px * var(--font-size-scale));
}
.equipment-search-grid label,
.equipment-search-grid .equipment-search-field {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: calc(12px * var(--font-size-scale));
}
.equipment-search-grid .custom-select,
.equipment-search-grid input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 1.6em;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  padding: 4px 6px;
  font-size: calc(13px * var(--font-size-scale));
}
.equipment-search-grid .custom-select {
  padding: 0;
}
.equipment-search-grid .custom-select-toggle {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 1.6em;
  padding-block: 0.3em;
}
.equipment-search-grid .custom-select-toggle::after {
  top: 50%;
  transform: translateY(-50%);
}
.equipment-search-grid .custom-select-toggle,
.equipment-search-grid .custom-select-option,
.equipment-level-control button,
.equipment-search-actions button,
#saveEquipmentSearchBtn {
  font-size: calc(13px * var(--font-size-scale));
}
.custom-select {
  position: relative;
  padding: 0;
}
.custom-select-toggle {
  width: 100%;
  height: 100%;
  min-height: 26px;
  padding: 4px 24px 4px 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: calc(12px * var(--font-size-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.custom-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-toggle::after {
  content: "▼";
  position: absolute;
  right: 6px;
  color: var(--muted);
  font-size: calc(9px * var(--font-size-scale));
}
.custom-select.open .custom-select-toggle::after {
  content: "▲";
}
.custom-select-options {
  display: none;
  position: fixed;
  z-index: 80;
  box-sizing: border-box;
  max-height: calc(var(--app-viewport-height) - 32px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  padding: 3px;
}
.custom-select.open .custom-select-options {
  display: grid;
}
.custom-select-option {
  min-height: 28px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  padding: 5px 8px;
  text-align: left;
  font-size: calc(12px * var(--font-size-scale));
  white-space: nowrap;
}
.custom-select-option:hover,
.custom-select-option.selected {
  background: var(--active-bg);
  color: var(--accent);
}
.equipment-search-grid input {
  color: var(--accent);
  text-align: center;
  font-weight: bold;
  appearance: textfield;
}
.equipment-search-grid input::-webkit-inner-spin-button,
.equipment-search-grid input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.equipment-level-control {
  display: grid;
  grid-template-columns: 2.2em 2.2em 4.5em 2.2em 2.2em;
  justify-content: center;
  gap: 3px;
}
.panel-left.equipment-search-stacked .equipment-search-grid .equipment-search-field {
  grid-column: 1 / -1;
}
.panel-layout-measure {
  position: fixed !important;
  top: 0 !important;
  left: -10000px !important;
  width: min-content !important;
  max-width: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.equipment-level-control button,
.equipment-search-actions button,
#saveEquipmentSearchBtn {
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: calc(12px * var(--font-size-scale));
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.equipment-level-control button:hover,
.equipment-search-actions button:hover,
#saveEquipmentSearchBtn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--active-bg);
}
.equipment-search-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.equipment-search-actions button,
#saveEquipmentSearchBtn {
  min-height: 30px;
  padding: 5px 8px;
}
.equipment-level-control button {
  min-height: 1.6em;
  padding: 0.3em 0.25em;
}
#equipmentSearchBtn {
  border-color: var(--accent);
  color: var(--accent);
}
#equipmentSearchBtn:disabled,
#saveEquipmentSearchBtn:disabled {
  border-color: var(--border);
  color: var(--muted);
  cursor: default;
  opacity: 0.55;
  background: var(--bg);
}

#searchHistory {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 20;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-width: 0;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  max-height: 0;
  overflow-y: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 180ms;
}
#searchHistory.open {
  border-width: 1px;
  max-height: calc(var(--app-viewport-height) - 8px);
  overflow-y: auto;
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}
#searchHistory li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 6px 5px 10px;
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
  cursor: pointer;
}
#searchHistory li:last-child {
  border-bottom: none;
}
#searchHistory li:hover {
  background: var(--hover-bg);
}
#favoriteLists {
  list-style: none;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
  z-index: 20;
  max-height: 0;
  overflow-y: hidden;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 180ms ease,
    visibility 0s linear 180ms;
}
#favoriteLists.open {
  max-height: var(--favorite-lists-max-height, 260px);
  overflow-y: auto;
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 180ms ease,
    visibility 0s;
}
#favoriteLists li {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 34px;
  padding: 5px 4px 5px 8px;
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#favoriteLists li:last-child {
  border-bottom: none;
}
#favoriteLists li:hover {
  background: var(--hover-bg);
}
#favoriteLists li.active {
  background: var(--active-bg);
  color: var(--accent);
}
#favoriteLists li.material-selected-favorite-list .favorite-list-name {
  color: #f1d67a;
  font-weight: 700;
}
#favoriteLists li.recent-favorite-list {
  border-left: 3px solid var(--accent);
  background: #242214;
  color: var(--accent);
  font-weight: bold;
  padding-left: 9px;
}
#favoriteLists li.recent-favorite-list:hover {
  background: #2b2817;
}
#favoriteLists li.recent-favorite-list.active {
  background: var(--active-bg);
  color: var(--accent);
}
#favoriteLists li.list-empty {
  cursor: default;
}
#favoriteLists li.list-empty:hover {
  background: none;
}
#favoriteLists li.favorite-list-action-row {
  padding: 5px 8px;
  cursor: default;
  justify-content: center;
}
#favoriteLists li.favorite-list-action-row:hover {
  background: none;
}
.favorite-list-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: calc(13px * var(--font-size-scale));
  line-height: 1.35;
  margin-right: auto;
  overflow-wrap: anywhere;
  white-space: normal;
}
.favorite-list-curtain {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 1.8em;
  overflow: hidden;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -5px 0 8px rgba(0, 0, 0, 0.18);
  transition: width 180ms ease;
}
.favorite-list-curtain.expanded {
  width: var(--favorite-list-curtain-expanded-width, 170px);
  max-width: 100%;
}
.favorite-list-curtain-toggle {
  width: 1.8em;
  min-width: 1.8em;
  height: 100%;
  border: none;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1;
}
.favorite-list-curtain-toggle:hover {
  background: var(--active-bg);
}
.favorite-list-material-checkbox {
  flex: 0 0 auto;
  width: var(--render-small-check-size);
  height: var(--render-small-check-size);
  margin: 0 6px;
  accent-color: var(--accent);
  cursor: pointer;
}
.favorite-list-curtain-actions {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-left: 6px;
}
.favorite-list-action {
  width: 100%;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  cursor: pointer;
  font-size: calc(12px * var(--font-size-scale));
  margin: 2px 0;
  overflow-wrap: anywhere;
  padding: 6px 8px;
  text-align: center;
  white-space: normal;
}
.favorite-list-action:hover {
  background: var(--active-bg);
}
#recipeList li.favorite-save-row {
  padding: 7px 8px;
  cursor: default;
  justify-content: center;
  background: none;
}
#recipeList li.favorite-materials-row,
#recipeList li.favorite-save-row:hover,
#recipeList li.favorite-materials-row:hover {
  background: none;
}
#recipeList li.favorite-materials-row {
  padding: 7px 8px;
  cursor: default;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 8px;
  background: none;
  position: relative;
  overflow: hidden;
}
.favorite-material-curtain {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  min-height: 0;
  align-self: stretch;
  margin: 2px 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}
.favorite-materials-row > .favorite-list-action {
  flex: 1 1 0;
  min-width: 0;
}
.favorite-material-curtain-toggle {
  width: 1.8em;
  min-width: 1.8em;
  min-height: 1.8em;
  padding: 0;
  border: none;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1;
}
.favorite-material-curtain-actions {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(201, 170, 72, 0.045);
  transition:
    max-height 180ms ease,
    padding 180ms ease;
}
.favorite-material-curtain.expanded + .favorite-material-curtain-actions {
  max-height: none;
  padding: 6px;
}
.favorite-material-actions-header {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1.2;
}
.favorite-material-action-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  gap: 6px;
  min-width: 0;
}
.favorite-material-mode-group {
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.favorite-material-bulk-group {
  flex-basis: 100%;
  padding-top: 2px;
}
.favorite-material-bulk-group > .favorite-list-action {
  flex: 1 1 0;
}
.favorite-material-help-btn {
  width: 1.8em;
  height: 1.8em;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(31, 31, 31, 0.72);
  color: var(--accent);
  cursor: pointer;
  font-size: calc(13px * var(--font-size-scale));
  font-weight: bold;
  line-height: 1;
  padding: 0;
}
.favorite-material-help-btn:hover {
  border-color: var(--accent);
  background: var(--active-bg);
}
.favorite-material-curtain-actions .favorite-list-action {
  min-width: 0;
  white-space: nowrap;
}
.favorite-material-curtain-actions .favorite-list-action:disabled {
  color: var(--muted);
  border-color: var(--border);
  cursor: default;
  opacity: 0.55;
}
.history-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favorite-list-icon,
.history-delete,
.reorder-handle {
  margin-left: 0;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 5px 3px;
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.65;
}
.favorite-list-icon,
.history-delete {
  font-size: calc(16px * var(--font-size-scale));
  line-height: 1;
}
.favorite-list-icon + .favorite-list-icon,
.favorite-list-icon + .reorder-handle,
.reorder-handle + .favorite-list-icon {
  margin-left: 0;
}
.favorite-list-icon {
  align-self: flex-start;
}
#favoriteLists .reorder-handle {
  margin-left: 0;
  align-self: flex-start;
}
#favoriteLists .favorite-list-curtain .favorite-list-icon,
#favoriteLists .favorite-list-curtain .reorder-handle {
  align-self: center;
}
#favoriteLists .favorite-list-icon,
#favoriteLists .reorder-handle {
  min-width: 1.5em;
  padding-left: 1px;
  padding-right: 1px;
  text-align: center;
}
#recipeList li.fav-item-row {
  position: relative;
  overflow: hidden;
}
li.fav-item-row:has(.favorite-item-count-curtain.expanded) {
  min-height: calc(22.4px * var(--font-size-scale));
}
#recipeList
  li.fav-item-row.favorite-count-zero
  > :not(.favorite-item-count-curtain) {
  opacity: 0.35;
  filter: grayscale(0.7);
}
.favorite-item-count-curtain {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 1.8em;
  overflow: hidden;
  background: rgba(31, 31, 31, 0.86);
  border-left: 1px solid var(--border);
  box-shadow: -5px 0 8px rgba(0, 0, 0, 0.18);
  transition: width 180ms ease;
}
.favorite-item-count-curtain.expanded {
  width: max-content;
  max-width: 100%;
}
.favorite-item-count-curtain.any-one.expanded {
  width: max-content;
}
.favorite-item-count-toggle {
  width: 1.8em;
  min-width: 1.8em;
  height: 1.8em;
  border: none;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1;
}
.favorite-item-count-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
}
.favorite-item-count-controls .favorite-anyone-checkbox {
  width: var(--render-large-check-size);
  height: var(--render-large-check-size);
  appearance: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  accent-color: var(--accent);
  cursor: pointer;
}
.favorite-item-count-controls .favorite-anyone-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.favorite-item-count-controls .favorite-anyone-checkbox:checked::after {
  content: "✓";
  color: var(--surface);
  font-size: calc(18px * var(--font-size-scale));
  font-weight: bold;
  line-height: 1;
}
.favorite-item-count-controls .favorite-anyone-checkbox:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(201, 170, 72, 0.35);
}
.favorite-list-icon:hover,
.history-delete:hover,
.reorder-handle:hover {
  filter: none;
  opacity: 1;
}
.reorder-handle {
  color: var(--muted);
  font-size: calc(15px * var(--font-size-scale));
  line-height: 1;
  touch-action: none;
}
.reorder-handle:active {
  color: var(--accent);
}
.favorite-list-action-compact {
  width: auto;
  min-width: 84px;
  padding-left: 12px;
  padding-right: 12px;
}
.favorite-list-action.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1a1a;
  font-weight: bold;
}

#favBtn {
  width: 100%;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 5px 8px;
  border-radius: 3px;
  font-size: calc(13px * var(--font-size-scale));
  cursor: pointer;
  text-align: center;
}
#favBtn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
#favBtn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--active-bg);
}
.checked-favorite-materials-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 4px;
  background: rgba(201, 170, 72, 0.045);
  transition:
    max-height 180ms ease,
    opacity 180ms ease,
    padding 180ms ease;
}
.checked-favorite-materials-actions.visible {
  max-height: none;
  opacity: 1;
  padding: 6px 4px;
}
.checked-favorite-materials-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  font-size: calc(12px * var(--font-size-scale));
}
.checked-favorite-materials-mode,
.checked-favorite-materials-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.checked-favorite-materials-mode {
  overflow: hidden;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg);
}
.checked-favorite-materials-run {
  gap: 6px;
}
.checked-favorite-materials-run {
  grid-template-columns: minmax(0, 1fr) auto;
}
#checkedFavoriteSumModeBtn,
#checkedFavoriteAnyOneModeBtn,
#checkedFavoriteMaterialsBtn,
#clearFavoriteMaterialChecksBtn {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 6px 8px;
  border-radius: 3px;
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1.35;
  cursor: pointer;
  text-align: center;
  overflow-wrap: anywhere;
}
#checkedFavoriteSumModeBtn,
#checkedFavoriteAnyOneModeBtn {
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
#checkedFavoriteAnyOneModeBtn {
  border-right: none;
}
#checkedFavoriteSumModeBtn.active,
#checkedFavoriteAnyOneModeBtn.active {
  background: var(--active-bg);
  color: var(--text);
}
#checkedFavoriteSumModeBtn:hover,
#checkedFavoriteAnyOneModeBtn:hover,
#checkedFavoriteMaterialsBtn:hover,
#clearFavoriteMaterialChecksBtn:hover {
  background: var(--active-bg);
}

#recipeList {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding-bottom: var(--footer-space);
}
#recipeList li,
#usesList li {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
  font-size: calc(13px * var(--font-size-scale));
  display: flex;
  align-items: center;
  gap: 6px;
}
#recipeList li:hover,
#usesList li:hover {
  background: var(--hover-bg);
}
#recipeList li.selected,
#usesList li.selected {
  background: var(--active-bg);
  color: var(--accent);
}
li.fav-item-row {
  background: #1e1e14;
}
li.fav-item-row:hover {
  background: var(--active-bg);
}
li.fav-item-row.selected {
  background: var(--active-bg);
  color: var(--accent);
}
.favorite-item-label {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}
.item-list-label {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1.25;
}
.item-list-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.equipment-parameters {
  color: var(--muted);
  font-size: calc(11px * var(--font-size-scale));
  overflow-wrap: anywhere;
}
#recipeList li.equipment-duplicate-row {
  background: rgba(213, 123, 91, 0.1);
}
#recipeList li.equipment-duplicate-row:hover {
  background: rgba(213, 123, 91, 0.16);
}
#recipeList li.equipment-duplicate-row.selected {
  background: linear-gradient(rgba(213, 123, 91, 0.1), rgba(213, 123, 91, 0.1)), var(--active-bg);
}
.equipment-duplicate-warning {
  color: var(--hunt);
  font-size: calc(11px * var(--font-size-scale));
  line-height: 1.3;
}
.favorite-item-job {
  align-self: flex-start;
  width: fit-content;
}
.favorite-item-name {
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}
li.fav-item-row .reorder-handle {
  margin-left: auto;
}
li.fav-item-row .item-action-buttons + .reorder-handle {
  margin-left: 2px;
}
li.fav-item-row .favorite-list-icon,
li.fav-item-row .reorder-handle {
  padding-left: 1px;
  padding-right: 1px;
}
li.reorder-enabled {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#favoriteLists li.reorder-enabled:not(:has(.favorite-list-curtain.expanded)) {
  user-select: text;
  -webkit-user-select: text;
}
li.dragging {
  opacity: 0.55;
}
li.reorder-drop-before {
  box-shadow: inset 0 2px 0 var(--accent);
}
li.reorder-drop-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}
.list-empty {
  color: var(--muted);
  font-size: calc(12px * var(--font-size-scale));
  padding: 8px 12px;
  cursor: default;
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
}
#recipeList li.search-list-empty {
  display: grid;
  align-items: stretch;
  gap: 10px;
  cursor: default;
}
#recipeList li.search-list-empty:hover {
  background: none;
}
.search-empty-message {
  color: var(--muted);
}
.search-empty-scope {
  padding: 8px 10px;
  color: var(--soft-text);
  background: rgba(201, 170, 72, 0.08);
  border-left: 3px solid var(--accent);
  line-height: 1.5;
}

/* Used-in panel */
.panel-middle {
  --panel-middle-width: 280px;
  flex: 0 0 var(--panel-middle-width);
  width: var(--panel-middle-width);
  min-width: 160px;
  border-right: 1px solid var(--border);
  display: none;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}
.panel-middle.open {
  display: flex;
}
.panel-middle-header {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#usesBackBtn {
  display: none;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: calc(13px * var(--font-size-scale));
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  align-self: flex-start;
}
#usesBackBtn:hover {
  background: var(--active-bg);
}
#usesTitle {
  font-size: calc(12px * var(--font-size-scale));
  color: var(--accent);
}
#usesList {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding-bottom: var(--footer-space);
}
li.ingredient-row {
  background: #1a1a1a;
}
li.ingredient-row:hover {
  background: var(--hover-bg);
}
li.ingredient-row.selected {
  background: var(--active-bg);
  color: var(--accent);
}
.uses-list-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #1a1a1a;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: calc(11px * var(--font-size-scale));
  cursor: pointer;
  white-space: nowrap;
}
.uses-list-btn:hover {
  background: #d4b458;
  border-color: #d4b458;
}

/* Recipe tree */
.panel-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.result-header {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
}
.result-main-row,
.result-view-row {
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  width: 100%;
}
.result-main-row {
  display: flex;
  flex-wrap: wrap;
}
.result-view-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.result-header label {
  font-size: calc(12px * var(--font-size-scale));
  color: var(--muted);
}
.result-header.hide-count-input #countLabel,
.result-header.hide-count-input .count-control {
  display: none;
}
#resultTitle {
  width: 100%;
  color: var(--accent);
  overflow-wrap: anywhere;
}
#resultTitle:empty {
  display: none;
}

.count-control {
  display: flex;
  align-items: center;
  gap: 4px;
}
.count-btn {
  width: 1.9em;
  height: 1.4em;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: calc(16px * var(--font-size-scale));
  font-weight: 700;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.count-step-unit {
  position: relative;
}
.count-step-unit::before,
.count-step-increase::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border-radius: 1em;
  background: currentColor;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.count-step-unit::before {
  width: 0.68em;
  height: 0.1em;
}
.count-step-increase::after {
  width: 0.1em;
  height: 0.68em;
}
.count-step-wide {
  width: 1.9em;
}
.count-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.count-input {
  width: calc(3.6ch + 16px);
  height: calc(22.4px * var(--font-size-scale));
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent);
  padding: 0 7px;
  border-radius: 3px;
  font-size: calc(18px * var(--font-size-scale));
  font-weight: bold;
  line-height: 1;
  text-align: right;
}
.count-input:focus {
  outline: none;
  border-color: var(--accent);
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
#resultTitle {
  font-size: calc(13px * var(--font-size-scale));
  color: var(--accent);
}

.result-view-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
.result-view-switch button {
  min-width: 0;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: calc(12px * var(--font-size-scale));
  padding: 5px 10px;
  white-space: nowrap;
}
.result-view-switch button:last-child {
  border-right: none;
}
.result-view-switch button:hover {
  color: var(--accent);
}
.result-view-switch button.active {
  background: var(--active-bg);
  color: var(--accent);
}
.result-view-switch.favorite-materials-only {
  grid-template-columns: 1fr;
}
.result-view-row.has-uses {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.result-view-row.has-uses .result-view-switch {
  width: 100%;
  min-width: 0;
  border: none;
  box-shadow: inset 0 0 0 1px var(--border);
}
.result-view-row.has-uses #usesBtn {
  min-width: 0;
}

#usesBtn {
  display: none;
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: calc(12px * var(--font-size-scale));
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}
#usesBtn:hover {
  background: #d4b458;
}
#usesBtn.visible {
  display: block;
  width: 100%;
}

#backBtn {
  display: none;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: calc(13px * var(--font-size-scale));
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  margin-right: 4px;
  white-space: nowrap;
}
#backBtn:hover {
  background: var(--active-bg);
}

#treeContainer {
  flex: 1;
  overflow: auto;
  overflow-anchor: none;
  padding: 4px 6px calc(4px + var(--footer-space));
}

.materials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
}
.materials-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
  font-size: calc(13px * var(--font-size-scale));
  line-height: 1.4;
  max-height: none;
  overflow: hidden;
  transition:
    max-height 180ms ease,
    padding 180ms ease,
    border-color 180ms ease,
    border-width 180ms ease;
}
.materials-list li:first-child {
  border-top: 1px solid rgba(58, 58, 58, 0.4);
}
.materials-list li.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
.materials-section-header {
  color: var(--accent);
  cursor: pointer;
  background: var(--active-bg);
  font-weight: bold;
  user-select: none;
}
.materials-section-toggle {
  width: 1.4em;
  color: var(--muted);
  flex-shrink: 0;
}
.materials-section-title {
  overflow-wrap: anywhere;
}
.materials-list li.materials-bulk-actions { padding: 6px 10px; background: rgba(255, 255, 255, 0.02); }
.materials-list li.materials-bulk-actions.collapsed {
  padding-top: 0;
  padding-bottom: 0;
}
.bulk-action-row { display: flex; align-items: center; gap: 6px; }
.bulk-action-row button {
  flex: 1 1 0; min-width: 0; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); cursor: pointer; font-size: calc(12px * var(--font-size-scale));
  line-height: 1.2; padding: 6px 8px; white-space: nowrap;
}
.bulk-action-row button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bulk-action-row button:disabled { cursor: default; opacity: 0.38; }
.materials-list li.intermediate-tree-node {
  display: block;
  padding: 6px 10px;
  border: none;
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
}
.materials-list li.intermediate-tree-node:not(.collapsed) {
  max-height: none;
}
.materials-list li.intermediate-tree-node.collapsed {
  display: block;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
.materials-list li.intermediate-tree-node.collapsed:not(.collapsible-animating) > * {
  visibility: hidden;
}
.materials-list li.intermediate-tree-node:first-child {
  border-top: none;
}
.intermediate-tree-row {
  display: grid;
  grid-template-columns: var(--item-icon-size) minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 6px;
  font-size: calc(13px * var(--font-size-scale));
  line-height: 1.4;
}
.intermediate-tree-row > .list-icon,
.intermediate-tree-row > .checkable-item-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
.intermediate-tree-row > .material-content {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.intermediate-tree-row > .item-action-buttons {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin-left: 0;
}
.purchase-unneeded .material-name,
.purchase-unneeded .material-qty,
.purchase-unneeded .material-supplement,
.purchase-unneeded .badge,
.purchase-selected .material-name,
.purchase-selected .material-qty,
.purchase-selected .material-supplement,
.purchase-selected .badge,
.prepared-selected .material-name,
.prepared-selected .material-qty,
.prepared-selected .material-supplement,
.prepared-selected .badge {
  opacity: 0.42;
}
.purchase-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(20, 20, 20, 0.94);
  color: var(--soft-text);
  font-size: calc(12px * var(--font-size-scale));
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  pointer-events: none;
}
.intermediate-tree-row .material-primary,
.intermediate-tree-row .material-supplement-row {
  flex-wrap: wrap;
}
.material-name-quantity {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
  white-space: normal;
}
.material-usage-detail {
  color: var(--muted);
  white-space: normal;
}
.material-usage-emphasis {
  color: var(--soft-text);
  font-weight: bold;
}
.collapsible-animating {
  max-height: none !important;
  overflow: hidden !important;
  transition:
    height 180ms ease,
    padding 180ms ease,
    border-width 180ms ease !important;
}
.material-name {
  overflow-wrap: anywhere;
}
.material-qty {
  color: var(--accent);
  font-size: calc(14px * var(--font-size-scale));
  white-space: nowrap;
}
.material-content {
  min-width: 0;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.material-primary,
.material-supplement-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.material-primary {
  font-size: calc(14px * var(--font-size-scale));
  line-height: 1.35;
}
.material-supplement {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--soft-text);
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1.2;
}
.material-supplement-sep {
  color: var(--muted);
  line-height: 1.1;
}
.material-supplement-name {
  overflow-wrap: anywhere;
}
.supplement-refine-label {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: inherit;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
}
.material-refine-row {
  display: flex;
  align-items: center;
  min-width: 0;
  line-height: 1.2;
}
.material-supplement-qty {
  color: var(--accent);
  font-size: calc(12px * var(--font-size-scale));
  white-space: nowrap;
}
.craft-supplement-row {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1.5;
  white-space: nowrap;
}
.craft-supplement-num {
  color: var(--surplus);
  font-size: calc(12px * var(--font-size-scale));
  white-space: nowrap;
}
.craft-supplement-count {
  font-size: calc(13px * var(--font-size-scale));
}
.craft-supplement-label {
  color: var(--muted);
  font-size: calc(11px * var(--font-size-scale));
  white-space: nowrap;
}
.prepared-adjusted-value {
  border: 1px solid #8f762f;
  border-radius: 3px;
  padding: 0 3px;
  background: #3b341d;
  color: #f4d77a;
  font-weight: 700;
  opacity: 1;
}
.prepared-selected .prepared-adjusted-value,
.purchase-unneeded .prepared-adjusted-value {
  opacity: 1;
}
.prepared-selected .material-supplement,
.purchase-unneeded:has(.prepared-adjusted-value) .material-supplement {
  opacity: 1;
}
.material-supplement-icon {
  width: var(--supplement-icon-size);
  height: var(--supplement-icon-size);
  border-radius: 3px;
  flex-shrink: 0;
  object-fit: cover;
}
.material-supplement-summary {
  font-size: calc(13px * var(--font-size-scale));
  line-height: 1.35;
  gap: 4px;
}
.materials-summary-row {
  border-top: none;
}
.material-summary-entry-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.materials-summary-choice-row .material-qty {
  font-size: calc(13px * var(--font-size-scale));
}
.material-choice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--soft-text);
  overflow-wrap: anywhere;
}
.material-choice-option,
.material-choice-item {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.material-choice-sep,
.material-choice-join {
  color: var(--muted);
  white-space: nowrap;
}
.material-choice-name {
  overflow-wrap: anywhere;
}
.material-choice-qty {
  color: var(--accent);
  font-size: calc(14px * var(--font-size-scale));
  white-space: nowrap;
}
.favorite-ring-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  margin-bottom: 8px;
}
.favorite-ring-bulk-actions { margin: 0 10px 8px; }
.favorite-ring-section {
  max-width: 720px;
}
.favorite-ring-section > .favorite-ring-bulk-actions {
  width: calc(100% - 20px);
  max-width: 700px;
  margin-top: 8px;
}
.favorite-ring-section > .favorite-ring-controls {
  width: calc(100% - 10px);
  margin-left: 10px;
  margin-top: 8px;
}
.favorite-ring-section .favorite-list-production-block {
  margin: 8px 0 0 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(200, 168, 75, 0.5);
}
.favorite-ring-section > .favorite-ring-bulk-actions + .favorite-list-production-block {
  margin-top: 0;
}
.favorite-ring-section .favorite-list-root-summary {
  margin-bottom: 4px;
}
.favorite-ring-section .favorite-list-root-summary .node-row {
  padding: 2px 0 4px;
  border: 0;
  background: transparent;
}
.favorite-ring-section .favorite-list-production-block .favorite-ring-controls {
  margin-left: 0;
}
.favorite-ring-separator {
  max-width: 720px;
  margin: 0 0 8px;
  border-top: 1px solid rgba(200, 168, 75, 0.5);
}
.favorite-ring-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}
.favorite-ring-name {
  overflow-wrap: anywhere;
}
.favorite-ring-toggle {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
.favorite-ring-toggle :is(button, .share-control-state) {
  min-width: 46.8px;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: calc(13px * var(--font-size-scale));
  padding: 7px 12px;
  line-height: 1.15;
  white-space: nowrap;
}
.favorite-ring-toggle :is(button, .share-control-state):last-child {
  border-right: none;
}
.favorite-ring-toggle :is(button, .share-control-state).active {
  background: var(--active-bg);
  color: var(--accent);
}
@media (min-width: 1024px) {
  .panel-left {
    --panel-left-width: 336px;
  }
}

@media (max-width: 600px) {
  .favorite-ring-row {
    flex-wrap: nowrap;
  }
  .favorite-ring-name {
    flex: 1 1 auto;
    min-width: 0;
  }
  .favorite-ring-toggle {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

.tips-msg {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-tips-msg {
  display: none;
}
.tips-row {
  font-size: calc(13px * var(--font-size-scale));
  color: var(--soft-text);
  line-height: 1.6;
}
.tips-about-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tips-about-description {
  color: var(--soft-text);
  font-size: calc(13px * var(--font-size-scale));
  line-height: 1.6;
}
.tips-about-btn {
  align-self: flex-start;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: #1a1a1a;
  cursor: pointer;
  font-size: calc(13px * var(--font-size-scale));
  font-weight: bold;
  line-height: 1.1;
  padding: 5px 12px;
  white-space: nowrap;
}
.tips-about-btn:hover {
  background: #d4b458;
  border-color: #d4b458;
}
.markdown-content h2 {
  color: var(--accent);
  font-size: calc(14px * var(--font-size-scale));
  margin: 0 0 6px;
}
.markdown-content h3 {
  color: var(--text);
  font-size: calc(13px * var(--font-size-scale));
  margin: 8px 0 4px;
}
.markdown-content h4 {
  color: var(--text);
  font-size: calc(12px * var(--font-size-scale));
  margin: 6px 0 3px;
}
.markdown-content p {
  margin: 0 0 7px;
}
.markdown-content ul {
  margin: 0 0 7px 18.2px;
  padding: 0;
}
.markdown-content li {
  margin-bottom: 3px;
}
.markdown-content a {
  color: var(--accent);
}
.markdown-content code {
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
}
.markdown-content strong {
  color: var(--text);
}
.markdown-content img {
  display: block;
  max-width: 100%;
  height: auto;
}
.markdown-content details {
  margin: 8px 0;
}
.markdown-content summary {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.markdown-content summary::-webkit-details-marker {
  display: none;
}
.markdown-content summary::before {
  display: inline-block;
  width: 1.4em;
  color: var(--muted);
  content: "▶";
}
.markdown-content details[open] > summary::before {
  content: "▼";
}
.markdown-content details[open] > summary {
  margin-bottom: 6px;
}
.markdown-content hr {
  border: none;
  border-top: 1px solid rgba(200, 168, 75, 0.5);
  margin: 8px 0;
}

.tree-node {
  line-height: 1.8;
}
.tree-node .node-row {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
}
.tree-node .node-row:hover {
  background: var(--hover-bg);
}
.toggle {
  font-size: calc(11px * var(--font-size-scale));
  color: var(--muted);
  width: 1.4em;
  display: inline-block;
  text-align: center;
  flex-shrink: 0;
}
.node-qty {
  font-size: calc(14px * var(--font-size-scale));
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.node-main {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 0;
}
.node-item-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.node-main.has-recipe-method > .node-item-content {
  min-height: var(--item-icon-size);
  justify-content: center;
}
.node-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.5;
}

.node-sub-info {
  display: flex;
  flex-direction: row;
  gap: 6px;
  font-size: calc(11px * var(--font-size-scale));
  line-height: 1.5;
  flex-shrink: 0;
}
.badge {
  font-size: calc(10px * var(--font-size-scale));
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: bold;
  flex-shrink: 0;
}
.job-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: calc(var(--job-label-base-size) * var(--font-size-scale));
  line-height: 1;
}
.craft-job-label { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: inherit; line-height: 1; }
.masterbook-job-label { gap: 3px; }
.masterbook-job-icons { display: inline-flex; align-items: center; gap: 1px; }
.job-badge-text { display: block; line-height: 1; }
.job-icon {
  display: block;
  width: calc(var(--job-icon-base-size) * var(--font-size-scale));
  height: calc(var(--job-icon-base-size) * var(--font-size-scale));
  object-fit: contain;
  flex: 0 0 calc(var(--job-icon-base-size) * var(--font-size-scale));
  align-self: center;
}
.badge-craft {
  background: #3a2e10;
  color: var(--craft);
}
.badge-gather {
  background: #102030;
  color: var(--gather);
}
.badge-hunt {
  background: #301010;
  color: var(--hunt);
}
.badge-buy {
  background: #201030;
  color: var(--buy);
}
.badge-exchange {
  background: #102020;
  color: #5bd5c8;
}
.badge-equipment {
  background: #222b1a;
  color: #9fdb82;
}
.badge-masterbook {
  background: #29203a;
  color: #d5b5ff;
}
.badge-ex {
  background: #321616;
  color: #ffaaa2;
  font-size: calc(var(--job-label-base-size) * var(--font-size-scale));
}
.gathering-method-mining {
  background: #102030;
  color: #77b7ff;
}
.gathering-method-botany {
  background: #102a18;
  color: #79d98a;
}
.node-children {
  margin: 0;
  padding-left: 20px;
  max-height: none;
  overflow: hidden;
  transition: max-height 180ms ease;
}
.node-children.collapsed {
  max-height: 0;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  color: var(--muted);
  font-size: calc(11px * var(--font-size-scale));
  white-space: nowrap;
}
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

.pin-btn {
  font-size: calc(16px * var(--font-size-scale));
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
  background: none;
  border: none;
  padding: 0 2px;
}
.pin-btn:hover {
  transform: scale(1.2);
}
.pin-btn.inactive {
  filter: grayscale(1) opacity(0.4);
}
.gathering-timer-btn,
.shop-info-btn,
.intermediate-prepared-btn,
.intermediate-material-tree-btn {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: calc(17px * var(--font-size-scale));
  line-height: 1;
  padding: 5px 7px;
  white-space: nowrap;
}
.gathering-timer-btn:hover,
.shop-info-btn:hover,
.intermediate-prepared-btn:hover,
.intermediate-material-tree-btn:hover {
  border-color: var(--accent);
}
.intermediate-prepared-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}
button.intermediate-prepared-btn.active {
  text-shadow:
    -1px -1px 0 #000,
    0 -1px 0 #000,
    1px -1px 0 #000,
    -1px 0 0 #000,
    1px 0 0 #000,
    -1px 1px 0 #000,
    0 1px 0 #000,
    1px 1px 0 #000;
}
.intermediate-prepared-btn:disabled {
  cursor: default;
  opacity: 0.38;
}
.item-action-buttons {
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.item-cell-row {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 6px;
}
.item-cell-row > .list-icon,
.item-cell-row > .node-icon,
.item-cell-row > .checkable-item-icon,
.item-cell-row > .material-supplement-icon,
.item-cell-row > .item-cell-leading {
  grid-column: 1;
  align-self: center;
}
.item-cell-row > .item-list-label,
.item-cell-row > .node-main,
.item-cell-row > .material-content,
.item-cell-row > .material-choice,
.item-cell-row > .material-supplement-main {
  grid-column: 2;
  min-width: 0;
  align-self: center;
}
.item-cell-row > .item-action-buttons {
  grid-column: 3;
  align-self: center;
  margin-left: 0;
}
@media (min-width: 601px) {
  .item-cell-row {
    grid-template-columns: max-content minmax(0, max-content) max-content;
    justify-content: start;
  }
  .materials-list .item-cell-row[data-material-column-group] {
    grid-template-columns:
      var(--material-leading-column-width, max-content)
      minmax(0, var(--material-main-column-width, max-content))
      var(--material-action-column-width, max-content);
  }
  .materials-list .item-cell-row.material-column-measure {
    width: max-content !important;
    max-width: none !important;
    grid-template-columns: max-content max-content max-content !important;
  }
}
.item-cell-leading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.material-supplement-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.empty-msg {
  color: var(--muted);
  font-size: calc(13px * var(--font-size-scale));
  padding: 20px;
}
.error-msg {
  color: #d57b5b;
  font-size: calc(13px * var(--font-size-scale));
  padding: 20px;
}
.node-icon,
.list-icon {
  width: var(--item-icon-size);
  height: var(--item-icon-size);
  image-rendering: auto;
  flex-shrink: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.6);
}
.node-icon {
  vertical-align: middle;
}
.checkable-item-icon {
  position: relative;
  display: inline-flex;
  width: var(--item-icon-size);
  height: var(--item-icon-size);
  flex: 0 0 var(--item-icon-size);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
.checkable-item-icon:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.item-image-check {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: none;
  color: #43e05f;
  font-family: "Arial Black", "Segoe UI Symbol", sans-serif;
  font-size: calc(16px * var(--font-size-scale));
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
  text-shadow: none;
  pointer-events: none;
}
.checkable-item-icon.checked .item-image-check {
  display: block;
}
.list-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}
.list-name,
.node-name,
.material-name,
.material-choice-name,
.favorite-ring-name {
  font-size: calc(var(--item-name-base-size) * var(--font-size-scale));
}
.result-root-summary,
.material-tree-root-summary,
.font-size-preview {
  margin-bottom: 6px;
}
.result-root-summary {
  max-width: 720px;
}
.result-root-summary.recipe-method-root,
.material-tree-root-summary.recipe-method-root {
  padding: 4px 0 1px;
  border: 1px solid rgba(200, 168, 75, 0.24);
  border-radius: 4px;
  background: rgba(200, 168, 75, 0.08);
}
.result-root-summary .node-row,
.material-tree-root-summary .node-row,
.font-size-preview .node-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(200, 168, 75, 0.24);
  border-radius: 4px;
  background: rgba(200, 168, 75, 0.08);
}
.result-root-summary.recipe-method-root .node-row,
.material-tree-root-summary.recipe-method-root .node-row {
  border: 0;
  background: transparent;
}
.root-item-title {
  align-items: center;
  justify-content: flex-start;
}
.root-item-display-label {
  flex: 0 1 auto;
  gap: 3px;
}
.root-item-display-label .list-name {
  flex: 0 1 auto;
}
.recipe-method-control,
.recipe-method-width-measure {
  font-size: calc(13px * var(--font-size-scale));
}
.recipe-method-control {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 3px 0 7px;
  line-height: 1.3;
}
.node-main > .recipe-method-control,
.material-content > .recipe-method-control {
  align-self: flex-start;
}
.recipe-method-selector {
  position: relative;
  width: var(--recipe-method-selector-width, 180px);
  min-width: 0;
  max-width: 100%;
}
.recipe-method-summary,
.recipe-method-choice {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: normal;
}
.recipe-method-summary {
  min-height: 28px;
  padding: 4px 2.4em 4px 8px;
  border: 1px solid rgba(200, 168, 75, 0.4);
  border-radius: 4px;
  background: #24231d;
}
.recipe-method-summary::after {
  position: absolute;
  right: 0.7em;
  color: var(--accent);
  content: "▼";
}
.recipe-method-selector.open > .recipe-method-summary::after {
  content: "▲";
}
.recipe-method-selector.open > .recipe-method-summary {
  border-radius: 4px 4px 0 0;
}
.recipe-method-visual {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}
.recipe-method-visual .craft-job-label { min-width: 0; flex-shrink: 1; }
.recipe-method-visual .job-badge {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.recipe-method-choices {
  position: absolute;
  z-index: 80;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: min(45vh, 300px);
  overflow: auto;
  padding: 4px;
  border: 1px solid #4d4632;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: #1d1d1d;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.recipe-method-choice {
  min-height: 30px;
  padding: 5px 8px 5px 5px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 2px;
  background: transparent;
  flex-wrap: nowrap;
}
.recipe-method-choice:hover {
  background: var(--hover-bg);
}
.recipe-method-choice.selected {
  border-left-color: var(--accent);
  background: rgba(200, 168, 75, 0.12);
}
.recipe-method-check {
  width: var(--render-recipe-check-size);
  color: var(--accent);
  text-align: center;
  flex: 0 0 var(--render-recipe-check-size);
  white-space: nowrap;
}
.recipe-method-control.open {
  position: relative;
  z-index: 100;
}
.recipe-method-width-measure {
  position: fixed;
  top: -10000px;
  left: -10000px;
  visibility: hidden;
  white-space: nowrap;
}
.materials-list li.intermediate-tree-node.has-recipe-method {
  position: relative;
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
}
.materials-list li.intermediate-tree-node.has-recipe-method.collapsed {
  border-bottom-width: 0;
}
.materials-list li.intermediate-tree-node.has-recipe-method > .intermediate-tree-row {
  border-bottom: 0;
}
.materials-list li.intermediate-tree-node.has-recipe-method:has(.recipe-method-control.open) {
  z-index: 100;
  overflow: visible;
}
.favorite-material-root-or {
  color: var(--muted);
  font-size: calc(11px * var(--font-size-scale));
  line-height: 1.2;
  margin: 4px 0 4px 48px;
}
.production-content-section {
  max-width: 720px;
  margin-bottom: 0;
}
.production-content-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  border-top: 1px solid rgba(58, 58, 58, 0.4);
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
  border-radius: 0;
  cursor: pointer;
  font-size: calc(13px * var(--font-size-scale));
  line-height: 1.4;
  padding: 6px 10px;
  text-align: left;
}
.production-content-clip {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 180ms ease;
}
.production-content-clip.collapsed {
  grid-template-rows: 0fr;
}
.production-content-body {
  min-height: 0;
  overflow: hidden;
  padding-top: 8px;
  transition: padding-top 180ms ease;
}
.production-content-section > .production-content-clip:not(.collapsed) > .production-content-body {
  padding-bottom: 8px;
}
.production-content-clip.collapsed .production-content-body {
  padding-top: 0;
}
.production-content-section .production-list-block {
  width: calc(100% - 12px);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(200, 168, 75, 0.5);
}
.production-list-block.collapsible .favorite-list-root-summary {
  margin-bottom: 0;
  cursor: pointer;
}
.production-list-block.collapsible .favorite-list-root-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.favorite-list-production-block .favorite-ring-controls {
  margin: 0 0 8px 12px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: calc(11px * var(--font-size-scale));
  color: var(--muted);
  padding: 4px;
  pointer-events: none;
  z-index: 100;
}
.footer a {
  color: var(--muted);
  text-decoration: none;
  pointer-events: all;
}
.footer a:hover {
  color: var(--accent);
}

#releaseNoticeOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.72);
}
#releaseNoticeOverlay.open {
  display: flex;
}
#releaseNoticeDialog {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: calc(var(--app-viewport-height) - 24px);
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.72);
}
#releaseNoticeTitle {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: calc(18px * var(--font-size-scale));
  text-align: center;
}
#releaseNoticeContent {
  min-height: 0;
  overflow-y: auto;
  padding: 2px 6px 2px 2px;
  line-height: 1.7;
}
#releaseNoticeContent h2 {
  font-size: calc(16px * var(--font-size-scale));
}
#releaseNoticeOkBtn {
  align-self: center;
  min-width: 88px;
  margin-top: 16px;
}

/* Dialogs and overlays */
#confirmOverlay,
#settingsOverlay,
#sharePlazaOverlay,
#licenseOverlay,
#textInputOverlay,
#favoriteTargetOverlay,
#gatheringOverlay,
#shopOverlay,
#preparedCountOverlay,
#materialTreeOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  align-items: center;
  justify-content: center;
}
#confirmOverlay {
  z-index: 400;
}
#confirmOverlay.open {
  display: flex;
}
#confirmDialog,
#settingsDialog,
#licenseDialog,
#textInputDialog,
#favoriteTargetDialog,
#gatheringDialog,
#shopDialog,
#preparedCountDialog,
#materialTreeDialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  width: 90%;
  max-height: calc(var(--app-viewport-height) - 24px);
}
#confirmDialog {
  width: min(560px, calc(100vw - 24px));
  max-width: min(560px, calc(100vw - 24px));
  text-align: center;
  display: flex;
  flex-direction: column;
}
#confirmOverlay.info #confirmDialog {
  max-width: min(560px, calc(100vw - 24px));
  max-height: calc(var(--app-viewport-height) - 24px);
  display: flex;
  flex-direction: column;
}
#confirmOverlay.recipe-resolution-info #confirmDialog {
  width: max-content;
  min-width: min(300px, calc(100vw - 24px));
  max-width: min(420px, calc(100vw - 24px));
  border-color: rgba(200, 168, 75, 0.7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
.recipe-resolution-notice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.recipe-resolution-message {
  overflow-wrap: anywhere;
}
.recipe-resolution-list {
  max-height: min(42vh, 320px);
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  text-align: left;
}
.recipe-resolution-group + .recipe-resolution-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.recipe-resolution-list-name {
  margin-bottom: 4px;
  color: var(--accent);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.recipe-resolution-list ul {
  margin: 0;
  padding-left: 21px;
}
.recipe-resolution-list li {
  overflow-wrap: anywhere;
}
#confirmMsg {
  font-size: calc(14px * var(--font-size-scale));
  margin-bottom: 16px;
  line-height: 1.8;
  white-space: pre-line;
  min-height: 0;
  overflow-y: auto;
}
#confirmMsg.markdown-content {
  text-align: left;
  white-space: normal;
  line-height: 1.7;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
#confirmMsg.markdown-content h2 {
  text-align: center;
  font-size: calc(16px * var(--font-size-scale));
}
#shareBtn,
#settingsBtn {
  --settings-button-size: calc(16px + 12px * var(--font-size-scale));
  display: inline-grid;
  place-items: center;
  width: var(--settings-button-size);
  height: var(--settings-button-size);
  min-width: var(--settings-button-size);
  min-height: var(--settings-button-size);
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0;
  border-radius: 4px;
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
#shareBtn:hover:not(:disabled),
#settingsBtn:hover {
  background: var(--active-bg);
  border-color: #d4b458;
  color: #d4b458;
}
#shareBtn:focus-visible,
#settingsBtn:focus-visible {
  outline: 2px solid #e7ddb8;
  outline-offset: 2px;
}
#shareBtn:disabled {
  cursor: default;
  opacity: 0.38;
}
#shareBtn img {
  display: block;
  width: 62%;
  height: 62%;
  object-fit: contain;
  pointer-events: none;
}

.share-progress-panel {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: calc(12px * var(--font-size-scale));
}
.share-progress-panel[hidden],
.share-ready-actions[hidden] {
  display: none;
}
.share-progress-panel .loading-progress-row {
  width: min(560px, 100%);
  margin-top: 6px;
}
.share-ready-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.share-ready-actions button {
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: #1a1a1a;
  font-weight: bold;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.share-ready-actions button:hover {
  border-color: #d4b458;
  background: #d4b458;
}
.share-ready-actions.flash {
  animation: share-ready-flash 400ms ease;
}
@keyframes share-ready-flash {
  50% {
    background: rgba(255, 225, 112, 0.72);
    box-shadow: 0 0 0 3px rgba(255, 225, 112, 0.48), 0 0 18px rgba(255, 225, 112, 0.7);
  }
}

.content-share-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 420;
  align-items: center;
  justify-content: center;
  background: var(--overlay-bg);
}
.content-share-overlay.open {
  display: flex;
}
#contentShareDialog,
#shareTextFallbackDialog {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(var(--app-viewport-height) - 24px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.content-share-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.content-share-header h2,
#shareTextFallbackTitle {
  flex: 1 1 auto;
  color: var(--accent);
  font-size: calc(16px * var(--font-size-scale));
}
#contentShareCloseBtn {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: calc(20px * var(--font-size-scale));
  cursor: pointer;
}
.content-share-panel-choices {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.content-share-panel-choices:empty {
  display: none;
}
.content-share-panel-choices button,
.content-share-actions button,
#shareTextFallbackCloseBtn {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  padding: 7px 10px;
  cursor: pointer;
}
.content-share-panel-choices button {
  flex: 1 1 0;
  font-size: min(calc(14px * var(--font-size-scale)), 12px);
  white-space: normal;
}
.content-share-panel-choices button.active,
.content-share-actions button {
  border-color: var(--accent);
  color: var(--accent);
}
.content-share-panel-choices button:disabled {
  opacity: 0.38;
  cursor: default;
}
.content-share-description {
  margin-top: 12px;
  color: var(--soft-text);
  line-height: 1.6;
  white-space: pre-line;
}
.content-share-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.content-share-actions button {
  flex: 1 1 0;
}
#shareTextFallbackReason {
  margin: 10px 0;
  color: var(--soft-text);
}
#shareTextFallbackContent {
  display: block;
  width: 100%;
  min-height: min(52vh, 420px);
  resize: vertical;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}
#shareTextFallbackCloseBtn {
  display: block;
  margin: 12px auto 0;
}
.share-panel-highlight-overlay {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border: 3px solid rgba(255, 225, 112, 0.92);
  border-radius: 5px;
  background: rgba(255, 225, 112, 0.18);
  box-shadow: inset 0 0 36px rgba(255, 225, 112, 0.32), 0 0 18px rgba(255, 225, 112, 0.7);
}
.share-panel-highlight-overlay.visible {
  animation: share-panel-highlight 400ms ease;
}
@keyframes share-panel-highlight {
  50% {
    background: rgba(255, 225, 112, 0.5);
    box-shadow: inset 0 0 52px rgba(255, 225, 112, 0.62), 0 0 28px rgba(255, 225, 112, 0.95);
  }
}

.share-capture-root {
  position: fixed;
  left: -20000px;
  top: 0;
  z-index: -1;
  width: max-content;
  min-width: 320px;
  padding: 30px;
  overflow: visible;
  background: var(--bg);
  color: var(--text);
  font-family: "Yu Gothic", "Meiryo", sans-serif;
  font-size: 18px;
  line-height: 1.45;
}
.share-capture-root h1 {
  margin-bottom: 18px;
  font-size: 28px;
  white-space: nowrap;
}
.share-capture-root h2 {
  margin: 8px 0;
  font-size: 22px;
  white-space: nowrap;
}
.share-capture-root .share-capture-description {
  margin-bottom: 14px;
  white-space: pre-line;
}
.share-capture-root > footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid #aaa;
  color: var(--muted);
  font-size: 16px;
}
.share-capture-root * {
  max-width: 100%;
}
.share-capture-root [data-share-source-id="recipeList"],
.share-capture-root [data-share-source-id="usesList"] {
  margin: 0;
  padding: 0;
  list-style: none;
}
.share-capture-root [data-share-source-id="recipeList"] > li,
.share-capture-root [data-share-source-id="usesList"] > li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
  list-style: none;
}
.share-capture-root [data-share-source-id="recipeList"] > li.selected,
.share-capture-root [data-share-source-id="usesList"] > li.selected {
  background: transparent;
  color: inherit;
}
.share-capture-root [data-share-source-id="recipeList"] .item-list-label,
.share-capture-root [data-share-source-id="usesList"] .item-list-label {
  flex: 1 1 auto;
  min-width: 0;
}
.share-capture-root .recipe-method-share-selection {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
}

#settingsOverlay {
  z-index: 200;
}
#settingsOverlay.open {
  display: flex;
}
.share-plaza-open-btn {
  width: 100%;
  margin-top: 10px;
}
#sharePlazaOverlay {
  z-index: 250;
  background: var(--bg);
}
#sharePlazaOverlay.open {
  display: block;
}
#sharePlazaFrame {
  display: block;
  width: 100%;
  height: 100%;
  height: var(--app-viewport-height);
  border: 0;
  background: var(--bg);
}
#settingsDialog {
  max-width: 460px;
  height: var(--settings-dialog-height, auto);
  max-height: calc(var(--app-viewport-height) - 24px);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
#settingsDialog h2 {
  font-size: calc(14px * var(--font-size-scale));
  color: var(--accent);
  margin: 0;
}
.settings-dialog-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
#appVersion {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: calc(10px * var(--font-size-scale));
  line-height: 1;
}
.settings-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: auto;
}
.settings-corner-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 3px 7px;
  border-radius: 3px;
  font-size: calc(10px * var(--font-size-scale));
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.settings-corner-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.discord-icon {
  width: var(--discord-icon-size);
  height: var(--discord-icon-size);
  fill: #5865f2;
  flex-shrink: 0;
  display: block;
}
.settings-section {
  margin-bottom: 16px;
}
.settings-tabs {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}
.settings-tab {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 6px;
  font-size: calc(12px * var(--font-size-scale));
  cursor: pointer;
}
.settings-tab.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.settings-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.settings-tab-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #8a532b;
  color: #fff;
  font-size: calc(9px * var(--font-size-scale));
}
.settings-tab-badge[hidden] {
  display: none;
}
.settings-tab-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.settings-tab-panel {
  height: 100%;
  min-height: 0;
  padding-top: 14px;
  overflow-y: auto;
  overflow-x: hidden;
}
.settings-close {
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.confirm-btns,
.settings-close,
.choice-btns {
  flex-shrink: 0;
}
.font-size-settings-section {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.font-size-preview-frame {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
.font-size-preview-label {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: calc(11px * var(--font-size-scale));
  line-height: 1.2;
}
.font-size-level-row {
  display: flex;
  justify-content: center;
  color: var(--accent);
  font-size: calc(14px * var(--font-size-scale));
  font-weight: 700;
}
.font-size-level-input {
  display: block;
  width: 100%;
  margin-top: 8px;
  accent-color: var(--accent);
  cursor: pointer;
}
.font-size-level-marks {
  display: flex;
  justify-content: space-between;
  margin: 2px 2px 8px;
  color: var(--muted);
  font-size: calc(10px * var(--font-size-scale));
  line-height: 1;
}
.font-size-preview {
  max-width: 100%;
  margin: 0;
}
.confirm-btn.font-size-apply-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
}
.font-size-preview .node-row {
  cursor: default;
}
.font-size-preview .root-item-title {
  flex-wrap: wrap;
}
.font-size-preview .root-item-display-label {
  min-width: 0;
}
.font-size-preview .list-name {
  overflow-wrap: anywhere;
}
.settings-label {
  font-size: calc(12px * var(--font-size-scale));
  color: var(--muted);
  margin-bottom: 6px;
}
.settings-row {
  display: flex;
  gap: 6px;
}
.favorite-list-file-actions > .settings-btn {
  flex: 1 1 0;
}
.settings-file-status {
  min-height: 16px;
  margin-top: 6px;
  color: var(--muted);
  font-size: calc(11px * var(--font-size-scale));
}
.settings-file-status.error {
  color: #ff8a80;
}
.favorite-list-file-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-height: 0;
  min-width: 0;
}
#confirmOverlay.favorite-list-file-dialog #confirmDialog,
#confirmOverlay.favorite-list-file-final-confirm #confirmDialog {
  width: min(560px, calc(100vw - 24px));
  max-width: min(560px, calc(100vw - 24px));
}
#confirmOverlay.favorite-list-file-dialog #confirmMsg {
  display: flex;
  overflow: hidden;
}
.favorite-list-file-selection-summary {
  flex: 0 0 auto;
}
.favorite-list-file-selection-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.favorite-list-file-selection-actions button {
  flex: 1 1 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  padding: 5px 8px;
  cursor: pointer;
}
.favorite-list-file-selection-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}
.favorite-list-file-import-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.favorite-list-file-preview {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 45dvh;
  margin: 0;
  padding: 6px 8px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font-size: inherit;
  list-style: none;
  text-align: left;
}
.favorite-list-file-preview li {
  padding: 3px 0;
  overflow-wrap: anywhere;
}
.favorite-list-file-preview label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.favorite-list-file-selection {
  display: grid;
  flex: 0 0 auto;
  width: var(--render-large-check-size);
  height: var(--render-large-check-size);
  margin: 0;
  appearance: none;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  cursor: pointer;
}
.favorite-list-file-selection:checked {
  border-color: var(--accent);
  background: var(--accent);
}
.favorite-list-file-selection:checked::after {
  content: "✓";
  color: var(--surface);
  font-size: calc(18px * var(--font-size-scale));
  font-weight: bold;
  line-height: 1;
}
.favorite-list-file-selection:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(201, 170, 72, 0.35);
}
.favorite-list-file-import-modes label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.settings-dropdown {
  position: relative;
  margin-bottom: 8px;
}
.settings-dropdown-toggle {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 9px;
  border-radius: 3px;
  cursor: pointer;
  font-size: calc(12px * var(--font-size-scale));
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}
.settings-dropdown-toggle:hover,
.settings-dropdown-toggle:focus {
  border-color: var(--accent);
  outline: none;
}
.settings-dropdown-list {
  position: fixed;
  z-index: 260;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  max-height: 0;
  overflow-y: hidden;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 180ms ease,
    visibility 0s linear 180ms;
}
.settings-dropdown-list.open {
  overflow-y: auto;
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 180ms ease,
    visibility 0s;
}
.settings-dropdown-list li {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(58, 58, 58, 0.4);
  cursor: pointer;
  font-size: calc(12px * var(--font-size-scale));
  overflow-wrap: anywhere;
  white-space: normal;
}
.settings-dropdown-list li:last-child {
  border-bottom: none;
}
.settings-dropdown-list li:hover,
.settings-dropdown-list li.active {
  background: var(--active-bg);
  color: var(--accent);
}
.settings-dropdown-list li.list-empty {
  color: var(--muted);
  cursor: default;
}
.settings-dropdown-list li.list-empty:hover {
  background: none;
  color: var(--muted);
}
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
  max-height: calc(5 * 37px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}
#favoriteTargetCreate {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
#favoriteTargetCreate .choice-list-btn {
  width: 100%;
  border-color: var(--accent);
  text-align: center;
}
#favoriteTargetChoices .choice-list-btn {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(58, 58, 58, 0.7);
  border-radius: 0;
}
#favoriteTargetChoices .choice-list-btn:last-child {
  border-bottom: none;
}
.choice-list-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 3px;
  font-size: calc(12px * var(--font-size-scale));
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
  white-space: normal;
}
.choice-list-btn:hover,
.choice-list-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--active-bg);
}
.settings-note {
  min-height: 16px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: calc(11px * var(--font-size-scale));
}
.settings-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 3px;
  font-size: calc(12px * var(--font-size-scale));
  font-family: monospace;
  min-width: 0;
}
.settings-input:focus {
  outline: none;
  border-color: var(--accent);
}
.settings-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 3px;
  font-size: calc(12px * var(--font-size-scale));
  cursor: pointer;
  white-space: nowrap;
}
.settings-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.settings-err {
  font-size: calc(11px * var(--font-size-scale));
  color: var(--hunt);
  margin-top: 4px;
  display: none;
}
.settings-err.visible {
  display: block;
}
.settings-close {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8.4px;
}

#fontSizeDiscardOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 450;
  align-items: center;
  justify-content: center;
  background: var(--overlay-bg);
}
#fontSizeDiscardOverlay.open {
  display: flex;
}
#fontSizeDiscardDialog {
  width: min(560px, calc(100vw - 24px));
  max-width: min(560px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  text-align: center;
  max-height: calc(var(--app-viewport-height) - 24px);
  display: flex;
  flex-direction: column;
}
#fontSizeDiscardMessage {
  font-size: calc(14px * var(--font-size-scale));
  line-height: 1.8;
  min-height: 0;
  overflow-y: auto;
}

#licenseOverlay {
  z-index: 350;
}
#licenseOverlay.open {
  display: flex;
}
#licenseDialog {
  max-width: 640px;
  max-height: calc(var(--app-viewport-height) - 24px);
  display: flex;
  flex-direction: column;
}
#licenseDialog h2 {
  font-size: calc(14px * var(--font-size-scale));
  color: var(--accent);
  margin-bottom: 12px;
}
#licenseText {
  overflow-y: auto;
  color: var(--soft-text);
  font-family: "Yu Gothic", "Meiryo", sans-serif;
  font-size: calc(12px * var(--font-size-scale));
  line-height: 1.65;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 14px;
}
#licenseText h2 {
  color: var(--accent);
  font-size: calc(14px * var(--font-size-scale));
  margin: 0 0 10px;
}
#licenseText h3 {
  color: var(--text);
  font-size: calc(13px * var(--font-size-scale));
  margin: 14px 0 6px;
}
#licenseText p {
  margin: 0 0 10px;
}
#licenseText ul {
  margin: 0 0 10px 16.8px;
  padding: 0;
}
#licenseText li {
  margin-bottom: 4px;
}
#licenseText a {
  color: var(--accent);
}

#textInputOverlay,
#favoriteTargetOverlay {
  z-index: 300;
}
#textInputOverlay.open,
#favoriteTargetOverlay.open {
  display: flex;
}
#gatheringOverlay {
  z-index: 370;
}
#gatheringOverlay.open {
  display: flex;
}
#gatheringDialog {
  width: max-content;
  min-width: min(300px, calc(100vw - 24px));
  max-width: min(420px, calc(100vw - 24px));
  max-height: calc(var(--app-viewport-height) - 24px);
  display: flex;
  flex-direction: column;
}
.gathering-dialog-header {
  display: block;
  margin-bottom: 10px;
}
#gatheringTitle {
  display: block;
  color: var(--accent);
  font-weight: bold;
  min-width: 0;
  overflow-wrap: anywhere;
}
#gatheringContent {
  overflow: auto;
  min-height: 0;
  display: grid;
  gap: 10px;
  padding-right: 2px;
}
.gathering-area-section {
  display: grid;
  gap: 8px;
}
.gathering-area-section h3 {
  margin: 0;
  color: var(--accent);
  font-size: calc(15px * var(--font-size-scale));
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.gathering-map-section {
  display: grid;
  gap: 6px;
  padding-left: 8px;
}
.gathering-map-section h4 {
  margin: 0;
  color: var(--text);
  font-size: calc(14px * var(--font-size-scale));
}
.gathering-entry {
  display: grid;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
}
.gathering-entry-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(14px * var(--font-size-scale));
}
.gathering-type,
.gathering-note {
  color: var(--muted);
  font-size: calc(14px * var(--font-size-scale));
}
.gathering-type,
.gathering-note-highlight {
  color: var(--soft-text);
}
.gathering-times {
  display: grid;
  gap: 5px;
  justify-items: start;
}
.gathering-time {
  color: var(--accent);
  border: 1px solid rgba(200, 168, 75, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: calc(14px * var(--font-size-scale));
  background: rgba(200, 168, 75, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gathering-time-et,
.gathering-time-lt {
  display: inline-grid;
  place-items: center;
  min-width: 2em;
  min-height: 1.6em;
  padding: 0.3em 0.4em;
  border-radius: 4px;
  background: #e7ddb8;
  color: #4a4228;
  font-weight: 700;
  line-height: 1;
  font-size: calc(13px * var(--font-size-scale));
}
.gathering-time-text {
  white-space: nowrap;
}
.gathering-countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.gathering-countdown-label.waiting {
  color: #8fc7ff;
}
.gathering-countdown-label.active {
  color: #9fdb82;
}
.gathering-countdown-time {
  color: var(--text);
}
#shopOverlay {
  z-index: 365;
}
#shopOverlay.open {
  display: flex;
}
#shopDialog {
  width: max-content;
  min-width: min(300px, calc(100vw - 24px));
  max-width: min(880px, calc(100vw - 24px));
  max-height: calc(var(--app-viewport-height) - 24px);
  display: flex;
  flex-direction: column;
}
.shop-dialog-header {
  display: block;
  margin-bottom: 10px;
}
#shopTitle {
  display: block;
  color: var(--accent);
  font-weight: bold;
  min-width: 0;
  overflow-wrap: anywhere;
}
#shopPriceHeader {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
#shopContent {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding-right: 2px;
}
.shop-price-section,
.shop-list-section {
  display: grid;
  gap: 8px;
}
.shop-entry-list { display: grid; align-items: stretch; gap: 8px; }
.shop-entry-list.measuring { display: block; }
.shop-entry-list.measuring .shop-entry { width: max-content; margin-bottom: 8px; }
.shop-list-section {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}
.shop-price-section h3,
.shop-list-section h3 {
  margin: 0;
  color: var(--accent);
  font-size: calc(15px * var(--font-size-scale));
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.shop-price {
  font-size: calc(16px * var(--font-size-scale));
  color: var(--soft-text);
  font-weight: 700;
}
.shop-purchase-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--soft-text);
  cursor: pointer;
}
.shop-purchase-option:has(input:disabled) {
  cursor: default;
  opacity: 0.75;
}
.shop-purchase-reason {
  flex-basis: 100%;
  margin-left: calc(var(--render-large-check-size) + 8px);
  color: var(--muted);
  font-size: calc(12px * var(--font-size-scale));
}
.shop-purchase-option:hover {
  background: var(--active-bg);
  border-color: var(--border);
  color: var(--text);
}
.shop-purchase-option input {
  display: grid;
  flex: 0 0 auto;
  width: var(--render-large-check-size);
  height: var(--render-large-check-size);
  margin: 0;
  appearance: none;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  cursor: pointer;
}
.shop-purchase-option input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.shop-purchase-option input:checked::after {
  content: "✓";
  color: var(--surface);
  font-size: calc(18px * var(--font-size-scale));
  font-weight: bold;
  line-height: 1;
}
.shop-purchase-option input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 170, 72, 0.35);
}
.shop-entry {
  display: grid;
  width: auto;
  min-width: 0;
  max-width: 100%;
  gap: 3px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
}
.shop-name {
  color: var(--soft-text);
  font-weight: 700;
}
.shop-location {
  color: var(--muted);
  font-size: calc(13px * var(--font-size-scale));
}
.shop-required-rank {
  width: fit-content;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: calc(12px * var(--font-size-scale));
  font-weight: 700;
}
.favorite-list-root-name {
  color: var(--soft-text);
  font-weight: 700;
  overflow-wrap: anywhere;
}
#materialTreeOverlay {
  z-index: 360;
}
#preparedCountOverlay {
  z-index: 370;
}
#preparedCountOverlay.open {
  display: flex;
}
#preparedCountDialog {
  width: max-content;
  min-width: min(300px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prepared-count-title {
  color: var(--accent);
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}
.prepared-count-control {
  justify-content: center;
}
.prepared-count-presets {
  display: flex;
  gap: 8px;
}
.prepared-count-presets button {
  flex: 1 1 0;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg);
  color: var(--accent);
  padding: 6px 10px;
  cursor: pointer;
}
#materialTreeOverlay.open {
  display: flex;
}
#materialTreeDialog {
  width: max-content;
  min-width: min(320px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(var(--app-viewport-height) - 24px);
  display: flex;
  flex-direction: column;
}
.material-tree-dialog-header {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.material-tree-count-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.material-tree-dialog-header label {
  color: var(--muted);
  font-size: calc(12px * var(--font-size-scale));
}
#materialTreeTitle {
  color: var(--accent);
  font-size: calc(13px * var(--font-size-scale));
  overflow-wrap: anywhere;
  text-align: center;
}
#materialTreeContent {
  width: 100%;
  min-width: 0;
  min-height: 120px;
  flex: 1 1 auto;
  max-height: min(52vh, 520px);
  box-sizing: border-box;
  overflow: auto;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
#textInputDialog {
  max-width: 300px;
  text-align: center;
}
#textInputDialog {
  display: flex;
  flex-direction: column;
}
#favoriteTargetDialog {
  width: max-content;
  max-width: min(560px, calc(100vw - 24px));
  max-height: min(88vh, calc(var(--app-viewport-height) - 24px));
  display: flex;
  flex-direction: column;
  text-align: center;
}
#favoriteTargetCreate,
#favoriteTargetChoices {
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
}
#textInputMsg,
#favoriteTargetMsg {
  font-size: calc(14px * var(--font-size-scale));
  margin-bottom: 16px;
  line-height: 1.8;
}
#textInputMsg,
#favoriteTargetMsg {
  min-height: 0;
  overflow-y: auto;
}
#textInputField {
  width: 100%;
  margin-bottom: 10px;
}
.choice-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8.4px;
}
.choice-btn {
  min-width: 104px;
  width: auto;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: calc(13px * var(--font-size-scale));
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  white-space: nowrap;
}
.choice-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--active-bg);
}
.choice-btn.danger {
  border-color: var(--hunt);
  color: var(--hunt);
}
.choice-btn.danger:hover {
  background: #301010;
  border-color: var(--hunt);
}

.confirm-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8.4px;
}
.confirm-btn {
  min-width: 104px;
  width: auto;
  padding: 6px 20px;
  border-radius: 4px;
  font-size: calc(13px * var(--font-size-scale));
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  white-space: nowrap;
}
.confirm-btn.yes {
  border-color: var(--accent);
  color: var(--accent);
}
.confirm-btn.yes:hover {
  background: var(--active-bg);
}
.confirm-btn.no:hover {
  background: var(--hover-bg);
}
.confirm-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile layout */
@media (max-width: 600px) {
  .favorite-list-file-actions {
    flex-direction: column;
  }
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  header {
    --header-logo-height: clamp(24px, calc(28px * var(--font-size-scale)), 42px);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    gap: 6px 8px;
    padding: 8px 12px;
    overflow: hidden;
    transition:
      padding-top 180ms ease,
      padding-bottom 180ms ease;
  }
  .header-primary-row {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    width: 100%;
    max-height: max(var(--header-logo-height), var(--mobile-app-title-icon-size));
    opacity: 1;
    transform: translateY(0);
    transition:
      max-height 180ms ease,
      opacity 180ms ease,
      transform 180ms ease,
      margin-bottom 180ms ease,
      visibility 0s linear;
  }
  header.mobile-title-hidden .header-primary-row {
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-28px);
    visibility: hidden;
    transition-delay: 0s, 0s, 0s, 0s, 180ms;
  }
  header.mobile-title-hidden {
    padding-top: 3px;
    row-gap: 0;
  }
  .app-title {
    flex-shrink: 0;
  }
  #shareBtn,
  #settingsBtn {
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin-left: 0;
    max-height: var(--settings-button-size);
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition:
      max-height 180ms ease,
      padding 180ms ease,
      border-width 180ms ease,
      opacity 180ms ease,
      transform 180ms ease,
      visibility 0s linear;
  }
  #shareBtn { grid-column: 2; }
  #settingsBtn { grid-column: 3; }
  header.mobile-title-hidden {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
  }
  header.mobile-title-hidden #shareBtn,
  header.mobile-title-hidden #settingsBtn {
    min-height: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(0px - var(--settings-button-size)));
    visibility: hidden;
    transition-delay: 0s, 0s, 0s, 0s, 0s, 180ms;
  }
  .app-title-icon {
    width: var(--mobile-app-title-icon-size);
    height: var(--mobile-app-title-icon-size);
  }
  .app-name-logo {
    height: var(--header-logo-height);
  }
  #popupBtn {
    display: none;
  }
  html[data-device-type="pc"] header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  html[data-device-type="pc"] .header-primary-row {
    grid-column: 2;
  }
  html[data-device-type="pc"] #shareBtn { grid-column: 3; }
  html[data-device-type="pc"] #settingsBtn { grid-column: 4; }
  html[data-device-type="pc"] #mobileBackBtn {
    display: inline-block;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--accent);
    font-size: calc(15px * var(--font-size-scale));
    white-space: nowrap;
    visibility: hidden;
    pointer-events: none;
  }
  html[data-device-type="pc"] #mobileBackBtn.visible {
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
  }
  html[data-device-type="pc"] header.mobile-title-hidden #mobileBackBtn {
    display: none;
  }
  .share-ready-actions #shareReadyBtn {
    flex: 1 1 auto;
    white-space: normal;
  }
  .share-ready-actions #shareDiscardBtn {
    flex: 0 0 auto;
  }
  .content-share-panel-choices {
    flex-wrap: wrap;
  }
  .main {
    flex: 1;
    min-height: 0;
    height: auto;
    display: block;
    overflow: clip;
    position: relative;
    touch-action: pan-y;
  }
  .mobile-panel-track {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    transition-property: transform;
  }
  .panel-left,
  .panel-middle,
  .panel-right {
    display: none;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
  }
  .panel-left-resize-handle {
    display: none;
  }
  .panel-left,
  .panel-middle {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .panel-left.mobile-panel-slide,
  .panel-middle.mobile-panel-slide,
  .panel-right.mobile-panel-slide {
    display: flex;
    scrollbar-gutter: auto;
  }
  .panel-left,
  .panel-middle {
    overflow-y: hidden;
  }
  .panel-right {
    overflow-y: auto;
  }
  #recipeList {
    min-height: 0;
  }
  #usesBackBtn {
    display: none;
  }
  #backBtn {
    display: none;
  }
  #recipeList li,
  #usesList li {
    padding: 12px 14px;
    font-size: calc(14px * var(--font-size-scale));
    border-bottom: 1px solid rgba(58, 58, 58, 0.4);
  }
  #searchBox {
    padding: 7px 34px 7px 10px;
    font-size: calc(14px * var(--font-size-scale));
  }
  .node-qty {
    font-size: calc(14px * var(--font-size-scale));
  }
  .result-main-row {
    justify-content: center;
  }
  #resultTitle {
    text-align: center;
  }
  .result-view-row {
    justify-content: center;
  }
  #usesBtn.visible {
    margin-left: 0;
  }
  .tree-node {
    line-height: 2;
  }
  .count-btn {
    width: 1.9em;
    height: 1.4em;
    font-size: calc(18px * var(--font-size-scale));
  }
  .count-step-wide {
    width: 1.9em;
  }
  .count-input {
    height: calc(25.2px * var(--font-size-scale));
    font-size: calc(22px * var(--font-size-scale));
  }
  li.fav-item-row:has(.favorite-item-count-curtain.expanded) {
    min-height: calc(25.2px * var(--font-size-scale));
  }
  .tree-node .node-row {
    align-items: center;
    white-space: normal;
  }
  .node-main {
    flex: 1 1 auto;
  }
  .node-title,
  .node-sub-info,
  .craft-supplement-row {
    flex-wrap: wrap;
  }
  .node-name {
    overflow-wrap: anywhere;
  }
  #materialTreeContent .tree-node .node-row {
    align-items: center;
    white-space: normal;
    flex-wrap: wrap;
  }
  #materialTreeContent .tree-node {
    width: 100%;
    max-width: 100%;
  }
  #materialTreeContent .node-main {
    flex: 1 1 0;
    min-width: 0;
  }
  .material-content {
    flex: 1 1 auto;
  }
  .purchase-unneeded .material-primary {
    flex-wrap: wrap;
  }
  .purchase-unneeded .purchase-status {
    order: 20;
    flex: 1 0 100%;
    width: 100%;
    margin-top: 3px;
  }
  .item-action-buttons {
    margin-left: auto;
  }
  #materialTreeContent .node-title,
  #materialTreeContent .node-sub-info,
  #materialTreeContent .craft-supplement-row {
    flex-wrap: wrap;
  }
  #materialTreeContent .node-name {
    overflow-wrap: anywhere;
  }
  .panel-right.mobile-visible .result-header,
  .panel-right.mobile-visible #treeContainer {
    flex: 0 0 auto;
  }
  .panel-right.mobile-visible #treeContainer {
    overflow: visible;
    min-height: 0;
  }
  .mobile-tips-msg:not(.hidden) {
    display: flex;
    flex: 1;
    overflow-y: auto;
    background: var(--bg);
    padding-bottom: var(--footer-space);
  }
  .materials-list li.intermediate-tree-node.has-recipe-method:has(.recipe-method-control.open) {
    max-height: none;
    overflow: visible;
  }
  .node-children:has(.recipe-method-control.open) {
    max-height: none;
    overflow: visible;
  }
}