.ma-room{
    --ma-pin-pending:#ef4444;
    --ma-pin-visited:#22c55e;
    --ma-pin-text:#ffffff;
    --ma-pin-size:40px;
    --ma-pin-zoom-scale:1;
    --ma-map-card-bg:#ffffff;
    --ma-map-card-border:#dbe5f0;
    --ma-map-card-border-width:1px;
    --ma-map-card-radius:28px;
    --ma-map-card-padding:18px;
    --ma-map-width:100%;
    --ma-guide-font-size:15px;
    --ma-guide-title-color:#0f172a;
    --ma-guide-text-color:#64748b;
    --ma-guide-bg:#ffffff;
    --ma-guide-border:#dbe5f0;
    --ma-guide-radius:18px;
    --ma-guide-padding-y:12px;
    --ma-guide-padding-x:14px;
    --ma-list-font-size:17px;
    --ma-list-text-color:#0f172a;
    --ma-list-status-color:#64748b;
    --ma-list-bg:#ffffff;
    --ma-list-border:#dbe5f0;
    --ma-list-radius:22px;
    --ma-list-padding-y:16px;
    --ma-list-padding-x:16px;
    --ma-legend-layout:row;
    --ma-legend-font-size:15px;
    --ma-legend-text-color:#475569;
    --ma-legend-bg:#ffffff;
    --ma-legend-border:#dbe5f0;
    --ma-legend-radius:20px;
    --ma-legend-padding-y:16px;
    --ma-legend-padding-x:18px;
    --ma-legend-gap:14px;
    --ma-legend-offset-x:12px;
    --ma-legend-offset-y:12px;
    --ma-map-rotation:0deg;
    --ma-active-pin-ring:#2563eb;
    --ma-active-pin-scale:1.08;
    --ma-active-list-bg:#eff6ff;
    --ma-active-list-border:#93c5fd;
    --ma-active-list-text:#0f172a;
    --ma-zoom-button-bg:#0f172a;
    --ma-zoom-button-text:#ffffff;
    --ma-zoom-button-border:#0f172a;
    --ma-zoom-button-radius:999px;
    --ma-zoom-button-font-size:16px;
    display:flex;
    flex-direction:column;
    gap:18px;
    width:min(100%,1080px);
    margin:0 auto;
    font-family:inherit;
    color:inherit;
}

.ma-room button,
.ma-room input,
.ma-room textarea,
.ma-room select,
.ma-room summary{
    font:inherit;
}

.ma-room__header{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
}

.ma-room__title{
    margin:0 0 8px;
    font-size:clamp(1.8rem,3vw,2.5rem);
    line-height:1.08;
}

.ma-room__description{
    font-family:inherit;
    color:#516174;
    line-height:1.7;
}

.ma-room__description > *:first-child{
    margin-top:0;
}

.ma-room__description > *:last-child{
    margin-bottom:0;
}

.ma-room__guide{
    min-width:220px;
    padding:var(--ma-guide-padding-y) var(--ma-guide-padding-x);
    border-radius:var(--ma-guide-radius);
    border:1px solid var(--ma-guide-border);
    background:var(--ma-guide-bg);
    font-family:var(--ma-guide-font-family, inherit);
}

.ma-room__guide summary{
    cursor:pointer;
    font-weight:700;
    color:var(--ma-guide-title-color);
    font-size:var(--ma-guide-font-size);
}

.ma-room__guide-body{
    padding-top:12px;
    color:var(--ma-guide-text-color);
    line-height:1.65;
    font-size:var(--ma-guide-font-size);
}

.ma-room__guide-body p{
    margin:0 0 10px;
}

.ma-room__guide-body p:last-child{
    margin-bottom:0;
}

.ma-room__map-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:min(100%, var(--ma-map-width));
    max-width:100%;
    align-self:flex-start;
    padding:var(--ma-map-card-padding);
    border-radius:var(--ma-map-card-radius);
    background:var(--ma-map-card-bg);
    border:var(--ma-map-card-border-width) solid var(--ma-map-card-border);
    box-shadow:0 18px 42px rgba(15,23,42,.06);
}

.ma-room__map-card--flush{
    width:100%;
    max-width:100%;
    align-self:stretch;
    gap:8px;
    box-shadow:none;
}

.ma-room--map-edge{
    width:100%;
    max-width:100%;
}

.ma-room--map-edge .ma-room__map-card--flush{
    border-left:0;
    border-right:0;
    border-radius:0;
}

.ma-room__toolbar{
    display:flex;
    justify-content:flex-end;
    gap:8px;
}

.ma-room__zoom-button{
    border:1px solid var(--ma-zoom-button-border);
    border-radius:var(--ma-zoom-button-radius);
    background:var(--ma-zoom-button-bg);
    color:var(--ma-zoom-button-text);
    min-width:42px;
    height:42px;
    padding:0 14px;
    font-weight:700;
    font-size:var(--ma-zoom-button-font-size);
    font-family:var(--ma-zoom-button-font-family, inherit);
    cursor:pointer;
}

.ma-room__zoom-button--reset{
    min-width:72px;
}

.ma-room__viewport{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    border:1px solid #dbe5f0;
    background:#f8fafc;
    touch-action:pan-y pinch-zoom;
    width:fit-content;
    max-width:100%;
}

.ma-room__viewport.is-zoomed{
    touch-action:none;
}

.ma-room__map-card--flush .ma-room__viewport{
    width:100%;
    max-width:100%;
    border-left:0;
    border-right:0;
    border-radius:0;
}

.ma-room__viewport[data-ma-map-rotation="90"],
.ma-room__viewport[data-ma-map-rotation="270"]{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.ma-room__viewport[data-ma-map-rotation="90"] .ma-room__rotator-fit,
.ma-room__viewport[data-ma-map-rotation="270"] .ma-room__rotator-fit{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    margin:0 auto;
}

.ma-room__rotator-fit{
    position:relative;
    display:block;
    width:auto;
    max-width:100%;
    margin:0;
}

.ma-room__map-card--flush .ma-room__rotator-fit{
    width:100%;
    max-width:100%;
}

.ma-room__viewport.is-panning{
    cursor:grabbing;
}

.ma-room__canvas{
    position:relative;
    display:block;
    transform-origin:center center;
    transition:transform .16s ease;
    --ma-map-rotation-scale:1;
}

.ma-room__map-rotator{
    position:relative;
    width:auto;
    max-width:100%;
    transform:rotate(var(--ma-map-rotation,0deg)) scale(var(--ma-map-rotation-scale,1));
    transform-origin:center center;
    transition:transform .2s ease;
}

.ma-room__map-card--flush .ma-room__map-rotator{
    width:100%;
    max-width:100%;
}

.ma-room__viewport[data-ma-map-rotation="90"] .ma-room__map-rotator,
.ma-room__viewport[data-ma-map-rotation="270"] .ma-room__map-rotator{
    width:auto;
    max-width:none;
}

.ma-room__image{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    vertical-align:top;
}

.ma-room__map-card--flush .ma-room__image{
    width:100%;
    max-width:100%;
}

.ma-room__pins{
    position:absolute;
    inset:0;
}

.ma-room__overlays{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.ma-room__map-label{
    position:absolute;
    transform:translate(-50%,-50%) rotate(var(--ma-label-rotation,0deg));
    transform-origin:center center;
    color:var(--ma-label-color,#0f172a);
    font-size:var(--ma-label-font-size,16px);
    font-weight:700;
    line-height:1.25;
    text-align:center;
    white-space:pre-wrap;
    max-width:42%;
    pointer-events:none;
    text-shadow:0 1px 0 rgba(255,255,255,.85);
}

.ma-room__map-arrow{
    position:absolute;
    transform:translate(-50%,-50%) rotate(var(--ma-arrow-rotation,0deg));
    transform-origin:center center;
    width:var(--ma-arrow-length,72px);
    height:24px;
    pointer-events:none;
}

.ma-room__map-arrow-line{
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:4px;
    margin-top:-2px;
    background:var(--ma-arrow-color,#0f172a);
    border-radius:999px;
}

.ma-room__map-arrow-line::after{
    content:'';
    position:absolute;
    right:-1px;
    top:50%;
    width:0;
    height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:12px solid var(--ma-arrow-color,#0f172a);
    transform:translateY(-50%);
}

.ma-room__pin{
    position:absolute;
    transform:translate(-50%,-50%);
    display:block;
    width:var(--ma-pin-size);
    height:var(--ma-pin-size);
    padding:0;
    border:none;
    appearance:none;
    background:transparent;
    box-shadow:none;
    color:inherit;
    text-decoration:none;
    overflow:visible;
    cursor:pointer;
}

.ma-room__pin-shell{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--ma-pin-size);
    height:var(--ma-pin-size);
    transform:translate(-50%,-50%) scale(calc(var(--ma-pin-zoom-scale,1) / var(--ma-map-rotation-scale,1))) rotate(calc(-1 * var(--ma-map-rotation,0deg)));
    transform-origin:center center;
    pointer-events:none;
    flex-shrink:0;
}

.ma-room__pin-core{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--ma-pin-size);
    height:var(--ma-pin-size);
    min-width:var(--ma-pin-size);
    max-width:var(--ma-pin-size);
    padding:0;
    border-radius:50%;
    aspect-ratio:1 / 1;
    box-sizing:border-box;
    line-height:1;
    color:var(--ma-pin-text,#ffffff);
    font-weight:700;
    font-size:clamp(10px, calc(var(--ma-pin-size) * .38), 16px);
    box-shadow:0 14px 28px rgba(15,23,42,.16);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    overflow:hidden;
    white-space:nowrap;
    flex-shrink:0;
}

.ma-room__pin:hover .ma-room__pin-core,
.ma-room__pin:focus-visible .ma-room__pin-core,
.ma-room__pin.is-active .ma-room__pin-core{
    transform:scale(var(--ma-active-pin-scale));
    box-shadow:0 0 0 4px var(--ma-active-pin-ring), 0 18px 34px rgba(15,23,42,.24);
    filter:brightness(1.05);
}

.ma-room__pin--static{
    cursor:default;
}

.ma-room__pin--pending .ma-room__pin-core{
    background:var(--ma-pin-pending,#ef4444);
}

.ma-room__pin--visited .ma-room__pin-core{
    background:var(--ma-pin-visited,#22c55e);
}

.ma-room__legend{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:var(--ma-legend-padding-y) var(--ma-legend-padding-x);
    border-radius:var(--ma-legend-radius);
    background:var(--ma-legend-bg);
    border:1px solid var(--ma-legend-border);
    color:var(--ma-legend-text-color);
    font-family:var(--ma-legend-font-family, inherit);
    max-width:100%;
}

.ma-room__legend--overlay{
    position:absolute;
    z-index:4;
    margin:0;
    max-width:min(320px, calc(100% - 24px));
    box-shadow:0 16px 34px rgba(15,23,42,.14);
}

.ma-room__legend--pos-top-left{
    top:var(--ma-legend-offset-y);
    left:var(--ma-legend-offset-x);
}

.ma-room__legend--pos-top-right{
    top:var(--ma-legend-offset-y);
    right:var(--ma-legend-offset-x);
}

.ma-room__legend--pos-bottom-left{
    bottom:var(--ma-legend-offset-y);
    left:var(--ma-legend-offset-x);
}

.ma-room__legend--pos-bottom-right{
    bottom:var(--ma-legend-offset-y);
    right:var(--ma-legend-offset-x);
}

.ma-room__legend--pos-custom{
    top:var(--ma-legend-offset-y);
    left:var(--ma-legend-offset-x);
}

.ma-room__legend--collapsible{
    padding:0;
    overflow:hidden;
}

.ma-room__legend--collapsible > summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:var(--ma-legend-padding-y) var(--ma-legend-padding-x);
    font-size:var(--ma-legend-font-size);
    font-weight:700;
}

.ma-room__legend-title-text{
    flex:1 1 auto;
    min-width:0;
}

.ma-room__legend-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:28px;
    height:28px;
    border-radius:50%;
    border:1px solid var(--ma-legend-border);
    background:rgba(255,255,255,.72);
    color:var(--ma-legend-text-color);
    font-size:18px;
    font-weight:700;
    line-height:1;
    transition:transform .18s ease, background .18s ease;
}

.ma-room__legend--collapsible > summary:hover .ma-room__legend-toggle,
.ma-room__legend--collapsible > summary:focus-visible .ma-room__legend-toggle{
    background:#fff;
}

.ma-room__legend--collapsible[open] > summary .ma-room__legend-toggle{
    transform:rotate(45deg);
}

.ma-room__legend--collapsible > summary::-webkit-details-marker{
    display:none;
}

.ma-room__legend--collapsible > .ma-room__legend-body{
    padding:0 var(--ma-legend-padding-x) var(--ma-legend-padding-y);
}

.ma-room__legend-title{
    font-size:var(--ma-legend-font-size);
}

.ma-room__legend-items{
    display:flex;
    flex-direction:var(--ma-legend-layout);
    flex-wrap:wrap;
    gap:var(--ma-legend-gap);
    align-items:flex-start;
}

.ma-room__legend-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--ma-legend-text-color);
    font-size:var(--ma-legend-font-size);
    font-weight:600;
}

.ma-room__legend-dot{
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:999px;
}

.ma-room__legend-dot--pending{
    background:var(--ma-pin-pending,#ef4444);
}

.ma-room__legend-dot--visited{
    background:var(--ma-pin-visited,#22c55e);
}

.ma-room__list-wrap{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.ma-room__list-title{
    font-size:15px;
    font-family:var(--ma-list-font-family, inherit);
}

.ma-room__list{
    display:grid;
    gap:12px;
}

.ma-room__list-item{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:var(--ma-list-padding-y) var(--ma-list-padding-x);
    border-radius:var(--ma-list-radius);
    border:1px solid var(--ma-list-border);
    background:var(--ma-list-bg);
    text-decoration:none;
    color:var(--ma-list-text-color);
    font-size:var(--ma-list-font-size);
    font-family:var(--ma-list-font-family, inherit);
    box-shadow:0 16px 34px rgba(15,23,42,.05);
    appearance:none;
    border-width:1px;
    text-align:left;
    cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.ma-room__list-item:hover,
.ma-room__list-item:focus-visible,
.ma-room__list-item.is-active{
    transform:translateY(-1px);
    border-color:var(--ma-active-list-border);
    background:var(--ma-active-list-bg);
    color:var(--ma-active-list-text);
    box-shadow:0 18px 36px rgba(37,99,235,.12);
}

.ma-room__list-item:hover .ma-room__list-status,
.ma-room__list-item:focus-visible .ma-room__list-status,
.ma-room__list-item.is-active .ma-room__list-status{
    color:var(--ma-active-list-text);
}

.ma-room__list-item--static{
    cursor:default;
}

.ma-room__list-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    min-width:42px;
    max-width:42px;
    border-radius:50%;
    aspect-ratio:1 / 1;
    box-sizing:border-box;
    font-weight:700;
    background:var(--ma-pin-pending,#ef4444);
    color:var(--ma-pin-text,#ffffff);
    flex-shrink:0;
    overflow:hidden;
    white-space:nowrap;
}

.ma-room__list-item--visited .ma-room__list-badge{
    background:var(--ma-pin-visited,#22c55e);
}

.ma-room__list-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    flex:1 1 auto;
}

.ma-room__list-name{
    font-weight:700;
}

.ma-room__list-status{
    color:var(--ma-list-status-color);
    font-size:14px;
}

.ma-room__list-check{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    min-width:34px;
    max-width:34px;
    border-radius:50%;
    aspect-ratio:1 / 1;
    box-sizing:border-box;
    background:#e2e8f0;
    color:#fff;
    font-weight:700;
    opacity:.45;
    flex-shrink:0;
}

.ma-room__list-item--visited .ma-room__list-check{
    background:var(--ma-pin-visited,#22c55e);
    opacity:1;
}

.ma-room__empty-map,
.ma-room__empty-message,
.ma-room__empty-list{
    padding:24px;
    border-radius:22px;
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    color:#64748b;
    line-height:1.65;
}

.ma-room__tooltip{
    position:fixed;
    z-index:99999;
    max-width:min(320px, calc(100vw - 24px));
    padding:10px 12px;
    border-radius:14px;
    background:#0f172a;
    color:#fff;
    box-shadow:0 16px 30px rgba(15,23,42,.25);
    pointer-events:none;
    opacity:0;
    transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease;
    font-family:inherit;
}

.ma-room__tooltip.is-visible{
    opacity:1;
    transform:translateY(0);
}

.ma-room__tooltip strong,
.ma-room__tooltip .ma-room__tooltip-title{
    display:block;
    margin-bottom:4px;
    color:#fff;
}

.ma-room__tooltip .ma-room__tooltip-status{
    color:rgba(255,255,255,.78);
    font-size:13px;
}

.ma-room--mode-fullscreen{
    width:100%;
    max-width:none;
}

.ma-room--mode-fullscreen .ma-room__map-card{
    width:100%;
    max-width:none;
    align-self:stretch;
}

.ma-room--mode-text-popup .ma-room__list-item{
    cursor:pointer;
}

.ma-room__map-modal{
    position:fixed;
    inset:0;
    z-index:100000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
}

.ma-room__map-modal.is-open{
    display:flex;
}

body.ma-room-modal-open{
    overflow:hidden;
}

.ma-room__map-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.62);
}

.ma-room__map-modal-dialog{
    position:relative;
    z-index:1;
    width:min(1080px, 100%);
    max-height:calc(100vh - 32px);
    overflow:auto;
    border-radius:24px;
    background:#fff;
    box-shadow:0 28px 60px rgba(15,23,42,.28);
    padding:12px;
}

.ma-room__map-modal-close{
    position:absolute;
    top:10px;
    right:10px;
    z-index:3;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#0f172a;
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.ma-room__map-card--modal{
    width:100%;
    max-width:none;
    box-shadow:none;
    border:none;
    padding:8px 8px 0;
}

@media (max-width: 860px){
    .ma-room__header{
        flex-direction:column;
    }

    .ma-room__guide{
        width:100%;
    }

    .ma-room__legend--overlay{
        max-width:calc(100% - 16px);
    }
}