.app{min-height:100vh;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}.header h1{margin:0;font-size:1.1rem;font-weight:600}.upload-btn{padding:8px 16px;background:var(--accent);color:#fff;border-radius:6px;cursor:pointer;font-size:.875rem;transition:background .15s}.upload-btn:hover{background:var(--accent-hover)}.header-actions{display:flex;align-items:center;gap:12px}.undo-redo-btns{display:flex;gap:4px}.undo-redo-btn{padding:8px 12px;font-size:1rem;line-height:1;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:border-color .15s}.undo-redo-btn:hover:not(:disabled){border-color:var(--accent)}.undo-redo-btn:disabled{opacity:.5;cursor:not-allowed}.main{flex:1;display:flex;overflow:hidden}.sidebar{width:280px;flex-shrink:0;background:var(--bg-secondary);border-right:1px solid var(--border);overflow-y:auto;padding:16px}.canvas-section{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:20px;min-height:0}.canvas-container{position:relative;max-width:100%}.main-canvas,.mask-overlay{max-width:100%;height:auto;display:block}.mask-overlay{position:absolute;top:0;left:0;pointer-events:none}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-secondary);min-height:300px}.upload-area{padding:24px 48px;border:2px dashed var(--border);border-radius:8px;cursor:pointer;transition:border-color .2s}.upload-area:hover{border-color:var(--accent)}.color-panel h3,.color-panel h4,.recommended-colors h3,.plan-slots h3{margin:0 0 8px;font-size:.95rem;font-weight:600}.ai-detect-section{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}.ai-detect-section h4{font-size:.85rem;margin-bottom:4px}.ai-detect-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.ai-detect-btn{padding:8px 14px;font-size:.8rem;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .2s}.ai-detect-btn:hover:not(:disabled){background:var(--accent-hover)}.ai-detect-btn:disabled{opacity:.5;cursor:not-allowed}.mask-add-section{margin-bottom:12px}.mask-add-toggle{display:flex;align-items:center;gap:8px;font-size:.875rem;cursor:pointer;margin-bottom:4px}.mask-add-label{font-weight:500}.mask-add-toggle input{accent-color:var(--accent)}.hint{margin:0 0 12px;font-size:.75rem;color:var(--text-secondary)}.region-list{display:flex;flex-direction:column;gap:10px}.region-item{display:flex;flex-direction:column;gap:6px}.region-label{display:flex;align-items:center;gap:8px;font-size:.875rem;cursor:pointer;flex-wrap:wrap}.clear-mask-btn{margin-left:auto;padding:2px 8px;font-size:.7rem;background:transparent;color:var(--text-secondary);border:1px solid var(--border);border-radius:4px;cursor:pointer}.clear-mask-btn:hover{color:var(--accent)}.region-item input[type=radio]{accent-color:var(--accent)}.color-row{display:flex;gap:8px;align-items:center}.color-input{width:36px;height:28px;padding:2px;border:1px solid var(--border);border-radius:4px;cursor:pointer;background:transparent}.hex-input{flex:1;padding:6px 8px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-size:.8rem}.preset-colors{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.preset-btn{width:24px;height:24px;border:2px solid var(--border);border-radius:4px;cursor:pointer;transition:transform .1s}.preset-btn:hover{transform:scale(1.1)}.toggle-mask{display:flex;align-items:center;gap:8px;margin:16px 0;font-size:.875rem;cursor:pointer}.tolerance-control{margin-bottom:12px}.tolerance-control label{display:block;font-size:.8rem;margin-bottom:4px}.tolerance-control input[type=range]{width:100%;accent-color:var(--accent)}.recommended-colors{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}.palette-buttons{display:flex;flex-direction:column;gap:8px}.palette-btn{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);cursor:pointer;text-align:left;transition:border-color .2s}.palette-btn:hover{border-color:var(--accent)}.palette-preview{display:flex;gap:2px}.palette-preview span{width:16px;height:16px;border-radius:2px}.palette-name{font-size:.85rem}.plan-slots{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.slot-card{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;padding:10px}.slot-preview{min-height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;font-size:.75rem;color:var(--text-secondary)}.slot-colors{display:flex;flex-wrap:wrap;gap:4px}.minicolor{width:12px;height:12px;border-radius:2px}.slot-actions{display:flex;gap:6px}.slot-actions button{flex:1;padding:6px 8px;font-size:.75rem;border:none;border-radius:4px;cursor:pointer;transition:opacity .2s}.btn-save{background:var(--accent);color:#fff}.btn-load{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border)}.btn-load:disabled{opacity:.5;cursor:not-allowed}.share-panel{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}.share-panel h3{margin:0 0 8px;font-size:.95rem;font-weight:600}.share-btn{width:100%;padding:10px 12px;font-size:.875rem;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .2s}.share-btn:hover:not(:disabled){background:var(--accent-hover)}.share-btn:disabled{opacity:.6;cursor:not-allowed}.share-btn.secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.share-btn.secondary:hover{border-color:var(--accent)}.share-url-row{display:flex;gap:8px;margin-top:8px}.share-url-input{flex:1;padding:6px 8px;font-size:.75rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;color:var(--text-primary)}.copy-btn{padding:6px 12px;font-size:.75rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;cursor:pointer}.copy-btn:hover{border-color:var(--accent)}.share-error{margin-top:8px;font-size:.75rem;color:#ef4444}.import-btn{display:block;margin-top:12px;padding:8px 12px;font-size:.8rem;text-align:center;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);cursor:pointer}.import-btn:hover{border-color:var(--accent)}@media(max-width:768px){.main{flex-direction:column}.sidebar{width:100%;max-height:50vh}}:root{--bg-primary: #0f1419;--bg-secondary: #1a2332;--bg-tertiary: #243044;--accent: #3b82f6;--accent-hover: #60a5fa;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--border: #334155;--success: #22c55e}*{box-sizing:border-box}body{margin:0;font-family:Noto Sans JP,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}