.tool-page .ct-panel-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem;gap:12px;flex-wrap:wrap}.tool-page .ct-panel-title{font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:4px}.tool-page .ct-panel-desc{font-size:.85rem;color:var(--muted)}.tool-page .ct-gen-layout{display:grid;grid-template-columns:1fr 1fr;grid-gap:1.5rem;gap:1.5rem;align-items:start}@media (max-width:640px){.tool-page .ct-gen-layout{grid-template-columns:1fr}}.tool-page .ct-controls-col{display:flex;flex-direction:column;gap:10px}.tool-page .ct-control-group{display:flex;flex-direction:column;gap:6px}.tool-page .ct-slider-row{display:flex;align-items:center;gap:10px}.tool-page .ct-slider-row input[type=range]{flex:1 1;accent-color:var(--accent);cursor:pointer}.tool-page .ct-slider-val{font-family:var(--mono);font-size:.8rem;color:var(--muted2);min-width:44px;text-align:right}.tool-page .ct-color-input{width:48px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface2);cursor:pointer;padding:2px 3px}.tool-page .ct-checkbox-label{display:flex!important;align-items:center;gap:8px;cursor:pointer;color:var(--muted2)!important;font-size:.85rem}.tool-page .ct-checkbox{accent-color:var(--accent)}.tool-page .ct-preview-col{display:flex;flex-direction:column;gap:12px}.tool-page .ct-preview-box{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:2rem;display:flex;align-items:center;justify-content:center;min-height:140px}.tool-page .ct-preview-box--flush{padding:0;overflow:hidden}.tool-page .ct-preview-box--padded{padding:16px;align-items:stretch}.tool-page .ct-preview-elem{width:100px;height:80px;background:var(--accent);border-radius:8px;opacity:.85}.tool-page .ct-css-output-wrap{display:flex;flex-direction:column;gap:8px}.tool-page .ct-css-output{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-family:var(--mono);font-size:.82rem;color:var(--accent);white-space:pre-wrap;word-break:break-all;line-height:1.6;min-height:36px}.tool-page .ct-copy-btn{align-self:flex-start}.tool-page .ct-flex-item{width:40px;height:40px;border:1px solid var(--accent);border-radius:4px;font-size:.7rem;flex-shrink:0}.tool-page .ct-flex-item,.tool-page .ct-grid-cell{background:color-mix(in srgb,var(--accent) 20%,transparent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-family:var(--mono)}.tool-page .ct-grid-cell{min-height:36px;border:1px solid var(--accent);border-radius:3px;font-size:.68rem}.tool-page .ct-unit-input-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:1.25rem;align-items:flex-end}.tool-page .ct-unit-group{display:flex;flex-direction:column;gap:6px;min-width:100px}.tool-page .ct-base-input{width:80px!important}.tool-page .ct-base-hint{font-size:.72rem;color:var(--muted);white-space:nowrap}.tool-page .ct-units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-gap:10px;gap:10px}.tool-page .ct-unit-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .15s}.tool-page .ct-unit-card:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface2))}.tool-page .ct-unit-card--active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface2))}.tool-page .ct-unit-card-val{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--text);word-break:break-all;text-align:center}.tool-page .ct-unit-card-label{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}