:root{--ribbon-tab-height:36px;--ribbon-bar-height:36px;--ribbon-height:calc(var(--ribbon-tab-height) + var(--ribbon-bar-height))}body.has-ribbon{padding-top:var(--ribbon-height)}.app-ribbon{--ribbon-radius:4px;--ribbon-padding-x:10px;--ribbon-gap:8px;--ribbon-btn-height:28px;--ribbon-font-size:12px;--ribbon-font:"Noto Sans","Roboto",helvetica,arial,sans-serif;position:fixed;top:0;left:0;right:0;height:var(--ribbon-height);display:flex;flex-direction:column;background:var(--ribbon-bg);border-bottom:var(--ribbon-divider);z-index:1000;color:var(--ribbon-text);font-family:var(--ribbon-font)}.ribbon-tabs{height:var(--ribbon-tab-height);gap:6px;background:var(--ribbon-tab-bg);border-bottom:var(--ribbon-divider)}.ribbon-panels,.ribbon-tabs{display:flex;align-items:center;padding:0 var(--ribbon-padding-x)}.ribbon-panels{height:var(--ribbon-bar-height);gap:var(--ribbon-gap);background:var(--ribbon-bar-bg);overflow-x:auto}.ribbon-panel{display:none;align-items:center;gap:var(--ribbon-gap);height:100%;min-height:100%}.ribbon-panel.is-active{display:flex}.ribbon-group{display:flex;align-items:center;gap:8px;height:100%;padding:0 var(--ribbon-padding-x);border-right:var(--ribbon-divider)}.ribbon-group:last-child{border-right:none}.ribbon-label,.ribbon-muted,.ribbon-status{font-size:var(--ribbon-font-size);color:var(--ribbon-muted)}.ribbon-dot{width:8px;height:8px;border-radius:50%;background:var(--color-status-idle);display:inline-block}.ribbon-dot[data-state=connected]{background:var(--color-success)}.ribbon-dot[data-state=connecting]{background:var(--color-warning)}.ribbon-dot[data-state=error]{background:var(--color-error)}.app-ribbon :is(.ribbon-tab,.ribbon-btn,.ribbon-select,.ribbon-input){height:var(--ribbon-btn-height);font-size:var(--ribbon-font-size);border-radius:var(--ribbon-radius);font-family:var(--ribbon-font)}.app-ribbon :is(.ribbon-tab,.ribbon-btn){padding:0 10px;border:1px solid var(--ribbon-border);background:var(--ribbon-btn-bg);color:var(--ribbon-text);cursor:pointer;line-height:1;appearance:none;-webkit-appearance:none;box-shadow:none;display:inline-flex;align-items:center;justify-content:center}.app-ribbon .ribbon-tab{border-radius:var(--ribbon-radius) var(--ribbon-radius) 0 0;background:var(--ribbon-tab-btn-bg);border-color:transparent}.app-ribbon :is(.ribbon-tab,.ribbon-btn).is-active,.app-ribbon :is(.ribbon-tab,.ribbon-btn):active,.app-ribbon :is(.ribbon-tab,.ribbon-btn):hover{background:var(--ribbon-btn-bg-active);color:var(--ribbon-btn-text-active);border-color:var(--color-border-contrast)}.app-ribbon .ribbon-tab:is(:hover,:active,.is-active){border-bottom-color:transparent;box-shadow:inset 0 1px 0 var(--color-overlay-strong)}.app-ribbon .ribbon-select{appearance:none;-webkit-appearance:none}.app-ribbon .ribbon-input,.app-ribbon .ribbon-select{padding:0 8px;border:1px solid var(--ribbon-border);background:var(--ribbon-tab-btn-bg);color:var(--ribbon-text);box-shadow:none}.app-ribbon .ribbon-input{min-width:168px;width:196px}.app-ribbon .ribbon-input:hover{border-color:var(--input-border-hover)}.app-ribbon .ribbon-input:focus{outline:none;border-color:var(--input-border-focus)}