/* ScriptX LiveMap v4 - isolated layout and renderer styles */
.sx-livemap{
    min-height:650px;
    height:calc(100dvh - 142px);
    display:grid;
    grid-template-rows:72px minmax(0,1fr);
    gap:12px;
    color:#eef4ff;
}
.sx-map-header{
    min-width:0;
    height:72px;
    display:grid;
    grid-template-columns:310px minmax(0,1fr);
    align-items:stretch;
    gap:12px;
    margin:0;
    border:0;
}
.sx-map-title,
.sx-map-controls{
    min-width:0;
    border:1px solid rgba(129,156,211,.16);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(14,25,43,.97),rgba(8,17,30,.96));
    box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025);
}
.sx-map-title{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
}
.sx-map-title-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(87,222,177,.22);
    border-radius:12px;
    background:rgba(74,209,166,.08);
}
.sx-map-title-icon i{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#61dfb2;
    box-shadow:0 0 0 6px rgba(97,223,178,.08),0 0 18px rgba(97,223,178,.65);
    animation:sxMapPulse 1.8s ease-in-out infinite;
}
.sx-map-title-copy{min-width:0}
.sx-map-title-copy span{
    display:block;
    color:#66ddb4;
    font-size:10px;
    font-weight:850;
    line-height:1;
    letter-spacing:.12em;
}
.sx-map-title-copy h2{
    margin:7px 0 0;
    overflow:hidden;
    color:#f6f9ff;
    font:700 17px/1 'Space Grotesk',sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sx-map-controls{
    display:grid;
    grid-template-columns:minmax(260px,1fr) auto auto;
    align-items:center;
    gap:10px;
    padding:9px;
}
.sx-map-search{
    min-width:0;
    height:52px;
    display:grid;
    grid-template-columns:20px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    margin:0;
    padding:0 13px;
    border:1px solid rgba(129,156,211,.13);
    border-radius:12px;
    background:#081321;
    color:#718198;
}
.sx-map-search:focus-within{
    border-color:rgba(104,151,255,.42);
    box-shadow:0 0 0 3px rgba(104,151,255,.07);
}
.sx-map-search svg{width:17px;height:17px}
.sx-map-search input{
    min-width:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#eaf0fa;
    font:600 12px 'Inter',sans-serif;
}
.sx-map-search input::placeholder{color:#66758b}
.sx-map-search>span{
    padding:6px 8px;
    border-radius:7px;
    background:rgba(114,143,202,.09);
    color:#8795aa;
    font-size:9px;
    font-weight:800;
}
.sx-map-zoom,
.sx-map-style{
    height:52px;
    display:flex;
    align-items:center;
    gap:4px;
    padding:5px;
    border:1px solid rgba(129,156,211,.13);
    border-radius:12px;
    background:#081321;
}
.sx-map-zoom button,
.sx-map-style button{
    height:40px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#9aa7b8;
    cursor:pointer;
}
.sx-map-zoom button{width:40px;font-size:19px;line-height:1}
.sx-map-style button{
    grid-template-columns:22px auto;
    gap:6px;
    padding:0 10px;
    font:750 10px 'Inter',sans-serif;
}
.sx-map-style button b{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border:1px solid rgba(124,153,215,.17);
    border-radius:7px;
    font-size:9px;
}
.sx-map-zoom button:hover,
.sx-map-style button:hover{background:rgba(112,145,216,.09);color:#e7edf8}
.sx-map-style button.is-active{
    background:rgba(101,143,244,.15);
    color:#a9bfff;
}
.sx-map-style button.is-active b{border-color:rgba(112,153,255,.35);background:rgba(112,153,255,.12)}
.sx-map-stage{
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:12px;
}
.sx-map-canvas-card,
.sx-map-sidebar{
    min-width:0;
    min-height:0;
    border:1px solid rgba(129,156,211,.17);
    border-radius:18px;
    background:#081321;
    box-shadow:0 24px 56px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.025);
    overflow:hidden;
}
.sx-map-canvas-card{position:relative}
.sx-map-viewport{
    position:absolute;
    inset:0;
    overflow:hidden;
    touch-action:none;
    user-select:none;
    cursor:grab;
    background:#0b1724;
}
.sx-map-viewport.is-panning{cursor:grabbing}
.sx-map-tiles,
.sx-map-markers{
    position:absolute;
    inset:0;
}
.sx-map-tiles{z-index:1;overflow:hidden}
.sx-map-markers{z-index:3;pointer-events:none}
.sx-map-tile{
    position:absolute;
    left:0;
    top:0;
    width:256px;
    height:256px;
    max-width:none;
    pointer-events:none;
    user-select:none;
    will-change:transform;
}
.sx-map-shade{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(3,10,18,.06),transparent 22%,transparent 72%,rgba(3,10,18,.2));
    box-shadow:inset 0 0 70px rgba(3,10,18,.15);
}
.sx-map-marker{
    --sx-marker-x:0px;
    --sx-marker-y:0px;
    --sx-marker-color:#65e1b2;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
    min-width:44px;
    display:grid;
    justify-items:center;
    gap:3px;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    pointer-events:auto;
    cursor:pointer;
    transform:translate3d(var(--sx-marker-x),var(--sx-marker-y),0) translate(-50%,-62%);
    transition:none;
    will-change:transform;
}
.sx-map-viewport.is-panning .sx-map-marker{transition:none}
.sx-map-marker-visual{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--sx-marker-color) 50%,transparent);
    border-radius:14px;
    background:color-mix(in srgb,var(--sx-marker-color) 17%,rgba(5,13,23,.94));
    box-shadow:0 9px 22px rgba(0,0,0,.38),0 0 18px color-mix(in srgb,var(--sx-marker-color) 15%,transparent);
    transition:.18s ease;
}
.sx-map-marker img{
    width:29px;
    height:29px;
    object-fit:contain;
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.42));
    pointer-events:none;
}
.sx-map-marker>b{
    max-width:115px;
    padding:4px 7px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    border-radius:7px;
    background:rgba(5,12,21,.92);
    color:#f5f8fd;
    font:800 10px/1 'Inter',sans-serif;
    text-overflow:ellipsis;
    text-shadow:0 1px 2px #000;
    white-space:nowrap;
    box-shadow:0 6px 14px rgba(0,0,0,.3);
}
.sx-map-marker.is-player{--sx-marker-color:#59dcae}
.sx-map-marker.is-vehicle{--sx-marker-color:#6c98ff}
.sx-map-marker.is-blip .sx-map-marker-visual{border-radius:50%}
.sx-map-marker:hover .sx-map-marker-visual,
.sx-map-marker.is-selected .sx-map-marker-visual{
    transform:translateY(-2px) scale(1.08);
    border-color:color-mix(in srgb,var(--sx-marker-color) 82%,#fff);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--sx-marker-color) 13%,transparent),0 12px 27px rgba(0,0,0,.42);
}
.sx-map-marker.is-selected{z-index:5}
.sx-map-canvas-status{
    position:absolute;
    left:14px;
    bottom:14px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:38px;
    padding:0 12px;
    border:1px solid rgba(130,157,211,.18);
    border-radius:11px;
    background:rgba(6,15,26,.88);
    color:#8f9daf;
    font-size:10px;
    backdrop-filter:blur(12px);
    box-shadow:0 12px 26px rgba(0,0,0,.24);
}
.sx-map-canvas-status span{display:flex;align-items:center;gap:7px;color:#dce5f2;font-weight:750}
.sx-map-canvas-status i,
.sx-map-sync i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5ee0b3;
    box-shadow:0 0 10px rgba(94,224,179,.65);
}
.sx-map-empty{
    position:absolute;
    left:50%;
    top:50%;
    z-index:4;
    width:min(330px,calc(100% - 40px));
    padding:18px;
    border:1px solid rgba(132,157,204,.16);
    border-radius:14px;
    background:rgba(7,16,28,.9);
    color:#a5b1c2;
    font-size:12px;
    line-height:1.5;
    text-align:center;
    pointer-events:none;
    transform:translate(-50%,-50%);
    backdrop-filter:blur(12px);
}
.sx-map-sidebar{
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
}
.sx-map-sidebar-head{
    height:76px;
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 15px;
    margin:0;
    border-bottom:1px solid rgba(128,153,204,.12);
    background:linear-gradient(135deg,rgba(25,40,67,.55),rgba(10,22,37,.4));
}
.sx-map-sidebar-head p,
.sx-map-sidebar-head h3{margin:0}
.sx-map-sidebar-head p{color:#7f9fff;font-size:9px;font-weight:850;letter-spacing:.12em}
.sx-map-sidebar-head h3{margin-top:7px;color:#f1f5fb;font:700 16px/1 'Space Grotesk',sans-serif}
.sx-map-sync{
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 9px;
    border:1px solid rgba(87,214,174,.16);
    border-radius:20px;
    background:rgba(72,198,158,.06);
    color:#68d8b2;
    font-size:9px;
    font-weight:850;
    white-space:nowrap;
}
.sx-map-sync.is-syncing i{animation:sxMapPulse .8s ease-in-out infinite}
.sx-map-sync.is-offline{border-color:rgba(235,125,145,.18);color:#ee8b9d;background:rgba(225,83,111,.06)}
.sx-map-sync.is-offline i{background:#e96d85;box-shadow:0 0 10px rgba(233,109,133,.5)}
.sx-map-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    padding:8px;
    border-bottom:1px solid rgba(128,153,204,.1);
}
.sx-map-tabs button{
    min-width:0;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    color:#8694a8;
    font-size:11px;
    font-weight:750;
    cursor:pointer;
}
.sx-map-tabs button em{
    min-width:18px;
    height:18px;
    display:grid;
    place-items:center;
    padding:0 4px;
    border-radius:6px;
    background:rgba(126,151,205,.09);
    font-size:9px;
    font-style:normal;
}
.sx-map-tabs button:hover{background:rgba(113,143,207,.06);color:#c8d2e1}
.sx-map-tabs button.is-active{border-color:rgba(107,146,245,.25);background:rgba(100,140,239,.11);color:#a9bfff}
.sx-map-roster{
    min-height:0;
    display:grid;
    align-content:start;
    gap:7px;
    padding:9px;
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(115,145,211,.25) transparent;
}
.sx-map-roster-empty{padding:26px 12px;color:#77869b;font-size:11px;line-height:1.5;text-align:center}
.sx-map-roster-item{
    min-width:0;
    min-height:62px;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:9px;
    border:1px solid rgba(130,154,204,.1);
    border-radius:12px;
    background:rgba(255,255,255,.018);
    color:#dce4ef;
    text-align:left;
    cursor:pointer;
}
.sx-map-roster-item:hover{border-color:rgba(112,150,239,.2);background:rgba(100,138,226,.055)}
.sx-map-roster-item.is-selected{border-color:rgba(109,149,247,.38);background:linear-gradient(105deg,rgba(101,142,242,.14),rgba(75,198,190,.04));box-shadow:inset 3px 0 #7397fa}
.sx-map-roster-avatar{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid rgba(120,151,222,.18);
    border-radius:11px;
    background:#111e33;
    color:#a9bfff;
    font-size:11px;
    font-weight:850;
}
.sx-map-roster-avatar img{width:28px;height:28px;object-fit:contain}
.sx-map-roster-copy{min-width:0}
.sx-map-roster-copy b,
.sx-map-roster-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-map-roster-copy b{color:#eef3fa;font-size:12px}
.sx-map-roster-copy small{margin-top:6px;color:#7f8ea3;font-size:10px}
.sx-map-roster-item>em{
    padding:5px 6px;
    border-radius:7px;
    background:rgba(92,216,177,.08);
    color:#66d9b2;
    font-size:8px;
    font-style:normal;
    font-weight:850;
}
.sx-map-action{
    min-width:0;
    width:100%;
    min-height:78px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 24px;
    align-items:center;
    gap:11px;
    padding:11px 14px;
    border:0;
    border-top:1px solid rgba(130,156,211,.14);
    border-radius:0;
    background:linear-gradient(115deg,#101c30,#0d2533);
    color:#f4f7fc;
    text-align:left;
    cursor:pointer;
}
.sx-map-action:hover{background:linear-gradient(115deg,#152640,#113343)}
.sx-map-action>.sx-map-action-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(117,151,238,.26);
    border-radius:12px;
    background:#192946;
    color:#9bb6ff;
}
.sx-map-action>.sx-map-action-icon svg{width:18px;height:18px}
.sx-map-action-copy{min-width:0}
.sx-map-action-copy b,
.sx-map-action-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-map-action-copy b{color:#fff;font-size:13px;line-height:1.2}
.sx-map-action-copy small{margin-top:6px;color:#a2afc0;font-size:10px;line-height:1.3}
.sx-map-action>em{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border:1px solid rgba(126,156,229,.15);
    border-radius:8px;
    color:#a3b9f8;
    font-size:13px;
    font-style:normal;
}
@keyframes sxMapPulse{0%,100%{opacity:.65;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}
@media(max-width:1180px){
    .sx-map-header{grid-template-columns:220px minmax(0,1fr)}
    .sx-map-stage{grid-template-columns:minmax(0,1fr) 300px}
    .sx-map-style button span{display:none}
}
@media(max-width:900px){
    .sx-livemap{height:auto;min-height:900px;grid-template-rows:auto minmax(0,1fr)}
    .sx-map-header{grid-template-columns:1fr}
    .sx-map-title{display:none}
    .sx-map-stage{grid-template-columns:1fr;grid-template-rows:minmax(520px,1fr) 300px}
    .sx-map-sidebar{grid-template-rows:auto auto minmax(0,1fr)}
    .sx-map-action{display:none}
}
@media(max-width:620px){
    .sx-map-controls{grid-template-columns:minmax(0,1fr) auto}
    .sx-map-style{display:none}
    .sx-map-stage{grid-template-rows:minmax(430px,1fr) 280px}
    .sx-map-sidebar-head{min-height:66px}
}