.flt{display:flex;flex-direction:column;gap:20px}.flt__mode{display:flex;gap:8px}.flt__mode-btn{padding:7px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:13px;cursor:pointer;transition:background var(--transition-fast, .15s),border-color var(--transition-fast, .15s)}.flt__mode-btn:hover{border-color:var(--color-primary, #2b6cff)}.flt__mode-btn.is-active{background:var(--color-primary, #2b6cff);color:#fff;border-color:var(--color-primary, #2b6cff)}.flt__file-input{display:none}.flt__preview-wrap{padding:16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.flt__preview{width:100%;height:240px;border-radius:var(--radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center}.flt__img{width:100%;height:100%;object-fit:cover;display:block}.flt__demo{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb 66%,#a55eea)}.flt__demo-grad{position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.4),transparent 50%)}.flt__demo-shapes{position:absolute;bottom:20px;left:20px;display:flex;gap:12px;align-items:flex-end}.flt__demo-circle{width:50px;height:50px;border-radius:50%;background:#fff;box-shadow:0 4px 12px #0000004d}.flt__demo-square{width:44px;height:44px;background:#2d3436;box-shadow:0 4px 12px #0000004d}.flt__demo-tri{width:0;height:0;border-left:24px solid transparent;border-right:24px solid transparent;border-bottom:40px solid #00b894;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.flt__demo-text{position:absolute;top:20px;right:20px;font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);letter-spacing:1px}.flt__btn{padding:6px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:13px;cursor:pointer;transition:background var(--transition-fast, .15s),border-color var(--transition-fast, .15s)}.flt__btn:hover:not(:disabled){border-color:var(--color-primary, #2b6cff)}.flt__btn--preset{font-size:13px}.flt__btn--reset{color:var(--color-danger, #e53e3e);border-color:var(--color-danger, #e53e3e)}.flt__btn--reset:hover{background:var(--color-danger, #e53e3e);color:#fff}.flt__btn--copy{font-size:13px}.flt__btn--reset-one{padding:3px 8px;font-size:12px;color:var(--color-text-soft)}.flt__btn--reset-one:disabled{opacity:.4;cursor:not-allowed}.flt__presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.flt__presets-label{font-size:14px;font-weight:600;color:var(--color-text)}.flt__controls{display:flex;flex-direction:column;gap:10px;padding:16px 18px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.flt__controls-head{margin-bottom:4px}.flt__controls-title{font-size:14px;font-weight:600;color:var(--color-text)}.flt__row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);opacity:.6;transition:opacity var(--transition-fast, .15s)}.flt__row.is-on{opacity:1}.flt__row-check{display:flex;align-items:center;gap:8px;min-width:160px;font-size:13px;font-weight:500;color:var(--color-text);cursor:pointer}.flt__row-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary, #2b6cff);cursor:pointer}.flt__slider{flex:1;accent-color:var(--color-primary, #2b6cff)}.flt__slider:disabled{opacity:.4;cursor:not-allowed}.flt__val{min-width:56px;font-family:var(--font-mono);font-size:12px;color:var(--color-text-soft);text-align:right}.flt__row--ds{flex-wrap:wrap}.flt__ds-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:center}.flt__ds-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--color-text-soft)}.flt__ds-field input[type=range]{width:100%;accent-color:var(--color-primary, #2b6cff)}.flt__ds-field input:disabled{opacity:.4;cursor:not-allowed}.flt__ds-field output{font-family:var(--font-mono);font-size:11px;color:var(--color-text-soft)}.flt__ds-color{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--color-text-soft)}.flt__ds-color input[type=color]{width:100%;height:28px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:none}.flt__ds-color input[type=color]:disabled{opacity:.4;cursor:not-allowed}.flt__ds-hex{width:100%;padding:3px 6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono);font-size:11px}.flt__ds-hex:disabled{opacity:.4;cursor:not-allowed}.flt__output{padding:16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.flt__output-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.flt__output-label{font-size:14px;font-weight:600;color:var(--color-text)}.flt__code{margin:0;padding:12px 14px;background:var(--color-bg);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:14px;color:var(--color-text);white-space:pre-wrap;word-break:break-all;line-height:1.5}@media(prefers-color-scheme:dark){.flt__row,.flt__code,.flt__ds-hex{background:#ffffff0a}.flt__mode-btn{background:#ffffff0f}}@media(max-width:768px){.flt__preview{height:180px}.flt__row{flex-wrap:wrap}.flt__row-check{min-width:140px}.flt__ds-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:414px){.flt__presets{flex-direction:column;align-items:stretch}.flt__presets-label{text-align:center}.flt__demo-text{font-size:20px}.flt__row-check{min-width:100%}.flt__ds-grid{grid-template-columns:1fr}}