.cz-view {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.cz-stats > .cz-section-title:first-child,
.cz-stats > .cz-empty:first-child {
    margin-top: 0;
}

.cz-tag-list,
.cz-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.cz-tag-list li {
    padding: 3px 9px;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 999px;
    background: var(--bg-tertiary, #2f3136);
    font-size: 0.8rem;
    color: var(--text-secondary, #a3b4d4);
}

.cz-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 14px 0 0;
    overflow: hidden;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 10px;
    background: var(--border-color, #383d45);
}

.cz-facts div {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2px;
    flex: 1 1 74px;
    min-width: 0;
    padding: 8px 12px;
    background: var(--bg-secondary, #292b2f);
}

.cz-facts dt {
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-muted, #6f84a8);
}

.cz-facts dd {
    align-self: end;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #e6f0ff);
}

.cz-section-title {
    margin: 18px 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #d8bc86;
}

.cz-skills .cz-section-title:first-child {
    margin-top: 0;
}

.cz-empty {
    margin: 12px 0 0;
    color: var(--text-muted, #6f84a8);
}

.cz-variant-chips .cz-variant-element,
.cz-tag-list .cz-tag-element {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 1px 4px;
}

.cz-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cz-toolbar .cz-toggle[hidden] {
    display: none;
}

.cz-profile-head .cz-tag-list {
    margin: 0;
}

.cz-skill-modal .refine-modal-card {
    width: min(560px, 94vw);
}

.cz-skill-modal .refine-modal-header h3 {
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
}

.cz-skill-modal-content .cz-skill-name {
    display: none;
}

.cz-skill-modal-content .cz-skill-desc {
    margin-top: 10px;
}

.cz-skill-modal-content .cz-skill-head:not(:has(.cz-skill-label)) {
    display: none;
}

.cz-skill-modal-content .cz-skill-head:not(:has(.cz-skill-label)) + .cz-variant-list {
    margin-top: 0;
}

.cz-skills > .cz-section-title:first-child {
    font-size: 1.4rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary, #e6f0ff);
}

@media (min-width: 761px) {
    .cz-profile-head .cz-tag-list {
        margin-left: auto;
        justify-content: flex-end;
    }
}

.cz-rewards {
    grid-area: rewards;
    min-width: 0;
    padding: 12px 16px 14px;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 12px;
    background: var(--bg-card, rgba(41, 43, 47, 0.92));
}

.cz-rewards > .cz-section-title {
    margin-top: 0;
}

.cz-reward-strip {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 2px 2px 6px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.cz-reward-strip li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.cz-reward {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    cursor: default;
}

.cz-reward img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cz-reward.quality-2 {
    background: rgba(88, 190, 96, 0.28); border-color: rgba(88, 190, 96, 0.5);
}

.cz-reward.quality-3 {
    background: rgba(59, 169, 255, 0.3); border-color: rgba(59, 169, 255, 0.52);
}

.cz-reward.quality-4 {
    background: rgba(172, 106, 255, 0.3); border-color: rgba(172, 106, 255, 0.54);
}

.cz-reward.quality-5 {
    background: rgba(251, 191, 36, 0.32); border-color: rgba(251, 191, 36, 0.56);
}

.cz-reward.quality-6 {
    background: rgba(239, 68, 68, 0.32); border-color: rgba(239, 68, 68, 0.56);
}

.cz-reward:focus-visible {
    outline: 2px solid #e1bb75;
    outline-offset: 2px;
}

.cz-reward-count {
    position: absolute;
    right: 3px;
    bottom: 1px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 1px 2px #000;
}

.cz-reward-first {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px 5px;
    border-bottom-right-radius: 6px;
    background: linear-gradient(120deg, #c99a45, #8a6426);
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1.3;
    color: #fff6dd;
}

.cz-reward-tip {
    position: fixed;
    z-index: 1200;
    width: max-content;
    max-width: 280px;
    padding: 9px 11px;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 8px;
    background: var(--bg-primary, #202225);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.cz-reward-tip[hidden] {
    display: none;
}

.cz-reward-detail {
    display: grid;
    gap: 4px;
}

.cz-reward-detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cz-reward-detail-name {
    font-weight: 700;
    color: var(--text-primary, #e6f0ff);
}

.quality-text-2 {
    color: #7fd48a;
}

.quality-text-3 {
    color: #6cbcff;
}

.quality-text-4 {
    color: #c39bff;
}

.quality-text-5 {
    color: #f5c451;
}

.quality-text-6 {
    color: #f47c7c;
}

.cz-reward-detail-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #a3b4d4);
}

.cz-reward-detail-first {
    font-size: 0.74rem;
    font-weight: 700;
    color: #e5c68a;
}

.cz-reward-detail-desc {
    margin: 2px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary, #a3b4d4);
}

.cz-skill-modal-content .cz-reward-detail-name {
    display: none;
}

.cz-skill-modal-content .cz-reward-detail-head {
    justify-content: flex-start;
}

@media (max-width: 760px) {
    .cz-reward,
    .cz-summon {
        cursor: pointer;
    }
}

.cz-rail {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-user-select: none;
    user-select: none;
}

.cz-rail.can-scroll-left,
.cz-rail.can-scroll-right {
    cursor: grab;
}

.cz-rail.is-dragging {
    scroll-snap-type: none;
}

.cz-rail.is-dragging,
.cz-rail.is-dragging * {
    cursor: grabbing;
}

.cz-rail::-webkit-scrollbar {
    display: none;
}

.cz-rail.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.cz-rail.can-scroll-left {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
    mask-image: linear-gradient(to right, transparent, #000 28px);
}

.cz-rail.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.cz-boss-strip {
    display: grid;
    grid-template-columns: repeat(var(--cz-boss-count, 5), minmax(0, 1fr));
    gap: 12px;
}

.cz-boss-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    min-width: 0;
    padding: 0 0 10px;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 12px;
    background: var(--bg-secondary, #292b2f);
    color: var(--text-secondary, #a3b4d4);
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
}

.cz-boss-art {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #3a3346 0%, #24232b 70%);
}

.cz-boss-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: saturate(0.7) brightness(0.78);
    transition: filter 0.2s ease, transform 0.25s ease;
}

.cz-boss-card:hover .cz-boss-art img {
    filter: saturate(0.9) brightness(0.92);
}

.cz-boss-card[aria-pressed="true"] {
    border-color: #b79760;
    box-shadow: 0 0 0 1px #b79760;
    color: #f2d9ab;
}

.cz-boss-card[aria-pressed="true"] .cz-boss-art img {
    filter: none;
    transform: scale(1.04);
}

.cz-boss-name {
    padding: 8px 10px 0;
    font-size: 0.95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cz-boss-dungeon {
    padding: 2px 10px 0;
    font-size: 0.78rem;
    color: var(--text-muted, #6f84a8);
    overflow-wrap: anywhere;
}

.cz-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
    "profile skills"
    "rewards skills"
    "affixes skills"
    "stats skills";
    gap: 16px;
    align-items: start;
}

.cz-profile {
    grid-area: profile;
}

.cz-profile-name {
    margin: 0;
    font-size: 1.4rem;
    color: var(--text-primary, #e6f0ff);
}

.cz-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
    margin: 0;
}

.cz-stat {
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--bg-tertiary, #2f3136);
}

.cz-stat dt {
    font-size: 0.75rem;
    color: var(--text-muted, #6f84a8);
}

.cz-stat dd {
    margin: 2px 0 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #e6f0ff);
    overflow-wrap: anywhere;
}

.cz-stat-HPMaxBase {
    grid-column: 1 / -1;
}

.cz-stat-HPMaxBase dd {
    font-size: 1.25rem;
}

.cz-chip {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--bg-tertiary, #2f3136);
    font-size: 0.82rem;
    color: var(--text-secondary, #a3b4d4);
}

.cz-chip strong {
    color: var(--text-primary, #e6f0ff);
}

.cz-skill-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cz-skill {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 10px;
    background: var(--bg-secondary, #292b2f);
}

.cz-skill-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cz-skill-name {
    margin-right: 4px;
    font-weight: 700;
    color: var(--text-primary, #e6f0ff);
}

.cz-skill-label {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(142, 162, 199, 0.18);
    color: #b9c7e3;
}

.cz-tone-0046 {
    background: rgba(87, 242, 135, 0.15);
    color: #7fe0a0;
}

.cz-tone-0048 {
    background: rgba(237, 66, 69, 0.18);
    color: #f58c8e;
}

.cz-skill-desc {
    margin: 6px 0 0;
    color: var(--text-secondary, #a3b4d4);
    line-height: 1.5;
    white-space: pre-line;
}

.cz-variant-list {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.cz-variant {
    display: grid;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-color, #383d45);
}

.cz-variant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cz-variant-chips li {
    display: inline-flex;
    gap: 5px;
    align-items: baseline;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bg-tertiary, #2f3136);
    font-size: 0.76rem;
    color: var(--text-muted, #6f84a8);
}

.cz-variant-chips strong {
    color: var(--text-primary, #e6f0ff);
    font-variant-numeric: tabular-nums;
}

.cz-variant-chips .cz-variant-element {
    color: #b9c7e3;
}

.cz-variant-warning {
    margin: 0;
    padding: 6px 10px;
    border-left: 3px solid #e5b65c;
    border-radius: 6px;
    background: rgba(229, 182, 92, 0.08);
    font-size: 0.82rem;
    color: #ecd6a8;
    line-height: 1.45;
}

.cz-variant-warning span {
    display: block;
    margin-bottom: 1px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c79d4f;
}

.cz-other-skills {
    margin-top: 12px;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 10px;
    padding: 8px 12px;
    background: var(--bg-secondary, #292b2f);
}

.cz-other-skills summary {
    color: var(--text-secondary, #a3b4d4);
    font-weight: 600;
    cursor: pointer;
}

.cz-other-skills .cz-skill-list {
    margin-top: 10px;
}

.cz-skill-other {
    background: var(--bg-tertiary, #2f3136);
}

.cz-element {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #b9c7e3;
    cursor: default;
}

.cz-element img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.cz-element--neutral::before,
.cz-element--neutral::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
}

.cz-element--neutral::before {
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.cz-element--neutral::after {
    width: 19px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cz-toggle-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 3px 3px 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.16s ease, margin 0.16s ease;
}

.cz-toggle[aria-expanded="true"] .cz-toggle-chevron {
    margin: 3px 3px 0 5px;
    transform: rotate(-135deg);
}

.cz-toolbar-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 12px;
    background: var(--bg-card, rgba(41, 43, 47, 0.92));
}

.cz-toolbar-panel[hidden] {
    display: none;
}

.cz-panel-section {
    display: grid;
    gap: 8px;
}

.cz-panel-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #d8bc86;
}

.cz-damage-chips li {
    background: rgba(240, 138, 138, 0.1);
}

.cz-damage-chips strong {
    color: #f4a3a3;
}

.cz-element-tip {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    z-index: 30;
    padding: 4px 8px;
    color: var(--text-primary, #e6f0ff);
    border: 1px solid var(--border-color, #383d45);
    border-radius: 6px;
    background: var(--bg-primary, #202225);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.36);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 3px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.cz-element:hover .cz-element-tip,
.cz-element:focus-visible .cz-element-tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.cz-element:focus-visible {
    outline: 2px solid rgba(229, 182, 92, 0.75);
    outline-offset: 2px;
    border-radius: 4px;
}

.cz-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cz-video-card {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 0 0 10px;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 10px;
    background: var(--bg-tertiary, #2f3136);
    color: var(--text-secondary, #a3b4d4);
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
}

.cz-video-card:hover {
    border-color: var(--text-secondary, #a3b4d4);
}

.cz-video-card:focus-visible {
    outline: 2px solid #e1bb75;
    outline-offset: 2px;
}

.cz-video-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #15161a;
}

.cz-video-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cz-video-length,
.cz-video-lang {
    position: absolute;
    bottom: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.78);
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}

.cz-video-length {
    right: 6px;
}

.cz-video-lang {
    left: 6px;
}

.cz-video-title {
    display: -webkit-box;
    padding: 0 10px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary, #e6f0ff);
}

.cz-video-meta {
    padding: 0 10px;
    font-size: 0.74rem;
    color: var(--text-muted, #6f84a8);
}

.cz-video-modal .refine-modal-card {
    width: min(960px, 96vw);
}

.cz-video-modal .refine-modal-header h3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cz-video-player {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: #000;
    overflow: hidden;
}

.cz-video-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cz-video-player-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-secondary, #a3b4d4);
}

.cz-video-player-meta a {
    color: #e5c68a;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .cz-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
        "profile"
        "rewards"
        "affixes"
        "skills"
        "stats";
    }
}

@media (max-width: 760px) {
    .cz-boss-strip {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 132px;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

.cz-skills {
    grid-area: skills;
}

.cz-stats {
    grid-area: stats;
}

.cz-profile,
.cz-skills,
.cz-stats {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-color, #383d45);
    border-radius: 12px;
    background: var(--bg-card, rgba(41, 43, 47, 0.92));
}

.cz-profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

@media (max-width: 760px) {
    .cz-skills .cz-skill {
        position: relative;
        padding-right: 34px;
        cursor: pointer;
    }

    .cz-skills .cz-skill::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 14px;
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--text-muted, #6f84a8);
        border-right: 2px solid var(--text-muted, #6f84a8);
        transform: translateY(-50%) rotate(45deg);
    }

    .cz-skills .cz-skill .cz-skill-desc,
    .cz-skills .cz-skill .cz-variant-list {
        display: none;
    }

    .cz-skills .cz-skill:active {
        border-color: var(--text-secondary, #a3b4d4);
    }
}