/* The HTML hidden attribute must win over component display rules. */
[hidden] {
    display: none !important;
}

:root {
    --bg: #101411;
    --bg-soft: #151b17;
    --panel: #1a211c;
    --panel-2: #202922;
    --panel-3: #273229;
    --line: #354238;
    --line-soft: #2a352d;
    --text: #eef4ef;
    --muted: #9dac9f;
    --muted-2: #718076;
    --accent: #8fc64a;
    --accent-strong: #a8dc67;
    --accent-soft: rgba(143, 198, 74, .14);
    --blue: #79b8ff;
    --orange: #efb366;
    --danger: #ee7d7d;
    --shadow: 0 18px 55px rgba(0, 0, 0, .24);
    --radius: 14px;
    --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% -10%, rgba(143, 198, 74, .12), transparent 29rem),
        var(--bg);
    color: var(--text);
    font-family: var(--sans);
}

button, input { font: inherit; }
button { color: inherit; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    padding: 10px clamp(18px, 3vw, 42px);
    background: rgba(16, 20, 17, .88);
    border-bottom: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(16px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--accent-strong), #679b2c);
    color: #15200d;
    font-weight: 900;
    letter-spacing: -.04em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: .98rem; }
.brand small { margin-top: 1px; color: var(--muted); font-size: .73rem; }

.topbar-actions { display: flex; gap: 8px; }

.app-shell {
    width: min(1600px, 100%);
    margin: 0 auto;
    padding: clamp(20px, 3vw, 42px);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: end;
    padding: clamp(18px, 4vw, 48px) 0 30px;
}

.eyebrow {
    margin: 0 0 9px;
    color: var(--accent-strong);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.hero h1 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.hero-copy {
    max-width: 800px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: clamp(.98rem, 1.4vw, 1.15rem);
    line-height: 1.65;
}

.hero-stat {
    display: grid;
    justify-items: end;
    padding: 10px 0;
}

.hero-stat strong {
    color: var(--accent-strong);
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: .9;
    letter-spacing: -.07em;
}

.hero-stat span { margin-top: 6px; color: var(--muted); }

.schema-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 14px 0 18px;
}

.filter-field { width: min(440px, 100%); }
.filter-field span,
.search-grid label > span {
    display: block;
    margin: 0 0 6px;
    color: var(--muted);
    font-size: .73rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .08em;
}

input[type="search"] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: none;
    background: #121713;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input[type="search"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(143,198,74,.12);
    background: #151b17;
}

input::placeholder { color: #657168; }

.schema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.schema-card {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 13px;
    align-items: center;
    width: 100%;
    padding: 15px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.017), transparent), var(--panel);
    text-align: left;
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.schema-card:hover {
    transform: translateY(-1px);
    border-color: #4c5e50;
    background: var(--panel-2);
}

.schema-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font: 800 .74rem/1 var(--mono);
    letter-spacing: .04em;
}

.schema-card-text { min-width: 0; }
.schema-card-text strong,
.schema-card-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schema-card-text strong { font: 700 .95rem/1.3 var(--mono); }
.schema-card-text small { margin-top: 4px; color: var(--muted); font-size: .76rem; }
.schema-arrow { color: var(--muted-2); font-size: 1.7rem; }

.empty-state {
    padding: 55px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    text-align: center;
}

.ghost-button,
.primary-button,
.crumb-home {
    border-radius: 8px;
    cursor: pointer;
    transition: .14s ease;
}

.ghost-button {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
}
.ghost-button:hover:not(:disabled) { border-color: #58685b; color: var(--text); background: rgba(255,255,255,.03); }
.ghost-button:disabled { opacity: .4; cursor: default; }

.primary-button {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #9bd052;
    background: linear-gradient(180deg, #a4d861, #83b943);
    color: #13200c;
    font-weight: 800;
}
.primary-button:hover { filter: brightness(1.06); }

.browser-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 1px 0 14px;
}

.crumb-home {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
}
.crumb-home:hover { color: var(--accent-strong); }
.crumb-separator { padding: 0 7px; color: var(--muted-2); }
.browser-heading strong { font-family: var(--mono); }
.schema-meta { color: var(--muted); font-size: .78rem; }

.search-panel {
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
    gap: 10px;
    align-items: end;
}

.search-actions { display: flex; gap: 7px; }
.search-hint { margin-top: 8px; color: var(--muted-2); font-size: .72rem; }

.loading-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 280px;
    color: var(--muted);
}
.loading-panel strong, .loading-panel span { display: block; }
.loading-panel strong { color: var(--text); }
.loading-panel span { margin-top: 3px; font-size: .78rem; }
.spinner {
    width: 25px;
    height: 25px;
    border: 3px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.browser-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 370px);
    gap: 14px;
    align-items: start;
    margin-top: 14px;
}

.tree-pane,
.details-pane {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.tree-pane { min-width: 0; overflow: hidden; }
.details-pane { position: sticky; top: 80px; min-height: 220px; padding: 15px; }

.pane-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 49px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
}
.pane-heading strong { font-size: .88rem; }
.pane-heading [data-result-count] { margin-left: 8px; color: var(--muted); font-size: .75rem; }
.legend { display: flex; gap: 12px; color: var(--muted-2); font-size: .69rem; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; }
.dot.optional { background: var(--blue); }
.dot.repeated { background: var(--orange); }

.tree {
    min-height: 260px;
    padding: 9px 0 18px;
    overflow: auto;
    outline: none;
    font-family: var(--mono);
    font-size: .86rem;
}

.tree-node { --depth: 0; }
.node-row {
    display: grid;
    grid-template-columns: 22px minmax(0,1fr) auto;
    align-items: center;
    min-height: 34px;
    padding: 2px 12px 2px calc(10px + var(--depth) * 20px);
    border-left: 2px solid transparent;
}
.node-row:hover { background: rgba(255,255,255,.025); }
.node-row.selected { background: var(--accent-soft); border-left-color: var(--accent); }

.expand-button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 25px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.expand-button[disabled] { opacity: .22; cursor: default; }
.expand-button .chevron { display: inline-block; transition: transform .12s ease; }
.tree-node.expanded > .node-row .chevron { transform: rotate(90deg); }

.tag-button,
.attr-button {
    min-width: 0;
    padding: 3px 5px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
}
.tag-button:hover, .attr-button:hover { background: rgba(255,255,255,.04); }
.tag-name { color: #d7eac2; font-weight: 650; }
.angle { color: #75847a; }

.node-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; padding-left: 10px; }
.badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(0,0,0,.12);
    font: 600 .66rem/1 var(--sans);
    white-space: nowrap;
}
.badge.optional { color: var(--blue); border-color: rgba(121,184,255,.28); }
.badge.repeated { color: var(--orange); border-color: rgba(239,179,102,.28); }
.badge.alias { color: var(--accent-strong); border-color: rgba(143,198,74,.3); background: rgba(143,198,74,.06); }
.badge.type { color: #c9b1ff; border-color: rgba(201,177,255,.25); }
.badge.variant-only { margin-left: 7px; color: var(--orange); border-color: rgba(239,179,102,.28); background: rgba(239,179,102,.06); vertical-align: middle; }

.node-attributes {
    display: none;
    margin: 0 0 3px calc(34px + var(--depth) * 20px);
    padding: 0 12px 4px 10px;
    border-left: 1px solid var(--line-soft);
}
.attribute-row {
    display: grid;
    grid-template-columns: minmax(120px, .75fr) minmax(120px, .85fr) minmax(100px, 1fr);
    gap: 8px;
    align-items: baseline;
    min-height: 27px;
    padding: 3px 5px;
    border-radius: 6px;
    color: var(--muted);
}
.attribute-row:hover { background: rgba(255,255,255,.02); }
.attr-name { color: #9bc8ff; }
.attr-type { color: #b4a4d8; font-size: .78rem; }
.attr-values { color: #d8b77f; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.required-star { color: var(--danger); }

.node-children { display: none; }
.tree-node.expanded > .node-attributes,
.tree-node.expanded > .node-children { display: block; }

.search-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 9px 14px 5px;
    color: var(--muted-2);
    font: .72rem/1.45 var(--mono);
}
.search-path-link {
    position: relative;
    padding: 1px 2px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.search-path-link:not(:last-child)::after {
    content: " ›";
    color: #526057;
}
.search-path-link:hover,
.search-path-link:focus-visible {
    color: var(--accent-strong);
    background: rgba(255,255,255,.04);
    outline: none;
}
.search-path-link:focus-visible {
    box-shadow: 0 0 0 1px var(--accent);
}
.search-result {
    margin: 7px 9px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: #171d19;
    overflow: hidden;
}
.search-result > .tree-node > .node-row { padding-left: 10px; }
.search-result > .tree-node > .node-attributes { margin-left: 34px; }
.search-result > .tree-node > .node-children .node-row { padding-left: 30px; }
.search-match-note {
    padding: 0 14px 9px;
    color: var(--accent-strong);
    font: 600 .71rem/1.4 var(--sans);
}
mark {
    padding: 0;
    border-radius: 2px;
    background: rgba(255, 214, 92, .25);
    color: #ffe79b;
}

.details-placeholder { color: var(--muted); }
.details-placeholder strong { color: var(--text); }
.details-placeholder p { margin: 9px 0 0; font-size: .83rem; line-height: 1.55; }
.details-kicker { color: var(--muted-2); font: 700 .69rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .09em; }
.details-title { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--text); font: 700 1rem/1.4 var(--mono); }
.details-path { margin: 7px 0 0; color: var(--muted-2); font: .7rem/1.45 var(--mono); overflow-wrap: anywhere; }
.details-section { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line-soft); }
.details-section h3 { margin: 0 0 8px; color: var(--muted); font-size: .73rem; text-transform: uppercase; letter-spacing: .07em; }
.details-section p { margin: 0; font-size: .83rem; line-height: 1.58; }
.detail-list { display: grid; gap: 7px; margin: 0; }
.detail-list div { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 8px; font-size: .78rem; }
.detail-list dt { color: var(--muted-2); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.value-list { display: flex; flex-wrap: wrap; gap: 5px; }
.value-chip { padding: 3px 6px; border-radius: 6px; background: var(--panel-3); color: #e8c88f; font: .72rem/1.3 var(--mono); }
.alias-list { color: var(--accent-strong); font: .75rem/1.55 var(--mono); }

.xml-copy-controls { display: grid; gap: 11px; }
.xml-copy-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.xml-copy-button { min-height: 36px; padding: 7px 9px; font-size: .75rem; line-height: 1.25; }
.xml-copy-options { display: grid; gap: 7px; }
.xml-copy-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 7px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    background: var(--panel-2);
    cursor: pointer;
}
.xml-copy-option:has(input:disabled) { opacity: .5; cursor: default; }
.xml-copy-option input { margin: 2px 0 0; accent-color: var(--accent); }
.xml-copy-option-copy { min-width: 0; }
.xml-copy-option-copy strong,
.xml-copy-option-copy small { display: block; }
.xml-copy-option-copy strong { font-size: .76rem; font-weight: 650; line-height: 1.35; }
.xml-copy-option-copy small { margin-top: 2px; color: var(--muted-2); font-size: .68rem; line-height: 1.35; }
.xml-copy-note { margin: 0; color: var(--muted-2); font-size: .7rem !important; line-height: 1.45 !important; }
.copy-textarea-fallback {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.copy-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #202922;
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: .78rem;
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
    transition: .16s ease;
}
.copy-toast.show { opacity: 1; transform: translateY(0); }

.copy-sandbox {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 1100px;
    pointer-events: none;
}

.no-copy { user-select: none; }

@media (max-width: 980px) {
    .browser-layout { grid-template-columns: 1fr; }
    .details-pane { position: static; }
    .search-grid { grid-template-columns: 1fr 1fr; }
    .search-actions { align-self: end; }
}

@media (max-width: 660px) {
    .topbar { padding-inline: 14px; }
    .brand small { display: none; }
    .topbar-actions [data-collapse-all] { display: none; }
    .app-shell { padding: 15px; }
    .hero { grid-template-columns: 1fr; gap: 10px; }
    .hero-stat { display: none; }
    .search-grid { grid-template-columns: 1fr; }
    .browser-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .schema-meta { display: none; }
    .legend { display: none; }
    .node-row { grid-template-columns: 22px minmax(0,1fr); }
    .node-badges { grid-column: 2; justify-content: flex-start; padding: 0 5px 4px; }
    .attribute-row { grid-template-columns: minmax(100px, 1fr) 1fr; }
    .attr-values { grid-column: 1 / -1; }
    .xml-copy-buttons { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f4f6f3;
        --bg-soft: #edf1eb;
        --panel: #ffffff;
        --panel-2: #f8faf7;
        --panel-3: #eef3eb;
        --line: #cfd9cc;
        --line-soft: #dde5da;
        --text: #1e2720;
        --muted: #647068;
        --muted-2: #849087;
        --accent: #5c8f20;
        --accent-strong: #4e7c18;
        --accent-soft: rgba(92, 143, 32, .1);
        --shadow: 0 16px 45px rgba(39, 54, 42, .08);
    }
    body { background: radial-gradient(circle at 15% -10%, rgba(92,143,32,.1), transparent 29rem), var(--bg); }
    .topbar { background: rgba(244,246,243,.9); }
    input[type="search"] { background: #fff; }
    input[type="search"]:focus { background: #fff; }
    .search-result { background: #fafcf9; }
    .tag-name { color: #36571d; }
    .angle { color: #8b978d; }
    .attr-name { color: #225f9c; }
    .attr-type { color: #705897; }
    .attr-values { color: #805c24; }
    .copy-toast { background: #fff; }
}