:root{--bg: #ffffff;--bg-subtle: #f7f7f7;--bg-muted: #efefef;--bg-canvas: #f5f5f5;--text: #111111;--text-secondary: #666666;--text-muted: #9a9a9a;--border: #e5e5e5;--border-strong: #d0d0d0;--accent: #e8541c;--accent-hover: #d14810;--accent-light: #fff1ea;--danger: #dc2626;--danger-light: #fef2f2;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{border:0;cursor:pointer}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}.header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 24px;height:56px;background:var(--bg);border-bottom:1px solid var(--border)}.header-brand h1{margin:0;font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.01em}.header-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}.status-sep{color:var(--text-muted)}.body{flex:1;display:grid;grid-template-columns:300px minmax(0,1fr);overflow:hidden;min-height:0}.rail{display:flex;flex-direction:column;overflow-y:auto;border-right:1px solid var(--border);background:var(--bg-subtle)}.rail-divider{height:1px;background:var(--border);margin:0;flex:0 0 auto}.stage{display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}.dock{flex:0 0 auto;display:flex;align-items:flex-start;gap:16px;padding:10px 24px;background:var(--bg);border-top:1px solid var(--border)}.dock-label{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--text-secondary);min-height:34px;flex:0 0 auto}.rail-section{padding:16px;flex:0 0 auto}.list-section{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.rail-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.rail-section-heading h2{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.icon-button,.secondary-button,.cta-generate,.dock-button,.segmented button,.scheme-item,.swatch{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;font-size:13px;font-weight:500;border-radius:0;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.icon-button{width:34px;color:var(--text-secondary);background:transparent;flex:0 0 auto}.icon-button:hover{background:var(--bg-muted)}.icon-button.danger{color:var(--text-muted)}.icon-button.danger:hover{color:var(--danger);background:var(--danger-light)}.cta-generate{flex:0 0 auto;min-width:120px;padding:0 24px;min-height:40px;color:#fff;background:var(--accent);font-weight:600;font-size:13px;letter-spacing:.02em}.cta-generate:hover:not(:disabled){background:var(--accent-hover)}.secondary-button{width:100%;padding:0 14px;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);font-weight:500}.secondary-button:hover:not(:disabled){background:var(--bg-muted)}.secondary-button.compact{width:auto;flex:0 0 auto;padding:0 12px}.cta-generate:disabled,.secondary-button:disabled,.icon-button:disabled,.dock-button:disabled{cursor:not-allowed;opacity:.4}.dock-button{flex:0 0 auto;padding:0 12px;min-height:34px;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);font-size:12px}.dock-button:hover:not(:disabled){background:var(--bg-muted);border-color:var(--text-muted)}.dropzone{display:grid;place-items:center;gap:6px;min-height:76px;margin-bottom:8px;color:var(--text-secondary);background:var(--bg);border:1px dashed var(--border-strong);border-radius:0;cursor:pointer;text-align:center;font-size:12px;transition:border-color .15s ease,background-color .15s ease}.dropzone:hover{border-color:var(--accent);background:var(--accent-light)}.dropzone input,.hidden-input{display:none}.folder-btn{min-height:34px;font-size:12px}.import-mode-note{margin:-4px 0 8px;color:var(--text-muted);font-size:12px;line-height:1.4}.share-import{display:grid;gap:8px;margin-top:10px}.share-import textarea{width:100%;min-height:72px;resize:vertical;padding:9px 10px;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:0;outline:0;font:inherit;font-size:12px;line-height:1.45}.share-import textarea:focus{border-color:var(--accent)}.share-import textarea:disabled{cursor:not-allowed;opacity:.55}.compact-empty{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 12px;color:var(--text-muted);background:var(--bg);border:1px dashed var(--border);border-radius:0;font-size:12px}.image-list{display:grid;align-content:start;gap:1px;flex:1;overflow-y:auto;background:var(--border)}.image-row{position:relative;z-index:1;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:8px 10px;background:var(--bg-subtle)}.image-row-clip{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.image-row-clip:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#f7f7f7bd,#f7f7f76b,#f7f7f7b3)}.image-row-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:pixelated;filter:saturate(.85) contrast(1.05);opacity:.55;-webkit-mask-image:linear-gradient(90deg,#00000059,#000000f2 45%,#00000073);mask-image:linear-gradient(90deg,#00000059,#000000f2 45%,#00000073)}.image-index{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;color:#fff;background:var(--text);border-radius:0;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}.image-meta{position:relative;z-index:1;display:grid;gap:2px;min-width:0}.image-meta strong{overflow:hidden;color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500}.image-meta span{color:var(--text-secondary);font-size:12px;font-variant-numeric:tabular-nums}.image-meta small{color:var(--danger);font-size:12px}.image-actions{position:relative;z-index:1;display:flex;gap:4px}.image-actions .icon-button{width:30px;min-height:30px}.image-preview-popover{position:absolute;right:44px;top:8px;z-index:4;display:flex;align-items:center;justify-content:center;width:112px;height:112px;padding:8px;pointer-events:none;background:var(--bg);border:1px solid var(--border-strong);box-shadow:0 8px 24px #00000024;opacity:0;transform:scale(.96);transform-origin:top right;transition:opacity .12s ease,transform .12s ease}.image-preview-popover img{display:block;width:96px;height:96px;object-fit:contain;image-rendering:pixelated}.image-row:hover,.image-row:focus-within{z-index:5}.image-row:hover .image-preview-popover,.image-row:focus-within .image-preview-popover{opacity:1;transform:scale(1)}.notice{margin:8px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.5}.notice.error{color:var(--danger)}.metric{color:var(--text-muted);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}.command-bar{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap}.command-controls{display:flex;align-items:center;gap:16px;flex:1 1 560px;flex-wrap:wrap;min-width:360px}.command-status{flex:1 1 220px;min-width:180px;font-size:12px;color:var(--text-secondary);white-space:normal;line-height:1.45}.command-status strong{color:var(--text);font-weight:600}.stop-button{flex:0 0 auto;min-width:72px;min-height:34px;padding:0 10px}.compact-command-bar{gap:10px;padding-top:8px;padding-bottom:8px}.command-summary{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 320px;color:var(--text-secondary);font-size:12px}.command-summary strong{color:var(--text);white-space:nowrap}.command-summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.segmented{display:flex;gap:0;border:1px solid var(--border-strong)}.segmented button{background:var(--bg);color:var(--text-secondary);font-weight:500;font-size:12px;min-height:34px;padding:0 14px;border:0;border-right:1px solid var(--border-strong);border-radius:0}.segmented button:last-child{border-right:0}.segmented button:hover{background:var(--bg-muted)}.segmented button.active{background:var(--text);color:#fff}.compact-segmented button{padding:0 12px}.range-row{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:12px;margin:0;flex:0 0 auto}.range-row span{white-space:nowrap;font-weight:500}.range-row input{width:80px;accent-color:var(--accent)}.range-row strong{color:var(--text);font-size:12px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}.range-row.compact{gap:6px}.range-row.compact input{width:88px}.scheme-bar{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--border)}.scheme-selector{display:flex;gap:0;overflow-x:auto;border:1px solid var(--border)}.scheme-item{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 12px;min-height:38px;background:var(--bg);border:0;border-right:1px solid var(--border);border-radius:0;text-align:left;cursor:pointer;transition:background-color .15s ease}.scheme-item:last-child{border-right:0}.scheme-item:hover{background:var(--bg-muted)}.scheme-item.active{background:var(--accent-light);box-shadow:inset 0 -2px 0 var(--accent)}.scheme-rank{display:grid;place-items:center;min-width:28px;height:24px;padding:0 6px;color:#fff;background:var(--text-muted);border-radius:0;font-weight:700;font-size:12px;flex:0 0 auto}.scheme-item.active .scheme-rank{background:var(--accent)}.scheme-info{display:flex;flex-direction:column;gap:1px;min-width:0}.scheme-info strong{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap}.scheme-info small{color:var(--text-muted);font-size:12px;white-space:nowrap}.board-selector{display:flex;gap:0;overflow-x:auto;border:1px solid var(--border)}.board-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:6px 12px;background:var(--bg);border:0;border-right:1px solid var(--border);border-radius:0;text-align:left;cursor:pointer;transition:background-color .15s ease;color:var(--text-secondary)}.board-tab:last-child{border-right:0}.board-tab:hover{background:var(--bg-muted)}.board-tab.active{background:var(--accent-light);box-shadow:inset 0 -2px 0 var(--accent);color:var(--text)}.board-tab-head{display:flex;align-items:center;gap:6px;color:inherit}.board-tab-head>span{font-weight:600;font-size:12px;color:inherit}.board-tab small{color:var(--text-muted);font-size:12px;white-space:nowrap}.board-tab-stats{display:flex;flex-direction:row;gap:6px;font-size:11px;line-height:1;color:var(--text-muted);font-variant-numeric:tabular-nums}.board-tab.active small,.board-tab.active .board-tab-stats{color:var(--text-secondary)}.board-color-list{display:grid;gap:6px;min-width:0}.board-color-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;font-size:12px;color:var(--text-secondary)}.board-color-list-head strong{color:var(--text)}.board-color-list-head>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-color-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}.board-color-strip button{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:0;max-width:180px;padding:3px 8px;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:0;font-size:12px}.board-color-list .swatch{width:14px;height:14px;min-height:0;border-radius:0;border:1px solid rgba(0,0,0,.18);flex-shrink:0}.board-color-list .color-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-color-list .color-count{color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.shared-color-mark{display:inline-flex;align-items:center;gap:2px;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}.canvas-stage{flex:1;display:grid;place-items:center;overflow:auto;padding:24px;background:var(--bg-canvas);min-height:0}.board-canvas{display:block;max-width:100%;height:auto;background:var(--bg-canvas);border:1px solid var(--border);border-radius:0}.settings-section{flex:0 0 auto;border-top:1px solid var(--border)}.settings-panel{display:grid;gap:8px;padding:0 16px 14px}.settings-row{display:grid;gap:6px}.settings-row>span{color:var(--text-muted);font-size:12px;font-weight:600}.settings-row .segmented{width:max-content;max-width:100%;overflow-x:auto}.settings-section>summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:14px 16px;list-style:none;-webkit-user-select:none;user-select:none}.settings-section>summary::-webkit-details-marker{display:none}.settings-section>summary:before{content:"▸ ";display:inline-block;margin-right:4px;transition:transform .15s ease}.settings-section[open]>summary:before{transform:rotate(90deg)}.settings-section>summary:hover{color:var(--text-secondary)}.dock-content{display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex:1;min-width:0}.export-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.export-group-title{color:var(--text-muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-right:2px}.dock-divider{width:1px;align-self:stretch;background:var(--border)}.share-results{display:grid;gap:1px;width:100%}.share-results-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;padding:0 4px 2px;color:var(--text-secondary);font-size:12px;font-weight:600}.share-results-header .icon-button{width:28px;min-height:28px}.share-result{display:grid;grid-template-columns:auto minmax(80px,auto) minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:0;color:var(--text-secondary);font-size:12px}.share-result.error{border-color:var(--danger);background:var(--danger-light);color:var(--danger)}.share-result code{overflow:hidden;color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:12px}.share-result small{color:var(--text-muted);white-space:nowrap}.share-result .icon-button{width:26px;min-height:26px}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1099px){.body{grid-template-columns:260px minmax(0,1fr)}.command-bar,.command-controls{flex-wrap:wrap}}@media(max-width:767px){.app-shell{height:auto;min-height:100vh;overflow:visible}.body{display:block;overflow:visible}.rail{overflow:visible;border-right:0;border-bottom:1px solid var(--border)}.list-section,.image-list{overflow:visible}.stage{overflow:visible;min-height:0}.canvas-stage{overflow:auto;min-height:60vh;padding:16px}.header{height:48px;padding:0 16px;position:sticky;top:0;z-index:10}.header-brand h1{font-size:16px}.header-status{font-size:12px}.command-bar,.scheme-bar{padding:10px 16px}.command-controls{flex:1 1 100%;min-width:0;gap:12px}.dock{flex-direction:column;align-items:stretch;gap:8px;padding:10px 16px}.dock-content{flex-direction:column;align-items:stretch}.dock-divider{width:100%;height:1px}.segmented button{padding:0 10px;font-size:12px}}@media(hover:none){.image-preview-popover{position:static;z-index:auto;width:56px;height:56px;padding:4px;opacity:1;transform:none;box-shadow:none;border-color:var(--border);grid-column:3;grid-row:1}.image-preview-popover img{max-width:48px;max-height:48px}.image-row{grid-template-columns:28px minmax(0,1fr) auto auto}}