/* Hamoki Studio UI system — desktop-first, scoped visual tokens.
   Loaded after legacy styles to consolidate their final presentation. */
:root{
 --ui-surface:#1e252b;--ui-surface-hover:#29343b;--ui-border:#35444a;
 --ui-border-active:#4d7d70;--ui-ink:#edf7f3;--ui-subtle:#a5bab3;
 --ui-primary:#10cc91;--ui-ease:cubic-bezier(.22,1,.36,1);
}
:where(button,select,input,textarea,summary){-webkit-tap-highlight-color:transparent}
:where(button,select,input,textarea,[tabindex],summary):focus-visible{
 outline:2px solid #52edbd!important;outline-offset:3px!important;
}
button:active:not(:disabled){transform:scale(.985)}
:where(button,[role=menuitem],.provider-card,.project-entry){
 transition:background-color .2s var(--ui-ease),border-color .2s var(--ui-ease),color .2s var(--ui-ease),box-shadow .2s var(--ui-ease),transform .18s var(--ui-ease);
}
:where(.soft-btn,.quiet-btn,.primary-btn,.icon-btn,.side-action){border-radius:10px}
:where(.soft-btn,.quiet-btn):hover:not(:disabled){border-color:#53736a;background:#2c3a3c}
:where(.side-action,.project-entry):focus-visible{background:#253a35}
:where(.tool,.icon-btn,.zoom-box button):hover:not(:disabled){background:#30483e;color:#dbfff2}
:where(.tool,.icon-btn,.zoom-box button):active:not(:disabled){transform:scale(.96)}
:where(.modal-back,.composer-model-menu,.provider-quick-menu,.board-context-menu){isolation:isolate}
.modal-back{padding:clamp(12px,3vw,36px);background:rgba(3,8,12,.78)}
.modal-back .modal{border:1px solid #435457;border-radius:18px;background:#1c242a;
 box-shadow:0 26px 90px #000b;max-height:min(92dvh,980px);overscroll-behavior:contain;scrollbar-width:thin;
 animation:ui-dialog-in .23s var(--ui-ease) both}
.modal-head{padding:21px 24px 17px;align-items:flex-start}
.modal-head h2{font-size:20px;line-height:1.35}
.modal-head p{font-size:12px;line-height:1.75;max-width:60ch}
.modal-head .icon-btn{width:36px;height:36px;border-radius:10px}
.modal :where(.soft-btn,.quiet-btn,.primary-btn){min-height:36px}
.modal :where(.field,input:not([type=checkbox]):not([type=radio]),select,textarea){min-width:0}
.modal :where(.field,input,select,textarea):focus-visible{outline-offset:1px!important}
.modal :where(.modal-actions,.provider-actions){gap:10px}
@keyframes ui-dialog-in{from{opacity:0;transform:translateY(10px) scale(.986)}to{opacity:1;transform:translateY(0) scale(1)}}
:where(.composer-model-menu,.provider-quick-menu,.board-context-menu){background:#212b30!important;
 border:1px solid #415a56!important;border-radius:12px!important;box-shadow:0 18px 42px #000b!important}
:where(.composer-model-menu,.provider-quick-menu,.board-context-menu):not(.hidden){
 animation:ui-menu-in .2s var(--ui-ease) both;
}
@keyframes ui-menu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
:where(.composer-model-option,.provider-quick-option,.board-context-menu button):hover,
:where(.composer-model-option,.provider-quick-option,.board-context-menu button):focus-visible{
 background:#294c40!important;color:#e5fff5!important}
.composer-model-menu,.provider-quick-menu{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#45665d #20282d}
.composer-model-menu .composer-model-option{white-space:normal;overflow-wrap:anywhere}
.lovart-inspired-panel .studio-config-scroll{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
 overscroll-behavior-y:contain!important;scrollbar-gutter:stable;touch-action:pan-y;
 scroll-behavior:smooth;scrollbar-color:#49605c transparent;gap:12px!important}
.lovart-inspired-panel :where(.studio-model-card,.studio-reference-card,.studio-layer-card,.studio-advanced-card,.studio-activity){
 flex:0 0 auto;min-width:0;background:#20292e!important;border-color:#36474a!important;
}
.lovart-inspired-panel :where(.studio-panel-heading,.studio-section-heading){gap:12px}
.lovart-inspired-panel :where(.studio-panel-heading button,.studio-activity summary,.studio-layer-card summary,.studio-advanced-card summary){
 cursor:pointer}
.lovart-inspired-panel :where(.studio-layer-card,.studio-advanced-card,.studio-activity)>summary{
 border-radius:11px;transition:background-color .2s var(--ui-ease),color .2s var(--ui-ease)}
.lovart-inspired-panel :where(.studio-layer-card,.studio-advanced-card,.studio-activity)>summary:hover{background:#2b393a;color:#f0fff9}
.lovart-inspired-panel .studio-model-card:focus-within,.lovart-inspired-panel .studio-reference-card:focus-within{
 border-color:#4b7367!important}
.lovart-inspired-panel .studio-primary-model{transition:border-color .2s var(--ui-ease),background .2s var(--ui-ease)}
.lovart-inspired-panel .studio-primary-model:focus-within{border-color:#38c79d!important;background:#2b403d!important}
.lovart-inspired-panel #imageModel{font-size:14px!important;text-overflow:ellipsis}
.lovart-inspired-panel .params-row label{min-width:0;gap:7px!important}
.lovart-inspired-panel .params-row select{line-height:1.4;min-height:24px;max-width:100%}
.lovart-inspired-panel #studioReferenceRole{max-width:118px}
.lovart-inspired-panel .studio-add-ref-button{transition:border-color .18s var(--ui-ease),background-color .18s var(--ui-ease),transform .18s var(--ui-ease)}
.lovart-inspired-panel .studio-add-ref-button:hover{border-color:#2de3ab!important;background:#264139!important}
.lovart-inspired-panel .studio-prompt-dock{flex:0 0 auto;position:relative;z-index:3;border-top:1px solid #3a4d4a!important;
 padding-bottom:max(14px,env(safe-area-inset-bottom))!important}
.lovart-inspired-panel .studio-prompt-card{border-radius:13px!important}
.lovart-inspired-panel .composer textarea{line-height:1.65!important;resize:vertical;max-height:min(34vh,300px)}
.lovart-inspired-panel .studio-send-button{transition:background-color .18s var(--ui-ease),box-shadow .18s var(--ui-ease),transform .18s var(--ui-ease)}
.lovart-inspired-panel .studio-send-button:focus-visible{box-shadow:0 0 0 4px #10cc913f!important}
.lovart-inspired-panel .studio-skill-cards button{min-height:40px}
.lovart-inspired-panel :where(.studio-layer-chip,.ref-thumb){min-width:0}
.lovart-inspired-panel :where(.studio-layer-select,.studio-layer-remove){min-height:30px}
:where(.toast,.toast-item){pointer-events:none}
@media(min-width:851px){
 .app-shell{grid-template-columns:clamp(186px,13.5vw,212px) minmax(0,1fr) clamp(378px,28vw,440px)!important}
 .lovart-inspired-panel>.assistant-header{min-height:74px!important}
 .lovart-inspired-panel .studio-config-scroll{padding:12px 15px 16px!important}
 .lovart-inspired-panel .studio-model-card{padding:15px!important}
 .lovart-inspired-panel .params-row{gap:9px!important}
 .lovart-inspired-panel .studio-prompt-dock{padding:11px 15px 14px!important}
 .workspace-header{min-height:60px}
}
@media(min-width:851px) and (max-height:760px){
 .lovart-inspired-panel>.assistant-header{min-height:64px!important;padding-block:8px!important}
 .lovart-inspired-panel .studio-config-scroll{gap:9px!important;padding-block:8px!important}
 .lovart-inspired-panel .studio-prompt-dock{padding-top:7px!important;padding-bottom:9px!important}
 .lovart-inspired-panel .composer textarea{min-height:52px!important}
}
@media(max-width:850px){
 .modal-back .modal{max-height:calc(100dvh - 24px)}
 .modal-head{padding:17px}
 .lovart-inspired-panel .studio-config-scroll{scrollbar-gutter:auto}
}
@media(prefers-reduced-motion:reduce){
 .modal-back .modal,:where(.composer-model-menu,.provider-quick-menu,.board-context-menu):not(.hidden){animation:none!important}
 .lovart-inspired-panel .studio-config-scroll{scroll-behavior:auto}
}