:root{font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#101827;background:#f7f9fc;line-height:1.5;font-weight:400;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;min-height:100%}body{min-height:100vh;background:#f7f9fc;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.visually-hidden-input{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}.app-shell{height:100dvh;min-height:0;display:grid;grid-template-rows:56px minmax(0,1fr) auto;grid-template-columns:260px minmax(0,1fr);background:#f7f9fc}.app-shell.sidebar-collapsed{grid-template-columns:52px minmax(0,1fr)}.sidebar{grid-row:2;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;align-self:stretch;border-right:0;background:#f7f9fc;overflow:hidden}.sidebar-toggle-button{min-height:36px;margin:12px 12px 0;border:1px solid #d8e1ec;border-radius:8px;background:#fff;color:#263244;font-size:12px;font-weight:700}.sidebar-toggle-button:hover{border-color:#aebccd;background:#f8fafc}.app-shell.sidebar-collapsed .sidebar{background:#fff;border-right:1px solid #e3e9f1}.app-shell.sidebar-collapsed .sidebar-toggle-button{width:36px;min-height:112px;margin:12px 8px;padding:8px 0;writing-mode:vertical-rl;letter-spacing:0}.control-panel{min-width:0;margin:12px;padding:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;scrollbar-width:none}.control-panel::-webkit-scrollbar,.color-lab-body::-webkit-scrollbar{width:0;height:0}.workspace{grid-row:2;padding:12px 14px 10px 0;display:grid;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}.app-shell>.board-usage-panel{grid-column:1 / -1;grid-row:3;margin:0 14px 12px}.panel,.board-section,.color-lab,.usage-section,.workspace-top{background:#fff;border:1px solid #e3e9f1;border-radius:10px;box-shadow:0 8px 28px #0f172a0a}.panel{padding:14px 16px;margin-bottom:0;border:1px solid #e3e9f1;border-radius:10px;background:#fff;box-shadow:0 8px 28px #0f172a0a}.brand-panel{order:1;display:grid;gap:12px}.compact-panel,.canvas-settings-panel{order:2}.project-library-entry-panel{order:3}.compact-panel{padding:12px 18px}.brand-panel{background:transparent}.eyebrow{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6c7380}h1,h2,p{margin:0}h1{font-size:18px;margin-bottom:4px}h2{font-size:16px}.muted{color:#5e6675;font-size:13px}.label{display:block;margin-bottom:8px;font-size:13px;color:#5e6675}.text-input{width:100%;min-height:44px;border-radius:8px;border:1px solid #dde5ef;background:#fff;padding:9px 12px;color:#1d2433}.palette-summary{border-left:4px solid var(--accent);padding-left:12px}.palette-summary.compact p{font-size:13px}.palette-summary strong{display:block;margin-bottom:4px}.palette-summary p{color:#5e6675}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.section-head span{font-size:13px;color:#6c7380}.section-head h2{white-space:nowrap}.section-head.compact{margin-bottom:8px}.section-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.section-title-row span{flex:0 0 auto;color:#6c7380;font-size:12px}.preset-grid,.usage-grid{display:grid;gap:10px}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.preset-section{margin-bottom:8px}.preset-section:last-of-type{margin-bottom:8px}.preset-section-label{margin:0 0 6px;font-size:13px;color:#6c7380}.custom-size-title{margin-top:10px}.panel-toggle{min-height:34px;padding:0 10px;border:1px solid rgba(29,36,51,.12);border-radius:999px;background:#fff;color:#5e6675}.panel-toggle.block{width:100%;margin-bottom:8px;border-radius:7px}.preset-button,.tool-button,.action-button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #dce4ee;border-radius:8px;background:#fff;color:#1d2433;transition:transform .12s ease,border-color .12s ease,background .12s ease}.action-button svg,.canvas-tool-button svg,.canvas-tool-toggle svg,.zoom-action svg,.panel-mode-button svg,.export-panel-header svg,.export-primary-button svg{flex:0 0 auto}.preset-button:hover,.tool-button:hover,.action-button:hover{transform:none;border-color:#1d24334d}.preset-button.active{background:#0f172a;border-color:#0f172a;color:#fff}.custom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.custom-grid label{font-size:13px;color:#5e6675}.tool-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}.tool-row-single{grid-template-columns:1fr}.tool-button.active,.action-button.solid{background:#111827;color:#fffaf1;border-color:#111827}.tool-button:disabled{cursor:not-allowed;opacity:.45}.project-library-panel{background:#f8fafc}.project-library-entry-panel{display:grid;gap:8px}.project-library-entry-panel .section-head{margin-bottom:0}.project-library-main-button{width:100%;min-height:36px}.project-library-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.project-library-actions .action-button{padding:0 8px;font-size:13px;white-space:nowrap}.project-library-message{margin-top:0;color:#687284;font-size:12px;line-height:1.45}.project-library-current-card{display:grid;gap:3px;padding:10px;border:1px solid #cfe2fb;border-radius:8px;background:#eef6ff}.project-library-current-card span,.project-library-current-card small{color:#687284;font-size:12px}.project-library-current-card strong{overflow:hidden;color:#1d2433;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.project-library-hint{color:#687284;font-size:12px;line-height:1.45}.project-library-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;place-items:center;padding:28px;background:#0f172a57}.project-library-modal{width:min(1040px,100%);max-height:min(780px,calc(100vh - 56px));display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);gap:14px;padding:24px;border:1px solid #d9e1eb;border-radius:12px;background:#fff;box-shadow:0 24px 70px #0f172a38}.project-library-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.project-library-modal-header h2{margin-bottom:4px;font-size:26px;line-height:1.15}.project-library-modal-header p:not(.eyebrow){color:#687284;font-size:13px}.project-library-close{min-height:38px;padding:0 16px;border:1px solid #d2dae6;border-radius:9px;background:#fff;color:#263244}.project-library-close:hover{border-color:#aab7c7;background:#f6f8fb}.project-library-modal-actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border:1px solid #edf1f7;border-radius:12px;background:#f8fafc}.project-library-modal-actions .action-button{min-height:38px;min-width:112px;padding-inline:16px;font-size:14px}.project-library-modal-actions .action-button.solid{min-width:150px}.project-library-search{display:grid;gap:6px}.project-library-search label{color:#687284;font-size:12px}.project-library-search .text-input{min-height:44px;border-radius:10px;background:#fff;font-size:15px}.project-library-modal-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:10px;background:#f8fafc;color:#687284;font-size:13px}.project-library-modal-status strong{flex:0 0 auto;color:#1d2433}.project-library-list{max-height:228px;margin-top:10px;display:grid;gap:8px;overflow:auto;padding-right:2px}.project-library-list::-webkit-scrollbar{width:6px}.project-library-list::-webkit-scrollbar-thumb{border-radius:999px;background:#c7d1df}.project-library-list-modal{max-height:none;margin-top:0;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));overflow:auto;padding:4px 6px 4px 0}.project-library-item{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px;border:1px solid #d9e1eb;border-radius:8px;background:#fff}.project-library-item.active{border-color:#91bef5;background:#eef6ff}.project-library-modal-item{align-content:space-between;min-height:220px;padding:14px;border-radius:12px;box-shadow:0 10px 24px #0f172a0a}.project-library-card-main{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:stretch}.project-library-thumbnail{width:132px;min-height:132px;display:grid;place-items:center;overflow:hidden;padding:6px;border:1px solid #d9e1eb;border-radius:10px;background:linear-gradient(45deg,#f2f5f9 25%,transparent 25%),linear-gradient(-45deg,#f2f5f9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f2f5f9 75%),linear-gradient(-45deg,transparent 75%,#f2f5f9 75%);background-color:#fff;background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;color:#7a8494;font-size:12px}.project-library-thumbnail img{max-width:100%;max-height:100%;image-rendering:pixelated;object-fit:contain}.project-library-open{width:100%;min-width:0;padding:0;border:0;background:transparent;color:#1d2433;text-align:left}.project-library-open strong,.project-library-open span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-library-open strong{font-size:13px}.project-library-modal-item .project-library-open strong{font-size:17px;line-height:1.3}.project-library-open span{margin-top:3px;color:#687284;font-size:12px}.project-library-modal-item .project-library-open span{margin-top:6px;line-height:1.45}.project-library-item-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;min-width:0}.project-library-item-actions span,.project-library-item-actions button{min-height:30px;border-radius:8px;font-size:12px}.project-library-item-actions span{display:inline-flex;align-items:center;padding:0 8px;color:#0d63ce;background:#dceeff}.project-library-item-actions button{padding:0 10px;border:1px solid #d2dae6;background:#fff;color:#4d5665}.project-library-item-actions button:hover{border-color:#aab7c7;background:#f6f8fb}.project-library-empty{min-height:72px;margin-top:10px;padding:10px;text-align:center;font-size:13px}.project-library-empty-modal{min-height:300px;display:grid;place-items:center;align-content:center;gap:12px;margin-top:0;padding:32px;border:1px dashed #cbd5e1;border-radius:14px;background:linear-gradient(180deg,#fff,#f8fafc);color:#687284;font-size:15px}.project-library-empty-modal strong{color:#1d2433;font-size:20px}.project-library-empty-modal p{max-width:420px;color:#687284;text-align:center}.project-library-empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.project-library-empty-actions .action-button{min-width:120px}.project-library-rename-form{display:grid;gap:8px}.project-library-rename-form label{display:grid;gap:5px}.project-library-rename-form label span{color:#687284;font-size:12px}.project-library-rename-form .text-input{min-height:32px}.project-library-rename-actions{display:flex;justify-content:flex-end;gap:6px}.project-library-rename-actions button{min-height:28px;padding:0 10px;border:1px solid #d2dae6;border-radius:999px;background:#fff;color:#4d5665;font-size:12px}.project-library-rename-actions button[type=submit]{border-color:#111827;background:#111827;color:#fff}.action-stack{display:grid;gap:7px}.toggle-stack{display:grid;gap:8px;margin-top:0}.toggle-row{display:flex;align-items:center;gap:10px;min-height:26px;padding:2px 0;border-radius:0;border:0;background:transparent;color:#1d2433}.toggle-row input{width:16px;height:16px;margin:0;accent-color:#e34936}.toggle-row span{font-size:13px}.export-options{margin-top:0}.workspace-top{grid-column:1 / -1;grid-row:1;min-height:56px;padding:0 14px;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;border-radius:0;border-width:0 0 1px;border-color:#e6ebf3;background:#fff;box-shadow:0 6px 24px #0f172a09}.workspace-title{display:flex;align-items:center;gap:18px;min-width:0}.workspace-title h2{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:800}.workspace-title .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.app-route-tabs{display:flex;align-items:center;gap:6px;min-width:0;padding:4px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc}.route-tab{min-height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#526070;font-size:12px;font-weight:700;white-space:nowrap}.route-tab:hover{background:#fff;border-color:#d8e1ec;color:#1d2433}.route-tab.active{background:#1f2430;border-color:#1f2430;color:#fffaf1}.summary-strip{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}.summary-strip div{min-height:32px;display:flex;align-items:center;flex:0 0 auto;padding:4px 12px;border-radius:9px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 2px 8px #0f172a06}.summary-strip span{color:#6c7380;font-size:11px}.summary-strip strong{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:132px;font-size:13px;font-weight:650}.summary-strip .guide-summary{border-color:#fed7aa;background:#fff7ed}.summary-strip .guide-summary span,.summary-strip .guide-summary strong{color:#c2410c}.top-actions{display:flex;gap:8px;justify-content:flex-end}.route-page{grid-column:1 / -1;grid-row:2 / 4;min-width:0;min-height:0;padding:14px;overflow:hidden}.route-page-panel{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;padding:18px;border:1px solid #e3e9f1;border-radius:10px;background:#fff;box-shadow:0 8px 28px #0f172a0a}.image-converter-page{overflow:hidden}.route-page-header{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;padding-bottom:14px;border-bottom:1px solid #e6ebf3}.route-page-header h1{margin:0;color:#101827;font-size:22px;line-height:1.2}.route-page-actions{justify-content:flex-end}.converter-layout{min-height:0;height:100%;display:grid;grid-template-columns:minmax(220px,250px) minmax(300px,370px) minmax(0,1fr);gap:14px;align-items:stretch;overflow:hidden}.converter-uploader,.converter-settings,.converter-preview{min-width:0;min-height:0;display:grid;align-content:start;gap:12px;padding:16px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}.converter-uploader{place-items:center;align-content:start;text-align:center;color:#526070}.converter-uploader strong{max-width:100%;color:#101827;font-size:17px;overflow-wrap:anywhere}.converter-uploader span{color:#6c7380;font-size:12px;font-weight:650}.converter-upload-status{max-width:300px;margin:0;color:#475569;font-size:12px;font-weight:650;line-height:1.55}.converter-project-name-field{width:100%;display:grid;gap:6px;text-align:left}.converter-project-name-field>span{color:#475569;font-size:12px;font-weight:700}.converter-project-name-field .text-input{width:100%;min-width:0;height:38px;background:#fff;font-size:13px}.converter-source-image{width:min(100%,260px);max-height:240px;object-fit:contain;border:1px solid #d9e2ec;border-radius:8px;background:#fff}.converter-upload-button{position:relative;overflow:hidden;cursor:pointer}.converter-upload-button input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.converter-settings label{display:grid;gap:6px;color:#526070;font-size:12px;font-weight:700}.converter-settings{overflow:auto;align-content:start}.converter-quick-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.converter-quick-mode,.converter-size-option{position:relative;min-width:0;display:grid;align-content:center;gap:3px;border:1px solid #d8e0ea;border-radius:8px;background:#fff;color:#334155;text-align:left;cursor:pointer}.converter-quick-mode{min-height:66px;padding:9px}.converter-quick-mode strong,.converter-size-option strong{color:#172033;font-size:12px}.converter-quick-mode span,.converter-size-option span{color:#718096;font-size:10px;line-height:1.35}.converter-quick-mode:hover,.converter-size-option:hover{border-color:#94a3b8}.converter-quick-mode.active,.converter-size-option.active{border-color:#2563eb;background:#eff6ff;box-shadow:inset 0 0 0 1px #2563eb}.converter-quick-mode.active strong,.converter-size-option.active strong{color:#1d4ed8}.converter-size-section{display:grid;gap:7px}.converter-size-section>strong{color:#526070;font-size:12px}.converter-size-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.converter-size-option{min-height:57px;padding:8px}.converter-size-option small{position:absolute;top:5px;right:5px;padding:1px 4px;border-radius:4px;background:#2563eb;color:#fff;font-size:8px;font-weight:800}.converter-estimate{margin:-2px 0 0;padding:8px 10px;border-left:3px solid #2563eb;background:#eff6ff;color:#334155;font-size:11px;font-weight:700;line-height:1.45}.converter-advanced-toggle{width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #d8e0ea;border-radius:8px;background:#fff;color:#334155;text-align:left;cursor:pointer}.converter-advanced-toggle>span{min-width:0;display:grid;gap:3px}.converter-advanced-toggle strong{color:#172033;font-size:12px}.converter-advanced-toggle small{overflow:hidden;color:#718096;font-size:10px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.converter-advanced-toggle svg{flex:0 0 auto;transition:transform .16s ease}.converter-advanced-toggle.open svg{transform:rotate(180deg)}.converter-advanced-toggle:hover,.converter-advanced-toggle.open{border-color:#94a3b8}.converter-advanced-panel{display:grid;gap:9px;padding:10px;border:1px solid #d8e0ea;border-radius:8px;background:#fff}.converter-custom-size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.converter-aspect-size-setting{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:end;gap:10px;padding:10px;border:1px solid #d9e2ec;border-radius:8px;background:#f8fafc}.converter-aspect-size-setting p{margin:0 0 9px;color:#526070;font-size:12px;line-height:1.45}.converter-checkbox-row{display:flex;grid-template-columns:none;align-items:center;gap:8px;min-height:34px}.converter-checkbox-row input{width:16px;height:16px;margin:0}.converter-setting-group{display:grid;gap:6px;padding:10px;border:1px solid #e2e8f0;border-radius:8px;background:#fff}.converter-setting-group .section-head{min-height:0;margin-bottom:2px}.converter-setting-group .section-head h2{font-size:13px}.converter-setting-note{margin:2px 0 0;color:#7a8492;font-size:11px;font-weight:650;line-height:1.55}.converter-action-panel{display:grid;grid-template-columns:1fr;gap:8px;margin-top:2px;padding:10px;border:1px solid #d7e0eb;border-radius:8px;background:#fff}.converter-action-panel .action-button{width:100%;min-height:38px}.converter-primary-generate{min-height:44px;font-size:14px}.converter-export-button{min-height:42px;font-size:14px}.converter-preview{min-height:0;grid-template-rows:auto auto minmax(0,1fr) auto;align-content:stretch;overflow:hidden;background:#fff}.converter-edit-toolbar{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border:1px solid #dce4ee;border-radius:8px;background:#f8fafc}.converter-edit-tool-group{display:inline-flex;align-items:center;gap:4px}.converter-edit-tool-group button{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;border:1px solid #d6dee9;border-radius:7px;background:#fff;color:#475569;font-size:12px;font-weight:700}.converter-edit-tool-group button:hover:not(:disabled){border-color:#94a3b8;color:#0f172a}.converter-edit-tool-group button.active{border-color:#0f172a;background:#0f172a;color:#fff}.converter-edit-tool-group button:disabled{cursor:not-allowed;opacity:.38}.converter-edit-color-select{min-width:150px;max-width:230px;height:34px;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:7px;padding:0 8px;border:1px solid #d6dee9;border-radius:7px;background:#fff}.converter-edit-color-chip{width:22px;height:22px;border:1px solid rgba(15,23,42,.2);border-radius:5px}.converter-edit-color-select select{min-width:0;height:30px;border:0;outline:0;background:transparent;color:#1e293b;font-size:12px;font-weight:700}.converter-color-search{position:relative;min-width:150px}.converter-edit-color-trigger{width:100%;min-width:150px;height:34px;display:grid;grid-template-columns:22px minmax(0,1fr) 16px;align-items:center;gap:7px;padding:0 8px;border:1px solid #d6dee9;border-radius:7px;background:#fff;color:#1e293b;text-align:left}.converter-edit-color-trigger:hover,.converter-edit-color-trigger[aria-expanded=true]{border-color:#64748b}.converter-edit-color-trigger strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.converter-color-search-popover{position:absolute;z-index:30;top:calc(100% + 7px);left:0;width:min(420px,72vw);display:grid;gap:8px;padding:10px;border:1px solid #cfd8e5;border-radius:8px;background:#fff;box-shadow:0 16px 36px #0f172a2e}.converter-color-search-input{height:38px;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:7px;padding:0 10px;border:1px solid #d7e0eb;border-radius:7px;color:#64748b}.converter-color-search-input:focus-within{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1f}.converter-color-search-input input{min-width:0;height:34px;border:0;outline:0;background:transparent;color:#0f172a;font-size:13px}.converter-color-search-results{max-height:300px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:auto}.converter-color-search-results button{min-width:0;min-height:48px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;padding:6px;border:1px solid #e1e7ef;border-radius:7px;background:#fff;color:#1e293b;text-align:left}.converter-color-search-results button:hover,.converter-color-search-results button.active{border-color:#64748b;background:#f8fafc}.converter-color-search-results button>i{width:30px;height:30px;border:1px solid rgba(15,23,42,.18);border-radius:6px}.converter-color-search-results button>span{min-width:0;display:grid;gap:2px}.converter-color-search-results strong,.converter-color-search-results small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.converter-color-search-results strong{font-size:12px}.converter-color-search-results small{color:#64748b;font-size:10px}.converter-color-search-results>p{grid-column:1 / -1;margin:18px 0;color:#64748b;font-size:12px;text-align:center}.converter-edit-hint{margin-left:auto;color:#64748b;font-size:11px;font-weight:650;white-space:nowrap}.converter-preview-head{display:grid;grid-template-columns:minmax(140px,auto) minmax(360px,560px);align-items:center;justify-content:space-between;gap:12px;min-width:0}.converter-preview-summary{display:grid;gap:2px;min-width:0}.converter-preview-head strong{color:#101827;font-size:16px}.converter-preview-head span{color:#6c7380;font-size:12px;font-weight:650;white-space:nowrap}.converter-preview-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;max-width:100%;white-space:nowrap}.converter-preview-tools strong{min-width:52px;color:#101827;font-size:13px;text-align:right}.converter-preview-tools .zoom-button{min-width:34px;height:34px;padding:0}.converter-preview-tools .zoom-action{height:34px;min-height:34px;padding:0 10px}.converter-preview-tools .zoom-slider.compact{flex:1 1 180px;min-width:150px}.converter-canvas-wrap{min-width:0;min-height:0;width:100%;height:100%;display:block;overflow:auto;overscroll-behavior:contain;border:1px solid #e2e8f0;border-radius:8px;background:linear-gradient(45deg,#f6f8fb 25%,transparent 25%),linear-gradient(-45deg,#f6f8fb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f6f8fb 75%),linear-gradient(-45deg,transparent 75%,#f6f8fb 75%);background-color:#fff;background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.converter-canvas-wrap canvas{display:block;height:auto;max-width:none;max-height:none;margin:0 auto;image-rendering:pixelated}.converter-canvas-wrap.editable canvas{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.converter-usage-list{display:flex;flex-wrap:wrap;gap:6px;min-width:0}.converter-usage-list span,.converter-usage-list button{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0 8px;border:1px solid #e2e8f0;border-radius:7px;background:#f8fafc;color:#526070;font-size:11px;font-weight:700}.converter-usage-list button{cursor:pointer}.converter-usage-list button.active{border-color:#0f172a;box-shadow:0 0 0 1px #0f172a}.converter-usage-list i{width:11px;height:11px;flex:0 0 auto;border:1px solid rgba(15,23,42,.18);border-radius:3px}.board-section{min-width:0;min-height:0;padding:0;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr);align-self:stretch;justify-self:stretch;width:100%;max-width:100%;border-color:#e3e9f1;background:#fff}.workspace-grid{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:stretch}.workspace-grid.floating-color-lab{grid-template-columns:minmax(0,1fr)}.workspace-grid.color-lab-collapsed{grid-template-columns:minmax(0,1fr) 56px}.workspace-main-column{min-width:0;display:grid;grid-template-rows:minmax(0,1fr);min-height:0}.right-inspector{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;align-content:start;align-self:stretch;overflow:hidden}.right-inspector.collapsed{min-width:56px;align-content:stretch}.color-lab-rail-button{width:56px;min-height:240px;display:grid;grid-template-rows:auto auto auto;place-items:center;align-content:center;gap:10px;padding:12px 8px;border:1px solid #e3e9f1;border-radius:10px;background:#fff;box-shadow:0 8px 28px #0f172a0a;color:#263244}.color-lab-rail-button strong,.color-lab-rail-button span:last-child{writing-mode:vertical-rl;letter-spacing:0}.color-lab-rail-chip{width:28px;height:28px;border:1px solid rgba(29,36,51,.16);border-radius:8px}.board-workspace-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:46px;padding:9px 16px;border-bottom:1px solid #edf1f7;background:#fff}.board-heading{display:flex;align-items:center;gap:20px}.board-heading-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.board-status-row{display:flex;flex-wrap:wrap;gap:8px}.board-status-pill{min-height:30px;padding:4px 12px;border-radius:7px;border:1px solid #d9dfe7;background:#f6f8fb;color:#4d5665;font-size:12px}.board-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.board-mode-actions{display:flex;align-items:center;gap:0}.board-mode-pill{min-height:30px;min-width:76px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid #d2dae6;border-radius:7px;background:#fff;color:#263244;font-size:13px}.board-mode-pill+.board-mode-pill{margin-left:-1px}.board-mode-pill.active{border-color:#b9d8ff;background:#eef6ff;color:#0f67d6}.canvas-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid #edf1f7;background:#fff}.canvas-toolbar-group,.canvas-zoom-control{display:inline-flex;align-items:center;gap:6px;min-width:0}.canvas-toolbar-spacer{flex:1 1 auto;min-width:12px}.canvas-tool-button,.canvas-tool-toggle{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;border:1px solid #d4ddea;border-radius:8px;background:#fff;color:#263244;font-size:12px;font-weight:600;white-space:nowrap}.canvas-tool-button:hover,.canvas-tool-toggle:hover{border-color:#aab7c7;background:#f4f7fb}.canvas-tool-button.active,.canvas-tool-toggle.active{border-color:#87baff;background:#edf6ff;color:#0d63ce;box-shadow:inset 0 0 0 1px #0d63ce1a}.canvas-tool-button.danger{color:#b42318}.canvas-tool-button.reference{border-color:#bfd0e5;background:#eef6ff;color:#0f67d6}.canvas-tool-button:disabled{cursor:not-allowed;opacity:.45}.canvas-tool-toggle input{width:14px;height:14px;margin:0;accent-color:#1473e6}.canvas-current-color{min-height:36px;min-width:156px;max-width:260px;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:10px;padding:4px 10px;border:1px solid #dde5ef;border-radius:9px;background:#fff}.canvas-color-chip{width:26px;height:26px;border-radius:50%;border:1px solid rgba(29,36,51,.18);box-shadow:inset 0 0 0 2px #ffffff80}.canvas-current-color div{min-width:0;display:grid;gap:1px}.canvas-current-color strong,.canvas-current-color span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-current-color strong{color:#263244;font-size:12px}.canvas-current-color span{color:#697182;font-size:11px}.zoom-button,.zoom-action{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;border:1px solid #cfd6e0;background:#f8fafc;color:#1d2433}.zoom-button{min-width:34px;padding:0 8px;font-size:16px;line-height:1}.zoom-action{padding:0 11px}.board-zoom-dock{width:min(520px,calc(100% - 40px));min-height:52px;display:grid;grid-template-columns:46px auto minmax(190px,1fr) 46px;align-items:center;gap:14px;justify-self:center;margin:12px 0 16px;padding:8px 10px;border:1px solid #d2dae6;border-radius:8px;background:#fff}.zoom-readout{min-width:104px;display:flex;align-items:baseline;justify-content:center;gap:6px;padding:0;border:0;background:transparent}.zoom-readout strong{font-size:18px;line-height:1}.zoom-readout span{color:#697182;font-size:12px}.zoom-readout.compact{min-width:86px}.zoom-readout.compact strong{font-size:15px}.zoom-slider{display:grid;grid-template-columns:auto minmax(90px,1fr);align-items:center;gap:12px;min-width:0;color:#697182;font-size:12px}.zoom-slider.compact{min-width:150px;grid-template-columns:auto minmax(90px,1fr)}.zoom-slider input{width:100%;accent-color:#1473e6}.zoom-slider input:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}.board-zoom-dock .zoom-button{min-width:46px;height:36px;padding:0;font-size:18px;background:#f8fafc}.board-stage{position:relative;min-width:0;min-height:0;padding:12px;background:#fff;overflow:hidden}.board-scroll{display:block;width:100%;min-width:0;height:100%;min-height:0;overflow-x:auto;overflow-y:auto;overflow-anchor:none;box-sizing:border-box;border-radius:8px;border:1px solid #e1e8f0;background:#f6f9fd;padding:22px 18px;scrollbar-width:auto;scrollbar-color:#a7b3c2 #e3e9f0}.board-scroll::-webkit-scrollbar{width:12px;height:12px}.board-scroll::-webkit-scrollbar-track{background:#e3e9f0;border-radius:999px}.board-scroll::-webkit-scrollbar-thumb{background:#a7b3c2;border-radius:999px;border:2px solid #e3e9f0}.board-scroll::-webkit-scrollbar-thumb:hover{background:#8f9baa}.board-scroll-content{min-width:100%;width:max-content;min-height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:flex-start}.board-shell{display:grid;grid-template-columns:var(--board-ruler-size) auto var(--board-ruler-size);grid-template-rows:var(--board-ruler-size) auto var(--board-ruler-size);grid-template-areas:"corner-top-left top corner-top-right" "left frame right" "corner-bottom-left bottom corner-bottom-right";gap:0;align-items:stretch;justify-items:stretch;width:max-content;padding:0;filter:drop-shadow(0 1px 0 rgba(23,32,51,.04))}.board-corner{border:1px solid #d7e0eb;background:#f4f7fb}.board-corner-top-left{grid-area:corner-top-left}.board-corner-top-right{grid-area:corner-top-right}.board-corner-bottom-left{grid-area:corner-bottom-left}.board-corner-bottom-right{grid-area:corner-bottom-right}.board-ruler{display:grid;background:#f4f7fb;border:1px solid #d7e0eb;color:#667389}.board-ruler-top{grid-area:top}.board-ruler-left{grid-area:left}.board-ruler-right{grid-area:right}.board-ruler-bottom{grid-area:bottom}.board-ruler-top,.board-ruler-bottom{grid-template-columns:repeat(var(--board-columns, 1),var(--board-cell-size))}.board-ruler-left,.board-ruler-right{grid-template-rows:repeat(var(--board-rows, 1),var(--board-cell-size))}.board-ruler-cell{display:flex;align-items:center;justify-content:center;position:relative;width:var(--board-cell-size);height:var(--board-cell-size);font-size:clamp(8px,calc(var(--board-cell-size) * .5),11px);line-height:1;border-right:1px solid #d2dbe7;border-bottom:1px solid #d2dbe7;-webkit-user-select:none;user-select:none}.board-ruler-left .board-ruler-cell,.board-ruler-right .board-ruler-cell{width:var(--board-ruler-size)}.board-ruler-top .board-ruler-cell,.board-ruler-bottom .board-ruler-cell{height:var(--board-ruler-size)}.board-ruler-cell.major{background:transparent;color:#dd675d;font-weight:700}.board-ruler-top .board-ruler-cell.major:after,.board-ruler-bottom .board-ruler-cell.major:after{content:"";position:absolute;top:-1px;left:calc(var(--board-major-guide-width, 2px) / -2);width:var(--board-major-guide-width, 2px);height:calc(100% + 2px);background:#f560509e;pointer-events:none}.board-ruler-left .board-ruler-cell.major:after,.board-ruler-right .board-ruler-cell.major:after{content:"";position:absolute;left:-1px;top:calc(var(--board-major-guide-width, 2px) / -2);width:calc(100% + 2px);height:var(--board-major-guide-width, 2px);background:#f560509e;pointer-events:none}.board-frame{grid-area:frame;position:relative;display:inline-flex;padding:0;border-radius:4px;background:#fff;box-shadow:0 0 0 1px #cbd5e1,0 16px 36px #0f172a14;overflow:hidden}.board-canvas{display:block;margin:0 auto;border-radius:4px;background:#fff;box-shadow:none;touch-action:none;cursor:crosshair}.board-canvas.picking{cursor:copy}.color-lab{min-height:0;min-width:0;padding:14px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;overflow:hidden;container-type:inline-size}.color-lab.docked{position:relative;top:auto;min-width:340px;max-height:none}.color-lab.floating{position:fixed;z-index:40;min-width:360px;min-height:480px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);overflow:hidden;box-shadow:0 24px 60px #1d243338}.color-lab-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;padding-bottom:8px}.color-lab.docked .color-lab-header{grid-template-columns:minmax(0,1fr) auto}.color-lab-header.floating{cursor:move;touch-action:none;align-items:center;padding-bottom:6px}.color-lab-header>div:first-child{min-width:0}.color-lab-header .eyebrow{margin-bottom:4px}.color-lab-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:0 0 auto;max-width:100%}.color-lab.floating .color-lab-actions{flex-wrap:nowrap}.panel-mode-button{min-height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;border-radius:8px;border:1px solid rgba(29,36,51,.12);background:#fff;color:#1d2433;font-size:12px}.panel-mode-button.secondary{background:#f4f7fb}.color-lab-collapse-button{grid-column:1 / -1;width:100%;min-height:38px;font-weight:700}.color-lab.floating .panel-mode-button{min-width:64px;padding-inline:8px}.color-lab-body{min-height:0;overflow:auto;display:grid;align-content:start;gap:12px;padding-right:2px;scrollbar-width:none}.color-search-hint{margin:0;padding:8px 10px;border:1px solid #d9e1eb;border-radius:8px;background:#f8fafc;color:#687284;font-size:12px;line-height:1.4}.color-lab.floating .color-lab-body{padding-bottom:22px}.color-lab-resize-handle{position:absolute;right:6px;bottom:6px;width:30px;height:30px;border:none;border-radius:8px;background:linear-gradient(135deg,transparent 0 42%,rgba(29,36,51,.18) 42% 48%,transparent 48% 58%,rgba(29,36,51,.3) 58% 64%,transparent 64% 74%,rgba(29,36,51,.46) 74% 80%,transparent 80% 100%),#fff;box-shadow:0 6px 16px #1d24332e;cursor:nwse-resize}.reference-panel{position:fixed;z-index:45;min-width:220px;min-height:160px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(29,36,51,.14);border-radius:8px;background:#fff;box-shadow:0 22px 48px #1d243333}.reference-panel-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;padding:10px 10px 8px 12px;border-bottom:1px solid #e0e6ef;background:#f8fafc;cursor:move;touch-action:none}.reference-panel-header h2,.reference-panel-header p{margin:0}.reference-panel-header h2{font-size:14px;line-height:1.2}.reference-panel-header p{overflow:hidden;color:#697182;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.reference-panel-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.reference-image-wrap{min-height:0;position:relative;background:linear-gradient(45deg,#eef2f6 25%,transparent 25%),linear-gradient(-45deg,#eef2f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f6 75%),linear-gradient(-45deg,transparent 75%,#eef2f6 75%),#fff;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;overflow:hidden;overscroll-behavior:contain;touch-action:none;cursor:grab}.reference-image-wrap:active{cursor:grabbing}.reference-image-stage{width:100%;height:100%;display:grid;place-items:center;transform-origin:center;will-change:transform}.reference-image-wrap img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}.reference-panel-footer{display:grid;gap:8px;padding:8px 36px 10px 12px;border-top:1px solid #e0e6ef;background:#fff}.reference-opacity-control{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:10px;color:#697182;font-size:12px}.reference-opacity-control input{width:100%;accent-color:#1473e6}.reference-opacity-control strong{color:#263244;font-size:12px}.reference-zoom-row{display:grid;grid-template-columns:auto auto auto auto auto;align-items:center;justify-content:end;gap:8px;color:#697182;font-size:12px}.reference-zoom-row strong{color:#263244}.reference-zoom-button{min-width:32px;padding-inline:0}.reference-resize-handle{position:absolute;right:8px;bottom:8px;width:22px;height:22px;border:none;border-radius:6px;background:linear-gradient(135deg,transparent 0 42%,rgba(29,36,51,.18) 42% 48%,transparent 48% 58%,rgba(29,36,51,.3) 58% 64%,transparent 64% 74%,rgba(29,36,51,.46) 74% 80%,transparent 80% 100%),#fff;box-shadow:0 4px 12px #1d243324;cursor:nwse-resize}.color-toolbar{display:grid;gap:10px}.search-field{min-width:0;min-height:44px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:0 10px;border:1px solid rgba(29,36,51,.14);border-radius:9px;background:#fff;color:#7a8494}.search-field .text-input{min-height:36px;padding:0;border:0;border-radius:0;background:transparent;direction:ltr;text-align:left;unicode-bidi:plaintext}.search-field .text-input:focus{outline:none}.color-toolbar .search-row{order:1}.color-toolbar .palette-search-row{order:2}.color-toolbar .brand-filter-row{order:3}.color-toolbar .code-group-row{order:4}.color-lab.docked .palette-search-row,.color-lab.docked .code-group-row{display:none}.brand-filter-row{display:flex;gap:8px;align-items:center;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}.brand-chip,.import-button,.select-input{min-height:34px;border:1px solid rgba(29,36,51,.1);border-radius:7px;background:#fff;padding:7px 10px;color:#1d2433;font-size:12px}.brand-chip{flex:0 0 auto;min-height:34px;border-radius:999px;padding:0 14px;text-align:center}.brand-chip.active,.import-button{background:#1f2430;border-color:#1f2430;color:#fffaf1}.palette-search-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.import-button.compact{min-height:36px;justify-self:stretch;white-space:nowrap}.search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.color-lab.docked .search-row{grid-template-columns:minmax(0,1fr) auto}.code-group-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.code-group-chip{flex:0 0 auto;min-height:30px;border:1px solid rgba(29,36,51,.1);border-radius:999px;background:#fff;padding:5px 10px;color:#1d2433;font-size:12px}.code-group-chip span{color:#6c7380;font-size:12px}.code-group-chip.active{background:#1f2430;border-color:#1f2430;color:#fffaf1}.code-group-chip.active span{color:#fffaf1c7}.compare-toggle{white-space:nowrap;padding:0 12px;min-height:36px;border-radius:7px;border:1px solid rgba(29,36,51,.14);background:#fff;color:#1d2433;font-size:12px}.compare-toggle.active{background:#1f2430;border-color:#1f2430;color:#fffaf1}.selected-color-panel{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;padding:14px;border-radius:8px;background:#fff;border:1px solid rgba(29,36,51,.08)}.selected-color-panel.compact{grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;padding:0 0 14px;background:transparent;border:none;border-bottom:1px solid #e1e6ed}.selected-color-hero{min-height:132px;border-radius:8px;border:1px solid rgba(29,36,51,.12);box-shadow:inset 0 0 0 1px #ffffff4d}.selected-color-hero.compact{width:48px;min-height:48px;border-radius:8px}.selected-color-copy h3{font-size:16px;margin:0 0 3px}.color-lab.docked .selected-color-copy h3{font-size:15px;margin-bottom:3px}.color-lab.docked .selected-color-panel.compact{grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;padding-bottom:8px}.color-lab.docked .selected-color-hero.compact{width:48px;min-height:48px;border-radius:8px}.color-lab.docked .selected-color-copy .eyebrow,.color-lab.docked .selected-meta span:nth-child(2),.color-lab.floating .selected-color-copy .eyebrow,.color-lab.floating .selected-meta span:nth-child(2){display:none}.color-lab.docked .selected-color-copy .muted,.color-lab.floating .selected-color-copy .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.color-lab.docked .current-color-badge,.color-lab.floating .current-color-badge{min-height:20px;margin-top:3px;padding-inline:8px;font-size:10px}.color-lab.docked .selected-meta,.color-lab.floating .selected-meta{margin-bottom:3px}.color-lab.docked .selected-meta span,.color-lab.floating .selected-meta span{padding:2px 6px;font-size:10px}.selected-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.selected-meta span{font-size:11px;padding:4px 8px;border-radius:999px;background:#1d24330f}.current-color-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;margin-top:8px;padding:0 12px;border-radius:7px;background:#111827;color:#fff;font-size:12px;font-weight:600}.compare-panel{display:grid;gap:10px;padding:12px;border-radius:8px;background:#f3f7ffcc;border:1px solid rgba(29,36,51,.08)}.compare-base-card{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border-radius:8px;background:#fff;border:1px solid rgba(29,36,51,.1)}.compare-base-card>div{min-width:0}.compare-base-card strong,.compare-base-card p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compare-base-card strong{display:block;color:#1d2433;font-size:13px}.compare-base-card p{margin-top:2px;color:#667085;font-size:11px}.compare-base-chip{width:34px;height:34px;flex:0 0 auto;border-radius:8px;border:1px solid rgba(29,36,51,.14)}.compare-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.compare-item{display:flex;align-items:center;gap:8px;min-width:0;text-align:left;padding:8px;border-radius:8px;border:1px solid rgba(29,36,51,.08);background:#ffffffe6}.compare-item>div{min-width:0}.compare-item strong,.compare-item p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compare-item p{color:#5e6675;font-size:11px}.compare-chip{width:26px;height:26px;flex:0 0 auto;border-radius:7px;border:1px solid rgba(29,36,51,.12)}.color-page-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:7px 10px;border-radius:7px;background:#f8fafc;border:1px solid #d9e0ea}.color-lab.docked .color-page-bar{padding:7px 10px;gap:10px;flex-wrap:nowrap}.color-page-copy{display:flex;align-items:center}.color-page-copy strong{font-size:12px;color:#5e6675;white-space:nowrap}.color-page-actions{display:flex;gap:8px}.page-button{min-width:68px;min-height:30px;border-radius:7px;border:1px solid rgba(29,36,51,.12);background:#ffffffeb;color:#1d2433;font-size:12px}.page-button:disabled{cursor:not-allowed;opacity:.45}.color-lab.docked .page-button:disabled{display:none}.color-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;align-content:start}.color-lab.docked .color-card-grid{gap:14px 18px;align-items:start;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,auto)}.color-lab.floating .color-card-grid{gap:14px 18px;align-items:start;justify-content:start;grid-template-columns:repeat(auto-fill,minmax(64px,72px));grid-template-rows:none}.color-card{display:grid;gap:4px;min-width:0;text-align:left;border:none;border-radius:0;background:transparent;overflow:visible;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.color-lab.docked .color-card,.color-lab.floating .color-card{grid-template-rows:48px 36px;min-height:88px;overflow:visible}.color-card:hover{transform:translateY(-1px)}.color-card.selected{box-shadow:none}.color-card-top{min-height:92px;padding:14px;display:flex;align-items:flex-start}.color-lab.docked .color-card-top,.color-lab.floating .color-card-top{min-height:48px;padding:4px;border:1px solid #d4dce8;border-radius:9px}.color-lab.docked .color-card-top span,.color-lab.floating .color-card-top span{display:none}.color-lab.docked .color-card.selected .color-card-top,.color-lab.floating .color-card.selected .color-card-top{border-color:#0f172a;box-shadow:0 0 0 2px #fff,0 0 0 4px #0f172a}.color-card-top span{font-size:12px;padding:4px 8px;border-radius:999px;background:#ffffffe6;color:#1d2433}.color-card-body{padding:10px}.color-lab.docked .color-card-body,.color-lab.floating .color-card-body{min-width:0;height:36px;overflow:hidden;padding:0 2px}.color-card-body strong,.color-card-body p{display:block}.color-card-body strong{font-size:13px;margin-bottom:4px}.color-lab.docked .color-card-body strong,.color-lab.floating .color-card-body strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;margin-bottom:0;color:#6b7280}.color-card-body p{color:#5e6675;font-size:12px}.color-source-count{display:inline-flex;align-items:center;width:fit-content;max-width:100%;margin-top:4px;padding:2px 6px;border-radius:999px;background:#eef2f7;color:#4b5563;font-size:11px;line-height:1.3;white-space:nowrap}.color-lab.docked .color-card-body p,.color-lab.floating .color-card-body p{display:none}.color-lab.docked .color-source-count,.color-lab.floating .color-source-count{display:inline-flex;max-width:100%;margin-top:2px;padding:1px 5px;font-size:10px;overflow:hidden;text-overflow:ellipsis}.export-panel{display:grid;gap:10px;padding:14px;border:1px solid #e3e9f1;border-radius:10px;background:#fff;box-shadow:0 8px 28px #0f172a0a}.export-panel-header{min-height:28px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0;border:0;background:transparent;color:#1d2433;font-weight:700;text-align:left}.export-panel-header span{display:inline-flex;align-items:center;gap:7px}.export-panel-header span:last-child{color:#687284;font-size:12px;font-weight:500}.export-panel-body{display:grid;gap:9px}.export-primary-button{width:100%;min-height:46px;margin-top:4px}.usage-section{padding:12px}.usage-summary-button{width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px;border:0;border-radius:8px;background:#fff;color:#1d2433;text-align:left}.usage-summary-button span:first-child{min-width:0;display:flex;align-items:baseline;gap:10px}.usage-summary-button strong,.usage-summary-button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usage-summary-button strong{font-size:14px}.usage-summary-button small{color:#687284;font-size:12px}.usage-summary-button span:last-child{flex:0 0 auto;color:#0f67d6;font-size:12px;font-weight:700}.usage-section.compact{padding:12px}.usage-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}.usage-section.compact .usage-grid{gap:8px;grid-template-columns:1fr}.usage-card{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:12px;min-height:68px;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid #dce4ef}.usage-section.compact .usage-card{padding:10px 12px}.usage-card p{color:#5e6675;font-size:12px;line-height:1.25}.usage-card strong{display:block;overflow:hidden;color:#111827;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.color-usage-panel{background:#fff;border-color:#dde4ee}.board-usage-panel{min-height:0;max-height:118px;overflow:auto;border:1px solid #dde4ee;border-radius:10px}.board-usage-panel.collapsed{max-height:50px;overflow:hidden}.board-usage-panel.expanded{max-height:min(148px,18dvh)}.board-usage-panel.expanded .usage-summary-button{margin-bottom:8px;border-bottom:1px solid #edf1f7;border-radius:8px 8px 0 0}.board-usage-panel .usage-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.board-usage-panel .empty-state{min-height:92px}.usage-chip{width:38px;height:38px;border-radius:10px;border:1px solid rgba(29,36,51,.12);flex:0 0 auto}.empty-state{min-height:120px;display:grid;place-items:center;border-radius:8px;color:#6c7380;background:#fff;border:1px dashed rgba(29,36,51,.14)}.empty-state.compact{min-height:96px}@container (max-width: 470px){.palette-picker-row,.search-row{grid-template-columns:1fr}.color-page-bar{display:grid;align-items:stretch}.color-page-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.color-lab-header{grid-template-columns:1fr}.color-lab-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}.panel-mode-button{width:100%;min-width:0}.color-lab-actions .panel-mode-button:last-child{grid-column:1 / -1}.color-lab.floating .color-lab-header{grid-template-columns:minmax(0,1fr) auto}.color-lab.floating .color-lab-actions{width:auto;display:flex;grid-template-columns:none;flex-wrap:nowrap;justify-content:flex-end}.color-lab.floating .panel-mode-button{width:auto;min-width:64px}.color-lab.floating .color-lab-actions .panel-mode-button:last-child{grid-column:auto}}@container (max-width: 340px){.color-card-grid,.color-page-actions{grid-template-columns:1fr}.page-button{min-width:0}}@media (max-width: 1280px){.app-shell{grid-template-columns:280px minmax(0,1fr)}.workspace-grid{grid-template-columns:minmax(0,1fr) 292px;gap:12px}.color-lab.docked{position:relative;top:auto;min-width:292px;max-height:none;padding:14px}.control-panel{margin-right:12px}.workspace{padding-right:12px}.workspace-top{gap:14px}.workspace-title h2{max-width:160px}.route-tab{padding-inline:8px}.summary-strip div{padding-inline:10px}.workspace-top{align-items:stretch}.summary-strip{width:100%}}@media (min-width: 1024px) and (max-width: 1279px){.app-shell:not(.sidebar-collapsed){grid-template-columns:220px minmax(0,1fr)}.app-shell.sidebar-collapsed{grid-template-columns:52px minmax(0,1fr)}.workspace{padding:10px 12px 10px 0}.workspace-grid{grid-template-columns:minmax(0,1fr) 292px;gap:10px}.workspace-grid.color-lab-collapsed{grid-template-columns:minmax(0,1fr) 56px}.workspace-main-column,.right-inspector,.board-section{min-height:0}.board-stage{padding:10px}.color-lab.docked{min-width:292px;padding:12px}.control-panel{margin:10px}}@media (max-width: 1023px){html,body,#root{height:auto}body{overflow-x:hidden;overflow-y:auto}.app-shell,.app-shell.sidebar-collapsed{height:auto;min-height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto}.workspace-top,.sidebar,.workspace,.app-shell>.board-usage-panel{grid-column:1}.sidebar{grid-row:3;min-height:auto;grid-template-columns:minmax(0,1fr);border-right:none;border-bottom:1px solid #d5dbe3}.app-shell.sidebar-collapsed .sidebar{background:#f7f9fc;border-right:0}.app-shell.sidebar-collapsed .sidebar-toggle-button{width:auto;min-height:44px;margin:0 12px 12px;padding:0 12px;writing-mode:horizontal-tb}.sidebar,.workspace{padding:0}.control-panel{max-height:none;padding:12px}.workspace{min-height:auto;overflow:visible;grid-row:2;padding:12px}.app-shell>.board-usage-panel{grid-row:4;margin:0 12px 12px}.workspace-top{grid-template-columns:1fr;align-items:stretch}.app-route-tabs{overflow-x:auto;scrollbar-width:thin}.route-page{grid-column:1;grid-row:2;padding:12px;overflow:visible}.route-page-panel{min-height:auto}.route-page-header,.route-page-actions{align-items:stretch;flex-direction:column}.converter-layout{grid-template-columns:1fr}.top-actions{justify-content:flex-start}.workspace-grid{grid-template-columns:1fr;align-items:start}.workspace-grid.color-lab-collapsed{grid-template-columns:1fr}.board-section{height:min(680px,72dvh);min-height:520px}.right-inspector{align-self:stretch}.right-inspector.collapsed{min-width:0}.color-lab-rail-button{width:100%;height:auto;min-height:54px;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:none;justify-content:start;padding:10px 14px}.color-lab-rail-button strong,.color-lab-rail-button span:last-child{writing-mode:horizontal-tb}.color-lab.docked{position:sticky;bottom:12px;z-index:25;top:auto;max-height:min(620px,74dvh);min-width:0;padding:18px 20px;box-shadow:0 18px 48px #0f172a29}}@media (max-width: 780px){.converter-size-options{grid-template-columns:repeat(2,minmax(0,1fr))}.board-section{height:min(620px,72dvh);justify-self:stretch;width:100%}.board-scroll{width:100%;min-height:0;height:100%;max-height:none;justify-content:flex-start}.board-workspace-header,.board-stage{padding:12px}.canvas-toolbar{padding:10px 12px}.canvas-current-color{flex:1 1 190px;max-width:none}.canvas-zoom-control{width:100%}.canvas-zoom-control .zoom-slider.compact{flex:1 1 160px;min-width:0}.canvas-toolbar-spacer{display:none}.canvas-tool-button.reference{margin-left:auto}.zoom-slider{min-width:100%}.zoom-slider.compact{min-width:0}}@media (hover: none) and (pointer: coarse){.text-input,.search-field,.action-button,.canvas-tool-button,.canvas-tool-toggle,.panel-mode-button,.page-button,.preset-button,.zoom-button,.zoom-action,.board-mode-pill,.sidebar-toggle-button,.color-lab-rail-button,.usage-summary-button{min-height:44px}.canvas-toolbar,.color-lab-actions,.top-actions,.project-library-item-actions{gap:10px}.board-scroll{-webkit-overflow-scrolling:touch}.color-card-top{min-height:58px}}@media (max-width: 720px){.sidebar{grid-template-columns:1fr}.preset-grid,.tool-row,.custom-grid,.summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-top{flex-direction:column;align-items:stretch}.board-heading-row,.board-toolbar{align-items:stretch}.selected-color-panel,.color-page-bar,.search-row,.palette-search-row,.color-card-grid{grid-template-columns:1fr}.color-page-bar{display:grid;align-items:stretch}.color-page-actions{display:grid;grid-template-columns:1fr}}@media (max-width: 680px){.project-library-modal-backdrop{align-items:stretch;padding:12px}.project-library-modal{max-height:calc(100vh - 24px);padding:14px}.project-library-modal-header{display:grid}.project-library-close{width:100%}.project-library-actions,.project-library-modal-actions{grid-template-columns:1fr}.project-library-modal-status{display:grid}.project-library-list-modal{grid-template-columns:1fr}}@media (max-width: 520px){.converter-quick-modes{grid-template-columns:1fr}.converter-quick-mode{min-height:54px}.summary-strip,.preset-grid,.custom-grid{grid-template-columns:1fr}.top-actions{display:grid;grid-template-columns:1fr 1fr}}.color-lab.docked .color-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,auto)}