*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;background-color:#1e1e1e;color:#e0e0e0;height:100vh;display:flex;flex-direction:column}#app{display:flex;flex-direction:column;height:100%}#menubar{display:flex;background-color:#2d2d2d;border-bottom:1px solid #3d3d3d;height:28px;align-items:center;padding:0 8px;gap:2px;position:relative}.menu-group{position:relative}.menu-button{background:none;border:none;color:#e0e0e0;font-size:12px;padding:4px 10px;height:24px;cursor:pointer;border-radius:4px}.menu-button:hover{background-color:#3d3d3d}.menu-dropdown{display:none;position:absolute;top:28px;left:0;background-color:#3d3d3d;border:1px solid #4d4d4d;border-radius:4px;min-width:180px;z-index:2000;box-shadow:0 4px 12px #0006}.menu-group.active .menu-dropdown{display:block}.menu-item{padding:8px 16px;cursor:pointer;font-size:12px;transition:background-color .1s}.menu-item:hover{background-color:#4d4d4d}.menu-item:first-child{border-radius:4px 4px 0 0}.menu-item:last-child{border-radius:0 0 4px 4px}.selection-context-menu{position:fixed;z-index:1200;background-color:#2d2d2d;border:1px solid #4d4d4d;border-radius:6px;padding:6px 0;min-width:220px;box-shadow:0 8px 24px #00000059;display:none;color:#f0f0f0;font-size:12px}.selection-context-menu button{width:100%;padding:8px 12px;background:none;border:none;color:inherit;text-align:left;cursor:pointer}.selection-context-menu button:hover{background-color:#3d3d3d}#toolbar{display:flex;background-color:#2d2d2d;border-bottom:1px solid #3d3d3d;height:36px;align-items:center;padding:4px 8px;gap:4px;position:relative;z-index:1000;flex-wrap:wrap;overflow-x:hidden;overflow-y:hidden;white-space:normal}.toolbar-button{width:32px;height:32px;padding:0;background-color:#3d3d3d;border:1px solid #4d4d4d;color:#e0e0e0;cursor:pointer;font-size:10px;border-radius:3px;transition:all .15s;display:flex;align-items:center;justify-content:center;flex:0 0 auto}#toolbar .toolbar-button[data-id=select],#toolbar .toolbar-button[data-id=import-zip],#toolbar .toolbar-button[data-id=line]{width:36px;padding:1px 2px;white-space:normal;line-height:1.05;font-size:9px;word-break:break-all;text-align:center}.toolbar-button:hover{background-color:#4d4d4d;border-color:#5d5d5d}.toolbar-button:active{background-color:#505050;border-color:#6d6d6d}.toolbar-button:disabled{opacity:.4;cursor:not-allowed}.toolbar-button:disabled:hover{background-color:#3d3d3d;border-color:#4d4d4d}.toolbar-separator{width:1px;height:24px;background-color:#4d4d4d;margin:0 4px;flex:0 0 auto}.toolbar-spacer{flex:1;min-width:8px}.toolbar-coords{margin-left:0;display:flex;gap:8px;align-items:center;flex-wrap:nowrap;flex:0 0 auto}.toolbar-coords .coord-label{font-size:12px;color:#e0e0e0;display:flex;align-items:center;gap:4px;white-space:nowrap;flex:0 0 auto}.toolbar-coords .coord-input,.toolbar-coords .coord-dim{width:85px;height:24px;padding:2px 6px;background-color:#3d3d3d;border:1px solid #4d4d4d;color:#e0e0e0;font-size:12px;border-radius:3px;flex:0 0 auto}.toolbar-coords .coord-input:disabled{opacity:.6}.toolbar-coords .aspect-lock-btn{margin:0 4px;padding:2px 6px;border:1px solid #4d4d4d;background-color:#3d3d3d;color:#e0e0e0;cursor:pointer;border-radius:3px;font-size:14px;line-height:20px;transition:all .2s ease;flex:0 0 auto;white-space:nowrap}.toolbar-coords .coord-unit{height:24px;flex:0 0 auto;white-space:nowrap;background-color:#3d3d3d;border:1px solid #4d4d4d;color:#e0e0e0;padding:2px 6px;border-radius:3px;font-size:12px;transition:all .15s}.toolbar-coords .aspect-lock-btn:hover{background-color:#4d4d4d;border-color:#5d5d5d}.toolbar-coords .aspect-lock-btn.locked{background:#e3f2fd;border-color:#2196f3;color:#2196f3}.toolbar-coords .coord-unit:hover,.toolbar-coords .coord-unit:focus{background-color:#4d4d4d;border-color:#5d5d5d;outline:none}.toolbar-layer-btn{margin-left:8px;padding:4px 12px;height:28px;background-color:#3d3d3d;border:1px solid #4d4d4d;color:#e0e0e0;font-size:10px;border-radius:3px;cursor:pointer;white-space:nowrap;transition:all .15s;flex:0 0 auto}.toolbar-layer-btn:hover{background-color:#4d4d4d;border-color:#5d5d5d}.toolbar-layer-btn:active{background-color:#505050;border-color:#6d6d6d}#center-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#canvas-container{background-color:#666;overflow:auto;min-height:0}#canvas-sidebar{background-color:#2d2d2d;border-right:1px solid #3d3d3d;padding:8px;width:60px;display:flex;flex-direction:column;gap:4px;height:100%;flex-shrink:0;position:relative;z-index:1000}.sidebar-tools{display:flex;flex-direction:column;gap:4px;flex-grow:1}.sidebar-tool-button{width:48px;height:48px;padding:0;background-color:#3d3d3d;border:1px solid #4d4d4d;color:#e0e0e0;cursor:pointer;font-size:12px;border-radius:4px;transition:all .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.sidebar-tool-button:hover{background-color:#4d4d4d;border-color:#5d5d5d}.sidebar-tool-button.active{background-color:#0d99ff;border-color:#1e88e5;color:#fff;box-shadow:0 0 8px #0d99ff66}.tool-icon{font-size:18px;font-weight:700}.tool-label{font-size:10px;text-align:center;line-height:1.2}#layer-panel{width:240px;background-color:#242424;border-left:1px solid #3d3d3d;height:100%;display:none;flex:0 0 auto;flex-direction:column;color:#e0e0e0;overflow:hidden;min-height:0;min-width:100px;max-width:520px;resize:horizontal;position:relative}#layer-panel.visible{display:flex}.layer-panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #3d3d3d;background-color:#2d2d2d}.layer-panel-title{font-size:13px;font-weight:600}.layer-panel-actions{display:flex;align-items:center;gap:6px}.layer-panel-close{width:24px;height:24px;border:1px solid #4d4d4d;background:#333;color:#e0e0e0;border-radius:4px;cursor:pointer}.mismatch-highlight{outline:2px solid rgba(255,0,0,.95);outline-offset:2px;filter:drop-shadow(0 0 6px rgba(255,0,0,.6))}.layer-panel-close:hover{background:#444;border-color:#5d5d5d}.layer-panel-resizer{position:absolute;left:0;top:0;width:8px;height:100%;cursor:ew-resize;background:transparent;z-index:5}.layer-panel-resizer:hover{background:#ffffff0d}.layer-panel-body{display:flex;flex-direction:column;padding:8px 0;flex:1;gap:6px;overflow:hidden;min-height:0}.layer-panel-hint{font-size:11px;color:#a0a0a0;padding:0 12px}.layer-tree{flex:1;overflow:auto;padding:0 6px 6px;min-height:0}.layer-panel-footer{flex-shrink:0;padding:6px 10px 10px;font-size:11px;color:#a5a5a5;border-top:1px solid #3d3d3d;background:#242424}.layer-tree-empty{font-size:12px;color:#a0a0a0;padding:12px;line-height:1.5;background:#2d2d2d;border:1px dashed #3d3d3d;border-radius:6px}.layer-tree-branch>summary{list-style:none}.layer-tree-branch>summary::-webkit-details-marker{display:none}.layer-tree-branch>summary::marker{display:none}.layer-tree-branch>summary:before{content:"▸";display:inline-block;width:12px;margin-right:4px;color:#9aa0a6}.layer-tree-branch[open]>summary:before{content:"▾"}.layer-tree-children{margin-left:10px}.layer-tree-row{padding:2px 4px;border-radius:4px;cursor:pointer;color:#e0e0e0;-webkit-user-select:none;user-select:none;transition:background-color .1s ease;line-height:1.3}.layer-tree-row-inner{display:flex;align-items:center;gap:6px;width:100%;min-width:0}.layer-tree-branch>summary .layer-tree-row-inner{display:inline-flex;vertical-align:middle;width:calc(100% - 16px)}.layer-tree-row:hover{background-color:#353535}.layer-tree-row.selected{background-color:#21558a;color:#fff}.layer-tree-badge{padding:1px 4px;border-radius:4px;background:#3b3b3b;border:1px solid #4d4d4d;font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:silver;flex-shrink:0}.layer-tree-label{font-size:11px;flex:1;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.layer-tree-actions{display:flex;gap:4px;align-items:center;flex-shrink:0}.layer-tree-action-btn{width:20px;height:20px;padding:0;border:1px solid #4d4d4d;background:transparent;border-radius:3px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .1s ease;color:#e0e0e0}.layer-tree-action-btn:hover{background:#3d3d3d;border-color:#5d5d5d}.layer-tree-lock-btn.active{background:#ff646433;border-color:#ff6464}.layer-tree-vis-btn.hidden{background:#6496ff33;border-color:#6496ff}.layer-tree-delete-btn{background:#ff505026;border-color:#ff5050}.layer-tree-delete-btn:hover{background:#ff50504d;border-color:#ff7070}.layer-tree-meta{font-size:9px;color:#b5b5b5;white-space:nowrap;flex-shrink:0}#app h1{margin:0;padding:16px;font-size:18px}#app p{padding:8px 16px;font-size:12px;color:#b0b0b0}#color-panel{background-color:#2d2d2d;border-top:1px solid #3d3d3d;padding:4px;display:flex;flex-direction:column;gap:3px;max-height:200px;overflow-y:auto;overflow-x:visible;flex-shrink:0;position:relative;z-index:1000;min-width:530px}.color-panel-content{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) 200px;grid-template-rows:auto auto auto;gap:8px;width:100%;box-sizing:border-box}.message-display-area{grid-column:1 / 3;grid-row:1}.fill-section{grid-column:1;grid-row:2;display:flex;flex-direction:row;gap:4px;width:100%;box-sizing:border-box;min-width:0;flex-shrink:0;align-items:center}.color-section{grid-column:2;grid-row:2;display:flex;align-items:center;gap:4px;width:100%;box-sizing:border-box;min-width:0}.stroke-section{grid-column:1;grid-row:3;display:flex;flex-direction:row;gap:4px;width:100%;box-sizing:border-box;min-width:0;flex-shrink:0;align-items:center}.alpha-section{grid-column:2;grid-row:3;display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box;min-width:0}.help-section{grid-column:3;grid-row:3;display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-width:0}.help-text{font-size:9px;color:#a0a0a0;text-align:center;line-height:1.3;white-space:nowrap}.stroke-width-container{grid-column:1;grid-row:4;display:none}.hsl-section{grid-column:3;grid-row:1 / 4;width:208px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;padding-right:8px;box-sizing:border-box}.color-swatches-section{display:flex;flex-direction:column;gap:3px;flex:1}.palette-label{font-size:12px;color:#e0e0e0;font-weight:500;min-width:40px}.color-palette{display:flex;gap:2px;flex-wrap:nowrap;align-items:center;overflow-x:auto}.color-swatch{width:18px;height:18px;border-radius:2px;border:1px solid #4d4d4d;cursor:pointer;transition:transform .1s,border-color .1s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.color-swatch:hover{border-color:#6d6d6d;transform:scale(1.1)}.color-swatch.transparent{background:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd);background-size:6px 6px;background-position:0 0,3px 3px;background-color:#999}.message-display-area{grid-column:1 / 3;grid-row:1;display:flex;gap:4px;align-items:center}.message-display-box{flex:1;height:24px;background-color:#2d2d2d;border:1px solid #4d4d4d;border-radius:2px;padding:2px 4px;font-size:10px;color:#b0b0b0;display:flex;align-items:center;overflow:hidden;word-wrap:break-word}.grayscale-toggle-btn{height:24px;width:36px;background-color:#3d3d3d;border:1px solid #4d4d4d;border-radius:2px;color:#e0e0e0;cursor:pointer;font-size:12px;flex-shrink:0;transition:all .2s}.grayscale-toggle-btn:hover{background-color:#4d4d4d;border-color:#6d6d6d}.grayscale-toggle-btn.active{background-color:#06c;border-color:#07d;color:#fff}.sketch-color-label{font-size:10px;color:#b0b0b0;flex-shrink:0;padding:0 4px;display:flex;align-items:center;height:24px}.fill-section,.stroke-section{display:flex;flex-direction:column;gap:4px;width:100%;overflow:visible;flex-shrink:0;min-width:0}.color-row{display:flex;align-items:center;gap:2px;flex:1;flex-wrap:nowrap;box-sizing:border-box;min-width:0}.fill-header,.stroke-header{display:flex;align-items:center;gap:2px}.property-label{font-size:11px;color:#e0e0e0;font-weight:500;white-space:nowrap}.fill-stroke-container{display:flex;gap:4px;align-items:stretch;width:100%;min-width:0}.fill-stroke-sections{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.swap-button{padding:0;border:1px solid #4d4d4d;border-radius:2px;background-color:#383838;color:#e0e0e0;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .1s,border-color .1s;flex-shrink:0}.swap-button:hover{background-color:#454545;border-color:#5d5d5d}.swap-button:active{background-color:#303030}.fill-section .property-label{width:35px}.stroke-section .property-label{width:50px}.stroke-width-container .property-label{width:25px}.color-display{width:60px;height:18px;border-radius:2px;border:1px solid #4d4d4d;cursor:pointer;transition:border-color .1s;box-sizing:border-box;flex-shrink:0}.color-display:hover{border-color:#6d6d6d}.color-code-input{width:60px;height:20px;padding:0;font-size:11px;font-family:Courier New,monospace;background-color:#2d2d2d;box-sizing:border-box;color:#b0b0b0;border:1px solid #4d4d4d;border-radius:2px;text-align:center;flex-shrink:0}.color-code-input:focus{outline:none;border-color:#5d5d5d;background-color:#3d3d3d}.stroke-width-container{display:flex;flex-direction:column;gap:4px;width:100%}.stroke-width-input{width:70px;height:18px;padding:2px 4px;background-color:#3d3d3d;border:1px solid #4d4d4d;color:#e0e0e0;font-size:11px;border-radius:2px}.stroke-width-input:focus{outline:none;border-color:#5d5d5d;background-color:#404040}.right-color-section,.hsl-color-bars{display:flex;gap:8px;flex-shrink:0}.alpha-section,.hsl-section{display:flex;flex-direction:column;gap:4px;width:200px}.color-bar-group{display:flex;align-items:center;gap:4px}.color-bar-label{font-size:10px;color:#b0b0b0;font-weight:600;width:15px;text-align:center;flex-shrink:0}.alpha-section .color-bar-label{width:70px;text-align:left}.color-bar{flex:1;height:16px;border:1px solid #4d4d4d;border-radius:2px;cursor:pointer;transition:border-color .1s;position:relative;width:100%;display:flex;align-items:center;overflow:visible;margin-right:8px}.color-bar:hover{border-color:#5d5d5d}.color-bar-container{flex:1;position:relative;display:flex;align-items:center;width:100%;min-width:0;padding-right:8px;margin-right:8px}.bar-indicator{position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid white;outline:1px solid #000;z-index:10;top:-6px;pointer-events:none}.bar-indicator:after{content:"";position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid white;outline:1px solid #000;top:12px;left:-4px;pointer-events:none}#angle-preview-panel{background-color:#2d2d2d;border-top:1px solid #3d3d3d;border-bottom:1px solid #3d3d3d;padding:8px 8px 0;display:grid;grid-template-columns:var(--angle-title-width) 1fr;grid-template-rows:auto auto;column-gap:var(--angle-gap);row-gap:8px;max-height:240px;overflow-y:auto;flex-shrink:0;position:relative;z-index:1000;--angle-title-width: 24px;--angle-label-width: 40px;--angle-gap: 8px}#angle-preview-panel>.angle-section-title{grid-column:1 / 2;grid-row:1 / -1;justify-self:center;align-self:stretch}#angle-preview-panel>.angle-slider-section,#angle-preview-panel>.preview-section{grid-column:2 / 3}#angle-preview-panel>.angle-slider-section{grid-row:1 / 2}#angle-preview-panel>.preview-section{grid-row:2 / 3}.angle-slider-section{display:flex;flex-direction:column;gap:8px;justify-content:center;flex-shrink:1}.saved-angles-container{display:flex;align-items:flex-start;gap:var(--angle-gap);height:1px;flex-shrink:0}.saved-angles-spacer{width:var(--angle-label-width);min-width:var(--angle-label-width);display:inline-block}.slider-label{font-size:12px;color:#e0e0e0;font-weight:500}.slider-container{display:grid;grid-template-columns:var(--angle-label-width) 1fr var(--angle-label-width);align-items:center;gap:var(--angle-gap);position:relative}.angle-section-title{width:var(--angle-title-width);display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;z-index:4;pointer-events:none;font-size:11px}.slider-wrapper{grid-column:2 / 3;position:relative;box-sizing:border-box;width:100%}.angle-slider{height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,#3d3d3d,#505050,#3d3d3d);outline:none;border-radius:3px;cursor:pointer;width:100%;margin:0;padding:0}.angle-markers{position:absolute;top:50%;left:0;right:0;height:16px;transform:translateY(-50%);pointer-events:auto}.angle-selection-bar{position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);transition:all .15s;z-index:2}.slider-container .angle-label{grid-auto-flow:column;display:inline-block;text-align:center;width:var(--angle-label-width);white-space:nowrap;pointer-events:none;z-index:3}.slider-container .angle-label:first-of-type{grid-column:1 / 2;justify-self:center}.slider-container .angle-label:last-of-type{grid-column:3 / 4;justify-self:center}.angle-marker:hover{background-color:#0d99ff;border-color:#1e88e5;box-shadow:0 0 6px #0d99ff80;transform:translate(-50%) scale(1.2)}.angle-marker.selected{background-color:#0d99ff;border-color:#1e88e5}.angle-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background-color:transparent;border:0;opacity:0;box-shadow:none;border-radius:50%;cursor:pointer;transition:none}.angle-slider::-moz-range-thumb{width:18px;height:18px;background-color:transparent;border:0;opacity:0;box-shadow:none;border-radius:50%;cursor:pointer;transition:none}.angle-slider:hover::-webkit-slider-thumb{background-color:transparent;border-color:transparent;opacity:0}.angle-slider:hover::-moz-range-thumb{background-color:transparent;border-color:transparent;opacity:0}.angle-label{font-size:11px;color:#b0b0b0;width:var(--angle-label-width);min-width:var(--angle-label-width);display:inline-block;text-align:center}.current-angle-display{font-size:12px;color:#e0e0e0;text-align:center;background-color:#1e1e1e;padding:4px 8px;border-radius:3px;border:1px solid #3d3d3d}.saved-angles-track{position:relative;height:20px;flex:1;box-sizing:border-box;margin-bottom:-10px}.saved-angles{position:relative;width:100%;height:100%}.saved-angle-pill{position:absolute;top:-8px;transform:translate(-50%);font-size:11px;color:#b0b0b0;white-space:nowrap;line-height:1;pointer-events:none}.preview-section{display:flex;flex-direction:column;gap:0;margin-bottom:0}.preview-section-title{font-size:12px;font-weight:600;color:#a0a0a0;margin-bottom:4px}.preview-container{display:grid;grid-template-columns:var(--angle-label-width) 1fr var(--angle-label-width);align-items:center;gap:var(--angle-gap);position:relative;width:100%}.preview-spacer{width:var(--angle-label-width);min-width:var(--angle-label-width);display:inline-block}.preview-track{grid-column:2 / 3;position:relative;height:135px;box-sizing:border-box}.preview-card{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;gap:0;transform:translate(-50%)}.preview-label{font-size:11px;color:#b0b0b0;font-weight:500;text-align:center;margin-bottom:0}.preview-placeholder{width:100px;height:120px;background-color:#1e1e1e;border:1px solid #4d4d4d;display:flex;align-items:center;justify-content:center;color:#666;font-size:11px;text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}.preview-placeholder:hover{border-color:#6d6d6d;background-color:#252525}.preview-placeholder.main{width:80px;height:80px;border:2px solid #0d99ff;background-color:#1a1a1a;box-shadow:0 0 8px #0d99ff4d}.preview-placeholder.main:hover{box-shadow:0 0 12px #0d99ff80}.preview-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-box{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}.preview-placeholder.selected{border:2px solid #0d99ff;box-shadow:0 0 8px #0d99ff4d}svg .svg-selected-element{stroke:#ff3b30!important;stroke-width:2px!important;filter:drop-shadow(0 0 6px rgba(255,59,48,.6))}#color-panel{width:100%;min-width:0}#color-panel .color-panel-content{display:grid;grid-template-columns:minmax(260px,1fr) minmax(260px,1fr) 208px;grid-template-rows:auto auto auto;grid-template-areas:"msg msg hsl" "fillstroke palette hsl" "fillstroke alpha help";gap:8px;width:100%;box-sizing:border-box;align-items:start}#color-panel .message-display-area{grid-area:msg}#color-panel .fill-stroke-container{grid-area:fillstroke}#color-panel .color-section{grid-area:palette}#color-panel .alpha-section{grid-area:alpha}#color-panel .help-section{grid-area:help}#color-panel .hsl-section{grid-area:hsl}#color-panel .alpha-section,#color-panel .hsl-section{width:auto}#color-panel .fill-section,#color-panel .stroke-section{display:flex;flex-direction:column;gap:4px;width:100%;min-width:0}#color-panel .color-row{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;width:100%;min-width:0}#color-panel .alpha-section .color-bar,#color-panel .hsl-section .color-bar{flex:0 0 192px;width:192px;margin-right:8px}#color-panel .alpha-section .color-bar{flex:0 0 200px;width:200px}#color-panel .color-palette{flex-wrap:nowrap;overflow-x:auto}.angle-input-line{display:flex;align-items:center;gap:6px;padding:6px 8px;background-color:#1e1e1e;border:1px solid #3d3d3d;border-radius:3px;margin-bottom:0}.input-label{font-size:12px;color:#e0e0e0;font-weight:500;white-space:nowrap}.angle-input{width:70px;padding:4px 6px;background-color:#2d2d2d;border:1px solid #3d3d3d;border-radius:3px;color:#e0e0e0;font-size:12px;text-align:center;transition:border-color .2s}.angle-input:focus{outline:none;border-color:#0d99ff;box-shadow:0 0 4px #0d99ff4d}.angle-input::-webkit-outer-spin-button,.angle-input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.angle-input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.input-unit{font-size:12px;color:#b0b0b0;white-space:nowrap}.angle-save-btn{padding:4px 12px;background-color:#0d99ff;color:#fff;border:none;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:background-color .2s;white-space:nowrap}.angle-save-btn:hover{background-color:#1e88e5}.angle-save-btn:active{background-color:#0c5fa3}.angle-divider{width:1px;height:20px;background-color:#3d3d3d;margin:0 8px}.angle-play-export-btn{padding:4px 12px;background-color:#28a745;color:#fff;border:none;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:background-color .2s;white-space:nowrap}.angle-play-export-btn:hover{background-color:#34b758}.angle-play-export-btn:active{background-color:#1e7e34}.angle-play-export-btn:disabled{background-color:#6c757d;color:#a0a0a0;cursor:not-allowed;opacity:.6}.angle-zip-export-btn{padding:4px 12px;background-color:#ff9800;color:#fff;border:none;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:background-color .2s;white-space:nowrap}.angle-zip-export-btn:hover:not(:disabled){background-color:#ffb74d}.angle-zip-export-btn:active:not(:disabled){background-color:#e68900}.angle-zip-export-btn:disabled{background-color:#a0a0a0;color:#707070;cursor:not-allowed;opacity:.6}.play-export-panel{background-color:#2d2d2d;border-top:1px solid #3d3d3d;padding:12px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;overflow-y:auto;flex-shrink:0;width:100%}.play-export-panel-header{display:flex;justify-content:space-between;align-items:center}.play-export-panel-header h3{margin:0;font-size:14px;color:#e0e0e0;font-weight:600}.play-export-close-btn{background:none;border:none;color:#b0b0b0;font-size:18px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .2s}.play-export-close-btn:hover{color:#e0e0e0}.play-export-panel-content{display:flex;flex-direction:column;gap:12px;flex-grow:0}.play-export-preview-container{display:flex;flex-direction:column;align-items:center;gap:8px}.play-export-preview{width:300px;height:300px;background-color:#1e1e1e;border:1px solid #3d3d3d;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}.play-export-preview-label{font-size:12px;color:#b0b0b0}.play-export-range-slider-container{display:flex;flex-direction:column;gap:8px;padding:8px;background-color:#1e1e1e;border-radius:4px;border:1px solid #3d3d3d;width:100%}.play-export-range-label{font-size:12px;font-weight:500;color:#e0e0e0}.play-export-range-display{display:flex;justify-content:space-between;font-size:11px;color:#b0b0b0}.play-export-range-track{position:relative;width:calc(100% - 16px);height:8px;background-color:#404040;border-radius:4px;margin:4px 0 0 8px}.play-export-range-marker{position:absolute;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #e0e0e0;top:-8px;transform:translate(-50%);border-radius:0}.play-export-current-marker{position:absolute;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid #4a9eff;top:-10px;transform:translate(-50%);cursor:pointer;z-index:5;transition:z-index .1s}.play-export-range-marker-min,.play-export-range-marker-max{box-shadow:0 0 2px #4caf50cc}.play-export-controls{display:flex;gap:8px;flex-wrap:wrap}.play-export-action-btn{flex:1 1 auto;min-width:80px;padding:8px 10px;background-color:#0d99ff;color:#fff;border:none;border-radius:3px;font-size:11px;font-weight:500;cursor:pointer;transition:background-color .2s;white-space:normal;text-align:center;line-height:1.3}.play-export-action-btn:hover{background-color:#1e88e5}.play-export-action-btn:active{background-color:#0c5fa3}input[type=number].play-export-preview-label::-webkit-outer-spin-button,input[type=number].play-export-preview-label::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number].play-export-preview-label[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}