.functional-bar{position:absolute;top:0;left:0;right:0;height:var(--functional-bar-height);background:var(--surface);border-bottom:1px solid var(--border);overflow:hidden;transition:transform .2s ease,opacity .2s ease,visibility 0s .2s;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000000d;z-index:100;opacity:0;visibility:hidden;transform:translateY(-100%);pointer-events:none}.functional-bar.visible{opacity:1;visibility:visible;transform:translateY(0);transition:transform .2s ease,opacity .2s ease,visibility 0s;pointer-events:auto}.functional-bar-content{display:flex;align-items:center;gap:var(--spacing-sm);padding:0 var(--spacing-lg);width:100%;justify-content:center;position:relative}.functional-bar-btn{padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--border);background:var(--surface);color:var(--text-primary);border-radius:var(--border-radius);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:var(--spacing-xs);white-space:nowrap;min-width:36px;height:32px;justify-content:center;position:relative}.functional-bar-btn:hover{background:#f8f8f8;border-color:#ccc}.functional-bar-btn:active{background:#e8e8e8;transform:translateY(1px)}.functional-bar-btn:disabled{opacity:.5;cursor:not-allowed}.functional-bar-btn .icon{font-size:16px;line-height:1}.functional-bar-spacer{min-width:32px;flex-shrink:0}.functional-bar-close-btn{position:absolute;right:var(--spacing-lg);min-width:32px;background:transparent;border:none;color:var(--primary)}.functional-bar-close-btn:hover{background:#b551721a;border:none;color:var(--primary-dark)}.functional-bar-close-btn .icon{font-size:18px}.functional-bar-btn .btn-text{font-size:13px}.functional-bar-divider{width:1px;height:24px;background:var(--border);margin:0 var(--spacing-xs)}.functional-bar-dropdown{position:relative;display:inline-block}.functional-bar-dropdown-btn{padding-right:var(--spacing-md)}.functional-bar-dropdown-btn:after{content:"▼";font-size:10px;margin-left:var(--spacing-xs);opacity:.6}.functional-bar-dropdown-menu{position:absolute;top:100%;left:0;margin-top:var(--spacing-xs);background:var(--surface);border:1px solid var(--border);border-radius:var(--border-radius);box-shadow:var(--box-shadow);min-width:150px;z-index:10001;display:none;padding:var(--spacing-xs) 0}.functional-bar-dropdown.open .functional-bar-dropdown-menu,.functional-bar-dropdown-menu.open{display:block}.functional-bar-dropdown-item{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;font-size:14px;transition:background .2s;display:flex;align-items:center;gap:var(--spacing-sm)}.functional-bar-align-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.functional-bar-align-icon svg{width:18px;height:18px}.functional-bar-dropdown-item:hover{background:var(--background)}.functional-bar-dropdown-item.active{background:var(--primary);color:#fff}.functional-bar-input{width:60px;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border);border-radius:var(--border-radius);font-size:13px;text-align:center}.functional-bar-input:focus{outline:none;border-color:var(--primary)}.functional-bar-select{height:32px;cursor:pointer;appearance:auto}.functional-bar-slider{width:100px;height:4px;border-radius:2px;background:var(--border);outline:none;-webkit-appearance:none}.functional-bar-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer}.functional-bar-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:none}.functional-bar-brightness-control{display:flex;flex-direction:column;gap:var(--spacing-xs);min-width:180px}.functional-bar-brightness-slider{width:100%}.functional-bar-brightness-scale{display:flex;justify-content:space-between;align-items:center;padding:0 7px}.functional-bar-brightness-tick{flex-shrink:0;width:4px;height:4px;border-radius:50%;background:var(--text-secondary);opacity:.5}.functional-bar-brightness-tick--center{width:6px;height:6px;opacity:.75}.functional-bar-color-picker{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--border-radius);cursor:pointer;padding:2px;background:var(--surface)}.functional-bar-color-picker input[type=color]{width:100%;height:100%;border:none;border-radius:calc(var(--border-radius) - 2px);cursor:pointer;padding:0}.functional-bar-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:#000c;color:#fff;font-size:12px;border-radius:4px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1001}.functional-bar-btn:hover .functional-bar-tooltip{opacity:1}@media(max-width:768px){.functional-bar-content{padding:0 var(--spacing-md);gap:var(--spacing-xs);overflow-x:auto;justify-content:flex-start}.functional-bar-btn .btn-text,.functional-bar-divider{display:none}}