:root{--panel-width:330px;--panel-bg:#252525;--panel-text:#f2f2f2;--accent:#1261bd}
*{box-sizing:border-box}
html,body,main{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,"Microsoft YaHei",sans-serif}
main{display:grid;grid-template-columns:minmax(255px,var(--panel-width)) minmax(0,1fr);background:#bdbdbd;transition:grid-template-columns .22s ease}
.layer-panel{position:relative;z-index:4;min-width:0;background:var(--panel-bg);color:var(--panel-text);padding:7px 6px;font-size:16px;font-weight:600;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#555 transparent;transition:transform .22s ease}
.layer-panel::-webkit-scrollbar{width:6px}.layer-panel::-webkit-scrollbar-thumb{background:#555;border-radius:3px}
.layer-row{display:flex;align-items:center;gap:5px;height:27px;line-height:27px;white-space:nowrap;border-radius:2px;padding-right:1px}
.layer-row b{overflow:hidden;text-overflow:ellipsis;font-weight:700;min-width:0}.tree-node{cursor:pointer}.tree-node:hover,.child:hover{background:#303030}
.tree-node:focus-visible,.child:focus-visible{outline:1px solid #6aa9ff;outline-offset:-1px}
.tree-arrow,.child-arrow{display:inline-block;flex:0 0 16px;text-align:center;color:#ddd;font-size:15px;line-height:1}
.child{padding-left:31px;cursor:default;font-size:15px}.child-arrow{flex-basis:12px;font-size:13px;color:#c7c7c7}
.eye{flex:0 0 24px;width:24px;height:24px;margin-left:auto;padding:0;border:0;background-color:transparent;background-image:url('./eye.png');background-position:center;background-repeat:no-repeat;background-size:18px 18px;color:transparent;line-height:0;font-size:0;cursor:pointer;border-radius:4px}
.eye:hover{background-color:#414141}.eye.hidden{background-image:url('./eye-close.png')}.eye:focus-visible{outline:1px solid #6aa9ff;outline-offset:1px}
.layer-toggle{position:fixed;z-index:10;left:var(--panel-width);top:42%;width:32px;height:108px;padding:8px 0;border:0;border-radius:0 13px 13px 0;background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 2px 6px #333;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:left .22s ease}
.layer-toggle:hover{background:#1d70d0}.layer-toggle:focus-visible{outline:2px solid #8fc0ff;outline-offset:1px}.toggle-icon{width:20px;height:20px;display:grid;place-items:center;line-height:0}.toggle-icon img{display:block;width:18px;height:18px;object-fit:contain}.toggle-label{display:flex;flex-direction:column;align-items:center;justify-content:center;width:16px;font-size:13px;line-height:15px;letter-spacing:0}.toggle-label span{display:block;height:15px;line-height:15px}.toggle-arrow{font-size:22px;line-height:16px}
.layer-panel.collapsed{transform:translateX(-100%)}body.sidebar-collapsed main{grid-template-columns:0 minmax(0,1fr)}.layer-toggle.collapsed{left:0;border-radius:0 12px 12px 0}
#viewport{position:relative;min-width:0;background:#bdbdbd}#viewport canvas{display:block;width:100%;height:100%}
.legend-panel{position:absolute;z-index:6;top:14px;left:40px;width:268px;padding:11px;background:#292929;color:#f3f3f3;border-radius:6px;box-shadow:0 2px 8px #555;font-size:13px}.legend-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.legend-header strong{font-size:16px}.legend-header select{width:132px;height:32px;padding:0 9px;border:1px solid #888;border-radius:5px;background:#3b3b3b;color:#eee;font-size:14px}.legend-table{display:grid;grid-template-columns:22px 1fr 1fr;border:1px solid #353535;overflow:hidden;text-align:center;font-weight:600}.legend-table>div{min-height:21px;padding:2px 3px;background:#363636;border-right:1px solid #454545;border-bottom:1px solid #454545;line-height:17px}.legend-table>div:nth-child(3n){border-right:0}.legend-color{padding:0!important}.legend-empty{grid-column:2 / span 2}.c-black{background:#050505!important}.c-magenta{background:#d27ad9!important}.c-pink{background:#ff7481!important}.c-red{background:#ff4b00!important}.c-orange{background:#ff9700!important}.c-yellow{background:#ffd34d!important}.c-green{background:#00c900!important}.c-cyan{background:#21e5e5!important}.c-blue{background:#267cff!important}.c-indigo{background:#2617dd!important}.c-violet{background:#3410a9!important}.c-purple{background:#4a0b82!important}.c-dark-purple{background:#190a3c!important}.c-dark{background:#161616!important}.c-white{background:#fff!important}
.display-menu{position:absolute;z-index:7;left:18px;bottom:52px;width:208px;padding:7px 9px;background:#171819;color:#eee;border-radius:5px;box-shadow:0 2px 7px #555}.display-menu::after{content:"";position:absolute;left:28px;bottom:-8px;border:8px solid transparent;border-top-color:#171819;border-bottom:0}.display-menu-item{width:100%;min-height:34px;display:flex;align-items:center;justify-content:space-between;padding:4px 9px;border:0;border-bottom:1px solid #343434;background:transparent;color:#eee;text-align:left;font-size:16px;cursor:pointer}.display-menu-item:last-child{border-bottom:0}.display-menu-item:hover{background:#303030}.display-menu-item:focus-visible{outline:1px solid #6aa9ff;outline-offset:-1px}.display-eye{width:24px;height:24px;display:grid;place-items:center}.display-eye img{width:19px;height:19px;object-fit:contain}.camera-reset{text-decoration:underline;font-size:14px}
.datetime-panel{position:absolute;z-index:7;left:108px;bottom:52px;width:484px;padding:10px 11px 9px;background:#171126;color:#f4f4f4;border-radius:5px;box-shadow:0 2px 7px #555;font-size:14px}.datetime-panel::after{content:"";position:absolute;left:50px;bottom:-8px;border:8px solid transparent;border-top-color:#171126;border-bottom:0}.datetime-panel>strong{display:block;margin-bottom:7px;font-size:14px}.datetime-fields{display:flex;align-items:center;gap:10px}.date-field{width:176px;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border:0;border-radius:5px;background:#4a4d54;color:#ddd;font-size:16px;cursor:pointer}.date-field.placeholder #date-value{color:#92959a}.date-field.error{outline:2px solid #ff5a67}.calendar-icon{font-size:19px;color:#eee}.datetime-fields select{width:88px;height:42px;padding:0 12px;border:0;border-radius:5px;background:#4a4d54;color:#fff;font-size:19px;font-weight:600;cursor:pointer}.time-separator{margin:0 -7px;font-size:23px;font-weight:700}.datetime-search{height:42px;padding:0 19px;border:0;border-radius:5px;background:#087db8;color:#fff;font-size:18px;font-weight:700;cursor:pointer}.datetime-search:hover{background:#1193d2}.latest-datetime{margin-top:4px;padding:0;border:0;background:transparent;color:#ddd;text-decoration:underline;font-size:13px;cursor:pointer}.calendar-popup{position:absolute;left:0;bottom:93px;width:312px;padding:8px 12px 10px;background:#4a4d54;color:#fff;border-radius:5px;box-shadow:0 2px 8px #555}.calendar-popup::after{content:"";position:absolute;left:72px;bottom:-9px;border:9px solid transparent;border-top-color:#4a4d54;border-bottom:0}.calendar-header{height:40px;display:flex;align-items:center;justify-content:space-between}.calendar-header strong{font-size:20px}.calendar-header button{width:32px;height:32px;border:0;background:transparent;color:#d9d9d9;font-size:35px;line-height:25px;cursor:pointer}.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.calendar-weekdays{padding-bottom:7px;border-bottom:1px solid #eee;font-size:16px}.calendar-days{padding-top:7px;row-gap:4px}.calendar-day{height:37px;border:0;border-radius:4px;background:transparent;color:#fff;font-size:16px;font-weight:600;cursor:pointer}.calendar-day:hover{background:#5e626a}.calendar-day.outside{color:#e5e5e5}.calendar-day.selected{background:#6c7078}.calendar-day.today{outline:1px solid #9297a0;outline-offset:-2px}
.bottom-tools{position:absolute;left:10px;bottom:10px;z-index:8;display:flex;gap:14px}.bottom-tools button{border:0;border-radius:14px;background:#111;color:#eee;padding:7px 12px;font-size:13px;box-shadow:0 1px 3px #666;cursor:pointer}.bottom-tools button:hover,.bottom-tools button[aria-expanded="true"]{background:#155fb7}.bottom-tools button:focus-visible{outline:2px solid #8fc0ff;outline-offset:1px}
[data-parent][hidden]{display:none}
.legend-panel [hidden]{display:none!important}
@media (max-width:600px){:root{--panel-width:min(330px,86vw)}.layer-panel{font-size:14px}.child{font-size:13px}}
.legend-other{grid-template-columns:22px 1fr 1fr}.c-level0{background:#46bd20!important}.c-level1{background:#ffb510!important}.c-level2{background:#ff6500!important}.c-level3{background:#ff4052!important}
@media (max-width:720px){.datetime-panel{left:8px;width:calc(100% - 16px)}.datetime-fields{gap:7px}.date-field{flex:1;min-width:150px}.datetime-fields select{width:72px}.datetime-search{padding:0 14px}}
.calendar-icon{width:20px;height:20px;object-fit:contain}.bottom-tools button{display:inline-flex;align-items:center;gap:6px}.tool-icon{width:16px;height:16px;object-fit:contain;flex:0 0 16px}