/* Shared fields stay visually steady while the menu handles selection. */
:root{
 --field-border:#dce2dd;
 --field-text:#263330;
 --field-muted:#818c86;
 --field-accent:#244c48;
 --field-active:#f0f4f1;
 --field-error:#a65f4b;
}
body :is(input,textarea,select){
 font-weight:400;
 border-color:var(--field-border)!important;
 border-radius:10px!important;
 outline:0!important;
 box-shadow:none!important;
 transition:none!important;
}
body :is(input,textarea,select):is(:focus,:focus-visible){
 border-color:var(--field-border)!important;
 outline:0!important;
 box-shadow:none!important;
}
body :is(input,textarea,select)[aria-invalid=true]{border-color:#cf9b89!important}
body :is(input,textarea,select):disabled{color:#929c95;opacity:1}
body .generation-composer:before,
body .generation-composer:focus-within:before{
 border-color:var(--field-border);
 border-radius:12px;
 box-shadow:none;
 transition:none;
}
body .has-conversation .generation-composer,
body .has-conversation .generation-composer:focus-within{
 border-color:var(--field-border);
 border-radius:12px;
 box-shadow:none;
 outline:0;
 transition:none;
}
body .generation-composer textarea{border-radius:0!important}
body .generation-composer:has(.composer-error:not([hidden])):before{border-color:#cf9b89}

.hb-select{display:block;position:relative;width:100%;min-width:0;max-width:100%;font:inherit}
body .hb-select>select{
 position:absolute!important;
 width:1px!important;
 height:1px!important;
 padding:0!important;
 margin:-1px!important;
 overflow:hidden!important;
 clip:rect(0,0,0,0)!important;
 clip-path:inset(50%)!important;
 white-space:nowrap!important;
 border:0!important;
}
body .hb-select-trigger{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 width:100%;
 min-width:0;
 min-height:44px;
 padding:10px 14px;
 border:1px solid var(--field-border);
 border-radius:10px;
 background:#fff;
 color:var(--field-text);
 font:inherit;
 font-size:13px;
 font-weight:400;
 line-height:22px;
 text-align:left;
 cursor:pointer;
 user-select:none;
 touch-action:manipulation;
 outline:0!important;
 box-shadow:none!important;
 transition:background-color .14s ease!important;
 -webkit-tap-highlight-color:transparent;
}
body .hb-select-trigger:is(:hover,:focus,:focus-visible,[aria-expanded=true]){
 border-color:var(--field-border);
 outline:0!important;
 box-shadow:none!important;
}
body .hb-select:focus-within{outline:0!important;box-shadow:none!important}
@media(hover:hover){body .hb-select-trigger:not([aria-disabled=true]):hover{background:#fafbf9}}
body .hb-select.is-placeholder .hb-select-value{color:var(--field-muted)}
body .hb-select-trigger[aria-disabled=true]{color:#97a098;background:#f6f7f5;cursor:not-allowed}
body .hb-select.is-disabled .hb-select-value{color:inherit}
body .hb-select-trigger[aria-invalid=true]{border-color:#cf9b89;background:#fffdfb}
.hb-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-select-label{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 clip-path:inset(50%);
 white-space:nowrap;
 border:0;
}
.hb-select-error{display:block;margin-top:7px;color:var(--field-error);font-size:11px;font-weight:400;line-height:1.6}
.hb-select-error[hidden]{display:none}
.hb-select-chevron{
 display:grid;
 place-items:center;
 width:16px;
 height:16px;
 flex-shrink:0;
 color:#7e8e83;
 pointer-events:none;
 transform:rotate(0);
 transition:transform .18s cubic-bezier(.2,.7,.3,1);
}
.hb-select-chevron:after{
 content:"";
 width:6px;
 height:6px;
 border-right:1.5px solid currentColor;
 border-bottom:1.5px solid currentColor;
 transform:translateY(-1.5px) rotate(45deg);
}
.hb-select-trigger[aria-expanded=true] .hb-select-chevron{transform:rotate(180deg)}
.hb-select-trigger[aria-disabled=true] .hb-select-chevron{color:#b0b7b1}

body .hb-select-menu{
 position:fixed;
 z-index:180;
 box-sizing:border-box;
 margin:0;
 padding:5px;
 list-style:none;
 border:1px solid #dce3dc;
 border-radius:12px;
 background:#fff;
 color:var(--field-text);
 box-shadow:0 8px 24px #202c2d10,0 2px 5px #202c2d04;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:#cbd5cd transparent;
 font:inherit;
 font-size:13px;
 font-weight:400;
 line-height:1.6;
 outline:0;
 transform-origin:top center;
 animation:hb-select-enter .16s cubic-bezier(.2,.7,.3,1);
}
body .hb-select-menu[data-placement=top]{transform-origin:bottom center;animation-name:hb-select-enter-up}
.hb-select-menu[hidden]{display:none}
body .hb-select-option{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 min-height:40px;
 margin:0;
 padding:8px 11px;
 border:0;
 border-radius:7px;
 list-style:none;
 cursor:pointer;
 overflow-wrap:anywhere;
 outline:0;
}
.hb-select-option>span:first-child{min-width:0}
body .hb-select-option[aria-selected=true]{color:var(--field-accent);background:transparent;font-weight:500}
body .hb-select-option.is-active{background:var(--field-active);color:var(--field-accent)}
body .hb-select-option[aria-disabled=true]{color:#a1aaa3;background:transparent;cursor:not-allowed;font-weight:400}
.hb-select-check{display:grid;place-items:center;width:16px;height:16px;flex-shrink:0;font-size:0;color:var(--field-accent)}
.hb-select-check:after{
 content:"";
 width:4px;
 height:7px;
 border-right:1.7px solid currentColor;
 border-bottom:1.7px solid currentColor;
 transform:translateY(-1px) rotate(45deg);
}
.hb-select-option .hb-select-check{visibility:hidden}
.hb-select-option[aria-selected=true] .hb-select-check{visibility:visible}
.hb-select-option[aria-disabled=true] .hb-select-check{color:#a1aaa3}
.hb-select-group{padding:0;font:inherit}
.hb-select-group+.hb-select-group{margin-top:4px;padding-top:4px;border-top:1px solid #eef1ed}
.hb-select-group-title{padding:7px 11px 4px;color:#8b958d;font-size:10px;font-weight:500;letter-spacing:.025em}
.hb-select-empty{padding:12px 11px;color:var(--field-muted);font-size:12px}

.filter-bar>.hb-select{width:190px;flex:0 0 190px}
.inline-form>.hb-select{width:auto;flex:1}
.lesson-tools .hb-select-trigger{min-height:44px;font-size:12px;padding:10px 12px}
.composer-level .hb-select{width:auto;flex:0 0 auto}
body .composer-level .hb-select-trigger{
 width:auto;
 min-width:38px;
 min-height:26px;
 padding:0 0 0 4px;
 gap:6px;
 border:0;
 border-radius:0;
 background:transparent;
 color:var(--field-accent);
 font-size:12px;
 font-weight:500;
 line-height:1.5;
}
body .composer-level .hb-select-trigger:hover{background:transparent}
.composer-level .hb-select-chevron{width:12px;height:12px}
.composer-level .hb-select-chevron:after{width:5px;height:5px}

@keyframes hb-select-enter{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@keyframes hb-select-enter-up{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
body.reduce-motion :is(.hb-select-menu,.hb-select-chevron,.hb-select-trigger){animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
 body :is(.hb-select-menu,.hb-select-chevron,.hb-select-trigger){animation:none!important;transition:none!important}
}
@media(max-width:600px){
 .filter-bar>.hb-select,.inline-form>.hb-select{width:100%;flex-basis:100%}
 body .hb-select-menu{font-size:13px}
 body .hb-select-option{min-height:44px;padding:10px 11px}
 body .hb-select-trigger{min-height:44px;font-size:13px;padding:10px 12px}
 body .composer-level{padding-top:0;padding-bottom:0;min-height:46px}
 body .composer-level .hb-select-trigger{min-width:40px;min-height:44px;font-size:12px;padding-left:3px}
}