:root {
    color-scheme: dark;
    --diagnosis-radius: 14px;
    --diagnosis-bg: var(--game-life-bg, #0a1119);
    --diagnosis-surface: var(--game-life-surface, #111b25);
    --diagnosis-surface-raised: var(--game-life-surface-strong, #162331);
    --diagnosis-card-bg: var(--diagnosis-surface);
    --diagnosis-text: var(--game-life-ink, #f1f5f8);
    --diagnosis-text-muted: var(--game-life-muted, #9aa9b6);
    --diagnosis-border: var(--game-life-line, #2a3a48);
    --diagnosis-accent: var(--game-life-blue, #4b8df8);
    --diagnosis-accent-hover: #7eb0ff;
    --diagnosis-accent-soft: var(--game-life-blue-soft, #17345c);
    --diagnosis-accent-contrast: #08131f;
    --diagnosis-link: #8fbbff;
    --diagnosis-focus: var(--site-focus, #f2ad3c);
    --diagnosis-success: var(--game-life-green, #62cf8f);
    --diagnosis-success-soft: #123224;
    --diagnosis-warning: var(--game-life-amber, #f0b75d);
    --diagnosis-warning-soft: #342713;
    --diagnosis-danger: #ff8896;
    --diagnosis-danger-soft: #351c23;
    --diagnosis-overlay: rgb(4 12 17 / 72%);
    --diagnosis-shadow: 0 16px 35px rgb(0 0 0 / 22%);

    /* Legacy Playtime Report aliases. */
    --bg: var(--diagnosis-bg);
    --panel: var(--diagnosis-surface);
    --text: var(--diagnosis-text);
    --muted: var(--diagnosis-text-muted);
    --line: var(--diagnosis-border);
    --accent: var(--diagnosis-accent);
    --accent-strong: var(--diagnosis-accent-hover);
    --soft: var(--diagnosis-accent-soft);
    --warning: var(--diagnosis-warning-soft);
    --warning-line: var(--diagnosis-warning);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--diagnosis-bg);
    color: var(--diagnosis-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
}

html {
    background: var(--diagnosis-bg);
}

a {
    color: inherit;
}

.top-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 18px 0;
    color: #526071;
    font-size: 0.94rem;
}

.top-nav a {
    min-height: 32px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.top-nav a:hover,
.top-nav a:focus-visible {
    border-color: currentColor;
}

main:not(.site-page-main),
.single-panel {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 18px 48px;
}

.hero,
.preview-header {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
}

.eyebrow {
    margin: 0;
    color: #446071;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.05rem;
}

.section {
    margin-top: 28px;
}

.section-heading {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.section-heading p,
.hero p,
.preview-header p,
.result-summary {
    color: var(--site-muted, #637083);
}

.diagnosis-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 14px;
    color: var(--site-muted, #637083);
    font-size: 0.88rem;
}

.diagnosis-breadcrumb a {
    color: var(--site-accent, #137f63);
    font-weight: 750;
    text-underline-offset: 3px;
}

.diagnosis-start-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
    gap: clamp(20px, 4vw, 52px);
    align-items: center;
    margin: 0 0 30px;
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid #b8d7cd;
    border-radius: var(--diagnosis-radius);
    background:
        radial-gradient(circle at 92% 15%, rgb(19 127 99 / 14%), transparent 34%),
        var(--site-surface, #fff);
    box-shadow: var(--diagnosis-shadow);
}

.diagnosis-start-copy {
    min-width: 0;
}

.diagnosis-start-kicker,
.section-eyebrow {
    margin: 0 0 6px;
    color: var(--site-accent, #137f63) !important;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.diagnosis-start-copy h2 {
    margin-bottom: 10px;
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    line-height: 1.25;
    text-wrap: balance;
}

.diagnosis-start-copy > p:not(.diagnosis-start-kicker) {
    margin-bottom: 14px;
    color: var(--site-muted, #637083);
}

.diagnosis-point-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.diagnosis-point-list li {
    position: relative;
    padding-left: 22px;
}

.diagnosis-point-list li::before {
    position: absolute;
    top: 0.46em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--site-accent, #137f63);
    content: '';
}

.diagnosis-start-action,
.diagnosis-start-action form {
    display: grid;
    gap: 9px;
    margin: 0;
}

.diagnosis-start-action small {
    color: var(--site-muted, #637083);
    line-height: 1.5;
    text-align: center;
}

.diagnosis-primary-cta {
    width: 100%;
    font-size: 1.05rem;
}

.diagnosis-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.diagnosis-card,
.panel,
.result-row,
.result-card,
.diagnosis-result-card {
    border: 1px solid var(--site-line, #d8e0e8);
    border-radius: var(--diagnosis-radius);
    background: var(--site-surface, #fff);
}

.diagnosis-card {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    align-content: stretch;
    gap: 10px;
    min-width: 0;
    padding: 20px;
    box-shadow: 0 8px 24px rgb(23 33 43 / 5%);
}

.diagnosis-card-visual {
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--diagnosis-border);
    border-radius: 10px;
    background: var(--diagnosis-surface-raised);
}

.diagnosis-card-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.diagnosis-card-teaser {
    margin: 0;
    color: var(--site-accent, #137f63);
    font-weight: 750;
}

.card-action {
    margin: 4px 0 0;
}

.muted-action {
    color: #657386;
    font-weight: 700;
}

.card-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.diagnosis-card-name {
    flex: 1 1 170px;
    min-width: 0;
    color: var(--diagnosis-text);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--site-accent-soft, #e6f4ef);
    color: #0c634e;
    font-size: 0.82rem;
    font-weight: 700;
}

.muted-chip {
    background: #eef1f4;
    color: #526071;
}

.panel {
    padding: 18px;
}

.notice-panel {
    border-color: #a7c2e6;
    background: #f3f8ff;
}

.alert-box {
    border-color: #e4b4bd;
    background: #fff5f6;
}

.flash-panel {
    margin-bottom: 16px;
}

.success-flash {
    border-color: #99c5a9;
    background: #f0fbf4;
}

.error-flash {
    border-color: #e4b4bd;
    background: #fff5f6;
}

.empty-state {
    background: #fff;
}

.diagnosis-result-section {
    scroll-margin-top: 24px;
}

.diagnosis-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.diagnosis-result-card {
    display: grid;
    gap: 11px;
    min-width: 0;
    padding: 16px;
}

.diagnosis-result-card__topline,
.diagnosis-result-card__footer,
.diagnosis-result-owner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.diagnosis-result-card__topline {
    justify-content: space-between;
}

.diagnosis-result-card h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.diagnosis-result-summary {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--site-muted, #637083);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.diagnosis-result-owner {
    min-width: 0;
    color: var(--site-muted, #637083);
    font-size: 0.9rem;
    font-weight: 700;
}

.diagnosis-result-owner span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diagnosis-result-owner img,
.diagnosis-result-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.diagnosis-result-owner img {
    object-fit: cover;
}

.diagnosis-result-avatar {
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--site-nav-bg, #18262f);
    font-size: 0.72rem;
    font-weight: 800;
}

.diagnosis-visibility-badge {
    color: var(--site-muted, #637083);
    font-size: 0.78rem;
    font-weight: 800;
}

.diagnosis-result-card__footer {
    justify-content: space-between;
    align-self: end;
    padding-top: 4px;
}

.diagnosis-result-card__footer time {
    color: var(--site-muted, #637083);
    font-size: 0.78rem;
}

.diagnosis-detail-hero {
    max-width: 820px;
}

.diagnosis-description {
    margin-bottom: 16px;
}

.plain-list {
    margin: 0 0 12px;
    padding-left: 1.2em;
}

.small-note {
    margin-bottom: 0;
    color: #657386;
    font-size: 0.94rem;
}

.run-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.run-panel form {
    display: flex;
    justify-content: flex-end;
}

.result-list {
    display: grid;
    gap: 12px;
}

.compact-result-list .result-row {
    align-items: stretch;
}

.result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
}

.result-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 0;
}

.result-meta div,
.metric-grid div {
    min-width: 0;
    padding: 10px;
    border-radius: 6px;
    background: #f6f8fb;
}

.result-meta.compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
}

dt {
    color: #657386;
    font-size: 0.82rem;
}

dd {
    margin: 2px 0 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.meta-panel,
.state-panel,
.technical-note {
    margin-bottom: 16px;
}

.lifecycle-panel,
.image-panel,
.share-panel,
.cta-panel {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.share-actions form {
    margin: 0;
}

.share-copy-fields {
    display: grid;
    gap: 10px;
}

.share-copy-fields label {
    display: grid;
    gap: 4px;
}

.share-copy-fields label > span {
    color: #657386;
    font-size: 0.82rem;
    font-weight: 700;
}

.share-copy-fields input,
.share-copy-fields textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #c9d2df;
    border-radius: 6px;
    background: #fff;
    color: #18202b;
    font: inherit;
    resize: vertical;
}

.share-downloads {
    display: grid;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid #e1e6ed;
}

.share-downloads h3 {
    margin: 0;
}

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

.diagnosis-image-item {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.diagnosis-image-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

.diagnosis-image-heading h3,
.image-status {
    margin: 0;
}

.diagnosis-image-heading span,
.image-status {
    color: #657386;
    font-size: 0.82rem;
}

.diagnosis-image-item img,
.diagnosis-image-placeholder {
    display: block;
    width: 100%;
    min-height: 150px;
    max-height: 310px;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    background: #eef2f6;
    object-fit: contain;
}

.diagnosis-image-placeholder {
    display: grid;
    place-items: center;
    padding: 20px;
    color: #657386;
    text-align: center;
}

.lifecycle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lifecycle-actions form {
    margin: 0;
}

.share-url-box {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    background: #f6f8fb;
    overflow-wrap: anywhere;
}

.share-url-box span {
    color: #657386;
    font-size: 0.82rem;
    font-weight: 700;
}

.public-url-link {
    font-weight: 700;
}

.copy-url-field {
    display: grid;
    gap: 4px;
}

.copy-url-field input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #c9d2df;
    border-radius: 6px;
    background: #fff;
    color: #18202b;
    font: inherit;
}

.copy-status {
    min-height: 1.4em;
    margin: 0;
    color: #526071;
    font-size: 0.94rem;
}

.result-preview {
    display: grid;
    gap: 16px;
}

.result-card {
    padding: clamp(18px, 4vw, 32px);
}

.result-title {
    color: #526071;
    font-weight: 700;
}

.result-card h2 {
    margin-bottom: 10px;
    font-size: clamp(1.4rem, 4vw, 2.35rem);
    line-height: 1.18;
}

.primary-value {
    margin-bottom: 12px;
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 0;
}

.warning-list {
    margin-bottom: 0;
    padding-left: 1.2em;
}

.axis-intro-grid,
.tendency-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.axis-intro-item,
.tendency-item-grid article {
    padding: 14px;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    background: #f6f8fb;
}

.axis-intro-item h3,
.tendency-item-grid h3 {
    margin-bottom: 6px;
    font-size: 1rem;
}

.axis-intro-item p,
.tendency-item-grid p {
    margin: 0;
}

.play-style-profile-result {
    display: grid;
    gap: 16px;
}

.play-style-title-card {
    border-left: 5px solid #277c68;
}

.trait-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.trait-pair > div,
.balance-summary {
    padding: 12px;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    background: #fff;
}

.trait-pair span {
    display: block;
    margin-bottom: 4px;
    color: #657386;
    font-size: 0.82rem;
    font-weight: 700;
}

.balance-summary {
    margin-top: 10px;
}

.balance-summary p {
    margin: 4px 0 0;
}

.provisional-panel {
    border-left: 5px solid #a66b12;
}

.radar-figure {
    width: min(100%, 560px);
    margin: 0 auto;
}

.radar-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.radar-grid,
.radar-axis-line {
    fill: none;
    stroke: #c9d2df;
    stroke-width: 1;
}

.radar-data {
    fill: rgb(39 124 104 / 22%);
    stroke: #277c68;
    stroke-width: 2.5;
}

.radar-point {
    fill: #277c68;
}

.radar-label {
    fill: #263241;
    font-size: 13px;
    font-weight: 700;
}

.radar-figure figcaption {
    margin-top: 8px;
    color: #657386;
    text-align: center;
    font-size: 0.9rem;
}

.axis-value-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 0;
}

.axis-value-grid > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    background: #f6f8fb;
}

.axis-value-grid .top-axis {
    border-color: #68a696;
    background: #eef8f5;
}

.axis-value-grid dt {
    font-weight: 700;
}

.axis-value-grid dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
}

.top-trait-list {
    display: grid;
    gap: 10px;
    margin-bottom: 0;
    padding-left: 1.5em;
}

.top-trait-list p,
.tendency-value {
    margin: 4px 0 0;
}

.tendency-value {
    color: #277c68;
    font-weight: 700;
}

.steam-resume-result {
    display: grid;
    gap: 18px;
}

.steam-resume-title-card {
    border-top: 5px solid #277c68;
}

.resume-title-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.career-title-lines {
    display: grid;
    gap: 5px;
    margin: 22px 0 18px;
    color: #263241;
    font-size: 1.35rem;
    line-height: 1.45;
}

.career-title-lines strong {
    color: #1e6657;
    font-size: 1.8rem;
}

.resume-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.resume-time-grid > div {
    min-width: 0;
    padding: 13px;
    border-left: 3px solid #7aa99c;
    background: #f6f8fb;
}

.resume-time-grid dt {
    color: #657386;
    font-size: 0.84rem;
    font-weight: 700;
}

.resume-time-grid dd {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.resume-representative {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #d7dee8;
}

.resume-representative h3,
.resume-representative p {
    margin-top: 5px;
    margin-bottom: 5px;
}

.resume-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resume-timeline li {
    position: relative;
    padding: 4px 0 22px 24px;
    border-left: 2px solid #9cb9b1;
}

.resume-timeline li::before {
    position: absolute;
    top: 8px;
    left: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #277c68;
    content: '';
}

.resume-timeline h3,
.resume-timeline p {
    margin: 6px 0 0;
}

.resume-previous-title {
    padding-top: 12px;
    border-top: 1px solid #d7dee8;
    line-height: 1.6;
}

.resume-community-note {
    border-left: 4px solid #a66b12;
}

@media (max-width: 1180px) {
    .diagnosis-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 860px) {
    .diagnosis-start-panel {
        grid-template-columns: 1fr;
    }

    .diagnosis-start-action {
        width: min(100%, 360px);
    }

    .result-row {
        grid-template-columns: 1fr;
    }

    .run-panel {
        grid-template-columns: 1fr;
    }

    .run-panel form {
        justify-content: flex-start;
    }

    .diagnosis-image-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .share-actions > form,
    .share-actions > form > .pm-button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    main,
    .single-panel {
        padding: 18px 12px 36px;
    }

    .top-nav {
        padding: 14px 12px 0;
    }

    .diagnosis-grid {
        grid-template-columns: 1fr;
    }

    .diagnosis-result-grid {
        grid-template-columns: 1fr;
    }

    .diagnosis-start-panel {
        gap: 20px;
        padding: 20px 16px;
        border-radius: 10px;
    }

    .diagnosis-start-action {
        width: 100%;
    }

    .diagnosis-result-card__footer {
        align-items: stretch;
    }

    .diagnosis-result-card__footer .pm-button {
        width: 100%;
    }

    .result-meta,
    .metric-grid {
        grid-template-columns: 1fr;
    }

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

    .resume-time-grid {
        grid-template-columns: 1fr;
    }

    .career-title-lines {
        font-size: 1.08rem;
    }

    .career-title-lines strong {
        font-size: 1.35rem;
    }

    .radar-label {
        font-size: 12px;
    }
}

/*
 * Steam diagnosis dark theme.
 * Component colors flow through the semantic variables above so the shared
 * accent can be changed without editing templates or individual diagnosis pages.
 */
body.diagnosis-theme,
body.diagnosis-shell {
    min-height: 100vh;
    color: var(--diagnosis-text);
    background: var(--diagnosis-bg);
}

body.diagnosis-theme main a:not(.pm-button) {
    color: var(--diagnosis-link);
}

body.diagnosis-theme .site-page-main,
body.diagnosis-theme .diagnosis-page {
    color: var(--diagnosis-text);
    background: var(--diagnosis-bg);
}

body.diagnosis-theme .site-page-header {
    color: var(--diagnosis-text);
    border-color: var(--diagnosis-border);
    background: var(--diagnosis-surface);
    box-shadow: var(--diagnosis-shadow);
}

body.diagnosis-theme .site-page-header h1,
body.diagnosis-theme .site-page-header-aside strong {
    color: var(--diagnosis-text);
}

body.diagnosis-theme .site-page-header-summary,
body.diagnosis-theme .site-page-header-aside span,
body.diagnosis-theme .site-page-header-aside small,
body.diagnosis-theme .site-legal-footer,
body.diagnosis-theme .site-legal-footer a {
    color: var(--diagnosis-text-muted);
}

body.diagnosis-theme .diagnosis-breadcrumb,
body.diagnosis-theme .diagnosis-breadcrumb a {
    color: var(--diagnosis-text-muted);
}

body.diagnosis-theme .diagnosis-breadcrumb a:hover,
body.diagnosis-theme .diagnosis-breadcrumb a:focus-visible {
    color: var(--diagnosis-accent-hover);
}

body.diagnosis-theme .diagnosis-start-panel {
    color: var(--diagnosis-text);
    border-color: var(--diagnosis-border);
    background:
        radial-gradient(circle at 92% 15%, var(--diagnosis-accent-soft), transparent 38%),
        var(--diagnosis-surface);
    box-shadow: var(--diagnosis-shadow);
}

body.diagnosis-theme .diagnosis-start-kicker,
body.diagnosis-theme .section-eyebrow,
body.diagnosis-theme .diagnosis-card-teaser,
body.diagnosis-theme .copy-status,
body.diagnosis-theme .tendency-value,
body.diagnosis-theme .career-title-lines strong {
    color: var(--diagnosis-accent-hover) !important;
}

body.diagnosis-theme .section-heading p,
body.diagnosis-theme .hero p,
body.diagnosis-theme .preview-header p,
body.diagnosis-theme .result-summary,
body.diagnosis-theme .diagnosis-start-copy > p:not(.diagnosis-start-kicker),
body.diagnosis-theme .diagnosis-start-action small,
body.diagnosis-theme .diagnosis-result-summary,
body.diagnosis-theme .diagnosis-result-owner,
body.diagnosis-theme .diagnosis-visibility-badge,
body.diagnosis-theme .diagnosis-result-card__footer time,
body.diagnosis-theme .small-note,
body.diagnosis-theme dt,
body.diagnosis-theme .share-copy-fields label > span,
body.diagnosis-theme .diagnosis-image-heading span,
body.diagnosis-theme .image-status,
body.diagnosis-theme .share-url-box span,
body.diagnosis-theme .copy-status,
body.diagnosis-theme .result-title,
body.diagnosis-theme .trait-pair span,
body.diagnosis-theme .radar-figure figcaption,
body.diagnosis-theme .resume-time-grid dt,
body.diagnosis-theme .muted,
body.diagnosis-theme .lead,
body.diagnosis-theme .game-meta,
body.diagnosis-theme .small-label,
body.diagnosis-theme .diagnosis > span {
    color: var(--diagnosis-text-muted);
}

body.diagnosis-theme .diagnosis-point-list li::before,
body.diagnosis-theme .coverage-fill,
body.diagnosis-theme .resume-timeline li::before {
    background: var(--diagnosis-accent);
}

body.diagnosis-theme .diagnosis-card,
body.diagnosis-theme .panel,
body.diagnosis-theme .result-row,
body.diagnosis-theme .result-card,
body.diagnosis-theme .diagnosis-result-card,
body.diagnosis-theme .empty-state,
body.diagnosis-theme .game-row,
body.diagnosis-theme .share-box {
    color: var(--diagnosis-text);
    border-color: var(--diagnosis-border);
    background: var(--diagnosis-card-bg);
    box-shadow: none;
}

body.diagnosis-theme .diagnosis-card,
body.diagnosis-theme .diagnosis-result-card {
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

body.diagnosis-theme .diagnosis-result-card--public,
body.diagnosis-theme .diagnosis-result-card--own {
    border-top-color: var(--diagnosis-accent);
}

body.diagnosis-theme .diagnosis-card:hover,
body.diagnosis-theme .diagnosis-result-card:hover {
    border-color: var(--diagnosis-accent);
    background: var(--diagnosis-surface-raised);
    transform: translateY(-1px);
}

body.diagnosis-theme .chip,
body.diagnosis-theme .pill {
    color: var(--diagnosis-accent-hover);
    border-color: var(--diagnosis-accent);
    background: var(--diagnosis-accent-soft);
}

body.diagnosis-theme .muted-chip,
body.diagnosis-theme .diagnosis-visibility-badge {
    color: var(--diagnosis-text-muted);
    border-color: var(--diagnosis-border);
    background: var(--diagnosis-surface-raised);
}

body.diagnosis-theme .diagnosis-visibility-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-style: solid;
    border-width: 1px;
    border-radius: 999px;
}

body.diagnosis-theme .notice-panel {
    color: var(--diagnosis-text);
    border-color: var(--diagnosis-accent);
    background: var(--diagnosis-accent-soft);
}

body.diagnosis-theme .success-flash,
body.diagnosis-theme .notice.success {
    color: var(--diagnosis-text);
    border-color: var(--diagnosis-success);
    background: var(--diagnosis-success-soft);
}

body.diagnosis-theme .alert-box,
body.diagnosis-theme .error-flash,
body.diagnosis-theme .notice.error {
    color: var(--diagnosis-text);
    border-color: var(--diagnosis-danger);
    background: var(--diagnosis-danger-soft);
}

body.diagnosis-theme .caution,
body.diagnosis-theme .provisional-panel,
body.diagnosis-theme .resume-community-note {
    color: var(--diagnosis-text);
    border-color: var(--diagnosis-warning);
    background: var(--diagnosis-warning-soft);
}

body.diagnosis-theme :is(a, button, input, textarea, select, [tabindex]):not(.pm-button):focus-visible {
    outline: 3px solid var(--diagnosis-focus);
    outline-offset: 3px;
}

body.diagnosis-theme .result-meta div,
body.diagnosis-theme .metric-grid div,
body.diagnosis-theme .axis-intro-item,
body.diagnosis-theme .tendency-item-grid article,
body.diagnosis-theme .trait-pair > div,
body.diagnosis-theme .balance-summary,
body.diagnosis-theme .axis-value-grid > div,
body.diagnosis-theme .resume-time-grid > div,
body.diagnosis-theme .diagnosis,
body.diagnosis-theme .metric,
body.diagnosis-theme .status-grid > div {
    color: var(--diagnosis-text);
    border-color: var(--diagnosis-border);
    background: var(--diagnosis-surface-raised);
}

body.diagnosis-theme .axis-value-grid .top-axis {
    border-color: var(--diagnosis-accent);
    background: var(--diagnosis-accent-soft);
}

body.diagnosis-theme .play-style-title-card,
body.diagnosis-theme .steam-resume-title-card {
    border-color: var(--diagnosis-accent);
}

body.diagnosis-theme .career-title-lines {
    color: var(--diagnosis-text);
}

body.diagnosis-theme .resume-time-grid > div,
body.diagnosis-theme .resume-timeline li,
body.diagnosis-theme .resume-representative,
body.diagnosis-theme .resume-previous-title {
    border-color: var(--diagnosis-border);
}

body.diagnosis-theme .share-copy-fields input,
body.diagnosis-theme .share-copy-fields textarea,
body.diagnosis-theme .copy-url-field input,
body.diagnosis-theme .share-box textarea {
    color: var(--diagnosis-text);
    border-color: var(--diagnosis-border);
    background: var(--diagnosis-surface-raised);
}

body.diagnosis-theme .share-downloads,
body.diagnosis-theme .share-url-box,
body.diagnosis-theme .diagnosis-image-item img,
body.diagnosis-theme .diagnosis-image-placeholder {
    color: var(--diagnosis-text-muted);
    border-color: var(--diagnosis-border);
    background: var(--diagnosis-surface-raised);
}

body.diagnosis-theme .radar-grid,
body.diagnosis-theme .radar-axis-line {
    stroke: var(--diagnosis-border);
}

body.diagnosis-theme .radar-data {
    fill: var(--diagnosis-accent-soft);
    stroke: var(--diagnosis-accent);
}

body.diagnosis-theme .radar-point {
    fill: var(--diagnosis-accent);
}

body.diagnosis-theme .radar-label {
    fill: var(--diagnosis-text);
}

body.diagnosis-theme .result-card {
    background:
        radial-gradient(circle at 100% 0, var(--diagnosis-accent-soft), transparent 42%),
        var(--diagnosis-surface);
}

body.diagnosis-theme .coverage-bar {
    background: var(--diagnosis-surface-raised);
}

body.diagnosis-theme .social-preview {
    color: var(--diagnosis-text);
    border: 1px solid var(--diagnosis-border);
    background:
        radial-gradient(circle at 12% 8%, var(--diagnosis-accent-soft), transparent 30%),
        linear-gradient(135deg, var(--diagnosis-surface-raised), var(--diagnosis-bg));
}

body.diagnosis-theme .social-preview .title,
body.diagnosis-theme .social-preview .meta {
    color: var(--diagnosis-text-muted);
}

body.diagnosis-theme .site-navigation-overlay {
    background: var(--diagnosis-overlay);
}

.diagnosis-result-hero {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
    grid-template-areas: "visual copy";
    gap: 32px;
    align-items: center;
}

.diagnosis-result-hero__copy {
    grid-area: copy;
    min-width: 0;
}

.diagnosis-result-hero__visual {
    grid-area: visual;
    width: min(100%, 420px);
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--diagnosis-border);
    border-radius: 22px;
    background: var(--diagnosis-surface-raised);
}

.diagnosis-result-hero__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.diagnosis-result-hero__summary {
    margin: 12px 0 0;
    color: var(--diagnosis-text-muted);
    line-height: 1.65;
}

.diagnosis-result-hero__supporting,
.diagnosis-result-hero__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}

.diagnosis-result-hero__supporting > div,
.diagnosis-result-hero__metrics > div {
    min-width: 132px;
    padding: 10px 12px;
    border: 1px solid var(--diagnosis-border);
    border-radius: 14px;
    background: var(--diagnosis-surface-raised);
}

.diagnosis-result-hero__supporting dt,
.diagnosis-result-hero__metrics dt {
    color: var(--diagnosis-text-muted);
    font-size: 0.76rem;
}

.diagnosis-result-hero__supporting dd,
.diagnosis-result-hero__metrics dd {
    margin: 3px 0 0;
    color: var(--diagnosis-text);
    font-weight: 800;
}

.diagnosis-result-hero__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.diagnosis-result-hero__metrics > div {
    min-width: 0;
    padding: 8px 10px;
}

.diagnosis-result-supplemental {
    color: var(--diagnosis-text-muted);
}

.diagnosis-result-section + .diagnosis-result-section {
    margin-top: clamp(18px, 2.5vw, 28px);
}

.diagnosis-result-owner-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 24px);
    align-items: start;
}

.diagnosis-result-owner-tools > .panel {
    align-content: start;
    min-height: 0;
    margin-bottom: 0;
}

.diagnosis-result-owner-tools > .panel:only-child {
    grid-column: 1 / -1;
}

.diagnosis-result-method-notes {
    padding-block: 16px;
    border-color: var(--diagnosis-border);
    background: var(--diagnosis-surface-raised);
    font-size: 0.9rem;
    line-height: 1.55;
}

.diagnosis-result-method-notes h2 {
    color: var(--diagnosis-text-muted);
    font-size: 1rem;
}

.diagnosis-result-method-notes p,
.diagnosis-result-method-notes li {
    color: var(--diagnosis-text-muted);
}

.diagnosis-square-share-panel .diagnosis-image-grid {
    grid-template-columns: minmax(0, 420px);
}

.diagnosis-square-share-panel .pm-button-group {
    justify-content: flex-start;
}

@media (max-width: 860px) {
    .diagnosis-result-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "visual";
        gap: 16px;
    }

    .diagnosis-result-hero__visual {
        width: min(100%, 240px);
        justify-self: center;
    }
}

@media (max-width: 520px) {
    body.diagnosis-theme,
    body.diagnosis-theme .site-page-main,
    body.diagnosis-theme .diagnosis-page {
        background: var(--diagnosis-bg);
    }

    .diagnosis-result-hero__visual {
        width: min(100%, 230px);
    }

    .diagnosis-result-hero__supporting {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .diagnosis-result-hero__supporting > div {
        min-width: 0;
    }

    .diagnosis-result-owner-tools {
        grid-template-columns: minmax(0, 1fr);
    }

    .diagnosis-result-section + .diagnosis-result-section {
        margin-top: 18px;
    }
}