body.refined-editor.ribbon-editor #studioRibbon{flex:none;background:#fff;border-bottom:1px solid #dce3de;padding:0 14px 8px;color:#203a32;font:13px Arial,sans-serif;position:relative;z-index:30}
#studioRibbon .ribbon-tabs{display:flex;gap:8px;height:39px;align-items:stretch}
#studioRibbon .ribbon-tabs button{background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;padding:7px 16px;font:14px Arial;color:#36483f}
#studioRibbon .ribbon-tabs button[aria-selected=true]{border-bottom-color:#285d47;font-weight:700}
#studioRibbon .ribbon-panel{display:flex;min-height:102px;align-items:stretch;overflow-x:auto;border:1px solid #e3e8e4;border-radius:9px;padding:8px 4px 4px;gap:0;background:#fff}
#studioRibbon .ribbon-panel[hidden]{display:none!important}
#studioRibbon .ribbon-group{display:flex;flex-direction:column;justify-content:space-between;padding:0 12px;border-right:1px solid #e0e5e1;flex-shrink:0;gap:8px}
#studioRibbon .ribbon-group:last-child{border:0}
#studioRibbon .ribbon-group-content{display:flex;align-items:center;gap:6px;flex:1}
#studioRibbon .ribbon-group-label{font:11px Arial;color:#68786e;text-align:center;display:block;padding:3px 0}
#studioRibbon button{cursor:pointer;color:#203a32}
#studioRibbon button:hover{background:#edf3ef!important}
#studioRibbon button:focus-visible{outline:2px solid #285d47;outline-offset:1px}
#studioRibbon button:disabled{opacity:.4;cursor:default}
#studioRibbon .ribbon-command{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:transparent;border:0;border-radius:5px;min-width:62px;min-height:65px;padding:6px 8px;font:12px Arial;white-space:nowrap}
#studioRibbon .ribbon-icon{font:28px/1 Arial;color:#285d47}
body.refined-editor #studioRibbon .modern-text-toolbar{display:flex!important;flex-wrap:wrap!important;width:390px!important;gap:5px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;height:auto!important;min-height:65px}
body.refined-editor #studioRibbon .modern-text-toolbar .studio-font-trigger{width:180px!important;max-width:180px!important;height:32px!important}
body.refined-editor #studioRibbon .font-size-controls{gap:0!important}
body.refined-editor #studioRibbon .font-size-controls input{height:32px!important;width:46px!important;min-width:46px!important;border-radius:4px 0 0 4px!important}
body.refined-editor #studioRibbon .font-size-controls select{height:32px!important;width:28px!important;min-width:28px!important;border-radius:0 4px 4px 0!important;padding:0!important}
body.refined-editor #studioRibbon .font-size-controls button{height:32px!important;width:28px!important;min-width:28px!important;font-size:18px!important}
body.refined-editor #studioRibbon .modern-text-toolbar .text-style-action{font-size:10px!important;min-width:65px!important;padding:3px!important;max-width:75px!important;white-space:normal!important}
body.refined-editor #studioRibbon .modern-text-toolbar input[type=color]{width:30px!important;height:28px!important}
#studioRibbon .inspector-toggle,#studioRibbon .position-toggle{display:block!important;background:#fff;border:1px solid #e0e5e1;border-radius:5px;padding:10px;font:12px Arial}
body.refined-editor.ribbon-editor .selection-controls.modern-text-selected{display:none!important}
body.refined-editor #studioRibbon .ribbon-font-line{display:flex;gap:6px;width:100%;align-items:center}
body.refined-editor #studioRibbon input,body.refined-editor #studioRibbon select{background:#fff!important;color:#203a32!important;border:1px solid #dce3de!important}
body.refined-editor.ribbon-editor .customise-layout{height:calc(100dvh - 218px)!important;min-height:0!important}
html body.ribbon-editor #fontBrowser{width:300px!important;padding:10px!important}
html body.ribbon-editor #fontBrowser .font-library-panel>summary{display:none!important}
html body.ribbon-editor #fontBrowser .font-browser-close{float:none!important;display:block!important;margin-left:auto!important}
html body.ribbon-editor #fontBrowser .font-library-results{display:block!important;max-height:360px!important}
html body.ribbon-editor #fontBrowser .font-library-results>div{display:block!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;border-radius:0!important}
html body.ribbon-editor #fontBrowser .font-library-results :is(strong,select,a){display:none!important}
html body.ribbon-editor #fontBrowser .font-library-results button{display:block!important;width:100%!important;text-align:left!important;padding:8px 10px!important;background:#fff!important;border:0!important;border-radius:3px!important;font:14px Arial!important;min-height:34px!important}
html body.ribbon-editor #fontBrowser .font-library-results button:hover{background:#eaf2ec!important}
html body.ribbon-editor #fontBrowser .library-note{font-size:11px!important}
@media(max-width:800px){#studioRibbon{padding:0 6px 6px!important}#studioRibbon .ribbon-tabs button{padding:7px 12px}#studioRibbon .ribbon-group{padding:0 8px}}

/* Readable size input and a preview that stays inside the font picker. */
body.refined-editor #studioRibbon .font-size-controls input{width:64px!important;min-width:64px!important;height:36px!important;font-size:14px!important}
body.refined-editor #studioRibbon .font-size-controls :is(button,select){height:36px!important;min-width:32px!important}
html body.ribbon-editor #fontBrowser .font-library-preview{display:block!important;font-size:26px!important;line-height:1.35!important;min-height:70px;max-height:100px;overflow:auto;border-top:1px solid #e2e8e3;padding-top:12px;margin:10px 0 0}
html body.ribbon-editor #fontBrowser .font-library-results button:focus-visible{outline:2px solid #285d47!important;outline-offset:-2px;background:#eaf2ec!important}
html body.ribbon-editor #fontBrowser .font-library-results{max-height:260px!important}
html body.ribbon-editor #fontBrowser .font-library-preview{background:#f5f7f4!important;color:#203a32!important;border-radius:6px;padding:12px!important}
html body.ribbon-editor #fontBrowser .font-library-results select{display:block!important;width:calc(100% - 20px)!important;margin:0 10px 10px!important;height:32px!important;font:12px Arial!important}

/* Keep each tool group usable within a narrow workspace. */
@media(max-width:600px){
 #studioRibbon .ribbon-tabs{overflow-x:auto;scrollbar-width:thin}
 #studioRibbon .ribbon-tabs button{flex-shrink:0}
 #studioRibbon .ribbon-panel{scroll-snap-type:x mandatory;scrollbar-width:thin;scroll-padding-inline:4px}
 #studioRibbon .ribbon-group{max-width:calc(100vw - 100px);scroll-snap-align:start;box-sizing:border-box}
 #studioRibbon .ribbon-group-content{flex-wrap:wrap}
 body.refined-editor #studioRibbon .modern-text-toolbar{width:calc(100vw - 120px)!important;max-width:390px!important;min-width:0!important}
 body.refined-editor #studioRibbon .ribbon-font-line{flex-wrap:wrap}
 body.refined-editor #studioRibbon .modern-text-toolbar .studio-font-trigger{width:100%!important;max-width:none!important;min-height:36px!important}
 #studioRibbon .ribbon-command{min-width:60px;min-height:44px;gap:4px}
 #studioRibbon .ribbon-icon{font-size:22px}
}

