body {
    background: var(--parchment-dark);
}

.upgrade-page {
    max-width: 1080px;
    min-height: calc(100vh - 120px);
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

.upgrade-shell {
    overflow: hidden;
    background: var(--parchment);
    border: 2px solid var(--ink);
    box-shadow: 0 2px 12px var(--shadow);
}

.upgrade-heading,
.upgrade-toolbar,
.upgrade-record,
.upgrade-results {
    padding: 1rem 1.15rem;
}

.upgrade-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    color: var(--parchment);
    background: var(--ink);
    border-bottom: 3px solid var(--gold);
}

.upgrade-kicker {
    margin: 0 0 0.2rem;
    color: var(--gold);
    font: 700 0.68rem/1.2 monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.upgrade-heading h1,
.upgrade-record h2,
.upgrade-results h2 {
    margin: 0;
    font-weight: 500;
}

.upgrade-primary {
    display: block;
    width: 100%;
    max-width: 288px;
    height: auto;
    margin-top: 0.8rem;
    image-rendering: pixelated;
    object-fit: contain;
    object-position: left top;
    border: 1px solid rgba(44, 36, 22, 0.18);
    background: repeating-conic-gradient(rgba(44, 36, 22, 0.055) 0% 25%, transparent 0% 50%) 0 0 / 14px 14px;
}

.upgrade-heading h1 {
    color: var(--parchment);
    font-size: 1.45rem;
}

.upgrade-did,
.upgrade-profile,
.upgrade-status {
    color: var(--ink-light);
    font: 0.78rem/1.4 monospace;
}

.upgrade-did {
    max-width: 22rem;
    overflow: hidden;
    color: var(--gold-light, #e1c65a);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upgrade-toolbar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-bottom: 1px solid rgba(44, 36, 22, 0.18);
}

.upgrade-button {
    min-height: 40px;
    padding: 0.55rem 0.9rem;
    color: var(--parchment);
    background: var(--ink);
    border: 1px solid var(--ink);
    font: 600 0.86rem/1 inherit;
    cursor: pointer;
}

.upgrade-button:hover:not(:disabled) {
    color: var(--ink);
    background: var(--gold);
}

.upgrade-button:disabled {
    cursor: wait;
    opacity: 0.5;
}

.upgrade-status[data-tone="error"] { color: #9d3027; }
.upgrade-status[data-tone="success"] { color: #28623d; }

.upgrade-record {
    border-bottom: 1px solid rgba(44, 36, 22, 0.18);
}

.upgrade-record h2,
.upgrade-results h2 {
    color: var(--ink);
    font-size: 0.98rem;
}

.upgrade-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.8rem 0 0;
}

.upgrade-facts div {
    min-width: 0;
    padding: 0.55rem 0.65rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(44, 36, 22, 0.14);
}

.upgrade-facts dt {
    color: var(--ink-light);
    font: 0.68rem/1.2 monospace;
    text-transform: uppercase;
}

.upgrade-facts dd {
    overflow: hidden;
    margin: 0.25rem 0 0;
    color: var(--ink);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upgrade-results-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.upgrade-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.upgrade-card {
    min-width: 0;
    padding: 0.55rem;
    background: repeating-conic-gradient(rgba(44, 36, 22, 0.055) 0% 25%, transparent 0% 50%) 0 0 / 14px 14px;
    border: 1px solid rgba(44, 36, 22, 0.2);
}

.upgrade-card h3 {
    overflow: hidden;
    margin: 0 0 0.45rem;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upgrade-card img {
    display: block;
    width: 100%;
    max-width: 288px;
    height: auto;
    margin: 0 auto;
    image-rendering: pixelated;
}

.upgrade-card-subtitle {
    display: block;
    margin: 0.55rem 0 0.35rem;
    color: var(--ink-light);
    font: 0.66rem/1.2 monospace;
    text-transform: uppercase;
}

.upgrade-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ink-light);
    font-size: 0.86rem;
}

@media (max-width: 700px) {
    .upgrade-page { padding: 1rem 0.65rem 2rem; }
    .upgrade-heading { align-items: flex-start; flex-direction: column; }
    .upgrade-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .upgrade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
}