#editor{flex: 1 1 0%; min-height: 0px; overflow: auto; padding: 0px; background: rgb(244, 245, 239);}
.sidebar-builder-tools{margin-top: 22px; padding: 14px 4px 0px; border-top: 1px solid rgb(58, 68, 54); min-height: 0px;}
.sidebar-builder-tools>.nav-label{padding-left: 8px;}
.sidebar-builder-tools>input{display: block; width: 100%; margin: 0px 0px 8px; padding: 8px 9px; border: 1px solid rgb(69, 82, 71); border-radius: 6px; background: rgb(44, 56, 47); color: rgb(240, 242, 232); font-size: 11px;}
.sidebar-builder-tools>input::placeholder{color: rgb(157, 169, 151);}
.sidebar-builder-tools #list{max-height: 190px; overflow: auto; margin: 0px -4px 8px;}
.sidebar-builder-tools .builder-row{display: grid; grid-template-columns: 19px minmax(0,1fr); gap: 4px; align-items: center; padding: 2px 0px;}
.sidebar-builder-tools .builder-row>input{margin: 0px; width: 15px;}
.sidebar-builder-tools .builder-row>button{width: 100%; min-height: 0px; margin: 0px; padding: 8px 7px; border: 0px; border-radius: 5px; background: transparent; color: rgb(220, 229, 216); text-align: left; font-size: 11px; line-height: 1.3;}
.sidebar-builder-tools .builder-row>button:hover,.sidebar-builder-tools .builder-row>button.selected{background: rgb(49, 61, 48);}
.sidebar-builder-tools .badge{display: block; width: max-content; margin: 3px 0px 0px; background: rgb(70, 85, 68); color: rgb(191, 203, 184); font-size: 9px;}
.sidebar-builder-tools #bulk-tools{margin: 4px 0px; gap: 4px;}
.sidebar-builder-tools #bulk-tools button{font-size: 9px; min-height: 29px; margin: 0px; padding: 5px 3px; color: rgb(203, 214, 197); background: rgb(44, 56, 47); border-color: rgb(69, 82, 71);}
.sidebar-builder-tools .add-question{width: 100%; margin: 7px 0px; border: 1px dashed rgb(117, 134, 108); background: transparent; color: rgb(216, 228, 200); padding: 8px; font-size: 10px;}
.sidebar-builder-tools .sidebar-tool{display: block; width: 100%; min-height: 0px; margin: 4px 0px; padding: 5px 2px; border: 0px; background: transparent; color: rgb(174, 187, 170); text-align: left; font-size: 9px;}
.sidebar-builder-tools .sidebar-tool:hover{color: rgb(241, 245, 236); background: transparent;}
.sidebar .icon{color: rgb(174, 187, 170);}
.top-actions .button{width: auto; margin: 0px; text-decoration: none;}
.overview{min-height: 100%;}
@media (max-width:850px){.sidebar-builder-tools{display: none;}
#editor{overflow: visible;}
.top-actions .button{display: none;}}
:root{--line: #dfe4e1; --muted: #64716a; --ink: #25342d; font-size: 13px;}
.app-shell{grid-template-columns: 204px minmax(0,1fr);}
.sidebar{padding: 20px 12px 14px; overflow-y: auto; gap: 2px;}
.brand{font-size: 20px; padding: 0px 6px 20px; gap: 7px; letter-spacing: -0.6px;}
.brand span:last-child{font-size: 8px; letter-spacing: 0.6px;}
.store-switch{margin-bottom: 16px; cursor: default;}
.nav-item{font-size: 12px; padding: 10px; min-height: 36px;}
.sidebar-builder-tools{margin-top: 16px; padding-top: 16px;}
.sidebar-builder-tools>input{font-size: 12px; padding: 10px;}
.sidebar-builder-tools .builder-row>button{font-size: 12px; padding: 10px 7px; overflow-wrap: anywhere;}
.sidebar-builder-tools .sidebar-tool{font-size: 11px; padding: 6px 3px;}
.sidebar-builder-tools .add-question{font-size: 12px; min-height: 36px;}
.sidebar-builder-tools .help{color: rgb(193, 206, 191); font-size: 12px; padding: 8px; line-height: 1.5;}
.sidebar-builder-tools #bulk-tools button{font-size: 10px;}
.sidebar-bottom .upgrade{display: none;}
.sidebar-bottom .profile{padding-top: 12px;}
.workspace{min-height: 0px;}
.topbar{height: 68px; padding: 0px 22px; background: rgb(255, 255, 255);}
.top-actions #status{display: block; max-width: 240px; font-size: 12px; line-height: 1.4; color: rgb(82, 104, 91); white-space: normal;}
.top-actions #status.danger{color: rgb(164, 52, 39); background: transparent;}
.top-actions .button{font-size: 12px;}
#editor{padding: 0px 22px 28px; background: rgb(243, 245, 244); scroll-padding-top: 108px;}
.studio-toolbar{position: sticky; top: 0px; z-index: 10; background: rgb(243, 245, 244); padding: 16px 0px; gap: 12px; align-items: center; flex-wrap: wrap;}
.studio-breadcrumb{font-size: 11px; margin-bottom: 6px; color: rgb(100, 113, 106);}
.studio-title-row{flex-wrap: wrap; gap: 8px;}
.studio-title-row h2{font-size: 21px; line-height: 1.3; max-width: 440px; overflow-wrap: anywhere;}
.studio-save-state{font-size: 12px; color: rgb(82, 104, 91);}
.studio-save-state[data-dirty=true]{color: rgb(130, 87, 0); background: rgb(255, 240, 194); padding: 4px 8px; border-radius: 6px;}
.studio-toolbar-actions{gap: 6px; flex-wrap: wrap;}
.studio-toolbar-actions button{font-size: 12px; min-height: 34px; padding: 7px 10px; margin: 0px; border: 1px solid rgb(203, 212, 206); background: white; border-radius: 7px;}
.studio-toolbar-actions #save{font-weight: 650; border-color: rgb(114, 139, 124);}
.studio-toolbar-actions .primary{background: rgb(36, 92, 75); border-color: rgb(36, 92, 75); color: white;}

.studio-structure{grid-column: 1/-1; min-height: 0px; border-radius: 10px; background: rgb(255, 255, 255);}
.studio-structure summary{cursor: pointer; padding: 13px 16px; font-size: 13px; font-weight: 600; color: rgb(52, 72, 60);}
.studio-structure summary span{font-weight: 400; color: rgb(100, 113, 106); margin-left: 12px; font-size: 12px;}
.studio-structure-head,.studio-template-path,.studio-assignment{display: none;}
.studio-tree{display: flex; flex-wrap: wrap; gap: 12px; padding: 0px 16px;}
.studio-tree-group{flex: 1 1 190px; border-top: 1px solid rgb(228, 233, 230);}
.studio-add{width: auto; margin: 12px 16px;}
.studio-editor{min-width: 0px;}
.studio-builder-card{padding: 16px 18px; background: rgb(255, 255, 255); border-radius: 10px;}
.studio-builder-card label{font-size: 12px; width: calc(50% - 8px);}
.studio-builder-card .help{font-size: 12px; line-height: 1.55; color: rgb(100, 113, 106);}
.studio-builder-card .upb-admin-global-enabled{display: flex; align-items: center; gap: 8px; width: 100%; margin: 12px 0px 0px;}
input[type=checkbox]{width: 16px; height: 16px; flex-shrink: 0; accent-color: rgb(36, 92, 75);}
.studio-editor .tabs{background: rgb(232, 238, 234); border-radius: 9px; padding: 5px; gap: 3px; margin: 0px 0px 4px; scrollbar-width: thin;}
.studio-editor .tabs button{font-size: 12px; color: rgb(83, 102, 90); padding: 8px 12px;}
.studio-editor .tabs button[aria-selected=true]{background: white; color: rgb(36, 92, 75); box-shadow: 0 1px 4px #203d241a;}


.help{line-height: 1.6; color: rgb(100, 113, 106); font-size: 12px;}















.studio-preview-head h3{font-size: 14px;}





.overview{padding: 32px 0px;}
.overview-heading h2{font-size: 28px;}
.overview-heading p{font-size: 13px; line-height: 1.6;}
.stat{background: white;}
.stat p,.stat small{font-size: 11px;}
.empty-note{font-size: 13px; line-height: 1.6;}
@media (min-width:1450px){}
@media (max-width:1100px){.app-shell{grid-template-columns: 184px minmax(0,1fr);}
#editor{padding: 0px 16px 24px;}

.studio-toolbar{position: static;}


.studio-builder-card label{width: 100%; margin-right: 0px;}


.choice-grip{display: none;}
.top-actions #status{max-width: 180px;}
.brand{font-size: 17px;}}
@media (max-width:900px){.app-shell{height: auto; min-height: 100dvh; overflow: visible; grid-template-columns: 180px minmax(0,1fr);}
.sidebar{display: flex; position: sticky; top: 0px; height: 100dvh;}
.sidebar-builder-tools{display: block;}


.studio-toolbar-actions{width: auto;}
.studio-toolbar-actions button{flex: 0 1 auto;}
.topbar{height: auto; min-height: 72px; flex-wrap: wrap; padding: 14px 16px;}
.top-actions{margin-left: 0px;}
.top-actions .button{display: inline-flex;}

.studio-structure summary span{display: block; margin: 5px 0px 0px;}}
@media (max-width:600px){.app-shell{display: block;}
.sidebar{position: static; height: auto; padding: 14px;}
.sidebar .nav-item,.sidebar .store-switch,.sidebar-bottom{display: none;}
.brand{padding-bottom: 10px;}
.sidebar-builder-tools{margin-top: 0px; padding-top: 10px;}
.sidebar-builder-tools #list{max-height: 140px;}
.sidebar-builder-tools .sidebar-tool{display: inline-block; width: auto; margin-right: 14px;}
.sidebar-builder-tools .add-question{width: auto; padding: 8px 14px;}

.studio-title-row h2{font-size: 20px;}
.studio-toolbar{align-items: flex-start;}
.top-actions #status{max-width: none;}
.overview-heading{flex-wrap: wrap;}
.stats{grid-template-columns: 1fr;}

}
.topbar{height: 44px; min-height: 44px; padding: 0px 16px; gap: 8px;}
.topbar{position: static !important; top: auto !important;}
.topbar{display: none !important;}
.studio-toolbar-actions .toolbar-preview-link{font-size: 11px; padding: 5px 8px; text-decoration: none; border: 1px solid rgb(203, 212, 206); border-radius: 7px; background: rgb(255, 255, 255); color: rgb(52, 72, 60); white-space: nowrap;}
.studio-toolbar-actions #builder-status{font-size: 10px; color: rgb(82, 104, 91); max-width: 180px; white-space: normal; line-height: 1.25;}
.studio-editor>.studio-builder-card{display: none;}
.studio-editor #panel>.studio-builder-card{display: block;}
.topbar .title-row h1{font-size: 14px;}
.back-to-builders{width: 30px; height: 30px; flex-basis: 30px; font-size: 19px;}
.top-actions{gap: 6px;}
.top-actions #status{font-size: 11px;}
.top-actions .button{font-size: 11px; padding: 7px 9px;}
.studio-toolbar{padding: 6px 0px; gap: 8px;}
.studio-toolbar{position: static !important; top: auto !important;}
.studio-title-row{gap: 6px;}
.studio-title-row h2{font-size: 18px;}
.studio-draft-badge,.studio-save-state{font-size: 10px; padding: 3px 6px;}
.studio-toolbar-actions{gap: 4px;}
.studio-toolbar-actions button{min-height: 30px; padding: 5px 8px; font-size: 11px;}


.studio-secondary-actions{padding: 4px 0px;}
.studio-secondary-actions button{font-size: 11px; padding: 5px 8px;}
.studio-structure summary{padding: 8px 12px; font-size: 12px;}

.studio-preview-head{padding: 10px 4px 2px;}

.app-shell{grid-template-columns: 176px minmax(0,1fr);}
.sidebar{background: rgb(237, 240, 238); color: rgb(52, 72, 60); border-right: 1px solid rgb(214, 222, 216); padding: 20px 10px;}
.sidebar .brand{font-size: 15px; letter-spacing: -0.3px; color: rgb(38, 61, 48); padding: 0px 8px 4px;}
.sidebar-builder-tools{border: 0px; margin-top: 10px; padding-top: 10px;}
.sidebar-builder-tools .nav-label{color: rgb(98, 115, 106); font-size: 10px; letter-spacing: 0.8px;}
.sidebar-builder-tools>input{background: rgb(255, 255, 255); border-color: rgb(203, 213, 206); color: rgb(37, 61, 46);}
.sidebar-builder-tools>input::placeholder{color: rgb(106, 122, 112);}
.sidebar-builder-tools .builder-row>button{color: rgb(52, 72, 60);}
.sidebar-builder-tools .builder-row>button:hover,.sidebar-builder-tools .builder-row>button.selected{background: rgb(220, 232, 223); color: rgb(23, 61, 41);}
.sidebar-builder-tools .badge{background: rgb(220, 229, 223); color: rgb(65, 93, 75); font-size: 10px;}
.sidebar-builder-tools #list{max-height: calc(100dvh - 400px); min-height: 80px;}
.sidebar-builder-tools #bulk-tools{display: flex; flex-wrap: wrap;}
.sidebar-builder-tools #bulk-tools button{color: rgb(75, 98, 83); background: rgb(255, 255, 255); border-color: rgb(203, 213, 206); flex: 1 1 65px;}
.sidebar-builder-tools .add-question{color: rgb(36, 92, 75); border-color: rgb(123, 155, 134); background: rgb(248, 251, 249);}
.sidebar-builder-tools .sidebar-tool{color: rgb(83, 107, 92);}
.sidebar-builder-tools .sidebar-tool:hover{color: rgb(23, 61, 41); background: rgb(224, 232, 226);}
.sidebar-builder-tools .help{color: rgb(89, 111, 97);}
@media (max-width:900px){.app-shell{grid-template-columns: 160px minmax(0,1fr);}}
@media (max-width:600px){.app-shell{display: block;}
.sidebar-builder-tools #list{max-height: 140px; min-height: 0px;}}
[hidden]{display: none !important;}
.studio-editor #panel{display: flex; flex-direction: column;}




.studio-builder-card summary{cursor: pointer; font-size: 13px; font-weight: 600; color: rgb(52, 72, 60);}
.studio-builder-card summary span{font-size: 12px; font-weight: 400; color: rgb(100, 113, 106); margin-left: 8px;}
.studio-builder-card[open] summary{margin-bottom: 14px;}
.studio-preview-head>div{min-width: 0px;}
.studio-preview-head button{flex-shrink: 0;}
.back-to-builders{width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border: 1px solid rgb(203, 213, 206); border-radius: 8px; background: rgb(255, 255, 255); color: rgb(53, 84, 68); font-size: 22px; line-height: 1; cursor: pointer;}
.back-to-builders:hover{background: rgb(230, 238, 232);}
.app-shell.builder-editing .sidebar-builder-tools{display: none;}
.app-shell.builder-editing .sidebar{padding-top: 20px;}
.app-shell.builder-editing{grid-template-columns: minmax(0,1fr);}
.app-shell.builder-editing .sidebar{display: none;}












@media (max-width:1100px){.studio-builder-card summary span{display: block; margin: 5px 0px 0px;}}



.studio-preview-head{display: flex; justify-content: space-between; align-items: center; gap: 8px;}
.studio-preview-head>div{flex: 1 1 0%; width: auto; max-width: none;}
.studio-preview-head h3{width: auto; max-width: none; white-space: normal; line-height: 1.4;}
.studio-preview-head button{width: 30px; flex: 0 0 30px; margin: 0px;}
.topbar{margin: 0px; min-height: 56px; height: 56px;}
.workspace:has(.studio-toolbar) .topbar .breadcrumb{display: none;}
.studio-toolbar{margin: 0px; padding: 12px 0px; position: sticky; top: 0px;}
.studio-breadcrumb{display: none;}
.studio-structure summary{padding: 10px 14px;}
.studio-builder-card{padding: 12px 16px;}
.studio-builder-card summary span{display: none;}




@media (max-width:900px){.topbar{height: auto; min-height: 56px;}
.studio-toolbar{position: static;}}
.layout-designer{padding: 16px; container-type: inline-size;}
.layout-intro{padding-bottom: 16px; color: rgb(53, 72, 61);}
.layout-intro strong{font-size: 17px;}
.layout-intro p{margin: 7px 0px; line-height: 1.5;}
.layout-intro small{color: rgb(100, 113, 106);}
.layout-section{border: 1px solid rgb(220, 228, 223); background: rgb(245, 248, 245); border-radius: 12px; padding: 16px; margin-bottom: 16px;}
.layout-section>h3{font-size: 16px; margin: 0px 0px 14px;}
.layout-row{margin: 0px 0px 12px; border: 1px solid rgb(216, 224, 219); border-radius: 9px; background: rgb(255, 255, 255); overflow: hidden;}
.layout-row-toolbar{display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: rgb(237, 242, 237); flex-wrap: wrap;}
.layout-row-toolbar>strong{margin-right: auto; font-size: 12px;}
.layout-row-toolbar label{display: flex; align-items: center; gap: 7px; font-size: 12px; margin: 0px;}
.layout-row-toolbar select{width: 58px; min-height: 30px; padding: 4px;}
.layout-row-toolbar button,.layout-field-tools button{font-size: 11px; padding: 5px 8px; min-height: 28px; border: 1px solid rgb(211, 220, 213); border-radius: 5px; background: white; color: rgb(53, 72, 61);}
.layout-row-toolbar button:disabled,.layout-field-tools button:disabled{opacity: 0.35; cursor: default;}
.layout-cells{display: grid; grid-template-columns: repeat(var(--layout-columns),minmax(0,1fr)); gap: 12px; padding: 12px;}
.layout-field{min-width: 0px; padding: 12px; border: 1px solid rgb(220, 228, 223); border-radius: 7px; cursor: grab; background: rgb(255, 255, 255); box-shadow: 0 2px 5px #193b2210;}
.layout-field-head{display: flex; align-items: center; gap: 8px; margin-bottom: 12px; overflow-wrap: anywhere; font-size: 13px;}
.layout-input{border: 1px solid rgb(210, 218, 213); border-radius: 5px; min-height: 38px; padding: 9px; color: rgb(122, 133, 126); font-size: 12px; overflow-wrap: anywhere;}
.layout-swatches,.layout-choices{display: flex; gap: 7px; flex-wrap: wrap; min-height: 38px;}
.layout-swatches span{width: 27px; height: 27px; border-radius: 50%; border: 1px solid rgb(204, 215, 205);}
.layout-choices span{padding: 6px; border: 1px solid rgb(220, 228, 223); border-radius: 4px; font-size: 12px;}
.layout-field-tools{display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px;}
.layout-empty,.layout-new-row{border: 1px dashed rgb(177, 196, 181); border-radius: 6px; padding: 18px; text-align: center; color: rgb(113, 132, 121); font-size: 12px; min-height: 72px; display: grid; place-items: center;}
.layout-new-row{min-height: 40px; padding: 12px;}
.layout-drop-target{background: rgb(226, 239, 223); outline: 2px solid #487747; outline-offset: -2px;}
.layout-field.dragging{opacity: 0.45;}
.layout-feedback{color: rgb(65, 103, 73); font-size: 12px;}
@media (max-width:500px){.layout-cells{grid-template-columns: 1fr;}
.layout-empty{min-height: 40px;}}
.flow-workspace{max-width: 1440px; margin: auto; min-width: 0px; padding: 20px; color: rgb(38, 57, 44);}
.flow-workspace *{box-sizing: border-box;}
.flow-workspace .studio-toolbar{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 0px 0px 20px; border: 0px; background: transparent;}
.flow-workspace .studio-title-row{flex-wrap: wrap; gap: 10px;}
.flow-workspace .studio-title-row h2{font-size: 24px; overflow-wrap: anywhere;}
.flow-workspace .studio-toolbar-actions{display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
.flow-workspace button,.flow-workspace summary{min-height: 40px; font-size: 13px;}
.flow-workspace button:focus-visible,.flow-workspace summary:focus-visible,.flow-workspace input:focus-visible,.flow-workspace select:focus-visible,.flow-workspace textarea:focus-visible{outline: 3px solid #42694a; outline-offset: 3px;}
.flow-workspace .back-to-builders{position: static; display: inline-flex; width: 40px; align-items: center; justify-content: center; margin: 0px;}
.flow-actions{position: relative;}
.flow-actions summary{display: flex; align-items: center; padding: 8px 12px; cursor: pointer; border: 1px solid rgb(203, 215, 203); border-radius: 8px; background: rgb(255, 255, 255);}
.flow-actions>div{position: absolute; right: 0px; top: 100%; z-index: 5; padding: 10px; min-width: 190px; background: rgb(255, 255, 255); border: 1px solid rgb(203, 215, 203); border-radius: 8px; box-shadow: 0 8px 25px #24372920; display: grid; gap: 5px;}
.flow-nav{display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 8px; background: rgb(233, 238, 230); border-radius: 12px;}
.flow-nav button{display: flex; align-items: center; justify-content: center; gap: 8px; border: 0px; background: transparent; color: rgb(83, 102, 79); padding: 10px;}
.flow-nav button[aria-current=step]{background: rgb(255, 255, 255); box-shadow: 0 2px 5px #23332710; color: rgb(36, 92, 75); font-weight: 700;}
.flow-nav button>span:first-child{display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: rgb(224, 231, 221); font-size: 11px;}
.flow-nav button[aria-current=step]>span:first-child{background: rgb(36, 92, 75); color: rgb(255, 255, 255);}
.flow-context{display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0px; color: rgb(92, 108, 87);}
.flow-context p{margin: 0px; overflow-wrap: anywhere;}
.flow-context label{margin: 0px; max-width: 270px; flex: 0 1 270px; font-size: 11px;}
.flow-context select{font-size: 12px; padding: 8px;}
.flow-body{min-width: 0px;}
.flow-form-body{display: grid; grid-template-columns: minmax(185px,230px) minmax(0,1fr); align-items: start; gap: 20px;}
.flow-main{min-width: 0px;}
.flow-main>h3{font-size: 19px; margin: 0px 0px 14px;}
.flow-workspace .card{padding: 20px; border: 1px solid rgb(220, 228, 215); border-radius: 12px; background: rgb(255, 255, 255); margin: 0px 0px 16px; box-shadow: none; min-width: 0px;}
.flow-workspace h4{font-size: 16px; margin: 0px 0px 14px;}
.flow-workspace label{font-size: 13px; display: block; margin: 12px 0px;}
.flow-workspace input:not([type=checkbox]),.flow-workspace select,.flow-workspace textarea{max-width: 100%; width: 100%; min-width: 0px; font-size: 14px; padding: 10px; border: 1px solid rgb(203, 215, 203); border-radius: 7px; background: rgb(255, 255, 255);}
.flow-workspace input[type=checkbox]{width: 16px; height: 16px; margin-right: 6px; vertical-align: middle;}
.flow-workspace .help{font-size: 13px; line-height: 1.6; color: rgb(100, 114, 94); overflow-wrap: anywhere;}
.flow-workspace .flow-fields{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px;}
.flow-button-row{display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0px;}
.flow-product{padding: 18px; background: rgb(245, 248, 242); border: 1px solid rgb(220, 230, 213); border-radius: 9px; margin: 20px 0px;}
.flow-outline-group{display: grid; gap: 3px; margin-bottom: 14px;}
.flow-outline-group button{text-align: left; display: grid; gap: 2px; width: 100%; background: transparent; border-color: transparent; padding: 9px 12px; margin: 0px; overflow-wrap: anywhere;}
.flow-outline-group button[data-flow-question]{padding-left: 24px;}
.flow-outline-group button[aria-pressed=true]{background: rgb(230, 238, 225); border-color: rgb(200, 216, 188);}
.flow-outline-group small{font-size: 11px; color: rgb(106, 122, 98);}
#flow-outline>label{margin-top: 0px;}
#flow-add-section{width: 100%; border-style: dashed;}
.flow-question-title{display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px;}
.flow-choice-list{border-top: 1px solid rgb(227, 233, 222); padding-top: 16px; margin-top: 16px;}
.flow-choice-row{display: grid; grid-template-columns: minmax(0,1fr) auto 40px 40px; gap: 8px; align-items: center;}
.flow-choice-row label{margin: 8px 0px;}
.flow-choice-row .badge{white-space: normal; text-align: center;}
.flow-choice-row button{padding: 5px; min-width: 0px; margin: 0px;}
.flow-workspace details:not(.flow-actions){margin: 16px 0px 0px; min-width: 0px;}
.flow-workspace details>summary{cursor: pointer; padding: 12px 0px; color: rgb(77, 105, 66);}
.flow-layout .layout-designer{padding: 0px;}
.flow-workspace textarea{resize: vertical;}
.flow-notice{margin-bottom: 16px; padding: 14px; background: rgb(255, 245, 220); border: 1px solid rgb(232, 215, 167); border-radius: 8px; font-size: 13px;}
.flow-footer{display: flex; gap: 16px; align-items: center; justify-content: space-between; border-top: 1px solid rgb(217, 226, 211); margin-top: 24px; padding-top: 16px;}
.flow-footer span{font-size: 12px; color: rgb(107, 122, 100);}
.flow-issues{padding: 0px; list-style: none;}
.flow-issues li{padding: 16px; margin: 12px 0px; background: rgb(255, 247, 233); border-left: 3px solid rgb(198, 161, 85); overflow-wrap: anywhere;}
.flow-issues p{margin: 6px 0px;}
.flow-empty{padding: 40px; text-align: center;}
@media (max-width:1000px){.flow-workspace{padding: 16px;}
.flow-form-body{grid-template-columns: 190px minmax(0,1fr);}
.flow-nav button{gap: 5px; padding: 8px 4px;}}
@media (max-width:680px){.flow-workspace{padding: 12px;}
.flow-actions>div{position: static;}
.flow-workspace .studio-title-row h2{font-size: 21px;}
.flow-workspace .studio-toolbar{padding-bottom: 14px;}
.flow-nav{grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 6px;}
.flow-nav button{font-size: 12px; justify-content: flex-start; padding: 9px 6px;}
.flow-form-body{grid-template-columns: minmax(0,1fr); gap: 16px;}
#flow-outline{border: 1px solid rgb(220, 228, 215); border-radius: 10px; padding: 12px; background: rgb(248, 250, 245);}
#flow-outline-items{max-height: 210px; overflow-y: auto;}
.flow-workspace .card{padding: 15px;}
.flow-context{flex-direction: column; align-items: stretch; gap: 10px;}
.flow-context label{flex: 1 1 auto; max-width: none;}
.flow-workspace .flow-fields{grid-template-columns: minmax(0,1fr); gap: 0px;}
.flow-choice-row{grid-template-columns: minmax(0,1fr) 40px 40px;}
.flow-choice-row>label{grid-column: 1; grid-row: 1;}
.flow-choice-row .badge{grid-column: 1; grid-row: 2; justify-self: start; font-size: 10px; margin-bottom: 8px;}
.flow-choice-row>button{grid-row: 1;}
.flow-choice-row [data-flow-choice-up]{grid-column: 2;}
.flow-choice-row [data-flow-choice-remove]{grid-column: 3;}
.flow-footer{gap: 8px;}
.flow-footer button{font-size: 12px;}
.flow-workspace .layout-row-toolbar{flex-wrap: wrap;}
.flow-workspace .layout-cells{grid-template-columns: minmax(0,1fr);}}
.flow-price-table{max-width: 100%; overflow: auto;}
.flow-price-table table{width: 100%; border-collapse: collapse; font-size: 12px;}
.flow-price-table th{font-size: 11px; text-align: left; color: rgb(98, 118, 90); border-bottom: 1px solid rgb(214, 225, 208); padding: 10px;}
.flow-price-table td{vertical-align: middle; padding: 12px 8px; border-bottom: 1px solid rgb(229, 235, 223); min-width: 100px;}
.flow-price-table td:first-child{min-width: 28px; width: 28px;}
.flow-price-table td:nth-child(2){min-width: 145px;}
.flow-price-table td p{margin: 4px 0px;}
.flow-price-table td label{font-size: 10px; margin: 4px 0px;}
.flow-price-table td select,.flow-price-table td input:not([type=checkbox]):not([type=radio]){font-size: 12px; padding: 8px; min-width: 100px;}
.flow-price-table input[type=radio]{width: 16px; height: 16px; vertical-align: middle;}
.flow-sr-only{position: absolute !important; width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important;}
.flow-price-table tr[hidden]{display: none;}
.flow-package{border: 1px solid rgb(216, 227, 209); border-radius: 8px; padding: 0px 14px 14px; background: rgb(250, 252, 247);}
.flow-package .flow-fields{border-top: 1px solid rgb(227, 235, 221); padding-top: 10px;}
.flow-library-dialog{width: min(650px, -24px + 100vw); max-height: 85vh; overflow: auto; padding: 24px; border: 1px solid rgb(205, 218, 198); border-radius: 12px; box-shadow: 0 20px 80px #12231140; color: rgb(38, 57, 44);}
.flow-library-dialog::backdrop{background: rgba(20, 39, 25, 0.376);}
.flow-library-head{display: flex; justify-content: space-between; align-items: center; gap: 12px;}
.flow-library-head h3{margin: 0px; font-size: 20px;}
.flow-library-head button{min-width: 40px;}
.flow-library-dialog label{display: block; margin: 16px 0px;}
.flow-library-dialog input,.flow-library-dialog select{width: 100%; padding: 10px; font-size: 14px;}
.flow-library-dialog #flow-library-list{display: grid; gap: 8px; margin: 16px 0px;}
.flow-library-dialog #flow-library-list button{text-align: left;}
.flow-library-dialog button{min-height: 40px;}
.flow-library-dialog #flow-library-feedback{color: rgb(164, 77, 48); overflow-wrap: anywhere;}
@media (max-width:680px){.flow-price-table table,.flow-price-table tbody,.flow-price-table tr,.flow-price-table td{display: block; width: 100%;}
.flow-price-table thead{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px);}
.flow-price-table tr{padding: 12px; border: 1px solid rgb(216, 227, 209); border-radius: 10px; margin-bottom: 12px;}
.flow-price-table td{border: 0px; padding: 4px 0px; min-width: 0px !important;}
.flow-price-table td:first-child{width: 100%;}
.flow-price-table td input[type=radio]{width: 16px;}
.flow-library-dialog{padding: 18px;}}
.flow-rule{padding: 14px; border: 1px solid rgb(220, 228, 215); border-radius: 10px; background: rgb(251, 252, 249);}
.flow-condition{padding: 12px; border: 1px solid rgb(212, 223, 205); border-radius: 8px; background: rgb(248, 250, 245);}
.flow-condition .flow-condition{background: rgb(255, 255, 255);}
.flow-condition-child{margin: 12px 0px;}
.flow-condition-head label{margin-top: 0px;}
.flow-action-row{border-top: 1px solid rgb(220, 229, 214); padding: 12px 0px;}
.flow-action{min-width: 0px;}
.flow-rule select[multiple]{min-height: 100px;}
.flow-rule h4{margin-top: 18px;}
.flow-rule summary{overflow-wrap: anywhere;}
.flow-editor-preview{display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,330px); gap: 20px; align-items: start;}
.flow-preview{background: rgb(255, 255, 255); padding: 16px; border: 1px solid rgb(220, 228, 215); border-radius: 12px; position: sticky; top: 16px;}
.flow-workspace .flow-preview{margin: 0px !important;}
.flow-preview [data-flow-preview-root]{max-height: 75vh; overflow: auto; min-width: 0px;}
.flow-preview-dialog{width: min(1000px, -24px + 100vw); max-height: 90vh; overflow: auto; border: 1px solid rgb(214, 223, 209); border-radius: 12px; padding: 24px; background: white; color: rgb(38, 57, 44);}
.flow-preview-dialog::backdrop{background: rgba(20, 39, 24, 0.44);}
.flow-preview-dialog [data-flow-preview-root]{padding-top: 16px;}
.flow-preview-dialog button{min-height: 40px;}
.flow-preview .upb-builder,.flow-preview-dialog .upb-builder{min-width: 0px;}
.flow-preview input[type=checkbox],.flow-preview input[type=radio]{width: 16px !important; height: 16px !important;}
.flow-preview .upb-total{font-size: 23px;}
.flow-preview label{font-size: 12px;}
.flow-preview .upb-group{padding: 12px;}
.flow-preview .upb-package{padding: 10px;}
.flow-preview .upb-add{width: 100%;}
#flow-test-result{margin-top: 24px;}
#flow-test-answers{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px;}
@media (max-width:1150px){.flow-editor-preview{grid-template-columns: minmax(0,1fr);}
.flow-preview{position: static;}
.flow-preview [data-flow-preview-root]{max-height: 700px;}}
@media (max-width:680px){#flow-test-answers{grid-template-columns: minmax(0,1fr);}
.flow-preview-dialog{padding: 16px;}}
.flow-span,.flow-fields>details{grid-column: 1 / -1;}
.flow-question-detail>.flow-fields{margin-block: 16px;}
.flow-question-detail>.flow-fields>details{padding: 12px; border: 1px solid rgb(220, 226, 221); border-radius: 8px;}
.flow-inline-price{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding-bottom:12px;border-bottom:1px solid rgb(220,228,215);}
.flow-inline-price>label{margin:4px 0;}
.flow-inline-price>details{grid-column:1 / -1;}
.flow-inline-visibility{padding:12px;margin:12px 0;border:1px solid rgb(220,228,215);border-radius:8px;}
.flow-inline-condition{margin:12px 0;}
@media(max-width:680px){.flow-inline-price{grid-template-columns:minmax(0,1fr);}.flow-choice-row .flow-inline-price{grid-row:3;}.flow-inline-price button{grid-row:auto;}}

.flow-nav small{display:block;font-size:11px;font-weight:400;margin-top:3px;}
.flow-nav button>span:last-child{text-align:left;min-width:0;}
.flow-editor-preview:has(>.flow-preview:not([open])){grid-template-columns:minmax(0,1fr);}
.flow-preview:not([open]){position:static;padding:12px 16px;}
.flow-section-settings{margin-top:18px;padding:12px;border:1px solid rgb(220,228,215);border-radius:8px;}
.flow-section-settings>.flow-section{margin-top:12px;}