.xml-reader-page {
    min-height: calc(100vh - 72px);
    overflow-x: hidden;
    padding-bottom: 70px
}

.xml-reader-hero {
    padding: 64px 0 116px;
    background: linear-gradient(135deg,#0b1728 0%,#123b50 56%,#0b7663 100%);
    color: #fff;
    text-align: center
}

.xml-reader-breadcrumb {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 17px;
    color: #a8bdcb;
    font-size: 11px
}

.xml-reader-breadcrumb a:hover {
    color: #72e3cd
}

.xml-reader-kicker,
.xml-section-label {
    color: #72e3cd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em
}

.xml-reader-hero h1 {
    margin: 12px 0 10px;
    font-size: clamp(34px,5vw,54px);
    line-height: 1.1
}

.xml-reader-hero p {
    max-width: 650px;
    margin: 0 auto;
    color: #cfdae5;
    font-size: 15px;
    line-height: 1.7
}

.xml-reader-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 290px;
    gap: 24px;
    align-items: start;
    margin-top: -70px
}

.xml-reader-card,
.xml-privacy-card {
    min-width: 0;
    border: 1px solid #dce4ec;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(15,23,42,.12)
}

.xml-reader-card {
    min-width: 0;
    padding: 28px
}

.xml-drop-zone {
    display: grid;
    width: 100%;
    min-width: 0;
    justify-items: center;
    min-height: 310px;
    padding: 48px 24px;
    border: 2px dashed #b8c9d8;
    border-radius: 15px;
    background: #f8fbfc;
    text-align: center;
    transition: border-color .2s,background .2s,transform .2s
}

.xml-drop-zone.is-dragging {
    border-color: #0b7663;
    background: #edf9f6;
    transform: translateY(-2px)
}

.xml-file-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 16px;
    background: #dff5ef;
    color: #08705e;
    font-size: 21px;
    font-weight: 900
}

.xml-drop-zone h2 {
    margin: 18px 0 6px;
    color: #132238;
    font-size: 22px
}

.xml-drop-zone p {
    max-width: 100%;
    margin: 0 0 20px;
    color: #66758a;
    font-size: 13px;
    overflow-wrap: anywhere
}

.xml-drop-zone small {
    margin-top: 13px;
    color: #8693a5;
    font-size: 11px
}

.xml-select-button,
.xml-secondary-button {
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800
}

.xml-select-button {
    padding: 11px 18px;
    background: #0b7663;
    color: #fff
}

.xml-select-button:hover {
    background: #075f50
}

.xml-message {
    margin-top: 18px;
    padding: 13px 15px;
    border: 1px solid #f0b8b8;
    border-radius: 10px;
    background: #fff1f1;
    color: #a32626;
    font-size: 12px;
    line-height: 1.6
}

.xml-message.is-success {
    border-color: #a8ddcf;
    background: #ecfaf6;
    color: #086252
}

.xml-progress {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #d7e1e9;
    border-radius: 11px;
    background: #f8fafc
}

.xml-progress > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
    color: #34445b;
    font-size: 12px
}

.xml-progress-track {
    display: block;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: #dfe7ed
}

.xml-progress-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#0b7663,#1b97bc);
    transition: width .15s
}

.xml-result {
    margin-top: 24px
}

.xml-result-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start
}

.xml-result-header h2 {
    overflow-wrap: anywhere;
    margin: 5px 0 4px;
    color: #15243a;
    font-size: 18px
}

.xml-result-header p {
    margin: 0;
    color: #718095;
    font-size: 11px
}

.xml-secondary-button {
    flex: 0 0 auto;
    padding: 9px 12px;
    background: #e9f2f4;
    color: #0b6658
}

.xml-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-top: 22px;
    padding: 10px;
    border: 1px solid #dbe3eb;
    border-radius: 11px;
    background: #f7f9fb
}

.xml-view-tabs {
    display: flex;
    gap: 5px
}

.xml-view-tabs button {
    border: 0;
    border-radius: 8px;
    padding: 8px 11px;
    background: transparent;
    color: #637188;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer
}

.xml-view-tabs button.is-active {
    background: #fff;
    color: #08705e;
    box-shadow: 0 2px 8px rgba(15,23,42,.1)
}

.xml-search {
    width: min(300px,45%)
}

.xml-search input {
    width: 100%;
    border: 1px solid #cfd9e3;
    border-radius: 8px;
    outline: 0;
    padding: 8px 10px;
    background: #fff;
    color: #172033;
    font-size: 11px
}

.xml-search input:focus {
    border-color: #0b7663;
    box-shadow: 0 0 0 3px rgba(11,118,99,.12)
}

.xml-search-status {
    min-height: 17px;
    margin: 8px 2px;
    color: #748297;
    font-size: 11px
}

.xml-tree,
.xml-formatted {
    overflow: auto;
    max-height: 620px;
    border: 1px solid #dce4ec;
    border-radius: 12px;
    background: #101b2b;
    color: #dce8f3;
    font-family: Consolas,"Courier New",monospace;
    font-size: 12px;
    line-height: 1.65
}

.xml-tree {
    padding: 18px
}

.xml-node {
    margin-left: 18px
}

.xml-node:first-child {
    margin-left: 0
}

.xml-node summary {
    cursor: pointer;
    color: #79e2ce
}

.xml-node-name {
    color: #79e2ce
}

.xml-attribute {
    color: #f2c879
}

.xml-node-value,
.xml-comment {
    color: #d9e3ec;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.xml-comment {
    color: #8fa2b4
}

.xml-formatted {
    margin: 0;
    padding: 18px;
    white-space: pre;
    tab-size: 2
}

.xml-privacy-card {
    padding: 24px
}

.xml-privacy-card h2 {
    margin: 0 0 10px;
    color: #17283e;
    font-size: 17px
}

.xml-privacy-card p,
.xml-privacy-card li {
    color: #65748a;
    font-size: 12px;
    line-height: 1.7;
    overflow-wrap: anywhere
}

.xml-privacy-card ul {
    margin: 14px 0 0;
    padding-left: 18px
}

.xml-privacy-card li + li {
    margin-top: 7px
}

@media(max-width:900px) {
    .xml-reader-layout {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .xml-reader-hero {
        padding: 48px 0 96px
    }

    .xml-reader-card {
        padding: 17px
    }

    .xml-drop-zone {
        min-height: 280px;
        padding: 38px 16px
    }

    .xml-result-header,
    .xml-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .xml-search {
        width: 100%
    }
}