/* The Konoha jade / ivory world, tuned for trading and readable item data. */
:root {
  --ink: #123c37; --ink-2: #1c4c44; --ink-foot: #10332f;
  --paper: #f6f1e4; --paper-2: #ece3cd; --paper-3: #d7c49a; --field: #fffdf6;
  --brown: #233e36; --brown-2: #345747; --brown-mute: #576452; --tan: #c6b688;
  --gold: #d9b56c; --gold-hi: #f4dfaa; --gold-lo: #987139;
  --red: #a53524; --red-hi: #c95035; --red-lo: #752719; --ink-red: #872e21;
  --night-text: #fff7e7; --night-mute: #d9dcc5; --slot: #163c33;
  --d0: #233e36; --d1: #296e20; --d5: #826000;
}
body.mk { background: var(--paper); }
.top { gap: 28px; min-height: 76px; background: var(--ink); box-shadow: 0 1px 0 var(--gold-lo), 0 6px 20px #102e2826; }
.brand img { height: 54px; }
.tabs { align-self: stretch; align-items: center; gap: 8px; }
.tabs a { position: relative; min-width: 74px; padding: 13px 18px; text-align: center; border-radius: 3px 12px; font-size: 21px; }
.tabs a.on { background: #28564b; color: var(--gold-hi); text-shadow: none; border-color: #ac9259; }
.tabs a.on::after { content: ''; position: absolute; height: 2px; left: 20px; right: 20px; bottom: 5px; background: var(--gold); }
.mast { padding: 46px 0 62px; min-height: 260px; border-bottom: 1px solid var(--gold-lo); background: linear-gradient(90deg, #123c37fa 0%, #123c37eb 35%, #123c3770 65%, #123c3730), url('../assets/img/art-konoha-bridge.webp') center 54% / cover; }
.mast::after { content: ''; position: absolute; inset: 10px 12px; border: 1px solid #d9b56c59; pointer-events: none; }
.mast h1 { font-size: clamp(40px, 5vw, 64px); color: var(--gold-hi); text-shadow: 0 4px 15px #082f30a6; }
.mast p { margin-top: 14px; max-width: 61ch; line-height: 1.7; color: var(--night-text); }
.mast__in { position: relative; z-index: 1; }
#view { position: relative; padding-bottom: 16px; }
.filters { margin: 24px 0 20px; padding: 24px; border-radius: 4px 20px; background: var(--field); box-shadow: 0 9px 24px -16px #23443970; }
.panel, .dlgf { background: var(--field); border-radius: 4px 22px; box-shadow: 0 12px 30px -18px #193c3660; }
.panel::after, .dlgf::after, .filters::after { inset: 5px; border: 1px solid #bba46d99; border-radius: inherit; border-image: none; }
.chips { gap: 7px; padding: 0 0 14px; border-bottom: 1px solid var(--paper-2); scrollbar-width: thin; }
.mk button.chip { min-height: 40px; padding: 7px 14px; font-size: 18px; border: 1px solid transparent; border-radius: 3px 10px; color: var(--brown-mute); background: transparent; box-shadow: none; text-shadow: none; }
.mk button.chip:hover { background: var(--paper-2); color: var(--ink); transform: none; }
.mk button.chip.on { background: var(--ink); border-color: var(--ink); color: var(--gold-hi); box-shadow: inset 0 -2px 0 var(--gold-lo); }
.row-f { gap: 16px; margin-top: 4px; }
.field { gap: 7px; font: 500 13px/1.5 var(--f-body); }
.mk input, .mk select { height: 44px; color: var(--brown); border: 1px solid #a7af96; border-radius: 4px; background: var(--field); box-shadow: inset 0 2px 3px #203e3608; caret-color: var(--red); }
.mk input::placeholder { color: #68715c; }
.mk input:focus, .mk select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px #28564b1a; }
.mk input[type=checkbox] { height: 18px; accent-color: var(--ink); }
.mk button, .btn { min-height: 42px; border-width: 1px; border-radius: 4px 12px; background: linear-gradient(#bc4933, #8b2e22); box-shadow: inset 0 0 0 2px #f4dfaa26, 0 4px 9px -6px #54221990; transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--ease), box-shadow .18s; }
.mk button:hover:not(:disabled), .btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #f4dfaa40, 0 7px 12px -8px #54221980; }
.mk button:active:not(:disabled), .btn:active { transform: translateY(0); }
.mk button.ghost, .btn.ghost { background: transparent; border-color: var(--tan); box-shadow: none; color: var(--ink); }
.top button.ghost { color: var(--night-text); }
.meta { margin: 8px 0 16px; font: 400 21px/1.3 var(--f-display); color: var(--ink); }
.meta button { font-size: 17px; }
.grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mk button.card2 { position: relative; min-height: 156px; align-items: start; padding: 18px; gap: 14px; border: 1px solid #c3c7b0; border-radius: 4px 18px; background: var(--field); box-shadow: none; text-shadow: none; }
.mk button.card2:hover { border-color: var(--gold-lo); background: #fffcf1; box-shadow: 0 8px 16px -12px #193c365c; }
.card2 .nm { font-size: 21px; line-height: 1.25; margin-bottom: 5px; overflow-wrap: anywhere; }
.card2 .sub { color: var(--brown-mute); font-size: 12px; line-height: 1.6; }
.card2 .pr { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--paper-2); font-size: 17px; }
.ico { background: var(--slot); border-radius: 5px 12px; box-shadow: inset 0 0 0 2px #ffffff12; }
.grid > .empty { grid-column: 1 / -1; }
.empty { padding: 48px 24px; border: 1px dashed #9da78f; border-radius: 4px 18px; background: #fffcf180; color: var(--brown-mute); }
.skel { min-height: 156px; border-radius: 4px 18px; background-color: var(--paper-2); }
.split { gap: 24px; grid-template-columns: minmax(0, 1fr) 380px; }
.panel { padding: 28px; }
.panel h3 { color: var(--ink); }
.sticky { top: 100px; }
.bag { gap: 12px; padding-block: 12px; }
.mk button.slot { border-radius: 5px 12px; }
.mk button.slot.sel { box-shadow: 0 0 0 2px var(--gold-lo); }
.seg { padding: 3px; background: var(--paper-2); border-radius: 5px 12px; }
.mk .seg button { border: 0; background: transparent; color: var(--brown); box-shadow: none; text-shadow: none; }
.mk .seg button.on { background: var(--ink); color: var(--gold-hi); }
.hrow { padding: 18px; gap: 16px; border: 0; border-bottom: 1px solid #c3c7b0; border-radius: 0; background: transparent; }
.hrow .nm { font-size: 21px; }
.hrow .r { gap: 8px; }
.ov { background: #092c29c9; backdrop-filter: blur(4px); }
.dlgf { width: min(520px, 100%); animation: none; }
.dlg { padding: 30px; background: var(--field); border-radius: inherit; }
.dlg h2 { line-height: 1.25; }
.dlg .lines { background: var(--ink); border: 1px solid #61745a; border-radius: 4px 14px; }
.lines .c3, .ico .c3 { color: #ed8aff; }
.dlg .x { width: 36px; min-height: 36px; display: grid; place-items: center; padding: 8px; }
.x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.kv { font-variant-numeric: tabular-nums; }
.login { max-width: 460px; margin: 32px auto 40px; }
.login .panel { padding: 32px; }
.toast { background: var(--ink); border-radius: 4px 14px; }
.foot { margin-top: 40px; background: var(--ink-foot); border-top: 1px solid var(--gold-lo); }
.foot__in { gap: 24px; }
.foot a { color: var(--gold-hi); }
@media (max-width: 860px) {
  .top { gap: 12px; }
  .split { grid-template-columns: 1fr; }
  .sticky { position: relative; top: auto; }
  .who { gap: 8px; }
}
@media (max-width: 640px) {
  .top { padding: 8px 16px 6px; gap: 6px 12px; }
  .brand img { height: 44px; }
  .tabs { width: 100%; gap: 6px; padding-top: 5px; }
  .tabs a { flex: 1; padding: 12px 14px; }
  .who { gap: 5px 8px; justify-content: flex-end; max-width: calc(100% - 120px); font-size: 12px; }
  .who .name { font-size: 17px; }
  .who .money { padding: 2px 6px; }
  .mast { min-height: 240px; padding: 34px 0 40px; background-position: center, 65% center; }
  .mast p { font-size: 14px; max-width: 36ch; }
  .mast::after { inset: 8px; }
  .filters { padding: 18px; margin-top: 18px; }
  .row-f { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .row-f .grow { grid-column: 1 / -1; }
  .row-f .field, .row-f input, .row-f select { min-width: 0; }
  .chips { margin-inline: -3px; }
  .grid { grid-template-columns: 1fr; }
  .mk button.card2 { min-height: 142px; }
  .panel, .dlg, .login .panel { padding: 24px; }
  .hrow { padding-inline: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk button:hover:not(:disabled), .btn:hover { transform: none; }
}