.osm-premium {
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(circle at 12% 24%, rgba(115, 196, 124, .11), transparent 31%),
        radial-gradient(circle at 88% 76%, rgba(78, 160, 232, .07), transparent 30%),
        #070a09;
}

#api-openstreetmap-overpass .mdk-split__panel:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.osm-premium__heading { margin-bottom: 48px; }

.osm-premium__workspace {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(480px, 1.06fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(5, 9, 8, .93);
    box-shadow: 0 38px 96px rgba(0, 0, 0, .3);
}

.osm-premium__query,
.osm-premium__snapshot { min-height: 510px; padding: 29px 32px; }
.osm-premium__query { border-right: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(145deg, rgba(115, 196, 124, .05), transparent 64%); }

.osm-premium__panel-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .11); }
.osm-premium__panel-head div { display: grid; gap: 5px; }
.osm-premium__panel-head span,
.osm-premium__panel-head small { color: rgba(255, 255, 255, .4); font-family: "Roboto Mono", monospace; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.osm-premium__panel-head strong { color: #eef4f1; font-size: 14px; }
.osm-premium__panel-head > small { color: var(--dwp-accent); }
.osm-premium__panel-head > small i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--dwp-accent); box-shadow: 0 0 14px var(--dwp-accent); }

.osm-premium__editor { margin-top: 18px; overflow: hidden; border: 1px solid rgba(115, 196, 124, .19); border-radius: 8px; background: #060a08; box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.osm-premium__editor ol { margin: 0; padding: 19px 20px 18px 49px; counter-reset: line; }
.osm-premium__editor li { min-height: 36px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .08); color: rgba(218, 239, 221, .75); font-family: "Roboto Mono", monospace; font-size: 10px; line-height: 1.55; }
.osm-premium__editor li::marker { color: rgba(255, 255, 255, .23); font-size: 8px; }
.osm-premium__editor code { color: inherit; background: none; }
.osm-premium__editor-foot { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 18px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .015); }
.osm-premium__editor-foot span { padding: 4px 7px; border: 1px solid rgba(115, 196, 124, .16); border-radius: 3px; color: #8ccf95; font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }

.osm-premium__result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; }
.osm-premium__result div { display: grid; gap: 5px; padding: 17px 15px; }
.osm-premium__result div + div { border-left: 1px solid rgba(255, 255, 255, .08); }
.osm-premium__result span,
.osm-premium__result small { color: rgba(255, 255, 255, .35); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.osm-premium__result strong { color: #eff5f1; font-size: 20px; font-weight: 500; }

.osm-premium__snapshot-card { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); margin-top: 18px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; }
.osm-premium__snapshot-card > div { display: grid; gap: 5px; padding: 16px; }
.osm-premium__snapshot-card span,
.osm-premium__snapshot-card small { color: rgba(255, 255, 255, .36); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.osm-premium__snapshot-card strong { color: #eef5f1; font-size: 15px; }
.osm-premium__snapshot-card > i { display: grid; place-items: center; border-inline: 1px solid rgba(255, 255, 255, .08); color: #79c583; font-size: 18px; font-style: normal; }

.osm-premium__diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.osm-premium__diff article { display: grid; gap: 5px; padding: 14px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; }
.osm-premium__diff article > span { font-family: "Roboto Mono", monospace; font-size: 14px; }
.osm-premium__diff article.is-added > span { color: var(--dwp-accent); }
.osm-premium__diff article.is-updated > span { color: #e0bc55; }
.osm-premium__diff article.is-removed > span { color: #df7464; }
.osm-premium__diff div { display: grid; gap: 4px; }
.osm-premium__diff strong { color: rgba(255, 255, 255, .78); font-size: 10px; }
.osm-premium__diff small { color: rgba(255, 255, 255, .34); font-size: 8px; line-height: 1.4; }

.osm-premium__review { display: grid; gap: 7px; margin-top: 14px; padding: 17px; border-left: 2px solid #e0bc55; background: rgba(224, 188, 85, .04); }
.osm-premium__review > span { color: #e0bc55; font-family: "Roboto Mono", monospace; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.osm-premium__review div { display: flex; justify-content: space-between; gap: 10px; }
.osm-premium__review div strong { color: #eff5f1; font-size: 11px; }
.osm-premium__review div small { color: rgba(255, 255, 255, .37); font-size: 8px; }
.osm-premium__review p { margin: 0; color: rgba(255, 255, 255, .55); font-size: 10px; line-height: 1.55; }
.osm-premium__review b { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .78); font-size: 11px; }
.osm-premium__review iconify-icon { color: #e0bc55; font-size: 17px; }

.osm-premium__pipeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    list-style: none;
    background: rgba(255, 255, 255, .018);
}
.osm-premium__pipeline li { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 5px 10px; padding: 20px 21px; }
.osm-premium__pipeline li + li { border-left: 1px solid rgba(255, 255, 255, .09); }
.osm-premium__pipeline li > span { grid-row: 1 / span 2; color: #79c583; font-family: "Roboto Mono", monospace; font-size: 8px; }
.osm-premium__pipeline li div { display: grid; gap: 4px; }
.osm-premium__pipeline strong { color: #eef4f1; font-size: 11px; }
.osm-premium__pipeline small { color: rgba(255, 255, 255, .38); font-size: 8px; }

.osm-premium__proof {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 34px;
    align-items: end;
    margin-top: 24px;
    padding: 28px 30px;
    border: 1px solid rgba(121, 197, 131, .2);
    border-radius: 10px;
    background: linear-gradient(110deg, rgba(121, 197, 131, .065), rgba(78, 160, 232, .025));
}
.osm-premium__proof h3 { max-width: 850px; margin: 8px 0 10px; color: #f1f5f3; font-size: clamp(22px, 2.35vw, 34px); line-height: 1.15; }
.osm-premium__proof div > p:last-child { max-width: 940px; margin: 0; color: rgba(255, 255, 255, .61); font-size: 13px; line-height: 1.7; }
.osm-premium__proof .dwp-premium__button { white-space: nowrap; }

@media (max-width: 1080px) {
    .osm-premium__workspace { grid-template-columns: 1fr; }
    .osm-premium__query,
    .osm-premium__snapshot { min-height: auto; }
    .osm-premium__query { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
}

@media (max-width: 767px) {
    .osm-premium__heading { margin-bottom: 34px; }
    .osm-premium__query,
    .osm-premium__snapshot { padding: 24px 20px; }
    .osm-premium__result,
    .osm-premium__diff { grid-template-columns: 1fr; }
    .osm-premium__result div + div { border-top: 1px solid rgba(255, 255, 255, .08); border-left: 0; }
    .osm-premium__snapshot-card { grid-template-columns: 1fr; }
    .osm-premium__snapshot-card > i { height: 38px; border-top: 1px solid rgba(255, 255, 255, .08); border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-left: 0; }
    .osm-premium__snapshot-card > i iconify-icon { transform: rotate(90deg); }
    .osm-premium__pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .osm-premium__pipeline li:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, .09); border-left: 0; }
    .osm-premium__pipeline li:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .09); }
    .osm-premium__proof { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
    .osm-premium__proof .dwp-premium__button { width: 100%; white-space: normal; }
}

@media (max-width: 420px) {
    .osm-premium__review div { align-items: flex-start; flex-direction: column; }
    .osm-premium__pipeline { grid-template-columns: 1fr; }
    .osm-premium__pipeline li + li { border-top: 1px solid rgba(255, 255, 255, .09); border-left: 0; }
}