/* 冒险岛079小册子站点专用样式 */
html,
body {
    min-height: 100%;
}

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

body > main {
    flex: 1 0 auto;
}

.ffu-item-tip-layer {
    overflow: hidden;
    border-radius: 7px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

.ffu-tip-id-badge {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 3;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    background: rgba(15, 23, 42, .78);
    padding: 2px 7px;
    color: #dbeafe;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
    pointer-events: none;
}

.tw-icon-\[mdi--chart-line\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3h2v16h16v2H3zm15.7 5.3-4.6 4.6-3-3L6.4 14.6 5 13.2l6.1-6.1 3 3L17.3 7H15V5h6v6h-2V8.7z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--heart\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m12 21.35-1.45-1.32C5.4 15.36 2 12.27 2 8.5 2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--cash\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 6h18v12H3zm2 2v8h14V8zm7 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6M7 9.5A1.5 1.5 0 0 1 5.5 11V9.5zm11.5 0V11A1.5 1.5 0 0 1 17 9.5zM5.5 13A1.5 1.5 0 0 1 7 14.5H5.5zm13 1.5H17a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--water\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 3.77 11.25 4.6C8.24 7.95 6 10.44 6 13a6 6 0 0 0 12 0c0-2.56-2.24-5.05-5.25-8.4zM12 20a4 4 0 0 1-4-4c0-1.67 1.66-3.79 4-6.42 2.34 2.63 4 4.75 4 6.42a4 4 0 0 1-4 4'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--sword-cross\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m6.92 5 8.84 8.84 1.41-1.41L8.34 3.59 6.92 5m10.17 14.59L18.5 21 21 18.5l-1.41-1.41-2.5 2.5M3 18.5 5.5 21l1.41-1.41-2.5-2.5L3 18.5m2.5-15L3 6l8.84 8.84 1.41-1.41L4.41 4.59 5.5 3.5m12.99 0-8.83 8.84 1.41 1.41L21 4.91 18.49 3.5M8.24 15.76 5.5 18.5 6.91 19.91l2.74-2.74zM15.76 8.24l2.74-2.74-1.41-1.41-2.74 2.74z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--shield-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5zm0 2.18 7 3.12V11c0 4.52-2.98 8.69-7 9.93-4.02-1.24-7-5.41-7-9.93V6.3z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--shield-star-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5zm0 2.18 7 3.12V11c0 4.52-2.98 8.69-7 9.93-4.02-1.24-7-5.41-7-9.93V6.3zM12 6l1.13 3.09 3.29.12-2.6 2.01.9 3.17L12 12.53 9.28 14.4l.9-3.17-2.6-2.01 3.29-.12z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--star-four-points-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m12 2 1.7 6.3L20 10l-6.3 1.7L12 18l-1.7-6.3L4 10l6.3-1.7zm0 6.2-.48 1.82-1.82.48 1.82.48L12 12.8l.48-1.82 1.82-.48-1.82-.48zM5 14l.75 2.75L8.5 17.5l-2.75.75L5 21l-.75-2.75-2.75-.75 2.75-.75zm14 0 .75 2.75 2.75.75-2.75.75L19 21l-.75-2.75-2.75-.75 2.75-.75z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--speedometer\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 3A10 10 0 0 0 2 13c0 2.4.85 4.6 2.26 6.33L5 20h14l.74-.67A9.96 9.96 0 0 0 22 13A10 10 0 0 0 12 3m6.15 15H5.85A7.93 7.93 0 0 1 4 13a8 8 0 1 1 16 0c0 1.85-.63 3.55-1.85 5M13 12.59l3.54-3.54l1.41 1.41L14.41 14A2.5 2.5 0 1 1 13 12.59Z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--layers-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2L2 7l10 5l10-5zM6.47 7L12 4.24L17.53 7L12 9.76zM2 12l10 5l10-5l-2.23-1.11L12 14.76l-7.77-3.87zm0 5l10 5l10-5l-2.23-1.11L12 19.76l-7.77-3.87z'/%3E%3C/svg%3E");
}

.fluent--scales-24-filled {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.75 3a.75.75 0 0 0 0 1.5h1.042l-2.737 6.717A.8.8 0 0 0 2 11.5a3.5 3.5 0 1 0 7 0a.8.8 0 0 0-.055-.283L6.208 4.5h5.042v12H7.253a2.25 2.25 0 0 0 0 4.5h9.497a2.25 2.25 0 0 0 0-4.5h-4v-12h5.042l-2.737 6.717A.8.8 0 0 0 15 11.5a3.5 3.5 0 1 0 7 0a.8.8 0 0 0-.055-.283L19.208 4.5h1.042a.75.75 0 0 0 0-1.5zM5.5 6.738l1.635 4.012h-3.27zm11.365 4.012L18.5 6.738l1.635 4.012z'/%3E%3C/svg%3E");
}

.tw-icon-\[fluent--home-24-filled\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M13.45 2.533a2.25 2.25 0 0 0-2.9 0L3.8 8.228a2.25 2.25 0 0 0-.8 1.72v9.305c0 .966.784 1.75 1.75 1.75h3a1.75 1.75 0 0 0 1.75-1.75V15.25c0-.68.542-1.232 1.217-1.25h2.566a1.25 1.25 0 0 1 1.217 1.25v4.003c0 .966.784 1.75 1.75 1.75h3a1.75 1.75 0 0 0 1.75-1.75V9.947a2.25 2.25 0 0 0-.8-1.72z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--chart-line\],
.tw-icon-\[mdi--heart\],
.tw-icon-\[mdi--cash\],
.tw-icon-\[mdi--water\],
.tw-icon-\[mdi--sword-cross\],
.tw-icon-\[mdi--shield-outline\],
.tw-icon-\[mdi--shield-star-outline\],
.tw-icon-\[mdi--star-four-points-outline\],
.tw-icon-\[mdi--speedometer\],
.tw-icon-\[mdi--layers-outline\],
.fluent--scales-24-filled,
.tw-icon-\[fluent--home-24-filled\] {
    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%;
}

.ffu-monster-tip-layer {
    overflow: hidden;
    border-radius: 7px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

.ffu-monster-tip {
    position: relative;
    overflow: hidden;
    max-height: min(78vh, 640px);
    border: 1px solid #334155;
    border-radius: 7px;
    background: #151515;
    color: #fff;
    font-size: 12px;
    line-height: 1.28;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .55) transparent;
}

.ffu-monster-tip::-webkit-scrollbar {
    width: 6px;
}

.ffu-monster-tip::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .45);
}

.ffu-monster-tip-title {
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.055) 50%, rgba(255, 255, 255, 0.055) 75%, transparent 75%, transparent);
    background-size: 28px 28px;
    padding: 9px 54px 9px 10px;
    text-align: left;
}

.ffu-monster-tip-title h3 {
    margin-top: 0;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.ffu-monster-tip-title p {
    margin-top: 3px;
    overflow: hidden;
    color: #94a3b8;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-tip-title-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .42);
    border-radius: 7px;
    background: rgba(15, 23, 42, .58);
}

.ffu-tip-title-icon img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}

.ffu-tip-title-main {
    min-width: 0;
}

.ffu-monster-tip-body {
    display: grid;
    gap: 3px;
    padding: 8px 10px 9px;
}

.ffu-monster-tip-primary {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    padding: 7px 8px;
}

.ffu-monster-tip-primary span,
.ffu-monster-tip-row span {
    color: #dbeafe;
    font-size: 12px;
}

.ffu-monster-tip-primary b {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}

.ffu-monster-tip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    padding: 5px 7px;
}

.ffu-monster-tip-row b {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-monster-tip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.ffu-monster-tip-tags span {
    border-radius: 5px;
    background: rgba(37, 99, 235, 0.22);
    padding: 3px 7px;
    color: #dbeafe;
    font-size: 11px;
}

.ffu-monster-tip-tags span:last-child {
    background: rgba(16, 185, 129, 0.24);
    color: #bbf7d0;
}

.ffu-monster-tip-image {
    display: flex;
    min-height: 104px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px 2px;
}

.ffu-monster-tip-image img {
    max-width: 180px;
    max-height: 128px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.38));
}

.ffu-npc-tip-layer {
    overflow: hidden;
    border-radius: 7px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

.ffu-npc-tip {
    position: relative;
    overflow: hidden;
    max-height: min(78vh, 640px);
    border: 1px solid #334155;
    border-radius: 7px;
    background: #151515;
    color: #fff;
    font-size: 12px;
    line-height: 1.28;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .55) transparent;
}

.ffu-npc-tip::-webkit-scrollbar {
    width: 6px;
}

.ffu-npc-tip::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .45);
}

.ffu-npc-tip-title {
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.055) 50%, rgba(255, 255, 255, 0.055) 75%, transparent 75%, transparent);
    background-size: 28px 28px;
    padding: 9px 54px 9px 10px;
    text-align: left;
}

.ffu-npc-tip-title h3 {
    margin-top: 0;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.ffu-npc-tip-title p {
    margin-top: 3px;
    overflow: hidden;
    color: #94a3b8;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-npc-tip-body {
    display: grid;
    gap: 3px;
    padding: 8px 10px 9px;
}

.ffu-npc-tip-image {
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: center;
    padding: 2px 8px 5px;
}

.ffu-npc-tip-image img {
    max-width: 88px;
    max-height: 88px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.36));
}

.ffu-npc-tip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    padding: 5px 7px;
}

.ffu-npc-tip-row span {
    color: #dbeafe;
    font-size: 12px;
}

.ffu-npc-tip-row b {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-npc-tip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.ffu-npc-tip-tags span {
    border-radius: 5px;
    background: rgba(37, 99, 235, 0.22);
    padding: 3px 7px;
    color: #dbeafe;
    font-size: 11px;
}

.ffu-quest-tip-layer {
    overflow: hidden;
    border-radius: 7px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

.ffu-skill-tip-layer {
    overflow: hidden;
    border-radius: 7px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

.ffu-skill-tip {
    position: relative;
    width: 380px;
    max-width: calc(100vw - 28px);
    max-height: min(78vh, 640px);
    border: 1px solid #334155;
    border-radius: 7px;
    background: #151515;
    color: #fff;
    font-size: 12px;
    line-height: 1.28;
    overflow-y: auto;
    font-weight: 400;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .55) transparent;
}

.ffu-skill-tip::-webkit-scrollbar {
    width: 6px;
}

.ffu-skill-tip::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .45);
}

.ffu-skill-tip-title {
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    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: 9px 54px 9px 10px;
    text-align: left;
}

.ffu-skill-tip-title h3 {
    margin-top: 0;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.ffu-skill-tip-title p {
    margin-top: 3px;
    overflow: hidden;
    color: #94a3b8;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-skill-tip-meta {
    margin-left: auto;
    max-width: 104px;
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}

.ffu-skill-tip-body {
    display: grid;
    gap: 3px;
    padding: 8px 10px 9px;
}

.ffu-skill-tip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .06);
    padding: 5px 7px;
}

.ffu-skill-tip-row span {
    color: #dbeafe;
    font-size: 12px;
}

.ffu-skill-tip-row b {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-skill-tip-row.is-value-only {
    align-items: flex-start;
    justify-content: flex-start;
}

.ffu-skill-tip-row.is-value-only b {
    width: 100%;
    overflow: visible;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
}

.ffu-skill-tip-row.is-requirements {
    display: block;
    padding: 7px;
}

.ffu-skill-tip-row.is-requirements b {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: visible;
    margin-top: 5px;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
}

.ffu-skill-tip-row.is-requirements > span {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-top: 0;
    color: #dbeafe;
    font-weight: 600;
}

.ffu-skill-tip-row.is-requirements > span::before {
    display: inline-block;
    width: 3px;
    height: 12px;
    border-radius: 999px;
    background: #60a5fa;
    content: "";
}

.ffu-skill-tip .skill-detail-requirement-link {
    border-color: rgba(147, 197, 253, .24);
    background: rgba(37, 99, 235, .14);
    flex: 0 1 auto;
    max-width: 100%;
    padding: 3px 7px 3px 4px;
    color: #bfdbfe;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

.ffu-skill-tip .skill-detail-requirement-links {
    justify-content: flex-start;
    gap: 5px;
}

.ffu-skill-tip .skill-detail-requirement-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ffu-skill-tip .skill-detail-requirement-icon img {
    display: block;
    max-width: 18px;
    max-height: 18px;
}

.ffu-skill-tip .skill-detail-requirement-body {
    display: inline-flex;
    min-width: 0;
    height: 22px;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.ffu-skill-tip .skill-detail-requirement-name,
.ffu-skill-tip .skill-detail-requirement-level {
    display: block;
    min-width: 0;
    line-height: 12px;
}

.ffu-skill-tip .skill-detail-requirement-link:hover {
    border-color: rgba(147, 197, 253, .48);
    background: rgba(37, 99, 235, .22);
}

.ffu-skill-tip .skill-detail-requirement-icon {
    border-color: rgba(147, 197, 253, .28);
    background: rgba(15, 23, 42, .72);
}

.ffu-skill-tip .skill-detail-requirement-name {
    color: #bfdbfe;
}

.ffu-skill-tip .skill-detail-requirement-level {
    color: #cbd5e1;
}

.ffu-skill-tip-lines,
.skill-detail-card-lines,
.skill-detail-value-lines {
    display: grid;
    gap: 3px;
    line-height: 1.45;
}

.ffu-skill-tip-lines em,
.skill-detail-card-lines em,
.skill-detail-value-lines em {
    min-width: 0;
    font-style: normal;
}

.ffu-skill-tip-desc {
    margin-top: 6px;
    color: #e5e7eb;
    font-size: 12px;
    line-height: 1.55;
}

.ffu-skill-tip-desc p {
    margin: 0;
}

.ffu-skill-tip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.ffu-skill-tip-tags span {
    border-radius: 5px;
    background: rgba(37, 99, 235, .22);
    padding: 3px 7px;
    color: #dbeafe;
    font-size: 11px;
}

.ffu-skill-tip-tags span:nth-child(n+2) {
    background: rgba(16, 185, 129, .24);
    color: #bbf7d0;
}

.ffu-skill-tip-tags span.is-pve {
    background: rgba(14, 165, 233, .24);
    color: #bae6fd;
}

.ffu-skill-tip-tags span.is-pvp {
    background: rgba(168, 85, 247, .24);
    color: #e9d5ff;
}

.ffu-skill-tip > article {
    padding-top: 0 !important;
}

.ffu-skill-tip .booklet-detail-card {
    border-color: #3a3a3a;
    border-radius: 7px;
    background: #151515;
    box-shadow: none;
}

.ffu-skill-tip .booklet-detail-card-title {
    border-color: rgba(255, 255, 255, .08);
    background-color: #191919;
    padding: 10px;
}

.ffu-skill-tip .booklet-detail-card-body {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 9px 10px 10px;
}

.ffu-skill-tip .booklet-detail-card-title h1 {
    color: #f8fafc;
    font-size: 16px;
    font-weight: 600;
}

.ffu-skill-tip .booklet-detail-card-title p {
    margin-top: 3px;
    color: #cbd5e1;
    font-size: 12px;
}

.ffu-skill-tip .booklet-detail-title-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

.ffu-skill-tip .booklet-detail-title-icon img {
    max-width: 34px;
    max-height: 34px;
}

.ffu-skill-tip .booklet-detail-title-meta {
    min-width: auto;
    gap: 3px;
    color: #f8fafc;
    font-size: 12px;
    align-self: flex-end;
    margin-top: 18px;
    white-space: nowrap;
}

.ffu-skill-tip .booklet-detail-title-meta span {
    color: #f8fafc;
}

.ffu-skill-tip .ffu-tip-id-badge {
    z-index: 3;
}

.ffu-skill-tip .booklet-detail-row {
    gap: 10px;
    border-color: rgba(255, 255, 255, .07);
    border-radius: 4px;
    background: #222;
    color: #f8fafc;
    padding: 5px 7px;
    font-size: 12px;
}

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

.ffu-skill-tip .booklet-detail-row b {
    color: #fff;
    font-weight: 600;
}

.ffu-skill-tip .skill-detail-inline-desc {
    margin-top: 5px;
    padding-top: 0;
    border-top: 0;
}

.ffu-skill-tip .skill-detail-inline-desc > span,
.ffu-skill-tip .skill-detail-inline-desc > div {
    font-size: 12px;
}

.ffu-skill-tip .skill-detail-inline-desc > span {
    display: none;
}

.ffu-skill-tip .skill-detail-inline-desc > div {
    color: #e5e7eb;
    line-height: 1.55;
}

.ffu-skill-tip .booklet-detail-chip {
    padding: 3px 7px;
    font-size: 11px;
}

.ffu-quest-tip {
    position: relative;
    overflow: hidden;
    max-height: min(78vh, 640px);
    border: 1px solid #334155;
    border-radius: 7px;
    background: #151515;
    color: #fff;
    font-size: 12px;
    line-height: 1.28;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .55) transparent;
}

.ffu-quest-tip::-webkit-scrollbar {
    width: 6px;
}

.ffu-quest-tip::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .45);
}

.ffu-quest-tip-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.055) 50%, rgba(255, 255, 255, 0.055) 75%, transparent 75%, transparent);
    background-size: 28px 28px;
    padding: 9px 54px 9px 10px;
    text-align: left;
}

.ffu-quest-tip-title div {
    color: #dbeafe;
    font-size: 12px;
}

.ffu-quest-tip-title h3 {
    margin-top: 0;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.ffu-quest-tip-title p {
    margin-top: 3px;
    overflow: hidden;
    color: #94a3b8;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-quest-tip-body {
    display: grid;
    gap: 3px;
    padding: 8px 10px 9px;
}

.ffu-quest-tip-primary {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    padding: 7px 8px;
}

.ffu-quest-tip-primary span,
.ffu-quest-tip-row span {
    color: #dbeafe;
    font-size: 12px;
}

.ffu-quest-tip-primary b {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}

.ffu-quest-tip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    padding: 5px 7px;
}

.ffu-quest-tip-row b {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-quest-tip-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 5px;
}

.ffu-quest-tip-stats span {
    display: flex;
    min-height: 38px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
}

.ffu-quest-tip-stats b {
    color: #fff;
    font-size: 15px;
    line-height: 1.1;
}

.ffu-quest-tip-stats em {
    margin-top: 2px;
    color: #dbeafe;
    font-size: 11px;
    font-style: normal;
}

.ffu-quest-tip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.ffu-quest-tip-tags span {
    border-radius: 5px;
    background: rgba(37, 99, 235, 0.22);
    padding: 3px 7px;
    color: #dbeafe;
    font-size: 11px;
}

.ffu-item-tip {
    position: relative;
    overflow: hidden;
    max-height: min(78vh, 640px);
    border: 1px solid #334155;
    border-radius: 7px;
    background: #151515;
    color: #fff;
    font-size: 12px;
    line-height: 1.28;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .55) transparent;
}

.ffu-item-tip::-webkit-scrollbar {
    width: 6px;
}

.ffu-item-tip::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .45);
}

.ffu-item-tip-head {
    display: flex;
    gap: 9px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.055) 50%, rgba(255, 255, 255, 0.055) 75%, transparent 75%, transparent);
    background-size: 28px 28px;
    padding: 9px 58px 9px 10px;
}

.ffu-item-tip-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .42);
    border-radius: 7px;
    background: rgba(15, 23, 42, .58);
}

.ffu-item-tip-icon img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}

.ffu-item-tip-title {
    min-width: 0;
}

.ffu-item-tip-name {
    overflow: hidden;
    color: #4fc3ff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-item-tip-name.is-rarity-common,
.ffu-item-tip-rarity-value.is-rarity-common,
.booklet-item-card-name.is-rarity-common,
.booklet-item-table-name.is-rarity-common,
.booklet-item-name.is-rarity-common,
.booklet-item-name.is-rarity-common:hover,
.booklet-detail-title.is-rarity-common,
.dark .booklet-detail-title.is-rarity-common {
    color: #78d9ff;
}

.ffu-item-tip-name.is-rarity-uncommon,
.ffu-item-tip-rarity-value.is-rarity-uncommon,
.booklet-item-card-name.is-rarity-uncommon,
.booklet-item-table-name.is-rarity-uncommon,
.booklet-item-name.is-rarity-uncommon,
.booklet-item-name.is-rarity-uncommon:hover,
.booklet-detail-title.is-rarity-uncommon,
.dark .booklet-detail-title.is-rarity-uncommon {
    color: #c46200;
}

.ffu-item-tip-name.is-rarity-rare,
.ffu-item-tip-rarity-value.is-rarity-rare,
.booklet-item-card-name.is-rarity-rare,
.booklet-item-table-name.is-rarity-rare,
.booklet-item-name.is-rarity-rare,
.booklet-item-name.is-rarity-rare:hover,
.booklet-detail-title.is-rarity-rare,
.dark .booklet-detail-title.is-rarity-rare {
    color: #00aa00;
}

.ffu-item-tip-name.is-rarity-unique,
.ffu-item-tip-rarity-value.is-rarity-unique,
.booklet-item-card-name.is-rarity-unique,
.booklet-item-table-name.is-rarity-unique,
.booklet-item-name.is-rarity-unique,
.booklet-item-name.is-rarity-unique:hover,
.booklet-detail-title.is-rarity-unique,
.dark .booklet-detail-title.is-rarity-unique {
    color: #d20000;
}

.ffu-item-tip-name.is-rarity-veryrare,
.ffu-item-tip-rarity-value.is-rarity-veryrare,
.booklet-item-card-name.is-rarity-veryrare,
.booklet-item-table-name.is-rarity-veryrare,
.booklet-item-name.is-rarity-veryrare,
.booklet-item-name.is-rarity-veryrare:hover,
.booklet-detail-title.is-rarity-veryrare,
.dark .booklet-detail-title.is-rarity-veryrare {
    color: #d20000;
}

.ffu-item-tip-name.is-rarity-ultimate,
.ffu-item-tip-rarity-value.is-rarity-ultimate,
.booklet-item-card-name.is-rarity-ultimate,
.booklet-item-table-name.is-rarity-ultimate,
.booklet-item-name.is-rarity-ultimate,
.booklet-item-name.is-rarity-ultimate:hover,
.booklet-detail-title.is-rarity-ultimate,
.dark .booklet-detail-title.is-rarity-ultimate {
    color: #7f00ff;
}

.booklet-item-card-name[class*="is-rarity-"]:hover,
.booklet-item-table-name[class*="is-rarity-"]:hover,
.booklet-item-name[class*="is-rarity-"]:hover {
    filter: brightness(1.08);
}

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

.booklet-detail-title {
    color: #0f172a;
}

.dark .booklet-detail-title {
    color: #f8fafc;
}

.ffu-item-tip-type {
    margin-top: 3px;
    color: #cbd5e1;
    font-size: 12px;
}

.ffu-item-tip-body {
    display: grid;
    gap: 3px;
    padding: 8px 10px 9px;
}

.ffu-item-tip-line {
    display: flex;
    min-height: 17px;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-radius: 4px;
    padding: 1px 0;
    color: #f8fafc;
    white-space: nowrap;
}

.ffu-item-tip-line span {
    color: #dbeafe;
    font-weight: 500;
}

.ffu-item-tip-line b {
    color: #ffffff;
    font-weight: 600;
    text-align: right;
}

.ffu-item-tip-line b.ffu-item-tip-value-primary {
    color: #78d9ff;
}

.ffu-item-tip-line.is-base-stat-line span,
.ffu-item-tip-line.is-base-stat-line b.ffu-item-tip-value-base {
    color: #a1a1aa;
    font-weight: 500;
}

.ffu-item-tip-line b.ffu-item-tip-rarity-value {
    font-weight: 700;
}

.ffu-item-tip-line.is-extra-line span,
.ffu-item-tip-line.is-extra-line b.ffu-item-tip-value-extra {
    color: #ff5cf4;
}

.ffu-item-tip-set {
    display: grid;
    gap: 2px;
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 7px;
    color: #f8fafc;
    white-space: nowrap;
}

.ffu-item-tip-set-title,
.ffu-item-tip-set-part,
.ffu-item-tip-set-bonus {
    min-height: 16px;
    line-height: 16px;
}

.ffu-item-tip-set-title {
    color: #bfdbfe;
    font-weight: 600;
}

.ffu-item-tip-set-part {
    padding-left: 14px;
    color: #e5e7eb;
}

.ffu-item-tip-set-bonus {
    color: #f8fafc;
}

.ffu-item-tip-desc {
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 7px;
    color: #cbd5e1;
    line-height: 1.55;
    white-space: normal;
}

.ffu-item-side {
    min-width: 0;
}

@media (min-width: 1280px) {
    .ffu-item-side {
        position: sticky;
        top: 76px;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .ffu-item-side-panel {
        max-height: none;
    }
}

.ffu-mobile-mask {
    display: none;
}

.ffu-filter-select {
    height: 36px;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: #1f2937;
}

.ffu-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 130px 130px 160px;
    gap: 8px;
}

.equipset-filter-grid {
    grid-template-columns: minmax(280px, 1fr) 130px 130px;
}

.monster-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 110px 110px 120px 130px;
    gap: 8px;
}

.quest-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 130px 130px;
    gap: 8px;
}

.npc-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 130px 130px;
    gap: 8px;
}

.skill-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 110px 110px 120px 130px;
    gap: 8px;
}

.box-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 140px 130px;
    gap: 8px;
}

.ffu-item-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

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

    .monster-filter-grid {
        grid-template-columns: 1fr;
    }

    .quest-filter-grid {
        grid-template-columns: 1fr;
    }

    .npc-filter-grid {
        grid-template-columns: 1fr;
    }

    .skill-filter-grid {
        grid-template-columns: 1fr;
    }

    .box-filter-grid {
        grid-template-columns: 1fr;
    }

    .ffu-item-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ffu-item-card-grid {
        grid-template-columns: 1fr;
    }
}

.ffu-sort-menu {
    position: relative;
}

.ffu-sort-button {
    display: inline-flex;
    height: 34px;
    min-width: 128px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
    font-size: 13px;
    color: #1f2937;
}

.ffu-sort-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 164px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}

.ffu-sort-dropdown button {
    display: flex;
    width: 100%;
    height: 34px;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    padding: 0 10px;
    text-align: left;
    font-size: 13px;
    color: #1f2937;
}

.ffu-sort-dropdown button:hover,
.ffu-sort-dropdown button.is-active {
    background: #eff6ff;
    color: #2563eb;
}

.ffu-view-button {
    display: inline-flex;
    height: 28px;
    width: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #64748b;
}

.ffu-view-button:hover,
.ffu-view-button.is-active {
    background: #eff6ff;
    color: #2563eb;
}

@media (max-width: 1279px) {
    .ffu-item-side {
        pointer-events: none;
        position: fixed;
        inset: 0;
        z-index: 1200;
    }

    .ffu-item-side:not(.is-mobile-open) {
        display: none;
    }

    .ffu-item-side.is-mobile-open {
        pointer-events: auto;
    }

    .ffu-mobile-mask {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, .42);
    }

    .ffu-item-side-panel {
        position: absolute;
        left: 12px;
        top: 12px;
        bottom: 12px;
        width: min(320px, calc(100vw - 24px));
        overflow-y: auto;
    }
}

.tw-dark .ffu-filter-select,
.dark .ffu-filter-select,
.tw-dark .ffu-sort-button,
.dark .ffu-sort-button,
.tw-dark .ffu-sort-dropdown,
.dark .ffu-sort-dropdown {
    border-color: #2a2a2a;
    background: #161616;
    color: #f2f2f2;
}

.tw-dark .ffu-sort-dropdown button,
.dark .ffu-sort-dropdown button {
    color: #f2f2f2;
}

.tw-dark .ffu-sort-dropdown button:hover,
.dark .ffu-sort-dropdown button:hover,
.tw-dark .ffu-sort-dropdown button.is-active,
.dark .ffu-sort-dropdown button.is-active,
.tw-dark .ffu-view-button:hover,
.dark .ffu-view-button:hover,
.tw-dark .ffu-view-button.is-active,
.dark .ffu-view-button.is-active {
    background: rgba(59, 130, 246, .15);
    color: #7dd3fc;
}

.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-home {
    background: #f3f4f6;
}

.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: #f3f4f6;
}

#header-box.nav-surface {
    position: sticky;
    overflow: visible;
    border-bottom: 1px solid rgba(219, 234, 254, .86);
    background:
        radial-gradient(circle at 10% 0%, rgba(125, 211, 252, .18), transparent 24%),
        radial-gradient(circle at 72% 0%, rgba(187, 247, 208, .14), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 251, 255, .96));
    box-shadow: none;
    backdrop-filter: blur(14px);
}

#header-box.nav-surface::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    pointer-events: none;
}

#header-box .nav-shell,
#header-box .nav-row {
    position: relative;
    z-index: 1;
}

#header-box .nav-link,
#header-box .icon-btn,
#header-box .search-box,
#header-box .member-nav-btn,
#header-box .member-nav-avatar {
    border-color: rgba(203, 213, 225, .88);
    background-color: rgba(255, 255, 255, .92);
    color: #172033;
    box-shadow: none;
}

#header-box .nav-link {
    font-weight: 500;
}

#header-box .nav-link:hover,
#header-box .icon-btn:hover,
#header-box .search-box:hover,
#header-box .member-nav-btn:hover {
    border-color: rgba(37, 99, 235, .42);
    background-color: #eff6ff;
    color: #2563eb;
    box-shadow: none;
}

#header-box .nav-link-active {
    border-color: rgba(37, 99, 235, .5);
    background: linear-gradient(180deg, #eaf3ff, #dbeafe);
    color: #1d4ed8;
    box-shadow: none;
}

#header-box .search-box {
    background: rgba(255, 255, 255, .96);
}

#header-box .dropdown-anchor {
    z-index: 2;
}

#header-box .dropdown-anchor:has([aria-expanded="true"]) {
    z-index: 60;
}

#header-box .nav-brand img {
    filter: none;
}

.home-polish-page {
    background:
        radial-gradient(circle at 12% 8%, rgba(125, 211, 252, .22), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(187, 247, 208, .18), transparent 26%),
        linear-gradient(180deg, #f5fbff 0%, #f8fbff 46%, #ffffff 100%);
}

.home-polish-page ~ .tw-fixed[aria-label*="工具"],
.home-polish-page ~ aside.tw-fixed {
    top: 62%;
}

.home-polish-hero {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08)),
        radial-gradient(circle at 18% 0%, rgba(219, 234, 254, .62), transparent 32%),
        radial-gradient(circle at 92% 16%, rgba(204, 251, 241, .45), transparent 28%);
}

.home-polish-intro,
.home-polish-qq,
.home-polish-category,
.home-polish-card,
.home-polish-data,
.home-polish-tool {
    border-color: rgba(219, 234, 254, .9) !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 14px 38px rgba(37, 99, 235, .07);
}

.home-polish-intro {
    position: relative;
    min-height: 336px;
    overflow: hidden;
    border: 1px solid rgba(219, 234, 254, .9);
    border-radius: 8px;
    padding: 24px 300px 20px 30px;
}

.home-polish-intro > :not(.home-polish-mascot) {
    position: relative;
    z-index: 1;
}

.home-polish-intro h1 {
    margin-top: 18px !important;
    font-size: 34px !important;
    line-height: 42px !important;
}

.home-polish-title-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .12);
}

.home-polish-intro p {
    margin-top: 14px !important;
    max-width: 660px;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

.home-polish-mascot {
    position: absolute;
    top: 24px;
    right: 32px;
    width: 248px;
    height: 248px;
    background: url("/public/assets/images/home-top-card-bg.png") center / contain no-repeat;
    pointer-events: none;
}

.home-polish-mascot img,
.home-polish-mascot span {
    display: none;
}

.home-polish-cloud,
.home-polish-balloon {
    position: absolute;
    display: block;
}

.home-polish-cloud {
    width: 58px;
    height: 30px;
    border: 1px solid rgba(203, 213, 225, .8);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
}

.home-polish-cloud::before,
.home-polish-cloud::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(203, 213, 225, .72);
    border-radius: 50%;
    background: rgba(255, 255, 255, .84);
}

.home-polish-cloud::before {
    top: -15px;
    left: 12px;
    width: 28px;
    height: 28px;
}

.home-polish-cloud::after {
    top: -10px;
    right: 9px;
    width: 24px;
    height: 24px;
}

.home-polish-cloud.is-left {
    top: 40px;
    left: 0;
}

.home-polish-cloud.is-right {
    right: 0;
    bottom: 40px;
    transform: scale(.82);
}

.home-polish-balloon {
    width: 34px;
    height: 46px;
    border-radius: 50% 50% 48% 48%;
    box-shadow: inset -6px -8px 0 rgba(15, 23, 42, .08), 0 8px 18px rgba(37, 99, 235, .1);
}

.home-polish-balloon::after {
    position: absolute;
    left: 50%;
    top: 43px;
    width: 1px;
    height: 64px;
    background: rgba(148, 163, 184, .55);
    content: "";
}

.home-polish-balloon.is-green {
    top: 0;
    right: 72px;
    background: #b9e986;
}

.home-polish-balloon.is-purple {
    top: 4px;
    right: 18px;
    background: #c7c7ff;
}

.home-polish-search {
    margin-top: 24px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
}

.home-polish-search button {
    min-width: 86px;
    justify-content: center;
    border-radius: 8px !important;
    background: #2563eb !important;
}

.home-polish-search button:hover {
    background: #1d4ed8 !important;
}

.home-polish-stats > div,
.home-polish-qq,
.home-polish-category,
.home-polish-card,
.home-polish-data,
.home-polish-tool {
    border-radius: 8px !important;
}

.home-polish-topgrid {
    align-items: stretch;
}

.home-polish-qq {
    display: flex;
    min-height: 336px;
    flex-direction: column;
}

.home-polish-qq-qr {
    flex: 1 1 auto;
    min-height: 0;
}

.home-polish-qq > a:last-child {
    margin-top: 14px !important;
}

@media (max-width: 1180px) {
    .home-polish-intro {
        padding-right: 230px;
    }

    .home-polish-mascot {
        width: 204px;
        height: 204px;
    }
}

@media (max-width: 1023px) {
    .home-polish-intro {
        padding-right: 30px;
    }

    .home-polish-mascot {
        opacity: .24;
    }

    .home-polish-qq {
        min-height: 0;
    }
}

.home-polish-stats {
    margin-top: 16px !important;
}

.home-polish-stats > div {
    box-shadow: 0 10px 24px rgba(37, 99, 235, .06);
}

.home-polish-category {
    min-height: 92px !important;
}

.home-polish-category:nth-child(1) > span:first-child,
.home-polish-data:nth-child(1) > span:first-child {
    background: #fff3cf !important;
    color: #d49100 !important;
}

.home-polish-category:nth-child(2) > span:first-child,
.home-polish-data:nth-child(2) > span:first-child {
    background: #dffbe9 !important;
    color: #16a34a !important;
}

.home-polish-category:nth-child(3) > span:first-child,
.home-polish-data:nth-child(3) > span:first-child {
    background: #ffe4ef !important;
    color: #db2777 !important;
}

.home-polish-category:nth-child(4) > span:first-child,
.home-polish-data:nth-child(4) > span:first-child {
    background: #f3e8ff !important;
    color: #9333ea !important;
}

.home-polish-category:nth-child(5) > span:first-child,
.home-polish-data:nth-child(5) > span:first-child {
    background: #dff3ff !important;
    color: #0284c7 !important;
}

.home-polish-category:nth-child(6) > span:first-child,
.home-polish-data:nth-child(6) > span:first-child {
    background: #ffe9d5 !important;
    color: #ea580c !important;
}

.home-polish-category:nth-child(7) > span:first-child,
.home-polish-data:nth-child(7) > span:first-child {
    background: #dff7f4 !important;
    color: #0d9488 !important;
}

.home-polish-category:nth-child(8) > span:first-child,
.home-polish-data:nth-child(8) > span:first-child {
    background: #e3fbe3 !important;
    color: #65a30d !important;
}

.home-polish-card {
    box-shadow: 0 12px 28px rgba(37, 99, 235, .06);
}

.home-polish-data,
.home-polish-tool {
    min-height: 104px;
}

.home-polish-data:hover,
.home-polish-tool:hover,
.home-polish-category:hover,
.home-polish-card:hover {
    box-shadow: 0 18px 42px rgba(37, 99, 235, .11);
    transform: translateY(-1px);
}

.home-polish-footer-art {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(219, 234, 254, .8);
    background: linear-gradient(180deg, rgba(239, 249, 255, .65), #f8fbff);
    padding: 20px 0 24px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

.home-polish-footer-art b {
    color: #2563eb;
}

.home-polish-footer-art .layout-shell {
    position: relative;
}

.home-polish-grass {
    position: absolute;
    bottom: -24px;
    width: 154px;
    height: 58px;
    border-radius: 50% 50% 0 0;
    background:
        radial-gradient(circle at 24% 12%, #f9a8d4 0 6px, transparent 7px),
        radial-gradient(circle at 56% 0%, #fde68a 0 7px, transparent 8px),
        radial-gradient(circle at 78% 18%, #c4b5fd 0 6px, transparent 7px),
        linear-gradient(180deg, #bbf7d0, #86efac);
    opacity: .82;
}

.home-polish-grass.is-left {
    left: 0;
}

.home-polish-grass.is-right {
    right: 0;
}

.tw-dark .home-polish-page,
.dark .home-polish-page {
    background:
        radial-gradient(circle at 12% 8%, rgba(14, 165, 233, .14), transparent 30%),
        linear-gradient(180deg, #101010 0%, #151515 100%);
}

.tw-dark #header-box.nav-surface,
.dark #header-box.nav-surface {
    border-bottom-color: #2a2a2a;
    background:
        radial-gradient(circle at 14% 0%, rgba(14, 165, 233, .14), transparent 26%),
        radial-gradient(circle at 76% 0%, rgba(16, 185, 129, .1), transparent 28%),
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(16, 16, 16, .92));
    box-shadow: none;
}

.tw-dark #header-box.nav-surface::before,
.dark #header-box.nav-surface::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
}

.tw-dark #header-box .nav-link,
.dark #header-box .nav-link,
.tw-dark #header-box .icon-btn,
.dark #header-box .icon-btn,
.tw-dark #header-box .search-box,
.dark #header-box .search-box,
.tw-dark #header-box .member-nav-btn,
.dark #header-box .member-nav-btn,
.tw-dark #header-box .member-nav-avatar,
.dark #header-box .member-nav-avatar {
    border-color: rgba(255, 255, 255, .13);
    background-color: rgba(30, 41, 59, .72);
    color: #e5e7eb;
    box-shadow: none;
}

.tw-dark #header-box .nav-link:hover,
.dark #header-box .nav-link:hover,
.tw-dark #header-box .icon-btn:hover,
.dark #header-box .icon-btn:hover,
.tw-dark #header-box .search-box:hover,
.dark #header-box .search-box:hover,
.tw-dark #header-box .member-nav-btn:hover,
.dark #header-box .member-nav-btn:hover {
    border-color: rgba(14, 165, 233, .48);
    background-color: rgba(30, 64, 96, .78);
    color: #7dd3fc;
    box-shadow: none;
}

.tw-dark #header-box .nav-link-active,
.dark #header-box .nav-link-active {
    border-color: rgba(14, 165, 233, .5);
    background: linear-gradient(180deg, rgba(14, 165, 233, .24), rgba(14, 165, 233, .12));
    color: #7dd3fc;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, .14);
}

.tw-dark .home-polish-hero,
.dark .home-polish-hero {
    background: radial-gradient(circle at 86% 10%, rgba(14, 165, 233, .12), transparent 26%), #101010;
}

.tw-dark .home-polish-intro,
.dark .home-polish-intro,
.tw-dark .home-polish-qq,
.dark .home-polish-qq,
.tw-dark .home-polish-category,
.dark .home-polish-category,
.tw-dark .home-polish-card,
.dark .home-polish-card,
.tw-dark .home-polish-data,
.dark .home-polish-data,
.tw-dark .home-polish-tool,
.dark .home-polish-tool {
    border-color: #2a2a2a !important;
    background: rgba(23, 23, 23, .92) !important;
    box-shadow: none;
}

@media (max-width: 900px) {
    .home-polish-mascot {
        right: 12px;
        opacity: .32;
    }

    .home-polish-intro {
        padding-right: 30px;
    }
}

@media (max-width: 640px) {
    .home-polish-intro {
        min-height: 0;
        padding: 24px 18px 18px;
    }

    .home-polish-mascot {
        display: none;
    }
}

.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);
}

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

.pager079 li a,
.pager079 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;
}

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

.booklet-footer {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(219, 234, 254, .72);
    background: transparent;
    padding: 38px 0 30px;
}

.booklet-footer::before,
.booklet-footer::after {
    position: absolute;
    bottom: -28px;
    width: 210px;
    height: 86px;
    border-radius: 56% 56% 0 0;
    background:
        radial-gradient(circle at 22% 10%, #f9a8d4 0 7px, transparent 8px),
        radial-gradient(circle at 44% 2%, #fde68a 0 7px, transparent 8px),
        radial-gradient(circle at 68% 12%, #c4b5fd 0 7px, transparent 8px),
        radial-gradient(circle at 82% 28%, #93c5fd 0 6px, transparent 7px),
        linear-gradient(180deg, #bbf7d0 0%, #86efac 100%);
    content: "";
    opacity: .34;
}

.booklet-footer::before {
    left: max(18px, calc((100vw - 1320px) / 2));
}

.booklet-footer::after {
    right: max(18px, calc((100vw - 1320px) / 2));
    transform: scaleX(-1);
}

.booklet-footer .layout-shell {
    position: relative;
    z-index: 1;
}

.booklet-footer-simple {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 0 18px;
    color: #334155;
    font-size: 13px;
    line-height: 1.9;
    text-align: center;
}

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

.booklet-footer-simple a {
    color: #2563eb;
    font-weight: 600;
}

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

.booklet-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    color: #64748b;
    font-size: 14px;
}

.booklet-footer-title {
    margin-bottom: 14px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.booklet-footer-links {
    display: grid;
    gap: 9px;
}

.booklet-footer-links a {
    color: #64748b;
    transition: color .15s ease;
}

.booklet-footer-links a:hover {
    color: #2563eb;
}

.booklet-footer-meta {
    display: flex;
    margin-top: 32px;
    padding-top: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid #edf2f7;
    color: #64748b;
    font-size: 13px;
}

.booklet-footer-copy {
    line-height: 1.7;
}

.booklet-footer-versions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.booklet-footer-versions a {
    display: inline-flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.booklet-footer-versions a:hover,
.booklet-footer-versions a.is-active {
    border-color: #a855f7;
    background: #faf5ff;
    color: #7e22ce;
}

.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);
}

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

.tw-animate-spin {
    animation: mxd079TipSpin .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);
}

.booklet-item-filterbar {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(260px, 1fr);
}

.booklet-item-filterbar > label,
.booklet-item-filterbar > select,
.booklet-item-filterbar > div,
.booklet-item-filterbar > button {
    min-width: 0;
}

.booklet-item-filterbar > button {
    white-space: nowrap;
}

@media (min-width: 760px) {
    .booklet-item-filterbar {
        grid-template-columns: minmax(320px, 1fr) repeat(2, minmax(136px, 170px));
    }

    .booklet-item-filterbar > label {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1160px) {
    .booklet-item-filterbar {
        grid-template-columns: minmax(300px, 1fr) 132px 150px 112px 112px;
    }

    .booklet-item-filterbar > label {
        grid-column: auto;
    }
}

.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--tshirt-crew-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='M8 4h8l3 2l3 4l-4 2l-1-2v10H7V10l-1 2l-4-2l3-4zM9 4a3 3 0 0 0 6 0'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--package-variant-closed\] {
    --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='M4 7l8-4l8 4v10l-8 4l-8-4zM4 7l8 4l8-4M12 11v10M8 5l8 4'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--cube-outline\],
.tw-icon-\[mdi--help-box-outline\],
.tw-icon-\[mdi--treasure-chest-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='M4 7l8-4l8 4v10l-8 4l-8-4zM4 7l8 4l8-4M12 11v10'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--shield-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23000' stroke-linejoin='round' stroke-width='2' d='M12 3l8 3v5c0 5-3.4 8.5-8 10c-4.6-1.5-8-5-8-10V6z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--sword-cross\] {
    --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='M4 20l6-6m-4 2l2 2M14 4l6 6m-4-4l2 2M3 5l16 16M5 3l16 16'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--bottle-tonic-plus-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='M9 2h6v4l2 3v10a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3V9l2-3zM9 6h6M9 14h6m-3-3v6'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--airplane\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 16l20-12l-6 16l-4-7l-6 5z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--motorbike\] {
    --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='6' cy='17' r='3'/%3E%3Ccircle cx='18' cy='17' r='3'/%3E%3Cpath d='M9 17h3l3-6h2l2 3M6 17l4-7h3l2 3M10 10l-2-2h3M14 7h3'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--skateboarding\] {
    --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='M5 16c4 2 10 2 14 0M6 18h12'/%3E%3Ccircle cx='8' cy='20' r='1.5'/%3E%3Ccircle cx='16' cy='20' r='1.5'/%3E%3Cpath d='M13 4l-2 4l3 2l-2 4M10 8l-3 2m7 0l3 2'/%3E%3Ccircle cx='14' cy='3' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--broom\] {
    --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='M4 20l9-9M14 10l5-5M12 13l4 4M15 10l5 5M13 17c2 2 5 3 8 2c-1-3-2-5-4-7'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--car-sports\] {
    --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='M4 16v-3l2-5h12l2 5v3M6 16h12M7 8l-2 5h14l-2-5M7 16v2m10-2v2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--flower-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='2'/%3E%3Cpath d='M12 4c2 2 2 4 0 6c-2-2-2-4 0-6Zm0 16c-2-2-2-4 0-6c2 2 2 4 0 6ZM4 12c2-2 4-2 6 0c-2 2-4 2-6 0Zm16 0c-2 2-4 2-6 0c2-2 4-2 6 0ZM6.5 6.5c2.8 0 4.2 1.4 4.2 4.2c-2.8 0-4.2-1.4-4.2-4.2Zm11 11c-2.8 0-4.2-1.4-4.2-4.2c2.8 0 4.2 1.4 4.2 4.2Zm0-11c0 2.8-1.4 4.2-4.2 4.2c0-2.8 1.4-4.2 4.2-4.2Zm-11 11c0-2.8 1.4-4.2 4.2-4.2c0 2.8-1.4 4.2-4.2 4.2Z'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--script-text-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='M6 3h12v18H6zM8 7h8M8 11h8M8 15h5'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--scroll-text\] {
    --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='M7 4h11a3 3 0 0 0-3 3v13H6a3 3 0 0 1-3-3V7a3 3 0 0 1 4-3Zm8 3h4v13h-4M7 9h6M7 13h6M7 17h4'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--diamond-stone\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12l4 6l-10 12L2 9zm1.1 2L4.7 9H9l1.4-4zm5.5 0L11.2 9h1.6l-1.4-4zm3 0L15 9h4.3l-2.4-4zM5.1 11l5.1 6.1L8.8 11zm5.8 0l1.1 6l1.1-6zm4.3 0l-1.4 6.1L18.9 11z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--anvil\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h12c3 0 5 2 6 5h-5c-.5 1.4-1.8 2-3.5 2H11v3h3v3H4v-3h3v-3H5c-1.1 0-2-.9-2-2zm2 2v3h7.5c.8 0 1.4-.3 1.7-1l.6-2zM2 20h16v2H2z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--home-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 11l9-8l9 8M5 10v10h14V10M9 20v-6h6v6'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--medical-bag\],
.tw-icon-\[mdi--archive-outline\],
.tw-icon-\[mdi--basket-outline\],
.tw-icon-\[mdi--store-outline\],
.tw-icon-\[mdi--gas-station-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%3Crect x='4' y='7' width='16' height='13' rx='2'/%3E%3Cpath d='M9 7V5h6v2M12 10v6M9 13h6'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--ring\],
.tw-icon-\[mdi--circle-slice-8\],
.tw-icon-\[mdi--map-marker-radius-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='13' r='7'/%3E%3Cpath d='M9 4h6l-3 4zM12 6v14'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--swap-horizontal\],
.tw-icon-\[mdi--arrow-projectile\] {
    --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='M4 8h14M14 4l4 4l-4 4M20 16H6m4-4l-4 4l4 4'/%3E%3C/g%3E%3C/svg%3E");
}

.tw-icon-\[mdi--wing\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 15c5-8 11-10 18-10c-2 5-6 10-13 14c2 0 4-.4 6-1.2C10 21 6 20 3 15Z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--firework\],
.tw-icon-\[mdi--star-four-points-outline\] {
    --svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2zM5 4l2 2M19 4l-2 2M5 20l2-2M19 20l-2-2'/%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--select-group\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M5 3a2 2 0 0 0-2 2h2m2-2v2h2V3m2 0v2h2V3m2 0v2h2V3m2 0v2h2a2 2 0 0 0-2-2M3 7v2h2V7m2 0v4h4V7m2 0v4h4V7m2 0v2h2V7M3 11v2h2v-2m14 0v2h2v-2M7 13v4h4v-4m2 0v4h4v-4M3 15v2h2v-2m14 0v2h2v-2M3 19a2 2 0 0 0 2 2v-2m2 0v2h2v-2m2 0v2h2v-2m2 0v2h2v-2m2 0v2a2 2 0 0 0 2-2Z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--translate\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m12.87 15.07l-2.54-2.51l.03-.03A17.5 17.5 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17A15.7 15.7 0 0 1 9 11.35A15.6 15.6 0 0 1 6.69 8H4.69a17.5 17.5 0 0 0 2.98 4.56l-5.09 5.02L4 19l5-5l3.11 3.11zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2zm-2.62 7l1.62-4.33L19.12 17z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--shield-lock-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5zm7 10c0 4.52-2.98 8.69-7 9.93C7.98 19.69 5 15.52 5 11V6.3l7-3.11l7 3.11zm-3 0h-1V9a3 3 0 0 0-6 0v2H8v6h8zm-3 0h-2V9a1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--check-circle-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m10 17l-5-5l1.41-1.42L10 14.17l7.59-7.59L19 8m-7-6a10 10 0 1 0 0 20a10 10 0 0 0 0-20m0 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--close-circle-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20a10 10 0 0 0 0-20m0 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m3.59 3L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--star-circle-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m12 17.27l4.15 2.51l-1.1-4.72l3.66-3.18l-4.83-.41L12 7l-1.88 4.47l-4.83.41l3.66 3.18l-1.1 4.72M12 2a10 10 0 1 1 0 20a10 10 0 0 1 0-20m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--account-hard-hat-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v2H5v2h14V9h-2V7a5 5 0 0 0-5-5m-3 7V7a3 3 0 0 1 2-2.83V9zm4 0V4.17A3 3 0 0 1 15 7v2zm-1 4a4 4 0 0 0-4 4v1h2v-1a2 2 0 1 1 4 0v1h2v-1a4 4 0 0 0-4-4m-7 7v-1c0-2.21 3.58-4 7-4s7 1.79 7 4v1z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--gender-male-female\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2h6v2h-2.59l2.13 2.13a5.98 5.98 0 0 1-1.41 8.24A6 6 0 0 1 9 14.65V17h3v2H9v3H7v-3H4v-2h3v-2.35A6 6 0 1 1 13.37 8l-2.2-2.2L9 8L7.59 6.59L12.17 2M8 7a4 4 0 1 0 0 8a4 4 0 0 0 0-8m7.5 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--layers-triple-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m12 2l10 5l-10 5L2 7zm0 2.24L6.47 7L12 9.76L17.53 7zM2 12l2-1l8 4l8-4l2 1l-10 5zm0 5l2-1l8 4l8-4l2 1l-10 5z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--trash-can-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4zm-3 6h12l-1 12H7zm2.2 2l.7 8h6.2l.7-8z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--clock-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 20a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-18a10 10 0 1 1 0 20a10 10 0 0 1 0-20m.5 5v5.25l4.5 2.67l-.75 1.23L11 13V7z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--close\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M18.3 5.71L12 12l6.3 6.29l-1.41 1.41L10.59 13.41L4.29 19.71L2.88 18.3L9.17 12L2.88 5.71L4.29 4.29l6.3 6.3l6.3-6.3z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--sort-variant\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 13h12v-2H3m0-5v2h18V6M3 18h6v-2H3z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--sort-numeric-ascending\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 17h3l-4 4-4-4h3V3h2zM9 13H7c-1.1 0-2 .9-2 2v1a2 2 0 0 0 2 2h2v1H5v2h4c1.11 0 2-.89 2-2v-4a2 2 0 0 0-2-2m0 3H7v-1h2zM9 3H7c-1.1 0-2 .9-2 2v4a2 2 0 0 0 2 2h2c1.11 0 2-.89 2-2V5a2 2 0 0 0-2-2m0 6H7V5h2z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--sort-numeric-descending\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 7h3l-4-4-4 4h3v14h2M9 21H5v-2h4v-1H7a2 2 0 0 1-2-2v-1c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v4c0 1.11-.89 2-2 2m0-6H7v1h2M7 3h2a2 2 0 0 1 2 2v4c0 1.11-.89 2-2 2H7a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 6h2V5H7Z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--sort-calendar-descending\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 7h-3l4-4 4 4h-3v14h-2zM8 16h3v-3H8zm5-11h-1V3h-2v2H6V3H4v2H3c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7c0-1.11-.89-2-2-2M3 18v-7h10v7z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--sort-calendar-ascending\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M21 17h3l-4 4-4-4h3V3h2zM8 16h3v-3H8zm5-11h-1V3h-2v2H6V3H4v2H3c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7c0-1.11-.89-2-2-2M3 18v-7h10v7z'/%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--tshirt-crew-outline\],
.tw-icon-\[mdi--package-variant-closed\],
.tw-icon-\[mdi--cube-outline\],
.tw-icon-\[mdi--help-box-outline\],
.tw-icon-\[mdi--treasure-chest-outline\],
.tw-icon-\[mdi--shield-outline\],
.tw-icon-\[mdi--sword-cross\],
.tw-icon-\[mdi--bottle-tonic-plus-outline\],
.tw-icon-\[mdi--airplane\],
.tw-icon-\[mdi--motorbike\],
.tw-icon-\[mdi--skateboarding\],
.tw-icon-\[mdi--broom\],
.tw-icon-\[mdi--car-sports\],
.tw-icon-\[mdi--flower-outline\],
.tw-icon-\[mdi--script-text-outline\],
.tw-icon-\[mdi--scroll-text\],
.tw-icon-\[mdi--diamond-stone\],
.tw-icon-\[mdi--anvil\],
.tw-icon-\[mdi--home-outline\],
.tw-icon-\[mdi--medical-bag\],
.tw-icon-\[mdi--archive-outline\],
.tw-icon-\[mdi--basket-outline\],
.tw-icon-\[mdi--store-outline\],
.tw-icon-\[mdi--gas-station-outline\],
.tw-icon-\[mdi--ring\],
.tw-icon-\[mdi--circle-slice-8\],
.tw-icon-\[mdi--map-marker-radius-outline\],
.tw-icon-\[mdi--swap-horizontal\],
.tw-icon-\[mdi--arrow-projectile\],
.tw-icon-\[mdi--wing\],
.tw-icon-\[mdi--firework\],
.tw-icon-\[mdi--star-four-points-outline\],
.tw-icon-\[mdi--filter-remove-outline\],
.tw-icon-\[mdi--format-list-bulleted\],
.tw-icon-\[mdi--view-grid-outline\],
.tw-icon-\[mdi--select-group\],
.tw-icon-\[mdi--translate\],
.tw-icon-\[mdi--shield-lock-outline\],
.tw-icon-\[mdi--check-circle-outline\],
.tw-icon-\[mdi--close-circle-outline\],
.tw-icon-\[mdi--star-circle-outline\],
.tw-icon-\[mdi--account-hard-hat-outline\],
.tw-icon-\[mdi--gender-male-female\],
.tw-icon-\[mdi--layers-triple-outline\],
.tw-icon-\[mdi--trash-can-outline\],
.tw-icon-\[mdi--clock-outline\],
.tw-icon-\[mdi--close\],
.tw-icon-\[mdi--sort-variant\],
.tw-icon-\[mdi--sort-numeric-ascending\],
.tw-icon-\[mdi--sort-numeric-descending\],
.tw-icon-\[mdi--sort-calendar-ascending\],
.tw-icon-\[mdi--sort-calendar-descending\] {
    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,
.booklet-uiv8-search a {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #64748b;
}

.booklet-uiv8-search button:hover,
.booklet-uiv8-search a: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-loading-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(1px);
}

.booklet-uiv8-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-uiv8-list .db-tree-row.db-tree-disabled {
    cursor: default;
    color: #94a3b8;
    opacity: .72;
}

.booklet-uiv8-list .db-tree-row.db-tree-disabled:hover {
    background: transparent;
    color: #94a3b8;
}

.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-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 {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 999px;
    animation: mxd079TipSpin .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 {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, .55);
    padding: 12px;
}

.booklet-item-card-level {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    min-width: 38px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbeafe;
    border-radius: 4px;
    background: #eff6ff;
    padding: 0 7px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.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-size: 14px;
    font-weight: 400;
}

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

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

.booklet-item-card-meta > span {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    gap: 3px;
    border-radius: 4px;
    background: rgba(226, 232, 240, .34);
    padding: 0 6px;
    line-height: 1;
}

.booklet-list-copy {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 3px;
    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: 13px;
}

.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: #ffffff;
    --detail-line: #dbe7f5;
    font-weight: 400;
}

.booklet-detail-page :is(a, b, strong, em, span, small, p, div, button, th, td, li, h1, h2, h3, h4, h5, h6) {
    font-weight: 400 !important;
}

.booklet-detail-page b,
.booklet-detail-page strong {
    font-weight: 400 !important;
}

.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 #dbe7f5;
    border-radius: 7px;
    background: var(--detail-dark);
    color: #0f172a;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.booklet-detail-card-inner {
    position: relative;
    z-index: 1;
}

.booklet-detail-npc-portrait,
.booklet-detail-object-portrait {
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    margin-top: 12px;
    background: transparent;
    padding: 8px 8px 0;
}

.booklet-detail-npc-portrait img,
.booklet-detail-object-portrait img {
    max-width: min(100%, 260px);
    max-height: 230px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .38));
}

.booklet-detail-npc-portrait > span,
.booklet-detail-object-portrait > span {
    margin-bottom: 32px;
    color: #94a3b8;
    font-size: 92px;
}

.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: #0f172a;
    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 #dbe7f5;
    border-radius: 7px;
    background: #f8fbff;
    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(37, 99, 235, .055) 25%, transparent 25%, transparent 50%, rgba(37, 99, 235, .055) 50%, rgba(37, 99, 235, .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: #0f172a;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

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

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

.booklet-detail-card-title--media {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    text-align: left;
}

.booklet-detail-title-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe7f5;
    border-radius: 7px;
    background: #f8fbff;
    color: #2563eb;
}

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

.booklet-detail-title-main {
    min-width: 0;
    flex: 1;
}

.booklet-detail-card-title--media .booklet-detail-title-main h1 {
    text-align: left;
}

.booklet-detail-card-title--media .booklet-detail-title-main p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-detail-title-meta {
    display: flex;
    min-width: 72px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
}

.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 #f1f5f9;
    border-radius: 7px;
    background: #fbfdff;
    padding: 12px;
}

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

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

.booklet-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #f1f5f9;
    border-radius: 6px;
    background: #fbfdff;
    padding: 7px 9px;
    color: #334155;
    font-size: 13px;
}

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

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

.booklet-detail-row.skill-detail-card-row-lines {
    align-items: flex-start;
    justify-content: flex-start;
}

.booklet-detail-row.skill-detail-card-row-lines b {
    width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.booklet-detail-row.skill-detail-requirement-row {
    display: block;
    padding: 8px;
}

.booklet-detail-row.skill-detail-requirement-row b {
    display: block;
    width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.booklet-detail-row.skill-detail-requirement-row > span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

.booklet-detail-row.skill-detail-requirement-row > span::before {
    display: inline-block;
    width: 3px;
    height: 12px;
    border-radius: 999px;
    background: #2563eb;
    content: "";
}

.skill-detail-requirement-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    gap: 6px 8px;
}

.skill-detail-requirement-link {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    padding: 4px 8px 4px 5px;
    color: #1d4ed8;
    text-align: left;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.skill-detail-requirement-link:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.skill-detail-requirement-icon {
    display: flex;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #fff;
}

.skill-detail-requirement-icon img {
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
}

.skill-detail-requirement-link span:last-child {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.skill-detail-requirement-body {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.skill-detail-requirement-name,
.skill-detail-requirement-level {
    display: block;
    overflow: hidden;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-detail-requirement-name {
    min-width: 0;
    flex: 1 1 auto;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.skill-detail-requirement-level {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

@media (max-width: 460px) {
    .skill-detail-requirement-link {
        max-width: 100%;
    }
}

.booklet-detail-row.is-primary b {
    color: #0284c7;
}

.booklet-detail-row.is-rarity b,
.booklet-detail-row.is-extra span,
.booklet-detail-row.is-extra b {
    color: #ff4dff;
}

.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;
}

.booklet-detail-info-table.is-rows {
    overflow: hidden;
    margin: 12px;
    width: auto;
    border: 1px solid #e5edf7;
    border-radius: 7px;
    border-collapse: separate;
    background: #fff;
    font-size: 14px;
}

.booklet-detail-info-table.is-standalone {
    margin: 0;
}

aside > section:has(> .booklet-detail-info-table.is-standalone) {
    overflow: visible;
    border: 0;
    background: transparent;
}

aside > section:has(> .booklet-detail-info-table.is-standalone) > .booklet-detail-section-head {
    display: none;
}

.booklet-detail-info-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 38px;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid #edf2f7;
}

.booklet-detail-info-table.is-limit-table .booklet-detail-info-row {
    grid-template-columns: 78px minmax(0, 1fr);
}

.booklet-detail-info-row:last-child {
    border-bottom: 0;
}

.booklet-detail-info-label {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
}

.booklet-detail-info-value {
    min-width: 0;
    padding: 10px 14px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    word-break: break-word;
}

.booklet-detail-info-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: #2563eb;
    background: #eaf2ff;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.booklet-detail-info-copy:hover {
    background: #dbeafe;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.booklet-detail-info-row.is-limit {
    background: #fff;
}

.booklet-detail-info-row.is-limit.is-plain {
    background: #fff;
}

.booklet-detail-info-row.is-limit.is-yes {
    background: #fff;
}

.booklet-detail-info-row.is-limit.is-no {
    background: #fff;
}

.booklet-detail-info-row.is-limit .booklet-detail-info-label {
    justify-content: center;
    gap: 0;
    padding: 0;
    background: #f8fafc;
}

.booklet-detail-info-row.is-limit .booklet-detail-info-value {
    color: #0f172a;
    background: #fff;
}

.booklet-detail-info-label-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 14px;
}

.booklet-detail-info-label-icon > span {
    font-size: 14px;
}

.booklet-detail-info-row.is-yes .booklet-detail-info-label-icon {
    background: #dcfce7;
    color: #047857;
}

.booklet-detail-info-row.is-no .booklet-detail-info-label-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.booklet-detail-limit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

.booklet-detail-limit-badge span {
    flex: 0 0 auto;
    font-size: 15px;
}

.booklet-detail-limit-badge.is-yes {
    background: #dcfce7;
    color: #047857;
}

.booklet-detail-limit-badge.is-no {
    background: #fee2e2;
    color: #b91c1c;
}

.booklet-detail-limit-badge.is-neutral {
    background: #eff6ff;
    color: #1d4ed8;
}

.ffu-item-life-section .booklet-craft-item-name,
.ffu-item-life-section .booklet-craft-choice-note,
.ffu-item-life-section .booklet-craft-choice-note b,
.ffu-item-life-section .booklet-craft-col-title,
.ffu-item-life-section .booklet-craft-col-title > span,
.ffu-item-life-section .booklet-craft-kind,
.ffu-item-life-section .booklet-craft-role,
.ffu-item-life-section .booklet-craft-current {
    font-weight: 500;
}

.booklet-detail-info-row.is-limit .booklet-detail-info-copy {
    background: rgba(37, 99, 235, .08);
}

[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-radius: 6px;
    background: #eef2ff;
    padding: 4px 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 500;
}

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

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

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

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

.booklet-detail-card .booklet-detail-chip.is-pve {
    background: #e0f2fe;
    color: #0369a1;
}

.booklet-detail-card .booklet-detail-chip.is-pvp {
    background: #f3e8ff;
    color: #7e22ce;
}

.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 > div > span:first-child,
.booklet-detail-section-head > div > i:first-child {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
}

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

.booklet-detail-section-head .item-awake-collapse-meta > .item-awake-count {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.booklet-detail-page section:has(> .booklet-detail-section-head + .booklet-detail-empty),
.booklet-detail-page section:has(> .booklet-detail-section-head + .quest-empty),
.booklet-detail-page section:has(> .booklet-detail-section-head + .booklet-detail-empty:only-child),
.booklet-detail-page section:has(> .booklet-detail-section-head + .quest-empty:only-child),
.booklet-detail-page section:has(> .booklet-detail-section-head + div > .booklet-detail-empty:only-child),
.booklet-detail-page section:has(> .booklet-detail-section-head + div > .quest-empty:only-child) {
    display: none;
}

.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;
}

.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(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .booklet-detail-drop-grid {
        grid-template-columns: 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 {
    line-height: 1.2;
}

.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-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-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-detail-drop-rate small {
    display: block;
    margin-top: 2px;
    color: inherit;
    font-size: 10px;
    opacity: .78;
    text-align: center;
}

.booklet-detail-load-wrap {
    display: flex;
    justify-content: center;
    padding: 16px 0 4px;
}

.booklet-detail-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 156px;
    height: 32px;
    border: 1px solid #bfdbfe;
    border-radius: 5px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.booklet-detail-load-more:hover {
    border-color: #60a5fa;
    background: #dbeafe;
}

.booklet-detail-load-more:disabled {
    cursor: wait;
    opacity: .72;
    transform: none;
}

.booklet-detail-load-more.is-loading .tw-icon-\[mdi--chevron-down\] {
    animation: booklet-spin .8s linear infinite;
}

@keyframes booklet-spin {
    to {
        transform: rotate(360deg);
    }
}

.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: mxd079TipSpin .75s linear infinite;
}

@keyframes mxd079TipSpin {
    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: #f3f4f6;
}

.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: mxd079TipSpin .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 mxd079 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: #2a2a2a;
    background:
        radial-gradient(circle at 16% 0%, rgba(14, 165, 233, .16), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(16, 185, 129, .12), transparent 28%),
        linear-gradient(180deg, #111827 0%, #101010 100%);
}

.tw-dark .booklet-footer::before,
.dark .booklet-footer::before,
.tw-dark .booklet-footer::after,
.dark .booklet-footer::after {
    opacity: .28;
}

.tw-dark .booklet-footer-simple,
.dark .booklet-footer-simple {
    color: #a3a3a3;
}

.tw-dark .booklet-footer-simple a,
.dark .booklet-footer-simple a {
    color: #7dd3fc;
}

.tw-dark .booklet-footer-simple a:hover,
.dark .booklet-footer-simple a:hover {
    color: #bae6fd;
}

.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-list .db-tree-row.db-tree-disabled,
.dark .booklet-uiv8-list .db-tree-row.db-tree-disabled,
.tw-dark .booklet-uiv8-list .db-tree-row.db-tree-disabled:hover,
.dark .booklet-uiv8-list .db-tree-row.db-tree-disabled:hover {
    background: transparent;
    color: #64748b;
}

.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,
.tw-dark .booklet-uiv8-search a:hover,
.dark .booklet-uiv8-search a: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 {
    background: rgba(16, 16, 16, .72);
}

.tw-dark .booklet-uiv8-loading-pill,
.dark .booklet-uiv8-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 {
    --detail-dark: #151515;
    --detail-line: rgba(255, 255, 255, .1);
    border-color: #3a3a3a;
    background: #151515;
    color: #fff;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}

.tw-dark .booklet-detail-card-head h1,
.dark .booklet-detail-card-head h1,
.tw-dark .booklet-detail-card-title h1,
.tw-dark .booklet-detail-card-title h2,
.dark .booklet-detail-card-title h1,
.dark .booklet-detail-card-title h2 {
    color: #f8fafc;
}

.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:
        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),
        #191919;
    background-size: 28px 28px;
}

.tw-dark .booklet-detail-card-body,
.dark .booklet-detail-card-body {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.tw-dark .booklet-detail-card-title p,
.dark .booklet-detail-card-title p {
    color: #94a3b8;
}

.tw-dark .booklet-detail-card-code,
.dark .booklet-detail-card-code {
    color: #dbeafe;
}

.tw-dark .booklet-detail-title-icon,
.dark .booklet-detail-title-icon,
.tw-dark .booklet-detail-card-icon,
.tw-dark .booklet-detail-mini-icon,
.dark .booklet-detail-card-icon,
.dark .booklet-detail-mini-icon {
    border-color: rgba(148, 163, 184, .42);
    background: rgba(15, 23, 42, .58);
    color: #cbd5e1;
}

.tw-dark .booklet-detail-title-meta,
.dark .booklet-detail-title-meta {
    color: #fff;
}

.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-damage,
.dark .booklet-detail-damage {
    border-color: transparent;
    background: #222;
}

.tw-dark .booklet-detail-damage span,
.dark .booklet-detail-damage span,
.tw-dark .skill-detail-inline-desc > span,
.dark .skill-detail-inline-desc > span {
    color: #cbd5e1;
}

.tw-dark .booklet-detail-damage strong,
.dark .booklet-detail-damage strong {
    color: #fff;
}

.tw-dark .booklet-detail-row,
.dark .booklet-detail-row {
    border-color: transparent;
    background: rgba(255, 255, 255, .055);
    color: #e2e8f0;
}

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

.tw-dark .booklet-detail-row b,
.dark .booklet-detail-row b {
    color: #fff;
}

.tw-dark .skill-detail-requirement-link,
.dark .skill-detail-requirement-link {
    border-color: rgba(96, 165, 250, .24);
    background: rgba(37, 99, 235, .12);
}

.tw-dark .skill-detail-requirement-link:hover,
.dark .skill-detail-requirement-link:hover {
    border-color: rgba(96, 165, 250, .42);
    background: rgba(37, 99, 235, .2);
}

.tw-dark .skill-detail-requirement-icon,
.dark .skill-detail-requirement-icon {
    border-color: rgba(96, 165, 250, .24);
    background: rgba(15, 23, 42, .72);
}

.tw-dark .skill-detail-requirement-name,
.dark .skill-detail-requirement-name {
    color: #bfdbfe;
}

.tw-dark .skill-detail-requirement-level,
.dark .skill-detail-requirement-level {
    color: #cbd5e1;
}

.tw-dark .booklet-detail-row.is-primary b,
.dark .booklet-detail-row.is-primary b {
    color: #7dd3fc;
}

.tw-dark .booklet-detail-chip,
.dark .booklet-detail-chip {
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
}

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

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

.tw-dark .booklet-detail-card .booklet-detail-chip.is-pve,
.dark .booklet-detail-card .booklet-detail-chip.is-pve {
    background: rgba(14, 165, 233, .2);
    color: #bae6fd;
}

.tw-dark .booklet-detail-card .booklet-detail-chip.is-pvp,
.dark .booklet-detail-card .booklet-detail-chip.is-pvp {
    background: rgba(168, 85, 247, .2);
    color: #e9d5ff;
}

.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-detail-info-table.is-rows,
.dark .booklet-detail-info-table.is-rows {
    border-color: #2a2a2a;
    background: #181818;
}

.tw-dark .booklet-detail-info-row,
.dark .booklet-detail-info-row {
    border-color: #2a2a2a;
}

.tw-dark .booklet-detail-info-label,
.dark .booklet-detail-info-label {
    background: #202020;
    color: #a3a3a3;
}

.tw-dark .booklet-detail-info-value,
.dark .booklet-detail-info-value {
    color: #f3f4f6;
}

.tw-dark .booklet-detail-info-copy,
.dark .booklet-detail-info-copy {
    background: rgba(59, 130, 246, .18);
    color: #93c5fd;
}

.tw-dark .booklet-detail-info-row.is-limit,
.dark .booklet-detail-info-row.is-limit {
    background: #181818;
}

.tw-dark .booklet-detail-info-row.is-limit.is-plain,
.dark .booklet-detail-info-row.is-limit.is-plain {
    background: #181818;
}

.tw-dark .booklet-detail-info-row.is-limit.is-plain .booklet-detail-info-value,
.dark .booklet-detail-info-row.is-limit.is-plain .booklet-detail-info-value {
    color: #f3f4f6;
}

.tw-dark .booklet-detail-info-row.is-limit.is-yes,
.dark .booklet-detail-info-row.is-limit.is-yes {
    background: #181818;
}

.tw-dark .booklet-detail-info-row.is-limit.is-no,
.dark .booklet-detail-info-row.is-limit.is-no {
    background: #181818;
}

.tw-dark .booklet-detail-info-row.is-limit .booklet-detail-info-label,
.dark .booklet-detail-info-row.is-limit .booklet-detail-info-label {
    background: #202020;
    color: #a3a3a3;
}

.tw-dark .booklet-detail-info-row.is-limit .booklet-detail-info-value,
.dark .booklet-detail-info-row.is-limit .booklet-detail-info-value {
    background: transparent;
    color: #f3f4f6;
}

.tw-dark .booklet-detail-info-label-icon,
.dark .booklet-detail-info-label-icon {
    background: rgba(59, 130, 246, .16);
    color: #93c5fd;
}

.tw-dark .booklet-detail-info-row.is-yes .booklet-detail-info-label-icon,
.dark .booklet-detail-info-row.is-yes .booklet-detail-info-label-icon {
    background: rgba(16, 185, 129, .16);
    color: #6ee7b7;
}

.tw-dark .booklet-detail-info-row.is-no .booklet-detail-info-label-icon,
.dark .booklet-detail-info-row.is-no .booklet-detail-info-label-icon {
    background: rgba(248, 113, 113, .16);
    color: #fca5a5;
}

.tw-dark .booklet-detail-limit-badge.is-yes,
.dark .booklet-detail-limit-badge.is-yes {
    background: rgba(16, 185, 129, .16);
    color: #6ee7b7;
}

.tw-dark .booklet-detail-limit-badge.is-no,
.dark .booklet-detail-limit-badge.is-no {
    background: rgba(248, 113, 113, .16);
    color: #fca5a5;
}

.tw-dark .booklet-detail-limit-badge.is-neutral,
.dark .booklet-detail-limit-badge.is-neutral {
    background: rgba(59, 130, 246, .16);
    color: #93c5fd;
}

.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-detail-mini-text b,
.dark .booklet-detail-mini-text b {
    color: #7dd3fc;
}

.tw-dark .booklet-detail-mini-text em,
.dark .booklet-detail-mini-text em {
    color: #a3a3a3;
}

.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-level,
.dark .booklet-item-card-level {
    border-color: rgba(96, 165, 250, .18);
    background: rgba(37, 99, 235, .16);
    color: #93c5fd;
}

.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 rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .028);
    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 .pager079 li a,
.dark .pager079 li a,
.tw-dark .pager079 li span,
.dark .pager079 li span {
    border-color: #2a2a2a;
    background: #171717;
    color: #cbd5e1;
}

.tw-dark .pager079 li a:hover,
.dark .pager079 li a:hover,
.tw-dark .pager079 li .now_page,
.dark .pager079 li .now_page,
.tw-dark .pager079 li a.now_page,
.dark .pager079 li a.now_page {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #fff;
}

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-craft-wrap {
    display: grid;
    gap: 14px;
    padding: 12px;
}

.booklet-craft-tree {
    display: grid;
    gap: 10px;
}

.booklet-craft-tree.is-nested {
    margin-top: 6px;
    margin-left: 18px;
    border-left: 2px solid #dbeafe;
    padding-left: 12px;
}

.booklet-craft-item-wrap > .booklet-craft-children > .booklet-craft-tabs > .booklet-craft-tab-panel > .booklet-craft-tree.is-nested,
.booklet-craft-item-wrap > .booklet-craft-children > .booklet-craft-tree.is-nested {
    margin-left: 0;
    border-left: 0;
    padding-left: 0;
}

.booklet-craft-card {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.booklet-craft-card.is-nested {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.booklet-craft-card.is-nested > .booklet-craft-flow {
    padding: 0;
}

.booklet-craft-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
    padding: 9px 10px;
}

.booklet-craft-kind,
.booklet-craft-role,
.booklet-craft-current {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 12px;
    line-height: 1.2;
}

.booklet-craft-kind {
    background: #eff6ff;
    color: #2563eb;
}

.booklet-craft-role {
    background: #f1f5f9;
    color: #475569;
}

.booklet-craft-role.is-target,
.booklet-craft-current {
    background: rgba(16, 185, 129, .12);
    color: #059669;
}

.booklet-craft-role.is-material {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

.booklet-craft-card-head a {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}

.booklet-craft-flow {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.booklet-craft-flow--tree {
    grid-template-columns: 1fr;
    gap: 5px;
}

.booklet-craft-col {
    min-width: 0;
}

.booklet-craft-col-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 12px;
}

.booklet-craft-col-title > span {
    display: inline-flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.booklet-craft-col-title em {
    color: #2563eb;
    font-style: normal;
    font-weight: 500;
}

.booklet-craft-target-control {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    background: #f8fbff;
    padding: 2px 6px 2px 8px;
    color: #475569;
    font-size: 12px;
}

.booklet-craft-target-control input {
    width: 58px;
    height: 24px;
    border: 1px solid #dbeafe;
    border-radius: 3px;
    background: #fff;
    padding: 0 5px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 650;
    text-align: center;
}

.booklet-craft-target-control em {
    color: #2563eb;
    white-space: nowrap;
}

.booklet-craft-list {
    display: grid;
    gap: 8px;
}

.booklet-craft-choice-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 8px;
    background: #fffbeb;
    padding: 8px 10px;
    color: #92400e;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.booklet-craft-choice-note.is-material {
    border-color: rgba(37, 99, 235, .28);
    background: #eff6ff;
    color: #1d4ed8;
}

.booklet-craft-choice-note span {
    margin-top: 1px;
    flex: 0 0 auto;
    font-size: 16px;
}

.booklet-craft-flow--tree .booklet-craft-col--materials {
    position: relative;
    margin-top: -1px;
    margin-left: 16px;
    padding-left: 12px;
}

.booklet-craft-flow--tree .booklet-craft-col--materials::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 0;
    width: 2px;
    border-radius: 999px;
    background: #dbeafe;
}

.booklet-craft-flow--tree .booklet-craft-col--materials.is-primary {
    margin-left: 0;
    padding-left: 0;
}

.booklet-craft-flow--tree .booklet-craft-col--materials.is-primary::before {
    display: none;
}

.booklet-craft-flow--tree .booklet-craft-col--extras {
    margin-left: 0;
    padding-left: 0;
}

.booklet-craft-item-wrap {
    min-width: 0;
}

.booklet-craft-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 7px;
}

.booklet-craft-item.is-current {
    border-color: rgba(5, 150, 105, .35);
    background: rgba(16, 185, 129, .07);
}

.booklet-craft-item-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 21px;
}

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

.booklet-craft-item-main {
    min-width: 0;
    flex: 1;
}

.booklet-craft-item-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.booklet-craft-item-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booklet-craft-col--targets .booklet-craft-item-name {
    font-size: 14px;
}

.booklet-craft-item-count {
    display: inline-flex;
    height: 20px;
    flex: 0 0 auto;
    align-items: center;
    border-radius: 5px;
    background: #fff7ed;
    padding: 0 6px;
    color: #ea580c;
    font-size: 13px;
    font-style: normal;
    font-weight: 650;
    line-height: 20px;
}

.booklet-craft-item-meta {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.booklet-craft-branch-count,
.booklet-craft-expand {
    display: inline-flex;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 650;
}

.booklet-craft-branch-count {
    min-width: 36px;
    gap: 3px;
    padding: 0 8px;
}

.booklet-craft-expand {
    width: 30px;
    border: 1px solid rgba(37, 99, 235, .12);
    cursor: pointer;
}

.booklet-craft-expand:hover,
.booklet-craft-expand.is-open {
    border-color: rgba(37, 99, 235, .20);
    background: #dbeafe;
}

.booklet-craft-expand.is-loading span {
    animation: booklet-craft-spin .8s linear infinite;
}

.booklet-craft-expand-icon {
    font-size: 18px;
    line-height: 1;
}

.booklet-craft-empty {
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    padding: 14px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

.booklet-craft-empty.is-error {
    color: #dc2626;
}

.booklet-craft-item-wrap > .booklet-craft-children {
    display: none;
}

.booklet-craft-item-wrap > .booklet-craft-children:not(:empty) {
    display: block;
    margin-top: 8px;
    margin-left: 28px;
    border-left: 2px solid #e2e8f0;
    padding-left: 12px;
}

.booklet-craft-item-wrap > .booklet-craft-children.tw-hidden {
    display: none;
}

.booklet-craft-tabs {
    display: grid;
    gap: 4px;
}

.booklet-craft-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.booklet-craft-tabbar button {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbeafe;
    border-radius: 7px;
    background: #f8fafc;
    padding: 0 9px;
    color: #475569;
    font-size: 12px;
}

.booklet-craft-tabbar button:hover,
.booklet-craft-tabbar button.is-active {
    border-color: rgba(37, 99, 235, .35);
    background: #eff6ff;
    color: #2563eb;
}

.booklet-craft-tabbar button.is-active {
    font-weight: 650;
}

@keyframes booklet-craft-spin {
    to {
        transform: rotate(360deg);
    }
}

.dark .booklet-craft-card,
.tw-dark .booklet-craft-card,
.dark .booklet-craft-card-head,
.tw-dark .booklet-craft-card-head,
.dark .booklet-craft-item,
.tw-dark .booklet-craft-item,
.dark .booklet-craft-empty,
.tw-dark .booklet-craft-empty {
    border-color: rgba(255, 255, 255, .12);
}

.dark .booklet-craft-card,
.tw-dark .booklet-craft-card,
.dark .booklet-craft-item,
.tw-dark .booklet-craft-item {
    background: #171d24;
}

.dark .booklet-craft-card.is-nested,
.tw-dark .booklet-craft-card.is-nested {
    background: transparent;
}

.dark .booklet-craft-card-head,
.tw-dark .booklet-craft-card-head {
    background: rgba(255, 255, 255, .04);
}

.dark .booklet-craft-item-name,
.tw-dark .booklet-craft-item-name {
    color: #f8fafc;
}

.dark .booklet-craft-col-title,
.tw-dark .booklet-craft-col-title,
.dark .booklet-craft-item-meta,
.tw-dark .booklet-craft-item-meta,
.dark .booklet-craft-empty,
.tw-dark .booklet-craft-empty {
    color: #a1a1aa;
}

.dark .booklet-craft-target-control,
.tw-dark .booklet-craft-target-control {
    border-color: rgba(125, 211, 252, .24);
    background: rgba(59, 130, 246, .08);
    color: #d4d4d8;
}

.dark .booklet-craft-target-control input,
.tw-dark .booklet-craft-target-control input {
    border-color: rgba(125, 211, 252, .22);
    background: #111827;
    color: #f8fafc;
}

.dark .booklet-craft-choice-note,
.tw-dark .booklet-craft-choice-note {
    border-color: rgba(251, 191, 36, .35);
    background: rgba(245, 158, 11, .12);
    color: #fbbf24;
}

.dark .booklet-craft-choice-note.is-material,
.tw-dark .booklet-craft-choice-note.is-material {
    border-color: rgba(125, 211, 252, .28);
    background: rgba(59, 130, 246, .12);
    color: #7dd3fc;
}

.dark .booklet-craft-item-icon,
.tw-dark .booklet-craft-item-icon {
    background: #111827;
    color: #cbd5e1;
}

.dark .booklet-craft-item.is-current,
.tw-dark .booklet-craft-item.is-current {
    border-color: rgba(185, 255, 74, .35);
    background: rgba(185, 255, 74, .07);
}

.dark .booklet-craft-flow--tree .booklet-craft-col--materials::before,
.tw-dark .booklet-craft-flow--tree .booklet-craft-col--materials::before,
.dark .booklet-craft-item-wrap > .booklet-craft-children,
.tw-dark .booklet-craft-item-wrap > .booklet-craft-children {
    border-color: rgba(125, 211, 252, .22);
}

@media (max-width: 720px) {
    .booklet-craft-tree.is-nested {
        margin-left: 8px;
    }

    .booklet-craft-item-wrap > .booklet-craft-children:not(:empty) {
        margin-left: 18px;
    }

    .booklet-craft-col-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .booklet-craft-target-control {
        width: 100%;
        justify-content: flex-start;
    }
}
.ffu-market-searchbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 8px;
}

.ffu-market-searchbar .booklet-uiv8-search,
.ffu-market-searchbar .ffu-filter-select,
.ffu-market-searchbar > button {
    height: 40px;
    border-radius: 6px;
}

.ffu-market-searchbar .booklet-uiv8-search {
    padding: 0 12px;
}

.ffu-market-range {
    display: flex;
    min-width: 0;
    height: 40px;
    align-items: center;
    gap: 5px;
    border: 1px solid #dbe4f0;
    border-radius: 6px;
    background: #fff;
    padding: 0 9px;
    color: #52657d;
    font-size: 13px;
}

.ffu-market-range span {
    flex: 0 0 auto;
    font-weight: 600;
    color: #334155;
}

.ffu-market-range em {
    flex: 0 0 auto;
    color: #94a3b8;
    font-style: normal;
}

.ffu-market-range input {
    flex: 0 0 58px;
    min-width: 58px;
    width: 58px;
    height: 30px;
    border: 0;
    border-radius: 4px;
    -moz-appearance: textfield;
    appearance: textfield;
    background: #f6f8fb;
    color: #0f172a;
    font-weight: 700;
    text-align: center;
    outline: none;
}

.ffu-market-range input::-webkit-outer-spin-button,
.ffu-market-range input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.ffu-market-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.ffu-market-loading-layer {
    align-items: flex-start;
    padding-top: 100px;
}

.ffu-market-secondarybar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0;
}

.ffu-market-check {
    display: inline-flex;
    height: 34px;
    align-items: center;
    gap: 6px;
    border: 1px solid #dbe4f0;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
    color: #334155;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.ffu-market-check input {
    width: 14px;
    height: 14px;
    accent-color: #2563eb;
    cursor: pointer;
}

.ffu-market-check span {
    flex: 0 0 auto;
}

.ffu-market-secondarybar .ffu-filter-select {
    width: 128px;
}

.ffu-market-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    padding: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ffu-market-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .10);
    transform: translateY(-1px);
}

.ffu-market-icon {
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background:
        repeating-linear-gradient(135deg, rgba(37, 99, 235, .09) 0 7px, rgba(37, 99, 235, .02) 7px 14px),
        #f8fbff;
    color: #2563eb;
    font-size: 26px;
    text-decoration: none;
}

.ffu-market-icon img {
    max-width: 38px;
    max-height: 38px;
    image-rendering: auto;
}

.ffu-market-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-market-name:hover {
    color: #1d4ed8;
}

.ffu-market-enhance {
    flex: 0 0 auto;
    border-radius: 5px;
    background: #fff7ed;
    padding: 2px 6px;
    color: #ea580c;
    font-size: 12px;
    font-weight: 800;
}

.ffu-market-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
}

.ffu-market-meta span {
    border-radius: 5px;
    background: #f1f5f9;
    padding: 2px 6px;
    line-height: 1.5;
}

.ffu-market-shop {
    display: flex;
    min-width: 0;
    gap: 8px;
    margin-top: 8px;
    color: #334155;
    font-size: 12px;
}

.ffu-market-shop span,
.ffu-market-shop em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-market-shop span {
    font-weight: 700;
}

.ffu-market-shop em {
    color: #64748b;
    font-style: normal;
}

.ffu-market-price {
    grid-column: 1 / -1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    border-top: 1px solid #edf2f7;
    padding-top: 9px;
    text-align: left;
}

.ffu-market-map-link {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 5px;
    align-self: flex-end;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    background: #eff6ff;
    padding: 5px 9px;
    color: #2563eb;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}

.ffu-market-map-link:hover {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1d4ed8;
}

.ffu-market-map-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 2a6 6 0 0 0-6 6c0 1.468.843 3.007 1.807 4.306c.98 1.319 2.152 2.48 2.945 3.207a1.835 1.835 0 0 0 2.496 0c.793-.727 1.966-1.888 2.945-3.207C15.157 11.007 16 9.468 16 8a6 6 0 0 0-6-6m2 6a2 2 0 1 1-4 0a2 2 0 0 1 4 0m2.42 5.638a23 23 0 0 1-.715.826q.382.108.712.235c.554.213.969.455 1.236.698S16 15.844 16 16s-.08.36-.347.603s-.682.485-1.236.698c-1.106.426-2.667.7-4.417.7s-3.311-.274-4.417-.7c-.554-.213-.969-.455-1.236-.698S4 16.156 4 16s.08-.36.347-.603s.682-.485 1.236-.698a8 8 0 0 1 .712-.235a22 22 0 0 1-.715-.826a9 9 0 0 0-.356.128c-.621.239-1.159.536-1.55.891C3.284 15.012 3 15.466 3 16c0 .535.284.988.674 1.343s.929.652 1.55.892C6.471 18.715 8.16 19 10 19s3.529-.286 4.776-.765c.621-.24 1.159-.537 1.55-.892c.39-.355.674-.808.674-1.343s-.284-.988-.674-1.343s-.929-.652-1.55-.891a9 9 0 0 0-.356-.128'/%3E%3C/svg%3E");
    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%;
}

.ffu-market-map-link > em {
    color: inherit;
    font-size: 13px;
    font-style: normal;
    line-height: 1;
}

.ffu-market-price b {
    color: #b45309;
    font-size: 16px;
    line-height: 1.2;
}

.ffu-market-price span,
.ffu-market-price em {
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffu-market-price em {
    color: #059669;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.ffu-market-price em.is-offline {
    color: #94a3b8;
}

.item-market-more {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    background: #eff6ff;
    padding: 4px 9px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.item-market-more:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.item-market-panel {
    padding: 12px;
}

.item-market-state {
    display: flex;
    min-height: 86px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.item-market-state > span {
    color: #2563eb;
    font-size: 28px;
}

.item-market-state.is-loading > span {
    animation: booklet-spin 1s linear infinite;
}

.item-market-state b {
    color: #334155;
    font-size: 14px;
}

.item-market-state em {
    max-width: 420px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    line-height: 1.6;
}

.item-market-state.is-error > span {
    color: #f97316;
}

.item-market-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: #64748b;
    font-size: 13px;
}

.item-market-summary b {
    color: #2563eb;
    font-size: 18px;
}

.item-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.item-market-card {
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    padding: 10px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.item-market-more-card {
    display: flex;
    min-height: 118px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-style: dashed;
    background: #f8fafc;
    color: #2563eb;
    text-align: center;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.item-market-more-card:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.item-market-more-card > span {
    font-size: 22px;
}

.item-market-more-card > b {
    color: currentColor;
    font-size: 24px;
    line-height: 1;
}

.item-market-more-card > em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.item-market-more-card > strong {
    color: currentColor;
    font-size: 13px;
    font-weight: 700;
}

.item-market-card-head {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.item-market-card-head > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.item-market-card-head strong {
    min-width: 0;
    overflow: hidden;
    color: #2563eb;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-market-card-head b {
    flex: 0 0 auto;
    color: #b45309;
    font-size: 14px;
    line-height: 1.35;
}

.item-market-enhance {
    flex: 0 0 auto;
    border-radius: 5px;
    background: #fff7ed;
    padding: 2px 6px;
    color: #ea580c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.item-market-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.item-market-card-meta span {
    border-radius: 5px;
    background: #f1f5f9;
    padding: 2px 6px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.item-market-card-shop {
    display: flex;
    min-width: 0;
    gap: 8px;
    margin-top: 8px;
    color: #334155;
    font-size: 12px;
}

.item-market-card-shop span,
.item-market-card-shop em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-market-card-shop span {
    font-weight: 700;
}

.item-market-card-shop em {
    color: #64748b;
    font-style: normal;
}

.dark .item-market-more,
.tw-dark .item-market-more {
    background: rgba(59, 130, 246, .16);
    color: #93c5fd;
}

.dark .item-market-state,
.tw-dark .item-market-state {
    border-color: #334155;
    background: #111827;
    color: #94a3b8;
}

.dark .item-market-state b,
.tw-dark .item-market-state b {
    color: #e5e7eb;
}

.dark .item-market-card,
.tw-dark .item-market-card {
    border-color: #2a2a2a;
    background: linear-gradient(180deg, #171717, #141414);
    box-shadow: none;
}

.dark .item-market-more-card,
.tw-dark .item-market-more-card {
    border-color: #334155;
    background: #111827;
    color: #93c5fd;
}

.dark .item-market-more-card:hover,
.tw-dark .item-market-more-card:hover {
    border-color: #60a5fa;
    background: #172033;
    color: #bfdbfe;
}

.dark .item-market-more-card > em,
.tw-dark .item-market-more-card > em {
    color: #94a3b8;
}

.dark .item-market-card-head strong,
.tw-dark .item-market-card-head strong {
    color: #93c5fd;
}

.dark .item-market-card-meta span,
.tw-dark .item-market-card-meta span {
    background: #202020;
    color: #a3a3a3;
}

.dark .item-market-card-shop,
.tw-dark .item-market-card-shop,
.dark .item-market-card-shop em,
.tw-dark .item-market-card-shop em {
    color: #a3a3a3;
}

.ffu-recipe-filter-form {
    grid-template-columns: 1fr;
}

.ffu-recipe-card {
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.ffu-recipe-card:hover {
    box-shadow: 0 12px 28px rgba(37, 99, 235, .10);
}

.dark .ffu-recipe-card,
.tw-dark .ffu-recipe-card {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .20);
}

.dark .ffu-recipe-card:hover,
.tw-dark .ffu-recipe-card:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
}

@media (min-width: 768px) {
    .ffu-recipe-filter-form {
        grid-template-columns: minmax(260px, 1fr) 150px 110px;
    }
}

.ffu-market-nowrap {
    white-space: nowrap;
}

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

@media (min-width: 768px) {
    .ffu-market-card {
        grid-template-columns: 52px minmax(0, 1fr) 174px;
    }

    .ffu-market-price {
        grid-column: auto;
        border-top: 0;
        border-left: 1px solid #edf2f7;
        padding-top: 0;
        padding-left: 14px;
        align-items: flex-end;
        text-align: right;
    }
}

@media (min-width: 1024px) {
    .ffu-market-searchbar {
        grid-template-columns: minmax(200px, 1fr) 204px 204px 90px 84px;
    }
}

@media (max-width: 640px) {
    .ffu-market-secondarybar {
        justify-content: stretch;
    }

    .ffu-market-secondarybar .ffu-filter-select {
        flex: 1 1 0;
        width: auto;
    }
}

@media (max-width: 420px) {
    .ffu-market-range input {
        flex-basis: 50px;
        min-width: 50px;
        width: 50px;
    }
}

.dark .ffu-market-range,
.tw-dark .ffu-market-range {
    border-color: #333;
    background: #1e1e1e;
    color: #a3a3a3;
}

.dark .ffu-market-range span,
.tw-dark .ffu-market-range span {
    color: #e5e7eb;
}

.dark .ffu-market-range input,
.tw-dark .ffu-market-range input {
    background: #151515;
    color: #f8fafc;
}

.dark .ffu-market-card,
.tw-dark .ffu-market-card {
    border-color: #333;
    background: linear-gradient(180deg, #1d1d1d, #181818);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.dark .ffu-market-card:hover,
.tw-dark .ffu-market-card:hover {
    border-color: rgba(96, 165, 250, .55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

.dark .ffu-market-icon,
.tw-dark .ffu-market-icon {
    background:
        repeating-linear-gradient(135deg, rgba(96, 165, 250, .12) 0 7px, rgba(96, 165, 250, .035) 7px 14px),
        #222;
    color: #60a5fa;
}

.dark .ffu-market-name,
.tw-dark .ffu-market-name {
    color: #93c5fd;
}

.dark .ffu-market-meta span,
.tw-dark .ffu-market-meta span {
    background: rgba(255, 255, 255, .06);
    color: #b8c2d2;
}

.dark .ffu-market-shop,
.tw-dark .ffu-market-shop {
    color: #e5e7eb;
}

.dark .ffu-market-shop em,
.tw-dark .ffu-market-shop em,
.dark .ffu-market-price span,
.tw-dark .ffu-market-price span {
    color: #9ca3af;
}

.dark .ffu-market-price,
.tw-dark .ffu-market-price {
    border-color: #2b2b2b;
}

.dark .ffu-market-check,
.tw-dark .ffu-market-check {
    border-color: #333;
    background: #1f1f1f;
    color: #e5e7eb;
}

.dark .ffu-market-map-link,
.tw-dark .ffu-market-map-link {
    border-color: rgba(96, 165, 250, .35);
    background: rgba(37, 99, 235, .16);
    color: #93c5fd;
}

.dark .ffu-market-map-link:hover,
.tw-dark .ffu-market-map-link:hover {
    border-color: rgba(147, 197, 253, .58);
    background: rgba(37, 99, 235, .24);
    color: #bfdbfe;
}

.dark .ffu-market-price b,
.tw-dark .ffu-market-price b {
    color: #fbbf24;
}

.ffu-item-life-section .booklet-craft-item-name,
.ffu-item-life-section .booklet-craft-item-title,
.ffu-item-life-section .booklet-craft-choice-note,
.ffu-item-life-section .booklet-craft-choice-note b,
.ffu-item-life-section .booklet-craft-col-title,
.ffu-item-life-section .booklet-craft-col-title > span,
.ffu-item-life-section .booklet-craft-col-title em,
.ffu-item-life-section .booklet-craft-kind,
.ffu-item-life-section .booklet-craft-role,
.ffu-item-life-section .booklet-craft-current {
    font-weight: 400 !important;
}

.ffu-item-life-section .booklet-craft-item-count {
    font-weight: 500 !important;
}

.booklet-detail-page .tw-min-w-0 .booklet-craft-item-name,
.booklet-detail-page .tw-min-w-0 .booklet-craft-item-title,
.booklet-detail-page .tw-min-w-0 .booklet-craft-choice-note,
.booklet-detail-page .tw-min-w-0 .booklet-craft-choice-note b,
.booklet-detail-page .tw-min-w-0 .booklet-craft-col-title,
.booklet-detail-page .tw-min-w-0 .booklet-craft-col-title > span,
.booklet-detail-page .tw-min-w-0 .booklet-craft-col-title em,
.booklet-detail-page .tw-min-w-0 .booklet-craft-kind,
.booklet-detail-page .tw-min-w-0 .booklet-craft-role,
.booklet-detail-page .tw-min-w-0 .booklet-craft-current {
    font-weight: 400 !important;
}

.booklet-detail-page .tw-min-w-0 .booklet-craft-item-count {
    font-weight: 500 !important;
}

.booklet-craft-item-name.is-rarity-common,
.booklet-craft-item-name.is-rarity-common:hover,
.dark .booklet-craft-item-name.is-rarity-common,
.tw-dark .booklet-craft-item-name.is-rarity-common {
    color: #78d9ff;
}

.booklet-craft-item-name.is-rarity-uncommon,
.booklet-craft-item-name.is-rarity-uncommon:hover,
.dark .booklet-craft-item-name.is-rarity-uncommon,
.tw-dark .booklet-craft-item-name.is-rarity-uncommon {
    color: #c46200;
}

.booklet-craft-item-name.is-rarity-rare,
.booklet-craft-item-name.is-rarity-rare:hover,
.dark .booklet-craft-item-name.is-rarity-rare,
.tw-dark .booklet-craft-item-name.is-rarity-rare {
    color: #00aa00;
}

.booklet-craft-item-name.is-rarity-unique,
.booklet-craft-item-name.is-rarity-unique:hover,
.dark .booklet-craft-item-name.is-rarity-unique,
.tw-dark .booklet-craft-item-name.is-rarity-unique,
.booklet-craft-item-name.is-rarity-veryrare,
.booklet-craft-item-name.is-rarity-veryrare:hover,
.dark .booklet-craft-item-name.is-rarity-veryrare,
.tw-dark .booklet-craft-item-name.is-rarity-veryrare {
    color: #d20000;
}

.booklet-craft-item-name.is-rarity-ultimate,
.booklet-craft-item-name.is-rarity-ultimate:hover,
.dark .booklet-craft-item-name.is-rarity-ultimate,
.tw-dark .booklet-craft-item-name.is-rarity-ultimate {
    color: #7f00ff;
}

.booklet-equipset-card {
    overflow: hidden;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
}

.booklet-equipset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5edf7;
    background:
        radial-gradient(circle at 0 0, rgba(37, 99, 235, .14), transparent 34%),
        linear-gradient(180deg, #f8fbff, #f2f7fc);
    padding: 12px 14px;
}

.booklet-equipset-head > div {
    min-width: 0;
}

.booklet-equipset-head span {
    margin-right: 7px;
    color: #2563eb;
    vertical-align: -2px;
}

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

.booklet-equipset-head em {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.booklet-equipset-head strong {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #dbeafe;
    padding: 5px 10px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
}

.booklet-equipset-body {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.booklet-equipset-parts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.booklet-equipset-part {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 58px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #fbfdff;
    padding: 8px 10px;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.booklet-equipset-part:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    transform: translateY(-1px);
}

.booklet-equipset-part.is-current {
    border-color: #60a5fa;
    background: linear-gradient(180deg, #eff6ff, #fff);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .1);
}

.booklet-equipset-part-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f1f5f9;
}

.booklet-equipset-part-icon img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
}

.booklet-equipset-part-text {
    min-width: 0;
}

.booklet-equipset-part-text b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
}

.booklet-equipset-part-text em {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.booklet-equipset-part > i {
    position: absolute;
    top: 6px;
    right: 7px;
    border-radius: 999px;
    background: #2563eb;
    padding: 1px 6px;
    color: #fff;
    font-size: 11px;
    font-style: normal;
}

.booklet-equipset-bonuses {
    display: grid;
    gap: 9px;
}

.booklet-equipset-bonus-group {
    overflow: hidden;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #fff;
}

.booklet-equipset-bonus-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #edf2f7;
    background: #f8fafc;
    padding: 8px 10px;
}

.booklet-equipset-bonus-title span {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.booklet-equipset-bonus-title em {
    border-radius: 999px;
    background: #e0f2fe;
    padding: 2px 8px;
    color: #0369a1;
    font-size: 12px;
    font-style: normal;
}

.booklet-equipset-bonus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px;
}

.booklet-equipset-bonus-list span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px;
    background: #f8fafc;
    padding: 5px 8px;
    color: #334155;
    font-size: 12px;
}

.booklet-equipset-bonus-list b {
    font-weight: 500;
}

.booklet-equipset-bonus-list strong {
    color: #dc2626;
    font-weight: 600;
}

.dark .booklet-equipset-card,
.tw-dark .booklet-equipset-card,
.dark .booklet-equipset-bonus-group,
.tw-dark .booklet-equipset-bonus-group {
    border-color: #303846;
    background: #171717;
}

.dark .booklet-equipset-head,
.tw-dark .booklet-equipset-head {
    border-bottom-color: #303846;
    background:
        radial-gradient(circle at 0 0, rgba(14, 165, 233, .18), transparent 34%),
        linear-gradient(180deg, #1d2229, #171b21);
}

.dark .booklet-equipset-head b,
.tw-dark .booklet-equipset-head b,
.dark .booklet-equipset-bonus-title span,
.tw-dark .booklet-equipset-bonus-title span {
    color: #f8fafc;
}

.dark .booklet-equipset-head span,
.tw-dark .booklet-equipset-head span {
    color: #7dd3fc;
}

.dark .booklet-equipset-head em,
.tw-dark .booklet-equipset-head em,
.dark .booklet-equipset-part-text em,
.tw-dark .booklet-equipset-part-text em {
    color: #94a3b8;
}

.dark .booklet-equipset-head strong,
.tw-dark .booklet-equipset-head strong,
.dark .booklet-equipset-bonus-title em,
.tw-dark .booklet-equipset-bonus-title em {
    background: rgba(14, 165, 233, .15);
    color: #7dd3fc;
}

.dark .booklet-equipset-part,
.tw-dark .booklet-equipset-part {
    border-color: #303846;
    background: #1d1d1d;
}

.dark .booklet-equipset-part:hover,
.tw-dark .booklet-equipset-part:hover,
.dark .booklet-equipset-part.is-current,
.tw-dark .booklet-equipset-part.is-current {
    border-color: #38bdf8;
    background: #111827;
}

.dark .booklet-equipset-part-icon,
.tw-dark .booklet-equipset-part-icon,
.dark .booklet-equipset-bonus-title,
.tw-dark .booklet-equipset-bonus-title,
.dark .booklet-equipset-bonus-list span,
.tw-dark .booklet-equipset-bonus-list span {
    background: rgba(255, 255, 255, .06);
}

.dark .booklet-equipset-bonus-title,
.tw-dark .booklet-equipset-bonus-title {
    border-bottom-color: #303846;
}

.dark .booklet-equipset-bonus-list span,
.tw-dark .booklet-equipset-bonus-list span {
    color: #cbd5e1;
}

.dark .booklet-equipset-bonus-list strong,
.tw-dark .booklet-equipset-bonus-list strong {
    color: #fca5a5;
}

@media (max-width: 720px) {
    .booklet-equipset-parts {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 721px) and (max-width: 1180px) {
    .booklet-equipset-parts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.equipset-list-card {
    overflow: hidden;
    border: 1px solid #dbe7f6;
    border-radius: 5px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.equipset-list-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 10px 28px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
}

.equipset-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5edf7;
    background:
        radial-gradient(circle at 0 0, rgba(37, 99, 235, .12), transparent 36%),
        linear-gradient(180deg, #f8fbff, #f2f7fc);
    padding: 12px;
}

.equipset-list-head > div {
    min-width: 0;
}

.equipset-list-head a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2563eb;
    font-size: 15px;
    font-weight: 600;
}

.equipset-list-head span {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
    font-size: 12px;
}

.equipset-list-head strong {
    flex: 0 0 auto;
    border-radius: 5px;
    background: #dbeafe;
    padding: 5px 10px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
}

.equipset-list-parts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.equipset-list-parts a {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 5px;
    border-radius: 5px;
    padding: 8px 5px;
    transition: background .15s ease;
}

.equipset-list-parts a:hover {
    background: #eff6ff;
}

.equipset-list-parts span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #f8fafc;
}

.equipset-list-parts img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
}

.equipset-list-parts em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-style: normal;
}

.equipset-list-bonuses {
    display: grid;
    gap: 6px;
    border-top: 1px solid #edf2f7;
    padding: 10px 12px 12px;
}

.equipset-list-bonuses div {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: #334155;
    font-size: 12px;
}

.equipset-list-bonuses b {
    color: #2563eb;
    font-weight: 600;
}

.equipset-list-bonuses span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .equipset-list-card,
.tw-dark .equipset-list-card {
    border-color: #303846;
    background: #171717;
}

.dark .equipset-list-card:hover,
.tw-dark .equipset-list-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 10px 28px rgba(14, 165, 233, .08);
}

.dark .equipset-list-head,
.tw-dark .equipset-list-head {
    border-bottom-color: #303846;
    background:
        radial-gradient(circle at 0 0, rgba(14, 165, 233, .16), transparent 36%),
        linear-gradient(180deg, #1d2229, #171b21);
}

.dark .equipset-list-head a,
.tw-dark .equipset-list-head a,
.dark .equipset-list-bonuses b,
.tw-dark .equipset-list-bonuses b {
    color: #7dd3fc;
}

.dark .equipset-list-head span,
.tw-dark .equipset-list-head span,
.dark .equipset-list-bonuses div,
.tw-dark .equipset-list-bonuses div {
    color: #94a3b8;
}

.dark .equipset-list-head strong,
.tw-dark .equipset-list-head strong {
    background: rgba(14, 165, 233, .15);
    color: #7dd3fc;
}

.dark .equipset-list-parts a:hover,
.tw-dark .equipset-list-parts a:hover,
.dark .equipset-list-parts span,
.tw-dark .equipset-list-parts span {
    background: rgba(255, 255, 255, .06);
}

.dark .equipset-list-bonuses,
.tw-dark .equipset-list-bonuses {
    border-top-color: #303846;
}

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

.monster-list-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 150px;
    gap: 12px;
    align-items: center;
    border: 1px solid #dbe7f6;
    border-radius: 5px;
    background: #fff;
    padding: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.monster-list-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 10px 28px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
}

.monster-list-icon {
    display: flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 65%, rgba(37, 99, 235, .14), transparent 48%),
        #f8fafc;
}

.monster-list-icon img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

.monster-list-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2563eb;
    font-size: 15px;
    font-weight: 600;
}

.monster-list-en {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
    font-size: 12px;
}

.monster-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.monster-list-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 5px;
    background: #f1f5f9;
    padding: 3px 7px;
    color: #475569;
    font-size: 12px;
}

.monster-list-stats {
    display: grid;
    gap: 7px;
}

.monster-list-stats span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    background: #f8fafc;
    padding: 7px 9px;
}

.monster-list-stats b {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.monster-list-stats em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.dark .monster-list-card,
.tw-dark .monster-list-card {
    border-color: #303846;
    background: #171717;
}

.dark .monster-list-card:hover,
.tw-dark .monster-list-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 10px 28px rgba(14, 165, 233, .08);
}

.dark .monster-list-icon,
.tw-dark .monster-list-icon,
.dark .monster-list-meta span,
.tw-dark .monster-list-meta span,
.dark .monster-list-stats span,
.tw-dark .monster-list-stats span {
    background: rgba(255, 255, 255, .06);
}

.dark .monster-list-name,
.tw-dark .monster-list-name {
    color: #7dd3fc;
}

.dark .monster-list-en,
.tw-dark .monster-list-en,
.dark .monster-list-meta span,
.tw-dark .monster-list-meta span,
.dark .monster-list-stats em,
.tw-dark .monster-list-stats em {
    color: #94a3b8;
}

.dark .monster-list-stats b,
.tw-dark .monster-list-stats b {
    color: #f8fafc;
}

@media (max-width: 1180px) {
    .monster-list-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .monster-list-card {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .monster-list-icon {
        width: 58px;
        height: 58px;
    }

    .monster-list-stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.map-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 130px;
    gap: 8px;
    align-items: center;
}

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

.map-list-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 88px;
    gap: 10px;
    align-items: center;
    border: 1px solid #dbe7f6;
    border-radius: 5px;
    background: #fff;
    padding: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.map-list-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 10px 28px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
}

.map-list-icon {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .12) 25%, transparent 25%, transparent 50%, rgba(37, 99, 235, .12) 50%, rgba(37, 99, 235, .12) 75%, transparent 75%, transparent),
        #f8fafc;
    background-size: 20px 20px;
    color: #2563eb;
    font-size: 30px;
}

.map-list-name {
    display: block;
    overflow: hidden;
    color: #2563eb;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-list-en {
    margin-top: 2px;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.map-list-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 5px;
    background: #f1f5f9;
    padding: 3px 7px;
    color: #475569;
    font-size: 12px;
}

.map-list-stats {
    display: grid;
    gap: 6px;
}

.map-list-stats span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    background: #f8fafc;
    padding: 7px 8px;
}

.map-list-stats b {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.map-list-stats em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.dark .map-list-card,
.tw-dark .map-list-card {
    border-color: #303846;
    background: #171717;
}

.dark .map-list-card:hover,
.tw-dark .map-list-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 10px 28px rgba(14, 165, 233, .08);
}

.dark .map-list-icon,
.tw-dark .map-list-icon,
.dark .map-list-meta span,
.tw-dark .map-list-meta span,
.dark .map-list-stats span,
.tw-dark .map-list-stats span {
    background-color: rgba(255, 255, 255, .06);
}

.dark .map-list-name,
.tw-dark .map-list-name {
    color: #7dd3fc;
}

.dark .map-list-en,
.tw-dark .map-list-en,
.dark .map-list-meta span,
.tw-dark .map-list-meta span,
.dark .map-list-stats em,
.tw-dark .map-list-stats em {
    color: #94a3b8;
}

.dark .map-list-stats b,
.tw-dark .map-list-stats b {
    color: #f8fafc;
}

@media (max-width: 1180px) {
    .map-list-grid {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 640px) {
    .map-list-card {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .map-list-icon {
        width: 58px;
        height: 58px;
    }

    .map-list-stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.life-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 130px;
    gap: 8px;
    align-items: center;
}

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

.life-list-card {
    overflow: hidden;
    border: 1px solid #dbe7f6;
    border-radius: 5px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.life-list-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 10px 28px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
}

.life-list-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.life-list-icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 55%, rgba(37, 99, 235, .16), transparent 44%),
        #f8fafc;
    color: #2563eb;
    font-size: 30px;
}

.life-list-main {
    min-width: 0;
}

.life-list-name {
    display: block;
    overflow: hidden;
    color: #2563eb;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-list-en {
    margin-top: 2px;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.life-list-meta span {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    background: #f1f5f9;
    padding: 3px 7px;
    color: #475569;
    font-size: 12px;
}

.life-list-action {
    display: inline-flex;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #e5edf7;
    border-radius: 5px;
    padding: 0 10px;
    color: #0f172a;
    font-size: 13px;
}

.life-list-action:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #2563eb;
}

.life-list-items {
    display: flex;
    min-height: 58px;
    flex-wrap: wrap;
    gap: 7px;
    border-top: 1px solid #edf2f7;
    background: #f8fbff;
    padding: 10px 12px;
}

.life-item-chip {
    display: inline-flex;
    min-width: 0;
    max-width: 230px;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5edf7;
    border-radius: 6px;
    background: #fff;
    padding: 4px 7px 4px 4px;
    color: #0f172a;
    font-size: 12px;
}

.life-item-chip:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.life-item-chip span {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #f8fafc;
}

.life-item-chip img {
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
}

.life-item-chip b {
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-item-chip em,
.life-item-more {
    flex: 0 0 auto;
    border-radius: 5px;
    background: #fff7ed;
    padding: 3px 6px;
    color: #c2410c;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.dark .life-list-card,
.tw-dark .life-list-card {
    border-color: #303846;
    background: #171717;
}

.dark .life-list-card:hover,
.tw-dark .life-list-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 10px 28px rgba(14, 165, 233, .08);
}

.dark .life-list-icon,
.tw-dark .life-list-icon,
.dark .life-list-meta span,
.tw-dark .life-list-meta span,
.dark .life-item-chip span,
.tw-dark .life-item-chip span {
    background: rgba(255, 255, 255, .06);
}

.dark .life-list-items,
.tw-dark .life-list-items {
    border-top-color: #303846;
    background: rgba(15, 23, 42, .42);
}

.dark .life-list-name,
.tw-dark .life-list-name {
    color: #7dd3fc;
}

.dark .life-list-en,
.tw-dark .life-list-en,
.dark .life-list-meta span,
.tw-dark .life-list-meta span {
    color: #94a3b8;
}

.dark .life-list-action,
.tw-dark .life-list-action,
.dark .life-item-chip,
.tw-dark .life-item-chip {
    border-color: #303846;
    background: #171717;
    color: #f8fafc;
}

.dark .life-list-action:hover,
.tw-dark .life-list-action:hover,
.dark .life-item-chip:hover,
.tw-dark .life-item-chip:hover {
    border-color: #38bdf8;
    background: #111827;
}

.dark .life-item-chip em,
.tw-dark .life-item-chip em,
.dark .life-item-more,
.tw-dark .life-item-more {
    background: rgba(154, 52, 18, .34);
    color: #fed7aa;
}

@media (max-width: 1180px) {
    .life-list-grid {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 640px) {
    .life-list-head {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .life-list-icon {
        width: 52px;
        height: 52px;
    }

    .life-list-action {
        grid-column: 1 / -1;
    }
}

.mount-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 130px;
    gap: 8px;
    align-items: center;
}

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

.mount-list-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 118px;
    gap: 12px;
    align-items: center;
    border: 1px solid #dbe7f6;
    border-radius: 5px;
    background: #fff;
    padding: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mount-list-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 10px 28px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
}

.mount-list-icon {
    display: flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 55%, rgba(37, 99, 235, .16), transparent 46%),
        #f8fafc;
    color: #2563eb;
    font-size: 34px;
}

.mount-list-icon img {
    max-width: 62px;
    max-height: 62px;
    object-fit: contain;
    image-rendering: pixelated;
}

.mount-list-main {
    min-width: 0;
}

.mount-list-name {
    display: block;
    overflow: hidden;
    color: #2563eb;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mount-list-en {
    margin-top: 2px;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mount-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.mount-list-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 5px;
    background: #f1f5f9;
    padding: 3px 7px;
    color: #475569;
    font-size: 12px;
}

.mount-list-stats {
    display: grid;
    gap: 7px;
}

.mount-list-stats span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    background: #f8fafc;
    padding: 7px 9px;
}

.mount-list-stats b {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.mount-list-stats em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.dark .mount-list-card,
.tw-dark .mount-list-card {
    border-color: #303846;
    background: #171717;
}

.dark .mount-list-card:hover,
.tw-dark .mount-list-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 10px 28px rgba(14, 165, 233, .08);
}

.dark .mount-list-icon,
.tw-dark .mount-list-icon,
.dark .mount-list-meta span,
.tw-dark .mount-list-meta span,
.dark .mount-list-stats span,
.tw-dark .mount-list-stats span {
    background: rgba(255, 255, 255, .06);
}

.dark .mount-list-name,
.tw-dark .mount-list-name {
    color: #7dd3fc;
}

.dark .mount-list-en,
.tw-dark .mount-list-en,
.dark .mount-list-meta span,
.tw-dark .mount-list-meta span,
.dark .mount-list-stats em,
.tw-dark .mount-list-stats em {
    color: #94a3b8;
}

.dark .mount-list-stats b,
.tw-dark .mount-list-stats b {
    color: #f8fafc;
}

@media (max-width: 1180px) {
    .mount-list-grid {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 640px) {
    .mount-list-card {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .mount-list-icon {
        width: 58px;
        height: 58px;
    }

    .mount-list-stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

.skill-list-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 104px;
    gap: 12px;
    align-items: center;
    border: 1px solid #dbe7f6;
    border-radius: 5px;
    background: #fff;
    padding: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.skill-list-card:hover {
    border-color: #a78bfa;
    box-shadow: 0 10px 28px rgba(124, 58, 237, .1);
    transform: translateY(-1px);
}

.skill-list-icon {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 65%, rgba(124, 58, 237, .14), transparent 48%),
        #f8fafc;
}

.skill-list-icon img {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
    image-rendering: pixelated;
}

.skill-list-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2563eb;
    font-size: 15px;
    font-weight: 600;
}

.skill-list-en {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
    font-size: 12px;
}

.skill-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.skill-list-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 5px;
    background: #f1f5f9;
    padding: 3px 7px;
    color: #475569;
    font-size: 12px;
}

.skill-list-stats {
    display: grid;
    gap: 7px;
}

.skill-list-stats span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    background: #f8fafc;
    padding: 7px 8px;
}

.skill-list-stats b {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.skill-list-stats em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.dark .skill-list-card,
.tw-dark .skill-list-card {
    border-color: #303846;
    background: #171717;
}

.dark .skill-list-card:hover,
.tw-dark .skill-list-card:hover {
    border-color: #a78bfa;
    box-shadow: 0 10px 28px rgba(124, 58, 237, .08);
}

.dark .skill-list-icon,
.tw-dark .skill-list-icon,
.dark .skill-list-meta span,
.tw-dark .skill-list-meta span,
.dark .skill-list-stats span,
.tw-dark .skill-list-stats span {
    background: rgba(255, 255, 255, .06);
}

.dark .skill-list-name,
.tw-dark .skill-list-name {
    color: #93c5fd;
}

.dark .skill-list-en,
.tw-dark .skill-list-en,
.dark .skill-list-meta span,
.tw-dark .skill-list-meta span,
.dark .skill-list-stats em,
.tw-dark .skill-list-stats em {
    color: #94a3b8;
}

.dark .skill-list-stats b,
.tw-dark .skill-list-stats b {
    color: #f8fafc;
}

@media (max-width: 1180px) {
    .skill-list-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .skill-list-card {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .skill-list-icon {
        width: 58px;
        height: 58px;
    }

    .skill-list-stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.box-list-card {
    overflow: hidden;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.box-list-card:hover {
    border-color: #8bb7ff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.box-list-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #e5edf7;
    background: linear-gradient(90deg, rgba(245, 158, 11, .12), rgba(59, 130, 246, .08) 48%, transparent);
}

.box-list-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(248, 250, 252, .9);
    color: #2563eb;
}

.box-list-icon img {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
}

.box-list-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: #0f5edb;
}

.box-list-meta {
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #52637a;
}

.box-list-badge {
    display: inline-flex;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
    border-radius: 999px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 600;
}

.box-list-badge.is-random {
    background: #fff7ed;
    color: #c2410c;
}

.box-list-badge.is-fixed {
    background: #ecfdf5;
    color: #047857;
}

.box-list-contents {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
}

.box-list-content {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    border: 1px solid #e5edf7;
    border-radius: 6px;
    background: #fff;
    padding: 5px 7px;
    color: #0f172a;
    font-size: 12px;
}

.box-list-content:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.box-list-content > span {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #f8fafc;
}

.box-list-content img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}

.box-list-content b {
    min-width: 0;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.box-list-content em,
.box-list-content strong,
.box-list-more {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border-radius: 5px;
    background: #fff7ed;
    padding: 0 6px;
    color: #c2410c;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.box-list-content strong {
    background: #eff6ff;
    color: #2563eb;
}

.box-list-more {
    background: #f1f5f9;
    color: #475569;
}

.dark .box-list-card,
.tw-dark .box-list-card {
    border-color: rgba(71, 85, 105, .72);
    background: #151515;
}

.dark .box-list-card:hover,
.tw-dark .box-list-card:hover {
    border-color: rgba(96, 165, 250, .82);
    box-shadow: none;
}

.dark .box-list-head,
.tw-dark .box-list-head {
    border-color: rgba(71, 85, 105, .65);
    background: linear-gradient(90deg, rgba(245, 158, 11, .16), rgba(37, 99, 235, .12) 48%, transparent);
}

.dark .box-list-icon,
.tw-dark .box-list-icon,
.dark .box-list-content > span,
.tw-dark .box-list-content > span {
    background: rgba(30, 41, 59, .72);
}

.dark .box-list-name,
.tw-dark .box-list-name {
    color: #93c5fd;
}

.dark .box-list-meta,
.tw-dark .box-list-meta {
    color: #94a3b8;
}

.dark .box-list-content,
.tw-dark .box-list-content {
    border-color: rgba(71, 85, 105, .72);
    background: #181818;
    color: #e5e7eb;
}

.dark .box-list-content:hover,
.tw-dark .box-list-content:hover {
    border-color: rgba(96, 165, 250, .72);
    background: #1f2937;
}

.dark .box-list-more,
.tw-dark .box-list-more {
    background: rgba(71, 85, 105, .42);
    color: #cbd5e1;
}

@media (max-width: 900px) {
    .box-list-grid {
        grid-template-columns: 1fr;
    }
}

.box-detail-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    background: #fff7ed;
    padding: 9px 10px;
    color: #c2410c;
    font-size: 13px;
}

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

.box-detail-grid.is-box-source {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.box-detail-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    background: #fff;
    padding: 9px;
    color: #0f172a;
    transition: border-color .16s ease, background .16s ease;
}

.box-detail-item:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.box-detail-item.is-current {
    border-color: #6ee7b7;
    background: #ecfdf5;
}

.box-detail-item-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f8fafc;
}

.box-detail-item-icon img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
}

.box-detail-item-main {
    min-width: 0;
}

.box-detail-item-main b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.box-detail-item-main em {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #52637a;
    font-size: 12px;
    font-style: normal;
}

.box-detail-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.box-detail-item-side strong,
.box-detail-item-side i {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border-radius: 5px;
    background: #fff7ed;
    padding: 0 7px;
    color: #c2410c;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.box-detail-item-side i {
    background: #eff6ff;
    color: #2563eb;
}

.dark .box-detail-note,
.tw-dark .box-detail-note {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .12);
    color: #fdba74;
}

.dark .box-detail-item,
.tw-dark .box-detail-item {
    border-color: rgba(71, 85, 105, .72);
    background: #181818;
    color: #e5e7eb;
}

.dark .box-detail-item:hover,
.tw-dark .box-detail-item:hover {
    border-color: rgba(96, 165, 250, .72);
    background: #1f2937;
}

.dark .box-detail-item.is-current,
.tw-dark .box-detail-item.is-current {
    border-color: rgba(52, 211, 153, .68);
    background: rgba(16, 185, 129, .12);
}

.dark .box-detail-item-icon,
.tw-dark .box-detail-item-icon {
    background: rgba(30, 41, 59, .72);
}

.dark .box-detail-item-main em,
.tw-dark .box-detail-item-main em {
    color: #94a3b8;
}

.item-relation-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 14px;
}

.item-relation-subhead span {
    font-weight: 600;
}

.item-relation-subhead em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.item-relation-skill-grid,
.item-location-grid,
.item-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.item-location-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    background: #fff;
    padding: 10px;
}

.item-location-card > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    font-size: 24px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .66), 0 4px 10px rgba(37, 99, 235, .16);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .85));
}

.item-location-card b,
.item-location-card em,
.item-location-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-location-card b {
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
}

.item-location-card em {
    margin-top: 3px;
    color: #475569;
    font-size: 12px;
    font-style: normal;
}

.item-location-card small {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.item-stat-pill {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    background: #f8fbff;
    padding: 9px 10px;
}

.item-stat-pill.is-soft {
    border-color: #e5e7eb;
    background: #fff;
}

.item-stat-pill span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
    font-size: 13px;
}

.item-stat-pill b {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.item-enhance-head b {
    font-size: 15px;
    font-weight: 400;
}

.item-enhance-head > span {
    font-size: 12px;
    font-weight: 400;
}

.item-enhance-summary-main span {
    font-size: 12px;
    font-weight: 400;
}

.item-enhance-summary-main b {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.item-enhance-level {
    font-size: 13px;
    font-weight: 400;
}

.item-enhance-value b {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.item-enhance-value em {
    font-size: 12px;
    font-weight: 400;
}

.item-enhance-meta span {
    font-size: 11px;
    font-weight: 400;
}

.item-enhance-meta small {
    font-size: 11px;
    font-weight: 400;
}

.item-enhance-ability-row > span {
    font-size: 13px;
    font-weight: 400;
}

.item-enhance-ability-row em,
.item-enhance-ability-row em b {
    font-size: 13px;
    font-weight: 400;
}

.item-awake-pill span,
.item-awake-pill b,
.item-awake-pill em {
    font-weight: 400;
}

.item-awake-pill b em {
    font-weight: 400 !important;
}

.item-upgrade-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.item-upgrade-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 48px;
    gap: 8px;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    background: #fff;
    padding: 7px;
}

.item-upgrade-row > span {
    display: inline-flex;
    min-height: 34px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
}

.item-upgrade-row small {
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
}

.item-upgrade-row div {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.item-upgrade-row em {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border-radius: 5px;
    background: #f8fafc;
    padding: 0 6px;
    color: #334155;
    font-size: 12px;
    font-style: normal;
}

.dark .item-relation-subhead,
.tw-dark .item-relation-subhead,
.dark .item-location-card b,
.tw-dark .item-location-card b,
.dark .item-stat-pill b,
.tw-dark .item-stat-pill b {
    color: #e5e7eb;
}

.dark .item-relation-subhead em,
.tw-dark .item-relation-subhead em,
.dark .item-location-card em,
.tw-dark .item-location-card em,
.dark .item-location-card small,
.tw-dark .item-location-card small,
.dark .item-stat-pill span,
.tw-dark .item-stat-pill span,
.dark .item-upgrade-row small,
.tw-dark .item-upgrade-row small {
    color: #94a3b8;
}

.dark .item-location-card,
.tw-dark .item-location-card,
.dark .item-stat-pill,
.tw-dark .item-stat-pill,
.dark .item-stat-pill.is-soft,
.tw-dark .item-stat-pill.is-soft,
.dark .item-upgrade-row,
.tw-dark .item-upgrade-row {
    border-color: rgba(71, 85, 105, .72);
    background: #181818;
}

.dark .item-location-card > span,
.tw-dark .item-location-card > span,
.dark .item-upgrade-row > span,
.tw-dark .item-upgrade-row > span {
    background: rgba(37, 99, 235, .18);
    color: #93c5fd;
}

.dark .item-location-card > span,
.tw-dark .item-location-card > span {
    border-color: rgba(96, 165, 250, .45);
    background: linear-gradient(135deg, rgba(37, 99, 235, .36), rgba(14, 165, 233, .22));
    color: #bfdbfe;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 14px rgba(0, 0, 0, .28);
    filter: none;
}

.dark .item-upgrade-row em,
.tw-dark .item-upgrade-row em {
    background: rgba(30, 41, 59, .72);
    color: #cbd5e1;
}

@media (max-width: 1180px) {
    .box-detail-grid,
    .box-detail-grid.is-box-source {
        grid-template-columns: 1fr;
    }

    .item-relation-skill-grid,
    .item-location-grid,
    .item-stat-grid {
        grid-template-columns: 1fr;
    }
}

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

.dark .monster-detail-card,
.tw-dark .monster-detail-card {
    border-color: #2f3743;
    background: #151515;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015);
}

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

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

.skill-detail-data-grid {
    margin-top: 0;
}

.skill-detail-inline-desc {
    margin-top: 10px;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

.skill-detail-inline-desc > span {
    display: block;
    margin-bottom: 5px;
    color: #475569;
    font-size: 13px;
}

.skill-detail-inline-desc > div {
    color: #334155;
    font-size: 13px;
    line-height: 1.65;
}

.skill-detail-inline-desc p {
    margin: 0;
}

.item-detail-inline-desc {
    border-top: 0;
    padding-top: 0;
}

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

.skill-level-calcbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    background: #f8fafc;
    padding: 9px;
}

.skill-level-calcbar label {
    display: flex;
    min-width: min(100%, 360px);
    flex: 1 1 260px;
    align-items: center;
    gap: 8px;
}

.skill-level-calcbar span {
    flex: 0 0 auto;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
}

.skill-level-calcbar input {
    width: 100%;
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    padding: 0 10px;
    color: #0f172a;
    font-size: 13px;
}

.skill-level-calcbar button {
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    padding: 0 12px;
    color: #2563eb;
    font-size: 13px;
}

.skill-level-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 62px;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    background: #fff;
    padding: 8px;
}

.skill-level-index {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
}

.skill-level-card b,
.skill-level-card em,
.skill-level-card small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.skill-level-card b {
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
}

.skill-level-card em {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.skill-level-scope {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 6px;
    border-radius: 5px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
}

.skill-level-scope.is-pve {
    background: #e0f2fe;
    color: #0369a1;
}

.skill-level-scope.is-pvp {
    background: #f3e8ff;
    color: #7e22ce;
}

.skill-level-vitality {
    margin-top: 5px;
    color: #475569;
    font-size: 12px;
}

.skill-level-calculated {
    margin-top: 5px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 600;
}

.dark .skill-level-calcbar,
.tw-dark .skill-level-calcbar {
    border-color: rgba(71, 85, 105, .72);
    background: #181818;
}

.dark .skill-level-calcbar span,
.tw-dark .skill-level-calcbar span {
    color: #cbd5e1;
}

.dark .skill-level-calcbar input,
.tw-dark .skill-level-calcbar input,
.dark .skill-level-calcbar button,
.tw-dark .skill-level-calcbar button {
    border-color: #334155;
    background: #111827;
    color: #e5e7eb;
}

.dark .skill-level-card,
.tw-dark .skill-level-card {
    border-color: rgba(71, 85, 105, .72);
    background: #181818;
}

.dark .skill-level-index,
.tw-dark .skill-level-index {
    background: rgba(37, 99, 235, .18);
    color: #93c5fd;
}

.dark .skill-level-card b,
.tw-dark .skill-level-card b {
    color: #e5e7eb;
}

.dark .skill-level-card em,
.tw-dark .skill-level-card em {
    color: #94a3b8;
}

.dark .skill-level-scope.is-pve,
.tw-dark .skill-level-scope.is-pve {
    background: rgba(14, 165, 233, .18);
    color: #bae6fd;
}

.dark .skill-level-scope.is-pvp,
.tw-dark .skill-level-scope.is-pvp {
    background: rgba(168, 85, 247, .18);
    color: #e9d5ff;
}

.dark .skill-level-vitality,
.tw-dark .skill-level-vitality {
    color: #cbd5e1;
}

.dark .skill-level-calculated,
.tw-dark .skill-level-calculated {
    color: #5eead4;
}

.skill-class-tree-grid {
    display: grid;
    grid-template-columns: repeat(var(--skill-class-tree-cols), minmax(92px, 1fr));
    grid-template-rows: repeat(var(--skill-class-tree-rows), auto);
    gap: 18px 28px;
    overflow-x: auto;
    padding: 4px 2px 8px;
}

.skill-class-tree-app {
    display: block;
    min-width: 0;
}

.skill-class-tree-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: #475569;
    font-size: 12px;
}

.skill-class-tree-toolbar button {
    height: 28px;
    flex: 0 0 auto;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    padding: 0 10px;
    color: #0057ff;
    font-size: 12px;
    font-weight: 600;
}

.skill-class-tree-toolbar button:hover {
    border-color: #93c5fd;
    background: #dbeafe;
}

.skill-class-tree-viewport {
    overflow: auto;
    max-width: 100%;
    border: 1px solid #dbe7f5;
    border-radius: 7px;
    background:
        linear-gradient(rgba(148, 163, 184, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .09) 1px, transparent 1px),
        #fff;
    background-size: 24px 24px;
}

.skill-class-tree-stage {
    position: relative;
    min-width: 100%;
}

.skill-class-tree-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.skill-class-tree-path {
    fill: none;
    stroke: #94a3b8;
    stroke-width: 2.5;
    stroke-linecap: square;
    stroke-linejoin: round;
}

.skill-class-tree-path.is-color-0 {
    stroke: #2563eb;
}

.skill-class-tree-path.is-color-1 {
    stroke: #0f766e;
}

.skill-class-tree-path.is-color-2 {
    stroke: #c2410c;
}

.skill-class-tree-path.is-color-3 {
    stroke: #7c3aed;
}

.skill-class-tree-path.is-color-4 {
    stroke: #be123c;
}

.skill-class-tree-path.is-color-5 {
    stroke: #15803d;
}

.skill-class-tree-path.is-color-6 {
    stroke: #a16207;
}

.skill-class-tree-path.is-color-7 {
    stroke: #0369a1;
}

.skill-class-tree-path.is-focused {
    filter: drop-shadow(0 0 2px rgba(37, 99, 235, .42));
    stroke-width: 3;
}

.skill-class-tree-lines marker path {
    fill: context-stroke;
}

.skill-class-tree-node-vue {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5f2;
    border-radius: 7px;
    background: rgba(255, 255, 255, .96);
    padding: 8px;
    text-align: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.skill-class-tree-node-vue:hover {
    border-color: #93c5fd;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
}

.skill-class-tree-node-vue.is-current {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .2), 0 12px 24px rgba(37, 99, 235, .12);
}

.skill-class-tree-node-vue > i {
    position: absolute;
    top: 6px;
    right: 6px;
    border-radius: 999px;
    background: #2563eb;
    padding: 2px 6px;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    line-height: 1.25;
}

.skill-class-tree-link {
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 104px;
    align-self: stretch;
    justify-self: stretch;
    overflow: visible;
    pointer-events: none;
}

.skill-class-tree-link path {
    fill: none;
    stroke: #94a3b8;
    stroke-width: 2;
}

.skill-class-tree-link marker path {
    fill: #94a3b8;
    stroke: none;
}

.skill-class-tree-node {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 92px;
    min-height: 104px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    background: #fff;
    padding: 9px 7px;
    text-align: center;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.skill-class-tree-node:hover {
    border-color: #93c5fd;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .08);
    transform: translateY(-1px);
}

.skill-class-tree-node.is-current {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.skill-class-tree-node.has-next::after {
    position: absolute;
    top: 39px;
    right: -25px;
    color: #94a3b8;
    content: "→";
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.skill-class-tree-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    background: #f8fafc;
}

.skill-class-tree-icon img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
}

.skill-class-tree-name {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    margin-top: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.skill-class-tree-meta {
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
}

.skill-class-tree-node > i {
    position: absolute;
    top: 6px;
    right: 6px;
    border-radius: 999px;
    background: #2563eb;
    padding: 2px 6px;
    color: #fff;
    font-size: 10px;
    font-style: normal;
}

.dark .skill-class-tree-node,
.tw-dark .skill-class-tree-node {
    border-color: rgba(71, 85, 105, .72);
    background: #181818;
}

.dark .skill-class-tree-node.is-current,
.tw-dark .skill-class-tree-node.is-current {
    border-color: #60a5fa;
    background: rgba(37, 99, 235, .18);
}

.dark .skill-class-tree-toolbar,
.tw-dark .skill-class-tree-toolbar {
    color: #94a3b8;
}

.dark .skill-class-tree-toolbar button,
.tw-dark .skill-class-tree-toolbar button {
    border-color: rgba(96, 165, 250, .5);
    background: rgba(37, 99, 235, .18);
    color: #93c5fd;
}

.dark .skill-class-tree-viewport,
.tw-dark .skill-class-tree-viewport {
    border-color: rgba(148, 163, 184, .22);
    background:
        linear-gradient(rgba(148, 163, 184, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px),
        #151515;
    background-size: 24px 24px;
}

.dark .skill-class-tree-node-vue,
.tw-dark .skill-class-tree-node-vue {
    border-color: rgba(71, 85, 105, .72);
    background: rgba(24, 24, 24, .96);
}

.dark .skill-class-tree-node-vue.is-current,
.tw-dark .skill-class-tree-node-vue.is-current {
    border-color: #60a5fa;
    background: rgba(37, 99, 235, .18);
}

.dark .skill-class-tree-path,
.tw-dark .skill-class-tree-path {
    opacity: .92;
}

.dark .skill-class-tree-path.is-focused,
.tw-dark .skill-class-tree-path.is-focused {
    opacity: 1;
}

.dark .skill-class-tree-lines marker path,
.tw-dark .skill-class-tree-lines marker path {
    fill: context-stroke;
}

.dark .skill-class-tree-link path,
.tw-dark .skill-class-tree-link path {
    stroke: #64748b;
}

.dark .skill-class-tree-link marker path,
.tw-dark .skill-class-tree-link marker path {
    fill: #64748b;
}

.dark .skill-class-tree-icon,
.tw-dark .skill-class-tree-icon {
    border-color: rgba(71, 85, 105, .72);
    background: rgba(255, 255, 255, .06);
}

.dark .skill-class-tree-name,
.tw-dark .skill-class-tree-name {
    color: #93c5fd;
}

.dark .skill-class-tree-meta,
.tw-dark .skill-class-tree-meta,
.dark .skill-class-tree-node.has-next::after,
.tw-dark .skill-class-tree-node.has-next::after {
    color: #94a3b8;
}

.skill-tree-grid {
    display: grid;
    grid-template-columns: repeat(var(--skill-tree-cols), minmax(170px, 1fr));
    grid-template-rows: repeat(var(--skill-tree-rows), auto);
    gap: 10px;
}

.skill-tree-node {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 68px;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    background: #fff;
    padding: 10px;
    color: #0f172a;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.skill-tree-node:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
    transform: translateY(-1px);
}

.skill-tree-node.is-current {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.skill-tree-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f8fafc;
}

.skill-tree-icon img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
}

.skill-tree-text {
    min-width: 0;
}

.skill-tree-text b,
.skill-tree-text em,
.skill-tree-text small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-tree-text b {
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
}

.skill-tree-text em {
    margin-top: 3px;
    color: #475569;
    font-size: 12px;
    font-style: normal;
}

.skill-tree-text small {
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
}

.skill-tree-node > i {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    border-radius: 999px;
    background: #2563eb;
    padding: 0 7px;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.dark .skill-tree-node,
.tw-dark .skill-tree-node {
    border-color: rgba(71, 85, 105, .72);
    background: #181818;
}

.dark .skill-tree-node:hover,
.tw-dark .skill-tree-node:hover {
    border-color: rgba(96, 165, 250, .72);
    background: #1f2937;
}

.dark .skill-tree-node.is-current,
.tw-dark .skill-tree-node.is-current {
    border-color: #60a5fa;
    background: rgba(37, 99, 235, .18);
}

.dark .skill-tree-icon,
.tw-dark .skill-tree-icon {
    background: rgba(255, 255, 255, .06);
}

.dark .skill-tree-text b,
.tw-dark .skill-tree-text b {
    color: #93c5fd;
}

.dark .skill-tree-text em,
.tw-dark .skill-tree-text em,
.dark .skill-tree-text small,
.tw-dark .skill-tree-text small {
    color: #94a3b8;
}

@media (max-width: 640px) {
    .skill-level-grid {
        grid-template-columns: 1fr;
    }

    .skill-tree-grid {
        grid-template-columns: 1fr;
    }

    .skill-tree-node {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .skill-class-tree-grid {
        grid-template-columns: 1fr;
        overflow-x: visible;
    }

    .skill-class-tree-node {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .skill-class-tree-node.has-next::after {
        top: auto;
        right: auto;
        bottom: -18px;
        content: "↓";
    }
}

.monster-detail-hero {
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.monster-detail-hero img {
    max-width: min(100%, 260px);
    max-height: 230px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .38));
}

.monster-detail-title {
    border-bottom: 1px solid #dbe7f5;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .055) 25%, transparent 25%, transparent 50%, rgba(37, 99, 235, .055) 50%, rgba(37, 99, 235, .055) 75%, transparent 75%, transparent);
    background-size: 28px 28px;
    padding: 16px;
    text-align: center;
}

.dark .monster-detail-title,
.tw-dark .monster-detail-title {
    border-bottom-color: rgba(255, 255, 255, .055);
    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;
}

.monster-detail-title div {
    color: #2563eb;
    font-size: 12px;
}

.monster-detail-title h1 {
    margin-top: 6px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 600;
}

.monster-detail-title p {
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
}

.monster-detail-body {
    padding: 12px;
}

.tw-dark .monster-detail-title div,
.dark .monster-detail-title div {
    color: #dbeafe;
}

.tw-dark .monster-detail-title h1,
.dark .monster-detail-title h1 {
    color: #f8fafc;
}

.tw-dark .monster-detail-title p,
.dark .monster-detail-title p {
    color: #94a3b8;
}

.tw-dark .skill-detail-inline-desc,
.dark .skill-detail-inline-desc {
    border-top-color: rgba(255, 255, 255, .08);
}

.tw-dark .skill-detail-inline-desc > div,
.dark .skill-detail-inline-desc > div {
    color: #e5e7eb;
}

.monster-resist-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.monster-resist-grid div {
    border-radius: 5px;
    background: #f8fafc;
    padding: 9px;
    text-align: center;
}

.monster-resist-grid span {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.monster-resist-grid b {
    display: block;
    margin-top: 3px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.monster-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.monster-stat-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 9px;
    align-items: center;
    min-height: 70px;
    border: 1px solid #e5edf7;
    border-radius: 6px;
    background: #fff;
    padding: 10px;
}

.monster-stat-card > span {
    display: inline-flex;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 20px;
}

.monster-stat-card em {
    min-width: 0;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.monster-stat-card b {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monster-stat-card.is-red > span {
    background: #dc2626;
    color: #fff;
}

.monster-stat-card.is-cyan > span {
    background: #0891b2;
    color: #fff;
}

.monster-stat-card.is-orange > span {
    background: #ea580c;
    color: #fff;
}

.monster-stat-card.is-slate > span {
    background: #475569;
    color: #fff;
}

.monster-stat-card.is-purple > span {
    background: #7c3aed;
    color: #fff;
}

.monster-stat-card.is-amber > span {
    background: #d97706;
    color: #fff;
}

.monster-detail-data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.monster-detail-data-grid div {
    min-width: 0;
    border: 1px solid #e5edf7;
    border-radius: 5px;
    background: #f8fafc;
    padding: 9px 10px;
}

.monster-detail-data-grid span {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.monster-detail-data-grid b {
    display: block;
    min-width: 0;
    overflow: hidden;
    margin-top: 3px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-detail-data-grid .skill-detail-value-lines {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.monster-detail-extra {
    margin-top: 12px;
    border-top: 1px solid #edf2f7;
    padding-top: 10px;
}

.monster-detail-extra-title {
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

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

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

.monster-quest-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
    min-height: 104px;
    border: 1px solid #e5edf7;
    border-radius: 6px;
    background:
        linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    padding: 12px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.monster-quest-card:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
}

.monster-quest-text {
    min-width: 0;
}

.monster-quest-title-link {
    display: block;
    overflow: hidden;
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monster-quest-title-link:hover {
    color: #1d4ed8;
}

.monster-quest-text em {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monster-quest-rewards {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 7px;
    min-width: 0;
    margin-top: 2px;
    border-top: 1px solid #edf2f7;
    background: #f8fbff;
    padding: 9px 10px 0;
    text-align: left;
}

.monster-quest-reward-row {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.monster-quest-reward-title {
    display: inline-flex;
    height: 22px;
    align-items: center;
    border-radius: 999px;
    background: #e0edff;
    padding: 0 8px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 500;
}

.monster-quest-reward-pill,
.monster-quest-reward-more,
.monster-quest-reward-empty {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 4px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #dbeafe;
    padding: 3px 8px;
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
}

.monster-quest-reward-pill i {
    font-size: 14px;
}

.monster-quest-reward-item {
    display: inline-flex;
    min-width: 0;
    max-width: 210px;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5edf7;
    border-radius: 6px;
    background: #fff;
    padding: 3px 7px 3px 4px;
    color: #0f172a;
    font-size: 12px;
}

.monster-quest-reward-item:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.monster-quest-reward-item-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #f8fafc;
}

.monster-quest-reward-item-icon img {
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
}

.monster-quest-reward-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monster-quest-reward-item b {
    flex: 0 0 auto;
    border-radius: 4px;
    background: #fff7ed;
    padding: 2px 5px;
    color: #c2410c;
    font-size: 11px;
    font-weight: 600;
}

.monster-quest-reward-more {
    background: #fff;
    border-color: #e2e8f0;
    color: #475569;
}

.monster-quest-reward-empty {
    background: #fff;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.monster-drop-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 58px;
    border: 1px solid #e5edf7;
    border-radius: 5px;
    background: #fff;
    padding: 8px 10px;
    transition: border-color .15s ease, background .15s ease;
}

.monster-drop-item:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.monster-drop-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #f8fafc;
}

.monster-drop-icon img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
}

.monster-drop-text {
    min-width: 0;
}

.monster-drop-text b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
}

.monster-drop-text em {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.monster-drop-item strong {
    border-radius: 5px;
    background: #fff7ed;
    border: 1px solid transparent;
    padding: 4px 7px;
    color: #c2410c;
    font-size: 12px;
    font-weight: 600;
}

.monster-attack-grid,
.monster-spawn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.monster-attack-grid div,
.monster-spawn-grid div {
    border: 1px solid #e5edf7;
    border-radius: 5px;
    background: #fff;
    padding: 10px;
}

.monster-attack-grid b,
.monster-spawn-grid b {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.monster-attack-grid span,
.monster-spawn-grid span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.dark .monster-resist-grid div,
.tw-dark .monster-resist-grid div,
.dark .monster-stat-card,
.tw-dark .monster-stat-card,
.dark .monster-detail-data-grid div,
.tw-dark .monster-detail-data-grid div,
.dark .monster-quest-card,
.tw-dark .monster-quest-card,
.dark .monster-drop-item,
.tw-dark .monster-drop-item,
.dark .monster-attack-grid div,
.tw-dark .monster-attack-grid div,
.dark .monster-spawn-grid div,
.tw-dark .monster-spawn-grid div {
    border-color: #303846;
    background: #171717;
}

.dark .monster-quest-card:hover,
.tw-dark .monster-quest-card:hover {
    border-color: #38bdf8;
    background: #111827;
    box-shadow: 0 10px 24px rgba(14, 165, 233, .08);
}

.dark .monster-quest-rewards,
.tw-dark .monster-quest-rewards {
    border-top-color: #303846;
    background: rgba(15, 23, 42, .42);
}

.dark .monster-stat-card > span,
.tw-dark .monster-stat-card > span {
    background: #2563eb;
    color: #fff;
}

.dark .monster-stat-card.is-red > span,
.tw-dark .monster-stat-card.is-red > span {
    background: #dc2626;
    color: #fff;
}

.dark .monster-stat-card.is-cyan > span,
.tw-dark .monster-stat-card.is-cyan > span {
    background: #0891b2;
    color: #fff;
}

.dark .monster-stat-card.is-orange > span,
.tw-dark .monster-stat-card.is-orange > span {
    background: #ea580c;
    color: #fff;
}

.dark .monster-stat-card.is-slate > span,
.tw-dark .monster-stat-card.is-slate > span {
    background: #475569;
    color: #fff;
}

.dark .monster-stat-card.is-purple > span,
.tw-dark .monster-stat-card.is-purple > span {
    background: #7c3aed;
    color: #fff;
}

.dark .monster-stat-card.is-amber > span,
.tw-dark .monster-stat-card.is-amber > span {
    background: #d97706;
    color: #fff;
}

.dark .monster-drop-icon,
.tw-dark .monster-drop-icon {
    background: rgba(255, 255, 255, .06);
}

.dark .monster-quest-reward-pill,
.tw-dark .monster-quest-reward-pill {
    border-color: rgba(96, 165, 250, .22);
    background: rgba(37, 99, 235, .18);
    color: #bfdbfe;
}

.dark .monster-quest-reward-item,
.tw-dark .monster-quest-reward-item {
    border-color: #303846;
    background: #171717;
    color: #f8fafc;
}

.dark .monster-quest-reward-item:hover,
.tw-dark .monster-quest-reward-item:hover {
    border-color: #38bdf8;
    background: #111827;
}

.dark .monster-quest-reward-item-icon,
.tw-dark .monster-quest-reward-item-icon {
    background: rgba(255, 255, 255, .06);
}

.dark .monster-quest-reward-item b,
.tw-dark .monster-quest-reward-item b {
    background: rgba(154, 52, 18, .34);
    color: #fed7aa;
}

.dark .monster-quest-reward-more,
.tw-dark .monster-quest-reward-more {
    background: rgba(148, 163, 184, .14);
    color: #cbd5e1;
}

.dark .monster-quest-reward-empty,
.tw-dark .monster-quest-reward-empty {
    border-color: rgba(148, 163, 184, .16);
    background: rgba(255, 255, 255, .06);
    color: #94a3b8;
}

.dark .monster-quest-reward-title,
.tw-dark .monster-quest-reward-title {
    background: rgba(59, 130, 246, .22);
    color: #bfdbfe;
}

.dark .monster-drop-item strong,
.tw-dark .monster-drop-item strong {
    border-color: rgba(251, 146, 60, .26);
    background: rgba(154, 52, 18, .34);
    color: #fed7aa;
}

.dark .monster-drop-item:hover,
.tw-dark .monster-drop-item:hover {
    border-color: #38bdf8;
    background: #111827;
}

.dark .monster-resist-grid span,
.tw-dark .monster-resist-grid span,
.dark .monster-stat-card em,
.tw-dark .monster-stat-card em,
.dark .monster-detail-data-grid span,
.tw-dark .monster-detail-data-grid span,
.dark .monster-detail-extra-title,
.tw-dark .monster-detail-extra-title,
.dark .monster-quest-text em,
.tw-dark .monster-quest-text em,
.dark .monster-quest-reward-title,
.tw-dark .monster-quest-reward-title,
.dark .monster-drop-text em,
.tw-dark .monster-drop-text em,
.dark .monster-attack-grid span,
.tw-dark .monster-attack-grid span,
.dark .monster-spawn-grid span,
.tw-dark .monster-spawn-grid span {
    color: #94a3b8;
}

.dark .monster-resist-grid b,
.tw-dark .monster-resist-grid b,
.dark .monster-stat-card b,
.tw-dark .monster-stat-card b,
.dark .monster-detail-data-grid b,
.tw-dark .monster-detail-data-grid b,
.dark .monster-quest-title-link,
.tw-dark .monster-quest-title-link,
.dark .monster-attack-grid b,
.tw-dark .monster-attack-grid b,
.dark .monster-spawn-grid b,
.tw-dark .monster-spawn-grid b {
    color: #f8fafc;
}

.dark .monster-quest-title-link:hover,
.tw-dark .monster-quest-title-link:hover {
    color: #7dd3fc;
}

.dark .monster-detail-extra,
.tw-dark .monster-detail-extra {
    border-top-color: #303846;
}

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

.map-detail-title {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    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: 16px;
    text-align: center;
}

.map-detail-title div {
    color: #dbeafe;
    font-size: 12px;
}

.map-detail-title h1 {
    margin-top: 6px;
    color: #f8fafc;
    font-size: 22px;
    font-weight: 600;
}

.map-detail-title p {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 13px;
}

.map-detail-body {
    padding: 12px;
}

.map-detail-hero {
    display: flex;
    min-height: 170px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 55%, rgba(37, 99, 235, .18), transparent 42%),
        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: auto, 28px 28px;
    color: #bfdbfe;
    font-size: 86px;
}

.map-block-title {
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.map-mini-grid,
.map-npc-grid,
.map-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.map-mini-card,
.map-npc-card,
.map-related-item {
    min-width: 0;
    border: 1px solid #e5edf7;
    border-radius: 6px;
    background: #fff;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.map-mini-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 9px;
    align-items: center;
    min-height: 62px;
    padding: 10px;
}

.map-mini-card > span {
    display: inline-flex;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 19px;
}

.map-mini-card b,
.map-npc-text b,
.map-related-text b {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-mini-card em,
.map-npc-text em,
.map-related-text em,
.map-related-text small {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-mini-card.is-link:hover,
.map-npc-card:hover,
.map-related-item:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
}

.map-npc-card,
.map-related-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 68px;
    padding: 10px;
}

.map-npc-icon,
.map-related-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f8fafc;
    color: #2563eb;
    font-size: 24px;
}

.map-npc-icon img,
.map-related-icon img {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
    image-rendering: pixelated;
}

.map-npc-text,
.map-related-text {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.map-npc-text small {
    color: #64748b;
    font-size: 12px;
}

.map-related-text small {
    display: block;
}

.dark .map-detail-card,
.tw-dark .map-detail-card {
    border-color: rgba(148, 163, 184, .26);
    background: #151515;
    box-shadow: none;
}

.dark .map-detail-title,
.tw-dark .map-detail-title {
    border-bottom-color: rgba(255, 255, 255, .055);
}

.dark .map-detail-hero,
.tw-dark .map-detail-hero {
    background:
        radial-gradient(circle at 50% 55%, rgba(14, 165, 233, .12), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, .045) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .045) 50%, rgba(255, 255, 255, .045) 75%, transparent 75%, transparent);
    background-size: auto, 28px 28px;
}

.dark .map-block-title,
.tw-dark .map-block-title {
    color: #f8fafc;
}

.dark .map-mini-card,
.tw-dark .map-mini-card,
.dark .map-npc-card,
.tw-dark .map-npc-card,
.dark .map-related-item,
.tw-dark .map-related-item {
    border-color: #303846;
    background: #171717;
}

.dark .map-mini-card.is-link:hover,
.tw-dark .map-mini-card.is-link:hover,
.dark .map-npc-card:hover,
.tw-dark .map-npc-card:hover,
.dark .map-related-item:hover,
.tw-dark .map-related-item:hover {
    border-color: #38bdf8;
    background: #111827;
    box-shadow: 0 10px 24px rgba(14, 165, 233, .08);
}

.dark .map-npc-icon,
.tw-dark .map-npc-icon,
.dark .map-related-icon,
.tw-dark .map-related-icon {
    background: rgba(255, 255, 255, .06);
}

.dark .map-mini-card b,
.tw-dark .map-mini-card b,
.dark .map-npc-text b,
.tw-dark .map-npc-text b,
.dark .map-related-text b,
.tw-dark .map-related-text b {
    color: #f8fafc;
}

.dark .map-mini-card em,
.tw-dark .map-mini-card em,
.dark .map-npc-text small,
.tw-dark .map-npc-text small,
.dark .map-npc-text em,
.tw-dark .map-npc-text em,
.dark .map-related-text em,
.tw-dark .map-related-text em,
.dark .map-related-text small,
.tw-dark .map-related-text small {
    color: #94a3b8;
}

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

.life-detail-title {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    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: 16px;
    text-align: center;
}

.life-detail-title div {
    color: #dbeafe;
    font-size: 12px;
}

.life-detail-title h1 {
    margin-top: 6px;
    color: #f8fafc;
    font-size: 22px;
    font-weight: 600;
}

.life-detail-title p {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 13px;
}

.life-detail-body {
    padding: 12px;
}

.life-detail-hero {
    display: flex;
    min-height: 170px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 55%, rgba(37, 99, 235, .18), transparent 42%),
        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: auto, 28px 28px;
    color: #bfdbfe;
    font-size: 86px;
}

.life-output-grid,
.life-relation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.life-output-card,
.life-relation-card {
    display: grid;
    min-width: 0;
    align-items: center;
    border: 1px solid #e5edf7;
    border-radius: 6px;
    background: #fff;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.life-output-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 66px;
    padding: 10px;
}

.life-relation-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
    min-height: 70px;
    padding: 10px;
}

.life-output-card:hover,
.life-relation-card:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
}

.life-output-icon,
.life-relation-card > span {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f8fafc;
    color: #2563eb;
    font-size: 24px;
}

.life-output-icon img,
.life-relation-card img {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
    image-rendering: pixelated;
}

.life-output-text,
.life-relation-card {
    min-width: 0;
}

.life-output-text b,
.life-relation-card b {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-output-text em,
.life-relation-card em {
    display: block;
    min-width: 0;
    overflow: hidden;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-output-card strong {
    border-radius: 5px;
    background: #fff7ed;
    padding: 4px 7px;
    color: #c2410c;
    font-size: 12px;
    font-weight: 600;
}

.dark .life-detail-card,
.tw-dark .life-detail-card {
    border-color: rgba(148, 163, 184, .26);
    background: #151515;
    box-shadow: none;
}

.dark .life-detail-title,
.tw-dark .life-detail-title {
    border-bottom-color: rgba(255, 255, 255, .055);
}

.dark .life-detail-hero,
.tw-dark .life-detail-hero {
    background:
        radial-gradient(circle at 50% 55%, rgba(14, 165, 233, .12), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, .045) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .045) 50%, rgba(255, 255, 255, .045) 75%, transparent 75%, transparent);
    background-size: auto, 28px 28px;
}

.dark .life-output-card,
.tw-dark .life-output-card,
.dark .life-relation-card,
.tw-dark .life-relation-card {
    border-color: #303846;
    background: #171717;
}

.dark .life-output-card:hover,
.tw-dark .life-output-card:hover,
.dark .life-relation-card:hover,
.tw-dark .life-relation-card:hover {
    border-color: #38bdf8;
    background: #111827;
    box-shadow: 0 10px 24px rgba(14, 165, 233, .08);
}

.dark .life-output-icon,
.tw-dark .life-output-icon,
.dark .life-relation-card > span,
.tw-dark .life-relation-card > span {
    background: rgba(255, 255, 255, .06);
}

.dark .life-output-text b,
.tw-dark .life-output-text b,
.dark .life-relation-card b,
.tw-dark .life-relation-card b {
    color: #f8fafc;
}

.dark .life-output-text em,
.tw-dark .life-output-text em,
.dark .life-relation-card em,
.tw-dark .life-relation-card em {
    color: #94a3b8;
}

.dark .life-output-card strong,
.tw-dark .life-output-card strong {
    background: rgba(154, 52, 18, .34);
    color: #fed7aa;
}

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

.mount-detail-title {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    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: 16px;
    text-align: center;
}

.mount-detail-title div {
    color: #dbeafe;
    font-size: 12px;
}

.mount-detail-title h1 {
    margin-top: 6px;
    color: #f8fafc;
    font-size: 22px;
    font-weight: 600;
}

.mount-detail-title p {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 13px;
}

.mount-detail-body {
    padding: 12px;
}

.mount-detail-hero {
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 58%, rgba(37, 99, 235, .18), transparent 44%),
        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: auto, 28px 28px;
    color: #bfdbfe;
    font-size: 86px;
}

.mount-detail-hero img {
    max-width: min(100%, 260px);
    max-height: 230px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .38));
}

.mount-desc-box {
    border: 1px solid #e5edf7;
    border-radius: 6px;
    background: #fff;
    padding: 13px 14px;
    color: #334155;
    font-size: 14px;
    line-height: 1.7;
}

.dark .mount-detail-card,
.tw-dark .mount-detail-card {
    border-color: rgba(148, 163, 184, .26);
    background: #151515;
    box-shadow: none;
}

.dark .mount-detail-title,
.tw-dark .mount-detail-title {
    border-bottom-color: rgba(255, 255, 255, .055);
}

.dark .mount-detail-hero,
.tw-dark .mount-detail-hero {
    background:
        radial-gradient(circle at 50% 58%, rgba(14, 165, 233, .12), transparent 44%),
        linear-gradient(135deg, rgba(255, 255, 255, .045) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .045) 50%, rgba(255, 255, 255, .045) 75%, transparent 75%, transparent);
    background-size: auto, 28px 28px;
}

.dark .mount-desc-box,
.tw-dark .mount-desc-box {
    border-color: #303846;
    background: #171717;
    color: #cbd5e1;
}

@media (max-width: 820px) {
    .monster-drop-grid,
    .monster-attack-grid,
    .monster-spawn-grid,
    .map-mini-grid,
    .map-npc-grid,
    .map-related-grid,
    .life-output-grid,
    .life-relation-grid {
        grid-template-columns: 1fr;
    }

    .monster-stat-grid,
    .monster-detail-data-grid,
    .monster-resist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .monster-quest-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .booklet-detail-card-title--media {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .booklet-detail-title-meta {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
    }

    .monster-stat-grid,
    .monster-detail-data-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .equipset-list-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .equipset-list-parts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.npc-list-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) minmax(210px, 280px);
    gap: 14px;
    align-items: center;
    border: 1px solid #dbe7f5;
    border-radius: 6px;
    background: #fff;
    padding: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.npc-list-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
}

.npc-list-icon {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    background: #f8fbff;
    color: #2563eb;
}

.npc-list-icon img {
    max-width: 58px;
    max-height: 58px;
    object-fit: contain;
    image-rendering: pixelated;
}

.npc-list-icon span {
    font-size: 28px;
}

.npc-list-main {
    min-width: 0;
}

.npc-list-title-row {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.npc-list-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #0057ff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npc-list-name:hover {
    color: #1d4ed8;
}

.npc-list-en {
    flex: 0 1 auto;
    overflow: hidden;
    color: #64748b;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npc-list-meta,
.npc-list-menus {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.npc-list-meta span,
.npc-list-menus span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 5px;
    background: #eff6ff;
    padding: 3px 7px;
    color: #1d4ed8;
    font-size: 12px;
}

.npc-list-menus span {
    background: #f8fafc;
    color: #475569;
}

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

.npc-list-stats span {
    display: flex;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f8fafc;
}

.npc-list-stats b {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.1;
}

.npc-list-stats em {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.dark .npc-list-card,
.tw-dark .npc-list-card {
    border-color: #303846;
    background: #151515;
}

.dark .npc-list-card:hover,
.tw-dark .npc-list-card:hover {
    border-color: #38bdf8;
    background: #181f2b;
}

.dark .npc-list-icon,
.tw-dark .npc-list-icon,
.dark .npc-list-stats span,
.tw-dark .npc-list-stats span {
    border-color: rgba(148, 163, 184, .18);
    background: rgba(255, 255, 255, .05);
}

.dark .npc-list-name,
.tw-dark .npc-list-name,
.dark .npc-list-stats b,
.tw-dark .npc-list-stats b {
    color: #e5edff;
}

.dark .npc-list-en,
.tw-dark .npc-list-en,
.dark .npc-list-stats em,
.tw-dark .npc-list-stats em {
    color: #94a3b8;
}

.dark .npc-list-meta span,
.tw-dark .npc-list-meta span {
    background: rgba(37, 99, 235, .18);
    color: #93c5fd;
}

.dark .npc-list-menus span,
.tw-dark .npc-list-menus span {
    background: rgba(148, 163, 184, .12);
    color: #cbd5e1;
}

@media (max-width: 1180px) {
    .npc-list-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .npc-list-stats {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .npc-list-card {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 10px;
    }

    .npc-list-icon {
        width: 54px;
        height: 54px;
    }

    .npc-list-icon img {
        max-width: 50px;
        max-height: 50px;
    }

    .npc-list-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.npc-exchange-tabs {
    overflow: hidden;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    background: #fff;
}

.npc-exchange-tabbar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 1px solid #e5edf7;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
    padding: 10px;
}

.npc-exchange-tabbar button {
    position: relative;
    display: inline-flex;
    min-height: 42px;
    min-width: 136px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    padding: 0 12px;
    color: #475569;
    font-size: 13px;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.npc-exchange-tabbar button:hover {
    border-color: #93c5fd;
    color: #2563eb;
}

.npc-exchange-tabbar button[aria-selected="true"] {
    border-color: #60a5fa;
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
}

.npc-exchange-tabbar button[aria-selected="true"]::after {
    position: absolute;
    right: 12px;
    bottom: -11px;
    left: 12px;
    height: 2px;
    border-radius: 999px;
    background: #2563eb;
    content: "";
}

.npc-exchange-tab-title {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npc-exchange-tabbar em {
    min-width: 24px;
    border-radius: 999px;
    background: #eff6ff;
    padding: 1px 7px;
    color: #2563eb;
    font-size: 12px;
    font-style: normal;
    line-height: 20px;
}

.npc-exchange-panels {
    background: #fff;
}

.npc-exchange-item-chip {
    border: 0;
    background: transparent;
}

.npc-exchange-item-chip > span:first-child {
    width: 32px;
    height: 32px;
    background: #f8fafc;
}

.npc-exchange-item-chip > span:first-child img {
    max-width: 28px;
    max-height: 28px;
    image-rendering: pixelated;
}

.npc-map-preview-frame,
.monster-map-preview-frame,
.item-map-preview-frame {
    display: block;
    width: 100%;
    height: 360px;
    border: 0;
    background: #0f172a;
}

@media (min-width: 1280px) {
    .npc-map-preview-frame,
    .monster-map-preview-frame,
    .item-map-preview-frame {
        height: 420px;
    }
}

.npc-exchange-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf2f7;
    padding: 12px 14px;
}

.npc-exchange-panel-head a {
    color: #2563eb;
    font-size: 15px;
    font-weight: 600;
}

.npc-exchange-panel-head span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.npc-exchange-panel-head strong {
    flex: 0 0 auto;
    border-radius: 7px;
    background: #eff6ff;
    padding: 5px 9px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 500;
}

.dark .npc-exchange-tabs,
.tw-dark .npc-exchange-tabs {
    border-color: #303846;
    background: #171717;
}

.dark .npc-exchange-tabbar,
.tw-dark .npc-exchange-tabbar {
    border-bottom-color: #303846;
    background: linear-gradient(180deg, #1d2229 0%, #171b21 100%);
}

.dark .npc-exchange-tabbar button,
.tw-dark .npc-exchange-tabbar button {
    border-color: #334155;
    background: rgba(15, 23, 42, .56);
    color: #cbd5e1;
}

.dark .npc-exchange-tabbar button:hover,
.tw-dark .npc-exchange-tabbar button:hover,
.dark .npc-exchange-tabbar button[aria-selected="true"],
.tw-dark .npc-exchange-tabbar button[aria-selected="true"] {
    border-color: #38bdf8;
    background: #111827;
    color: #7dd3fc;
}

.dark .npc-exchange-tabbar button[aria-selected="true"]::after,
.tw-dark .npc-exchange-tabbar button[aria-selected="true"]::after {
    background: #38bdf8;
}

.dark .npc-exchange-tabbar em,
.tw-dark .npc-exchange-tabbar em,
.dark .npc-exchange-panel-head strong,
.tw-dark .npc-exchange-panel-head strong {
    background: rgba(14, 165, 233, .14);
    color: #7dd3fc;
}

.dark .npc-exchange-panels,
.tw-dark .npc-exchange-panels {
    background: #171717;
}

.dark .npc-exchange-item-chip > span:first-child,
.tw-dark .npc-exchange-item-chip > span:first-child {
    background: rgba(255, 255, 255, .06);
}

.dark .npc-exchange-panel-head,
.tw-dark .npc-exchange-panel-head {
    border-bottom-color: #303846;
}

.dark .npc-exchange-panel-head a,
.tw-dark .npc-exchange-panel-head a {
    color: #7dd3fc;
}

.dark .npc-exchange-panel-head span,
.tw-dark .npc-exchange-panel-head span {
    color: #94a3b8;
}

@media (max-width: 640px) {
    .npc-exchange-tabbar button {
        min-width: 118px;
    }

    .npc-exchange-tab-title {
        max-width: 92px;
    }

    .npc-exchange-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

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

.quest-list-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    min-height: 128px;
    border: 1px solid #dbe7f5;
    border-radius: 6px;
    background: #fff;
    padding: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.quest-list-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
}

.quest-list-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    background: #f8fbff;
    color: #2563eb;
    font-size: 24px;
}

.quest-list-main {
    min-width: 0;
}

.quest-list-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.quest-list-title {
    min-width: 0;
    color: #0057ff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.quest-list-title:hover {
    color: #1d4ed8;
}

.quest-list-topline span,
.quest-list-meta,
.quest-list-npcs {
    color: #475569;
    font-size: 12px;
}

.quest-list-topline span {
    flex: 0 0 auto;
}

.quest-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.quest-list-meta span {
    border-radius: 5px;
    background: #eff6ff;
    padding: 3px 7px;
    color: #1d4ed8;
}

.quest-list-npcs {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.quest-list-npcs span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.quest-list-npcs i {
    color: #64748b;
    font-size: 15px;
}

.quest-hero-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 6px;
    background: #101010;
    color: #fff;
}

.quest-legacy-hidden {
    display: none !important;
}

.quest-detail-card-title {
    padding: 18px 20px;
    text-align: center;
}

.quest-detail-card-title h1 {
    font-size: 20px;
    line-height: 1.35;
}

.quest-detail-card-title p {
    margin-inline: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quest-hero-pattern {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 10px, transparent 10px, transparent 22px), #151515;
    padding: 26px 20px;
    text-align: center;
}

.quest-hero-pattern span {
    display: block;
    color: #bfdbfe;
    font-size: 13px;
}

.quest-hero-pattern h1 {
    margin-top: 8px;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}

.quest-hero-pattern em {
    display: block;
    margin-top: 8px;
    color: #cbd5e1;
    font-size: 14px;
    font-style: normal;
}

.quest-hero-body {
    padding: 14px;
}

.quest-hero-stat {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    padding: 12px;
}

.quest-hero-stat span,
.quest-hero-row span {
    color: #bfdbfe;
    font-size: 13px;
}

.quest-hero-stat strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 28px;
    line-height: 1;
}

.quest-hero-row {
    display: flex;
    height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .06);
    padding: 0 10px;
}

.quest-hero-row b {
    color: #fff;
    font-size: 14px;
}

.quest-panel {
    overflow: hidden;
    border: 1px solid #dbe7f5;
    border-radius: 6px;
    background: #fff;
}

.quest-panel-head {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5edf7;
    background: #eef6ff;
    padding: 0 14px;
}

.quest-panel-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 700;
}

.quest-panel-head h2 span {
    color: #2563eb;
    font-size: 17px;
}

.quest-panel-head > span {
    color: #334155;
    font-size: 13px;
}

.quest-panel-body {
    padding: 14px;
}

.quest-subtitle {
    margin-bottom: 8px;
    color: #2563eb;
    font-size: 13px;
}

.quest-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    padding: 18px;
    color: #64748b;
    text-align: center;
}

.quest-object-grid,
.quest-npc-grid,
.quest-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.quest-chip-grid,
.quest-reward-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quest-object-card,
.quest-npc-card,
.quest-mini-card {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid #dbe7f5;
    border-radius: 6px;
    background: #fff;
    padding: 10px;
    transition: border-color .18s ease, background .18s ease;
}

.quest-object-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
}

.quest-object-card:hover,
.quest-npc-card:hover,
.quest-mini-card:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.quest-object-card > span,
.quest-npc-card > span,
.quest-mini-icon {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f8fafc;
}

.quest-object-card img,
.quest-npc-card img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.quest-object-card b,
.quest-npc-card b,
.quest-mini-card b {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quest-object-main {
    min-width: 0;
}

.quest-object-card em,
.quest-npc-card em,
.quest-mini-card em,
.quest-mini-card small {
    display: block;
    margin-top: 3px;
    color: #475569;
    font-size: 12px;
    font-style: normal;
}

.quest-object-card strong {
    align-self: start;
    justify-self: end;
    border-radius: 5px;
    background: #fff7ed;
    padding: 2px 6px;
    color: #c2410c;
    font-size: 12px;
}

.quest-item-chip {
    display: inline-flex;
    min-width: 0;
    max-width: 260px;
    align-items: center;
    gap: 7px;
    border: 1px solid #e5edf7;
    border-radius: 6px;
    background: #fff;
    padding: 6px 8px;
    color: #0f172a;
    font-size: 13px;
}

.quest-item-chip:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.quest-item-chip-icon {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #f8fafc;
}

.quest-item-chip-icon img {
    max-width: 27px;
    max-height: 27px;
    object-fit: contain;
}

.quest-item-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quest-item-chip b,
.quest-reward-pill {
    border-radius: 5px;
    background: #eff6ff;
    padding: 3px 7px;
    color: #0057ff;
    font-size: 12px;
    font-weight: 600;
}

.quest-reward-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #bfdbfe;
}

.quest-mini-main {
    min-width: 0;
}

.quest-npc-main {
    display: block;
    min-width: 0;
    grid-column: 2;
}

.quest-npc-main em {
    white-space: nowrap;
}

.quest-chain-list {
    display: flex;
    flex-direction: column;
}

.quest-chain-item {
    position: relative;
    display: grid;
    min-height: 70px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-left: calc(var(--chain-depth, 0) * 22px);
    padding: 12px 10px 12px 0;
    color: inherit;
}

.quest-chain-item + .quest-chain-item {
    border-top: 1px solid #eef2f7;
}

.quest-chain-line {
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dbe7f5;
}

.quest-chain-step {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border: 2px solid #bfdbfe;
    border-radius: 999px;
    background: #fff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.quest-chain-main {
    min-width: 0;
}

.quest-chain-title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quest-chain-title,
.quest-chain-main em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quest-chain-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.quest-chain-title:hover {
    color: #0057ff;
}

.quest-chain-main em {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.quest-chain-current {
    flex: 0 0 auto;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    background: #eff6ff;
    padding: 3px 8px;
    color: #0057ff;
    font-size: 12px;
    font-weight: 700;
}

.quest-chain-desc {
    margin-top: 8px;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

.quest-chain-meta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 7px;
    color: #334155;
    font-size: 12px;
}

.quest-chain-meta > i {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    color: #2563eb;
    font-size: 18px;
}

.quest-chain-link-row {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
}

.quest-chain-npc,
.quest-chain-monster {
    display: inline-flex;
    max-width: 220px;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5edf7;
    border-radius: 999px;
    background: #fff;
    padding: 2px 8px 2px 4px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.quest-chain-npc:hover,
.quest-chain-monster:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    color: #0057ff;
}

.quest-chain-avatar {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: #f8fafc;
}

.quest-chain-avatar img {
    width: auto;
    height: auto;
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
}

.quest-chain-npc em,
.quest-chain-monster em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quest-chain-monster b {
    flex: 0 0 auto;
    color: #c2410c;
    font-size: 11px;
}

.quest-chain-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.quest-chain-reward,
.quest-chain-reward-chip {
    display: inline-flex;
    max-width: 220px;
    align-items: center;
    gap: 5px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    padding: 3px 7px;
    color: #0057ff;
    font-size: 12px;
    font-weight: 600;
}

.quest-chain-reward-chip:hover {
    border-color: #93c5fd;
    background: #dbeafe;
}

.quest-chain-reward-chip img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.quest-chain-reward-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quest-chain-reward-chip b {
    color: #1d4ed8;
    font-size: 11px;
}

.quest-chain-item:hover .quest-chain-title {
    color: #0057ff;
}

.quest-chain-item.is-current {
    margin-right: -4px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(37, 99, 235, .1), rgba(37, 99, 235, .03));
    padding-right: 14px;
}

.quest-chain-item.is-current .quest-chain-step {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

@media (max-width: 1023px) {
    .quest-list-grid,
    .quest-object-grid,
    .quest-npc-grid,
    .quest-mini-grid {
        grid-template-columns: 1fr;
    }

    .quest-chain-item {
        margin-left: calc(var(--chain-depth, 0) * 14px);
    }

    .quest-chain-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .quest-chain-current {
        justify-self: start;
    }
}

.dark .quest-list-card,
.tw-dark .quest-list-card,
.dark .quest-panel,
.tw-dark .quest-panel,
.dark .quest-object-card,
.tw-dark .quest-object-card,
.dark .quest-npc-card,
.tw-dark .quest-npc-card,
.dark .quest-mini-card,
.tw-dark .quest-mini-card,
.dark .quest-item-chip,
.tw-dark .quest-item-chip {
    border-color: rgba(148, 163, 184, .22);
    background: #151515;
}

.dark .quest-list-card:hover,
.tw-dark .quest-list-card:hover,
.dark .quest-object-card:hover,
.tw-dark .quest-object-card:hover,
.dark .quest-npc-card:hover,
.tw-dark .quest-npc-card:hover,
.dark .quest-mini-card:hover,
.tw-dark .quest-mini-card:hover,
.dark .quest-item-chip:hover,
.tw-dark .quest-item-chip:hover {
    border-color: rgba(96, 165, 250, .65);
    background: #181f2b;
}

.dark .quest-list-icon,
.tw-dark .quest-list-icon,
.dark .quest-object-card > span,
.tw-dark .quest-object-card > span,
.dark .quest-npc-card > span,
.tw-dark .quest-npc-card > span,
.dark .quest-mini-icon,
.tw-dark .quest-mini-icon,
.dark .quest-item-chip-icon,
.tw-dark .quest-item-chip-icon {
    border-color: rgba(148, 163, 184, .18);
    background: rgba(255, 255, 255, .05);
}

.dark .quest-list-title,
.tw-dark .quest-list-title,
.dark .quest-object-card b,
.tw-dark .quest-object-card b,
.dark .quest-npc-card b,
.tw-dark .quest-npc-card b,
.dark .quest-mini-card b,
.tw-dark .quest-mini-card b,
.dark .quest-item-chip,
.tw-dark .quest-item-chip {
    color: #e5edff;
}

.dark .quest-list-topline span,
.tw-dark .quest-list-topline span,
.dark .quest-list-meta,
.tw-dark .quest-list-meta,
.dark .quest-list-npcs,
.tw-dark .quest-list-npcs,
.dark .quest-object-card em,
.tw-dark .quest-object-card em,
.dark .quest-npc-card em,
.tw-dark .quest-npc-card em,
.dark .quest-mini-card em,
.tw-dark .quest-mini-card em,
.dark .quest-mini-card small,
.tw-dark .quest-mini-card small {
    color: #94a3b8;
}

.dark .quest-list-meta span,
.tw-dark .quest-list-meta span,
.dark .quest-reward-pill,
.tw-dark .quest-reward-pill,
.dark .quest-item-chip b,
.tw-dark .quest-item-chip b {
    border-color: rgba(59, 130, 246, .3);
    background: rgba(37, 99, 235, .18);
    color: #93c5fd;
}

.dark .quest-panel-head,
.tw-dark .quest-panel-head {
    border-color: rgba(148, 163, 184, .2);
    background: #172033;
}

.dark .quest-panel-head h2,
.tw-dark .quest-panel-head h2 {
    color: #e5edff;
}

.dark .quest-panel-head > span,
.tw-dark .quest-panel-head > span {
    color: #cbd5e1;
}

.dark .quest-chain-item + .quest-chain-item,
.tw-dark .quest-chain-item + .quest-chain-item {
    border-color: rgba(148, 163, 184, .16);
}

.dark .quest-chain-line,
.tw-dark .quest-chain-line {
    background: rgba(148, 163, 184, .28);
}

.dark .quest-chain-step,
.tw-dark .quest-chain-step {
    border-color: rgba(96, 165, 250, .55);
    background: #151515;
    color: #93c5fd;
}

.dark .quest-chain-title,
.tw-dark .quest-chain-title {
    color: #e5edff;
}

.dark .quest-chain-main em,
.tw-dark .quest-chain-main em {
    color: #94a3b8;
}

.dark .quest-chain-desc,
.tw-dark .quest-chain-desc {
    color: #cbd5e1;
}

.dark .quest-chain-meta,
.tw-dark .quest-chain-meta {
    color: #94a3b8;
}

.dark .quest-chain-npc,
.tw-dark .quest-chain-npc,
.dark .quest-chain-monster,
.tw-dark .quest-chain-monster {
    border-color: rgba(148, 163, 184, .22);
    background: rgba(255, 255, 255, .04);
    color: #cbd5e1;
}

.dark .quest-chain-npc:hover,
.tw-dark .quest-chain-npc:hover,
.dark .quest-chain-monster:hover,
.tw-dark .quest-chain-monster:hover {
    border-color: rgba(96, 165, 250, .65);
    background: #181f2b;
    color: #93c5fd;
}

.dark .quest-chain-avatar,
.tw-dark .quest-chain-avatar {
    background: rgba(255, 255, 255, .05);
}

.dark .quest-chain-monster b,
.tw-dark .quest-chain-monster b {
    color: #fdba74;
}

.dark .quest-chain-current,
.tw-dark .quest-chain-current {
    border-color: rgba(96, 165, 250, .55);
    background: rgba(37, 99, 235, .18);
    color: #93c5fd;
}

.dark .quest-chain-reward,
.tw-dark .quest-chain-reward,
.dark .quest-chain-reward-chip,
.tw-dark .quest-chain-reward-chip {
    border-color: rgba(59, 130, 246, .3);
    background: rgba(37, 99, 235, .18);
    color: #93c5fd;
}

.dark .quest-chain-reward-chip:hover,
.tw-dark .quest-chain-reward-chip:hover {
    border-color: rgba(96, 165, 250, .65);
    background: rgba(37, 99, 235, .28);
}

.dark .quest-chain-reward-chip b,
.tw-dark .quest-chain-reward-chip b {
    color: #bfdbfe;
}

.dark .quest-chain-item:hover .quest-chain-title,
.tw-dark .quest-chain-item:hover .quest-chain-title {
    color: #93c5fd;
}

.dark .quest-chain-item.is-current,
.tw-dark .quest-chain-item.is-current {
    background: linear-gradient(90deg, rgba(37, 99, 235, .22), rgba(37, 99, 235, .06));
}

.dark .quest-chain-item.is-current .quest-chain-step,
.tw-dark .quest-chain-item.is-current .quest-chain-step {
    border-color: #60a5fa;
    background: #2563eb;
    color: #fff;
}

.dark .quest-empty,
.tw-dark .quest-empty {
    border-color: rgba(148, 163, 184, .28);
    background: rgba(255, 255, 255, .04);
    color: #94a3b8;
}

.tw-icon-\[mdi--link-variant\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.59 13.41a1 1 0 0 0 1.41 1.41l4.59-4.59a3 3 0 0 0-4.24-4.24l-1.77 1.77l1.41 1.41l1.77-1.77a1 1 0 0 1 1.41 1.41zm2.82-2.82A1 1 0 0 0 12 9.18l-4.59 4.59a3 3 0 1 0 4.24 4.24l1.77-1.77l-1.41-1.41l-1.77 1.77a1 1 0 0 1-1.41-1.41z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--folder-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10 4l2 2h8v12H4V4zm1.17 4l-2-2H6v10h12V8z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--calendar-today-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3v18H4V4h3zm11 8H6v10h12zM6 8h12V6H6z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--repeat\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M17 1l4 4l-4 4V6H7a3 3 0 0 0-3 3v2H2V9a5 5 0 0 1 5-5h10zM7 23l-4-4l4-4v3h10a3 3 0 0 0 3-3v-2h2v2a5 5 0 0 1-5 5H7z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--target\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2a10 10 0 0 1 10 10h-2a8 8 0 1 0-8 8v2A10 10 0 0 1 12 2m0 4a6 6 0 0 1 6 6h-2a4 4 0 1 0-4 4v2a6 6 0 0 1 0-12m0 4a2 2 0 1 1-2 2a2 2 0 0 1 2-2m5 7v-3h2v3h3v2h-3v3h-2v-3h-3v-2z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--gift-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M20 7h-2.18A3 3 0 0 0 12 5.76A3 3 0 0 0 6.18 7H4v5h1v9h14v-9h1zM9 4a1 1 0 0 1 1 1v2H8a1 1 0 0 1 1-3m6 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1h-2V5a1 1 0 0 1 1-1M6 9h5v2H6zm0 4h5v6H6zm12 6h-5v-6h5zm0-8h-5V9h5z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--flag-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M6 3h11l-1 4l1 4H8v10H6zm2 2v4h6.44l-.5-2l.5-2z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--flag-checkered\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M6 3h12v10H8v8H6zm2 2v3h3V5zm5 0v3h3V5zm-5 5v1h3v-1zm5 0v1h3v-1z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--checkbox-blank-circle-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20a10 10 0 0 1 0-20m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--source-branch\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M6 3a3 3 0 0 1 1 5.83V13a3 3 0 0 0 3 3h4.17A3 3 0 1 1 14 18h-4a5 5 0 0 1-5-5V8.83A3 3 0 0 1 6 3m0 2a1 1 0 1 0 0 2a1 1 0 0 0 0-2m11 10a1 1 0 1 0 0 2a1 1 0 0 0 0-2m0-12a3 3 0 0 1 1 5.83V12h-2V8.83A3 3 0 0 1 17 3m0 2a1 1 0 1 0 0 2a1 1 0 0 0 0-2'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--bag-personal-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1h3v14H4V7zm2 0h6V6a3 3 0 0 0-6 0zm-3 2v10h12V9h-1v3h-2V9H9v3H7V9z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--skull-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2a8 8 0 0 1 8 8v4a2 2 0 0 1-2 2v4H6v-4a2 2 0 0 1-2-2v-4a8 8 0 0 1 8-8m0 2a6 6 0 0 0-6 6v4h3v2H8v2h2v-3h4v3h2v-2h-1v-2h3v-4a6 6 0 0 0-6-6m-3 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4a2 2 0 0 1 0-4'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--account-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 4a4 4 0 1 1 0 8a4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4a2 2 0 0 0 0-4m0 8c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4m0 2c-3.31 0-6 1.03-6 2h12c0-.97-2.69-2-6-2'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--chevron-left\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--chevron-right\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--chevron-double-left\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12zm-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--chevron-double-right\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12zm6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--map-marker-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5.25-7 13-7 13S5 14.25 5 9a7 7 0 0 1 7-7m0 2a5 5 0 0 0-5 5c0 2.88 3 7.19 5 9.67c2-2.48 5-6.79 5-9.67a5 5 0 0 0-5-5m0 2.5A2.5 2.5 0 1 1 12 11a2.5 2.5 0 0 1 0-5m0 2a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--recycle\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m19.5 12.5l-2.6 4.5h2.1v2h-5.6l-2.3-4l1.7-1l1.4 2.5h.4l3.2-5.5zM8.4 5.5l2.7-4.5l3 5h2.9v2h-5.4L8.4 2.7L6.8 5.5l1.8 3.1l-1.7 1L4 4.5L6.3.5zM5 17h5v2H3.5l-3-5l2.9-5l1.7 1L3.3 13l.2.4L6.7 8H12v2H7.8z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--auto-fix\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M7.5 5.6L9 2l1.5 3.6L14 7l-3.5 1.4L9 12L7.5 8.4L4 7zm9 6L18 8l1.5 3.6L23 13l-3.5 1.4L18 18l-1.5-3.6L13 13zM5 14l5 5l-2 2l-5-5zm8.7-5.3l1.6 1.6L6.6 19L5 17.4z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--chart-timeline-variant\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 4h2v14h14v2H4zm4 10l3-3l3 2l4-6l2 1.3l-5.1 7.7l-3.7-2.5L9 16z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--format-list-numbered\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M7 5h14v2H7zm0 6h14v2H7zm0 6h14v2H7zM3 4h1v4H3V5H2V4zm-1 7h3v1.5H3.5v.5H5v1.5H2V13l1.5-.5V12H2zm0 6h3v3H2v-1.2h1.8v-.4H2.5v-1.2h1.3v-.4H2z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--alert-circle-outline\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M11 7h2v6h-2zm0 8h2v2h-2zm1-13a10 10 0 1 1 0 20a10 10 0 0 1 0-20m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--arrow-left\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M20 11v2H7.83l5.59 5.59L12 20l-8-8l8-8l1.42 1.41L7.83 11z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--menu-open\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 6h12v2H3zm0 5h12v2H3zm0 5h12v2H3zm15.5-8.5L23 12l-4.5 4.5l-1.42-1.42L19.17 13H14v-2h5.17l-2.09-2.08z'/%3E%3C/svg%3E");
}

.tw-icon-\[mdi--link-variant\],
.tw-icon-\[mdi--folder-outline\],
.tw-icon-\[mdi--calendar-today-outline\],
.tw-icon-\[mdi--repeat\],
.tw-icon-\[mdi--target\],
.tw-icon-\[mdi--gift-outline\],
.tw-icon-\[mdi--flag-outline\],
.tw-icon-\[mdi--flag-checkered\],
.tw-icon-\[mdi--checkbox-blank-circle-outline\],
.tw-icon-\[mdi--source-branch\],
.tw-icon-\[mdi--bag-personal-outline\],
.tw-icon-\[mdi--skull-outline\],
.tw-icon-\[mdi--account-outline\],
.tw-icon-\[mdi--chevron-left\],
.tw-icon-\[mdi--chevron-right\],
.tw-icon-\[mdi--chevron-double-left\],
.tw-icon-\[mdi--chevron-double-right\],
.tw-icon-\[mdi--map-marker-outline\],
.tw-icon-\[mdi--recycle\],
.tw-icon-\[mdi--auto-fix\],
.tw-icon-\[mdi--chart-timeline-variant\],
.tw-icon-\[mdi--format-list-numbered\],
.tw-icon-\[mdi--alert-circle-outline\],
.tw-icon-\[mdi--arrow-left\],
.tw-icon-\[mdi--menu-open\] {
    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%;
}

:root {
    --booklet-layout-max: 1280px;
}

.layout-shell {
    max-width: var(--booklet-layout-max) !important;
}

.booklet-uiv8-list :is(
    .tw-font-semibold,
    .tw-font-bold,
    .tw-font-extrabold,
    .tw-font-black
) {
    font-weight: 500 !important;
}

.booklet-uiv8-list :is(
    .booklet-item-card-name,
    .booklet-item-table-name,
    .equipset-list-head a,
    .equipset-list-parts em,
    .monster-list-name,
    .map-list-name,
    .life-list-name,
    .mount-list-name,
    .skill-list-name,
    .box-list-name,
    .npc-list-name,
    .quest-list-title
) {
    font-weight: 400 !important;
}

.booklet-uiv8-list :is(
    .booklet-item-card-level,
    .booklet-item-card-meta > span,
    .equipset-list-head strong,
    .equipset-list-bonuses b,
    .monster-list-stats b,
    .map-list-stats b,
    .mount-list-stats b,
    .skill-list-stats b,
    .box-list-badge,
    .box-list-content b,
    .box-list-content em,
    .box-list-content strong,
    .box-list-more,
    .npc-list-stats b,
    .quest-list-meta span
) {
    font-weight: 500 !important;
}

@media (min-width: 1536px) {
    :root {
        --booklet-layout-max: 1320px;
    }
}

@media (min-width: 1800px) {
    :root {
        --booklet-layout-max: 1360px;
    }
}