.expression-trigger{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:5px;padding:1px 4px;min-width:23px;height:21px;border:1px solid #666;border-radius:4px;background:#303536;color:#c7ddda;font:italic 11px ui-monospace,monospace;cursor:pointer;flex-shrink:0}
.expression-trigger:hover,.expression-trigger:focus-visible{color:#16f4d0;border-color:#16f4d0;background:#163c38}
.expression-trigger.active{color:#16f4d0;border-color:#16f4d0}
[data-bound]{border-color:#16f4d0!important;background:#19332e!important}
.inline-field>span{display:inline-flex;align-items:center;white-space:nowrap}
.expression-modal{width:min(980px,96vw);max-width:980px}
.expression-modal .modal-body{padding:14px;overflow:auto}
.expression-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);gap:16px;min-height:430px}
.expression-work,.expression-browser{min-width:0}
.expression-work .field>span{display:flex;justify-content:space-between;margin-bottom:7px}
.expression-builder .code-editor{width:100%;min-height:130px;font-size:13px;line-height:1.6;resize:vertical;padding:10px}
.expression-preview-heading{display:flex;align-items:center;gap:6px;color:#c2ceca;font-size:12px;margin:10px 0 6px}
.expression-preview-heading input{width:68px;padding:4px;margin-left:6px}
#expression-result{display:block;min-height:40px;max-height:150px;overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap;padding:10px;border:1px solid #555;border-radius:5px;background:#192e2a;color:#b8f4e2;font:13px ui-monospace,monospace}
#expression-preview-error{color:#ffb2a8;font-size:12px;overflow-wrap:anywhere;min-height:18px;margin:5px 0}
.expression-shortcuts,.expression-tokens{display:flex;flex-wrap:wrap;gap:5px}
.expression-token{padding:5px 7px;max-width:100%;overflow-wrap:anywhere;text-align:left;border:1px solid #555;border-radius:4px;background:#303536;color:#e3eae7;font-size:11px;cursor:pointer}
.expression-token:hover,.expression-token:focus-visible{border-color:#16f4d0;background:#163c38;color:#16f4d0}
.expression-browser{border-left:1px solid #555;padding-left:14px;display:flex;flex-direction:column;max-height:570px}
.expression-browser .field input{width:100%}
#expression-library{overflow:auto;padding-right:6px;flex:1;min-height:130px}
#expression-library details{padding:8px 0;border-bottom:1px solid #454b49}
.expression-builder summary{cursor:pointer;color:#e2ebe6;font-size:12px;padding:6px 0}
.expression-tokens{padding:5px 0}
.expression-condition,.expression-help{margin-top:12px;border-top:1px solid #555;padding-top:5px}
.expression-condition .grid2{gap:7px}
.expression-condition .field{min-width:0;margin:3px 0}
.expression-condition input,.expression-condition select{width:100%;min-width:0}
.expression-condition .check input{width:auto}
.expression-help p{font-size:12px;line-height:1.7}
.expression-modal .hint{font-size:11px;line-height:1.5;color:#bdcbc5}
.expression-modal footer{flex-wrap:wrap;gap:8px}
@media(max-width:680px){.expression-builder{grid-template-columns:1fr}.expression-browser{max-height:260px;border-left:0;border-top:1px solid #555;padding:10px 0 0}.expression-modal .modal-body{max-height:72vh}.expression-modal footer button{padding:7px;font-size:12px}}

.expression-input{position:relative;display:block;min-width:0;width:100%;line-height:normal}
.expression-input>input,.expression-input>select,.expression-input>textarea{display:block;width:100%;min-width:0;padding-right:32px}
.expression-input>select{padding-right:47px}
.expression-input>.expression-trigger{position:absolute;right:1px;top:1px;bottom:1px;height:auto;width:27px;min-width:27px;margin:0;padding:0;border:0;border-left:1px solid #484b4b;border-radius:0 3px 3px 0;background:#ffffff05;font-size:11px;z-index:1}
.expression-input:focus-within>.expression-trigger{border-left-color:#16f4d0}
.expression-input:has(textarea)>.expression-trigger{bottom:auto;height:26px}
.field>.expression-input{overflow:visible;line-height:normal}
.inline-field>.expression-input{flex:1 1 0%;min-width:0;width:0;flex-shrink:1;white-space:normal}
.inspector-section .transform-grid .inline-field:nth-child(n+5)>.expression-input{width:0}
.inline-field .expression-input>input{height:28px;padding-right:29px}
.text-toolbar>.expression-input:has(select){width:126px;flex:0 0 126px}
.text-toolbar>.expression-input:has(input){width:75px;flex:0 0 75px}
.text-toolbar>.expression-input>select,.text-toolbar>.expression-input>input{height:24px;font-size:10px;padding-left:4px}

.expression-input>input[type=number]{appearance:textfield;-moz-appearance:textfield}
.expression-input>input[type=number]::-webkit-inner-spin-button,.expression-input>input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.expression-input>select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='m1 1 3.5 3.5L8 1' fill='none' stroke='%23aaaead' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 33px center;background-size:9px 6px}
