:root{--primary-color: #4a90e2;--secondary-color: #f39c12;--success-color: #27ae60;--danger-color: #e74c3c;--gray-light: #ecf0f1;--gray-medium: #bdc3c7;--gray-dark: #34495e;--border-radius: 8px;--shadow: 0 2px 8px rgba(0,0,0,.1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333;line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border:none;border-radius:var(--border-radius);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;gap:.5rem}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:#357abd}.btn-secondary{background-color:var(--gray-light);color:var(--gray-dark)}.btn-secondary:hover{background-color:#d5dbdb}.btn-danger{background-color:var(--danger-color);color:#fff}.btn-danger:hover{background-color:#c0392b}.btn-success{background-color:var(--success-color);color:#fff}.btn-success:hover{background-color:#229954}.btn-sm{padding:.25rem .5rem;font-size:.75rem}.btn-lg{padding:.75rem 1.5rem;font-size:1rem}.input-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.input-group label{font-size:.875rem;font-weight:500;color:var(--gray-dark)}.input-group input,.input-group select{padding:.5rem;border:1px solid var(--gray-medium);border-radius:var(--border-radius);font-size:.875rem;transition:border-color .2s ease}.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--primary-color)}.card{background:#fff;border-radius:var(--border-radius);padding:1rem;box-shadow:var(--shadow);margin-bottom:1rem}.card-header{font-size:1rem;font-weight:600;margin-bottom:.5rem;color:var(--gray-dark)}.section-title{font-size:.875rem;font-weight:600;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--gray-light)}.color-item{width:40px;height:40px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all .2s ease}.color-item:hover{transform:scale(1.1)}.color-item.active{border-color:var(--gray-dark);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gray-dark)}@media (max-width: 900px){.btn{min-height:36px;min-width:36px}.btn-sm{min-height:32px}}@media (max-width: 600px){body{font-size:14px}.btn{padding:.4rem .8rem;min-height:40px}.btn-sm{padding:.3rem .5rem;font-size:.7rem;min-height:36px}.card{padding:.75rem}.card-header{font-size:.9rem}}@media (hover: none) and (pointer: coarse){.btn:hover,.color-item:hover{transform:none}.btn{min-height:44px;min-width:44px}}.btn,.color-item,.header-cell,.stat-item{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.color-scroll,.stats-content{-webkit-overflow-scrolling:touch}.canvas-settings[data-v-18a65f4a]{display:flex;flex-direction:column;gap:.75rem}.preset-sizes[data-v-18a65f4a]{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}.checkbox-group[data-v-18a65f4a]{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.checkbox-label[data-v-18a65f4a]{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem}.checkbox-label input[type=checkbox][data-v-18a65f4a]{cursor:pointer}.color-picker-wrapper[data-v-18a65f4a]{display:flex;gap:.5rem;align-items:center}.color-input[data-v-18a65f4a]{width:60px;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.875rem}.section-title[data-v-18a65f4a]{font-size:.8rem;font-weight:600;color:#666;margin-top:.5rem;border-top:1px solid #eee;padding-top:.5rem}.split-info[data-v-18a65f4a]{background:#f0f7ff;padding:.5rem;border-radius:4px;text-align:center}.split-count[data-v-18a65f4a]{font-size:.9rem;font-weight:600;color:#4a90e2}.reference-image-container[data-v-18a65f4a]{margin-top:.5rem}.color-palette[data-v-bd4ffd51]{display:flex;align-items:center;gap:.5rem}.selected-info[data-v-bd4ffd51]{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.selected-preview[data-v-bd4ffd51]{width:28px;height:28px;border-radius:4px;border:2px solid #4a90e2}.selected-code[data-v-bd4ffd51]{font-size:.75rem;font-weight:600;color:#333}.color-scroll[data-v-bd4ffd51]{overflow-x:auto;overflow-y:hidden;max-width:400px;-webkit-overflow-scrolling:touch}.preset-colors[data-v-bd4ffd51]{display:flex;gap:2px;flex-shrink:0}.color-item[data-v-bd4ffd51]{width:24px;height:24px;border-radius:3px;cursor:pointer;border:1px solid rgba(0,0,0,.1);transition:transform .1s,box-shadow .1s;flex-shrink:0}.color-item[data-v-bd4ffd51]:hover{transform:scale(1.15);z-index:1;box-shadow:0 2px 6px #0003}.color-item.active[data-v-bd4ffd51]{box-shadow:0 0 0 2px #4a90e2;transform:scale(1.1)}@media (max-width: 900px){.color-scroll[data-v-bd4ffd51]{max-width:300px}}@media (max-width: 600px){.color-palette[data-v-bd4ffd51]{width:100%;justify-content:flex-start}.color-scroll[data-v-bd4ffd51]{max-width:100%;flex:1}.selected-preview[data-v-bd4ffd51]{width:24px;height:24px}.selected-code[data-v-bd4ffd51]{font-size:.65rem}.color-item[data-v-bd4ffd51]{width:20px;height:20px}}@media (max-width: 400px){.color-item[data-v-bd4ffd51]{width:18px;height:18px}.selected-preview[data-v-bd4ffd51]{width:22px;height:22px}}.drawing-tools[data-v-270986eb]{display:flex;align-items:center;gap:.5rem}.tool-buttons[data-v-270986eb]{display:flex;gap:.25rem}.brush-size[data-v-270986eb]{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:#f5f5f5;border-radius:4px}.brush-size label[data-v-270986eb]{font-size:.75rem;white-space:nowrap}.brush-size input[type=range][data-v-270986eb]{width:60px}.divider[data-v-270986eb]{width:1px;height:24px;background:#ddd}.action-buttons[data-v-270986eb]{display:flex;gap:.25rem}@media (max-width: 600px){.drawing-tools[data-v-270986eb]{gap:.3rem;flex-wrap:wrap;justify-content:center}.brush-size[data-v-270986eb]{padding:.2rem .4rem}.brush-size label[data-v-270986eb]{font-size:.65rem}.brush-size input[type=range][data-v-270986eb]{width:50px}.divider[data-v-270986eb]{display:none}.tool-buttons .btn[data-v-270986eb],.action-buttons .btn[data-v-270986eb]{padding:.25rem .5rem;font-size:.85rem}}.canvas-container[data-v-af8e8d73]{position:relative;width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;background:#e8e8e8;border-radius:8px;-webkit-user-select:none;user-select:none}.grid-wrapper[data-v-af8e8d73]{display:flex;flex-direction:column}.main-row[data-v-af8e8d73]{display:flex}.column-headers[data-v-af8e8d73]{display:flex;background:#f5f5f5;border-left:1px solid #ccc;border-right:1px solid #ccc}.column-headers.bottom[data-v-af8e8d73]{margin-left:0!important;border-top:none;border-bottom:1px solid #ccc}.row-headers[data-v-af8e8d73]{display:flex;flex-direction:column;background:#f5f5f5;border-left:1px solid #ccc;border-bottom:1px solid #ccc}.row-headers.right[data-v-af8e8d73]{border-left:none;border-right:1px solid #ccc}.header-cell[data-v-af8e8d73]{display:flex;align-items:center;justify-content:center;font-weight:500;color:#555;flex-shrink:0;font-size:10px}.header-cell.corner[data-v-af8e8d73]{background:#e8e8e8}canvas[data-v-af8e8d73]{border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a}.zoom-controls[data-v-af8e8d73]{position:absolute;bottom:10px;right:10px;display:flex;align-items:center;gap:.5rem;background:#fff;padding:.5rem;border-radius:8px;box-shadow:0 2px 8px #00000026}.zoom-level[data-v-af8e8d73]{font-size:.75rem;min-width:45px;text-align:center;font-weight:500}.position-info[data-v-af8e8d73]{position:absolute;bottom:10px;left:10px;font-size:.75rem;color:#333;background:#fffffff2;padding:.25rem .5rem;border-radius:4px;font-weight:500;box-shadow:0 1px 4px #0000001a}@media (max-width: 600px){.zoom-controls[data-v-af8e8d73]{bottom:5px;right:5px;padding:.3rem;gap:.3rem;font-size:.7rem}.zoom-level[data-v-af8e8d73]{font-size:.65rem;min-width:35px}.zoom-controls .btn[data-v-af8e8d73]{font-size:.75rem;padding:.2rem .4rem}.position-info[data-v-af8e8d73]{bottom:5px;left:5px;font-size:.65rem;padding:.15rem .3rem}.header-cell[data-v-af8e8d73]{font-size:8px!important}}@media (max-width: 400px){.zoom-controls[data-v-af8e8d73]{flex-wrap:wrap;max-width:100px;justify-content:center}}.export-panel[data-v-e3d2ce69]{display:flex;gap:.25rem}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.app{height:100vh;display:flex;flex-direction:column;overflow:hidden}.app-header{background-color:#4a90e2;color:#fff;padding:.75rem;text-align:center;box-shadow:0 2px 4px #0000001a;flex-shrink:0;display:flex;justify-content:center;align-items:center;position:relative}.app-header h1{font-size:1.25rem;margin:0}.lang-switch{position:absolute;right:1rem;background:#fff3;border:1px solid rgba(255,255,255,.4);color:#fff;padding:.25rem .75rem;border-radius:4px;cursor:pointer;font-size:.8rem;font-weight:500;transition:background .2s}.lang-switch:hover{background:#ffffff4d}.main-layout{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:.5rem;height:calc(100vh - 56px);min-height:0;overflow:hidden}.top-toolbar{display:flex;align-items:flex-start;gap:.5rem;background:#fff;border-radius:8px;padding:.5rem;box-shadow:0 2px 8px #0000001a;flex-shrink:0;flex-wrap:wrap}.toolbar-section{display:flex;align-items:center;gap:.5rem}.tools-section{flex-shrink:0}.colors-section{flex:1;min-width:300px}.actions-section{flex-shrink:0;display:flex;gap:.5rem;align-items:flex-start}.content-area{flex:1;display:flex;gap:.5rem;min-height:0}.left-panel{width:160px;min-width:160px;background:#fff;border-radius:8px;padding:.75rem;box-shadow:0 2px 8px #0000001a;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;gap:.75rem}.panel-section{display:flex;flex-direction:column;gap:.4rem}.section-label{font-size:.75rem;font-weight:600;color:#666}.size-inputs{display:flex;align-items:center;gap:.25rem}.size-input{width:50px;padding:.25rem;border:1px solid #ddd;border-radius:4px;font-size:.85rem;text-align:center}.preset-buttons{display:flex;gap:.25rem;flex-wrap:wrap}.checkbox-row{display:flex;align-items:center;gap:.4rem;font-size:.8rem;cursor:pointer}.split-info{font-size:.75rem;color:#4a90e2;font-weight:500;background:#f0f7ff;padding:.25rem .5rem;border-radius:4px;text-align:center}.image-scale-control{margin-top:.5rem;padding:.5rem;background:#f5f5f5;border-radius:4px}.image-scale-control label{display:block;font-size:.75rem;color:#666;margin-bottom:.25rem}.image-scale-control input[type=range]{width:100%;cursor:pointer}.canvas-area{flex:1;display:flex;justify-content:center;align-items:center;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;min-width:0;min-height:0}.color-stats-bar{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:.75rem;max-height:150px;overflow-y:auto;flex-shrink:0}.stats-header{margin-bottom:.5rem;border-bottom:1px solid #eee;padding-bottom:.5rem}.stats-title{font-size:.85rem;font-weight:600;color:#4a90e2}.stats-content{display:flex;flex-wrap:wrap;gap:.5rem}.stat-item{display:flex;align-items:center;gap:.4rem;padding:.25rem .5rem;background:#f5f5f5;border-radius:4px;cursor:pointer;transition:background .2s}.stat-item:hover{background:#e8e8e8}.stat-color{width:20px;height:20px;border-radius:3px;border:1px solid #ddd;flex-shrink:0}.stat-info{display:flex;flex-direction:column;gap:.1rem}.stat-code{font-size:.75rem;font-weight:600;color:#333}.stat-count{font-size:.65rem;color:#666}@media (max-width: 900px){.top-toolbar{flex-direction:column;align-items:stretch;gap:.4rem}.toolbar-section{flex-wrap:wrap;justify-content:center}.colors-section{min-width:auto;order:2}.tools-section{order:1}.actions-section{order:3;justify-content:center}.content-area{flex-direction:column}.left-panel{width:100%;min-width:auto;max-height:none;flex-direction:row;flex-wrap:wrap;gap:.5rem;order:2}.panel-section{flex:1;min-width:140px}.canvas-area{min-height:300px;order:1}.color-stats-bar{max-height:100px;order:3}}@media (max-width: 600px){.app-header{padding:.5rem}.app-header h1{font-size:1rem}.lang-switch{padding:.2rem .5rem;font-size:.7rem;right:.5rem}.main-layout{padding:.25rem;gap:.25rem}.top-toolbar{padding:.4rem}.toolbar-section{gap:.25rem}.left-panel{padding:.5rem;gap:.5rem}.panel-section{min-width:120px}.section-label{font-size:.7rem}.size-input{width:40px;font-size:.75rem;padding:.2rem}.preset-buttons{gap:.2rem}.preset-buttons .btn{font-size:.7rem;padding:.2rem .4rem}.checkbox-row{font-size:.7rem}.image-scale-control{padding:.3rem}.image-scale-control label{font-size:.65rem}.canvas-area{min-height:250px}.color-stats-bar{padding:.5rem;max-height:80px}.stats-title{font-size:.75rem}.stat-item{padding:.15rem .3rem}.stat-color{width:16px;height:16px}.stat-code{font-size:.65rem}.stat-count{font-size:.55rem}}@media (max-width: 400px){.app-header h1{font-size:.85rem}.top-toolbar{gap:.3rem}.left-panel{flex-direction:column;flex-wrap:nowrap}.panel-section{flex-direction:row;flex-wrap:wrap;align-items:center;min-width:auto;width:100%;gap:.3rem}.section-label{width:100%}.size-inputs,.preset-buttons{flex:1}.checkbox-row{flex:1;min-width:45%}.colors-section .color-scroll{max-width:100%}}