/* 冒险岛怀旧服小册子站点专用样式- */
/* Static asset cache refresh: 2026-08-10 multi-server auction v2 */
html,
body {
    min-height: 100%;
}

/* Pet detail: native client sprites and command rules. */
.booklet-pet-preview { padding: 1rem; overflow: hidden; }
.booklet-pet-stage {
    display: grid; place-items: center; min-height: 250px; margin-top: .75rem;
    border: 1px solid #e2e8f0; border-radius: .75rem;
    background-color: #f8fafc;
    background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%), linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f5f9 75%), linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
    background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.booklet-pet-stage img {
    max-width: 80%; max-height: 190px; transform: scale(2); transform-origin: center;
    image-rendering: pixelated; image-rendering: crisp-edges;
}
.booklet-pet-action-list { display: flex; flex-wrap: wrap; gap: .4rem; padding: .75rem 0 .1rem; }
.booklet-pet-action {
    flex: 0 0 auto; min-height: 30px; padding: 0 .7rem; border: 1px solid #dbe3ee;
    border-radius: .45rem; background: #fff; color: #475569; font-size: 12px; transition: .15s ease;
}
.booklet-pet-action:hover, .booklet-pet-action.is-active { border-color: #60a5fa; background: #eff6ff; color: #2563eb; }
.booklet-pet-match-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; padding: 1rem 1rem 0; }
.booklet-pet-match-summary > div { display: flex; align-items: baseline; justify-content: center; gap: .4rem; padding: .75rem; border-radius: .6rem; background: #f8fafc; }
.booklet-pet-match-summary b { color: #0f172a; font-size: 20px; }
.booklet-pet-match-summary span { color: #64748b; font-size: 12px; }
.booklet-pet-match-summary .is-applicable { background: #f0fdf4; }
.booklet-pet-match-summary .is-applicable b { color: #16a34a; }
.booklet-pet-match-summary .is-prerequisite { background: #fffbeb; }
.booklet-pet-match-summary .is-prerequisite b { color: #d97706; }
.booklet-pet-match-tabs { padding-top: 1rem; }
.booklet-pet-match-switch { position: relative; display: grid; grid-template-columns: repeat(var(--pet-match-tab-count), minmax(0, 1fr)); width: min(620px, calc(100% - 2rem)); margin: 0 auto; border: 1px solid #edf2f7; border-radius: 6px; background: #fafcff; padding: 3px; isolation: isolate; }
.booklet-pet-match-switch-thumb { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--pet-match-tab-count)); border-radius: 4px; background: #3b82f6; transform: translateX(calc(var(--pet-match-tab-index) * 100%)); transition: transform .2s ease; }
.booklet-pet-match-switch button { position: relative; display: flex; min-width: 0; height: 36px; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: 4px; background: transparent; color: #64748b; font-size: 12px; cursor: pointer; transition: color .18s ease; }
.booklet-pet-match-switch button > span { font-size: 16px; }
.booklet-pet-match-switch button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booklet-pet-match-switch button em { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px; background: rgba(148, 163, 184, .18); padding: 0 .35rem; font-size: 10px; font-style: normal; }
.booklet-pet-match-switch button.is-active { color: #fff; }
.booklet-pet-match-switch button.is-active em { background: rgba(255, 255, 255, .2); color: #fff; }
.booklet-pet-match-panel[hidden] { display: none; }
.booklet-pet-match-panel { animation: bookletPetMatchPanelIn .18s ease; }
@keyframes bookletPetMatchPanelIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.booklet-pet-match-intro { display: flex; align-items: flex-start; gap: .55rem; margin: .75rem 1rem 0; border: 1px solid #dbeafe; border-radius: .55rem; background: #eff6ff; padding: .65rem .75rem; color: #475569; }
.booklet-pet-match-intro > span { flex: 0 0 auto; color: #3b82f6; font-size: 18px; }
.booklet-pet-match-intro p { margin: 0; font-size: 12px; line-height: 1.65; }
.booklet-pet-match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; padding: 1rem; }
.booklet-pet-match-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 78px; border: 1px solid #e2e8f0; border-radius: .65rem; padding: .55rem .65rem; background: #fff; color: inherit; transition: .15s ease; }
.booklet-pet-match-card:hover { border-color: #86efac; background: #f7fff9; box-shadow: 0 5px 16px rgba(22, 163, 74, .08); transform: translateY(-1px); }
.booklet-pet-match-image { display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; border-radius: .5rem; background: #f8fafc; }
.booklet-pet-match-image img { max-width: 48px; max-height: 46px; transform: scale(1.15); image-rendering: pixelated; }
.booklet-pet-match-copy { display: flex; min-width: 0; flex-direction: column; gap: .15rem; }
.booklet-pet-match-copy b { overflow: hidden; color: #1d4ed8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.booklet-pet-match-copy small { color: #94a3b8; font-size: 10px; }
.booklet-pet-match-copy em { width: fit-content; border-radius: 999px; background: #dcfce7; padding: .1rem .4rem; color: #15803d; font-size: 10px; font-style: normal; }
.booklet-pet-match-card.is-builtin .booklet-pet-match-copy em { background: #dbeafe; color: #2563eb; }
.booklet-pet-match-card.is-prerequisite .booklet-pet-match-copy em { background: #fef3c7; color: #b45309; }
.booklet-pet-match-card > span:last-child { color: #94a3b8; }
.booklet-pet-match-excluded { margin: 0 1rem 1rem; border-top: 1px solid #e8edf3; padding-top: .75rem; }
.booklet-pet-match-excluded summary { width: fit-content; cursor: pointer; color: #64748b; font-size: 12px; }
.booklet-pet-match-excluded > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem .65rem; margin-top: .65rem; }
.booklet-pet-match-excluded a { display: flex; min-width: 0; justify-content: space-between; gap: .5rem; border-radius: .35rem; background: #f8fafc; padding: .4rem .55rem; font-size: 11px; }
.booklet-pet-match-excluded a b { overflow: hidden; color: #475569; text-overflow: ellipsis; white-space: nowrap; }
.booklet-pet-match-excluded a span { flex: 0 0 auto; color: #94a3b8; }
.booklet-pet-ability-block { padding: 1rem; }
.booklet-pet-ability-block + .booklet-pet-ability-block { border-top: 1px solid #e8edf3; }
.booklet-pet-ability-block h3 { margin: 0 0 .7rem; color: #1e293b; font-size: 14px; font-weight: 700; }
.booklet-pet-ability-hint { margin: -.35rem 0 .75rem; color: #94a3b8; font-size: 12px; }
.booklet-pet-builtin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.booklet-pet-builtin-card { display: flex; gap: .65rem; padding: .75rem; border: 1px solid #bbf7d0; border-radius: .65rem; background: #f0fdf4; }
.booklet-pet-builtin-card > span { flex: 0 0 auto; margin-top: .1rem; color: #16a34a; font-size: 18px; }
.booklet-pet-builtin-card b { color: #166534; font-size: 13px; }
.booklet-pet-builtin-card p { margin: .2rem 0 0; color: #4b7b5a; font-size: 12px; line-height: 1.55; }
.booklet-pet-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.booklet-pet-skill-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 82px; padding: .65rem; border: 1px solid #dbeafe; border-radius: .65rem; background: #f8fbff; text-decoration: none; transition: .15s ease; }
.booklet-pet-skill-card:hover { border-color: #60a5fa; box-shadow: 0 4px 14px rgba(37, 99, 235, .08); transform: translateY(-1px); }
.booklet-pet-skill-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: .55rem; background: #fff; box-shadow: inset 0 0 0 1px #e2e8f0; }
.booklet-pet-skill-icon img { max-width: 34px; max-height: 34px; image-rendering: pixelated; }
.booklet-pet-skill-copy { display: flex; min-width: 0; flex-direction: column; gap: .15rem; }
.booklet-pet-skill-copy b { overflow: hidden; color: #1e293b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.booklet-pet-skill-copy em { width: fit-content; padding: .1rem .4rem; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 11px; font-style: normal; font-weight: 600; }
.booklet-pet-skill-copy small { color: #64748b; font-size: 11px; line-height: 1.4; }
.booklet-pet-skill-card.is-builtin { border-color: #e2e8f0; background: #f8fafc; }
.booklet-pet-skill-card.is-builtin .booklet-pet-skill-copy em { background: #e2e8f0; color: #64748b; }
.booklet-pet-skill-card.is-prerequisite { border-color: #fde68a; background: #fffbeb; }
.booklet-pet-skill-card.is-prerequisite .booklet-pet-skill-copy em { background: #fef3c7; color: #b45309; }
.booklet-pet-summary { padding: 1rem; border-bottom: 1px solid #e8edf3; }
.booklet-pet-summary > p { margin: 0 0 .8rem; color: #475569; font-size: 14px; line-height: 1.75; }
.booklet-pet-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.booklet-pet-facts span { display: flex; flex-direction: column; gap: .15rem; padding: .65rem; border-radius: .55rem; background: #f8fafc; text-align: center; }
.booklet-pet-facts b { color: #0f172a; font-size: 15px; }
.booklet-pet-facts small { color: #94a3b8; font-size: 11px; }
.booklet-pet-command-list { display: grid; gap: .5rem; padding: .8rem; }
.booklet-pet-command { border: 1px solid #e2e8f0; border-radius: .6rem; background: #fff; overflow: hidden; }
.booklet-pet-command summary { display: grid; grid-template-columns: auto minmax(100px, 1fr) auto auto; align-items: center; gap: .65rem; padding: .7rem .8rem; cursor: pointer; color: #64748b; font-size: 12px; }
.booklet-pet-command summary::marker { color: #60a5fa; }
.booklet-pet-command summary b { color: #1e293b; font-size: 13px; }
.booklet-pet-command-type { padding: .15rem .45rem; border-radius: 999px; background: #eff6ff; color: #2563eb; font-weight: 600; }
.booklet-pet-command-body { padding: .8rem; border-top: 1px solid #edf2f7; background: #f8fafc; }
.booklet-pet-command-body dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .65rem; }
.booklet-pet-command-body dl > div { padding: .5rem; border-radius: .4rem; background: #fff; }
.booklet-pet-command-body dt { color: #94a3b8; font-size: 11px; }
.booklet-pet-command-body dd { margin: .15rem 0 0; color: #334155; font-size: 12px; font-weight: 600; }
.booklet-pet-command-body p { margin: .35rem 0 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.booklet-pet-command-body p b { color: #334155; }
.dark .booklet-pet-stage { border-color: #334155; background-color: #172033; background-image: linear-gradient(45deg, #1e293b 25%, transparent 25%), linear-gradient(-45deg, #1e293b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1e293b 75%), linear-gradient(-45deg, transparent 75%, #1e293b 75%); }
.dark .booklet-pet-action, .dark .booklet-pet-command { border-color: #334155; background: #1e293b; color: #cbd5e1; }
.dark .booklet-pet-action:hover, .dark .booklet-pet-action.is-active { border-color: #3b82f6; background: #172554; color: #93c5fd; }
.dark .booklet-pet-summary { border-color: #334155; }
.dark .booklet-pet-match-summary > div, .dark .booklet-pet-match-card, .dark .booklet-pet-match-excluded a { border-color: #334155; background: #172033; }
.dark .booklet-pet-match-switch { border-color: #334155; background: #111827; }
.dark .booklet-pet-match-summary .is-applicable { background: #14271d; }
.dark .booklet-pet-match-summary .is-prerequisite { background: #2c2414; }
.dark .booklet-pet-match-summary b { color: #e2e8f0; }
.dark .booklet-pet-match-intro { border-color: #1e3a5f; background: #152238; color: #94a3b8; }
.dark .booklet-pet-match-card:hover { border-color: #166534; background: #14271d; }
.dark .booklet-pet-match-image { background: #1e293b; }
.dark .booklet-pet-match-excluded { border-color: #334155; }
.dark .booklet-pet-match-excluded a b { color: #cbd5e1; }
.dark .booklet-pet-ability-block + .booklet-pet-ability-block { border-color: #334155; }
.dark .booklet-pet-ability-block h3, .dark .booklet-pet-skill-copy b { color: #e2e8f0; }
.dark .booklet-pet-builtin-card { border-color: #166534; background: #14271d; }
.dark .booklet-pet-builtin-card b { color: #86efac; }
.dark .booklet-pet-builtin-card p { color: #86a990; }
.dark .booklet-pet-skill-card, .dark .booklet-pet-skill-card.is-builtin { border-color: #334155; background: #172033; }
.dark .booklet-pet-skill-card.is-prerequisite { border-color: #854d0e; background: #2c2414; }
.dark .booklet-pet-skill-icon { background: #1e293b; box-shadow: inset 0 0 0 1px #334155; }
.dark .booklet-pet-summary > p, .dark .booklet-pet-command-body p { color: #94a3b8; }
.dark .booklet-pet-facts span, .dark .booklet-pet-command-body { background: #172033; }
.dark .booklet-pet-facts b, .dark .booklet-pet-command summary b, .dark .booklet-pet-command-body dd, .dark .booklet-pet-command-body p b { color: #e2e8f0; }
.dark .booklet-pet-command-body { border-color: #334155; }
.dark .booklet-pet-command-body dl > div { background: #1e293b; }
@media (max-width: 640px) {
    .booklet-pet-match-summary { grid-template-columns: 1fr; }
    .booklet-pet-match-grid, .booklet-pet-match-excluded > div { grid-template-columns: 1fr; }
    .booklet-pet-match-switch { width: calc(100% - 1.25rem); }
    .booklet-pet-match-switch button { gap: .25rem; font-size: 11px; }
    .booklet-pet-match-switch button > span { display: none; }
    .booklet-pet-builtin-grid, .booklet-pet-skill-grid { grid-template-columns: 1fr; }
    .booklet-pet-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booklet-pet-command summary { grid-template-columns: auto minmax(90px, 1fr); }
    .booklet-pet-command summary > span:nth-last-child(-n+2) { display: none; }
}

/* Dedicated pet database. */
.booklet-pet-list-hero { display: flex; align-items: center; gap: 1rem; padding: 1rem; }
.booklet-pet-list-hero-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 6px; background: #eff6ff; color: #2563eb; font-size: 26px; }
.booklet-pet-list-hero-copy { min-width: 0; flex: 1; }
.booklet-pet-list-hero-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.booklet-pet-list-hero h1 { margin: 0; color: #0f172a; font-size: 24px; font-weight: 650; }
.booklet-pet-list-hero-copy > div > span { border-radius: 4px; background: #ecfdf5; padding: .2rem .5rem; color: #047857; font-size: 11px; font-weight: 650; }
.booklet-pet-list-hero p { margin: .35rem 0 0; color: #64748b; font-size: 13px; line-height: 1.65; }
.booklet-pet-list-total { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; }
.booklet-pet-list-total b { color: #2563eb; font-size: 24px; line-height: 1; }
.booklet-pet-list-total span { margin-top: .3rem; color: #94a3b8; font-size: 11px; }
.booklet-pet-list-toolbar { margin-top: .75rem; overflow: hidden; }
.booklet-pet-list-toolbar form { display: flex; gap: .5rem; padding: .8rem; }
.booklet-pet-list-toolbar form label { position: relative; min-width: 220px; flex: 1; }
.booklet-pet-list-toolbar form label > span { position: absolute; top: 10px; left: 11px; color: #94a3b8; font-size: 18px; }
.booklet-pet-list-toolbar input { width: 100%; height: 38px; border: 1px solid #e2e8f0; border-radius: 5px; background: #fff; padding: 0 12px 0 36px; color: #0f172a; font-size: 13px; outline: none; }
.booklet-pet-list-toolbar input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(59, 130, 246, .08); }
.booklet-pet-list-toolbar form button, .booklet-pet-list-toolbar form > a { display: inline-flex; height: 38px; align-items: center; justify-content: center; gap: .35rem; border: 1px solid #dbe3ee; border-radius: 5px; padding: 0 .85rem; background: #fff; color: #475569; font-size: 13px; }
.booklet-pet-list-toolbar form button { border-color: #2563eb; background: #2563eb; color: #fff; }
.booklet-pet-list-filters { display: flex; flex-wrap: wrap; gap: .4rem; border-top: 1px solid #edf2f7; padding: .75rem .8rem; }
.booklet-pet-list-filters a { display: inline-flex; min-height: 30px; align-items: center; gap: .3rem; border: 1px solid #edf2f7; border-radius: 5px; background: #fafcff; padding: 0 .65rem; color: #64748b; font-size: 11px; }
.booklet-pet-list-filters a:hover, .booklet-pet-list-filters a.is-active { border-color: #bfdbfe; background: #eff6ff; color: #2563eb; }
.booklet-pet-list-filters em { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 4px; background: rgba(148, 163, 184, .13); padding: 0 .25rem; font-size: 9px; font-style: normal; }
.booklet-pet-list-result-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem .15rem .65rem; color: #64748b; font-size: 12px; }
.booklet-pet-list-result-head > div { display: flex; align-items: center; gap: .4rem; color: #334155; font-size: 13px; }
.booklet-pet-list-result-head > div > span { color: #2563eb; font-size: 17px; }
.booklet-pet-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.booklet-pet-list-card { position: relative; display: grid; grid-template-columns: 138px minmax(0, 1fr) 24px; min-width: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; transition: .15s ease; }
.booklet-pet-list-card:hover { border-color: #bfdbfe; box-shadow: 0 5px 16px rgba(37, 99, 235, .06); transform: translateY(-1px); }
.booklet-pet-list-preview { position: relative; display: grid; min-height: 184px; place-items: center; overflow: hidden; border-right: 1px solid #edf2f7; background-color: #f8fafc; background-image: linear-gradient(45deg,#f1f5f9 25%,transparent 25%),linear-gradient(-45deg,#f1f5f9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f5f9 75%),linear-gradient(-45deg,transparent 75%,#f1f5f9 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }
.booklet-pet-list-preview img { max-width: 92px; max-height: 82px; transform: scale(1.45); image-rendering: pixelated; }
.booklet-pet-list-preview > span { color: #94a3b8; font-size: 34px; }
.booklet-pet-list-preview small { position: absolute; right: 6px; bottom: 5px; border-radius: 3px; background: rgba(255,255,255,.85); padding: .1rem .3rem; color: #94a3b8; font-size: 9px; }
.booklet-pet-list-content { min-width: 0; padding: .85rem .75rem; }
.booklet-pet-list-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .5rem; }
.booklet-pet-list-title a { overflow: hidden; color: #1d4ed8; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.booklet-pet-list-title > span { flex: 0 0 auto; color: #94a3b8; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; }
.booklet-pet-list-content > p { display: -webkit-box; min-height: 38px; overflow: hidden; margin: .4rem 0 .6rem; color: #64748b; font-size: 11px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.booklet-pet-list-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.booklet-pet-list-facts span { display: flex; min-width: 0; flex-direction: column; border-radius: 4px; background: #f8fafc; padding: .35rem .4rem; }
.booklet-pet-list-facts small { overflow: hidden; color: #94a3b8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.booklet-pet-list-facts b { margin-top: .1rem; color: #334155; font-size: 11px; }
.booklet-pet-list-skills { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.booklet-pet-list-skills span { border-radius: 4px; background: #eff6ff; padding: .15rem .4rem; color: #2563eb; font-size: 9px; }
.booklet-pet-list-more { display: grid; place-items: center; color: #94a3b8; font-size: 18px; }
.booklet-pet-list-empty { display: grid; min-height: 260px; place-items: center; align-content: center; padding: 2rem; text-align: center; }
.booklet-pet-list-empty > span { color: #94a3b8; font-size: 40px; }
.booklet-pet-list-empty b { margin-top: .5rem; color: #334155; }
.booklet-pet-list-empty p { margin: .25rem 0 0; color: #94a3b8; font-size: 12px; }
.dark .booklet-pet-list-hero h1, .dark .booklet-pet-list-title a, .dark .booklet-pet-list-result-head > div { color: #e2e8f0; }
.dark .booklet-pet-list-hero-icon, .dark .booklet-pet-list-filters a.is-active, .dark .booklet-pet-list-skills span { background: #172554; color: #93c5fd; }
.dark .booklet-pet-list-toolbar input, .dark .booklet-pet-list-toolbar form > a, .dark .booklet-pet-list-card { border-color: #334155; background: #171f2d; color: #e2e8f0; }
.dark .booklet-pet-list-filters { border-color: #334155; }
.dark .booklet-pet-list-filters a, .dark .booklet-pet-list-facts span { border-color: #334155; background: #172033; }
.dark .booklet-pet-list-preview { border-color: #334155; background-color: #172033; background-image: linear-gradient(45deg,#1e293b 25%,transparent 25%),linear-gradient(-45deg,#1e293b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1e293b 75%),linear-gradient(-45deg,transparent 75%,#1e293b 75%); }
.dark .booklet-pet-list-facts b { color: #cbd5e1; }
@media (max-width: 900px) { .booklet-pet-list-grid { grid-template-columns: 1fr; } }
@media (min-width: 901px) {
    .booklet-pet-list-toolbar form { padding-right: 5.25rem; }
    .booklet-pet-list-filters { padding-right: 5.25rem; }
}
@media (max-width: 560px) {
    .booklet-pet-list-hero { align-items: flex-start; }
    .booklet-pet-list-total { display: none; }
    .booklet-pet-list-toolbar form { flex-wrap: wrap; }
    .booklet-pet-list-toolbar form label { flex-basis: 100%; }
    .booklet-pet-list-card { grid-template-columns: 104px minmax(0, 1fr) 20px; }
    .booklet-pet-list-preview { min-height: 196px; }
    .booklet-pet-list-facts { grid-template-columns: 1fr; }
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

.tw-icon-\[mdi--check-bold\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.booklet-footer {
    flex: 0 0 auto;
}

.booklet-floating-toolbar {
    right: max(16px, calc((100vw - 1280px) / 2 - 84px));
    bottom: 100px;
}

.booklet-floating-toolbar__panel {
    padding-top: 4px;
    padding-bottom: 4px;
}

.booklet-floating-toolbar__item {
    width: 62px;
    gap: 3px;
    padding: 4px;
    font-size: 12px;
    line-height: 16px;
}

.booklet-floating-toolbar__item > span {
    font-size: 22px;
}

.booklet-floating-toolbar__backtop {
    width: 62px;
    height: 44px;
    margin-top: 4px;
    font-size: 22px;
}

@media (min-height: 1020px) {
    .booklet-floating-toolbar__panel {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .booklet-floating-toolbar__item {
        width: 72px;
        gap: 4px;
        padding: 8px;
        font-size: 12px;
        line-height: 16px;
    }

    .booklet-floating-toolbar__item > span {
        font-size: 24px;
    }

    .booklet-floating-toolbar__backtop {
        width: 72px;
        height: 48px;
        margin-top: 12px;
        font-size: 24px;
    }
}

@media (min-width: 1600px) {
    .booklet-floating-toolbar {
        right: max(16px, calc((100vw - 1320px) / 2 - 84px));
    }
}

@media (min-width: 1800px) {
    .booklet-floating-toolbar {
        right: max(16px, calc((100vw - 1360px) / 2 - 84px));
    }
}

.booklet-home {
    background: #f5f5f5;
}

.booklet-hero {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.94) 62%, rgba(243,244,246,1) 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.booklet-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
    pointer-events: none;
}

.booklet-hero-inner {
    padding-top: 58px;
    padding-bottom: 44px;
}

.booklet-hero-kicker {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    color: #059669;
}

.booklet-hero-title {
    font-size: clamp(42px, 5.2vw, 72px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: 0;
    color: #0f172a;
}

.booklet-hero-desc {
    max-width: 620px;
    margin: 14px auto 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.7;
}

.booklet-hero-search {
    border: 1px solid rgba(203, 213, 225, 0.95);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.booklet-search-btn {
    height: 32px;
    padding-left: 16px;
    padding-right: 16px;
}

.booklet-feature-grid {
    margin-top: 34px;
}

.booklet-feature-card {
    min-height: 126px;
    gap: 10px;
    padding: 20px 14px 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.booklet-feature-icon {
    width: 46px;
    height: 46px;
    background: #e9f0ff;
    color: #475569;
}

.booklet-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.booklet-home-body {
    padding-top: 42px;
    background: #f5f5f5;
}

.booklet-preview-grid {
    align-items: start;
}

.booklet-preview-card,
.booklet-module-card {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.booklet-preview-card {
    min-height: 420px;
}

.booklet-section-block {
    padding-top: 18px;
}

.booklet-section-head {
    padding-top: 12px;
}

.booklet-section-head h2 {
    line-height: 1.2;
}

.booklet-module-card {
    min-height: 86px;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.booklet-module-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

.pagermxdc {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pagermxdc li a,
.pagermxdc li span {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
    color: #475569;
}

.pagermxdc li a:hover,
.pagermxdc li .now_page,
.pagermxdc li a.now_page {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.booklet-footer {
    border-top: 0;
    background: transparent;
    padding: 36px 0;
}

.booklet-footer-content {
    color: #6b7280;
    font-size: 11px;
    line-height: 1.65;
    text-align: center;
}

.booklet-footer-content p {
    margin: 0;
}

.booklet-footer-content a {
    color: #2563eb;
    font-weight: 400;
    transition: color .15s ease;
}

.booklet-footer-content a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.booklet-cash-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 6px;
}

.booklet-cash-filter-chip {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    border: 1px solid #dce4ee;
    border-radius: 6px;
    background: #fff;
    padding: 5px 8px;
    color: #334155;
    font-size: 13px;
    line-height: 1.2;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.booklet-cash-filter-chip:hover,
.booklet-cash-filter-chip.is-active {
    border-color: #60a5fa;
    background: #eaf3ff;
    color: #1d4ed8;
}

.booklet-cash-filter-chip > span:first-child {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 15px;
}

.booklet-cash-filter-chip.is-active > span:first-child {
    color: #2563eb;
}

.booklet-cash-filter-chip em {
    border-radius: 4px;
    background: #f1f5f9;
    padding: 2px 5px;
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    line-height: 1.2;
}

.booklet-cash-filter-chip.is-active em {
    background: rgba(255, 255, 255, .78);
    color: #2563eb;
}

.tw-dark .booklet-cash-filter-chip,
.dark .booklet-cash-filter-chip {
    border-color: #343b45;
    background: #1b1e22;
    color: #d5d9df;
}

.tw-dark .booklet-cash-filter-chip:hover,
.dark .booklet-cash-filter-chip:hover,
.tw-dark .booklet-cash-filter-chip.is-active,
.dark .booklet-cash-filter-chip.is-active {
    border-color: #3b82f6;
    background: rgba(37, 99, 235, .16);
    color: #7dd3fc;
}

.tw-dark .booklet-cash-filter-chip em,
.dark .booklet-cash-filter-chip em {
    background: #272c33;
    color: #a8b1be;
}

.booklet-catalog-list-layout,
.booklet-catalog-detail-layout {
    display: grid;
    gap: 10px;
}

.booklet-data-list-overview { margin-bottom: 10px; }
.booklet-data-list-layout { gap: 10px; }

.booklet-cash-toolbar,
.booklet-reward-toolbar {
    display: grid;
    gap: 8px;
}

@media (min-width: 1024px) {
    .booklet-cash-toolbar {
        grid-template-columns: minmax(220px, 1fr) 140px 110px;
    }

    .booklet-reward-toolbar {
        grid-template-columns: minmax(240px, 1fr) 150px 120px auto;
    }
}

@media (min-width: 1024px) {
    .booklet-catalog-detail-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 16px;
    }
}

.booklet-reward-info-toolbar,
.booklet-reward-info-summary,
.booklet-cash-info-toolbar,
.booklet-cash-info-summary {
    margin-bottom: 10px;
}

.booklet-catalog-detail-layout.booklet-reward-info-layout,
.booklet-catalog-detail-layout.booklet-cash-info-layout {
    gap: 10px;
}

.booklet-reward-info-aside,
.booklet-cash-info-main,
.booklet-cash-info-aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 1280px) {
    .booklet-catalog-list-layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }
}

.booklet-item-page {
    padding-top: 22px;
    padding-bottom: 46px;
}

[v-cloak] {
    display: none;
}

[data-ui-item-tip-layer] {
    position: fixed !important;
    z-index: 1400 !important;
    pointer-events: none !important;
    color: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.24);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .5) transparent;
}

[data-ui-item-tip-layer]::-webkit-scrollbar { width: 6px; }
[data-ui-item-tip-layer]::-webkit-scrollbar-track { background: transparent; }
[data-ui-item-tip-layer]::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(148, 163, 184, .5); }

.mxdc-tip-head { align-items: center; gap: 9px; padding: 9px 10px; }
.mxdc-tip-icon { width: 46px; height: 46px; font-size: 24px; }
.mxdc-tip-name { margin-top: 2px; font-size: 14px; line-height: 19px; }
.mxdc-tip-title-row .mxdc-tip-name { margin-top: 0; }
.mxdc-tip-meta { font-size: 10px; line-height: 14px; }
.mxdc-tip-head-tags { max-width: 48%; gap: 4px; }
.mxdc-tip-head-tags > span { padding: 2px 7px; font-size: 10px; line-height: 16px; }
.mxdc-tip-kind-tags > span { padding: 1px 6px; font-size: 11px; line-height: 17px; }
.mxdc-tip-gender-tag { display: inline-flex; height: 17px; align-items: center; justify-content: center; border-radius: 3px; padding: 0 6px; font-size: 10px; font-weight: 600; line-height: 17px; }
.mxdc-tip-gender-tag.is-male { background: rgba(59, 130, 246, .22); color: #bfdbfe; }
.mxdc-tip-gender-tag.is-female { background: rgba(244, 63, 94, .22); color: #fecdd3; }
.mxdc-tip-gender-tag.is-neutral { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
.mxdc-tip-body { padding: 9px 10px 10px; font-size: 12px; line-height: 19px; }
.mxdc-tip-row { border-bottom: 0; padding-top: 2px; padding-bottom: 2px; line-height: 17px; }
.mxdc-tip-section { margin-top: 8px; padding-top: 6px; }
.mxdc-tip-section-title { margin-bottom: 4px; }
.mxdc-tip-body > .mxdc-tip-section:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.mxdc-tip-npc-locations .tw-space-y-1 > div { min-height: 24px; border-bottom: 0; padding-top: 2px; padding-bottom: 2px; }
.mxdc-tip-npc-preview { margin-top: 7px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 7px; }
.mxdc-tip-npc-preview img { max-height: 140px; }
.mxdc-tip-requirements { border-bottom: 0; padding-top: 7px; padding-bottom: 7px; }
.mxdc-tip-requirements-grid { gap: 1px 10px; padding-right: 0; line-height: 17px; }
.mxdc-tip-body:has(> .mxdc-tip-requirements.is-empty) { padding-top: 0; }
.mxdc-tip-requirements.is-empty { padding-top: 0; }
.mxdc-tip-requirements.is-empty .mxdc-tip-jobs { margin-top: 0; border-top: 0; }
.mxdc-tip-jobs { margin-top: 6px; gap: 4px; border-right: 0; border-left: 0; border-radius: 0; padding: 5px; }
.mxdc-tip-job { height: 22px; padding-left: 7px; padding-right: 7px; font-size: 10px; }
.mxdc-tip-preview { margin-top: 7px; padding-top: 5px; }
.mxdc-tip-preview-stage { height: 112px; }

@media (max-height: 760px) {
    .mxdc-tip-head { padding: 7px 9px; }
    .mxdc-tip-icon { width: 42px; height: 42px; font-size: 22px; }
    .mxdc-tip-body { padding: 7px 9px 8px; line-height: 18px; }
    .mxdc-tip-row { padding-top: 1px; padding-bottom: 1px; line-height: 16px; }
}

[data-ui-item-tip-layer].tw-hidden {
    display: none !important;
}

.tw-animate-spin {
    animation: mxdcTipSpin .75s linear infinite;
}

.tw-icon-\[mdi--loading\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.booklet-uiv8-list .db-tree-row {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 7px 8px;
    color: #475569;
    font-size: 14px;
    line-height: 1.2;
    transition: background .15s ease, color .15s ease;
}

.booklet-uiv8-body {
    grid-template-columns: minmax(0, 1fr);
}

.booklet-uiv8-filter-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
}

.tw-icon-\[mdi--database-search-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2C6.58 2 3 3.79 3 6v12c0 2.21 3.58 4 8 4c.74 0 1.45-.05 2.13-.15a6.47 6.47 0 0 1-1.7-1.87L11 20c-3.87 0-6-1.5-6-2v-2.23C6.61 16.55 8.72 17 11 17h.08A6.5 6.5 0 0 1 11 16c0-.34.03-.67.08-1H11c-3.87 0-6-1.5-6-2v-2.23C6.61 11.55 8.72 12 11 12c1.33 0 2.59-.15 3.71-.43A6.42 6.42 0 0 1 17 11.05V6c0-2.21-3.58-4-8-4m0 2c3.87 0 6 1.5 6 2s-2.13 2-6 2s-6-1.5-6-2s2.13-2 6-2m0 6c3.87 0 6-1.5 6-2v2.23C15.39 11 13.28 11.5 11 11.5S6.61 11 5 10.23V8c0 .5 2.13 2 6 2m6.5 3a4.5 4.5 0 0 0-4.5 4.5a4.5 4.5 0 0 0 4.5 4.5c.88 0 1.69-.25 2.38-.68L22.56 24L24 22.56l-2.68-2.68c.43-.69.68-1.5.68-2.38a4.5 4.5 0 0 0-4.5-4.5m0 2a2.5 2.5 0 0 1 2.5 2.5a2.5 2.5 0 0 1-2.5 2.5a2.5 2.5 0 0 1-2.5-2.5a2.5 2.5 0 0 1 2.5-2.5Z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--table-large\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h18v18H3zm2 2v4h14V5zm0 6v3h4v-3zm6 0v3h8v-3zm-6 5v3h4v-3zm6 0v3h8v-3z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--file-tree-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h6v6H3zm2 2v2h2V5zm2 7h2v3h4v-3h2v3h4v6h-6v-4H9v4H3v-6h4zm8 5v2h2v-2zM5 17v2h2v-2zm8-14h8v6h-8zm2 2v2h4V5z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--filter-check-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h18l-7 8v6l-4 2v-8zm4.41 2L12 11.26L16.59 6zm9.18 10.58L18 15.17l2 2l4-4L22.59 12L18 16.58z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--hanger\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 7a3 3 0 1 0-3-3'/%3E%3Cpath d='M12 7v2L4 14.5V18h16v-3.5L12 9'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--glasses\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='7' cy='14' r='4'/%3E%3Ccircle cx='17' cy='14' r='4'/%3E%3Cpath d='M11 14h2M3 13l-1-3m19 3 1-3'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--face-man-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 10h.01M16 10h.01M8.5 15c1.1 1 2.2 1.5 3.5 1.5s2.4-.5 3.5-1.5M7 7c1.4-1.2 3-1.8 5-1.8s3.6.6 5 1.8'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--chair-rolling\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 3h8v7H8zM7 10h10v4a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3zM12 17v3M7 21h10M8 21l-2 1m10-1 2 1'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--paw-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cellipse cx='6.5' cy='8' rx='2' ry='3'/%3E%3Cellipse cx='11' cy='6' rx='2' ry='3'/%3E%3Cellipse cx='15.5' cy='8' rx='2' ry='3'/%3E%3Cellipse cx='19' cy='11.5' rx='2' ry='2.6'/%3E%3Cpath d='M7.5 17.5c0-3 2.6-5.5 5-5.5s5 2.5 5 5.5c0 2.1-1.5 3.5-3.1 3.5-.8 0-1.3-.4-1.9-.4s-1.1.4-1.9.4c-1.6 0-3.1-1.4-3.1-3.5Z'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--cart-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 4h2l2.2 11.2a2 2 0 0 0 2 1.8h8.6a2 2 0 0 0 2-1.6L21 8H7'/%3E%3Ccircle cx='10' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--cash\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M6 9h1m10 6h1'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--filter-remove-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h18l-7 8v6l-4 2v-8zm4.41 2L12 11.26L16.59 6zM19 16.59L21.59 14L23 15.41L20.41 18L23 20.59L21.59 22L19 19.41L16.41 22L15 20.59L17.59 18L15 15.41L16.41 14z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--format-list-bulleted\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5h14v2H7zm0 6h14v2H7zm0 6h14v2H7zM3 5h2v2H3zm0 6h2v2H3zm0 6h2v2H3z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--view-grid-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h8v8H3zm2 2v4h4V5zm8-2h8v8h-8zm2 2v4h4V5zM3 13h8v8H3zm2 2v4h4v-4zm8-2h8v8h-8zm2 2v4h4v-4z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--database-search-outline\],
.tw-icon-\[mdi--table-large\],
.tw-icon-\[mdi--file-tree-outline\],
.tw-icon-\[mdi--filter-check-outline\],
.tw-icon-\[mdi--hanger\],
.tw-icon-\[mdi--glasses\],
.tw-icon-\[mdi--face-man-outline\],
.tw-icon-\[mdi--chair-rolling\],
.tw-icon-\[mdi--paw-outline\],
.tw-icon-\[mdi--cart-outline\],
.tw-icon-\[mdi--cash\],
.tw-icon-\[mdi--filter-remove-outline\],
.tw-icon-\[mdi--format-list-bulleted\],
.tw-icon-\[mdi--view-grid-outline\] {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.booklet-uiv8-head-stats > div {
    min-height: 62px;
}

.booklet-uiv8-head-stats {
    position: relative;
    border-top-width: 0 !important;
}

.booklet-uiv8-head-stats::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: #e5e7eb;
}

@media (min-width: 768px) {
    .booklet-uiv8-head-stats > div {
        position: relative;
        border-left-width: 0 !important;
        border-top-width: 0 !important;
    }

    .booklet-uiv8-head-stats > div + div::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #e5e7eb;
    }
}

.booklet-uiv8-search {
    display: flex;
    height: 36px;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
    color: #64748b;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.booklet-uiv8-search:focus-within,
.booklet-uiv8-search.is-active {
    border-color: #a855f7;
    box-shadow: inset 0 0 0 1px #a855f7;
}

.booklet-uiv8-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
}

.booklet-uiv8-search input::placeholder {
    color: #94a3b8;
}

.booklet-uiv8-search button {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #64748b;
}

.booklet-uiv8-search button:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.booklet-uiv8-list select:focus,
.booklet-uiv8-list button:focus-visible {
    border-color: #a855f7 !important;
    outline: 0;
    box-shadow: inset 0 0 0 1px #a855f7;
}

.booklet-uiv8-table-wrap table {
    transition: opacity .18s ease, filter .18s ease;
}

.booklet-uiv8-table-wrap.is-loading table {
    opacity: .28;
    filter: blur(1px);
}

.booklet-uiv8-table-wrap.is-loading,
.booklet-list-loading-host.is-loading {
    min-height: 160px;
}

.booklet-list-loading-host {
    position: relative;
}

.booklet-uiv8-loading-layer,
.booklet-list-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(1px);
}

.booklet-uiv8-loading-pill,
.booklet-list-loading-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .96);
    padding: 10px 14px;
    color: #475569;
    font-size: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

@media (min-width: 1024px) {
    .booklet-uiv8-filter-grid {
        grid-template-columns: minmax(260px, 1fr) 150px 116px 110px;
    }
}

@media (min-width: 1280px) {
    .booklet-uiv8-body {
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: start;
    }
}

.booklet-uiv8-list .db-tree-row:hover,
.booklet-uiv8-list .db-tree-row.db-tree-active {
    background: #eff6ff;
    color: #1d4ed8;
}

.booklet-look-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.booklet-look-grid .db-tree-row {
    min-height: 34px;
}

.booklet-uiv8-list .db-tree-root {
    color: #0f172a;
    font-weight: 700;
}

.booklet-uiv8-list details[open] > summary .tw-icon-\[mdi--chevron-right\] {
    transform: rotate(90deg);
}

.booklet-uiv8-list summary.db-tree-row {
    cursor: pointer;
    list-style: none;
}

.booklet-uiv8-list summary.db-tree-row::-webkit-details-marker {
    display: none;
}

.booklet-uiv8-list .gear-page-btn {
    display: inline-flex;
    min-width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0 10px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.booklet-uiv8-list .gear-page-btn:hover:not(:disabled),
.booklet-uiv8-list .gear-page-btn.is-active {
    background: #2563eb;
    color: #fff;
}

.booklet-uiv8-list .gear-page-btn:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.booklet-sticky-pager {
    position: sticky;
    bottom: 20px;
    z-index: 40;
}

.booklet-sticky-pager-inner {
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
}

.booklet-sticky-pager .gear-page-btn {
    display: inline-flex;
    min-width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0 10px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.booklet-sticky-pager .gear-page-btn:hover,
.booklet-sticky-pager .gear-page-btn.is-active {
    background: #2563eb;
    color: #fff;
}

.booklet-sticky-pager .gear-page-btn.is-disabled {
    cursor: not-allowed;
    opacity: .38;
}

.booklet-sticky-pager .gear-page-btn.is-disabled:hover {
    background: transparent;
    color: #334155;
}

.booklet-uiv8-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #0f172a;
    font-weight: 700;
}

.booklet-uiv8-sort:hover {
    color: #1d4ed8;
}

.booklet-uiv8-sort.is-active {
    border-bottom: 2px solid #2563eb;
    padding-bottom: 4px;
}

.booklet-uiv8-loading-icon,
.booklet-list-loading-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 999px;
    animation: mxdcTipSpin .75s linear infinite;
}

.booklet-sort-icon-both {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 16px;
    flex: 0 0 auto;
}

.booklet-sort-icon-both::before,
.booklet-sort-icon-both::after {
    content: "";
    position: absolute;
    left: 2px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}

.booklet-sort-icon-both::before {
    top: 3px;
    border-bottom: 4px solid currentColor;
}

.booklet-sort-icon-both::after {
    bottom: 3px;
    border-top: 4px solid currentColor;
}

.booklet-clear-filter-btn {
    display: inline-flex;
    height: 28px;
    align-items: center;
    gap: 6px;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    background: #eff6ff;
    padding: 0 10px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.booklet-clear-filter-btn:hover {
    border-color: #bfdbfe;
    background: #dbeafe;
}

.booklet-view-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    padding: 2px;
}

.booklet-view-switch-btn {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #64748b;
    font-size: 16px;
    transition: background .15s ease, color .15s ease;
}

.booklet-view-switch-btn:hover {
    background: #fff;
    color: #0f172a;
}

.booklet-view-switch-btn.is-active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.booklet-card-grid {
    display: grid;
    gap: 12px;
    padding: 12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.booklet-card-empty {
    grid-column: 1 / -1;
    padding: 48px 16px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.booklet-item-card {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8faff;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.booklet-item-card:hover {
    border-color: #c084fc;
    background: #fff;
    transform: translateY(-1px);
}

.booklet-item-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, .55);
    padding: 12px;
}

.booklet-item-card-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #fff;
    color: #64748b;
}

.booklet-item-card-icon img {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
}

.booklet-item-card-icon > span {
    font-size: 24px;
}

.booklet-item-card-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2563eb;
    font-weight: 700;
}

.booklet-item-card-name:hover {
    text-decoration: underline;
}

.booklet-item-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
}

.booklet-item-card-meta > span {
    border-radius: 6px;
    background: #eef2f7;
    padding: 2px 6px;
}

.booklet-list-copy {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #64748b;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.booklet-list-copy:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.booklet-list-copy .tw-icon-\[mdi--content-copy\],
.booklet-list-copy .tw-icon-\[mdi--check\] {
    font-size: 14px;
}

.booklet-item-card-name-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
}

.booklet-item-card-name-row.has-level {
    padding-right: 46px;
}

.booklet-item-card-level {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: #eff6ff;
    padding: 0 5px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.booklet-item-card-gender,
.booklet-item-card-tag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.booklet-item-card-gender {
    height: 16px;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
}

.booklet-item-card-gender.is-male { background: #eff6ff; color: #2563eb; }
.booklet-item-card-gender.is-female { background: #fff1f2; color: #e11d48; }

.booklet-item-card-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
}

.booklet-item-card-tag {
    height: 17px;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 500;
    line-height: 17px;
}

.booklet-item-card-tag.is-id { gap: 2px; background: #f1f5f9; color: #64748b; }
.booklet-item-card-tag.is-tradeable { background: #ecfdf5; color: #047857; }
.booklet-item-card-tag.is-untradeable { background: #fff1f2; color: #be123c; }
.booklet-item-card-tag.is-job { background: #eff6ff; color: #1d4ed8; }
.booklet-item-card-tag.is-drop { background: #fff7ed; color: #c2410c; }
.booklet-item-card-tag.is-shop { background: #ecfeff; color: #0e7490; }
.booklet-item-card-tag.is-craft { background: #f5f3ff; color: #6d28d9; }
.booklet-item-card-tag.is-quest { background: #eef2ff; color: #4338ca; }
.booklet-item-card-tag.is-cash { background: #fffbeb; color: #b45309; }
.booklet-item-card-tag.is-option { background: #faf5ff; color: #7e22ce; }

.booklet-item-card-tag .booklet-list-copy {
    width: 12px;
    height: 12px;
    margin-right: -2px;
    border: 0;
    border-radius: 2px;
}

.booklet-item-card-tag .booklet-list-copy .tw-icon-\[mdi--content-copy\],
.booklet-item-card-tag .booklet-list-copy .tw-icon-\[mdi--check\] {
    font-size: 10px;
}

.tw-dark .booklet-item-card-gender.is-male,
.dark .booklet-item-card-gender.is-male { background: rgba(37, 99, 235, .18); color: #93c5fd; }
.tw-dark .booklet-item-card-level,
.dark .booklet-item-card-level { background: rgba(37, 99, 235, .16); color: #93c5fd; }
.tw-dark .booklet-item-card-gender.is-female,
.dark .booklet-item-card-gender.is-female { background: rgba(225, 29, 72, .18); color: #fda4af; }
.tw-dark .booklet-item-card-tag.is-id,
.dark .booklet-item-card-tag.is-id { background: rgba(148, 163, 184, .12); color: #94a3b8; }
.tw-dark .booklet-item-card-tag.is-tradeable,
.dark .booklet-item-card-tag.is-tradeable { background: rgba(16, 185, 129, .15); color: #6ee7b7; }
.tw-dark .booklet-item-card-tag.is-untradeable,
.dark .booklet-item-card-tag.is-untradeable { background: rgba(244, 63, 94, .16); color: #fda4af; }
.tw-dark .booklet-item-card-tag.is-job,
.dark .booklet-item-card-tag.is-job { background: rgba(59, 130, 246, .16); color: #93c5fd; }
.tw-dark .booklet-item-card-tag.is-drop,
.dark .booklet-item-card-tag.is-drop { background: rgba(249, 115, 22, .15); color: #fdba74; }
.tw-dark .booklet-item-card-tag.is-shop,
.dark .booklet-item-card-tag.is-shop { background: rgba(6, 182, 212, .15); color: #67e8f9; }
.tw-dark .booklet-item-card-tag.is-craft,
.dark .booklet-item-card-tag.is-craft { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
.tw-dark .booklet-item-card-tag.is-quest,
.dark .booklet-item-card-tag.is-quest { background: rgba(99, 102, 241, .16); color: #a5b4fc; }
.tw-dark .booklet-item-card-tag.is-cash,
.dark .booklet-item-card-tag.is-cash { background: rgba(245, 158, 11, .15); color: #fcd34d; }
.tw-dark .booklet-item-card-tag.is-option,
.dark .booklet-item-card-tag.is-option { background: rgba(168, 85, 247, .16); color: #d8b4fe; }

.booklet-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 12px;
    padding: 20px 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.booklet-detail-page {
    --detail-dark: #171717;
    --detail-line: rgba(255, 255, 255, .1);
    font-weight: 400;
}

.booklet-detail-page b,
.booklet-detail-page strong {
    font-weight: 600;
}

.booklet-detail-layout {
    align-items: start;
}

@media (min-width: 1280px) {
    .booklet-detail-layout {
        grid-template-columns: 380px minmax(0, 1fr);
    }
}

.booklet-detail-main-grid {
    display: grid;
    align-items: start;
    gap: 16px;
}

@media (min-width: 1280px) {
    .booklet-detail-main-grid {
        grid-template-columns: minmax(0, 1fr) 410px;
    }

    .booklet-detail-preview-side {
        position: sticky;
        top: 80px;
    }
}

.booklet-detail-top-grid {
    display: grid;
    gap: 12px;
}

@media (min-width: 1024px) {
    .booklet-detail-top-grid {
        grid-template-columns: minmax(0, 1.38fr) minmax(320px, .86fr);
    }
}

.booklet-detail-float-icon {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10;
    display: flex;
    width: 64px;
    height: 64px;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    border: 1px solid #64748b;
    border-radius: 7px;
    background: #151515;
    color: #e2e8f0;
    font-size: 34px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .22);
}

.booklet-detail-float-icon img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
}

.booklet-detail-card {
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: var(--detail-dark);
    color: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.booklet-detail-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 88px;
    padding: 12px 14px;
}

.booklet-detail-card-head h1 {
    overflow-wrap: anywhere;
    color: #f8fafc;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.booklet-detail-card-icon,
.booklet-detail-big-icon,
.booklet-detail-mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .36);
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
    image-rendering: pixelated;
}

.booklet-detail-card-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
}

.booklet-detail-card-icon img {
    max-width: 46px;
    max-height: 46px;
    object-fit: contain;
    image-rendering: pixelated;
}

.booklet-detail-fav {
    display: inline-flex;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    padding: 0 12px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
}

.booklet-detail-fav.is-hidden {
    display: none !important;
}

.booklet-detail-card-title {
    border-top: 1px solid var(--detail-line);
    border-bottom: 1px solid var(--detail-line);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .055) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .055) 50%, rgba(255, 255, 255, .055) 75%, transparent 75%, transparent);
    background-size: 28px 28px;
    padding: 18px 16px;
    text-align: center;
}

.booklet-detail-card-title h1,
.booklet-detail-card-title h2 {
    overflow-wrap: anywhere;
    color: #f8fafc;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.booklet-detail-card-title p {
    margin-top: 6px;
    color: #94a3b8;
    font-size: 13px;
}

.booklet-detail-card-code {
    margin-bottom: 8px;
    color: #dbeafe;
    font-size: 12px;
}

.booklet-detail-card-body {
    padding: 12px;
}

.booklet-detail-equip-row {
    position: relative;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    min-height: 96px;
}

.booklet-detail-big-icon {
    width: 78px;
    height: 78px;
    background: rgba(255, 255, 255, .78);
}

.booklet-detail-big-icon img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

.booklet-detail-req {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 500;
    padding-top: 26px;
}

.booklet-detail-major {
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    min-width: 74px;
    padding-top: 16px;
}

.booklet-detail-major span {
    color: #94a3b8;
    font-size: 12px;
}

.booklet-detail-major b {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}

.booklet-detail-jobline {
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 4px;
    color: #f8fafc;
    text-align: center;
    font-size: 12px;
    line-height: 22px;
}

.booklet-detail-lines {
    margin-top: 12px;
    display: grid;
    gap: 5px;
    border-top: 1px dashed rgba(255, 255, 255, .22);
    padding-top: 12px;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.55;
}

.booklet-detail-damage {
    border: 1px solid var(--detail-line);
    border-radius: 7px;
    background: #222;
    padding: 12px;
}

.booklet-detail-damage span {
    display: block;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 500;
}

.booklet-detail-damage strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}

.booklet-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .055);
    padding: 7px 9px;
    color: #e2e8f0;
    font-size: 13px;
}

.booklet-detail-row span {
    color: #cbd5e1;
}

.booklet-detail-row b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-weight: 500;
}

.booklet-detail-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.booklet-detail-info-table th,
.booklet-detail-info-table td {
    border-bottom: 1px solid #edf0f4;
    padding: 13px 14px;
    vertical-align: middle;
}

.booklet-detail-info-table tr:last-child th,
.booklet-detail-info-table tr:last-child td {
    border-bottom: 0;
}

.booklet-detail-info-table th {
    width: 86px;
    background: rgba(248, 250, 252, .8);
    color: #475569;
    text-align: center;
    font-weight: 500;
}

.booklet-detail-info-table td {
    color: #0f172a;
    font-weight: 500;
}

.booklet-copy-inline {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    border-radius: 999px;
    background: #dbeafe;
    color: #2563eb;
    vertical-align: middle;
}

[data-copy-id].is-copied,
.booklet-copy-inline.is-copied {
    background: #dcfce7 !important;
    color: #047857 !important;
}

.booklet-detail-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    padding: 4px 8px;
    color: #475569;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.booklet-detail-chip.is-blue {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #2563eb;
}

.booklet-detail-chip.is-emerald {
    background: #d1fae5;
    border-color: #a7f3d0;
    color: #047857;
}

.booklet-detail-chip.is-purple {
    background: #f3e8ff;
    border-color: #e9d5ff;
    color: #7e22ce;
}

.booklet-detail-chip.is-amber {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.booklet-detail-card .booklet-detail-chip.is-blue {
    background: rgba(59, 130, 246, .18);
    color: #bfdbfe;
}

.booklet-detail-card .booklet-detail-chip.is-emerald {
    background: rgba(16, 185, 129, .18);
    color: #a7f3d0;
}

.booklet-detail-card-head h1 + div .booklet-detail-chip:not(.is-blue) {
    min-height: 26px;
    border-color: rgba(148, 163, 184, .35);
    border-radius: 6px;
    background: #1f2329;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    padding: 6px 9px;
    color: #eef2ff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.booklet-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4;
    background: #eff6ff;
    padding: 11px 14px;
    color: #475569;
    font-size: 13px;
}

.booklet-detail-section-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.booklet-detail-section-head b {
    color: #0f172a;
    font-size: 16px;
    font-weight: 600;
}

.booklet-related-zww-section {
    margin-top: 0;
}

.booklet-related-zww-head em {
    border-radius: 5px;
    background: #dbeafe;
    padding: 3px 7px;
    color: #2563eb;
    font-size: 12px;
    font-style: normal;
}

.booklet-related-zww-summary,
.booklet-related-zww-summary a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.booklet-related-zww-summary a {
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #fff;
    gap: 2px;
    padding: 3px 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

.booklet-related-zww-summary a [class*="tw-icon-"] {
    font-size: 14px;
}

.booklet-related-zww-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
}

.booklet-related-zww-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dbe5f1;
    border-radius: 7px;
    background: #fff;
}

.booklet-related-zww-media {
    position: relative;
    display: flex;
    height: 180px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, #f5f9ff, #eef5ff);
}

.booklet-related-zww-media > img {
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    flex: 0 0 auto;
}

.booklet-related-zww-case-id,
.booklet-related-zww-badges {
    position: absolute;
    z-index: 1;
    top: 9px;
}

.booklet-related-zww-case-id {
    left: 9px;
    border: 1px solid #d7e3f1;
    border-radius: 5px;
    background: rgba(255,255,255,.92);
    padding: 3px 7px;
    color: #64748b;
    font-size: 11px;
}

.booklet-related-zww-badges {
    right: 9px;
    display: flex;
    gap: 5px;
}

.booklet-related-zww-badges > span {
    display: inline-flex;
    height: 23px;
    align-items: center;
    gap: 3px;
    border: 1px solid #bfdbfe;
    border-radius: 5px;
    background: rgba(255,255,255,.92);
    padding: 0 6px;
    color: #2563eb;
    font-size: 11px;
}

.booklet-related-zww-body {
    padding: 11px;
}

.booklet-related-zww-title {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-related-zww-designer {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: #64748b;
    font-size: 12px;
}

.booklet-related-zww-designer img {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.booklet-related-zww-designer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-related-zww-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
    border-top: 1px solid #edf0f4;
    padding-top: 9px;
    color: #64748b;
    font-size: 11px;
}

.booklet-related-zww-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.booklet-related-zww-stats span:nth-child(2) i { color: #f97316; }
.booklet-related-zww-stats span:nth-child(3) i { color: #f43f5e; }

.tw-dark .booklet-related-zww-head em,
.dark .booklet-related-zww-head em {
    background: rgba(37, 99, 235, .18);
    color: #93c5fd;
}

.tw-dark .booklet-related-zww-summary a,
.dark .booklet-related-zww-summary a {
    border-color: #334155;
    background: #20242b;
    color: #7dd3fc;
}

.tw-dark .booklet-related-zww-card,
.dark .booklet-related-zww-card {
    border-color: #30343b;
    background: #1b1d21;
}

.tw-dark .booklet-related-zww-media,
.dark .booklet-related-zww-media {
    background: linear-gradient(180deg, #20242b, #181b20);
}

.tw-dark .booklet-related-zww-case-id,
.tw-dark .booklet-related-zww-badges > span,
.dark .booklet-related-zww-case-id,
.dark .booklet-related-zww-badges > span {
    border-color: #3a4656;
    background: rgba(28, 32, 38, .92);
}

.tw-dark .booklet-related-zww-title,
.dark .booklet-related-zww-title { color: #f1f5f9; }
.tw-dark .booklet-related-zww-designer,
.tw-dark .booklet-related-zww-stats,
.dark .booklet-related-zww-designer,
.dark .booklet-related-zww-stats { color: #a8b1bf; }
.tw-dark .booklet-related-zww-stats,
.dark .booklet-related-zww-stats { border-color: #30343b; }

@media (max-width: 1050px) {
    .booklet-related-zww-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .booklet-related-zww-head { align-items: flex-start; }
    .booklet-related-zww-head > div:first-child { flex-wrap: wrap; }
    .booklet-related-zww-grid { grid-template-columns: 1fr; }
}

.booklet-auction-card {
    order: -2;
    border-color: #f6e7b5;
    border-radius: 6px;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 58%, #f8fafc 100%);
}

.booklet-royal-beauty-card {
    border-color: #f2cf75;
    background: linear-gradient(135deg, #fffdf5 0%, #fffaf0 100%);
}

.booklet-royal-beauty-head {
    border-bottom-color: #f2d997;
    background: #fff6d9;
}

.booklet-royal-beauty-head > div > span:first-child {
    color: #d97706;
}

.booklet-royal-beauty-symbol {
    font-size: 20px;
    line-height: 1;
}

.booklet-royal-beauty-summary {
    display: grid;
    grid-template-columns: minmax(250px, 1.3fr) minmax(280px, 1fr);
    gap: 14px;
    padding: 16px 18px;
}

.booklet-royal-beauty-card.is-item-detail .booklet-royal-beauty-summary,
.booklet-royal-beauty-card.is-topic-page .booklet-royal-beauty-summary {
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.booklet-royal-beauty-card.is-item-detail .booklet-royal-beauty-package,
.booklet-royal-beauty-card.is-topic-page .booklet-royal-beauty-package {
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    gap: 10px;
}

.booklet-royal-beauty-card.is-item-detail .booklet-royal-beauty-crown,
.booklet-royal-beauty-card.is-topic-page .booklet-royal-beauty-crown {
    width: 46px;
    height: 46px;
}

.booklet-royal-beauty-card.is-item-detail .booklet-royal-beauty-meta,
.booklet-royal-beauty-card.is-topic-page .booklet-royal-beauty-meta {
    grid-template-columns: minmax(88px, .8fr) minmax(88px, .7fr) minmax(190px, 1.65fr);
}

.booklet-royal-beauty-card.is-item-detail .booklet-royal-beauty-meta > span:last-child b,
.booklet-royal-beauty-card.is-topic-page .booklet-royal-beauty-meta > span:last-child b {
    font-size: 14px;
    white-space: nowrap;
}

.booklet-royal-beauty-package {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    color: #854d0e;
}

.booklet-royal-beauty-package > span:nth-child(2) {
    display: grid;
    gap: 2px;
}

.booklet-royal-beauty-package small,
.booklet-royal-beauty-package em,
.booklet-royal-beauty-meta small {
    color: #8a7760;
    font-size: 12px;
    font-style: normal;
}

.booklet-royal-beauty-package b {
    color: #9a5200;
    font-size: 18px;
}

.booklet-royal-beauty-crown {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #f2c45d;
    border-radius: 50%;
    background: #fff0b8;
    color: #d97706;
    font-size: 25px;
}

.booklet-royal-beauty-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
}

.booklet-royal-beauty-meta > span {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-left: 1px solid #f0dfb3;
}

.booklet-royal-beauty-meta b {
    color: #6b4c24;
}

.booklet-royal-beauty-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 0 18px 16px;
}

.booklet-royal-color-bar {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    margin: 0 18px 12px;
    padding: 7px 9px;
    border: 1px solid #f0dfb3;
    border-radius: 7px;
    background: rgba(255, 255, 255, .58);
}

.booklet-royal-color-title {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: #8a5a18;
    font-size: 12px;
    font-weight: 600;
}

.booklet-royal-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.booklet-royal-color-option {
    display: inline-flex;
    height: 28px;
    align-items: center;
    gap: 4px;
    border: 1px solid #e6d8b8;
    border-radius: 6px;
    background: #fff;
    padding: 0 8px;
    color: #6b5a43;
    font-size: 11px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.booklet-royal-color-option i {
    width: 11px;
    height: 11px;
    border: 1px solid rgba(15, 23, 42, .16);
    border-radius: 50%;
    background: var(--royal-color, #8b5e3c);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.booklet-royal-color-option:hover,
.booklet-royal-color-option.is-active {
    border-color: #f59e0b;
    background: #fff8e7;
}

.booklet-royal-color-option.is-active {
    box-shadow: inset 0 0 0 1px #f59e0b;
    color: #9a5200;
}

.booklet-royal-color-option.is-color-0 { --royal-color: #2f3542; }
.booklet-royal-color-option.is-color-1 { --royal-color: #ef5b5b; }
.booklet-royal-color-option.is-color-2 { --royal-color: #f59e42; }
.booklet-royal-color-option.is-color-3 { --royal-color: #f2cf3a; }
.booklet-royal-color-option.is-color-4 { --royal-color: #7fbd4b; }
.booklet-royal-color-option.is-color-5 { --royal-color: #4d8fe8; }
.booklet-royal-color-option.is-color-6 { --royal-color: #a868d8; }
.booklet-royal-color-option.is-color-7 { --royal-color: #8b5e3c; }

.booklet-royal-color-status {
    margin-left: auto;
    color: #9a7b50;
    font-size: 11px;
    white-space: nowrap;
}

.booklet-royal-beauty-items.is-loading {
    opacity: .42;
    pointer-events: none;
}

@media (max-width: 720px) {
    .booklet-royal-color-bar { align-items: flex-start; flex-direction: column; }
    .booklet-royal-color-status { margin-left: 0; }
    .booklet-royal-color-option span { display: none; }
    .booklet-royal-color-option { width: 28px; justify-content: center; padding: 0; }
}

.booklet-royal-beauty-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 9px 6px;
    border: 1px solid #ead9b1;
    border-radius: 7px;
    background: rgba(255, 255, 255, .72);
    color: #5f513f;
    text-align: center;
}

.booklet-royal-beauty-item:hover,
.booklet-royal-beauty-item.is-current {
    border-color: #f59e0b;
    box-shadow: inset 0 0 0 1px #f59e0b;
}

.booklet-royal-beauty-item.is-male {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.booklet-royal-beauty-item.is-female {
    border-color: #fecdd3;
    background: #fff1f2;
}

.booklet-royal-beauty-item.is-male:hover,
.booklet-royal-beauty-item.is-female:hover,
.booklet-royal-beauty-item.is-current {
    border-color: #f59e0b;
}

.booklet-royal-beauty-item > span {
    display: grid;
    width: 72px;
    height: 82px;
    place-items: center;
    border-radius: 6px;
}

.booklet-royal-beauty-item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.booklet-royal-beauty-placeholder {
    color: #c29a51;
    font-size: 24px;
    font-weight: 700;
}

.booklet-royal-beauty-item b {
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-royal-beauty-probability {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 3px;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    background: #f8fafc;
    padding: 2px 6px;
    color: #64748b;
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
}

.booklet-royal-beauty-probability strong {
    color: #475569;
    font-weight: 600;
}

.booklet-royal-beauty-probability.is-basic { border-color: #cbd5e1; background: #f8fafc; }
.booklet-royal-beauty-probability.is-normal { border-color: #bfdbfe; background: #eff6ff; color: #2563eb; }
.booklet-royal-beauty-probability.is-normal strong { color: #1d4ed8; }
.booklet-royal-beauty-probability.is-rare { border-color: #e9d5ff; background: #faf5ff; color: #9333ea; }
.booklet-royal-beauty-probability.is-rare strong { color: #7e22ce; }

.booklet-royal-source-probability {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dbe3ec;
    border-radius: 5px;
    background: rgba(255,255,255,.78);
    padding: 3px 7px;
    color: #475569;
    font-size: 11px;
    font-weight: 500;
}

.booklet-royal-source-probability.is-normal { border-color: #bfdbfe; color: #2563eb; }
.booklet-royal-source-probability.is-rare { border-color: #e9d5ff; color: #9333ea; }

.booklet-royal-beauty-item em {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 1px 5px;
    border-radius: 10px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-style: normal;
}

.booklet-royal-beauty-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 9px 18px;
    border-top: 1px solid #f0dfb3;
    color: #8a7760;
    font-size: 12px;
}

.booklet-auction-head {
    border-bottom-color: #fde68a;
    background: rgba(254, 243, 199, .72);
}

.booklet-auction-head > div > span:first-child {
    color: #d97706;
    font-size: 18px;
}

.booklet-auction-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booklet-auction-head-actions a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 5px;
    border: 1px solid #f59e0b;
    border-radius: 7px;
    background: #fff;
    padding: 0 10px;
    color: #b45309;
    font-size: 12px;
    font-weight: 600;
}

.booklet-auction-head-actions a:hover {
    background: #fffbeb;
}

.booklet-auction-head-actions[hidden] {
    display: none;
}

.booklet-auction-access-state {
    display: flex;
    min-height: 230px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px 20px;
    text-align: center;
}

.booklet-auction-access-state > span:first-child {
    color: #d97706;
    font-size: 38px;
}

.booklet-auction-access-state strong {
    margin-top: 12px;
    color: #334155;
    font-size: 18px;
}

.booklet-auction-access-state p {
    max-width: 480px;
    margin: 7px 0 0;
    color: #78716c;
    font-size: 13px;
    line-height: 1.7;
}

.booklet-auction-access-state button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    border: 1px solid #d97706;
    border-radius: 7px;
    background: #d97706;
    padding: 0 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.booklet-auction-access-state button:hover {
    background: #b45309;
}

.booklet-auction-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
}

.booklet-auction-list .booklet-auction-body + .booklet-auction-body {
    border-top: 1px solid rgba(253, 230, 138, .7);
}

.booklet-auction-body.is-lowest {
    background: rgba(254, 243, 199, .28);
}

.booklet-auction-server {
    display: flex;
    width: 150px;
    flex: 0 0 150px;
    align-items: center;
    gap: 12px;
}

.booklet-auction-server small {
    display: block;
    color: #78716c;
    font-size: 12px;
}

.booklet-auction-server b {
    display: block;
    margin-top: 3px;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.booklet-auction-price {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 13px;
}

.booklet-auction-lowest-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid #fbbf24;
    border-radius: 999px;
    background: #fffbeb;
    padding: 3px 8px;
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
}

.booklet-auction-coin {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid #f59e0b;
    border-radius: 50%;
    background: linear-gradient(145deg, #fef3c7, #fbbf24);
    box-shadow: 0 7px 18px rgba(217, 119, 6, .16), inset 0 1px 0 rgba(255, 255, 255, .85);
    color: #92400e;
    font-size: 23px;
}

.booklet-auction-coin-icon {
    width: 27px;
    height: 27px;
    fill: rgba(255, 251, 235, .44);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55));
}

.booklet-auction-price-copy small,
.booklet-auction-meta small {
    display: block;
    color: #78716c;
    font-size: 12px;
}

.booklet-auction-price-copy strong {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 2px;
    color: #b45309;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.booklet-auction-price-copy em {
    color: #92400e;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
}

.booklet-auction-rmb {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 5px;
}

.booklet-auction-rmb b {
    color: #ea580c;
    font-size: 13px;
    font-weight: 700;
}

.booklet-auction-rmb small {
    color: #a16207;
    font-size: 10px;
}

.booklet-auction-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.booklet-auction-meta > span {
    min-width: 88px;
}

.booklet-auction-meta b {
    display: block;
    margin-top: 3px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.booklet-auction-meta .booklet-auction-freshness {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.booklet-auction-freshness > span {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
}

.booklet-auction-freshness small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.booklet-auction-freshness b {
    margin: 0;
    white-space: nowrap;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.booklet-auction-freshness .is-synced small {
    color: #047857;
    font-weight: 600;
}

.booklet-auction-freshness .is-synced small i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

.booklet-auction-freshness .is-changed {
    border-top: 1px dashed #e2e8f0;
    padding-top: 5px;
}

.booklet-auction-freshness .is-changed b {
    color: #64748b;
    font-weight: 500;
}

.booklet-auction-meta .is-live {
    display: inline-flex;
    min-width: auto;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    background: #ecfdf5;
    padding: 7px 11px;
}

.booklet-auction-meta .is-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.booklet-auction-meta .is-live b {
    margin: 0;
    color: #047857;
    font-size: 12px;
}

.booklet-auction-status-actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}

.booklet-auction-status-actions > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 3px;
    color: #b45309;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.booklet-auction-status-actions > a:hover {
    color: #ea580c;
}

.booklet-auction-status-actions > a > span {
    font-size: 13px;
}

.booklet-auction-note {
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid rgba(253, 230, 138, .7);
    padding: 9px 20px;
    color: #78716c;
    font-size: 12px;
}

.tw-dark .booklet-royal-beauty-card,
.dark .booklet-royal-beauty-card {
    border-color: #72541f;
    background: linear-gradient(135deg, #231f16 0%, #1d1a14 100%);
}

.tw-dark .booklet-royal-beauty-head,
.dark .booklet-royal-beauty-head {
    border-bottom-color: #60491f;
    background: #2b2416;
}

.tw-dark .booklet-royal-beauty-item,
.dark .booklet-royal-beauty-item {
    border-color: #56482d;
    background: rgba(255, 255, 255, .03);
    color: #ded3c3;
}

.tw-dark .booklet-royal-beauty-item.is-male,
.dark .booklet-royal-beauty-item.is-male {
    border-color: #31547a;
    background: #172b43;
}

.tw-dark .booklet-royal-beauty-item.is-female,
.dark .booklet-royal-beauty-item.is-female {
    border-color: #71394a;
    background: #3a202a;
}

.tw-dark .booklet-royal-beauty-probability,
.dark .booklet-royal-beauty-probability,
.tw-dark .booklet-royal-source-probability,
.dark .booklet-royal-source-probability {
    border-color: #475569;
    background: rgba(15, 23, 42, .72);
    color: #cbd5e1;
}

.tw-dark .booklet-royal-beauty-probability strong,
.dark .booklet-royal-beauty-probability strong { color: #e2e8f0; }
.tw-dark .booklet-royal-beauty-probability.is-normal,
.dark .booklet-royal-beauty-probability.is-normal,
.tw-dark .booklet-royal-source-probability.is-normal,
.dark .booklet-royal-source-probability.is-normal { border-color: #1d4ed8; color: #93c5fd; }
.tw-dark .booklet-royal-beauty-probability.is-rare,
.dark .booklet-royal-beauty-probability.is-rare,
.tw-dark .booklet-royal-source-probability.is-rare,
.dark .booklet-royal-source-probability.is-rare { border-color: #7e22ce; color: #d8b4fe; }

.tw-dark .booklet-auction-card,
.dark .booklet-auction-card {
    border-color: rgba(245, 158, 11, .3);
    background: linear-gradient(135deg, #211b11 0%, #171717 58%, #171717 100%);
}

.tw-dark .booklet-auction-head,
.dark .booklet-auction-head {
    border-bottom-color: rgba(245, 158, 11, .25);
    background: rgba(120, 53, 15, .2);
}

.tw-dark .booklet-auction-head-actions a,
.dark .booklet-auction-head-actions a {
    border-color: rgba(251, 191, 36, .45);
    background: rgba(120, 53, 15, .25);
    color: #fcd34d;
}

.tw-dark .booklet-auction-access-state strong,
.dark .booklet-auction-access-state strong {
    color: #e7e5e4;
}

.tw-dark .booklet-auction-access-state p,
.dark .booklet-auction-access-state p {
    color: #a8a29e;
}

.tw-dark .booklet-auction-rmb b,
.dark .booklet-auction-rmb b {
    color: #fb923c;
}

.tw-dark .booklet-auction-rmb small,
.dark .booklet-auction-rmb small {
    color: #d6b26e;
}

.tw-dark .booklet-auction-price-copy small,
.dark .booklet-auction-price-copy small,
.tw-dark .booklet-auction-server small,
.dark .booklet-auction-server small,
.tw-dark .booklet-auction-meta small,
.dark .booklet-auction-meta small,
.tw-dark .booklet-auction-note,
.dark .booklet-auction-note {
    color: #a8a29e;
}

.tw-dark .booklet-auction-price-copy strong,
.dark .booklet-auction-price-copy strong {
    color: #fbbf24;
}

.tw-dark .booklet-auction-price-copy em,
.dark .booklet-auction-price-copy em {
    color: #fcd34d;
}

.tw-dark .booklet-auction-meta b,
.dark .booklet-auction-meta b,
.tw-dark .booklet-auction-server b,
.dark .booklet-auction-server b {
    color: #e7e5e4;
}

.tw-dark .booklet-auction-list .booklet-auction-body + .booklet-auction-body,
.dark .booklet-auction-list .booklet-auction-body + .booklet-auction-body {
    border-top-color: rgba(245, 158, 11, .2);
}

.tw-dark .booklet-auction-body.is-lowest,
.dark .booklet-auction-body.is-lowest {
    background: rgba(120, 53, 15, .12);
}

.tw-dark .booklet-auction-lowest-badge,
.dark .booklet-auction-lowest-badge {
    border-color: rgba(251, 191, 36, .45);
    background: rgba(120, 53, 15, .3);
    color: #fcd34d;
}

.tw-dark .booklet-auction-meta .is-live,
.dark .booklet-auction-meta .is-live {
    background: rgba(16, 185, 129, .12);
}

.tw-dark .booklet-auction-meta .booklet-auction-freshness,
.dark .booklet-auction-meta .booklet-auction-freshness {
    border-color: transparent;
    background: transparent;
}

.tw-dark .booklet-auction-freshness .is-synced small,
.dark .booklet-auction-freshness .is-synced small {
    color: #6ee7b7;
}

.tw-dark .booklet-auction-freshness .is-changed,
.dark .booklet-auction-freshness .is-changed {
    border-top-color: #44403c;
}

.tw-dark .booklet-auction-freshness .is-changed b,
.dark .booklet-auction-freshness .is-changed b {
    color: #a8a29e;
}

.tw-dark .booklet-auction-meta .is-live b,
.dark .booklet-auction-meta .is-live b {
    color: #6ee7b7;
}

.tw-dark .booklet-auction-status-actions > a,
.dark .booklet-auction-status-actions > a {
    color: #fbbf24;
}

.tw-dark .booklet-auction-note,
.dark .booklet-auction-note {
    border-top-color: rgba(245, 158, 11, .2);
}

@media (max-width: 760px) {
    .booklet-auction-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .booklet-auction-head-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .booklet-auction-body {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px;
    }

    .booklet-auction-server {
        width: 100%;
        flex-basis: 100%;
    }

    .booklet-auction-price {
        flex: 1 1 180px;
    }

    .booklet-auction-rmb {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .booklet-auction-price-copy strong {
        font-size: 26px;
    }

    .booklet-auction-meta {
        width: 100%;
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    .booklet-auction-meta .booklet-auction-freshness {
        min-width: 0;
        flex: 0 1 auto;
    }

    .booklet-auction-note {
        align-items: flex-start;
        padding: 9px 16px;
    }
}

/* Equipment TIP follows the in-game UITooltipSpriteEquip content order. */
.gcw-client-item-tip.is-equip .gcw-client-item-core {
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding-bottom: 8px;
}

.gcw-client-item-tip.is-equip .gcw-client-item-icon {
    margin-top: 3px;
}

.gcw-client-item-tip.is-equip .gcw-client-item-reqs {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1px 0;
}

.gcw-client-item-tip.is-equip .gcw-client-item-reqs span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    min-height: 17px;
    border-radius: 0;
    background: transparent;
    padding: 0 2px;
    line-height: 17px;
}

.gcw-client-item-tip.is-equip .gcw-client-item-reqs small,
.gcw-client-item-tip.is-equip .gcw-client-item-reqs b {
    display: inline;
    margin: 0;
    font-size: 11px;
    line-height: inherit;
}

.gcw-client-item-tip.is-equip .gcw-client-item-reqs small {
    color: #aeb8c6;
}

.gcw-client-item-tip.is-equip .gcw-client-item-reqs b,
.gcw-client-item-tip.is-equip .gcw-client-item-reqs .is-zero b {
    color: #ff6b6b;
    font-weight: 500;
}

.gcw-client-item-jobs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    margin: 0 10px;
    border-top: 1px dashed rgba(148, 163, 184, .28);
    border-bottom: 1px dashed rgba(148, 163, 184, .28);
    padding: 7px 4px;
    color: #f8fafc;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
}

.gcw-client-item-jobs b {
    font-weight: 500;
}

.gcw-client-item-jobs b.is-unavailable {
    color: #dc2626;
}

.gcw-client-item-tip.is-equip .gcw-client-item-facts {
    margin: 8px 14px 0;
    border: 0;
    padding: 0;
}

.gcw-client-item-tip.is-equip .gcw-client-item-facts > div,
.gcw-client-item-tip.is-equip .gcw-client-item-props > div {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px;
    padding: 2px 0 2px 10px;
    line-height: 18px;
}

.gcw-client-item-tip.is-equip .gcw-client-item-facts > div::before,
.gcw-client-item-tip.is-equip .gcw-client-item-props > div::before {
    position: absolute;
    top: 2px;
    left: 0;
    content: "·";
    color: currentColor;
    font-weight: 700;
}

.gcw-client-item-tip.is-equip .gcw-client-item-facts small,
.gcw-client-item-tip.is-equip .gcw-client-item-props span {
    color: inherit;
    font-size: inherit;
}

.gcw-client-item-tip.is-equip .gcw-client-item-facts small::after,
.gcw-client-item-tip.is-equip .gcw-client-item-props span::after {
    content: "：";
}

.gcw-client-item-tip.is-equip .gcw-client-item-facts b {
    color: inherit;
    font-size: inherit;
}

.gcw-client-item-tip.is-equip .gcw-client-item-props {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 14px 5px;
}

.gcw-client-item-tip.is-equip .gcw-client-item-props b {
    color: #66d9ff;
}

.gcw-client-item-tip.is-equip .gcw-client-item-upgrade {
    position: relative;
    margin: 0 14px;
    border: 0;
    padding: 2px 0 2px 10px;
    line-height: 18px;
}

.gcw-client-item-tip.is-equip .gcw-client-item-upgrade::before {
    position: absolute;
    top: 2px;
    left: 0;
    content: "·";
    font-weight: 700;
}

.gcw-client-item-tip.is-equip .gcw-client-item-desc.is-bottom {
    margin: 4px 14px 10px;
    border: 0;
    padding: 0;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-core {
    padding-top: 12px;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-reqs span {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    gap: 5px;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-reqs small {
    color: #64748b;
    font-size: 12px;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-reqs b {
    color: #dc2626;
    font-size: 13px;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-reqs .is-zero b {
    color: #94a3b8;
}

.gcw-client-item-tip--page .gcw-client-item-jobs {
    border-color: #dbe3ed;
    color: #0f172a;
    font-size: 13px;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-facts,
.gcw-client-item-tip--page.is-equip .gcw-client-item-props,
.gcw-client-item-tip--page.is-equip .gcw-client-item-upgrade {
    color: #334155;
    font-size: 14px;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-details {
    display: grid;
    gap: 5px;
    padding: 10px 14px 8px;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-details > .gcw-client-item-facts,
.gcw-client-item-tip--page.is-equip .gcw-client-item-details > .gcw-client-item-props {
    display: contents;
    margin: 0;
    padding: 0;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-desc.is-bottom {
    margin: 6px 14px 11px;
    border-top: 1px dashed #dbe3ed;
    padding-top: 8px;
    font-size: 14px;
    line-height: 20px;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-details .gcw-client-item-facts > div,
.gcw-client-item-tip--page.is-equip .gcw-client-item-details .gcw-client-item-props > div,
.gcw-client-item-tip--page.is-equip .gcw-client-item-details > .gcw-client-item-upgrade {
    min-height: 0;
    margin: 0;
    padding: 0 0 0 10px;
    line-height: 20px;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-details .gcw-client-item-facts > div::before,
.gcw-client-item-tip--page.is-equip .gcw-client-item-details .gcw-client-item-props > div::before,
.gcw-client-item-tip--page.is-equip .gcw-client-item-details > .gcw-client-item-upgrade::before {
    top: 0;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-facts b {
    color: #0f172a;
}

.gcw-client-item-tip--page.is-equip .gcw-client-item-props b {
    color: #0284c7;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-jobs,
.dark .gcw-client-item-tip--page .gcw-client-item-jobs {
    border-color: rgba(148, 163, 184, .28);
    color: #f8fafc;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-jobs b.is-unavailable,
.dark .gcw-client-item-tip--page .gcw-client-item-jobs b.is-unavailable {
    color: #ff6b6b;
}

.tw-dark .gcw-client-item-tip--page.is-equip .gcw-client-item-reqs small,
.dark .gcw-client-item-tip--page.is-equip .gcw-client-item-reqs small {
    color: #aeb8c6;
}

.tw-dark .gcw-client-item-tip--page.is-equip .gcw-client-item-reqs b,
.dark .gcw-client-item-tip--page.is-equip .gcw-client-item-reqs b {
    color: #ff6b6b;
}

.tw-dark .gcw-client-item-tip--page.is-equip .gcw-client-item-reqs .is-zero b,
.dark .gcw-client-item-tip--page.is-equip .gcw-client-item-reqs .is-zero b {
    color: #737f8f;
}

.tw-dark .gcw-client-item-tip--page.is-equip .gcw-client-item-facts,
.dark .gcw-client-item-tip--page.is-equip .gcw-client-item-facts,
.tw-dark .gcw-client-item-tip--page.is-equip .gcw-client-item-props,
.dark .gcw-client-item-tip--page.is-equip .gcw-client-item-props,
.tw-dark .gcw-client-item-tip--page.is-equip .gcw-client-item-upgrade,
.dark .gcw-client-item-tip--page.is-equip .gcw-client-item-upgrade {
    color: #e5edf7;
}

.tw-dark .gcw-client-item-tip--page.is-equip .gcw-client-item-desc.is-bottom,
.dark .gcw-client-item-tip--page.is-equip .gcw-client-item-desc.is-bottom {
    border-top-color: rgba(148, 163, 184, .28);
}

.booklet-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #edf0f4;
    background: rgba(248, 250, 252, .72);
    padding: 8px;
}

.booklet-detail-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    padding: 8px 12px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.booklet-detail-tabs button:hover {
    background: #f3e8ff;
    color: #7e22ce;
}

.booklet-detail-tabs button.is-active {
    background: #a855f7;
    color: #fff;
}

.booklet-detail-tabs span {
    border-radius: 5px;
    background: rgba(0, 0, 0, .1);
    padding: 1px 6px;
    font-size: 12px;
}

/* Item scroll simulator */
.booklet-scroll-simulator {
    overflow: hidden;
    border: 1px solid #edf0f4;
    border-radius: 6px;
    background: #fff;
}

.booklet-scroll-simulator .booklet-detail-section-head small {
    color: #7c8da5;
    font-size: 12px;
    font-weight: 400;
}

.booklet-scroll-reset {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    background: #e3efff;
    padding: 0 11px;
    color: #2563eb;
    font-size: 13px;
    transition: background .15s ease, color .15s ease;
}

.booklet-scroll-reset:hover {
    background: #d3e5ff;
    color: #1d4ed8;
}

.booklet-scroll-layout {
    display: grid;
    grid-template-columns: minmax(280px, .86fr) minmax(380px, 1.14fr);
    gap: 22px;
    padding: 18px;
}

.booklet-scroll-equipment {
    min-width: 0;
    border-radius: 10px;
    background: #f1f6ff;
    padding: 16px;
}

.booklet-scroll-equipment-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.booklet-scroll-equipment-icon,
.booklet-scroll-icon,
.booklet-scroll-equipment-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
    border: 1px solid #d7e2f0;
    background: #fff;
    color: #64748b;
}

.booklet-scroll-equipment-icon {
    width: 54px;
    height: 54px;
    border-radius: 8px;
}

.booklet-scroll-equipment-icon img,
.booklet-scroll-icon img,
.booklet-scroll-equipment-choice-icon img {
    max-width: 90%;
    max-height: 90%;
    image-rendering: pixelated;
}

.booklet-scroll-equipment-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.booklet-scroll-equipment-meta b {
    overflow: hidden;
    color: #1353bf;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-scroll-equipment-meta small {
    color: #607997;
    font-size: 12px;
}

.booklet-scroll-status {
    grid-column: 1 / -1;
    justify-self: start;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
}

.booklet-scroll-status.is-ready {
    background: #e7edf6;
    color: #60708a;
}

.booklet-scroll-status.is-active,
.booklet-scroll-status.is-finished {
    background: #dbeafe;
    color: #1d4ed8;
}

.booklet-scroll-status.is-destroyed {
    background: #fee2e2;
    color: #dc2626;
}

.booklet-scroll-pick-button {
    display: inline-flex;
    height: 32px;
    align-items: center;
    gap: 4px;
    border: 1px solid #c7dcfb;
    border-radius: 6px;
    background: #e8f2ff;
    padding: 0 9px;
    color: #2563eb;
    font-size: 12px;
}

.booklet-scroll-slots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    border-top: 1px dashed #cfdbeb;
    padding-top: 16px;
    color: #64748b;
    font-size: 12px;
}

.booklet-scroll-slot-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.booklet-scroll-slot-list i {
    width: 13px;
    height: 13px;
    border: 1px solid #d9e1eb;
    border-radius: 4px;
    background: #fff;
}

.booklet-scroll-slot-list i.is-used {
    border-color: #93c5fd;
    background: #93c5fd;
}

.booklet-scroll-slot-list i.is-destroyed {
    border-color: #fca5a5;
    background: #fee2e2;
}

.booklet-scroll-slots > b {
    color: #17365f;
    font-size: 13px;
    font-weight: 500;
}

.booklet-scroll-result {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 13px;
}

.booklet-scroll-result > div {
    display: flex;
    min-height: 62px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .78);
    padding: 10px;
}

.booklet-scroll-result span {
    color: #71839b;
    font-size: 12px;
}

.booklet-scroll-result b {
    color: #102b51;
    font-size: 18px;
    font-weight: 500;
}

.booklet-scroll-stat-list {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.booklet-scroll-stat-list > div:not(.booklet-scroll-empty-stat) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    background: rgba(255, 255, 255, .78);
    padding: 9px 10px;
    color: #64748b;
    font-size: 12px;
}

.booklet-scroll-stat-list b {
    color: #334155;
    font-size: 13px;
}

.booklet-scroll-stat-list em {
    margin-left: 3px;
    color: #059669;
    font-style: normal;
}

.booklet-scroll-empty-stat {
    padding: 4px 0;
    color: #7b8ea9;
    font-size: 12px;
}

.booklet-scroll-history {
    margin-top: 13px;
    border-top: 1px dashed #cfdbeb;
    padding-top: 13px;
}

.booklet-scroll-history-title {
    color: #526987;
    font-size: 12px;
    font-weight: 500;
}

.booklet-scroll-history > div {
    display: grid;
    gap: 5px;
    max-height: 136px;
    margin-top: 7px;
    overflow: auto;
}

.booklet-scroll-history p {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #7b8ea9;
    font-size: 12px;
}

.booklet-scroll-history p span {
    min-width: 34px;
    border-radius: 4px;
    padding: 2px 4px;
    text-align: center;
}

.booklet-scroll-history p b {
    overflow: hidden;
    color: #526987;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-scroll-history .is-success span {
    background: #d1fae5;
    color: #047857;
}

.booklet-scroll-history .is-fail span,
.booklet-scroll-history .is-destroyed span {
    background: #fee2e2;
    color: #dc2626;
}

.booklet-scroll-catalog {
    min-width: 0;
}

.booklet-scroll-catalog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    padding: 1px 3px;
}

.booklet-scroll-catalog-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.booklet-scroll-catalog-head b {
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
}

.booklet-scroll-catalog-head span {
    border-radius: 999px;
    background: #e6effd;
    padding: 3px 9px;
    color: #3971c6;
    font-size: 12px;
}

.booklet-scroll-catalog-head small {
    color: #8694aa;
    font-size: 11px;
}

.booklet-scroll-list {
    display: grid;
    gap: 4px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 2px;
}

.booklet-scroll-row {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 58px 52px 30px;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f7f9fc;
    padding: 7px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.booklet-scroll-row:hover {
    border-color: #cfe0f6;
    background: #f0f6ff;
    transform: translateY(-1px);
}

.booklet-scroll-row.is-disabled {
    cursor: not-allowed;
    opacity: .62;
    transform: none;
}

.booklet-scroll-icon {
    width: 42px;
    height: 42px;
    border-radius: 7px;
}

.booklet-scroll-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.booklet-scroll-meta b {
    overflow: hidden;
    color: #1260d6;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-scroll-meta small {
    overflow: hidden;
    color: #526987;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-scroll-rate {
    display: flex;
    min-height: 43px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fff4d6;
    color: #9a6200;
}

.booklet-scroll-rate b {
    font-size: 14px;
    font-weight: 500;
}

.booklet-scroll-rate small {
    font-size: 9px;
}

.booklet-scroll-rate.is-safe {
    background: #dcfce7;
    color: #047857;
}

.booklet-scroll-rate.is-risky {
    background: #feecef;
    color: #e11d48;
}

.booklet-scroll-curse {
    align-self: flex-start;
    border-radius: 3px;
    background: #ffe4e6;
    padding: 2px 5px;
    color: #e11d48;
    font-size: 9px;
    line-height: 1.25;
    white-space: nowrap;
}

.booklet-scroll-use-label {
    display: inline-flex;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9dcfa;
    border-radius: 7px;
    background: #edf5ff;
    color: #2563eb;
    font-size: 12px;
}

.booklet-scroll-use-label:hover {
    background: #dcecff;
}

.booklet-scroll-use-label:disabled {
    cursor: not-allowed;
}

.booklet-scroll-detail-link {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #7287a5;
    font-size: 16px;
}

.booklet-scroll-detail-link:hover {
    background: #e4edfa;
    color: #2563eb;
}

.booklet-scroll-equipment-modal {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.booklet-scroll-equipment-modal.tw-hidden {
    display: none;
}

.booklet-scroll-equipment-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .56);
}

.booklet-scroll-equipment-dialog {
    position: relative;
    display: flex;
    width: min(850px, 100%);
    max-height: min(760px, 90vh);
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .24);
}

.booklet-scroll-equipment-dialog-head,
.booklet-scroll-equipment-dialog-head > div {
    display: flex;
    align-items: center;
}

.booklet-scroll-equipment-dialog-head {
    justify-content: space-between;
    border-bottom: 1px solid #e5eaf1;
    padding: 15px 18px;
}

.booklet-scroll-equipment-dialog-head > div {
    gap: 10px;
}

.booklet-scroll-equipment-dialog-head > div > span:last-child {
    display: flex;
    flex-direction: column;
}

.booklet-scroll-equipment-dialog-head b {
    color: #172033;
    font-size: 15px;
}

.booklet-scroll-equipment-dialog-head small {
    color: #7a899f;
    font-size: 11px;
}

.booklet-scroll-equipment-dialog-icon {
    color: #2563eb;
    font-size: 22px;
}

.booklet-scroll-equipment-dialog-head > button {
    color: #64748b;
    font-size: 22px;
}

.booklet-scroll-equipment-dialog-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
    padding: 11px 18px;
    color: #64748b;
    font-size: 12px;
}

.booklet-scroll-equipment-modal-search {
    display: flex;
    width: min(420px, 70%);
    height: 36px;
    align-items: center;
    gap: 7px;
    border: 1px solid #dbe3ee;
    border-radius: 7px;
    background: #fff;
    padding: 0 10px;
}

.booklet-scroll-equipment-modal-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-size: 13px;
}

.booklet-scroll-equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: auto;
    padding: 15px 18px 20px;
}

.booklet-scroll-equipment-grid > button {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    border: 1px solid #e4eaf2;
    border-radius: 8px;
    padding: 9px;
    text-align: left;
}

.booklet-scroll-equipment-grid > button:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.booklet-scroll-equipment-choice-icon {
    width: 42px;
    height: 42px;
    border-radius: 7px;
}

.booklet-scroll-equipment-grid > button > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.booklet-scroll-equipment-grid b {
    overflow: hidden;
    color: #1e3a5f;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-scroll-equipment-grid small {
    color: #7b8ca3;
    font-size: 10px;
}

.booklet-scroll-equipment-modal-empty {
    padding: 50px 20px;
    color: #8795a8;
    text-align: center;
}

.booklet-scroll-equipment-modal-empty > span {
    display: block;
    margin-bottom: 8px;
    font-size: 34px;
}

.booklet-scroll-equipment-modal-empty b,
.booklet-scroll-equipment-modal-empty small {
    display: block;
}

.booklet-scroll-modal-open {
    overflow: hidden;
}

.tw-dark .booklet-scroll-simulator,
.dark .booklet-scroll-simulator,
.tw-dark .booklet-scroll-equipment-dialog,
.dark .booklet-scroll-equipment-dialog {
    border-color: #2d3747;
    background: #171717;
}

.tw-dark .booklet-scroll-equipment,
.dark .booklet-scroll-equipment {
    background: #202731;
}

.tw-dark .booklet-scroll-equipment-icon,
.dark .booklet-scroll-equipment-icon,
.tw-dark .booklet-scroll-icon,
.dark .booklet-scroll-icon,
.tw-dark .booklet-scroll-equipment-choice-icon,
.dark .booklet-scroll-equipment-choice-icon,
.tw-dark .booklet-scroll-result > div,
.dark .booklet-scroll-result > div,
.tw-dark .booklet-scroll-stat-list > div:not(.booklet-scroll-empty-stat),
.dark .booklet-scroll-stat-list > div:not(.booklet-scroll-empty-stat) {
    border-color: #374151;
    background: #181c22;
}

.tw-dark .booklet-scroll-row,
.dark .booklet-scroll-row {
    background: #202020;
}

.tw-dark .booklet-scroll-row:hover,
.dark .booklet-scroll-row:hover {
    border-color: #334b69;
    background: #222b36;
}

.tw-dark .booklet-scroll-catalog-head b,
.dark .booklet-scroll-catalog-head b,
.tw-dark .booklet-scroll-result b,
.dark .booklet-scroll-result b,
.tw-dark .booklet-scroll-equipment-dialog-head b,
.dark .booklet-scroll-equipment-dialog-head b {
    color: #e5e7eb;
}

.tw-dark .booklet-scroll-equipment-dialog-tools,
.dark .booklet-scroll-equipment-dialog-tools {
    background: #202020;
}

.tw-dark .booklet-scroll-equipment-modal-search,
.dark .booklet-scroll-equipment-modal-search,
.tw-dark .booklet-scroll-equipment-grid > button,
.dark .booklet-scroll-equipment-grid > button {
    border-color: #343d4a;
    background: #1b1b1b;
}

.tw-dark .booklet-scroll-equipment-modal-search input,
.dark .booklet-scroll-equipment-modal-search input,
.tw-dark .booklet-scroll-equipment-grid b,
.dark .booklet-scroll-equipment-grid b {
    color: #e5e7eb;
}

@media (max-width: 900px) {
    .booklet-scroll-layout {
        grid-template-columns: 1fr;
    }

    .booklet-scroll-list {
        max-height: 420px;
    }
}

@media (max-width: 620px) {
    .booklet-scroll-simulator .booklet-detail-section-head {
        align-items: flex-start;
    }

    .booklet-scroll-simulator .booklet-detail-section-head > div {
        flex-wrap: wrap;
    }

    .booklet-scroll-layout {
        gap: 14px;
        padding: 10px;
    }

    .booklet-scroll-equipment {
        padding: 12px;
    }

    .booklet-scroll-row {
        grid-template-columns: 38px minmax(0, 1fr) 54px 44px;
        gap: 6px;
        padding: 6px;
    }

    .booklet-scroll-icon {
        width: 38px;
        height: 38px;
    }

    .booklet-scroll-detail-link {
        display: none;
    }

    .booklet-scroll-catalog-head small {
        display: none;
    }

    .booklet-scroll-equipment-grid {
        grid-template-columns: 1fr;
    }

    .booklet-scroll-equipment-dialog-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .booklet-scroll-equipment-modal-search {
        width: 100%;
    }
}

.booklet-detail-soft,
.booklet-detail-stat,
.booklet-detail-preview,
.booklet-detail-empty {
    border: 1px solid #edf0f4;
    border-radius: 7px;
    background: rgba(248, 250, 252, .72);
}

.booklet-detail-soft {
    padding: 14px;
}

.booklet-detail-soft h3,
.booklet-detail-preview-title {
    color: #151515;
    font-size: 15px;
    font-weight: 600;
}

.booklet-detail-stat {
    min-width: 0;
    padding: 12px;
}

.booklet-detail-stat span {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.booklet-detail-stat b {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0f172a;
    font-size: 18px;
    font-weight: 600;
}

.booklet-detail-preview {
    padding: 14px;
}

.booklet-detail-preview-box {
    display: flex;
    min-height: 260px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    border-radius: 7px;
    background:
        linear-gradient(45deg, rgba(15, 23, 42, .055) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(15, 23, 42, .055) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(15, 23, 42, .055) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(15, 23, 42, .055) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.booklet-detail-preview-box.is-large {
    min-height: 240px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.booklet-detail-preview-box.is-large span {
    color: #94a3b8;
    font-size: 13px;
}

.booklet-detail-zoombar {
    display: grid;
    grid-template-columns: auto auto auto auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    border-radius: 999px;
    background: #eff6ff;
    padding: 6px 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
}

.booklet-detail-zoombar b,
.booklet-detail-zoombar button {
    border-radius: 999px;
    background: #fff;
    padding: 2px 8px;
    color: #0f172a;
}

.booklet-detail-zoombar input {
    width: 100%;
    accent-color: #2563eb;
}

.booklet-detail-preview-box img {
    max-width: 90%;
    max-height: 240px;
    object-fit: contain;
    image-rendering: pixelated;
    transform-origin: center center;
    transition: transform .16s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.booklet-detail-preview-box.is-dragging img {
    transition: none;
}

.booklet-detail-drop-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.booklet-detail-drop {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #edf0f4;
    border-radius: 7px;
    background: #fff;
    padding: 10px;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.booklet-detail-drop-id,
.booklet-detail-mini-id {
    display: block;
    align-self: auto;
    min-width: 0;
    border-radius: 0;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
}

.booklet-detail-drop-id small,
.booklet-detail-mini-id small {
    display: inline;
    margin-right: 4px;
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
}

.booklet-detail-drop:hover {
    border-color: #a855f7;
    background: #faf5ff;
    transform: translateY(-1px);
}

.booklet-detail-drop-tip {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 10px;
}

.booklet-detail-drop-meta {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
}

.booklet-detail-drop-id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 0;
    line-height: 1.2;
}

.booklet-detail-drop-id-value {
    display: inline-flex;
    align-items: baseline;
}

.booklet-detail-mob-tags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
}

.booklet-detail-mob-tag {
    display: inline-flex;
    min-height: 17px;
    align-items: center;
    border-radius: 3px;
    background: #eef2f7;
    padding: 1px 5px;
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px;
}

.booklet-detail-mob-tag.is-boss,
.booklet-detail-mob-tag.is-rose {
    background: #fff1f2;
    color: #e11d48;
}

.booklet-detail-mob-tag.is-undead {
    background: #f5f3ff;
    color: #7c3aed;
}

.booklet-detail-mob-tag.is-blue {
    background: #eff6ff;
    color: #2563eb;
}

.booklet-detail-mob-tag.is-slate {
    background: #f1f5f9;
    color: #475569;
}

.booklet-detail-mini-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.booklet-detail-mini {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #edf0f4;
    border-radius: 7px;
    background: #fff;
    padding: 10px;
    color: #0f172a;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.booklet-detail-mini:hover {
    border-color: #2563eb;
    background: #eff6ff;
    transform: translateY(-1px);
}

.booklet-npc-shop-card {
    position: relative;
    min-height: 72px;
}

.booklet-npc-shop-id {
    position: absolute;
    top: 8px;
    right: 9px;
    color: #94a3b8;
    font-size: 10px;
    line-height: 14px;
    font-weight: 500;
}

.booklet-npc-shop-card .booklet-npc-shop-name {
    min-width: 0;
    padding-right: 58px;
}

.booklet-npc-shop-map {
    display: flex;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    gap: 3px;
    color: #2563eb;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
}

.booklet-detail-mini-text .booklet-npc-shop-price {
    color: #475569;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
}

.booklet-npc-shop-map > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-npc-shop-map > small {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 10px;
}

button.booklet-npc-shop-map:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.booklet-npc-shop-map.is-static {
    color: #64748b;
}

.booklet-detail-mini-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    background: #f8fafc;
}

.booklet-detail-mini-icon img {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
    image-rendering: pixelated;
}

.booklet-appearance-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.booklet-appearance-color-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    border: 1px solid #edf0f4;
    border-radius: 7px;
    background: #fff;
    padding: 7px 10px 7px 7px;
    color: #0f172a;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.booklet-appearance-color-card:hover {
    border-color: #2563eb;
    background: #eff6ff;
    transform: translateY(-1px);
}

.booklet-appearance-color-preview {
    display: flex;
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 5px;
    background: #f8fafc;
}

.booklet-appearance-color-preview > img {
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    flex: 0 0 auto;
}

.booklet-appearance-color-preview > [class*="tw-icon-"] {
    color: #94a3b8;
    font-size: 28px;
}

.booklet-detail-mini-meta,
.booklet-detail-mini-text {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
}

.booklet-detail-mini-id {
    line-height: 1.2;
}

.booklet-detail-mini-meta b,
.booklet-detail-mini-meta em,
.booklet-detail-mini-text b,
.booklet-detail-mini-text em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-detail-mini-meta b,
.booklet-detail-mini-text b {
    color: #2563eb;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
}

.booklet-detail-mini-meta em,
.booklet-detail-mini-text em {
    color: #64748b;
    font-size: 12px;
    line-height: 16px;
    font-style: normal;
}

.booklet-detail-drop-icon {
    display: flex;
    width: 72px;
    height: 58px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f8fafc;
    overflow: hidden;
}

.booklet-detail-drop-icon img {
    max-width: 68px;
    max-height: 54px;
    object-fit: contain;
    image-rendering: auto;
}

.booklet-detail-drop b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2563eb;
    font-size: 14px;
    font-weight: 500;
}

.booklet-detail-drop em {
    display: block;
    color: #64748b;
    line-height: 16px;
    font-size: 12px;
    font-style: normal;
}

.booklet-detail-drop-rate {
    align-self: center;
    flex: 0 0 auto;
    border-radius: 6px;
    background: #ecfdf5;
    padding: 4px 7px;
    color: #047857;
    font-size: 12px;
    font-weight: 500;
}

.booklet-relation-board {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.booklet-relation-block,
.booklet-relation-group {
    border: 1px solid #edf0f4;
    border-radius: 7px;
    background: #f8fafc;
    padding: 12px;
}

.booklet-relation-block h3,
.booklet-relation-group h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.booklet-relation-mini {
    min-width: 0;
    background: #fff;
}

.booklet-relation-mini .booklet-detail-mini-text {
    flex: 1 1 auto;
}

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

.booklet-recipe-card {
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #fff;
    padding: 12px;
}

.booklet-recipe-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.booklet-recipe-head b {
    color: #0f172a;
    font-size: 14px;
}

.booklet-recipe-head span {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 12px;
}

.booklet-recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.booklet-recipe-materials {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-top: 10px;
}

.booklet-relation-stats {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.booklet-detail-stat.is-emerald {
    background: #ecfdf5;
}

.booklet-detail-stat.is-emerald b {
    color: #047857;
}

.booklet-detail-empty {
    padding: 48px 16px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.booklet-detail-json {
    max-height: 560px;
    overflow: auto;
    border-radius: 7px;
    background: #0f172a;
    padding: 14px;
    color: #dbeafe;
    font-size: 12px;
    line-height: 1.65;
}

.booklet-detail-orange {
    color: #f59e0b;
}

.booklet-item-head h1 {
    margin-top: 3px;
    color: #0f172a;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
}

.booklet-item-head .tw-text-\[12px\] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #eff6ff;
    padding: 4px 9px;
    color: #1d4ed8;
    line-height: 1;
}

.booklet-item-head p {
    margin-top: 8px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.booklet-item-head-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.booklet-mini-btn {
    display: inline-flex;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 0 14px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.booklet-mini-btn:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.booklet-mini-btn span {
    font-size: 17px;
}

.booklet-item-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 14px;
}

.booklet-item-side {
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
}

.booklet-side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.booklet-side-title a {
    color: #2563eb;
    font-weight: 700;
    text-transform: none;
}

.booklet-side-title button {
    color: #2563eb;
    font-weight: 700;
    text-transform: none;
}

.booklet-cat-group {
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
}

.booklet-cat-group + .booklet-cat-group {
    margin-top: 10px;
}

.booklet-cat-group-title {
    margin-bottom: 8px;
    padding: 0 6px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

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

.booklet-cat-link {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 8px;
    min-height: 44px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f8fafc;
    padding: 8px 9px;
    color: #334155;
}

.booklet-cat-link > span {
    color: #64748b;
    font-size: 22px;
}

.booklet-cat-link b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.booklet-cat-link em {
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
}

.booklet-cat-link:hover,
.booklet-cat-link.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.booklet-cat-link:hover > span,
.booklet-cat-link.is-active > span {
    color: #2563eb;
}

.booklet-tree-wrap {
    border-top: 1px solid #f1f5f9;
    margin-top: 12px;
    padding-top: 10px;
}

.booklet-tree-section {
    border-top: 1px solid #f1f5f9;
    margin-top: 12px;
    padding-top: 12px;
}

.booklet-tree-section-title {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 8px;
    padding-bottom: 9px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.booklet-tree-section-title span {
    color: #0f172a;
    font-size: 21px;
}

.booklet-tree-group + .booklet-tree-group {
    margin-top: 4px;
}

.booklet-tree-summary {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 18px;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 7px 9px;
    color: #0f172a;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    list-style: none;
}

.booklet-tree-summary::-webkit-details-marker {
    display: none;
}

.booklet-tree-summary > span {
    color: #64748b;
    font-size: 22px;
}

.booklet-tree-summary > i {
    color: #64748b;
    font-size: 16px;
    transition: transform .15s ease;
}

.booklet-tree-group[open] .booklet-tree-summary > i {
    transform: rotate(90deg);
}

.booklet-tree-summary:hover {
    background: #f8fafc;
}

.booklet-tree-children {
    display: grid;
    gap: 3px;
    padding: 2px 0 8px 34px;
}

.booklet-tree-child {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 34px;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 6px 8px;
    color: #334155;
    font-size: 14px;
    text-align: left;
}

.booklet-tree-child > span {
    color: #64748b;
    font-size: 18px;
}

.booklet-tree-child b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.booklet-tree-child:hover,
.booklet-tree-child.is-active {
    background: #eff6ff;
    color: #1d4ed8;
}

.booklet-tree-child:hover > span,
.booklet-tree-child.is-active > span {
    color: #2563eb;
}

.booklet-item-main {
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.booklet-item-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 140px 150px auto auto;
    gap: 8px;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px;
}

.booklet-item-search {
    display: flex;
    height: 38px;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 0 12px;
    color: #64748b;
}

.booklet-item-search input {
    min-width: 0;
    flex: 1;
    background: transparent;
    font-size: 14px;
}

.booklet-item-toolbar select,
.booklet-check-filter,
.booklet-search-submit {
    height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
    color: #334155;
    font-size: 14px;
}

.booklet-check-filter,
.booklet-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
}

.booklet-search-submit {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.booklet-active-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 12px;
}

.booklet-active-line span {
    border-radius: 999px;
    background: #f1f5f9;
    padding: 4px 9px;
    color: #64748b;
    font-size: 12px;
}

.booklet-item-table-wrap {
    position: relative;
    overflow-x: auto;
}

.booklet-item-table-wrap.is-loading {
    min-height: 260px;
}

.booklet-item-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 14px;
}

.booklet-item-table th {
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 10px 12px;
    color: #475569;
    text-align: left;
    font-weight: 800;
}

.booklet-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
    color: #0f172a;
    font-weight: 800;
}

.booklet-sort-btn:hover {
    border-color: #2563eb;
    color: #1d4ed8;
}

.booklet-sort-btn i {
    color: #64748b;
    font-size: 14px;
}

.booklet-item-table td {
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 12px;
    color: #334155;
    vertical-align: middle;
}

.booklet-item-table tr:hover td {
    background: #f8fafc;
}

.booklet-item-table .col-icon {
    width: 58px;
}

.booklet-item-table .col-icon img,
.booklet-item-noimg {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.booklet-item-noimg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
}

.booklet-item-name {
    color: #0f172a;
    font-weight: 800;
}

.booklet-item-name:hover {
    color: #2563eb;
}

.booklet-item-sub {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 12px;
}

.booklet-mono {
    font-family: Consolas, Monaco, monospace;
    color: #475569;
}

.booklet-item-req {
    color: #64748b;
    font-size: 12px;
}

.booklet-pill {
    display: inline-flex;
    border-radius: 999px;
    background: #f1f5f9;
    padding: 3px 8px;
    color: #64748b;
    font-size: 12px;
}

.booklet-pill.yes {
    background: #ecfdf5;
    color: #059669;
}

.booklet-table-action {
    text-align: right;
}

.booklet-table-action a {
    color: #2563eb;
    font-weight: 700;
}

.booklet-async-tip {
    position: fixed;
    z-index: 80;
    width: 350px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}

.booklet-async-tip.is-show {
    opacity: 1;
    transform: translateY(0);
}

.booklet-tip-card,
.booklet-tip-loading {
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.24);
    color: #e5e7eb;
}

.booklet-tip-card {
    padding: 14px;
}

.booklet-tip-loading {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
}

.booklet-tip-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(203, 213, 225, 0.22);
    border-top-color: #93c5fd;
    border-radius: 999px;
    animation: mxdcTipSpin .75s linear infinite;
}

@keyframes mxdcTipSpin {
    to {
        transform: rotate(360deg);
    }
}

.booklet-tip-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.booklet-tip-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
}

.booklet-tip-icon img {
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
}

.booklet-tip-name {
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 800;
}

.booklet-tip-id {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 12px;
}

.booklet-tip-line {
    height: 1px;
    margin: 11px 0;
    background: rgba(226, 232, 240, 0.16);
}

.booklet-tip-req {
    display: grid;
    gap: 4px;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
}

.booklet-tip-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    font-size: 12px;
}

.booklet-tip-stats div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.booklet-tip-stats span {
    color: #cbd5e1;
}

.booklet-tip-stats b {
    color: #93c5fd;
    font-weight: 800;
}

.booklet-tip-desc {
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.65;
}

.booklet-tip-preview-title {
    margin-bottom: 8px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
}

.booklet-tip-preview-box {
    display: flex;
    min-height: 155px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 7px;
    background:
        linear-gradient(45deg, rgba(255,255,255,.055) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.055) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.055) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.055) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    overflow: hidden;
    padding: 10px;
}

.booklet-tip-preview-box img {
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    transform: scale(1.35);
    transform-origin: center center;
}

.booklet-tip-orange {
    color: #fbbf24;
}

.booklet-tip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.booklet-tip-meta span {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    color: #cbd5e1;
    font-size: 12px;
}

.booklet-empty {
    height: 180px;
    text-align: center;
    color: #94a3b8;
}

.booklet-list-loading {
    position: absolute;
    inset: 44px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
}

.booklet-vue-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
}

.booklet-vue-pager button,
.booklet-vue-pager span {
    display: inline-flex;
    min-width: 38px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 0 11px;
    color: #475569;
    font-size: 13px;
}

.booklet-vue-pager button:hover:not(:disabled) {
    border-color: #2563eb;
    color: #2563eb;
}

.booklet-vue-pager button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.booklet-item-pager {
    padding: 12px;
}

@media (max-width: 767px) {
    .booklet-hero-inner {
        padding-top: 38px;
        padding-bottom: 34px;
    }

    .booklet-hero-title {
        font-size: 38px;
    }

    .booklet-feature-card {
        min-height: 118px;
    }

    .booklet-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booklet-footer-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .booklet-footer-versions {
        justify-content: flex-start;
    }

    .booklet-item-head {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .booklet-item-head-actions {
        width: 100%;
    }

    .booklet-mini-btn {
        flex: 1;
    }
}

.booklet-gear-page {
    background: #f5f5f5;
}

.booklet-gear-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 16px;
    padding: 22px 24px 18px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
}

.booklet-gear-head-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
}

.booklet-gear-head-icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 28px;
}

.booklet-gear-head-copy {
    min-width: 0;
}

.booklet-gear-kicker {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
}

.booklet-gear-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.booklet-gear-title-row h1 {
    color: #0f172a;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
}

.booklet-gear-badge {
    display: inline-flex;
    height: 24px;
    align-items: center;
    border-radius: 999px;
    background: #ecfdf5;
    padding: 0 10px;
    color: #059669;
    font-size: 12px;
    font-weight: 800;
}

.booklet-gear-head-copy p {
    margin-top: 8px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.booklet-gear-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.booklet-gear-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
}

.booklet-gear-stat {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px 14px;
}

.booklet-gear-stat b {
    display: block;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
}

.booklet-gear-stat span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.booklet-gear-layout {
    display: grid;
    grid-template-columns: 304px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.booklet-gear-side {
    position: sticky;
    top: 82px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.035);
}

.booklet-gear-main {
    min-width: 0;
}

.booklet-gear-panel {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.035);
}

.booklet-gear-filter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 12px;
}

.booklet-gear-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 150px 150px 150px 110px;
    gap: 9px;
}

.booklet-gear-filter-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.booklet-gear-chipline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
}

.booklet-gear-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    background: #eff6ff;
    padding: 5px 8px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.booklet-gear-chip:hover {
    background: #dbeafe;
}

.booklet-gear-clear {
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
}

.booklet-gear-clear:hover {
    text-decoration: underline;
}

.booklet-gear-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 140px 160px auto auto;
    gap: 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 12px;
}

.booklet-gear-search,
.booklet-gear-control,
.booklet-gear-check,
.booklet-gear-submit {
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
}

.booklet-gear-search {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    border: 1px solid #dbe3ef;
    background: #fff;
    padding: 0 12px;
    color: #64748b;
}

.booklet-gear-search input {
    min-width: 0;
    flex: 1;
    background: transparent;
    color: #0f172a;
}

.booklet-gear-control,
.booklet-gear-check {
    border: 1px solid #dbe3ef;
    background: #fff;
    color: #334155;
}

.booklet-gear-control {
    padding: 0 11px;
}

.booklet-gear-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    font-weight: 700;
    white-space: nowrap;
}

.booklet-gear-check input {
    width: 15px;
    height: 15px;
}

.booklet-gear-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #2563eb;
    background: #2563eb;
    padding: 0 18px;
    color: #fff;
    font-weight: 800;
    transition: background .15s ease, box-shadow .15s ease;
}

.booklet-gear-submit:hover {
    background: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.booklet-gear-view-btn {
    display: inline-flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    padding: 0 12px;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.booklet-gear-view-btn:hover,
.booklet-gear-view-btn.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.booklet-gear-active {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 10px 12px;
}

.booklet-gear-active span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    background: #eef2f7;
    padding: 3px 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.booklet-gear-table-wrap {
    position: relative;
    min-height: 360px;
    overflow-x: auto;
}

.booklet-gear-table {
    width: 100%;
    min-width: 1040px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.booklet-gear-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #dbe3ef;
    background: #f8fafc;
    padding: 11px 14px;
    color: #0f172a;
    text-align: left;
    font-weight: 900;
}

.booklet-gear-table th.col-name {
    width: 290px;
}

.booklet-gear-table td {
    border-bottom: 1px solid #edf2f7;
    background: #ffffff;
    padding: 11px 14px;
    color: #0f2a45;
    vertical-align: middle;
}

.booklet-gear-table tbody tr:nth-child(even) td {
    background: #fcfdff;
}

.booklet-gear-table tbody tr:hover td {
    background: #f4f8ff;
}

.booklet-gear-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
    color: #0f172a;
    font-weight: 900;
}

.booklet-gear-sort:hover {
    border-color: #2563eb;
    color: #1d4ed8;
}

.booklet-gear-sort i {
    color: #64748b;
    font-size: 15px;
}

.booklet-gear-namecell {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.booklet-gear-iconbox {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f8fafc;
}

.booklet-gear-iconbox img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    image-rendering: auto;
}

.booklet-gear-iconbox > span {
    color: #64748b;
    font-size: 22px;
}

.booklet-gear-name {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
}

.booklet-gear-name:hover {
    color: #2563eb;
}

.booklet-gear-sub,
.booklet-gear-muted,
.booklet-gear-req {
    color: #7b8aa1;
    font-size: 12px;
}

.booklet-gear-mono {
    color: #334155;
    font-family: Consolas, Monaco, monospace;
}

.booklet-gear-loading {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, 0.78);
    backdrop-filter: blur(2px);
}

.booklet-gear-loading-card {
    display: grid;
    min-width: 220px;
    justify-items: center;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #ffffff;
    padding: 18px 20px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.booklet-gear-loading-card b {
    margin-top: 10px;
    color: #0f172a;
    font-size: 14px;
}

.booklet-gear-loading-card em {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.booklet-gear-loading-spin {
    width: 26px;
    height: 26px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 999px;
    animation: mxdcTipSpin .75s linear infinite;
}

.booklet-gear-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    margin: 16px auto 0;
    padding: 5px;
}

.booklet-gear-page-btn,
.booklet-gear-page-gap {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 800;
}

.booklet-gear-page-btn {
    border: 1px solid transparent;
    background: transparent;
    color: #334155;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.booklet-gear-page-btn:hover:not(:disabled),
.booklet-gear-page-btn.is-active {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.booklet-gear-page-btn:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.booklet-gear-page-gap {
    color: #94a3b8;
}

.booklet-gear-table-uiv8 {
    min-width: 1080px;
}

.booklet-gear-table-uiv8 th {
    height: 44px;
    padding: 8px 12px;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 800;
}

.booklet-gear-table-uiv8 th.col-check {
    width: 44px;
}

.booklet-gear-table-uiv8 th.col-name {
    width: 360px;
}

.booklet-gear-table-uiv8 td {
    height: 56px;
    padding: 8px 12px;
}

.booklet-gear-table-uiv8 tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.booklet-gear-table-uiv8 tbody tr:hover td {
    background: #eff6ff;
}

.booklet-gear-table-uiv8 input[type="checkbox"],
.booklet-gear-check-cell input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    accent-color: #2563eb;
}

.booklet-gear-table-uiv8 .booklet-gear-sort {
    padding-bottom: 5px;
}

.booklet-gear-table-uiv8 .booklet-gear-sort i {
    font-size: 16px;
}

.booklet-gear-table-uiv8 .booklet-gear-iconbox {
    width: 40px;
    height: 40px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.booklet-gear-table-uiv8 .booklet-gear-iconbox img {
    max-width: 32px;
    max-height: 32px;
}

.booklet-gear-table-uiv8 .booklet-gear-name {
    max-width: 260px;
    color: #2563eb;
    font-weight: 700;
}

.booklet-gear-table-uiv8 .booklet-gear-sub {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-gear-tag {
    display: inline-flex;
    max-width: 160px;
    align-items: center;
    border-radius: 6px;
    background: #f1f5f9;
    padding: 4px 8px;
    color: #0f172a;
    font-size: 12px;
    line-height: 1.2;
}

@media (max-width: 1180px) {
    .booklet-gear-layout {
        grid-template-columns: 1fr;
    }

    .booklet-gear-side {
        position: static;
        max-height: none;
    }
}

@media (max-width: 900px) {
    .booklet-gear-head {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .booklet-gear-head-actions {
        justify-content: flex-start;
    }

    .booklet-gear-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booklet-gear-toolbar {
        grid-template-columns: 1fr;
    }

    .booklet-gear-filter-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .booklet-gear-head-main {
        align-items: flex-start;
    }

    .booklet-gear-head-icon {
        width: 44px;
        height: 44px;
        font-size: 23px;
    }

    .booklet-gear-title-row h1 {
        font-size: 24px;
    }

    .booklet-gear-stats {
        grid-template-columns: 1fr;
    }
}

/* Dark mode polish for mxdc pages. The project uses runtime Vue classes in
   several places, so these scoped rules keep the dark theme consistent. */
.tw-dark .booklet-home,
.dark .booklet-home,
.tw-dark .booklet-home-body,
.dark .booklet-home-body {
    background: #101010;
}

.tw-dark .booklet-hero,
.dark .booklet-hero {
    background: #101010;
    border-bottom-color: #2a2a2a;
}

.tw-dark .booklet-hero::before,
.dark .booklet-hero::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

.tw-dark .booklet-hero-title,
.dark .booklet-hero-title {
    color: #f8fafc;
}

.tw-dark .booklet-hero-desc,
.dark .booklet-hero-desc {
    color: #cbd5e1;
}

.tw-dark .booklet-hero-search,
.dark .booklet-hero-search {
    border-color: #2a2a2a;
    background: #171717;
    color: #d1d5db;
    box-shadow: none;
}

.tw-dark .booklet-hero-search input,
.dark .booklet-hero-search input {
    color: #f3f4f6;
}

.tw-dark .booklet-feature-card,
.dark .booklet-feature-card,
.tw-dark .booklet-preview-card,
.dark .booklet-preview-card,
.tw-dark .booklet-module-card,
.dark .booklet-module-card {
    border-color: #2a2a2a !important;
    background: #171717;
    box-shadow: none;
}

.tw-dark .booklet-feature-icon,
.dark .booklet-feature-icon {
    background: #202020;
    color: #93c5fd;
}

.tw-dark .booklet-feature-card:hover,
.dark .booklet-feature-card:hover,
.tw-dark .booklet-module-card:hover,
.dark .booklet-module-card:hover {
    border-color: #334155 !important;
    background: #1c1c1c;
}

.tw-dark .booklet-footer,
.dark .booklet-footer {
    border-top-color: transparent;
    background: transparent;
}

.tw-dark .booklet-footer-content,
.dark .booklet-footer-content {
    color: #d1d5db;
}

.tw-dark .booklet-footer-content a,
.dark .booklet-footer-content a {
    color: #60a5fa;
}

.tw-dark .booklet-footer-title,
.dark .booklet-footer-title {
    color: #f3f4f6;
}

.tw-dark .booklet-footer-grid,
.dark .booklet-footer-grid,
.tw-dark .booklet-footer-links a,
.dark .booklet-footer-links a,
.tw-dark .booklet-footer-meta,
.dark .booklet-footer-meta {
    color: #a3a3a3;
}

.tw-dark .booklet-footer-meta,
.dark .booklet-footer-meta {
    border-top-color: #2a2a2a;
}

.tw-dark .booklet-footer-versions a,
.dark .booklet-footer-versions a {
    border-color: #2a2a2a;
    background: #171717;
    color: #d1d5db;
}

.tw-dark .booklet-footer-versions a:hover,
.dark .booklet-footer-versions a:hover,
.tw-dark .booklet-footer-versions a.is-active,
.dark .booklet-footer-versions a.is-active {
    border-color: #a855f7;
    background: #2a1738;
    color: #e9d5ff;
}

.tw-dark .booklet-uiv8-head,
.dark .booklet-uiv8-head,
.tw-dark .booklet-uiv8-list .tw-bg-panel-light,
.dark .booklet-uiv8-list .tw-bg-panel-light {
    border-color: #2a2a2a !important;
    background: #151515 !important;
    color: #f3f4f6;
}

.tw-dark .booklet-uiv8-head-stats,
.dark .booklet-uiv8-head-stats {
    background: #171717 !important;
    border-color: #2a2a2a !important;
}

.tw-dark .booklet-uiv8-head-stats::before,
.dark .booklet-uiv8-head-stats::before,
.tw-dark .booklet-uiv8-head-stats > div + div::before,
.dark .booklet-uiv8-head-stats > div + div::before {
    background: #2a2a2a;
}

.tw-dark .booklet-uiv8-list .db-tree-row,
.dark .booklet-uiv8-list .db-tree-row {
    color: #cbd5e1;
}

.tw-dark .booklet-uiv8-list .db-tree-root,
.dark .booklet-uiv8-list .db-tree-root {
    color: #f3f4f6;
}

.tw-dark .booklet-uiv8-list .db-tree-row:hover,
.dark .booklet-uiv8-list .db-tree-row:hover,
.tw-dark .booklet-uiv8-list .db-tree-row.db-tree-active,
.dark .booklet-uiv8-list .db-tree-row.db-tree-active {
    background: #243044;
    color: #93c5fd;
}

.tw-dark .booklet-uiv8-search,
.dark .booklet-uiv8-search,
.tw-dark .booklet-uiv8-list select,
.dark .booklet-uiv8-list select {
    border-color: #2a2a2a;
    background: #101010;
    color: #d1d5db;
}

.tw-dark .booklet-uiv8-search input,
.dark .booklet-uiv8-search input {
    color: #f3f4f6;
}

.tw-dark .booklet-uiv8-search input::placeholder,
.dark .booklet-uiv8-search input::placeholder {
    color: #737373;
}

.tw-dark .booklet-uiv8-search button:hover,
.dark .booklet-uiv8-search button:hover {
    background: #262626;
    color: #f3f4f6;
}

.tw-dark .booklet-uiv8-list .tw-bg-blue-50,
.dark .booklet-uiv8-list .tw-bg-blue-50 {
    background: rgba(37, 99, 235, 0.16) !important;
}

.tw-dark .booklet-uiv8-table-wrap,
.dark .booklet-uiv8-table-wrap {
    background: #111;
}

.tw-dark .booklet-uiv8-table-wrap thead,
.dark .booklet-uiv8-table-wrap thead,
.tw-dark .booklet-uiv8-table-wrap th,
.dark .booklet-uiv8-table-wrap th {
    background: #1f1f1f !important;
    color: #f3f4f6 !important;
}

.tw-dark .booklet-uiv8-table-wrap tr,
.dark .booklet-uiv8-table-wrap tr,
.tw-dark .booklet-uiv8-table-wrap td,
.dark .booklet-uiv8-table-wrap td {
    border-color: #2a2a2a !important;
}

.tw-dark .booklet-uiv8-table-wrap tbody tr,
.dark .booklet-uiv8-table-wrap tbody tr {
    background: #141414 !important;
    color: #f3f4f6 !important;
}

.tw-dark .booklet-uiv8-table-wrap tbody tr:nth-child(even),
.dark .booklet-uiv8-table-wrap tbody tr:nth-child(even) {
    background: #1f1f1f !important;
}

.tw-dark .booklet-uiv8-table-wrap tbody tr:hover,
.dark .booklet-uiv8-table-wrap tbody tr:hover {
    background: #242424 !important;
}

.tw-dark .booklet-uiv8-table-wrap tbody td,
.dark .booklet-uiv8-table-wrap tbody td {
    background: transparent !important;
}

.tw-dark .booklet-uiv8-sort,
.dark .booklet-uiv8-sort {
    color: #f3f4f6;
}

.tw-dark .booklet-uiv8-sort:hover,
.dark .booklet-uiv8-sort:hover,
.tw-dark .booklet-uiv8-sort.is-active,
.dark .booklet-uiv8-sort.is-active {
    color: #60a5fa;
}

.tw-dark .booklet-uiv8-loading-layer,
.dark .booklet-uiv8-loading-layer,
.tw-dark .booklet-list-loading-overlay,
.dark .booklet-list-loading-overlay {
    background: rgba(16, 16, 16, .72);
}

.tw-dark .booklet-uiv8-loading-pill,
.dark .booklet-uiv8-loading-pill,
.tw-dark .booklet-list-loading-pill,
.dark .booklet-list-loading-pill {
    border-color: #2a2a2a;
    background: #171717;
    color: #d1d5db;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
}

.tw-dark .booklet-detail-tabs,
.dark .booklet-detail-tabs {
    border-bottom-color: #2a2a2a;
    background: #151515;
}

.tw-dark .booklet-detail-tabs button,
.dark .booklet-detail-tabs button {
    color: #a3a3a3;
}

.tw-dark .booklet-detail-tabs button:hover,
.dark .booklet-detail-tabs button:hover {
    background: rgba(168, 85, 247, .15);
    color: #d8b4fe;
}

.tw-dark .booklet-detail-tabs button.is-active,
.dark .booklet-detail-tabs button.is-active {
    background: #a855f7;
    color: #fff;
}

.tw-dark .booklet-detail-card,
.dark .booklet-detail-card {
    border-color: #3a3a3a;
    background: #151515;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}

.tw-dark .booklet-detail-card-head,
.dark .booklet-detail-card-head {
    background: #171717;
}

.tw-dark .booklet-detail-card-title,
.dark .booklet-detail-card-title {
    border-color: rgba(255, 255, 255, .08);
    background-color: #191919;
}

.tw-dark .booklet-detail-card-body,
.dark .booklet-detail-card-body {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.tw-dark .booklet-detail-big-icon,
.dark .booklet-detail-big-icon {
    border-color: #3a3a3a;
    background: #d1d5db;
}

.tw-dark .booklet-detail-jobline,
.dark .booklet-detail-jobline {
    border-color: #3a3a3a;
    background: rgba(255, 255, 255, .02);
}

.tw-dark .booklet-detail-lines,
.dark .booklet-detail-lines {
    border-top-color: #3a3a3a;
}

.tw-dark .booklet-detail-info-table th,
.dark .booklet-detail-info-table th {
    border-color: #2a2a2a;
    background: #202020;
    color: #a3a3a3;
}

.tw-dark .booklet-detail-info-table td,
.dark .booklet-detail-info-table td {
    border-color: #2a2a2a;
    color: #f3f4f6;
}

.tw-dark .booklet-copy-inline,
.dark .booklet-copy-inline {
    background: rgba(59, 130, 246, .18);
    color: #93c5fd;
}

.tw-dark .booklet-detail-section-head,
.dark .booklet-detail-section-head {
    border-color: #2a2a2a;
    background: #172033;
    color: #a3a3a3;
}

.tw-dark .booklet-detail-section-head b,
.dark .booklet-detail-section-head b {
    color: #f3f4f6;
}

.tw-dark .booklet-detail-soft,
.dark .booklet-detail-soft,
.tw-dark .booklet-detail-stat,
.dark .booklet-detail-stat,
.tw-dark .booklet-detail-preview,
.dark .booklet-detail-preview,
.tw-dark .booklet-detail-empty,
.dark .booklet-detail-empty {
    border-color: #2a2a2a;
    background: #1d1d1d;
}

.tw-dark .booklet-detail-soft h3,
.dark .booklet-detail-soft h3,
.tw-dark .booklet-detail-preview-title,
.dark .booklet-detail-preview-title {
    color: #f3f4f6;
}

.tw-dark .booklet-detail-stat span,
.dark .booklet-detail-stat span {
    color: #a3a3a3;
}

.tw-dark .booklet-detail-stat b,
.dark .booklet-detail-stat b {
    color: #f3f4f6;
}

.tw-dark .booklet-detail-preview-box,
.dark .booklet-detail-preview-box {
    color: #a3a3a3;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, .045) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, .045) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .045) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .045) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.tw-dark .booklet-detail-drop,
.dark .booklet-detail-drop {
    border-color: #2a2a2a;
    background: #171717;
}

.tw-dark .booklet-detail-drop:hover,
.dark .booklet-detail-drop:hover {
    border-color: #a855f7;
    background: #202020;
}

.tw-dark .booklet-detail-drop-icon,
.dark .booklet-detail-drop-icon {
    background: #101010;
}

.tw-dark .booklet-detail-drop-id,
.dark .booklet-detail-drop-id,
.tw-dark .booklet-detail-mini-id,
.dark .booklet-detail-mini-id {
    background: transparent;
    color: #94a3b8;
}

.tw-dark .booklet-detail-mini-icon,
.dark .booklet-detail-mini-icon {
    background: #101010;
    color: #cbd5e1;
}

.tw-dark .booklet-detail-drop b,
.dark .booklet-detail-drop b {
    color: #7dd3fc;
}

.tw-dark .booklet-detail-drop em,
.dark .booklet-detail-drop em,
.tw-dark .booklet-detail-empty,
.dark .booklet-detail-empty {
    color: #a3a3a3;
}

.tw-dark .booklet-detail-drop-rate,
.dark .booklet-detail-drop-rate {
    background: rgba(16, 185, 129, .16);
    color: #a7f3d0;
}

.tw-dark .booklet-detail-mini,
.dark .booklet-detail-mini {
    border-color: #2a2a2a;
    background: #171717;
    color: #f3f4f6;
}

.tw-dark .booklet-detail-mini:hover,
.dark .booklet-detail-mini:hover {
    border-color: #3b82f6;
    background: #202020;
}

.tw-dark .booklet-appearance-color-card,
.dark .booklet-appearance-color-card {
    border-color: #2a2a2a;
    background: #171717;
    color: #f3f4f6;
}

.tw-dark .booklet-appearance-color-card:hover,
.dark .booklet-appearance-color-card:hover {
    border-color: #3b82f6;
    background: #202020;
}

.tw-dark .booklet-appearance-color-preview,
.dark .booklet-appearance-color-preview {
    background: #101010;
}

.tw-dark .booklet-detail-mini-text b,
.dark .booklet-detail-mini-text b,
.tw-dark .booklet-detail-mini-meta b,
.dark .booklet-detail-mini-meta b {
    color: #7dd3fc;
}

.tw-dark .booklet-detail-mini-text em,
.dark .booklet-detail-mini-text em,
.tw-dark .booklet-detail-mini-meta em,
.dark .booklet-detail-mini-meta em {
    color: #a3a3a3;
}

.tw-dark .booklet-npc-shop-id,
.dark .booklet-npc-shop-id {
    color: #737373;
}

.tw-dark .booklet-detail-mini-text .booklet-npc-shop-price,
.dark .booklet-detail-mini-text .booklet-npc-shop-price {
    color: #d4d4d4;
}

.tw-dark .booklet-npc-shop-map,
.dark .booklet-npc-shop-map {
    color: #7dd3fc;
}

.tw-dark .booklet-npc-shop-map.is-static,
.dark .booklet-npc-shop-map.is-static,
.tw-dark .booklet-npc-shop-map > small,
.dark .booklet-npc-shop-map > small {
    color: #a3a3a3;
}

.tw-dark .booklet-relation-block,
.dark .booklet-relation-block,
.tw-dark .booklet-relation-group,
.dark .booklet-relation-group {
    border-color: #2a2a2a;
    background: #101010;
}

.tw-dark .booklet-relation-block h3,
.dark .booklet-relation-block h3,
.tw-dark .booklet-relation-group h3,
.dark .booklet-relation-group h3,
.tw-dark .booklet-recipe-head b,
.dark .booklet-recipe-head b {
    color: #f3f4f6;
}

.tw-dark .booklet-recipe-card,
.dark .booklet-recipe-card {
    border-color: #2a2a2a;
    background: #171717;
}

.tw-dark .booklet-detail-chip,
.dark .booklet-detail-chip {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
}

.tw-dark .booklet-detail-chip.is-blue,
.dark .booklet-detail-chip.is-blue {
    border-color: rgba(59, 130, 246, .24);
    background: rgba(59, 130, 246, .18);
    color: #bfdbfe;
}

.tw-dark .booklet-detail-chip.is-emerald,
.dark .booklet-detail-chip.is-emerald {
    border-color: rgba(16, 185, 129, .24);
    background: rgba(16, 185, 129, .18);
    color: #a7f3d0;
}

.tw-dark .booklet-detail-chip.is-purple,
.dark .booklet-detail-chip.is-purple {
    border-color: rgba(168, 85, 247, .28);
    background: rgba(168, 85, 247, .18);
    color: #e9d5ff;
}

.tw-dark .booklet-detail-chip.is-amber,
.dark .booklet-detail-chip.is-amber {
    border-color: rgba(245, 158, 11, .3);
    background: rgba(245, 158, 11, .18);
    color: #fde68a;
}

.tw-dark .booklet-recipe-head span,
.dark .booklet-recipe-head span {
    color: #a3a3a3;
}

.tw-dark .booklet-sticky-pager .gear-page-btn,
.dark .booklet-sticky-pager .gear-page-btn {
    color: #cbd5e1;
}

.tw-dark .booklet-sticky-pager .gear-page-btn:hover,
.dark .booklet-sticky-pager .gear-page-btn:hover,
.tw-dark .booklet-sticky-pager .gear-page-btn.is-active,
.dark .booklet-sticky-pager .gear-page-btn.is-active {
    background: #2563eb;
    color: #fff;
}

.tw-dark .booklet-sticky-pager .gear-page-btn.is-disabled:hover,
.dark .booklet-sticky-pager .gear-page-btn.is-disabled:hover {
    background: transparent;
    color: #cbd5e1;
}

.tw-dark .booklet-detail-stat.is-emerald,
.dark .booklet-detail-stat.is-emerald {
    background: rgba(16, 185, 129, .12);
}

.tw-dark .booklet-detail-stat.is-emerald b,
.dark .booklet-detail-stat.is-emerald b {
    color: #a7f3d0;
}

.tw-dark .booklet-detail-zoombar,
.dark .booklet-detail-zoombar {
    background: #172033;
    color: #cbd5e1;
}

.tw-dark .booklet-detail-zoombar b,
.dark .booklet-detail-zoombar b,
.tw-dark .booklet-detail-zoombar button,
.dark .booklet-detail-zoombar button {
    background: #101010;
    color: #f3f4f6;
}

.tw-dark .booklet-clear-filter-btn,
.dark .booklet-clear-filter-btn {
    border-color: rgba(59, 130, 246, .24);
    background: rgba(59, 130, 246, .16);
    color: #93c5fd;
}

.tw-dark .booklet-clear-filter-btn:hover,
.dark .booklet-clear-filter-btn:hover {
    border-color: rgba(96, 165, 250, .38);
    background: rgba(59, 130, 246, .24);
}

.tw-dark .booklet-view-switch,
.dark .booklet-view-switch {
    border-color: #2a2a2a;
    background: #151515;
}

.tw-dark .booklet-view-switch-btn,
.dark .booklet-view-switch-btn {
    color: #94a3b8;
}

.tw-dark .booklet-view-switch-btn:hover,
.dark .booklet-view-switch-btn:hover {
    background: #202020;
    color: #f3f4f6;
}

.tw-dark .booklet-view-switch-btn.is-active,
.dark .booklet-view-switch-btn.is-active {
    background: #262626;
    color: #93c5fd;
    box-shadow: none;
}

.tw-dark .booklet-card-empty,
.dark .booklet-card-empty {
    color: #94a3b8;
}

.tw-dark .booklet-item-card,
.dark .booklet-item-card {
    border-color: #2b2b2b;
    background: #141414;
    color: #f3f4f6;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset;
}

.tw-dark .booklet-item-card:hover,
.dark .booklet-item-card:hover {
    border-color: #3b82f6;
    background: #181818;
}

.tw-dark .booklet-item-card-head,
.dark .booklet-item-card-head {
    border-bottom-color: #2a2a2a;
    background: #1e1e1e;
}

.tw-dark .booklet-item-card-icon,
.dark .booklet-item-card-icon {
    border-color: #333842;
    background: #0f0f0f;
    color: #94a3b8;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
}

.tw-dark .booklet-item-card-meta,
.dark .booklet-item-card-meta {
    color: #9ca3af;
}

.tw-dark .booklet-item-card-meta > span,
.dark .booklet-item-card-meta > span {
    border: 1px solid #303030;
    background: #151515;
    color: #cbd5e1;
}

.tw-dark .booklet-list-copy,
.dark .booklet-list-copy {
    color: #94a3b8;
}

.tw-dark .booklet-list-copy:hover,
.dark .booklet-list-copy:hover {
    border-color: #1e3a8a;
    background: rgba(37, 99, 235, .16);
    color: #93c5fd;
}

.tw-dark .booklet-uiv8-list .gear-page-btn,
.dark .booklet-uiv8-list .gear-page-btn {
    color: #cbd5e1;
}

.tw-dark .booklet-sticky-pager-inner,
.dark .booklet-sticky-pager-inner {
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}

.tw-dark .booklet-uiv8-list .gear-page-btn:hover:not(:disabled),
.dark .booklet-uiv8-list .gear-page-btn:hover:not(:disabled),
.tw-dark .booklet-uiv8-list .gear-page-btn.is-active,
.dark .booklet-uiv8-list .gear-page-btn.is-active {
    background: #7c3aed;
    color: #fff;
}

.tw-dark .pagermxdc li a,
.dark .pagermxdc li a,
.tw-dark .pagermxdc li span,
.dark .pagermxdc li span {
    border-color: #2a2a2a;
    background: #171717;
    color: #cbd5e1;
}

.tw-dark .pagermxdc li a:hover,
.dark .pagermxdc li a:hover,
.tw-dark .pagermxdc li .now_page,
.dark .pagermxdc li .now_page,
.tw-dark .pagermxdc li a.now_page,
.dark .pagermxdc li a.now_page {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #fff;
}

html.tw-dark body,
body.tw-dark,
html.dark body,
body.dark {
    background: #101010;
}

html.tw-dark .booklet-uiv8-list,
body.tw-dark .booklet-uiv8-list,
html.dark .booklet-uiv8-list,
body.dark .booklet-uiv8-list {
    color: #f3f4f6;
}
.booklet-item-filter-grid {
    display: grid;
    gap: 8px;
}

.booklet-item-results-panel {
    overflow: visible;
}

.booklet-item-filter-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
}

.booklet-item-filter-chips {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.booklet-item-filter-chips > * {
    flex: 0 0 auto;
}

.booklet-item-filter-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 767px) {
    .booklet-item-filter-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .booklet-item-filter-actions {
        flex-wrap: wrap;
    }
}

.booklet-appearance-gender-filter {
    width: 94px;
    height: 32px;
    padding-right: 8px;
    padding-left: 9px;
    font-size: 12px;
}

.booklet-appearance-gender-popover {
    width: 156px;
}

.booklet-gender-option-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #94a3b8;
}

.booklet-gender-option-dot.is-male { background: #3b82f6; }
.booklet-gender-option-dot.is-female { background: #f43f5e; }

.booklet-equipment-number-input {
    height: 34px;
    width: 100%;
    border: 1px solid #dbe2ea;
    border-radius: 6px;
    background: #fff;
    padding: 0 9px;
    color: #172033;
    font-size: 13px;
    outline: none;
}

.booklet-equipment-filter-popover {
    z-index: 50;
    width: 300px;
}

.booklet-equipment-filter-popover.is-level {
    width: 280px;
}

.booklet-equipment-number-input:focus {
    border-color: #2563eb;
}

html.dark .booklet-equipment-number-input,
body.dark .booklet-equipment-number-input,
body.tw-dark .booklet-equipment-number-input {
    border-color: #343a46;
    background: #202020;
    color: #f3f4f6;
}

@media (max-width: 639px) {
    .booklet-equipment-filter-popover {
        position: fixed !important;
        top: 50% !important;
        right: 16px !important;
        left: 16px !important;
        width: auto !important;
        transform: translateY(-50%);
    }
}

@media (min-width: 1024px) {
    .booklet-item-filter-grid {
        grid-template-columns: minmax(260px, 1fr) 140px 150px 170px;
    }

    .booklet-item-filter-grid.is-equipment {
        grid-template-columns: minmax(260px, 1fr) 140px 150px 170px;
    }

    .booklet-item-filter-grid.is-appearance {
        grid-template-columns: minmax(260px, 1fr) 140px 150px 170px;
    }
}

.booklet-appearance-preview-thumb {
    width: 76px !important;
    height: 76px !important;
    border-width: 0 !important;
    background: linear-gradient(180deg, rgba(248, 250, 252, .92), rgba(255, 255, 255, .98));
}

.booklet-appearance-preview-image {
    width: auto !important;
    height: auto !important;
    max-width: 68px !important;
    max-height: 68px !important;
}

.booklet-appearance-gender-male,
.booklet-appearance-preview-thumb.booklet-appearance-gender-male {
    background: #dbeafe !important;
}

.booklet-appearance-gender-female,
.booklet-appearance-preview-thumb.booklet-appearance-gender-female {
    background: #ffe4e6 !important;
}

.booklet-appearance-gender-neutral,
.booklet-appearance-preview-thumb.booklet-appearance-gender-neutral {
    background: #f1f5f9 !important;
}

.tw-dark .booklet-appearance-preview-thumb,
.dark .booklet-appearance-preview-thumb {
    background: linear-gradient(180deg, rgba(24, 24, 24, .95), rgba(17, 17, 17, .98));
}

.tw-dark .booklet-appearance-gender-male,
.dark .booklet-appearance-gender-male {
    background: #172554 !important;
}

.tw-dark .booklet-appearance-gender-female,
.dark .booklet-appearance-gender-female {
    background: #4c1d2b !important;
}

.tw-dark .booklet-appearance-gender-neutral,
.dark .booklet-appearance-gender-neutral {
    background: #1e293b !important;
}
.booklet-mob-table .booklet-uiv8-sort {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.booklet-mob-table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
}

.booklet-mob-column-picker {
    position: relative;
}

.booklet-mob-level-picker {
    position: relative;
}

.booklet-mob-level-trigger {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #dbe3ef;
    border-radius: 5px;
    background: #fff;
    padding: 0 11px;
    color: #475569;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.booklet-mob-level-trigger:hover,
.booklet-mob-level-trigger.is-active,
.booklet-mob-level-trigger.is-open {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
    box-shadow: none;
}

.booklet-mob-level-chevron {
    font-size: 16px;
    transition: transform .16s ease;
}

.booklet-mob-level-trigger.is-open .booklet-mob-level-chevron { transform: rotate(180deg); }

.booklet-mob-level-menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + 9px);
    right: 0;
    width: min(390px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid #edf0f4;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
}

.booklet-mob-level-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf1f7;
    background: #fff;
    padding: 11px 14px;
}

.booklet-mob-level-menu-head > div { display: flex; align-items: center; gap: 7px; color: #334155; font-size: 12px; }
.booklet-mob-level-menu-head > div > span { color: #2563eb; font-size: 16px; }
.booklet-mob-level-menu-head button { color: #64748b; font-size: 11px; }
.booklet-mob-level-menu-head button:hover { color: #dc2626; }

.booklet-mob-level-custom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 11px 14px 12px;
}

.booklet-mob-level-custom label span { display: block; margin-bottom: 4px; color: #64748b; font-size: 11px; font-weight: 600; }
.booklet-mob-level-custom input {
    width: 100%;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: #fff;
    padding: 0 10px;
    color: #0f172a;
    font-size: 13px;
    outline: 0;
}
.booklet-mob-level-custom input:focus { border-color: #93c5fd; background: #fff; box-shadow: none; }
.booklet-mob-level-range-line { height: 1px; margin-bottom: 16px; background: #cbd5e1; }
.booklet-mob-level-apply {
    height: 32px;
    border-radius: 5px;
    background: #2563eb;
    padding: 0 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}
.booklet-mob-level-apply:hover { filter: brightness(1.06); }

.booklet-mob-level-presets-title { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 8px; color: #334155; font-size: 12px; font-weight: 700; }
.booklet-mob-level-presets-title small { color: #94a3b8; font-size: 10px; font-weight: 400; }
.booklet-mob-level-presets {
    display: grid;
    max-height: 162px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    overflow-y: auto;
    padding: 0 14px 14px;
}
.booklet-mob-level-presets button {
    min-height: 34px;
    border: 1px solid #e5eaf1;
    border-radius: 5px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    transition: all .14s ease;
}
.booklet-mob-level-presets button:hover { border-color: #bfdbfe; background: #f8fbff; color: #2563eb; }
.booklet-mob-level-presets button.is-active { border-color: #93c5fd; background: #eff6ff; color: #2563eb; box-shadow: none; }

.booklet-mob-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.booklet-mob-search-row > label,
.booklet-mob-search-row > button,
.booklet-mob-condition-picker > button,
.booklet-mob-list-toolbar-main > span:first-child,
.booklet-mob-list-toolbar-actions > .tw-inline-flex {
    border-radius: 5px !important;
}

.booklet-mob-search-row label button,
.booklet-mob-list-toolbar-actions > .tw-inline-flex > button {
    border-radius: 4px !important;
}

.booklet-mob-condition-menu {
    width: 220px;
}

.booklet-mob-condition-check {
    flex: 0 0 16px;
    margin-left: 12px;
}

@media (min-width: 1024px) {
    .booklet-mob-search-row {
        grid-template-columns: minmax(260px, 1fr) 110px 150px;
    }
}

.booklet-mob-list-toolbar {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 0;
    padding: 4px 0;
    background: transparent;
}

.booklet-mob-list-toolbar-main {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.booklet-mob-list-toolbar-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.booklet-mob-map-filter-trigger {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #dbe3ef;
    border-radius: 5px;
    background: #fff;
    padding: 0 11px;
    color: #475569;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.booklet-mob-map-filter-trigger:hover,
.booklet-mob-map-filter-trigger.is-active {
    border-color: #60a5fa;
    background: #eff6ff;
    color: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .1);
}

.booklet-mob-map-filter-count {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #2563eb;
    padding: 0 5px;
    color: #fff;
    font-size: 11px;
}

.booklet-mob-location-only-trigger {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #dbe3ef;
    border-radius: 5px;
    background: #fff;
    padding: 0 9px 0 10px;
    color: #475569;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.booklet-mob-location-only-trigger:hover,
.booklet-mob-location-only-trigger.is-active {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #2563eb;
}

.booklet-mob-location-only-check {
    display: inline-flex;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe3ef;
    border-radius: 4px;
    background: #fff;
    color: #fff;
    font-size: 12px;
}

.booklet-mob-location-only-trigger.is-active .booklet-mob-location-only-check {
    border-color: #2563eb;
    background: #2563eb;
}

.booklet-mob-filter-modal {
    position: fixed;
    z-index: 1400;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .62);
    padding: 20px;
    backdrop-filter: blur(3px);
}

.booklet-mob-filter-dialog {
    display: flex;
    width: min(960px, 100%);
    height: min(760px, calc(100vh - 40px));
    max-height: min(760px, calc(100vh - 40px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 6px;
    background: #f8fafc;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .28);
}

.booklet-mob-filter-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    padding: 10px 14px;
}

.booklet-mob-filter-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.booklet-mob-filter-heading-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #2563eb;
    color: #fff;
    font-size: 20px;
    box-shadow: none;
}

.booklet-mob-filter-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
}

.booklet-mob-filter-close {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #64748b;
    font-size: 18px;
}

.booklet-mob-filter-close:hover { background: #e2e8f0; color: #0f172a; }

.booklet-mob-filter-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 14px 14px;
}

.booklet-mob-filter-search {
    display: flex;
    height: 36px;
    align-items: center;
    gap: 9px;
    border: 1px solid #dbe3ef;
    border-radius: 5px;
    background: #fff;
    padding: 0 12px;
    color: #94a3b8;
    box-shadow: none;
}

.booklet-mob-filter-search:focus-within { border-color: #93c5fd; box-shadow: none; }
.booklet-mob-filter-search input { min-width: 0; height: 100%; flex: 1; border: 0; background: transparent; color: #0f172a; outline: 0; }
.booklet-mob-filter-search button { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 4px; }
.booklet-mob-filter-search button:hover { background: #f1f5f9; }

.booklet-mob-filter-section { margin-top: 12px; }
.booklet-mob-list-overview { margin-bottom: 10px; }
.booklet-mob-list-layout { gap: 10px; }
.booklet-item-list-overview { margin-bottom: 10px; }
.booklet-item-list-layout { gap: 10px; }
.booklet-mob-filter-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.booklet-mob-filter-section-title > span { color: #0f172a; font-size: 14px; font-weight: 700; }
.booklet-mob-filter-section-title > small { color: #64748b; font-size: 11px; text-align: right; }
.booklet-mob-filter-worlds,
.booklet-mob-filter-regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.booklet-mob-filter-worlds button,
.booklet-mob-filter-regions button {
    display: flex;
    min-width: 0;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #dbe3ef;
    border-radius: 5px;
    background: #fff;
    padding: 6px 9px;
    color: #334155;
    font-size: 13px;
    transition: all .15s ease;
}
.booklet-mob-filter-worlds button:hover,
.booklet-mob-filter-regions button:hover { border-color: #93c5fd; background: #f8fbff; }
.booklet-mob-filter-worlds button.is-active,
.booklet-mob-filter-regions button.is-active { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; box-shadow: none; }
.booklet-mob-filter-worlds button small,
.booklet-mob-filter-regions button small { flex: 0 0 auto; color: #94a3b8; font-size: 10px; }
.booklet-mob-filter-regions button.is-special:not(.is-active) { background: #fffbeb; color: #92400e; }

.booklet-mob-filter-map-section { min-height: 150px; }
.booklet-mob-filter-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.booklet-mob-filter-maps > button {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    border: 1px solid #dbe3ef;
    border-radius: 5px;
    background: #fff;
    padding: 7px 9px;
    text-align: left;
    transition: all .15s ease;
}
.booklet-mob-filter-maps > button:hover { border-color: #93c5fd; box-shadow: none; }
.booklet-mob-filter-maps > button.is-active { border-color: #3b82f6; background: #eff6ff; }
.booklet-mob-filter-map-check { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid #cbd5e1; border-radius: 4px; color: #fff; font-size: 13px; }
.booklet-mob-filter-maps > button.is-active .booklet-mob-filter-map-check { border-color: #2563eb; background: #2563eb; }
.booklet-mob-filter-map-copy { min-width: 0; }
.booklet-mob-filter-map-copy b { display: block; overflow: hidden; color: #1e293b; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.booklet-mob-filter-map-copy small { display: block; margin-top: 2px; color: #94a3b8; font-size: 10px; }
.booklet-mob-filter-state { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #cbd5e1; border-radius: 5px; color: #64748b; font-size: 13px; }
.booklet-mob-filter-state.is-error { border-color: #fecaca; background: #fff1f2; color: #be123c; }

.booklet-mob-filter-foot {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    padding: 10px 14px;
}
.booklet-mob-filter-foot > div { display: flex; min-width: 0; align-items: center; gap: 8px; color: #475569; font-size: 12px; }
.booklet-mob-filter-foot > div:first-child > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booklet-mob-filter-reset,
.booklet-mob-filter-apply { min-height: 32px; border-radius: 5px; padding: 0 13px; font-size: 12px; font-weight: 500; }
.booklet-mob-filter-reset { border: 1px solid #dbe3ef; color: #475569; }
.booklet-mob-filter-reset:hover { background: #f1f5f9; }
.booklet-mob-filter-apply { background: #2563eb; color: #fff; box-shadow: none; }
.booklet-mob-filter-apply:hover { filter: brightness(1.05); }

.tw-dark .booklet-mob-map-filter-trigger,
.dark .booklet-mob-map-filter-trigger { border-color: #3a3a44; background: #202024; color: #cbd5e1; }
.tw-dark .booklet-mob-location-only-trigger,
.dark .booklet-mob-location-only-trigger { border-color: #3a3a44; background: #202024; color: #cbd5e1; }
.tw-dark .booklet-mob-location-only-trigger:hover,
.tw-dark .booklet-mob-location-only-trigger.is-active,
.dark .booklet-mob-location-only-trigger:hover,
.dark .booklet-mob-location-only-trigger.is-active { border-color: #3b82f6; background: rgba(59, 130, 246, .14); color: #93c5fd; }
.tw-dark .booklet-mob-location-only-check,
.dark .booklet-mob-location-only-check { border-color: #4b5563; background: #202024; }
.tw-dark .booklet-mob-location-only-trigger.is-active .booklet-mob-location-only-check,
.dark .booklet-mob-location-only-trigger.is-active .booklet-mob-location-only-check { border-color: #3b82f6; background: #2563eb; color: #fff; }
.tw-dark .booklet-mob-level-trigger,
.dark .booklet-mob-level-trigger { border-color: #3a3a44; background: #202024; color: #cbd5e1; }
.tw-dark .booklet-mob-level-trigger:hover,
.tw-dark .booklet-mob-level-trigger.is-active,
.tw-dark .booklet-mob-level-trigger.is-open,
.dark .booklet-mob-level-trigger:hover,
.dark .booklet-mob-level-trigger.is-active,
.dark .booklet-mob-level-trigger.is-open { border-color: #3b82f6; background: rgba(59, 130, 246, .14); color: #93c5fd; }
.tw-dark .booklet-mob-level-menu,
.dark .booklet-mob-level-menu { border-color: #34343b; background: #1b1b20; }
.tw-dark .booklet-mob-level-menu-head,
.dark .booklet-mob-level-menu-head { border-color: #34343b; background: #202024; }
.tw-dark .booklet-mob-level-menu-head > div,
.dark .booklet-mob-level-menu-head > div { color: #e2e8f0; }
.tw-dark .booklet-mob-level-custom input,
.dark .booklet-mob-level-custom input { border-color: #3a3a44; background: #202024; color: #f1f5f9; }
.tw-dark .booklet-mob-level-presets-title,
.dark .booklet-mob-level-presets-title { color: #e2e8f0; }
.tw-dark .booklet-mob-level-presets button,
.dark .booklet-mob-level-presets button { border-color: #34343b; background: #202024; color: #cbd5e1; }
.tw-dark .booklet-mob-level-presets button:hover,
.tw-dark .booklet-mob-level-presets button.is-active,
.dark .booklet-mob-level-presets button:hover,
.dark .booklet-mob-level-presets button.is-active { border-color: #3b82f6; background: rgba(59, 130, 246, .14); color: #93c5fd; }
.tw-dark .booklet-mob-map-filter-trigger:hover,
.tw-dark .booklet-mob-map-filter-trigger.is-active,
.dark .booklet-mob-map-filter-trigger:hover,
.dark .booklet-mob-map-filter-trigger.is-active { border-color: #3b82f6; background: rgba(59, 130, 246, .14); color: #93c5fd; }
.tw-dark .booklet-mob-filter-dialog,
.dark .booklet-mob-filter-dialog { border-color: #3a3a44; background: #17171a; }
.tw-dark .booklet-mob-filter-head,
.dark .booklet-mob-filter-head { border-color: #34343b; background: #202024; }
.tw-dark .booklet-mob-filter-heading h2,
.dark .booklet-mob-filter-heading h2,
.tw-dark .booklet-mob-filter-section-title > span,
.dark .booklet-mob-filter-section-title > span { color: #f1f5f9; }
.tw-dark .booklet-mob-filter-search,
.dark .booklet-mob-filter-search,
.tw-dark .booklet-mob-filter-worlds button,
.dark .booklet-mob-filter-worlds button,
.tw-dark .booklet-mob-filter-regions button,
.dark .booklet-mob-filter-regions button,
.tw-dark .booklet-mob-filter-maps > button,
.dark .booklet-mob-filter-maps > button { border-color: #34343b; background: #202024; color: #cbd5e1; }
.tw-dark .booklet-mob-filter-search input,
.dark .booklet-mob-filter-search input,
.tw-dark .booklet-mob-filter-map-copy b,
.dark .booklet-mob-filter-map-copy b { color: #e2e8f0; }
.tw-dark .booklet-mob-filter-worlds button.is-active,
.dark .booklet-mob-filter-worlds button.is-active,
.tw-dark .booklet-mob-filter-regions button.is-active,
.dark .booklet-mob-filter-regions button.is-active,
.tw-dark .booklet-mob-filter-maps > button.is-active,
.dark .booklet-mob-filter-maps > button.is-active { border-color: #3b82f6; background: rgba(59, 130, 246, .14); color: #93c5fd; }
.tw-dark .booklet-mob-filter-foot,
.dark .booklet-mob-filter-foot { border-color: #34343b; background: #202024; }

@media (max-width: 767px) {
    .booklet-mob-filter-modal { align-items: flex-end; padding: 0; }
    .booklet-mob-filter-dialog { width: 100%; height: 92vh; max-height: 92vh; border-width: 1px 0 0; border-radius: 6px 6px 0 0; }
    .booklet-mob-filter-head { padding: 10px 12px; }
    .booklet-mob-filter-heading-icon { width: 32px; height: 32px; }
    .booklet-mob-filter-body { padding: 10px 12px 12px; }
    .booklet-mob-filter-worlds,
    .booklet-mob-filter-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booklet-mob-filter-maps { grid-template-columns: 1fr; }
    .booklet-mob-filter-section-title { align-items: flex-start; flex-direction: column; gap: 2px; }
    .booklet-mob-filter-section-title > small { text-align: left; }
    .booklet-mob-filter-foot { padding: 9px 12px; }
    .booklet-mob-filter-foot > div:first-child { display: none; }
    .booklet-mob-filter-foot > div:last-child { width: 100%; }
    .booklet-mob-filter-reset,
    .booklet-mob-filter-apply { flex: 1; }
}

.booklet-mob-toolbar-chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 5px;
    border: 1px solid #dbeafe;
    border-radius: 5px;
    padding: 3px 7px 3px 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
}

.booklet-mob-toolbar-chip:hover {
    border-color: #bfdbfe;
    background: #e8f1ff;
}

.booklet-mob-toolbar-chip.is-sort {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #6d28d9;
}

.booklet-mob-toolbar-chip-icon,
.booklet-mob-toolbar-chip-close {
    flex-shrink: 0;
    font-size: 14px;
}

.booklet-mob-toolbar-chip-close {
    opacity: .72;
}

.tw-dark .booklet-mob-list-toolbar,
.dark .booklet-mob-list-toolbar {
    border-color: transparent;
    background: transparent;
}

.tw-dark .booklet-mob-toolbar-chip,
.dark .booklet-mob-toolbar-chip {
    border-color: rgba(59, 130, 246, .24);
    background: rgba(59, 130, 246, .12);
    color: #93c5fd;
}

.tw-dark .booklet-mob-toolbar-chip.is-sort,
.dark .booklet-mob-toolbar-chip.is-sort {
    border-color: rgba(139, 92, 246, .28);
    background: rgba(139, 92, 246, .14);
    color: #c4b5fd;
}

@media (max-width: 720px) {
    .booklet-mob-list-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .booklet-mob-list-toolbar-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .booklet-mob-level-menu { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: calc(100vh - 24px); }
}

@media (max-width: 430px) {
    .booklet-mob-level-custom { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); }
    .booklet-mob-level-apply { grid-column: 1 / -1; }
    .booklet-mob-level-range-line { margin-bottom: 16px; }
    .booklet-mob-level-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 210px; }
}

.booklet-mob-column-trigger {
    display: inline-flex;
    height: 34px;
    align-items: center;
    gap: 7px;
    border: 1px solid #edf0f4;
    border-radius: 5px;
    padding: 0 10px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 400;
    box-shadow: none;
    transition: border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.booklet-mob-column-trigger:hover,
.booklet-mob-column-trigger.is-open {
    border-color: #dbe2eb;
    color: #2563eb;
    box-shadow: none;
}

.booklet-mob-column-trigger-icon {
    display: inline-grid;
    width: 17px;
    height: 15px;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    align-items: stretch;
    padding: 1px 0;
}

.booklet-mob-column-trigger-icon i {
    display: block;
    border-radius: 1px;
    background: currentColor;
    opacity: .72;
}

.booklet-mob-column-trigger-icon i:nth-child(2) {
    opacity: .42;
}

.booklet-mob-column-count {
    display: inline-flex;
    min-width: 34px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0 5px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
}

.booklet-mob-column-chevron {
    font-size: 17px;
    transition: transform .16s ease;
}

.booklet-mob-column-trigger.is-open .booklet-mob-column-chevron {
    transform: rotate(180deg);
}

.booklet-mob-column-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    width: min(430px, calc(100vw - 48px));
    overflow: hidden;
    border: 1px solid #edf0f4;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
}

.booklet-mob-column-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf1f7;
    padding: 11px 14px;
    color: #334155;
    font-size: 12px;
}

.booklet-mob-column-menu-head span:last-child {
    color: #64748b;
    font-size: 11px;
}

.booklet-mob-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 8px;
    padding: 10px;
}

.booklet-mob-column-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    border-radius: 7px;
    padding: 5px 8px;
    color: #475569;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    transition: background .14s ease, color .14s ease;
}

.booklet-mob-column-option:hover {
    background: #f8fafc;
    color: #1d4ed8;
}

.booklet-mob-column-option.is-active {
    color: #1d4ed8;
}

.booklet-mob-column-option.is-locked {
    cursor: default;
    color: #64748b;
}

.booklet-mob-column-option-icon {
    justify-self: center;
    font-size: 17px;
}

.booklet-mob-column-option-icon.is-glyph {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
}

.booklet-mob-column-check {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    justify-self: end;
    border: 1px solid #dbe3ef;
    border-radius: 5px;
    color: #2563eb;
    font-size: 13px;
}

.booklet-mob-column-option.is-active .booklet-mob-column-check {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.tw-dark .booklet-mob-column-trigger,
.dark .booklet-mob-column-trigger,
.tw-dark .booklet-mob-column-menu,
.dark .booklet-mob-column-menu {
    border-color: #2a2a2a;
    background: #202027;
    color: #e2e8f0;
}

.tw-dark .booklet-mob-column-menu-head,
.dark .booklet-mob-column-menu-head {
    border-color: #2a2a2a;
    color: #e2e8f0;
}

.tw-dark .booklet-mob-column-option,
.dark .booklet-mob-column-option {
    color: #cbd5e1;
}

.tw-dark .booklet-mob-column-option:hover,
.dark .booklet-mob-column-option:hover {
    background: rgba(255, 255, 255, .06);
    color: #93c5fd;
}

@media (max-width: 640px) {
    .booklet-mob-column-grid {
        grid-template-columns: minmax(0, 1fr);
        max-height: 360px;
        overflow-y: auto;
    }
}

.booklet-mob-table {
    table-layout: fixed;
}

.booklet-mob-table-id-head,
.booklet-mob-table-id {
    width: 72px;
    min-width: 72px;
    padding-right: 8px;
    padding-left: 8px;
}

.booklet-mob-table-name-head,
.booklet-mob-table-name {
    width: 214px;
    min-width: 214px;
    max-width: 214px;
    padding-right: 10px;
    padding-left: 16px;
}

.booklet-mob-table-row {
    transition: background .15s ease;
}

.booklet-mob-table-id {
    text-align: center;
}

.booklet-mob-table-id > span {
    display: inline-flex;
    min-width: 30px;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #64748b;
    font-size: 11px;
}

.booklet-mob-table-name {
    padding-top: 7px;
    padding-bottom: 7px;
}

.booklet-mob-table-entity {
    gap: 9px;
}

.booklet-mob-table-icon {
    width: 44px;
    height: 44px;
}

.booklet-mob-table-icon img {
    max-width: 38px;
    max-height: 38px;
}

.booklet-mob-table-name-link {
    width: fit-content;
    max-width: 142px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

.booklet-mob-name-tags {
    display: flex;
    max-width: 142px;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
}

.booklet-mob-name-tags.is-card {
    max-width: none;
    margin-top: 5px;
}

.booklet-mob-name-tag {
    display: inline-flex;
    height: 17px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: 0 4px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 400;
    line-height: 17px;
    white-space: nowrap;
}

.booklet-mob-name-tag.is-level { background: #fff7ed; color: #ea580c; }
.booklet-mob-name-tag.is-species { background: #ecfdf5; color: #047857; }
.booklet-mob-name-tag.is-boss { background: #fff1f2; color: #e11d48; }
.booklet-mob-name-tag.is-drop { background: #ecfdf5; color: #059669; }
.booklet-mob-name-tag.is-undead { background: #f5f3ff; color: #7c3aed; }
.booklet-mob-name-tag.is-blue { background: #eff6ff; color: #2563eb; }
.booklet-mob-name-tag.is-rose { background: #fff1f2; color: #e11d48; }
.booklet-mob-name-tag.is-slate { background: #f1f5f9; color: #475569; }

.tw-dark .booklet-mob-name-tag,
.dark .booklet-mob-name-tag { background: rgba(148, 163, 184, .13); color: #cbd5e1; }
.tw-dark .booklet-mob-name-tag.is-level,
.dark .booklet-mob-name-tag.is-level { background: rgba(249, 115, 22, .15); color: #fdba74; }
.tw-dark .booklet-mob-name-tag.is-species,
.dark .booklet-mob-name-tag.is-species,
.tw-dark .booklet-mob-name-tag.is-drop,
.dark .booklet-mob-name-tag.is-drop { background: rgba(16, 185, 129, .15); color: #6ee7b7; }
.tw-dark .booklet-mob-name-tag.is-boss,
.dark .booklet-mob-name-tag.is-boss,
.tw-dark .booklet-mob-name-tag.is-rose,
.dark .booklet-mob-name-tag.is-rose { background: rgba(244, 63, 94, .16); color: #fda4af; }
.tw-dark .booklet-mob-name-tag.is-undead,
.dark .booklet-mob-name-tag.is-undead { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
.tw-dark .booklet-mob-name-tag.is-blue,
.dark .booklet-mob-name-tag.is-blue { background: rgba(59, 130, 246, .16); color: #93c5fd; }

.booklet-mob-table .booklet-mob-col-level {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    padding-right: 6px;
    padding-left: 6px;
}

.booklet-mob-table-row > td:not(.booklet-mob-table-id):not(.booklet-mob-table-name) {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.booklet-mob-efficiency {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
}

.booklet-mob-efficiency.is-hpExp {
    color: #059669;
}

.booklet-mob-efficiency.is-physHpExp {
    color: #0284c7;
}

.booklet-mob-efficiency.is-magHpExp {
    color: #7c3aed;
}

.booklet-mob-location-link {
    color: #2563eb;
    font-size: 12px;
    font-weight: 400;
}

.booklet-mob-location-link:hover {
    text-decoration: underline;
}

.booklet-mob-attributes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    min-width: 96px;
}

.booklet-mob-attribute {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 6px;
    padding: 2px 7px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    font-weight: 400;
}

.booklet-mob-attribute.is-boss {
    background: #fff1f2;
    color: #be123c;
}

.booklet-mob-attribute.is-undead {
    background: #f5f3ff;
    color: #6d28d9;
}

.booklet-mob-attribute.is-element {
    background: #eff6ff;
    color: #1d4ed8;
}

.tw-dark .booklet-mob-attribute,
.dark .booklet-mob-attribute {
    background: rgba(16, 185, 129, .14);
    color: #6ee7b7;
}

.tw-dark .booklet-mob-attribute.is-boss,
.dark .booklet-mob-attribute.is-boss {
    background: rgba(244, 63, 94, .14);
    color: #fda4af;
}

.tw-dark .booklet-mob-attribute.is-undead,
.dark .booklet-mob-attribute.is-undead {
    background: rgba(139, 92, 246, .16);
    color: #c4b5fd;
}

.tw-dark .booklet-mob-attribute.is-element,
.dark .booklet-mob-attribute.is-element {
    background: rgba(59, 130, 246, .16);
    color: #93c5fd;
}

.booklet-mob-detail-layout {
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin-top: 16px;
}

.booklet-map-anchor-nav {
    position: sticky;
    top: 70px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    overflow: hidden;
    border: 0;
    padding: .5rem .6rem;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 5px 18px rgba(15, 23, 42, .07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.booklet-map-anchor-label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
    padding: 0 .25rem;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}
.booklet-map-anchor-label > span { color: #2563eb; font-size: 16px; }
.booklet-map-anchor-links {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    justify-content: safe center;
    gap: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.booklet-map-anchor-links::-webkit-scrollbar { display: none; }
.booklet-map-anchor-link {
    display: inline-flex;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    gap: .3rem;
    border: 0;
    border-radius: 7px;
    padding: 0 .65rem;
    background: transparent;
    color: #475569;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.booklet-map-anchor-link > span { color: #64748b; font-size: 15px; }
.booklet-map-anchor-comment-count {
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    padding: 0 5px;
    background: #eef2ff;
    color: #2563eb;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.booklet-map-anchor-link:hover { background: #eff6ff; color: #1d4ed8; transform: translateY(-1px); }
.booklet-map-anchor-link:hover > span { color: #2563eb; }
.booklet-map-anchor-link.is-active { background: #eaf2ff; color: #1d4ed8; font-weight: 600; }
.booklet-map-anchor-link.is-active > span { color: #2563eb; }
.booklet-map-anchor-target { scroll-margin-top: 130px; }
.booklet-mob-page-toolbar { margin-bottom: 10px !important; }
.booklet-mob-anchor-nav + .booklet-mob-detail-layout { margin-top: 10px; }
.booklet-mob-anchor-nav + .booklet-mob-detail-layout .booklet-mob-detail-sidebar { top: 130px; }
.booklet-npc-anchor-nav + .booklet-npc-detail-layout { margin-top: 10px; }
.booklet-npc-anchor-nav + .booklet-npc-detail-layout .booklet-npc-detail-sidebar { top: 130px; }
.booklet-item-anchor-nav + .booklet-item-detail-layout { margin-top: 10px; }
.booklet-item-anchor-nav + .booklet-item-detail-layout .booklet-item-detail-sidebar { top: 130px; }
.booklet-item-profile-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.booklet-map-anchor-target:target { animation: booklet-map-anchor-flash 1.2s ease-out; }
@keyframes booklet-map-anchor-flash {
    0% { box-shadow: 0 0 0 3px rgba(59, 130, 246, .32); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.tw-dark .booklet-map-anchor-nav,
.dark .booklet-map-anchor-nav { background: rgba(24, 24, 24, .94); box-shadow: 0 5px 18px rgba(0, 0, 0, .24); }
.tw-dark .booklet-map-anchor-label,
.dark .booklet-map-anchor-label { color: #cbd5e1; }
.tw-dark .booklet-map-anchor-label > span,
.dark .booklet-map-anchor-label > span { color: #7dd3fc; }
.tw-dark .booklet-map-anchor-link,
.dark .booklet-map-anchor-link { color: #cbd5e1; }
.tw-dark .booklet-map-anchor-link > span,
.dark .booklet-map-anchor-link > span { color: #94a3b8; }
.tw-dark .booklet-map-anchor-comment-count,
.dark .booklet-map-anchor-comment-count { background: rgba(14, 165, 233, .16); color: #7dd3fc; }
.tw-dark .booklet-map-anchor-link:hover,
.dark .booklet-map-anchor-link:hover { background: rgba(14, 165, 233, .12); color: #7dd3fc; }
.tw-dark .booklet-map-anchor-link.is-active,
.dark .booklet-map-anchor-link.is-active { background: rgba(14, 165, 233, .16); color: #7dd3fc; }

@media (max-width: 640px) {
    .booklet-map-anchor-nav { gap: .35rem; padding: .45rem; }
    .booklet-map-anchor-label { padding-left: .15rem; }
    .booklet-map-anchor-label > b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .booklet-map-anchor-link { transition: none; }
    .booklet-map-anchor-target:target { animation: none; }
}

.booklet-quest-detail-layout {
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    margin-top: 16px;
}

.booklet-quest-detail-sidebar {
    position: sticky;
    top: 78px;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 14px;
}

.booklet-quest-detail-content {
    min-width: 0;
}

.booklet-quest-list-card {
    position: relative;
}

.booklet-quest-card-accent {
    height: 4px;
    background: linear-gradient(90deg, #4f8df7, #41c7e8 55%, #42d39b);
}

.booklet-quest-card-head {
    padding: 14px 16px 10px;
}

.booklet-quest-card-title-row,
.booklet-quest-card-meta,
.booklet-quest-card-tags,
.booklet-quest-card-footer,
.booklet-quest-card-entry {
    display: flex;
    align-items: center;
}

.booklet-quest-card-title-row {
    justify-content: space-between;
    gap: 10px;
}

.booklet-quest-card-title-row h1 {
    display: inline-block;
    width: fit-content;
    min-width: 0;
    overflow: hidden;
    color: #0752a3;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-quest-card-meta {
    flex-shrink: 0;
    gap: 6px;
}

.booklet-quest-card-area,
.booklet-quest-card-level,
.booklet-quest-card-series,
.booklet-quest-card-order {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1.3;
}

.booklet-quest-card-area { background: #eff6ff; color: #2563eb; }
.booklet-quest-card-id { color: #64748b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.booklet-quest-card-tags { flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.booklet-quest-card-level { border: 1px solid #6ee7b7; background: #ecfdf5; color: #047857; }
.booklet-quest-card-series { background: #f5f3ff; color: #7c3aed; }
.booklet-quest-card-order { border: 1px solid #fcd34d; background: #fffbeb; color: #b45309; }

.booklet-quest-card-body {
    position: relative;
    display: flex;
    min-height: 285px;
    align-items: flex-end;
    padding: 16px 122px 18px 16px;
}

.booklet-quest-card-groups { position: relative; z-index: 2; display: grid; width: 100%; gap: 13px; }
.booklet-quest-card-label { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; color: #64748b; font-size: 12px; }
.booklet-quest-card-entries { display: grid; gap: 4px; }
.booklet-quest-card-entry { min-width: 0; height: 29px; gap: 4px; border-radius: 6px; padding: 3px 7px; background: #f6f8fb; font-size: 12px; }
.booklet-quest-card-entry-reward { background: #fffbeb; color: #92400e; }
.booklet-quest-card-entry-icon { display: inline-flex; flex: 0 0 22px; width: 22px; height: 22px; align-items: center; justify-content: center; font-size: 16px; }
.booklet-quest-card-entry-icon img { max-width: 20px; max-height: 20px; object-fit: contain; }
.booklet-quest-card-entry-count { flex-shrink: 0; color: #334155; font-variant-numeric: tabular-nums; }
.booklet-quest-card-entry-name { display: inline-block; width: fit-content; min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
.booklet-quest-card-empty { color: #94a3b8; font-size: 12px; }

.booklet-quest-card-npc {
    position: absolute;
    right: 10px;
    bottom: 5px;
    z-index: 1;
    display: flex;
    width: 122px;
    height: 180px;
    align-items: flex-end;
    justify-content: center;
}

.booklet-quest-card-npc img { width: 112px; height: 170px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(15, 23, 42, .12)); }
.booklet-quest-card-npc > span { color: #3b82f6; font-size: 64px; }

.booklet-quest-card-footer {
    position: relative;
    z-index: 3;
    justify-content: flex-start;
    gap: 12px;
    border-top: 1px solid #e5e7eb;
    padding: 10px 16px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
}

.dark .booklet-quest-card-title-row h1 { color: #7dd3fc; }
.dark .booklet-quest-card-area { background: rgba(59, 130, 246, .15); color: #7dd3fc; }
.dark .booklet-quest-card-level { border-color: rgba(52, 211, 153, .5); background: rgba(16, 185, 129, .12); color: #6ee7b7; }
.dark .booklet-quest-card-series { background: rgba(139, 92, 246, .15); color: #c4b5fd; }
.dark .booklet-quest-card-order { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .12); color: #fcd34d; }
.dark .booklet-quest-card-entry { background: #20242a; }
.dark .booklet-quest-card-entry-reward { background: rgba(245, 158, 11, .1); color: #fcd34d; }
.dark .booklet-quest-card-entry-count { color: #cbd5e1; }
.dark .booklet-quest-card-footer { border-top-color: #2a2a2a; background: #1f1f1f; }

.booklet-quest-series-panel { position: relative; }
.booklet-quest-series-head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e8edf3; padding: 14px 15px; background: linear-gradient(105deg,#fff,#f8fbff); }
.booklet-quest-series-head-icon { display: flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 7px; background: #f3e8ff; color: #7c3aed; font-size: 17px; }
.booklet-quest-series-kicker { margin-bottom: 1px; color: #8b5cf6; font-size: 10px; letter-spacing: .05em; }
.booklet-quest-series-head h2 { overflow: hidden; color: #26344b; font-size: 14px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.booklet-quest-series-count { margin-left: auto; flex-shrink: 0; border-radius: 999px; padding: 4px 8px; background: #f1f5f9; color: #64748b; font-size: 10px; }

.booklet-quest-series-list { position: relative; padding: 10px 12px 12px; }
.booklet-quest-series-list::before { content: ''; position: absolute; top: 24px; bottom: 26px; left: 28px; width: 2px; background: #dbe5f0; }
.booklet-quest-series-item { position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 8px; min-height: 56px; padding: 5px 4px; }
.booklet-quest-series-row-link { position: absolute; top: 5px; right: 4px; bottom: 5px; left: 44px; z-index: 2; border-radius: 7px; }
.booklet-quest-series-node { position: relative; z-index: 1; display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; align-self: center; border: 4px solid white; border-radius: 50%; background: #e8eef6; color: #64748b; font-size: 10px; font-weight: 500; box-shadow: 0 0 0 1px #dbe5f0; }
.booklet-quest-series-content { position: relative; z-index: 3; min-width: 0; align-self: center; border: 1px solid transparent; border-radius: 7px; padding: 7px 9px; pointer-events: none; transition: background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.booklet-quest-series-meta { margin-bottom: 2px; color: #94a3b8; font-size: 10px; }
.booklet-quest-series-name-row { display: flex; min-width: 0; align-items: center; gap: 7px; }
.booklet-quest-series-name { display: inline-block; width: fit-content; min-width: 0; overflow: hidden; color: #334155; font-size: 12px; font-weight: 400; pointer-events: auto; text-overflow: ellipsis; white-space: nowrap; }
.booklet-quest-series-name:hover { color: #2563eb; }
.booklet-quest-series-arrow { display: flex; width: 22px; height: 22px; margin-left: auto; flex: 0 0 22px; align-items: center; justify-content: center; border-radius: 5px; color: #94a3b8; }
.booklet-quest-series-item:not(.is-current) { cursor: pointer; }
.booklet-quest-series-item:not(.is-current):hover .booklet-quest-series-content { border-color: #dbeafe; background: #f8fbff; box-shadow: 0 5px 14px rgba(37,99,235,.07); transform: translateX(2px); }
.booklet-quest-series-item:not(.is-current):hover .booklet-quest-series-node { background: #dbeafe; color: #2563eb; box-shadow: 0 0 0 2px #dbeafe; }
.booklet-quest-series-item:not(.is-current):hover .booklet-quest-series-arrow { color: #2563eb; transform: translateX(2px); }
.booklet-quest-series-arrow { transition: color .16s ease,transform .16s ease; }
.booklet-quest-series-current { margin-left: auto; flex-shrink: 0; border-radius: 4px; padding: 2px 6px; background: #dbeafe; color: #2563eb; font-size: 9px; }
.booklet-quest-series-item.is-current .booklet-quest-series-node { background: #3b82f6; color: white; box-shadow: 0 0 0 2px #bfdbfe; }
.booklet-quest-series-item.is-current .booklet-quest-series-content { border: 1px solid #bfdbfe; background: linear-gradient(100deg,#eff6ff,#f5fbff); }
.booklet-quest-series-item.is-current .booklet-quest-series-meta { color: #3b82f6; }
.booklet-quest-series-item.is-current .booklet-quest-series-name { color: #0752a3; font-weight: 500; }

.dark .booklet-quest-series-head { border-bottom-color: #2e3440; background: linear-gradient(105deg,#242424,#20262d); }
.dark .booklet-quest-series-head h2,.dark .booklet-quest-series-name { color: #dbe4ef; }
.dark .booklet-quest-series-count { background: #2b3037; color: #aab4c2; }
.dark .booklet-quest-series-list::before { background: #343b46; }
.dark .booklet-quest-series-node { border-color: #222; background: #303741; box-shadow: 0 0 0 1px #414a57; }
.dark .booklet-quest-series-item:not(.is-current):hover .booklet-quest-series-content { border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.08); box-shadow: none; }
.dark .booklet-quest-series-item:not(.is-current):hover .booklet-quest-series-node { background: rgba(59,130,246,.25); color: #7dd3fc; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
.dark .booklet-quest-series-item.is-current .booklet-quest-series-content { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.11); }
.dark .booklet-quest-series-item.is-current .booklet-quest-series-name { color: #7dd3fc; }

.booklet-quest-location-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e5e7eb; padding: 18px 20px; }
.booklet-quest-location-intro h2 { color: #172033; font-size: 19px; font-weight: 600; line-height: 1.35; }
.booklet-quest-location-intro p { margin-top: 4px; color: #64748b; font-size: 13px; }
.booklet-quest-location-intro > span { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; border-radius: 6px; padding: 6px 10px; background: #eff6ff; color: #2563eb; font-size: 12px; }
.booklet-quest-location-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 16px; background: #f8fafc; }

.booklet-quest-location-card { overflow: hidden; min-width: 0; border: 1px solid #dfe7f0; border-radius: 9px; background: white; box-shadow: 0 4px 14px rgba(15,23,42,.045); transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.booklet-quest-location-card:hover { border-color: #bfdbfe; box-shadow: 0 10px 26px rgba(37,99,235,.09); transform: translateY(-1px); }
.booklet-quest-location-media { position: relative; height: 190px; overflow: hidden; background: #e8eef5; }
.booklet-quest-location-map { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.booklet-quest-location-card:hover .booklet-quest-location-map { transform: scale(1.018); }
.booklet-quest-location-empty { display: flex; height: 100%; align-items: center; justify-content: center; color: #64748b; font-size: 13px; }
.booklet-quest-location-shade { position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(15,23,42,.16),transparent 35%,rgba(15,23,42,.2)); pointer-events: none; }
.booklet-quest-location-type,.booklet-quest-location-tool { position: absolute; top: 12px; z-index: 4; display: inline-flex; height: 30px; align-items: center; gap: 5px; border-radius: 6px; padding: 0 9px; font-size: 11px; box-shadow: 0 4px 12px rgba(15,23,42,.12); backdrop-filter: blur(5px); }
.booklet-quest-location-type { left: 12px; background: rgba(15,23,42,.72); color: white; }
.booklet-quest-location-tool { right: 12px; background: rgba(255,255,255,.94); color: #334155; }
.booklet-quest-location-tool:hover { color: #2563eb; }
.booklet-quest-location-marker { position: absolute; display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; overflow: visible; transform: translate(-50%,-50%); }
.booklet-quest-location-marker::before,.booklet-quest-location-marker::after { content: ''; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.booklet-quest-location-marker::before { inset: 5px; border: 2px solid rgba(255,255,255,.95); background: rgba(59,130,246,.18); box-shadow: 0 0 0 2px rgba(37,99,235,.65),0 0 15px rgba(59,130,246,.72); animation: booklet-quest-target-blink 1.35s ease-in-out infinite; }
.booklet-quest-location-marker::after { inset: 4px; border: 2px solid rgba(96,165,250,.9); animation: booklet-quest-target-ring 1.7s ease-out infinite; }
.booklet-quest-location-marker img,.booklet-quest-location-marker > span { animation: booklet-quest-target-icon 1.35s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(15,23,42,.35)); }

@keyframes booklet-quest-target-blink {
    0%,100% { opacity: .62; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes booklet-quest-target-ring {
    0% { opacity: .9; transform: scale(.7); }
    72%,100% { opacity: 0; transform: scale(1.65); }
}

@keyframes booklet-quest-target-icon {
    0%,100% { filter: brightness(1) drop-shadow(0 3px 4px rgba(15,23,42,.35)); }
    50% { filter: brightness(1.16) drop-shadow(0 0 8px rgba(255,255,255,.9)); }
}

.booklet-quest-location-body { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 12px; padding: 14px; }
.booklet-quest-location-summary,.booklet-quest-location-place { display: flex; min-width: 0; align-items: center; gap: 10px; }
.booklet-quest-location-place { border-left: 1px solid #e8edf3; padding-left: 12px; }
.booklet-quest-location-entity-icon,.booklet-quest-location-place-icon { display: flex; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; border-radius: 8px; background: #eff6ff; color: #2563eb; font-size: 20px; }
.booklet-quest-location-entity-icon img { max-width: 38px; max-height: 38px; object-fit: contain; }
.booklet-quest-location-place-icon { width: 38px; height: 38px; flex-basis: 38px; background: #ecfdf5; color: #059669; }
.booklet-quest-location-eyebrow { margin-bottom: 2px; color: #94a3b8; font-size: 10px; }
.booklet-quest-location-entity-name,.booklet-quest-location-map-name { display: inline-block; width: fit-content; max-width: 100%; overflow: hidden; color: #0752a3; font-size: 13px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.booklet-quest-location-entity-name:hover,.booklet-quest-location-map-name:hover { color: #2563eb; }
.booklet-quest-location-map-name { color: #334155; }
.booklet-quest-location-map-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 2px; color: #94a3b8; font-size: 10px; }

.booklet-quest-location-route { grid-column: 1/-1; border-radius: 8px; padding: 10px 11px; background: #f6f8fb; }
.booklet-quest-location-route-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.booklet-quest-location-route-head > div { display: flex; align-items: center; gap: 5px; color: #475569; font-size: 11px; font-weight: 500; }
.booklet-quest-location-route-head > div > span { color: #2563eb; font-size: 15px; }
.booklet-quest-location-route-head small { margin-left: 3px; color: #94a3b8; font-size: 10px; font-weight: 400; }
.booklet-quest-location-route-head button { display: flex; width: 27px; height: 27px; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: 6px; background: white; color: #64748b; }
.booklet-quest-location-route-head button:hover { border-color: #bfdbfe; color: #2563eb; }
.booklet-quest-location-route-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.booklet-quest-location-route-step { border: 1px solid #e2e8f0; border-radius: 5px; padding: 4px 7px; background: white; color: #475569; font-size: 10px; }
.booklet-quest-location-route-step.is-destination { border-color: #2563eb; background: #2563eb; color: white; }
.booklet-quest-location-route-arrow { color: #94a3b8; font-size: 12px; }

.dark .booklet-quest-location-intro { border-bottom-color: #2a2a2a; }
.dark .booklet-quest-location-intro h2 { color: #f1f5f9; }
.dark .booklet-quest-location-intro > span { background: rgba(59,130,246,.14); color: #7dd3fc; }
.dark .booklet-quest-location-grid { background: rgba(0,0,0,.1); }
.dark .booklet-quest-location-card { border-color: #303741; background: #222; }
.dark .booklet-quest-location-card:hover { border-color: rgba(59,130,246,.42); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.dark .booklet-quest-location-entity-icon { background: rgba(59,130,246,.14); color: #7dd3fc; }
.dark .booklet-quest-location-place-icon { background: rgba(16,185,129,.12); color: #6ee7b7; }
.dark .booklet-quest-location-place { border-left-color: #343b46; }
.dark .booklet-quest-location-entity-name { color: #7dd3fc; }
.dark .booklet-quest-location-map-name { color: #e2e8f0; }
.dark .booklet-quest-location-route { background: #292e35; }
.dark .booklet-quest-location-route-head > div { color: #dbe4ef; }
.dark .booklet-quest-location-route-head button,.dark .booklet-quest-location-route-step { border-color: #3a424e; background: #222; color: #cbd5e1; }
.dark .booklet-quest-location-route-step.is-destination { border-color: #3b82f6; background: #2563eb; color: white; }

.quest-map-modal-scroll { width: 100%; max-height: min(55vh,540px); overflow: hidden; overscroll-behavior: contain; touch-action: none; user-select: none; background: #e8edf3; }
.quest-map-modal-scroll.is-scrollable { cursor: grab; }
.quest-map-modal-scroll.is-dragging { cursor: grabbing; }
.quest-map-modal-stage { position: relative; min-width: 100%; width: 100%; }
.quest-map-modal-stage > img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.quest-map-modal-highlight { position: absolute; z-index: 5; display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; border: 2px solid white; border-radius: 50%; background: rgba(59,130,246,.22); box-shadow: 0 0 0 3px rgba(37,99,235,.72),0 0 20px rgba(59,130,246,.85); pointer-events: none; transform: translate(-50%,-50%); animation: booklet-quest-target-blink 1.35s ease-in-out infinite; }
.quest-map-modal-highlight::before { content: ''; position: absolute; inset: -7px; border: 2px solid rgba(96,165,250,.92); border-radius: 50%; animation: booklet-quest-target-ring 1.7s ease-out infinite; }
.quest-map-modal-highlight img { position: relative; z-index: 2; max-width: 48px; max-height: 48px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(15,23,42,.4)); }
.quest-map-modal-highlight > span { position: relative; z-index: 2; color: #ef4444; font-size: 28px; }
.dark .quest-map-modal-scroll { background: #111; }

/* 制作图鉴列表 */
.booklet-make-table { table-layout: fixed; }
.booklet-make-col-product { width: 31%; }
.booklet-make-col-requirement { width: 19%; }
.booklet-make-col-materials { width: 39%; }
.booklet-make-col-cost { width: 11%; }
.booklet-make-table thead { background: linear-gradient(180deg,#f8fafc,#f3f6fa); color: #475569; font-size: 13px; }
.booklet-make-table th { font-weight: 500; letter-spacing: .02em; }
.booklet-make-row { background: white; transition: background-color .16s ease,box-shadow .16s ease; }
.booklet-make-row > td { height: 112px; vertical-align: top; }
.booklet-make-row:hover { position: relative; z-index: 1; background: #f8fbff; box-shadow: inset 3px 0 #60a5fa; }
.booklet-make-product-icon { display: flex; width: 52px; height: 52px; flex: 0 0 52px; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: 5px; background: linear-gradient(145deg,#fff,#f6f8fb); }
.booklet-make-product-icon img { max-width: 44px; max-height: 44px; object-fit: contain; }
.booklet-make-product-name { display: block; width: fit-content; max-width: 100%; overflow: hidden; color: #0752a3; font-size: 15px; font-weight: 500; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.booklet-make-product-name:hover { color: #2563eb; text-decoration: underline; }
.booklet-make-product-category { display: block; margin-top: 0; line-height: 1; }
.booklet-make-product-category .booklet-make-category { padding: 3px 7px; font-size: 11px; line-height: 1.2; }
.booklet-make-product-meta { display: block; margin-top: 0; color: #8492a6; font-size: 11px; font-weight: 400; }
.booklet-make-requirement { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.booklet-make-requirement.is-level-only { max-width: 174px; }
.booklet-make-category { grid-column: 1/-1; display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 5px; border: 1px solid #dbeafe; border-radius: 4px; padding: 4px 7px; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 500; }
.booklet-make-requirement > div { border-radius: 4px; padding: 5px 7px; background: #f8fafc; }
.booklet-make-requirement > div span,.booklet-make-requirement > div em { display: block; font-style: normal; font-weight: 400; }
.booklet-make-requirement > div span { color: #8492a6; font-size: 11px; }
.booklet-make-requirement > div em { margin-top: 2px; color: #334155; font-size: 12px; }
.booklet-make-materials { display: flex; flex-wrap: wrap; gap: 6px; }
.booklet-make-materials.is-table { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.booklet-make-materials.is-table .booklet-make-material { width: 100%; }
.booklet-make-materials.is-table .booklet-make-material-name { min-width: 0; max-width: none; flex: 1; }
.booklet-make-materials.is-table .booklet-make-more { justify-content: center; }
.booklet-make-material { display: inline-flex; min-width: 0; align-items: center; gap: 6px; border: 1px solid #edf1f5; border-radius: 4px; padding: 5px 8px 5px 6px; background: #fbfcfe; color: #475569; font-size: 12px; transition: border-color .16s ease,background-color .16s ease; }
.booklet-make-material:hover { border-color: #dbeafe; background: #f3f8ff; }
.booklet-make-material-icon { display: flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; border-radius: 3px; background: white; color: #64748b; }
.booklet-make-material-icon img { max-width: 22px; max-height: 22px; object-fit: contain; }
.booklet-make-material-name { display: inline-block; width: fit-content; max-width: 115px; overflow: hidden; color: #334155; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.booklet-make-material-name:hover { color: #2563eb; text-decoration: underline; }
.booklet-make-material-count { flex-shrink: 0; color: #64748b; font-weight: 400; }
.booklet-make-more { display: inline-flex; align-items: center; border-radius: 4px; padding: 6px 8px; background: #f1f5f9; color: #64748b; font-size: 11px; }
.booklet-make-meso { display: inline-flex; min-width: 74px; align-items: center; justify-content: center; gap: 5px; border-radius: 4px; padding: 6px 8px; background: #fffbeb; color: #a94d08; font-size: 12px; font-weight: 500; white-space: nowrap; }
.booklet-make-meso > span { color: #f59e0b; font-size: 16px; }
.booklet-make-card-grid { background: #f8fafc; }
.booklet-make-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #dfe7f0; border-radius: 9px; background: white; box-shadow: 0 4px 14px rgba(15,23,42,.045); transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.booklet-make-card:hover { border-color: #bfdbfe; box-shadow: 0 10px 24px rgba(37,99,235,.09); transform: translateY(-1px); }
.booklet-make-card-head { display: flex; min-width: 0; align-items: flex-start; gap: 10px; border-bottom: 1px solid #e8edf3; padding: 13px; background: linear-gradient(145deg,#fff,#f8fbff); }
.booklet-make-card-icon { display: flex; width: 54px; height: 54px; flex: 0 0 54px; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: 5px; background: white; }
.booklet-make-card-icon img { max-width: 46px; max-height: 46px; object-fit: contain; }
.booklet-make-card-name { display: inline-block; width: fit-content; max-width: 100%; overflow: hidden; color: #0752a3; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.booklet-make-card-name:hover { color: #2563eb; text-decoration: underline; }
.booklet-make-card-id { margin-top: 0; color: #8492a6; font-size: 11px; }
.booklet-make-card-head > .booklet-make-category { grid-column: auto; flex-shrink: 0; }
.booklet-make-card-body { flex: 1; padding: 12px 13px; }
.booklet-make-card-label { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; color: #64748b; font-size: 12px; font-weight: 500; }
.booklet-make-card-label > span { color: #2563eb; font-size: 15px; }
.booklet-make-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid #e8edf3; padding: 10px 13px; background: #fbfcfe; }
.booklet-make-card-foot > div { display: flex; flex: 1; flex-wrap: wrap; gap: 5px; }
.booklet-make-card-foot > div span { border-radius: 3px; padding: 4px 7px; background: #f1f5f9; color: #64748b; font-size: 11px; }
.booklet-make-card-open { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #2563eb; font-size: 12px; font-weight: 500; }
.booklet-make-card-open:hover { color: #1d4ed8; }
.dark .booklet-make-table thead { background: linear-gradient(180deg,#20242a,#1d2025); color: #cbd5e1; }
.dark .booklet-make-row { background: #1b1b1b; }
.dark .booklet-make-row:hover { background: #222831; }
.dark .booklet-make-product-icon,.dark .booklet-make-card-icon,.dark .booklet-make-material-icon { border-color: #343b46; background: #151515; }
.dark .booklet-make-product-name,.dark .booklet-make-card-name { color: #7dd3fc; }
.dark .booklet-make-category { border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.12); color: #7dd3fc; }
.dark .booklet-make-meso { background: rgba(245,158,11,.1); color: #fbbf24; }
.dark .booklet-make-requirement > div,.dark .booklet-make-more,.dark .booklet-make-card-foot > div span { background: #292e35; }
.dark .booklet-make-requirement > div em,.dark .booklet-make-material-name { color: #dbe4ef; }
.dark .booklet-make-material { border-color: #343b46; background: #292e35; color: #cbd5e1; }
.dark .booklet-make-material:hover { border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.1); }
.dark .booklet-make-card-grid { background: rgba(0,0,0,.1); }
.dark .booklet-make-card { border-color: #303741; background: #1d1d1d; }
.dark .booklet-make-card:hover { border-color: rgba(59,130,246,.42); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.dark .booklet-make-card-head { border-bottom-color: #303741; background: linear-gradient(145deg,#202020,#1c2228); }
.dark .booklet-make-card-foot { border-top-color: #303741; background: #202020; }

@media (min-width: 1100px) and (max-width: 1400px) {
    .booklet-make-table { width: calc(100% - 76px); }
}

@media (max-width: 700px) {
    .booklet-quest-location-grid { grid-template-columns: minmax(0,1fr); padding: 12px; }
    .booklet-quest-location-intro { align-items: flex-start; padding: 15px; }
    .booklet-quest-location-body { grid-template-columns: minmax(0,1fr); }
    .booklet-quest-location-place { border-top: 1px solid #e8edf3; border-left: 0; padding-top: 10px; padding-left: 0; }
    .dark .booklet-quest-location-place { border-top-color: #343b46; }
}

.booklet-quest-flow-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e5e7eb;
    padding: 18px 20px;
}

.booklet-quest-flow-intro h2 { color: #172033; font-size: 19px; font-weight: 600; line-height: 1.35; }
.booklet-quest-flow-intro p { margin-top: 4px; color: #64748b; font-size: 13px; }
.booklet-quest-flow-total { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; border-radius: 6px; padding: 6px 10px; background: #eff6ff; color: #2563eb; font-size: 12px; }

.booklet-quest-flow-list {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 20px 20px 22px 54px;
    background: #f8fafc;
}

.booklet-quest-flow-list::before { content: ''; position: absolute; top: 34px; bottom: 34px; left: 31px; width: 2px; background: linear-gradient(#60a5fa, #38bdf8 50%, #34d399); }
.booklet-quest-stage { position: relative; min-width: 0; }
.booklet-quest-stage-node { position: absolute; top: 19px; left: -38px; z-index: 2; display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 4px solid #f8fafc; border-radius: 50%; background: #3b82f6; color: white; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 1px rgba(59,130,246,.2); }
.booklet-quest-stage-progress .booklet-quest-stage-node { background: #0ea5e9; }
.booklet-quest-stage-done .booklet-quest-stage-node { background: #10b981; }

.booklet-quest-stage-card { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 8px; background: white; box-shadow: 0 5px 18px rgba(15,23,42,.045); }
.booklet-quest-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #eef2f7; padding: 15px 17px; background: linear-gradient(100deg,#fff,#f8fbff); }
.booklet-quest-stage-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.booklet-quest-stage-icon { display: flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border-radius: 8px; background: #eff6ff; color: #2563eb; font-size: 19px; }
.booklet-quest-stage-progress .booklet-quest-stage-icon { background: #ecfeff; color: #0891b2; }
.booklet-quest-stage-done .booklet-quest-stage-icon { background: #ecfdf5; color: #059669; }
.booklet-quest-stage-kicker { margin-bottom: 2px; color: #94a3b8; font-size: 10px; letter-spacing: .055em; }
.booklet-quest-stage-title h3 { color: #172033; font-size: 17px; font-weight: 600; line-height: 1.35; }
.booklet-quest-stage-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.booklet-quest-stage-counts span { display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; padding: 4px 7px; background: #f1f5f9; color: #64748b; font-size: 11px; }

.booklet-quest-stage-content { display: grid; gap: 0; }
.booklet-quest-stage-section { position: relative; padding: 15px 17px 16px; }
.booklet-quest-stage-section + .booklet-quest-stage-section { border-top: 1px solid #eef2f7; }
.booklet-quest-stage-section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.booklet-quest-stage-section-icon { display: flex; width: 28px; height: 28px; flex: 0 0 28px; align-items: center; justify-content: center; border-radius: 6px; background: #eff6ff; color: #2563eb; font-size: 15px; }
.booklet-quest-stage-section-head h4 { color: #334155; font-size: 13px; font-weight: 500; line-height: 1.35; }
.booklet-quest-stage-section-head p { margin-top: 1px; color: #94a3b8; font-size: 11px; }
.booklet-quest-stage-actions { background: linear-gradient(100deg,rgba(236,253,245,.72),rgba(255,255,255,.2)); }
.booklet-quest-stage-actions .booklet-quest-stage-section-icon { background: #d1fae5; color: #059669; }
.booklet-quest-stage-dialogues .booklet-quest-stage-section-icon { background: #f0f9ff; color: #0284c7; }
.booklet-quest-stage-chips { display: flex; flex-wrap: wrap; gap: 7px; padding-left: 37px; }

.booklet-quest-dialogue-card { margin-left: 37px; overflow: hidden; border: 1px solid #bae6fd; border-radius: 7px; background: #f0f9ff; }
.booklet-quest-dialogue-card + .booklet-quest-dialogue-card { margin-top: 8px; }
.booklet-quest-dialogue-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(125,211,252,.45); padding: 7px 11px; color: #64748b; font-size: 11px; }
.booklet-quest-dialogue-meta span:first-child { display: inline-flex; align-items: center; gap: 5px; color: #0369a1; }
.booklet-quest-dialogue-text { padding: 11px 12px; color: #334155; font-size: 13px; line-height: 1.75; }

.dark .booklet-quest-flow-intro { border-bottom-color: #2a2a2a; }
.dark .booklet-quest-flow-intro h2,.dark .booklet-quest-stage-title h3 { color: #f1f5f9; }
.dark .booklet-quest-flow-total { background: rgba(59,130,246,.14); color: #7dd3fc; }
.dark .booklet-quest-flow-list { background: rgba(0,0,0,.1); }
.dark .booklet-quest-stage-node { border-color: #181818; }
.dark .booklet-quest-stage-card { border-color: #2e3440; background: #222; }
.dark .booklet-quest-stage-head { border-bottom-color: #30343b; background: linear-gradient(100deg,#242424,#20262d); }
.dark .booklet-quest-stage-counts span { background: #2b3037; color: #aab4c2; }
.dark .booklet-quest-stage-section + .booklet-quest-stage-section { border-top-color: #30343b; }
.dark .booklet-quest-stage-section-head h4,.dark .booklet-quest-dialogue-text { color: #e2e8f0; }
.dark .booklet-quest-stage-actions { background: linear-gradient(100deg,rgba(16,185,129,.08),transparent); }
.dark .booklet-quest-dialogue-card { border-color: rgba(14,165,233,.28); background: rgba(14,165,233,.08); }
.dark .booklet-quest-dialogue-meta { border-bottom-color: rgba(14,165,233,.2); }

@media (max-width: 1100px) {
    .booklet-quest-detail-layout {
        grid-template-columns: 310px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .booklet-quest-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .booklet-quest-detail-sidebar {
        position: static;
        grid-row: 1;
    }

    .booklet-quest-detail-content {
        grid-row: 2;
    }
}

@media (max-width: 639px) {
    .booklet-quest-card-body { min-height: 265px; }
    .booklet-quest-flow-intro { align-items: flex-start; padding: 15px; }
    .booklet-quest-flow-list { padding: 15px 12px 17px 42px; }
    .booklet-quest-flow-list::before { left: 23px; }
    .booklet-quest-stage-node { left: -33px; }
    .booklet-quest-stage-head { align-items: flex-start; padding: 13px; }
    .booklet-quest-stage-counts { display: none; }
    .booklet-quest-stage-section { padding: 13px; }
    .booklet-quest-stage-chips,.booklet-quest-dialogue-card { margin-left: 0; padding-left: 0; }
}

.booklet-mob-detail-sidebar {
    position: sticky;
    top: 78px;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.booklet-mob-detail-related {
    min-width: 0;
    gap: 10px;
}

/* Keep NPC detail spacing aligned with the monster detail page. */
.booklet-npc-page-toolbar {
    margin-bottom: 10px !important;
}

.booklet-npc-detail-layout {
    gap: 10px;
    margin-top: 10px;
}

.booklet-npc-detail-sidebar,
.booklet-npc-detail-related {
    gap: 10px;
}

.booklet-mob-profile-head {
    display: block;
    padding: 17px 16px 15px;
}

.booklet-mob-profile-head > .tw-flex:first-child {
    display: grid;
    min-width: 0;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
}

.booklet-mob-profile-icon {
    width: 84px;
    height: 84px;
}

.booklet-mob-profile-icon img {
    max-width: 72px;
    max-height: 72px;
}

.booklet-mob-profile-head h1 {
    margin-top: 7px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
}

.booklet-mob-profile-head p {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.65;
}

.booklet-mob-profile-head .tw-font-semibold:not(h1) {
    font-weight: 500;
}

.booklet-mob-base-card {
    overflow: hidden;
}

.booklet-mob-base-card h2 {
    font-size: 16px;
    font-weight: 600;
}

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

.booklet-mob-base-stat {
    min-width: 0;
    padding: 10px 11px;
}

.booklet-mob-base-stat > div:last-child {
    overflow: hidden;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}

.tw-dark .booklet-mob-base-stat > div:last-child,
.dark .booklet-mob-base-stat > div:last-child {
    color: #f2f2f2;
}

@media (max-width: 1100px) {
    .booklet-mob-detail-layout {
        grid-template-columns: 310px minmax(0, 1fr);
    }

    .booklet-mob-profile-head > .tw-flex:first-child {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .booklet-mob-profile-icon {
        width: 74px;
        height: 74px;
    }
}

@media (max-width: 900px) {
    .booklet-mob-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .booklet-mob-detail-sidebar {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 639px) {
    .booklet-mob-detail-sidebar {
        display: flex;
    }

    .booklet-mob-profile-head > .tw-flex:first-child {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 11px;
    }

    .booklet-mob-profile-icon {
        width: 68px;
        height: 68px;
    }

    .booklet-mob-profile-head h1 {
        font-size: 20px;
    }
}

.booklet-mob-map-section {
    overflow: hidden;
}

.booklet-mob-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #edf0f4;
    background: linear-gradient(90deg, #f8fafc, #fff);
    padding: 14px 16px;
}

.booklet-mob-map-head h2 {
    color: #0f172a;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
}

.booklet-mob-map-head p {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.booklet-mob-map-head > span {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eff6ff;
    padding: 4px 9px;
    color: #2563eb;
    font-size: 12px;
}

.booklet-mob-map-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 16px;
    padding: 9px 16px 13px;
}

.booklet-mob-map-row-wrap {
    min-width: 0;
    border-bottom: 1px solid #edf0f4;
}

.booklet-mob-map-row {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    border-radius: 7px;
    padding: 10px 8px;
    text-align: left;
    transition: background .16s ease;
}

.booklet-mob-map-row:hover {
    background: #f5f9ff;
}

.booklet-mob-map-row.is-active {
    background: #eff6ff;
    box-shadow: inset 3px 0 #3b82f6;
}

.booklet-mob-map-row-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 20px;
}

.booklet-mob-map-row-icon img {
    max-width: 31px;
    max-height: 31px;
    object-fit: contain;
}

.booklet-mob-map-row-copy {
    display: block;
    min-width: 0;
}

.booklet-mob-map-row-name {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    color: #1d4ed8;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
}

.booklet-mob-map-row-copy small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.booklet-mob-map-row-route {
    border-radius: 999px;
    background: #f1f5f9;
    padding: 4px 7px;
    color: #64748b;
    white-space: nowrap;
    font-size: 11px;
}

.booklet-mob-map-row-spawns {
    border-radius: 999px;
    background: #fff7ed;
    padding: 4px 7px;
    color: #c2410c;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
}

.booklet-mob-map-row-action {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: #94a3b8;
    white-space: nowrap;
    font-size: 11px;
}

.booklet-mob-map-row:hover .booklet-mob-map-row-action {
    color: #2563eb;
}

.booklet-mob-map-empty {
    grid-column: 1 / -1;
    padding: 36px 12px;
    color: #64748b;
    text-align: center;
    font-size: 14px;
}

.booklet-mob-map-list.is-boss-map-selector {
    padding-bottom: 10px;
}

.booklet-mob-boss-map-detail {
    border-top: 1px solid #e2e8f0;
    padding: 0;
    background: #fff;
}

.booklet-mob-boss-map-detail-head {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
}

.booklet-mob-boss-map-detail-head > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 9px;
}

.booklet-mob-boss-map-detail-head strong {
    overflow: hidden;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.booklet-mob-boss-map-detail-head span {
    color: #64748b;
    white-space: nowrap;
    font-size: 11px;
}

.booklet-mob-boss-map-detail-head > a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    border: 1px solid #bfdbfe;
    border-radius: 7px;
    padding: 6px 9px;
    background: #fff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
}

.booklet-mob-boss-map-detail-head > a:hover {
    border-color: #60a5fa;
    background: #eff6ff;
}

.booklet-mob-boss-map-frame-shell {
    position: relative;
    height: clamp(480px, 56vw, 620px);
    overflow: hidden;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.booklet-mob-boss-map-frame-shell iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #f3f6fa;
}

/* Shared compact toolbar for focused NPC and single-map BOSS views. */
.booklet-npc-focus-map-detail,
.booklet-mob-focus-map-detail {
    background: #edf2f7;
}

.booklet-npc-focus-map-detail .booklet-mob-boss-map-frame-shell,
.booklet-mob-focus-map-detail .booklet-mob-boss-map-frame-shell {
    border-top: 0;
}

.booklet-npc-focus-map-toolbar {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #dfe7f1;
    border-radius: 6px;
    margin: 3px 3px 0;
    padding: 8px 14px;
    background: #fff;
}

.booklet-npc-focus-map-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.booklet-npc-focus-map-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f5f9;
    color: #2563eb;
    font-size: 19px;
}

.booklet-npc-focus-map-icon img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
}

.booklet-npc-focus-map-identity > span:last-child {
    display: block;
    min-width: 0;
}

.booklet-npc-focus-map-identity strong,
.booklet-npc-focus-map-identity small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-npc-focus-map-identity strong {
    color: #0f172a;
    font-size: 14px;
}

.booklet-npc-focus-map-identity small {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
}

.booklet-npc-focus-map-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

.booklet-npc-focus-map-tools > span,
.booklet-npc-focus-map-tools > a {
    display: inline-flex;
    height: 30px;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    padding: 0 9px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
}

.booklet-npc-focus-map-tools > span {
    background: #f1f5f9;
    color: #64748b;
}

.booklet-npc-focus-map-tools > .is-coordinate {
    background: #ecfdf5;
    color: #059669;
}

.booklet-npc-focus-map-tools > a {
    border: 1px solid #bfdbfe;
    background: #fff;
    color: #2563eb;
}

.booklet-npc-focus-map-tools > a:hover {
    border-color: #60a5fa;
    background: #eff6ff;
}

.tw-dark .booklet-npc-focus-map-icon,
.dark .booklet-npc-focus-map-icon,
.tw-dark .booklet-npc-focus-map-tools > span,
.dark .booklet-npc-focus-map-tools > span {
    background: #20242b;
}

.tw-dark .booklet-npc-focus-map-detail,
.dark .booklet-npc-focus-map-detail,
.tw-dark .booklet-mob-focus-map-detail,
.dark .booklet-mob-focus-map-detail { background: #111827; }
.tw-dark .booklet-npc-focus-map-toolbar,
.dark .booklet-npc-focus-map-toolbar { border-color: #303846; background: #17171b; }

.tw-dark .booklet-npc-focus-map-identity strong,
.dark .booklet-npc-focus-map-identity strong { color: #f1f5f9; }
.tw-dark .booklet-npc-focus-map-tools > a,
.dark .booklet-npc-focus-map-tools > a { border-color: #3f3f50; background: #202024; color: #93c5fd; }

@media (max-width: 700px) {
    .booklet-npc-focus-map-toolbar { align-items: flex-start; flex-direction: column; }
    .booklet-npc-focus-map-tools { width: 100%; flex-wrap: wrap; }
    .booklet-npc-focus-map-tools > a { margin-left: auto; }
    .booklet-npc-focus-map-detail .booklet-mob-boss-map-frame-shell {
        height: clamp(680px, 185vw, 760px);
    }
}

.tw-dark .booklet-mob-boss-map-detail,
.dark .booklet-mob-boss-map-detail { border-color: #30303a; background: #17171b; }
.tw-dark .booklet-mob-boss-map-detail-head strong,
.dark .booklet-mob-boss-map-detail-head strong { color: #f1f5f9; }
.tw-dark .booklet-mob-boss-map-detail-head > a,
.dark .booklet-mob-boss-map-detail-head > a { border-color: #3f3f50; background: #202024; color: #93c5fd; }
.tw-dark .booklet-mob-boss-map-frame-shell,
.dark .booklet-mob-boss-map-frame-shell { border-color: #30303a; background: #111827; }

.booklet-mob-map-modal[hidden] {
    display: none;
}

.booklet-mob-map-modal {
    position: fixed;
    z-index: 2200;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.booklet-mob-map-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(3px);
}

.booklet-mob-map-modal-dialog {
    position: relative;
    display: flex;
    width: min(1200px, 100%);
    height: min(900px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.booklet-mob-map-modal-dialog > header {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4;
    padding: 12px 16px;
}

.booklet-mob-map-modal-dialog > header > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
}

.booklet-mob-map-modal-dialog > header h2 {
    color: #1d4ed8;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
}

.booklet-mob-map-modal-dialog > header .booklet-mob-map-modal-heading {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.booklet-mob-map-modal-heading h2,
.booklet-mob-map-modal-heading p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-mob-map-modal-heading p {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.booklet-mob-map-modal-dialog > header .booklet-mob-map-modal-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.booklet-mob-map-modal-actions .booklet-mob-maptools-link {
    min-height: 34px;
    padding: 6px 10px;
}

.booklet-mob-map-modal-dialog > header button {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 20px;
}

.booklet-mob-map-modal-dialog > header button:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.booklet-mob-map-modal-body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    padding: 16px;
}

.booklet-mob-map-embed-shell {
    position: relative;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.booklet-mob-map-embed-shell iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #f3f6fa;
}

.booklet-mob-map-frame-loading {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    background: #f3f6fa;
    color: #64748b;
}

.booklet-mob-map-frame-loading[hidden] {
    display: none;
}

.booklet-mob-map-frame-loading > span {
    color: #2563eb;
    font-size: 28px;
}

.booklet-mob-map-frame-loading strong {
    color: #334155;
    font-size: 14px;
}

.booklet-mob-map-frame-loading small {
    font-size: 12px;
}

.booklet-mob-map-modal-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px;
}

.booklet-mob-map-modal-title > span {
    color: #64748b;
    font-size: 11px;
}

.booklet-mob-map-modal-title h3 {
    margin-top: 2px;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 600;
}

.booklet-mob-map-modal-title h3 a {
    display: inline-block;
    width: fit-content;
    color: #1d4ed8;
}

.booklet-mob-map-modal-title p {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.booklet-mob-maptools-link {
    display: inline-flex;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    background: #2563eb;
    padding: 8px 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

.booklet-mob-maptools-link:hover {
    background: #1d4ed8;
}

.booklet-mob-map-modal-canvas {
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #f1f5f9;
}

.booklet-mob-map-modal-canvas .mob-maptools-map-scroll {
    max-height: min(55vh, 540px);
    background: #e8edf3;
}

.booklet-mob-map-modal-empty {
    display: flex;
    min-height: 260px;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 14px;
}

.booklet-mob-map-route {
    margin-top: 13px;
    border-radius: 9px;
    background: #f8fafc;
    padding: 12px;
}

.booklet-mob-map-route-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.booklet-mob-map-route-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
}

.booklet-mob-map-route-head > span i {
    color: #2563eb;
    font-size: 17px;
}

.booklet-mob-map-route-head button {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fff;
    color: #64748b;
    font-size: 16px;
}

.booklet-mob-map-route-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}

.booklet-mob-map-route-steps > span:not([class*="tw-icon-"]) {
    border-radius: 6px;
    background: #fff;
    padding: 5px 8px;
    color: #475569;
    font-size: 12px;
}

.booklet-mob-map-route-steps > .is-current {
    background: #2563eb !important;
    color: #fff !important;
}

body.booklet-mob-map-modal-open {
    overflow: hidden;
}

.tw-dark .booklet-mob-map-head,
.dark .booklet-mob-map-head {
    border-color: #2a2a2a;
    background: linear-gradient(90deg, #1d1d1d, #171717);
}

.tw-dark .booklet-mob-map-head h2,
.dark .booklet-mob-map-head h2,
.tw-dark .booklet-mob-map-modal-dialog > header h2,
.dark .booklet-mob-map-modal-dialog > header h2,
.tw-dark .booklet-mob-map-modal-title h3,
.dark .booklet-mob-map-modal-title h3 {
    color: #f2f2f2;
}

.tw-dark .booklet-mob-map-row-wrap,
.dark .booklet-mob-map-row-wrap,
.tw-dark .booklet-mob-map-modal-dialog > header,
.dark .booklet-mob-map-modal-dialog > header {
    border-color: #2a2a2a;
}

.tw-dark .booklet-mob-map-row:hover,
.dark .booklet-mob-map-row:hover {
    background: #202020;
}

.tw-dark .booklet-mob-map-row-icon,
.dark .booklet-mob-map-row-icon,
.tw-dark .booklet-mob-map-head > span,
.dark .booklet-mob-map-head > span {
    background: rgba(59, 130, 246, .14);
    color: #93c5fd;
}

.tw-dark .booklet-mob-map-row-name,
.dark .booklet-mob-map-row-name,
.tw-dark .booklet-mob-map-modal-title h3 a,
.dark .booklet-mob-map-modal-title h3 a {
    color: #7dd3fc;
}

.tw-dark .booklet-mob-map-row-route,
.dark .booklet-mob-map-row-route,
.tw-dark .booklet-mob-map-modal-dialog > header button,
.dark .booklet-mob-map-modal-dialog > header button {
    background: #242424;
    color: #a3a3a3;
}

.tw-dark .booklet-mob-map-row-spawns,
.dark .booklet-mob-map-row-spawns {
    background: rgba(249, 115, 22, .14);
    color: #fdba74;
}

.tw-dark .booklet-mob-map-modal-dialog,
.dark .booklet-mob-map-modal-dialog {
    border-color: #333;
    background: #171717;
}

.tw-dark .booklet-mob-map-modal-canvas,
.dark .booklet-mob-map-modal-canvas {
    border-color: #333;
    background: #111;
}

.tw-dark .booklet-mob-map-frame-loading,
.dark .booklet-mob-map-frame-loading {
    border-color: #303030;
    background: #111827;
}

.tw-dark .booklet-mob-map-frame-loading strong,
.dark .booklet-mob-map-frame-loading strong {
    color: #e5e7eb;
}

.tw-dark .booklet-mob-map-modal-canvas .mob-maptools-map-scroll,
.dark .booklet-mob-map-modal-canvas .mob-maptools-map-scroll {
    background: #111;
}

.tw-dark .booklet-mob-map-route,
.dark .booklet-mob-map-route {
    background: #202020;
}

.tw-dark .booklet-mob-map-route-head > span,
.dark .booklet-mob-map-route-head > span {
    color: #d4d4d4;
}

.tw-dark .booklet-mob-map-route-head button,
.dark .booklet-mob-map-route-head button,
.tw-dark .booklet-mob-map-route-steps > span:not([class*="tw-icon-"]),
.dark .booklet-mob-map-route-steps > span:not([class*="tw-icon-"]) {
    background: #2a2a2a;
    color: #d4d4d4;
}

@media (max-width: 760px) {
    .booklet-mob-map-list {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 11px;
    }

    .booklet-mob-boss-map-detail {
        padding-inline: 0;
    }

    .booklet-mob-boss-map-frame-shell {
        height: 72vh;
        min-height: 560px;
    }

    .booklet-mob-map-modal {
        padding: 10px;
    }

    .booklet-mob-map-modal-dialog {
        height: calc(100vh - 20px);
        max-height: calc(100vh - 20px);
    }

    .booklet-mob-map-embed-shell {
        height: auto;
        min-height: 0;
    }

    .booklet-mob-map-modal-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .booklet-mob-maptools-link {
        width: 100%;
        justify-content: center;
    }

    .booklet-mob-map-modal-actions .booklet-mob-maptools-link {
        width: auto;
    }
}

@media (max-width: 560px) {
    .booklet-mob-map-modal-dialog > header {
        gap: 8px;
        padding-inline: 11px;
    }

    .booklet-mob-map-modal-actions .booklet-mob-maptools-link {
        font-size: 0;
    }

    .booklet-mob-map-modal-actions .booklet-mob-maptools-link span {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .booklet-mob-map-row {
        grid-template-columns: 36px minmax(0, 1fr) auto auto;
        gap: 8px;
    }

    .booklet-mob-map-row-route {
        display: none;
    }

    .booklet-mob-map-row-action {
        font-size: 0;
    }

    .booklet-mob-map-row-action span {
        font-size: 17px;
    }

    .booklet-mob-map-modal-body {
        padding: 12px;
    }
}

.booklet-mob-drop-section {
    overflow: hidden;
}

.booklet-mob-drop-priority {
    order: -1;
}

.booklet-mob-drop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4;
    background: linear-gradient(90deg, #f8fafc, #fff);
    padding: 14px 16px;
}

.booklet-mob-drop-head > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 9px;
}

.booklet-mob-drop-head h2 {
    color: #0f172a;
    font-size: 17px;
    font-weight: 600;
}

.booklet-mob-drop-head > div > span {
    color: #64748b;
    font-size: 12px;
}

.booklet-mob-drop-total {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eff6ff;
    padding: 4px 9px;
    color: #2563eb;
    font-size: 12px;
}

.booklet-mob-drop-head > .booklet-mob-drop-head-side {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.booklet-auction-server-select {
    display: inline-flex;
    height: 30px;
    align-items: center;
    gap: 5px;
    border: 1px solid #dbe3ed;
    border-radius: 5px;
    background: #fff;
    padding: 0 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
}

.booklet-auction-server-select select {
    min-width: 72px;
    border: 0;
    background: transparent;
    color: #334155;
    font-size: 11px;
    font-weight: 650;
    outline: 0;
}

.booklet-mob-drop-groups {
    display: grid;
    gap: 17px;
    padding: 15px 16px 17px;
}

.booklet-mob-drop-group-head {
    display: flex;
    min-height: 28px;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #475569;
    font-size: 14px;
}

.booklet-mob-drop-group-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.booklet-mob-drop-group-head i {
    color: #64748b;
    font-size: 18px;
}

.booklet-mob-drop-group-head em {
    border-radius: 999px;
    background: #f1f5f9;
    padding: 2px 8px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.booklet-mob-drop-group.is-material .booklet-mob-drop-group-head > span,
.booklet-mob-drop-group.is-material .booklet-mob-drop-group-head i {
    color: #b45309;
}

.booklet-mob-drop-group.is-consume .booklet-mob-drop-group-head > span,
.booklet-mob-drop-group.is-consume .booklet-mob-drop-group-head i {
    color: #047857;
}

.booklet-mob-drop-group.is-equip .booklet-mob-drop-group-head > span,
.booklet-mob-drop-group.is-equip .booklet-mob-drop-group-head i {
    color: #2563eb;
}

.booklet-mob-drop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.booklet-mob-drop-item {
    display: grid;
    min-width: 0;
    min-height: 61px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fbfcfe;
    padding: 7px 9px;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.booklet-mob-drop-item:hover {
    border-color: #bfdbfe;
    background: #f5f9ff;
    transform: translateY(-1px);
}

.booklet-mob-drop-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fff;
    color: #94a3b8;
}

.booklet-mob-drop-icon img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
}

.booklet-mob-drop-icon > span {
    font-size: 22px;
}

.booklet-mob-drop-copy {
    display: block;
    min-width: 0;
}

.booklet-mob-drop-name {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    color: #1d4ed8;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}

.booklet-mob-drop-item:hover .booklet-mob-drop-name {
    color: #2563eb;
}

.booklet-mob-drop-copy small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.booklet-mob-drop-aside {
    display: flex;
    min-width: 67px;
    flex: 0 0 auto;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
}

.booklet-mob-drop-market {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    color: #b45309;
    white-space: nowrap;
}

.booklet-mob-drop-market small {
    color: #92400e;
    font-size: 9px;
}

.booklet-mob-drop-market strong {
    font-size: 11px;
    font-weight: 700;
}

.booklet-mob-drop-rate {
    flex: 0 0 auto;
    border-radius: 6px;
    background: #ecfdf5;
    padding: 4px 6px;
    color: #047857;
    font-size: 11px;
    font-weight: 500;
}

.tw-dark .booklet-mob-drop-head,
.dark .booklet-mob-drop-head {
    border-color: #2a2a2a;
    background: linear-gradient(90deg, #1d1d1d, #171717);
}

.tw-dark .booklet-mob-drop-head h2,
.dark .booklet-mob-drop-head h2 {
    color: #f2f2f2;
}

.tw-dark .booklet-mob-drop-total,
.dark .booklet-mob-drop-total {
    background: rgba(59, 130, 246, .14);
    color: #93c5fd;
}

.tw-dark .booklet-auction-server-select,
.dark .booklet-auction-server-select {
    border-color: #343a42;
    background: #17191c;
    color: #a3a3a3;
}

.tw-dark .booklet-auction-server-select select,
.dark .booklet-auction-server-select select {
    color: #e5e7eb;
}

.tw-dark .booklet-mob-drop-item,
.dark .booklet-mob-drop-item {
    border-color: #2a2a2a;
    background: #1b1b1b;
}

.tw-dark .booklet-mob-drop-item:hover,
.dark .booklet-mob-drop-item:hover {
    border-color: #3b82f6;
    background: #202020;
}

.tw-dark .booklet-mob-drop-icon,
.dark .booklet-mob-drop-icon {
    background: #111;
}

.tw-dark .booklet-mob-drop-name,
.dark .booklet-mob-drop-name {
    color: #7dd3fc;
}

.tw-dark .booklet-mob-drop-copy small,
.dark .booklet-mob-drop-copy small {
    color: #a3a3a3;
}

.tw-dark .booklet-mob-drop-market,
.dark .booklet-mob-drop-market {
    color: #fbbf24;
}

.tw-dark .booklet-mob-drop-market small,
.dark .booklet-mob-drop-market small {
    color: #d6a64f;
}

.tw-dark .booklet-mob-drop-group-head em,
.dark .booklet-mob-drop-group-head em {
    background: #242424;
    color: #a3a3a3;
}

.tw-dark .booklet-mob-drop-rate,
.dark .booklet-mob-drop-rate {
    background: rgba(16, 185, 129, .14);
    color: #6ee7b7;
}

@media (max-width: 1023px) {
    .booklet-mob-drop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .booklet-mob-drop-head {
        align-items: flex-start;
    }

    .booklet-mob-drop-head > div {
        flex-direction: column;
        gap: 2px;
    }

    .booklet-mob-drop-head > .booklet-mob-drop-head-side {
        align-items: flex-end;
        gap: 5px;
    }

    .booklet-mob-drop-groups {
        padding: 13px 11px 15px;
    }

    .booklet-mob-drop-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.booklet-npc-shop-group + .booklet-npc-shop-group {
    border-top: 1px solid #edf0f4;
}

.booklet-npc-shop-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px 5px;
    color: #334155;
    font-size: 13px;
}

.booklet-npc-shop-group-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.booklet-npc-shop-group-head > span i {
    color: #2563eb;
    font-size: 17px;
}

.booklet-npc-shop-group-head small {
    color: #94a3b8;
    font-size: 11px;
}

.booklet-npc-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    padding: 4px 16px 12px;
}

.booklet-npc-shop-item {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 9px;
    min-height: 62px;
    border-bottom: 1px solid #edf0f4;
    padding: 8px 6px;
    transition: background .18s ease, padding-left .18s ease, border-radius .18s ease;
}

.booklet-npc-shop-item:hover {
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(239, 246, 255, .86), rgba(248, 250, 252, .5));
    padding-left: 10px;
}

.booklet-npc-shop-item-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 20px;
}

.booklet-npc-shop-item-icon img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
}

.booklet-npc-shop-item-copy {
    min-width: 0;
}

.booklet-npc-shop-item-name {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    color: #1d4ed8;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
}

.booklet-npc-shop-item-copy small {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
}

.booklet-npc-shop-item-price {
    min-width: 58px;
    text-align: right;
}

.booklet-npc-shop-item-price b,
.booklet-npc-shop-item-price small {
    display: block;
}

.booklet-npc-shop-item-price b {
    color: #059669;
    font-size: 13px;
    font-weight: 500;
}

.booklet-npc-shop-item-price small {
    margin-top: 1px;
    color: #94a3b8;
    font-size: 10px;
}

.booklet-npc-shop-item-arrow {
    color: #cbd5e1;
    font-size: 17px;
    transition: color .18s ease, transform .18s ease;
}

.booklet-npc-shop-item:hover .booklet-npc-shop-item-arrow {
    color: #2563eb;
    transform: translateX(2px);
}

.tw-dark .booklet-npc-shop-group + .booklet-npc-shop-group,
.dark .booklet-npc-shop-group + .booklet-npc-shop-group,
.tw-dark .booklet-npc-shop-item,
.dark .booklet-npc-shop-item {
    border-color: #2a2a2a;
}

.tw-dark .booklet-npc-shop-group-head,
.dark .booklet-npc-shop-group-head {
    color: #d4d4d4;
}

.tw-dark .booklet-npc-shop-item:hover,
.dark .booklet-npc-shop-item:hover {
    background: #202020;
}

.tw-dark .booklet-npc-shop-item-icon,
.dark .booklet-npc-shop-item-icon {
    background: #202020;
}

.tw-dark .booklet-npc-shop-item-name,
.dark .booklet-npc-shop-item-name {
    color: #7dd3fc;
}

@media (max-width: 767px) {
    .booklet-npc-shop-grid {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 11px;
    }

    .booklet-npc-shop-group-head {
        align-items: flex-start;
        padding-inline: 13px;
    }
}

.booklet-mob-quest-section {
    overflow: hidden;
}

.booklet-mob-quest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #edf0f4;
    background: linear-gradient(90deg, #f8fafc, #fff);
    padding: 15px 16px 14px;
}

.booklet-mob-quest-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
}

.booklet-mob-quest-head p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.booklet-mob-quest-head > span {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #f1f5f9;
    padding: 4px 9px;
    color: #64748b;
    font-size: 12px;
}

.booklet-mob-quest-list {
    padding: 8px 16px 5px;
}

.booklet-mob-quest-row {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 52px minmax(0, 1fr) 30px;
    align-items: start;
    gap: 12px;
    padding: 17px 2px;
    transition: background .18s ease, border-radius .18s ease, box-shadow .18s ease;
}

.booklet-mob-quest-row + .booklet-mob-quest-row {
    border-top: 1px solid #edf0f4;
}

.booklet-mob-quest-row:hover {
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(239, 246, 255, .86), rgba(248, 250, 252, .5));
    box-shadow: inset 2px 0 0 rgba(59, 130, 246, .32);
}

.booklet-mob-quest-avatar {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f8fafc;
    color: #94a3b8;
}

.booklet-mob-quest-avatar img {
    max-width: 46px;
    max-height: 46px;
    object-fit: contain;
}

.booklet-mob-quest-avatar > span {
    font-size: 23px;
}

.booklet-mob-quest-main {
    min-width: 0;
}

.booklet-mob-quest-titleline {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
}

.booklet-mob-quest-titleline > a {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    color: #1d4ed8;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
}

.booklet-mob-quest-titleline > a:hover {
    color: #2563eb;
}

.booklet-mob-quest-titleline > span {
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
}

.booklet-mob-quest-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.booklet-mob-quest-meta > span,
.booklet-mob-quest-meta > a {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 4px;
    border-radius: 5px;
    background: #f1f5f9;
    padding: 3px 6px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 400;
}

.booklet-mob-quest-meta > .is-state {
    background: #eff6ff;
    color: #2563eb;
}

.booklet-mob-quest-meta > .is-item-context {
    background: #fff7ed;
    color: #ea580c;
}

.booklet-mob-quest-meta > a:hover {
    background: #e0edff;
    color: #1d4ed8;
}

.booklet-mob-quest-summary {
    max-width: 900px;
    margin: 10px 0 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.75;
    font-weight: 400;
}

.booklet-mob-quest-chip-groups {
    display: grid;
    gap: 8px;
    margin-top: 11px;
}

.booklet-mob-quest-chip-group {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}

.booklet-mob-quest-chip-group-label {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #eef2f7;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.booklet-mob-quest-chip-group.is-rewards .booklet-mob-quest-chip-group-label {
    background: #fff7ed;
    color: #c2410c;
}

.booklet-mob-quest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

.booklet-mob-quest-chip-group > .booklet-mob-quest-chips {
    margin-top: 0;
}

.booklet-mob-quest-chip {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    background: #f8fafc;
    padding: 4px 7px;
    color: #475569;
    font-size: 11px;
    line-height: 1.35;
    transition: background .16s ease, color .16s ease;
}

a.booklet-mob-quest-chip:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.booklet-mob-quest-chip.is-reward,
.booklet-npc-quest-chip.is-reward {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.booklet-mob-quest-chip.is-reward {
    box-shadow: inset 0 0 0 1px #fde68a;
}

.booklet-npc-quest-chip.is-reward {
    box-shadow: none;
}

.booklet-mob-quest-chip.is-reward .booklet-mob-quest-chip-icon {
    color: #d97706;
}

a.booklet-mob-quest-chip.is-reward:hover,
a.booklet-npc-quest-chip.is-reward:hover {
    border-color: #fbbf24;
    background: #fef3c7;
    color: #92400e;
}

.booklet-mob-quest-chip-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 16px;
}

.booklet-mob-quest-chip-icon img {
    max-width: 21px;
    max-height: 21px;
    object-fit: contain;
}

.booklet-mob-quest-chip-text {
    display: inline-block;
    width: fit-content;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-mob-quest-open {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    align-self: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 18px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.booklet-mob-quest-open:hover {
    background: #e0edff;
    color: #2563eb;
    transform: translateX(2px);
}

.booklet-mob-quest-row:hover .booklet-mob-quest-open {
    background: #e0edff;
    color: #2563eb;
}

.booklet-mob-quest-empty {
    padding: 38px 12px;
    color: #64748b;
    text-align: center;
    font-size: 14px;
}

.tw-dark .booklet-mob-quest-head,
.dark .booklet-mob-quest-head {
    border-color: #2a2a2a;
    background: linear-gradient(90deg, #1d1d1d, #171717);
}

.tw-dark .booklet-mob-quest-head h2,
.dark .booklet-mob-quest-head h2 {
    color: #f2f2f2;
}

.tw-dark .booklet-mob-quest-head > span,
.dark .booklet-mob-quest-head > span,
.tw-dark .booklet-mob-quest-meta > span,
.dark .booklet-mob-quest-meta > span,
.tw-dark .booklet-mob-quest-meta > a,
.dark .booklet-mob-quest-meta > a,
.tw-dark .booklet-mob-quest-chip,
.dark .booklet-mob-quest-chip,
.tw-dark .booklet-mob-quest-open,
.dark .booklet-mob-quest-open {
    background: #242424;
    color: #a3a3a3;
}

.tw-dark .booklet-mob-quest-row + .booklet-mob-quest-row,
.dark .booklet-mob-quest-row + .booklet-mob-quest-row {
    border-color: #2a2a2a;
}

.tw-dark .booklet-mob-quest-row:hover,
.dark .booklet-mob-quest-row:hover {
    background: #202020;
}

.tw-dark .booklet-mob-quest-avatar,
.dark .booklet-mob-quest-avatar {
    background: #202020;
}

.tw-dark .booklet-mob-quest-titleline > a,
.dark .booklet-mob-quest-titleline > a {
    color: #7dd3fc;
}

.tw-dark .booklet-mob-quest-meta > .is-state,
.dark .booklet-mob-quest-meta > .is-state {
    background: rgba(59, 130, 246, .14);
    color: #93c5fd;
}

.tw-dark .booklet-mob-quest-meta > .is-item-context,
.dark .booklet-mob-quest-meta > .is-item-context {
    background: rgba(234, 88, 12, .14);
    color: #fdba74;
}

.tw-dark .booklet-mob-quest-summary,
.dark .booklet-mob-quest-summary {
    color: #d4d4d4;
}

.tw-dark .booklet-mob-quest-chip-group-label,
.dark .booklet-mob-quest-chip-group-label {
    background: #242424;
    color: #a3a3a3;
}

.tw-dark .booklet-mob-quest-chip-group.is-rewards .booklet-mob-quest-chip-group-label,
.dark .booklet-mob-quest-chip-group.is-rewards .booklet-mob-quest-chip-group-label {
    background: rgba(217, 119, 6, .16);
    color: #fdba74;
}

.tw-dark .booklet-mob-quest-chip.is-reward,
.dark .booklet-mob-quest-chip.is-reward,
.tw-dark .booklet-npc-quest-chip.is-reward,
.dark .booklet-npc-quest-chip.is-reward {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(217, 119, 6, .16);
    color: #fcd34d;
}

.tw-dark .booklet-mob-quest-chip.is-reward,
.dark .booklet-mob-quest-chip.is-reward {
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .18);
}

.tw-dark .booklet-npc-quest-chip.is-reward,
.dark .booklet-npc-quest-chip.is-reward {
    box-shadow: none;
}

.tw-dark a.booklet-mob-quest-chip:hover,
.dark a.booklet-mob-quest-chip:hover,
.tw-dark .booklet-mob-quest-open:hover,
.dark .booklet-mob-quest-open:hover {
    background: rgba(59, 130, 246, .14);
    color: #93c5fd;
}

@media (max-width: 639px) {
    .booklet-mob-quest-chip-group {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .booklet-mob-quest-chip-group-label {
        min-height: 22px;
        justify-self: start;
        padding: 0 7px;
    }

    .booklet-mob-quest-head {
        align-items: flex-start;
        padding-inline: 13px;
    }

    .booklet-mob-quest-list {
        padding-inline: 11px;
    }

    .booklet-mob-quest-row {
        grid-template-columns: 44px minmax(0, 1fr) 28px;
        gap: 9px;
        padding-block: 15px;
    }

    .booklet-mob-quest-avatar {
        width: 44px;
        height: 44px;
    }

    .booklet-mob-quest-avatar img {
        max-width: 40px;
        max-height: 40px;
    }

    .booklet-mob-quest-summary {
        font-size: 13px;
    }

    .booklet-mob-quest-chip-text {
        max-width: 165px;
    }
}

/* GCW-style item detail client card */
.booklet-detail-page {
    --detail-dark: #171717;
    --detail-line: rgba(255, 255, 255, .1);
    font-weight: 400;
}

.booklet-detail-page b,
.booklet-detail-page strong {
    font-weight: 500;
}

.booklet-detail-layout {
    align-items: start;
}

@media (min-width: 1280px) {
    .booklet-detail-layout {
        grid-template-columns: 380px minmax(0, 1fr);
    }
}

.booklet-detail-main-grid {
    display: grid;
    align-items: start;
    gap: 16px;
}

@media (min-width: 1280px) {
    .booklet-detail-main-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .booklet-detail-preview-side {
        position: sticky;
        top: 80px;
    }
}

.booklet-detail-top-grid {
    display: grid;
    gap: 12px;
}

@media (min-width: 1024px) {
    .booklet-detail-top-grid {
        grid-template-columns: minmax(0, 1.38fr) minmax(320px, .86fr);
    }

    .booklet-detail-top-grid.is-single {
        grid-template-columns: minmax(0, 1fr);
    }
}

.booklet-detail-float-icon {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10;
    display: flex;
    width: 64px;
    height: 64px;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    border: 1px solid #64748b;
    border-radius: 7px;
    background: #151515;
    color: #e2e8f0;
    font-size: 34px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .22);
}

.booklet-detail-float-icon img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
}

.gcw-client-item-tip {
    position: relative;
    overflow: hidden;
    border: 1px solid #64748b;
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 0, rgba(71, 85, 105, .18), transparent 34%),
        linear-gradient(180deg, #141820 0%, #0d1118 100%);
    color: #f8fafc;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .18);
}

.gcw-client-item-tip--compact {
    width: 100%;
    border-color: rgba(148, 163, 184, .56);
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 0, rgba(51, 65, 85, .14), transparent 32%),
        linear-gradient(180deg, #171d27 0%, #0a0e15 100%);
    box-shadow: none;
}

.gcw-client-item-id {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 2;
    color: #8fa2bc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: .04em;
}

.gcw-client-item-title {
    padding: 17px 38px 12px;
    text-align: center;
}

.gcw-client-item-title h1 {
    overflow-wrap: anywhere;
    color: #fff;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    text-shadow: 0 1px 2px #000;
}

.gcw-client-item-tip--compact .gcw-client-item-title h1 {
    font-size: 16px;
}

.gcw-client-item-tip--compact .gcw-client-item-title {
    padding: 14px 30px 11px;
}

.gcw-client-item-title p {
    margin-top: 4px;
    color: #a9b8cc;
    font-size: 12px;
    line-height: 16px;
}

.gcw-client-item-alerts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    padding: 0 14px 10px;
    color: #ff9b9b;
    font-size: 12px;
    font-weight: 500;
}

.gcw-client-item-divider {
    height: 1px;
    margin: 0 8px;
    background: repeating-linear-gradient(90deg, rgba(148, 163, 184, .42) 0 2px, transparent 2px 5px);
}

.gcw-client-item-core {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 108px;
    padding: 13px 15px;
}

.gcw-client-item-tip--compact .gcw-client-item-core {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    min-height: 106px;
    padding: 12px 14px;
}

.gcw-client-item-icon {
    display: flex;
    width: 78px;
    height: 78px;
    align-items: center;
    justify-content: center;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(226, 232, 240, .92)),
        #e5e7eb;
    color: #475569;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35);
}

.gcw-client-item-tip--compact .gcw-client-item-icon {
    width: 78px;
    height: 78px;
}

.gcw-client-item-icon img {
    max-width: 58px;
    max-height: 58px;
    object-fit: contain;
    image-rendering: pixelated;
}

.gcw-client-item-tip--compact .gcw-client-item-icon img {
    max-width: 58px;
    max-height: 58px;
}

.gcw-client-item-summary {
    min-width: 0;
}

.gcw-client-item-tip.is-item .gcw-client-item-core {
    align-items: start;
}

.gcw-client-item-tip.is-item .gcw-client-item-summary {
    padding-top: 2px;
}

.gcw-client-item-power {
    display: flex;
    min-height: 72px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
}

.gcw-client-item-power small {
    color: #8492a6;
    font-size: 11px;
}

.gcw-client-item-power b {
    margin-top: 3px;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    font-weight: 600;
}

.gcw-client-item-desc {
    color: #e5edf7;
    font-size: 13px;
    line-height: 1.7;
}

.gcw-client-item-desc.is-bottom {
    margin: 0 14px 12px;
    border-top: 1px dashed rgba(148, 163, 184, .28);
    padding-top: 10px;
}

.gcw-client-pet-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 10px;
    margin-bottom: 7px;
    border-bottom: 1px solid rgba(148, 163, 184, .22);
    padding-bottom: 6px;
    color: #b9c6d8;
    font-size: 11px;
}

.gcw-client-pet-meta b {
    color: #f8fafc;
    font-weight: 500;
}

.gcw-client-pet-skills {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 7px;
    color: #ff9f43;
    font-size: 12px;
    line-height: 1.55;
}

.gcw-client-pet-skills b {
    flex: 0 0 auto;
    color: #ffd166;
}

.gcw-client-pet-preview {
    position: relative;
    display: grid;
    box-sizing: border-box;
    min-height: 138px;
    place-items: center;
    margin: 0 14px 12px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 78%, rgba(96, 165, 250, .13), transparent 42%),
        rgba(15, 23, 42, .52);
    padding: 24px 14px 28px;
}

.gcw-client-pet-preview::after {
    position: absolute;
    right: 8px;
    bottom: 5px;
    color: rgba(203, 213, 225, .46);
    content: '';
}

.gcw-client-pet-preview img {
    max-width: 100px;
    max-height: 78px;
    transform: scale(1.55);
    transform-origin: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.gcw-client-pet-preview small {
    position: absolute;
    right: 7px;
    bottom: 4px;
    color: rgba(203, 213, 225, .55);
    font-size: 9px;
}

.gcw-client-item-tip--page .gcw-client-pet-preview {
    min-height: 180px;
    border-color: #e2e8f0;
    background:
        radial-gradient(circle at 50% 76%, rgba(191, 219, 254, .28), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding-top: 34px;
    padding-bottom: 38px;
}

.gcw-client-item-tip--page .gcw-client-pet-preview small {
    color: #94a3b8;
}

.gcw-client-item-tip--page .gcw-client-pet-preview img {
    transform: scale(2.2);
}

.tw-dark .gcw-client-item-tip--page .gcw-client-pet-preview,
.dark .gcw-client-item-tip--page .gcw-client-pet-preview {
    border-color: rgba(148, 163, 184, .22);
    background:
        radial-gradient(circle at 50% 78%, rgba(96, 165, 250, .13), transparent 42%),
        rgba(15, 23, 42, .52);
}

.tw-dark .gcw-client-item-tip--page .gcw-client-pet-preview small,
.dark .gcw-client-item-tip--page .gcw-client-pet-preview small {
    color: rgba(203, 213, 225, .55);
}

.mxdc-tip-pet-preview-stage {
    box-sizing: border-box;
    min-height: 138px;
    padding: 24px 14px 28px;
}

.mxdc-tip-pet-preview-image {
    display: block;
    max-width: 110px;
    max-height: 76px;
    transform: scale(1.55);
    transform-origin: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.gcw-client-item-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.gcw-client-item-specs span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    background: rgba(56, 189, 248, .1);
    padding: 4px 7px;
}

.gcw-client-item-specs small {
    color: #93c5fd;
    font-size: 11px;
}

.gcw-client-item-specs b {
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 500;
}

.gcw-client-item-reqs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.gcw-client-item-reqs span {
    min-width: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .045);
    padding: 6px 7px;
}

.gcw-client-item-reqs small,
.gcw-client-item-reqs b {
    display: block;
}

.gcw-client-item-reqs small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9ec5f8;
    font-size: 10px;
}

.gcw-client-item-reqs b {
    margin-top: 2px;
    color: #fff;
    font-size: 14px;
}

.gcw-client-item-reqs .is-zero small,
.gcw-client-item-reqs .is-zero b {
    color: #68778b;
}

.gcw-client-item-no-req {
    display: inline-flex;
    border-radius: 4px;
    background: rgba(255, 255, 255, .045);
    padding: 7px 9px;
    color: #8290a3;
    font-size: 12px;
}

.gcw-client-item-facts {
    margin: 0 13px;
    border-top: 1px dashed rgba(148, 163, 184, .28);
    border-bottom: 1px dashed rgba(148, 163, 184, .28);
    padding: 7px 0;
}

.gcw-client-item-facts > div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 2px;
    font-size: 12px;
    line-height: 18px;
}

.gcw-client-item-facts small {
    color: #8797aa;
}

.gcw-client-item-facts b {
    color: #edf4ff;
    font-weight: 500;
}

.gcw-client-item-props {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px 16px;
    padding: 10px 15px;
}

.gcw-client-item-props > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
}

.gcw-client-item-props span {
    color: #a7b5c7;
}

.gcw-client-item-props b {
    color: #7dd3fc;
    font-weight: 500;
}

.tw-pixelated {
    image-rendering: pixelated;
}

.gcw-client-item-props > div.is-enhanced {
    align-items: flex-start;
}

.gcw-client-item-prop-value.is-enhanced {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 3px 8px;
    text-align: right;
}

.gcw-client-item-prop-value.is-enhanced strong {
    color: #66ffff;
    font-size: 13px;
    font-weight: 500;
}

.gcw-client-item-prop-value.is-enhanced small {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 3px 8px;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
}

.gcw-client-item-prop-value.is-enhanced small::before {
    content: "（";
    margin-right: -5px;
    color: #718096;
}

.gcw-client-item-prop-value.is-enhanced small::after {
    content: "）";
    margin-left: -5px;
    color: #718096;
}

.gcw-client-item-prop-value.is-enhanced i {
    font-style: normal;
    font-weight: 400;
}

.gcw-client-item-prop-value .is-base {
    color: #99a7b8;
}

.gcw-client-item-prop-value .is-roll {
    color: #0ae3ad;
}

.gcw-client-item-prop-value .is-scroll {
    color: #afadff;
}

.gcw-client-item-upgrade {
    margin: 0 14px 10px;
    border-top: 1px dashed rgba(148, 163, 184, .28);
    padding-top: 9px;
    color: #fbbf24;
    font-size: 12px;
}

.gcw-client-item-upgrade span {
    color: #afadff;
}

.gcw-client-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid rgba(148, 163, 184, .16);
    background: rgba(0, 0, 0, .18);
    padding: 9px 14px;
    color: #a7b5c7;
    font-size: 11px;
}

.gcw-client-item-footer b {
    color: #f6d365;
    font-weight: 500;
}

.gcw-client-item-footer em {
    flex: 0 0 auto;
    border-radius: 4px;
    background: rgba(59, 130, 246, .16);
    padding: 3px 6px;
    color: #bfdbfe;
    font-style: normal;
}

.gcw-client-item-tip--compact .gcw-client-item-desc {
    font-size: 12px;
    line-height: 1.65;
}

.gcw-client-item-tip--compact .gcw-client-item-facts {
    margin: 0 8px;
    padding: 6px 0;
}

.gcw-client-item-tip--compact .gcw-client-item-facts > div {
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 3px 6px;
    font-size: 12px;
    line-height: 18px;
}

.gcw-client-item-tip--compact .gcw-client-item-props {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 8px;
    border-bottom: 1px dashed rgba(148, 163, 184, .28);
    padding: 7px 6px;
}

.gcw-client-item-tip--compact .gcw-client-item-upgrade {
    margin: 0 8px;
    padding: 8px 6px;
}

.gcw-client-item-tip--compact .gcw-client-item-desc.is-bottom {
    margin: 0 8px 8px;
    padding: 8px 6px 0;
}

.gcw-client-item-tip--compact .gcw-client-item-footer {
    justify-content: flex-start;
    border-top: 1px dashed rgba(148, 163, 184, .28);
    background: transparent;
    padding: 9px 14px 11px;
    font-size: 12px;
}

.gcw-client-item-tip--page {
    border: 0;
    background:
        radial-gradient(circle at 50% 0, rgba(219, 234, 254, .72), transparent 36%),
        linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    color: #0f172a;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.gcw-client-item-tip--page .gcw-client-item-id {
    color: #64748b;
}

.gcw-client-item-gender {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    min-width: 34px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
}

.gcw-client-item-gender.is-male {
    background: #dbeafe;
    color: #2563eb;
}

.gcw-client-item-gender.is-female {
    background: #ffe4e6;
    color: #e11d48;
}

.gcw-client-item-tip--page .gcw-client-item-title h1 {
    color: #0f172a;
    font-size: 24px;
    text-shadow: none;
}

.gcw-client-item-tip--page .gcw-client-item-title p {
    color: #64748b;
    font-size: 14px;
    line-height: 20px;
}

.gcw-client-item-tip--page .gcw-client-item-alerts {
    color: #dc2626;
    font-size: 13px;
}

.gcw-client-item-tip--page .gcw-client-item-divider {
    background: repeating-linear-gradient(90deg, #cbd5e1 0 2px, transparent 2px 5px);
}

.gcw-client-item-tip--page .gcw-client-item-icon {
    border-color: #cbd5e1;
    background: linear-gradient(145deg, #fff, #eef2f7);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8), 0 5px 14px rgba(15, 23, 42, .08);
}

.gcw-client-item-tip--page .gcw-client-item-desc {
    color: #334155;
    font-size: 15px;
    line-height: 1.75;
}

.gcw-client-item-tip--page.is-item .gcw-client-item-desc {
    font-size: 14px;
    line-height: 1.65;
}

.gcw-client-item-tip--page .gcw-client-item-power small {
    color: #64748b;
    font-size: 13px;
}

.gcw-client-item-tip--page .gcw-client-item-power b {
    color: #0f172a;
    font-size: 32px;
}

.gcw-client-item-tip--page .gcw-client-item-desc.is-bottom,
.gcw-client-item-tip--page .gcw-client-item-facts,
.gcw-client-item-tip--page .gcw-client-item-upgrade {
    border-color: #dbe3ed;
}

.gcw-client-item-tip--page .gcw-client-item-reqs span,
.gcw-client-item-tip--page .gcw-client-item-no-req {
    background: #f1f5f9;
}

.gcw-client-item-tip--page .gcw-client-item-reqs small {
    color: #64748b;
    font-size: 12px;
}

.gcw-client-item-tip--page .gcw-client-item-reqs b {
    color: #0f172a;
    font-size: 16px;
}

.gcw-client-item-tip--page .gcw-client-item-no-req {
    color: #64748b;
    font-size: 14px;
}

.gcw-client-item-tip--page .gcw-client-item-facts small,
.gcw-client-item-tip--page .gcw-client-item-props span {
    color: #64748b;
}

.gcw-client-item-tip--page .gcw-client-item-facts > div {
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 6px 3px;
    font-size: 14px;
    line-height: 20px;
}

.gcw-client-item-tip--page .gcw-client-item-facts b {
    color: #0f172a;
    font-size: 14px;
}

.gcw-client-item-tip--page .gcw-client-item-props > div {
    padding: 5px 0;
    font-size: 14px;
}

.gcw-client-item-tip--page .gcw-client-item-props b {
    color: #0284c7;
    font-size: 15px;
}

.gcw-client-item-tip--page .gcw-client-item-upgrade {
    font-size: 14px;
    line-height: 20px;
}

.gcw-client-item-tip--page .gcw-client-item-footer {
    border-color: #e2e8f0;
    background: rgba(241, 245, 249, .78);
    color: #64748b;
    font-size: 13px;
}

.gcw-client-item-tip--page .gcw-client-item-footer b {
    color: #b45309;
}

.gcw-client-item-tip--page .gcw-client-item-footer em {
    background: #dbeafe;
    color: #1d4ed8;
}

.tw-dark .gcw-client-item-tip--page,
.dark .gcw-client-item-tip--page {
    border-color: #64748b;
    background:
        radial-gradient(circle at 50% 0, rgba(71, 85, 105, .18), transparent 34%),
        linear-gradient(180deg, #141820 0%, #0d1118 100%);
    color: #f8fafc;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-id,
.dark .gcw-client-item-tip--page .gcw-client-item-id {
    color: #8fa2bc;
}

.tw-dark .gcw-client-item-gender.is-male,
.dark .gcw-client-item-gender.is-male {
    background: rgba(59, 130, 246, .22);
    color: #bfdbfe;
}

.tw-dark .gcw-client-item-gender.is-female,
.dark .gcw-client-item-gender.is-female {
    background: rgba(244, 63, 94, .22);
    color: #fecdd3;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-title h1,
.dark .gcw-client-item-tip--page .gcw-client-item-title h1 {
    color: #fff;
    text-shadow: 0 1px 2px #000;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-title p,
.dark .gcw-client-item-tip--page .gcw-client-item-title p {
    color: #a9b8cc;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-alerts,
.dark .gcw-client-item-tip--page .gcw-client-item-alerts {
    color: #ff9b9b;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-divider,
.dark .gcw-client-item-tip--page .gcw-client-item-divider {
    background: repeating-linear-gradient(90deg, rgba(148, 163, 184, .42) 0 2px, transparent 2px 5px);
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-icon,
.dark .gcw-client-item-tip--page .gcw-client-item-icon {
    border-color: #9ca3af;
    background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(226, 232, 240, .92));
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-desc,
.dark .gcw-client-item-tip--page .gcw-client-item-desc {
    color: #e5edf7;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-power small,
.dark .gcw-client-item-tip--page .gcw-client-item-power small {
    color: #8492a6;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-power b,
.dark .gcw-client-item-tip--page .gcw-client-item-power b {
    color: #fff;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-desc.is-bottom,
.dark .gcw-client-item-tip--page .gcw-client-item-desc.is-bottom,
.tw-dark .gcw-client-item-tip--page .gcw-client-item-facts,
.dark .gcw-client-item-tip--page .gcw-client-item-facts,
.tw-dark .gcw-client-item-tip--page .gcw-client-item-upgrade,
.dark .gcw-client-item-tip--page .gcw-client-item-upgrade {
    border-color: rgba(148, 163, 184, .28);
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-reqs span,
.dark .gcw-client-item-tip--page .gcw-client-item-reqs span,
.tw-dark .gcw-client-item-tip--page .gcw-client-item-no-req,
.dark .gcw-client-item-tip--page .gcw-client-item-no-req {
    background: rgba(255, 255, 255, .045);
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-reqs small,
.dark .gcw-client-item-tip--page .gcw-client-item-reqs small,
.tw-dark .gcw-client-item-tip--page .gcw-client-item-no-req,
.dark .gcw-client-item-tip--page .gcw-client-item-no-req,
.tw-dark .gcw-client-item-tip--page .gcw-client-item-facts small,
.dark .gcw-client-item-tip--page .gcw-client-item-facts small,
.tw-dark .gcw-client-item-tip--page .gcw-client-item-props span,
.dark .gcw-client-item-tip--page .gcw-client-item-props span {
    color: #8797aa;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-reqs b,
.dark .gcw-client-item-tip--page .gcw-client-item-reqs b,
.tw-dark .gcw-client-item-tip--page .gcw-client-item-facts b,
.dark .gcw-client-item-tip--page .gcw-client-item-facts b {
    color: #fff;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-props b,
.dark .gcw-client-item-tip--page .gcw-client-item-props b {
    color: #7dd3fc;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-footer,
.dark .gcw-client-item-tip--page .gcw-client-item-footer {
    border-color: rgba(148, 163, 184, .16);
    background: rgba(0, 0, 0, .18);
    color: #a7b5c7;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-footer b,
.dark .gcw-client-item-tip--page .gcw-client-item-footer b {
    color: #f6d365;
}

.tw-dark .gcw-client-item-tip--page .gcw-client-item-footer em,
.dark .gcw-client-item-tip--page .gcw-client-item-footer em {
    background: rgba(59, 130, 246, .16);
    color: #bfdbfe;
}

@media (max-width: 639px) {
    .gcw-client-item-core {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
    }

    .gcw-client-item-icon {
        width: 66px;
        height: 66px;
    }

    .gcw-client-item-icon img {
        max-width: 50px;
        max-height: 50px;
    }

    .gcw-client-item-reqs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gcw-client-item-props {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* GCW-style item drop table */
.booklet-detail-drop-grid {
    display: block;
    grid-template-columns: none;
    gap: 0;
    padding: 0 14px 6px;
}

.booklet-detail-drop-columns,
.booklet-detail-drop {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 120px 120px 24px;
    gap: 14px;
    align-items: center;
}

.booklet-detail-drop-columns {
    border-bottom: 1px solid #e5eaf1;
    padding: 9px 10px 8px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}

.booklet-detail-drop-columns span:nth-child(2),
.booklet-detail-drop-columns span:nth-child(3) {
    text-align: right;
}

.booklet-detail-drop {
    position: relative;
    min-height: 64px;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    border-radius: 0;
    background: transparent;
    padding: 9px 10px;
    color: #0f172a;
    transition: background .16s ease, padding-left .16s ease;
}

.booklet-detail-drop:last-child {
    border-bottom: 0;
}

.booklet-detail-drop-id,
.booklet-detail-mini-id {
    display: block;
    align-self: auto;
    min-width: 0;
    border-radius: 0;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
}

.booklet-detail-drop-id small,
.booklet-detail-mini-id small {
    display: inline;
    margin-right: 4px;
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
}

.booklet-detail-drop:hover {
    border-bottom-color: #edf1f5;
    border-radius: 7px;
    background: #f5f9ff;
    padding-left: 14px;
}

.booklet-detail-drop-tip {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 10px;
}

.booklet-detail-drop-meta {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
}

.booklet-detail-drop-level,
.booklet-detail-drop-rate {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.booklet-detail-drop-level small,
.booklet-detail-drop-rate small {
    display: none;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 500;
}

.booklet-detail-drop-level b,
.booklet-detail-drop-rate b {
    color: #334155;
    font-size: 13px;
    font-weight: 500;
}

.booklet-detail-drop-rate b {
    color: #059669;
}

.booklet-detail-drop-arrow {
    color: #94a3b8;
    font-size: 18px;
    transition: color .16s ease, transform .16s ease;
}

.booklet-detail-drop:hover .booklet-detail-drop-arrow {
    color: #2563eb;
    transform: translateX(2px);
}

.booklet-detail-drop-id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.2;
}

.booklet-detail-mini-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.booklet-detail-quest-list {


    font-size: 14px;
    font-weight: 500;
}

.booklet-detail-drop-meta b {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
}

.booklet-detail-drop em {
    display: block;
    color: #64748b;
    line-height: 16px;
    font-size: 12px;
    font-style: normal;
}

.booklet-detail-drop-rate {
    align-self: auto;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.booklet-detail-drop-icon {
    width: 52px;
    height: 48px;
}

.booklet-detail-drop-icon img {
    max-width: 50px;
    max-height: 46px;
}

@media (max-width: 639px) {
    .booklet-detail-drop-grid {
        padding: 4px 10px;
    }

    .booklet-detail-drop-columns {
        display: none;
    }

    .booklet-detail-drop {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 10px;
        padding: 10px 4px;
    }

    .booklet-detail-drop:hover {
        padding-left: 8px;
    }

    .booklet-detail-drop-tip {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .booklet-detail-drop-level {
        grid-column: 2;
        grid-row: 1;
    }

    .booklet-detail-drop-rate {
        grid-column: 2;
        grid-row: 2;
    }

    .booklet-detail-drop-level small,
    .booklet-detail-drop-rate small {
        display: block;
    }

    .booklet-detail-drop-arrow {
        display: none;
    }
}




.tw-dark .booklet-detail-drop,
.dark .booklet-detail-drop {
    border-color: #2a2a2a;
    background: transparent;
}

.tw-dark .booklet-detail-drop:hover,
.dark .booklet-detail-drop:hover {
    border-color: #2a2a2a;
    background: #202020;
}

.tw-dark .booklet-detail-mob-tag,
.dark .booklet-detail-mob-tag {
    background: #29313b;
    color: #b7c2d0;
}

.tw-dark .booklet-detail-mob-tag.is-boss,
.tw-dark .booklet-detail-mob-tag.is-rose,
.dark .booklet-detail-mob-tag.is-boss,
.dark .booklet-detail-mob-tag.is-rose {
    background: rgba(244, 63, 94, .16);
    color: #fda4af;
}

.tw-dark .booklet-detail-mob-tag.is-undead,
.dark .booklet-detail-mob-tag.is-undead {
    background: rgba(139, 92, 246, .18);
    color: #c4b5fd;
}

.tw-dark .booklet-detail-mob-tag.is-blue,
.dark .booklet-detail-mob-tag.is-blue {
    background: rgba(59, 130, 246, .16);
    color: #93c5fd;
}

.tw-dark .booklet-shop-source-columns,
.dark .booklet-shop-source-columns,
.tw-dark .booklet-detail-drop-columns,
.dark .booklet-detail-drop-columns,
.tw-dark .booklet-shop-source-row,
.dark .booklet-shop-source-row {
    border-color: #2a2a2a;
}

/* GCW-style item relationship lists */
.booklet-relation-board {
    display: block;
    padding: 0 14px 6px;
}

.booklet-relation-block,
.booklet-relation-group {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.booklet-relation-group + .booklet-relation-group {
    border-top: 1px solid #e7edf4;
}

.booklet-relation-block h3,
.booklet-relation-group h3 {
    margin: 0;
    border-bottom: 1px solid #e7edf4;
    padding: 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.booklet-relation-list,
.booklet-relation-group .booklet-detail-mini-grid {
    display: block;
}

.booklet-relation-mini,
.booklet-relation-group .booklet-detail-mini {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto 28px;
    min-height: 72px;
    align-items: center;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #e8edf3;
    border-radius: 0;
    background: transparent;
    padding: 10px;
    color: #0f172a;
    transition: background .15s ease, padding-left .15s ease;
}

.booklet-relation-list .booklet-relation-mini {
    margin: 0 14px;
}

.booklet-relation-mini:last-child,
.booklet-relation-group .booklet-detail-mini:last-child {
    border-bottom: 0;
}

.booklet-relation-mini:hover,
.booklet-relation-group .booklet-detail-mini:hover {
    border-color: #e8edf3;
    border-radius: 7px;
    background: #f5f9ff;
    padding-left: 14px;
    transform: none;
}

.booklet-relation-mini .booklet-detail-mini-icon,
.booklet-relation-group .booklet-detail-mini-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 9px;
    background: #f8fafc;
    color: #64748b;
    font-size: 22px;
}

.booklet-relation-mini .booklet-detail-mini-icon.is-quest {
    background: #f8fafc;
    color: #475569;
}

.booklet-relation-mini .booklet-detail-mini-icon.is-npc {
    align-self: center;
    background: linear-gradient(180deg, #fff 0%, #f6f9fc 100%);
}

.booklet-relation-mini .booklet-detail-mini-icon.is-npc img {
    max-width: 46px;
    max-height: 46px;
    object-fit: contain;
    image-rendering: auto;
}

.booklet-relation-mini .booklet-detail-mini-meta,
.booklet-relation-group .booklet-detail-mini-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.booklet-relation-mini .booklet-detail-mini-meta b,
.booklet-relation-group .booklet-detail-mini-meta b {
    max-width: 100%;
    color: #065bd7;
    font-size: 14px;
    font-weight: 500;
}

.booklet-relation-mini .booklet-detail-mini-id,
.booklet-relation-mini .booklet-detail-mini-meta em,
.booklet-relation-group .booklet-detail-mini-id,
.booklet-relation-group .booklet-detail-mini-meta em {
    display: inline-flex;
    width: auto;
    align-items: center;
    border-radius: 4px;
    background: #f1f5f9;
    padding: 3px 7px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
}

.booklet-relation-mini .booklet-detail-mini-meta em:empty,
.booklet-relation-group .booklet-detail-mini-meta em:empty {
    display: none;
}

.booklet-relation-action {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #fdba74;
    border-radius: 999px;
    background: #fff8ed;
    padding: 0 14px;
    color: #ea580c;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.booklet-relation-arrow {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 18px;
    transition: color .15s ease, transform .15s ease;
}

.booklet-relation-mini:hover .booklet-relation-arrow {
    color: #2563eb;
    transform: translateX(2px);
}

.booklet-cash-source-table {
    overflow: hidden;
}

.booklet-skill-info-toolbar {
    margin-bottom: 10px;
}

.booklet-skill-info-content {
    margin-top: 10px;
}

.booklet-cash-source-head,
.booklet-cash-source-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 72px 100px 92px;
    align-items: center;
    gap: 12px;
}

.booklet-cash-source-head {
    min-height: 34px;
    border-bottom: 1px solid #e3eaf2;
    padding: 0 12px;
    background: #f8fafc;
    color: #718096;
    font-size: 11px;
    font-weight: 600;
}

.booklet-cash-source-head > span:not(:first-child) {
    text-align: center;
}

.booklet-cash-source-row {
    min-height: 68px;
    border-bottom: 1px solid #e8edf3;
    padding: 9px 12px;
    color: #334155;
    transition: background .15s ease;
}

.booklet-cash-source-row:last-child {
    border-bottom: 0;
}

.booklet-cash-source-row:hover {
    background: #f5f9ff;
}

.booklet-cash-source-row.is-on-sale {
    box-shadow: inset 3px 0 #34d399;
}

.booklet-cash-source-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.booklet-cash-source-item > span:last-child {
    min-width: 0;
}

.booklet-cash-source-item b,
.booklet-cash-source-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-cash-source-item b {
    color: #065bd7;
    font-size: 14px;
    font-weight: 500;
}

.booklet-cash-source-item small {
    margin-top: 4px;
    color: #94a3b8;
    font-size: 11px;
}

.booklet-cash-source-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.booklet-cash-source-meta small {
    display: inline;
    flex: 0 1 auto;
}

.booklet-cash-source-meta .booklet-cash-source-sn {
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.booklet-cash-source-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 21px;
}

.booklet-cash-source-icon img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
}

.booklet-cash-source-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    color: #475569;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.booklet-cash-source-cell > small {
    display: none;
}

.booklet-cash-source-cell > b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
}

.booklet-cash-source-cell.is-price > b {
    color: #b45309;
}

.booklet-cash-source-cell.is-status > b {
    display: inline-flex;
    min-width: 48px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 8px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
}

.booklet-cash-source-row.is-on-sale .booklet-cash-source-cell.is-status > b {
    background: #d1fae5;
    color: #047857;
}

.booklet-cash-source-row.is-off-sale .booklet-cash-source-cell.is-status > b {
    background: #ffe4e6;
    color: #be123c;
}

@media (max-width: 639px) {
    .booklet-relation-board {
        padding: 0 10px 4px;
    }

    .booklet-relation-list .booklet-relation-mini {
        margin: 0 10px;
    }

    .booklet-relation-mini,
    .booklet-relation-group .booklet-detail-mini {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 9px;
        padding: 9px 4px;
    }

    .booklet-relation-mini .booklet-detail-mini-icon,
    .booklet-relation-group .booklet-detail-mini-icon {
        width: 44px;
        height: 44px;
    }

    .booklet-relation-action {
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    .booklet-relation-arrow {
        display: none;
    }

    .booklet-cash-source-head {
        display: none;
    }

    .booklet-cash-source-row {
        grid-template-columns: .75fr 1fr 1fr;
        gap: 7px;
        padding: 10px 5px;
    }

    .booklet-cash-source-item {
        grid-column: 1 / -1;
        padding: 0 5px 2px;
    }

    .booklet-cash-source-cell {
        min-height: 44px;
        flex-direction: column;
        gap: 3px;
        border-radius: 6px;
        background: #f8fafc;
        padding: 5px 4px;
    }

    .booklet-cash-source-cell > small {
        display: block;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 400;
    }

    .booklet-cash-source-cell > b {
        max-width: 100%;
        font-size: 11px;
    }
}

.tw-dark .booklet-relation-group + .booklet-relation-group,
.dark .booklet-relation-group + .booklet-relation-group,
.tw-dark .booklet-relation-mini,
.dark .booklet-relation-mini,
.tw-dark .booklet-relation-group .booklet-detail-mini,
.dark .booklet-relation-group .booklet-detail-mini,
.tw-dark .booklet-relation-block h3,
.dark .booklet-relation-block h3,
.tw-dark .booklet-relation-group h3,
.dark .booklet-relation-group h3 {
    border-color: #2a2a2a;
}

.tw-dark .booklet-relation-mini:hover,
.dark .booklet-relation-mini:hover,
.tw-dark .booklet-relation-group .booklet-detail-mini:hover,
.dark .booklet-relation-group .booklet-detail-mini:hover {
    background: #202731;
}

.tw-dark .booklet-relation-mini .booklet-detail-mini-id,
.dark .booklet-relation-mini .booklet-detail-mini-id,
.tw-dark .booklet-relation-mini .booklet-detail-mini-meta em,
.dark .booklet-relation-mini .booklet-detail-mini-meta em,
.tw-dark .booklet-relation-arrow,
.dark .booklet-relation-arrow {
    background: #222831;
    color: #a9b6c8;
}

.tw-dark .booklet-cash-source-head,
.dark .booklet-cash-source-head,
.tw-dark .booklet-cash-source-row,
.dark .booklet-cash-source-row {
    border-color: #2a2a2a;
}

.tw-dark .booklet-cash-source-head,
.dark .booklet-cash-source-head,
.tw-dark .booklet-cash-source-cell,
.dark .booklet-cash-source-cell {
    background: #20242b;
    color: #c3cedc;
}

.tw-dark .booklet-cash-source-row:hover,
.dark .booklet-cash-source-row:hover {
    background: #202731;
}

.tw-dark .booklet-cash-source-icon,
.dark .booklet-cash-source-icon {
    border-color: #343b46;
    background: #1b1f25;
}

.tw-dark .booklet-cash-source-item b,
.dark .booklet-cash-source-item b {
    color: #93c5fd;
}

.tw-dark .booklet-cash-source-cell.is-price > b,
.dark .booklet-cash-source-cell.is-price > b {
    color: #fcd34d;
}

.tw-dark .booklet-cash-source-row.is-on-sale .booklet-cash-source-cell.is-status > b,
.dark .booklet-cash-source-row.is-on-sale .booklet-cash-source-cell.is-status > b {
    background: rgba(16, 185, 129, .16);
    color: #6ee7b7;
}

.tw-dark .booklet-cash-source-row.is-off-sale .booklet-cash-source-cell.is-status > b,
.dark .booklet-cash-source-row.is-off-sale .booklet-cash-source-cell.is-status > b {
    background: rgba(244, 63, 94, .16);
    color: #fda4af;
}

/* Cache refresh: item detail anchor navigation and relation tables, 2026-08-10. */

/* Recipe list toolbar uses project CSS because arbitrary Tailwind columns are not bundled. */
.booklet-make-toolbar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

@media (min-width: 768px) {
    .booklet-make-toolbar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .booklet-make-toolbar-grid {
        grid-template-columns: minmax(220px, 1fr) minmax(180px, 280px) 140px 110px;
    }
}

/* Craft detail: material acquisition sources */
.booklet-detail-craft-section .booklet-craft-wrap {
    gap: 10px;
    padding: 10px 14px 14px;
}

.booklet-detail-craft-section .booklet-craft-tree {
    gap: 18px;
}

.booklet-detail-craft-section .booklet-craft-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.booklet-detail-craft-section .booklet-craft-card + .booklet-craft-card {
    padding-top: 16px;
    box-shadow: inset 0 1px #eef2f7;
}

.booklet-detail-craft-section .booklet-craft-card-head {
    gap: 7px;
    border: 0;
    background: transparent;
    padding: 2px 2px 9px;
}

.booklet-detail-craft-section .booklet-craft-kind,
.booklet-detail-craft-section .booklet-craft-role {
    min-height: auto;
    border-radius: 0;
    background: transparent;
    padding: 0;
    font-weight: 500;
}

.booklet-detail-craft-section .booklet-craft-role::before {
    content: "·";
    margin-right: 7px;
    color: #cbd5e1;
}

.booklet-detail-craft-section .booklet-craft-card-head a {
    padding-right: 2px;
}

.booklet-detail-craft-section .booklet-craft-flow {
    gap: 8px;
    padding: 0 2px 2px;
}

.booklet-detail-craft-section .booklet-craft-col-title {
    margin-bottom: 6px;
}

.booklet-detail-craft-section .booklet-craft-target-control {
    border: 0;
    border-radius: 6px;
    background: #eff6ff;
    padding: 3px 7px;
}

.booklet-detail-craft-section .booklet-craft-target-control input {
    border: 0;
    background: rgba(255, 255, 255, .88);
}

.booklet-detail-craft-section .booklet-craft-list {
    gap: 6px;
}

.booklet-detail-craft-section .booklet-craft-item {
    border: 0;
    border-radius: 7px;
    background: #f8fafc;
    padding: 8px 9px;
}

.booklet-detail-craft-section .booklet-craft-item.is-current {
    border: 0;
    background: rgba(16, 185, 129, .08);
    box-shadow: inset 3px 0 #34d399;
}

.booklet-detail-craft-section .booklet-craft-flow--tree .booklet-craft-col--materials {
    margin-top: 2px;
}

.dark .booklet-detail-craft-section .booklet-craft-card,
.tw-dark .booklet-detail-craft-section .booklet-craft-card,
.dark .booklet-detail-craft-section .booklet-craft-card-head,
.tw-dark .booklet-detail-craft-section .booklet-craft-card-head {
    border-color: transparent;
    background: transparent;
}

.dark .booklet-detail-craft-section .booklet-craft-card + .booklet-craft-card,
.tw-dark .booklet-detail-craft-section .booklet-craft-card + .booklet-craft-card {
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

.dark .booklet-detail-craft-section .booklet-craft-item,
.tw-dark .booklet-detail-craft-section .booklet-craft-item {
    border: 0;
    background: rgba(255, 255, 255, .045);
}

.dark .booklet-detail-craft-section .booklet-craft-item.is-current,
.tw-dark .booklet-detail-craft-section .booklet-craft-item.is-current {
    background: rgba(16, 185, 129, .1);
    box-shadow: inset 3px 0 #34d399;
}

.dark .booklet-detail-craft-section .booklet-craft-target-control,
.tw-dark .booklet-detail-craft-section .booklet-craft-target-control {
    border: 0;
    background: rgba(59, 130, 246, .12);
}

.booklet-make-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.booklet-recipe-toolbar,
.booklet-recipe-summary {
    margin-bottom: 10px;
}

.booklet-recipe-column,
.booklet-recipe-aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 1024px) {
    .booklet-make-detail-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.booklet-make-source-grid {
    display: flex;
    flex-direction: column;
    background: #fff;
}

.booklet-make-source-card {
    display: grid;
    grid-template-columns: minmax(210px, .72fr) minmax(0, 2fr) 112px;
    min-width: 0;
    border-bottom: 1px solid #e5eaf1;
    background: #fff;
}

.booklet-make-source-card:last-child { border-bottom: 0; }

.booklet-make-source-card-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 4px 10px;
    padding: 14px;
    border-right: 1px solid #edf1f6;
    background: #fbfcfe;
}

.booklet-make-source-item-icon,
.booklet-make-source-entity-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e3e9f1;
    border-radius: 5px;
    background: #fff;
    color: #64748b;
}

.booklet-make-source-item-icon { width: 44px; height: 44px; }
.booklet-make-source-entity-icon { width: 34px; height: 34px; }

.booklet-make-source-item-icon img,
.booklet-make-source-entity-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.booklet-make-source-item-meta,
.booklet-make-source-entity-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.booklet-make-source-item-meta { gap: 4px; }
.booklet-make-source-entity-meta { gap: 2px; }

.booklet-make-source-item-meta a,
.booklet-make-source-entity-meta > span {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    color: #075eb8;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-make-source-item-meta a {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.booklet-make-source-item-meta a:hover { color: #2563eb; }

.booklet-make-source-item-meta > span {
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
}

.booklet-make-source-required {
    grid-column: 2;
    justify-self: start;
    border-radius: 4px;
    background: #ecfdf5;
    padding: 4px 7px;
    color: #047857;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.booklet-make-source-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 11px 14px;
    background: #fff;
}

.booklet-make-source-group {
    min-width: 0;
    border-radius: 5px;
    background: #f8fafc;
    padding: 8px 9px;
}

.booklet-make-source-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: #475569;
    font-size: 12px;
    line-height: 1.2;
}

.booklet-make-source-group-title > span:first-child { color: #3b82f6; font-size: 15px; }

.booklet-make-source-group-title em {
    margin-left: auto;
    border-radius: 4px;
    background: #f1f5f9;
    padding: 2px 6px;
    color: #64748b;
    font-size: 11px;
    font-style: normal;
}

.booklet-make-source-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 4px;
    padding: 5px 7px;
    border: 1px solid #e5ebf2;
    border-radius: 5px;
    background: #fff;
    color: #334155;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.booklet-make-source-row:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    transform: translateX(2px);
}

.booklet-make-source-row > span:last-child { color: #94a3b8; font-size: 16px; }

.booklet-make-source-entity-meta > span {
    color: #1e3a5f;
    font-size: 13px;
    line-height: 1.25;
}

.booklet-make-source-entity-meta small {
    overflow: hidden;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-make-source-note { color: #64748b; font-size: 12px; white-space: nowrap; }

.booklet-make-source-row.is-recipe .booklet-make-source-entity-icon {
    background: #eff6ff;
    color: #2563eb;
    font-size: 17px;
}

.booklet-make-source-empty {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border-radius: 5px;
    background: #f8fafc;
    padding: 10px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.booklet-make-source-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 100%;
    border-left: 1px solid #edf1f6;
    background: #fbfcfe;
    color: #2563eb;
    font-size: 12px;
    text-align: center;
    transition: background-color .16s ease;
}

.booklet-make-source-more:hover { background: #eff6ff; }

.tw-dark .booklet-make-source-grid,
.dark .booklet-make-source-grid { background: #101214; }

.tw-dark .booklet-make-source-card,
.dark .booklet-make-source-card,
.tw-dark .booklet-make-source-item-icon,
.dark .booklet-make-source-item-icon,
.tw-dark .booklet-make-source-entity-icon,
.dark .booklet-make-source-entity-icon {
    border-color: #2d333b;
    background: #17191c;
}

.tw-dark .booklet-make-source-card-head,
.dark .booklet-make-source-card-head {
    border-color: #2a2f36;
    background: #191c20;
}

.tw-dark .booklet-make-source-item-meta a,
.dark .booklet-make-source-item-meta a,
.tw-dark .booklet-make-source-entity-meta > span,
.dark .booklet-make-source-entity-meta > span { color: #7dd3fc; }

.tw-dark .booklet-make-source-required,
.dark .booklet-make-source-required { background: rgba(16, 185, 129, .13); color: #6ee7b7; }

.tw-dark .booklet-make-source-group,
.dark .booklet-make-source-group,
.tw-dark .booklet-make-source-group-title em,
.dark .booklet-make-source-group-title em,
.tw-dark .booklet-make-source-empty,
.dark .booklet-make-source-empty { background: #20242a; }

.tw-dark .booklet-make-source-body,
.dark .booklet-make-source-body { background: #17191c; }

.tw-dark .booklet-make-source-row,
.dark .booklet-make-source-row { border-color: #2a2f36; background: #1a1d21; }

.tw-dark .booklet-make-source-more,
.dark .booklet-make-source-more { border-color: #2a2f36; background: #1a1d21; color: #7dd3fc; }

@media (max-width: 760px) {
    .booklet-make-source-grid { gap: 12px; padding: 12px; background: #f1f5f9; }

    .booklet-make-source-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid #d7e0eb;
        border-radius: 6px;
    }

    .booklet-make-source-card-head {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        padding: 10px 11px;
        border-right: 0;
        border-bottom: 1px solid #edf1f6;
    }

    .booklet-make-source-required { grid-column: auto; }
    .booklet-make-source-more { min-height: 36px; border-top: 1px solid #edf1f6; border-left: 0; }
    .booklet-make-source-body { gap: 8px; padding: 10px; }
}

@media (max-width: 520px) {
    .booklet-make-source-grid { gap: 10px; padding: 10px; }
    .booklet-make-source-row { grid-template-columns: 32px minmax(0, 1fr) 16px; }
    .booklet-make-source-entity-icon { width: 32px; height: 32px; }
    .booklet-make-source-note { display: none; }
}

/* Item detail: stable profile column + flexible relationship column. */
.booklet-item-detail-layout {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
}

.booklet-item-detail-sidebar {
    position: sticky;
    top: 78px;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.booklet-item-detail-related {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.booklet-item-drop-section {
    order: -1;
}

.booklet-item-detail-sidebar .booklet-detail-top-grid {
    grid-template-columns: minmax(0, 1fr);
}

.booklet-detail-lite-head {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.booklet-detail-lite-head .booklet-detail-preview-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.booklet-detail-lite-head .booklet-detail-preview-title span[class*="tw-icon-"] {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 17px;
}

.booklet-detail-lite-toggle {
    display: inline-flex;
    min-width: 82px;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #bfd7ff;
    border-radius: 6px;
    background: #f8fbff;
    color: #2563eb;
    padding: 0 9px 0 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.booklet-detail-lite-toggle:hover,
.booklet-detail-lite-toggle.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.booklet-detail-lite-switch {
    display: inline-flex;
    width: 32px;
    height: 18px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 5px;
    background: #dbeafe;
    padding: 2px;
    transition: background .16s ease;
}

.booklet-detail-lite-switch span[class*="tw-icon-"] {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #fff;
    color: #2563eb;
    font-size: 12px;
    transition: transform .16s ease;
}

.booklet-detail-lite-toggle.is-active .booklet-detail-lite-switch {
    background: #2563eb;
}

.booklet-detail-lite-toggle.is-active .booklet-detail-lite-switch span[class*="tw-icon-"] {
    transform: translateX(14px);
}

.booklet-detail-preview-box.is-large.is-lite {
    position: relative;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #f8fafc;
    touch-action: pan-y;
}

.booklet-detail-lite-frame {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
    background: transparent;
}

.booklet-detail-lite-scroll-proxy {
    display: none;
}

.tw-dark .booklet-detail-lite-toggle,
.dark .booklet-detail-lite-toggle {
    border-color: #2f4d78;
    background: #172033;
    color: #bfdbfe;
}

.tw-dark .booklet-detail-lite-toggle.is-active,
.dark .booklet-detail-lite-toggle.is-active {
    border-color: #60a5fa;
}

.tw-dark .booklet-detail-lite-switch,
.dark .booklet-detail-lite-switch {
    background: #2f4d78;
}

.tw-dark .booklet-detail-preview-box.is-large.is-lite,
.dark .booklet-detail-preview-box.is-large.is-lite {
    background: #111827;
}

@media (max-width: 1100px) {
    .booklet-item-detail-layout {
        grid-template-columns: 350px minmax(0, 1fr);
    }

    .booklet-royal-beauty-card.is-item-detail .booklet-royal-beauty-summary,
    .booklet-royal-beauty-card.is-topic-page .booklet-royal-beauty-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .booklet-item-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .booklet-item-detail-sidebar {
        position: static;
    }
}

@media (max-width: 760px) {
    .booklet-royal-beauty-summary {
        grid-template-columns: 1fr;
    }

    .booklet-royal-beauty-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .booklet-detail-preview-box.is-large.is-lite .booklet-detail-lite-scroll-proxy {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        background: transparent;
        touch-action: pan-y;
    }
}