.oc-levels { top: 136px; }
.oc-level-up svg { transform: rotate(90deg); }
.oc-map-picker { position: absolute; z-index: 500; top: 56px; right: 10px; max-width: min(62vw, 260px); }
.oc-map-picker select { width: 100%; padding: 6px 10px; border: 1px solid var(--wa-border); border-radius: 18px; background: var(--wa-surface); color: var(--wa-text); font: inherit; font-size: .8rem; box-shadow: var(--wa-shadow); }

.oc-damage-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oc-damage-tools label { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; min-width: 0; }
.oc-damage-tools select { width: 100%; min-width: 0; }
@media (max-width: 480px) { .oc-damage-tools { grid-template-columns: 1fr; } }
.oc-damage-list { display: grid; gap: 6px; margin-top: 10px; }
.oc-damage-row { background: var(--wa-surface); border: 1px solid var(--wa-border); border-radius: var(--wa-radius); overflow: hidden; }
.oc-damage-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.oc-damage-head img { width: 36px; height: 36px; flex: none; object-fit: contain; }
.oc-damage-title { flex: 1; min-width: 0; display: grid; }
.oc-damage-title b, .oc-damage-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-damage-title small { color: var(--wa-muted); }
.oc-damage-result { flex: none; font-weight: 700; font-size: .8rem; }
.oc-damage-weapons { width: 100%; border-collapse: collapse; font-size: .8rem; }
.oc-damage-weapons th { text-align: start; font-weight: 400; padding: 3px 10px; }
.oc-damage-weapons td { text-align: end; padding: 3px 10px; white-space: nowrap; }
.oc-damage-weapons td:last-child { color: var(--wa-muted); }

.oc-tracker-summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; }
.oc-tracker-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.oc-tracker-item { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border: 1px solid var(--wa-border); border-radius: 8px; background: var(--wa-surface); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.oc-tracker-item img { width: 36px; height: 36px; object-fit: contain; opacity: .28; }
.oc-tracker-item.found img, .oc-tracker-icon.found img { opacity: 1; }
.oc-tracker-level { position: absolute; top: 4px; right: 6px; font-size: .7rem; font-weight: 700; }
.oc-tracker-name { font-size: .62rem; line-height: 1.1; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; opacity: .75; }
.oc-tracker-dungeon { gap: 8px; }
.oc-tracker-icon { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--wa-border); border-radius: 8px; background: var(--wa-surface); padding: 2px; cursor: pointer; }
.oc-tracker-icon img { width: 26px; height: 26px; object-fit: contain; opacity: .28; }
.oc-tracker-mq { flex: none; padding: 4px 8px; border: 1px solid var(--wa-border); border-radius: 6px; background: var(--wa-surface); color: var(--wa-muted); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.oc-tracker-mq[aria-pressed="true"] { background: var(--wa-accent); color: var(--wa-accent-text); border-color: var(--wa-accent); }

.oc-bean-head { display: flex; gap: 14px; align-items: flex-start; }
.oc-bean-logo { flex: none; width: 56px; height: 56px; border-radius: 28px; background: var(--wa-border); display: flex; align-items: center; justify-content: center; }
.oc-bean-logo img { width: 32px; height: 32px; object-fit: contain; }
.oc-bean-info { flex: 1; min-width: 0; }
.oc-bean-info h2 { margin: 0 0 4px; font-size: 1.15rem; }
.oc-bean-info p { margin: 6px 0 0; }
.oc-bean-salesman { display: inline-flex; margin: 10px 0; }
.oc-bean-spots { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 720px) { .oc-bean-spots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oc-bean-spot { background: var(--wa-surface); border: 1px solid var(--wa-border); border-radius: var(--wa-radius); padding: 12px; display: grid; gap: 8px; }
.oc-bean-spot-head { display: flex; align-items: center; gap: 10px; }
.oc-bean-spot-head img { flex: none; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.oc-bean-spot-head > div { flex: 1; min-width: 0; display: grid; }
.oc-bean-spot-head small { color: var(--wa-muted); }
.oc-bean-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: .85rem; }
.oc-bean-details dt { font-weight: 700; font-size: .75rem; color: var(--wa-muted); }
.oc-bean-details dd { margin: 0; display: grid; }
.oc-bean-reward { font-size: .75rem; font-weight: 700; color: var(--wa-accent); }