/* DCL-OS / DataCoreLink brand palette. Keep surfaces solid: no gradients. */
:root {
    --primary: #F79522;
    --primary-hover: #FFAA3B;
    --primary-glow: rgba(247, 149, 34, 0.2);
    --navy: #292561;
    --navy-deep: #1A1740;
    --navy-border: #403B78;
    --background: #06080E;
    --surface: #0E121D;
    --text: #F2F3F8;
    --muted: #A0A8BA;
    --line: #252B3D;
    --success: #91C9AA;
    --display: "Space Grotesk", sans-serif;
    --body: "Manrope", sans-serif;
    --mono: "IBM Plex Mono", monospace;
    color-scheme: dark;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 95px;
}
body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font: 14px/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input {
    font: inherit;
}
button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}
button {
    cursor: pointer;
}
button:disabled {
    cursor: default;
}
a,
button,
input {
    outline-offset: 5px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary);
}
button {
    color: inherit;
}
.icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}
h1,
h2,
h3,
p {
    margin: 0;
}
::selection {
    background: var(--primary);
    color: var(--background);
}
.shell {
    width: min(1296px, calc(100% - 96px));
    margin-inline: auto;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
    background: var(--background);
}
.header-inner {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 29px var(--display);
    letter-spacing: -1.6px;
}
.brand-logo {
    width: 72px;
    height: auto;
    display: block;
    flex-shrink: 0;
}
.header-nav {
    display: flex;
    gap: 34px;
    font-size: 13px;
    font-weight: 600;
}
.header-nav a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
}
.header-nav a:hover,
.header-nav .nav-active {
    color: var(--text);
}
.header-nav .icon {
    width: 14px;
    height: 14px;
}
.button {
    min-height: 45px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 12px 20px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    transition:
        background 0.18s,
        transform 0.18s;
}
.button:hover {
    transform: translateY(-2px);
}
.button-outline {
    border-color: var(--line);
}
.button-outline:hover {
    background: var(--navy);
}
.button-dark {
    background: var(--primary);
    color: var(--background);
}
.button-dark:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 22px var(--primary-glow);
}
.button .icon {
    width: 17px;
    height: 17px;
}
.page-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 29px 0 23px;
}
.eyebrow,
.label {
    font: 500 10px/1.6 var(--mono);
    letter-spacing: 1.1px;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.small-square {
    height: 6px;
    width: 6px;
    background: var(--primary);
}
.intro-note {
    font-size: 11px;
    color: var(--muted);
}
.bento {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto;
    gap: 16px;
}
.hero-card {
    grid-row: auto;
    min-height: 530px;
    background: var(--surface);
    border: 1px solid var(--navy-border);
    border-radius: 20px;
    padding: 33px 36px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.edition {
    font: 9px var(--mono);
    color: var(--muted);
    letter-spacing: 0.5px;
}
.hero-card h1 {
    font: 500 clamp(46px, 4.8vw, 71px)/1.04 var(--display);
    letter-spacing: -4px;
    margin: 35px 0 22px;
}
.hero-last {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    white-space: nowrap;
}
.title-asterisk {
    display: inline-block;
    font-size: 64px;
    line-height: 0.7;
    color: var(--primary);
    font-weight: 400;
}
.hero-description {
    font-size: 13px;
    line-height: 1.9;
    max-width: 355px;
    color: var(--muted);
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 27px;
    margin-bottom: 33px;
}
.hero-caption {
    max-width: 85px;
    font: 10px/1.6 var(--mono);
    color: var(--muted);
}
.hero-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 17px;
    margin-top: auto;
    font: 8px var(--mono);
    letter-spacing: 0.7px;
    color: var(--muted);
}
.hero-bottom > span:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
}
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.hero-bottom .status-dot {
    color: var(--primary);
}
.boot-card {
    border-radius: 20px;
    padding: 25px 28px 20px;
    background: var(--navy-deep);
    color: var(--text);
    border: 1px solid var(--navy-border);
    overflow: hidden;
}
.boot-top {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
}
.boot-top .label {
    font-size: 9px;
    letter-spacing: 1.3px;
}
.boot-top .icon {
    width: 17px;
    height: 17px;
}
.server-art {
    color: var(--navy-border);
    width: 100%;
    max-width: 380px;
    margin: 8px auto 0;
    height: 92px;
}
.server-art svg {
    width: 100%;
    height: 100%;
}
.boot-copy {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 15px;
    margin: 7px 0 18px;
}
.boot-copy h2 {
    font: 400 27px/1.1 var(--display);
    letter-spacing: -1px;
}
.round-link {
    border-radius: 50%;
    width: 37px;
    height: 37px;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--primary);
}
.round-link:hover {
    background: var(--navy);
}
.command-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--navy-deep);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 10px 12px;
    min-width: 0;
}
.command-box code {
    font: 10px var(--mono);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
}
.command-prompt {
    color: var(--primary);
    font: 13px var(--mono);
}
.command-box button {
    border: 0;
    background: none;
    color: var(--primary);
    padding: 0;
    display: flex;
    margin-left: auto;
}
.command-box .icon {
    width: 15px;
    height: 15px;
}
.boot-note {
    font-size: 9px;
    color: var(--muted);
    margin-top: 9px;
}
.regions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.region-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}
.region-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.region-code {
    font: 500 12px var(--mono);
}
.region-code > span {
    padding-left: 5px;
    color: var(--muted);
}
.region-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 8px;
    color: var(--muted);
}
.region-status.is-online {
    color: var(--success);
}
.region-status .status-dot {
    width: 5px;
    height: 5px;
}
.region-card h2 {
    font: 500 19px var(--display);
    letter-spacing: -0.6px;
}
.region-card p {
    color: var(--muted);
    font-size: 10px;
    margin-top: 3px;
}
.region-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font: 8px var(--mono);
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.region-bottom .icon {
    width: 13px;
    height: 13px;
}
.library-strip {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 29px 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 56px;
}
.library-strip > div {
    display: flex;
    align-items: center;
    gap: 16px;
}
.strip-number {
    font: 400 43px/1 var(--display);
    letter-spacing: -2px;
}
.library-strip > div > span:last-child {
    font-size: 10px;
    line-height: 1.5;
    color: var(--muted);
}
.library-strip p {
    padding-left: 30px;
    border-left: 1px solid var(--line);
    font-size: 11px;
    line-height: 1.7;
    color: var(--muted);
}
.strip-tag {
    margin-left: auto;
    font: 9px var(--mono);
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
}
.strip-tag .icon {
    width: 16px;
    height: 16px;
}
.catalog-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}
.catalog-heading .eyebrow {
    font-size: 9px;
    color: var(--muted);
}
.catalog-heading h2 {
    font: 500 36px/1.2 var(--display);
    letter-spacing: -1.7px;
    margin-top: 7px;
}
.catalog-heading h2 > span {
    color: var(--primary);
}
.search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 340px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 12px 14px;
    border-radius: 10px;
}
.search-form > .icon {
    color: var(--muted);
    width: 17px;
    height: 17px;
}
.search-form input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 11px;
    color: var(--text);
}
.search-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}
.search-form input::placeholder {
    color: var(--muted);
}
.search-form button {
    background: none;
    border: 0;
    padding: 0;
    display: flex;
}
.search-form button .icon {
    width: 17px;
    height: 17px;
}
.filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px;
    font-size: 11px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 7px;
    white-space: nowrap;
    transition: background 0.15s;
}
.filter > span {
    font: 9px var(--mono);
    background: var(--navy-deep);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--muted);
}
.filter:hover {
    background: var(--navy);
}
.filter.is-active {
    background: var(--primary);
    color: var(--background);
}
.filter.is-active > span {
    background: rgba(6, 8, 14, 0.15);
    color: var(--background);
}
.results-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 18px 0;
    font-size: 10px;
    color: var(--muted);
}
.results-line > span:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 8px var(--mono);
    letter-spacing: 0.6px;
}
.results-line .icon {
    width: 14px;
    height: 14px;
}
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.image-card {
    padding: 23px 23px 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition:
        transform 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
}
.image-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 0 8px 22px var(--primary-glow);
}
.image-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.platform-icon {
    width: 41px;
    height: 41px;
    border-radius: 10px;
    background: var(--navy-deep);
    display: grid;
    place-items: center;
    color: var(--primary);
}
.platform-icon .icon {
    width: 23px;
    height: 23px;
}
.category-windows .platform-icon {
    background: var(--navy-deep);
    color: var(--primary);
}
.category-virtualizor .platform-icon {
    background: var(--navy-deep);
    color: var(--primary);
}
.category-lxc .platform-icon {
    background: var(--navy-deep);
    color: var(--primary);
}
.category-rescue .platform-icon {
    background: var(--navy-deep);
    color: var(--primary);
}
.file-format {
    font: 9px var(--mono);
    letter-spacing: 0.6px;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 3px 7px;
    color: var(--muted);
}
.image-platform {
    font: 9px var(--mono);
    color: var(--muted);
    margin-bottom: 8px;
}
.image-platform > span {
    color: var(--muted);
}
.image-card h3 {
    font: 500 20px/1.3 var(--display);
    letter-spacing: -0.6px;
    margin-bottom: 9px;
    overflow-wrap: anywhere;
}
.filename {
    font: 9px/1.8 var(--mono);
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 21px;
}
.image-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    font: 10px var(--mono);
}
.image-state {
    display: flex;
    gap: 5px;
    align-items: center;
    font: 9px var(--body);
    color: var(--primary);
}
.image-state.is-ready {
    color: var(--success);
}
.image-state .status-dot {
    width: 5px;
    height: 5px;
}
.availability {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0 17px;
    font: 8px var(--mono);
    color: var(--muted);
}
.availability > span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.availability > span > span {
    font: 9px var(--body);
}
.availability .available {
    color: var(--success);
}
.image-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}
.download-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 35px;
    font-size: 11px;
    font-weight: 700;
}
.download-link:hover {
    color: var(--primary);
}
.download-link > .icon {
    width: 16px;
    height: 16px;
    margin-right: 9px;
}
.icon-button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: none;
    display: grid;
    place-items: center;
}
.icon-button .icon {
    width: 15px;
    height: 15px;
}
.icon-button:hover {
    background: var(--navy);
}
.checksum {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    border-top: 1px dashed var(--line);
    padding: 11px 0 0;
    margin-top: 12px;
    text-align: left;
    color: var(--muted);
    min-width: 0;
}
.checksum > .icon {
    width: 12px;
    height: 12px;
}
.checksum > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    font: 8px var(--mono);
}
.checksum > span > span {
    color: var(--muted);
    padding-left: 5px;
}
.checksum:hover {
    color: var(--primary);
}
.empty-state {
    grid-column: 1/-1;
    text-align: center;
    padding: 65px 20px;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 15px;
}
.empty-state > .icon {
    width: 33px;
    height: 33px;
    color: var(--primary);
    margin-bottom: 15px;
}
.empty-state h3 {
    font: 500 25px var(--display);
    letter-spacing: -0.7px;
}
.empty-state p {
    color: var(--muted);
    margin: 10px 0 22px;
    font-size: 12px;
}
.closing-card {
    margin-top: 60px;
    border-radius: 17px;
    background: var(--navy);
    padding: 32px 38px;
    display: flex;
    align-items: center;
    gap: 35px;
    position: relative;
    overflow: hidden;
}
.closing-card .eyebrow {
    font-size: 8px;
    letter-spacing: 0.8px;
    color: var(--primary);
}
.closing-card h2 {
    font: 500 33px/1.12 var(--display);
    letter-spacing: -1.3px;
    margin-top: 12px;
}
.closing-card > .button {
    margin-left: auto;
    z-index: 1;
    margin-right: 160px;
}
.closing-art {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    font: 150px/1 var(--display);
    color: rgba(247, 149, 34, 0.35);
    pointer-events: none;
}






#toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--surface);
    color: var(--text);
    padding: 14px 22px;
    border: 1px solid var(--navy-border);
    border-radius: 10px;
    font-size: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    max-width: calc(100% - 32px);
}
#toast input {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--primary);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
}
.sr-only,
.skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    background: var(--primary);
    color: var(--background);
    padding: 12px 18px;
    z-index: 100;
}
@media (min-width: 1500px) {
    .hero-card h1 {
        font-size: 75px;
    }
}
@media (max-width: 1100px) {
    .shell {
        width: calc(100% - 56px);
    }
    .hero-card {
        padding: 28px;
    }
    .hero-card h1 {
        font-size: 55px;
        letter-spacing: -3px;
    }
    .title-asterisk {
        font-size: 48px;
    }
    .edition {
        display: none;
    }
    .hero-actions {
        gap: 12px;
    }
    .boot-card {
        padding: 23px;
    }
    .region-card {
        padding: 17px 14px;
    }
    .region-status {
        font-size: 7px;
    }
    .catalog-heading h2 {
        font-size: 31px;
    }
    .search-form {
        width: 300px;
    }
    .image-card {
        padding: 20px 18px 15px;
    }
    .closing-card > .button {
        margin-right: 125px;
    }
    .header-nav {
        gap: 22px;
    }
}
@media (max-width: 850px) {
    .shell {
        width: calc(100% - 40px);
    }
    .header-inner {
        height: 80px;
    }
    .brand {
        font-size: 26px;
    }
    .header-nav {
        display: none;
    }
    .bento {
        grid-template-columns: 1.15fr 1fr;
        gap: 12px;
    }
    .hero-card {
        padding: 24px;
        min-height: 520px;
    }
    .hero-card h1 {
        font-size: 47px;
        letter-spacing: -2.8px;
        margin-top: 43px;
    }
    .title-asterisk {
        font-size: 35px;
    }
    .hero-last {
        gap: 7px;
    }
    .hero-actions {
        align-items: start;
        flex-direction: column;
        gap: 10px;
    }
    .hero-caption {
        max-width: none;
    }
    .hero-bottom {
        font-size: 7px;
    }
    .hero-bottom > span:last-child {
        display: none;
    }
    .boot-card {
        padding: 21px;
    }
    .boot-copy h2 {
        font-size: 23px;
    }
    .regions {
        gap: 12px;
    }
    .region-top {
        align-items: start;
        flex-direction: column;
        gap: 7px;
    }
    .region-card h2 {
        font-size: 16px;
    }
    .region-card p {
        font-size: 9px;
    }
    .region-bottom {
        font-size: 7px;
    }
    .region-bottom .icon {
        display: none;
    }
    .catalog-heading {
        align-items: start;
        flex-direction: column;
        gap: 19px;
    }
    .search-form {
        width: 100%;
    }
    .image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .library-strip {
        margin-bottom: 38px;
        gap: 24px;
    }
    .library-strip p {
        padding-left: 24px;
    }
    .strip-tag {
        display: none;
    }
    .closing-card {
        padding: 28px;
    }
    .closing-card h2 {
        font-size: 29px;
    }
    .closing-card > .button {
        margin-right: 0;
    }
    .closing-art {
        display: none;
    }


}
@media (max-width: 580px) {
    .shell {
        width: calc(100% - 32px);
    }
    .header-inner {
        height: 74px;
        gap: 10px;
    }
    .brand {
        font-size: 25px;
        gap: 9px;
    }
    .brand-logo {
        width: 50px;
    }
    .brand {
        font-size: 21px;
        letter-spacing: -1px;
    }
    .admin-link {
        padding: 9px 12px;
        min-height: 37px;
        font-size: 10px;
        gap: 8px;
    }
    .admin-link .icon {
        width: 14px;
        height: 14px;
    }
    .page-intro {
        padding: 22px 0 16px;
    }
    .page-intro .eyebrow {
        font-size: 8px;
        letter-spacing: 0.7px;
    }
    .intro-note {
        display: none;
    }
    .bento {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .hero-card {
        grid-row: auto;
        min-height: auto;
        padding: 25px 24px 20px;
        border-radius: 17px;
    }
    .hero-card h1 {
        font-size: clamp(42px, 11.5vw, 65px);
        letter-spacing: -2.6px;
        margin: 31px 0 19px;
    }
    .hero-last {
        gap: 14px;
    }
    .title-asterisk {
        font-size: 46px;
    }
    .hero-description {
        font-size: 12px;
        max-width: 300px;
    }
    .hero-actions {
        flex-direction: row;
        align-items: center;
        gap: 19px;
        margin-block: 23px 29px;
    }
    .hero-actions .button {
        font-size: 11px;
        padding: 11px 15px;
        gap: 12px;
    }
    .hero-caption {
        max-width: 80px;
        font-size: 8px;
    }
    .hero-bottom > span:last-child {
        display: block;
        font-size: 6px;
    }
    .hero-bottom {
        font-size: 7px;
    }
    .boot-card {
        padding: 23px 24px;
        border-radius: 17px;
    }
    .server-art {
        height: 87px;
        margin-top: 12px;
    }
    .boot-copy h2 {
        font-size: 27px;
    }
    .boot-note {
        font-size: 9px;
    }
    .regions {
        gap: 12px;
    }
    .region-card {
        padding: 18px 16px;
        gap: 20px;
    }
    .region-top {
        flex-direction: row;
        align-items: center;
    }
    .region-status {
        font-size: 7px;
    }
    .region-code {
        font-size: 10px;
    }
    .region-card h2 {
        font-size: 18px;
    }
    .region-bottom .icon {
        display: block;
    }
    .region-bottom {
        font-size: 7px;
    }
    .library-strip {
        padding-block: 23px;
        gap: 20px;
        margin-bottom: 35px;
    }
    .strip-number {
        font-size: 38px;
    }
    .library-strip > div {
        gap: 12px;
    }
    .library-strip > div > span:last-child {
        font-size: 9px;
    }
    .library-strip p {
        font-size: 9px;
        padding-left: 20px;
    }
    .catalog-heading h2 {
        font-size: 30px;
        letter-spacing: -1.6px;
    }
    .catalog-heading .eyebrow {
        font-size: 8px;
    }
    .catalog-heading {
        margin-bottom: 20px;
    }
    .filters {
        gap: 5px;
        padding-bottom: 17px;
    }
    .filter {
        padding: 7px 9px;
        font-size: 10px;
        gap: 7px;
    }
    .filter > span {
        font-size: 8px;
    }
    .results-line > span:last-child {
        font-size: 6px;
        letter-spacing: 0;
    }
    .results-line {
        font-size: 9px;
    }
    .image-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .image-card {
        padding: 23px 23px 17px;
    }
    .image-card h3 {
        font-size: 23px;
    }
    .filename {
        font-size: 10px;
    }
    .image-platform {
        font-size: 10px;
    }
    .image-card-top {
        margin-bottom: 20px;
    }
    .image-meta {
        font-size: 11px;
    }
    .download-link {
        font-size: 12px;
        min-height: 38px;
    }
    .checksum > span {
        font-size: 9px;
    }
    .availability {
        font-size: 9px;
    }
    .availability > span > span {
        font-size: 10px;
    }
    .closing-card {
        margin-top: 35px;
        align-items: start;
        flex-direction: column;
        gap: 24px;
        padding: 28px;
    }
    .closing-card > .button {
        margin-left: 0;
    }
    .closing-card h2 {
        font-size: 32px;
    }
    .closing-art {
        display: block;
        font-size: 112px;
        right: 14px;
        top: 75%;
        opacity: 0.6;
    }



    .empty-state {
        padding: 45px 18px;
    }
    .empty-state h3 {
        font-size: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

.subcategory-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    font-size: 11px;
    color: var(--muted);
}
.subcategory-filter select {
    font: inherit;
    max-width: 100%;
    padding: 10px 12px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.subcategory-filter .button { min-height: 36px; padding: 8px 14px; }

/* Bounded catalog pages with the same category tree as the control panel. */
.catalog { scroll-margin-top: 24px; }
.catalog-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.catalog-sidebar { position: sticky; top: 20px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.category-browser > summary { padding: 18px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; cursor: pointer; }
.category-browser > summary .icon { width: 16px; height: 16px; color: var(--primary); }
.category-tree { padding: 0 8px 10px; max-height: 65vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--navy) var(--surface); }
.category-link, .category-group > summary { display: flex; align-items: center; gap: 9px; padding: 11px 10px; border-radius: 7px; font-size: 11px; color: var(--muted); cursor: pointer; }
.category-group > summary { list-style: none; }
.category-group > summary::-webkit-details-marker { display: none; }
.category-group > summary::after { content: '+'; color: var(--primary); }
.category-group[open] > summary::after { content: '−'; }
.category-group > summary .icon { width: 16px; height: 16px; flex-shrink: 0; }
.category-count { margin-left: auto; font: 9px var(--mono); color: var(--muted); }
.category-link:hover, .category-group > summary:hover { background: var(--navy-deep); color: var(--text); }
.category-link.is-active { background: var(--primary); color: var(--background); font-weight: 700; }
.category-link.is-active .category-count { color: inherit; }
.category-children { margin: 3px 0 10px 17px; border-left: 1px solid var(--line); padding-left: 7px; }
.category-children .category-link { font-size: 10px; padding: 9px 8px; }
.catalog-content { min-width: 0; }
.collection-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.collection-header h3 { font: 500 22px/1.3 var(--display); margin-top: 7px; }
.clear-filters { font-size: 10px; color: var(--primary); flex-shrink: 0; }
.catalog-content .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-content .image-card { padding: 17px; }
.catalog-content .image-card-top { margin-bottom: 12px; }
.catalog-content .filename { margin-bottom: 12px; }
.catalog-content .image-card h3 { font-size: 18px; }
.catalog-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.page-control { border: 1px solid var(--line); border-radius: 8px; padding: 11px 15px; font-size: 11px; background: var(--surface); }
a.page-control:hover { border-color: var(--primary); color: var(--primary); }
.page-control[aria-disabled] { opacity: .4; }
.page-position { font: 10px var(--mono); color: var(--muted); }
@media (min-width: 1400px) { .catalog-content .image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 850px) {
    .catalog-layout { grid-template-columns: 1fr; gap: 16px; }
    .catalog-sidebar { position: static; }
    .category-tree { max-height: 260px; }
}
@media (max-width: 580px) {
    .catalog-content .image-grid { grid-template-columns: 1fr; gap: 10px; }
    .catalog-content .image-card { padding: 15px; }
    .catalog-content .image-card-top { margin-bottom: 8px; }
    .catalog-content .platform-icon { width: 30px; height: 30px; }
    .catalog-content .platform-icon .icon { width: 17px; height: 17px; }
    .catalog-content .image-card h3 { font-size: 17px; margin-bottom: 5px; }
    .catalog-content .availability { padding: 9px 0; }
    .catalog-content .image-actions { padding-top: 8px; }
    .catalog-content .filename { margin-bottom: 8px; }
    .collection-header { padding: 15px; }
    .collection-header h3 { font-size: 19px; }
    .page-control { padding: 10px; font-size: 10px; }
    .page-position { font-size: 9px; }
}

.search-form { position: relative; scroll-margin-top: 20px; }
.search-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: min(480px, calc(100vw - 32px)); max-height: min(550px, 70vh); overflow-y: auto; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 55px rgba(0, 0, 0, .45); }
.search-dropdown[hidden] { display: none; }
.search-dropdown-heading { padding: 15px; border-bottom: 1px solid var(--line); font: 9px var(--mono); letter-spacing: .5px; color: var(--primary); }
.search-dropdown-heading > span { display: block; margin-top: 7px; font: 10px var(--body); letter-spacing: 0; color: var(--muted); }
.search-option { display: block; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.search-option:hover, .search-option[aria-selected="true"] { background: var(--navy-deep); box-shadow: inset 3px 0 var(--primary); }
.search-option-title { display: block; font-size: 12px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.search-option mark { background: transparent; color: var(--primary); }
.search-option-meta { display: block; font: 9px/1.7 var(--mono); color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.search-feedback { padding: 12px 15px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.search-form .search-view-all { width: 100%; padding: 13px 15px; border-top: 1px solid var(--line); color: var(--primary); align-items: center; justify-content: space-between; font: 600 11px var(--body); cursor: pointer; }
.search-view-all:focus-visible, .search-option:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
@media (max-width: 580px) { .search-dropdown { width: 100%; } }

/* Measured storage telemetry, refreshed without rebuilding catalog results. */
.regions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.region-card { min-width: 0; justify-content: flex-start; gap: 0; padding: 20px; }
.region-card .region-top { gap: 8px; margin-bottom: 18px; }
.region-card .region-status { font-size: 9px; line-height: 1.5; text-transform: capitalize; }
.region-card .region-status::before { content: ''; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.region-heading { margin-bottom: 14px; }
.region-heading h2 { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.region-heading p { font-size: 10px; line-height: 1.6; }
.storage-metrics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.storage-metrics > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.storage-metrics > div:last-child { border-bottom: 0; }
.storage-metrics dt { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.storage-metrics dd { margin: 0; min-width: 0; text-align: right; font: 11px/1.6 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.storage-usage { height: 4px; margin: 12px 0 16px; overflow: hidden; border-radius: 4px; background: var(--navy-deep); }
.storage-usage > span { display: block; height: 100%; max-width: 100%; background: var(--primary); border-radius: inherit; transition: width .25s ease; }
.region-card .region-bottom { margin-top: auto; padding-top: 12px; justify-content: space-between; gap: 8px; font: 9px/1.5 var(--body); }
.region-card [data-storage-checked] { min-width: 0; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.storage-refresh-label { color: var(--muted); }
@media (max-width: 1100px) and (min-width: 851px) { .regions { grid-template-columns: 1fr; } }
@media (max-width: 580px) {
    .region-card { padding: 17px 15px; }
    .region-card .region-top { margin-bottom: 14px; }
    .region-heading h2 { font-size: 15px; }
    .storage-metrics > div { gap: 6px; }
    .storage-metrics dt, .storage-metrics dd { font-size: 10px; }
    .region-card .region-bottom { font-size: 8px; }
}
@media (max-width: 360px) { .regions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .storage-usage > span { transition: none; } }

.image-platform-tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.image-platform-tags span { padding:3px 7px; border:1px solid #10b98144; border-radius:5px; color:#6ee7b7; font-size:10px; line-height:1.5; }
.image-platform-tags .is-target { color:#94a3b8; border-color:#334155; }

.site-notice{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:16px 20px;border:1px solid var(--line,#273044);border-radius:16px;background:var(--panel,#0f1420);color:var(--text,#e7edf7)}
.site-notice .icon{flex:none;color:#f79522;margin-top:2px}.site-notice p{margin:0;overflow-wrap:anywhere;white-space:pre-line}
.hero-card h1{overflow-wrap:anywhere}.hero-last{max-width:100%;white-space:normal}


/* Shared public footer: same navigation and editable identity across public pages. */
.public-footer{margin-top:48px;border-top:1px solid var(--line);background:var(--surface)}
.pf-main{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:36px;padding:48px 0 38px}
.pf-identity{max-width:320px;min-width:0}.pf-brand{display:inline-flex;align-items:center;gap:14px;font:500 23px var(--display);letter-spacing:-.5px}.pf-brand img{display:block;width:70px;height:auto;flex:none}.pf-brand span{overflow-wrap:anywhere}
.pf-identity>p{margin:18px 0;font-size:13px;line-height:1.9;color:var(--muted);overflow-wrap:anywhere}.pf-tag{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}.pf-tag .icon{color:var(--primary);width:16px;height:16px}
.pf-column{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}.pf-column h2{font-size:12px;font-weight:600;color:var(--text);margin:6px 0 8px}.pf-column>a{display:inline-flex;align-items:center;gap:7px;font-size:12px;line-height:1.6;color:var(--muted);text-decoration:none;overflow-wrap:anywhere}.pf-column>a:hover,.pf-bottom>a:hover{color:var(--primary)}.pf-column .icon,.pf-bottom .icon{width:14px;height:14px;flex:none}
.pf-bottom{display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);padding:22px 0;font-size:11px;color:var(--muted)}.pf-bottom p{margin:0;overflow-wrap:anywhere}.pf-bottom p>span{margin:0 8px;color:var(--line)}.pf-formats{margin-left:auto;font:10px var(--mono)}.pf-bottom>a{display:inline-flex;align-items:center;gap:8px;color:var(--text);margin-left:8px;flex:none}.public-footer a:focus-visible{outline:2px solid var(--primary);outline-offset:5px;border-radius:3px}
@media(max-width:900px){.pf-main{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.pf-identity{grid-column:1/-1;max-width:460px}.pf-identity>p{margin:12px 0}.pf-bottom{flex-wrap:wrap}.pf-formats{display:none}.pf-bottom>a{margin-left:auto}}
@media(max-width:580px){.public-footer{margin-top:32px}.pf-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;padding:32px 0}.pf-brand{font-size:21px}.pf-brand img{width:58px}.pf-column h2{margin-top:0}.pf-bottom{gap:16px;padding:20px 0;font-size:10px}.pf-bottom>a{margin-left:0}.pf-bottom p{width:100%}}
/* Keep the public catalog focused on searching and downloading. */
.catalog-intro{padding:36px 0 24px}.catalog-intro h1{font:500 clamp(26px,3vw,36px)/1.3 var(--display);letter-spacing:-1px;margin:0 0 10px;overflow-wrap:anywhere;white-space:pre-line}.catalog-intro p{margin:0;color:var(--muted);font-size:13px;line-height:1.8;max-width:700px}
.catalog-heading{margin-top:0;justify-content:flex-end}.header-nav{display:flex}.catalog-sidebar{top:112px}.catalog{scroll-margin-top:112px}
.pf-main{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr))}.pf-main.pf-has-support{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}.pf-bottom>a{margin-left:auto}
@media(max-width:900px){.pf-main,.pf-main.pf-has-support{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){.catalog-intro{padding-top:26px}.header-nav{gap:16px}.header-nav a{font-size:11px}.pf-bottom>a{margin-left:0}}
/* Explain the library to first-time visitors in one compact hero. */
.catalog-welcome{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:36px;margin:28px 0 26px;padding:32px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.welcome-copy{min-width:0}.welcome-label{font:10px var(--mono);letter-spacing:1px;color:var(--primary)}.catalog-welcome h1{font-size:clamp(28px,3.4vw,44px);line-height:1.2;margin:14px 0 16px;letter-spacing:-1.4px}.catalog-welcome p{max-width:600px;line-height:1.9}.welcome-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.welcome-actions .button{font-size:12px}
.welcome-uses{list-style:none;display:grid;gap:24px;margin:0;padding:8px 0 8px 30px;border-left:1px solid var(--line);min-width:0}.welcome-uses>li{display:flex;align-items:flex-start;gap:13px}.welcome-uses>li>.icon{width:22px;height:22px;color:var(--primary);flex:none;margin-top:2px}.welcome-uses h2{font-size:13px;font-weight:600;margin:0}.welcome-uses p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.7}
@media(max-width:900px){.catalog-welcome{grid-template-columns:1fr;gap:26px}.welcome-uses{grid-template-columns:repeat(3,minmax(0,1fr));border-left:0;border-top:1px solid var(--line);padding:24px 0 0;gap:18px}.welcome-uses>li{flex-direction:column;gap:9px}}
@media(max-width:580px){.catalog-welcome{margin-top:20px;padding:24px 20px;gap:24px}.catalog-welcome h1{font-size:29px;letter-spacing:-.8px}.welcome-uses{grid-template-columns:1fr;gap:18px}.welcome-uses>li{flex-direction:row;gap:12px}.welcome-actions{gap:10px}.welcome-actions .button{padding:12px 14px;font-size:11px}}
/* Compact download statistics; collection and counter rules are unchanged. */
.download-community{margin:36px 0 0}
.dc-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}.dc-heading h2{margin:0;font:500 20px/1.4 var(--display)}.dc-heading p{margin:5px 0 0;color:var(--muted);font-size:12px}.dc-since{color:var(--muted);font:10px var(--mono);flex:none}
.dc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}.dc-grid>div{min-width:0;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.dc-grid dt{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;line-height:1.5}.dc-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--navy-border);border-radius:10px;background:var(--navy-deep);color:var(--primary)}.dc-icon .icon{width:18px;height:18px}.dc-grid dd{margin:14px 0 0;font:500 34px/1.2 var(--display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dc-method{margin-top:14px}.dc-method summary{display:inline-flex;align-items:center;gap:7px;list-style:none;cursor:pointer;font-size:11px;line-height:1.6;color:var(--muted)}.dc-method summary::-webkit-details-marker{display:none}.dc-method summary .icon{width:13px;height:13px}.dc-method[open] summary .icon{transform:rotate(180deg)}.dc-method summary:focus-visible{outline:2px solid var(--primary);outline-offset:4px}.dc-method p,.dc-unavailable{margin:10px 0 0;font-size:11px;line-height:1.8;color:var(--muted);max-width:960px}
@media(max-width:680px){.dc-grid{grid-template-columns:1fr;gap:10px}.dc-grid>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px}.dc-grid dd{margin:0;font-size:28px}.dc-heading{flex-wrap:wrap;gap:8px}.download-community{margin-top:28px}.dc-grid dt{font-size:12px;gap:10px}}
/* Public image cards: consistent hierarchy, regional badges and a clear action. */
.catalog-content .image-card{padding:20px;border-radius:16px;transition:border-color .18s,box-shadow .18s}.catalog-content .image-card:hover{transform:none;border-color:#66513a;box-shadow:0 5px 20px rgba(0,0,0,.15)}.catalog-content .image-card-top{margin-bottom:16px}.image-card-badges{display:flex;align-items:center;gap:8px}.image-card-badges .image-state{padding:4px 8px;border:1px solid var(--line);border-radius:6px;font-size:10px;line-height:1.4}.image-card-badges .image-state.is-ready{border-color:#294b40;background:#10261f}.image-card-badges .file-format{font-size:10px;padding:4px 7px}
.catalog-content .image-platform{margin:0 0 8px;font:10px/1.7 var(--body)}.catalog-content .image-card h3{font-size:19px;line-height:1.35;letter-spacing:-.35px;margin:0 0 14px;min-height:2.7em}.image-specs{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--line);margin:0}.image-specs dt{font-size:10px;color:var(--muted);margin-bottom:5px}.image-specs dd{margin:0;font:12px/1.6 var(--mono);overflow-wrap:anywhere}
.catalog-content .availability{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0 18px}.catalog-content .availability>span{display:inline-flex;gap:5px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:9px/1.4 var(--body);color:var(--muted)}.catalog-content .availability>span.available{border-color:#294b40;color:var(--success)}.catalog-content .availability>span>.status-dot{width:4px;height:4px;font-size:inherit}.catalog-content .availability strong{font-weight:600}.catalog-content .availability>span>span:not(.status-dot){font-size:9px}
.catalog-content .image-actions{padding-top:14px;margin-top:auto;gap:8px}.catalog-content .download-link{justify-content:center;gap:9px;min-height:40px;padding:9px;border-radius:8px;background:var(--primary);color:#16110a;font-size:12px;text-decoration:none;transition:background-color .15s}.catalog-content .download-link:hover{background:var(--primary-hover);color:#16110a}.catalog-content .download-link>.icon{margin:0;width:16px;height:16px}.catalog-content .download-link[aria-disabled]{background:var(--line);color:var(--muted)}.catalog-content .icon-button{width:40px;height:40px;flex:none;border-radius:8px;color:var(--muted);cursor:pointer}.catalog-content .icon-button:hover{color:var(--text);background:var(--navy-deep);border-color:var(--navy-border)}.catalog-content .checksum{padding-top:12px;margin-top:14px;min-height:28px;width:100%;font:10px/1.5 var(--mono);cursor:pointer}.catalog-content .checksum:hover{color:var(--text)}.catalog-content .checksum-missing{cursor:default}.catalog-content .image-card a:focus-visible,.catalog-content .image-card button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:580px){.catalog-content .image-card{padding:18px}.catalog-content .image-card h3{font-size:19px;min-height:0}.catalog-content .platform-icon{width:38px;height:38px}.catalog-content .platform-icon .icon{width:21px;height:21px}.catalog-content .availability{padding-bottom:16px}}
.catalog-content .image-card{padding:18px}.catalog-content .image-card-top{margin-bottom:14px}.catalog-content .image-platform{font-size:11px}.catalog-content .image-card h3{min-height:0;margin-bottom:12px}.image-specs{padding:11px 0}.catalog-content .availability>span,.catalog-content .availability>span>span:not(.status-dot){font-size:10px}.catalog-content .checksum>span{font:10px/1.5 var(--mono)}

/* Brand Distro Logo in Catalog Card */
.brand-distro-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    transition: transform 0.2s ease;
}
.image-card:hover .brand-distro-icon {
    transform: scale(1.12);
}