.idp-app {
    --idp-ink: #18313b;
    --idp-teal: #087e8b;
    --idp-gold: #f2b134;
    --idp-paper: #ffffff;
    color: var(--idp-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    border: 1px solid #d7e0e3;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f8f9;
    box-shadow: 0 8px 30px rgba(24, 49, 59, 0.1);
}

.idp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    background: var(--idp-paper);
    border-bottom: 1px solid #d7e0e3;
}

.idp-title-group h2 { margin: 0; font-size: 20px; line-height: 1.25; color: var(--idp-ink); }
.idp-title-group p { margin: 4px 0 0; color: #587078; font-size: 14px; }
.idp-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.idp-door-select { min-width: 210px; height: 38px; border: 1px solid #aebdc2; border-radius: 7px; padding: 0 34px 0 10px; background: white; color: var(--idp-ink); }
.idp-button { min-width: 38px; height: 38px; border: 1px solid #aebdc2; border-radius: 7px; padding: 0 11px; background: white; color: var(--idp-ink); font-weight: 650; cursor: pointer; }
.idp-button:hover, .idp-button:focus-visible { border-color: var(--idp-teal); color: var(--idp-teal); outline: 2px solid rgba(8, 126, 139, .2); outline-offset: 1px; }
.idp-zoom-label { min-width: 44px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.idp-status { padding: 10px 18px; background: #eef6f7; color: #31535c; }
.idp-status.is-error { background: #fff0f0; color: #8a2222; }
.idp-scroll { width: 100%; max-height: min(72vh, 760px); min-height: 420px; overflow: auto; background: #dce4e7; overscroll-behavior: contain; }
.idp-stage { position: relative; background: white; transform-origin: top left; }
.idp-canvas { display: block; }
.idp-overlay { position: absolute; inset: 0; display: block; }
.idp-hotspot { cursor: pointer; outline: none; }
.idp-hotspot rect { fill: rgba(8, 126, 139, .23); stroke: var(--idp-teal); stroke-width: 3.5; vector-effect: non-scaling-stroke; transition: fill .15s ease, stroke .15s ease; }
.idp-hotspot:hover rect, .idp-hotspot:focus-visible rect, .idp-hotspot.is-selected rect { fill: rgba(242, 177, 52, .58); stroke: #bc7300; stroke-width: 5; }
.idp-key { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 18px; background: white; border-top: 1px solid #d7e0e3; color: #587078; font-size: 13px; }
.idp-key span { width: 18px; height: 12px; background: rgba(8, 126, 139, .23); border: 2px solid var(--idp-teal); border-radius: 2px; }
.idp-modal[hidden] { display: none; }
.idp-modal { --idp-ink: #18313b; --idp-teal: #087e8b; position: fixed !important; z-index: 2147483647 !important; inset: 0 !important; display: grid; place-items: center; box-sizing: border-box; padding: 24px; isolation: isolate; }
.idp-backdrop { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(15, 30, 36, .68); cursor: default; }
.idp-dialog { position: relative; z-index: 1; width: min(900px, 94vw); max-height: 88vh; overflow: auto; padding: 26px; border-radius: 14px; background: white; box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.idp-close { position: absolute; z-index: 2; top: 10px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #edf2f3; color: var(--idp-ink); font-size: 28px; line-height: 1; cursor: pointer; }
.idp-close:hover, .idp-close:focus-visible { background: #dce9eb; outline: 2px solid var(--idp-teal); }
.idp-eyebrow { margin: 0 0 4px; color: var(--idp-teal); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.idp-dialog h3 { margin: 0 44px 14px 0; color: var(--idp-ink); font-size: 28px; }
.idp-door-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.idp-door-summary span { padding: 7px 10px; border-radius: 6px; background: #edf5f6; font-size: 13px; }
.idp-door-summary strong { margin-right: 4px; }
.idp-set-description { margin: 0 0 15px; color: #536970; }
.idp-table-wrap { overflow-x: auto; }
.idp-dialog table { width: 100%; border-collapse: collapse; font-size: 14px; }
.idp-dialog th, .idp-dialog td { padding: 9px 10px; border: 1px solid #d5dfe2; text-align: left; vertical-align: top; }
.idp-dialog th { background: #eef4f5; color: #294750; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.idp-dialog td:first-child { text-align: center; font-weight: 700; }
body.idp-modal-open { overflow: hidden; }

@media (max-width: 760px) {
    .idp-toolbar { align-items: flex-start; flex-direction: column; }
    .idp-controls { justify-content: flex-start; width: 100%; }
    .idp-controls label { flex: 1 1 100%; }
    .idp-door-select { width: 100%; }
    .idp-scroll { min-height: 340px; }
    .idp-dialog { padding: 22px 16px; }
    .idp-dialog h3 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .idp-hotspot rect { transition: none; }
}